ترفندهای بهینه‌سازی تجربه‌کاربری در طراحی فرم‌های موبایلی
راهکارهای جذاب برای تبدیل اذیت به لذت...
فرم های موبایلی: کابوس یا کیفیت؟ تجربه آسان‌تر با ترفندهای جالب
در این مقاله میخوام در مورد موضوعی که ما طراحا با وسواس زیادی انجامش میدیم و طراحیش میکنیم، یعنی "فرم های موبایلی" حرف بزنم، فرم ها همچنین به دلیل خسته کننده بودن برای پر کردن، بدنام هستند.
طراحی فرم‌های موبایل بخش حیاتی از تجربه کاربری (UX) است که در فرآیند انجام کارهای آنلاین نقش مهمی ایفا میکند، هر کدام از ما حداقل برای یک بار هم که شده تجربه روبه رو شدن با یک فرم آنلاین را برای انجام کاری که می‌خواستیم به صورت اینترنتی انجام بدیم مانند (ثبت نام در یک دوره آموزشی یا خرید اینترنتی از فروشگاه های آنلاین) داشته ایم، بسیاری از فرآیندهای آنلاین حداقل یک مرحله دارند که در آن کاربر فرمی را برای کمک به انجام وظایف خود پر میکند، و چه بسیار فرم‌هایی بودن که حرص مارو در آوردن و گاهی از پر کردن فرم ها و انجام کارمان منصرف شده ایم.
در بسیاری از فرم‌های ورود، نام کاربری و رمز عبور ممکن است مشکل ساز باشند و کاربر رمز عبور خود را فراموش کرده باشد و برای بازیابی آن با مشکل روبه رو شود. برنامه Slack برای حل این مشکل یک ایمیل ارسال میکند، سپس کاربر روی آن کلیک و برنامه را باز میکند و به جای اینکه کاربر را وادار کند در فرم خود (فرم ورود برنامه) تایپ کند شما را از این طریق احراز هویت میکند این فقط یک رویکرد زیبا و یک استعاره خوب نیست، بلکه یک طرز فکر خوب برای فکر کردن به این مشکل از نظر بهبود این فرآیند خسته کننده و دست و پا گیر ورود به سیستم است.
در فرم‌های ثبت نام به جای پرسیدن نام و نام‌خانوادگی، بهتر است نام کامل *با هم* را بپرسید، یعنی به جای اینکه دوتا فیلد یکی نام و یکی نام‌خانوادگی داشته باشید یک فیلد کلی برای گرفتن نام کامل (نام و نام‌خانوادگی) داشته باشید.
در زیر در مورد نکات و ترفندهایی صحبت میکنم که برای طراحی بهینه فرم‌های موبایلی استفاده می‌شوند و تجربه پر کردن فرم را تا حد امکان ساده تر میکند.
یکی از مهم ترین نکات در طراحی فرم های موبایلی استفاده از ترتیب عمودی برای موقعیت گذاری المان ها است. مطالعات نشان داده‌اند که استفاده از ترتیب عمودی باعث افزایش سرعت پر کردن فرم‌ها توسط کاربران می‌شود، حتی اگر باعث افزایش طول صفحه شود یعنی صفحه اسکرول بخورد.
بهتر است برای المان‌های ورودی (input) فرم‌ها برچسب (label) اضافه کنید. این عمل باعث می‌شود کاربران بدون مشکل بتوانند بفهمند که باید چه اطلاعاتی را وارد کنند. برچسب‌ها باید واضح و کامل باشند تا اطلاعات کاربری بدون ابهام باشد. برای فیلدهایی که پر می‌شوند یک عنوان (label) در نظر بگیرید مثلا اگر دارید فیلد شماره تلفن را طراحی می‌کنید، عنوان شماره تلفن (lable) را در بالای فیلد در نظر بگیرید نه داخل فیلد، هنگامی که کاربر روی فیلد ضربه بزند عنوان ناپدید می‌شود و کاربر با یک فیلد خالی مواجه می‌شود و شاید نداند که برای چیست و کاربران نابینا از صفحه خوان‌ها (screen reader) استفاده می‌کنند برای همین وقتی در فیلد می‌خواهند تایپ کنند برچسب آن ناپدید می‌شود و صفحه خوان آن را اعلام نمی‌کند.
کاربران بینا نیز ممکن است گیج شوند. انگشتشان را در آنجا می‌زنند، و بعد مثل این می‌شود: "اینجا چه چیزی قرار دهم؟ فقط خالی است." بنابراین، بهتر است یک برچسب فرم داشته باشید.
آقای Luke Wroblewski تحقیقی در باره اینکه برچسب فرم را در کجا بزاریم؟در بالای فیلد یا در کنار آن؟ انجام داده و به این نتیجه رسیده که :
در موبایل اگر برچسب‌ها بر روی فیلدها باشند تا داخل آن، کاربران بهتر با آن کار می‌کنند. همچنین دریافت که به‌جای چیدن فرم‌ها در کنار هم، مثلا گذاشتن فیلد نام و نام‌خانوادگی در کنار هم اگر آنها را به صورت عمودی در زیر هم قرار دهیم بهتر است، بعضی از کاربران برای پر کردن فرم‌ها فقط از صفحه کلید استفاده می‌کنند و با دکمه Tab بین فیلدها جا به جا می‌شوند پس اگر فقط *عمودی* بروید، پر کردن فرم بسیار *سریع* تر است. بنابراین، اگر سرعت می‌خواهید، عمودی طراحی کنید.
در طراحی فرم‌ها در قسمت فیلد شماره تلفن بهتر است یک باکس کلی به جای چند باکس در کنار هم در نظر گرفته شود که در هرکدام از باکس ها مثلا دو عدد قرار بگیرد. البته این موضوع نیاز به مراقبت از موضوع لوکالیزیشن و کشورها دارد. کشورها استاندارد های خاص خود را برای نحوه نمایش شماره های تلفن همراه دارند، بنابراین اگر محصولی طراحی می‌کنید که بومی نیست و به صورت بین المللی استفاده می‌شود حتما به این موضوع توجه داشته باشید تا کاربران به راحتی بتوانند اطلاعات را وارد کنند.
برای مثال در آمریکا، عدد، عدد، عدد و سپس سه عدد دیگر، سپس چهار عدد دیگر است.در بریتانیا، یک شماره تلفن همراه فقط می‌تواند یک رشته طولانی هشت یا نه عددی و غیره باشد، بنابراین باید از منظر محلی‌سازی (بومی سازی) مراقب باشید.
موضوع دیگری که در مورد فرم‌ها می‌دانیم این است که پیمایش در میان فرم‌ها می‌تواند گیج‌کننده باشد. دانستن اینکه چه فیلدهای لازم (ضروری) وجود دارد می‌تواند گیج کننده باشد، برای حل این مشکل می‌توانیم بخش‌های مختلف هر فرم را گروه بندی کنیم، مثلا گروه تکمیل اطلاعات حساب کاربری، و تکمیل اطلاعات کارت اعتباری را جدا در نظر بگیریم و بگذاریم کاربر در بین این بخش ها پیمایش داشته باشد و فرآیند تکمیل فرم را به صورت خطی در نظر نگیریم تا کاربر مجبور باشد بعد از پر کردن هر بخش به بخش بعدی برود با این کار کاربر به سرعت فیلدهای مورد نیاز و ضروری خود را شناسایی میکند و با تجزیه فرم به بخش های مرتبط و ایجاد دسته بندی‌های مناسب، کاربران به راحتی می‌توانند فیلدهای لازم را پر کنند.
این طراحی معمولا برای محصولاتی مانند فرم های بانکی، بیمه و مالیات و بخش های دولتی که فرم های طولانی و عمیق دارند استفاده می‌شود.
مدیریت خطاهای مرتبط (contextual errors) امکان بازیابی آسان کاربران از اشتباهات را فراهم میکند. با ارائه خطاهای مرتبط با المان‌های موجود و ارائه راهکارهای مناسب برای برطرف کردن اشتباهات، کاربران به راحتی می‌توانند فرم را به درستی پر کنند.
رسیدگی به خطا واقعاً بسیار مهم است. ارائه *مدیریت خطاهای متنی* بسیار مهم است،مانند کاری که گوگل انجام می‌دهد وقتی رمز عبور را پر می‌کنید فوراً به شما می‌گوید قوی است یا نه ، تا اعلان درونی آن
زمانی که مشکلی وجود دارد، به کاربران اجازه دهید تا به آن بخش نیز پیمایش کنند، به خصوص اگر فرم واقعا طولانی باشد
میتوانید در طراحی یک فرم طولانی وقتی فیلدهای زیادی وجود دارد و کاربر اطلاعات مورد نیاز هر فیلد را به درستی وارد نکرده است به جای نمایش دادن همه فیلدها با رنگ قرمز در آخر فرم یک دکمه حل مشکل بگذارید و با کلیک یا لمس آن کاربر را به اولین خطا بفرستید و سپس از بالا شروع کنید و دکمه بعدی را با عنوان (رفتن به مشکل بعدی) بگذارید و مشکلات با هر خطا را حل کنید. نوع خطاهای پیمایش یک تکنیک دسترس‌پذیری است و می‌تواند برای تمرکز کاربر روی تلفن همراه بسیار مفید باشد.
با این دکمه شما به بالای فرم و به اولین خطا می‌روید
فرم‌ها کاربر را قادر می‌سازد تا به اطلاعاتی که به دنبال آن هستند دسترسی داشته باشند، اما طراحی آنها باید به او اجازه دهد که بداند در مرحله بعد چه کاری انجام دهد و چگونه آن را انجام دهد، فرم‌ها روشی حیاتی برای درگیر شدن در گفتگو بین کاربران و محصولات هستند.
در این مقاله در مورد روش هایی صحبت کردم که با استفاده از آنها می توانید از فرم ها به طور مؤثر استفاده کنید در زیر به صورت خلاصه به آنها اشاره میکنم :
طراحی فرم‌های موبایلی از جمله موارد مهم در ایجاد تجربه کاربری موثر است. با رعایت نکاتی که در این مقاله گفته شد، میتوانید تجربه کاربری بهتری را برای کاربران خود ایجاد کنید و فرآیند پر کردن فرم‌ها را برای آنها آسان‌تر کنید.
امیدوارم این مطلب برای طراحان و توسعه دهندگان مفید واقع شود.
برای مطالعه بیشتر در این زمینه میتوانید به منابع زیر مراجعه کنید.
