استفاده از Duotones به داده ها

بیایید نمودارها را یکی یکی بگیریم:

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

نمودارهای بالا به جای میله های ثابت از تنوع رنگ استفاده می کنند. هر دو نسخه یک هدف را دنبال می کنند: نمایش فروش به صورت افزایشی در هر سه ماه. رنگ داده ها را یک قدم جلوتر می برد.

• 2002: نقطه سربه سر برخی از اطلاعات جدید را اضافه می کند: فروش باید از این خط عبور کند تا شرکت سود کند. نمودار سال 2002 نشان می دهد که شرکت تنها در یک سه ماهه با زیان کار کرده است.
• 2003: تفاوت در سایه نشان دهنده نقطه سربه سر است. اما آیا به اندازه کافی واضح است؟
• 2004: نواحی میله‌هایی که سود را نشان می‌دهند در اینجا حتی واضح‌تر نشان داده شده‌اند، اما ما افزایش‌ها را از دست داده‌ایم.
• 2005: برعکس نمودار سال 2004، این نمودار افزایشی بالاتر از نقطه سربه سر را نشان می دهد، که به وضوح سود شرکت (در صورت وجود) را در هر فصل نشان می دهد و بقیه را نادیده می گیرد.

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

• 2006: گرادیان ها نشان می دهد که هر نوار در کجا به علامت های $20,000 و $40,000 می رسد. این مفید است، اما نقطه سربه سر 30000 دلار است.
• 2007: شیب های خالص تیره تر می شوند تا فروش بیشتری را نشان دهند—تا زمانی که به نقطه سربه سر برسیم. از آنجایی که رنگ های بالای 30000 دلار مشابه رنگ پس زمینه هستند، محو می شوند. کنتراست بالا توجه را به این واقعیت جلب می کند که این شرکت تنها در سه فصل به سود رسید.
• 2008: معکوس کردن گرادیان در میانه راه به سمت محور y یک رویکرد غیر معمول است. این نشان می‌دهد که بلوک 20000 تا 30000 دلاری مهم است اما خود نقطه سربه‌سری 30000 دلار نیست. با این حال، برخلاف گرادیان های خالص برای سال 2007، این نمودار به وضوح هر افزایش 10000 دلاری را نشان می دهد.
• 2009: آنها می گویند که برخی از قوانین برای شکسته شدن ساخته شده اند، اما این نمودار آنها را بدون هیچ دلیل مشخصی می شکند. هیچ یک از سایه ها با افزایش دلار مطابقت ندارند، و نقطه سربه سر به سختی قابل مشاهده است. سایه وقتی بهترین کار را دارد که چیزی به کاربر بگوید. سایه زدن به خاطر خودش تزئینی صرف است.

مثال‌های بیشتر

این تکنیک به نمودارهای میله ای محدود نمی شود.

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

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

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

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

این نه تنها از نظر بصری خوشایندتر است، بلکه روندها را در داده ها نشان می دهد. اکنون به راحتی می توان دید که فیلم F در کل امتیاز خوبی کسب کرده است اما فیلم B امتیاز خوبی کسب نکرده است، رضایت منتقد 2 سخت تر از منتقد 4 بوده است، همه منتقدان فیلم F را دوست دارند اما فیلم D را نه، و اینکه آنها در مورد فیلم A اختلاف نظر دارند. سایه های مختلف بنابراین، با همان رنگ، می تواند بیشتر از داده ها را به تنهایی نشان دهد.

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

منبع: infolease

منبع: An Event Apart, Boston 2010

نوشته شده به طور انحصاری برای Webdesigner Depot توسط Ben Gremillion الف>. بن یک طراح وب آزاد است که مشکلات ارتباطی را با طراحی بهتر حل می کند.

یک صدای یکنواخت یا دوتایی کجای دیگری می تواند به توضیح اطلاعات کمک کند؟ نظرات خود را در بخش نظرات زیر به اشتراک بگذارید.