۷ اشتباه در طراحی UI/UX که مبتدی بودن شما را فریاد می‌زنند (و نحوه رفع هر کدام)

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

چرا این موضوع اهمیت دارد؟

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

طراحان سطح متوسط تا ارشد، مدیران پروژه و بنیان‌گذاران کسب‌وکارها بلافاصله متوجه این جزئیات می‌شوند؛ جزئیاتی که یک کار پورتفولیو را از یک محصول واقعی در بازار متمایز می‌کند. این تغییرات، فراتر از بهبود مهارت، ارزش کلی فریلنسرها را نیز افزایش می‌دهد. با اعمال این اصلاحات، کار شما دستمزد بهتری دریافت می‌کند، سریع‌تر تأیید می‌شود و به روابط طولانی‌تری با مشتریان منجر می‌شود.

چه چیزهایی یاد خواهید گرفت؟

• هفت اشتباه رایج در طراحی که باعث می‌شوند رابط‌های کاربری (UI) خام و نپخته به نظر برسند.
• تکنیک‌های سریعی که وضوح و اعتماد را یک‌شبه افزایش می‌دهند.
• یک ممیزی (audit) کوچک و گام‌به‌گام که هر صفحه‌ای را در ۹۰ دقیقه بهبود می‌بخشد.

۱. جریان کار را قبل از دست زدن به پیکسل‌ها اصلاح کنید

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

نکته کلیدی: جریان کاربری ضعیف، قاتل پنهان یک طراحی عالی است.

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

این کار را انجام دهید: افزودن دکمه «فعلاً رد شو» (Skip for now) در فرآیند آنبوردینگ را در نظر بگیرید تا اصطکاک کاربر را کاهش دهید؛ این چیزی است که مشتریان دوست دارند. تحقیقات HubSpot نشان داده است که کاهش اصطکاک می‌تواند نرخ تبدیل را تا ۳۰٪ افزایش دهد.

۲. افکت‌ها را برای وضوح بیشتر کاهش دهید

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

• از «قانون ۳» استفاده کنید: در هر لحظه فقط از یک افکت قوی استفاده کنید.
• از ترکیب سایه‌های نرم، گرادینت‌های نرم و سطوح تمیز به طور همزمان خودداری کنید.

بینش کلیدی: عمق بصری باید پنهان به نظر برسد؛ زمانی مؤثر است که هیچ‌کس متوجه آن نشود.

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

نسخه «بدون افکت» خود را در شبکه‌های اجتماعی به اشتراک بگذارید تا ظاهری آرام‌تر و نظرات متفکرانه‌تری دریافت کنید.

۳. فاصله‌گذاری، کد مخفی طراحان ارشد است

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

• با یک سیستم پایه ۸ پیکسلی شروع کنید. یک مقیاس فاصله‌گذاری بسازید (۸، ۱۶، ۲۴، ۳۲، ۴۰ و…).
• چیدمان‌های خود را بررسی کرده و هر عدد فرد و نامتعارفی را با یکی از گام‌های مقیاس خود جایگزین کنید.

نکته کلیدی: برای رسیدن به ثبات، به جای کمال‌گرایی، بر ریتم و هماهنگی تمرکز کنید.

این کار را انجام دهید: یک ممیزی ۱۵ دقیقه‌ای روی آخرین پروژه خود انجام دهید. تمام مقادیر ۱۱ و ۲۳ پیکسلی را با مقادیر مقیاس پایه خود جایگزین کنید.

«بررسی ریتم بصری» را به عنوان یک سرویس افزودنی به مشتریان خود ارائه دهید؛ کاری که تلاش کمی می‌برد اما رضایت بالایی به همراه دارد.

۴. دیزاین سیستم‌های کوچک بسازید، نه صفحات تصادفی

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

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

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

این سیستم کوچک را به عنوان یک فایل تحویلی اضافی به مشتری ارائه دهید. این کار فوراً شما را به عنوان یک «شریک طراح» معرفی می‌کند، نه کسی که فقط پیکسل‌ها را جابجا می‌کند.

۵. آیکون‌های خود را مدیریت کنید: جزئیات کوچک، سیگنال‌های بزرگ

آیکون‌ها لحن بیان (tone of voice) شما را نشان می‌دهند. اگر یکی از آن‌ها ناهماهنگ باشد، کل پیام اشتباه به نظر می‌رسد.

• به یک خانواده آیکون (مانند Feather، Phosphor یا Material) پایبند باشید.
• ضخامت خطوط (stroke) را با هم هماهنگ کنید.
• هرگز آیکون‌های توپر (filled) و توخالی (outline) را در یک زمینه مشابه استفاده نکنید.

نکته اصلی: ثبات در آیکون‌ها، مهارتی است که در سکوت، تخصص شما را نشان می‌دهد.

این کار را انجام دهید: یک صفحه «آیکون‌ها» در فیگما با اندازه‌ها و ضخامت‌های یکسان ایجاد کنید.

به عنوان یک سرویس افزودنی با ارزش اما کم‌زحمت، «یکسان‌سازی آیکون‌ها» را به عنوان بخشی از کنترل کیفیت بصری (Visual QA) پیشنهاد دهید.

۶. مانند یک طراح ارشد، همه‌چیز را مرتب کنید

اگر می‌توانید، حذفش کنید. اگر نمی‌توانید، آن را کم‌اثر (Mute) کنید. فلش‌های بیش از حد، جداکننده‌های غیرضروری و دکمه‌های فراخوان به اقدام (CTA) متعدد، وضوح را از بین می‌برند.

نکته کلیدی: مینیمالیسم به معنای کاهش سردرگمی است، نه فقط کاهش عناصر طراحی.

این کار را انجام دهید: برای هر عنصر، آزمون «آیا کمکی می‌کند؟» را اجرا کنید. اگر به وظیفه اصلی کمکی نمی‌کند، آن را حذف یا غیرفعال کنید.

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

۷. بازخورد کاری می‌کند که رابط‌های کاربری زنده به نظر برسند

دکمه‌هایی که واکنشی نشان نمی‌دهند. لودرهایی که هرگز ظاهر نمی‌شوند. کاربران از خود می‌پرسند: «اصلاً کار کرد؟» میکرو-اینتراکشن‌ها (Micro-interactions) راویان داستان بی‌کلامی هستند که به کاربر می‌گویند: «هی، متوجه درخواستت شدم.»

نکته کلیدی: بازخورد، اعتماد را بسیار سریع‌تر از متون رابط کاربری (UI Copy) ایجاد می‌کند.

این کار را انجام دهید: حالت‌های هاور (hover)، فشرده شدن (push) و بارگذاری (loading) را به تمام کامپوننت‌های مهم اضافه کنید.

نکته اضافی: نمودارها باید شفاف‌سازی کنند، نه خودنمایی

اگر نمودارهای شما به توضیح نیاز دارند، بیش از حد طراحی شده‌اند. با درک مطلب شروع کنید، نه با سبک.

• تعداد رنگ‌ها را محدود کنید.
• محورها را ساده کنید.
• تمام نقاط ضروری را برچسب‌گذاری کنید.

نکته کلیدی: وضوح همیشه بر هوشمندی پیروز است.

این کار را انجام دهید: یک نمودار زیبا را با یک نمودار میله‌ای ساده با برچسب‌های واضح جایگزین کنید.

مدیر پروژه شما عاشق این کار خواهد شد.

ممیزی سریع: برنامه خود را در یک چشم به هم زدن اصلاح کنید

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

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

همین امروز چالش کوچک ۹۰ دقیقه‌ای را انجام دهید!

یک صفحه را انتخاب کنید.

• ۰ تا ۱۵ دقیقه: هدف کاربر را مشخص کنید.
• ۱۵ تا ۳۵ دقیقه: ساده‌ترین جریان ممکن را به صورت وایرفریم ترسیم کنید.
• ۳۵ تا ۶۰ دقیقه: سیستم فاصله‌گذاری و کامپوننت را اعمال کنید.
• ۶۰ تا ۸۰ دقیقه: حالت‌ها را اضافه کرده و شلوغی‌ها را پاک کنید.
• ۸۰ تا ۹۰ دقیقه: با شخص دیگری آن را آزمایش کنید.

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

فکر نهایی: از «خوب به نظر می‌رسد» تا «حس درستی می‌دهد»

مبتدی‌ها به دنبال جلب توجه هستند. حرفه‌ای‌ها به دنبال ایجاد حرکت و پیوستگی.

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

حسین اصلانی