۱۰ قانون UX برای تمامی طراحان وب

بیایید این را ابتدا روشن کنیم: «قوانین UX» از جان یابلونسکی قوانین به معنای قانونی آن نیستند. اگر از آن‌ها پیروی نکنید، کسی شما را دستگیر نمی‌کند—پلیس UX وجود ندارد (اگرچه گاهی از برخی وب‌سایت‌ها استفاده کرده‌ام که احساس می‌کنم باید وجود داشته باشد).

حتی تمام «قوانین UX» توسط یابلونسکی قانون نامیده نشده‌اند. برخی قوانین، برخی «اثرات» و حتی یکی از آن‌ها «تیغ» نامیده شده است.

پس اگر این‌ها قوانین نیستند، دقیقاً چه هستند؟

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

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

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

1. قانون یاکوب

مفهوم این قانون

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

چرا این قانون مفید است؟

اینکه فکر کنیم «ما قرار است در هر طراحی جدید نوآور باشیم» وسوسه‌کننده است. اما مگر اینکه دلیل قانع‌کننده‌ای برای شکستن الگوها داشته باشید، بهترین رویکرد این است که بر اساس قراردادهای تثبیت‌شده طراحی کنید. با ارائه یک رابط کاربری (UI) آشنا، استفاده از وب‌سایت طبیعی و شهودی خواهد بود و کاربران می‌توانند سریع و آسان کاری که نیاز دارند انجام دهند.

چگونه از این قانون استفاده کنیم؟

  • از الگوهای طراحی رایج استفاده کنید—لوگوها، منوها و دکمه‌ها را در جایی قرار دهید که کاربران انتظار دارند.
  • از آیکون‌های شناخته‌شده جهانی استفاده کنید، مانند ذره‌بین برای «جستجو». کاربران را مجبور نکنید درباره معنای نشانه‌های بصری شما فکر کنند—از چیزهایی استفاده کنید که قبلاً برایشان آشنا هستند.
  • قراردادها را نشکنید مگر اینکه دلیلی وجود داشته باشد؛ مثلاً وب‌سایت Oatly به جای اسکرول عمودی، اسکرول افقی دارد، اما دلیل آن این است که کل برند آن‌ها حول محور عجیب بودن، غافلگیر کردن و متفاوت فکر کردن است.

2. قانون هیک

مفهوم این قانون

زمان تصمیم‌گیری با افزایش تعداد و پیچیدگی انتخاب‌ها افزایش می‌یابد.

چرا این قانون مفید است؟

در UX، بیشتر همیشه بهتر نیست. اضافه کردن ویژگی‌ها و امکانات بیشتر لزوماً وب‌سایت یا اپلیکیشن را آسان‌تر یا لذت‌بخش‌تر نمی‌کند. گزینه‌های بیشتر یعنی پردازش بیشتر و تصمیم‌گیری‌های بیشتر. در واقع، تحقیقات نشان می‌دهد مردم وقتی گزینه‌های کمتری پیش رویشان باشد، نسبت به تصمیمات خود احساس بهتری دارند (پدیده‌ای که به آن «پارادوکس انتخاب» می‌گویند).

چگونه از این قانون استفاده کنیم؟

  • ابتدا ساده‌سازی کنید: به یک طراحی تمیز و مینیمال دست یابید. از شلوغی اجتناب کنید و از فضای منفی استفاده کنید. در کل، مطمئن شوید موارد اطراف محتوای اصلی توجه کاربران را پرت نکند یا فشار ذهنی زیادی ایجاد نکند.
  • فقط گزینه‌هایی را ارائه دهید که به تجربه کاربری ارزش می‌افزایند، مثلاً اگر کسی می‌خواهد یک تی‌شرت آنلاین بخرد، سه فیلتر برای سایز، رنگ و سبک ممکن است مفید باشد، اما ۳۰ فیلتر احتمالاً گیج‌کننده خواهد بود.
  • با استفاده از اطلاعات موجود، گزینه‌ها را کاهش دهید. اگر سیستم شما اطلاعاتی را درباره کاربر از قبل «می‌داند»، به‌طور خودکار آن‌ها را تکمیل کنید. این کار نه تنها ترسناک نیست، بلکه بسیار مفید است!
  • وظایف پیچیده‌تر و طولانی‌تر را به بخش‌های کوتاه و قابل هضم تقسیم کنید؛ مثلاً یک فرم با ۲۰ فیلد را به چند مرحله با چند سؤال (یا یک سؤال در هر مرحله) تقسیم کنید.

3. اثر هدف‌گرادیان

مفهوم این اثر

تمایل به نزدیک شدن به یک هدف با افزایش نزدیکی به آن بیشتر می‌شود.

چرا این اثر مفید است؟

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

چگونه از این اثر استفاده کنیم؟

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

4. اثر موقعیت سریالی

مفهوم این اثر

کاربران تمایل دارند موارد اول و آخر در یک فهرست را بهتر به خاطر بسپارند.

چرا این اثر مفید است؟

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

چگونه از این اثر استفاده کنیم؟

  • در یک فهرست بولت، مهم‌ترین جزئیات را در بالا و پایین قرار دهید.
  • در یک فهرست از ویژگی‌ها و مزایا، تأثیرگذارترین و متقاعدکننده‌ترین موارد را ابتدا و انتها قرار دهید.
  • منطقی است که کم‌اهمیت‌ترین جزئیات را در وسط فهرست قرار دهید. کاربران ممکن است ابتدا آن‌ها را نادیده بگیرند و بعداً به آن‌ها بازگردند.

5. قانون ارتباط یکسان

مفهوم این قانون

عناصر بصری که به هم مرتبط هستند، بیشتر به‌عنوان مرتبط درک می‌شوند تا عناصری که هیچ ارتباطی ندارند.

چرا این قانون مفید است؟

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

چگونه از این قانون استفاده کنیم؟

  • می‌توانید عناصر رابط کاربری (UI) را به‌طور فیزیکی در طراحی خود به هم متصل کنید تا نشان دهید که با هم مرتبط هستند، مثلاً در فرآیند پرداخت، زبانه‌ها یا برچسب‌های هر مرحله از فرآیند را به‌طور بصری به هم متصل کنید.
  • می‌توانید از رنگ برای نشان دادن ارتباط بین عناصر UI استفاده کنید، مثلاً اگر همه دکمه‌های «ادامه» یا «ارسال» سبز هستند و دکمه‌های «لغو» یا «بازگشت» قرمز، کاربران به‌سرعت متوجه می‌شوند که این رنگ‌ها با اقدامات خاصی مرتبط هستند (سبز = ادامه دادن، قرمز = بازگشت).
  • همچنین می‌توانید از اشکال و سبک‌های دیگر برای نشان دادن ارتباط استفاده کنید، مثلاً زبانه‌ها و آکاردئون‌هایی که به‌صورت پیش‌فرض آبی هستند اما هنگام انتخاب سفید می‌شوند. کاربران می‌توانند ارتباط را درک کنند که آبی یعنی بسته و سفید یعنی باز.

6. قانون منطقه مشترک

مفهوم این قانون

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

چرا این قانون مفید است؟

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

چگونه از این قانون استفاده کنیم؟

  • از مرزها در یک صفحه وب یا صفحه اپلیکیشن برای گروه‌بندی اطلاعات مرتبط استفاده کنید، مثلاً در یک فرم، تمام سؤالات مربوط به اطلاعات تماس (تلفن، ایمیل، آدرس) می‌توانند در یک مرز گروه‌بندی شوند، در حالی که سؤالات مربوط به ویژگی‌های محافظت‌شده (سن، جنسیت، ناتوانی‌ها، و غیره) می‌توانند در مرز دیگری گروه‌بندی شوند.
  • مناطق مشترک فقط درباره قرار دادن محتوا در مرزهای ساده نیستند—می‌توانید اجزای طراحی را با رنگ‌های پس‌زمینه مختلف طراحی کنید که مانند بلوک‌هایی روی یک صفحه وب چیده می‌شوند تا یک چیدمان مناطق مشترک ایجاد شود، مثلاً یکی برای یک ویدیو، یکی برای ویژگی‌ها و مزایا، و دیگری برای ثبت‌نام در خبرنامه.
  • این قانون بسیار شبیه به قانون مجاورت است که می‌گوید حتی بدون مرز، اشیاء به‌عنوان گروه درک می‌شوند اگر صرفاً در نزدیکی یکدیگر باشند. بنابراین گاهی فضا دوست شما است، نه مرزها.

۷. اثر فون رستورف

مفهوم این قانون

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

چرا این قانون مفید است؟

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

چگونه از این قانون استفاده کنیم؟

  • مهم‌ترین لینک خود را در یک صفحه وب یا اپلیکیشن به‌صورت دکمه طراحی کنید تا کاربران آن را به‌عنوان فراخوان عمل (Call-to-Action) به خاطر بسپارند.
  • اگر مقایسه‌ای بین محصولات یا خدمات از نظر ویژگی‌ها و مزایا ارائه می‌دهید، گزینه‌ای که بالاترین امتیاز، محبوبیت یا بهترین ارزش را دارد برجسته کنید. از تکنیک‌های طراحی رابط کاربری استفاده کنید تا این گزینه برجسته شده و در ذهن کاربران باقی بماند و آنها را تشویق به انتخاب آن کند.
  • فقط به رنگ متکی نباشید تا چیزی را متمایز کنید؛ مطمئن شوید طراحی شما از لحاظ دسترسی به افراد مختلف قابل استفاده است و راه‌های متعددی برای نشان دادن تفاوت آن از سایر محتواها فراهم کرده‌اید.

۸. قانون پاستل

مفهوم این قانون

در پذیرش ورودی‌ها آزاداندیش باشید و در ارسال داده‌ها محافظه‌کار.

چرا این اصل مفید است؟

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

چگونه از این قانون استفاده کنیم؟

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

۹. اصل تیغ اوکام

مفهوم این اصل

از بین فرضیه‌های مختلف که پیش‌بینی‌های مشابهی ارائه می‌دهند، گزینه‌ای که کمترین فرضیات را دارد باید انتخاب شود.

چرا این اصل مفید است؟

اصل تیغ اوکام یک مفهوم فلسفی است که در قوانین UX نیز پذیرفته شده است. در فلسفه، «تیغ» استدلال‌هایی را که منجر به بحث‌های غیرضروری می‌شوند حذف می‌کند. در طراحی تجربه کاربری (UX)، این اصل به این معناست که ساده‌ترین طراحی احتمالاً بهترین راه‌حل است. راه‌حل‌های پیچیده که بر اساس فرضیات درباره کاربران و تکنولوژی طراحی شده‌اند، معمولاً نتیجه بدتری خواهند داشت.

چگونه از این اصل استفاده کنیم؟

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

۱۰. قانون تسلر

مفهوم این قانون

هر سیستمی دارای مقداری پیچیدگی است که قابل کاهش نیست.

چرا این قانون مفید است؟

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

چگونه از این قانون استفاده کنیم؟

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

©دوات با هدف دسترس‌پذیر کردن دانش انگلیسی در حوزه صنعت نرم‌افزار وجود آمده است. در این راستا از هوش مصنوعی برای ترجمه گلچینی از مقالات مطرح و معتبر استفاده می‌شود. با ما در تماس باشید و انتقادات و پیشنهادات خود را از طریق صفحه «تماس با ما» در میان بگذارید.