وقتی زیبایی کافی نیست!

چرا بعضی اپلیکیشن‌ها تجربه کاربری بدی دارند؟

تا به حال وارد یک اپلیکیشن شده‌اید که در نگاه اول بسیار زیبا به نظر برسد، اما چند لحظه بعد ندانید دقیقاً باید چه کاری انجام دهید؟

مقدمه

شاید دکمه‌ای را پیدا نکنید، شاید اطلاعات مهم در میان عناصر مختلف صفحه گم شده باشد یا شاید برای انجام کاری ساده مجبور شوید چند مرحله غیرضروری را پشت سر بگذارید. در چنین شرایطی معمولاً یک سؤال مطرح می‌شود: اگر یک اپلیکیشن زیباست، چرا استفاده از آن لذت‌بخش و ساده نیست؟
پاسخ را باید در تفاوت میان رابط کاربری UI و تجربه کاربری UX جست‌وجو کرد.
رابط کاربری چیزی است که کاربر می‌بیند و با آن تعامل می‌کند؛ اما تجربه کاربری به مجموعه تجربه‌ای مربوط می‌شود که کاربر هنگام استفاده از محصول به دست می‌آورد.
به همین دلیل، یک محصول می‌تواند ظاهر بسیار جذابی داشته باشد، اما همچنان تجربه کاربری ضعیفی ایجاد کند. در طراحی دیجیتال، زیبایی تنها یکی از اجزای طراحی است؛ چیزی که اهمیت بیشتری دارد این است که آیا کاربر می‌تواند با محصول ارتباط برقرار کند، مسیر خود را پیدا کند و بدون سردرگمی به هدفش برسد یا نه.

یک رابط کاربری زیبا همیشه به معنی تجربه کاربری خوب نیست

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

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

تجربه کاربری از کاربر شروع می‌شود، نه از صفحه طراحی

یکی از مهم‌ترین تغییرات ذهنی برای ورود به دنیای UX این است که طراحی را از نرم‌افزار طراحی شروع نکنیم. قبل از اینکه طراح Figma را باز کند و شروع به ساختن کارت، دکمه و صفحه کند، باید مسئله را بفهمد. کاربر چه کسی است؟ چه هدفی دارد؟ چه مشکلی دارد؟ در چه شرایطی از محصول استفاده می‌کند؟ چه چیزی ممکن است باعث سردرگمی او شود؟
این همان جایی است که رویکردهایی مانند User-Centered Design و Human-Centered Design اهمیت پیدا می‌کنند. هر دو رویکرد تلاش می‌کنند طراحی را بر اساس نیازها و شرایط واقعی انسان شکل دهند، اما تمرکز آن‌ها کمی متفاوت است.
طراحی کاربرمحور:
طراحی کاربرمحور یا User-Centered Design فرایندی است که در آن نیازها، اهداف، رفتارها و مشکلات کاربران در طول فرایند طراحی مورد توجه قرار می‌گیرند. طراح تلاش می‌کند محصولی ایجاد کند که با نیازها و انتظارات کاربران واقعی هماهنگ باشد.
طراحی انسان‌محور:
طراحی انسان‌محور یا Human-Centered Design نگاه گسترده‌تری به انسان دارد و علاوه بر نیازهای کاربر، شرایط، محدودیت‌ها، محیط و زمینه‌ای را که فرد در آن از محصول استفاده می‌کند نیز در نظر می‌گیرد.

بنابراین یکی از اولین وظایف طراح UX این نیست که بپرسد:چه چیزی طراحی کنم؟بلکه باید بپرسد: چه مسئله‌ای را باید حل کنم؟

وقتی رابط کاربری نمی‌داند چه چیزی مهم‌تر است

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

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

مغز کاربر چگونه عناصر رابط را کنار هم می‌بیند؟

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

مجاورت (عناصر مرتبط را کنار هم قرار دهید):
مجاورت(Proximity) به این معناست که عناصری که از نظر معنایی به یکدیگر مرتبط هستند، بهتر است در فاصله نزدیک‌تری از هم قرار بگیرند. ذهن کاربر معمولاً عناصر نزدیک به یکدیگر را مرتبط می‌داند و آن‌ها را به‌عنوان یک گروه درک می‌کند.
برای مثال، در یک فرم ثبت‌نام، عنوان هر فیلد باید به فیلد مربوط به خودش نزدیک باشد. اگر فاصله میان عنوان و فیلد زیاد باشد، تشخیص ارتباط آن‌ها برای کاربر دشوارتر می‌شود.
در طراحی رابط کاربری، استفاده درست از فاصله و گروه‌بندی می‌تواند به کاربر کمک کند ساختار صفحه را سریع‌تر درک کند.

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

شکل و زمینه (عنصر مهم را از پس‌زمینه متمایز کنید):
شکل و زمینه (Figure-Ground) به توانایی ذهن در تشخیص یک عنصر اصلی از پس‌زمینه اشاره دارد. در طراحی رابط کاربری، می‌توان از این اصل برای برجسته کردن عناصر مهم و کمک به تشخیص بهتر آن‌ها استفاده کرد.
برای مثال، یک پنجره گفت‌وگو یا یک دکمه مهم می‌تواند با کنتراست مناسب از پس‌زمینه متمایز شود تا توجه کاربر را سریع‌تر به خود جلب کند.
البته این تفاوت باید هدفمند باشد؛ استفاده بیش از حد از کنتراست و برجسته‌سازی می‌تواند دوباره باعث شلوغی و سردرگمی رابط شود.

یک مثال ساده: چرا خرید آنلاین گاهی سخت می‌شود؟

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

طراحی خوب قبل از Figma اتفاق می‌افتد!

یکی از ابزارهای مهم طراحان رابط و تجربه کاربری، فیگما (Figma) است؛ اما فیگما فقط یک ابزار طراحی است و نمی‌تواند جایگزین فرایند فکر کردن و حل مسئله شود. قبل از ساختن یک صفحه در Figma، طراح باید مسئله را تا حد مناسبی بشناسد.
فرایندهایی مانند Design Thinking نیز دقیقاً بر همین تغییر نگاه تأکید دارند: ابتدا مسئله و نیاز انسان را بهتر درک کنیم، سپس مسئله را تعریف کنیم، راه‌حل‌های مختلف را بررسی کنیم و در ادامه آنها را توسعه و ارزیابی کنیم.
در مدل‌هایی مانند Double Diamond نیز مسیر طراحی به‌طور کلی با دو فعالیت گسترده همراه است: ابتدا کشف و تعریف مسئله، و سپس توسعه و ارائه راه‌حل.
بنابراین، اگر طراح قبل از فهمیدن مسئله مستقیماً سراغ طراحی نهایی برود، ممکن است یک رابط بسیار زیبا برای مشکلی طراحی کند که اصلاً مسئله اصلی کاربر نیست.

پس طراح UX دقیقاً چه کاری انجام می‌دهد؟

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

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

در نهایت، طراحی خوب چه شکلی است؟

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

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

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

جمع‌بندی

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

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

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