شما اینجا هستید: خانه » آموزش ux » چشم افراد چطور یک وب سایت را مشاهده میکند؟

چشم افراد چطور یک وب سایت را مشاهده میکند؟

الگوهای طرح بندی زیادی  هستند که بیان میکنند چشم افراد صفحات یک وب سایت را به چه صورت مشاهده میکند.و سه تا از معروف ترین آنها z-pattern ,  Gutenberg diagram  و f-pattern میباشند. و با توجه به نکات هر یک از این الگوها ، میتوان فهمید که اطلاعات مهم از سایت را در چه بخشی از آن قرار داد. و مطالعه مطالب سایت توسط کاربر نیز راحتتر صورت بگیرد.

Gutenberg Diagram- 1

Gutenberg diagram

Gutenberg

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

در این الگو قالب صفحه را به ۴ قسمت تقسیم میشود:

  • منطقه Primary optical (بصری اصلی)که درقسمت بالا سمت چپ قرار میگیرد.
  • منطقه Strong fallow (دنبال شونده قوی)که در بالا سمت راست قرار میگیرد.
  • منطقه Weak fallow(دنبال شونده ضعیف) که در پایین سمت چپ قرار میگیرد.
  • منطقه Terminal (پایانی) که در پایین سمت راست قرار میگیرد.

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

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

۲- Z-Pattern

z-pattern

website-z-pattern

 

این الگوی برای طراحی های ساده وبا عناصر کلیدی اصلی کم مناسب میباشد و همانطور که انتظار دارید طرح بندی این الگو از شکل حرف z پیروی میکند. به طوری که  ابتدا خواننده از بالا سمت چپ شروع خواهد کرد و در جهت بالا سمت راست به  طور افقی حرکت خواهد. سپس به طور مورب به پایین سمت چپ و پس از آن درراستای افقی ، حرکت چشم در قسمت پایین صفحه ودر سمت راست به پایان میرسد. گاهی اوقات به Z-Pattern معکوس s-pattern نیز گفته میشود.تفاوت اصلی بین Gutenberg diagram و  z-pattern در این است که در الگوی z به خواننده اجازه داده میشود که دو ناحیه از طریق چشم  دنبال شود.

۳- Zig-Zag Pattern

writzig-zag-pattern

میتوان این الگو را به صورت یک سری  از حرکت های الگوی z  و در واقع به جای به کاربردن یک Z-Pattern بزرگ در طراحی  سایت، از یک مجموعه الگوهای z  کوچکتر استفاده کرد. در این حالت برای مطالعه یک بلوک بزرگ متنی،آن را به بخش کوچکتر تقسیم و برای هر بخش از الگوی Zig-Zag استفاده میشود.

۴- Golden Triangle Pattern

writgolden-triangle

Golden Triangle Pattern

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

۵- F-Pattern

f-pattern

website-f-pattern

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

در این الگو پیشنهاد میشود که :

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

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

writf-pattern-heatmap

 

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

لینک ثبت پروژه : ثبت پروژه طراحی ux سایت

لیست طراحان :  مشاهده طراحان

2 دیدگاه

  1. مطلب جالبی بود ولی برای سایت های فارسی که جهت متون راست به چپ هستش، جهت این الگو ها هم باید راست به چپ باشه 

    • ممنون از توجهتون.
      درست میفرمایید. و این موضوع داخل مقاله هم ذکر شده است.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.