دام های رایج در طراحی داشبورد (بخش دوم)

جادوبی مجله جادوبی دام های رایج در طراحی داشبورد (بخش دوم)
طراحی داشبورد

بصری سازی داشبورد مدیریتی مجله جادوبی

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

دام ۷: به­ کارگیری رسانه ­ی نمایشی با طراحی ضعیف

دام ۸: کدگذاری نادرست داده ­های کمّی

دام ۹: مرتب ­سازی ضعیف داده­ ها

دام ۱۰: برجسته­ سازی موضوعات مهم به شکل ناکارآمد

دام ۱۱: شلوغ کردن صفحه با تزئینات بی فایده

دام ۱۲: استفاده ی نادرست یا افراطی از رنگ

دام ۱۳: طراحی یک نمایش بصری نچسب


دام ۷: به­ کارگیری رسانه ­ی نمایشی با طراحی ضعیف

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

  1. رنگ­ میله­ ها به­ شکل دیوانه­ واری روشن هستند.
  2. حالت سه­ بعدی، خواندن میله­ ها را دشوار می­ کند.
  3. هدف نمودار، مقایسه­ ی درآمد فعلی با درآمد بودجه ­بندی ­ شده­ ی هر یک از چهار ناحیه است. اما طراحی­­ آن، این مقایسه را دشوار می سازد. با درنظر گرفتن هدف این نمودار، باید میله ­های متعلق به درآمد فعلی و درآمد بودجه ­بندی­ شده­ ی هر یک از نواحی، در کنار یکدیگر قرار می­ گرفتند تا مقایسه­ ی آن ها ساده ­تر شود.

اشتباهات ساده­ ی طراحی نظیر این مورد، می ­توانند به ­طرز قابل توجهی موفقیت یک داشبورد را کاهش دهند.

این نمودار که از یک داشبورد گرفته شده، اشکالات بسیاری را در طراحی نشان می ­دهد که از برقراری ارتباط جلوگیری می ­کنند.
این نمودار که از یک داشبورد گرفته شده، اشکالات بسیاری را در طراحی نشان می ­دهد که از برقراری ارتباط جلوگیری می ­کنند.

دام ۸: کدگذاری نادرست داده ­های کمّی

وقتی برای انتقال داده ­های کمی از یک نمودار استفاده می­ کنید، مقادیر در قالب اشیای بصری (visual objects) کدگذاری می­ شوند (مثل میله­ ها در نمودار زیر). این اشیای بصری باید مقادیر را به ­صورت درست کدگذاری کنند تا بتوانیم آن اشیا را به ­عنوان راهی برای سنجش مقادیر و درک روابط آن ها، با یکدیگر مقایسه کنیم.

گاهی نمایش های گرافیکیِ داده­ های کمّی به ­حدّی بد است که سبب اشتباه در تحلیل می شود. به عنوان مثال در شکل زیر، که یک نمودار میله ای است، مقیاس کمّی در امتداد محور عمودی، غلط تنظیم شده است.
در این نوع نمودار، طول یک میله مقدار آن را بیان می کند. میله­ هایی که درآمد و هزینه­ های ماه را نشان می­ دهند، می­ گویند که درآمد چهار برابر هزینه­ ها بوده است. اما اگر به کمترین مقدار در محور عمودی نگاه کنیم متوجه می شویم که مقادیر از ۵۰۰۰۰۰ شروع شده اند. اگر قسمت پایین نمودار را، که در حال حاضر حذف شده است، به نمودار اضافه کنیم، اندازه میله ها واقعی خواهند شد و متوجه خواهیم شد که:
درآمد در واقع کمتر از دو برابر هزینه­ ها است!

ارتفاع میله­ ها در این نمودار، مقادیری را نشان می ­دهند که به درستی کدگذاری نشده ­اند.
ارتفاع میله­ ها در این نمودار، مقادیری را نشان می ­دهند که به درستی کدگذاری نشده ­اند.

دام ۹: مرتب ­سازی ضعیف داده­ ها

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

در یک داشبورد مدیریتی مناسب، مهمترین فضاهای داشبورد به مهمترین اطلاعات تخصیص داده می شود و از ذکر اطلاعات کم اهمیت تر در مکان هایی که بیشتر در دید مخاطبان است، اجتناب می گردد.

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

این داشبورد، سازمان­دهی نامتناسب با کاربردش را نشان می ­دهد.
این داشبورد، سازمان­دهی نامتناسب با کاربردش را نشان می ­دهد.

دام ۱۰: برجسته­ سازی موضوعات مهم به شکل ناکارآمد

نگاهی به داشبورد زیر بیاندازید تا ببینید چه چیزی چشم شما را می گیرد.

 این داشبورد با برجسته کردن همه چیز، هیچ سرنخی به چشم شما نمی دهد که باید روی کجا تمرکز کند.
این داشبورد با برجسته کردن همه چیز، هیچ سرنخی به چشم شما نمی دهد که باید روی کجا تمرکز کند.

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

علامت تجاری/لوگو و کنترل های ناوبری (دکمه های سمت چپ)، هم در نتیجه ی محل قرارگیری شان بر روی صفحه و هم به علت استفاده از حاشیه های پررنگ، غالب محسوب می شوند، اما داده به شمار نمی آیند و از این رو می بایست کم رنگ شوند. از سوی دیگر، نمودارهایی نیز وجود دارند که داده ها را در خود جای داده اند، اما همه ی این داده ها به یک اندازه برجسته و رنگارنگ هستند، در نتیجه برای ما یکسان بوده و هیچ سرنخی نمی دهند که باید روی کجا متمرکز شویم.

علائم تجاری/لوگو و کنترل های ناوبری باید به صورتی در داشبورد به نمایش دربیایند که اطلاعات مهم درون داشبورد را تحت الشعاع خود قرار ندهند.

دام ۱۱: شلوغ کردن صفحه با تزئینات بی فایده

داشبوردها به خاطر ماهیت بصری خود، پتانسیل این را دارند که به سمتی انحراف پیدا کنند که توسط طراحانشان به شکل های نادرستی آراسته شده اند. می گوییم «نادرست» به خاطر اینکه تزئیناتی که به بسیاری از داشبوردها راه یافته اند، اغلب برای این است که شبیه چیزی به نظر برسند که «نیستند» (مثل داشبورد خودرو). این موضوع سبب پرت شدن از اصل مطلب می شود. به ویژه داشبوردهای موجود در وب سایت های فروش، مستعد چنین اشتباهی هستند. فکر می کنم که فروشندگان یا امیدوارند که ما تحت تأثیر هنرورزی آن ها قرار بگیریم یا اینکه فرض می کنند این خودنمایی های تزئینی برای سرگرم نگه داشتن ما لازم است. باید بدانیم حتی افرادی که از تزئینات در اولین نگاه لذت می برند نیز بعد از مدتی از آن دل زده خواهند شد.

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

این داشبورد از تزئینات بی فایده رنج می برد؛ خودنمایی های بصری که صرفاً به درد پرت کردن حواس بیننده از هدف واقعی می خورند.
این داشبورد از تزئینات بی فایده رنج می برد؛ خودنمایی های بصری که صرفاً به درد پرت کردن حواس بیننده از هدف واقعی می خورند.

دام ۱۲: استفاده ی نادرست یا افراطی از رنگ

رنگ می تواند به خوبی برای برجسته کردن داده ها، کدگذاری آن ها یا ایجاد ارتباط میان موارد مجزا بر روی داشبورد به کار گرفته شود، اما اغلب مورد استفاده­ ی نادرست یا بیش از حد قرار می ­گیرند. انتخاب رنگ باید از روی فکر و بر اساس فهم این مطلب صورت بگیرد که مردم چگونه رنگ را درک می­ کنند و اهمیت تفاوت میان رنگ ­ها چیست. برخی رنگ­ ها گرم بوده و توجه ما را می­ طلبند حال آنکه دیگر رنگ­ ها سردترند و کمتر به چشم می­ آیند. وقتی هر رنگی در تضاد با هنجار به نظر برسد، چشمان ما متوجه آن شده و مغزمان سعی می­ کند به این تفاوت معنا دهد. وقتی رنگ ­ها در دو صفحه نمایش متفاوت، یکسان باشند، ناخودآگاه می خواهیم آن ها را به هم ربط بدهیم. ما اشتباها فرض می ­کنیم که می ­توانیم از رنگ هایی مثل قرمز، زرد و سبز برای الصاق معانی مهم به داده ­ها بهره گیریم، اما در انجام این کار ۱۰ درصد از مردان و ۱ درصد از زنانی را که کوررنگی دارند، از قلم می­ اندازیم.

از آنجا که داشبوردها اغلب به شدت با اطلاعات انباشته شده اند، محتوای بصری باید تا حد امکان ساده نگه داشته شود. استفاده از رنگ های متنوع می­ تواند از نظر بصری آزاردهنده و تهاجمی باشد.

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

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

این نمودار استفاده ­ی بی­جا از رنگ را نشان می­ دهد.
این نمودار استفاده ­ی بی­جا از رنگ را نشان می­ دهد.

دام ۱۳: طراحی یک نمایش بصری نچسب

بعضی داشبوردها خیلی زشت هستند. وقتی آن ها را می­ بینیم دلمان می ­خواهد صورتمان را برگردانیم! وقتی یک داشبورد جذابیتی ندارد، نگاه کردن به آن نیز ناخوشایند خواهد بود. بیننده در یک چارچوب ذهنی قرار می ­گیرد که طبق آن چارچوب، ناخوداگاه فکر می کند که آن داشبورد فایده ای ندارد. ما از افزودن رنگ و لعاب به داشبورد برای خوشگل کردن آن طرفداری نمی کنیم، اما باید در عوض خود داده ها را به شکلی جذاب و بدون افزودن هیچ چیز اضافی نمایش دهیم. بین این ها تفاوت وجود دارد.

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

این داشبورد علیرغم تلاش طراحش، خیلی زشت است.
این داشبورد علیرغم تلاش طراحش، خیلی زشت است.

مطالب پیشنهادی

درج دیدگاه

You have to agree to the comment policy.

*