طراحی وب سایت, وبسایت و پروفایل شخصی داود جمیری

9 راهنما و بهترین روش برای طراحی وب و قابلیت استفاده استثنایی

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

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

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

Free Workbook: How to Plan a Successful Website Redesign

1 سادگی

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

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

از نظر قابلیت استفاده و UX ، سادگی بهترین دوست شماست. اگر تمام عناصر لازم صفحه را داشته باشید ، ساده است که بیش از حد شوید. شما می توانید این اصل را به انواع مختلف ، مانند: استفاده کنید

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

در اینجا یک مثال عالی از طراحی صفحه اصلی ساده اما موثر از HERoines Inc وجود دارد: examble of website design on the website for HERoines Inc

منبع تصویر

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

سلسله مراتب بصری که کاملاً به اصل سادگی گره خورده است ، به معنای تنظیم و سازماندهی عناصر وب سایت است به طوری که بازدید کنندگان به طور طبیعی ابتدا به سمت مهمترین عناصر گرایش پیدا می کنند.

به یاد داشته باشید ، وقتی صحبت از بهینه سازی قابلیت استفاده و UX می شود ، هدف این است که بازدیدکنندگان را به سمت انجام یک عمل دلخواه سوق دهید ، اما به روشی طبیعی و لذت بخش. با تنظیم موقعیت ، رنگ یا اندازه عناصر خاص ، می توانید سایت خود را به گونه ای ساختار بندی کنید که ابتدا بینندگان به سمت این عناصر جذب شوند.

در مثال زیر از Spotify ، می توانید عنوان اصلی “دریافت 3 ماه حق بیمه رایگان “با اندازه و موقعیت صفحه در بالای سلسله مراتب بصری قرار دارد. این کار قبل از هر چیز دیگری توجه شما را به سمت ماموریت آنها جلب می کند. به دنبال آن CTA “دریافت 3 ماهه رایگان” انجام می شود ، که اقدام به عمل می آورد. کاربران می توانند روی این CTA کلیک کنند یا برای کارهای بیشتر موارد منوی بالا را اسکن کنند.

a web design example on Spotify.com

منبع تصویر

3 قابلیت پیمایش

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

در اینجا چند نکته برای بهینه سازی پیمایش سایت خود آورده شده است:

  • ساختار ناوبری اصلی خود را ساده (و نزدیک بالای صفحه خود) نگه دارید.
  • پیمایش را در پایین صفحه سایت خود بگنجانید.
  • استفاده از آرد سوخاری را در هر صفحه (به جز صفحه اصلی خود) در نظر بگیرید بنابراین کاربران مسیر ناوبری خود را به خاطر می آورند.
  • یک نوار جستجو در نزدیکی بالای سایت خود قرار دهید تا بازدیدکنندگان بتوانند با کلمات کلیدی جستجو کنند.
  • گزینه های ناوبری زیادی در هر صفحه ارائه نکنید. باز هم ، سادگی!
  • پیوندها را در کپی صفحه خود بگنجانید و مشخص کنید که این پیوندها به کجا می روند.
  • کاربران را بیش از حد عمیق حفاری نکنید. سعی کنید یک نقشه wireframe از همه صفحات سایت خود را که مانند pyramid: صفحه اصلی شما در بالا است و هر صفحه پیوند داده شده از لایه قبلی لایه بعدی را تشکیل می دهد. در بیشتر موارد ، بهتر است نقشه خود را بیش از سه سطح عمیق نگه دارید. به عنوان مثال نقشه سایت HubSpot را در نظر بگیرید.
site map for HubSpot.com

منبع تصویر

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

این ما را به خوبی به اصل بعدی خود رهنمون می کند …

4 سازگاری

علاوه بر حفظ ناوبری شما ، ظاهر و احساس سایت شما باید در تمام صفحات سایت شما یکسان باشد. زمینه ها ، طرح های رنگی ، حروف چاپی و حتی لحن نوشتاری شما همه مواردی هستند که سازگاری تأثیر مثبتی بر قابلیت استفاده و UX دارد.

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

در مثال زیر می توانید ببینید که Airbnb برای همه صفحات” راهنما “از همان طرح استفاده می کند ، این یک روش معمول است. تصور کنید اگر هر صفحه “راهنما” طرح منحصر به فرد خود را داشته باشد ، از نظر بازدید کننده چگونه خواهد بود. شانه بالا انداختن شانه احتمالاً زیاد خواهد بود.

a help page on Airbnb.com

منبع تصویر

5. مسئولیت پذیری

مطابق با Statista ، 48٪ از صفحه نماهای جهانی مربوط به دستگاه های همراه مانند تلفن های هوشمند و تبلت ها بود. و بر اساس تحقیقات ما ، 93٪ افراد وب سایتی را ترک کرده اند زیرا به درستی بر روی دستگاه آنها نمایش داده نمی شود.

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

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

در نهایت ، مهمتر از اینکه در آن دستگاه ها یکسان به نظر برسید ، ارائه یک تجربه عالی در دستگاه های مختلف است.

an illustration of a responsive web page on different devices

منبع تصویر

در کنار سازگاری با موبایل ، ارزش شما را دارد که آزمایش سازگاری مرورگر وب سایت خود را انجام دهید. به احتمال زیاد ، شما سایت خود را فقط در یک مرورگر وب مشاهده کرده اید ، اعم از Google Chrome ، Safari ، Firefox یا موارد دیگر.

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

6. قابلیت دسترسی

هدف دسترسی به وب ایجاد وب سایتی است که هر کسی می تواند از آن استفاده کند ، از جمله افراد دارای معلولیت یا محدودیت هایی که بر تجربه مرور آنها تأثیر می گذارد. به عنوان یک طراح وب سایت ، وظیفه شماست که در برنامه UX خود به این کاربران فکر کنید.

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

باشند

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

برای تعمیق بیشتر در این مبحث ، به مراجعه کنید به راهنمای نهایی دسترسی به وب .

7. متعارف

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

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

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

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

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

8. اعتبار

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

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

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

در اینجا مثالی از صفحه قیمت گذاری موثر از وب سایت Box وجود دارد: pricing page for Box.com

منبع تصویر

9. مرکزیت کاربر

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

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

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

در اینجا چند ابزار تست کاربر برای شروع وجود دارد:

  • رتبه بندی وب سایت : ابزار رایگان ما وب سایت شما را ارزیابی می کند بر اساس چندین فاکتور: موبایل ، طراحی ، عملکرد ، سئو و امنیت. سپس پیشنهادهای متناسب با بهبود را ارائه می دهد. شما می توانید در پست اختصاصی وبلاگ ما درباره وب سایت Grader بیشتر بدانید . Crazy Egg : پیگیری چندین دامنه در یک حساب و اطلاعات مربوط به عملکرد سایت خود را با استفاده از چهار ابزار مختلف اطلاعاتی – نقشه حرارتی ، نقشه پیمایش ، پوشش و کنیا – کشف کنید.
  • Loop11 : از این ابزار برای ایجاد آسان تست های کاربردی استفاده کنید – حتی اگر این کار را نکنید شما هیچ تجربه HTML ندارید.
  • کاربر مست است : برای مست شدن و بررسی سایت خود به ریچارد لیتاوئر پرداخت کنید. باور نمی کنید؟ ما آن را امتحان کردیم .

برای حتی گزینه های مفید تر ، به لیست بهترین کاربر مراجعه کنید ابزار آزمایش .

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

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

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

در حالت ایده آل ، شما یک نوع متن می خواهید:

  • آسان خوانده می شود
  • اسکن آسان است
  • برای همه کاربران قابل دسترسی است
  • خوانا در چندین دستگاه و اندازه صفحه

همچنین شما می خواهید با ظاهر و احساس برند شما مطابقت داشته باشد. به عنوان مثال ، مارک تجاری لوکس باربری آرم خود را تازه کرد برای اولین بار در 20 سال گذشته در سال 2018. این نوع متن serif قدیمی را با یک نوع حروف درشت پر از کلاه ، sans serif جایگزین کرد و نشان شوالیه را کنار گذاشت. نتیجه یک آرم ساده تر و مدرن تر است که در هر صفحه ای آسان تر خوانده می شود – و نشان دهنده تغییرات شفافیت و جذابیت نسل جوان در شرکت است.

Side by side comparison of Burberrys old and new logo, which uses all caps sans serif font

منبع تصویر

2. یک طرح رنگی متناسب با مارک تجاری خود انتخاب کنید.

مانند تایپوگرافی ، رنگ می تواند نه تنها در درک و تعامل با محتوا ، بلکه در احساس ما در مورد آن تأثیر بگذارد. بنابراین رنگ بندی شما باید همان جعبه های تایپوگرافی وب سایت شما را بررسی کند. باید:

  • هویت برند شما را تقویت کنید
  • خواندن و پیمایش سایت شما را آسان می کند
  • احساسات را برانگیخته
  • خوب به نظر برسید

برای مثال Buzzfeed از رنگهای اصلی زرد و قرمز استفاده می کند تا توجه کاربران را به خود جلب کرده و آنها را در مورد مطالب هیجان زده کند. استفاده از رنگ اصلی آبی – که با اعتماد همراه است – به طور انحصاری برای پیوندها و دکمه های CTA محفوظ است. هر دو احساس برای ایجاد یک سایت رسانه ای ایده آل است.

Following website design best practices, Buzzfeed color palette evokes excitement and trust

Image Source

3 Use white space to break up text and other elements.

Whitespace refers to the negative areas in any composition. Whitespace provides users with visual breaks as they process a website’s design or content, which is not only aesthetically pleasing. By minimizing distractions, whitespace makes it easier for users to focus, process information, and understand what it’s important.

That means you can use whitespace to avoid causing information overload or analysis paralysis — and to emphasize important elements on the page. This might help persuade users to take a specific action, like sign up for a newsletter, shop your latest collection, and more.

For example, Eb & flow Yoga Studio uses whitespace to lead users toward a specific action: to sign up for three weeks of classes. Notice that whitespace doesn’t mean the absence of color or imagery. Instead, it means that every element on the page is positioned strategically, with lots of space in between, to avoid overwhelming or confusing visitors.

Eb & flow Yoga Studio follows the website design best practice of using whitespace to lead users to click on a CTA

Image Source

4 Use texture to add personality and depth.

Resembling a three-dimensional, tactile surface, web textures aim to replicate the physical sensation of touch with another sensation — sight. They’re a great design alternative to solid color backgrounds, particularly if you want to add personality and depth to your site.

Take a look at the texture on the homepage for the Santa Barbara-based restaurant Mony’s Tacos below. It looks like chalk drawn on a blackboard, doesn’t it? I don’t know about you but I can almost feel the chalk on my fingers just from looking at it. It’s the perfect look for a restaurant that aims to be California’s preferred Funk Zone choice for Mexican delights.

Monys homepage follows the website design best practice of using web texture to resemble chalk drawn on a blackboard

Image Source

5. Add images to engage and inform readers.

Striking a balance between text and images is essential in website design. Incorporating visuals can make your content more informative, engaging, and memorable. You’ve probably heard the statistics that people remember only 20% of what they read, but 80% of what they see? While the exact percentages are debated, the basic idea isn’t. It’s easier for some people to learn and process information visually.

Here’s a unique example of breaking up text with images from a cosmetic company’s website. This shows how endless the possibilities of incorporating imagery into your website design are.

Maggie Rose breaks up text with images in a masterful example of the website design best practice

Image Source

6. Simplify your navigation.

Navigation is one of the most important design elements on a website. It impacts whether visitors arrive on your homepage and browse, or click the “Back” button. That’s why it’s important to keep it as simple as possible.

Many websites opt for a horizontal navigation bar. This navigation style lists the major pages side by side and is placed in the website header.

Take the navigation bar on Blavity as an example. The sections featured include three content categories — “News,” “Op-Eds,” and “Lifestyle” — as well as links to their submission page and sign-up page. This provides visitors with easy access to the pages they’re likely looking for. Other nav items are placed in a dropdown menu labelled “More” so they’re still easy to find but not cluttered into the top-level navigation. Finally, the navigation bar is sticky so visitors won’t have to scroll up and down the page to browse the site.

Sticky horizontal navigation bar on Blavity offers an example of a website design best practice

Image Source

7. Make your CTAs stand out.

CTAs are elements on a web page, advertisement, or another piece of content that encourages the audience to do something. The call to action could be to sign up, subscribe, start a free trial, or learn more, among many others.

You want your CTAs to pop in your website design. To make that happen, consider how you’re using color as well as other elements like background color, surrounding images, and surrounding text.

Square provides an excellent call-to-action example. Using a single image to showcase the simplicity of using their product, Square uses bold typography to also show how unique and future-oriented their product is. Against this dramatic backdrop, the blue “Get Started” CTA awaits your click.

Square uses color and unique posititioning to make their CTA pop in their website designImage Source

8. Optimize for mobile.

We’ve already discussed how important it is for your website to be responsive. But since mobile devices accounted for 59% of organic search engine visits in 2021, we’re doubling down on how important it is to design your website to be mobile-friendly. That might mean altering or removing some elements that would clutter smaller screen sizes or negatively impact load time.

For an example of one of the best mobile website designs, compare Etsy’s homepage on desktop vs mobile. On desktop, you’ll see a navbar with categories. Hovering over each category will reveal a dropdown menu.

Etsy homepage on desktop

Image Source

On mobile, this collapses behind a hamburger button, which improves the appearance and performance of the mobile site. You’ll also notice that the images are larger — perfect for tapping with your finger on a mobile screen.

image0

9. Limit the options presented to users.

According to Hick’s Law, increasing the number and complexity of choices will increase the time it takes for a person to make a decision. This is bad news in website design. If a website visitor is presented with too many options, they might get frustrated and bounce — or they might pick an option you don’t want, like abandoning their cart. That’s why it’s important to limit the number of options presented to a user.

For example, a visitor landing on the homepage of Shawn Michelle’s Ice Cream will have three options: to learn more about the company, the flavors, or the ingredients. But instead of presenting all three options at the same time, they are presented one at a time in a slider. This is a great example of implementing Hick’s Law in UX design. Shawn Michelles Ice Cream homepage uses an image slider to present CTAs one at a time

Image Source

Now we understand the principles and best practices that should guide you throughout the design process. In the next section, let’s run down the essential page elements that you should strongly consider including in your design plan.

1 Header and Footer

The header and footer are a staple of just about every modern website. Try to include them on most of your pages, from your homepage, to your blog posts, and even your “No results found” page.

Your header should contain your branding in the form of a logo and organization name, menu navigation, and maybe a CTA, and/or a search bar if well-spaced and minimal. On the other end, your footer is where many users will instinctively scroll for essential information. In your footer, place contact information, a signup form, links to your common pages, legal and privacy policies, links to translated versions of your site, and social media links.

2. Menu Navigation

Whether it’s a list of links across the header or a tidy and compact hamburger button in the corner, every website needs a guide for navigation positioned at the top of at least your homepage and other important pages. A good menu limits the number of clicks to reach any part of your website to just a few.

To reduce clutter, you might consider making some or all menu options a dropdown menu with links within it, as can be seen on HubSpot’s homepage.

homepage for hubspot.com

3 Search Bar

In addition to menu navigation, strongly consider placing a search bar at the top of your pages, so users can browse your site for content by keyword. If incorporating this functionality, make sure your results are relevant, forgiving of typos, and capable of approximate keyword matching. Most of us use a high-quality search engine every day, be it Google, Amazon, YouTube, or elsewhere. These all set the standard for your own site search.

4 Branding

Remember the conventions we’ve discussed? One that you see practically everywhere is a logo in the top left corner. On first landing, many visitors’ eyes will instinctively shift to this region to check they’re in the right place. Don’t leave them hanging.

To reinforce this notion, incorporate your company branding into every element you add, piece of content you post, and color scheme you create. That’s why we recommend establishing brand guidelines if you haven’t already — check out our style guide for a reference.

5. Color Palette

Color choice plays a major role in your site’s usability and UX as well. This decision tends to be more subjective than other requirements in this list. But, like everything else we’ve discussed, try to simplify — limit your color selection to 3-4 prominent colors at most.

Starting a color palette from scratch can be surprisingly difficult the first time. We seem to intuitively pick up on which colors work well together and which don’t, but we stumble when trying to pick from the infinite combinations available.

The solution? Try a color palette that’s been shown to work on other websites. Take influence from your favorite sites, and see our list of our favorite website color schemes to get started.

6. Headings

Headings are key to establishing the visual hierarchy we discussed earlier, especially on text-heavy pages. As users skim your pages what you need, a clear and to-the-point heading alerts readers to stop scrolling after finding what they want. Use only as many headings as there are distinct sections of your page, as too much blown-up and bolded text will dampen this effect.

7. Clear Labels

Whenever a user takes an action on your website, it must be obvious exactly what they’re doing and/or where they’re going. All buttons should have clear text or an icon to precisely and concisely signal their purpose. The same goes for in-text links and widgets (simple interactive elements, like dropdowns and text forms).

For example, a button linking to a pricing page should just read “Pricing” — anything beyond that (e.g., “See our prices”, “Check out the pricing page for a deal”) is superfluous. A search bar/button only needs a search glass icon (🔍), and perhaps also the word “Search”, to denote its purpose.

User testing can be a major help here. While you yourself know what all of your interactive page elements do, the same can’t be said for a new user. Testing will give valuable insight into what users think your labels mean beyond your own perspective.

8. Visuals and Media

When incorporating static images, gifs, videos, and other media into your pages, remember to be consistent and intentional in your choices. These elements will draw attention over most other text and will likely stay in users’ minds, so choose wisely.

Here’s just one example of effective media on a homepage. Notice how every image complements the page aesthetic and supports the offer of personalized fitness training with results.

an example of web design guidelines used on a web page for a personal training gym-min

Image Source

Also, all images and videos should be optimized for search engines and include descriptive alt text for accessibility.

9. Calls to Action (CTAs)

Having a pleasing website is great, but how do you know whether your visitors are actually doing what you want? Are they engaging with your content? This is where CTAs come into play.

A CTA is any page element that prompts user action. The action could be adding a product to a card, downloading a content offer, or signing up for an email list. Make your CTA elements prominent in the visual hierarchy (remember our Spotify example), but not intrusive or distracting like many click-through ads tend to be.

If you need ideas for sleek CTAs that drive more conversions, see our CTA examples list.

10. Whitespace

As mentioned above, sometimes it’s about the elements you don’t include. After reading these guidelines and requirements, you may feel tempted to stuff your pages with all the bits and bobs needed for a flawless UX. Don’t forget that your viewers need room to digest all this new info, so give your elements room to breathe.

But, how much whitespace should you have? That’s another personal call, and varies from site to site. So, user testing is handy here as well. What are people focusing on? Do they feel overwhelmed with the density of content? Once again, it all ties back to our first guideline, simplicity.

Design that Puts Users First

Indeed, web design is largely subjective — your website’s look and experience isn’t going to please everyone. However, there are also tried-and-true UX principles that, when carefully considered and incorporated, help visitors feel more at home.

According to Amazon Web Services, 88% of website visitors are less likely to return to a website after a poor experience. And how could you blame them? We’ve surely all been there.

So, as a final bit of usability/UX wisdom, start caring more! Imagine yourself into the shoes (or, more accurately, browser windows) of your visitors, and keep them in mind every step of the design process.

Blog - Website Redesign Workbook Guide [List-Based]

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *