Популярність веб-сайту залежить не тільки від якості контенту, але й від того, наскільки користувачам зручно з ним працювати. І ось тут на допомогу приходить дизайн інтерфейсу користувача веб-сайту. У цій статті ми покажемо вам кілька прикладів дизайну інтерфейсу користувача та поговоримо про те, які елементи є важливими для гарного дизайну інтерфейсу користувача веб-сайту.
Як ми можемо отримати доступ до якості інтерфейсу користувача?
Щоб отримати доступ до якості інтерфейсу користувача, ви можете використовувати принцип MAYA, представлений промисловим дизайнером Реймондом Лоуі. MAYA означає «Найсучасніший, але прийнятний». На практиці це означає, що інтерфейс має бути інноваційним, але достатньо зрозумілим, щоб не заплутувати користувачів. Ви можете перевірити, чи правильно реалізовано принцип MAYA, спираючись на такі критерії:
- Використання стандартних метафор. Дії, які користувачі можуть виконувати на вашому веб-сайті, мають відповідати реальним (наприклад, скролінг нагадує про гортання сторінок, а архівація — про складання паперових документів на полицю чи в ящик).
- Доступність традиційних функцій. Звичайно, ви вирішуєте, наскільки інноваційним чи традиційним буде ваш інтерфейс на основі технічних навичок цільової аудиторії. Але в будь-якому випадку він повинен містити знайомі елементи, які допомагають користувачам почуватися комфортніше.
- Жодних непотрібних кроків у стандартних процесах. Ускладнюючи стандартні процедури, ви лише дратуєте своїх користувачів.
Найкращі приклади веб-дизайну інтерфейсу користувача не лише допомагають покращити користувальницький досвід, а також виграти численні нагороди, такі як Webby Awards. Нижче ми докладніше розглянемо три приклади дизайну інтерфейсу користувача.
Приклади веб-інтерфейсу користувача
MailChimp
Відомий сервіс електронного маркетингу є чудовим прикладом створення сервісу з урахуванням принципів дизайну інтерфейсу користувача. Після реєстрації новий користувач не бачить порожнього місця (оскільки він або вона ще не створив жодної кампанії), але отримує коротку підказку, що пояснює, що таке кампанія, що натиснути, щоб її створити, і синю стрілку, що вказує на відповідну кнопку:
Розширені параметри показані тим, хто хоче мати більше гнучкості в так званому меню на вимогу:
Шаблони для кампанії відображаються як схематичний попередній перегляд, і користувачі можуть визначити потрібний, навіть не читаючи описи:
Шаблони редагуються в редакторі, який використовує значки, стандартні для такого роду інструментів, і блоки перетягування, які пояснюються одразу.
Також доступні всі елементи, важливі для тестування дизайну та збереження шаблону. Особлива увага приділяється інформуванню користувача про процедуру збереження: «Ми будемо автоматично зберігати кожні 20 секунд», щоб він або вона знав, що їхні дані в безпеці, і не потрібно постійно натискати кнопку «Зберегти».
Меню внизу сторінки показує користувачеві, на якому етапі створення кампанії він або вона, і дозволяє повернутися до будь-якого з попередніх кроків, якщо їх потрібно змінити:
Коли користувач робить помилку під час створення кампанії, він або вона побачить повідомлення про те, що щось пішло не так:
І далі система пропонує, як це виправити, і навіть надає кнопку, щоб зробити це одразу — наскільки це розумно?
Після того, як користувач виконав деякі кроки з підготовки кампанії, у посібнику з початку роботи відображається «Гарно! знаки поруч із відповідними кроками та перекреслює їх.
MailChimp, безперечно, є чудовим зразком плоского дизайну інтерфейсу користувача.
Hootsuite
Популярний сервіс для керування соціальними мережами використовує фіксоване меню для своєї цільової сторінки та пропонує три яскраві кнопки для реєстрації в соціальних мережах, які привертають увагу:
Але якщо користувач віддає перевагу зареєструватися за адресою електронної пошти після натискання «або створити новий обліковий запис», він або вона не перейде на нову сторінку — система просто відобразить вікно з ілюстрованими полями:
Hootsuite заохочує користувачів заповнити дані та почати користуватися службою, показуючи інформацію про те, скільки часу вони можуть заощадити:
Після реєстрації та додавання соціальних мереж користувачам буде показано інтерактивний посібник із початку роботи:
Що важливо, його можна пропустити, натиснувши Пропустити огляд:
У Hooutsuit меню з піктограмами ліворуч можна відкрити, щоб мати доступ до інших розділи, як-от налаштування та реклама:
Поле вище використовується для створення повідомлень. Піктограми використовуються для надання доступу до таких функцій, як додавання файлу, планування публікації, додавання даних геолокації та вибір налаштувань конфіденційності.
Кнопка Зберегти також містить меню, яке пропонує не лише збереження, але й кілька інших параметрів.
Веб-сайт використовує вкладки, як і веб-браузер, які можна додавати, видаляти та редагувати:
У видавництві користувачам пропонуються прості підказки щодо керування публікаціями:
My Energy
Cайт My Energy створений для відстеження споживання та витрат енергії, газу та води чудово пояснює користувачам, чому потрібні певні дані, і показує, що реєстрація виконується одночасно в три кроки:
Після того, як користувач введе адресу, служба показує карту та кнопку Достатньо близько!, якщо картографічна служба не може ідентифікувати будинок на 100% точно:
Залежно від місця розташування користувача веб-сайт одразу пропонує можливості для податкових знижок при використанні певних технологій:
А ось як виглядають поради щодо енергозбереження та анкета щодо характеристик будинку:
На знімку екрана вище ми бачимо два меню. Оскільки вони обидва є постійними, користувачі мають швидкий доступ до основних функцій, навіть коли відображається багато даних і користувачам потрібно прокручувати їх.
Меню нижче відповідає за статистику використання, порівняння з користувачами, які живуть у тій самій місцевості, побудову діаграм і створення звітів, які легко зрозуміти:
Розділ із порадами щодо економії також заслуговує на увагу:
Користувачі можуть використовувати його, щоб позначати поради, яких вони вже дотримуються, додавати їх до списків справ і швидко переглядати поради за допомогою фільтрів, індикаторів Saving Impact і Effort Required, представлених у формі градієнтних кіл:
Наш досвід
Airfarm
Щоб глибше заглибитися в тонкощі проекту, ми використали історії про роботу, що добре підходить для довгострокових ініціатив розвитку, що дозволяє нам досліджувати численні потенційні шляхи реалізації.
Ми ретельно створили інтерактивний макет дизайну для інтерфейсу.
Stfalcon бездоганно інтегрувався в команду клієнта, пропонуючи неоціненну підтримку в різних аспектах:
- Послуги дизайну UX
- Послуги з розробки інтерфейсу користувача
- Сервіси розробки, інтерфейс, iOS і Android
- Тестування вручну
Читати кейс
SMILEFOOD
Місія Stfalcon полягала в тому, щоб оновити та розробити план для нової програми через недоліки існуючої програми:
- Він був створений на базі Ionic і фактично повторював веб-сайт.
- Він мав функціональні можливості, які постійно перестали працювати з кожним оновленням.
- Він часто зависав або виходив з ладу під час використання.
Наше рішення передбачало такі кроки:
Ми провели поглиблений процес виявлення, який включав:
- Завершення бізнес-моделі Canvas, щоб отримати глибоке розуміння бізнесу та його проблем.
- Дослідження конкурентів і аналогів, зокрема Dodo Pizza, Yandex Food, Mister Am, Rocket, Bolt Food, Uber Eats і Pizza Hut.
- Опитування користувачів програми SMILEFOOD.
- Створення профілів клієнтів і карт подорожі клієнтів (CJM) для двох типів клієнтів: клієнтів, які вперше працюють, і постійних клієнтів
Читати кейс
Підсумок
Як ви можете бачити з наведених вище прикладів, сучасний дизайн інтерфейсу користувача має бути зручним для початківців, використовувати вже відомі шаблони та елементи та надавати пояснення та приклади, де це необхідно.
Наша спеціальна команда пропонує Інтерфейс користувача для розробки для веб-сайтів і програм для мобільних пристроїв і буде радий створити сучасний дизайн інтерфейсу користувача, який залишить задоволеними ваших клієнтів, просто зв'яжіться з нами, ми отримаємо безкоштовну консультацію.
