الگوی خوانش F چیست یا متن‌ها را چگونه می‌خوانیم؟

این مطلب، ترجمه‌ی مفصل مقاله Nielsen Norman Group است که به بررسی الگوی خوانش F یا (F shaped pattern) می‌پردازد؛ اگر وقت‌تان محدود است و می‌خواهید کلیت ماجرا را متوجه شوید، می‌توانید در این پست اینستاگرام خلاصه مقاله را مطالعه کنید، اما اگر مشتاقید همه جزییات را بدانید با من همراه شوید:)

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

الگوی خواندن محتوای وب بر اساس شکل حرف F در سال 2006 توسط گروه Nielsen Norman که از گروه‌های پیشرو در حوزه تجربه کاربری است، شناسایی شده‌است. در طول سال‌ها، بسیاری از طراحان به این تحقیق گاهی به درستی اشاره کرده‌اند و در بسیاری از موارد، آن را اشتباه تفسیر کرده‌اند!

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

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

الگوی F شکل

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

1. کاربران ابتدا در یک حرکت افقی، معمولاً قسمت بالای مطالب را مطالعه می‌کنند که نوار بالای F را می‌سازد.

2. در مرحله بعد، کاربران صفحه را کمی به سمت پایین حرکت می‌دهند و سپس در حرکت افقی دوم که معمولاً منطقه کوتاه‌تری را نسبت به حرکت قبلی پوشش می‌دهد، مطالب را می‌خوانند و به این ترتیب نوار پایینی F ساخته می‌شود.

3. در نهایت، کاربران سمت چپ محتوا را در یک حرکت عمودی اسکن می‌کنند. گاهی اوقات این اسکن آهسته انجام می‌شود و به صورت یک نوار عمودی در نقشه حرارتیِ ردیابی چشم (eye tracking heatmap) ثبت می‌شود.

پیامدهای این الگو عبارتند از:

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

* چند کلمه اول در سمت چپ هر خط، نسبت به کلمات بعدی در همان خط، بیشتر دیده می‌شوند.

البته این نکته را در نظر داشته باشید که الگوی اسکن F به ندرت یک F کامل است! به عنوان مثال، در برخی موارد، ممکن است افراد به پاراگراف پایین صفحه علاقه‌مند شوند و روی کلمات بیشتری تمرکز کنند و دوباره به سمت راست برگردند، بنابراین این الگو شبیه E می شود!

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

بنابراین، در الگوی F، توجه به سمت چپ محتوا جلب می‌شود، نه سمت چپ کل صفحه؛ مثلا اگر سمت چپ صفحه، نویگیشن ریل (navigation rail) قرار گرفته باشد، در الگوی خوانش F این قسمت لحاظ نمی‌شود.

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

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

الگوی خوانش F ، تنها الگوی موجود نیست!

علاوه بر الگوی F ، الگوهای دیگری از جمله موارد زیر وجود دارند:

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

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

چرا کاربران مطالب را با الگوی F اسکن می‌کنند؟

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

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

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

3. کاربر آنقدر متعهد یا علاقه‌مند نیست که بخواهد هر کلمه را با دقت بخواند.

دو عنصر آخر تقریباً خلاصه‌ای از تمام رفتارهای کاربران هنگام مشاهده یک وبسایت است:

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

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

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

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

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

الگوی F تاثیر منفی برای کاربران و کسب وکارها دارد

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

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

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

بهترین پادزهرها برای جلوگیری از الگوی خوانش F

متن را اولویت‌بندی و قالب‌بندی کنید تا کاربران را به سمت آنچه می‌خواهید ببینند و آنچه می‌دانید که می‌خواهند ببینند هدایت کنید. چند نکته ساده:

1. مهمترین نکات را در دو پاراگراف اول صفحه درج کنید.

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

3. عناوین اصلی و عناوین فرعی را با کلماتی که حاوی بیشترین اطلاعات هستند شروع کنید: اگر کاربران فقط 2 کلمه اول را ببینند، باید محتوای کلی و اصلی ادامه‌ی متن را دریافت کنند.

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

5. کلمات و عبارات مهم را پر رنگ کنید .

6. از قالب‌بندی متفاوت برای لینک‌ها استفاده کنید.

7. از بولت‌ها و اعداد برای اسکن سریعتر مطالب یک لیست یا فرآیند استفاده کنید.

8. محتوای غیر ضروری را حذف کنید.

خلاصه:

اسکن مطالب در وب تحت تاثیر عوامل زیر قرار دارد:

· میزان انگیزه کاربران برای کسب اطلاعات

· اهدافی که برای رسیدن به آنها تلاش می‌کنند

· طرح‌بندی صفحه و قالب‌بندی متن

· محتوای صفحه

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

خوشحال میشم اگر این مقاله رو بدون استفاده از الگوی خوانش F مطالعه کرده باشید:) و خوشحال‌تر میشم از خواندن نظرها و پیشنهادهاتون:))

راستی برای مشاهده مقالات بیشتر در مورد UI / UX می‌تونید ما رو در اینستاگرام @produxlab دنبال کنید.