شناخت الگوی حرکت چشم کاربر بمنظور چیدمان صحیح عناصر کلیدی و کنترل و هدایت بصری بیننده در طراحی بسیار مهم است، غالباً چندین الگوی چیدمان در طراحی توصیه می‌شود که متداول‌ترین آنها ۳ نمودار گوتنبرگ، طرح الگوی z و طرح الگوی f است.
هر کدام از این الگوها به ما می‌گویند که عناصر مهم را برای دیده شدن بهتر، در کجا قرار دهیم، اما من فکر می‌کنم اغلب برداشت‌های درستی از این الگوها نشده و در واقع بدون فکر کردن به آنچه توصیف می‌کنند، استفاده می‌شوند.
من می‌خواهم به بررسی چرایی و چگونگی هر الگو پرداخته و بعد پیشنهاد دیگری را ارائه دهم که به شما به عنوان یک طراح امکان کنترل بیشتری در مورد چشمان بیننده در صفحه می‌دهد.
نمودار گوتنبرگ
نمودار گوتنبرگ یک الگوی کلی را که چشمان بیننده هنگام مشاهده اطلاعات یکنواخت و یکدست حرکت می‌کنند را توصیف می‌کند. قسمت آخر را دوباره بخوانید.
این الگو مربوط به محتوای سنگین متن است. به صفحات یک رمان یا یک روزنامه فکر کنید. استفاده از این الگو برای توصیف هر طرحی ممکن نیست.
نمودار گوتنبرگ طرح را به ۴ قسمت تقسیم می‌کند.
> ناحیه بصری اولیه واقع در بالا-چپ
> ناحیه قوی و مستحکم واقع در بالا-راست
> ناحیه ضعیف بیضی واقع در پایین- سمت چپ
> منطقه پایانی واقع در پایین-راست
این الگو نشان می‌دهد که چشم در یک سری از حرکات افقی به نام محور جهت گیری، صفحه را طی می‌کند. هر حرکت، کمی جلوتر از لبه چپ شروع می‌شود و تا کمی مانده به لبه راست حرکت می‌کند. حرکت کلی چشم، حرکت از ناحیه اولیه به ناحیه انتهایی است و از این مسیر به عنوان "گرانش خواندن" یاد می‌شود.
طبیعتاً این الگو مخصوص زبان‌های خوانشی از چپ به راست است و "در مورد زبان‌هایی که خوانش آنها از راست به چپ است، معکوس می‌شود."
نمودار گوتنبرگ نشان می‌دهد که سایر مناطق خارج از این مسیر خوانش چه به لحاظ محتوایی قوی و ضعیف دیده نشده و کمترین توجه را به خود جلب نمی‌کنند، مگر اینکه به لحاظ بصری دارای برجستگی‌هایی باشند.
عناصر مهم را باید در امتداد مسیر ثقل مطالعه قرار داد. برای مثال، قرار دادن لوگو در بالا-چپ، یک تصویر یا برخی از محتوای مهم در وسط، و یک تماس تلفنی یا اطلاعات ارتباطی در پایین سمت راست.
گفته می‌شود طرح‌هایی که از گوتنبرگ پیروی می‌کنند با "گرانش طبیعی خواندن" مطابقت دارند.
این یک نظریه است که این طرح‌ها در هماهنگی با ریتم طبیعی خواندن، درک مطلب و ریتم مطالعه را بهبود می‌بخشند، اما شواهد تجربی کمی برای تأیید این ادعا وجود دارد.
نمودار گوتنبرگ بلوک‌های بزرگ متن را با سلسله مراتب چاپی کم، توصیف می‌کند. به محض ایجاد یک سلسله مراتب بصری، نمودار دیگر اعمال نمی‌شود. این موضوع را با الگوهای دیگری که در ادامه شرح داده شده است در نظر داشته باشید.
الگوی طرح‌بندی Z
همانطور که انتظار دارید طرح الگوی z از شکل حرف z پیروی می‌کند. خوانش از بالا-چپ شروع می‌شود، قبل از اتمام با حرکت افقی دیگری به پایین-چپ برگشته دوباره به صورت مورب به پایین-راست حرکت می‌کند.
گاهی اوقات الگوی z، الگوی معکوس نامیده می‌شود، که ممکن است بیشتر مسیر خمیده را بر خلاف مسیر سخت زاویه‌دار نشان دهد(شبیه S). در غیر اینصورت اساساً همان چیز است.
تفاوت اصلی آن با نمودار گوتنبرگ در این است که الگوی z نشان می‌دهد بینندگان از دو ناحیه بدون توجه عبور می‌کنند. مسیر حرکت همان مکان‌های شروع و خاتمه و گذر از منطقه وسط است.
همانند نمودار گوتنبرگ، یک طراح بایستی مهمترین اطلاعات را در طول مسیر الگو قرار دهد.
الگوی z برای "طرح‌های ساده" و با چند عنصر مهم که باید دیده شود مناسب است.
الگوی زیگ زاگ
ما می‌توانیم الگوی حرکتی چشم را جای یک حرکت بزرگ Z به چندین حرکت کوچکتر z تبدیل کرده و الگوی حرکتی آنرا در صفحه گسترش دهیم.
از نظر عقلی این روش پذیرفتنی است زیرا مسیر حرکت چشم خواننده از چپ شروع و پس از طی مسیر کمی پایین آمده و به عقب برگشته و دوباره مسیر را طی می‌کند. بطور طبیعی ما اینگونه بلوک‌های بزرگ متن را می‌خوانیم.
به این شکل از حرکات z گاهی اوقات الگوی زیگ زاگ گفته می‌شود. اگر همچنان زیگ‌زاگ‌های های بیشتری را به الگو اضافه کنیم در نهایت با یک سری حرکات نزدیک افقی و راست نزدیک می‌شویم زیرا قسمت مورب z کم کم و کمرنگ می‌شود.
الگوی مثلث طلایی
الگوی z همچنین به آنچه الگوی مثلث طلایی می‌خوانند، منجر می‌شود. اگر اولین حرکت مورب افقی در بالا را داشته باشید و بعد از حرکت چشم به پایین آنرا تمام کنید یک مثلث که زاویه آن در سمت راست قرار دارد خواهید داشت.
این ناحیه مثلثی در بالای صفحه، منطقه‌ای است که بیشتر دیده می‌شود و این الگو گویای آن است که شما باید مهمترین اطلاعات خود را در آن ناحیه قرار دهید.
صفحه‌بندی الگوی F
الگوی f برای "طراحی وب‌سایت" مناسب است و همانطور که انتظار دارید شکل حرف F را دنبال کند.
من فکر می‌کنم که Jacob Nielsen در ابتدا این الگو را بعد از مطالعاتی که شرکت او انجام داد، پیشنهاد کرد. چیزی که از اعتبار آن کم می‌کند این است که مطالعات اصلی آن بر روی طراحی‌های سنگین متن و نتایج جستجو انجام شده‌است.
همانطور که مثل الگوهای دیگر، چشم از بالا-چپ شروع می‌شود، به صورت افقی به سمت بالا-راست حرکت می‌کند و قبل از انجام یک جابجایی افقی دیگر به سمت راست، دوباره به لبه سمت چپ باز می‌گردد. این رفت و برگشت دوم به اندازه اولین حرکت امتداد نمی‌یابد.
حرکت‌های اضافی بعد از جابجایی دوم کمتر بوده و کمتر به سمت راست حرکت می‌کند و چشم در نزدیکی لبه سمت چپ به سمت پایین جریان پیدا می‌کند.
الگوی f نشان می‌دهد:
> اطلاعات مهم باید در بالای طرح که به طور کلی در آن دیده می‌شود قرار بگیرد.
> اطلاعات کمتری را باید در لبه سمت چپ طراحی در مسیر هدف قرار دهید که با کمترین حرکت افقی چشم قابل مشاهده باشد.
> مردم بصورت آنلاین مطالعه نمی‌کنند بلکه نگاه اجمالی به محتوا می‌اندازند.
متأسفانه به نظر می‌رسد که این الگو کارکردی برای محتوای سنگین ندارد. اگر به نقشه‌های حرارتی اصلی Nielsen در زیر توجه کنید می‌بینید که F در محتوای اصلی متوقف شده و به کل صفخه گسترش نمی‌یابد.
هنگام استفاده از الگوی F در "شکل چیدن محتوا در طراحی"، اطلاعات کلیدی را در محلی قرار دهید که بیشترین بازخورد را داشته باشد یعنی اطلاعات مهم را در بالای صفحه قرار داده و محتوای توضیحی را در پایین آن جای بدهید.
با این حال به خاطر داشته باشید که اگر شخصی صفحه شما را بصورت اجمالی دید و محتوای آنرا مفید دانست، حتماً آنرا خواهد خواند. پس می‌توانید اطلاعات را در خارج از محدوده F برای کاربران اهل مطالعه قرار دهید.
بررسی هر ۳ الگوی حرکت
من قبلاً چند بار به آن اشاره کردم، در صورت عدم وجود سلسله مراتب در طراحی، درک این الگوها برای شناخت مسیر طبیعی حرکت چشم مهم است که نشان دهد جریان چشم کاربر در چه مسیری است. آنها الگوهای طبیعی را برای محتوای یکنواخت توزیع شده و سنگین متن توصیف می‌کنند.
متأسفانه، اغلب این الگوها در طرح‌هایی کاربرد دارند که خالی از سلسله مراتب تصویری هستند و شامل طرح‌هایی که بیش از متن در آنها وجود دارد نمی‌شود.
این الگوها آنچه از نامشان نیز مشخص است بیشتر، به هم شباهت دارند. در هر سه مسیر، حرکت بیننده از بالا-چپ شروع می‌شود و به سمت راست حرکت می‌کند. در الگوهای Z و F شاید آنها کمی بیشتر به سمت راست حرکت کنند، اما همه هنوز مسیر حرکت سمت راست است.
هر دو الگوی Z و گوتنبرگ در یک مکان به پایان میرسند و از وسط حرکت می‌کنند. دلیل اینکه الگوی f به انتها نمی‌رسد می‌توان اینگونه توضیح داد.
> داشتن محتوایی که به طور کامل جذاب نبوده و خواننده را جذب نمی‌کند. متأسفانه در مورد بیشتر محتوای آنلاین صادق است.
> نوشتن با یک سبک هرمی معکوس، که انتظار می‌رود کاربران خود را با پایین رفتن از صفحه از دست بدهند.
> انتظار افرادی که نکاه اجمالی برای کسب اطلاعات بیشتر می‌کنند را می‌توانند برآورده کنند یا خیر.
هر بازدید کننده‌ای که محتوای شما را جذاب تشخیص بدهد، شانس این را دارد که بخواهد اطلاعات بیشتری کسب کند و از الگوی f به منطقه پایانی برسد.
نکته آخر این است که هرچه این الگوها بیشتر مورد بحث قرار بگیرند، منجر به طرح‌های بیشتری با تأکید بر این الگو می‌شود. اگر متقاعد شوید که خوانندگان شما یکی از این الگوها را دنبال می‌کنند، به احتمال زیاد طرح‌هایی را ایجاد خواهید کرد که این الگو را تقویت می‌کند. و همان داستان پیدایش مرغ و تخم مرغ می‌شود.
الگوی نقاط کانونی
علت اینکه من دوباره به موضوع متن سنگین برمی‌گردم این است که به محض اینکه شروع به دادن وزن‌های مختلف بصری به عناصر طراحی خود کرده و سلسله مراتب بصری و جریان ایجاد می‌کنید، الگوهای فوق دیگر اعمال نمی‌شوند و فقط یک الگو برای درک آن وجود دارد. یکی که کاملاً قابل کنترل است.
نقاط کانونی آنقدرها هم با اصول طراحی مطابقت ندارد اما چون ما در اینجا در خصوص الگوها صحبت می‌کنیم به آن این نام را می‌دهم.
الگوی نقاط کانونی می‌گوید که افراد در صفحه اصلی ابتدا به مهمترین عنصر(عنصر یا ناحیه‌ای با بیشترین وزن بصری) نگاه می‌کنند.
از آنجا که مسیر حرکت چشم از عناصر مهم شروع و به سایر نقاط کانونی طرح ادامه پیدا می‌کند. ترتیب حرکت، بستگی به وزن نسبی این نقاط کانونی و همچنین علائم بصری دارد که نشان می‌دهد مکان بعدی را باید طی کند.
من اغلب اثر ترکیب ۸ Kandinsky’s (كه در بالا دیده می شود) [۱] را هنگام صحبت در مورد نقاط کانونی، تعادل و جریان در نظر می‌گیرم. با وجود اینکه اثری هنری است نه یک طراحی ولیکن نمونه خوبی برای نشان دادن هر ۳ الگو است. چشم شما به سمت چپ بالا کشیده می‌شود و از یک نقطه به نقطه دیگر شروع به حرکت می‌کند.
خطوط موجود در نقاشی به شما کمک می‌کند تا چشم شما به نقاط کانونی متفاوتی هدایت شود. من شک دارم که چشم شما F یا Z یا گرانش خواندن را از طریق طرح دنبال کند. نقاشی باید این نکته را روشن کند که ایجاد سلسله مراتب و جریان بیش از هر الگویی که در مورد آنها صحبت کرده‌ایم، قدرتمندتر است.
خلاصه مبحث
در حالی که الگوهایی مانند نمودار گوتنبرگ، الگوی z و طرح الگوی f نشان می‌دهد که یک مسیر طبیعی برای حرکت چشم در طراحی وجود دارد که آنرا طی می‌کند اما واقعیت این است که آنها فقط در خصوص طرح‌هایی با بلوک‌های بزرگ متن و بدون سلسله مراتب بصری صدق می‌کنند.
در صورت مطابقت هر کدام از این ۳ الگو با طراحی شما، آنها محل چیدن عناصر مهم را نشان خواهند داد. همچنین ممکن است بخواهید بر اساس این الگوها عناصر خود را طوری بچینید تا کاربرانی را که نگاه گذرا به صفحه می‌اندازند را به مسیرهای دلخواه خود هدایت کنید.
به محض اینکه شروع به اضافه کردن عناصر با وزن‌های متنوع بصری کنید، مسیری که چشم در طراحی شما طی می‌کند همان مسیری خواهد بود که شما ایجاد می‌کنید. در صورت تمایل نیز می‌توانید الگوهای گوتنبرگ، F یا Z را تقویت کنید، اما محدود به آنها نخواهید بود.
طبیعی است که در صورت عدم وجود سایر نشانه‌های دیداری، افراد از بالا-چپ شروع به کار کنند و به بعد سمت پایین صفحه حرکت کنند. این نحوه خواندن به ما [از کودکی] آموزش داده شده است. اگرچه کلید اصلی آن "عدم وجود سایر نشانه‌های دیداری" است. وقتی این نشانه‌ها حضور دارند، همیشه مسیر مورد نظر را کنترل می‌کنند.
به جای اینکه سعی کنید طراحی خود را بر اساس یکی از الگوهای توصیفی انجام دهید، بیاندیشید که چه اطلاعاتی را می‌خواهید به کاربر نشان دهید و از طریق گنجاندن یکسری نقاط کانونی و ایجاد سلسله مراتب بصری در طراحی، جریان حرکت چشم مخاطب را هدایت کنید. این تنها الگوی واقعی است که باید از آن استفاده کنید.
نویسنده: Steven Bradley با کمی تغییر
[۱] واسیلی کاندینسکی (Wassily Kandinsky) یکی از اصیل ترین و تاثیرگذارترین هنرمندان قرن بیستم بود. "نیاز باطنی" او به بیان مشاهدات احساسی خود به شکل گیری سبکی آبستره در نقاشی منتهی شد که بر پایه مشخصات انتزاعی رنگ و فرم قرار داشت.
مطالب پیشنهادیک
۹ فن‌آوری وب که باید هر توسعه دهنده وب بداند
