حسین شرفی
حسین شرفی
خواندن ۲ دقیقه·۲ ماه پیش

نقض کاربردپذیری در طراحی آیکونهای گوگل

گوگل یک اشتباه فاحش در بازطراحی لوگوهاش کرده. همه لوگوها همرنگ شده و این همرنگی، زمان تمایز اونها را توسط مغز، بشدت افزایش میده. (Cognitive Load)

آیکونهای جدید خدمات گوگل
آیکونهای جدید خدمات گوگل
  • وظیفه Label (متن) انتقال مفهوم است. مثلا "خطر"
  • وظیفه آیکون؛ انتقال مفهوم، سریعتر از متن
  • وظیفه رنگ؛ انتقال مفهوم، سریعتر از آیکون

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

اگه مایکروسافت هم میخواست مثل گوگل عمل کند، باید #آیکون های افتضاحی شبیه ردیف دوم عکس بالا را شاهد می بودیم. با recognition time بسیار بالا.

ما لوگوها رو با رنگ تمایز میدهیم و این رنگین کمانی که گوگل ایجاد کرده، گرچه برندینگ رو بهبود داده. اما recognition را خیلی سخت کرده:

تست کاربردپذیری آیکون های گوگل:

نتیجه blur test : لوگوهای گوگل در ردیف بالای عکس پایین و لوگوهای آفیس مایکروسافت در ردیف دوم عکس زیر چیده شده اند.

Blur Test on Google and Microsoft Icons
Blur Test on Google and Microsoft Icons

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

بهبود طراحی آیکونها

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

راهکار بهبود طراحی آیکون اپ های گوگل
راهکار بهبود طراحی آیکون اپ های گوگل


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

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