الگوی دیداری Z و نقش آن در رابط کاربری و تجربه کاربری

چند روز پیش داشتم تو مدیوم و فروم های خارجی میگشتم و مشغول ریسرچ بودم که به یه سری الگو های دیداری رسیدم که تو طراحی و UX سایت خیلی مفید هستن، اولین الگو Z-Pattern هستش که نوع دید کاربر در LTRنشون میده یعنی از چپ به راست.یه قضیه ای هست که میگن کاربرا مطالب سایت نمیخوانند بلکه اسکن میکنند و هر مطلبی و کلمه ای براشون جذاب بود روش فوکوس میکنند .روش کار Z-Pattern : همین طور که انتظار داشتید الگوی z از شکل حرف Z پیروی می کند. این الگو مسیری را طی می کند که چشم انسان هنگام اسکن صفحه مسیری از چپ به راست و بالا به پایین را طی می کند:ابتدا کاربران از بالا به بالا سمت راست را اسکن می کنند و یک خط افقی را تشکیل می دهندبعد ، پایین می آیند و در سمت چپ صفحه ، یک خط مورب را ایجاد می کنندآخر ، دوباره به سمت راست برمی گردند و خط افقی دوم را ایجاد می کنندوقتی چشم کاربران با این الگو حرکت می کند ، یک شکل "Z" خیالی را ایجاد می کند.اما در زبان فارسی که RTL هست براساس تست هایی که گرفتم خیلی جاها همین الگو Z تو سایتا استفاده می شه ولی بعضی جاها هم همین الگو Z برعکس استفاده کرد تو راست به چپ.کجا از Z-Pattern استفاده کنیم؟الگو زد (Z-Pattern) اتفاق میافته که تمرکز اون صفحه به روی متن ها نیستش (برای صفحه های دارای متن زیاد مانند مقالات یا نتایج جستجو ، بهتر است از F-Pattern استفاده کنید که خیلی بهتره ). این باعث می شه الگوی زد (Z-Pattern) برای طراحی های ساده با چند عنصر اصلی که باید دیده شوند ، راه حل خوبی باشه . صفحه های مینیمالیستی یا صفحات لندینگ که بیشترشون از یک یا دو عنصر اصلی تشکیل شدند رو می تونید از الگوی زد (Z-Pattern) برای استفاده پیاده سازی کنید ،تا روند اسکن صفحه برای کاربران سایت شما بسیار آسون تر بشه.الگو Z واقعاً در پروژه های طراحی عالیه و مهمترین اصل سادگی و دعوت به عمل از کاربرای سایت هستش . صفحه لندینگ فیس بوک نمونه ای از Z-Layout استچگونه از الگو Z در طراحی های خود استفاده کنیم؟قبل از شروع به طراحی یک صفحه و دیزاین اون باید پاسخ سوال های زیر بدونید:وقتی بازدید کننده و یا همون کاربر وارد یک صفحه میشه ، می خواهید ابتدا چه اطلاعاتی (پیام اصلی) رو متوجه بشه؟به چه ترتیب می خواهید اطلاعات دیگر رو ببینه؟انتظار دارید کاربران در یک صفحه چه کاری انجام بدند؟فرضیه الگو 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-layouthttps://uxplanet.org/z-shaped-pattern-for-reading-web-content-ce1135f92f1chttps://medium.com/@lineindesign/be-a-designer-who-can-also-help-with-writing-copy-2f4ea02a5646