105. Композиция в дизайне интерфейсов

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

Раздробленность дизайна

Джон Айзлвуд написал, как избежать раздробленности дизайна при гибкой разработке продукта.

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

  1. Постарайтесь в самом начале (нулевой спринт) как можно лучше изучить продукт и связанные с ним ограничения;
  2. Сделайте концептуальное проектирование: используя полученные знания, набросайте эскизы всех возможных экранов. Найдите и заполните выявленные пробелы;
  3. Определите точное креативное направление, создайте элементные коллажи — мудборды вымышленных и реальных элементов интерфейса;
  4. Подключите разработчиков как можно раньше. Они укажут на технические ограничения и не решённые дизайнерские задачи;
  5. Запустите дизайн с форой минимум в один спринт перед разработкой;
  6. Запланируйте остановки, чтобы взглянуть со стороны на то, что в целом получается;
  7. Выделите 10% времени спринта на исправление ошибок в дизайне, чтобы повысить целостность и улучшить восприятие продукта.

Создание юзабилити-лаборатории

Дима Хими написал, что надо учесть при создании юзабилити-лаборатории:

  1. Простой вход для респондентов, без предъявления документов и заказа пропусков;
  2. Туалет поблизости, чтобы не отвлекать исследователей на сопровождение гостей по офисным закоулкам;
  3. Отсутствие прозрачных стен и дверей, чтобы респонденты не отвлекались на проходящих мимо людей;
  4. Хорошее освещение, которое не слепит и не бликует на экранах;
  5. Наличие окон. Респонденты бывают разные, иногда надо хорошо проветрить помещение;
  6. Возможность напоить респондента водой, кофе или чаем;
  7. Звукоизоляция, чтобы респонденты не отвлекались на посторонние звуки;
  8. Доступный вайфай, чтобы легко протестировать сайт на устройстве респондента;
  9. Вешалка для одежды и стул для вещей респондента;
  10. Отсутствие растений или цветов, которые могут вызывать аллергию;
  11. Большие и непрозрачные столы. Респондент не должен быть слишком близко к исследователю. Респондентам в коротких юбках может быть некомфортно за прозрачным столом;
  12. Комфортная температура.

И ещё:

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

Композиция в дизайне интерфейсов

Павел Голюдов написал о композиции в дизайне интерфейсов.

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

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

Задачи композиции:

  1. Управление вниманием. Мы выстраиваем порядок, в котором пользователь будет изучать интерфейс;
  2. Cохранение внимания. Пользователю проще воспринимать структурированную информацию. Чем меньше усилий он тратит, тем дольше может сохранять внимание.

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

Создать гармоничную композицию помогает:

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

(Самая популярная ссылка в этой подборке, если судить по количеству лайков в UX Notes ВКонтакте.)

Оптимизация приложений для использования одной рукой

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

Получилось 6 категорий UX-шаблонов:

  1. Навигация: строки меню, вкладки и жесты для лёгкого перемещения между наиболее важными разделами приложения;
  2. Действия: создание, редактирование, размещение, добавление, удаление и другие действия, использующие основные функциональные возможности приложения;
  3. Шоппинг, транзакции и расчёт в магазине;
  4. Поиск, сортировка и фильтрация, когда пользователи хотят быстро найти или просмотреть контент;
  5. Ввод и взаимодействие: слайдеры, пикеры, селекторы, раскрывающиеся списки, формы, масштабирование, прокрутка;
  6. Прочее: воспроизведение мультимедиа, фотосъёмка, редактирование фотографий, навигация по картам.

Решения для навигации:

  1. Использовать вылетающее снизу меню (Flyout Menu), а не полноэкранное;
  2. При нажатии на пункт «Ещё» на нижней панели навигации показывать расширенную версию этой панели;
  3. Дать пользователям возможность настроить меню;
  4. Использовать жесты для доступа к основным возможностям приложения;
  5. Использовать жесты для перемещения между экранами. Например, закрывать открытые на весь экран карточки свайпом вниз;
  6. Дать возможность перейти к определённой секции страницы с помощью специального закреплённого меню (Floating Tab Bars) и жестов (смотрите примеры в статье).

Гибридный дизайнер

Опубликованы видео с митапа «Кто такой гибридный дизайнер, или нужен ли веб-дизайнеру фронтенд?»:

  1. Арт-директор «Газпром нефти» Вадик Матвеев рассказал, кто такой гибридный дизайнер, какие у него преимущества и как им стать;
  2. UX/UI-дизайнер JetBrains Егор Алексеев рассказал, почему дизайнерам стоит научиться верстать, и показал примеры разработки дизайна через код.

Все видео в альбоме ВК.

Пользовательские цели

Ирина Бушуева написала о трёх типах пользовательских целей.

1. Цели опыта взаимодействия — что пользователь хочет ощущать при взаимодействии с продуктом, например:

  • Сознавать собственную компетенцию и способность контролировать происходящее;
  • Получать удовольствие;
  • Чувствовать себя и свои данные в безопасности;
  • Ощущать себя современным.

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

2. Конечные цели — что мотивирует пользователя справиться с задачей, например:

  • Купить билет;
  • Развлечься;
  • Оставаться на связи с близкими и друзьями.

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

3. Жизненные цели — глубинные движущие силы и мотивы пользователя, которые помогают объяснить, почему он пытается достигнуть своих конечных целей. Например:

  • Выглядеть хорошим в своих глазах и в глазах окружающих;
  • Добиться успеха в чём-либо;
  • Хорошо разбираться в чем-либо;
  • Быть привлекательным и популярным, пользоваться уважением.

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

Рассылка Проектората × UX Notes

Опечатка? Выделите её и нажмите кнопки Control и Enter.

Технологии цифрового маркетинга — книга, где я был соавтором (параграф про создание сайта) и литературным редактором (привёл текст к единой стилистике и упростил формулировки). От 250 рублей.

Теперь электронную версию можно купить и читать на Литресе.