جادوگری در دیزاین با استفاده از فرم‌ها

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

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

به این فکر ‌کردم که طراحان فرآیند‌های طولانی و دشوار را چگونه ساده‌سازی می‌کنند؟ رامین هم‌تیمی من در دیزاین استودیو به من پیشنهاد فرم‌های Wizard را داد که باعث شد نسبت به آن کنجکاو شوم و در گوگل عزیز درباره آن جستجو کنم.

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

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

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

اما در طراحی فرم‌های ویزارد به چه مواردی باید توجه کنیم؟

۱) پیش از هر چیز باید دقت کرد که تعداد مراحلی که در نظر می‌گیریم مناسب باشد. تبدیل یک فرآیند پیچیده به ۱۰ مرحله همچنان کاربر را خسته می‌کند و از طرفی ۲ مرحله هم بی‌معنا است! تعداد مراحلی که برای فرم‌های ویزارد درنظر می‌گیرند ۳ الی ۵ مرحله است.

برای نمونه سایت دیجی کالا از فرآیند ۳ مرحله‌ای و سایت علی‌بابا از فرآیند ۵ مرحله‌ای استفاده می‌کند.

۲) یکی دیگر از نکات مهم که در طراحی ویزارد باید توجه کنیم این است که عنوان هر مرحله مشخص باشد و کاربر بداند که در این مرحله قرار است چه اطلاعاتی را وارد کند.

۳) برجسته کردن مرحله‌ای که کاربر اکنون در آن است و متمایز کردن آن از مرحله‌‌ای که آن را گذرانده و مراحل باقی‌مانده به او کمک می‌کند که بداند در کجای مسیر قرار دارد و چند مرحله تا اتمام کار باقی مانده است.

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

۵) نکته‌ی مهم دیگر آن است که در مرحله‌ی انتهایی و پیش از تأیید یک خلاصه‌ای از اطلاعات وارد شده به کاربر نشان داده شود تا اگر او دچار اشتباهی شده است، بتواند داده‌های خود را اصلاح کند.

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

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

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

و در نتیجه

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

برای نوشتن این یادداشت از مقاله‌ی زیر کمک گرفته‌ام: