در قسمت قبل به معرفی ۶ الگوی طراحی اول پرداختیم و در این قسمت قصد داریم ۶ الگوی طراحی بعدی را معرفی کنیم:
سیستمهای جهتیافته به «Multi page» بسیار پیچیده و غیر لازم هستند.
توسعه وبِ مدرن راه را برای سایتها و برنامههای وب تکصفحهای هموار کرده است. پیشرفت تکنولوژی و برتری مرور وب با موبایل (که در آنها اپلیکیشنهای تکصفحهای کاربردیتر هستند) باعث ایجاد این الگو شده است که کارکردهای وب را بهبود میبخشد.
با استفاده از «ایجکس» اپلیکیشنهای وب تکصفحهای بهصورت غیر همزمان بارگذاری میشوند و قادرند چندین فعالیت را درون یک صفحه ترکیب کنند. این الگو همچنین برای سایتهای غیر اپلیکیشن مطلوب است که در پیجهای شخصی، صفحه اصلی را برای رفع نیازها برش میدهد.
بهعنوان مثال، جیمیل که اجازهی خواندن و نوشتن ایمیل و چت کردن در یک صفحه را میدهد و حتی ایمیلها را در دستهبندیهای مجزا سازماندهی میکند، از یک سایت Multi page تقلید میکند. همچنین اِسپاتیفای با امکان پخش موسیقی بهصورت بی وقفه در زمان بارگذاری صفحات، هنگامی که کاربر موسیقی دیگری را مرور میکند، عملکردی چندگانه دارد.
کاربران در مرور سایتهای سنگین متنی دچار مشکل هستند.
اگر محتوای زیادی وجود دارد (بهخصوص متن)، کاربران با الگوی F تعامل بهتری دارند؛ چون این الگو از روند خواندن که مردم بهصورت طبیعی دنبال میکنند تقلید میکند. این الگو برای خواندن و نوشتن از چپ به راست مطرح شده است؛ ولی میتوان آن را برای خواندن و نوشتن از راست به چپ تعمیم داد.
گروه نیلسن نورمن توضیح میدهد چگونه مطالعهی ردیابی چشم نشان داد که از دید کاربران (در خواندن چپ به راست) معمولا بلوکهای سنگین محتوا در یک الگوی شبیه حروف F یا E به نظر میرسند. چشمان ما از گوشه بالای سمت راست بهصورت افقی بررسی میکند و بعد به خط بعد میرود و این کار را تاجایی انجام میدهد که مورد علاقهمندی خود را پیدا کند.
بهعنوان مثال، اگر کاربر یک بلاگ را بررسی میکند، به خط اول یک پاراگراف برای رسیدن به کلمات کلیدی یا سنجشِ مفهوم نگاه میکند و اگر آن چیزی نباشد که او میخواهد به پاراگراف بعدی مراجعه میکند.
زمانیکه محتوای زیادی وجود دارد، الگوی F آنها را در سطرهای افقی و در بالای همدیگر سازماندهی میکند. این کار مسیری به وجود میآورد که چشم کاربران بهصورت طبیعی دنبال میکند و به طراح بر آنچه بازدید میشود کنترل بیشتری میدهد.
به این ترتیب که:
مفهوم الگوی F در طراحی وبسایت ها بسیار واضح و نشاندهنده اهمیت پیروی از دستورالعملهای نوشتن محتوا برای طراحی سایت است:
بهعنوان مثال، سایت یِلپ از ستونی عمودی که بهطور کامل تراز شده است استفاده میکند تا نقطه شروعی برای کاربران فراهم کند. وقتی کاربر یک موضوع یا تصویر جالب پیدا میکند، چشم او بهصورت افقی برای اطلاعات بیشتر جستجو میکند. اگر آیتم ستون عمودی مورد توجه او قرار نگیرد، به سطر بعد میرود تا به آیتم جذابی برسد.
هر سایت یک موضوع مورد بحث مشخص یا «call to action» دارد که کاربران با آن تعاملی ندارند.
الگوی Z، همانند الگوی F، از روشهای بررسی طبیعی کاربر تقلید میکند. با این وجود الگوی Z برای سایتهایی با هدف منحصربهفرد و محتوای کمتر مناسبتر است و الگوی F برای سایتهای با محتوای سنگین. الگوی Z کاربران را در میان چندین صفحه وب بازشده بهتر راهنمایی میکند. این الگو برای هدایت توجه کاربر به نقاط مشخص، با استفاده از تصاویر و متنها وCTA-ها در بهترین مکانها، بسیار مناسب است.
کاربران در خواندن از چپ به راست، از گوشه بالا سمت راست شروع میکنند. در عین حال که چشم کاربر مسقیم در جهت پایین حرکت میکند، در میانهها اندکی منحرف میشود و باید در انتهای گوشه سمت چپ یا در نزدیکی آن، دوباره از ابتدا شروع کند. شما میتوانید با قرار دادن تصویری بیانکننده (تریپادوایزِر) یا قرار دادن تصاویر و متن بهصورت زیگزاگ (وُندِرلیست) این الگو را تقویت کنید.
یک سایت شامل بسیاری از الگوهای دیداری تکراری است که باید بهصورت شفاف سازماندهی شوند.
در یک پدیده دیداری در طبیعت، تقارن بهطور کلی بهعنوان معیار زیبایی در نظر گرفته میشود و حس نظم و ساختار و حتی اعتماد ایجاد میکند.
با توجه به اینکه تماشای تصاویر متقارن لذتبخش است، احتمالا این تصاویر ارتباطات عاطفی با کاربران ایجاد میکنند که باعث لذت بردن از سایت، نحوهی شناسایی نام تجاری و به خاطر آوردن آن درآینده میشود.
تقارن افقی، برای سایت خیلی ساختار یافته است.
تقارن تقریبی موجود در الگوی تقارن مایل به افقی، بیشتر مزایای تقارن را که قابلیتهای حیاتی برای سایت دارند با افزودن ابعاد جزئی نامتقارن به یک تصویر متقارن حفظ میکند.
نتیجهی این الگو تحریککنندهتر است؛ هرچند سایت مقدار کمی از ساختار را از دست میدهد. اما این اختلال دیداری، میتواند به نفع شما باشد.
یک سایت میخواهد با جلب توجه به نقطهای کانونی، برای اقدام فوری انگیزش ایجاد کند.
الگوی تقارن شعاعی در حوزه اطراف یک نقطه کانونی توازن ایجاد میکند. در عین دشوار بودن اعمال، زمانیکه بهخوبی اجرا شود یک زیبایی خاصی ایجاد میکند که توجه را به کانون (معمولا نام کمپانی، لوگو و لینکهای پیرامون آن) جلب میکند.
همانطورکه همه چیز از مرکز مشترک به اطراف ساتع میشود، همه چیز به همان مرکز اشاره میکنند و یک نقطه توجه قوی میسازند.
الگوی تقارن شعاعی یا چرخشی همچنین برای نشان دادن حرکات خوب است. الگوهای دایرهای بهطور کلی کاربران را تشویق میکند تا بهصورت پیوسته تمرکز خود را به سمت اطراف یک انتهای طبیعی ببرند.
محتوای با ویژگی مشخص باید بیدرنگ و بدون ایجاد اختلال در جریان دیداری، برجسته شود.
عدم تقارن در سایت کشش و پویایی ایجاد میکند. این در مورد هر سایتی عملی نیست؛ اما اگر میخواهید سایتی زنده داشته باشید که به وضوح نقاط تمرکز را نشان میدهد، ارزش صرف وقت را دارد.
هنگامی که این الگو بهدرستی استفاده شود، عدم تقارنِ حاصل میتواند فضایی فعال ایجاد کند؛ به این معنی که فضای سفید را پر جنبوجوشتر میکند.
عناصر نامتقارن باعث میشوند که حتی در حالت خلأ، چشم سریعتر حرکت کند که این بهتنهایی سایت را پرانرژیتر نشان میدهد.
برای درک بهتر، فرض کنید جسمی از یک بلندی به سمت پایین حرکت میکند. زمانیکه به آن نگاه کنید فورا متوجه حرکت آن میشوید. طراحی حرکت به روش نامتقارن همین حس را ایجاد میکند.