آموزش طراحی سایتآموزش اصول ux (14 مثال و تکنیک عملی تجربه کاربری)
اصول ux و 14 تکنیک تجربه کاربری سایت

آموزش اصول ux (14 مثال و تکنیک عملی تجربه کاربری)

بررسی مهم ترین اصول ux و تجربه کاربری + به همراه 14 تکنیک کلیدی افزایش تجربه کاربری، و مثال های واقعی و عملی از افزایش تجربه کاربری در وبسایت.

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

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

اصول UX؛ آموزش تجربه کاربری

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

۱- نیاز کاربران را برآورده کنید

اگر مثل بسیاری از متخصصان تازه‌کار حوزه‌های مختلف، تصور می‌‌کنید قرار است در UX و UI هم تمامی تمرکزتان را روی سلیقه خودتان یا بدتر از آن، روی راضی کردن کارفرما بگذارید، نتیجه نهایی آن چیزی که باید نیست!

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

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

آیا نظر کارفرما در پروژه های UX اهمیت ندارد؟

ببینید، در نهایت این کارفرماست که قرار است هزینه‌های طرح را پرداخت کند و شما هم در حال کار کردن برای او هستید. بنابراین اگر نتوانید با او کنار بیایید، احتمال اینکه حین پروژه به مشکل بخورید به شدت بالا می‌رود. اما یک نکته مهم وجود دارد: همانطور که در مقاله “UX چیست” هم گفتم،

شما به عنوان یک متخصص UI و UX علاوه بر مهارت عملی و تسلط به اصول ux, باید مهارت ارائه، حل تعارض و فن بیان داشته باشید. اینها مهارت‌هایی است که در این شرایط به شما کمک می‌کند در عین داشتن رفتار درست، به کارفرما بفهمانید که اگر با نظراتش مخالفت می‌کنید، نه از سر لجبازی است و نه از سر نبود دانش کافی برای پیاده‌سازی طرح مورد نظر. بلکه شما صرفا با توجه به تخصص و دانش‌تان در دنیای تجربه کاربری، پیشنهادات بهتری دارید، پس صرفا گرفتن سفارش طراحی سایت به تنهایی کافی نیست، و تعمل و تفاوهم با کارفرمای پروژه نیز مهم است.

۲- اصول ux را تست کنید!

نگاهی به تصور پایین داشته باشید:

تفاوت اصول ux در ذهن و در عمل
تفاوت اصول ux در ذهن و در عمل

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

آنالیز Hotjar روی صفحه یک سایت: نقاط حساس و کلیک شده
آنالیز Hotjar روی صفحه یک سایت: نقاط حساس و کلیک شده

۳- به سلسله مراتب در تجربه کاربری احترام بگذارید!

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

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

ux 9

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

نمونه گزینه های منوی اصلی در تجربه کاربری عموم کاربران ایرانی
نمونه گزینه های منوی اصلی در تجربه کاربری عموم کاربران ایرانی

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

ux 1

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

۴- برای کاربران هزینه اضافه یادگیری نتراشید!

یک سوال، تا الان چند بار شده با رایانه وارد سایتی در سطح وب بشوید که منویش به جای بخش بالایی صفحه، در قسمت انتهایی قرار بگیرد؟ یا مثلا چند بار با تلفن همراه وارد سایتی شده‌اید که منویش به جای باز شدن با کلیک روی گزینه ۳ خط گوشه صفحه، نیاز به لمس کردن یک گزینه در وسط صفحه داشته باشد؟ احتمالا هیچ وقت چنین چیزهایی ندیده باشید!

در واقع اگر دقت کنید، در طراحی تجربه کاربری و همینطور در “طراحی رابط کاربری” یکی از مهم‌ترین اصول ux این است که بخش‌های اصلی را ثابت نگاه دارید!

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

۵- برای کاربران معلول طراحی کنید!

خیلی جالب است بدانید یکی از اصول ux و تکنیک‌های تجربه کاربری این است که طرح‌تان را برای معلولان بسازید! این یعنی حین ساختن طرح باید تصور کنید کاربری که قرار است به سراغ سایت بیاید، کاربری است که از لحاظ بینایی دچار مشکل بوده و کم‌بینی دارد یا کاربری است که کار کردن دائم با موس و کیبورد برایش سخت است!

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

۶- به قانون کم‌تر، بیشتر است، احترام بگذارید

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

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

۷- در نوشتن، زبان ساده را انتخاب کنید

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

۸- فونت‌های متناسبی انتخاب کنید

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

ux 3

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

۹- به مخاطب بازخورد بدهید

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

ux 7

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

۱۰- قبل از تغییر، تایید کنید

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

ux 5

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

۱۱- به کاربر قدرت‌ عمل بدهید!

بله، یک سایت با تجربه کاربری قدرتمند، سایتی است که حتی در بعضی موارد برای داشتن UX بهتر به کاربرش قدرت‌ عمل می‌دهد. به این ترتیب کاربر می‌تواند یک تجربه بهتر برای خودش رقم بزند.

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

۱۲- حین طراحی به اهداف کسب و کار توجه کنید!

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

۱۳- اقدامات اضافه را حذف کنید!

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

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

۱۴- درباره خطاها به کاربران توضیح بدهید!

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

404 error in nethoosh

اما اگر همین حالا حین کار کردن با سایت nethoosh.com به مشکلی بربخورید، متوجه می‌شوید که در مورد ارور اطلاعات کاملی به شما داده شده. مثلا اینکه ارور به دلیل آفلاین بودن‌تان است، یا اینکه صفحه ۴۰۴ به دلیل حذف شدن محتواستT و باید برای رفتن به یک صفحه دیگر اقدام کنید و… . بنابراین به این نکته هم در طراحی تجربه کاربری توجه داشته باشید.

کلام آخر

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

خب به انتهای مقاله رسیدیم. در این مقاله با بیشتر از ۱۰ تکنیک تجربه کاربری آشنا شده و سعی کردیم دانش و تخصص‌مان را به عنوان یک UX کار افزایش بدهیم. در آخر اگر سوال و نظری دارید در بخش نظرات منتظر شما هستم.

منابع:

پیشنهاد مطالعه برای شما:
gem inside holder
gem inside holder
ux چیست و طراح تجربه کاربری کیست؟
زمان مطالعه: 16 دقیقه

UX چیست؟ وظایف متخصص تجربه کاربری چیست + مسیر شغلی

gem inside holder
gem inside holder
پارالکس اسکرول چیست؟ 10 نمونه به شدت جذاب parallax scrolling
زمان مطالعه: 5 دقیقه

پارالکس اسکرول چیست؟ ۱۰ نمونه به شدت جذاب parallax scrolling

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