Дизайн
#подборки

Главные понятия для UX‑дизайнера. Часть 1

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

Фото: Georgijevic / Getty Images

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

Объясняем девять терминов, которые важны в работе UX-дизайнера.

О том, кто такой UX-дизайнер и чем он занимается, — читайте в нашей подробной статье.

Интерфейс (Interface)

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

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

Дверная ручка — интерфейс взаимодействия с дверью
Фото: ckbacteria / Shutterstock
Педаль — интерфейс взаимодействия со швейной машинкой
Фото: Kate Fokin / Shutterstock
Сайт — интерфейс взаимодействия с компьютером
Изображение: Natalya Nikolaeva / Behance

Варфрейм (Wireframe)

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

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

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

Пример варфрейма
Изображение: SHINPURU / Лиза Бредня / Behance
Пример варфрейма
Изображение: SHINPURU / Лиза Бредня / Behance

Прототип

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

Раньше прототипы делали программисты. Сейчас это можно сделать прямо в Figma и без разработчиков.

Скриншот: Skillbox Media

О том, как делать прототипы в Figma, читайте в нашей серии статей:

Информационная архитектура (Information Architecture, IA, ИА)

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

Основные компоненты информационной архитектуры:

  • Система организации — группы или категории, по которым разделена информация.
  • Система маркировки — способы представления данных.
  • Системы навигации — то, как пользователи перемещаются по сайту.
  • Поисковые системы — с помощью чего пользователи будут искать информацию.
Информационная архитектура фитнес-центра
Изображение: Vinayag4u ❤ / Behance

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

Болевые точки, или боль пользователя (Pain Point)

Проблемы, с которыми сталкиваются пользователи выпущенного продукта. Из-за болевых точек они вынуждены совершать дополнительные действия или теряют время и деньги. Эти проблемы могут возникать на разных уровнях:

  • На уровне взаимодействия с продуктом. Например, когда служба поддержки гоняет пользователя от одного специалиста к другому.
  • На уровне пути клиента. Например, когда пользователь заказал товар в интернет-магазине и ему предлагают ждать его три месяца.
  • На уровне отношений. Например, когда клиент заплатил за сервис, чтобы не смотреть рекламу, но её всё равно продолжают ему показывать.
При выборе страны для отпуска у пользователя может возникнуть боль — он не сможет узнать цену за номер без тщательного поиска и изучения отдельных городов. Airbnb решает проблему на карте — показывает средний ценник жилья в городах и регионах на карте мира
Скриншот: Skillbox Media

Айтрекинг (Eye-tracking)

Технология, которая отслеживает и записывает движение глаз. Для этого используют айтрекер — специальный прибор, который следит за перемещениями глаз. Айтрекер выдаёт видеозапись движения глаз, статистику и визуализации: тепловые карты и графики фиксаций взгляда.

Устройства для айтрекинга
Фото: SR Research Ltd.
Устройства для айтрекинга
Фото: Wikimedia Commons
Примерно в таком виде дизайнер получит результат айтрекинга
Скриншот: Skillbox Media

Айтрекинг применяют для UX-исследований сайтов и мобильных приложений, чтобы выявить проблемы пользовательского опыта. Например, в результате такого исследования можно понять, видят ли пользователи ключевые кнопки в интерфейсе и легко ли их найти.

Подробнее об айтрекинге читайте в этом материале.

Кар­точ­ная сор­ти­ров­ка (Card Sort)

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

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

Исследование проводят как в онлайн-режиме, так и офлайн с бумажными карточками.

Есть три типа карточек для сортировки:

  • закрытые ― название каждого объекта подписано;
  • открытые ― когда участникам предлагают самим подписать карточки;
  • гибридная ― когда часть карт подписана, а часть нет, или участники исследования могут добавлять свои карточки к уже подписанным.
Фото: Saurav Pandey / UX Design

A/B-тестирование

Метод исследования, при котором две версии концепции продукта, веб-страницы или мобильного приложения оценивают разные пользователи, выбранные случайным образом. При этом каждую версию тестирует одинаковое число респондентов. Результаты такого исследования позволяют определить, какой вариант работает лучше. Для сайта это может быть коэффициент конверсии или показатель отказов, для концепции ― оценки привлекательности или релевантности.

A/B-тестирование обычно используют на последних этапах разработки, когда есть две основных версии продукта. Если их больше, такое тестирование называют многовариантным.

Как мог бы тестироваться стартовый экран приложения Business
Скриншот: Skillbox Media

Бета-запуск

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

В бета-тестировании активно участвуют и дизайнеры, и разработчики. Часто они предлагают решение проблем друг другу и делятся сторонним взглядом на проблему.

Бета-запуск может быть открытым и закрытым. Открытый — когда продуктом или функцией может пользоваться кто угодно. Закрытый — только по приглашениям. Также закрытый бета-запуск могут называть альфа-запуском.

Приложение World Class с бета-версией для города Солнечного
Скриншот: Skillbox Media

Аннотации (Annotations)

Пояснения и примечания к элементам макетов интерфейса или связанным с ними взаимодействиям. Вот примеры элементов интерфейса, которым обычно добавляют аннотации:

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

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

Аннотация с пояснением к иконке в Google Drive
Скриншот: Skillbox Media
Аннотация с пояснением к волшебной палочке в Adobe Photoshop
Скриншот: Skillbox Media

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

Курс

Профессия UX/UI-дизайнер

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

Узнать про курс

Учись бесплатно:
вебинары по программированию, маркетингу и дизайну.

Участвовать
Обучение: Профессия UX/UI-дизайнер Узнать больше
Понравилась статья?
Да

Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies 🍪

Ссылка скопирована