چند روز پیش داشتم تو مدیوم و فروم های خارجی میگشتم و مشغول ریسرچ بودم که به یه سری الگو های دیداری رسیدم که تو طراحی و UX سایت خیلی مفید هستن، اولین الگو Z-Pattern هستش که نوع دید کاربر در LTRنشون میده یعنی از چپ به راست.
یه قضیه ای هست که میگن کاربرا مطالب سایت نمیخوانند بلکه اسکن میکنند و هر مطلبی و کلمه ای براشون جذاب بود روش فوکوس میکنند .
همین طور که انتظار داشتید الگوی z از شکل حرف Z پیروی می کند. این الگو مسیری را طی می کند که چشم انسان هنگام اسکن صفحه مسیری از چپ به راست و بالا به پایین را طی می کند:
وقتی چشم کاربران با این الگو حرکت می کند ، یک شکل "Z" خیالی را ایجاد می کند.
اما در زبان فارسی که RTL هست براساس تست هایی که گرفتم خیلی جاها همین الگو Z تو سایتا استفاده می شه ولی بعضی جاها هم همین الگو Z برعکس استفاده کرد تو راست به چپ.
الگو زد (Z-Pattern) اتفاق میافته که تمرکز اون صفحه به روی متن ها نیستش (برای صفحه های دارای متن زیاد مانند مقالات یا نتایج جستجو ، بهتر است از F-Pattern استفاده کنید که خیلی بهتره ). این باعث می شه الگوی زد (Z-Pattern) برای طراحی های ساده با چند عنصر اصلی که باید دیده شوند ، راه حل خوبی باشه . صفحه های مینیمالیستی یا صفحات لندینگ که بیشترشون از یک یا دو عنصر اصلی تشکیل شدند رو می تونید از الگوی زد (Z-Pattern) برای استفاده پیاده سازی کنید ،تا روند اسکن صفحه برای کاربران سایت شما بسیار آسون تر بشه.
قبل از شروع به طراحی یک صفحه و دیزاین اون باید پاسخ سوال های زیر بدونید:
فرضیه الگو Z در واقع بسیار ساده است: حرف Z را به صفحه تحمیل کنید و المان های سایت خودتون رو طبق این حرف بچینید. در حالت ایده آل ، شما می خواهید کاربران مهمترین اطلاعات شما را از همان ابتدا ببینند و در ادامه مهمترین اطلاعات بعدی شما را در ثانیه های بعدی ببینند. بنابراین ، عناصر مهم باید در امتداد مسیر اسکن چشم کاربران قرار بگیرند پس اطلاعات مناسب را در زمان مناسب به بازدید کنندگان ارائه دهید.
ایجاد جریانی و مسیری برای چشم کاربران ضروری است.
جریان عبارت است از هدایت چشم کاربر از یک قسمت صفحه به قسمت دیگر در جهتی که می خواهید حرکت کند. شما از طریق ترکیبی از وزن بصری و جهت بصری جریان را ایجاد می کنید. در اینجا چندتا از بهترین روش ها وجود دارد که باید هنگام ایجاد جریان و مسیر دید برای کاربران به خاطر داشته باشید:
#نقطه شماره ۱ شروع سفر بیننده و کاربران است، و مکان بسیار خوبی برای لوگو شماست.
#نقطه شماره 2 مواردی را که می خواهید خواننده (کاربران) در ابتدا یا همون بالای Z ببیند اینجا بذارید. چشم به طور طبیعی از خط بالای Z پیروی می کنه ، بنابراین هدف این هست که "Call To Action" دوم خود را در انتها بذارید. وزن بصری بیشتری را در عنصر نقطه شماره 2 قرار بدید - دکمه (یا یک عنصر کلیدی دیگر) را به اندازه کافی در تضاد قرار بدید تا توجه کاربران شما رو جلب کنه.
قسمت مرکزی صفحه: ترفند این منطقه اینطور هستش که اون رو با محتوایی پر کنید که علاقه کاربران را حفظ می کنه، اما آونها رو از ادامه اسکن منحرف و حواسشون رو پرت نمی کنه. به عنوان مثال ، می توانید از یک Hero image در وسط صفحه برای جدا کردن قسمت های بالا و پایین و هدایت چشمهای کاربر در مسیر Z استفاده کنید.
#نقطه شماره 3 : هدف از نقطه شماره 3 راهنمایی کاربران برای فراخوان نهایی در نقطه شماره 4 هستش،یعنی اینجا باید پیش زمینه ای باشه برای نقطه شماره ۴ شما. به عنوان مثال ، اگر این صفحه کالایی را که می خواهید بفروشید تبلیغ می کنه ، و دوست دارید مشتریان بالقوه قبل از دیدن دکمه "خرید" ، چیزی در مورد محصول بخوانند، که آنها را بیشتر ترغیب به خرید کنه، شما می توانید با استفاده از نقطه شماره 3 مزایای استفاده از محصول خودتون رو یا سایر اطلاعات مفید برای کاربران خود رو فراهم کنید که به اونها در ایجاد زمینه برای خرید کمک کنه.
#نقطه شماره 4 :نقطه شماره 4 خط پایان هستش ، سطر بین آن و نقطه 3 باید حاوی محتوایی باشد که دید کاربر را به گوشه ای سوق و هدایت کنه. نقطه شماره 4 خودش مکانی ایده آل برای دعوت اصلی و CTA شما هستش.
این الگو Zرو هم میتونید به صورت برعکس تو زبان فارسی استفاده کنید و جواب میده.
مرسی از اینکه تا آخر این مقاله با ما همراه بودید.
شماهم اگه موارد مشابه از الگو Z برخوردید برامون کامنت کنید.
منابع:
https://instapage.com/blog/z-pattern-layout
https://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1c
https://medium.com/@lineindesign/be-a-designer-who-can-also-help-with-writing-copy-2f4ea02a5646
