10 прикладів по дизайну юзабіліті вашого веб-сайту

32

Будь-яка людина погодиться, що практичність і юзабіліті, є важливим аспектом дизайну веб сайту. Чи працюєте ви над портфоліо веб-сайту, інтернет-магазином або веб-додатком, зробити свої сторінки більш легким і приємним для відвідувачів є ключовим фактором. Багато дослідження були проведені протягом багатьох років для різних аспектів веб-дизайну і інтерфейсу, а результати є цінним, допомагаючи нам поліпшити нашу роботу.

Тут зібрано 10 корисних прикладів та рекомендацій, які можуть допомогти вам поліпшити юзабіліті і враження користувачів про дизайн ваших сайтів.

1. Ярлики форми краще всього працюють над полем

Дослідження встановило, що ідеальна позиція для ярликів у формах – це розташування над полями вводу даних. На багатьох формах, ярлики ставляться в лівому полі, створюючи дві колонки, це виглядає добре, але не є самим простим макетом для використання. Чому це відбувається? Тому що форма, як правило, вертикально орієнтована, тобто користувачі заповнюють форму зверху донизу. Користувач переглядає форму вниз. Простежити ярлик в поле нижче легше, ніж знайти полі праворуч від ярлика.

юзабилити сайта

Позиціонування ярлика зліва також створює ще одну проблему: як, вирівнюючи вліво або вправо, вирівняти ярлики? Ліве узгодження робить вигляд розгортання, але відключає ярлики з поля, стає важко розрізнити, які ярлики застосовуються до якого полю. Праве узгодження невдало: воно робить форми красивими, але менш розгортаються. Ярлики над полями працюють краще в більшості випадків. Дослідження також показало, що ярлик не повинен бути сміливим, хоча ця рекомендація не є переконливою.

2. Користувачі концентруються на обличчях

Люди інстинктивно помічають інших людей відразу ж, як тільки вони потрапляють в їх поле зору. На веб-сторінках, основну увагу ми звертаємо на обличчя і очі, що дає маркетологам хорошу можливість для залучення уваги. Але наше прагнення дивитися людям в обличчя і очі, це тільки початок, виявляється, що насправді ми відводимо свій погляд у бік від особи, на яку розглядаємо.

юзабилити сайта

На карті тепла видно, що погляд залучає обличчя дитини, що дивиться прямо на нас.

веб-дизайн

А тепер дитина дивиться на утримання. Зверніть увагу на збільшення числа людей, що звернули увагу на заголовок і текст.

Ось дослідження притягання погляду, яке демонструє це. Ми інстинктивно звертається до осіб, але якщо це обличчя дивиться кудись в іншу від нас сторону, ми будемо дивитися в цьому напрямку. Скористайтеся цим явищем шляхом залучення уваги користувачів до самої важливої частини вашої сторінки або реклами.

3. Якість дизайну є показником довіри

Були проведені різні дослідження, щоб з’ясувати, які чинники впливають на сприйняття людьми довіри веб-сайту.

веб-дизайн

Одним з цікавих знахідок цих досліджень є те, що користувачі дійсно судять про книгу по її обкладинці … або, скоріше, про веб-сайті конструкції. Такі елементи, як макет, послідовність, типографіка, кольори і стилі, — все це впливає, як користувачі сприймають ваш. Ваш сайт повинен мати не лише гарний зовнішній вигляд, але і правильно позиціонувати себе для вашої аудиторії.

Інші фактори, які впливають на авторитет, є: якість змісту сайту, кількість помилок, швидкість оновлення, простота використання і надійність авторів.

4. Більшість користувачів не використовують прокручування або використовують…

Дослідження Якоба Нільсена про те, скільки користувачів використовують прокручування, показало, що лише 23% відвідувачів використовують при їх першому відвідуванні веб-сайту. Це означає, що 77% відвідувачів не буде прокручувати; вони просто переглядають вміст на просторі частині сторінки, яка видна на екрані без прокручування вниз. Більше того, відсоток користувачів, які прокручують, зменшується при наступних візитах, і тільки 16% прокручує під час свого другого візиту. Ці дані свідчать, наскільки важливо, щоб ваші ключові місця містилися на видному місці, особливо на цільових сторінках.

Це не означає, що ви повинні втиснути все в верхню частину сторінки, просто ви повинні зробити максимально ефективним використання цього району. Витіснення вмісту цього району буде просто робити вміст недоступним. Коли користувач бачить занадто багато інформації, вони не знають, з чого почати пошук певної теми.

веб-дизайн

Приміром, Basecamp серйозно і грамотно використовує простір свого сайту. На відстані 768 пікселів у висоту показаний великий екран на якому розміщений підзаголовок, ціннісне пропозицію, заклик до дії, список клієнтів, відео і короткий список можливостей з зображеннями.

Це особливо важливо для домашньої сторінки, де більшість відвідувачів будуть незнайомими. Для них на відомій частині потрібно розмістити наступне:

Назва сайту,

Цінну пропозицію на веб-сайті (т. е. які вигоди вони одержать від використання ІТ),

Навігація для основних розділів сайту, які мають відношення до користувача.

Однак, звички користувачів, суттєво змінилися з тих пір. Останні дослідження доводять, що користувачам цілком комфортно з прокруткою, а в деяких ситуаціях вони готові прокрутити до нижньої частини сторінки. Багатьом користувачам зручніше з прокруткою сторінок, ніж з нумерациией, а для багатьох користувачів найбільш важлива інформація про сторінку, не обов’язково повинна розташовуються вгорі .Так що це гарна ідея розділити ваш макет на частини, для зручності перегляду, поділяючи їх з великою прогалиною.

5. Блакитний — кращий колір для посилання.

Створюючи для свого сайту унікальний дизайн, коли справа стосується практичності, згадайте про те, що інші роблять краще. Дотримуйтесь умовним позначенням, оскільки, коли люди відвідують новий веб-сайт, перш за все вони шукають інформацію в тих місцях, де вони знайшли б її на більшості інших сайтів. Вони використовують свій досвід серфінгу інших сайтів, щоб осмислити Ваш сайт. Це називається використанням шаблонів. Люди очікують певних речей, наприклад, таких, як колір посилань, розташування логотипу сайту, розташування вкладок навігації і так далі.

веб-дизайн

Якого кольору повинна бути ваші посилання? Перше міркування це контраст: посилання повинні бути темними, достатньо для контрасту з кольором фону Вашого сайту. По-друге, вони повинні виділятися від кольору тексту. І, нарешті, дослідження показують, що якщо практичність — це ваш пріоритет, дотримуйтеся синього кольору для посилань, так краще. Посилання за замовчуванням браузера синього кольору, чого люди очікують. Вибір іншого кольору зовсім не проблема, але вона може вплинути на швидкість, з якою користувачі знайдуть те, що шукають.

6. Ідеальне вікно пошуку — 27 шириною символів.

Яка ідеальна ширина повинна бути вікно пошуку? Якоб Нільсен провів дослідження залежності практичності від довжини пошукових запитів на веб-сайтах поля пошуку. Виявляється, що більшість сьогоднішніх пошукових форм занадто короткі.

Дослідження показало, що середнє вікно пошуку складає 18 символів в ширину. Дані показали, що 27% запитів були занадто довгі і не поміщається в неї. Розширення поля до 27 символів зміг би вмістити 90% запитів.

веб-дизайн

Вікно пошуку Apple занадто коротке, відрізає запит «Microsoft Office 2008».

Загалом, пошукових полів краще бути занадто широкими, ніж занадто короткими, так, щоб користувачі могли швидко переглянути, перевірити і подати запит. Ця рекомендація дуже проста, але, на жаль, занадто часто ігноруються.

7. Біле простір покращує розуміння

Більшість дизайнерів знає значення білого простору, що є порожнім простором між пунктами, картинками, кнопками та іншими елементами на цій сторінці. Білий простір приводить в порядок сторінки пунктів, даючи можливість дихати. Ми можемо також групувати пункти разом за рахунок зменшення відстані між ними та збільшення простору між ними та іншими елементами на цій сторінці. Це важливо для демонстрації відносини між елементами (наприклад, показуючи, що ця кнопка застосовується до цього безлічі пунктів) і будівництво ієрархії елементів на сторінці.

веб-дизайн

Білі простору також роблять утримання більш читабельним. Дослідження виявило, що ефективно використовувати пропуски між абзацами. Читачеві легше зосередити увагу на процесі, якщо вміст знаходиться на значній відстані один від одного.

У самому справі, розкладка клавіатури на веб-сторінці (включаючи пробіли, заголовки, відступи і цифри), не може зробити помітного впливу на продуктивність, однак впливає на ступінь задоволеності користувачів сайтом.

8. Ефективне користувальницьке тестування не повинен бути великими

Якоб Нільсен досліджував ідеальне число людей, які побачать непрактичність сайту. Тести показали, що лише п’ять користувачів виявить близько 85% всіх проблем зі своїм сайтом, а 15 користувачів знайдуть майже всі проблеми.

веб-дизайн

9. Інформаційний продукт сторінки допоможе вам виділитися

Якщо ваш сайт має сторінки продуктів, люди, купуючи в Інтернеті, безумовно, дивляться крізь них. Але багатьом сторінкам не дістає інформації навіть для відвідувачів, швидко переглядають сторінку. Це серйозна проблема, оскільки інформація про продукт допомагає людям приймати рішення про покупку. Дослідження показують, що бідна інформація про продукт становить близько 8% проблем практичності і 10% користувачів не задоволені викладеною інформацією (тобто користувач відмовляється і покидає сайт).

веб-дизайн

Надавати детальну інформацію про Вашої продукції, але не потрапити в пастку, що бомбардують користувачам занадто багатьом великою кількістю тексту. Зробіть інформацію легко усваиваивающейся. Зробіть сторінку розгортання, розбиваючи текст на більш дрібні сегменти, і використовуйте велику кількість підрозділів. Додайте багато зображень для Вашої продукції, і використовуйте правильну мову: не використовуйте жаргон, щоб відвідувачі могли зрозуміти про що йдеться.

10. Більшість користувачів не бачать рекламу

Якоб Нільсен доповів у своєму виступі, що більшість користувачів здебільшого сліпі до банерів. Якщо вони шукають фрагмент інформації на сторінці або занурені в зміст, вони не будуть відволікатися на рекламу в стороні.

Наслідком цього є не тільки те, що користувачі будуть уникати оголошень, але що вони будуть уникати всього, що виглядає як реклама, навіть якщо це не оголошення. Деякі стилі пунктів навігації можуть виглядати, як банери, так що будьте обережні з цими елементами.

веб-дизайн

Площі банерів на лівій бічній панелі Flashden насправді не реклама: це зміст посилань. Вони роблять вигляд незручно близькими до рекламних банерів і тому можуть ігноруватися деякими користувачами.

Тим не менш, оголошення, які виглядають як вміст будуть змушувати людей дивитися і клікати. Це може викликати великий дохід від реклами, але відбувається за рахунок цільових користувачів» , так як вони клацають на речі, на їх думку, справжнього змісту. Перед тим, як йти по цьому шляху, розгляньте компроміс: короткострокові доходи порівняно з терміном «довгострокового довіри».

Переклад і редакція: Ріг Віктор і Андрій Бернацький.

Будемо сподіватися, що ці десять прикладів з юзабіліті дизана вашого веб-сайту, допоможуть вам створювати зручні та якісні проекти.

E-mail:[email protected]

Проект webformyself.com — Як створити свій сайт. Основи самостійного сайтобудування