Многие предприниматели и начинающие маркетологи недооценивают важность интерфейса сайта или приложения. Это приводит к снижению конверсии и общей эффективности продвигаемых ресурсов.
В статье расскажем, как избежать подобных проблем, покажем на практике хорошие и плохие примеры. В конце вас ждет бонус — чек-лист для проверки вашего проекта.
Присоединяйтесь к нашему Telegram-каналу!
- Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
- Для этого вам необходимо подписаться на наш канал.
Что такое интерфейс сайта
При работе за компьютером или смартфоном мы постоянно сталкиваемся с интерфейсами и даже не задумываемся об этом. Но если у вас стоит задача сделать качественный сайт или мобильное приложение, нужно понимать, о чем речь и чем отличается хороший интерфейс от плохого.
Интерфейс — это средство взаимодействия пользователя и веб-продукта (сайт, сервис, приложение) через браузер, монитор, смартфон, простыми словами это картинка, которую мы видим на экране монитора.
Описание интерфейса программы Human Emulator
Часто интерфейс упоминают в значении «графический пользовательский интерфейс», то есть сюда относят все элементы, представленные визуально (кнопки, пиктограммы и т. д.). Но нас в первую очередь интересуют те элементы, с которыми будут взаимодействовать пользователи вашего сайта или приложения: кнопки, формы захвата, фильтры. Ведь если посетитель будет понимать, куда ему нажимать для достижения цели, вероятность добиться от него этого действия многократно возрастает.
При разработке сейчас стоит смотреть в первую очередь на мобильную версию сайта. Даже в сегменте B2B объем мобильного трафика превышает 50 %, а в некоторых нишах (детские товары, красота) может достигать 95–100 %.
Поэтому многие сейчас начинают разработку с мобильной версии ресурса.
Мобильные версии сайтов 2023: интересные тенденции и неожиданные выводы
Основные элементы интерфейса
К интерфейсу относятся все элементы на мониторе пользователя. Давайте разберем подробнее те, с которыми будут напрямую взаимодействовать пользователи.
Кнопка
Позволяет выполнить определенное действие при нажатии. На примере, при нажатии кнопки «Купить» пользователь попадет в форму оформления заказа:
Чек-бокс
Позволяет выбрать сразу несколько элементов. Используется в фильтрах сайтов для настройки вывода информации.
Выпадающий список (select)
Позволяет выбрать одну из опций, скрытых до момента наведения мышки или клика по элементу. В приведенном примере предлагается выбрать способ вывода товаров:
Описание интерфейса программы SuperLogist
Теперь посмотрим, как будет выглядеть выпадающий список в развернутом состоянии. В этом примере можно выбрать определенный вариант, иногда так показываются ссылки меню.
Аккордеон
Список со скрытыми элементами. При клике на нем показываются дополнительные опции. Обычно он используется для сокращения меню, когда демонстрируются только основные разделы сайта, а остальные можно посмотреть при необходимости.
В развернутом виде аккордеон показывает скрытые пункты меню. Пользователь может открыть одно скрытое подменю или сразу все.
Слайдер
Несколько изображений, сменяющих друг друга. Они обязательно имеют кнопки-стрелки для смены картинки. Часто применяется для показа разных объявлений на сайте. Картинки могут сменяться самостоятельно или после клика по слайдеру.
Контент
Блок с текстом или визуальной информацией на сайте. Мы видим изображение из текста статьи и фрагмент самого текста:
Что такое контент: виды, форматы, критерии качества
Popup
Всплывающее окошко на сайте. Обычно используется для приглашения подписаться на рассылку, заказать услугу или прочитать похожую статью.
Модальное окно
Разновидность popup, но в отличие от первого закрывает большую часть экрана. Чтобы продолжить работу с сайтом, пользователю нужно или закрыть это окно, или выполнить требуемые действия.
Экран (блок)
Фрагмент контента, рассказывающий об одной вещи. Чаще всего делается с расчетом на один экран.
Страница
Структурная единица контента на сайте. Обладает отдельным адресом, обычно посвящена одной теме или товару/услуге.
Хедер (Header)
Шапка сайта. Располагается в верхней части страницы. Здесь обычно размещают контактную информацию и навигационные элементы: меню, поисковую строку.
Подвал (футер/footer)
Элемент располагается в самом низу страницы. Здесь можно разместить адрес компании, дополнительное меню, услуги и ссылки на важные страницы.
Превью
Уменьшенное изображение при нажатии на которое открывается полная картинка, блок контента или страница сайта.
Тултип (tooltip)
Всплывающая подсказка. В зависимости от настроек может появляться при наведении или нажатии на элемент.
Навигационные элементы
Все что помогает пользователю ориентироваться на сайте: меню, сайдбары с подсказками, кнопки для быстрого перехода на нужный фрагмент страницы.
К навигационным элементам относятся и кнопки для возврата вверх страницы. Иногда эти кнопки привязываются не к верхней границе страницы, а например, к форме заказа.
Еще один вариант навигационного элемента — дополнительное меню в сайдбаре. Позволяет пользователю видеть все доступные для перехода страницы.
Пагинация
Разновидность навигации, позволяющая переходить на страницы идущие или по порядку, или по определенным правилам. Например, пагинация может предлагать похожие статьи.
Хлебные крошки
Разновидность пагинации. Фактически — это подборка статей по выбранному параметру. Размещаются чаще всего внизу страницы, для увеличения кликабельности рекомендуется делать с использованием превью.
Что такое CTR (кликабельность) и как ее улучшить
Поисковая строка
Позволяет производить поиск на сайте. Некоторые ресурсы используют поисковую выдачу «Яндекса» или Google.
Медиаплеер
Элемент, позволяющий просматривать видео непосредственно на сайте.
Поле для ввода личных данных
Поле для ввода имени при регистрации или оставлении заявки:
Маска для номера телефона
Если пользователю предлагается ввести номер телефона, используется «маска»:
Форма для ввода пароля
Обычно символы пароля сразу скрываются точками с целью безопасности данных.
Форма для входа на сайте обычно включает в себя логин или электронную почту и поле для ввода пароля. Современные сайты предлагают возможность входа через социальные сети или аккаунты Google и «Яндекса».
Элемент, показывающий процесс загрузки
Позволяет пользователю понять, что сайт или приложение работают и нужно просто немного подождать.
Теги
Позволяют определить, к какой категории или рубрике относится страница. Могут использоваться для настройки пагинации. Размещаются или перед основным контентом или после.
Все основные элементы интерфейса: да кто такой этот ваш UI/UX
Дизайнер UI/UX нынче и швец, и жнец, и дождя провидец. Поэтому проторенный и тернистый путь начинается с самых базовых элементов интерфейса. С их помощью ты сможешь спроектировать такой рафинированный интерфейс, что у пользователей начнёт течь патока с экрана.
Радиокнопка (Radio Button)
Пожалуй, самый главный селектор в дизайне…всего. Даёт выбрать что-то одно из предложенных вариантов. Собственно, если реализовывать народную шутку про два стула, то здесь точно была бы радиокнопка
Выпадающий список (Dropdown list)
Выпадающие списки позволяют пользователям выбирать по одному элементу за раз, аналогично радиокнопкам, но они более компактны и позволяют сэкономить место. «Английские ученые» выяснили, что список можно начинать делать, если вариантов для выбора не менее 10. С другой стороны даже 7 радиокнопок будет уже перебором.
Список элементов (List box)
Тоже список, но его аналогия — чекбоксы, а вот функция та же — приличная экономия места, особенно в мобильных интерфейсах. Для наглядности ниже сравнение выпадающего списка и списка элементов
Чекбокс (Checkbox)
Именно там ставят галочки. Галочки на нескольких пунктах, но можно выбрать и один (как в радиокнопке). Самый понимаемый элемент интерфейса для пользователя. Поставил галочку в квадратик — включил. Нет ничего проще.
Карточки (Cards)
Нынче новомодный тип интерфейса, где пользователь взаимодействует с продуктом в виде стильных и модных карточек. Надо сказать, что смотрятся они действительно круто, но подойдут не каждому приложению.
Диапазон дат (Data Picker)
Если хоть раз пользовались сервисом aviasales, то сразу поймете о чем речь. Специальный фильтр диапазона дат можно посчитать за отдельный элемент интерфейса. С помощью средства выбора информация последовательно форматируется и вводится в систему.
Бронирование (Booking process)
Во-первых, это красиво. Во-вторых, этот процесс можно превратить в уникальнейший user experience при очень умелом дизайнере интерфейсов
Панель навигации (Bar)
Часть пользовательского интерфейса для быстрой навигации. То, что ты видите внизу 99,9% приложения — это и есть панель, которая позволяет быстро переключаться между различными разделами приложения.
Уведомления (Notifications)
Правильные(продуктивные!) уведомления — это почти произведение искусства. Уведомления достали всех и вся — поэтому перед разработчиками и UI/UX-дизайнерами стоит непростая задача: найти золотую середину между периодичностью и информацией, которую нужно выдать на экран блокировки, а какую оставить только in-app.
Прокрутка (Scrolling)
Бесконечный думскроллинг стал особо «популярен» в последнее время из-за известных всем событий. Но в парадигме мобильного приложения прокрутка сильно влияет на метрики юнит-экономики приложения.
Именно прокрутка побуждает пользователя больше и чаще пользоваться приложением. Когда вы в последний раз выходили из социальной сети, свайпнув вниз один раз? Это может затянуться на пару часов.
Карусель (для product tour)
При установке нового приложения разработчики почти всегда запускают тур для знакомства с продуктом, сделанный в виде карусели. Ценности это особо никакой не несёт, но визуально смотрится привлекательно.
Награды (Awards)
Нам всем нравятся новые ачивки. Любая похвала, награда, пусть и виртуальная, поднимает настроение и мотивирует получать новые достижения. Чем и пользуются разработчики различных приложений для фитнеса. Хорошая штука, чтобы поднять DAU.
Прелоадер (Preloader)
При старте приложения мы видим (иногда не видим) нечто, что отвлекает нас от ожидания запуска. Похож на прогресс бар, но обычно не показывает прогресс, а просто информирует, что вот-вот сейчас уже что-то будет. Может использоваться при переходе в другой раздел приложения).
Прогресс бар (Progress Bar)
Он же индикатор выполнения текущего процесса. Эта может быть обычная шкала с процентами, либо визуальное представление (что конкретно делает программа). Тут надо быть осторожней — если прогресс бар будет «заполнен», а фоновая задача до сих пор в стадии выполнения, то это однозначно вызовет раздражение пользователя.
Гамбургер (Hamburger menu)
Кнопка для дополнительного меню, которое не влезает на основной экран. Зачастую оно дублирует основное, потому что используется в мобильных приложениях и мобильных версиях сайтов, где места не так много, как на десктопе.
Споры по поводу гамбургера идут постоянно — если на мокапе это всё выглядит идеально, то при непосредственном использовании приложения пользователь может потеряться и не понять, куда вообще нажимать (особенно, если не использует мобильные версии сайтов).
Свитчер (Toggle)
По-русски это переключатель. Тоже самое, что и радио кнопка, только одним элементов. Отличное и надежное (как швейцарские часы) решение. Весьма понятный и простой селектор — главное сделать четкие границы, чтобы было видно, когда опция активирована. А если добавить анимацию, то вообще сказка.
Сборщик (Picker)
Настройка ненавистного (завтра на работу!) будильника делается с помощью такого элемента как сборщик. По сути — прокручиваемые списки для выбора нескольких параметров. Обычно используется для установки времени.
- Отправить в ВК
- Отправить в Telegram
- Отправить в Viber
Источник: devrockets.ru
Данил Фимушкин
Пользовательский интерфейс (на англ. user interface, UI) коротко говорят ЮИ — это среда взаимодействия пользователя с компьютером. Это кнопки, меню, радиокнопки, чек-боксы и многое другое. Сейчас не понятно, ниже все заумные словечки объясню. Если человек пользуется мобильным телефоном, то приложения или браузер — это пользовательский интерфейс.
Основные элементы пользовательского интерфейса
Сейчас буду пояснять те слова, которые написал выше. Должно все встать на свои места. Рассказываю про пользовательский интерфейс не просто так. Эта информация нужна для того, чтобы вы не забывали в макетах прорисовывать все эти элементы. Если верстальщик что-то из этого в макете не найдет он сделает это так, как ему это кажется правильным.
Тексты (заголовки)
Когда человек в вебе первое, с чем он сталкивается, это тексты и заголовки. Поэтому, нам как дизайнерам, важно прорабатывать сразу все заголовки в одном макете. Заголовки, обычно, называются H1, H2 … Hn, потому что так они называются в тегах html. В данном случае первый заголовок — это H1, далее H2 и так далее. Первый — это наиболее значимый заголовок.
В лендинге это может быть на первом экране, дальше по низсходящей. В макетах нужно показывать все зголовки, чтобы верстальщик понимал, где какой тег ставить.
Ссылки
Здесь текст, заголовок и выделена ссылка. Ссылки имеют 4 состояния: обычное, при наведении (может менять цвет, подчеркиваться или что-то еще, эффект), нажатие и посещенное состояние (нажали и потом вернулись на сайт, откуда ушли).
Кнопки
Они похожи на физические кнопки, по крайней мере задумывались так, как кнопки на магнитофоне. Поэтому имеют состояния: наведение и нажатие. Это нужно все прорабатывать.
Радиобаттон и чек-боксы
Слева радиобаттон (по-русски радиокнопка, но буду называть ее радиобаттон поскольку у дизайнеров так принято), справа чек-бокс. В радиобаттоне можно выбрать только 1 вариант, у нас выбран енот. В чек-боксе возможность множественного выбора, у нас выбран тюлень и енот.
Формы
Формы нужно прорабатывать сразу в нескольких видах. Неактивная форма (наверху), активная (вторая сверху), форма с ошибкой (третья сверху), форма успешно заполненная (четвертая сверху). Иногда при ошибке в форме лучше справа сделать всплывающую выноску, где явно указать ошибку. Например, если в форме для ввода телефона посетитель ввел буквы, сделать на выноске надпись «в этом поле можно вводить только цифры». Это очень поможет людям заполнить форму и повысит ее конверсию.
Попап
Попапы или всплывающие окна авторизации (входа) на сайт нужно всегда прорисовывать. На этой картинке нет, но вообще принято делать крестик справа для выхода из формы.
Пагинация
Пагинация — постраничная навигация, которая позволяет быстро переключаться между большим количеством товара, листов или чего-либо. Сейчас распространена такая форма пагинации как лента новостей в вк, когда вы прокручиваете до низа и подгружаются еще новости. Так же можно сделать в интернет-магазине. В этом случае все равно нужно предусмотреть кнопку «показать больше товаров». Если их уже загружено очень много и показать какой-то прелоадер, то есть элемент, который показывает загрузку страницы.
Хлебные крошки
Часто можно встретить в интернет-магазине. Например, слева написано интернет-магазин, справа мужские вещи, еще правей спортивная верхняя одежда, далее куртки. Она позволяет перейти при клике на желаемый уровень вверх. По-другому называется навигационная цепочка.
Прелоадер
Штука, которая показывает, что что-то загружается. Они бывают очень разные. Можно нагуглить «прелоадер гиф» и посмотреть разнообразие и использовать понравившиеся. Есть специальный прелоад генератор, где можно выбрать как он будет выглядеть, какого цвета, в каком формате его сохранять и так далее.
Советую использовать стандартные вещи, такие как кружки и полосочки, для особых проектов можно ипользовать что-то необычное, а можно нарисовать самому в фотошопе и сделать гиф анимацию. Не переусердствуй, это конечно важный элемент, но сильно много времени на него тратить все же не стоит.
Таблицы
Часто дизайнеры забывают рисовать таблицу. Например, если делаешь интернет-магазин производственного оборудования, то в описании и в карточке товара появляются сравнительные характеристики, веса и еще что-то. Удобно использовать таблицы, когда строчки чередуются цветом, это очень хорошо воспринимается зрителем. В данном случае изображена таблица с чек-боксами, это не обязательно. Не забывайте про таблицы.
Меню
Меню — это навигация по всему сайту. В данном случае показал, что есть всплывающее меню при наведении курсора. Это нужно прорисовывать.
Обрати внимание как я показал наведение и интерактивность. Просто скачал курсор png и поставил его на место. Если у тебя большой макет, поставь много курсоров. Например, чтобы показать как работает меню, как выглядят кнопка и ссылка при наведении. При этом не забывай про обычное состояние.
Таким образом в статичном макете можно легко показывать как ведут себя элементы юзер интерфейса в интерактивном состоянии.
Помни, что курсоры бывают разные: для PC и для мака. 
Гуглятся легко «курсор png». Если показываешь сайт на маке (используешь mock-up c макбуком), то нужно использовать правый курсор, если в PC (например, mock-up с inernet explorer), то левый.
Вот основные вещи про элементы пользовательского интерфейса. Эта информация для того, чтобы узнать все термины, которые используются при проектировании сайтов. И чтобы не забывать прорисовывать такие вещи как всплывающие меню, интерактивность кнопок и так далее. Пусть твои сайты после верстки выглядят такими, как ты их отрисовал. Аминь
Источник: fimushkin.com