طراحی وب

طراحی Dashboard با نمودارهای مؤثر

مقایسه و روند و سهم از کل در Dashboard؛ تعریف محور، missing، واحد و تعامل و جایگزین دسترس‌پذیر برای نمودارهای عملیاتی.

1404/12/12 1 دقیقه مطالعه 1,488 بازدید

پیش از انتخاب نمودار، سؤال داده را بنویسید. «کدام دسته درخواست بیشتری دارد؟» به مقایسه نیاز دارد و «تعداد درخواست‌ها در هفته چه تغییری کرده؟» به نمایش روند. یک Donut زیبا لزوماً پاسخ هر دو نیست. نمودار Dashboard باید رابطه‌ای را نشان دهد که برای تصمیم کاربر مهم است و اطلاعات لازم برای تفسیر آن را کنار خود نگه دارد.

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

تعریف داده را قبل از طراحی مشخص کنید

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

صفر با missing یکسان نیست. صفر مقدار معتبر است و missing یعنی داده در دسترس نیست یا ثبت نشده است. وصل کردن نقطه‌های دو طرف فاصله ممکن است روندی را نشان دهد که شاهدی برای آن ندارید. روش نمایش فاصله را تعریف کنید و در Tooltip یا توضیح کنار نمودار بیان کنید. پنهان کردن نبود داده به خاطر خط پیوسته زیباتر، معنا را تغییر می‌دهد.

داده موقت و نهایی نیز باید جدا باشند. اگر دوره جاری کامل نشده، مقایسه آن با دوره کامل می‌تواند برداشت اشتباه بسازد. عنوان و توضیح باید دوره واقعی را نشان دهند. آخرین زمان دریافت، در داده‌ای که با تأخیر می‌آید اهمیت دارد. مقاله داشبورد مدیریتی تعریف KPI و مسیر پیگیری اقلام سازنده عدد را بررسی می‌کند.

برای مقایسه، Bar معمولاً نقطه شروع مناسبی است

Bar Chart برای مقایسه مقدار دسته‌ها قابل استفاده است. طول barها باید از مبنای مشترک خوانده شود. در بسیاری از مقایسه‌ها شروع محور مقدار از صفر لازم است تا نسبت طول‌ها برداشت اغراق‌آمیز نسازد. راهنمای نمودارهای Government Analysis Function انتخاب نوع نمودار و طراحی محورها را توضیح می‌دهد. این راهنما را با سؤال و داده مشخص پروژه تطبیق دهید.

ترتیب دسته‌ها باید معنا داشته باشد. برای رتبه‌بندی می‌توانید از مقدار بزرگ‌تر به کوچک‌تر بروید، اما ماه‌ها یا مرحله‌های فرایند ترتیب طبیعی دارند. مرتب کردن ماه‌ها بر اساس مقدار، روند زمانی را به مقایسه رتبه‌ای تبدیل می‌کند. عنوان یا توضیح باید نوع ترتیب را روشن کند. در چند نمودار مرتبط، تغییر بی‌دلیل ترتیب دسته‌ها مقایسه را سخت‌تر می‌کند.

Bar افقی برای نام‌های بلند می‌تواند فضای مناسب‌تری بدهد. نام دسته را تا حد از دست رفتن معنا کوتاه نکنید. اگر اختصار استفاده می‌کنید، توضیح آن قابل یافتن باشد. رنگ متفاوت برای هر bar فقط زمانی مفید است که معنای مشخصی دارد؛ چند رنگ تزئینی می‌توانند اهمیت یا گروهی را القا کنند که در داده وجود ندارد.

برای روند، محور زمان و فاصله‌ها مهم‌اند

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

قطع محور در Line ممکن است برای دیدن تغییر کوچک مناسب باشد، ولی دامنه باید روشن باشد و از برداشت اغراق‌آمیز جلوگیری کند. در Bar، طول خود مقدار را نمایش می‌دهد و مبنای صفر اهمیت متفاوتی دارد. این تفاوت را در قواعد تیم بنویسید. یک قانون ثابت برای همه chartها یا حذف تمام محور‌ها به خاطر خلوتی، اطلاعات لازم را از بین می‌برد.

تعداد زیاد سری خطی می‌تواند تشخیص مسیر هر کدام را سخت کند. گروه‌بندی، انتخاب سری یا small multiples گزینه‌های قابل بررسی‌اند. اگر کاربر برای فهم هر خط مجبور است بارها بین Legend و نقطه‌ها جابه‌جا شود، برچسب مستقیم یا تقسیم نمایش کمک می‌کند. اثر این تغییر را با وظیفه خواندن واقعی بررسی کنید، نه فقط ظاهر صفحه.

سهم از کل را با مخرج معتبر نشان دهید

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

درصد بدون تعریف مخرج ناقص است. «۳۰ درصد تکمیل» باید معلوم کند از کدام کارها یا کاربران محاسبه شده است. اگر بخشی از داده حذف شده، توضیح دهید نسبت به چه کلّی نشان داده می‌شود. داده نمونه را نتیجه واقعی معرفی نکنید. مقدار نمایش‌داده‌شده باید از منبع معتبر بیاید و با جدول یا export هماهنگ باشد.

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

عنوان، واحد و منبع بخشی از نمودارند

عنوان بهتر است سؤال یا محتوای دقیق را معرفی کند. «نمودار فروش» از «مبلغ پرداخت‌های موفق در هفته جاری» مبهم‌تر است. دوره، واحد و تعریف باید در محل قابل خواندن باشند. اگر عنوان طولانی می‌شود، اطلاعات زمینه را در subtitle یا توضیح کوتاه جدا کنید. حذف اطلاعات برای جا دادن chart در کارت کوچک، مشکل تفسیر را به کاربر منتقل می‌کند.

قالب عدد را با نیاز مقایسه هماهنگ کنید. گرد کردن شدید می‌تواند دو مقدار متفاوت را یکسان نشان دهد. از طرف دیگر، اعشار بی‌فایده خواندن را طولانی می‌کند. مقدار دقیق می‌تواند در جدول یا جزئیات موجود باشد. واحد باید در همه حالت‌ها روشن بماند؛ Tooltip، export و عنوان نباید یکی ریال و دیگری تومان را بدون نشانه استفاده کنند.

منبع و آخرین به‌روزرسانی برای نمودار عملیاتی اهمیت دارند. اگر مقدار از چند سامانه ترکیب می‌شود، دامنه و تأخیر را توضیح دهید. نموداری که از cache قدیمی می‌آید نباید با متن «لحظه‌ای» معرفی شود. نقش طراح این است که محدودیت را قابل فهم کند؛ شکل زنده و حرکت عددها، شاهد زنده بودن منبع داده نیست.

تعامل را به hover محدود نکنید

مقدار دقیق می‌تواند با hover نشان داده شود، اما کاربر لمس یا Keyboard هم به مسیر نیاز دارد. Tooltip نباید تنها محل واحد یا معنی رنگ باشد. برای نقطه‌های تعاملی، نام و روش انتخاب روشن تعریف کنید و از صدها توقف Tab بی‌دلیل جلوگیری کنید. پیچیدگی تعامل باید با فایده‌ای که برای تصمیم می‌سازد متناسب باشد.

اگر انتخاب یک bar فهرست مربوط را باز می‌کند، این رابطه را معرفی کنید. Filter حاصل باید روی فهرست دیده شود و امکان پاک کردن داشته باشد. تغییر سری یا بازه هم باید نتیجه معتبر را نشان دهد و حالت انتظار داشته باشد. مقاله Loading States برای تفکیک تازه‌سازی، خطا و نتیجه خالی ادامه مرتبط است.

Zoom و Pan برای هر نمودار لازم نیستند. کاربر باید بداند چگونه به نمای اولیه برگردد و آیا محدوده انتخاب‌شده روی export اثر می‌گذارد. نگه داشتن یک بازه محدود بدون نشانه می‌تواند نتیجه را ناقص نشان دهد. کنترل‌ها باید نام واضح داشته باشند و در عرض کوچک از خود داده مهم‌تر نشوند.

یک جایگزین قابل خواندن برای داده فراهم کنید

راهنمای Complex Images در WAI برای نمودار و اطلاعات پیچیده، توضیح و دسترسی به اطلاعات مربوط را بررسی می‌کند. خلاصه روند و جدول داده می‌توانند در فهم کمک کنند. یک alt مثل «نمودار درخواست‌ها» محتوای داده را منتقل نمی‌کند. اگر chart با canvas ساخته شده، ساختار معنایی جایگزین باید در پیاده‌سازی حضور داشته باشد.

رنگ تنها نشانه سری نباشد. برچسب، الگوی خط یا شکل می‌توانند تمایز را تقویت کنند. Contrast متن و عناصر لازم را در Themeهای مختلف بررسی کنید. حذف Legend فقط زمانی مناسب است که نام سری‌ها روش روشن دیگری دارد. ظاهر ساده بدون معنی قابل دسترس، خواندن نمودار را آسان‌تر نمی‌کند.

در تحویل، سؤال هر نمودار، تعریف داده، محور، رفتار missing و interaction را ثبت کنید. Visual Hierarchy برای وزن chart و اطلاعات کنارش ادامه مرتبط است. از کاربر بخواهید با نمودار یک مقایسه واقعی انجام دهد؛ پاسخ درست و مسیر تفسیر، شواهد بهتری از نظر کلی «نمودار جذاب است» فراهم می‌کنند.

واکنش به این مقاله

اشتراک‌گذاری این مقاله:
دیدگاه‌ها 0
۰ / ۲۰۰۰

هنوز دیدگاهی ثبت نشده

اولین نفری باشید که نظر می‌دهد!