جذابیت در طراحی تعاملی: ایجاد عشق در نگاه اول!

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

بیشتر از آنکه به چشم می آید!

ما به راحتی چیز هایی را که دوست داریم تشخیص می‌دهیم (همانطور که چیزهای ناخوشایند را به سرعت تشخیص میدهیم.) اما در ضمیر ناخودآگاه داستان به شکل دیگری است. زمانی که دانشمندان می‌گویند انسان ها موجوداتی بینایی-محور هستند، این جمله تنها یک نظر عادی و شخصی نیست. تحقیقات و داده های بسیار زیادی وجود دارد که نشان می‌دهد بخش بزرگی از مغز انسان به داده هایی تخصیص می‌یابد که از سوی چشمان وی دریافت میگردد. این میزان در مقایسه با دیگر حس ها بسیار بیشتر است.
اما از آنجایی که همه ما انسان‌هایی بینایی محور هستیم بهتر است با یک مثال منظورمان را برسانیم! فقط کافی است کلمه زیر را بخوانید:
سیاه
اگرچه کلمه نوشته شده رنگ سیاه را بیان میکند، برای بیشتر افراد، مغز تنها رنگ قرمز را تشخیص میدهد! کلمه سیاه به تنهایی آنچنان ساده است که حتی یک بچه دبستانی هم می‌تواند آن را بخواند اما باز هم جلوه رنگ قرمز بر روی نوشته غلبه می‌کند.
در یکی از کنفرانس های TED دیوید مک کندلس خبرنگار بخش داده‌ها و متخصص اینفوگرافی، عمق تاثیر جلوه‌های بصری بر مغز ما را (که اکثرا در سطح ناخودآگاه میباشد) بیان می‌کند. او منظور خود را با یک مثال کامپیوتری بیان می‌کند:
“ حس بینایی شما سریعترین حس است. این حس سرعت انتقالی در حد شبکه های کامپیوتری اینترنت دارد. سپس شما حس لامسه را دارید که سرعتی همانند یک پورت USB را دارد و سپس حس های شنوایی و بویایی وارد می‌شوند که سرعتی برابر یک هارد دیسک را دارند. پس از آن حس چشایی، سرعتی برابر یک ماشین حساب جیبی را دارد. این حس در حد یک کاشی کوچک در یک اتاق بزرگ است. (چیزی در حدود ۰.۷ درصد). این میزانی است که شما از این حس خود، آگاهی دارید! پس میزان زیادی از بینایی، در حال جاری شدن به مغز بوده و این فرآیند کاملا ناخودآگاه است.”
فقط به تاثیراتی که این موضوع بر روی طراحی تعاملی دارد، فکر کنید! کاربران شما در ابتدا المان های چشم نواز را می‌بینند. هر تصمیمی در انتخاب رنگ، فونت، تصاویر، آیکن ها، موقعیت المان ها و هر نقطه ای در صفحه در سطحی از مغز کاربران شما تجزیه و تحلیل می‌شود که حتی خود آنان نیز بدان آگاه نیستند.
جلوه ظاهری حتی تا نقطه ای پیش می‌رود که بر روی دید کاربر از میزان عملکرد صحیح یک محصول نیز تاثیر می‌گذارد. زمانی که ما باید اطلاعات مربوط به کارت بانکی مان را در یک وب سایت وارد کنیم، اعتماد به یک فاکتور حیاتی تبدیل می‌شود. یک تحقیق بسیار جالب از دانشگاه استنفورد درباره چگونگی اعتبارسنجی سایت ها توسط کاربران نتیجه جالبی را نمایان کرد: تقریبا نیمی از کاربران، حدود ۴۶.۱ درصد از آنان، اعتبار یک سایت را تنها بر مبنای ظاهر آن وب سایت می‌سنجند. ویژگی های ظاهری همچون طراحی صفحات، انتخاب فونت، اندازه فونت و حتی رنگ های موجود در یک محصول همگی فاکتور های حیاتی می‌باشند.
تحقیقات دیگر نتایج مشابهی را درباره قدرت تاثیرگذاری جلوه های ظاهری یک محصول بر ارزش پیش‌بینی شده آن محصول نشان می‌دهند. یک آزمایش که توسط ماساکی کروسو و کااوری کاشیمورا ترتیب داده شد که در آن ۲ عدد ATM که تنها تفاوت آنها در قرارگیری المان های هر صفحه و دکمه بود، در اختیار مردم قرار گرفت. کاربران گزارش دادند که دستگاه با ظاهر جذاب تر بهتر کار کرده است، در حالی که کارکرد دو دستگاه کاملا یکسان و مشابه بوده.
نقش زیبایی شناسی بسیار فراتر از یک ظاهر زیباست ومی‌تواند هم آگاهانه و هم ناآگاهانه، هم واقعی و هم پنهان تاثیرات وسیعی روی محصول بگذارد.

تنها یک ظاهر زیبا کافی نیست: عملکر مناسب جلوه های بصری

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

۱. نوار منو (navigation)

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

البته شما همیشه نمی‌توانید برای معرفی هر صفحه از یک نماد (آیکن) استفاده کنید و هر دو سایت فیسبوک و لینکدین نیز برای مواردی که مسیریابی پیچیده تری دارند از کلمات استفاده می‌کنند. (لینکدین اکنون از تلفیق متن و آیکون استفاده می‌کند) 

۲. جلب توجه (Drawing attention)

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

در مثال بالا، اپرا (Opera) دکمه call-t-action خود را در وسط صفحه به نمایش گذاشته است و با توجه به رنگ سبز باطراوتی که سبب بارز شدن آن نسبت به پس زمینه سفید می‌گردد، این دکمه احتمالا یکی از اولین چیزهایی است که کاربر در صفحه می‌بیند.

۳. بازخورد (feedback)

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

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

۴. تاثیرگذاری روی رفتار (affecting behavior)

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


قسمت های دیگر این کتاب:

قسمت اول: سخنی کوتاه در طراحی تعاملی : اهمیت متن ! (بخش اول) را بخوانید.

قسمت دوم: سخنی کوتاه در طراحی تعاملی : اهمیت متن ! (بخش دوم) را بخوانید.

قسمت سوم: فضای خالی در طراحی تعاملی : به کارگیری قدرت پنهان «هیچ‌چیز»! را بخوانید. 

قسمت چهارم: فضای فعال و غیرفعال (Active & Passive) را بخوانید.

قسمت پنجم: جذابیت در طراحی تعاملی: ایجاد عشق در نگاه اول! را بخوانید.

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

قسمت هفتم: عنصر سری : ریزتعامل‌ها را بخوانید.

قسمت هشتم: ۵ راز روانشناختی برای طراحی تعاملی پایدار را بخوانید.

قسمت نهم: لذت در طراحی تعاملی (موشکافی چند مثال مهم) (بخش اول) را بخوانید.

قسمت دهم: لذت در طراحی تعاملی (موشکافی چند مثال مهم)(بخش دوم) را بخوانید.

نظرتان را بگویید