۷ قانون اساسی برای طراحی واسط کاربر (UI)

۷ قانون اساسی برای طراحی واسط کاربر (UI)

درصورتی‌که طراح وب باشید، مطمئناً مسئولیت طراحی UI هم بر عهده خودتان است و در آینده نزدیک وظیفه‌تان سنگین‌تر از قبل هم می‌شود. بااینکه این روزها صفحات وب کاملاً مختصر و مفید شده‌اند و عموماً تنها شامل یک بخش هدایتی و تعدادی فرم تماس با ما می‌شوند، بااین‌حال مطرح‌شدن تکنولوژی‌ها و استاندارهای جدید باعث شده مشتریان انتظار داشته باشند سایت‌ها به شکل دینامیک‌تر و سفارشی‌تری طراحی شوند؛ درنتیجه فعالیت‌های طراحی UI نسبت به قبل پیچیده‌تر و گسترده‌تر شده‌اند؛ در ادامه سعی داریم تعدادی از نکات اساسی این حوزه را بررسی کنیم:
•    قانون “سادگی”:
درصورتی‌که المان‌های UI هدف و معنی مشخصی نداشته باشند، کاربر را فراری می‌دهند. شما هم مثل من از جیمیل استفاده می‌کنید؟ جیمیل قبل از آخرین آپدیتش در بخش بالائی صفحه یک نوار هدایتی کاملاً مشخص، شامل تقویم، Google Drive، Sheets و سایر سرویس‌های کاربردی داشت که با یک کلیک ساده کاربر را به منظورش می‌رساندند؛ اما بعد از مدتی گوگل تصمیم گرفت المان‌ها را بیش از این “ساده” کند و همه‌چیز را پشت یک آیکون مخفی کند. نتیجه چه شد؟ اکثر کاربران آیکون را نمی‌دیدند و به جیمیل درخواست کمک می‌فرستادند.
designing-user-interface
بیشتر کاربران به چیزهایی که سر در‌نمی‌آورند توجهی نمی‌کنند؛ این ذات تمام انسان‌هاست. بهتر است در هنگام طراحی UI از المان‌هایی استفاده نکنید که کاربر را سردرگم می‌کنند، چون مطمئناً کسی به خودش زحمت نمی‌دهد دنبال آن برود.
•    قانون “کاری که بهتر است بکنیم”:
کاربران معمولاً درصورتی‌که بدانند کدام کار به صلاحشان است، احساس بهتری پیدا می‌کنند. این صفحه توییتر را در نظر بگیرید:
designing-user-interface1
فکر می‌کنید کاربران جدید بدانند باید چه‌کار کنند؟ واضح است که باید توئیت کنند؛ بااین‌وجود دکمه “نوشتن توئیت جدید” در گوشه سمت راست‌بالا چندان مشخص نیست. (قانون سادگی را یک‌بار دیگر ببینید) باکس ورودی در نوار سمت چپ هم کاملاً در فضای صفحه محوشده است. ازنقطه‌نظر طراحی وب، به نظر می‌رسد توییتر قصد دارد کاربران را وادار کند به دنبال المان موردنظرشان بگردند یا اینکه یکی از گزینه‌های موجود در منوی هدایتی سمت چپ را انتخاب کنند که مشخص‌تر است. نباید طوری رفتار کنیم که کاربران ندانند در این مرحله قرار است چه‌کار کنند.
•    قانون “نزدیکی کنترل به شیء”:
کاربران توقع دارند کنترل‌های UI نزدیک به شیئی که قصد دارند تغییرش بدهند قرار داشته باشد. اسممان را داخل فیس‌بوک چطور ویرایش می‌کنیم؟ وارد بخش تنظیمات که در گوشه سمت راست‌بالا قرارگرفته می‌شویم، بر روی گزینه تنظیمات اکانت کلیک می‌کنیم، گزینه نام را پیدا می‌کنیم و بر روی دکمه Edit کلیک می‌کنیم.
designing-user-interface2
داخل لینکدین چطور؟
بر روی مدادی که نزدیک اسممان قرار دارد کلیک می‌کنیم. کاربران همیشه توقع دارند المان‌های UI نزدیک به شیئی که قصد دارند تغییر بدهند قرار داشته باشد. زندگی واقعی هم به همین صورت است: اگر بخواهیم ذرت بو بدهیم، دکمه روشن روی ماکروویو را فشار می‌دهیم. منطقی نیست که داخل طرز کار ماکروویو نوشته باشد باید از پله‌ها پائین برویم، داخل انباری جعبه برق را پیدا کنیم و سوئیچ G-35 را بزنیم تا ذرت‌ها کم‌کم بوداده شوند. (پروسه عوض کردن اسم در فیس‌بوک تقریباً به این صورت است!)
بهتر است همه‌چیز دم دست کاربر باشد؛ درصورتی‌که باید چیزی را ویرایش کنند، خوب است کنترلش نزدیک به آن تعبیه‌شده باشد.
•    قانون “پیش‌فرض”:

به‌ندرت ممکن است کاربران تنظیمات پیش‌فرض را تغییر بدهند. این رینگ تون را شنیده‌اید؟ حتماً شنیده‌اید… مدت‌ها معروف‌ترین رینگ تون دنیا بود… اما چرا؟ چون رینگ تون پیش‌فرض بود و بسیاری از افراد به خودشان زحمت نمی‌دادند عوضش کنند. تنظیمات پیش‌فرض قدرت فوق‌العاده‌ای دارند:
•    بیشتر افراد بک‌گراند و رینگ تون پیش‌فرض موبایلشان را عوض نمی‌کنند.
•    بیشتر افراد (ازجمله خود شما!) هیچ‌وقت تنظیمات کارخانه تلویزیونشان را عوض نمی‌کنند.
•    بیشتر افراد هیچ‌وقت دمای پیش‌فرض یخچالشان را عوض نمی‌کنند.
ما معمولاً متوجه تنظیمات پیش‌فرض نمی‌شویم و خبر نداریم چنین تنظیماتی تمام دنیا را اداره می‌کنند. درنتیجه بهتر است پیش‌فرض‌های سایت را به صورتی انتخاب کنید که برای کاربران تا حد ممکن ارزشمند و کاربردی باشند؛ بهتر است احتمال بدهیم بعضی از افراد هیچ‌وقت تغییرشان نمی‌دهند.
•    قانون “کاری که قرار است بکنیم”:
معمولاً درصورتی‌که از کاربر بخواهیم کاری بکند، با احتمال بیشتری دست‌به‌کار می‌شود. بین اینکه کاربر را به حال خودش رها کنیم تا کاری کند و اینکه راهنمایی‌اش کنیم تا کار دلخواهمان را بکند تفاوت زیادی وجود دارد.
designing-user-interface3
آن زمان که لینکدین قابلیت endorsement را به پروفایل‌ها اضافه کرد، کاربران را به حال خودشان رها نکرد تا از امکان جدید سر دربیاورند، بلکه بنرهای بزرگی طراحی کرد و بالای پروفایل‌ها قرار داد تا کاربرانی که ذاتاً به تائید کردن دیگران علاقه داشتند از قابلیت جدید هرچه بیشتر بهره ببرند. نکته آموزنده این است که اگر می‌خواهیم کاربران کاری کنند، باید بدون معطلی تشویقشان کنیم.
•    قانون “فیدبک “:
درصورتی‌که درباره المان‌های UI به کاربران فیدبک مشخصی بدهیم، اعتماد بیشتری پیدا می‌کنند؛ کاملاً هم منطقی است؛ هرچه از طریق UI با کاربر ارتباط بیشتری برقرار کنیم، کاربران به استفاده از آن اطمینان بیشتری می‌کنند. جیمیل مثال خوبی در این زمینه است. هر بار که کاربر کاری می‌کند، بلافاصله فیدبکی شامل لینک‌های اطلاعات بیشتر و undo دریافت می‌کند. به‌این‌ترتیب کاربر احساس می‌کند بر روی المان‌ها کنترل بیشتری دارد و ترغیب می‌شود تا مجدداً از قابلیت‌های مختلف استفاده کند.
designing-user-interface4
•    قانون “راحت بودن کارها “:
درصورتی‌که فعالیت‌های پیچیده را به گام‌های کوچک‌تری تجزیه کنیم، کاربر با احتمال بیشتری دست‌به‌کار می‌شود. این دو فرم را باهم مقایسه کنید:
designing-user-interface5
هر دو تعداد مشابهی فیلد دارند، ولی فرم سمت راست بسیار راحت‌تر به نظر می‌رسد. همه ما از پر کردن فرم‌های طولانی و پیچیده نفرت داریم، چون این قبیل فرم‌ها خسته‌کننده و اعصاب‌خردکن هستند و بررسی مجدد اطلاعات واردشده برای اطمینان از صحتشان هم واقعاً طاقت فرساست. ولی اگر بتوانیم فرم را به چند بخش کوچک‌تر تفکیک کنیم و به کاربر یک نوار پیشرفت کار نشان بدهیم، مدیریت همه‌چیز ساده‌تر می‌شود. قانون راحت بودن کارها دقیقاً همین است.
مردم ترجیح می‌دهند ۱۰ کار کوچک انجام بدهند ولی درگیر یک کار طولانی و پیچیده نشوند. کارهای کوچک اذیت کننده نیستند و به‌محض اینکه تمام بشوند، به فرد نوعی احساس مفید بودن می‌دهند.

شبکه های ما

باعث افتخار ماست اگر ما را در شبکه های اجتماعی دنبال کنید.

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

لطفا جهت مکاتبات آینده ایمیل خود را وارد نمایید.

با موفقیت انجام شد.

متاسفانه خطا رخ داد

وبلاگ مرواهاست will use the information you provide on this form to be in touch with you and to provide updates and marketing.