Разработка веб интерфейсов

Разрабатываем UX/UI дизайн

 

Конкуренция за клиентов ужесточается день ото дня. Все больше информационного шума и различных предложений сваливаются на пользователей. И их мозг от этого перегружен, что препятствует быстрой покупке товаров и услуг...

Какое же решение проблемы? Необходимо сделать процесс взаимодействия с покупателем максимально комфортным и приятным для него.

Только в таком случае вы сможете не только привлечь клиента, но и удержать его. Тем самым увеличить прибыль от одного клиента за все время сотрудничества с ним.

Для улучшения взаимодействия с клиентом разрабатываются алгоритмы позитивного пользовательского опыта (user experience – UX) и удобного пользовательского взаимодействия (user interface — UI).

Как сделать сайт понятным и удобным —  Базовые принципы UX/UI дизайна сайтов

User experience (UX) – пользовательский опыт —  это принципы построения алгоритмов взаимодействия покупателя с компанией в процессе приобретения и потребления ее товаров или услуг.

Базовые критерии: позитивность, простота.

User interface (UI) – пользовательское взаимодействие – совокупность принципов, отвечающих за визуализацию интерфейса и взаимодействие с ним.

Базовые принципы: эффективность и понятность.

Основные элементы  UX/UI дизайна:

  • информационная архитектура ИТ продукта;
  • интерфейс, меню, навигация, конверсионные блоки;
  • контент – тексты, видео, картинки.

Базовые принципы UX/UI дизайна сайтов

Именно этими базовыми принципами мы руководствуемся при разработке сайтов для наших клиентов.

Общая понятность для пользователя

Посетитель должен понимать о  чем сайт, на котором он находится. Какие действия надо предпринять, чтобы получить полезный для себя результат (покупка товара, перевод средств, получение информации, настройка профиля и т.п.).

Для этого сайт должен обладать простой информационной архитектурой, то есть состоять не более чем из 3-4 уровней, где первый уровень — главная страница сайта, а 4 уровень, например, – страница оформления заказа.

Адаптивность страниц под разные размеры экрана

Все говорят про адаптивность сайтов, однако в Рунете большинство сайтов отображаются на экранах компьютеров или смартфонов просто отвратительно.

Всё больше активных покупателей пользуются смартфонами или планшетами для поиска товаров или услуг. Поэтому при создании сайта важно применять:

  • адаптивность;
  • универсальность дизайна под разные размеры экрана;
  • учёт дальнейшего развития информационной архитектуры сайта.

Интуитивное расположение элементов и форм на странице, а также понятное взаимодействие с ними

Пользователю должно быть понятно куда нажимать, чтобы совершить то или иное действие. Он не должен напряженно сидеть и высматривать ту самую заветную кнопку.

Например, во многих интернет-магазинах не понятно, где находятся кнопки «добавить в корзину» или «+/-» для управления количеством товаров в корзине (да, да! И такое бывает…). А ведь на таких просчетах попадаются и крупные ювелирные интернет-магазины.

Поэтому пользователю приходится несколько раз добавлять один и тот же товар в корзину, чтобы набрать желаемое количество. UX (пользовательский опыт) позитивен? Разумеется, нет.

Не надо сильно фантазировать с расположением элементов и функционалом. Тут лучше быть более заурядным, так как посетитель сайта может просто не понять, что ему требуется сделать для выполнения того или иного действия — у него сформированы паттерны поведения.

Обращение внимания на нужные разделы и элементы сайта

Чтобы пользователь понимал, куда нужно нажать, необходимо управлять его вниманием. Для этого элементы сайта располагают по принципу буквы «F».

Доказано, что при просмотре наибольшее внимание пользователя распределяется на левую верхнюю часть экрана. Это, конечно, не значит, что нужно впихивать всю информацию в это место, но держаться как ориентира весьма разумно.

Именно так поступают те же Яндекс или Google при выводе результатов поиска на экран: нижняя правая часть пуста и не содержит в себе никаких блоков.

То же относится и к расположению навигационных меню:

  • главное меню лучше сделать горизонтальным и расположить в шапке сайта;
  • навигационные меню разделов и фильтры лучше располагать слева или справа под шапкой, в стороне от основной контентной области.

Яркость и насыщенность цветовой палитры

Картинка должна быть сочной и насыщенной цветом. Именно поэтому пейзажи природы и тропических ландшафтов нам нравятся больше нежели однотонные пастельные цвета.

Эти оттенки идентичны естественной среде обитания человека на протяжении миллионов лет эволюции. Разумеется, делать сайты с деловой тематикой в сочных красных тонах не стоит, но придать небольшой контраст можно.

Читабельность шрифтов и упрощение понимания материала

Небольшой презентационный сайт с черным текстом на белом фоне или белый текст на черном фоне (темная тема) — вполне нормально и эстетично. Но когда большие тексты белого или даже синего цвета впихивают в темный фон — это неприемлемо.

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

Больше отступов и свободного пространства

Гармоничный и красивый дизайн – это не перегруженная страница. На экране вашего монитора должно располагаться не более 8-10 информационных элементов. Чем их больше на одном экране, тем сложнее ориентироваться пользователю.

 

Этапы создания UX/UI

Сбор информации о продукте и потребителях

На этом этапе проводится опрос Заказчика, для которого разрабатывается сайт. Определение целей и задач проекта, формирование требований к сайту, сбор и анализ информации по аналогичным проектам.

Исходя из этого вырабатывается понимание, какой тип сайта необходимо разработать —  презентационный сайт компании, каталог, интернет-магазин, корпоративный сайт или сервис, а также какой функционал необходимо разработать для позитивного пользовательского опыта и взаимодействия.

Построение информационной архитектуры сайта

После определения типа сайта формируется его информационная архитектура, распределение контента, взаимодействие между страницами и т.п.

Прототипирование страниц

Разрабатывается структура самой страницы для управления вниманием пользователя. Также прорабатывается адаптивность страниц для разных размеров экранов.

На основе прошлого пункта формируется карта пользовательского путешествия (CJM) с целью создания общего пользовательского опыта.

Разработка стилистики страниц

Сочные и яркие цвета позволят сделать пользовательский опыт позитивным.

Тестирование работы и настройка сквозной аналитики

Даже с учетом мощной предпроектной аналитики можно пропустить важные нюансы. Поэтому необходимо настроить показатели сквозной аналитики для выявления тех мест, которые ухудшают  UX/UI для дальнейших корректировок.

Таким образом, при разработке сайта важно понимать как сделать так, чтобы пользователь мог легко и просто выполнить для себя полезное действие. Только в таком случае можно добиться конверсионности сайта и сделать его эффективным инструментом привлечения удержания клиентов.

 

Последние материалы

18 февраля 2024 107
18 февраля 2024 108
Все материалы