Лого vc.ru

Инвентаризация: Как и зачем нужно документировать интерфейс

Инвентаризация: Как и зачем нужно документировать интерфейс

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

Поделиться

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

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

Так как же провести инвентаризацию интерфейса? Что нужно иметь в виду? Ниже вы можете видеть пошаговое руководство того, как успешно провести инвентаризацию интерфейса:

  1. Соберите команду.
  2. Изучите инструменты для создания скриншотов.
  3. Сделайте скриншоты.
  4. Представьте результаты.
  5. Перегруппируйтесь и определите дальнейшие действия.

Шаг 1: Команда

На многих мастер-классах и тренингах я встречал людей, которые говорили что-то вроде: «Да, Сара уже начала пересмотр нашего пользовательского интерфейса». Конечно, хорошо, когда один член команды мыслит системно, но еще лучше, когда вся группа принимает участие в инвентаризации интерфейса.

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

Шаг 2: Инструменты для создания скриншотов

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

Некоторые варианты:

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

Шаг 3: Делаем скриншоты

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

Обычно я разбиваю людей на пары и назначаю им категорию или категории пользовательского интерфейса, но это зависит от того, сколько человек участвует. Я стараюсь ограничивать время, которое мы выделяем на создание скриншотов, иначе это может затянуться и занять весь день. Количество времени, которое я выделяю, зависит от того, сколько людей работают над проектом, но я считаю, что 30-90 минут достаточно для первого этапа инвентаризации интерфейса.

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

Некоторые категории инвентаризации интерфейса:

  • Основные — верхние и нижние колонтитулы и другие основные элементы, которые присутствуют во всем пользовательском интерфейсе.
  • Навигация — основная навигация, нижняя панель навигации, разбивка текста по полосам, путь к просматриваемому файлу, интерактивный контроль элементов, и другие элементы, которые используются для навигации по пользовательскому интерфейсу.
  • Типы изображений — логотипы, персонажи, аватарки, иконки, фон и другие изображения, которые появляются в пользовательском интерфейсе. Я считаю, что это одна из самых сложных для выборки категория.
  • Иконки — особый тип изображений, заслуживающих выделения в отдельную категорию. Это лупа, иконки социальных сетей, стрелки, индикатор загрузки, иконка сайта, и прочее.
  • Формы — поля для ввода, текстовые области, меню выбора, поля для установки флажка, зависимые переключатели, ползунки и другие формы ввода.
  • Кнопки — основной элемент пользовательского интерфейса. Сделайте снимок каждого типа кнопок: основные, второстепенные, большие, маленькие, неактивные, активные, загружаемые и так далее.
  • Заголовки — h1, h2, h3, h4, h5, h6 и вариации текстовых заголовков. Эта категория также сложна, так как за заголовки можно принять другие элементы текста.
  • «Блоки» — группу заголовков, изображений, отрывков текста или комбинацию этих элементов я называю «блоками». Это относительно простые кластеры интерфейса, которые созданы для повторного использования (см. статью Николь Салливан о медиа-объектах).
  • Списки — неупорядоченные, упорядоченные, списки определений, маркированные, нумерованные, выравненный и другие элементы, представленные в виде списков.
  • Интерактивные компоненты — аккордеоны, вкладки, карусели и другие модули с подвижными элементами.
  • Мультимедиа — видео и аудио плееры и другие элементы мультимедийной рекламы.
  • Сторонние элементы — виджеты, iframe, биржевые тикеры, кнопки соцсетей, в общем, все, что находится на сторонних хостингах.
  • Реклама — особый тип элементов категории «сторонние элементы», включающий все рекламные форматы и сферы.
  • Сообщения — оповещения, сообщения об успешном завершении ч.-л., предупреждения, сообщения об ошибке, проверка правильности, всплывающие окна, всплывающие подсказки, сообщения об ошибке 404. Это также сложная категория, так как для того, чтобы появились некоторые сообщения, от пользователя требуются определенные действия. При этом важно, чтобы пользователь увидел правильное сообщение.
  • Цвета — захватите все цветовые паттерны, присутствующие в интерфейсе. Для данной категории можно использовать отличные инструменты CSS Stats и Stylify Me.
  • Анимация — это особая категория, так как она подразумевает захват анимаций пользовательского интерфейса. Для этого нужно ПО, позволяющее записывать видео с экрана, например Quicktime (для этого в Quicktime нужно выбрать Файл > Новая запись изображения на экране).

Опять же, эти категории могут варьироваться в зависимости от особенностей и целей проекта. Как только эти паттерны задокументированы, тот, кто работает над этим заданием, должен перетащить изображения в Google Slides и собрать их вместе. А теперь самое интересное: присваивание имен паттернам. Разумеется, по возможности нужно использовать уже принятые в компании условные обозначения, но вы скоро обнаружите, что многие паттерны либо не имеют названий, либо эти названия противоречивые и только сбивают с толку.

Шаг 4: Представление результатов

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

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

После того, как будут представлены все категории и пройдут обсуждения, все участники должны отправить свои слайды руководителю, который объединит слайды в один общий документ.

Шаг 5: Перегруппируйтесь и определите следующие шаги

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

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

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

  • Какие названия нужно оставить?
  • Какие паттерны должны остаться, а какие нужно убрать?
  • Можно ли легко объединить паттерны?
  • Как разработчикам, дизайнерам и менеджерам начать пользоваться единой терминологией?
  • Как нам перевести данное задание в существующую библиотеку паттернов?

С чего необходимо начать

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

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Решил нажать я кнопку а там такая надпись "кнопка инв. номер 115 - большая" :)

А кто такой ux-проектировщик не слышали?)

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Shtadler Anton

потому что хочется) У каждого свой фан.

Ашот Габрелянов представил приложение Magic для создания индивидуальных стикеров на основе эмоций
0
Дмитрий Каулькин

Язь это ещё норм. Хорошо, что не дратути.

«Вжух»: реакция российских компаний на мем с котом и волшебной палочкой
0
Maga Abdurakhmanov

1. Google Authenticator на часах, очень удобно, что всегда под рукой. За телефоном обычно надо лезть
2. SMS коды, тоже самое что Google Authenticator
3. Нотифаи, настроенные в соответствии с важностью, не надо лезть за телефоном ты сразу видишь, особенно удобно с встречами
4. Не отвлекает людей вокруг звуки твоего телефона (я его всегда на тихом режиме держу теперь)
5. Будильник в часах будит только тебя виброй
6. Если забыл телефон дома и ушел, часы напомнят виброй
7. Управление музыкой, не надо искать телефон, погромче или на паузу поставить
8. Когда едешь на велосипеде, а тебе пишут смс/в телеграм, можно голосом ответить с часов, не доставая телефон
9. Тречит сон и шаги, так-как часы всегда на запястье (7 дней на зарядке)

Есть на рынке другие часы, которые это могут?

От $740 млн до $40 млн за один год
0
Nikolay Kachev
Tredwear

Как будто балтику 9 рекламируют, а не напиток для интеллектуалов. Типа наебенься с нами чувачок

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Sp Soul
ITSys

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

Штаб-квартира: Петербургский офис игровой студии Playkot
0
Показать еще