۹ اصل طراحی وب که طراحان باید به آن توجه داشته باشند
۹ اصل طراحی وب که طراحان باید به آن توجه داشته باشند
طراحی eb برای مبتدیان و تازه کارها چندان جالب نیست. با تکیه بر قرن ها تئوری طراحی گرافیک و هزاره ها اصول زیبایی شناسی، تسلط بر طراحی وب بیش از یک عمر طول می کشد. اما قبل از اینکه دلتان را از دست بدهید، خبر خوب این است که برای ایجاد یک یا دو صفحه زیبا نیازی به تسلط بر طراحی وب ندارید – تنها کاری که باید انجام دهید این است که اصول درست طراحی وب را دنبال کنید.
اصول طراحی وب زیر را به عنوان “ده فرمان” ما برای طراحی وب در نظر بگیرید – به جز اینکه فقط ۹ مورد از آنها وجود دارد زیرا اکنون همه چیز ساده تر از سه هزار سال پیش است. اگر شما یک طراح مشتاق هستید یا حتی فردی هستید که یک وب سایت DIY راه اندازی می کند، این اصول طراحی وب را در قلب خود رعایت کنید.
سلسله مراتب بصری مشخص می کند که مردم چه چیزی را اول (و آخر) متوجه می شوند.
–
سلسله مراتب بصری یکی از ارکان طراحی گرافیک است. اساساً به آن چیزی اشاره دارد که وقتی گروهی از تصاویر را با هم دارید (مانند یک صفحه وب) بیشترین و کمترین توجه را به خود جلب می کند. با دستکاری سلسله مراتب بصری، یک طراح از لحاظ نظری می تواند ترتیب توجه بیننده به هر عنصر را که به عنوان “جریان بصری” شناخته می شود، کنترل کند.
برای طراحی وب، سلسله مراتب بصری بسیار مهم است. طراحان وب باید مهمترین عناصر -ابزارهای ناوبری، عناوین صفحه، فراخوانی برای اقدام، کنترل های کاربر- را در اولویت قرار دهند و در عین حال مطمئن شوند که عناصر کم اهمیت باعث حواس پرتی نمی شوند.
در حالی که تکنیک های زیادی وجود دارد که می تواند توجه را به خود جلب یا دفع کند (که برخی از آنها در سایر اصول طراحی وب در زیر پوشش داده شده است)، در عمل طراحان از این سه استراتژی اصلی برای تعریف سلسله مراتب بصری استفاده می کنند:
اندازه – همانطور که می توانید تصور کنید، عناصر بزرگ توجه بیشتری را به خود جلب می کنند در حالی که عناصر کوچک کمتر جلب توجه می کنند.
رنگ – رنگ‌های روشن و پر جنب و جوش سریعتر از رنگ‌های کم‌رنگ‌تر و کسل‌کننده‌تر مورد توجه قرار می‌گیرند (همچنین می‌توانید از تضاد رنگی که در زیر توضیح داده شده است برای به حداکثر رساندن اثر استفاده کنید)
موقعیت – از آنجایی که اکثر مردم به طور غریزی از بالا به پایین می خوانند، ابتدا عناصری که در نزدیکی بالای صفحه قرار گرفته اند مورد توجه قرار می گیرند.
وقتی نوبت به ایجاد طرح‌بندی صفحه وب می‌رسد، سلسله مراتب بصری خود را از قبل با تهیه فهرستی از تمام عناصر خود به ترتیبی که می‌خواهید بازدیدکنندگان متوجه آنها شوند، برنامه‌ریزی کنید. از آنجا، تکنیک های مناسب را برای هر کدام اعمال کنید.
کاربران نباید فکر کنند
–
در سال ۲۰۰۰، استیو کروگ، نویسنده و دانشمند کامپیوتر، کتاب مهم خود را به من نگذار فکر نکنن، منتشر کرد، که جنبش تجربه کاربر اولیه را به وجود آورد. درس اصلی کتاب – طراحی های خود را تا حد امکان ساده و قابل درک کنید – حتی با گذشت بیش از ۲۰ سال هنوز یکی از اصول اساسی طراحی وب است.
ایده این است که هر بار که کاربر باید متوقف شود و به این فکر کند که چگونه کاری را انجام دهد یا دکمه مورد نیازش کجاست، از دستیابی به آنچه می‌خواهد جلوگیری می‌کند. برای مثال، اگر کاربر شما می خواهد از برنامه شما برای نوشتن ایمیل استفاده کند، باید صرفاً روی نوشتن ایمیل تمرکز کند، نه اینکه سعی کند دکمه «ارسال» را پیدا کند یا اینکه بداند چگونه فونت را تغییر دهد.
ایده‌های کروگ بر غریزه انسان برای انتخاب اولین راه‌حل و نه لزوما بهترین راه‌حل تأکید می‌کند. سپس بر عهده طراح قرار می‌گیرد تا بهترین راه‌حل را به راحتی متوجه شود، مبادا کاربر مسیری غیرمنتظره و کم‌بازده را طی کند.
طراحان باید همیشه به دنبال راه هایی برای ساده سازی و ساده سازی طرح های خود باشند. سلسله مراتب بصری نقش مهمی در جذب سریع کاربران دارد که به دنبال آن هستند، اما استراتژی های دیگر نیز مفید هستند.
قانون Jakob را در نظر بگیرید – که به نام یکی دیگر از پیشگامان UX Jakob Nielson نامگذاری شده است – که توصیه می کند از نمادها و الگوهایی استفاده کنید که کاربر قبلاً با آنها در سایت های دیگر آشنا است. به عنوان مثال، امروزه اکثر سایت ها از یک نماد ذره بین در بالای صفحه برای نشان دادن نوار جستجو استفاده می کنند. استفاده از همان نماد در سایت شما به این معنی است که کاربر مجبور نیست به نحوه استفاده از عملکرد جستجو در سایت شما فکر کند و قرار دادن آن در بالا به این معنی است که آنها مجبور نیستند به این فکر کنند که کجا آن را پیدا کنند.
کنتراست و حرکت جلب توجه می کند
–
با گسترش تکنیک‌های خود برای جذب و دفع توجه، به یاد داشته باشید که «مخالف‌ها جذب می‌شوند». کنتراست ابزار مورد علاقه طراحان با تجربه است که از تفاوت های فاحش بین رنگ ها و اندازه ها استفاده می کنند.
استفاده از رنگ های متضاد در کنار هم قرار دادن یک راه عالی برای جلب توجه است. این یکی از موثرترین استراتژی ها برای برجسته کردن دکمه های CTA است. طراحان دکمه CTA را در رنگ مخالف پس زمینه رنگ می کنند، راهی آسان برای برجسته کردن آن.
به همین ترتیب، اندازه های متضاد وقتی در کنار یکدیگر قرار می گیرند، به خوبی کار می کنند. اگر عناصر زیادی در صفحه دارید و فضایی برای بزرگ‌تر کردن آن ندارید، سعی کنید چیزی کوچک را در کنار یک عنصر قرار دهید – این کار باعث می‌شود که آن را بزرگ‌تر نشان دهید و در نتیجه آن را بیشتر به چشم بیاورید.
به طور مشابه، حرکت و حرکت نیز توجه را به خود جلب می کند، یک هک تکاملی قدیمی از روزهای شکارچی-گردآورنده ما که طراحان دوست دارند از آن بهره برداری کنند. شما از انیمیشن‌های کوچک برای عناصر خاص استفاده می‌کنید تا سریعتر مورد توجه قرار گیرند – به عنوان مثال، یک نماد جهنده در هنگام دریافت اعلان جدید.
فقط مراقب استفاده بیش از حد از انیمیشن ها باشید. اگر چیزهای زیادی روی صفحه نمایش شما حرکت می کنند، تمرکز را سخت می کند. در عوض، برای قوی نگه داشتن آن از حرکت کم استفاده کنید.
فضای سفید به شما امکان می دهد جریان بصری را کنترل کنید
–
فضای سفید که به عنوان “فضای منفی” شناخته می شود، یکی دیگر از ابزارهای مورد علاقه طراحان متخصص، عکاسان و همه هنرمندان تجسمی است. فضای سفید صرفاً به فضای خالی یا قسمت هایی از صفحه نمایش شما که هیچ عنصر بصری در آنها وجود ندارد، به جز شاید پس زمینه، اشاره دارد.
فضای سفید در یک صفحه وب به همان اندازه مهم است که سایر محتواها – حتی اگر فعالانه از آن استفاده کنید مهمتر است. برای شروع، فضای سفید برای کنترل تعادل یک صفحه ضروری است. عناصر بیش از حد در کنار هم می توانند گیج کننده و حواس پرتی باشند، بنابراین فضای سفید کافی برای ایجاد یک چیدمان جامع ضروری است.
علاوه بر این، فضای سفید می تواند سلسله مراتب بصری را با این اصل ساده طراحی وب تحت تأثیر قرار دهد: هر چه فضای سفید در اطراف یک شی بیشتر باشد، توجه آن شی بیشتر می شود. این بدان معناست که اگر یک عنصر را با فضای سفید زیادی احاطه کنید، توجه بیشتری نسبت به زمانی که همان عنصر را با سایر تصاویر احاطه کرده باشید، جلب خواهد کرد.
در نهایت، فضای سفید برای فاصله گذاری و گروه بندی عناصر خاص مهم است. قرار دادن فضای سفید اضافی بین دو جسم به تمایز آنها کمک می کند، در حالی که قرار دادن فضای سفید کمتر بین آنها آنها را به هم متصل می کند.
استفاده از فضای سفید برای گروه بندی هنگام جداسازی عناصر خاص بر اساس شباهت ها مفید است. به عنوان مثال، فرض کنید باید دو منوی پیمایش جداگانه را در یک صفحه از هم متمایز کنید، مانند یک منو برای دسته‌های وبلاگ و دیگری برای کل سایت. گروه بندی همه آیتم ها در یک منو با حداقل فضا به کاربر کمک می کند تا آنها را به هم متصل کند در حالی که قرار دادن فضای اضافی بین دو منو مانع از اشتباه گرفتن آنها توسط خواننده می شود.
اطلاعات بیش از حد کاربر را بیش از حد بارگذاری می کند
–
یکی دیگر از اصول رایج طراحی وب، محدود کردن مقدار اطلاعاتی است که در یک زمان به کاربران خود ارائه می دهید. مغز انسان فقط می‌تواند خیلی چیزها را مدیریت کند، به‌ویژه وقتی صحبت از حافظه کوتاه‌مدت به میان می‌آید، بنابراین به تجزیه اطلاعات به دوزهای کوچک‌تر کمک می‌کند – که همچنین به توصیه کروگ مبنی بر عدم وادار کردن کاربر به فکر کردن زیاد کمک می‌کند.
این ایده را قانون میلر، بر اساس کار روانشناس جورج میلر در سال ۱۹۵۶ به بهترین وجه نشان می دهد. میلر دریافت که یک فرد معمولی می تواند تنها ۷ قطعه اطلاعات را در حافظه کوتاه مدت خود ذخیره کند (۲ مورد را بدهد یا بگیرد).
متأسفانه، بسیاری از صفحات وب بیش از هفت چیز برای گفتن دارند. تحقیقات خود میلر پیشنهاد می‌کند که از تکنیک «تکه‌کردن» یا گروه‌بندی اطلاعات مرتبط با هم در «تکه‌های» کوچک استفاده کنید تا هضم آن آسان‌تر شود. مثال تکه‌شدن در شماره تلفن‌ها دیده می‌شود: کد منطقه را در یک تکه، سه رقم اول را در قسمت دیگر و چهار رقم پایانی را در قسمت آخر قرار می‌دهیم.
به طور خاص در طراحی وب، همچنین به تقسیم صفحه شما به “صفحه نمایش” کمک می کند که به تمام اطلاعاتی که در یک زمان روی صفحه در دسترس است اشاره می کند. هنگامی که کاربر هضم تمام اطلاعات روی یک صفحه را به پایان می رساند، برای یک صفحه کاملاً جدید با اطلاعات جدید به پایین اسکرول می کند.
از طرف دیگر، می توانید چربی را نیز کوتاه کنید و فقط آنچه لازم است را ارائه دهید. این تا حدودی انگیزه‌ای در پشت روند مینیمالیسم طراحی وب بود که صفحات وب را تشویق می‌کند تا فضای سفید زیادی داشته باشند و فقط عناصر کاملاً ضروری مانند کنترل‌ها را داشته باشند. این سبک به دلیل اثر جانبی آن در کاهش زمان بارگذاری نیز با طراحی وب به خوبی کار می کند.
دسترسی به مناطق تعاملی باید آسان باشد
–
قانون فیتس (اغلب به اشتباه به عنوان “قانون فیتس” نوشته می شود) به طرز دردناکی آشکار است و در عین حال اغلب نادیده گرفته می شود. این بیان می کند که قابل اجراترین مناطق باید راحت ترین دسترسی باشند.
برای طراحی وب دسکتاپ، قانون فیتس توصیه می کند که فاصله ای را که کاربر باید موس را حرکت دهد، کاهش دهد. به طور معمول، اگر توابعی دارید که با هم استفاده می شوند، باید تا حد امکان نزدیک به هم قرار گیرند، به عنوان مثال، یک جعبه متن نظر و دکمه “پست”.
این اصل طراحی وب همچنین منوی کشویی کلیک راست را ایجاد کرد که کاملاً قانون فیتس را نشان می دهد. منوی کشویی کلیک راست کارایی کاملی دارد. کنترل ها مستقیماً در جایی که مکان نما از قبل قرار دارد ظاهر می شوند و فاصله حرکت را به حداقل می رساند.
برای طراحی وب تلفن همراه، قانون فیتس توصیه می کند که بیشترین استفاده از کنترل ها را در نواحی صفحه نمایش قرار دهید که به راحتی با انگشتان کاربر قابل دسترسی است (به ویژه شست). با فرض اینکه کاربر یک گوشی هوشمند را به صورت عمودی در دست گرفته و از انگشت شست خود برای رابط استفاده می کند، نقاط داغ صفحه نمایش در دو گوشه پایینی قرار دارند. متوجه خواهید شد که اکثر برنامه های تلفن همراه کنترل های خود را به جای بالا در پایین دارند.
در طراحی وب دسکتاپ و موبایل، قانون فیتس پیشنهاد می کند که دکمه ها و کنترل ها را به اندازه ای بزرگ کنید که کاربر بتواند به راحتی روی آنها کلیک کند. دکمه‌های بزرگ‌تر میزان حرکت مکان‌نما یا انگشت‌های کاربر را کاهش می‌دهند – اما آنها را خیلی بزرگ نکنید وگرنه فضای صفحه را هدر می‌دهند.
تایپوگرافی بر آنچه کاربران در مورد شما فکر می کنند تأثیر می گذارد
–
وقتی با ملزومات طراحی وب مانند دکمه ها، نمادها و تصاویر سروکار داریم، تایپوگرافی اغلب نادیده گرفته می شود. اما به این دلیل است که تایپوگرافی ظریف تر است و آن را بسیار مفید می کند – ظاهر متن شما همچنان بر نظرات کاربران شما در مورد شما تأثیر می گذارد، حتی اگر آنها از آن آگاه نباشند.
فونت ها، اندازه و سبک متن شما نشان می دهد که چه نوع برند یا فردی هستید، از سرگرم کننده و معمولی گرفته تا جدی و حرفه ای. اما تایپوگرافی فقط بر نحوه برخورد شما تأثیر نمی گذارد. همچنین در سلسله مراتب بصری، به ویژه برای برچسب های دکمه ها و کپی CTA، قرار می گیرد.
ابتدا باید بین متن کوتاه و متن بلند تفاوت قائل شوید. متن کوتاه زمانی است که شما یک کلمه، یک خط یا یک جمله دارید که به خودی خود برجسته است. اینها عناوین صفحات متن مانند، برچسب دکمه ها، برچسب ها یا دستورالعمل های سریع هستند. متن طولانی برای خواندن است، مانند مقالات وبلاگ و کپی صفحه وب، یا هر چیزی بیش از چند جمله.
اصل اساسی طراحی وب برای تایپوگرافی استفاده از تایپوگرافی پر زرق و برق و هنری فقط برای متن های کوتاه و استفاده از تایپوگرافی ابتدایی تر است که خوانایی را برای متن طولانی در اولویت قرار می دهد. بنابراین می‌توانید فونت‌های بزرگ و رنگارنگ با تزیینات برای عنوان صفحه خود داشته باشید، اما از فونت‌های استانداردتر و رنگ‌های اصلی برای بلوک‌های طولانی متن استفاده کنید تا خواندن آنها آسان‌تر شود.
صرف نظر از این، تایپوگرافی را انتخاب کنید که نشان دهنده برند شما باشد. یکی از رایج ترین انتخاب ها بین سریف ها و سان سریف ها است. فونت‌های سریف رسمی‌تر و سخت‌گیرانه‌تر هستند، در حالی که فونت‌های sans serif دوستانه‌تر و راحت‌تر به نظر می‌رسند.
ترکیب بندی چیزهای زیادی در مورد شما می گوید
–
برنامه ریزی ترکیب صفحه یکی از اولین گام هایی است که در طراحی وب انجام می دهید و اولین تصمیم شما انتخاب بین تقارن و عدم تقارن خواهد بود. سال‌ها پیش فرض بر این بود که بیشتر وب‌سایت‌ها به صورت متقارن طراحی می‌شوند، اما اخیراً سبک‌های نامتقارن محبوبیت پیدا کرده‌اند.
اساساً، صفحات وب متقارن آسان تر اسکن می شوند، اما فاقد آن جرقه اصالت هستند، بنابراین بینندگان تمایل دارند آنها را کسل کننده ببینند. با این حال، صفحات وب نامتقارن برجسته هستند و توجه کاربر را به خود جلب می کنند، اما می توانند مرور و دیدن همه چیز را سخت تر کنند.
برای برندسازی و درک بازدیدکنندگان از شرکت شما، وب‌سایت‌های متقارن ساختار یافته‌تر و سازمان‌یافته‌تر هستند، در حالی که وب‌سایت‌های نامتقارن جذاب‌تر و هنرمندانه‌تر به نظر می‌رسند. شما می‌توانید هر کدام را که به بهترین شکل با سبک برند شما مطابقت دارد انتخاب کنید، اما اگر باید موارد پراکنده زیادی مانند محصولات موجود در یک سایت تجارت الکترونیک را به نمایش بگذارید، تقارن می‌تواند سازماندهی همه چیز را آسان‌تر کند.
به طور مشابه، هر بار که یک سایت نیاز به نمایش عناصر زیادی داشت، قالب شبکه پیش‌فرض پیش‌فرض بود. به هر حال، سطرها و ستون ها معقول ترین قالب برای گروه بندی همه این موارد با هم هستند.
با این حال، به این دلیل است که شبکه بسیار متعارف است که استفاده از قالب پراکنده تر و آشفته تر به شما کمک می کند که متمایز شوید. طراحان مدرن متوجه شدند که می توانند سایت های خود را با کمی تکان دادن ردیف ها و ستون های خود از گله جدا کنند. در حالی که این سبک می تواند برای برندهای سنتی نامطلوب باشد، اما برای برندهایی که می خواهند آوانگارد یا تند به نظر برسند، ظاهری عالی است.
سازگاری هر انتخاب طراحی را تقویت می کند
–
آخرین اما نه کم اهمیت، طراحی وب خوب سازگار است. هر بار که یک انتخاب طراحی وب هوشمند را تکرار می کنید، تأثیر آن را تقویت می کنید. به عنوان مثال، فرض کنید رنگ قرمز را به عنوان رنگ برجسته خود انتخاب کرده اید، زیرا می خواهید پرشور و خشن باشید. هر بار که از رنگ قرمز به عنوان رنگ برجسته در صفحات دیگر استفاده می کنید، حتی پرشورتر و خشن تر می شوید.
منبع : https://99designs.com/blog/web-digital/web-design-principles/
