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

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

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

.

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

من اخیراً به این نتیجه رسیده ام که این نقص طراحی از روی عمد  نبوده است زیرا TSA فرم شکایت ثانویه‌ای نیز دارد که در انتهای آن دکمه "تأیید" به درستی قرار داده شده است. از آنجایی‌ که در طراحی یک فرم از توصیه‌ها پیروی شده است به نظر می‌رسد که طراحی ضعیف فرم دیگر، تصادفی است.

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

دقت در طراحی فرم، تأثیر بسزایی در سرعت کاربران در فهمیدن و پر کردن دقیق فرم دارد. در حقیقت بر اساس تحقیق جدیدی که توسط سکلر و همکاران او در CHI انجام شده است، اگر فرم‌ها با تبعیت از توصیه‌های کاربردی پایه ای طراحی شده باشند، نه تنها زمان پرکردن فرم به طور چشمگیری کاهش می‌یابد، بلکه احتمال ارسال فرم بی غلط به دو برابر افزایش می‌یابد. (در فرم‌های طراحی شده بر اساس توصیه‌های کاربردی در 78% موارد فرم همان بار اول با موفقیت تکمیل و ارسال شد، ولی این عدد برای فرم ‌های غیرمنطبق بر این توصیه‌ ها تنها 42% است).

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

آیا فرم های وب سایت شما از بهترین روش‌های کاربردی بودن تبعیت می‌کنند؟

بهترین روش‌ها برای طراحی فرم در وب سایت

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

1. طول فرم باید کوتاه باشد. به قول ریاضی‌دان مشهور، بلیس پاسکال "چیزی که ساخته‌ام طولانی‌ تر از حد معمول است زیرا وقت نداشتم کوتاه‌ ترش کنم". این اصل، علاوه بر استفاده در نوشتار، به درد طراحی فرم‌ برای سایت نیز می خورد. حذف قسمت‌های غیر ضروری نیازمند وقت بیشتری است ولی به تلاش کمتر کاربر و افزایش نرخ کامل کردن فرم می‌ارزد. از جمع‌آوری اطلاعاتی که 1) می‌توان آن را به نحو دیگری نیز به دست آورد، 2) جمع‌آوری آن  در زمان دیگری راحت ‌تر است، 3) به درد نمی‌خورند، پرهیز کنید. (اخیراً خود ما از این تکنیک در یکی از فرم‌ هایمان استفاده کنیم و تعداد قسمت‌های پر شونده توسط کاربر را از 6 به 2 رساندیم). هر چقدر که تعداد سؤالات یک فرم را کاهش دهید میزان خرید افزایش می‌یابد، به همین سادگی!  
2. قسمت‌های پر شونده مربوط به هم و برچسب ‌های توضیح ‌آنها را به یکدیگر نزدیک قرار دهید (برای فرم ‌های رو میزی کوتاه‌ تر و موبایلی دقیقاً بالای فرم، و برای فرم ‌های رومیزی بسیار طولانی کنار فرم). از اضافه کردن فاصله‌ بین برچسب و قسمت‌های پر شونده که باعث به وجود آمدن ابهام می‌شود بپرهیزید و اطمینان حاصل کنید که ویژگی برچسب را نیز درج کنید. اگر فرم در رابطه با دو موضوع مختلف است، آن را به دو گروه از قسمت‌های پر شونده تقسیم کنید (و نام گروه را نیز درج کنید)
3. قسمت‌های پر شونده را به صورت یک ستون تکی قرار دهید. وجود ستون های متعدد حرکت عمودی به سمت پایین فرم را مختل می‌کند. به جای اینکه کاربران را مجبور کنید که تمرکز دیدشان را تغییر دهند، با قرار دادن یک ستون و همچنین قراردادن هر قسمت پرشونده در یک ردیف، به آنها اجازه دهید به راحتی و بدون از دست دادن تمرکز به پایین صفحه حرکت کنند. (استثنا: قسمت‌های پر شونده کوتاه یا مربوط به هم مثل شهر، ایالت یا کد پستی می‌توانند در کنار یکدیگر و در یک ردیف آورده شوند).
4. ترتیب منطقی سؤالات را رعایت کنید. هم برای قسمت ‌های پر شونده (به عنوان مثال شماره کارت اعتباری، تاریخ انقضا، کد امنیتی) و هم برای گزینه‌های مقدار (به عنوان مثال تحویل استاندارد، تحویل دو روز، تحویل یک روزه) از ترتیب استاندارد استفاده کنید. اما برای قسمت‌های پر‌شونده ای که در آنها مقدار چیزی باید نوشته شود، دفعات استفاده از آن را نیز در نظر بگیرید و اگر ممکن بود مواردی که بیشترین استفاده را دارند در ابتدا بیاورید. به کاربرانی که از صفحه کلید استفاده می‌کنند کمک کنید تا با استفاده از کلید Tab بتوانند به ترتیب به قسمت پر شونده صحیح بعدی بروند.

    اپلیکیشن Starbucks برای آیفون: فرم سفارشی کردن نوشیدنی شما که متأسفانه گزینه "کاملاً بدون کافئین" در صفحه دیده نمی‌شود و بایستی صفحه را به صورت افقی به سمت راست ببرید تا بتوانید آن را ببینید. اگر گزینه "کاملاً بدون کافئین" بیشتر از گزینه‌های دیگر استفاده شود بایستی در ابتدا آورده شود.

1. از placeholder text ]متنی که در یک قسمت پر شونده فرم وجود دارد و هنگامی که شروع به تایپ در آن قسمت بکنید ناپدید می‌شود[ استفاده نکنید. طراحان placeholder text را دوست دارند زیرا شلوغی بصری را از بین می‌برد. ولی placeholder text باعث بروز بسیاری از مشکلات کاربردی بودن می‌شود و بهتر است از آن استفاده نشود.
2. اندازه قسمت‌ها را متناسب با نوع و میزان اطلاعات داده شده، قرار دهید. به جای استفاده از گزینه‌های باز شونده فقط برای 2 یا 3 گزینه، از دکمه‌های رادیویی(که فقط نیاز به یک کلیک دارند) استفاده کنید. اندازه هر قسمت تقریباً باید هم اندازه اطلاعات وارد شده باشد و اگر کاربران نتوانند تمام اطلاعات وارد شده خود را ببینند امکان بروز خطا افزایش می‌یابد. به عنوان مثال در کنفرانس تجربه کاربری که اخیراً با 130 شرکت‌کننده برگزار شد، تعداد حروف شهرهای محل اقامت شرکت‌کنندگان بین 3 (Leo, Indiana) و 22 (San Pedro Garza Garcia, Mexico) بود. 99% از شهرها 19 حرفی یا کمتر بودند که نشان می‌دهد اندازه 19 حرفی،  اندازه مناسب برای قسمت پر شونده مربوط به شهر است.
3. قسمت‌های اختیاری را از قسمت‌های اجباری متمایز کنید. اولاً تا آن جایی که می‌توانید قسمت‌های اختیاری را حذف کنید (به اولین توصیه توجه کنید). تشخیص قسمت‌هایی را که پر کردن آنها فقط برای بخشی از کاربران الزامی است، بر روی دوش کاربر نگذارید که مجبور شود با آزمون و خطا متوجه این نکته شود. فقط 1 یا 2 بخش اختیاری در فرم قرار دهید و اختیاری بودن آنها را به وضوح به اطلاع کاربر برسانید.
4. شرایط خاص مورد نیاز اطلاعات را برای کاربر توضیح دهید. اگر قسمتی نیاز به نوع خاصی از وارد کردن اطلاعات دارد دستورالعمل آن را را به دقت توضیح دهید. کاربر را مجبور به حدس شرایط مورد نیاز کلمه عبور نکنید. توضیح شرایط، شامل قوانین دستور زبان مثل نقطه گذاری، فاصله‌گذاری برای شماره تلفن یا شماره کارت اعتباری نیز می‌شود.(البته تا جایی که امکان دارد از این قوانین من درآوردی استفاده نکنید، مثل پرانتز های کد منطقه، قبل از شماره تلفن)

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

1. از قرار دادن دکمه "پاک کردن تمام قسمت‌های پر شده فرم" و یا دکمه "تنظیم مجدد" خودداری کنید. خطر پاک کردن تصادفی اطلاعات بیشتر از احتمال نیاز به شروع مجدد در فرم یک وب سایت است. در فرم ‌هایی برای اطلاعات بسیار حساس مثل اطلاعات اقتصادی، دکمه کنسل را برای پشتیبانی از کاربرانی که فرم را نیمه کاره رها کرده و می‌خواهند اطلاعاتشان را پاک کنند، قرار دهید. اما جهت جلوگیری از کلیک‌های تصادفی، برجستگی و به چشم آمدن دکمه کنسل بایستی به میزان قابل توجهی کمتر از دکمه تأیید باشد.
2. پیغام‌های خطا بایستی کاملاً دقیق و قابل مشاهده باشند. بروز خطا بایستی از طرق مختلف و نه فقط از طریق رنگ به اطلاع مخاطب برسد. برای اینکه اطمینان حاصل کنید که کاربر این اطلاعات مهم را از قلم نمی اندازد، کادر قسمتی را که با مشکل مواجه شده پررنگ‌تر کنید، از رنگ قرمز استفاده کنید و فونت آن را نیز درشت تر کنید. الان وقت مناسبی برای ظرافت و موشکافی به خرج دادن نیست!

نتیجه‌گیری

کاربردی بودن فرمهای وب سایت به هیچ وجه موضوع جدیدی به شمار نمی‌رود. این موضوع در منابع کاربردی بودن عمومی ذکر شده است (در چندین کتاب NN/g، هم برای توصیه‌های عمومی کاربردی بودن، تحقیقات کاربردی بودن ردیابی چشم و هم کاربردی بودن موبایل). بسیاری از 114 توصیه  تجربه کاربری برای سبد خرید تجارت الکترونیک، درباره طراحی فرم به صورت تخصصی بحث و گفت ‌و گو کرده اند. کتاب‌هایی وجود دارند که تماماً مختص طراحی فرم نوشته شده‌اند و همچنین تحقیقات دانشگاهی وجود دارند که نشان‌دهنده تأثیرگذاری پیروی از توصیه‌ها هستند.

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

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