UX/UI дизайн для создания идеального продукта. Полный и исчерпывающий гид - Ярослав Александрович Шуваев

Например, изображение облака для операции «Сохранить в облаке» появилась благодаря развитию соответствующей технологии

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

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

Слабый контраст (слева) между фоном и текстом вызывает напряжение. Тональный контраст не воспринимается людьми, страдающими дальтонизмом, и представляет собой слишком сильный раздражитель

Чтобы текст прочитали, у него обязательно должна быть структура: заголовки, подзаголовки, разбивка на абзацы. В частности, это позволяет пользова

телю применять Z- и F-паттерны для более быстрой интерпретации

Плоскость поверхности (Surface Plane)

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

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

Индустрия разработки цифровых продуктов очень многообразна. Помимо компаний, создающих готовые решения, есть компании, которые специализируются на производстве компонентов, ускоряющих производство. Широко распространились фреймворки – совокупность готовых компонентов и инструментов. Создатели фреймворков очень хорошо понимают, что их клиентам требуется тонкая настройка визуального образа создаваемых продуктов, и предоставляют готовые пакеты стилевых решений.

Как правило, такие пакеты называются «Темы» (Themes) или «Скины» (Skins). Также встречается термин Look&Feel.

Благодаря темам в Bootstrap можно адаптировать цифровой продукт к использованию в темное время суток, применить к элементам интерфейса привычные стили Google или Microsoft либо же фирменные стили компании[40]

Применение тем позволяет:

• улучшить пользовательский опыт, установив определенные темы для определенного уровня освещения, – существует ночная темная тема и дневная светлая;

• помочь людям с ограниченными возможностями, такие проблемы решают, например, специальные темы для слабовидящих;

• снизить нагрузку, связанную с привыканием к новому стилю, – с этим помогают привычные стили от Google Material Design и Microsoft Fluent;

• унифицировать стиль продуктов компании, используя фирменные цвета и шрифты.

Google Material Design – достаточно редкий пример дизайн-системы, включающий в себя темы оформления

Слои UX и гибкая разработка

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

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

После первичного прохождения всех слоев дизайна и запуска продукта работа в каждом из слоев ведется от релиза к релизу с разной периодичностью

Глава 6

Артефакты UXD

Артефакты – объекты, создаваемые в процессе разработки продукта. Понятно, что конечным артефактом является сам продукт, или, точнее, его инкремент, – улучшение продукта, благодаря которому улучшается пользовательский опыт. Помимо инкремента создается множество промежуточных артефактов, помогающих при производстве продукта, – всевозможные отчеты об исследованиях, прототипы, документация и модели. Можно провести аналогию со строительством дома: сам дом – это финальный продукт, ценный для пользователя, а возводимые в процессе леса и другие вспомогательные конструкции – промежуточные артефакты. Промежуточные артефакты чрезвычайно важны – часто без них вообще не обойтись, – однако чем меньше сил и ресурсов затрачено на их создание, тем лучше.

Современное гибкое (Agile) производство программного обеспечения базируется на принципах бережливого (Lean) производства. Чем меньше промежуточных артефактов разрабатывается в процессе, тем больше высвобождается ресурсов для разработки чего-то реально полезного. В связи с этим в Scrum-командах поощряется, если UX/UI-дизайнер не участвует в итерации, когда создается улучшение продукта.

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

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

Артефакты, часто ожидаемые от ключевых участников процесса производства цифровых продуктов

В маленьких компаниях ответственность за создание артефактов часто лежит на одном человеке, а в больших за это могут отвечать сразу три человека:

• продуктолог – менеджер продукта или проекта, владелец продукта в Scrum или бизнес-исследователь, член команды, собранной владельцем продукта;

• UX-дизайнер – аналитик-эргономист, архитектор взаимодействия;

• UI-дизайнер – специалист, отвечающий за внешний вид точки касания и за ощущения от продукта.

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

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

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

Конечно, современный рынок труда пока не готов поставлять таких универсальных Scrum-разработчиков, но тенденция к уменьшению ролей есть и на практике дает положительный результат. На рынке появляются UX/UI-дизайнеры или, как их иначе называют, продуктовые дизайнеры (Product Designer).

Объединение исторически разделенных ролей позволяет избежать образования «микроводопада» между ними и усложнения внутренних приемочных процедур.

Участники производственного процесса по-разному задействованы на разных этапах разработки дизайна продукта.

В модели слоев, описанной в главе 5, зоны ответственности будут распределены следующим образом.

На стратегическом уровне дизайном продукта занимаются люди, заинтересованные в его жизнеспособности, – инвесторы, заказчики, владельцы продукта. На уровне скоупа – владелец продукта и команда разработки, на последующих уровнях (структура, компоновка, поверхность) – исключительно команда разработки, включающая и продуктового дизайнера

Исследования

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

Существует множество видов исследований, ориентированных на разные этапы жизненного цикла продукта. Их можно разделить по направлениям (количественные, качественные) и видам восприятия (мировоззренческие, attitudinal; поведенческие, behavioural).

Специалисты Nielsen Norman Group в своей статье{4} описали, для каких случаев применять основные типы исследований

Основные типы исследований в привязке к плоскостям UX

Чтобы понять, на каких этапах дизайн-процесса применимы те или иные виды исследований, наложим основные виды исследований на модель Джесса Гарретта.

Кратко приведем основные типы исследований, подходящие каждой плоскости дизайна, и рассмотрим некоторые из них детально в следующих разделах.

Исследования в плоскости