نرگس دوست محمدی
نرگس دوست محمدی
خواندن ۳ دقیقه·۱ سال پیش

الگوهای طراحی UX / تکمیل فرم ها

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

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

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

این نوشته، با توجه به دوره‌ی UX Design Patterns with Checklist Design از سایت Uxcel نوشته شده.


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

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

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

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

نمایش دکمه ارسال

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

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

نمایش پیغام خطا

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

نکته! از اصطلاحات فنی برای توضیح اینکه چه چیزی باعث خطا شده استفاده نکنید. از کلمات ساده‌ای استفاده کنید که کاربر بتونه با اون ارتباط برقرار کنه.

در مقاله‌ی Error-Message Guidelines از Nielsen Norman Group می‌تونید 12 دستورالعمل برای ایجاد پیام‌های خطای موثر بخونید.

زمان کاربر مهمه!

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

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

نکته! از تأیید اعتبار هر ورودی زمانی که کاربر تایپ میکنه خودداری کنید چون باعث آزار مردم و ایجاد بی اعتمادی نسبت به محصول می‌شه.

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

امیدوارم که این مطلب براتون مفید بوده باشه، خوشحال می‌شم نظراتتون رو بخونم. :)

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