الگوی رفتاری کاربران در خواندن صفحات وب با استفاده از روش eye-tracking

به طور کلی الگوی رفتاری افراد در مواجهه با متون در صفحات فیزیکی (Print) با صفحات وسایل الکترونیکی مانند کامپیوتر و موبایل (Screens) یکسان می‌باشد، با این تفاوت که در محتوای دیجیتال، تمایل افراد به مطالعه کمتر می‌باشد. به همین دلیل دانستن الگوی رفتاری کاربران می‌تواند در طراحی صفحات وبسایت با تعامل بالاتر کمک‌کننده باشد.

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

موسسه NNgroup از سال ۱۹۹۷ تحقیقات گسترده‌ای در زمینه‌ی چگونگی مطالعه آنلاین انجام داده است. این تحقیقات به دو روش کمی و کیفی و با استفاده از روش eye tracking یا ردیابی چشم کاربران صورت گرفته. نکته‌ی جالبی که در این تحقیقات وجود دارد، عدم تغییر رفتار کاربران آنلاین طی ۲۵ سال گذشته است. در صورتی که سایر تحقیقات انجام شده در زمینه رفتار کاربران در فضای آنلاین نشان‌دهنده تغییر مداوم الگوهای رفتاریست. ثبات این الگوها به دلیل ریشه داشتن آن در روانشناسی رفتاری انسان (Human behavior psychology) دارد و تحت تاثیر تغییرات رابط کاربری، ترندها و ... نیست.

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

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

رایج‌ترین الگوهای اسکن صفحات توسط کاربران:

• الگو F
• الگو کیک لایه‌ای
• الگوی زیگ‌زاگ
• الگوی نقطه به نقطه
• الگوی وفادار

۱. الگوی F یا F pattern

در این الگو حرکت چشم کاربران حرف Fانگلیسی را تشکیل می‌دهد. به این صورت که:

۱.چشم کاربران ابتدا به صورت افقی محتوای ابتدای صفحه را اسکن ‌می‌کند.

۲. پس از آن مقداری به صورت عمودی پایین آمده و دوباره به صورت افقی محتوای پایین‌تر را اسکن می‌کند.

۳. در آخرین قدم کاربر کاملا به صورت عمودی چشم خود را حرکت می‌دهد و محتوای ستون سمت چپ را بررسی می‌کند.

* در این پترن محتوای موجود در ابتدای صفحه توجه بیشتری نسبت به سایر محتوای موجود در صفحه جلب می‌کنند.

* همچنین کلمات ابتدایی جملات در قسمت چپ صفحه امکان خوانده شدن بیشتری نسبت سایر کلمات همان جملات دارند.

عموما کاربران در چه صفحاتی از الگوی F برای خواندن استفاده می‌کنند؟

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

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

۲. الگوی کیک لایه‌ای: (Layer-cake pattern)

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

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

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

اقدامات کمک‌کننده در دیزاین:

• استفاده از فونت متفاوت
• سایز بزرگتر در عنوان‌ها
• رنگ متفاوت در عنوان و زیرعنوان
• استفاده از افکت‌هایی مانند shadow, underlining, bolding

۳. الگوی زیگ‌زاگی: (Zig-zag pattern)

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

این الگو عموما زمانی اتفاق می‌افتد که بلوک متن و تصویر در صفحه به صورت افقی مدام با یکدیگر جابجا می‌شوند.

معایب استفاده از این الگوی خواندن توسط کاربر:

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

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

۴. الگوی نقطه به نقطه: (Spotted pattern)

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

چطور در الگوی نقطه‌به‌نقطه، توجه کاربر را جلب کنیم؟

• استفاده از پرسش و پاسخ‌های آماده
• ·استفاده از فیچر‌های گوگل مانند آکاردئون‌های بازشونده از دیتای اضافی مانند آدرس و شماره تماس
• استفاده از بلوک‌های جانبی مانند نقشه

۵. الگوی وفادار : (Commitment pattern)

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

چه زمانی کاربر در مواجهه با یک صفحه، از الگوی وفادار استفاده می‌کند؟

• کاربر اعتماد بالایی به برند کلی و وبسایت دارد
• کاربر وفادار یک وبسایت
• کاربر متقاعد شده که محتوایی که به دنبالش بوده‌است در همان صفحه یافت می‌شود.

نتیجه‌گیری:

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

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

منابع:

https://www.nngroup.com/articles/how-people-read-online/

https://www.nngroup.com/articles/text-scanning-patterns-eyetracking/

https://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

https://www.nngroup.com/articles/layer-cake-pattern-scanning/