10 بهترین روش تجسم داده برای وب

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

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

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

بهترین شیوه‌های زیر به شما کمک می‌کنند تجربیات داده‌ای غنی و روشن‌فکر طراحی کنید.

 

1. طراحی برای یک مخاطب خاص

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

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

از سوی دیگر، تجسم برای مخاطبان متخصص، می‌تواند نمای دقیق‌تری از داده‌ها را نشان دهد تا امکان کاوش و کشف خواننده محور را فراهم کند. جزئیات و تراکم داده ها باید بر سادگی و وضوح بیشتر باشد.

 

2 . برای تسهیل کاوش از تعامل (اما به آن تکیه نکنید) استفاده کنید

این یک عدد نگران کننده است: فقط 10- 15% از بازدیدکنندگان از تجسم های تعاملی در وب سایت نیویورک تایمز در واقع روی دکمه ها کلیک می کنند. تیم گرافیک نیویورک تایمز برخی از بهترین آثار را در تجارت تولید می کند و به ندرت کسی با آنها تعامل دارد!

آنچه این در مورد طراحی تجسم تعاملی نشان می دهد این است که ما نمی توانیم برای ایجاد درک به تعامل تکیه کنیم. داده های کلیدی نباید پشت عناصر تعاملی پنهان شوند و در عوض باید بدون تعامل در دسترس باشند.

آنچه که تعامل برای آن عالی است، امکان ادغام داده‌های اضافی است (که در غیر این صورت ممکن است حذف شوند)، تا به بینندگان علاقه‌مند اجازه دهد تا یک مجموعه داده را عمیق‌تر کاوش کنند. Nathan Yau از Flowing Data بازار را در این سبک از تجسم تعاملی، همانطور که در گرافیک‌های او در علل مرگ و امید به زندگی .

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

به طور مشابه، The Pudding اخیراً تصویرسازی تعاملی را منتشر کرد تا به خوانندگان درباره پارادوکس تولد. در حالی که اکثر غیرآماردانان احتمالاً پارادوکس تولد را که یک مسئله استاندارد در تئوری احتمالات است، کاملاً خشک و غیر شهودی می‌دانند، این تجسم آن را کاملاً جذاب می‌کند. روشی که سازنده تعاملات کاربران اخیر را ترکیب می کند، کل تجربه را کاملاً مرتبط می کند.

هر دوی این مثال‌های تعاملی کار می‌کنند زیرا به بیننده اجازه می‌دهند در داده‌ها شرکت کند، بدون اینکه نیاز به تعامل برای درک باشد.

 

3. از برجستگی بصری برای تمرکز توجه و هدایت تجربه استفاده کنید

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

چند متغیر بصری – در درجه اول رنگ و اندازه – کلیدهای ما برای ایجاد و کنترل برجستگی بصری هستند.

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

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

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

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

1. در امتداد یک مقیاس مشترک قرار بگیرید
2. طول
3. زاویه
4. منطقه
5. رنگ

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

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

چیزی که من واقعاً می خواهم در اینجا تأکید کنم این است که رنگ نباید برای رمزگذاری اطلاعات کمی استفاده شود و در عوض ممکن است برای رمزگذاری اطلاعات طبقه بندی استفاده شود. یعنی می‌توانیم از رنگ استفاده کنیم تا نشان دهیم که بیت‌های مختلف داده به دسته‌های مختلف تعلق دارند.

 

5 . عناصر ساختاری مانند علامت‌ها و محورها را واضح اما نامحسوس کنید

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

هر عنصر ساختاری (مانند پس‌زمینه، خطوط و حاشیه) را که برای شفاف‌سازی داده‌ها کار نمی‌کنند، حذف کنید. عناصر ساختاری ضروری (مانند محورها، شبکه‌ها و علامت‌های تیک) را که در غیر این صورت با داده‌های شما برای جلب توجه رقابت می‌کنند، کاهش دهید. شبکه‌ها را به رنگ خاکستری روشن با حداکثر وزن 0.5 نقطه و محورهای سبک را به رنگ سیاه یا خاکستری با حداکثر وزن 1 نقطه طراحی کنید.

 

6. مستقیماً نقاط داده را برچسب گذاری کنید

هر عنصر بصری که برخی از داده‌ها را رمزگذاری می‌کند باید برچسب‌گذاری شود تا بیننده بفهمد چه چیزی را نشان می‌دهد. ساده است، درست است؟

اشتباه. بسیاری از طراحان به افسانه ها تکیه می کنند تا به خوانندگان بگویند کدام نمادها یا رنگ ها نشان دهنده کدام سری داده در نمودارهایشان هستند. افسانه ها اگرچه برای طراح آسان هستند، اما برای خواننده سخت هستند. آنها خوانندگان را مجبور می کنند بین افسانه و داده ها اسکن کنند و فشار غیرضروری بر حافظه کاری خوانندگان وارد کنند.

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

 

7. از پیام رسانی و سلسله مراتب بصری برای ایجاد یک جریان روایت

استفاده کنید

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

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

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

کلاس

چیزی که در اینجا می‌خواهم بگویم این است: به بیننده کمک کنید و به آنها بگویید دقیقاً در داده‌ها به دنبال چه چیزی بگردند!

 

8. اطلاعات متنی را مستقیماً روی نمودار قرار دهید

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

این تصویر را برای مثال از سوزی لو بگیرید. پوشش‌های «بلاک‌باسترهای تابستانی» و «فصل اسکار» به قله‌ها و دره‌هایی معنا می‌دهند که در غیر این صورت ممکن است تصادفی به نظر برسند. آن‌ها به بیننده کمک می‌کنند اهمیت داده‌ها را به گونه‌ای که مستقیم‌تر از زیرنویس‌ها یا حاشیه‌نویسی‌ها به تنهایی درک کند.

 

9. طراحی برای تجربه موبایل

تجسم‌های استاتیک، که معمولاً در قالب‌های تصویر بیت مپ مانند JPG و PNG منتشر می‌شوند، چالشی آشکار برای بینندگان تلفن همراه ایجاد می‌کنند. زیبایی بسیاری از تجسم‌های داده در جزئیات بصری آنها – در نقاط داده کوچک و رمزگذاری‌های ظریف – نهفته است و بسیاری از این جزئیات در صفحه‌های کوچک در قالب‌های ثابت گم می‌شوند.

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

برای طراحی برای تجربه تلفن همراه، یا با یک کتابخانه تجسم جاوا اسکریپت مانند D3.js یا Highcharts، تجسم‌های پاسخگو بسازید، یا چندین گونه از یک تجسم ثابت را برای چاپ، دسک‌تاپ و موبایل ایجاد کنید.

 

10. تعادل پیچیدگی با وضوح برای تقویت تفاهم

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

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