نکاتی درباره انتخاب رنگ در طراحی رابط کاربری

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

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

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

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

رنگ کیفیت مطلوبی به طراحی «اضافه» نمی‌کند، بلکه آن را «تقویت» می‌کند.
نقل قولی از پی‌یر بونارد

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

همه چیز مربوط به احساسات است

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

پژوهش‌ها نشان داده‌اند که تقریبا 93 مشتریان، بر اساس رنگ و ویژگی‌های ظاهری تصمیم به خرید می‌گیرند. بنابراین انتخاب رنگ‌های مناسب برای نماد، نشان تجاری، و بسته‌بندی محصولاتتان بسیار مهم است.

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

• قرمز: انرژی، توجه، شجاعت، اشتیاق، و قدرت.
  
• نارنجی: خوش‌بینی، خلاقیت، گرما، دوستی، و انرژی.
  
• زرد: شادی، فرصت‌ها، خلاقیت، خوش‌بینی.
  
• ﺳﺒﺰ: رشد، هماهنگی، وابستگی، مهربانی، و سلامتی.
  
• آبی: آزادی، وابستگی، اعتماد، خِرَد، و امنیت.
  
• بنفش: تجمل، ثروت، معنویت، تخیل، و احساس.
  
• صورتی: قوه تخیل، اشتیاق، تغییر و تحول، خلاقیت، و نوآوری.
  
• سیاه: پیچیدگی، امنیت، قدرت، شکوه، و اقتدار.

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

درک کردن مخاطب

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

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

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

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

تعادل رنگ‌ها

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

قانون 60-30-10 قاعده‌ای در دکوراسیون است که در طول زمان خود را اثبات کرده و در همه زمان‌ها قابل استفاده است، و به شما کمک می‌کند تا به سادگی یک طرح‌بندی رنگی مناسب خلق کنید.  هدف قاعده نسبت %60+%30+%10، تعادل بخشیدن به رنگ‌های مورد استفاده در هر فضایی از جمله رابط کاربری شما است. استفاده از این محصول بسیار ساده و کارآمد است.

چگونه از این قاعده استفاده کنیم

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

بخش %60 شما باید اصلی‌ترین رنگ کلی رابط کاربری‌تان باشد. بخش %30 جایگاه رنگ ثانویه را در پالت رنگ شما دارد، و هدفش این است که از رنگ اصلی شما پشتیبانی کند، اما از آن متفاوت باشد تا رابط کاربری شما را جذاب کند. بخش %10 را به عنوان رنگ تکیه‌گاه و تاکید در نظر بگیرید. این بخش %10 در حقیقت به محصول شما هویت می‌بخشد. این بخش می‌تواند رنگ نشان تجاری شما باشد، اما این امر به شما بستگی دارد.

• بخش %60 شما باید رنگی خنثی باشد
  
• بخش %30 شما باید رنگ ثانویه نشان تجاری شما باشد
  
• بخش %10 شما باید رنگ اصلی نشان تجاری شما باشد

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

هویت نشان تجاری

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

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

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

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

درود بر آبی

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

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

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

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

تضاد و کنتراست رنگ/کوررنگی

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

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

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

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

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