نویسنده: Yu Siang Teo · منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا · تیر ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

طراحی بد در برابر طراحی خوب؛ پنج مثال که از آن‌ها درس بگیریم

💡 این متن بازنویسی آزاد است: مفاهیم و درس‌های مقالهٔ اصلی با نگارش مستقل فارسی بازگو شده و ترجمهٔ کلمه‌به‌کلمه نیست. بیشتر تصاویر مقالهٔ اصلی حق نشر اختصاصی دارند و اینجا بازنشر نشده‌اند — برای دیدن همهٔ نمونه‌های تصویری به مقالهٔ اصلی (لینک در پایین صفحه) سر بزنید.

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

۱. سرریز اطلاعات (Information Overload)

تابلوهای پارکینگ سنتی لس‌آنجلس نمونهٔ کلاسیک این مشکل‌اند: ستونی از چند تابلوی جدا با متن‌های متراکم — «پارک ممنوع از ۸ تا ۱۰ صبح روزهای کاری»، «پارک یک‌ساعته از ۱۰ تا ۶ عصر»، «به‌جز با مجوز منطقه‌ای»... راننده‌ای که با سرعت دنبال جای پارک می‌گردد، باید همهٔ این جمله‌ها را بخواند، با هم ترکیب کند و در چند ثانیه نتیجه بگیرد که الان، در این لحظه، پارک‌کردن مجاز هست یا نه. نتیجهٔ طبیعی: سردرگمی، جریمه و عصبانیت.

طراحی به اسم نیکی سیلیان‌تنگ (Nikki Sylianteng) این مسئله را از زاویهٔ درست دید. او فهمید سؤال واقعی راننده فقط یک چیز است: «الان می‌توانم اینجا پارک کنم یا نه؟» پس به‌جای متن، از یک نوار زمانی بصری استفاده کرد: بازه‌های مجاز به یک شکل و بازه‌های ممنوع به شکلی دیگر، در یک نگاه قابل‌تشخیص. طرح او حتی برای افراد کوربین‌رنگ هم کار می‌کند، چون فقط به رنگ تکیه نکرده و از الگو و برچسب هم کمک گرفته است.

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

۲. ناوبری گوشتِ مرموز (Mystery Meat Navigation)

این اصطلاح عجیب از دههٔ ۹۰ آمده و به ناوبری‌ای اشاره دارد که تا رویش کلیک (یا هاور) نکنید، معلوم نیست شما را کجا می‌برد — مثل کنسروی بدون برچسب که تا بازش نکنید نمی‌دانید داخلش چیست. نمونهٔ بررسی‌شده در مقالهٔ اصلی، وب‌سایت یک استودیوی معماری است که صفحهٔ اصلی‌اش شبکه‌ای از عکس‌های تمام‌صفحه است؛ بدون هیچ برچسب یا نشانه‌ای که بگوید هر عکس به کجا لینک شده. کاربر مجبور است حدس بزند، کلیک کند، اشتباه دربیاید، برگردد و دوباره امتحان کند. هر کلیکِ حدسی یعنی بار شناختی اضافه و اعتماد کمتر.

نقطهٔ مقابلش را در کارت‌های دورهٔ خود وب‌سایت IxDF می‌بینید: هر کارت عنوان روشن دارد، توضیح کوتاه دارد و دکمه‌ای با برچسب صریح مثل «مشاهدهٔ دوره». هیچ ابهامی نیست؛ قبل از کلیک دقیقاً می‌دانید چه اتفاقی خواهد افتاد. این همان پیروی از قراردادهای آشنای وب است — کسل‌کننده به نظر می‌رسد، اما کار می‌کند.

درس این مقایسه: هرگز کاربر را مجبور نکنید برای فهمیدن مقصد یک لینک، روی آن کلیک کند. برچسب صریح، حتی اگر «خلاقانه» نباشد، همیشه بر ابهامِ شیک برتری دارد.

۳. افزودن اصطکاک به کنش‌های کاربر

مقالهٔ اصلی کمپین تعاملی یک شرکت هواپیمایی را مثال می‌زند که برای دیدن هر بخش از محتوا، باید دکمهٔ ماوس را نگه می‌داشتید تا انیمیشنی کامل شود. بار اول شاید جذاب باشد؛ بار پنجم فقط مانعی است بین شما و محتوایی که می‌خواهید ببینید. این «اصطکاک» — هر چیزی که رسیدن کاربر به هدفش را کُند می‌کند — وقتی سر راه کنش‌های اصلی قرار بگیرد، تجربه را فرسایشی می‌کند.

اما اصطکاک ذاتاً بد نیست؛ جای درست و غلط دارد. نمونهٔ درستش اسکرول کشسانی (elastic scrolling) در iOS اپل است: وقتی به انتهای صفحه می‌رسید، محتوا کمی کش می‌آید و برمی‌گردد. این مقاومتِ لحظه‌ای یک پیام روشن دارد: «تمام شد؛ پایین‌تر چیزی نیست.» اصطکاکی کوچک که نه‌تنها مزاحم نیست، بلکه اطلاعات می‌دهد.

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

۴. طراحی «هوشمندانه‌ای» که کاربردپذیری را نادیده می‌گیرد

نمونهٔ بد این بخش، وب‌سایت یک آژانس دیجیتال است که تیترهای صفحهٔ اصلی‌اش فقط وقتی کامل خوانا می‌شدند که ماوس را به گوشهٔ مشخصی از صفحه می‌بردید — ترفندی که هیچ راهنمایی هم برایش وجود نداشت. کاربری که از قبل این «راز» را نداند، فقط صفحه‌ای با متن‌های بریده می‌بیند. اینجا لذتِ طراح از خلاقیتش، جای تجربهٔ کاربر را گرفته است.

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

درس این مقایسه: عناصر خلاقانه باید افزودنی و غیرضروری باشند، نه گره‌خورده به کارکرد اصلی. و هر ایدهٔ «باحال» را قبل از انتشار با کاربران واقعی تست کنید — چیزی که برای طراحش بدیهی است، برای بقیه معمولاً نیست.

۵. انیمیشن‌های زائد

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

حالا نمونهٔ درست: انیمیشن تأیید کد در فرم‌های Stripe. وقتی کد تأیید را وارد می‌کنید و سیستم در حال بررسی است، انیمیشن ظریفی وضعیت را نشان می‌دهد و در پایان، موفقیت یا خطا را اعلام می‌کند. این انیمیشن دقیقاً در لحظه‌ای ظاهر می‌شود که کاربر به‌هرحال باید منتظر بماند، و همان انتظار را با بازخوردِ وضعیت پر می‌کند. حرکت اینجا کارکرد دارد: اطمینان‌بخشی.

درس این مقایسه: هر انیمیشن باید دلیل وجودی کارکردی داشته باشد — نشان‌دادن وضعیت، هدایت توجه، یا نرم‌کردن یک تغییر ناگهانی. اگر انیمیشنی فقط «قشنگ» است و کاربر را از اطلاعاتش دور نگه می‌دارد، حذفش کنید.

جمع‌بندی؛ شش اصل از پنج مقایسه

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

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