گزارش کارگاه رابط-تجربه کاربری :
زیبایی‌شناسی در رابط کاربری وب‌سایت‌ها

گزارش کارگاه رابط-تجربه کاربری : زیبایی‌شناسی در رابط کاربری وب‌سایت‌ها

سایت‌های ایرانی با کسب ۴۷ امتیاز توانسته‌اند در جایگاه سیزدهم جهانی ازنظر مطابقت با شاخص‌های زیبایی‌شناسی قرار بگیرند.

کارگاه رابط-تجربه کاربری روز چهارشنبه ۱۴ بهمن در سالن گردهمایی مرکز توانمندسازی و تسهیل‌گری کسب‌وکارهای نوپای فاوا در دو بخش با عنوان تجربه‌کاربری و رابط کاربری برگزار شد.
مربی بخش نخست کارگاه مهریار سنندجی، طراح رابط و تجربه کاربری خلاق بود و بخش دوم نیز با اجرای میلاد حیدری، طراح رابط گرافیک برگزار شد. در این رویداد نزدیک به ۵۰ شرکت‌کننده حضور داشتند که قریب به اتفاق آن‌ها از فعالان شاغل در بخش طراحی وب و ابزارهای همراه بودند. این برنامه ساعت ۱۶ آغاز شد و در دو بخش، هر یک به مدت ۹۰ دقیق اجرا گردید.

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

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

  • تعداد و سرعت آن‌ها
  • استفاده از Transitons
  • استفاده بجا و مرتبط با تعامل کاربر
  • استفاده از انیمیشن‌های استاندارد

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

  •  جلب‌توجه بازدیدکننده است
  •  فضای مناسب برای آن‌ها در نظر بگیرید
  •  گاهی اوقات تضاد رنگی می‌تواند گزینه مناسبی باشد
  •  transitions را فراموش نکنید

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

برای مشاهده ارائه به صورت آنلاین، اینجا را کلیک کنید.

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