نمايش تصويری، استفاده از چارت، گراف، تصوير و رنگ در نوشته

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


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

Healthcare-Dash

اين نكته بسيار مهم است كه وقتی برای اولين بار به يك داشبورد نگاه می كنيم چشم ما ناخودآگاه به كدام سمت هدايت می شود. برای نمونه در داشبورد فوق، احتمالا به سمت باكس های رنگی در بالای صفحه كه داخل آن آيكون ها و يا شماره های بزرگ قرار دارد! يا شايد به سمت يك گراف قيفی شكل! اين يك مثال بود در مورد اينكه چگونه می توانيم با رنگ ها توجه را به سمت مورد خاصی جلب كنيم.
حالا به چند نكته در مورد انتخاب رنگ ها در داشبورد اشاره می كنيم.


• حواسمان به رنگ سازمانی مشتريانمان باشد!
اگر شركتی كه می خواهيم برای آن داشبورد آماده نمائيم دارای رنگ سازمانی خاصی می باشد، حواسمان باشد كه اين رنگ را بايد به بهترين شكل ممكن در داشبورد استفاده نمائيم. اما اگر مشتری رنگ سازمانی خاصی نداشت، بهتر است خود شما اين رنگ را با الهام گرفتن از نوع كسب و كار، وبسايت و… انتخاب كنيد. برای مثال در وبسايت مشتری، رنگ متون مهم و عناوين چيست؟ رنگ پس زمينه وبسايت يا حتی سربرگ شركت چيست؟ بهتر است رنگ عناوين مهم و رنگ پس زمينه داشبورد نيز متناسب با سايت، سربرگ و… مشتری باشد.

screen_shot_2016-12-02_at_1.31.29_pm

• استفاده از رنگ های روان شناسی
رنگ ها سيگنال می فرستند!! درست مثل چراغ راهنمایی و رانندگی! سبز يعنی “برو”! زرد يعنی “احتياط كن”! قرمز يعنی “توقف”!
وقتی حواسمان به خيلی از مطالب و نتايج نيست، رنگ ها می توانند نتايج را به خوبی نشان دهند. در هر منطقه و بر اساس موقعيت مكانی يا شرايط كاری، هريك از رنگ ها می توانند نشان دهنده ی پيام خاصی باشند، ولی در زير به برخی از رنگ های متداول اشاره می كنيم:

Blue

“آبی”

(+): مهارت و تجربه، اطمينان و اعتماد، خرد و دانش، آرامی و متانت

(-): سرد و بی­روح، بی­عاطفه، غم­انگيز، غيردوستانه

Purple

“بنفش”

(+): معنويت و روحانيت، تجملی و لوكس، مقام، سلطنت، پادشاهی

(-): درون­نگری، تكبر، خودبينی، غيرعملی و نشدنی

Red

“قرمز”

(+): انرژی و قدرت، تند و تيزی، جوش و خروش، شور و هيجان

(-): توقف كردن، تجاوز و حمله، خروشاندن، خون، هشدار و آماده باش

Pink

“صورتی”

(+): عشق، جنس مونث، زنانه، آسوده، آرام، ساكن

(-): ناتوانی، ضعف و سستی، ضعف اقتصادی، بی­استحكامی، نارس و نرسيده، نابالغ

Yellow

“زرد”

(+): خلاقيت، روحيه، جشن و شادی، خوشبينی

(-): هشدار، احتياط، خطر، ناكامی و درماندگی، خشم و غضب، گرسنگی

White

“سفيد”

(+): خلوص و پاكی، خوش­هيكل و خوش اندام، تميزی، جادار و پرحجم

(-): خستگی، كدورت، خالی، تسليم

Green

“سبز”

(+): تندرستی و سلامتی، اطمينان و قوت قلب، رشد و رويش، ترقی، ثروت و دارايی

(-): حسادت، غبطه، مادی­گرایی

Gray

“خاكستری”

(+): آرام، ساكن، متين، بی­طرفی، شدنی و عملی

(-): ملايم، ميانه­رو، دپرس، دلتنگی

Orange

“نارنجی”

(+): انرژی و قدرت، دگرگون شدن، خوشی و شادكامی، محرك و عامل انگيزه

(-): ناكامی، درماندگی، نارس و نرسيده، رياكاری

Black

“مشكی”

(+): قدرت، نيرو و توان، پختگی، جادو و طلسم

(-): ظلم و ستم، آزار، دلواپسی، شيطان، عزاداری، غم و ماتم و سوگواری

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

چند پيشنهاد در انتخاب بهتر رنگ ها:
+ بيش از يك رنگ پر و تيز در صفحه استفاده نكنيد.
+ انتخاب رنگ پس زمينه اهميت زيادی دارد، در انتخاب آن وقت بيشتری بگذاريد.
مثلا رنگ های روشن، با اكثر رنگ ها سازگاری دارند و باعث می شوند دست شما در انتخاب ساير رنگ ها در ادامه كار، بازتر باشد. از جهتی ديگر متن ها هم در رنگ های روشن، خواناتر هستند.
و اما رنگ های تيره، نمايشی و دراماتيك تر هستند ولی از طرف ديگر فقط با تعداد رنگ محدودی تری زيبا به نظر می رسند.

Dashboard-Dark Dashboard-Light

+ سعی كنيد بيشتر از رنگ های تيز و پر، برای مواردی نظير، عناوين گراف ها، يا دكمه های اجرایی استفاده كنيد تا كاربران متوجه اهميت آن بشوند.
+ برای متون، از رنگی استفاده كنيد كه در رنگ پس زمينه، كاملا مشخص باشد تا كاربران بخوبی بتوانند آن ها را بخوانند.

Sales-Trend

+ سعی كنيد از مشكی يا سفيد خالص استفاده نكنيد. در عوض از رنگ خاكستری‌ متمايل به مشكی و يا سفيد همراه با هاله ای از خاكستی استفاده كنيد.


• گراف!
در داشبوردها، بسياری از رنگ های كه در مورد آن صحبت شد، در گراف ها استفاده می شوند. در يك گراف خيلی راحت می توان از انواع رنگ ها استفاده كرد. اينجا چند پيشنهاد ارائه می شود كه می توان گراف ها را بسيار هدفمند و جذاب نشان داد:
+ استفاده از رنگ های محدود در گراف.
برای نمونه، اگر فكر می كنيد رنگ مورد علاقه مشتری آبی و خاكستری است ولی شما به رنگ های بيشتری برای نمايش گراف ها نياز داريد، بهتر از كمرنگ و پرنگ كردن همان رنگ های مورد علاقه مشتری، رنگ های جديدتری بدست آوريد.
+ رنگ های مختلف را برای گراف های مخلتلف به كار ببريد.
بدين معنا كه اگر برای مثال رنگ های مورد نظر مشتری، آبی، نارنجی، سبز و صورتی است، گراف اول می تواند از رنگ های شبيه آبی باشد، گراف دوم از رنگ های شبيه نارنجی و…

colors

• استفاده از رنگ های هشدار دهنده نظير قرمز، سبز و زرد را فراموش نكنيد.
اين رنگ ها را می توانيد همراه با سايه ای زيبا استفاده كنيد. همچنين می توانيد با افزايش يا كاهش ميزان غلظت اين رنگ ها، اهميت آن ها را بيشتر يا كمتر جلوه دهيد.

Thresholds_0000_Too Much Thresholds_0001_Yellow Red Only Thresholds_0002_Red Only Thresholds_0003_Red Text


استفاده از گراف ها:
اين قسمت را با مثال آغاز می كنيم.

0000_before

فرض كنيد، اين داشبورد يك شركت داروسازی است. خيلی شلوغ است و حتی باعث سردرگمی می شود. حال داشبورد زير را مشاهده نمائيد:

0001_after

با تغييراتی اندك در داشبورد قبل، می بنيد كه می توان نتايج بهتری به دست آورد.
سخت بود؟!

تنها بايد بدانيم چه گراف و نموداری را برای چه كاری استفاده كنيم. رنگ بندی مناسب چيست؟ و…
كاربر با مشاهده داشبورد می خواهد به در كوتاهترين زمان، نتايج كافی را برداشت كند. وقتی صفحه شلوغ و درهم باشد، نمی توان به اين نتيجه رسيد.
هميشه بايد بدانيم:
“چه چيز مهم تر است”
“توضيحات بايد شفاف و مختصر باشند”
“گراف ها بهتر از در پس زمينه روشن به كار گرفته شوند”
مقايسه كنيد:

graphic-1۱) مقدار نوشته ها را كمتر كرديم ۲) رنگ پس زمينه روشن شد

فاصله های خالی بين نوشته ها و عناوين و… را بيشتر كنيد.
قسمت های خالی و مناسب در صفحه باعث می شود تا بيننده بتواند بهتر تفاوت گراف های مختلف را لمس كند. موارد اضافی را حذف كنيد و برای مثال در ادامه مطلب قرار دهيد.

graphic-2_0

سعی كنيد كه از لوگو و برند مشتری، در داشبورد خود استفاده كنيد. اين كار قطعا باعث رضايت مشتريان شما خواهد شد. اين كار باعث می شود تا مشتری احساس كند، اين سيستم مختص او طراحی شده است.

graphic-3_0۱) رنگ سازمانی مشتری ۲) لوگوی اختصاصی مشتری

نبايد اجازه دهيد كه مشتری زياد به فكر فرو رود. گراف ها بايد كاملا شفاف، همراه با راهنما و توضيحات مختصر مناسب باشند.

graphic-4۱) اضافه كردن برچسب همرنگ نمودار

حال با هم در مورد گراف ها صحبت خواهیم کرد و اینکه چه زمانی بهتر است از گراف استفاده کرد، انواع نمودارهای مورد استفاده چه ها هستند و…

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

03-02_google_analyticsتصویر-گوگل آنالیز در حال نشان دادن میزان استفاده از مرورگر برای Design Instruct.

آیا می توانید تصور کنید اگر به جای رسم نمودار از آمار وب سایت ها، گوگل آنالیز تنها داده ها را به صورت اعداد خام در درون قالب جدولی یا لیست نمایش می¬داد چه می شد؟ به احتمال بسيار زياد، شما ۹۰ ٪ از اطلاعات حیاتی مورد نیاز را از دست داده یا نمی توانستید تحلیلی درست داشته باشید!

انواع نمودارها
در زیر برخی از انواع محبوب و متداول نمودارها و گراف ها برای تجسم داده ها آورده شده است.

• نمودار دایره ای(Pie Chart)
نمودار دایره ای یک نوع نمایش اطلاعات در دایره¬ای است که به چند بخش تقسیم شده و بيشتر برای نشان دادن نسبت و سهم هر فاکتور به کار می رود.

03-03_pie_chart_example

• نمودار میله ای( Bar chart )
نمودار میله ای (گراف میله ای) نموداری با میله های افقی یا عمودی مستطیل شکل است که طول هر میله یا ستون متناسب با میزان عددی یا ارزش داده ای مربوط به آن است. در اين نوع نمودار می توان مقايسه ی بهتری بين فاكتورها داشت.

03-04_bar_chart_example

• نمودار پراکندگی(Scatter Plot)
نمودار پراکندگی داده ها، نمایش دهنده پراکندگی آماری داده ها به شکل نقاط است. مختصات هر نقطه ای که بر روی نمودار رسم شده، با دو متغیر در روی محورهای افقی و عمودی مشخص می گردد. اين نمودار را برای نمونه می توان برای نمايش پراكندگی بازديدكنندگان يك وب سايت بر روی نقشه استفاده كرد.

03-05_scatter_plot_example

• نمودار خطی/سطحی(Line/Area Chart)
یک چارت سطحی (که نوعی از نمودار خطی است) توسط مجموعه ای از نقاط داده که با خط به هم متصل شده اند تشکیل می شود.

03-06_area_line_chart_example

 

  • مثال موردی:

03-08_freelance_review_examplesتصویر-نمودار میله ای تصویر بالا نمایش دهنده محبوبیت روش های رایج ارتقاء وبلاگ های طراحی است

 

ایجاد نمودار
در میان نرم افزار های رایانه ای تعدادی برنامه کاربردی خوب وجود دارند که شما می توانید برای ایجاد نمودار های جذاب و کارآمد از آنها استفاده کنید. ۳ تا از برنامه های معروفتر در این زمینه عبارتند از: Illustrator, Numbers و Excel.
البته برنامه Numbers (سیستم عامل مک) و مایکروسافت اکسل هر دو برنامه های صفحه گسترده هستند. من شخصا ترجیح می دهم از Numbers استفاده کنم زیرا ویژگی های جذاب تری مانند نمودار های سه بعدی و بافت را ارائه می دهد که می تواند به در نمودار های مربوط به نقشه برداری مفید واقع شود.
ایجاد نمودارها در ادوبی ایلوستریتور خوب و راحت است. همچنین برنامه انعطاف پذیری زیادی در خلق نمودار دارد. ایلوستریتور همچنین استفاده از افکت های سه بعدی را آسان کرده و مثل هر شیء قابل ویرایش در ایلوستریتور ، شما می توانید هر بخشی از نمودار را دستکاری کنید که این قابلیت در هر برنامه صفحه گسترده ای امکان پذیر نیست.
بسیاری از طراحان استفاده از ایلوستریتور را به دیگر برنامه صفحه گسترده ترجیح می دهند تنها به این دلیل که ذخیره و استفاده از فایل های ایلوستریتور برای آنها بسیار آسان است، در حالی که فایل های ایجادشده توسط برنامه های صفحه گسترده را باید برای استفاده اکسپرت(export) کرد.

ایجاد نمودار در برنامه Illustrator : بررسی اجمالی
هنگامی که شما در برنامه ایلوستریتور یک سند جدید را باز می کنید، اولین کاری که شما می بایستی انجام دهید این است:رفتن به Window > Show Tools.. حالا می توانید بر روی ابزار نمودار (Graph Tool)، کلیک کنید تا پنجره ای پر از گزینه های مربوط به ایجاد نمودار باز شود.
این جا همان مکانی است که شما می توانید با انتخاب نوع نمودار شروع به تغییر ظاهر و نمایش گراف به دلخواه خود کنید.سپس روی OK کلیک کرده، سپس روی ابزار نمودار کلیک کنید و با گرفتن دکمه سمت چپ ماوس و کشیدن(drag) سند باز شده خود را به پنجره گراف درگ کنید.
هنگامی که شما دکمه ماوس را رها کنید، پنجره ای ظاهر خواهد شد که به شما اجازه می دهد اطلاعات مربوط به نمودار خود را تایپ کرده یا از طریق یک فایل وارد(import) کنید.

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

ایجاد یک نمودار در اکسل : بررسی اجمالی
همانند Numbers ، وقتی سند صفحه گسترده ای با داده های وارد کرده به وجود آوردید ، می توانید نمودار را تنها با چند کلیک ایجاد کنید. فقط کافیست سلول هایی که می خواهید نمودار را بر اساس ان رسم کنید های لایت کنید و بر روی Insert و Charts کلیک کنید. نوع نمودار را انتخاب کنید و کار تمام شد!

نمودارهای DIY : نمودار مخصوص خود را ایجاد کنید
هر برنامه جدول های محدودی دارد و هر نوع جدولی را نمیتوانید در یک برنامه ایجاد کنید(موارد خاص). بسته به شرایط ، گاهی روش « خلق ابتکاری» در خلق نمودارها روش خوبی است.
نمودار های گرافیکی ، یا infographics ، اساسا نمودار استروئیدی و اغلب در ترکیب با نمودارهای استاندارد همراه با اطلاعات اضافی خلاق و ابتکاری هستند. قرار دادن یک نمودار Venn با تعدادی دایره در هر دو برنامه فتوشاپ یا ایلوستریتور کاری ساده است.

03-07_infographic_exampleتصویر-نمونه ای از نوعی نمودار کمتر معمول نمایشگر برنامه های کاری گروه بیتلز

 

  • نکات و ایده هایی برای داشتن نمودارهایی بهتر
    در زیر چند راه حل ارائه شده که به شما کمک می کند تا به نمودارهای خود کمی چاشنی جذابیت اضافه کرده و آنها را متمایز از نمودارهای معمولی کنید.

• استفاده از بافت
سعی کنید از بافت های چشم نواز به جای رنگ های سالید و غیر جذاب در بخش های مختلف نمودار خود مانند میله های نمودار میله ای استفاده کنید. به ویژه بافت چوبی و یا ریز دانه های فلزی بسیار زیباست

03-09_chart_example_textures

• استفاده از عمق
اضافه کردن عمق به نمودار جلوه ای ۳ بعدی به آن می دهد و این جلوه همیشه زیبایی خاص خود را دارد اما در ضمن می تواند بر روی خوانایی داده های نمودار هم تاثیر منفی بگذارد ، بنابراین خیلی در استفاده از این جلوه زیاده روی نکنید؛در حد معمول باشد!

03-10_3d_chart

• نمودارهای ترسیم شده با دست
گراف ها و نمودارهای طراحی شده با دست، در حالی که به طور کلی دقت کمتر دارند ، می تواند عنصر تنوع را به مطلب شما اضافه کنند.

03-11_handsketch_diagram_example

“پيروز و سربلند باشيد”

منابع:

  • http://www.claraview.com/resource-center/blog/all-data-visualization-mobile-development-dashboards-business-intelligence
  • http://www.claraview.com/resource-center/blog/data-visualization-mobile-development-dashboards-business-intelligence/quick
  • http://sixrevisions.com/content-strategy/using-charts-and-graphs-for-content/

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *