UI дизайн. Какие элементы вам нужны?

UI-дизайн или User Interface можно сравнить с отделкой квартиры. Подразумевается стильное оформление сайта, соответствующее направленности и тематике, но с использование определенных элементов, делающих проект удобным и понятным для пользователя.

User Interface дизайн – это кнопки, тексты, поля ввода, формы регистрации, поля для комментариев и прочие составляющие, с которыми напрямую взаимодействует пользователь.

Что должен сделать дизайнер

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

Дизайнер выбирает:

• цветовые схемы;
• размер шрифтов;
• размер и форму кнопок;
• и многое другое.

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

К примеру, вот несколько возможных ошибок:

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

Описание основных UI-элементов для разных проектов

Каждая разновидность сайта предполагает использование определенных элементов. Некоторые могут встречаться на всех ресурсах. Другие – характерны для проектов конкретной направленности.

Интернет-магазины

1. Фильтры. На страницах интернет-магазинов может быть представлено множество товаров даже в одном разделе. Чтобы пользователь сразу отсеял (или подобрал) те товары, которые ему нужны – следует внедрить систему фильтров по нескольким параметрам. К примеру, если это одежда:

• размер;
• фасон;
• цвет.

2. Пагинация. Еще один важный элемент для интернет-магазинов. Он дает возможность переключаться между несколькими страницами, если представлено множество товаров. Помимо нумерации страниц предлагается использовать кнопку «Показать больше» — тогда товары буду подгружаться со следующей страницы без переключения на неё.

3. Хлебные крошки. Они выглядят как элемент навигации на сайте. Вот вариант отображения: Главная – Мужская одежда – Куртки — Демисезонные

Лендинг-пейдж

1. Кнопка целевого действия. Она должна быть контрастной, выделяться на фоне, мотивировать пользователя сделать клик. Если подразумевается два разных по своей сути действия, в таком случае кнопки следует сделать разными – не по размеру, а по цвету.

2. Формы. Они нужны для ввода пользователями своих данных, информации для оформления заказа на товар или обратный звонок. Рекомендуется прорисовывать несколько вариантов форм – активную, неактивную, с веденной ошибкой.

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

Прочие виды сайтов

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

1. Меню. С его помощью осуществляется навигация по всему сайту. Оно может быть, как закреплено вверху сайта, так и всплывать при наведении курсора или быть спрятанным в «бургер». Какой вариант выбрать? Решать нужно в каждом отдельном случае!

2. Попап. Основная задача – авторизация или регистрация пользователя на сайте. Форма входа должна быть простой, понятной с первого взгляда. Чем проще ее заполнить, тем выше вероятность регистрации пользователя.

3. Кнопки. Самые важные элементы на сайтах. Их размер, цвет, форма должны соответствовать тематике и общей концепции проекта. Они применяются на сайтах разного типа.

4. Лоадеры. Показывают состояние загрузки страницы. Используются, если на сайте сложная анимация или «тяжелый» контент, требующий относительно длительной загрузки. Пользователь будет видеть, что процесс идет и не покинет сайт.