Привет всем, Хаброжители!Спроектировать хороший интерфейс приложения не так просто. Все заказчики хотят, чтобы пользовательский опыт (user experience) был гладким, чтобы пользователь быстро и безболезненно получал то, что ему нужно, на любом устройстве и пользуясь любым каналом взаимодействия.
Главная «фишка» книги — паттерны проектирования. Вы научитесь использовать паттерны при разработке интерфейсов мобильных, настольных и веб-приложений. Для каждого паттерна даны наглядные примеры и подробное описание -— от реализации до сценариев использования. Вы сразу перейдете от теории к практике!
Для опытных разработчиков книга станет источником интересных идей, а начинающие найдут ориентиры в мире интерфейсов, позволяющие не сбиться c пути и применять лучшие паттерны.
Для кого эта книга
Мы надеемся, что «Разработка интерфейсов» будет полезна как как тем, кто уже знаком с предыдущим изданием, так и новой аудитории. Мы создали эту книгу для самых разных людей — начинающих дизайнеров, работников среднего звена и менеджеров, профессионалов и руководителей. Она для тех, кто хочет учиться, быть в курсе всех изменений, вдохновиться и взглянуть на свою сферу по-новому. Она для команд, сообществ и отдельных людей. Она для дизайнеров, создающих интерфейсы взаимодействия, архитекторов, дизайнеров продуктов и графических интерфейсов, менеджеров по продуктам, разработчиков, инженеров по контролю качества, специалистов по стратегии, лидеров, консультантов, преподавателей, студентов и всех, кто заинтересован в разработке качественных программных средств.
Паттерны
В электронной версии представлены цветные иллюстрации, в печатной версии они черно-белые с наличием qr-кодов, где это необходимо для лучшего понимания материала.
Так как в этой книге речь идет об интерактивных интерфейсах, большинство паттернов описывают способы взаимодействия с данными: перемещение по данным, сортировку, выделение, вставку и изменение элементов, поиск конкретных значений или наборов значений. Лишь некоторые из них используются для статической графики: дизайнерам инфографики давно известны паттерны Multi-Y Graph (График с несколькими осями Y) и Small Multiples (Набор мини-диаграмм1), но эти паттерны также прекрасно работают в мире цифровых интерфейсов.
Следующие паттерны подойдут для любой интерактивной графики, независимо от базовой структуры данных (некоторые из них сложнее изучать и применять, чем остальные, так что не стоит внедрять их во все графические элементы):
- Datatips (Всплывающие данные).
- Data Spotlight (Подсветка данных).
- Dynamic Queries (Динамические запросы).
- Data Brushing (Окрашивание данных).
- Multi-Y Graph (График с несколькими осями Y).
- Small Multiples (Набор мини-диаграмм).
Datatips (Всплывающие данные)
Что это
Данные появляются, когда вы касаетесь пальцем или наводите указатель мыши на интересующий вас объект в интерактивной таблице данных или когда вы щелкаете на значке.
Работа паттерна Datatips (Всплывающие данные) показана на примере диаграммы исследовательского центра Пью (рис. 9.11).
Когда использовать
Если вы выводите на экран общее представление данных практически в любой форме. Большая часть данных скрывается под определенными точками на графике, например названия улиц на карте или значения столбцов на гистограмме. Пользователь указывает на них мышью или касается их на сенсорном экране.
Зачем
Поиск нужных значений — частая задача при работе с графикой, содержащей большой объем данных. Пользователям необходимо видеть как общее представление, так и конкретные значения, которые в нем не отражаются. Во всплывающих подсказках можно выводить небольшие фрагменты контекстно-зависимых данных и располагать их именно там, куда обращено внимание пользователя, — около указателя мыши. Если информация хорошо организована, то пользователи быстро найдут то, что им нужно, а вам не придется выводить на общий план сразу все детали.
Кто-то может рассматривать схемы просто из любопытства: что еще здесь есть? Что я могу найти? Всплывающие подсказки представляют собой простую и эффективную форму интерактивности. Они быстрые (не нужно загружать страницы!), легкие и позволяют увидеть данные, которые в противном случае остались бы скрыты.
Как
В окне, созданном по типу всплывающего, покажите данные, относящиеся к конкретной точке на общем представлении. Необязательно делать это окно точно таким же, как всплывающая подсказка, — главное, чтобы оно появлялось именно там, где находится указатель мыши, выводилось поверх графики и было временным. Пользователи довольно быстро схватывают принцип его работы.
Внутри этого временного окна форматируйте данные сообразно с их структурой. Организуйте их поплотнее, так как пользователи ожидают, что окошко будет маленьким; не делайте его таким, чтобы оно заслоняло собой слишком большую часть картинки. Тщательно продумайте местоположение окна. Если есть возможность программно задать позицию, чтобы окно закрывало собой как можно меньше полезного контента, сделайте это.
Иногда можно даже форматировать всплывающие данные в зависимости от ситуации. Например, по желанию пользователя выводить на интерактивной карте либо названия мест, либо их координаты (значения широты и долготы). Если несколько наборов данных выводятся в виде отдельных линий на графике, то всплывающие данные можно оформлять для каждой линии по-разному и выводить для каждой из них свой тип информации.
Всплывающие подсказки часто содержат активные ссылки на подробные данные, недоступные в главном представлении. Преимущество такого подхода в том, что всплывающие подсказки интуитивно понятны. Они содержат не только данные, но и ссылку с инструкциями, как узнать эти подробности.
Еще один способ динамического отображения скрытых данных — создать прямо на иллюстрации или рядом с ней статическую панель. Когда пользователь наводит указатель мыши на различные точки иллюстрации, данные, связанные с этими точками, появляются на статической панели. Идея та же, просто используется зарезервированное пространство, а не временная всплывающая подсказка. Пользователю придется переключать внимание между указателем мыши и панелью, зато панель с данными не будет закрывать собой иллюстрацию. Вдобавок, если на панели данных информация будет сохраняться какое-то время, пользователи смогут просматривать ее, одновременно выполняя другие действия.
В современной интерактивной инфографике всплывающие данные часто используются вместе с подсветкой данных. Она подсвечивает срез данных, например линию или набор разбросанных точек, а всплывающие подсказки выводят значения для точки, на которую наведен курсор.
Примеры
В приложении CrimeMapping (рис. 9.12) на карту нанесены значки, указывающие на вид совершённого преступления. Пользователь может увеличивать и уменьшать масштаб карты, а также фильтровать виды преступлений, щелкнув на кнопке What (Что) на панели слева.
В приложении CrimeMapping используются паттерны Datatips (Всплывающие данные) и Data Spotlight (Подсветка данных). Подсветкой выделяются точки на карте, где произошли кражи, а во всплывающей подсказке выводятся подробные сведения о конкретном случае кражи. Обратите внимание на ссылку в поле всплывающих данных, по которой доступны исходные данные о преступлении.
Карты Google Maps содержат столько географических данных, что о них стоит упомянуть отдельно. Карта может переключаться между режимом упрощенного просмотра и видом со спутника и включать слои трафика, маршрутов и маркеров мест (рис. 9.13).
Мобильное приложение Transit (рис. 9.14) показывает маршрут на карте с упрощенными значками и всплывающими подсказками. Цвета, символы и информация меняются в зависимости от того, какой вид транспорта выбран.
Data Spotlight (Подсветка данных)
Что это
Когда пользователь подводит указатель мыши к интересующей его области, подсвечивайте соответствующий срез данных (линию графика, слой карты и пр.) и затеняйте остальное.
Очень красивый сайт Atlas of Emotions (рис. 9.15) показывает диапазон эмоций и их интенсивность. Когда пользователь наводит курсор на данные, подсвечиваются связанные с ним эмоции из выбранной группы.
Когда использовать
Если представление содержит так много информации, что даже структура данных становится неочевидна. Пользователю сложно заметить взаимоотношения и отследить связи между наборами данных.
Если сама структура данных очень сложна — они могут включать несколько независимых переменных и запутанные «срезы» зависимых данных, таких как линии, области, разбросанные точки, системы связей. (Если при наведении указателя мыши нужно показать только значение в точке или простую фигуру, лучше подойдет всплывающая подсказка. С другой стороны, эти два метода часто используются вместе.)
Зачем
Подсветка позволяет разъединить нити данных. Это один из способов реализации «фокуса» в контексте сложной инфографики: пользователь устраняет лишний визуальный шум, затеняя ненужные данные, и может сосредоточиться на интересующем его срезе. Однако второстепенные, с его точки зрения, данные не исчезают с экрана, а обеспечивают понятный контекст.
Также этот паттерн хорошо поддерживает динамическое исследование. Пользователь быстро переключается между различными срезами данных, что позволяет ему видеть крупные и мелкие различия между ними. Разумеется, чтобы пользователь заметил эту разницу, переход должен быть быстрым и плавным (без мерцания).
Ну и наконец, работать с подсветкой довольно весело и интересно.
Как
Прежде всего разработайте представление, исходно не зависящее от подсветки. Постарайтесь сделать срезы данных хорошо видимыми и единообразными, чтобы пользователь мог понять суть, не взаимодействуя с графикой (в конце концов, кто-то может работать с распечаткой).
Для создания эффекта подсветки выделяйте интересующие пользователя срезы данных цветом (либо более светлым, либо более насыщенным), затеняя или переводя в оттенки серого все остальное. Сделайте так, чтобы отклик на перемещение указателя мыши был мгновенным и плавным, иначе впечатление от работы испортится.
При наведении указателя мыши на элементы данных дополнительно можно подсвечивать соответствующую информацию в легенде и других связанных блоках.
Попробуйте реализовать «режим подсветки». В этом режиме при первом наведении указателя мыши подсветка включается не сразу, а через пару секунд, но после этого любое изменение положения курсора моментально отражается на поведении подсветки. Таким образом, подсветка не будет включаться при случайном наведении указателя мыши на данные.
Альтернативой наведению курсора может быть простой щелчок кнопки мыши или касание сенсорного экрана. Этот вариант не предусматривает мгновенного отклика, как при наведении, но работает на устройствах с сенсорным экраном и позволяет избежать случайного включения подсветки. Однако вы, возможно, предпочтете зарезервировать щелчок для другого действия, например вывода подробных данных.
Используйте всплывающие подсказки, чтобы описывать конкретные точки данных или выделенный срез данных, а также чтобы предоставлять пользователю необходимые инструкции.
Примеры
Вот пример работы подсветки данных.
На сайте Winds and Words (рис. 9.16) представлена интерактивная визуализация данных сериала «Игра престолов». Когда пользователь выбирает персонаж, другие уходят на задний план, и выбранный персонаж отображается вместе с его связями с другими героями.
Dynamic Queries (Динамические запросы)
Что это
Простые стандартные элементы управления, такие как ползунки и флажки, с помощью которых пользователь определяет, какие именно данные отображаются, и фильтрует их. Результаты выводятся в области отображения по мере настройки этих элементов пользователем.
Приложение Google Public Data Explorer (рис. 9.17) позволяет выбирать переменные и сразу видеть результаты. Пользователь также может перемещать ползунок по шкале времени, чтобы увидеть хронологические изменения данных.
Когда использовать
Если вы выводите большой многомерный набор данных любой формы и любым способом представления. Пользователю необходимо отфильтровать данные, чтобы, например, удалить лишние, или увидеть, какие данные отвечают определенным критериям, или понять взаимоотношения между атрибутами данных, или же просто изучить, что они собой представляют.
У самого набора данных есть фиксированный и предсказуемый комплект атрибутов (или параметров, переменных, измерений — какой термин вам больше нравится), интересующих пользователей. Обычно это числовые атрибуты, ограниченные определенным диапазоном; также это могут быть сортируемые строки, даты, категории или перечисления (наборы чисел, представляющих нечисловые значения). Помимо этого, атрибутами могут быть видимые области представления данных на экране, которые пользователь интерактивно выбирает.
Динамические запросы можно применять к результатам поиска. В фасетных механизмах поиска используются особые интерфейсы запроса, позволяющие исследовать огромные базы данных элементов, таких как продукты, изображения или тексты.
Зачем
Во-первых, научиться пользоваться динамическими запросами очень легко. Не нужно тратить время на изучение сложного языка запросов; при помощи простых и понятных элементов управления можно формулировать элементарные булевы выражения вроде «цена > $70 AND цена < $100». Конечно же, у таких элементов управления нет всего функционала настоящего языка запросов — не усложняя интерфейс, можно реализовать только самые простые запросы, — но в большинстве случаев этого достаточно.
Во-вторых, мгновенный отклик интерфейса на запрос позволяет изучать данные свободно. Например, как только пользователь перемещает ползунок, он видит, как набор данных сокращается или расширяется. Как только он добавляет или удаляет различные поднаборы данных, на его глазах они переносятся в нужное место и определенным образом меняют свое представление. Пользователь может постепенно изобретать длинные и сложные запросы, изменяя сначала один элемент управления, затем другой и третий. Таким образом, пользователь непрерывно взаимодействует с данными интерактивно, в стиле вопросов и ответов. Мгновенный отклик приложения сокращает количество итераций, поэтому изучение данных приносит удовольствие, а пользователь входит в состояние потока.
В-третьих (и это более тонкая особенность паттерна), если пользователь видит четко обозначенные элементы управления динамическими запросами, он понимает, на основе каких атрибутов он может формулировать запросы. Например, если один из атрибутов данных — число в диапазоне от 0 до 100, то пользователь узнает об этом, видя ползунок, на одном конце которого находится 0, а на противоположном — 100.
Как
Способ реализации динамического запроса зависит от представления данных, от того, какие запросы, по вашему мнению, будут вводить пользователи, а также от возможностей пакета разработки. Как уже говорилось, в большинстве программ атрибуты данных привязываются к простейшим элементам управления, которые обычно располагаются рядом с основным представлением данных. Такой сценарий позволяет выполнять запросы одновременно ко многим переменным, а не только к тем, что закодированы при помощи пространственных особенностей изображения. Кроме того, большинство людей умеют пользоваться ползунками и кнопками.
Некоторые программы поддерживают интерактивный выбор прямо в визуальном представлении информации. Например, пользователь обводит интересующую его область, и данные, попавшие в нее, удаляются (или сохраняются, а удаляется все остальное). Это простое действие, но у него есть недостаток — оно тесно связано с пространственным отображением данных. Если вокруг данных невозможно нарисовать рамку или как-то еще выбрать интересующие пользователя точки, то запрос составить невозможно! Аргументы «за» и «против» такой техники обсуждаются в разделе, посвященном паттерну Data Brushing (Окрашивание данных).
Вернемся к элементам управления. Их выбор для динамических запросов такой же, как для форм любого типа: основан на типе отображаемых данных, типе запросов, которые будет делать пользователь, и имеющихся в вашем распоряжении элементах управления. Вот некоторые распространенные методики:
- ползунки для выбора числа из определенного диапазона;
- двойные ползунки или пары ползунков для определения подмножества: «покажите точки данных больше первого значения, но меньше второго»;
- переключатели или комбинированные поля (раскрывающиеся меню) для выбора одного из нескольких возможных значений. Также можно использовать их для выбора целых наборов переменных или данных. В любом случае в качестве дополнительного метазначения часто используется «Все»;
- флажки для выбора произвольного подмножества значений, переменных или слоев данных;
- текстовые поля для ввода отдельных значений. Помните, что в текстовых полях легче сделать ошибку и опечатку, чем при использовании ползунков и кнопок.
Интерфейс приложения Apple Health (рис. 9.18) позволяет пользователю выбирать дни и просматривать активность за каждый день.
Об авторах
Дженифер Тидвелл занимается разработкой дизайна и созданием пользовательских интерфейсов более десяти лет. Она исследует паттерны пользовательского интерфейса с 1997 года, а также разрабатывает дизайны и создает сложные приложения и веб-интерфейсы с 1991 года. Недавно перешла из сферы цифрового дизайна к ландшафтному, в котором по-прежнему сочетает удобство использования, красоту и лучшие инженерные практики.
Чарли Брюэр является дизайнером пользовательских интерфейсов и имеет большой опыт работы с веб-приложениями B2B и платформами SaaS. Работает над созданием инструментов дизайна, позволяющих превращать идеи в цифровые продукты. За время своей профессиональной деятельности он занимался созданием независимого кино, преподавательской деятельностью, а также созданием цифровых брендов для клиентов со всего мира. Чарли разработал новаторский маркетплейс программной телевизионной рекламы, стал сооснователем стартапа игры для социальной сети и запустил несколько цифровых продуктов.
Эйнн Валенсия является директором по дизайну в компании The City of San Francisco Digital Services и доцентом Калифорнийского колледжа искусств. За время своей карьеры она занималась созданием креативных команд, запуском крупных продуктов и сервисов, наставничеством и обучением дизайнеров, а также сотрудничала с крупными мировыми брендами. Имеет обширный опыт работы в области дизайна физических и цифровых продуктов, сервисов и программного обеспечения.
Чарли Брюэр является дизайнером пользовательских интерфейсов и имеет большой опыт работы с веб-приложениями B2B и платформами SaaS. Работает над созданием инструментов дизайна, позволяющих превращать идеи в цифровые продукты. За время своей профессиональной деятельности он занимался созданием независимого кино, преподавательской деятельностью, а также созданием цифровых брендов для клиентов со всего мира. Чарли разработал новаторский маркетплейс программной телевизионной рекламы, стал сооснователем стартапа игры для социальной сети и запустил несколько цифровых продуктов.
Эйнн Валенсия является директором по дизайну в компании The City of San Francisco Digital Services и доцентом Калифорнийского колледжа искусств. За время своей карьеры она занималась созданием креативных команд, запуском крупных продуктов и сервисов, наставничеством и обучением дизайнеров, а также сотрудничала с крупными мировыми брендами. Имеет обширный опыт работы в области дизайна физических и цифровых продуктов, сервисов и программного обеспечения.
Более подробно с книгой можно ознакомиться на сайте издательства:
» Оглавление
» Отрывок
По факту оплаты бумажной версии книги на e-mail высылается электронная книга.
Для Хаброжителей скидка 25% по купону — Интерфейсы
