Разработка веб-интерфейса строится таким образом, чтобы обеспечить его максимальную привлекательность и удобство для пользователя. Все это невозможно без знания таких понятий, как UX и UI дизайн. Именно о них пойдет речь в данной статье, кроме того, вы узнаете о 5 способах, которые повысят вероятность взаимодействия пользователя со страницей.
Что такое UX и UI дизайн
UX(UsereXperience) –в переводе с английского «пользовательский опыт». Под данным определением подразумевается эмоциональное состояние, которое возникает у пользователя при взаимодействии с интерфейсом.
UI(UserInterface) – в переводе с английского «пользовательский интерфейс». UI является своеобразным посредником, который обеспечивает простое взаимодействие между человеком и сложными системами.
У многих возникает путаница между этими понятиями, поэтому приведу простую аналогию с обычным одеколоном.
В случае с одеколоном UI является сам флакон (стоит отметить, что производители из кожи вон лезут для того, чтобы привлечь внимание покупателя). Красивая обертка привлекает внимание и помогает обеспечить конечный результат – приобретение товара.
В качестве UX здесь выступает:
- 1Ощущение соприкосновения с чем-то статусным и дорогим – нажатие на пульверизатор.
- 2Чувство запаха одеколона. Выступает в роли своеобразного тотема: какой аромат вы будете излучать – так и будете позиционировать себя в глазах окружающих.
- 3Ощущения звука. Тот самый звук при распылении, который сигнализирует, что вы вот-вот почувствуете приятный аромат.
В наше время любой веб-интерфейс необходимо тестировать на UI и UX. Основной причиной этого является большая конкуренция в любой нише. Поэтому разработчики изо всех сил стараются расположить к себе клиентов, благодаря чрезвычайной удобности и дружелюбности своих творений.>/p>
Как нужно правильно использовать UI и UX
В следующей части статьи мы рассмотрим 5 способов, которые позволят вам:
- наладить взаимодействие с пользователем
- преподнести ему нужную информацию
- вызвать положительные эмоции от взаимодействия
Способ №1: Конструктор-калькулятор
Для чего: заставляет пользователя взаимодействовать с целевой страницей.
Как: сложная реализация сполна компенсируется высокой эффективностью. Предположим, что пользователь искал черный BMW. Зайдя на целевую страницу, он обнаруживает, что прямо там его можно доукомплектовать. Таким образом он вовлекается в определенный процесс с лендом. Согласитесь, будет просто замечательно, если в ходе комплектации будет отображаться изменение стоимости автомобиля. Однако стоит помнить, что цену нужно указывать только в тех случаях, когда стоимость авто действительно конкурентоспособна.
Способ №2: Выпадающие списки
Для чего: создает «иллюзию» выбора.
Как: давайте представим, что у нас есть какой-либо товар с определенными параметрами: цвет и модель. В данном случае достаточно предоставить пользователю 2 выпадающих списка с возможностью выбора определенного параметра. Например, BMW X5 черного цвета. А если изменения при выборе определенной характеристики будут отображаться покупателю, то это будет вдвойне отлично, так как позволит вовлечь его в процесс управления сайтом.
Способ №3: Клик
Для чего: интригует и показывает основное назначение товара.
Как: очень эффективный способ. Во-первых, привлекает внимание покупателя, во-вторых, у него растет чувство собственной важности, благодаря возможности управлять сайтом, а в-третьих, с помощью красивого визуального эффекта показываются основные характеристики товара, что способствует возникновению положительных эмоций у покупателя.
Способ №4: Попап
Для чего: ненавязчиво привлекает внимание.
Как: с учетом того, что пользователь целевой страницы попал на нее из поисковика, то весьма вероятно, что он сразу будет готов к каким-либо спецпредложениям. И он их получит, благодаря попапу с предложением о скидке. Однако нужно быть осторожным и не спугнуть покупателя ярким дизайном и кричащими заголовками, а процесс появления попапа должен быть как можно более плавным.
Способ №5: Анимация
Для чего: приковывает внимание к неправильно заполненному полю.
Как: так заведено, что для обозначения всех ошибок используют красный цвет. Беда в том, что подсознательно он воспринимается как угроза. И для того, чтобы сгладить это противоречие можно добавить немного анимации.
Подытожим:
Создание грамотного интерфейса невозможно без UI и UX.
Динамика к месту, когда она положительно влияет на UX.
Грамотный и полезный UX может быть создан при помощи:
- конструктора-калькулятора
- выпадающих списков
-
прямого взаимодействия посетителя с лендингом (кликов)
- попапов (без агрессивного дизайна и процесса появления)
- анимации (создание небольшой вибрации при ошибке заполнения формы)
Информация в данной статье является ярким примером того, что не всегда стоит следовать правилу 3-ех кликов. Не бойтесь экспериментировать, правила созданы для того, чтобы их нарушать.
Оригинал статьи на блоге convertmonster
