ماموریت من در ارائه این ۳۱ درس این است که ، طراحان (یا طراحان مشتاق) بیشتری در طراحی تجربه کاربری شروع به کار کنند. بهترین مکان برای شروع یادگیری هر چیز از ابتدای آن است.

@JoelMarsh


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

الگوی Z، الگوی F و سلسله مراتب بصری.

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

الگوی Z :

بیاید با خسته کننده ترین طراحی که می­توانم تصور کنم شروع کنیم: یک صفحه پر از متن بدون تیتر، بدون عکس، بدون حتی یک وقفه. فقط متن!

 

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

الگو حوصله سر بر! Zzzz… کسل کننده و خواب آور!!!

دلیل این که من پنج درس گذشته را صرف یاد دادن اصول طراحی بصری به شما کردم این است که بدانید چگونه این طراحی را به چیز بهتری تبدیل کنید.

اگر یک عنوان اضافه کنیم (وزن بصری)، یک ستون را دنبال کنیم (کشش خط) و از بخش های کوچکتر استفاده کنیم (تکرار) به الگویF  نزدیک تر شده ایم.

 

تصاویر رنگی بالا نتایج ردیابی چشم را نشان می­دهد به نام ” هیت مپ (HeatMap) یا نقشه حرارتی “. در سوابق ردیابی چشم جایی که افراد به آنجا نگاه می­کنند و چیز هایی که بیشتر به آنها نگاه کرده اند، گرم تر به نظر می­رسند.

طرح های مشابه = نتایج مشابه

الگوی  F مدتی پیش موجب معروف شدن بنیانگذاران گروه نیلسن نورمن شد. اگرچه در آن زمان هیچ پیشرفتی نداشتند اما هنوز مقاله های خوب زیادی را منتشر می­کنند.

روش کار الگوی F:

از گوشه­ی سمت چپ بالا شروع کنید مانند الگوی Z .

خط اول (تیتر) متن را بخوانید/اسکن کنید.

سمت چپ ستون را رو به پایین اسکن کنید تا چیز جذابی پیدا کنید. (*البته برای متن فارسی از سمت راست ستون شروع می شود*)

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

به اسکن کردن ادامه بدهید البته به سمت پایین 🙂

با چندین بار انجام دادن این متد نقشه گرمایی شبیه به F یا E خواهد شد.

 

چرا این موضوع مهم است؟

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

یک دکمه در بالا سمت چپ بیشتر کلیک می­خورد (در وب سایت های انگلیسی) نسبت به بالا سمت راست  و یا  نسبت به پایین سمت چپ یا نسبت به پایین سمت راست، همچنین نسبت به دکمه ایی که به طور تصادفی در وسط است مگر این که تغییری در آن ایجاد کنید.

همچنین خوب است بدانید که هر “بلاک” محتوا و هر ستون میتواند الگوی F خودش را داشته باشد. مجبور نیستید برای هر صفحه یک الگوی F داشته باشید. خب بگذریم زیرا این بحث میتواند یک موضوع پیشرفته باشد. در درس های بعدی این موضوع را بررسی می کنیم.

 

سلسله مراتب بصری (Visual Hierarchy) :

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

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

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

اگر می­خواهید دیگر نتایج ردیابی چشم را ببینید سری به صفحه ردیابی چشم در Pinterset بزنید.

در درس بعدی ما تفکر الهام گرفته شده از ردیابی چشم را با یادگیری این که چگونه کاربران از طراحی براساس هدفشان متفاوت استفاده می­کنند: مرور، جستجو و کشف بررسی می کنیم.

لینک کوتاه مطلب : https://uxbook.org/fpSyc

منبع : http://thehipperelement.com


در uxbook تصمیم گرفتیم سری مقالات وب سایت thehipperelement.com را که ۳۱ مقاله می باشد، ترجمه و بر روی وب سایت قرار بدهیم. این مقالات طبق گفته آقای جویل مارش نقطه اصلی و انگیزه او برای شروع نوشتن و ارائه کتاب “طراحی تجربه کاربری برای مبتدیان” بوده است. تمام این ۳۱ درس بخش های کوچکی از کتاب اصلی هستند. نسخه کاملEBook  کتاب طراحی تجربه کاربری برای مبتدیان را از طریق وب سایت uxbook می توانید تهیه کنید.

طراحی تجربه کاربری برای مبتدیان

رسول آخوندی

نویسنده رسول آخوندی

رسول آخوندی هستم دانشجو کامپیوتر شهید بهشتی تهران و علاقه مند به شاخه UI/UX.عاشق خوندن مطالب جدید و دیدن طراحی های جذاب و خلاقانه پاتوقم هم سایت Awwwards و شاید دلیل علاقم به UX این باشه که طراح رو یه خالق میدونم و دوست دارم خالق ایده های نو و طرح های با حال باشم. پر انرژی و از کار کردن تو UI/UX خسته نمیشم. اینم آدرس سایتم واسه دیدن نمونه کارام خوشحال میشم یه سر بهم بزنید :) RasoulAkhoundi.ir

نوشته های بیشتر از رسول آخوندی

نظرتان را بگویید