در پروسه طراحی وب سایت (طراحی UX) به عنوان یک طراح هموراه به دوراهی (یا چندراهی!) هایی برخورد میکنیم که انتخاب هر کدام از مسیرها ما را به سمت خلق یک طرح موفق یا نا موفق می برد. انتخاب اینکه کدام گزینه ها در منوی ناوبری باشد. یا اصلن منوی ناوبری را در کجا قرار بدهیم؟ و سوالاتی مانند این. تعدادی از قوانین و اصول هستند که مانند تابلو های راهنمای کنار جاده ها مسیر درست را مشخص میکنند. مانند اصول پایه طراحی، اصول گشتالت، سوی گیری های شناختی و اصول ابداعی البته در این مقاله ما فقط در مورد طراحی UX در این مقاله قصد داریم با 5 اصل پایه برای طراحی وب سایت از جنبه UX آشنا و با ارایه مثالهای واقعی کاربردهای هر کدام رو بررسی کنیم.
در حالی که UI ( User Interface ) به یک سیستم واقعی اشاره داره و قابل مشاهده است و بیشتر جنبه هنری داره، UX ( User Experience ) قابل مشاهد نیست و بیشتر با احساسات کاربران درگیر بوده و جنبه رواشناسانه! داره. پس حتی اگر قصد داریم سایتی متفاوت یا یک سایت خلاقانه طراحی کنیم باز هم باید حداقل ها اصول طراحی UX را رعایت کنیم. از طرفی هر چند دو موقوله UI و UX جدا از هم شناخته می شوند اما به شدت وابسته به هم هستند. شاید برخی از گفته من خوششان نیاید اما طراح UI خواه ناخواه باید با اصول و قواعد UX آشنایی داشته باشد. تصور کنید شما زیباترین وب سایت دنیا را طراحی کرده اید، اما کارایی ندارد و یا برعکس وب سایتی با کارایی بالا طراحی کردید اما ظاهر جذابی ندارد. هر دو این وب سایت ها قطعا مورد اقبال قرار نخواهند گرفت ودر گوشه ای از دنیای بسیار پهناور وب به خاطره ها خواهند پیوست. با یک مثال کمی بیشتر موضوع را شفاف میکنم؛ برای طراحی ظاهر لینک ها در یک وب سایت، اصول UX به ما میگوید برای ایجاد اصطکاک کمتر و هزینه تعامل پایین تر در کاربر، ظاهر همه لینک ها باید یکسان باشد تا کاربر با دیدن آنها سریعا متوجه شود که آنها لینک و قابل کلیک کردن هستند. بنابراین طراح UI در مورد طرح ظاهر لینک ها آزاد است اما در مورد تنوع طرح لینک ها محدودیت دارد یعنی طبق اصول UX نباید برای هر لینک ظاهری متفاوت طراحیمند.
در این مقاله 5 اصل پایه که برگرفته از سایت Law of ux می باشد را برای طراحی وب سایت با مثالهایی واقعی بررسی میکنیم .
اصول پایه برای طراحی وب سایت و کاربرد های آن
1- قانون آستانه دوهرتی
اولین اصل UX که بررسی میکنیم، قانون آستانه دوهرتی ( Doherty Threshold ) است. این قانون نام خود را مدیون محقق شرکت IBM، والتر ج. دوهرتی است. آقای دوهرتی و همکارانش در سال 1982 روی زمان بهینه برای پاسخگویی ماشین به تعاملات کاربر تحقیق می کردند. این اصل بیان میکنه برای متمرکز نگه داشتن کاربر روی انجام وظایفش بهترین زمان پاسخگویی کمتر از 400 میلی ثانیه است.
کاربرد قانون آستانه دوهرتی در طراحی وب سایت
عملکرد بهینه: مطمئن شوید تمام آیتم های تعاملی ( لینک ها، دگمه ها، جعبه های تعاملی و غیره…) در کمتر از 400 میلی ثانیه به کاربر پاسخ میدهند. اگر کاربر برای مشاهده پنل سبد خرید روی دگمه ای کلیک میکنه بهتره مطمئن باشید درکمتر از 400 میلی ثانیه پنل سبد خرید در صفحه کاربر ظاهر میشه.
استفاده از المان های بصری: در موارد که احتمال میدهید میزان پاسخگویی ممکن است طولانی باشد از المانهای بصری برای نشان دادن فرآیند پردازش استفاده کنید. برای مثال وقتی کاربر روی دگمه فیلتر کلیک میکند و این فیلتر قرار است با استفاده از API محتوایی برای کاربر آماده و روی اجرا کن با توجه به اینکه میدانیم بسته به سرعت شبکه و سیستم کاربر این زمان ممکنه طولانی باشه پس بهتره وقتی کاربر روی دگمه کلیک میکنه با نشان دادن انیمیشنی (انیمیشن لودینگ) به کاربر نشان بدهیم که دستورات او دریافت شده و در حال پردازش است. اگر فرآیندی ممکن است بیش از یک ثانیه طول بکشد (مانند آپلود کردن یک فایل در یک فرم) بهتر است با استفاده از نوارهای پیشرفت (progress bar ) ذهن کاربر را در حین پردازش درگیر نگه داریم و میزان تاب آوری زمان انتظار را برای کاربر تحمل پذیر تر کنیم.
زمان انیمیشن ها: دو ویژگی animation-duration و transition-duration زمان اجرای انیمیشن ها در CSS را تعیین میکنند. هنگام تنظیم کردن آنها به قانون آستانه دوهرتی توجه داشته باشید
2- اصل تیغ اوکام
دومین اصل ضروری که در هنگام طراحی UX وب سایت باید با آن آشنا باشیم اصل تیغ اوکام نام داره که به نام فیلسوف و الهی‌دان قرن چهاردهم، ویلیام اوکام (William of Ockham) نامگذاری شده است. (یکی از اصول مورد علاقه من!)
تیغ اوکام که به عنوان اصل صرفه‌جویی (Principle of Parsimony) نیز شناخته می‌شود، بیان میکند که هنگام مواجه با فرضیه‌های متفاوت برای یک پدیده، باید ساده‌ترین مورد را ترجیح دهیم. به طور خلاصه باید از پیچیدگی های غیر ضروری دوری کرد.
کاربرد اصل تیغ اوکام در طراحی وب سایت
رعایت سادگی: بهترین مثال صفحه جستجوی گوگل است. در این صفحه فقط ابزارهای لازم برای یک جستجوی ساده گنجانده شده نه چیزی بیشتر نه کمتر. در هنگام طراحی صفحات و افزودن المانها از خود بپرسید آیا وجود این المان ضروری است. مثلا اگر یک فرم ثبت نام طراحی میکنید یک فیلد برای ایمیل یا شماره تلفن و یک فیلد برای انتخاب رمز ورود کافی است. اطلاعات تکمیلی را میتوانید در فرصتی دیگر از مخاطب بگیرید. یا مثلا وقتی ایمیل یا شماره تماس مخاطب را برای ارسال کد تایید احراز هویت دریافت میکنید دیگر نیازی به درج کپچا های پیچیده نیست.
کاهش بار شناختی: با انتخاب متن درست برای المانها، پیامهای هشدار و خطاها، درج متن راهنما برای ورودی های کاربر و استفاده از آیکون ها و نمادها تا حدی بار شناختی کاربر را کاهش دهید.
تمرکز بر عملکرد اصلی: طرح شما در هر قسمت و صفحه یک سایت می بایست بر اساس هدف و عملکرد اصلی آن قسمت یا صفحه باشد. از طرفی نباید این ساده سازی عملکرد آن قسمت یا صفحه را تحت تاثیر قرار دهد. واقعیت این است که کاربر اکثر وب سایت ها، طیف گسترده ای از مخاطبین و با سطح دانش متفاوت است. سوال اینجاست که کدام دسته از مخاطبین را به عنوان معیار در نظر بگیریم؟ در یک کلام طرح شما باید برای مخاطبین با کمترین دانش استفاده از محصولات دیجیتال به راحتی قابل استفاده باشد. دوباره به مثال صفحه جستجوی گوگل برگردیم. این صفحه به طور مشخص برای کاربران با حداقل دانش کار با سیستم طراحی شده (یک کادر برای درج عبارت جستجو و دو تا دگمه) اما طراحان گوگل کاربران حرفه ای تر را هم فراموش نکرده اند آنها امکاناتی را برای کاربران حرفه ای تر در نظر گرفته اند که با استفاده از ـیکونهای کنار کادر جستجو و حتی با استفاده از ترفندهای متنی به صورت حرفه ای تر جستجو کنند بدون اینکه پیچیدگی غیر ضروری را به طرح اضافه کنند. ما هم می توانیم در پروسه طراحی وب سایت تمام المان ها و ابزارهای مورد نیاز برای عملکرد اصلی را با در نظر گرفتن سطح حداقلی دانش کاربران در اختیار ایشان قرار داده و در صورت نیاز به ابزارهای پیچیده تر و تنظیمات بیشتر برای کاربران حرفه ای تر آنها در در یک منوی تنظیمات یا لینک جداگانه جمع آوری کنیم.
3- اصل پارتو
سومین اصل برای طراحی UX اصل پارتو است این اصل که به قانون 80 /20 هم معروف است عنوان میکنه که در بسیاری از رویدادها، تقریباً ۸۰٪ اثرات از ۲۰٪ علل ناشی می‌شوند. به عبارت ساده تر برخی از گزینه ها سهم بیشتری در موفقیت یک طرح دارند. پس به عنوان یک طراح وب سایت کار ما در وهله اول شناسایی این گزینه های با اهمیت تر است.
به کارگیری اصل پارتو در تجربه کاربری:
اصل پارتو در واقع عنوان میکنه که در هر سیستمی، تنها چند متغیر اصلی بر نتایج تأثیر می‌گذارند، و بسیاری از عوامل دیگر تأثیر کمی دارند یا اصلن هیچ تأثیری ندارند. به عبارت دیگر اصل پارتو بیان کننده سرمایه‌گذاری ضعیف در زمان و تلاش است. اصل پارتو چندین کاربرد در در طراحی سایت دارد؛
اصل پارتو در مدیریت زمان: اولین کاربردش حین پروسه طراحی وب سایت است. یک طراح سایت بر اساس آنچه کارفرما در نظر دارد باید قادر باشد صفحات مهمتر را شناسایی کند و بر اساس آن زمان تحویل پروژه و انرژی خودشو بودجه بندی کنه.
اصل پارتو در طراحی یک صفحه از وب سایت: کاربرد دیگر اصل پارتو مربوط به طراحی یک صفحه است. برای مثال طراحی یک صفحه فرود را در نظر بگیرید. هدف طراحی تمام بخشها، تک تک تصاویر به کار رفته و تمام واژه های تایپ شده این است که کاربر را به سمت دگمه فراخوان (CTA) هدایت کند. بنابراین اهمیت هر بخش نسبت به بخشی دیگر متفاوت است. به همان روش می توانید زمان خود و میزان مهارت خود را بسته به اهمیت بخش های یک صفحه وب سایت مدیریت کنید.
اصل پارتو در طراحی المان های وب سایت: حتی در طراحی المانهایی نظیر منوی ناوبری هم میتوان ازا ین قانون استفاده کرد. در جایی که تعداد آیتم ها یا گزینه ها زیاد است می توان آنهایی که با اهمیت بیشتر هستند را مستقیما در دسترس کاربر قرار داد و ما بقی گزینه ها را در المانهای فشرده کننده مثل آکاردئون ها، لیست های کشویی، زیر منوها و غیره… قرار داد.
اصل پارتو در افزایش نرخ تبدیل: شاید یکی از کاربردهای مهم قانون پارتو در زمینه طراحی سایت مربوط به شناخت مخاطبان با پتانسیل بالاست. شناخت مخاطب و شخصیت شناسی مخاطبان یک سایت بخشی از فرآیند طراحی UX است. همواره درصدی از مخاطبان یک سایت به مشتریان آن تبدیل می شوند. یک طراح UX حرفه ای طیف مخاطبان یک سایت را شناسایی میکند و قسمتهای با اهمیت سایت را بر مبنای آن دسته از مخاطبان که پتانسیل بیشتری برای تبدیل شدن به مشتری دارند، طراحی میکنه. برای مثال فرض کنید یک پروژه طراحی سایت برای فروشگاه آنلاین لباس مردانه و زنانه داریم. از یک سو می دانیم که معمولا افراد نوجوان بیشتر از افراد با سن 30 تا 40 سال خرید آنلاین انجام میدهند. و زن ها بیشتر از مردها به خرید آنلاین علاقه دارند. از دیگر سو با مطالعه راهنمای جامع انتخاب رنگ برای طراحی سایت و تئوری رنگ ها می دانیم که این طیف مخاطب چه رنگهایی را بیشتر ترجیح می دهد. بنابراین می توانیم در طرح هایمان از این رنگ ها بیشتر استفاده کنیم.
4- اصل پوستل
یکی دیگر از اصول و قوانینی که حین طراحی وب سایت باید با اون آشنا باشیم اصل پوستل است که به عنوان “اصل استحکام” (Robustness Principle) هم شناخته می‌شود. این اصل نخستین بار توسط یکی از پیشگامان اینترنت به نام “جان پوستِل” ارایه شد.
در واقع این اصل از دو بخش تشکیل شده؛ ” ورودی ها را آزاد منشانه و خروجی ها را محافظه کارانه طراحی کنید.”
به طور کلی یعنی محصول شما باید بتونه هم با انسانها و هم با ماشینهای دیگه ارتباط درستی برقرار کنه. در سمتی که با ماشین های دیگه در ارتباطه قضیه کمی ساده تر است چرا که ارتباط ماشین ها تمام بر اساس چهارچوب و استاندارهای مشخصی است. اما در سمتی که قرار است محصول طراحی شده با انسان در تعامل باشه شرایط کمی پیچیده تره.
یک مثال؛ فرض کنید قرار است توسط یک فیلد ساده تاریخ تولد کاربر را بگیریم. به فرض نبودن راهنمایی برای مشخص کردن فرمت مورد قبول، ممکن است کاربران تاریخ تولد خود را به یکی از اشکالی؛ 1364/05/13، 64/5/13 یا 64- مرداد-13 ارسال کنند. حقیقت اینه که کاربران یک وب سایت طیف گسترده ای از انسانها با شرایط متفاوت و سطح دانش متفاوت هستند که خطا کردن هم جزی از آنهاست. بنابراین باید به عنوان یک طراح حرفه ای تا حد امکان رفتار آنها را پیشبینی کنیم تا امکان بروز خطا در سیستمی که طراحی کردیم را به حداقل برسانیم.
کاربرد های قانون پوستل در طراحی وب سایت:
ورودی ها منعطف: سعی کنید ورودی هایی که قرار است از کاربر اطلاعات بگیرد را تا حد امکان منعطف طراحی کنید؛
به عنوان مثال فرم ثبت نام یا احراز هویت را در نظر بگیرید. تا چند سال پیش مرسوم بود که عمل ثبت نام و احراز هویت فقط از طریق ایمیل صورت میگرفت. کم کم با همه گیر شدن تلفن شخصی، استفاده از تلفن همراه برای احراز هویت فراگیر شد. در این بین برخی از وب سایت ها یا اپلیکیشن ها با به کار بردن قانون پوستل این امکان را فراهم نمودند که کاربر در یک کادر بتواند با شماره موبایل یا ایمیل عملیات ثبت نام یا احراز هویت را انجام دهد. برای مثال سایت ویرگول این امکان را برای کاربران خود فراهم نموده که با نام کاربر، شماره موبایل یا ایمیل بتوانند احراز هویت کرده و به سایت وارد شوند. (تصویر زیر). اینستاگرام این امکان را به شما می دهد که به وسیله یک فیلد، با نام کاربری، شماره موبایل و یا ایمیل به سیستم وارد شوید.
کاربرانتان را راهنمایی کنید: اگر اطلاعات قرار است با فرمت خاصی دریافت شود حتما با پیام های راهنما و یا طراحی قالب برای ورد اطلاعات کاربر را راهنمایی کنید.
پیام های واضح و مشخس ارسال کنید: برای هر گونه اطلاعات اشتباه در صورت امکان پیام خطای مشخص و واضحی در نظر بگیرید.
همه کاربران را در نظر بگیرید: ترجیحات کاربران را در نظر گرفته و ورودی ها را مطابق با ترجیحات کاربرانتان طراحی کنید منظور ما کاربرانی است که ممکن است دارای نوعی معلولیت یا بیماری جسمی مانند کم بینایی، کورنگی و لرزش دست باشند. قرار دادن گزینه بزرگنمایی، تغییر رنگ، قسمتهای قابل کلیک بزگ می تواند مشکلات این کاربران رو برطرف کنه.
5- اصل تسلر
اصل تسلر در واقع در رابطه با مدیریت پیچیدگی یک محصول است و ریشه آن به اواسط دهه ۱۹۸۰ برمی‌گردد، جایی که لری تسلر، دانشمند رایانه در شرکت Xerox PARC در زمینه توسعه زبان طراحی تعاملی فعالیت می‌کرد. طبق مشاهدات تسلر نحوه تعامل کاربران با یک برنامه به اندازه خود برنامه مهم است. بنابراین، کاهش پیچیدگی برنامه و رابط کاربری مهم بود. با این حال، تسلر متوجه شد که هر برنامه یا فرآیند، به صورت ذاتی دارای مقداری پیچیدگی است که نمی توان آن را کم یا حذف کرد. این پیچیدگی باید در یکی از دو مکان قرار گیرد: دربخش توسعه و طراحی یا در سمت تعامل با کاربر.
تسلر عنوان میکنه یک برنامه باید همواره مقداری از پیچیگی اش را در سمت کاربر نگه دارد. این مقدار نباید به حدی کم باشد که کاربر احساس کند روی سیستم کنترلی ندارد و یا به حدی زیاد باشد که برخی کاربران با سطح دانش کمتر نتوانند به درستی از آن بهره ببرند.
کاربرد قانون تسلر در طراحی سایت:
به عنوان یک طراح UX باید همواره در حین پروسه طراحی وب سایت به این نکته توجه داشته باشیم که محصول ما تا حد امکان ساده باشه تا هر کاربری بتونه به راحتی و با کمی لذت با آن کار کنه. چند کار که میتونیم ببرای این کار انجام بدیم؛
- جایی که امکان انتخاب گزینه ها هستف کاربران را به تایپ کردن وادار نکنید.
- جایی که تعداد کنترل ها و دگمه ها زیاد است از کلیدهای میانبر (مانند دگمه Tab برای فوکوس کردن روی گزینه بعدی) غافل نشویم.
- تا حد امکان اطلاعات ورودی کاربر را ذخیره نگه داریم تا نیاز به انتخاب یا تایپ مجدد نباشد. مگر در مواقع لزوم.
- اطلاعات پیش فرض را برای هر کاربر شخصی سازی کنیم (بر اساس اطلاعاتی که از ماربر جمع آوری کردیم).
- در نهایت کم کردن پیچیدگی در سمت کاربر نباید بیش از اندازه باشه . سوای هزینه های که این مورد میتونه داشته باشه لازم است برای درگیر کردن کاربر گاهی وظایفی برای او در نظر بگیریم تا کاربر مجبور باشه با سیستم تعامل کنه و احساس کنه روی سیستم کنترل داره!
