طراحی داشبورد: از تصمیم کاربر شروع کنید، نه از نمودار

بیشتر داشبوردهای شلوغ از یک سؤال غلط شروع شده‌اند: «چه نموداری بگذاریم؟». این مقاله ترتیب را برعکس می‌کند: اول تصمیم کاربر، بعد نوع داشبورد، بعد نمودار. تکیهٔ ما مقالهٔ NN/G دربارهٔ داشبورد است و عددی دربارهٔ اثربخشی ادعا نمی‌کنیم.

از تصمیم شروع کنید

NN/G داشبورد را مجموعه‌ای از نمایش‌های داده در یک نمای تک‌صفحه تعریف می‌کند که اطلاعات «در یک نگاه» می‌دهد تا کاربر سریع اقدام کند. هدفش کاوش در داده‌های پیچیده نیست و روی یک کار تمرکز دارد: رساندن اطلاعات حیاتی. پس پیش از طراحی، فهرست کنید کاربر با نگاه به صفحه باید به کدام پرسش‌ها جواب بگیرد؛ مثلاً «فروش این هفته بالا رفته؟» یا «کدام سفارش‌ها عقب افتاده‌اند؟». هر نمودار که به پرسشی وصل نیست، کاندیدای حذف است. (این روش کار توصیهٔ نویسنده بر پایهٔ همان تعریف است.)

عملیاتی یا تحلیلی؟

به نوشتهٔ NN/G داشبوردها دو شکل کلی دارند. داشبورد عملیاتی اطلاعات حیاتی را سریع به کاربری می‌رساند که درگیر کار حساس به زمان است. داشبورد تحلیلی هم اطلاعاتی در یک نگاه برای تحلیل و تصمیم می‌دهد، اما فوریت عملیاتی را ندارد. نوع اول به هشدار روشن و کم‌ازدحام نیاز دارد؛ نوع دوم جا برای مقایسه و بازهٔ زمانی دارد. قبل از طراحی تصمیم بگیرید کدام را می‌سازید.

انتخاب نمودار: طول و موقعیت

طبق مقالهٔ NN/G، طول و موقعیت دوبعدی ویژگی‌های پیش‌توجهی‌اند که طبیعی‌ترین نگاشت به مقدار کمّی را دارند. نمودار میله‌ای از طول و نمودار خطی یا پراکنش از موقعیت دوبعدی استفاده می‌کنند و مقایسه‌شان آسان است. در مقابل، نمودارهای دایره‌ای، گیج و رادار به مساحت و زاویه تکیه دارند و NN/G می‌گوید با آن‌ها نسبت مقدارها سریع و دقیق خوانده نمی‌شود؛ دونات و تری‌مپ هم به همین دلیل دشوارترند.

رنگ: برای دسته، نه برای مقدار

رنگ سریع به چشم می‌آید، اما NN/G یادآوری می‌کند که رنگ‌ها ترتیب کمّی ندارند؛ پس رنگ را برای مقدار و بزرگی به کار نبرید. همچنین بخشی از کاربران کوررنگ‌اند و مقاله نسبت‌هایی را (تا ۴٫۵٪ جمعیت عمومی؛ حدود ۸٪ مردان در برابر ۰٫۵٪ زنان، با تفاوت بر اساس قومیت) ذکر می‌کند. پس رنگ را همراه یک نشانهٔ دیگر مثل برچسب یا شکل بیاورید.

حالت خالی و خطا را فراموش نکنید

داشبورد بدون داده، با خطا یا هنگام بارگذاری هم باید معنی داشته باشد. جزئیات این سه حالت را در Empty State، Error State و Loading State چیست؟ آورده‌ایم؛ این‌جا فقط تأکید می‌کنیم که برای هر ویجت باید طراحی شود، نه فقط برای حالت پر. (توصیهٔ نویسنده.)

چک‌لیست پیش از ساخت

1. پرسش‌های کاربر (حداکثر چند مورد) نوشته شده‌اند.
2. نوع داشبورد، عملیاتی یا تحلیلی، مشخص است.
3. مقدارها با میله یا خط نشان داده شده‌اند، نه دایره و گیج.
4. رنگ فقط دسته را می‌رساند و نشانهٔ دوم دارد.
5. برای هر ویجت حالت خالی، خطا و بارگذاری طراحی شده است. برای نمای کلی تجربهٔ کاربری UX چیست؟ را ببینید.

منابع و مراجع

• Dashboards: Making Charts and Graphs Easier to Understand — Nielsen Norman Group، 2017-06-18.