Приклади дизайну веб-інтерфейсу

Web UI design examples

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

Як ми можемо отримати доступ до якості інтерфейсу користувача?

Щоб отримати доступ до якості інтерфейсу користувача, ви можете використовувати принцип MAYA, представлений промисловим дизайнером Реймондом Лоуі. MAYA означає «Найсучасніший, але прийнятний». На практиці це означає, що інтерфейс має бути інноваційним, але достатньо зрозумілим, щоб не заплутувати користувачів. Ви можете перевірити, чи правильно реалізовано принцип MAYA, спираючись на такі критерії:

  1. Використання стандартних метафор. Дії, які користувачі можуть виконувати на вашому веб-сайті, мають відповідати реальним (наприклад, скролінг нагадує про гортання сторінок, а архівація — про складання паперових документів на полицю чи в ящик).
  2. Доступність традиційних функцій. Звичайно, ви вирішуєте, наскільки інноваційним чи традиційним буде ваш інтерфейс на основі технічних навичок цільової аудиторії. Але в будь-якому випадку він повинен містити знайомі елементи, які допомагають користувачам почуватися комфортніше.
  3. Жодних непотрібних кроків у стандартних процесах. Ускладнюючи стандартні процедури, ви лише дратуєте своїх користувачів.

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

Приклади веб-інтерфейсу користувача

MailChimp

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

Дизайн веб-інтерфейсу користувача в MailChimp

Розширені параметри показані тим, хто хоче мати більше гнучкості в так званому меню на вимогу:

Меню за запитом у веб-інтерфейсі MailChimp

Шаблони для кампанії відображаються як схематичний попередній перегляд, і користувачі можуть визначити потрібний, навіть не читаючи описи:

Шаблони для веб-інтерфейсу користувача MailChimp

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

UI for editing template in MailChimp web UI

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

Меню внизу сторінки показує користувачеві, на якому етапі створення кампанії він або вона, і дозволяє повернутися до будь-якого з попередніх кроків, якщо їх потрібно змінити:

Визначення поточного кроку у веб-інтерфейсі MailChimp

Коли користувач робить помилку під час створення кампанії, він або вона побачить повідомлення про те, що щось пішло не так:

Повідомлення про помилку у веб-інтерфейсі MailChimp

І далі система пропонує, як це виправити, і навіть надає кнопку, щоб зробити це одразу — наскільки це розумно?

Порада щодо виправлення помилок у веб-інтерфейсі MailChimp

Після того, як користувач виконав деякі кроки з підготовки кампанії, у посібнику з початку роботи відображається «Гарно! знаки поруч із відповідними кроками та перекреслює їх.

Виконані дії у веб-інтерфейсі MailChimp

MailChimp, безперечно, є чудовим зразком плоского дизайну інтерфейсу користувача.

Hootsuite

Популярний сервіс для керування соціальними мережами використовує фіксоване меню для своєї цільової сторінки та пропонує три яскраві кнопки для реєстрації в соціальних мережах, які привертають увагу:

Цільова сторінка Hootsuite

Але якщо користувач віддає перевагу зареєструватися за адресою електронної пошти після натискання «або створити новий обліковий запис», він або вона не перейде на нову сторінку — система просто відобразить вікно з ілюстрованими полями:

Проста реєстраційна форма у веб-інтерфейсі Hootsuite

Hootsuite заохочує користувачів заповнити дані та почати користуватися службою, показуючи інформацію про те, скільки часу вони можуть заощадити:

Inspiring statistics in Hootsuite web UI

Після реєстрації та додавання соціальних мереж користувачам буде показано інтерактивний посібник із початку роботи:

Посібник із початку роботи у веб-інтерфейсі Hootsuite

Що важливо, його можна пропустити, натиснувши Пропустити огляд:

Пропустити посібник із початку роботи у веб-інтерфейсі Hootsuite

У Hooutsuit меню з піктограмами ліворуч можна відкрити, щоб мати доступ до інших розділи, як-от налаштування та реклама:

Бічне меню у веб-інтерфейсі Hootsuite

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

Поле публікації у веб-інтерфейсі Hootsuite

Кнопка Зберегти також містить меню, яке пропонує не лише збереження, але й кілька інших параметрів.

Багатофункціональна кнопка збереження у веб-інтерфейсі Hootsuite

Веб-сайт використовує вкладки, як і веб-браузер, які можна додавати, видаляти та редагувати:

Вкладки у веб-інтерфейсі Hootsuite

У видавництві користувачам пропонуються прості підказки щодо керування публікаціями:

Поради щодо керування публікаціями у веб-інтерфейсі Hootsuite

My Energy

Cайт My Energy створений для відстеження споживання та витрат енергії, газу та води чудово пояснює користувачам, чому потрібні певні дані, і показує, що реєстрація виконується одночасно в три кроки:

3-етапна реєстраційна форма в веб-інтерфейсі My Energy

Після того, як користувач введе адресу, служба показує карту та кнопку Достатньо близько!, якщо картографічна служба не може ідентифікувати будинок на 100% точно:

Використання карт у веб-інтерфейсі My Energy

Залежно від місця розташування користувача веб-сайт одразу пропонує можливості для податкових знижок при використанні певних технологій:

Tips in My Energy web UI

А ось як виглядають поради щодо енергозбереження та анкета щодо характеристик будинку:

Корисні поради в веб-інтерфейсі My Energy

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

Меню нижче відповідає за статистику використання, порівняння з користувачами, які живуть у тій самій місцевості, побудову діаграм і створення звітів, які легко зрозуміти:

Простий для розуміння веб-інтерфейс My Energy

Розділ із порадами щодо економії також заслуговує на увагу:

Поради щодо економії в веб-інтерфейсі My Energy

Користувачі можуть використовувати його, щоб позначати поради, яких вони вже дотримуються, додавати їх до списків справ і швидко переглядати поради за допомогою фільтрів, індикаторів Saving Impact і Effort Required, представлених у формі градієнтних кіл:

Градієнти в веб-інтерфейсі My Energy

Наш досвід

Airfarm

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

Ми ретельно створили інтерактивний макет дизайну для інтерфейсу.

Stfalcon бездоганно інтегрувався в команду клієнта, пропонуючи неоціненну підтримку в різних аспектах:

  • Послуги дизайну UX
  • Послуги з розробки інтерфейсу користувача
  • Сервіси розробки, інтерфейс, iOS і Android
  • Тестування вручну
Читати кейс

SMILEFOOD

Місія Stfalcon полягала в тому, щоб оновити та розробити план для нової програми через недоліки існуючої програми:

  • Він був створений на базі Ionic і фактично повторював веб-сайт.
  • Він мав функціональні можливості, які постійно перестали працювати з кожним оновленням.
  • Він часто зависав або виходив з ладу під час використання.

Наше рішення передбачало такі кроки:

Ми провели поглиблений процес виявлення, який включав:

  • Завершення бізнес-моделі Canvas, щоб отримати глибоке розуміння бізнесу та його проблем.
  • Дослідження конкурентів і аналогів, зокрема Dodo Pizza, Yandex Food, Mister Am, Rocket, Bolt Food, Uber Eats і Pizza Hut.
  • Опитування користувачів програми SMILEFOOD.
  • Створення профілів клієнтів і карт подорожі клієнтів (CJM) для двох типів клієнтів: клієнтів, які вперше працюють, і постійних клієнтів
Читати кейс

Підсумок

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

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