بصری‌سازی داده برای طراحان: چگونه نمودارهایی بسازیم که واقعاً منتقل می‌کنند
راهنمای یک طراح شاغل برای بصری‌سازی داده. انتخاب نمودار، رنگ، سلسله‌مراتب، دسترسی‌پذیری و اصولی که داده را به نموداری تبدیل می‌کنند که کاربر واقعی در سه ثانیه بخواند.
بیشتر داشبوردهای محصول فقط نویز هستند. دوازده نمودار، شش پالت رنگی، هیچ سلسله‌مراتب روشنی، و کاربری که باید هر نمودار را مطالعه کند تا بفهمد اصلاً چه چیزی را اندازه میگیرد. تیم اسمش را گذاشت «داده‌محور» و منتشرش کرد. کاربر اسمش را می‌گذارد «گیج‌کننده» و نادیده‌اش میگیرد.
این مقاله نسخه‌ی عملی ماجراست. نوع نمودارهایی که واقعاً منتقل می‌کنند، قواعد رنگی که در اندازه‌های کوچک دوام می‌آورند، تصمیم‌های سلسله‌مراتبی که کاربر را در سه ثانیه به فهم داده می‌رسانند، و حداقل‌های دسترسی‌پذیری که کار را قابل استفاده نگه می‌دارند. نه آموزش D3، نه گالری نمودار، فقط انضباط طراحیِ دیتاویز درون یک محصول واقعی.
دیتاویز واقعاً چیست
بصری‌سازی داده یعنی کدگذاری بصری اعداد در شکل‌هایی که چشم سریع‌تر از آنچه مغز متن می‌خواند، مقایسه‌شان میکند. نمودار میلهای ستونی از اعداد را به مستطیل‌هایی تبدیل میکند که چشم ارتفاعشان را فوراً مقایسه میکند. نمودار خطی یک سری زمانی را به شیبی تبدیل میکند که چشم آن را مثل یک داستان می‌خواند. کل کار همین کدگذاری است.
نمودار بد، نموداری است که کدگذاری‌اش با داده می‌جنگد. نمودار دایرهای با یازده برش چیزی کدگذاری نمی‌کند که چشم بتواند مقایسه کند. نمودار میلهای سه‌بعدی داده را کدگذاری میکند و بعد برای جلوه‌ی بصری آن را تحریف میکند. نمودار خطی دومحوره دو داستان را طوری کدگذاری میکند که انگار یکی هستند. هر کدام شکست طراحی‌اند، نه شکست ریاضی.
مقاله‌ی طراحی سلسله‌مراتب بصری توضیح میدهد چشم یک صفحه‌ی ثابت را چگونه می‌خواند. دیتاویز یعنی سلسله‌مراتب اعمال‌شده روی اعداد.
چرا طراحی دیتاویز در محصول اهمیت دارد
بیشتر صفحه‌های محصول در هر صفحه یک یا دو تکه اطلاعات دارند. یک داشبورد ده‌ها تا دارد. بدون انضباط طراحی، داشبورد به دیواری از سیگنال‌های رقیب تبدیل میشود که کاربر نمیتواند چیزِ مهم را در آن پیدا کند.
دیتاویز با طراحی‌های دیگر هم فرق میکند، چون شکستش شکل دیگری دارد. دکمه‌ای که رنگ اشتباه دارد زشت است. نموداری که نوعش اشتباه است گمراه‌کننده است. کاربر بر اساس چیزی که فکر میکند نمودار می‌گوید تصمیم میگیرد، در حالی که نمودار چیز دیگری گفته بود. هزینه‌ی یک نمودار گمراه‌کننده یک تصمیم غلط است، نه فقط زیبایی‌شناسی بد.
در ۲۰۲۶ هر صفحه‌ی محصول از پنج سال پیش داده‌محورتر است. قابلیت‌های هوش مصنوعی اطمینان مدل، معیارهای مصرف و تفکیک هزینه را نشان می‌دهند. صفحه‌های تحلیلی همه‌جا جدول و نمودارند. طراحانی که بتوانند سیستم دیتاویز بسازند اکنون برای هر محصولی پیچیده‌تر از یک اپ تک‌منظوره حیاتی‌اند.
نموداری را انتخاب کنید که به سؤال بخورد
انتخاب نمودار ۸۰٪ کار دیتاویز است. نمودار اشتباه را انتخاب کنید و هیچ‌قدر پرداخت نجاتش نمی‌دهد. نمودار درست را انتخاب کنید و طراحی تقریباً خودش کامل میشود.
پنج خانواده‌ی نموداری که بیشتر کار محصول را پوشش می‌دهند
بیشتر دیتاویز محصول در پنج خانواده‌ی نموداری زندگی میکند. اینها را مسلط شوید و بیش از ۹۰٪ کار داشبورد روتین میشود.
| سؤالی که کاربر میپرسد | نوع نمودار |
|---|---|
| این عدد در مقایسه با بقیه‌ی یک دسته چطور است؟ | نمودار میلهای |
| این عدد در طول زمان چطور تغییر میکند؟ | نمودار خطی |
| ترکیب یک کل چیست؟ | میلهای انباشته یا treemap (تقریباً هرگز دایرهای) |
| دو متغیر چه رابطه‌ای دارند؟ | نمودار پراکندگی |
| توزیع مقادیر چیست؟ | هیستوگرام یا نمودار جعبهای |
اگر نمودار روی صفحه با هیچکدام از اینها جور نیست، احتمالاً کاربر نمیداند این نمودار به چه سؤالی جواب میدهد. یا نمودار را با سؤال هماهنگ کنید یا سؤال را عوض کنید.
چه وقت یک عدد تنها کافی است
کم‌استفاده‌ترین نمودار در طراحی محصول، اصلاً نمودار نیست. یک عدد بزرگ با برچسب و مقایسه («درآمد: ۱۲۴٬۵۰۰ دلار، ۱۲٪ بیشتر از ماه قبل») بیشتر از بیشتر داشبوردهایی منتقل میکند که دوازده نمودار دارند.
وقتی از یک عدد تنها استفاده کنید که:
- کاربر فقط به آخرین مقدار اهمیت میدهد، نه روند
- روند از زمینه‌ی مقایسه مشخص است
- فضای صفحه محدود است (موبایل، سایدبار، نوار وضعیت)
وزن بصری یک عدد تنها با تایپوگرافی پررنگ و برچسب روشن عظیم است. بیشتر داشبوردها بهتر می‌شدند اگر نیمی از نمودارهایشان با عدد تنها جایگزین می‌شد.
چه وقت از small multiples استفاده کنیم
Small multiples شبکه‌ای از یک نوع نمودار است که برای دسته‌های مختلف تکرار میشود. وقتی از آن‌ها استفاده کنید که کاربر باید الگوها را میان آیتم‌های زیاد مقایسه کند، نه مقادیر مطلق را.
شبکه‌ای از ۱۲ اسپارک‌لاین که درآمد هر منطقه را نشان میدهد سریع‌تر از یک نمودار با ۱۲ خطِ متقاطع اسکن میشود. چشم هر منطقه را جداگانه می‌خواند، بعد شکل‌ها را در سراسر شبکه مقایسه میکند. این تکنیک از Edward Tufte است و هنوز در داشبوردهای محصول کم‌استفاده مانده.
سقف آن حدود ۱۶ تا ۲۰ small multiple در هر نما است. بیشتر از آن، چشم نمیتواند همه را مقایسه کند و شبکه به کاغذدیواری تبدیل میشود.
نمودارهایی که تقریباً هرگز در محصول کار نمی‌کنند
بعضی انواع نمودار ماندگارند چون در اسکرین‌شات چشمگیر به نظر می‌رسند. اما تقریباً هرگز در یک محصول واقعی خوب منتقل نمی‌کنند. هر وقت دیدیدشان حذفشان کنید.
نمودار دایرهای با بیش از سه برش. چشم نمیتواند زاویهها را بعد از سه یا چهار گوه دقیق مقایسه کند. بهجایش از میلهای انباشته یا treemap استفاده کنید. نمودار دایرهای برای نسبت‌های دوبرشی (بله/خیر، روشن/خاموش) کار میکند و تقریباً هیچ چیز دیگر.
نمودار میلهای سه‌بعدی. بُعد سوم کدگذاری را تحریف میکند. میله‌ی جلو بزرگ‌تر از واقع به نظر می‌رسد و میله‌ی عقب کوچک‌تر. همیشه از دوبعدی استفاده کنید.
نمودار خطی دومحوره. دو محور y روی یک نمودار القا میکند که باید دو خط را مقایسه کرد، اما مقایسه بی‌معناست چون هر محور مقیاس متفاوتی دارد. کاربر همبستگی‌ای می‌خواند که وجود ندارد. یا به دو نمودار تقسیمش کنید یا از مقادیر شاخص‌گذاری‌شده روی یک محور استفاده کنید.
نمودار دونات با برچسب داخلش. دونات همان نمودار دایرهای با زحمت اضافه است. برچسب داخلش معمولاً اطلاعاتی را تکرار میکند که از قبل روی صفحه هست. بهجایش از یک عدد تنها بهعلاوهی یک نمودار میلهای کوچک استفاده کنید.
ابر کلمات. شبیه داده‌اند و چیزی منتقل نمی‌کنند. اندازه‌ی کلمه تقریبی با فراوانی ارتباط دارد، چشم نمیتواند اندازه‌ها را دقیق مقایسه کند، و کلمه‌های بلندتر بزرگ‌تر به نظر می‌رسند چون پیکسل بیشتری دارند. با دیدن حذف کنید.
نمودار راداری. برای مقایسه‌های خیلی خاص مفید است (امتیازدهی چندبعدی روی یک مقیاس)، و تقریباً همیشه برای مقایسه‌های عمومی بد استفاده میشود. چشم نمیتواند مساحت چندضلعی‌های نامنظم را مقایسه کند. اگر نمودار برای یک مورد استفاده‌ی مشخص و شناخته‌شده نیست، از نمودار میلهای استفاده کنید.
رنگ در دیتاویز
رنگ در دیتاویز تزئین نیست. بخشی از کدگذاری است. انتخاب رنگ اشتباه می‌تواند معنای نمودار را از روشن به گمراه‌کننده بچرخاند.
سه کاربرد رنگ
هر رنگ در یک نمودار یکی از سه کار را انجام میدهد:
رنگ دستهای دسته‌های گسسته‌ی بی‌ترتیب را از هم جدا میکند. هر منطقه، هر محصول، هر بخش مشتری فام متفاوتی میگیرد. از پالتی با ۶ تا ۸ فام متمایز استفاده کنید. بیشتر از ۸، چشم رنگ‌های مشابه را با هم اشتباه میگیرد و کدگذاری شکست میخورد.
رنگ ترتیبی مقادیر مرتب را روی یک بُعد نشان میدهد. روشن به تیره، اشباع کم به زیاد. از یک طیف فام استفاده کنید، نه چند تا. پالت‌های ترتیبی بزرگی را از طریق روشنی منتقل می‌کنند، نه فام.
رنگ واگرا مقادیری را نشان میدهد که از منفی تا مثبت حول یک نقطهی میانی معنادار پخش‌اند. قرمز به سفید به آبی مثال کلاسیک است. نقطهی میانی باید صفر یا آستانه‌ی واقعی باشد، نه راحتی بصری.
مخلوط کردن این سه نمودار را می‌کشد. پالت دستهای که برای کدگذاری بزرگی به کار رود ناخوانا است. پالت ترتیبی که برای کدگذاری دستهها به کار رود گیج‌کننده است. نوع درست را برای داده انتخاب کنید.
مقاله‌ی نظریه‌ی رنگ برای طراحان اصول گسترده‌تر رنگ را پوشش میدهد. واژه‌نامه‌ی پالت رنگ نشان میدهد پالت‌ها چطور ساختار می‌گیرند.
قواعد رنگی که در اندازه‌های کوچک دوام می‌آورند
بیشتر رنگ‌های نمودار در اندازه‌های کوچکی شکست می‌خورند که نمودارها واقعاً در UI محصول در آن زندگی می‌کنند. یک اسپارک‌لاین ۶۰ پیکسلی فضای بصری کافی برای نمایش واضح هشت رنگ دستهای ندارد.
پنج قاعده‌ی مقاوم:
- در هر نمودار بیش از ۶ رنگ دستهای استفاده نکنید. بعد از شش، چشم تسلیم میشود.
- یک رنگ تاکیدی را برای هایلایت نگه دارید. خط یا میلهای که کاربر باید اول ببیند رنگ برند یا فام پرکنتراست میگیرد. بقیه کم‌رنگ‌اند.
- دادهی ثانویه را کمرنگ کنید. پس‌زمینه‌ها، خطوط شبکه و برچسب‌های محور با ۴۰ تا ۶۰٪ شفافیت. دادهی پیش‌زمینه با اشباع کامل. کنتراست همان سلسله‌مراتب است.
- در تک‌رنگ تست کنید. نمودار را به خاکستری تبدیل کنید و ببینید سلسله‌مراتب هنوز خوانده میشود یا نه. اگر نمودار فقط با رنگ کار میکند، رنگ بیش از حد بار می‌کشد.
- در حالت تاریک تست کنید. بیشتر نمودارهای محصول باید روی پس‌زمینه‌ی روشن و تیره هر دو کار کنند. همان فام اغلب روی تیره بیش از حد اشباع و روی روشن بیش از حد رنگ‌پریده به نظر می‌رسد. برای هر حالت یک پالت جفت بسازید.
مقاله‌ی طراحی حالت تاریک انضباط گسترده‌تر حالت تاریک را پوشش میدهد. نمودارها از سخت‌ترین بخش‌های درست‌کردنِ حالت تاریک‌اند.
کوررنگی حاشیه‌ای نیست
حدود ۸٪ مردان و ۰٫۵٪ زنان نوعی کم‌بینایی رنگی دارند. بیشتر پالت‌های دستهای که برای یک طراح خوب به نظر می‌رسند برای این کاربران ناخوانا می‌شوند.
راه‌حل این است که هرگز اطلاعات را فقط با رنگ کدگذاری نکنید. رنگ را با شکل، موقعیت، برچسب یا الگو جفت کنید. نمودار خطی با سه خط رنگی باید روی هر خط برچسب مستقیم هم داشته باشد. نمودار میلهای باید برای میله‌هایی که کاربر باید مقایسه کند برچسب مقدار داشته باشد.
پالت‌ها را با شبیه‌ساز کوررنگی تست کنید. رایج‌ترین شکست این است که قرمز و سبز برای کاربران دچار deuteranopia قابل تشخیص نیستند. بهجایش از آبی و نارنجی به‌عنوان جفت دستهای استفاده کنید، که هر دو در رایج‌ترین انواع کم‌بینایی رنگی کار می‌کنند.
مقاله‌ی کنتراست رنگ دسترس‌پذیر حداقل‌های کنتراست را پوشش میدهد. واژه‌نامه‌ی نسبت کنتراست نشان میدهد کنتراست چطور اندازه‌گیری میشود.
سلسله‌مراتب در یک نمودار
هر نمودار سلسله‌مراتب دارد. چشم کاربر باید اول روی داده بنشیند، دوم روی برچسب‌ها، سوم روی خطوط شبکه و محور. بیشتر نمودارهای محصول این را وارونه می‌کنند و کاربر باید زحمت بکشد تا داده را پیدا کند.
چه را برجسته کنیم، چه را کمرنگ
داده قهرمان است. میله‌ها، خطوط و نقطه‌ها قوی‌ترین وزن بصری را می‌گیرند. شفافیت کامل، اشباع کامل، رنگ برند یا تاکیدی هر جا مناسب بود.
برچسب‌ها و عنوان‌ها بازیگران مکمل‌اند. آنقدر قوی که خوانده شوند، نه آنقدر که با داده رقابت کنند. معمولاً ۵۰ تا ۷۰٪ وزن بصری داده.
خطوط شبکه، خطوط محور و تیک‌ها صحنه‌اند. فقط وقتی دیده می‌شوند که کاربر دنبالشان بگردد. معمولاً ۲۰ تا ۴۰٪ وزن بصری برچسب‌ها.
بیشتر نمودارهای محصول با خطوط شبکهی تمام‌قدرت منتشر می‌شوند چون پیش‌فرض هر کتابخانهی نمودار همین است. راه‌حل یک override در CSS است که خطوط شبکه را کمرنگ میکند و نمودار بلافاصله طراحی‌شده به نظر می‌رسد، نه قالبی.
برچسب‌گذاری مستقیم از راهنما بهتر است
راهنما در کنار نمودار چشم کاربر را مجبور میکند بین راهنما و داده پینگ‌پنگ بازی کند. برچسب مستقیم روی هر خط، میله یا قطعه به کاربر اجازه میدهد نمودار را یک‌بار بخواند.
برچسب‌گذاری مستقیم پیاده‌سازی سخت‌تری دارد و کتابخانه‌های نمودار خوب پشتیبانیاش نمی‌کنند. با این حال بسازیدش. نمودار خطی با سه خطِ برچسب‌خورده در انتهای راست بسیار خواناتر از همان نمودار با راهنما در گوشه است.
استثنا وقتی است که سری‌ها آنقدر زیادند که برچسب مستقیم جا نمی‌شود. در آن صورت از راهنمای تعاملی استفاده کنید. هاور یا لمس یک آیتم راهنما آن سری را در نمودار هایلایت میکند و بقیه را کمرنگ.
قاعده‌ی سه ثانیه
هر نمودار در یک محصول باید در سه ثانیه به سؤالش جواب بدهد. اگر کاربر مجبور باشد نمودار را مطالعه کند، طراحی شکست خورده است.
قاعده‌ی سه ثانیه را چطور تست کنیم
نمودار را به کسی نشان دهید که قبلاً داشبورد را ندیده. بپرسید «این نمودار به شما چه می‌گوید؟» و زمان پاسخ را بگیرید.
اگر جواب زیر سه ثانیه آمد، نمودار کار میکند. اگر بیشتر طول کشید، پیدا کنید چه چیزی کندشان میکند. معمولاً یکی از این‌هاست:
- نوع نمودار با سؤال نمی‌خواند
- سلسله‌مراتب وارونه است (خطوط شبکه بلندتر از داده)
- راهنما چشم را به پینگ‌پنگ وادار میکند
- کدگذاری رنگ نامشخص است
- نمودار سری‌های بیش از حد دارد
شکست را رفع کنید و دوباره تست کنید. داشبوردی که هر نمودارش تست سه ثانیه را پاس میکند داشبوردی است که کاربر واقعاً می‌تواند از آن استفاده کند.
وقتی قاعده‌ی سه ثانیه صدق نمی‌کند
ابزارهای تحلیل اکتشافی (ابزارهای BI، نوت‌بوک‌های علم داده) فرق دارند. کاربر نگاه گذرا نمی‌کند، تحقیق میکند. هر متغیر، هر بُعد، هر فیلتر را می‌خواهد. سه ثانیه میشود سه دقیقه و اشکالی ندارد.
اشتباه این است که داشبورد محصول را با انضباط یک ابزار BI بسازید. کاربر محصول تحقیق نمی‌کند. چک میکند. بودجه سه ثانیه است.
تعامل در دیتاویز
نمودارها در UI محصول تعاملی‌اند. هاور برای tooltip، کلیک برای فیلتر، brush برای زوم. این تعامل‌ها به همان اندازه‌ی کدگذاری ایستا به طراحی سنجیده نیاز دارند.
طراحی tooltip
Tooltip روی نمودارها به سؤال «مقدار دقیق این نقطه چیست؟» جواب میدهد. بیشتر کتابخانه‌های نمودار پیش‌فرضشان tooltipی است که همه‌ی سری‌ها را یک‌جا نشان میدهد و با هاور به دیواری از متن تبدیل میشود.
پیش‌فرض‌های بهتر:
- یک tooltip برای هر سری، نه همه‌ی سری‌ها. روی خطی که به آن اهمیت می‌دهید هاور کنید، مقدار همان خط را ببینید. هاور روی پس‌زمینه‌ی نمودار چیزی نشان نمی‌دهد.
- Tooltip واحد را شامل میشود. «۱٬۲۴۰ دلار» نه «۱۲۴۰».
- Tooltip هر جا مفید است زمینه‌ی مقایسه نشان میدهد. «۱٬۲۴۰ دلار (۸٪+ نسبت به هفته‌ی قبل)» tooltip را به یک داستان تبدیل میکند.
- Tooltip هرگز داده را نمی‌پوشاند. بر اساس نزدیکی به لبه‌ی نمودار آن را بالا یا پایین نشانگر قرار دهید.
فیلتر و brush
نمودارهایی که از دستکاری مستقیم پشتیبانی می‌کنند به شکلی پاسخگو حس می‌شوند که نمودارهای نیازمند پنل فیلتر جدا چنین نیستند. brush کردن یک بازه‌ی تاریخ روی محور x برای زوم، کلیک روی یک دسته در راهنما برای ایزوله کردن آن، کشیدن خط آستانه برای فیلتر ردیف‌ها. هرکدام کار مهندسی می‌خواهد که در اعتماد کاربر جبران میشود.
خطر، پیچیده‌سازی بیش از حد است. نموداری که برای مفید بودن پنج تعامل لازم دارد، نموداری است که باید به چند نمودار ساده‌تر تقسیم شود. هر تعامل یک هزینه‌ی شناختی است.
واژه‌نامه‌ی افشای تدریجی اصل گسترده‌تر را پوشش میدهد. نمودارها می‌توانند با پنهان کردن کنترل‌های پیشرفته تا وقتی کاربر قصدش را نشان دهد، خوب از آن استفاده کنند.
شکست‌های دیتاویز که باید مراقبشان بود
هر ممیزی داشبورد همان شکست‌ها را پیدا میکند. اگر محصول با هرکدام از اینها منتشر شود، لایه‌ی دیتاویز بقیه‌ی محصول را تضعیف میکند.
محورهای y بریده‌شده که تغییر را اغراق می‌کنند. نمودار میلهای با محور y که از ۹۵ شروع میشود نه صفر، تغییر ۲٪ را به یک پرتگاه بصری تبدیل میکند. از محورهای تمام‌بازه استفاده کنید مگر دلیل روشنی وجود داشته باشد، و هر بریدگی را صریح برچسب بزنید.
نمودارهای میلهای بدون خط پایه‌ی صفر. طول میله همان کدگذاری است. اگر میله از صفر شروع نشود، کدگذاری دروغ می‌گوید. این برای نمودار میلهای مذاکره‌ناپذیر است. نمودارهای خطی وقتی بازه‌ی کوچکی را در طول زمان نشان می‌دهند می‌توانند محور بریده داشته باشند.
انواع نمودار ناهماهنگ در یک داشبورد. دو نمودار میلهای با جهت‌گیری متفاوت، دو نمودار خطی با بازه‌ی محور متفاوت، نمودار دایرهای کنار میلهای انباشته که دادهی یکسان نشان می‌دهند. نوعی را انتخاب کنید که به هر سؤال بخورد، اما ظاهر بصری را در کل داشبورد یکدست نگه دارید.
نمودارهایی که دیرتر از بقیه‌ی صفحه بارگذاری می‌شوند. داشبوردی که چیدمان را در ۲۰۰ میلی‌ثانیه و نمودارها را در ۲ ثانیه می‌کشد خراب به نظر می‌رسد. برای هر نمودار حالت skeleton بسازید. نمودارهای زیر fold را lazy-load کنید. داده را stream کنید به‌جای انتظار برای کل payload.
نمودارهایی که برند را نادیده می‌گیرند. داشبوردی که از رنگ‌های پیش‌فرض کتابخانهی نمودار استفاده میکند قالبی به نظر می‌رسد. پالت نمودار باید از سیستم رنگ برند مشتق شود، با تنظیماتی برای دسترسی‌پذیری و خوانایی در اندازه‌ی کوچک. هرگز داشبوردی را با پالت پیش‌فرض Chart.js یا Recharts در پروداکشن منتشر نکنید.
مقاله‌ی پالت رنگ برند انضباط گسترده‌تر رنگ برند را پوشش میدهد. پالت‌های دیتاویز مشتق می‌شوند، ابداع نمی‌شوند.
دیتاویز در شرایط ۲۰۲۶
سه تغییر نحوه‌ی طراحی دیتاویز را عوض کرده‌اند. کار باید خود را وفق دهد.
هوش مصنوعی نمودار را در چند ثانیه تولید میکند. ابزارهایی مثل ChatGPT و Claude می‌توانند با یک پرامپت از دادهی خام نمودار بسازند. خطر این است که طراحان فکر کردن درباره‌ی انتخاب نمودار را رها کنند چون هوش مصنوعی یکی را انتخاب میکند. هوش مصنوعی تقریباً همیشه نوع نمودار عمومی‌ای انتخاب میکند که با سؤال واقعی نمی‌خواند. از هوش مصنوعی برای پیشنویس اول استفاده کنید، بعد بر اساس سؤال کاربر بازسازی کنید.
دادهی بی‌درنگ پیش‌فرض است. داشبوردها حالا به‌جای رفرش هر ۶۰ ثانیه دادهی زنده stream می‌کنند. پیامد طراحی این است که حرکت هم به طراحی نیاز دارد. نمودارهای زنده‌ای که با هر به‌روزرسانی سوسو می‌زنند قابل استفاده نیستند. درونیابی نرم بین نقاط داده و یک نشانگر «زنده»ی روشن حداقل‌هاست.
داشبوردهای موبایل رایج‌اند. داشبوردی که فقط برای دسکتاپ طراحی شده بخش بزرگی از استفاده‌ی آخر هفته و سفر را از دست میدهد. نمودارها در موبایل تصمیم‌های متفاوتی می‌خواهند، اغلب انواع ساده‌تر، سری‌های کمتر، و چیدمان بلندتری که اسکرول میشود به‌جای شبکه‌هایی که فشرده می‌شوند.
مقاله‌ی طراحی واکنش‌گرا انضباط گسترده‌تر واکنش‌گرایی را پوشش میدهد. دیتاویز از سخت‌ترین لایه‌ها برای واقعاً واکنش‌گرا شدن است.
سوالات متداول
از چه نوع نموداری استفاده کنم؟
نمودار را با سؤالی که کاربر میپرسد هماهنگ کنید. مقایسهی مقادیر بین دستهها: نمودار میلهای. نمایش تغییر در طول زمان: نمودار خطی. نمایش اجزای یک کل: میلهای انباشته یا treemap (تقریباً هرگز دایرهای). نمایش رابطهی دو متغیر: نمودار پراکندگی. نمایش توزیع: هیستوگرام یا نمودار جعبهای. اگر نمودار روی صفحه با هیچکدام از اینها جور نیست، کاربر نمیداند به چه سؤالی جواب میدهد.
چه وقت از نمودار دایرهای پرهیز کنم؟
تقریباً همیشه. نمودار دایرهای برای دو یا سه برش کار میکند که نسبت کل داستان است (بله/خیر، روشن/خاموش، تقسیمهای دودویی ساده). بعد از سه برش، چشم نمیتواند زاویهها را دقیق مقایسه کند و نمودار به تزئین تبدیل میشود. بهجایش از میلهای انباشتهی افقی یا treemap استفاده کنید.
یک نمودار چند رنگ باید داشته باشد؟
حداکثر شش رنگ دستهای، بهعلاوهی یک رنگ تاکیدی برای سری هایلایتشده. بعد از شش، چشم فامهای مشابه را با هم اشتباه میگیرد و کدگذاری شکست میخورد. برای دادهی ترتیبی (کم به زیاد) از یک طیف فام روشن به تیره استفاده کنید. برای دادهی واگرا (منفی به مثبت) از طیف دوفامی حول یک نقطهی میانی معنادار استفاده کنید.
نمودارها را چطور دسترس‌پذیر کنم؟
هرگز اطلاعات را فقط با رنگ کدگذاری نکنید. رنگ را با شکل، موقعیت، برچسب یا الگو جفت کنید. پالت‌ها را با شبیه‌ساز کوررنگی تست کنید (deuteranopia رایج‌ترین است). حداقل‌های کنتراست WCAG را بین عناصر نمودار و پس‌زمینه رعایت کنید. هر جا ممکن است به‌جای ارجاع فقط-راهنما برچسب مستقیم بدهید. برای صفحه‌خوان‌ها به کامپوننت‌های نمودار نام‌های دسترس‌پذیر اضافه کنید.
قاعده‌ی سه ثانیه برای نمودارها چیست؟
هر نمودار در داشبورد محصول باید وقتی به کاربر تازه نشان داده میشود در سه ثانیه یا کمتر به سؤالش جواب بدهد. اگر کاربر مجبور باشد نمودار را مطالعه کند، طراحی شکست خورده است. با نشان دادن نمودار به کسی که داشبورد را ندیده و زمان‌گرفتن برای خلاصه کردن آنچه نمودار می‌گوید تست کنید. هر چیز بالای سه ثانیه یعنی نمودار به ساده‌سازی نیاز دارد.
از کتابخانهی نمودار استفاده کنم یا سفارشی بسازم؟
برای پیشنویس اول و پروتوتایپ از کتابخانهی نمودار استفاده کنید. بیشتر نمودارهای پروداکشن در UI محصول از لایههای سفارشی روی کتابخانه برای اصلاح پیشفرضها سود میبرند: خطوط شبکهی کمرنگ، برچسب مستقیم، پالت رنگ برندشده، tooltip سفارشی. دیتاویز کاملاً سفارشی با D3 یا canvas فقط وقتی توجیه دارد که نوع نمودار آنقدر غیرمعمول باشد که هیچ کتابخانهای پشتیبانیاش نکند.
دیتاویز طراحی است، نه تزئین
داشبوردی با دیتاویز منضبط مثل محصولی حس میشود که به وقت کاربر احترام می‌گذارد. داشبوردی بدون آن مثل دیواری از تزئین حس میشود که اتفاقاً عدد هم دارد. فاصله‌ی این دو کوچک است، و تنها راه رسیدن به اولی انضباط طراحی است که روی انتخاب نمودار، رنگ، سلسله‌مراتب و تعامل اعمال شود.
نموداری را انتخاب کنید که به سؤال بخورد. خطوط شبکه را کمرنگ کنید، داده را برجسته. از رنگ به‌عنوان کدگذاری استفاده کنید، نه تزئین. با قاعده‌ی سه ثانیه تست کنید. با کوررنگی تست کنید. روی موبایل و حالت تاریک تست کنید.
محصولی که دیتاویز منضبط منتشر میکند جدی به نظر می‌رسد. محصولی که خروجی پیش‌فرض کتابخانهی نمودار را منتشر میکند قالبی به نظر می‌رسد. کاربران تفاوت را حس می‌کنند، حتی وقتی نمی‌توانند دلیلش را بیان کنند.
اگر تیمی می‌خواهید که سیستم‌های دیتاویز را کنار بقیه‌ی UI محصول بسازد، Brainy را استخدام کنید. نمودارها به‌عنوان بخشی درجه‌یک از سیستم طراحی، در هر پروژه.
مطالعه‌ی مرتبط
Want a dashboard or product UI where the data actually communicates? Brainy ships data-heavy interfaces with chart systems built in, not bolted on after the fact.
Get Started
