- Спочатку "так"
- 2. Створіть просту навігацію
- 3. Змініть колір відкритих посилань
- 4. Зробіть сторінки читабельнее
- 5. Поставтеся до контенту серйозно
- 6. Перевірте сайт на помилки
- 7. Скоротіть кількість варіантів вибору
- 8. Залучіть користувачів в скролінг
- 9. Підписуйте кнопки відповідно до їх функціями
- 10. Речі повинні виглядати відповідно до своєї функції
- 11. Зробіть сайт чуйним
- 12. Протестуйте дизайн
- А тепер "немає"
- 2. Не відкривайте внутрішню посилання в новій вкладці
- 3. Не використовуйте занадто багато шрифтів
- 4. Не використовуйте занадто багато квітів
- 5. Не показуйте автоматичні спливаючі вікна занадто рано
- 6. Не використовуйте нещирі фотографії людей
- 7. Не дозволяйте рекламі вкрасти увагу
- 8. Не тримайте на екрані фонову музику і відео зі звуком
- 9. Не порушуйте скролінг
- 10. Не використовуйте горизонтальну прокрутку.
- 11. Не жертвуйте зручністю заради краси
- 12. Не використовуйте миготливий текст і рекламу
- підсумок
При створенні дизайну головним пріоритетом повинно бути створення корисного та приємного досвіду взаємодії. Щоб спростити цю задачу для початківців, я створив простий список "так" і "ні", про які варто пам'ятати при створенні вашого наступного веб-дизайну.
Спочатку "так"
1. Зберігайте інтерфейс послідовним
Один з головних принципів доброго UX - це зберігати інтерфейс однорідним протягом усього проекту. Сталість навігації, кольорової палітри, шрифтів і стилю може справити позитивний вплив на UX.
Порада: Спочатку зробіть дизайн просто зручним для використання. Постійність - це двосічний меч. Якщо сайт спочатку не володіє хорошим дизайном, сталість його частин призведе до появи сайту з повністю поганим дизайном.
2. Створіть просту навігацію
Навігація - це наріжний камінь зручності використання. Гарна навігація на вашому сайті життєво необхідна, щоб відвідувачі знаходили те, що вони шукають.
Поради:
- Зробіть високорівневу навігацію для основних варіантів вибору, яких повинно бути максимум 7 . Для інших категорій зробіть субнавігацію.
- Використовуйте зрозумілі позначення варіантів навігації. Використовуйте в меню знайомі слова, щоб допомогти користувачам їх зрозуміти.
- Скоротіть користувачам час, необхідний для досягнення мети. Навігація повинна приводити користувачів до потрібного місця за мінімальну кількість кліків. При створенні сайту керуйтеся правилом трьох кліків , В якому говориться, що відвідувачі повинні здійснювати не більше трьох кліків.
- Увімкніть навігаційне меню і контакти в підвал сайту.
3. Змініть колір відкритих посилань
Посилання грають важливу роль в процесі навігації. Якщо посилання не змінюють колір, користувачі будуть відвідувати одні й ті ж сторінки кілька разів.
4. Зробіть сторінки читабельнее
При відвідуванні вашого сайту користувачі найімовірніше будуть швидко прочитувати сторінку по діагоналі, а не читати її цілком. Наприклад, якщо відвідувачі захочуть знайти конкретний текст, вони швидко пробіжать поглядом сторінку поки не знайдуть, чого хочуть. Ви можете допомогти їм, створивши хорошу візуальну ієрархію.
Поради:
- Уникайте стін тексту. Групуйте інформацію, щоб її було простіше засвоїти. Розбивайте тексти заголовками або маркерами.
- Виділіть важливі елементи. Форми входу або заклики до дії повинні бути видні відразу. Ви можете підкреслити елементи, використовуючи різні кольори.
- Врахуйте природні патерни читання. Люди в західних країнах читають зліва направо і зверху вниз. Сайти з хорошим дизайном зазвичай представляють контент у формі букв F або Z.
- Використовуйте сітку, яка зробить читання і розуміння інформації простіше.
5. Поставтеся до контенту серйозно
Текст на сайті так само важливий, як і дизайн. Понад 95% інформації в інтернеті міститься в формі тексту. Навіть хороший дизайн сайту марний без хорошого змісту, і робота дизайнера полягає в тому, щоб переконатися, що дизайн доповнює вміст.
Поради:
- Переконайтеся, що текст на сайті релевантний. Нерелевантні текст не несе ніякої цінності і може заплутати користувачів. Прагніть створити текст, в якому для відвідувачів буде цінна кожна строчка.
- Уникайте жаргонізмів. Інформація на сайті повинна бути максимально простий для розуміння будь-якій людині.
6. Перевірте сайт на помилки
Відмінну роботу легко зіпсувати маленької помилкою. Перевірте сайт на ці поширені проблеми:
- Пошукайте мертві посилання. Користувачі можуть розлютитися, коли вони клацають на посилання і отримають помилку 404.
- Перевірте сайт на помилки.
- Переконайтеся, що весь медіаконтент завантажується нормально.
7. Скоротіть кількість варіантів вибору
Кількість варіантів впливає на рішення людей: чим більше у людей вибору, тим менше дій вони роблять. Щоб збільшити шанси на взаємодію, скоротіть кількість варіантів вибору.
8. Залучіть користувачів в скролінг
При скроллинге сторінки користувачі інвестують у взаємодію більше часу, і це підвищує шанс конверсії. Хоча люди починають скролл сторінку відразу після її завантаження, верхня частина сайту все одно дуже важлива, тому що створює перше враження і встановлює очікування у користувачів.
Порада: верхня частина сторінки встановлює очікування. Якщо в ній розташовано якісний зміст, користувачі захочуть побачити більше.
9. Підписуйте кнопки відповідно до їх функціями
Користувачам комфортніше знати, яку дію робить кнопка. Розмиті позначення на кшталт "Надати" або підписи із прикладів нижче не надають достатню кількість інформації про дію.
Не змушуйте людей замислюватися, що робить елемент.
10. Речі повинні виглядати відповідно до своєї функції
Для кнопок і інших інтерактивних елементів дизайн повинен повідомляти можливість дії. Форма слідує за функцією: зовнішній вигляд об'єкта повинен повідомляти користувачам, як його використовувати. Якщо підкреслені слова не є посиланнями, а елементи з прямокутним фоном - кнопками, користувачі заплутаються.
11. Зробіть сайт чуйним
Сьогодні веб-браузери доступні більш ніж на 5 мільярдах пристроїв. Це означає, що користувачі будуть дивитися ваш сайт з комп'ютера, планшета, телефону, плеєра або навіть з годин. Ви повинні переконатися, що інформація буде відображатися коректно на екранах різних розмірів.
Поради:
- Зробіть ключову інформацію доступною. З мобільного телефону користувачі шукають конкретну інформацію, і ви повинні зробити так, щоб її не можна було пропустити.
- Зіставте розмір елементів з екраном. Наприклад, для смартфонів розмір кнопок повинен бути більше.
12. Протестуйте дизайн
Ви можете думати, що створили відмінний дизайн, але без відгуків від реальних користувачів ви не будете знати, наскільки він ефективний. Навіть якщо ви можете попросити одного або двох користувачів подивитися ваш сайт і поділитися своїми думками, зробіть це, тому що ви отримаєте корисну інформацію, яку не можна знайти іншим способом.
Порада: дивіться на аналітику. Веб-аналітика - це потужні інструменти, які допоможуть вам знайти розділи сайту, до яких потрібно додаткову увагу.
А тепер "немає"
1. Не змушуйте користувачів чекати завантаження вмісту
Час завантаження критично важливо для користувацького досвіду. З прогресом технологій ми стаємо більш нетерплячими, і сьогодні 47% користувачів очікує завантаження сторінки за дві секунди або менше. В іншому випадку відвідувачі можуть розлютитися і піти з сайту.
Поради:
- Не показуйте під час завантаження порожніх сторінок. Якщо завантаження займе якийсь час, покажіть частина контенту з будь-яким індикатором завантаження.
- Оптимізуйте зображення. Великі фонові зображення можуть зажадати багато часу на завантаження. Ви можете скоротити цей час, оптимізував зображення .
- Виміряйте продуктивність сайту. Інструменти PageSpeed Insights і Think With Google не тільки допоможуть вам знайти проблеми з продуктивністю, але і запропонують можливі рішення.
2. Не відкривайте внутрішню посилання в новій вкладці
Користувачі очікують від зовнішніх і внутрішніх посилань різного поведінки. Всі внутрішні посилання повинні відкриватися в одній вкладці - так ви дозволите користувачам використовувати кнопку "назад". Якщо ви вирішите відкривати зовнішні посилання в новому вікні, створіть попередження, яке з'явиться перед відкриттям нового вікна або нової вкладки. Це може бути текст "Відкриється в новому вікні", розміщений поруч з посиланням.
3. Не використовуйте занадто багато шрифтів
На початку створення сайту існує спокуса використовувати безліч різних шрифтів. Але цього спокуси краще уникати. Загальна рекомендація - використовуйте максимум три шрифту в трьох розмірах. При створенні сайту думайте, як посилити текст за допомогою ваги, а не за допомогою різних шрифтів.
4. Не використовуйте занадто багато квітів
Як і у випадку зі шрифтами, в дизайні краще не використовувати занадто багато квітів. Застосування кольорів пов'язано з пошуком балансу, і чим більше у вас квітів, тим складніше знайти баланс. Завжди краще обмежити палітру декількома квітами і зберігати її сталість на всьому сайті, тільки якщо ви не хочете виділити важливу секцію за допомогою кольору.
Порада: подумайте, які емоції ви хочете викликати у відвідувачів. Це допоможе вам вибрати потрібну колірну палітру. Наприклад, якщо ви просуваєте продукти для медитації, ви не захочете використовувати на сайті яскраві кольори.
5. Не показуйте автоматичні спливаючі вікна занадто рано
Багато сайтів показують вікно з проханням підписатися відразу при вході на сторінку. Це одна з найбільш дратівливих речей для відвідувача сайту. Самі по собі спливаючі вікна переривають досвід взаємодії і зазвичай використовуються для рекламних оголошень, тому користувачі часто закривають їх до того, як прочитають вміст.
Перша річ, яку користувачі бачать на сайті The New York Times
Порада: підберіть момент. Перед тим, як попросити користувачів щось зробити, покажіть їм вашу цінність. Вікно можна показати користувачеві в кінці сторінки після прочитання вмісту повністю.
6. Не використовуйте нещирі фотографії людей
Зображення з обличчями людей - це ефективний спосіб залучити користувачів. Коли ми бачимо інших людей, ми відчуваємо, як ніби взаємодіємо з ними, а не просто використовуємо продукт. Однак багато сайтів занадто часто використовують нещирі фотографії для "створення довіри". тести показують, що чисто декоративні фото рідко додають цінності дизайну і шкодять користувача досвіду.
7. Не дозволяйте рекламі вкрасти увагу
Занадто багато рекламних оголошень на сторінці може відвернути увагу від головного контенту і ускладнити досягнення мети для користувачів. Це може привести до сенсорної перевантаження у користувачів. Більш того, користувачі зазвичай ігнорують все, що схоже на рекламу, - це явище відоме як "банерна сліпота".
8. Не тримайте на екрані фонову музику і відео зі звуком
Фонова музика може спрацювати в деяких випадках, але зазвичай це погана ідея. Несподівана музика може дратувати чи навіть викликати проблеми: люди можуть заходити на ваш сайт на роботі, в публічному місці або близько сплячих людей. Як і фонова музика, автоматичне відтворення відео буде дратувати користувачів.
Порада: дайте користувачам контроль. Встановіть музику на беззвучний режим за замовчуванням, але дозвольте користувачам включати її при натисканні - створіть кнопки play і pause для аудіоконтенту.
Відео в Facebook відтворюється автоматично, але без звуку
9. Не порушуйте скролінг
Маніпуляції з прокруткою сторінки дратують багатьох користувачів, тому що позбавляють їх контролю і роблять поведінку сторінки непередбачуваним. Уникайте цього при створенні сайту і дозвольте користувачам контролювати свій рух по сторінці.
Сторінка входу в Tumblr порушує скролінг
10. Не використовуйте горизонтальну прокрутку.
Деякі дизайнери використовують на сторінках горизонтальний скролінг. На жаль, це взаємодія найчастіше отримує негативні відгуки від користувачів. Зазвичай користувачі не знають, що можуть виявити контент за допомогою горизонтальної прокрутки. В результаті вони можуть проігнорувати частину контенту.
Його користувачі не знають, що можуть скролл горизонтально, особливо якщо у них немає візуальних підказок
11. Не жертвуйте зручністю заради краси
Дизайн не повинен порушувати здатність користувача сприймати вміст сайту. Типовий приклад - використання світло-сірого тексту на світлому тлі. Краще уникати використання завантаженого фону або низької контрастності.
Порада: перевірте показник контрастності. Інструменти начебто Color Contrast Checker допоможе вам перевірити контраст кольорів за кілька кліків.
12. Не використовуйте миготливий текст і рекламу
Спалахи та мерехтіння можуть спровокувати напади у деяких людей і будуть дратувати інших користувачів.
підсумок
При взаємодії з сайтами і додатками люди очікують відмінного користувацького досвіду. Якщо ви не можете задовольнити їхні потреби, вони підуть до ваших конкурентів. При прийнятті будь-якого дизайнерського рішення ви повинні думати про те, що буде краще для відвідувачів.
Якщо ви знайшли друкарську помилку - виділіть її та натисніть Ctrl + Enter! Для зв'язку з нами ви можете використовувати [email protected] .
