چرا طراحی زیبا لزوما UX خوبی نیست؟ وقتی عاشق ظاهر سایت می شویم، اما از کار کردن با آن پشیمانیم! 😅

تا حالا وارد سایتی شده اید که در همان چند ثانیه اول با خودتان بگویید: «وای! چقدر قشنگه!»؟

رنگ بندی فوق العاده، انیمیشن های جذاب (Animations)، فونت های شیک، تصاویر باکیفیت و دکمه هایی که انگار یک طراح با وسواس خاصی تک تکشان را طراحی کرده است.

اما چند دقیقه بعد، وقتی می خواهید یک کار ساده انجام دهید، همه چیز تغییر می کند.

دنبال یک گزینه ساده می گردید و پیدایش نمی کنید. روی یک دکمه کلیک می کنید و اتفاقی می افتد که اصلا انتظارش را نداشتید. منوها باز و بسته می شوند، انیمیشن ها تمام نمی شوند و شما هم کم کم به این نتیجه می رسید که شاید بهتر بود اصلا وارد این سایت نمی شدید!

اینجاست که یک سوال مهم مطرح می شود:

آیا واقعا یک سایت زیبا، الزاما یک سایت با تجربه کاربری خوب (Good UX) است؟

از نگاه یک فرانت اند دولوپر (Front-End Developer)، جواب من کاملا مشخص است: خیر! :)

UI خوشگل، UX اعصاب خردکن!

بیایید با یک مثال ساده شروع کنیم.

فرض کنید یک سس داریم که بسته بندی آن فوق العاده زیباست. رنگ بندی جذاب، طراحی مینیمال (Minimal Design) و حتی یک لوگوی بسیار حرفه ای دارد.

اما وقتی می خواهید درش را باز کنید، باید سه بار بچرخانید، دو بار فشار دهید و در نهایت با یک مهارت خاص مهندسی مکانیک موفق شوید مقداری از سس را بیرون بیاورید!

خب، تبریک می گویم؛ شما یک بسته بندی زیبا دارید، اما تجربه استفاده از آن چندان دلچسب نیست! 😂😁

طراحی رابط کاربری (User Interface - UI) دقیقا شبیه ظاهر همان بسته بندی است؛ چیزی که در نگاه اول می بینیم و درباره اش قضاوت می کنیم.

اما تجربه کاربری (User Experience - UX) به احساسی مربوط می شود که هنگام استفاده از محصول داریم؛ اینکه چقدر راحت می توانیم با آن کار کنیم، چقدر سریع به هدفمان می رسیم و آیا استفاده از آن برایمان لذت بخش است یا نه.

حالا یک مثال بامزه تر!

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

اما مشکل از جایی شروع می شود که می خواهید آب بخورید و گوش های روباه دقیقا جلوی صورتتان قرار می گیرند!

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

در دنیای طراحی وب (Web Design) هم همین اتفاق می افتد. گاهی طراح آن قدر درگیر متفاوت بودن و زیباتر کردن ظاهر یک بخش می شود که فراموش می کند کاربر قرار است واقعا از آن استفاده کند.

وقتی انیمیشن ها از خود کاربر مهم تر می شوند!

یکی از چیزهایی که این روزها در طراحی سایت ها زیاد می بینیم، استفاده از انیمیشن های مختلف (Animations) است.

من هم به عنوان یک فرانت اند دولوپر (Front-End Developer)، واقعا از دیدن انیمیشن های نرم، ترنزیشن های جذاب (Transitions) و تعاملات ظریف (Micro-interactions) در سایت ها لذت می برم.

اما یک تفاوت مهم وجود دارد:

انیمیشن باید به تجربه کاربر کمک کند، نه اینکه خودش تبدیل به مانع شود.

مثلا وارد سایتی می شوید که یک انیمیشن جذاب برای ورود به صفحه دارد. همه چیز عالی است؛ اما برای دیدن محتوای اصلی باید چند ثانیه منتظر بمانید.

صفحه را اسکرول (Scroll) می کنید، اما عناصر با تاخیر ظاهر می شوند. روی منو کلیک می کنید و قبل از اینکه بتوانید گزینه مورد نظرتان را انتخاب کنید، یک انیمیشن دیگر اجرا می شود.

در چنین شرایطی، کاربر احتمالا با خودش نمی گوید: «چه طراحی خلاقانه ای!»

بلکه می گوید: «داداش، من فقط می خواستم وارد صفحه بشم!» 😂

البته این به معنی بد بودن انیمیشن ها نیست. انیمیشن درست می تواند به کاربر بازخورد (Feedback) بدهد، ارتباط بین بخش ها را مشخص کند و حتی درک رابط کاربری را آسان تر کند.

مساله این است که نباید سرعت و راحتی استفاده را قربانی جلوه های بصری (Visual Effects) کنیم.

وقتی کاربر برای پیدا کردن یک دکمه باید کارآگاه شود! User Inyerface — نمونه‌ای از UX آزاردهنده

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

فرض کنید وارد یک فروشگاه اینترنتی (E-commerce Website) شده اید و قصد خرید یک محصول را دارید.

انتظار دارید قیمت، توضیحات محصول و دکمه خرید را به راحتی پیدا کنید.

اما به جای آن با تعداد زیادی دکمه رنگارنگ، بنر تبلیغاتی، پیشنهاد ویژه، پنجره پاپ آپ (Pop-up) و بخش های مختلف روبه رو می شوید.

حالا سوال این است: دقیقا باید به کجا نگاه کنم؟

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

اینجاست که اهمیت سلسله مراتب بصری (Visual Hierarchy) مشخص می شود.

کاربر باید بتواند بدون فکر کردن بیش از حد، تشخیص دهد کدام بخش مهم تر است، از کجا باید شروع کند و قدم بعدی چیست.

یک طراحی خوب قرار نیست کاربر را مجبور کند برای پیدا کردن دکمه خرید، نقشه گنج باز کند!

یک سایت زیبا که نمی دانید چطور باید از آن استفاده کنید!

یکی از نمونه های جالب برای درک تجربه کاربری ضعیف، پروژه ای به نام User Inyerface است.

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

از دکمه هایی که جای مناسبی ندارند گرفته تا فرم هایی که پر کردنشان بیشتر شبیه حل معماست!

هدف این پروژه دقیقا همین است: نشان دادن اینکه چقدر جزئیات کوچک در طراحی رابط کاربری می توانند روی تجربه نهایی تاثیر بگذارند.

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

و نکته جالب اینجاست که برای خراب کردن تجربه کاربری، همیشه به یک طراحی زشت نیاز نداریم!

پس یک UX خوب دقیقا چه ویژگی هایی دارد؟

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

گاهی ساده ترین تصمیم ها بیشترین تاثیر را دارند:

• سادگی (Simplicity): کاربر باید بتواند بدون سردرگمی به چیزی که می خواهد برسد.

• قابل پیش بینی بودن (Predictability): وقتی روی یک دکمه کلیک می کنیم، بهتر است نتیجه همان چیزی باشد که انتظارش را داریم.

• سرعت (Performance): هیچ کس دوست ندارد برای انجام یک کار ساده، مدت زیادی منتظر بماند.

• دسترسی پذیری (Accessibility): سایت باید برای افراد مختلف، با نیازها و شرایط متفاوت، قابل استفاده باشد.

• طراحی واکنش گرا (Responsive Design): تجربه استفاده از سایت در موبایل، تبلت و دسکتاپ باید منطقی و قابل قبول باشد.

• بازخورد مناسب (User Feedback): کاربر باید بداند بعد از انجام یک کار چه اتفاقی افتاده است؛ مثلا آیا فرم ارسال شده یا هنوز مشکلی وجود دارد؟

این موارد شاید در نگاه اول جزئیات کوچکی به نظر برسند، اما مجموع همین جزئیات است که یک تجربه خوب را می سازد.

نقش ما فرانت اند دولوپرها در این ماجرا چیست؟

شاید بعضی ها تصور کنند مسئولیت تجربه کاربری فقط بر عهده طراح UX/UI است و وظیفه فرانت اند دولوپر صرفا تبدیل طرح فیگما (Figma) به کد است.

اما من با این نگاه کاملا موافق نیستم.

ما فقط قرار نیست چیزی را که در Figma می بینیم، با HTML و CSS و JavaScript پیاده سازی کنیم.

ما در واقع بخشی از تجربه ای را می سازیم که کاربر قرار است با آن زندگی کند!

برای مثال، ممکن است در طراحی یک دکمه همه چیز عالی به نظر برسد؛ اما اگر در پیاده سازی آن وضعیت هاور (Hover State)، حالت غیرفعال (Disabled State)، بازخورد کلیک (Click Feedback) یا دسترسی با کیبورد (Keyboard Accessibility) را در نظر نگیریم، نتیجه نهایی با چیزی که کاربر انتظار دارد فاصله خواهد داشت.

یا ممکن است یک صفحه در دسکتاپ فوق العاده به نظر برسد، اما در موبایل عناصر روی هم بیفتند و کاربر برای کلیک روی یک دکمه مجبور شود انگشتش را به اندازه یک میلی متر کنترل کند!

اینجاست که اهمیت نگاه فراتر از کدنویسی مشخص می شود.

به نظرم یک فرانت اند دولوپر خوب باید هنگام پیاده سازی از خودش بپرسد:

• آیا کاربر می فهمد این عنصر چه کاری انجام می دهد؟

• آیا انجام این کار برای او ساده است؟

• اگر اینترنت ضعیف باشد چه اتفاقی می افتد؟

• اگر کاربر با موبایل وارد شود، همچنان تجربه مناسبی خواهد داشت؟

• آیا چیزی که ساخته ایم واقعا مشکلی را حل می کند؟

قرار نیست همه ما متخصص UX باشیم، اما بی تفاوت بودن نسبت به تجربه کاربر هم انتخاب درستی نیست :)

ظاهر زیبا می تواند کاربر را به سایت جذب کند، اما این تجربه استفاده است که می تواند او را به بازگشت دوباره ترغیب کند.

شاید بتوانیم این طور بگوییم: UI باعث می شود کاربر وارد یک سایت شود؛ UX باعث می شود دلش بخواهد در آن بماند.

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

چون در نهایت، قرار نیست کاربر برای استفاده از سایت ما مدرک مهندسی بگیرد، نقشه راهنما داشته باشد یا با طراح آن تماس بگیرد! 😁