منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · ترجمه: ۱۸ مرداد ۱۴۰۵ · زمان مطالعه: حدود ۱۱ دقیقه

مصورسازی اطلاعات (Information Visualization) چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند.

مصورسازی اطلاعات (Information Visualization) یعنی داده را چنان به شکل دیداری درآوریم که مخاطب معنایش را سریع‌تر، دقیق‌تر و با اطمینان بیشتری بگیرد. تعریف کوتاهش همین است، اما کلمهٔ تعیین‌کننده در آن «معنا» است، نه «شکل». نموداری که فقط داده را به میله و خط تبدیل می‌کند کارش را نصفه رها کرده. نمودار خوب به یک پرسش مشخص جواب می‌دهد و مخاطب را به یک تصمیم نزدیک‌تر می‌کند.

همین تمایز، مصورسازی اطلاعات را از دو چیزی که مدام با آن اشتباه گرفته می‌شوند جدا می‌کند. یکی گزارش‌سازی، که هدفش ثبت و بایگانی همهٔ اعداد است. دیگری تزئین داده، که در آن نمودار نقش دکور اسلاید را بازی می‌کند. یک صفحهٔ گزارش می‌تواند پر از عدد درست باشد و هیچ چیزی نگوید. یک اینفوگرافیک می‌تواند بسیار زیبا باشد و مخاطب را به نتیجهٔ غلط برساند. کار طراح، ساختن پلی است بین این دو: دقیق مثل گزارش، خوانا مثل تصویر.

چرا چشم زودتر از ذهن به نتیجه می‌رسد

پشت هر نمودار خوب یک واقعیت ادراکی ساده ایستاده است: بخشی از سامانهٔ بینایی ما پیش از آنکه توجه آگاهانه وارد شود، کار خودش را کرده است. تفاوت طول دو میله، جدا بودن یک نقطهٔ پرت از بقیه، یا یک لکهٔ رنگی در میان خاکستری‌ها، در کسری از ثانیه و بدون تلاش ذهنی دیده می‌شوند. به این ویژگی‌ها «پیش‌توجهی» می‌گویند و سرمایهٔ اصلی مصورسازی اطلاعات همین‌هاست. وقتی همان اطلاعات را در قالب جدولی از اعداد می‌گذارید، مخاطب مجبور است تک‌تک بخواند، در حافظهٔ کاری نگه دارد و مقایسه کند. یعنی دقیقاً همان بار شناختیای که قرار بود از دوشش برداریم.

نکتهٔ عملی مهم‌تر این است که همهٔ روش‌های دیداری به یک اندازه دقیق نیستند. ذهن ما اختلاف طول روی یک محور مشترک را با خطای بسیار کم تشخیص می‌دهد، اختلاف زاویه را بدتر، و اختلاف مساحت را از آن هم بدتر. همین یک جمله، بخش بزرگی از دعواهای همیشگی را حل می‌کند. نمودار میله‌ای معمولاً از نمودار دایره‌ای بهتر است، نه به این دلیل که مد شده، بلکه چون از سازوکاری استفاده می‌کند که در آن خطای انسان کمتر است. اگر می‌خواهید مخاطب سهم پنج دستهٔ نزدیک‌به‌هم را مقایسه کند، پنج میلهٔ مرتب‌شده کار را در یک نگاه تمام می‌کنند. همان پنج عدد در یک دایره، مخاطب را وادار می‌کند زاویه‌ها را حدس بزند.

لایهٔ دوم این ماجرا اصول گشتالت است. چشم آنچه را نزدیک هم است یک گروه می‌بیند، آنچه را هم‌رنگ است هم‌خانواده فرض می‌کند و خطوط پیوسته را دنبال می‌کند. این یعنی فاصله‌گذاری در یک داشبورد یک تصمیم زیبایی‌شناختی نیست؛ یک تصمیم معنایی است. اگر سه شاخص مربوط به درآمد را با همان فاصله‌ای بچینید که شاخص‌های پشتیبانی را، عملاً به مخاطب گفته‌اید این شش عدد یک خانواده‌اند.

چهار اصلی که نمودار را از تزئین جدا می‌کند

اگر بخواهیم همهٔ توصیه‌های پراکندهٔ این حوزه را در چند قاعدهٔ قابل‌اجرا جمع کنیم، به این چهار اصل می‌رسیم:

• - ۱. روشنیِ پرسش: پیش از انتخاب هر نموداری، پرسش و مخاطبش را در یک جملهٔ ساده بنویسید. «وضعیت فروش» پرسش نیست؛ «آیا تخفیف هفتهٔ گذشته نرخ تکمیل خرید را بالا برد؟» پرسش است. ساده‌ترین نموداری را انتخاب کنید که به همان یک پرسش جواب می‌دهد.
• - ۲. رمزگذاری درست و صداقت مقیاس: میله برای دسته‌ها، خط برای زمان. محور میله‌ها از صفر شروع شود. اگر ناچارید محور را ببُرید تا تغییر کوچکی دیده شود، این کار را علنی اعلام کنید. سه‌بعدی و پرسپکتیو، مقدارها را تحریف می‌کنند و هیچ سودی ندارند.
• - ۳. سلسله‌مراتب و مهار توجه: هر نما باید یک نقطهٔ ورود روشن داشته باشد. اندازه، وزن، هم‌ترازی و فاصله را برای ساختن سلسله‌مراتب بصری به کار بگیرید و رنگ را برای آخر نگه دارید. یک رنگ اشباع روی مهم‌ترین عنصر، مؤثرتر از هفت رنگ روی هفت دسته است.
• - ۴. پیشروی و تعامل: جزئیات را وقتی نشان دهید که لازم می‌شوند. در محصول، با نمای کلی شروع کنید و امکان فیلتر و ریزشدن بدهید؛ در ارائه، محتوا را مرحله‌به‌مرحله باز کنید تا صدای شما و تصویر هم‌قدم بمانند.

ادوارد تافتی، آماردانی که بخش بزرگی از معمولاً را شکل داده، معیار سنجش را در یک عبارت خلاصه می‌کنند: «بیشترین ایده در کوتاه‌ترین زمان با کمترین جوهر». اگر هنگام مرور یک نمودار مطمئن نیستید عنصری بماند یا برود، همین معیار معمولاً تکلیف را روشن می‌کند. قاب‌های اضافه، سایه، گرادیان پس‌زمینه و خط‌های راهنمای پررنگ تقریباً همیشه جوهرِ بی‌ایده‌اند.

کدام نمودار برای کدام پرسش؟

انتخاب نمودار را باید از روی نوع پرسش انجام داد، نه از روی تنوع‌طلبی. این نگاشت ساده در بیشتر موقعیت‌ها کار می‌کند:

• - مقایسهٔ دسته‌ها: میلهٔ مرتب‌شده. اگر برچسب‌ها بلندند (که در فارسی زیاد پیش می‌آید) میلهٔ افقی بگذارید تا متن نچرخد.
• - تغییر در زمان: نمودار خطی برای دادهٔ پیوسته. خطوط شبکه را کم‌رنگ نگه دارید و فقط رویدادهای معنادار را روی محور علامت بزنید.
• - جزء از کل: میلهٔ انباشته وقتی می‌خواهید ترکیب را بین چند دسته مقایسه کنید. نمودار دایره‌ای فقط برای دو یا سه بخش و وقتی تقریب کافی است.
• - توزیع: هیستوگرام یا نمودار جعبه‌ای. میانگین به‌تنهایی دروغ‌گوترین عدد دنیاست؛ توزیع است که پراکندگی و داده‌های پرت را نشان می‌دهد.
• - رابطه: نمودار پراکندگی، و در صورت لزوم یک خط روند ساده روی آن.

یک آزمون سریع هم هست که پیش از نهایی‌کردن هر نما ارزش دارد. دو گزینه را طراحی کنید و جلوی همکاری بگذارید که پیش‌زمینه‌ای از پروژه ندارد. بپرسید «در ده ثانیه بگو نرخ ریزش این ماه بهتر شده یا بدتر؟» گزینه‌ای که زودتر و درست‌تر جواب می‌گیرد برنده است. این آزمون ده‌ثانیه‌ای ارزان‌ترین شکل اعتبارسنجی است و شگفت‌آور است که چند بار نمودار «حرفه‌ای‌تر» در آن می‌بازد.

از پرسش تا تحویل: مسیر عملی ساخت

در عمل، ساختن یک نمای اطلاعاتی خوب کمتر به ابزار و بیشتر به ترتیب کارها ربط دارد. ترتیبی که برای من جواب داده این است:

• - ۱. پرسش و مخاطب را بنویسید. مدیر ارشد نتیجه و اثر می‌خواهد، کارشناس محصول تشخیص و ریشه‌یابی، و کاربر نهایی فقط می‌خواهد بداند همین حالا چه کند. یک نما نمی‌تواند هر سه را راضی کند؛ انتخاب کنید.
• - ۲. عنوان را نتیجه‌محور بنویسید. «گزارش عملکرد» چیزی نمی‌گوید. «تکمیل خرید در تیر ۱۴۰۵ ‏۱۲ درصد رشد کرد» هم پیام را می‌رساند و هم انتظار مخاطب را تنظیم می‌کند. این ساده‌ترین تغییری است که بیشترین اثر را دارد.
• - ۳. روی کاغذ شروع کنید. چیدمان و ترتیب را پیش از باز کردن ابزار امتحان کنید. در ابزار، اولین چیزی که می‌سازید معمولاً همان چیزی می‌شود که تحویل می‌دهید.
• - ۴. برچسب را مستقیم بگذارید. راهنمای رنگ (لجند) گوشهٔ نمودار یعنی مخاطب باید مدام چشمش را بین دو نقطه ببرد و بیاورد. برچسب کنار خود خط یا میله، این رفت‌وبرگشت را حذف می‌کند.
• - ۵. حذف کنید. یک دور کامل فقط برای کم‌کردن: خطوط اضافه، اعشار بی‌فایده، رنگ‌های تزئینی، عنوان‌های تکراری. تقریباً هیچ نموداری با حذف بدتر نشده است.
• - ۶. با چشم تازه بیازمایید. همان آزمون ده‌ثانیه‌ای، و اگر نما بخشی از محصول است، یک آزمون کاربردپذیری کوچک با دو سه کاربر واقعی.

دروغ‌های بی‌صدا: جایی که نمودار گمراه می‌کند

خطرناک‌ترین نمودارها آن‌هایی نیستند که بد به نظر می‌رسند؛ آن‌هایی هستند که خوب به نظر می‌رسند و اشتباه می‌گویند. الگوهای تکرارشونده تقریباً همیشه از این چند مورد بیرون می‌آیند:

• - محور بریده: شروع محور عمودی از ۹۰ به‌جای صفر، یک نوسان یک‌درصدی را به کوهی سهمگین تبدیل می‌کند. گاهی این کار لازم است، اما وقتی اعلام نشود، تحریف است.
• - دو محور عمودی: دو مقیاس متفاوت روی یک نمودار، هر همبستگی دلخواهی را می‌سازد. کافی است یکی از مقیاس‌ها را کمی جابه‌جا کنید تا دو خط بی‌ربط عاشق هم شوند.
• - مساحت به‌جای طول: وقتی شعاع دایره را دو برابر می‌کنید، مساحتش چهار برابر می‌شود. حباب‌هایی که با شعاع مقیاس شده‌اند، تفاوت‌ها را چند برابر بزرگ‌تر نشان می‌دهند.
• - بازهٔ زمانی انتخابی: نموداری که از فروردین شروع می‌شود می‌تواند دقیقاً همان داده‌ای را روایت کند که نمودار شروع‌شده از خرداد، اما با نتیجه‌گیری وارونه. همیشه بپرسید چرا این بازه.
• - رنگ به‌عنوان تنها حامل معنا: اگر تفاوت «رشد» و «افت» فقط با سبز و قرمز بیان شود، بخش قابل‌توجهی از مخاطبان آن را نمی‌بینند. تفاوت را با شکل، برچسب یا موقعیت هم تکرار کنید؛ این پایه‌ای‌ترین چیزی است که دسترس‌پذیری از یک نمودار می‌خواهد.

یک عادت کوچک جلوی بیشتر این‌ها را می‌گیرد: کنار هر نما بنویسید داده از کجا آمده، چه بازه‌ای را پوشش می‌دهد و چه چیزی را شامل نمی‌شود. این سه خط، هم مخاطب را از حدس‌زدن نجات می‌دهد و هم خودِ سازنده را وادار می‌کند یک بار دیگر به انتخاب‌هایش نگاه کند.

داشبورد و نمودار در محصولات فارسی‌زبان

این بخش در اغلب نیست و از کار با محصولات فارسی‌زبان می‌آید. تقریباً همهٔ کتابخانه‌های نمودار با پیش‌فرض چپ‌به‌راست ساخته شده‌اند و همین چند مسئلهٔ مشخص را روی میز می‌گذارد:

جهت محور زمان. پرتکرارترین پرسش در طراحی داشبورد فارسی همین است: زمان از راست به چپ برود یا از چپ به راست؟ جواب واحدی ندارد و کسی که ادعای جواب قطعی می‌کند احتمالاً آزمایشش نکرده. در عمل، وقتی مخاطب کاملاً فارسی‌زبان است و نمودار ساده است، آینه‌کردن محور زمان با جهت خواندن صفحه هم‌راستا می‌شود و طبیعی‌تر خوانده می‌شود. اما هرچه نما فنی‌تر و شلوغ‌تر باشد، نگه‌داشتن قرارداد جهانی چپ‌به‌راست خطای تفسیر کمتری می‌سازد. نمای تحلیلی، داده‌های مالی، هر چیزی که کنار ابزارهای بین‌المللی دیده می‌شود — چون مخاطب حرفه‌ای همان قرارداد را در ذهن دارد. چیزی که در هر دو حالت واجب است، یکدست بودن: بدترین حالت ممکن، داشبوردی است که نیمی از نمودارهایش آینه شده و نیمی نشده.

ارقام و جداکنندهٔ هزارگان. قاطی‌شدن ارقام فارسی و لاتین در یک صفحه، هم زشت است و هم خواندن را کند می‌کند. یکی را انتخاب کنید و در کل محصول پایبند بمانید. برای اعداد بزرگ — که در قیمت‌های تومانی مدام پیش می‌آید — واحد را به عنوان محور منتقل کنید. مثلاً «فروش، میلیون تومان»، به‌جای اینکه روی هر برچسب شش صفر بنشیند. و یادتان باشد که ریال و تومان دو واحدند؛ نموداری که واحدش را اعلام نکرده، ده برابر خطا در دل خودش دارد.

تقویم شمسی. اگر مخاطب شمسی فکر می‌کند، محور زمان هم باید شمسی باشد، نه اینکه تاریخ میلادی را کنارش پرانتز کنیم. دو ریزه‌کاری هم هست که معمولاً از قلم می‌افتد. هفته در ایران از شنبه شروع می‌شود، نه یکشنبه و نه دوشنبه. و ماه‌های نیمهٔ اول سال ۳۱ روزه‌اند و نیمهٔ دوم ۳۰ روزه — پس مقایسهٔ خام «فروش ماهانه» بین فروردین و آبان، ذاتاً یک اختلاف چنددرصدی مصنوعی دارد. اگر مقایسه مهم است، میانگین روزانه را نشان دهید.

تایپوگرافی برچسب‌ها. متن فارسی به ارتفاع خط بیشتری نیاز دارد و در فضای تنگِ برچسب نمودار زودتر از لاتین به هم می‌ریزد. برچسب عمودی هم عملاً ناخواناست، چون حروف فارسی به هم می‌چسبند و چرخاندنشان کلمه را از ریخت می‌اندازد؛ به‌جای چرخاندن برچسب، نمودار را افقی کنید. اگر سیستم طراحی دارید، جای درستِ حل همهٔ این موارد همان‌جاست — یک بار به‌شکل توکن و کامپوننت نمودار، نه صفحه‌به‌صفحه و به سلیقهٔ هر طراح.

جمع‌بندی

مصورسازی اطلاعات ابزار پیچیده‌ای نمی‌خواهد؛ نظم فکری می‌خواهد. یک پرسش روشن، رمزگذاری‌ای که با توان ادراکی چشم جور باشد، سلسله‌مراتبی که بگوید از کجا شروع کنیم، و صداقتی که مقیاس‌ها را دست‌نخورده نگه دارد. هر چیز دیگری — رنگ، انیمیشن، تعامل — لایه‌ای است که فقط وقتی می‌ارزد که این چهار تا سر جایشان باشند.

و اگر قرار باشد فقط یک جمله از این متن بماند، همین باشد: نمودار خوب چیزی را نشان نمی‌دهد، چیزی را روشن می‌کند. تفاوتش را می‌شود در ده ثانیه سنجید — کافی است آن ده ثانیه را واقعاً از کسی بگیرید.