۵ اصل طراحی وب که هنوز در سال ۲۰۲۲ میبایست رعایت کرد /۵ اصل طراحی وب که هنوز در سال ۲۰۲۲ کار می کنند

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

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

در اینجا ۸ اصل موثر طراحی وب که باید بدانید و رعایت کنید آورده شده است.

۱. سلسله مراتب بصری

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

دایره های سلسله مراتبی بصری

بدون اینکه چیزی در مورد این حلقه ها بدانید، می توانید آنها را رتبه بندی کنید
به آسانی. این یک سلسله مراتب بصری است.

بخش‌های خاصی از وب‌سایت شما مهم‌تر از سایر بخش‌ها هستند (فرم‌ها، فراخوان‌ها برای اقدام، پیشنهاد ارزش و غیره)، و شما می‌خواهید که آن‌ها توجه بیشتری نسبت به بخش‌های کم‌اهمیت به خود جلب کنند.

اگر منوی وب سایت شما دارای ۱۰ آیتم است، آیا همه آنها به یک اندازه مهم هستند؟ می خواهید کاربر کجا کلیک کند؟ پیوندهای مهم را برجسته تر کنید.

سلسله مراتب فقط از اندازه ناشی نمی شود. آمازون با استفاده از رنگ، دکمه‌های فراخوان «افزودن به سبد خرید» و «اکنون خرید» را برجسته‌تر می‌کند.

دکمه های آمازون افزودن به سبد خرید

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

با هدف تجاری شروع کنید

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

در اینجا یک مثال است. این یک اسکرین شات است که از وب سایت ویلیامز-سونوما گرفته ام. آنها می خواهند ظروف آشپزی در فضای باز بفروشند.

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

این یک سلسله مراتب بصری است – یک اصل بی انتها در طراحی وب – به خوبی انجام شده است.

۲. نسبت های الهی

از حروف کوچک فی یونانی برای نسبت طلایی استفاده می شود.
نسبت طلایی عدد جادویی ۱,۶۱۸ (φ) است. اعتقاد بر این است که طرح هایی که از نسبت های تعیین شده توسط نسبت طلایی استفاده می کنند، از نظر زیبایی شناختی دلپذیر هستند.

سپس، دنباله فیبوناچی وجود دارد. هر جمله مجموع دو عبارت قبلی است: ۰، ۱، ۱، ۲، ۳، ۵، ۸، ۱۳، ۲۱ و غیره. نکته جالب این است که دو موضوع به ظاهر نامرتبط عدد دقیقی را تولید می کنند.

در اینجا نسبت طلایی به نظر می رسد:

بسیاری از هنرمندان و معماران از نسبت ها برای تقریب نسبت طلایی استفاده می کنند. نمونه معروف پارتنون است که در یونان باستان ساخته شده است:

نمونه پانتئون نسبت طلایی

آیا نسبت طلایی می تواند برای طراحی وب کار کند؟ شرط می بندی. توییتر اینجاست:

نسبت طلایی توییتر

در اینجا نظری است که سال‌ها پیش توسط مدیر خلاق توییتر، داگ بومن، ارائه شده است. انتخاب طرح تصادفی نبود:

بنابراین، اگر عرض طرح شما ۹۶۰ پیکسل است، آن را بر ۱,۶۱۸ (=۵۹۳ پیکسل) تقسیم کنید. می دانید که عرض ناحیه محتوا باید ۵۹۳ پیکسل و نوار کناری ۳۶۷ ​​پیکسل باشد. اگر ارتفاع وب سایت ۷۶۰ پیکسل است، می توانید آن را به تکه های ۴۷۰ پیکسل و ۲۹۰ پیکسل (۷۶۰/۱.۶۱۸=~۴۷۰) تقسیم کنید.

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

۳. قانون هیک

قانون هیک می گوید که با هر انتخاب اضافی، زمان لازم برای تصمیم گیری افزایش می یابد.

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

هر چه کاربر گزینه های بیشتری در وب سایت شما داشته باشد، استفاده از آن دشوارتر است (اگر اصلاً از آن استفاده شده باشد). ما باید انتخاب ها را حذف کنیم. برای طراحی بهتر وب، روی حذف گزینه های حواس پرتی در طول فرآیند طراحی تمرکز کنید.

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

۴. قانون فیت

قانون فیت تصریح می کند که زمان لازم برای حرکت به یک منطقه هدف (مثلاً کلیک کردن بر روی دکمه) تابعی از فاصله تا هدف و اندازه هدف است. به عبارت دیگر،

اگر یک شی بزرگتر و نزدیکتر باشد، استفاده از آن آسانتر است.

Spotify در مقایسه با دکمه های دیگر، زدن “Play” را آسان تر می کند:

اندازه دکمه spotify fitts قانون در برنامه تلفن همراه، دکمه پخش را نیز در مکانی قرار می دهند که به راحتی می توانید آن را لمس کنید.

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

با افزایش ۲۰ درصدی اندازه، کلیک کردن روی یک دکمه کوچک بسیار آسان تر است، در حالی که یک شی بسیار بزرگ، با همان افزایش ۲۰ درصدی اندازه، مزایای مشابهی را در قابلیت استفاده ارائه نخواهد داد.

این شبیه به قانون اندازه هدف است. اندازه یک دکمه باید متناسب با دفعات مورد انتظار استفاده از آن باشد. می‌توانید از ردیابی ماوس استفاده کنید تا ببینید مردم از کدام دکمه‌ها بیشتر استفاده می‌کنند، سپس دکمه‌های محبوب را بزرگ‌تر کنید (ضربه آسان‌تر).

بیایید تصور کنیم فرمی وجود دارد که می خواهید افراد آن را پر کنند. در انتهای فرم دو دکمه وجود دارد: «ارسال» و «بازنشانی» (فیلدها را پاک کنید).

دکمه های ارسال و تنظیم مجدد به همان اندازه

۹۹,۹۹۹۹٪ می خواهند “ارسال” را بزنند. بنابراین، دکمه باید بسیار بزرگتر از “تنظیم مجدد” باشد.

۵. قانون یک سوم

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

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