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

طراحی سایت پر از نکات ریز و درشت می‌باشد. طراحان و توسعه‌دهندگان، می‌بایست به مسائل زیادی از ظاهر بصری (Visual Design) وب‌سایت گرفته تا کارکرد و نحوه تعامل با آن را مورد رسیدگی قرار دهند. تمام این عوامل روی‌هم‌رفته میزان جذابیت و سطح تجربه کاربری (UX) صفحات یک پورتال سازمانی را تعیین می‌کنند.

در قسمت چهارم از این مجموعه مقالات، با عنوان اصولی از UX که در استفاده از دکمه‌، ویدئو و تصویر باید رعایت کرد، به مقولۀ جذاب عناصر محتوایی وبسایت اشاره کردیم و آخرین یافته‌ها برای ارتقای تجربه کاربر در تعامل با دکمه‌ها، ویدئوها و تصاویر را معرفی نمودیم.

مقالات متنوعی پیرامون تحقیقات آزمون‌های UX و نتایج اقدامات وبسایت‌های پیشرو در این زمینه منتشر شده‌اند و جدا از تأثیر دیدگاه خاص مدیران هر سازمان و ویژگی‌های مخاطبانش، یک سری اقدامات بهینه یا Best Practice در مورد طراحی عناصر تشکیل دهندۀ صفحۀ وب برای عموم پورتال ها قابل استفاده هستند. در این مقاله ما به اصول بهینه‌ای برای استفاده از فرم و انیمیشن در طراحی سایت اشاره کرده‌ایم که در برخی از پرتال ها مورد غفلت قرار گرفته‌اند و اهمیت یک تحریریه خبر هوشمند و یک فرمساز پیشرفته را در پورتال سازمانی نشان می دهد.

 

فرم ها

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

• به موارد مورد نیاز بپردازید: در فرمها تنها آنچه را نیاز دارید بخواهید. همیشه به این نکته توجه کنید که چرا اطلاعات خاصی را از کاربر می‌پرسید و از آنها چه استفاده ای خواهید کرد. حتی خود شما هم با مشاهده یک فرم گسترده و طویل به هراس می‌افتید و ممکن است قید ثبت نام در سایت، خرید یک محصول، شرکت در یک نظرسنجی و ... را بزنید!. هر فیلد اضافه در در یک فرم، می تواند نرخ تبدیل صفحۀ (نسبت تعداد فرم‌های پر شده به تعداد مشاهده صفحه فرم) شما را کاهش دهد!
• ترتیب فیلدها: نحوۀ طرح سؤالاتی که در فرم می پرسید باید از منظر کاربر، منطقی باشند. مثلاً پرسیدن آدرس کاربر قبل از پرسیدن نام او، غیر منطقی است. بهتر است در این زمینه از وبسایت‌های رسمی و مطرح الگوبرداری کنید.
• فیلدهای گروهی: اطلاعات به هم مرتبط را در بلوک‌ها یا گام‌ها گروه‌بندی کنید. جریان پرسیدن سؤالات از گروهی به گروه دیگر، منطق درست یک مکالمه را شکل می دهد. بعنوان مثال، فیلدهای مربوط به مشخصات فردی، سوابق تحصیلی، سوابق شغلی و مهارت‌ها باید در گروه‌های جداگانه در فرم مطرح شوند.

انیمیشن

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

• از انیمیشن ها می‌توان برای ارائه بازخورد (Feedback) به عمل و اقدام کاربر استفاده کرد. این انیمیشن ها می‌توانند کاربر را از نتیجه عملیاتی خاص، مطلع کنند. در صورتی که یک عملیات بدرستی انجام نشود، یک انیمیشن می‌تواند به سرعت و به آسانی اطلاعاتی را در مورد مسئله پیش آمده به کاربر ارائه کند. مثلاً یک انیمیشن لرزشی می تواند در موردی که گذرواژه ای اشتباه وارد شده باشد، کاربر را از اشتباهش مطلع سازد.
• نمایش وضعیت سیستم: کاربران تمایل دارند در هر لحظه از وضعیت تعامل خود و عملیاتی که انجام می‌شود از طریق یک سری بازخوردهای بصری اطلاعاتی کسب کنند. عملیات آپلود و دانلود داده‌ها یکی از بهترین زمینه‌هایی است که انیمیشن‌ها می‌توانند کارکرد متناسب خود را نشان دهند. بعنوان مثال، یک loading bar متحرک می‌تواند سرعت فرایند و میزان پیشروی سیستم در بارگذاری اطلاعات را نمایش دهد.
• ناوبری وب سایت: حرکت از یک بخش وب سایت به بخش دیگر اگر همانند حالت پیشفرض، بصورت یک انتقال سریع صورت پذیرد، پیمایش کاربر در وبسایت را مشکل می‌سازد. استفاده از انیمیشن‌های کارکردی بصورت افکت های انتقال (transition) در لحظه‌های تغییر، حرکت کاربر را میان بخش‌های مختلف، روان و لذتبخش می‌کند.
• برندسازی (Branding): انیمیشن‌ها نقشی کلیدی در درگیر‌کردن کاربر دارند و می‌توانند یک ارتباط احساسی را میان کاربر و وب‌سایت برقرار سازند. انیمیشن‌ها می‌توانند از از ارزش‌های برند کمپانی حمایت کنند، نقاط قوت یک محصول را برجسته کنند و تجربه کاربری را به واقع لذت بخش و به یاد ماندنی سازند.