В этом выпуске: статьи о том, как избежать раздробленности дизайна, создать юзабилити-лабораторию, о композиции в дизайне интерфейсов, оптимизации приложений для использования одной рукой, пользовательских целях, а также видео о гибридных дизайнерах.
Раздробленность дизайна
Джон Айзлвуд написал, как избежать раздробленности дизайна при гибкой разработке продукта.
Вы наверняка замечали: сайты, где шапка выбивается из основного дизайна; страницы в системах бронирования, которые явно отличаются от остальных элементов. Обновления этих проектов выходят стабильно, но им явно не хватает полноценного взгляда со стороны.
- Постарайтесь в самом начале (нулевой спринт) как можно лучше изучить продукт и связанные с ним ограничения;
- Сделайте концептуальное проектирование: используя полученные знания, набросайте эскизы всех возможных экранов. Найдите и заполните выявленные пробелы;
- Определите точное креативное направление, создайте элементные коллажи — мудборды вымышленных и реальных элементов интерфейса;
- Подключите разработчиков как можно раньше. Они укажут на технические ограничения и не решённые дизайнерские задачи;
- Запустите дизайн с форой минимум в один спринт перед разработкой;
- Запланируйте остановки, чтобы взглянуть со стороны на то, что в целом получается;
- Выделите 10% времени спринта на исправление ошибок в дизайне, чтобы повысить целостность и улучшить восприятие продукта.
Создание юзабилити-лаборатории
Дима Хими написал, что надо учесть при создании юзабилити-лаборатории:
- Простой вход для респондентов, без предъявления документов и заказа пропусков;
- Туалет поблизости, чтобы не отвлекать исследователей на сопровождение гостей по офисным закоулкам;
- Отсутствие прозрачных стен и дверей, чтобы респонденты не отвлекались на проходящих мимо людей;
- Хорошее освещение, которое не слепит и не бликует на экранах;
- Наличие окон. Респонденты бывают разные, иногда надо хорошо проветрить помещение;
- Возможность напоить респондента водой, кофе или чаем;
- Звукоизоляция, чтобы респонденты не отвлекались на посторонние звуки;
- Доступный вайфай, чтобы легко протестировать сайт на устройстве респондента;
- Вешалка для одежды и стул для вещей респондента;
- Отсутствие растений или цветов, которые могут вызывать аллергию;
- Большие и непрозрачные столы. Респондент не должен быть слишком близко к исследователю. Респондентам в коротких юбках может быть некомфортно за прозрачным столом;
- Комфортная температура.
И ещё:
- Оборудование должно быть постоянно подключено и настроено, необходимые программы обновлены, их лицензии продлены;
- В комнате должны быть дублирующие кабели, зарядки и розетки;
- Должны быть источники бесперебойного питания.
Композиция в дизайне интерфейсов
Павел Голюдов написал о композиции в дизайне интерфейсов.
Композиция интерфейса — это взаимодействие его элементов, которое подсказывает пользователю, как с помощью интерфейса удовлетворить его потребность.
В статической композиции есть одно ключевое действие, на которое мы хотим обратить внимание, вся композиция строится вокруг него. В динамической композиции иерархия элементов сложнее, мы выделяем самые важные элементы, затем второстепенные и так далее.
Задачи композиции:
- Управление вниманием. Мы выстраиваем порядок, в котором пользователь будет изучать интерфейс;
- Cохранение внимания. Пользователю проще воспринимать структурированную информацию. Чем меньше усилий он тратит, тем дольше может сохранять внимание.
Выделить информацию, добавить ей визуального веса можно размером, цветом, формой и негативным пространством. Сложная форма выделяет объект среди объектов с простой формой. Также пустое место вокруг объекта выделяет его.
Создать гармоничную композицию помогает:
- Расположение якорных объектов (самых заметных объектов) в одном из углов, в центре прямоугольника или у одной из его сторон;
- Соблюдение ритма, когда одинаковые объекты обладают одинаковым размером, отступом и так далее;
- Близкое расположение связанных объектов. Создание таких групп облегчает восприятие информации.
(Самая популярная ссылка в этой подборке, если судить по количеству лайков в ВК.)
Оптимизация приложений для использования одной рукой
Майтрик Катария собрал примеры дизайна мобильных приложений, удобных для использования одной рукой.
Получилось 6 категорий UX-шаблонов:
- Навигация: строки меню, вкладки и жесты для лёгкого перемещения между наиболее важными разделами приложения;
- Действия: создание, редактирование, размещение, добавление, удаление и другие действия, использующие основные функциональные возможности приложения;
- Шоппинг, транзакции и расчёт в магазине;
- Поиск, сортировка и фильтрация, когда пользователи хотят быстро найти или просмотреть контент;
- Ввод и взаимодействие: слайдеры, пикеры, селекторы, раскрывающиеся списки, формы, масштабирование, прокрутка;
- Прочее: воспроизведение мультимедиа, фотосъёмка, редактирование фотографий, навигация по картам.
Решения для навигации:
- Использовать вылетающее снизу меню (Flyout Menu), а не полноэкранное;
- При нажатии на пункт «Ещё» на нижней панели навигации показывать расширенную версию этой панели;
- Дать пользователям возможность настроить меню;
- Использовать жесты для доступа к основным возможностям приложения;
- Использовать жесты для перемещения между экранами. Например, закрывать открытые на весь экран карточки свайпом вниз;
- Дать возможность перейти к определённой секции страницы с помощью специального закреплённого меню (Floating Tab Bars) и жестов (смотрите примеры в статье).
Пользовательские цели
Ирина Бушуева написала о трёх типах пользовательских целей.
1. Цели опыта взаимодействия — что пользователь хочет ощущать при взаимодействии с продуктом, например:
- Сознавать собственную компетенцию и способность контролировать происходящее;
- Получать удовольствие;
- Чувствовать себя и свои данные в безопасности;
- Ощущать себя современным.
Если продукт систематически нарушает цели опыта использования, он обречён на провал, как бы не стремился к достижению других целей.
2. Конечные цели — что мотивирует пользователя справиться с задачей, например:
- Купить билет;
- Развлечься;
- Оставаться на связи с близкими и друзьями.
Если продукт не удовлетворяет конечные цели, пользователь не будет тратить на него время и деньги.
3. Жизненные цели — глубинные движущие силы и мотивы пользователя, которые помогают объяснить, почему он пытается достигнуть своих конечных целей. Например:
- Выглядеть хорошим в своих глазах и в глазах окружающих;
- Добиться успеха в чём-либо;
- Хорошо разбираться в чем-либо;
- Быть привлекательным и популярным, пользоваться уважением.
Если продукт приближает пользователя к достижению жизненных целей, это привлечет его гораздо эффективнее любой маркетинговой компании.
Гибридный дизайнер
Опубликованы видео с митапа «Кто такой гибридный дизайнер, или нужен ли веб-дизайнеру фронтенд?»:
- Арт-директор «Газпром нефти» Вадик Матвеев рассказал, кто такой гибридный дизайнер, какие у него преимущества и как им стать;
- UX/UI-дизайнер JetBrains Егор Алексеев рассказал, почему дизайнерам стоит научиться верстать, и показал примеры разработки дизайна через код.
Все видео вместе в альбоме ВК.