نکات طراحی وب: کاربردپذیری – طراحی نامریی

نوشته داود تراب‌ زاده 22 خرداد 1390

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

postT.jpg

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

from-scratch.jpg

شما می‌آفرینید :

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

invisible-man.jpg

درست ببینید:

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

think-awful.jpg

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

usability-vs-creativity.jpg

سادگی :

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

simple-cup.jpg

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

parts.jpg

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

طراحی‌نامریی:

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

discasting.jpg

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

bad-pointofview.jpg
multiple-meanings-optical-illusion-3.jpg

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

perfume.jpg

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

logo_02.jpg

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

نمونه‌های دیگری از این سبک‌ طراحی:

logo_10.jpg
logo_01.jpg
logo_04.jpg

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

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

dont-undestand.jpg

استفاده از احساسات و افکار کاربر:

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

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

to-to-app1.jpg

آن‌چه که کاربر می‌خواهد آن زمان که نیاز دارد به او بدهید:

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

confused.jpg

نمونه‌ خوب:

to-do-app2.jpg

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

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

با کاربر ارتباط احساسی داشته‌ باشید:

ugly_doll.jpg

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

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

uglu-doll-fans.jpg

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

egg-shell.jpg

هیچ‌گاه بر سر کاربر منت‌ نگذارید:

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

slimes.jpg

جمع‌بندی:

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

robot-and-cup.jpg

منابع:

Simple and Usable Web, Mobile, and Interaction Design
smahing book
smashingmagazine.com