Beijing Boston Farnham Sebastopol Tokyo Разработка интерфейсов Паттерны проектирования Дженифер Тидвелл, Чарли Брюэр, Эйнн Валенсия 2022 ББК 32.973.23-044 УДК 004.5 Т39 Тидвелл Дженифер, Брюэр Чарли, Валенсия Эйнн Т39Разработка интерфейсов. Паттерны проектирования. 3-е изд. — СПб.: Питер, 2022. — 560 с.: ил. — (Серия «Бестселлеры O’Reilly»). ISBN 978-5-4461-1646-1 Спроектировать хороший интерфейс приложения не так просто. Все заказчики хотят, чтобы пользовательский опыт (user experience) был гладким, чтобы пользователь быстро и безболезненно получал то, что ему нужно, на любом устройстве и пользуясь любым каналом взаимодействия. Главная «фишка» книги — паттерны проектирования. Вы научитесь использовать паттерны при разработке интерфейсов мобильных, настольных и веб-приложений. Для каждого паттерна даны наглядные примеры и подробное описание: от реализации до сценариев использования. Вы сразу перейдете от теории к практике! Для опытных разработчиков книга станет источником интересных идей, а начинающие найдут ориентиры в мире интерфейсов, позволяющие не сбиться c пути и применять лучшие паттерны. 16+ (В соответствии с Федеральным законом от 29 декабря 2010 г. № 436-ФЗ.) ББК 32.973.23-044 УДК 004.5 Права на издание получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав. Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за возможные ошибки, связанные с использованием книги. Издательство не несет ответственности за доступность материалов, ссылки на которые вы можете найти в этой книге. На момент подготовки книги к изданию все ссылки на интернет-ресурсы были действующими. ISBN 978-1492051961 англ. ISBN 978-5-4461-1646-1 Authorized Russian translation of the English edition of Designing Interfaces 3E ISBN 9781492051961 © 2019 Jenifer Tidwell, Charles Brewer and Aynne Valencia-Brooks This translation is published and sold by permission of O’Reilly Media, Inc., which owns or controls all rights to publish and sell the same. © Перевод на русский язык ООО «Прогресс книга», 2022 © Издание на русском языке, оформление ООО «Прогресс книга», 2022 © Серия «Бестселлеры O’Reilly», 2022 Краткое содержание Предисловие к третьему изданию............................................................................... 15 Глава 1 Проектирование для людей.................................................................... 22 Глава 2 Организация контента: информационная архитектура и структура приложений......................................................................... 51 Глава 3 Подскажите дорогу: навигация, указатели и ориентирование.....................................................................................151 Глава 4 Организация элементов на странице...............................................227 Глава 5 Визуальный стиль и эстетика................................................................266 Глава 6 Мобильные интерфейсы.........................................................................300 Глава 7 Списки..............................................................................................................337 Глава 8 За дело! Действия и команды................................................................376 Глава 9 Отображение сложных данных............................................................433 Глава 10 Получение данных от пользователя: формы и элементы управления....................................................................................................471 Глава 11 Системы пользовательского интерфейса и атомарный дизайн..................................................................................529 Глава 12 По ту сторону экрана.................................................................................553 Об авторах.............................................................................................................................556 Об обложке...........................................................................................................................557 Оглавление Предисловие к третьему изданию.......................................................................15 Как появилась эта книга.............................................................................................................15 Паттерны проектирования все еще востребованы......................................................16 ПО — это система..........................................................................................................................16 Фокус: проектирование экранного взаимодействия для веб- и мобильных устройств.....................................................................................17 Что не вошло в третье издание........................................................................................17 Кому будет полезна эта книга..................................................................................................18 Структура книги.............................................................................................................................19 Введение и обсуждение модели дизайна...................................................................19 Паттерны....................................................................................................................................19 Заключение .....................................................................................................................................20 Условные обозначения...............................................................................................................20 Благодарности................................................................................................................................21 От издательства..............................................................................................................................21 Глава 1. Проектирование для людей....................................................................22 Контекст.............................................................................................................................................23 Узнайте свою аудиторию.....................................................................................................23 Взаимодействие как диалог..............................................................................................23 Соотнесите контент и функционал с потребностями аудитории.....................24 Уровень подготовки..............................................................................................................25 Интерфейс — лишь средство для достижения целей пользователя.............27 Спросите пользователей....................................................................................................27 Ценность дизайна: решите правильную проблему, а затем решите ее правильно ...........................................................................................................................28 Исследование: способы понимания контекста и целей .............................................29 Прямое наблюдение.............................................................................................................31 Изучение примеров из практики....................................................................................31 Опросы .......................................................................................................................................31 Создание персоны пользователя...................................................................................32 Оглавление Оглавление 7 Исследования в процессе разработки дизайна — это не маркетинг............32 Паттерны: познание и поведение, связанные с разработкой интерфейсов.....33 Safe Exploration (Безопасное исследование).............................................................34 Instant Gratification (Мгновенное вознаграждение)...............................................35 Satisficing (Разумная достаточность).............................................................................36 Changes in Midstream (Изменения на полпути)........................................................37 Deferred Choices (Отложенный выбор).........................................................................38 Incremental Construction (Пошаговое построение)................................................39 Habituation (Привыкание)..................................................................................................40 Microbreaks (Микроперерывы)........................................................................................42 Spatial Memory (Пространственная память)..............................................................43 Prospective Memory (Проспективная память)...........................................................44 Streamlined Repetition (Упрощенное повторение)..................................................46 Keyboard Only (Только клавиатура)................................................................................47 Social Media, Social Proof, and Collaboration (Социальные сети, социальное подтверждение и коллаборация).........................................................49 Заключение......................................................................................................................................50 Глава 2. Организация контента: информационная архитектура и структура приложений........................................................................................51 Цель.....................................................................................................................................................52 Определение...................................................................................................................................53 Проектирование информационного пространства для пользователей......53 Подход ...............................................................................................................................................53 Разграничение информации и способов ее представления .............................54 Принцип ВИСИ................................................................................................................................55 Способы организации и классификации контента........................................................55 Алфавитный способ...............................................................................................................56 Числовой способ....................................................................................................................56 Хронологический способ...................................................................................................56 По расположению..................................................................................................................56 Иерархический способ........................................................................................................57 Категорийный или фасетный способ............................................................................57 Проектирование приложений с преобладанием задач и рабочих процессов ........................................................................................................................................57 Держите часто используемые инструменты под рукой.......................................57 Разбейте процесс на несколько шагов ........................................................................58 Учитывайте потребности как новичков, так и опытных пользователей.......58 8 Оглавление Многоканальность и разнообразие размеров экранов устройств — новая реальность...................................................................................................................58 Отображение данных в виде карточек.........................................................................58 Проектирование системы типов страниц..........................................................................59 Обзор: показ списка или набора инструментов или опций .....................................60 Фокус: отображение одиночного объекта .......................................................................61 Создание: наличие инструментов для создания объектов........................................62 Действие: помощь в выполнении одиночной задачи..................................................62 Паттерны...........................................................................................................................................63 Feature, Search, and Browse (Рекомендация, поиск и обзор)...............................64 Mobile direct access (Прямой мобильный доступ)...................................................75 Streams and Feeds (Лента новостей и каналы)...........................................................78 Media Browser (Медиабраузер)........................................................................................92 Dashboard (Дашборд)........................................................................................................ 102 Canvas Plus Palette (Холст и палитра).......................................................................... 106 Wizard (Мастер) .................................................................................................................... 111 Settings Editor (Редактор настроек)............................................................................. 115 Alternative Views (Альтернативные представления)............................................ 121 Many Workspaces (Несколько рабочих пространств)......................................... 129 Help Systems (Справочные системы).......................................................................... 134 Tags (Теги)................................................................................................................................ 144 Заключение................................................................................................................................... 150 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование................................................................................................ 151 Понимание информации и пространства задач ......................................................... 152 Указатели........................................................................................................................................ 152 Ориентирование........................................................................................................................ 152 Навигация...................................................................................................................................... 153 Глобальная навигация....................................................................................................... 154 Служебная навигация........................................................................................................ 154 Ассоциативная и встроенная навигация.................................................................. 155 Сопутствующий контент................................................................................................... 155 Теги ............................................................................................................................................ 155 Социальные сети ................................................................................................................ 155 Принципы проектирования.................................................................................................. 155 Разделяйте навигационный и визуальный дизайн ............................................. 156 Умственная нагрузка ......................................................................................................... 156 Оглавление Оглавление 9 Сокращение расстояний ................................................................................................. 157 Навигационные модели ......................................................................................................... 158 Спицы колеса ....................................................................................................................... 158 Полносвязанность.............................................................................................................. 158 Многоуровневая, или древовидная, структура ................................................... 160 Пошаговая структура ........................................................................................................ 161 Пирамида ............................................................................................................................... 161 Плоская навигация ............................................................................................................ 163 Паттерны ....................................................................................................................................... 163 Clear Entry Points (Понятные точки входа)................................................................ 164 Menu Page (Страница меню)........................................................................................... 170 Pyramid (Пирамида)............................................................................................................ 176 Modal Panel (Модальная панель).................................................................................. 180 Deep Links (Глубокие ссылки)......................................................................................... 186 Escape Hatch (Аварийный выход) ................................................................................ 191 Fat Menus (Полные меню)................................................................................................ 195 Sitemap Footer (Карта сайта в подвале)..................................................................... 200 Sign-In Tools (Инструменты регистрации)................................................................ 205 Progress Indicator (Индикатор выполнения)............................................................ 208 Breadcrumbs (Хлебные крошки)................................................................................... 213 Annotated Scroll Bar (Аннотированная полоса прокрутки).............................. 217 Animated Transition (Анимированный переход).................................................... 221 Заключение .................................................................................................................................. 226 Глава 4. Организация элементов на странице................................................. 227 Основные принципы построения макета....................................................................... 227 Визуальная иерархия........................................................................................................ 227 Как сделать так, чтобы элемент выглядел важным?............................................ 228 Четыре важных принципа гештальта......................................................................... 233 Визуальный поток............................................................................................................... 236 Использование динамического отображения ...................................................... 239 Отзывчивое включение ................................................................................................... 239 Прогрессивное раскрытие ............................................................................................. 240 Области пользовательского интерфейса................................................................. 240 Паттерны ....................................................................................................................................... 242 Виды макетов......................................................................................................................... 242 Деление информации на фрагменты......................................................................... 243 Visual Framework (Визуальная структура)................................................................ 243 10 Оглавление Center Stage (Центральная сцена)................................................................................ 246 Grid of Equals (Выравнивание по сетке)..................................................................... 249 Titled Sections (Именованные разделы).................................................................... 252 Module Tabs (Автономные вкладки)............................................................................ 255 Accordion (Аккордеон)...................................................................................................... 257 Collapsible Panels (Сворачиваемые панели)............................................................ 261 Movable Panels (Перемещаемые панели)................................................................. 263 Глава 5. Визуальный стиль и эстетика............................................................... 266 Основы визуального дизайна............................................................................................... 267 Визуальная иерархия........................................................................................................ 267 Структура................................................................................................................................ 267 Цвет............................................................................................................................................ 269 Справочные материалы и ресурсы по теме «Цвет»............................................. 273 Типографика.......................................................................................................................... 273 Удобочитаемость................................................................................................................. 280 Эмоциональный отклик................................................................................................... 281 Изображения......................................................................................................................... 285 Визуальный дизайн для корпоративных приложений............................................. 287 Доступность........................................................................................................................... 288 Диапазоны визуальных стилей............................................................................................ 289 Скевоморфизм...................................................................................................................... 289 Иллюстрации......................................................................................................................... 291 Плоский дизайн.................................................................................................................... 293 Минимализм.......................................................................................................................... 295 Адаптивный/параметрический дизайн..................................................................... 297 Заключение................................................................................................................................... 299 Глава 6. Мобильные интерфейсы...................................................................... 300 Проблемы и возможности мобильного дизайна......................................................... 301 Крошечный экран................................................................................................................ 301 Разная ширина экрана...................................................................................................... 302 Сенсорные экраны.............................................................................................................. 302 Сложности при вводе текста.......................................................................................... 302 Окружающие условия ...................................................................................................... 302 Информация о местоположении................................................................................. 303 Социальное влияние и ограниченное внимание................................................. 303 Оглавление Оглавление 11 Как создать хороший мобильный дизайн....................................................................... 304 1. Выясните, что действительно нужно мобильным пользователям........... 304 2. Избавьтесь от всего лишнего.................................................................................... 304 3. Используйте аппаратные возможности устройства....................................... 305 4. Расположите содержимое линейно....................................................................... 305 5. Оптимизируйте самые частые операции ............................................................ 306 Несколько полезных примеров.................................................................................... 306 Паттерны........................................................................................................................................ 309 Vertical Stack (Вертикальный стек)............................................................................... 310 Filmstrip (Фотопленка)....................................................................................................... 314 Touch Tools (Инструменты, реагирующие на касание)....................................... 316 Bottom Navigation (Нижняя навигация).................................................................... 319 Collections and Cards (Коллекции и карточки)........................................................ 321 Infinite List (Бесконечный список)................................................................................ 325 Generous Borders (Больше воздуха)............................................................................ 327 Loading or Progress Indicators (Индикатор загрузки или Индикатор выполнения)......................................................................................... 330 Richly Connected Apps (Тесно связанные приложения)..................................... 332 Станьте мобильными................................................................................................................ 336 Глава 7. Списки...................................................................................................... 337 Когда нужны списки.................................................................................................................. 337 Возвращаясь к информационной архитектуре............................................................ 338 Что вы пытаетесь показать?................................................................................................... 340 «Где выводить подробное представление элемента списка, когда пользователь выбирает его?»........................................................................... 340 «Как выводить графические элементы?».................................................................. 341 «Как управлять очень длинным списком?»............................................................. 341 «Как выводить иерархические списки?» ................................................................. 342 Паттерны........................................................................................................................................ 342 Two-Panel Selector or Split View (Двухпанельный селектор, или Раздельный просмотр)............................................................................................. 343 One-Window Drilldown (Детализация в одном окне).......................................... 348 List Inlay (Раскрывающийся список)............................................................................ 350 Cards (Карточки)................................................................................................................... 354 Thumbnail Grid (Сетка миниатюр)................................................................................ 357 Carousel (Карусель)............................................................................................................. 361 Pagination (Разбивка на страницы).............................................................................. 365 Jump to Item (Прыжок к элементу).............................................................................. 368 12 Оглавление Alpha/Numeric Scroller (Алфавитная/числовая полоса прокрутки)............. 371 New-Item Row (Строка для нового элемента)......................................................... 372 Многообразие списков............................................................................................................ 375 Глава 8. За дело! Действия и команды.............................................................. 376 Касание, смахивание и масштабирование..................................................................... 378 Вращение и встряхивание..................................................................................................... 378 Кнопки............................................................................................................................................. 378 Строки меню................................................................................................................................. 379 Всплывающие меню.................................................................................................................. 379 Раскрывающиеся меню........................................................................................................... 379 Панели инструментов.............................................................................................................. 379 Ссылки............................................................................................................................................. 380 Панели действий........................................................................................................................ 380 Инструменты, доступные при наведении указателя мыши, или ховеры......... 380 Однократный и двойной щелчок ....................................................................................... 381 Действия с клавиатурой.......................................................................................................... 381 Сочетания клавиш............................................................................................................... 382 Порядок табуляции............................................................................................................. 382 Перетаскивание.......................................................................................................................... 382 Ввод команд.................................................................................................................................. 383 Аффорданс.................................................................................................................................... 383 Прямое манипулирование объектами............................................................................. 384 Паттерны........................................................................................................................................ 385 Button Groups (Группы кнопок)..................................................................................... 386 Hover Tools (Инструменты, доступные при наведении), или Pop-Up Tools (Всплывающие инструменты).................................................... 389 Action Panel (Панель действий)..................................................................................... 392 Prominent «Done» Button (Заметная кнопка «Готово»), или Assumed Next Step (Предполагаемый следующий шаг)............................ 398 Smart Menu Items (Умные элементы меню)............................................................. 403 Preview (Предварительный просмотр)...................................................................... 406 Spinners (Спиннеры) и Loading Indicators (Индикаторы загрузки) .............. 410 Cancelability (Возможность отмены)........................................................................... 416 Multi-Level Undo (Многоуровневая отмена)............................................................ 419 Command History (История команд)........................................................................... 423 Macros (Макрос)................................................................................................................... 426 Заключение................................................................................................................................... 432 Оглавление Оглавление 13 Глава 9. Отображение сложных данных........................................................... 433 Основы инфографики.............................................................................................................. 433 Организационные модели: как организованы данные?................................... 434 Преаттентивные элементы визуализации: что с чем связано?...................... 435 Навигация и просмотр: как изучать данные?......................................................... 439 Сортировка и перестановка: можно ли изменить порядок данных, чтобы увидеть их по-другому?...................................................................................... 441 Поиск и фильтры: покажите только то, что мне нужно...................................... 444 Фактические данные: как узнать их конкретные значения?........................... 446 Паттерны........................................................................................................................................ 447 Datatips (Всплывающие данные).................................................................................. 448 Data Spotlight (Подсветка данных).............................................................................. 452 Dynamic Queries (Динамические запросы).............................................................. 455 Data Brushing (Окрашивание данных)........................................................................ 459 Multi-Y Graph (График с несколькими осями Y)...................................................... 462 Small Multiples (Набор мини-диаграмм).................................................................... 466 Возможности визуализации данных.......................................................................... 470 Глава 10. Получение данных от пользователя: формы и элементы управления...................................................................................... 471 Основы дизайна форм............................................................................................................. 472 Дизайн форм продолжает развиваться.................................................................... 474 Что почитать еще................................................................................................................. 475 Паттерны........................................................................................................................................ 475 Forgiving Format («Великодушный» формат)........................................................... 477 Structured Format (Структурированный формат)................................................. 481 Fill-in-the-Blanks (Заполнение пропусков)................................................................ 485 Input Hints (Подсказки при вводе)............................................................................... 488 Input Prompt (Приглашение к вводу).......................................................................... 493 Password Strength Meter (Измеритель надежности пароля)............................ 496 Autocompletion (Автозаполнение).............................................................................. 502 Dropdown Chooser (Раскрывающийся селектор)................................................. 509 List Builder (Компоновщик списков)............................................................................ 514 Good Defaults (Хорошие варианты по умолчанию) и Smart Prefills (Умное предзаполнение).................................................................................................. 517 Error Messages (Сообщения об ошибках).................................................................. 521 Заключение................................................................................................................................... 528 14 Оглавление Глава 11. Системы пользовательского интерфейса и атомарный дизайн............................................................................................ 529 Системы пользовательского интерфейса....................................................................... 530 Microsoft Fluent — UI-система на основе компонентов .................................... 531 Атомарный дизайн: способ проектирования систем ............................................... 534 Обзор........................................................................................................................................ 534 Иерархия атомарного дизайна..................................................................................... 536 Фреймворки пользовательского интерфейса.............................................................. 537 Обзор........................................................................................................................................ 538 Преимущества....................................................................................................................... 538 Расцвет UI-фреймворков................................................................................................. 539 Обзор некоторых UI-фреймворков............................................................................. 539 Заключение................................................................................................................................... 552 Глава 12. По ту сторону экрана........................................................................... 553 Состав: интеллектуальные системы.................................................................................. 554 Интернет вещей................................................................................................................... 554 Системы упреждения........................................................................................................ 554 Вспомогательные системы.............................................................................................. 555 Естественные пользовательские интерфейсы....................................................... 555 Заключение................................................................................................................................... 555 Об авторах............................................................................................................. 556 Об обложке............................................................................................................ 557 Предисловие к третьему изданию «Чем сильнее меняются вещи, тем больше они остаются прежними». Приближается 15-летие со дня публикации первого издания книги «Разработка интерфейсов». А со дня выхода второго издания прошло уже 10 лет. Стоит взглянуть на то, что изменилось, а что осталось прежним, и как это отразилось на подходе к проектированию интерфейсов и пользователях. Самым значительным изменением стало бурное развитие технологий. И эта тенденция сохраняется. Мы используем программы практически везде: на работе, на отдыхе, во время учебы, в кругу общения, совершая покупки и т. д. Разнообразие устройств и вещей, которые можно подключить к Сети, ошеломляет: автомобили, умные колонки, телевизоры, игрушки, часы, дома. Размеры и типы экранов устройств также чрезвычайно разнообразны, и все большую популярность приобретают продукты с технологией управления жестами или голосом. Доступ в интернет есть более чем у половины населения планеты. Наконец, программы становятся более производительными и аналитическими. Они способны предлагать умные решения и работать самостоятельно. Одним словом, они все больше походят на нас. Подходы к проектированию интерфейсов, как и все остальное, меняются, чтобы идти в ногу со временем. Если мы попытаемся создать всеобъемлющее руководство по разработке всех возможных типов интерфейсов, постоянно усложняющихся, то оно будет огромным и его придется постоянно дополнять. Как появилась эта книга Когда нам представилась возможность выпустить третье издание книги «Разработка интерфейсов», мы были взволнованы по ряду причин. Прежде всего, нам было приятно регулярно видеть нашу книгу на столах и полках коллег и понимать, что многие годы она служит им верным помощником. Действительно, «Разработка интерфейсов» в течение полутора десятилетий служила источником информации и вдохновения для многих дизайнеров. И приложить руку к обновлению нашего труда было большой честью. Момент для этого тоже был выбран правильно. Скорость изменений в технологиях и цифровой сфере жизни резко возросла, так же как и в дизайне. Книгу необходимо было обновить. У нас было две цели: выдвинуть на первый план то, что делает эту книгу особенной, а затем заострить внимание на важных деталях. 16 Предисловие к третьему изданию Мы сошлись на необходимости в новом руководстве, которое помогло бы разобраться в современном состоянии разработки программного обеспечения. Мы хотели написать подробный путеводитель, который всегда был бы под рукой у дизайнеров всех мастей, от новичков до опытных разработчиков. Несмотря на то что в одной книге уже невозможно охватить все новые цифровые каналы и направления, мы все же хотели составить руководство, которое раскрывало бы основы проектирования взаимодействий так, как мы понимаем его сегодня. По этой причине мы решили сосредоточиться на проектировании экранного взаимодействия для веб- и мобильных устройств. О том, что не вошло в новое издание, вы узнаете ниже. Наконец, мы хотели предложить нестандартную точку зрения. Паттерны проектирования в первую очередь делают руководство «Разработка интерфейсов» уникальным и актуальным. Мы добавили несколько собственных паттернов, в частности учли те факторы человеческого познания и поведения, которые влияют на результаты разработки. Мы надеемся, что наша книга откроет паттерны проектирования для новой аудитории. Паттерны проектирования все еще востребованы Мы спросили себя: почему дизайн и наша книга все еще востребованы? Ответ заключается в паттернах проектирования. Они основаны на способах восприятия и использования программных инструментов. Чувства людей и психология не меняются, и эти паттерны работают с ними, а не против них. Кроме того, они основаны на задачах, крупных и второстепенных, которые люди стремятся выполнять с помощью программ: ввод данных, создание цифровых объектов и управление ими, управление финансами и обработка платежей, а также отправка и получение сообщений и файлов. Паттерны образуют фундамент любого пользовательского интерфейса. Более того, осмысление в терминах паттернов и поиск новых паттернов во многом соответствует тому, как сегодня осуществляется проектирование программ и взаимодействия. ПО — это система В распоряжении дизайнеров, предпринимателей, разработчиков и компаний сегодня имеется невиданный арсенал эффективных инструментов для разработки и создания качественных программ. Современный подход к дизайну подразумевает использование систем, модулей и компонентов. Разрабатывать или кодировать что-то совершенно новое уже не обязательно. Существует множество наборов инструментов и методов, которые позволяют быстро создавать интерфейсы для экранов любого разрешения. Эти библиотеки компонентов можно положить в основу любой разработки и выстраивать на этой основе дизайнерские инновации. Сервисы и межплатформенные средства, которые обеспечивают функционирование программ, чаще всего представляют собой интеграцию отдельных ПО — это система 17 управляемых инструментов. Зачем разрабатывать собственную систему регистрации, если можно зарегистрироваться в Google, Facebook и на других платформах? Зачем разрабатывать собственное ПО для анализа и создания отчетов, когда можно интегрировать подходящий набор надежных, настраиваемых платформ бизнес-аналитики? Зачем создавать собственную мобильную платформу, если у нас уже есть Amazon Web Services? То же касается HR-процессов и IT-инфраструктуры. Мы все чаще пользуемся готовым, а не создаем новое. Фокус: проектирование экранного взаимодействия для веб- и мобильных устройств Мы решили сделать акцент на проектировании экранов для веб- и мобильных устройств, поскольку они составляют основную часть устройств, которыми мы пользуемся сегодня. Экраны окружают нас везде, и их количество будет только расти. При этом сложность контента, выводимого на экраны, значительно возрастает. Поэтому навыки проектирования интерфейсов и потребность в дизайнерах будут все более актуальны. Мы переработали главы, посвященные визуальному дизайну и проектированию взаимодействия, чтобы сосредоточиться на фундаментальных теориях и практиках, которые помогают создать качественную платформу. Остальная часть книги посвящена обсуждению паттернов и способов их применения. Мы обновили паттерны, примеры и пояснения, которые показывают, насколько они актуальны сегодня. Что не вошло в третье издание Мы намеренно не стали затрагивать новые сферы. Не потому, что они не важны, а скорее потому, что их паттерны все еще развиваются, и задачи при работе с ними весьма специфичны. Это по сути отдельные области дизайна, которым посвящено уже множество книг. Чтобы углубиться в эти области, поищите специализированное издание. Голосовое управление Мы говорим с телефонами, автомобилями и умными колонками, чтобы они делали то, что нам нужно. Мы ведем диалог с машинами. Чтобы узнать больше о разработке голосовых интерфейсов, рекомендуем прочесть книгу Кэти Перл «Designing Voice User Interfaces: Principles of Conversational Experiences» (издательство O’Reilly, 2017). Соцсети Социальные сети уже давно не просто способ поддерживать связь с друзьями и членами семьи. Это обязательный уровень коммуникации, обсуждений и взаимодействия почти для всех программ. Соцсети произвели революцию в сфере делового общения и производительности. Подробнее об этом можно узнать в книге «Designing Social Interfaces: Principles, Patterns, and Practices 18 Предисловие к третьему изданию for Improving the User Experience» Кристиана Крамлиша и Эрин Мэлоун (издательство O’Reilly, 2015). Стриминговые сервисы То, что мы привыкли называть телевидением, теперь представляет собой стриминговые площадки для просмотра видео на любом устройстве по нашему выбору. Интерфейс в этой сфере давно используется не только для поиска и просмотра. Телевизор теперь тоже своего рода приложение, имеющее доступ ко всем функциям и возможностям наших устройств. Чтобы узнать больше об этой сфере, прочтите книгу «Designing Multi-Device Experiences: An Ecosystem Approach to User Experiences across Devices» Михала Левина (издательство O’Reilly, 2014). Виртуальная/дополненная/смешанная реальность Интерфейсы и программы становятся дополнением физического мира или же самостоятельной новой реальностью. Очки виртуальной реальности и другие устройства позволяют нам дополнять цифровой мир тем, что мы видим перед собой. Чтобы узнать больше, прочтите книгу Эрин Пангилинан и др. «Creating Augmented and Virtual Realities: Theory and Practice for Next-Generation Spatial Computing» (издательство О’Reilly, 2019). Чат-боты и голосовые помощники Голосовые помощники, очень похожие на людей, теперь ежедневно разговаривают с нами в мессенджерах или в чатах. Эти чат-боты понимают разговор и реагируют на него самым естественным образом. Благодаря программам, которые распознают закономерности в данных и речи, а затем обучаются и совершенствуются, чат-боты способны обрабатывать практически любые простые информационные запросы и выполнять базовые задачи. Чтобы достичь подобного результата, дизайнеры организуют совокупность исходных данных, а также фреймворки и сценарии для обучения и практического применения. Если вы захотите узнать больше о разработке ботов и диалогов, вам пригодится книга «Designing Bots» Амира Шевата (издательство O’Reilly, 2017). Естественные пользовательские интерфейсы на основе жестов, а не касаний Эта развивающаяся область проектирования специализируется на взаимодействии человека с интерфейсом с помощью жестов и движений. Устройства, которые вы можете держать или сжимать или которыми вы можете махать, функции, активируемые движением рук, ног или перемещением в пространстве. Кому будет полезна эта книга Мы надеемся, что «Разработка интерфейсов» будет полезна как как тем, кто уже знаком с предыдущим изданием, так и новой аудитории. Мы создали эту книгу для самых разных людей — начинающих дизайнеров, работников Структура книги 19 среднего звена и менеджеров, профессионалов и руководителей. Она для тех, кто хочет учиться, быть в курсе всех изменений, вдохновиться и взглянуть на свою сферу по-новому. Она для команд, сообществ и отдельных людей. Она для дизайнеров, создающих интерфейсы взаимодействия, архитекторов, дизайнеров продуктов и графических интерфейсов, менеджеров по продуктам, разработчиков, инженеров по контролю качества, специалистов по стратегии, лидеров, консультантов, преподавателей, студентов и всех, кто заинтересован в разработке качественных программных средств. Структура книги Эта книга состоит из 12 глав — новых или значительно обновленных. Сами главы в основном содержат две части. Введение и обсуждение модели дизайна Первая половина каждой главы посвящена введению в тему и ее разбору. Она включает обсуждение теории и практики проектирования интерфейса, который относится к теме главы. Здесь рассматриваются принципы проектирования, руководства и рекомендуемые практики. Первая часть задает контекст для второй половины главы. Паттерны Паттерны — это конкретные наборы компонентов и функций, которые делают продукт более удобным и эффективным. Вторая половина каждой главы посвящена выбору паттернов для создания продукта. Но список их далеко не полный. На самом деле их гораздо больше. Каждый паттерн структурирован следующим образом: Что это Определение паттерна. Когда использовать В этом разделе рассматриваются различные сценарии использования паттерна, объясняется контекст использования, а также особые случаи и исключения. Зачем В этом разделе анализируются назначение и преимущества паттерна и указывается, кому этот паттерн будет полезен и каким образом. 20 Предисловие к третьему изданию Как Этот раздел касается дизайна самого паттерна и средств его реализации. Здесь в общих чертах обрисовываются способы сделать паттерн отвечающим всем требованиям пользователя. Примеры В последнем разделе приводятся снимки экрана различных веб- и мобильных приложений, демонстрирующие практическое применение паттерна. Каждый пример описан и проанализирован. Заключение Еще никогда столько специалистов, как сейчас, не занимались разработкой и проектированием интерфейсов. В их распоряжении все необходимые инструменты. Им необходимо актуальное руководство для создания продуктов, которые легко понять и использовать. Мы хотели создать гайд по веб-дизайну и проектированию мобильных приложений, который всегда будет под рукой у начинающих дизайнеров, менеджеров по продукту, инженеров и руководителей. Мы надеемся, что эта книга станет полезным справочником, формирующим представление об общих принципах проектирования интерфейсов. Программы и приложения стали неотъемлемой частью жизни потребителя. Люди проводят небывалое количество времени, работая с ними. Эти средства призваны делать жизнь проще. И хотя постоянно возникают новые устройства и форматы, мы в основном имеем дело с экранами и будем иметь еще долгое время. Мы печатаем на них или касаемся их, чтобы работать или развлекаться, найти что-то, купить или чему-то научиться. Мы надеемся, что методики и примеры, приведенные в этой книге, помогут вам уверенно использовать паттерны проектирования, чтобы создавать качественные продукты и услуги с удобным и дружественным интерфейсом. — Дженифер Тидвелл, Чарли Брюэр и Эйнн Валенсия Условные обозначения В этой книге используются следующие условные обозначения: Курсивный шрифт Для названий паттернов, новых терминов, URL-адресов, адресов электронной почты, имен файлов и расширений файлов. От издательства 21 Моноширинный шрифт Используется для оформления исходного кода, а также внутри абзацев для обозначения программных элементов, таких как имена переменных или функций, баз данных, типов, переменных, операторов и ключевых слов. Благодарности Мы благодарим наших технических рецензентов: Эрин Мэлоун, Кейт Раттер, Фрэнсис Клоуз, Кристи Эннис Клоут, Мэтью Рассела и Джорджа К. Абрахама. Спасибо Кристиану Крамлишу за предоставленную возможность выпуска этой книги. И большое спасибо Анжеле Руфино и Дженнифер Поллок из O’Reilly. Эйнн Валенсия: Я хотела бы поблагодарить отличных преподавателей курса IxD@CCA и студентов, которых я обучала в SFSU, CCA и GA на протяжении многих лет: вы — мой постоянный источник вдохновения и вселяете в меня большие надежды на будущее. И больше всего я благодарю своего мужа, Дона Брукса, за то, что он был моим партнером в путешествиях и за то, что всегда был согласен на все. Чарли Брюэр: Я хотел бы поблагодарить сотрудников издательства O’Reilly за предоставленную возможность попробовать что-то новое в профессиональном плане, продакт-менеджеров SpaceIQ за гибкость и особенно свою семью и друзей, которые поддерживали меня все это время. От издательства Для всех паттернов в книге приведены как оригинальные названия на английском языке, так и эквиваленты на русском. Чтобы посмотреть некоторые рисунки в цветном варианте, воспользуйтесь QRкодом, расположенным рядом с рисунком. Ваши замечания, предложения, вопросы отправляйте по адресу comp@piter.com (издательство «Питер», компьютерная редакция). Мы будем рады узнать ваше мнение! На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах. ГЛАВА 1 Проектирование для людей Эта книга почти полностью посвящена внешнему виду и поведению десктопных приложений, веб-приложений и интерактивных устройств. Но первая глава — исключение из правила. В ней вы не встретите ни скриншотов, ни макетов, ни навигации, ни диаграмм и визуальных эффектов. Почему? В конце концов, возможно, именно поэтому вы и взяли эту книгу в руки. В этой главе мы описываем цель и понимание того, как люди используют программы. В частности, что имеет для них решающее значение, когда речь заходит о разработке сайтов, приложений и интерфейсов: общие цели использования сайта или приложения; сортировка задач для выполнения этих целей; что пользователи думают о конкретном предмете или предметной области; язык, который они используют, чтобы описать их; в какой степени они обладают навыками, необходимыми для выполнения работы; их отношение к предмету. Хороший дизайн начинается не с картинки. Он начинается с понимания аудитории: кто в нее входит, почему она использует ту или иную программу и как она может взаимодействовать с этой программой. Чем больше вы знаете о своей аудитории и чем больше вы ее понимаете, тем эффективнее будет дизайн, который вы для нее создадите. В конце концов, программа — это лишь средство достижения цели для людей, которые ее используют. Чем лучше вы удовлетворяете этим целям, тем счастливее будут ваши пользователи. Далее мы рассмотрим общую схему достижения такого результата. Она охватывает четыре сферы. Это не строгие правила или требования для создания хорошего дизайна. Это всего лишь план получения знаний для себя и своей команды в каждой области, но он даст вам уверенность в том, что ваша работа основана на реальном понимании потребностей аудитории. Решите для себя, Контекст 23 сколько времени и усилий вы готовы уделить работе над проектом. Регулярно возвращайтесь к этим четырем сферам — это позволит держать ключевые принципы в уме и сосредоточить усилия всех участников процесса, в частности дизайнеров интерфейса, на создании качественного продукта для людей. Эта структура выглядит так: Контекст — кто составляет вашу аудиторию? Цели — чего они хотят? Исследование — способы понимания контекста и целей. Паттерны — знание и поведение, связанное с дизайном интерфейса. Контекст Первым важным элементом и первым шагом в разработке дизайна интерфейсов, ориентированного на пользователя, является понимание контекста своей работы. Проектирование взаимодействия с пользователем начинается с выявления и понимания людей, которые будут использовать ваш продукт. В частности, основывайте свои решения на том, какие действия могут совершать пользователи, чего они ждут от работы с приложением, каковы их знания в предметной области, а также насколько высок их уровень технической подготовки. Узнайте свою аудиторию UI-дизайнеры1 часто говорят: «Дизайнер — не пользователь». Итак, в этой главе мы поговорим о пользователях. Во введении кратко рассмотрим основные идеи, а затем обсудим модели, отличные от тех, что представлены в остальной части книги. Они описывают поведение человека, которое — в отличие от поведения системы — должны поддерживать программы, которые вы разрабатываете. Интерфейс, моделирующий человеческое поведение, гораздо эффективнее помогает пользователям достигать своих целей. Взаимодействие как диалог Каждый раз, когда кто-то использует приложение или любой цифровой продукт, он ведет диалог с машиной. Этот диалог может быть словесно оформленным, как в командной строке или меню смартфона, или неявным, как «разговор» художника со своими красками и холстом — акт обмена между мастером и создаваемым им произведением искусства. При использовании социального ПО этот диалог может даже вестись через представителя. Как бы то ни было, пользовательский интерфейс служит в нем посредником, помогая пользователю решить любые свои задачи. 1 UI (User Interface) — пользовательский интерфейс. — Примеч. ред. 24 Глава 1. Проектирование для людей Вот ключевые моменты: в разговоре два участника: человек и программа; происходит постоянный обмен информацией в обоих направлениях; обмен — это серия запросов, команд, прием, обработка и ответ; человек в разговоре нуждается в непрерывной обратной связи, которая подтверждает, что все работает нормально, входные данные обрабатываются, участники успешно движутся к цели; чтобы этот цикл обратной связи работал, программное обеспечение, которое не может быть таким же спонтанным и отзывчивым, как человек (по крайней мере, пока), должно идеально имитировать собеседника. Оно должно быть понятным партнеру по диалогу, демонстрировать активность (когда выступает в роли «слушателя»), и его ответы должны быть очевидными. Еще один важный аспект — умение подсказать последующие шаги или дать рекомендации, точно так же, как отзывчивый человек проявляет внимание к другому. Как разработчик пользовательского интерфейса, вы можете написать сценарий этого диалога или, по крайней мере, задать его условия. И если вы собираетесь писать сценарий, вам необходимо понять участника-человека как можно лучше. Каковы мотивы и намерения пользователя? Какой набор слов, знаков, жестов он использует? Как приложение может верно предугадать его действия? Как пользователь и машина в конечном итоге начинают осмысленно общаться друг с другом? Соотнесите контент и функционал с потребностями аудитории Прежде чем приступить к проектированию, проанализируйте свой подход. Подумайте о том, каким может быть общий стиль взаимодействия для интерфейса — его персонализация, если хотите. Когда вы говорите с кем-то на определенную тему, вы корректируете свои слова в соответствии с представлением о собеседнике. Вы можете оценить, насколько его интересует данная тема, хорошо ли он в ней разбирается, готов ли он узнать что-то новое от вас и заинтересован ли в разговоре вообще. Если вы ошибетесь в одной из этих оценок, продуктивный диалог не состоится: человек может почувствовать, что вы ведете себя покровительственно, незаинтересованно, нетерпеливо или совершенно сбиваете его с толку. Эта аналогия приводит к некоторым очевидным советам по проектированию. Например, тематический лексикон, который вы используете в своем интерфейсе, должен соответствовать уровню знаний пользователей. Если пользователи не знают значения каких-то слов, дайте им возможность изучить незнакомые термины. Если они не очень хорошо знакомы с компьютером, не заставляйте их изучать сложные виджеты или нестандартные элементы интерфейса. Если Контекст 25 уровень их интереса недостаточно высок, учитывайте это и не требуйте от них чрезмерных усилий. Некоторые из этих проблем затрагивают весь дизайн интерфейса. Например, ожидают ли ваши пользователи краткого, сосредоточенного обмена мнениями о чем-то очень конкретном или они предпочитают беседу, которая больше похожа на свободный диалог? Другими словами, насколько интерфейс открыт для пользователя? Если недостаточно, то пользователи почувствуют себя ограниченными в свободе действий и неудовлетворенными; если чересчур — то они окажутся в растерянности, что делать дальше, поскольку они не подготовлены к такому уровню взаимодействия. Поэтому вам нужно определить степень свободы действия для пользователей. На одном полюсе может находиться мастер установки программного обеспечения: пользователь взаимодействует с ним, не имея возможности использовать чтолибо, кроме кнопок «Далее», «Назад» или «Закрыть». Он предельно ограничивает свободу действий, но довольно эффективен, быстр и удовлетворяет требованиям пользователя. На другом может быть приложение, такое как Excel, интерфейс типа «открытая планировка», который содержит огромный набор функций в одном месте. В любой момент времени пользователю доступны сотни вариантов дальнейших действий, и это для него несомненный плюс, поскольку самостоятельные, опытные пользователи могут сделать очень многое с этим интерфейсом. И он тоже удовлетворяет их требованиям, но по совершенно другим причинам. Уровень подготовки Насколько полноценно аудитория может использовать ваш интерфейс сейчас и сколько усилий пользователи готовы приложить, чтобы изучить его? Кто-то может использовать его ежедневно на работе и очевидно со временем станет опытным пользователем. Но даже незначительные несоответствия ожиданиям начнут все больше и больше раздражать. Возможно, кто-то будет использовать его время от времени и изучит только в той степени, которой достаточно, чтобы добиться необходимого результата. В таком случае терпимость к недостаткам будет выше. А кто-то воспользуется им только один раз. Признайтесь честно: ждете ли вы, что большинство пользователей станут опытными или экспертами или подразумеваете, что они так и останутся вечными новичками? Вот примеры программ, предназначенных для пользователей среднего и профессионального уровня: Photoshop; Excel; среды разработки кода; инструменты системного администрирования для веб-серверов. 26 Глава 1. Проектирование для людей Напротив, вот некоторые продукты, предназначенные для использования от случая к случаю: информационные панели в туристических центрах или музеях; элементы управления Windows или macOS для настройки фона рабочего стола; страницы интернет-магазинов; мастеры установки; автоматические кассовые аппараты. Различия между этими двумя группами огромны. Эти интерфейсы основаны на предположении о степени знакомства пользователя с инструментом, выражающейся в том, как он использует экранное пространство, сложные ярлыки и виджеты, места, где предлагается (или не предлагается) помощь. Приложения первой группы обладают большим количеством сложных функ­ циональных возможностей, но они обычно не ведут пользователя к выполнению задачи шаг за шагом. Предполагается, что пользователи уже знают, что делать, поэтому такие приложения оптимизированы для эффективной работы без обучения. Они, как правило, ориентированы на документы или списки (с небольшим числом приложений командной строки). О них написаны целые книги и курсы, но информация зачастую неполная. Приложения второй группы совершенно другие, они ограничены в функциональности, но подробно ее описывают. Их интерфейс упрощен и предполагает, что пользователь не знаком с элементами стиля приложений первой группы (строками меню, множественным выбором и т. д.). В них обычно используются «мастеры», снимающие с пользователя необходимость фокусировать внимание. Главное то, что у пользователей нет мотивации тщательно изучать эти приложения, обычно это просто того не стоит! Теперь, когда мы познакомились с двумя крайностями, рассмотрим золотую середину: Microsoft PowerPoint; почтовые приложения; Facebook; инструменты для написания блогов. Правда в том, что большинство приложений находятся именно здесь. Им необходимо соответствовать запросам обеих категорий пользователей — помогать новичкам изучить инструмент (и удовлетворить их потребность в мгновенном обучении) и при этом позволять опытным пользователям работать четко. Их дизайнеры, вероятно, знали, что люди не будут проходить трехдневный курс обучения работе с почтовым приложением. И все же интерфейсы выдерживают Контекст 27 многократное использование. Люди быстро изучают основы, достигают необходимого уровня мастерства и не утруждают себя изучением большего, пока у них нет мотивации делать это с конкретными целями. Возможно, когда-нибудь вам придется выбирать между двумя полюсами этой шкалы. Естественно, вы хотите, чтобы люди могли использовать ваш продукт с ходу, но вы можете захотеть включить в него инструменты и для более продвинутых пользователей. Найдите подходящий баланс. Организационные паттерны, описанные в главе 2, такие как справочные системы, могут помочь вам удовлетворять потребности обеих групп. Интерфейс — лишь средство для достижения целей пользователя У каждого, кто использует инструмент — программу и т. д., — есть свои на то причины. Это цели пользователя. Например: поиск фактов или объектов; изучение чего-либо; заключение сделки; контроль или мониторинг; создание чего-либо; общение с другими людьми; развлечение. Известные идиомы, поведение пользователей и паттерны проектирования могут поддерживать каждую из этих абстрактных целей. UX-разработчики1 выяснили, например, как помочь людям среди огромного количества информации в интернете искать нужную. Они научились представлять задачи так, чтобы их было легко выполнять. Они изучают способы поддержки создания документов, иллюстраций и кода. Спросите пользователей Первый шаг в разработке интерфейса — понимание того, что на самом деле пытаются сделать пользователи. Заполнение формы, например, почти никогда не является самоцелью — люди делают это только потому, что они пытаются купить что-то в интернете, обновить водительские права или установить программу. Они заключают сделку. Задавая правильные вопросы, вы можете связать цели пользователя с процессом разработки. Пользователи и клиенты обычно говорят с вами на языке желаемых функций и решений, а не потребностей и проблем. Когда пользова1 UX (User eXperience) — пользовательский опыт. — Примеч. ред. 28 Глава 1. Проектирование для людей тель или клиент говорит вам, что ему нужна определенная функция, спросите, почему именно она ему нужна, определите его ближайшую цель. А потом, получив ответ на этот вопрос, еще раз спросите почему. И еще. Продолжайте спрашивать, пока не выйдете далеко за рамки непосредственной задачи проектирования1. Ценность дизайна: решите правильную проблему, а затем решите ее правильно Почему нужно задавать эти вопросы, если у вас есть четкие требования? Потому что, если вы любите разрабатывать интерфейсы, вы легко можете столкнуться с интересной проблемой. Может быть, у вас хорошо получается создавать формы, которые запрашивают только то, что нужно запрашивать, и содержат только нужные элементы управления, а еще красивы и понятны. Но настоящее искусство дизайна интерфейса заключается в решении истинной задачи, определяемой как помощь пользователю в достижении своей цели. Так что не слишком увлекайтесь проектированием форм. Если можно избавить пользователя от заполнения формы, избавьте. Это приблизит пользователя к цели быстрее и с меньшими усилиями с его стороны (и, возможно, с вашей тоже). Давайте используем подход «зачем», чтобы глубже рассмотреть некоторые типичные сценарии проектирования: Зачем менеджеру среднего звена почтовое приложение? Правильно, чтобы читать электронную почту. Но зачем они вообще читают и отправляют электронную почту? Чтобы общаться с другими людьми. Конечно, другие средства могут достичь тех же целей: телефон, разговор в коридоре, официальный документ. Но, по-видимому, электронная почта удовлетворяет какие-то потребности, для которых другие способы не подходят. Что это за потребности и почему они важны для этого менеджера? Удобство выбирать, когда отправлять или отвечать? Конфиденциальность? Возможность сохранить историю разговора? Социальная условность? А что еще? Отец заходит на сайт турагентства, выбирает город, в котором его семья будет отдыхать летом, и пытается найти цены на билеты на самолет на разные даты. Он получает информацию из того, что находит, но его цель — не просто просматривать и исследовать различные варианты. Спросите зачем. Его целью на самом деле является сделка: купить билеты на самолет. Опять же, 1 Это тот же принцип, который лежит в основе хорошо известной техники, называемой анализом первопричин. Но анализ первопричин — это инструмент для исправления организационных ошибок; здесь же мы используем методику «Пять почему» (в некоторой степени), чтобы понять повседневное поведение пользователей и их запросы на те или иные функции. Исследование: способы понимания контекста и целей 29 он мог бы сделать это на многих других сайтах или поговорив по телефону с живым турагентом. Чем этот сайт лучше других вариантов? Это быстрее? Удобнее? Больше шансов найти выгодное предложение? Иногда анализа цели действительно недостаточно. Сайт, посвященный сноу­ бордингу, может содержать в себе информацию (для обучения), интернетмагазин (для сделок) и набор видеоклипов (для развлечения). Предположим, что кто-то заходит на сайт для покупки, но отвлекается на информацию о трюках на сноуборде — он переключил внимание с заключения сделки на просмотр и обучение. Может быть, он снова начнет что-то покупать, а может быть и нет. И действительно ли раздел, посвященный стилю жизни и развлечениям, интересен как 12-летним, так и 35-летним? Перейдут ли 35-летние люди на другой сайт, чтобы купить новую доску, если им некомфортно на этом, или им все равно? Полезно расширить рамки целей, чтобы включить в них понимание специфического цикла покупки. У вашего клиента будут разные цели на разных этапах этого цикла. С другой стороны, возможно, вы захотите разработать способ установления долгосрочных взаимоотношений между брендом и клиентом. Это можно реализовать с помощью контента и функционала, которые помогают формировать идентичность, создавать сообщества и определяют стиль жизни. Обманчиво легко представлять пользователей как единую безликую сущность — «пользователя», проходящего через набор простых вариантов использования инструмента с одной целью. Это не всегда будет отражать реальность. Чтобы разработать хороший дизайн, вам нужно учитывать множество «мягких» факторов: ожидания, внутренние реакции, предпочтения, социальный контекст, убеждения и ценности. Все они могут повлиять на дизайн приложения или сайта. Среди этих «мягких» факторов вы можете обнаружить критическую функцию или фактор дизайна, который делает ваше приложение более привлекательным в глазах пользователя. Так что будьте любопытны. Сосредоточьтесь на выяснении того, кем являются ваши пользователи на самом деле и что они действительно думают и чувствуют. Исследование: способы понимания контекста и целей Исследование — это отправная точка в понимании людей. Эмпирическое исследование — единственный действительно хороший способ получить информацию о них. Качественные исследования, такие как интервью один на один, дают основу для понимания ожиданий аудитории, ее словарного запаса и того, как люди думают о своих целях или структурируют свою работу. Вы можете обнаружить закономерности в том, что слышите. Это ваши ориентиры в работе над дизайном. Количественные исследования, такие как опрос, могут дать численное подтверждение или опровержение ваших выводов. 30 Глава 1. Проектирование для людей Чтобы начать разработку, вам потребуется классифицировать людей, которые будут использовать ваш дизайн (с учетом вышеупомянутых «мягких» факторов), и лучший способ сделать это — поговорить с ними. Разумеется, каждая группа пользователей уникальна. Целевая аудитория, скажем, нового приложения для мобильного телефона будет резко отличаться от целевой аудитории научного программного обеспечения. Даже если один и тот же человек использует оба инструмента, его ожидания для каждого из них различны — исследователь, использующий научное программное обеспечение, может мириться с менее отшлифованным интерфейсом в обмен на высокую функциональность, в то время как этот же человек может прекратить пользоваться мобильным приложением, если через несколько дней поймет, что его интерфейс слишком сложен. Каждый пользователь тоже уникален. То, что одному человеку кажется трудным, у другого сложностей не вызывает. Хитрость заключается в том, чтобы выяснить, что действительно представляют собой пользователи. Это означает, что необходимо изучить достаточное их количество, чтобы отделить редкие причуды от общих моделей поведения. В частности, вам понадобится узнать: с какой целью они используют ПО или сайт; конкретные задачи, которые они решают, чтобы достичь этих целей; язык, который они используют для описания своих действий; их навыки использования программ, подобных той, что вы разрабатываете; их отношение к тому, что вы разрабатываете, и как варианты дизайна могут повлиять на это отношение. Я не дам вам ответа на вопрос, кто ваша целевая аудитория. Вам необходимо выяснить, каким образом она может работать с программой или сайтом и как они вписываются в общую картину их жизни. Как бы трудно это ни было, постарайтесь описать свою потенциальную аудиторию с точки зрения того, как и для чего они могут использовать вашу программу. У вас могут получиться разные ответы для разных групп пользователей, это нормально. У вас может возникнуть искушение развести руками и сказать: «Я не знаю, кто мои пользователи» или «Каждый может быть пользователем». Но без точного и верного описания аудитории ваш проект не будет иметь опоры в реальности. Этап определения целевой аудитории будет занимать время и ресурсы на начальной стадии разработки, особенно если вы действительно не знаете, кто она и зачем ей ваш продукт. Это инвестиция. Это стоит вложений, потому что понимание, которое вы и команда получаете, создает долгосрочную окупаемость: решение актуальных проблем и соответствие цели. Исследование: способы понимания контекста и целей 31 К счастью, сейчас существует множество книг, курсов и методик, которые помогут вам. Хотя эта книга не посвящена исследованию пользователей, ниже мы рассмотрим некоторые методы и темы из этой области. Прямое наблюдение Интервью и работа с пользователями на местах погружают вас в мир пользователей. Вы можете спросить их о том, каковы их цели и какие задачи они обычно выполняют. Интервью обычно проводятся «на месте», где люди используют программу (например, на работе или дома), и могут быть структурированными — с заранее определенным набором вопросов — или неструктурированными, когда вы задаете вопросы на любую тему. Интервью дают вам гибкость, вы можете провести их много или всего несколько, подробных или кратких, официальных или неофициальных, по телефону или лично. Это прекрасная возможность узнать то, чего вы еще не знаете. Спросите «зачем?». Спросите еще раз. Изучение примеров из практики Анализ примеров из практики позволяет получить глубокое, детальное представление о типичных представителях пользователей или группы пользователей. Иногда эту технику можно использовать для изучения «нестандартных» пользователей, которые расширяют возможности программного обеспечения, особенно когда целью является новый дизайн существующего ПО. Ее также можно использовать в долговременных исследованиях, изучая, как используют продукт в течение месяцев или даже лет. Наконец, если вы разрабатываете специализированный инструмент под одного заказчика, вы захотите узнать как можно больше о реальном контексте его использования. Опросы Письменные опросы помогают получать информацию от пользователей. Благодаря им можно сформировать статистически значимую выборку респондентов. Хотя из-за отсутствия прямого контакта с человеком вы упустите много дополнительной информации — вы не узнаете о том, о чем не спросите, — вы можете очень ясно представить некоторые характеристики своей целевой аудитории. Тщательное планирование исследования чрезвычайно важно. Если вам нужны наглядные цифры, а не «ощущение» целевой аудитории, вам просто необходимо правильно сформулировать вопросы, отобрать подходящих респондентов и верно проанализировать ответы, и это целая наука. Некоторые дополнительные рекомендации о том, как составить хорошие вопросы для исследования, вы найдете здесь: Writing Good Survey Questions (oreil.ly/P5o1n) Questionnaire Design Tip Sheet (oreil.ly/7vbqD) 32 Глава 1. Проектирование для людей Создание персоны пользователя Создание персон — это не метод сбора данных, но оно поможет вам понять, что делать с ними после того, как вы их получите. Это дизайнерская техника, которая моделирует целевую аудиторию. Для каждой значимой группы пользователей вы создаете вымышленного ее представителя, или «проточеловека», которому присваиваете наиболее важные свойства пользователей в этой группе: задачи, которые они пытаются выполнить, их конечные цели и уровень их опыта в предметной области и владения компьютером в целом. Персоны могут помочь вам сохранить верное направление. В ходе работы вы можете задавать себе, например, такие вопросы: «Действительно ли этот вымышленный человек выполнит действие X? Или он сделает что-то другое?». Исследования в процессе разработки дизайна — это не маркетинг Вы могли заметить, что некоторые из этих методик, например интервью и опросы, подозрительно напоминают маркетинговые, поскольку тесно связаны с ними по своей природе. Фокус-группы, например, могут быть полезны, но будьте с ними осторожны. В условиях группы говорить будут не все, доминировать в обсуждении могут только один-два человека, тем самым искажая ваше представление. Существует также очень надежная маркетинговая практика сегментации рынка. Она похожа на определение целевой аудитории, используемое здесь, только сегменты рынка определяются демографическими, психографическими и другими характеристиками. А целевые группы с точки зрения разработки пользовательских интерфейсов определяются целями, задачами и поведением этих групп. В обоих случаях цель — понять аудиторию как можно лучше. Разница в том, что как дизайнер вы пытаетесь понять людей, которые используют программы. Маркетолог же пытается понять тех, кто программы покупает. Нелегко понять реальные потребности, лежащие в основе взаимодействия пользователей с системой. Пользователи не всегда владеют языком или интроспективными навыками, чтобы объяснить, что им действительно нужно для достижения своих целей, и от вас как от дизайнера требуется много усилий, чтобы извлечь пользу из того, что они могут вам рассказать — наблюдения с самоотчетами обычно предвзяты. Некоторые из этих методов формальны, а некоторые нет. Формальные и количественные методы ценны, поскольку они очень эффективны. При правильном применении они помогают видеть мир таким, каков он есть на самом деле, а не таким, каким вы его себе представляете. Если вы проводите исследования пользователей бессистемно, без учета таких аспектов, как самоотбор, то можете получить данные, которые не отражают вашу фактическую целевую аудиторию, — и это только навредит вашему дизайну в долгосрочной перспективе. Паттерны: познание и поведение, связанные с разработкой интерфейсов 33 Но даже если у вас нет времени на формальные методы, лучше просто организовать несколько неформальных встреч с пользователями, чем не вести никаких исследований вообще. Общение с пользователями полезно для души. Если вы способны сопереживать им и представлять себе, что эти люди действительно используют ваш интерфейс, вы создадите гораздо более качественный продукт. Паттерны: познание и поведение, связанные с разработкой интерфейсов Следующие паттерны являются одними из наиболее распространенных способов мышления и поведения людей в отношении программных интерфейсов. Даже при том, что личность уникальна, люди в целом ведут себя предсказуемо. Дизайнеры уже многие годы заходят на сайты и наблюдают за пользователями, когнитивисты и другие исследователи провели бесчисленное количество часов, наблюдая за тем, как люди совершают поступки и как они думают о своих действиях. Поэтому, когда вы наблюдаете за людьми, использующими вашу программу или делающими что-то, для чего вы хотите создать новый программный инструмент, вы ожидаете от них определенных моделей поведения. Следующие паттерны часто наблюдаются в поведении пользователей. Велика вероятность, что вы их тоже увидите, особенно если будете искать. ПРИМЕЧАНИЕ Для всех любителей паттернов: эти паттерны не похожи на те, что будут обсуждаться в следующих главах нашей книги. Они описывают человеческое поведение, а не элементы дизайна интерфейса, и они не являются предписывающими, как те, что рассматриваются в других главах. Вместо структурного представления, как это сделано для других паттернов, здесь дано их краткое описание. Повторюсь, интерфейс, который поддерживает эти паттерны, поможет пользователям достичь своих целей гораздо эффективнее, чем интерфейсы, которые их не поддерживают. И паттерны имеют значение не только для разработки интерфейса. Иногда весь пакет: интерфейс, базовую архитектуру, выбор функций, документацию, — все необходимо рассматривать в свете этих моделей поведения. Но как дизайнер интерфейса или проектировщик способов взаимодействия, вы должны думать об этом не меньше, чем любой другой член вашей команды. Возможно, именно вам удобнее всего представлять интересы пользователей. Safe Exploration (Безопасное исследование). Instant Gratification (Мгновенное вознаграждение). Satisficing (Разумная достаточность). Changes in Midstream (Изменения на полпути). 34 Глава 1. Проектирование для людей Deferred Choices (Отложенный выбор). Incremental Construction (Пошаговое построение). Habituation (Привыкание). Microbreaks (Микроперерывы). Spatial Memory (Пространственная память). Prospective Memory (Проспективная память). Streamlined Repetition (Упрощенное повторение). Keyboard Only (Только клавиатура). Social Media, Social Proof, and Collaboration (Социальные сети, социальное подтверждение и коллаборация). Safe Exploration (Безопасное исследование) «Дайте мне возможность исследовать без потерь и неприятностей». Когда пользователь понимает, что у него есть возможность исследовать интерфейс без «серьезных последствий», то, скорее всего, он в итоге узнает больше и получит более позитивные впечатления о приложении, чем тот, кто на это не решился. Хорошая программа позволяет людям пробовать неизвестные функции и возвращать систему в исходное состояние, снова пробовать что-то новое и т. д., безо всякого стресса. «Серьезные последствия» даже не обязательно должны быть действительно серьезными. Простой досады бывает достаточно, чтобы отпугнуть пользователя от добровольного изучения возможностей. Необходимость закрывать всплывающие окна, повторно вводить ошибочно стертые данные, поспешно отключать звук на ноутбуке, когда на сайте неожиданно начинает играть громкая музыка, — все это может отпугнуть. Создавая практически любой тип интерфейса, подготовьте для пользователя безопасные способы изучить его, чтобы он мог экспериментировать, не опасаясь последствий. Этот паттерн включает в себя несколько основных рекомендаций по грамотной организации интерфейса, основанных на исследованиях отраслевого эксперта Джейкоба Нильсена1: видимость состояния системы; соответствие системы реальному миру; пользовательский контроль и свобода. 1 Nielsen, Jakob. “10 Usability Heuristics for User Interface Design,” Nielsen Norman Group, 24 апреля 1994. www.nngroup.com/articles/ten-usability-heuristics. Паттерны: познание и поведение, связанные с разработкой интерфейсов 35 Вот несколько примеров «безопасного исследования». Фотограф пробует несколько фильтров в программе для обработки изображений. После этого он решает, что ему не нравится результат, и нажимает кнопку «Отмена» несколько раз, чтобы вернуться к началу. Затем он пробует другой фильтр, а потом еще один, каждый раз имея возможность отменить результат (о том, как это работает, рассказывается в главе 8, в описании паттерна «Многоуровневая отмена»). Новый посетитель домашней страницы сайта компании щелкает на разных ссылках, чтобы увидеть, что вообще есть на сайте, и уверен, что кнопка «Назад» всегда вернет его обратно на главную страницу. Никакие дополнительные окна или всплывающие объявления не открываются, и кнопка «Назад» работает предсказуемо. Можно представить себе, какая неразбериха получится, если веб-приложение начнет делать что-то другое или если в приложении будет кнопка, выглядящая как кнопка «Назад», но работающая совсем по-другому. Пользователь будет дезориентирован и может вообще отказаться от приложения. Instant Gratification (Мгновенное вознаграждение) «Я хочу сделать это прямо сейчас, а не потом». Людям нравится видеть мгновенные результаты своих действий — это заложено в человеческой природе. Если кто-то начинает использовать приложение и получает позитивный опыт в первые несколько секунд, это доставляет удовольствие! С большой вероятностью он продолжит пользоваться приложением, даже если позже ему станет сложнее добиваться поставленных целей. Он будет чувствовать себя спокойнее в этом приложении и будет более уверен в своих силах, чем если бы ему пришлось потратить много времени, чтобы разобраться, что к чему. Паттерн «Мгновенное вознаграждение» необходим в различных областях разработки. Например, если вы способны предположить, с чего начнет новый пользователь, вы разработаете интерфейс так, чтобы это первое действие оказалось максимально простым. Если цель пользователя — создание чегото нового, например рисование объекта, то можно сразу же открыть новый холст как призыв к действию, а рядом поместить палитру. Если пользователю ­необходимо выполнить какую-либо задачу, то подскажите ему, с чего начать. Это также означает, что не следует прятать начальный функционал за тем, что нужно долго читать, или тем, чего нужно долго ждать, например экраном регистрации, длинными инструкциями, медленно загружающимися страницами или объявлениями. Они отбивают охоту использовать приложение, так как не позволяют быстро завершить первую задачу. 36 Глава 1. Проектирование для людей Подводя итог: постарайтесь предвидеть потребности пользователя, организуйте понятную отправную точку, предложите ему что-либо прежде, чем просить чтото взамен (адрес электронной почты, навязчивая реклама). Satisficing (Разумная достаточность) «Меня это устраивает. Я не хочу тратить время, чтобы изучать что-то еще». Когда люди знакомятся с новым интерфейсом, они не тратят время на то, чтобы методично просмотреть все его элементы, а затем решить: «Да, пожалуй, если я нажму эту кнопку, я точно получу то, что нужно». Нет, пользователь обычно быстро просматривает интерфейс, выбирает элемент, который, на первый взгляд, должен решить его задачу, и пытается его применить, даже если не уверен, что прав. Термин satisficing — разумная достаточность — образован от двух слов: «satisfying» (удовлетворительный) и «sufficing» (достаточный). Он был придуман в 1957 году социологом Гербертом Саймоном, который использовал его для описания поведения людей во всевозможных экономических и социальных ситуациях. Люди предпочитают довольствоваться достаточно хорошим, а не наилучшим, если изучение всех альтернативных вариантов может требовать много времени или усилий. Разумная достаточность в действительности очень рациональна, если оценить всю ту умственную работу, которая необходима для анализа сложного интерфейса. Как заметил Стив Круг в своей книге «Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability» (New Riders, 2014)1, люди не любят думать больше чем необходимо — это лишняя работа! Но если в интерфейсе предусмотрена пара вариантов, которые пользователь замечает сразу же, то он попробует оба. Высока вероятность, что выбор окажется верным, но даже если нет, то вернуться назад и попробовать что-то еще будет несложно (предполагается, что интерфейс поддерживает паттерн «Безопасное исследование»). Дизайнеры могут сделать из сказанного несколько выводов. Используйте в интерфейсе «призывы к действию». Давайте пользователям четкие указания: введите текст здесь; перетащите изображение сюда; коснитесь этой кнопки, чтобы начать работу, и т. д. Делайте ярлыки короткими и используйте простые слова, позволяющие их быстро прочитать (это относится к элементам меню, кнопкам, ссылкам или любым другим текстовым компонентам). Пользователь пробегает их глазами и делает выводы об их значении, поэтому пишите так, чтобы первое предпо1 Круг С. Не заставляйте меня думать. Веб-юзабилити и здравый смысл. Паттерны: познание и поведение, связанные с разработкой интерфейсов 37 ложение всегда оказывалось верным. Если пользователь ошибется несколько раз, то он будет разочарован, а это плохо для вас обоих. Макет интерфейса должен отражать назначение его элементов. В главе 4 об этом рассказывается более подробно. Пользователи реагируют на цвета и формы, которые видят, и более эффективно следуют этим сигналам, чем текстовым ярлыкам, которые необходимо читать. Продумайте простой способ навигации; особенно это касается возвращения в точки, где второпях можно легко сделать неправильный выбор. Преду­ смотрите «аварийные выходы» (см. главу 3). На стандартных веб-сайтах легко использовать кнопку «Назад», поэтому разработать простую навигацию назад-вперед важно и для веб-приложений, десктопных приложений, мобильных устройств. Помните, что сложный интерфейс предъявляет высокие когнитивные требования к новым пользователям. Визуальная сложность часто склоняет новичков к тому, чтобы довольствоваться малым: они ищут первое, что успешно заработает. Именно разумная достаточность мешает многим пользователям избавиться от странных привычек даже после длительной работы с системой. Например, давным-давно пользователь выучил способ А делать что-либо, и даже если версия системы предлагает более удачный способ Б (или если он всегда присутствовал в системе), пользователь не видит пользы в его изучении. В конце концов, на это нужно потратить силы, а ведь можно просто продолжать использовать менее эффективный способ А. Не всегда это иррациональный выбор. Избавление от старых привычек и изучение новых путей требует дополнительной энергии, а небольшие улучшения того не стоят. Changes in Midstream (Изменения на полпути) «Я передумал, пока делал это». Иногда люди меняют решения прямо в процессе. Например, человек входит в комнату, чтобы найти ключ, который оставил там, но, оказавшись внутри, видит газету и принимается за чтение. Или он может зайти на Amazon.com, чтобы прочитать обзоры, а в итоге покупает книгу. Возможно, он просто сбился с пути, а может быть, изменение было намеренным. В любом случае, пока пользователь работает с вашим интерфейсом, его цели могут измениться. Для дизайнера это означает, что он должен дать пользователю возможность изменить поставленную цель. Предоставьте ему право выбора. Не запирайте пользователя в среде с ограниченным выбором и без глобальной навигации либо связи с другими страницами или функционалом, если только на это нет веских причин. А такие причины могут найтись: см. примеры в паттернах под названием Wizard (Мастер) (глава 2) и Modal Panel (Модальная панель) (глава 3). 38 Глава 1. Проектирование для людей Также можно упростить запуск процесса, остановку в середине и возможность вернуться в точку остановки из другого места (часто это называется повторной входимостью). Например, юрист начал заполнять форму на iPad. После этого в кабинет вошел клиент, и юрист выключил устройство, планируя вернуться к форме позже и завершить заполнение. Уже введенные данные не должны потеряться. Для поддержки возможности повторного входа запрограммируйте в диалоговых окнах и веб-формах запоминание введенных ранее значений и не делайте диалоговые окна модальными; если окно не модальное, то пользователь может перетащить его в угол экрана, чтобы продолжить работу в нем позже. Приложения в стиле компоновщика — текстовые редакторы, среды для разработки программного кода и программы для рисования — позволяют пользователю работать одновременно над несколькими проектами и откладывать в сторону любое их количество во время работы над каким-то одним. Подробнее об этом рассказывается в главе 2, в описании паттерна Many Workspaces «Несколько рабочих столов». Deferred Choices (Отложенный выбор) «Я не хочу отвечать на этот вопрос прямо сейчас, позвольте мне закончить!» Это следствие желания пользователя получать мгновенное вознаграждение. Если задать пользователю несколько на первый взгляд незначительных вопросов, пока он пытается выполнить какую-нибудь задачу, он, скорее всего, пропустит их, чтобы вернуться к ним позже. Например, на некоторых сетевых досках объявлений применяются очень длинные и запутанные процедуры регистрации пользователей. Экранные имена, адреса электронной почты, настройки безопасности, картинка-аватар, описания… и так далее до бесконечности. «Но ведь я всего лишь хотел разместить одно маленькое объявление», — жалобно возражает пользователь. Почему бы не пропустить большую часть вопросов, ответить только на несколько обязательных и не вернуться (если понадобится) позже, чтобы заполнить остальные поля? Иначе пользователю придется потратить на регистрацию не менее получаса, сочиняя свою краткую биографию и размышляя, где найти идеальный аватар. Еще один пример — создание нового проекта в редакторе веб-страниц. Есть несколько параметров, которые необходимо определить в первую очередь, например название проекта, но выбор остальных настроек можно спокойно отложить — в какой папке на сервере вы планируете сохранить готовый проект? Да я еще не знаю! Иногда дело просто в нежелании отвечать на вопрос. В других случаях у пользователя может быть недостаточно информации, чтобы дать ответ прямо сейчас. Что, если приложение для написания музыки запросит у вас название, тональ- Паттерны: познание и поведение, связанные с разработкой интерфейсов 39 ность и темп новой песни еще до того, как вы начнете ее писать (пример такого «чудесного» дизайна вы найдете в Apple GarageBand)? Выводы для дизайнеров интерфейсов очевидны, хотя им и не всегда легко следовать. Не заваливайте пользователя избытком вопросов и вариантов выбора с самого начала. В формах для заполнения четко помечайте необходимые поля и не делайте слишком много обязательных полей. Позвольте пользователю продолжать работу, не тратя времени на необязательные вопросы. Иногда можно отделять несколько важных вопросов или настроек от остальных, менее значительных. Выводите на экран короткий список и прячьте длинный. По возможности используйте паттерн Good Defaults (Хорошие варианты по умолчанию) (глава 10), чтобы дать пользователям несколько подходящих вариантов ответа по умолчанию, с которых удобно начать работу. Однако помните, что заранее подготовленные ответы все равно требуют их проверки пользователем на случай, если их понадобится изменить. Им тоже нужно уделять внимание. Обеспечьте пользователю возможность вернуться к заполнению отложенных полей позже и сделайте к ним простой и понятный доступ. Иногда в диалоговых окнах помещают краткие подсказки вроде «Вы всегда сможете изменить эти данные, нажав кнопку “Редактировать проект”». Некоторые веб-сайты сохраняют наполовину заполненные пользовательские формы или другие постоянные данные, например содержимое корзин с еще не приобретенными товарами. Если на веб-сайте с полезными услугами обязательна регистрация, то пользователи пройдут ее с намного большей вероятностью, если сначала позволить им поработать с сайтом — втянуться и увлечься — и только после этого спрашивать, кто же они такие. На некоторых сайтах можно совершить покупку вообще без регистрации; лишь в самом конце пользователя спрашивают, хочет ли он, чтобы данные, которые он указал о себе, автоматически сохранились в новой учетной записи. Incremental Construction (Пошаговое построение) «Дайте мне это изменить. Нет, опять не то. Попробую еще раз. Вот так-то лучше». Когда пользователи создают что-то, они обычно не выполняют четкую последовательность действий. Даже у эксперта не получится приступить к работе, последовательно пройти весь процесс создания и получить в конце нечто завершенное и идеальное. 40 Глава 1. Проектирование для людей Все совсем не так. Обычно пользователь начинает с небольшого фрагмента, работает над ним, потом делает шаг назад и оценивает результат, тестирует его (если это, например, код или другой компонент, поддерживающий тестирование), исправляет ошибки и только после этого переходит к работе над следующим фрагментом. Или даже начинает все сначала, если промежуточный результат его не устраивает. Творческий процесс требует двигаться не только вперед, но иногда и назад, и порой количество перемещений в противоположных направлениях совпадает. Помимо этого, готовый продукт часто создается пошагово, путем внесения ряда небольших изменений вместо нескольких крупномасштабных. Иногда процесс идет «сверху вниз», иногда «снизу вверх». Интерфейсы в стиле компоновщика должны поддерживать такой стиль работы. Предусмотрите возможность создания за один раз лишь небольших фрагментов и сделайте интерфейс восприимчивым к быстрым изменениям и частым сохранениям. Чрезвычайно важна обратная связь: на всех промежуточных этапах демонстрируйте пользователю, как выглядит и функционирует то, над чем он работает. Если пользователь работает с кодом, симуляцией или чем-либо исполняемым, делайте этап компиляции максимально коротким, чтобы обратная связь была мгновенной — время между внесением изменений и появлением их результата должно быть минимальным или отсутствовать вовсе. Когда творчество поддерживают хорошие инструменты, пользователь может ощущать, как его подхватывает поток, он полностью вовлекается в работу, не замечая ничего вокруг, и проводит так несколько часов, испытывая удовольствие от приятного и плодотворного занятия. Художникам, спортсменам и программистам хорошо знакомо это состояние. Плохие инструменты гарантированно будут отвлекать пользователя от работы. Если ему приходится ждать хотя бы 30 секунд, чтобы увидеть результат только что внесенного небольшого изменения, то концентрация нарушается и поток ослабевает. Если вам интересно больше узнать о потоке и концентрации внимания, обратите внимание на книги Михая Чиксентмихайи (Mihaly Csikszentmihalyi), одна из них — Flow: The Psychology of Optimal Experience (Harper Row, 2009)1. Habituation (Привыкание) «Этот способ работает везде, почему же он не работает здесь?» Когда человек постоянно работает в одном интерфейсе, некоторые манипуляции становятся рефлекторными, например нажатие сочетания клавиш Ctrl+S, чтобы сохранить документ, щелчок кнопки «Назад», чтобы покинуть веб-страницу, 1 Чиксентмихайи М. Поток: Психология оптимального переживания. Паттерны: познание и поведение, связанные с разработкой интерфейсов 41 нажатие клавиши Enter, чтобы закрыть диалоговое окно, использование определенных жестов для развертывания и свертывания окон и даже нажатие на педаль тормоза в автомобиле. Пользователь не осмысливает эти действия — они входят в привычку. Эта способность помогает людям становиться экспертами в использовании определенных инструментов (а также создавать ощущение потока). Привыкание заметно повышает эффективность, что нетрудно понять, но оно также может скрывать подвох. Если какое-то действие превращается в привычку и пользователь пытается совершить его в ситуации, когда это не работает, или, что еще хуже, наносит вред, то он заходит в тупик. Ему необходимо тут же начать размышлять (Что я только что сделал? Как же теперь сделать то, что нужно?) и, вероятно, потратить время на то, чтобы исправить последствия. Миллионы людей уже знакомы с командами в Microsoft Word и других текстовых редакторах: Ctrl+X: вырезать выделенный фрагмент; Ctrl+V: вставить выделенный фрагмент; Ctrl+S: сохранить документ. Эти команды давно стали стандартными. Единообразие как среди приложений, так и в них самих крайне полезно, когда вы имеете дело с разработкой интерфейсов. Некоторые приложения сбивают с толку — они создают у пользователей впечатление, что определенное действие всегда приводит к выполнению операции А, но на деле существует один режим, в котором оно выполняет операцию Б. Никогда так не делайте. Это гарантированный способ заставить пользователей ошибаться, и чем больше у пользователей опыта, то есть чем сильнее они привыкли работать в этом приложении, тем больше вероятность, что они допустят эту ошибку. Особенно внимательно к этому следует относиться при разработке интерфейсов мобильных устройств, управляемых жестами. Разобравшись в своем устройстве и привыкнув к нему, пользователь ожидает, что стандартные жесты будут работать совершенно одинаково во всех приложениях. Всегда проверяйте, что результат применения жестов в ваших приложениях предсказуем. По этой же причине диалоговые окна с подтверждением операции часто не помогают защитить пользователя от случайных изменений. Когда всплывает модальное диалоговое окно, пользователь может легко закрыть его, просто нажав кнопку OK или клавишу Enter (если кнопка OK является кнопкой по умолчанию). Если диалоговые окна появляются постоянно, пока пользователь вносит намеренные изменения, например удаляет файлы, то подобный быстрый ответ входит в привычку. А когда в диалоговом окне действительно возникает необходимость, толку от него уже никакого, так как пользователь привык не обращать на него внимания. 42 Глава 1. Проектирование для людей ПРИМЕЧАНИЕ Мне известно как минимум одно приложение, в котором кнопки в диалоговом окне подтверждения организуются в случайном порядке при каждом появлении окна. Вам действительно приходится читать ярлыки, чтобы выяснить, какую из них нажимать! Возможно, это не лучший способ организации диалогового окна подтверждения — в большинстве случаев лучше вообще обойтись без них, — но, по крайней мере, этот дизайн помогает избавиться от привычек. Microbreaks (Микроперерывы) «Я жду поезда. Неплохо бы сделать что-то полезное в оставшиеся пару минут». Часто бывает так, что у людей появляется несколько свободных минут. Это может быть небольшой перерыв в работе, чтобы «проветрить голову», или время, которое они проводят в очередях в магазине или в пробке на дороге. Им становится скучно, появляется раздражительность. Они хотят заняться чемто полезным или хотя бы развлечься, чтобы время прошло быстрее. Но это не должно быть слишком серьезное занятие — ведь на него все равно не удастся выделить достаточно времени. Данный паттерн относится главным образом к мобильным устройствам, которые в такой ситуации легко вытащить из кармана. Огромный успех соцсетей в немалой степени обусловлен именно этим. Facebook, Instagram, Snap... о них вспоминают именно в микроперерывах. Вот что обычно пользователи делают во время микроперерывов: проверяют электронную почту; просматривают ленту новостей и каналы (паттерн Streams and Feeds (Лента новостей и каналы)) (см. главу 2), например в Facebook или Twitter; заходят на новостные сайты, чтобы узнать, что происходит в мире; смотрят короткие видеоролики; ищут что-то несложное в сети; читают книгу в интернет-библиотеке; играют в короткую игру. Главное для таких операций — это простота и доступность. Очень просто, например, включить устройство и запустить приложение или открыть веб-сайт. Не требуйте сложной настройки. Не делайте загрузку слишком долгой. А если для того, чтобы воспользоваться сервисом, пользователю необходимо войти в свою учетную запись, постарайтесь сохранить его учетные данные из предыдущего сеанса. Не заставляйте его каждый раз вводить пароль. Что касается ленты новостей и каналов, загружайте свежее содержимое как можно быстрее и выводите его на первом же экране, который увидит пользова- Паттерны: познание и поведение, связанные с разработкой интерфейсов 43 тель. Другие приложения, такие как игры, видео, сетевые библиотеки, должны запоминать, где пользователь остановился, и восстанавливать предыдущее состояние без запроса (то есть поддерживать повторную входимость). Если вы создаете приложение для работы с электронной почтой или любую другую программу, в которой пользователю придется периодически упорядочивать данные, предоставьте ему способы эффективной сортировки и классификации. Это означает, например, отображение достаточного количества данных для каждого элемента, по которым пользователь может узнать отправителя и вспомнить содержимое письма. Также можно позволить ему помечать наиболее интересные сообщения, с легкостью удалять их, писать короткие ответы или дополнения. Отдельно стоит упомянуть о времени загрузки. Если содержимое загружается слишком долго — можете не сомневаться, пользователь не станет заходить в ваше приложение (особенно во время микроперерывов!). Убедитесь, что страницы легко читаются, самое полезное содержимое загружается в первую очередь и с минимальной задержкой. Spatial Memory (Пространственная память) «Клянусь, эта кнопка была здесь секунду назад! Куда она пропала?» Когда люди часто имеют дело с объектами и документами, то, возвращаясь к ним, ориентируются на свои воспоминания об их расположении, а не на их названия. Рассмотрим, например, рабочий стол Windows, Mac или Linux. Многие люди используют его, чтобы размещать там документы, ссылки на часто запускаемые приложения и т. п. Выясняется, что для поиска нужных объектов люди пользуются пространственной памятью, и это очень эффективно. Они придумывают собственные варианты группировки или вспоминают, что нужный документ «был в самом верху прямо над тем значком». (Естественно, можно подобрать аналогии и в реальном мире. На рабочих столах множества людей постоянно царит «художественный беспорядок» — для стороннего человека это просто куча барахла, в которой, однако, его владелец может мгновенно найти нужную вещь. И боже вас упаси сделать там уборку!) Во многих приложениях кнопки диалоговых окон (OK, Cancel и т. д.) размещаются в предсказуемых местах отчасти потому, что пространственная память на такие элементы управления очень сильна. В сложных приложениях люди также могут находить объекты, запоминая, где они находятся по отношению к другим элементам: инструментам на панелях инструментов, объектам в иерархических списках и т. д. Поэтому следует с большой осторожностью применять такие паттерны, как Responsive Enabling (Отзывчивое обнаружение) (см. главу 4). Добавление чего-либо в интерфейс обычно не вызывает проблем, но перемещение существующих элементов управления может нарушить работу пространствен- 44 Глава 1. Проектирование для людей ной памяти и затруднить поиск объектов. Однако это зависит от многих обстоятельств, так что, если вы не уверены, испытайте изменения на пользователях. Многие мобильные приложения и игры состоят всего из нескольких страниц. Часто стартовая страница и есть то место, где пользователи проводят все свое время. Возможно, никакой навигации и не понадобится. Но пользователи привыкли водить пальцем влево, вправо, вверх или вниз, чтобы перейти к другим страницам (таким, как сообщения или настройки). Они расположены чуть в стороне. Snap — хороший пример мобильного приложения, «заточенного» под пространственную память пользователей. Пространственная память, как и привыкание — еще один довод в пользу единообразия как среди разных программ, так и в пределах одного приложения. Люди ожидают найти определенный функционал в привычных местах. Пример вы найдете в описании паттерна Sign-In Tools (Инструменты регистрации) в главе 3. Пространственная память объясняет, почему полезно предоставлять место для хранения документов и объектов, где порядок может наводить сам пользователь, как, например, на вышеупомянутых рабочих столах. Это не всегда практично, особенно когда объектов очень много, но для небольшого их количества работает довольно хорошо. Когда пользователи сами упорядочивают объекты, они легче запоминают, куда и что поместили. (И не меняйте выбранный ими порядок, пока они сами не попросят об этом!) Один из способов сделать такую структуру описан в разговоре о паттерне Movable Panels (Перемещаемые панели) в главе 4. По той же причине динамическое изменение меню иногда не очень хорошая идея. Люди привыкают видеть определенные элементы вверху или внизу меню. Перемещение или скрытие элементов меню с благими намерениями помочь пользователю ведет к совершенно обратному результату. Это же относится и к меню навигации на веб-страницах. Старайтесь делать так, чтобы на второстепенных страницах сайта элементы меню находились там же, где и на главной странице. Кстати, верхние и нижние области списков и меню — это особые места в ко­ гнитивном смысле. Люди чаще замечают их и лучше запоминают, чем элементы в середине меню. Так что, если вы хотите привлечь внимание к одному или двум элементам, поместите их вверху или внизу. Prospective Memory (Проспективная память) «Оставлю это здесь, чтобы не забыть заняться им позже». Проспективная память — это хорошо известный психологический феномен, который пока не получил заслуженного внимания в разработке интерфейсов, хотя, как мне кажется, совершенно зря. Мы задействуем проспективную память, когда планируем сделать что-то и организуем некое напоминание. Например, если вам нужно принести на сле- Паттерны: познание и поведение, связанные с разработкой интерфейсов 45 дующий день на работу книгу, то вы можете накануне вечером положить ее на тумбочку в прихожей. Если вы собираетесь ответить на сообщение позже (а не прямо сейчас), то можете оставить его открытым на экране телефона. Если вы часто опаздываете на совещания, то можете настроить звуковые напоминания в Outlook или на мобильном устройстве, которые будут подавать сигнал за пять минут до очередной встречи. Практически каждый из нас задействует проспективную память. Это часть нашей сложной, высокоорганизованной и наполненной задачами жизни: мы используем свое знание мира, чтобы помочь собственной неидеальной памяти. И нужно уметь делать это хорошо. Некоторые программы поддерживают проспективную память. В Outlook и на большинстве мобильных платформ, как упоминалось выше, эта поддержка реализована напрямую; в этих системах есть календарь, и они могут подавать звуковые сигналы. Еще один пример — Trello, использующая доски канбан. Вот какие еще приемы используют люди: заметки для себя, например на виртуальных «стикерах»; открытые экраны приложений; примечания прямо в документах (например, «Допиши меня!»); закладки в браузере для сайтов, которые нужно просмотреть позже; документы, сохраненные на рабочем столе, а не в привычных папках на диске; электронные сообщения, которые оставляют во входящих (и, возможно, помечают флажками), вместо того чтобы отправить в архив. Люди используют любые типы средств идентификации, чтобы поддерживать пассивное проспективное запоминание, но обратите внимание, что ни один из перечисленных приемов не создавался специально для этого! То, для чего они в действительности были придуманы, — это гибкость и возможность организовать свои данные без вмешательства системы. Хороший клиент электронной почты позволяет создавать папки с любыми именами и не заботится о том, что вы делаете со своими входящими сообщениями. Текстовым редакторам все равно, что вы вводите и что для вас значит текст, написанный огромными пурпурными буквами; редактору программного кода без разницы, добавите вы комментарий «Дописать это!» в заголовок метода или нет. Браузеры не знают, зачем вы сохраняете определенные закладки. Во многих случаях такая гибкость и невмешательство — это именно то, что вам действительно нужно. Дайте людям инструменты для создания собственных систем напоминаний, но не пытайтесь разработать систему, слишком умную саму по себе. Если окно приложения бездействует какое-то время, не следует делать вывод, что оно никому не нужно и что его можно закрыть. В целом не стоит с благими намерениями удалять файлы или объекты, которые система может посчитать бесполезными; возможно, кто-то специально оставил их здесь. Также 46 Глава 1. Проектирование для людей не упорядочивайте и не сортируйте объекты автоматически, если пользователь не просит систему об этом. Что вы можете сделать как дизайнер для поддержки проспективной памяти? Если кто-то оставит форму наполовину заполненной и временно ее закроет, то можно сохранить данные до следующего посещения — это поможет напомнить пользователю, на чем он остановился (паттерн Deferred Choices (Отложенный выбор)). Подобным образом многие приложения запоминают несколько последних объектов или документов, которые в них редактировались. Также можно предложить пользователям списки «наиболее интересных объектов» — как прошлых, так и будущих — в стиле закладок и сделать эти списки легко доступными для чтения и редактирования. Можно использовать паттерн «Несколько рабочих пространств» (глава 2), позволяющий пользователям оставлять открытыми незаконченные страницы, пока идет работа над чем-то другим. Вот более сложная задача: если пользователь приступает к работе и оставляет ее незавершенной, подумайте о том, как оставить на видном месте какое-нибудь напоминание, выделяющее именно ее и отличное от открытого окна. И еще одна: как пользователю собрать напоминания из разных источников (электронной почты, документов, календарей и т. д.) в одном месте? Streamlined Repetition (Упрощенное повторение) «Сколько раз мне нужно это повторить?» В некоторых приложениях пользователям иногда приходится выполнять одну и ту же операцию снова и снова. Чем проще это для них, тем лучше. Если вы сможете помочь им упростить эту операцию до одного нажатия клавиши или щелчка мыши в каждом цикле повторения или, еще лучше, до нескольких нажатий или щелчков для всей последовательности повторений, то сэкономите для них много времени и сил. Хороший пример — диалоговые окна Find and Replace (Найти и заменить), часто присутствующие в текстовых редакторах (Word, редакторах электронных сообщений и т. д.). В них пользователь вводит старую фразу и новую, а затем для каждого вхождения этой фразы во всем документе всего лишь нажимает кнопку Replace (Заменить). И это в случае, когда пользователю нужно проверить и подтвердить или отклонить каждое изменение; если он знает, что действительно необходимо заменить все вхождения, то может просто нажать кнопку Replace All (Заменить все). Одно движение — и работа сделана. Вот более общий пример. Photoshop позволяет записывать действия, чтобы затем выполнять некоторые произвольные последовательности операций всего одним щелчком мыши. Если нужно обработать 20 изображений, изменив их размеры, применив кадрирование, усилив яркость и сохранив их, то эти шаги Паттерны: познание и поведение, связанные с разработкой интерфейсов 47 можно записать, работая над первым файлом в последовательности, а затем просто нажимать кнопку Play (Воспроизвести) для каждого из оставшихся 19. См. паттерн Macros (Макрос) в главе 8, где об этом говорится подробнее. Среды для написания сценариев еще более универсальны. Unix и ее разновидности позволяют вносить в сценарий все, что только можно ввести в оболочке. Можно заново вызывать и выполнять отдельные команды, даже очень длинные, всего лишь нажимая Ctrl+P и Ввод. Можно собрать любой набор команд из командной строки, поместить их в цикл for и запустить, один раз нажав клавишу Ввод. Или же сохранить их в сценарии командного процессора (или в цикле for сценария командного процессора!) и выполнить как отдельную команду. Написание сценариев — очень мощный инструмент, и по мере усложнения он превращается в полнофункциональное программирование. Прочие варианты включают возможность копирования и вставки (устраняющую необходимость повторно вводить одно и то же миллионы раз), пользовательские ярлыки для приложений на рабочем столе (позволяющие не искать каталоги этих приложений в файловой системе), закладки в брау­зере (чтобы не вводить URL-адреса вручную) и даже сочетания клавиш на клавиатуре. Непосредственное наблюдение за пользователями поможет вам выяснить, какие повторяемые задачи они решают. Сами пользователи не всегда смогут сказать вам об этом прямо. Они могут даже не осознавать, что выполняют повторяющиеся действия, которые можно упростить при помощи правильных инструментов, — возможно, они уже давно привыкли работать таким образом и перестали замечать это неудобство. Наблюдая за работой пользователей, вы увидите то, чего не видят даже они. В любом случае основная идея — предложить пользователям способы упростить повторяющиеся задачи, которые могут отнимать много времени, быть скучными и приводить к ошибкам. Keyboard Only (Только клавиатура) «Пожалуйста, не заставляйте меня использовать мышь». Некоторым людям физически неудобно использовать мышь. Многие не переключаются между мышью и клавиатурой, так как это требует времени и усилий; они предпочтут постоянно держать руки на клавиатуре. Часть пользователей не способны видеть экран, а технологии-помощники, которые они используют, обычно взаимодействуют со стандартными программами только при помощи API клавиатуры. Для удобства таких пользователей некоторые приложения разрабатываются так, чтобы управлять ими можно было только с клавиатуры. Обычно управле- 48 Глава 1. Проектирование для людей ние с помощью мыши в них также поддерживается, но операций, выполняемых исключительно мышью, нет, так что пользователи, работающие только с клавиатурой, не ограничены в функциональности. Вот несколько стандартных приемов для работы только с клавиатуры: можно задать сочетания «горячих» клавиш, клавиши быстрого вызова и клавиши выбора для операций, вызываемых из меню, например Ctrl+S для сохранения документа. Обратитесь к списку стандартных операций в руководстве по стилю оформления для платформы, на которой вы работаете; выбор нужного пункта в списках, даже поддерживающих множественный выбор, обычно возможен при помощи стрелок на клавиатуре в сочетании с модификаторами (такими как клавиша Shift), хотя это зависит от используемого набора элементов; клавиша Tab обычно перемещает клавиатурный фокус (выбор элемента управления, на который действует ввод с клавиатуры в данный момент времени) с одного элемента управления на следующий, а обратный переход осуществляется при помощи сочетания клавиш Shift+Tab. Это иногда называется «обход по клавише Tab». Многие пользователи ожидают, что эта техника будет работать в интерфейсах, содержащих формы; большинство стандартных элементов управления, даже переключатели и комбинированные поля, позволяют пользователям менять выбранное значение с клавиатуры путем нажатия стрелок, клавиши возврата или пробела; в диалоговых окнах и на веб-страницах обычно предусматривается кнопка по умолчанию, сигнализирующая: «Я закончил работу». На веб-страницах чаще всего это кнопки Submit (Отправить) или Done (Готово), а в диалоговых окнах — OK или Cancel (Отмена). Когда пользователь нажимает на такой странице или в диалоговом окне клавишу Enter, выполняется именно эта операция. После этого система переводит пользователя на следующую страницу или возвращает в предыдущее окно. Существуют и другие техники. Формы, панели управления и стандартные вебстраницы довольно легко управляются с клавиатуры. В графических редакторах и других пространственных приложениях это реализовать гораздо сложнее, но все же возможно. Работа только с клавиатуры особенно важна для приложений, где необходимо вводить данные. В них скорость ввода имеет первостепенное значение, и пользователи не могут позволить себе убирать руку с клавиатуры и переносить ее на мышь каждый раз, когда нужно перейти с одного поля на другое или даже с текущей страницы на следующую. (В действительности многие подобные формы даже не требуют нажатия клавиши Tab для перехода между элементами управления — это делается автоматически.) Паттерны: познание и поведение, связанные с разработкой интерфейсов 49 Social Media, Social Proof, and Collaboration (Социальные сети, социальное подтверждение и коллаборация) «Что остальные думают об этом?» Люди — социальные существа. Каким бы независимым ни было иногда наше мнение, мы принимаем в расчет то, что говорят и делают окружающие. И мы постоянно ищем одобрения от других и стремимся принадлежать к группе. Мы поддерживаем эту принадлежность в социальных сетях. Мы разделяем ценности группы и людей, которые нам небезразличны. Советы членов сообщества, прямые или косвенные, влияют на выбор людей, когда они принимают решения. Осуществляя поиск в интернете, совершая сделки (покупать ли этот продукт?), играя в игры (что тут делали другие игроки?) и даже создавая вещи, люди могут быть эффективнее, когда им помогают другие. Если нет, то они, по крайней мере, будут больше довольны результатом. Мы с гораздо большей вероятностью будем смотреть, читать, покупать, подписываться, делиться, комментировать или предпринимать любые другие действия, если увидим, что кто-то из наших знакомых рекомендовал, сделал это или сейчас делает. Это называется социальным одобрением. Вся эта динамика реального мира лежит в основе огромного масштаба и успеха «социального компьютинга» в его многочисленных формах. Справедливым будет сказать, что социальный аспект, или слой, сегодня присутствует почти во всех программных средствах. Включение социальной динамики в ваш инструмент может повысить вовлеченность, распространение среди пользователей, привести к организации сообщества и росту количества пользователей. Вот несколько примеров социальной функциональности: Пользовательские обзоры и комментарии. Они позволяют людям получить представление о продукте. Отзывы можно оценивать, и их авторы могут получить признание или другие поощрения за то, что их оценили как хорошего рецензента. Все является социальным объектом. Посты, фотографии, видео, отметки — почти все, что пользователи создают в социальных сетях, становится объектом, вокруг которого люди могут виртуально собираться. Им можно поделиться, его можно оценить, прокомментировать и т. п. Сотрудничество. Программное обеспечение для бизнеса и коммуникации трансформируется в средства, которые позволяют людям, находящимся на расстоянии и даже в разных часовых поясах, вести обсуждения, делать обзоры документов, проводить видеоконференции, отслеживать состояния, поддерживать живую и асинхронную коммуникацию и многое другое. 50 Глава 1. Проектирование для людей Социальное одобрение мотивирует людей к действию. Социальная групповая идентичность, участие и признание приносят людям удовлетворение. Внедрение этих возможностей в интерфейс позволяет социальной динамике повысить вовлеченность, удовлетворенность и рост аудитории. Из всех паттернов, описанных в этой книге, паттерн Help Systems (Cправочные системы) (см. главу 2) наиболее подробно раскрывает эту идею. Поддержка онлайн-сообщества является важной частью полной справочной системы для некоторых приложений. Погрузиться в проектирование социальных сетей вы сможете, прочитав книгу «Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience» Кристиана Крамлиша (Christian Crumlish) и Эрин Мэлоун (Erin Malone) (O’Reilly, 2015). Заключение Вы познакомились с важнейшим условием успешного проектирования интерфейса взаимодействия: пониманием того, кто будет использовать ваш инструмент. Это понимание лежит в основе разработок, которые соответствуют цели и легко понятны. Чтобы достичь его, используйте фундамент из четырех составляющих. Во-первых, поймите контекст. Это значит — четко представьте, для кого вы разрабатываете дизайн, предметную или рабочую область, и оцените уровень квалификации пользователей. Во-вторых, выясните цели своей аудитории, то есть структуру рабочих потоков, задач и результатов, для достижения которых вы будете разрабатывать свой инструмент. В-третьих, изучайте аудиторию — это полезно и вдобавок ко всему научит вас понимать пользователей и их цели. Мы привели примеры исследовательских техник, которые вы можете применять. Наконец, мы рассмотрели ряд паттернов человеческого поведения, восприятия и мышления, имеющих отношение к проектированию интерфейсов. Эти четыре элемента составляют основу процесса разработки. В главе 2 мы рассмотрим, как правильно организовать наполнение программы или приложения. ГЛАВА 2 Организация контента: информационная архитектура и структура приложений В главе 1 мы выяснили, какие принципы должны лежать в основе разработки, а теперь давайте поговорим о возможных способах организации данных в программе или приложении — проектировании информационной архитектуры, когда данные, контент и функционал организованы таким образом, чтобы быть полезными для аудитории. В частности, в этой главе мы рассмотрим: что такое информационная архитектура; как организовать информацию и задачи, чтобы они были понятны и в них было удобно ориентироваться; различные методы организации контента и данных для их эффективного использования; как организовать инструменты и функции для эффективной работы; как разрабатывать системы повторяющихся шаблонов или экранов; паттерны для представления контента и функционала, а также для доступа к ним и навигации по ним. На этом этапе вы должны быть уверены в том, что понимаете, для чего пользователям ваше приложение или ваш сайт. Возможно, вы заготовили несколько типичных сценариев использования высокоуровневых элементов приложения. Вы четко представляете, какую ценность это приложение создает для людей. Здесь возникает соблазн скорее заняться проектированием интерфейса и его компонентов, работой с цветами, типографикой, языком и макетами. Если вы относитесь к тому типу людей, которые мыслят визуально и предпочитают набрасывать эскизы, разрабатывая дизайн, то так и делайте. 52 Глава 2. Организация контента: информационная архитектура и структура приложений Тем не менее чтобы в полной мере воспользоваться знанием аудитории и создать качественный продукт, необходимо сначала применить это знание для разработки информационной архитектуры. Не ограничивайтесь пока рамками конкретных решений. Подумайте вместо этого об общей структуре своего продукта, удобной для пользователя. Продумайте данные, рабочие процессы, язык сайта или приложения, а затем организуйте их так, чтобы их было просто изу­ чить и использовать. Такова информационная архитектура. Давайте разберемся в ней, взглянув на преимущества и масштабы ее проектирования. Цель Цель проектирования информационной архитектуры — создать основу для успешного цифрового продукта, услуги, сайта или приложения, который полностью понятен, который легко освоить и просто использовать. А чтобы продукт был именно таким, его интерфейс не должен мешать пользователю. Ирония информационной архитектуры в том, что пользователи обращают на нее внимание только тогда, когда она плохая. Например, не имеет смысла. Интерфейс сбивает с толку, а информация на экране бесполезна. Пользователи не понимают значения слов, которые они видят. Они не могут найти то, что им нужно, тогда, когда им это нужно. Это мешает использовать продукт. С другой стороны, если мы сделали свою работу хорошо, наш дизайн абсолютно незаметен. Пользователи не видят грамотной информационной архитектуры. Они просто знают, что у них есть понятный и удобный цифровой продукт, которым приятно пользоваться. Что это значит на практике? Напомню, что контекст — это люди, которые хотят что-то сделать: найти информацию, посмотреть видео, что-то купить, на что-то подписаться. Проще говоря, у них есть задача. Но те, кто разрабатывает цифровой продукт, то есть вы, не могут находиться рядом с ними. Вам нужно разработать приложение так, чтобы оно делало то, что делает хороший менеджер по работе с клиентами: предвидело желания пользователя; организовывало и описывало информацию так, как это удобно пользователю; представляло информацию ясным и простым способом; использовало слова, которые понимает пользователь; предлагало четкий план действий; сообщало пользователю, где он находится и что с ним происходит; подтверждало, что задача успешно выполнена. Подход 53 Определение Информационная архитектура (ИА) — это совокупность способов организации и маркировки информационного пространства для его лучшего понимания и использования. В частности, ИА использует знания о пользователях для разработки таких элементов, как: структуры или категории для организации контента и функциональных элементов; различные способы навигации в зависимости от опыта пользователей; интуитивно понятные или многоступенчатые процессы для выполнения задач; ярлыки и языковые средства для передачи информации; инструменты поиска, просмотра и фильтры, помогающие пользователям найти то, что они ищут; стандартизированные экраны, шаблоны или макеты для единообразного представления информации и максимального удобства использования. ИА охватывает множество сфер: представление, поиск, просмотр, маркировка, классификация, сортировка, управление и скрытие ненужной информации. Именно с них следует начать, особенно если вы разрабатываете что-то новое. Ваша цель в том, чтобы все эти процессы были организованы так, как необходимо пользователю для успешного применения вашего продукта. Проектирование информационного пространства для пользователей Точно так же, как архитекторы создают чертежи до строительства дома, дизайнеры-проектировщики — информационные архитекторы — разрабатывают план того, как будет организовано информационное пространство, чтобы его было удобно использовать, и как будут люди ориентироваться в нем и выполнять в нем свою работу. В обоих случаях залог успеха — заранее продумать, как люди будут использовать ваш продукт. Подход Полезно рассмотреть приложение с точки зрения его основных данных и задач. Не задумывайтесь на этом этапе о конкретных способах их представления. Подумайте более абстрактно: какие данные и какие инструменты вам нужно предоставить пользователю? исходя из ожиданий пользователя и его текущего положения, когда вам нужно их предоставить? как их классифицировать и упорядочить? 54 Глава 2. Организация контента: информационная архитектура и структура приложений что пользователю нужно с ними сделать? сколько существует способов их представить? Одного может быть недостаточно. как сделать их полезными с точки зрения пользователя? Этот план поможет вам творчески представить ИА, которую вы разрабатываете. Разграничение информации и способов ее представления Очень важно представлять себе ИА отдельно от ее визуального оформления, поэтому остановимся на этом подробнее. Задача проектирования становится более понятной, когда вы решаете ее поэтапно. Полезно представить разработку как процесс последовательного наложения слоев друг на друга. Точно так же, как программисты представляют приложения состоящими из трех компонентов — базы данных; инструменты и запросы; отчеты, результаты и отклики, — дизайнеры могут представить, что их проект имеет три слоя. На рис. 2.1 приведена схема такого подхода. ИА — это самый нижний слой, фундамент. Как и в случае со зданием, этот фундамент в конечном счете станет невидимым, но будет поддерживать все, что на нем стоит. В цифровой среде мы разрабатываем фундамент ИА, включающий соответствующие концепции, ярлыки, отношения и категории. Он определяет постоянную информационную структуру, по которой пользователи могут перемещаться, вести поиск и которой они могут управлять, находясь на верхних уровнях. Уровень представления Проектирование: дизайн интерфейса, редактирование, специальные инструменты Функциональность, входные и выходные данные Проектирование: проектирование взаимодействия, UI-паттерны проектирования Начало работы Данные и содержимое Проектирование: ИА, паттерны навигации Рис. 2.1. Многоуровневое проектирование: от уровня содержимого до уровня представления (на основе работы Джесси Джеймса Гаррета «The Elements of User Experience: User-Centered Design for the Web and Beyond New», Riders, 2011) Способы организации и классификации контента 55 Средний уровень — это уровень функциональных элементов и доставки информации вашего сайта или приложения. Это экраны, страницы, истории, списки и документы, которые пользователи просматривают, ищут и читают. Он содержит инструменты, которые они используют для поиска, фильтрации, мониторинга, анализа, передачи и создания информации. Самый верхний слой — это слой представления: визуальное оформление и способы отображения и редактирования. Он включает палитру цветов, шрифты, макеты, графику и многое другое. Когда элементы этого слоя выполнены хорошо, они создают нужный фокус, поток и ясность. Принцип ВИСИ Ваш контент и инструменты должны быть организованы таким образом, чтобы быть полезными аудитории. В процессе организации данных и контента по основным категориям или разделам учитывайте полезное правило: ВИСИ1. Это сокращение от «ВзаимоИсключающие и Совместно Исчерпывающие». Во-первых, ваша информационная архитектура должна включать категории контента, которые четко отличаются друг от друга и не пересекаются. Во-вторых, «совместно исчерпывающие» означает, что ваша схема является законченной. Она учитывает всю информацию, которую должен обрабатывать ваш продукт, а также все ситуации и варианты использования, для которых вы его проектируете. Это то место, где можно найти все что угодно или куда можно положить что угодно. Затем ваша информационная структура должна иметь возможность расширяться, чтобы вместить новые данные, не вызывая путаницы. Эти категории составят основу вашей навигационной системы, которая более подробно рассмотрена в главе 3. Чтобы оформить и реализовать эту схему, информационные архитекторы разрабатывают такие инструменты, как карты сайтов и планы содержимого. Способы организации и классификации контента Вероятно, вы уже использовали какие-то общие методы организации и классификации информации для своего сайта или приложения. Они особенно полезны при планировании способов отображения больших объемов структурированных данных в таблицах. Они также важны для планирования того, как пользователи будут искать, просматривать и фильтровать данные, сортировать и уточнять результаты поиска. Мы опишем шесть таких методов. Этот список основан на работе Ричарда Сола Вурмана из его книги об информационной архитектуре 1 Англ. MECE — Mutually Exclusive, Collectively Exhaustive. — Примеч. ред. 56 Глава 2. Организация контента: информационная архитектура и структура приложений «Information Anxiety 2» (Que, 2001) и книге Эбби Коверт и Николь Фентон «How to Make Scene of Any Mess» (Covert, 2014). Я рекомендую прочесть их обе. Вурман предлагает удобный способ объединить основные методы организации в акрониме LATCH (Location — местоположение, Alphabet — алфавит, Time — время, Category — категория, Hierarchy — иерархия). Давайте рассмотрим эти и другие способы организации более подробно. Алфавитный способ Этот способ означает организацию списков, имен и любых маркированных элементов в соответствии с последовательностью букв алфавита. Вы можете расположить элементы в порядке убывания, от А до Я, или в порядке возрастания — обратном, от Я до А. Сюда же входит организация по порядку чисел, если эти числа являются частью имени или метки, с цифрами от нуля и выше, предшествующими буквам алфавита. Этот способ хорош как способ организации по умолчанию для любого списка или меню элементов. Числовой способ Числовой способ организации включает в себя несколько видов. Во-первых, организация по целым числам, когда элементы или сами числа располагаются в порядке возрастания или убывания на основе числовой последовательности. Во-вторых, по порядку: первый, второй, третий и т. д. Третий способ — по значению или итогу. Такие величины, как финансовые показатели, скидки, размеры, позиция, приоритет и скорость изменения, можно расположить от наибольшего к наименьшему и наоборот. Табличные данные часто организованы именно таким образом. Хронологический способ Хронологический порядок — еще один полезный способ организации содержимого. Он часто используется в лентах социальных сетей, где распространен обратный хронологический порядок — самый последний элемент идет первым в списке, а более старые элементы — за ним. Информация может быть организована по дате, времени или продолжительности в порядке возрастания или убывания. Данные также могут быть упорядочены по частоте — от низкой к высокой и наоборот, — а также по их последовательности во времени: что произошло первым или должно произойти первым, подобно этапам процесса. Задачи также часто разбиваются на последовательность шагов. По расположению Этот способ может включать организацию по географическому или пространственному местоположению. Существует множество систем для определения Проектирование приложений с преобладанием задач и рабочих процессов 57 географического положения, таких как широта и долгота. Географические категории часто являются вложенными или иерархическими, например страны включают области, а области включают города (см. Иерархический способ). Расположение также может включать расстояние от какой-либо опорной точки или до нее и порядок, основанный на этом расстоянии. В цифровых системах очень важно, чтобы пользователи знали свое местоположение в информационном пространстве, как в целом, так и на отдельном экране. Иерархический способ Данные лучше всего представлять в виде хранилищ или отношений «родитель — потомок», причем больший элемент будет содержать меньший. Примерами этого могут быть страны, которые включают области; годы, которые включают месяцы; или покупки, которые включают приобретенные товары. Категорийный или фасетный способ В ИА контент может быть маркирован, а затем сгруппирован по категориям или темам. Категорию можно рассматривать как свойство или качество, общее для набора элементов. Это полезный метод организации, потому что он очень гибкий. Часто в категории существует признак, который можно использовать для упорядочения элементов в наборе. Простой пример — организация по цвету. Расширенные схемы организации используют фасеты. В фасетной системе каждому элементу присваивается несколько качеств или категорий с определенным набором значений. Хорошим примером фасетной классификации является Amazon, где клиенты могут использовать несколько категорий для поиска своих продуктов, таких как цена, наличие на складе и рейтинг, присвоенный покупателями. Проектирование приложений с преобладанием задач и рабочих процессов ИП также включает в себя проектирование рабочих процессов и задач. Соответствующие данные обычно включают в себя историю активности пользователей и структурные диаграммы. Держите часто используемые инструменты под рукой Первое, что нужно учитывать при проектировании задач или рабочего процесса, — это частота использования. Задачи, элементы управления, команды или темы, которые часто повторяются или используются, должны быть легко доступны пользователю без необходимости их искать. С другой стороны, элементы управления или информацию, которые используются не очень часто, можно 58 Глава 2. Организация контента: информационная архитектура и структура приложений скрыть или сделать доступными по определенному пути. Пользовательские настройки и справочные системы — хорошие примеры функций, которые обычно скрыты, но доступны при необходимости. Разбейте процесс на несколько шагов Разбиение — это второй принцип организации задач и рабочих процессов в ИА. Оно подразумевает разделение большой задачи или процесса на ряд этапов, чтобы каждый из них пользователю было легче завершить. Это типичная структура организации мастера установки или многоступенчатого процесса решения сложной задачи. Продумайте также, как сообщить пользователю, на каком этапе он находится. Учитывайте потребности как новичков, так и опытных пользователей При разбиении задачи на этапы учитывайте уровень знаний, умений или опыта пользователей. Как в компьютерных играх, полезно предусмотреть упрощенный интерфейс или дополнительные подсказки для новичков. Подобная помощь может принимать форму справки, всплывающих подсказок или мастеров для сложных процессов. Многие приложения и веб-сайты уделяют внимание взаимодействию с новыми пользователями и их адаптации, чтобы облегчить обучение и удержать пользователей. Люди, незнакомые с вашим продуктом, особенно оценят такой подход. С другой стороны, эксперты и опытные пользователи могут быстро и эффективно работать со сложными интерфейсами, которые плотно набиты информацией и инструментами выбора. Предложите им «ускорители», такие как комбинации клавиш и возможность настроить интерфейс по своему желанию. Разработка способов навигации и ввода только с клавиатуры также важна. Многоканальность и разнообразие размеров экранов устройств — новая реальность Само собой, рядовые потребители и бизнес-пользователи теперь ожидают доступа к информации, сайтам и приложениям по разным каналам: настольные компьютеры, мобильные устройства и обмен сообщениями; а также с экранов, имеющих разное разрешение, и с других устройств. В голосовых сервисах вообще нет экрана. При разработке ИА необходимо учитывать, по каким каналам, в каких режимах и на каких устройствах должен работать ваш продукт. Это поможет вам должным образом организовать, сегментировать и упорядочить данные. Отображение данных в виде карточек В нескольких приведенных ниже примерах использован паттерн Cards (Карточки). Поскольку большинство цифровых интерактивных действий происходит Проектирование системы типов страниц 59 с помощью мобильных устройств, имеет смысл сделать упор именно на карточку, которая поместится на небольшом экране. Этот небольшой контейнер, содержащий сообщение, фото или другие данные, можно разместить по отдельности или в списке либо таблице на экранах большего размера. Смысл в том, чтобы продумать, как масштабировать интерфейс, сохраняя данные и функционал доступными и управляемыми. Проектирование системы типов страниц Как упоминалось ранее, ИА также включает в себя проектирование системы типов страниц. Каждый тип страницы выполняет определенную функцию. Таким образом, пользователь может научиться эффективно использовать каждую страницу, даже если ее содержимое меняется в зависимости от темы, фильтров и других параметров. Полезная схема была предложена Терезой Нил. Она разработала способы организации прикладных структур в контексте насыщенных интернет-приложений (rich internet application, RIA). Нил определяет три типа структур на основе главной цели пользователя: информация, процесс и создание1. Этот список предоставляет основу, в которую можно вписать идиомы и паттерны, о которых мы говорим в этой и других главах. Давайте рассмотрим страницы, которые выполняют важные единичные функции. В приложении это может быть главный экран или основной интерактивный инструмент, на сайте с упором на взаимодействие это может быть одна страница, например главный экран Gmail. На более статичном веб-сайте это может быть группа страниц, посвященных одному процессу или функции. Любая такая страница будет служить одной цели из списка ниже: Обзор — показ списка или набора функций. Фокус — показ единственного объекта, такого как карта, книга, видео или игра. Создание — предоставление инструментов для создания объекта. Действие — облегчение выполнения одиночной задачи. Большинство приложений и сайтов, разумеется, сочетают в себе эти опции. Но подумайте о разработке системы страниц, в которой каждая создана по определенному принципу. 1 «Rich Internet Screen Design» (https://oreil.ly/wQzGF) в журнале UX Magazine. 60 Глава 2. Организация контента: информационная архитектура и структура приложений Обзор: показ списка или набора инструментов или опций Мы видим это на большинстве домашних страниц, стартовых экранов и сайтов. В цифровом мире существует набор принятых идиом для отображения списков, большинство из которых вам знакомы. Простые текстовые списки. Меню. Таблицы карточек или изображений. Результаты поиска в виде списка или таблицы. Списки электронных писем или других сообщений. Таблицы данных. Древовидные схемы, панели и графические элементы — аккордеоны. На таких обзорных страницах иногда достаточно непросто организовать информацию. Вот несколько вопросов, которые следует задать при разработке обзорных страниц: Какова величина набора данных или какой длины список? Сколько места доступно для их отображения? Расположение одноуровневое или иерархическое, и если это иерархия, то какого рода? В каком порядке представлена информация и может ли пользователь изменять этот порядок? Как пользователь может искать, фильтровать и сортировать информацию? Какая информация или какие операции связаны с каждым элементом списка и когда и в каком порядке они должны появляться? Поскольку списки и таблицы широко распространены, четкое понимание различных способов их представления пригодится любому дизайнеру. В этой главе описаны несколько паттернов проектирования интерфейса, содержащего списки (прочие рассмотрены в главе 7). Вы можете спроектировать приложение или сайт целиком либо небольшой фрагмент крупного проекта с помощью одного из этих паттернов. Они создают структуру, в которую можно встроить другие методы отображения — текстовые списки, списки пиктограмм и т. д. Другие способы организации верхнего уровня, не перечисленные здесь, могут включать календари, полностраничные меню и результаты поиска: Feature, Search, and Browse (Рекомендация, поиск и обзор). Бесчисленное количество веб-сайтов с изображением продуктов и текстовой информацией Фокус: отображение одиночного объекта 61 следуют этой схеме. Поиск и просмотр предоставляют пользователям два способа найти интересующие их товары, в то время как на главной странице расположен один элемент для привлечения внимания. Streams and Feeds (Лента новостей и каналы). Блоги, новостные сайты, электронная почта и социальные сети, такие как Twitter, используют шаблон ленты новостей или ленты социальных сетей для отображения контента, причем самые последние обновления видны первыми в ленте. Grids (Сетки). Четко определенный тип интерфейса для представления историй, действий, карт и инструментов выбора. Сетки также используются для обработки фотографий и других графических элементов. Они могут содержать иерархии и списки, инструменты для упорядочивания и изменения порядка документов, инструменты для работы непосредственно с изображениями, запуска приложений, детализации и т. д. После того как вы выбрали общий дизайн интерфейса, вы можете познакомиться с другими паттернами и методами отображения списков. Подробнее мы обсудим их в главе 7. Фокус: отображение одиночного объекта Весь смысл этого типа страниц состоит в том, чтобы показать или воспроизвести отдельный фрагмент контента или функцию, например статью, карту или видео. Содержимое могут окружать мелкомасштабные инструменты — скроллеры и слайдеры, окна авторизации, элементы общей навигации, шапка, подвал и т. д. Но они второстепенны. Ваш дизайн может принимать одну из следующих форм: длинная страница с вертикальной прокруткой, заполненная текстом (статьи, книги и аналогичное объемное содержимое); интерфейс с масштабированием для очень больших и детальных объектов, таких как карты, изображения или информационная графика. Известный пример — географические карты, такие как Google Maps; идиома «мультимедийный проигрыватель», включающая видео- и аудиоплееры. При разработке такого интерфейса обратите внимание на следующие паттерны и методы: Mobile direct access (Прямой мобильный доступ), позволяющий пользователю напрямую перейти к основной функции приложения, обычно использующий данные о местоположении и времени для получения ценной информации без участия пользователя; Alternative Views (Альтернативные представления) для демонстрации содержимого различными способами; 62 Глава 2. Организация контента: информационная архитектура и структура приложений Many Workspaces (Несколько рабочих пространств) на случай, если пользователь захочет просмотреть несколько мест, состояний или документов одновременно; Deep-linked State (Глубокая ссылка), описанный в главе 3. Благодаря возможностям этого паттерна пользователь может сохранить определенную точку или состояние, чтобы вернуться к нему позже, или отправить кому-то URL-адрес, указывающий именно на эту точку или состояние; некоторые паттерны для мобильных устройств, описанные в главе 6, если одна из целей дизайна — доставка контента на мобильные устройства. Создание: наличие инструментов для создания объектов Этот тип страниц предназначен для создания и редактирования цифровых объектов. Большинству людей знакомы идиомы, применяемые в этих инструментах: текстовые редакторы, редакторы кода, редакторы растровых изображений и векторной графики, электронные таблицы. Canvas Plus Palette (Холст и палитра) описывает большинство таких приложений. Этот узнаваемый популярный паттерн для визуальных редакторов прекрасно оправдывает ожидания пользователей; почти все подобные приложения строятся на базе паттерна Many Workspaces (Несколько рабочих пространств). Внутри одного окна содержится несколько документов, над которыми пользователь может работать параллельно. Действие: помощь в выполнении одиночной задачи Возможно, ваш интерфейс не предназначен для отображения списка объектов или создания объектов. У многих интерфейсов существует единственная цель: помочь пользователю выполнить конкретную задачу. Вход в систему, регистрация, публикация, печать, загрузка, покупка, изменение настройки — все эти задачи попадают в данную категорию. Здесь ведущую роль играют формы. Формам посвящена глава 10 — там вы найдете описание множества элементов управления и паттернов, необходимых для создания эффективных форм. В главе 8 рассказывается о еще одном полезном наборе паттернов, которые основываются скорее на «глаголах», а не на «существительных». Если пользователь может выполнить задачу в небольшой ограниченной области, такой как поле ввода учетных данных, то особых усилий к разработке информа- Паттерны 63 ционной архитектуры прилагать не нужно. Но если задача усложняется, становится длинной или разветвленной либо предлагает несколько вариантов выбора, то вам придется как следует поработать над ее структурированием. Чаще всего задачу разбивают на небольшие шаги или группы шагов. В этом случае пройти все необходимые этапы пользователям помогает интерфейс на базе паттерна Wizard (Мастер); Settings Editor (Редактор настроек) — это очень распространенный тип интерфейса, позволяющий пользователям менять настройки или параметры объекта (приложения, документа, продукта и т. п.). Это не пошаговое выполнение задачи. Здесь ваша задача — предоставить пользователю доступ к разнообразию настроек или переключателей и позволить ему изменять только те параметры, которые ему необходимы, тогда, когда ему это необходимо, а остальные пропускать. Скорее всего, страницы этих четырех типов — обзора, фокуса, создания и действия — вы будете в той или иной форме использовать в ходе разработки своего продукта, при проектировании собственной системы организации страниц. Паттерны В предыдущем разделе мы рассмотрели общие черты информационной архитектуры. Теперь давайте рассмотрим конкретные паттерны проектирования, служащие способом представления информационной архитектуры в соответствии с целями продукта, который вы разрабатываете. Feature, Search, and Browse (Рекомендация, поиск и обзор). Mobile direct access (Прямой мобильный доступ). Streams and Feeds (Лента новостей и каналы). Thumbnail Grid (Сетка миниатюр). Dashboard (Дашборд). Canvas Plus Palette (Холст и палитра). Wizard (Мастер). Settings Editor (Редактор настроек). Alternative Views (Альтернативные представления). Many Workspaces (Несколько рабочих пространств). Help Systems (Справочные системы). Tags (Теги). 64 Глава 2. Организация контента: информационная архитектура и структура приложений Feature, Search, and Browse (Рекомендация, поиск и обзор) Что это Сочетание трех элементов на главной странице веб-сайта или приложения: рекомендуемые вещь, товар или продукт, поле поиска (открывающееся по умолчанию и сворачиваемое) и список элементов или категорий, которые пользователь сможет просмотреть. Когда использовать Если ваш сайт содержит длинные списки элементов — сообщений, продуктов, видео и т. д. Их можно просматривать, и по ним можно вести поиск. Вы хотите сразу же заинтересовать новых посетителей, предложив им прочитать или посмотреть что-то увлекательное. Если цель вашего сайта — поиск продуктов и осуществление сделок. В этом случае инструмент поиска должен быть доминирующим. Рекомендуемый контент и просмотр не так важны. Зачем Эти три элемента можно найти на множестве сайтов. Поиск и просмотр — два тесно связанных между собой способа найти желаемое. Если человек знает, что конкретно он ищет, то он будет использовать поле поиска, в то время как другие пользователи могут просматривать имеющиеся списки и категории. Рекомендуемые объекты — это способ «зацепить» пользователя, нечто намного более интересное, чем списки категорий и поля поиска, особенно если вы используете привлекающие внимание изображения и заголовки. Посетитель сайта сразу видит, что он может прочесть и с чем поэкспериментировать. Для этого ему не требуется ничего делать, и, может быть, он найдет здесь что-то более привлекательное, чем то, зачем он пришел. Как Разместите поле поиска там, где его легко найти: в верхнем углу или внутри баннера вверху и в центре страницы. Выделите его среди остального содержимого при помощи пустого пространства вокруг или контрастного фона. В качестве альтернативы можно отобразить свернутую или сжатую строку поиска. Она по-прежнему должна быть хорошо заметной и легкодоступной, но это может быть значок или ярлык «Поиск». При выборе этого элемента открывается полное поле поиска. Этот паттерн экономит место на небольших экранах. Выделите центральную сцену (паттерн Center Stage (Центральная сцена), глава 4) для рекомендуемого товара, продукта или видео. Рядом с ней, вверху страницы, Паттерны 65 поместите область просмотра остального контента — списки историй, карточек, тем или категорий продуктов. Они могут вести на страницы этих категорий. Если ярлыки категорий раскрываются для вывода подкатегорий, это означает, что список ведет себя как дерево. На некоторых сайтах, таких как Amazon, ярлыки категорий превращаются в меню: если навести курсор на такую метку, появится меню подкатегорий. Тщательно обдумывайте рекомендации. Это хороший способ продать товар, что-то прорекламировать или привлечь внимание к горячей новости. Но будьте осторожны: по ним посетители будут судить обо всем сайте. О чем они захотят узнать? Что привлечет их внимание и удержит на сайте? Позаботьтесь о том, чтобы пользователи не заблудились, просматривая категории и подкатегории объектов, — используйте паттерн Breadcrumbs (Хлебные крошки), глава 3. Примеры Контент-ориентированные сайты. Следующие три примера демонстрируют классический паттерн Feature, Search, and Browse (Рекомендация, поиск и обзор). WebMD (рис. 2.2), Yahoo! (рис. 2.3) и Sheknows (рис. 2.4) — новостные и контент-ориентированные цифровые издания. В WebMD и Yahoo! есть поле поиска в верхней части в виде одного крупного элемента. Sheknows предлагает вариацию: два элемента над выделяющейся поисковой строкой. Коммерчески ориентированные сайты. Крупные ритейлеры, такие как Target (рис. 2.5) и Ace Hardware (рис. 2.6), используют этот же паттерн. Поле поиска находится вверху, а крупные блоки (рекламные акции) — внизу. Оба сайта поддерживают отображение сетки карточек. Веб-сайты, ориентированные на задачи. Эти два примера показывают, как паттерн Feature, Search, and Browse (Рекомендация, поиск и обзор) изменяется при развертывании в контексте, когда приоритет — решение задачи пользователя (нахождение того, что нужно). Для British Airways (рис. 2.7) большой модуль поиска рейсов — главный элемент в верхней части страницы. Под ним минимум контента: рекомендуемая статья и три карточки для просмотра. Сайт Epicurious (рис. 2.8) также отдает приоритет поиску. Он занимает панель шириной на весь экран в верхней части страницы. Модули с контентом и карточками расположены сразу под ним. Их крупный размер, вызывающие аппетит фото и заголовки привлекают не меньше внимания, чем строка поиска. Исходя из своих целей определите оптимальный для себя подход и соответствующим образом разрабатывайте свой интерфейс. 66 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.2. WebMD Паттерны 67 Рис. 2.3. Yahoo! 68 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.4. Sheknows Паттерны 69 Рис. 2.5. Target 70 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.6. Ace Hardware Паттерны 71 Рис. 2.7. British Airways 72 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.8. Epicurious Паттерны 73 Поиск по сайту с фасетной навигацией и фильтрами. Следующие примеры показывают, как два разных веб-сайта используют множественные категории, или фасеты, чтобы предложить пользователю тергетированный поиск больших датасетов. Каждый фасет может иметь диапазон значений. Комбинации фасетов для поиска или фильтрации позволяют осуществлять сложный поиск больших датасетов. Сайт Crunchbase (рис. 2.9) необычен тем, что он продвигает фасетные фильтры как часть своей поисковой системы, подразумевая, что поисковик может выдавать более подходящие результаты поиска с помощью фасетов. Рекомендуемый контент приведен ниже. Рис. 2.9. Crunchbase 74 Глава 2. Организация контента: информационная архитектура и структура приложений Сайты Epicurious (рис. 2.10) и Airbnb (рис. 2.11) используют более традиционное развертывание фасетных фильтров на экранах результатов поиска (обратите внимание на удобный для мобильных устройств формат набора карточек для результатов поиска в обоих случаях). Фасеты лучше всего подходят для сужения результатов поиска на основе их предметной области. Рис. 2.10. Результаты поиска Epicurious с фасетными фильтрами Паттерны 75 Рис. 2.11. Результаты поиска Airbnb с фасетными фильтрами Mobile direct access (Прямой мобильный доступ) Что это Главная страница содержит информацию, не требующую действий пользователя. Приложение делает предположения о любых настройках или запросах (таких как местоположение или время), относящихся к его основной функции, и представляет данные для немедленного отклика. Предположения о том, что пользователь, вероятнее всего, будет делать, также влияют на контент главной страницы. 76 Глава 2. Организация контента: информационная архитектура и структура приложений Когда использовать Если ваше мобильное приложение предназначено для выполнения одной задачи или имеет основную функцию. Зачем Возможность быстро совершать действия, осуществлять выбор и просматривать страницы важна и привлекает пользователя. Возможности поиска, выбора или изменения настроек в этом паттерне ограничены. Но разработчику доступна информация от устройства и основные варианты его использования, чтобы сделать практические выводы о том, что потребуется пользователю. Как Используйте оперативные данные устройства пользователя (при условии что пользователь разрешил это делать, выбрав соответствующие настройки). Прежде всего, используйте информацию о местоположениии и времени, чтобы создать полезную начальную страницу. Предположите, как пользователь вероятнее всего будет использовать ваше приложение, и постройте для него максимально короткий путь к поставленной цели при вводе минимального количества данных. Примеры Все перечисленные примеры хорошо подходят для мобильных устройств, но могут быть полезны и для десктопных приложений. В первом примере Snap (рис. 2.12, слева) — компания, продукт которой ориентирован на людей, увлекающихся фотографией, и социальные сети. Когда приложение запускается, фронтальная камера автоматически включается, чтобы сделать селфи. Следующие три примера показывают, как приложения используют данные о местоположении и времени для выполнения задачи без участия пользователя. INRIX Parkme (рис. 2.12, справа), сайты Eventbrite и Weatherbug (рис. 2.13) работают подобным образом. ParkMe предварительно анализирует полученные данные (парковка в течение одного часа), чтобы подобрать стоимость парковки по умолчанию. Паттерны 77 Рис. 2.12. Стартовые экраны Snap и INRIX ParkMe Рис. 2.13. Стартовые экраны Eventbrite и Weatherbug 78 Глава 2. Организация контента: информационная архитектура и структура приложений Streams and Feeds (Лента новостей и каналы) Что это Непрерывно обновляемая серия изображений, новостей, статей, комментариев или другого контента, представленного в виде прокручиваемой вертикальной (иногда горизонтальной) полосы или ленты. Элементы в ленте обычно представлены в виде карточек с изображением из статьи, заголовком, аннотацией и названием источника со ссылкой на него. Поток новостей/контента. Контент может быть первичным (вы публикуете собственный контент) или агрегированным. Такой подход к организации новостной ленты, вдохновленный социальными сетями, уже закрепился как шаблон для мобильных устройств. Обычно лента состоит из элементов с отметками времени, расположенных в обратном хронологическом порядке, и постоянно обновляется. Социальные сети. Контент поступает от других пользователей, на которых подписан пользователь (есть опции, позволяющие редакторам выделять определенные посты или публиковать спонсорский контент). Это тоже обычно список элементов в обратном хронологическом порядке, который постоянно обновляется. Деловое сотрудничество. Социальные сети стали неотъемлемой частью нашей работы в сети. Многие компании все чаще используют онлайн-инструменты для совместной работы. Это позволяет сотрудникам и командам из любого места собираться в интернете для обсуждения и обратной связи. Ленты комментариев как в социальных сетях — один из самых распространенных паттернов. Они довольно серьезно различаются в том, как отображается контент: в приложениях для совместной работы и обмена сообщениями самая последняя запись или публикация обычно находится внизу ленты. Старые комментарии перемещаются вверх, по мере того как новые публикуются внизу, где появляется самый свежий пост. Раздел комментариев в Slack — отличный пример такого паттерна. Когда использовать Если контент вашего сайта или приложения часто обновляется и пользователь часто проверяет его, десятки раз в день. Кроме того, используйте этот паттерн, когда над проектом работает несколько человек и вам нужно быть в курсе их комментариев и отзывов. Эти комментарии часто приходят в разное время — обычная практика в распределенных или удаленных командах. Для новостных изданий и агрегаторов используйте один или несколько источников, таких как собственный оригинальный контент, блоги, ведущие новостные сайты, обновления социальных сетей и партнерский контент, чтобы своевременно предоставлять информацию пользователям. Продукт для социального взаимодействия может быть персонализированным — пользователь «владеет» им, как списком друзей в Twitter или Facebook. Паттерны 79 В инструментах для совместной работы используйте этот паттерн, чтобы дать пользователям возможность просматривать, комментировать и редактировать документ. Документ и обсуждение должны быть представлены вместе. Сотрудники могут прокручивать ленту комментариев, чтобы увидеть обсуждение. Зачем Чтобы убедиться, что новый контент всегда появляется первым в ленте пользователя. Это сделает посещение приятным, и пользователю всегда будет что посмотреть и почитать. Люди смогут легко следить за новостями, поскольку последние новости будут всегда на виду без усилий со стороны пользователя. Это формирует привычку часто проверять ленту и больше читать, отслеживать и взаимодействовать с ней. Люди заходят на множество сайтов и в приложения каждый день, чтобы быть в курсе активности своих друзей, вести переписку или следить за интересующими темами или блогами. Когда несколько источников можно собрать в одном месте, их намного легче отслеживать. С точки зрения издания, такого как новостной сайт, публикация собственного контента в формате ленты или потока способствует повышению вовлеченности, посещаемости и степени взаимодействия. С точки зрения бизнеса программы для социального сотрудничества позволяют сотрудникам быть более эффективными и экономить время. Работники на удаленке и те, кто находится в командировках и разных часовых поясах, могут собираться вместе для работы. Этот паттерн поддерживает паттерн поведения Microbreaks (Микроперерывы), который мы рассматривали в главе 1. Даже беглое знакомство с приложением на основе паттерна Streams and Feeds (Лента новостей и каналы) может дать пользователю много полезной информации (или возможностей для развлечения) быстро и без усилий с его стороны. Как Возникнув как инновация в сфере социальных медиа, этот паттерн стал обычным для любой компании, приложения или сайта, которые постоянно публикуют или обрабатывают большое количество контента, для социальных сетей и приложений для совместной работы. Мы говорили про хронологическую организацию потоков и каналов, но это только одна из возможностей. Сейчас последовательность потоков определяется алгоритмами, которые можно оптимизировать, чтобы повысить вовлеченность, количество переходов, пользовательский интерес или другие параметры. Итак, учитывайте возможность разработки более персонализированных, контекстно-зависимых интерфейсов. 80 Глава 2. Организация контента: информационная архитектура и структура приложений Расположите элементы в обратном хронологическом порядке. Отобразите новые элементы в начале списка, не дожидаясь, пока пользователь запросит обновление. Более старые элементы уходят вниз под новыми комментариями или записями. Реализуйте возможность немедленного обновления. Кроме того, пользователи должны иметь возможность прокручивать или просматривать список, чтобы увидеть старые, не просмотренные элементы. Дополните персональную ленту пользователя рекомендациями от издателя. Предложите продвинутым пользователям возможность создавать настраиваемые потоки на основе тем или рекомендованных лент других участников. Такие инструменты, как TweetDeck, используют паттерн Many Workspaces (Несколько рабочих пространств) для отображения нескольких параллельных панелей контента. Информация, которая демонстрируется с каждым элементом, может включать следующее: Что. Короткие обновления выводите целиком. Либо покажите заголовок в несколько слов или аннотацию из пары предложений и изображение, если оно есть. Кто. Это может быть автор обновления, название блога, где опубликована статья, автор этой статьи или отправитель электронного сообщения. Либо коллега, который разместил документ или комментарий. Имена настоящих людей «очеловечивают» интерфейс, но не забывайте о балансе между узнаванием и авторитетностью: названия новостных изданий, блогов, компаний и т. д. не менее важны. Используйте и имена, и названия, если это не приводит к неразберихе. Когда. Укажите дату или время, используя примерные обозначения, такие как «вчера» и «одиннадцать минут назад». Когда пост провисит в ленте достаточно, перейдите к обычному указанию времени. Где. Если элемент взят с веб-сайта, прикрепите ссылку на этот сайт. Если он взят в одном из блогов вашей организации, сделайте ссылку на него. Если элемент содержит больше информации, чем можно отобразить на дисплее, разместите ссылку «Далее» или кнопку «Смотреть больше». Этот паттерн подходит для длинных комментариев. Предусмотрите возможность нажать на карточки с новостями или историями, чтобы открыть их на новой странице. Попробуйте разработать способ отображения всего содержимого новости в окне ленты новостей. Если ваша лента выполнена в формате списка, то можно воспользоваться паттернами Two-Panel Selector (Двухпанельный селектор), OneWindow Drilldown (Детализация в одном окне) и List Inlay (Раскрывающийся список). Далее вы найдете примеры для каждой из этих моделей. Предоставьте пользователю возможность немедленно реагировать на контент. Звезды, лайки, кнопки «Нравится», функция занесения в избранное позволяют быстро выразить свое мнение о контенте, не прилагая особого труда — если у пользователя нет времени писать развернутый комментарий. Но возмож- Паттерны 81 ность их писать тоже нужно предусмотреть! Помещая элементы управления и текстовые поля рядом с лентой, вы стимулируете взаимодействие и общение пользователей. Это очень удобно и полезно для социальных систем. Сегодня дизайн лент новостей и каналов для мобильных устройств довольно прост. Почти всегда страница содержит лишь список — часто в виде бесконечной ленты (глава 6) с хорошо отформатированным текстом, и пользователи переходят к его элементам, просто нажимая или щелкая на них. Многие сервисы с лентами новостей и каналов, включая Twitter и Facebook, используют паттерн Infinite List (Бесконечный список) как для мобильных, так и для полноэкранных устройств. Этот паттерн позволяет пользователям загружать одну или две страницы последних обновлений, а также предоставляет возможность загрузить больше контента, перемещаясь «назад во времени». История активности. Некоторые ресурсы используют термин «история активности» для обозначения упорядоченной по времени ленты действий (обычно в соцсетях), выполняемых одним субъектом — человеком, системой или организацией. Это история того, что они делали. Это полезная концепция, и она не противоречит паттерну Streams and Feeds (Лента новостей и каналы), подразумевающему организацию ленты действий, которые интересны отдельному человеку или группе пользователей, но которые они сами не выполняли. Новости в ленте обычно собраны из нескольких источников. Примеры Потоки новостей и контента. Techcrunch (рис. 2.14 и 2.15) — отличный пример использования паттерна Streams and Feeds (Лента новостей и каналы). Основное мобильное приложение и веб-сайт — это прокручиваемый поток историй, причем самые последние истории расположены первыми в списке. На этом уровне читателю предоставляется ровно столько информации, чтобы он мог уловить основную идею: фото, заголовок и вводный текст. Если читатель выбирает историю, он переходит к ее полной версии, с увеличенными изображениями и полным текстом. На странице полной версии доступна функция «Поделиться», позволяющая распространить информацию в социальных сетях читателя. Сайт BuzzFeed News (рис. 2.16 и 2.17) следует точно такой же схеме. Обратите внимание, что эта компания использует слово Feed1 в названии. Это показывает, насколько важен этот паттерн для выражения идентичности и целей компании. Здесь мы снова видим прокручиваемый поток новостей, когда самые свежие новости идут первыми в списке. Индивидуальность BuzzFeed прослеживается в привлекающих внимание заголовках и вопросах, заставляющих читателя задуматься. При выборе истории загружается страница с полным текстом статьи, викторины или галереей изображений. Виджет социального обмена еще более важен. 1 Англ. «лента». — Примеч. ред. 82 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.14. Techcrunch Паттерны 83 Рис. 2.15. Techcrunch: детальный просмотр/открытая статья 84 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.16. Новости BuzzFeed Паттерны 85 Рис. 2.17. Страница с полным текстом статьи на BuzzFeed 86 Глава 2. Организация контента: информационная архитектура и структура приложений Сайты RealClear — новостные агрегаторы, которые размещают ссылки на новости, опубликованные на других сайтах. Наиболее активен сайт RealClearPolitics (рис. 2.18). Хотя он выглядит как простой плоский список, наподобие «Википедии», это лента. Ссылки публикуются несколько раз в день. Обновления, взятые из печатных газет, помечены как «Утренний выпуск» и «Дневной выпуск». Обратите внимание, как RealClearPolitics со своими «утренним» и «вечерним» выпусками подражает стилю газет прошлого. Читатель может прокручивать список или использовать меню выбора для просмотра ссылок предыдущих дней. Это бесконечная лента контента, организованного по времени. Рис. 2.18. RealClearPolitics Паттерны 87 Flipboard (рис. 2.19) выглядит как журнал или ресурс для просмотра изображений, но на самом деле это тоже лента. Он может собирать контент из ваших социальных сетей или из лент популярных изданий и привязывать к нему ссылки. Можно также создавать ленты похожих статей с использованием хештегов. Рис. 2.19. Начальная страница Flipboard Flipboard — это тоже лента, которая содержит разные по размеру карточки с контентом, организованные в страницы, как книга (рис. 2.20). Пользователь смахивает пальцем слева направо, как будто листает журнал. Лента соцсетей. Это то, что пользователи просматривают чаще всего. Эти ленты кажутся бесконечными. Так происходит потому, что они формируют вовлеченность. Как видно на примере Twitter (рис. 2.21) и Instagram (рис. 2.22), ленты соцсетей живые. Лента может содержать контент, посты или карточки из личного или делового окружения, как в случае с Twitter. Или это может быть (почти) полностью личная лента, как в случае с Instagram. Лента в нем — это формат потребления: посмотрите фото, комментарий, а затем используйте социальные функции — поставить лайк, поделиться или комментировать. 88 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.20. Лента новостей Flipboard Социальные сети, новостные агрегаторы и сервисы личной переписки (например, электронная почта) содержат множество примеров использования паттрена Streams and Feeds (Лента новостей и каналы). Facebook автоматически (и непредсказуемо) переключается между выбранным представлением «Главные новости» и «Последние новости» и показывает все. Тем не менее Facebook нет равных в том, что касается быстрой реакции на контент. Оставить короткий комментарий к записи в Facebook почти так же просто, как подумать об этом. Паттерны 89 Рис. 2.21. Twitter 90 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.22. Instagram Паттерны 91 Деловое сотрудничество. Социальные сети и потоки сделали большой шаг от взаимодействия с потребителем к взаимодействию с бизнесом. Они представляют собой основной способ организации совместной работы в режиме онлайн, распределенной и удаленной работы. Они предоставляют сотрудникам несколько способов взаимодействия. Например, возможность начать тематическое обсуждение или присоединиться к уже существующему либо возможность совместного создания электронных документов. Совместную работу можно выполнять в режиме реального времени или асинхронно. Сотрудники могут находиться в одном регионе или в разных часовых поясах. Платформа Slack (рис. 2.23) построена вокруг тематических обсуждений. В «пространстве» компании сотрудники могут начать групповое обсуждение или присоединиться к уже существующему или организовать приватный чат с одним или несколькими коллегами. Делиться файлами можно прямо в ленте. Рис. 2.23. Slack 92 Глава 2. Организация контента: информационная архитектура и структура приложений В Quip (рис. 2.24) «якорем» служит электронный документ, над которым работают несколько пользователей. История его обсуждения находится в общей ленте комментариев рядом с документом. Оба этих подхода широко применяются во многих бизнес-приложениях. Рис. 2.24. Quip Media Browser (Медиабраузер) Что это Структура «сетка объектов» создана для просмотра и выбора из группы объектов. Они содержатся в строках и столбцах. Эта структура использует эскизы, представления элементов и интерфейс просмотра, например прокрутку. Для сайтов и приложений, ориентированных на контент, она позволяет просматривать файлы, истории или документы, доступные для чтения. Медиабраузеры также широко используются для организации медиафайлов и редактирования фотографий, видео и графических объектов. Зачем Это особый стиль, который обычно используется для разработки мобильных и десктопных приложений. Как только пользователь видит сетку изображений Паттерны 93 и видео в медиабраузере, он знает, чего ожидать: просмотреть, щелкнуть, чтобы рассмотреть подробнее, настроить слайд-шоу или плейлисты и т. д. Следующие паттерны и компоненты, описанные в других разделах этой книги, часто используют структуры медиабраузера: Grid of Equals (Выравнивание по сетке); One-Window Drilldown (Детализация в одном окне); Two-Panel Selector (Двухпанельный селектор); Pyramid (Пирамида); Module Tabs (Автономные вкладки) и Collapsible Panels (Свертываемые панели); Button Groups (Группы кнопок); древовидные списки; Keyboard Only (Только клавиатура); окна поиска; комментарии и обсуждения. Как Создайте два основных представления: матрицу или сетку элементов списка и крупный вид одного элемента. Пользователи будут переключаться между ними. Разработайте интерфейс обзора сетки разметки, чтобы пользователи могли с легкостью исследовать большие коллекции. Разработайте интерфейс просмотра и свяжите его с медиабраузером, чтобы пользователям было проще исследовать большую коллекцию. Медиабраузер. Применяйте этот паттерн для отображения последовательности элементов. Многие приложения показывают небольшое количество метаданных для каждого элемента, например название или автора. Однако делать это надо аккуратно, чтобы не перегружать интерфейс. Можно добавить элемент управления для изменения размера эскизов. Также предложите пользователям возможность сортировать элементы по различным критериям, например по дате, метке, рейтингу, фильтровать элементы и отображать только, к примеру, элементы, отмеченные звездочкой. Когда пользователь щелкает на элементе, сразу же показывайте его в отдельном представлении. Приложения часто позволяют пользователям перемещаться по сетке с помощью клавиатуры — например, кнопок со стрелками или с помощью клавиши «пробел» (см. паттерн Keyboard Only (Только клавиатура) в главе 1). Пользователю-владельцу элемента предложите способы перемещения, упорядочивания и удаления элементов. Это значит, что в интерфейсе должен быть доступен множественный выбор: щелкая на элементах при нажатой клавише 94 Глава 2. Организация контента: информационная архитектура и структура приложений Shift, устанавливая флажки или захватывая несколько элементов при зажатой левой кнопке мыши. Обязательно должны работать такие функции, как вырезание, копирование и вставка. На уровне медиабраузера предоставьте всем пользователям функции создания слайд-шоу или плейлистов. Интерфейс обзора. Содержимое медиабраузера должно опираться на интерфейс обзора — сложный, простой или практически несуществующий, в зависимости от приложения. Большинство интерфейсов должно содержать поле поиска, позволяющее выполнить поиск либо по элементам, принадлежащим только пользователю, либо по всем общедоступным элементам (или оба варианта сразу). Либо просто создайте прокручиваемую сетку. Веб-сайты, на которых размещены общедоступные коллекции, такие как YouTube и Vimeo, используют в качестве интерфейса обзора всю домашнюю страницу. На таких сайтах часто представлен как персональный пользовательский контент, так и общедоступный или продвигаемый контент. Интерфейсы управления личными фотографиями и видео, особенно десктопные приложения, такие как Apple Photos или iMovie, должны поддерживать обзор локальной файловой системы, чтобы пользователь мог находить изображения в ее каталогах. Возможности группировки элементов в альбомы, наборы, проекты и другие типы коллекций также должны быть встроены в интерфейс. Помимо этого, большинство таких интерфейсов поддерживают функции добавления в избранное или присвоения рейтинга. В Adobe Bridge в интерфейс обзора включены фильтры, и можно настроить выбор из большой коллекции элементов по более чем 10 свойствам, включая ключевые слова, дату изменения, тип камеры и значение ISO. Представление одного элемента. Это полный текст истории, документ или изображение целиком на странице, чтобы пользователь мог прочитать, изменить этот элемент, оставить комментарий или поделиться. Можно создать подробное или полное представление на одной отдельно взятой странице. Как вариант, ограничьтесь крупным планом выбранного изображения или предусмотрите плеер для воспроизведения видео. Такой крупный план можно поместить рядом с сеткой миниатюр, если окно большое, либо вывести на место сетки. Рядом выведите метаданные — информацию об элементе. На практике это означает выбор между паттернами Two-Panel Selector (Двухпанельный селектор) и One-Window Drilldown (Детализация в одном окне). Подробнее о паттернах, связанных со списками, см. в главе 7. Если речь идет об интерфейсе веб-сайта или веб-приложения, то на данном уровне можно добавить социальные функции: комментирование, лайки, кнопку «мне нравится», возможность поделиться с друзьями. Можно внедрить проставление меток или тегов — видимых всем посетителям или только создателю Паттерны 95 метки. В публичные онлайн-коллекции часто добавляется раздел «вам также может понравиться». На этом уровне можно использовать функции редактирования отдельных элементов. Например, создайте редактор фотографий с простым функционалом: кадрирование, настройка цвета и яркости, снятие эффекта красных глаз. Редактировать можно также свойства метаданных. Если полноценный редактор встроить сложно, предусмотрите возможность запустить «настоящий» редактор (например, в Adobe Bridge есть функция отправки фотографии в Photoshop). Для простой и понятной группировки всех этих функций используйте паттерн Button Groups (Группы кнопок). Свяжите элемент с предыдущим и последующим элементами в списке, добавив кнопки «Предыдущий» и «Следующий», особенно если вы используете паттерн One-Window Drilldown (Детализация в одном окне) для представления единичного элемента, который также требует наличия кнопки «Назад». См. также навигационный паттерн Pyramid (Пирамида) в главе 3. Примеры Просмотр коллекции объектов. Преимущество изображений в том, что они наглядны и могут содержать в себе большое количество информации. Вот почему они часто используются для представления набора объектов, которые можно просматривать и выбирать. Сетка изображений, сопровождаемых описаниями или без них, — это компактный, полезный паттерн для выбора одного элемента из большой коллекции. Он универсален для мобильных, десктопных и широкоэкранных пользовательских интерфейсов, таких как Apple TV. При выборе одного элемента или карточки из сетки медиабраузера этот элемент можно просмотреть или загрузить страницу с его подробным описанием. В приложении для чтения электронных книг Kindle для iOS (рис. 2.25) страница просмотра — это набор изображений обложек книг. В профиле пользователя Instagram (рис. 2.26) очень мало метаданных — в основном он представляет собой сетку изображений, которую можно прокручивать. Именно изображения формируют вашу личность и идентичность в Instagram. В YouTube (рис. 2.27), Apple TV (рис. 2.28) и LinkedIn Learning (рис. 2.29) на полноэкранных страницах просмотра доступно большое количество видеороликов. В этих же сервисах можно увидеть популярный вариант прямоугольного расположения сетки: прокручиваемую ленту — горизонтальный ряд одинаковых по высоте объектов. Поскольку элементов для просмотра очень много, изображения сгруппированы по категориям, чтобы их было легче просматривать и воспринимать. Apple TV использует минималистский подход. YouTube добавляет больше всего информации, фактически каждый элемент в нем — это «карточка» с изображением, заголовком, именем автора и данными о просмотрах, лайках и комментариях (что неудивительно, поскольку YouTube опирается на механизмы социальных сетей). 96 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.25. Приложение Kindle Паттерны 97 Рис. 2.26. Просмотр профиля в Instagram 98 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.27. YouTube Рис. 2.28. Apple TV Паттерны 99 Рис. 2.29. LinkedIn Learning На YouTube-каналах контент представлен либо в режиме медиабраузера, либо, если вы выбрали просмотр одного видео, в виде списка рядом с видеоплеером (по умолчанию). Щелкнув на миниатюре ролика, вы перейдете на страницу этого видео, где содержится подробная информация о нем и поле комментариев. Существуют такие разделы, как плейлисты, последние добавленные видео, самые просматриваемые видео и самые рейтинговые видео. Также во всех режимах доступно окно поиска. Управление наборами медиафайлов и их редактирование. Создатели контента используют паттерн медиабраузера, чтобы управлять наборами файлов, которые они создают или обрабатывают. Apple Photos (рис. 2.30), Adobe Bridge (рис. 2.31) и Apple iMovie (рис. 2.32) — это десктопные приложения для управления персональными коллекциями изображений. Их интерфейсы обзора (это всегда двухпанельные селекторы) различаются по сложности: от 100 Глава 2. Организация контента: информационная архитектура и структура приложений очень простого дизайна Apple Photos до варианта Adobe Bridge с многочисленными панелями и фильтрами. Apple Photos использует паттерн One-Window Drilldown (Детализация в одном окне) для перехода к представлению одного элемента, а Adobe Bridge и Apple iMovie располагают все три вида на одной странице. Часто используется прокручиваемая горизонтальная лента — вариация прямоугольной сетки. В iMovie по такому принципу устроена шкала времени. Это главная рабочая палитра для создания контента, организованного во времени, такого как видео. В Adobe Acrobat (рис. 2.33), инструменте для чтения и редактирования документов в популярном PDF-формате, страницы документов в режиме редактирования представлены в виде сетки. Это позволяет быстро менять порядок страниц, выбирать страницы, которые нужно удалить, или вставлять в нужное место новые элементы. Рис. 2.30. Apple Photos Паттерны 101 Рис. 2.31. Adobe Bridge Рис. 2.32. Apple iMovie 102 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.33. Adobe Acrobat Dashboard (Дашборд) Что это Обычно это первая страница, которую видит пользователь при входе на платформу. Этот паттерн очень популярен при разработке бизнес-приложений. Дашборды отображают основные данные на одной странице, которая регулярно обновляется. На них размещается актуальная, полезная информация, диаграммы и графики, а также важные сообщения, ссылки или кнопки, обычно связанные с ключевыми для бизнеса метриками или процессами. Дашборды очень популярны, поскольку с их помощью можно быстро обновить состояние, ключевую информацию и задачи, которые необходимо выполнить. На ваш сайт или приложение постоянно поступает входящий поток информации, например данные веб-сервера, соцсетей, новости, изменения в расписании Паттерны 103 рейсов, бизнес-аналитика или финансовые показатели. Для пользователей важно иметь возможность отслеживать изменения этой информации. Зачем Это знакомый и узнаваемый стиль страницы. Дашборды давно существуют как в сети, так и в реальном мире, и люди ждут, что они будут работать определенным образом: демонстрировать полезную информацию, самостоятельно обновляться, использовать графики и т. д. Для создания дашбордов используются взаимосвязанные паттерны и компоненты. Во многих онлайн-панелях используются паттерны, которые можно встретить и в других инструментах: паттерн Titled Sections (Именованные разделы); вкладки и паттерн Collapsible Panels (Свертываемые панели); паттерн Movable Panels (Перемещаемые панели); паттерн One-Window Drilldown (Детализация в одном окне); разнообразные списки и таблицы (см. главу 7); информационная графика (см. главу 9); паттерн Datatips (Всплывающие подсказки). Как Решите, какая информация интересна пользователю. Это не так просто сделать. Вам придется побыть исследователем и редактором, чтобы не размещать информацию, которая бесполезна, вводит в заблуждение или в которой невозможно разобраться. Избавьтесь от ненужной информации или хотя бы сократите ее количество. Подберите подходящую иерархию (см. главу 4) для организации визуальных элементов — списков, таблиц и инфографики. Старайтесь разместить всю важную информацию на одной странице, чтобы не требовалась прокрутка, чтобы пользователь могут увидеть все сразу. Группируйте связанные данные в именованные разделы (паттерн Titled Sections (Именованные разделы)) и используйте вкладки только в том случае, если вы уверены, что пользователям не потребуется просмотреть две вкладки одновременно. Подробную информацию об элементе можно представить, используя паттерн One-Window Drilldown (Детализация в одном окне), когда пользователь щелкает на ссылке или изображении, чтобы увидеть детали. Здесь удобно использовать паттерн Datatips (Всплывающие подсказки), когда информация появляется при наведении курсора мыши на графические элементы. Для отображения данных используйте подходящие и грамотно спроектированные графические элементы. Индикаторы, круговые шкалы, круговые диаграммы 104 Глава 2. Организация контента: информационная архитектура и структура приложений и трехмерные столбчатые диаграммы — это красиво, но не всегда удобно, чтобы с ходу считывать с них сравнительные данные. Простые линейные и столбчатые диаграммы подходят куда лучше, особенно для распределенных по времени данных. Если числа и текст важнее, чем изображения, используйте списки и таблицы. Для таблиц, состоящих из нескольких столбцов, подходит паттерн Row Striping (Чередование строк). Пользователи не будут всматриваться в элементы панели, им важно получить информацию с одного взгляда. Поэтому выделите ключевые слова и числа в тексте. Нужна ли возможность настраивать дашборд по своему вкусу? Во многих дашбордах такая возможность есть, и пользователи зачастую ожидают ее. Один из вариантов ее реализации — возможность упорядочить разделы. Например, в Salesforce доступны подвижные панели (паттерн Movable Panels (Перемещаемые панели)) — в дополнение к возможности выбрать, какие области отображать. Примеры Крупная компания Salesforce (рис. 2.34), занимающаяся разработкой программного обеспечения для бизнеса, удовлетворяет потребность крупных и малых предприятий в мониторинге и управлении всеми формами бизнес-процессов. Основным инструментом для достижения этих целей служат специально созданные и настраиваемые дашборды. Ниже приведем несколько примеров специализированных дашбордов. Пользователи могут создавать или настраивать модули в соответствии со своими потребностями, а затем скомпоновать модули стандартного размера в сетке, как им удобно. Результат можно сохранить и сделать доступным для других пользователей. В стартапе SpaceIQ (рис. 2.35) дашборд выводится после входа в систему. Панель создана по классическому паттерну проектирования и включает ключевые показатели эффективности, обзор текущей ситуации, указание на то, что требует внимания, и быстрый переход к другим важным разделам. Завершая разговор об этом паттерне, порекомендуем книгу Стивена Фью о дашбордах, Information Dashboard Design: Displaying Data for At-a-Glance Monitoring (Analytics Press, 2013). Паттерны 105 Рис. 2.34. Дашборд Salesforce 106 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.35. SpaceIQ Canvas Plus Palette (Холст и палитра) Что это Структура приложения, состоящая из центральной рабочей области и наборов инструментов вокруг нее. Рабочая область представляет собой большую пустую зону, или холст, на котором пользователь создает или редактирует объект. Вокруг этой области по бокам, сверху или снизу расположены наборы инструментов, называемые палитрами. Инструменты представлены в виде значков. Пользователь щелкает на значках, чтобы создать объект на холсте или выбрать инструмент для изменения объекта. В совокупности это своего рода цифровой верстак или виртуальный мольберт художника. Пользователь выбирает один инструмент за другим, чтобы применять их к основному объекту. Когда использовать Если вы разрабатываете графический редактор. Типичный вариант использования включает создание новых объектов и размещение их в виртуальном пространстве. Паттерны 107 Зачем Эта пара панелей — палитра, при помощи которой создаются объекты, и холст, на который они помещаются, — применяется так часто, что с ней встречался практически каждый пользователь десктопного ПО. Она служит для переноса знакомых физических объектов в виртуальный мир на экране. У палитры есть огромное преимущество визуального восприятия: наиболее часто встречающиеся значки (кисть, рука, лупа и т. д.) используются в разных приложениях и всегда значат одно и то же. Как Создайте большую пустую область, которая будет служить пользователю холстом. Это может быть отдельное окно, как в Photoshop (см. рис. 2.18), или встроенная область на странице с другими инструментами. Главное — пользователь должен одновременно видеть и холст, и палитру. Поместите дополнительные инструменты (панели свойств, образцы цвета и т. д.) справа или ниже холста, в небольших похожих на палитру окнах или на панелях. Сама палитра должна представлять собой сетку кнопок со значками на них. На кнопках можно разместить текст, если значки не очень понятны; в некоторых графических интерфейсах на палитре рядом со значками присутствуют названия соответствующих компонентов. Поместите палитру слева от холста или над ним. Можно разбить ее на подгруппы, а для их представления использовать паттерн Module Tabs (Автономные вкладки) или Collapsible Panels (Свертываемые панели). Большинство кнопок палитры служат для создания объекта на холсте. Но многие разработчики успешно интегрировали в палитру также режим масштабирования и лассо. Операции, используемые в палитре для создания элементов, различаются в зависимости от приложения. Где-то используется только перетаскивание; в некоторых приложениях для этой цели используют один щелчок на палитре и один щелчок на холсте; а в некоторых — чувствительные к давлению инструменты, такие как цифровое перо или просто изменение давления пальца на сенсорный экран и другие специальные жесты. Очень важно тестировать удобство использования этих инструментов, поскольку их назначение не всегда очевидно и может трудно запоминаться. Примеры Примеры ниже показывают разнообразие шаблонов холста и палитры. Adobe Photoshop (рис. 2.36) — это классический вариант. Все четыре края страницы содержат палитры, панели и команды, которые автор использует при работе с изображением. В Axure RP Pro (рис. 2.37) есть палитры слева и справа от центральной 108 Глава 2. Организация контента: информационная архитектура и структура приложений панели, на которой пользователь создает интерактивные эскизы прототипов программного обеспечения. Далее представлено приложение Omni-Graffle (рис. 2.38) для создания векторной графики на macOS, в нем палитра инструментов расположена слева. Этот паттерн используется и в мобильных приложениях, когда они включают много инструментов или вариантов выбора. В iOS Photos (рис. 2.39) редактируемое изображение помещается на центральный холст. Ниже приведены три палитры инструментов, которые представляют собой раскрываемые и скрываемые панели с набором инструментов редактирования. Рис. 2.36. Adobe Photoshop Паттерны 109 Рис. 2.37. Axure RP Pro Рис. 2.38. OmniGraffle 110 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.39. iOS Photos Паттерны 111 Wizard (Мастер) Что это Инструмент, который шаг за шагом ведет пользователя по интерфейсу, чтобы решать задачи в заданном порядке. Когда использовать Если вы разрабатываете пользовательский интерфейс для длинной или сложной задачи, которая будет в новинку для пользователя. Это задача, которую пользователь решает нечасто и которую не хочет тщательно контролировать (пример — установка программы на компьютер). И если вы уверены, что разработчик пользовательского интерфейса лучше знает, как с ней проще всего справиться. Задачи, подходящие для использования этого паттерна, обычно разветвленные или очень длинные и утомительные; они представляют собой последовательность принимаемых пользователем решений, влияющих на выбор на следующем шаге. Хитрость заключается в том, что пользователь должен сам захотеть отдать контроль над тем, что и когда происходит. Такая схема работает превосходно, когда необходимость принимать решения только мешает: «Не заставляйте меня думать, просто скажите, что делать дальше». Представьте себе, что вы идете по незнакомому аэропорту — намного проще следовать указателям, чем изучать схему аэропорта. Вы не узнаете, как он устроен, но вам это и не нужно. Однако в других случаях этот паттерн может вызывать отторжение. Часто эксперты считают мастеры негибкими и примитивными, например в программах для творчества: создания текстов, рисования или программирования. Сюда же можно добавить пользователей, которые хотят разобраться в работе программы; мастер не позволяет им понять, на что именно влияют их действия или как меняется состояние приложения в зависимости от сделанного выбора. Иногда это просто выводит из себя. Зачем Разделять и властвовать. Разбивая задачу на последовательность этапов, на каждом из которых пользователь работает в своеобразном отдельном «ментальном пространстве», вы эффективно упрощаете задачу. Вы заранее составляете карту пути к выполнению задачи, избавляя пользователя от необходимости задумываться над структурой этой задачи. Все, что пользователю нужно делать, — это последовательно выполнять все шаги в уверенности, что если следовать инструкции, то все будет хорошо. 112 Глава 2. Организация контента: информационная архитектура и структура приложений Однако сама потребность в мастере указывает, что задача, возможно, чересчур сложна. Если ее можно упростить настолько, что для ее решения будет достаточно заполнить короткую форму или несколько раз щелкнуть мышью, то лучше так и сделать — это будет проще и эффективнее. (Кроме того, учитывайте, что иногда мастер воспринимается как демонстрирующий «снисходительное» отношение к пользователю.) Как Разбивка задачи. Разделите операции, составляющие задачу, на «порции», или группы. Эти группы можно расположить в определенной последовательности или не располагать; иногда такая разбивка на шаги – раз, два, три, четыре — служит просто для удобства. Тематическое разбиение процесса покупки в интернет-магазине может включать в себя страницы для выбора продукта, ввода информации об оплате, ввода адреса для выставления счета и ввода адреса для доставки товара. Порядок не важен, так как последующие шаги не зависят от предыдущих. А вот объединение схожих вариантов выбора в группы упростит задачу пользователям, заполняющим эти формы. Возможно, вы решите разбить задачу в точках принятия решений, чтобы в зависимости от выбора, который делает пользователь, динамически менять последующие шаги. Например, в мастере установки программного обеспечения пользователь может предпочесть выборочную установку компонентов, что потребует дополнительных шагов; если же пользователь выберет стандартную установку, то эти шаги делать не потребуется. Динамические пользовательские интерфейсы хорошо подходят для представления разветвленных задач, подобных этой, так как пользователь в этом случае видит только то, что имеет отношение к его выбору. В любом случае самое сложное в разработке таких интерфейсов — поддерживать баланс размера порций и их количества. Глупо создавать мастер из двух шагов, а мастер из 15 шагов быстро утомит пользователя. С другой стороны, порции не должны быть слишком большими, иначе вы потеряете преимущества этого паттерна. Физическая структура. Мастеры, в которых каждый шаг представлен на отдельном экране с кнопками «Назад» и «Далее», — это самый известный и понятный вариант реализации паттерна. Однако он хорош далеко не всегда, так как каждый шаг в таком случае изолирован от контекста, то есть пользователь не видит, что было раньше и что будет дальше. Тем не менее преимущество таких мастеров в том, что для каждого шага в них выделен отдельный экран с иллюстрациями и пояснениями. Если вы выберете этот вариант, предусмотрите возможность продвигаться вперед и возвращаться назад по всей задаче. Предложите пользователю вернуться Паттерны 113 на шаг назад или изменить свой выбор другим способом, если он этого хочет. Кроме того, во многих пользовательских интерфейсах есть карта или обзорное представление всех шагов с возможностью выбрать нужный — преимущества паттерна Two-Panel Selector (Двухпанельный селектор). (В отличие от этого паттерна, допускающего произвольный доступ к любому элементу, мастер подразумевает четко определенный порядок шагов, даже если он всего лишь рекомендуемый.) Если же вы решите выводить все шаги на одной странице, используйте паттерны, рассматриваемые в главе 4. Titled Sections (Именованные разделы) с понятной нумерацией шагов в заголовках. Он подходит для не очень разветвленных задач, так как все шаги можно видеть одновременно. Responsive Enabling (Отзывчивое включение), когда все шаги находятся на одной странице, но каждый последующий остается недоступным до тех пор, пока пользователь не завершит предыдущий. Responsive Disclosure (Отзывчивое обнаружение), когда следующий шаг в пользовательском интерфейсе не виден до тех пор, пока пользователь не завершит текущий. Это, возможно, самый изящный способ реализации короткого мастера. Он динамичный, компактный, и его просто использовать. Паттерны Good Defaults (Хорошие варианты по умолчанию) и Smart Prefills (Умное предзаполнение) из главы 10 можно использовать независимо от способа организации шагов. Если пользователь захотел передать контроль над процессом в ваши руки, то он, скорее всего, разрешит вам задавать варианты выбора по умолчанию, когда он для него не важен, например определять место для установки программы. Примеры Дизайнеры Microsoft Office избавились от множества мастеров, но некоторые оставили — и на то были веские причины. Импортирование данных в Excel способно сбить с толку любого. Мастер импорта данных (рис. 2.40) представляет собой классический пример этого формата: с кнопками «Назад/Далее», ветвлениями и без карты шагов. Он может показаться неудобным, но он работает. Каждый экран позволяет сосредоточиться на текущей задаче и не думать о том, что будет дальше. 114 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.40. Импортирование в Microsoft Excel Паттерны 115 Settings Editor (Редактор настроек) Что это Автономная страница или окно, которое легко найти и где пользователи могут изменять настройки, свойства или параметры. Если настроек очень много, разбейте содержимое на отдельные вкладки или страницы. Когда использовать Если вы создаете: приложение, в котором предусмотрены общие настройки; операционную систему, мобильное устройство или платформу, содержащие параметры, общие для всей системы; сайт или приложение, на котором нужно регистрироваться, — пользователю потребуется редактировать свои учетные данные или профиль; открытый инструмент для создания документов или других сложных продуктов. Пользователям понадобится менять свойства документа, объекты внутри документа и другие элементы; конфигуратор продуктов, позволяющий подобрать продукт в режиме онлайн. Зачем Несмотря на то что в обоих паттернах используются формы, редактор настроек отличается от мастера и содержит обязательное условие. Пользователь должен иметь возможность найти и изменить нужное свойство, не проходя заданную последовательность шагов: произвольный доступ очень важен. Свойства следует группировать по категориям, причем категории должны быть понятными и иметь очевидные названия, чтобы их было проще искать. Важно также учесть, что люди будут использовать редактор настроек не только для изменения существующих настроек, но и для их просмотра. Пользователю должно быть сразу понятно, для чего эти настройки предназначены. Опытные пользователи ожидают, что редактор настроек, учетная запись и данные профиля будут находиться в привычном месте и работать предсказуемым образом. Нарушая привычный порядок, вы очень рискуете! Как Во-первых, сделайте так, чтобы его было просто найти. На большинстве платформ, как мобильных, так и десктопных, общие настройки расположены стандартно. Следуйте принятым условностям и не пытайтесь изобретать велосипед. 116 Глава 2. Организация контента: информационная архитектура и структура приложений Аналогично, на сайтах, где предусмотрена регистрация, ссылка на параметры учетной записи или профиль обычно находится рядом с именем пользователя, часто в верхнем правом или левом углу. Во-вторых, группируйте похожие свойства на страницах и присваивайте этим страницам понятные названия. (Иногда все свойства или настройки располагаются на одной странице, но так бывает нечасто.) Попробуйте рассортировать карточки с репрезентативными группами пользователей, это поможет вам определить категории и выбрать для них названия. Если свойств очень много, может потребоваться трех- или четырехуровневая иерархия групп. Однако убедитесь, что пользователю не придется щелкать мышкой 53 раза, чтобы добраться до наиболее востребованных параметров. В-третьих, определитесь с представлением страниц. Вкладки, двухпанельный селектор и детализация в одном окне (см. главу 7) с подробным «меню» страниц вверху страницы — вероятно, самый популярный макет редактора настроек. Дизайн самих форм стоит рассмотреть отдельно. Подробнее о паттернах и техниках проектирования форм рассказывается в главе 10. Наконец, определите, будут ли изменения, которые вносит пользователь, применяться немедленно или лучше создать кнопки «Сохранить» и «Отмена». Это зависит от типа изменяемых настроек. Общие настройки обычно изменяются сразу после внесения изменений. Настройки на веб-сайтах чаще сохраняются щелчком на кнопке «Сохранить». Для настроек приложений возможны оба способа. В любом случае это не самая большая проблема. Следуйте сложившейся традиции, если она есть, или подумайте, какой способ больше подходит к технологии, лежащей в основе системы. Если же решение принять так и не удалось, протестируйте систему с пользователями. Примеры Google (рис. 2.41) и Facebook (рис. 2.42) используют вкладки для страниц редактирования пользовательских профилей. У Amazon есть единая ссылка для всей информации, связанной с учетной записью: Your Account (рис. 2.43). На этой странице меню (паттерн Menu Page, глава 3) находятся настройки учетной записи, а также элементы управления данными платежных карт, информация о заказе, цифровом контенте и даже об активности сообщества, а также вишлисты. Страница организована понятно и компактно — если мне понадобится уточнить свои данные на Amazon, я знаю, куда идти. Google, Facebook и Amazon уделяют огромное внимание управлению настройками, предпочтениями и конфигурацией для своих сервисов. У пользователей должен быть доступ к этим настройкам, чтобы просматривать или изменять их. Все эти компании выбрали сильную организационную систему для категоризации настроек и предпочтений. Google и Facebook используют вкладки для Паттерны 117 организации настроек по основным категориям, со страницами для каждой категории, в свою очередь, разделенными с помощью заголовков и групп элементов управления, чтобы они были более понятны и относительно легко доступны. Amazon помещает свои наиболее часто используемые настройки и конфигурации в верхней части экрана настроек и добавляет гигантские кнопки. Выбрав один из вариантов, пользователь переходит к соответствующей категории настроек. Ниже находится сетка карточек. Каждая из них содержит ярлык с названием категории настроек и ссылки на каждую подкатегорию внутри. Все три платформы используют развитую информационную архитектуру и четкую навигацию, чтобы сложные структуры настроек были понятны пользователю. В конечном счете у него есть все шансы найти и изменить требуемую настройку, пусть и не без труда. Рис. 2.41. Google 118 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.42. Facebook На Amazon (рис. 2.43) существует невероятное множество свойств, требующих глубокой иерархии страниц. Однако дизайнеры решили некоторые проблемы. Например, они помещают ярлыки для тех элементов, которые пользователи ищут чаще всего, на страницу верхнего уровня. Поисковую строку располагают вверху страницы. А списки элементов используют для демонстрации соответствующих элементам категорий. В iOS, мобильной ОС Apple, множество настроек (рис. 2.44). Некоторые из них общие для всего устройства, а некоторые используются для отдельных приложений на iPhone. Apple организует их в виде единого прокручиваемого списка. Некоторый порядок поддерживается благодаря тому, что самые важные и часто используемые настройки находятся вверху. Элементы в длинном списке также сгруппированы, чтобы пользователю было проще находить их и выбирать. В macOS, десктопной ОС Apple, существует панель категорий для системных настроек (рис. 2.45). Они помечены разделами, значками и ярлыками, чтобы было проще понять назначение категории и выбрать нужную. Паттерны 119 Рис. 2.43. Amazon 120 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.44. Настройки iOS Паттерны 121 Рис. 2.45. Системные настройки macOS Alternative Views (Альтернативные представления) Что это Представления или методы визуализации информации в программе или приложении, которые существенно отличаются друг от друга, но обеспечивают доступ к одной и той же информации. Когда использовать Если вы создаете инструмент для просмотра или редактирования сложного документа, списка, веб-сайта, карты или другого контента. Требования к дизайну могут быть взаимоисключающими. Невозможно одновременно показать пользователю набор элементов А и набор элементов Б, поэтому вы 122 Глава 2. Организация контента: информационная архитектура и структура приложений разрабатываете их по отдельности, предоставив пользователю возможность выбрать подходящий. Зачем Невозможно учесть все возможные сценарии использования в одном дизайне. Например, довольно сложно вывести на печать страницу сайта, так как требования к представлению информации у печатной страницы иные: на ней не должно быть интерактивных элементов и элементов навигации, а остальной контент должен быть отформатирован по размеру бумаги. Вот еще несколько причин, чтобы использовать паттерн Alternative Views (Альтернативные представления): у пользователей есть определенные предпочтения к скорости, стилю оформления и др.; пользователю требуется взглянуть на данные «со стороны», чтобы понять суть проблемы. Можно провести аналогию с тем, как пользователи переключаются между режимами «Рельеф» и «Просмотр улиц» в онлайн-картах; если пользователь редактирует слайд-шоу или сайт, в основном он работает в структурном представлении документа, которое включает инструменты редактирования, маркеры скрытого содержимого, мастеры макетов, личные заметки и т. д. Однако время от времени он должен видеть промежуточные результаты. Как Выберите несколько сценариев использования, которые непросто реализовать в стандартном режиме работы приложения или сайта. Разработайте специализированные представления для них и предлагайте их в качестве альтернативных вариантов в том же окне или на той же странице. Какие-то данные в таких альтернативных представлениях могут добавляться и удаляться, но основное содержимое остается примерно одинаковым. Типичный пример переключения представлений — изменение внешнего вида списка. Как в Windows, так и в MacOS списки файлов можно просматривать в виде сетки миниатюр, древовидной таблицы или «карусели» (паттерны Thumbnail Grid, Tree Table, Carousel). Если интерфейс необходимо разобрать на части, например для принтера или экранного диктора, предусмотрите возможность убрать вторичные элементы и элементы навигации, а также сжать или удалить изображения. Паттерны 123 Разместите «переключатель» между режимами в главном интерфейсе. Он не обязательно должен бросаться в глаза; в PowerPoint и Word кнопки переключения режимов находятся в правом нижнем углу, куда обычно не смотрят. В большинстве приложений альтернативные режимы просмотра обозначены иконками. Убедитесь, что из альтернативного вида легко вернуться к представлению по умолчанию. Имейте в виду, что при смене режима представления текущее состояние приложения должно сохраняться: выбранные элементы, местонахождение пользователя в документе, несохраненные изменения, операции отмены и повторного ввода и т. д. Если этого не предусмотреть, пользователя ждет неприятный сюрприз. Приложения, умеющие «запоминать» пользователей, часто сохраняют выбор режима представления до следующего сеанса. Другими словами, если пользователь решает перейти в альтернативное представление, то приложение отобразит его по умолчанию и в следующий раз, когда пользователь войдет в приложение. Веб-сайты используют для этого файлы cookie; десктопные приложения могут отслеживать предпочтения каждого пользователя; мобильные приложения могут просто запоминать, какой режим просмотра был активирован последним. В веб-приложениях альтернативные режимы просмотра можно реализовать при помощи CSS. Например, так обычно создается версия страницы для печати. Примеры Рассмотрим, как можно эффективно использовать режимы просмотра или альтернативные представления, на примере двух приложений. Паттерн состоит в том, чтобы поместить результаты поиска на карту, давая представление о том, где находится объект, а затем представить те же результаты в виде списка с прокруткой, элменты которого легче сортировать и фильтровать. В одном режиме доступны общие свойства объекта и его геоданные (ближе он или дальше от пользователя). В другом можно увидеть подробные сведения об объекте. Сперва обратимся к Yelp, платформе для поиска компаний в местном секторе услуг. В мобильном приложении Yelp для iOS (рис. 2.46) доступны два вида, которые мы рассмотрели. Пользователю приходится переключаться между вариантами просмотра на маленьком экране. В десктопном приложении Yelp (рис. 2.47) достаточно места для одновременного просмотра карты и списка. Благодаря этому процесс поиска и работы с информацией становится удобнее, например проще выделить организацию одновременно в списке и на карте. У Zillow — платформы, специализирующейся на недвижимости, — похожий дизайн. Zillow на iOS предлагает вид карты и вид списка результатов поиска по 124 Глава 2. Организация контента: информационная архитектура и структура приложений запросам (рис. 2.48). Пользователю придется переключаться между представлениями. В десктопном приложении Zillow (рис. 2.49) оба этих вида располагаются на одной странице. Обратите внимание на использование фотографий предлагаемой недвижимости в представлении списка. Благодаря этому можно быстро просмотреть множество вариантов и сосредоточиться на самых привлекательных. Рис. 2.46. Виды «Карта» и «Список» в Yelp на IOS Паттерны 125 Рис. 2.47. Объединение карты и списка в десктопной версии Yelp 126 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.48. Виды «Карта» и «Список» в Zillow на IOS Рис. 2.49. Объединение карты и списка в десктопной версии Zillow Паттерны 127 Два графических редактора, Apple Keynote (рис. 2.50) и Adobe Illustrator (рис. 2.51), предлагают различные представления для редактируемого объекта. В режиме слайд-шоу обычно можно редактировать один слайд и его содержимое за раз, но иногда пользователю необходимо видеть все слайды, расположенные на виртуальном «столе». (Здесь не показан третий, полноэкранный режим, в котором фактически воспроизводится слайд-шоу.) Рис. 2.50. Apple Keynote 128 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.51. Adobe Illustrator В Adobe Illustrator предусмотрен «структурный» вид графических объектов в документе — он полезен, если у вас много сложных и многослойных объектов, — и стандартный вид полностью визуализированного изображения. Режим структуры создан исключительно для оптимизации производительности системы. Он потребляет меньше ресурсов компьютера и значительно ускоряет работу. Паттерны 129 Many Workspaces (Несколько рабочих пространств) Что это Интерфейс, в котором одновременно можно просматривать несколько страниц, проектов, файлов или сред. В нем может быть несколько высокоуровневых вкладок, групп вкладок, лент новостей/событий, панелей или окон. У пользователей должна быть возможность располагать эти рабочие пространства рядом друг с другом на странице. Когда использовать Если вы создаете приложение для просмотра или редактирования контента любого типа: веб-сайта, документа, изображения или целого проекта, который содержит большое количество файлов. Основная причина использования этого паттерна — необходимость работать над несколькими задачами или в нескольких режимах представления одновременно. К примеру, пользователи часто держат открытыми несколько вкладок в браузере, чтобы переключаться между сайтами или сравнивать их. Разработчикам приложений и создателям контента часто приходится изменять код или элементы управления в редакторе и одновременно с этим видеть результаты этих изменений — либо скомпилированный и выполняемый код, либо визуализированный медиаобъект, — чтобы понимать, все ли они правильно делают. Дизайнерам обычных сайтов это чаще всего ни к чему. Во всех основных браузерах этот паттерн успешно реализован для вкладок и окон. Сервисы для работы с электронными таблицами, такие как Microsoft или Google, предлагают рабочие области со вкладками для разделения рабочего пространства на отдельные листы. Паттерн Many Workspaces (Несколько рабочих пространств) обычно не используется и в приложениях, структурно организованных как поток персональных новостей. Сервисы электронной почты, личные страницы Facebook и т. д. демонстрируют только ленту, необходимую пользователю; держать в них открытыми несколько окон смысла не имеет. Тем не менее почтовые клиенты позволяют открывать одновременно несколько сообщений в разных окнах. В некоторых приложениях Twitter можно выводить несколько потоков на одной странице: например, ленту результатов поиска, ленту твитов из пользовательского списка, ленту популярных ретвитов (см. пример TweetDeck на рис. 2.52). Зачем Иногда людям нужно быстро переключиться между задачами в одном проекте или файле или проконтролировать действия в нескольких потоках одновременно. Люди многозадачны по своей природе. Они могут резко сменить направление деятельности, ход мыслей, бросить задачу А и переключиться на задачу Б, 130 Глава 2. Организация контента: информационная архитектура и структура приложений а потом на дела, которые были давно забыты. Хороший интерфейс должен поддерживать такой режим многозадачности. Параллельное сравнение двух или более элементов помогает людям изучать их и анализировать. Предоставьте пользователям возможность располагать страницы или документы рядом, не заставляйте их постоянно переключаться между окнами. Этот паттерн напрямую поддерживает паттерны из главы 1, такие как Prospective Memory (Проспективная память), — пользователь может оставить страницу открытой, чтобы напомнить себе о незавершенной задаче; и Safe Exploration (Безопасное исследование), поскольку если открыть еще одно рабочее окно, ничего не случится. Как Выберите один или несколько способов отображения рабочей области. Во многих популярных приложениях для этого используются: вкладки; отдельные окна операционной системы; столбцы или панели внутри окна; окна, разделенные на части, причем пользователь сам может настраивать размеры частей. Если контент в каждой области достаточно прост, например текст, списки или ленты новостей и каналы, то удобнее всего использовать панели или деление окна на части. Более сложный контент может требовать выделения целых вкладок или окон, чтобы пользователю было доступно больше рабочего пространства. Самое сложное — это среды разработки. В одном открытом проекте может идти одновременная работа с файлами кода, таблицами стилей, командными окнами (где запускаются компиляторы и другие инструменты), окнами результатов или файлами журнала и даже графическими редакторами. Это означает, что одновременно открыто множество окон или панелей. Браузер Chrome автоматически запоминает все рабочие области (все открытые страницы на вкладках и в окнах) при закрытии. Когда пользователь снова запускает его, все ранее открытые страницы восстанавливаются практически в неизменном виде. Это особенно приятно после неожиданных сбоев в работе браузера или компьютера. Попробуйте добавить такую функцию в свой продукт — пользователи будут вам благодарны. Паттерны 131 Примеры TweetDeck (рис. 2.52) и Hootsuite (рис. 2.53) используют многопанельный или многопоточный подход к управлению каналами социальных сетей. TweetDeck — это приложение, использующее паттерн Streams and Feeds (Потоки и каналы). В нем можно просматривать сразу несколько потоков: отфильтрованные ленты Twitter, ленты других источников и т. д. На рис. 2.52 показаны типичные колонки в TweetDeck. Такой дизайн хорошо соответствует облику ленты новостей, поскольку все обновления видны сразу в одном представлении; если бы эти ленты находились в разных вкладках или окнах, пользователь не смог бы следить за всеми обновлениями по мере их появления. В TweetDeck по умолчанию несколько потоков расположены рядом друг с другом. В примере на рис. 2.52 пользователь видит одновременно свою основную ленту, уведомления и сообщения. Обычно такие элементы находятся в разных вкладках и их можно просмотреть только по отдельности. Обратите также внимание, что четвертая панель содержит список популярных хештегов в Twitter. В TweetDeck можно держать открытыми несколько панелей новостей, что полезно, если вы следите за несколькими аккаунтами Twitter одновременно. Рис. 2.52. Аккаунт Twitter в TweetDeck Hootsuite — это платформа для управления публикациями в социальных сетях. Она полезна как для обычных пользователей, так и для компаний и издателей, которые хотят управлять всеми своими аккаунтами в социальных сетях с помо- 132 Глава 2. Организация контента: информационная архитектура и структура приложений щью одного ресурса. Она также помогает размещать контент и оптимизировать взаимодействие с подписчиками или читателями во всей системе социальных сетей. В примере на рис. 2.53 пользователь Hootsuite создал учетные записи в Twitter и LinkedIn. Благодаря возможности просматривать их на одном экране пользователь может отслеживать активность в обеих учетных записях (и еще многое другое). Размещать посты и отвечать на сообщения в каждом из этих аккаунтов по отдельности можно из одного многопанельного представления Hootsuite. Рис. 2.53. Hootsuite Cinema 4D (рис. 2.54) — это инструмент для создания, визуализации и анимации трехмерных объектов. В этом десктопном приложении на одном экране располагаются несколько информационных панелей и панелей инструментов. Экран Паттерны 133 включает панель с данными об исходном файле и версии рабочего файла, центральную панель, где расположен редактируемый 3D-объект, палитры, панели инструментов и панели с элементами управления для работы с 3D-объектом, а также временную шкалу, которая управляет анимацией 3D-объекта. Рис. 2.54. Cinema 4D 134 Глава 2. Организация контента: информационная архитектура и структура приложений Help Systems (Справочные системы) Что Любой интерфейс, ориентированный на потребности пользователя, должен включать ярлыки, подсказки и описания того, как работает та или иная функция. Пользователи должны получать ответы на свои вопросы и помощь, когда они в этом нуждаются. Реализовать эти инструменты можно несколькими способами, в зависимости от ситуации. Вывод встроенного текста. На экран выводятся текстовые подсказки об объекте, с которым работает пользователь. Цель таких встроенных подсказок — рассказать пользователю, что перед ним находится и для чего служит этот элемент. Кроме того, знакомство с примерами информации, которую пользователю может понадобиться указывать, помогает предотвратить возможное неправильное форматирование при ее вводе в дальнейшем. Рассмотрим сочетание следующих элементов: содержательные заголовки и подзаголовки; инструкции: фраза или предложение, выводимые на экран, чтобы помочь разобраться со сложным интерфейсом; ярлыки для элементов форм; подсказки или примеры ввода данных в элементах формы или рядом с ними. Подсказки. Подсказка — это краткое описание или объяснение каждого элемента на экране. В десктопных веб-приложениях они отображаются, когда пользователь наводит курсор на компонент интерфейса. Другой вариант — поместить знак вопроса или другой значок (или ссылку) рядом с определенным компонентом. При нажатии или щелчке на значке отображается краткая справка. Полная справочная система. Это полноценное руководство пользователя с описанием всех основных функций и компонентов продукта. Чаще всего применяется для десктопных приложений. Справочная система может включать описания, глоссарии, часто задаваемые вопросы, инструкции, видео и т. д. Справочные системы часто дополняют или дублируют обучающие материалы, в частности для сложных приложений. Справочные системы могут быть встроены в само приложение или находиться на отдельном веб-сайте. Знакомство с программой (Guided tour). Пошаговое руководство — инструмент, который используется во многих современных приложениях. Обычно оно представляет собой всплывающее окно или другой элемент, выводимый поверх основного интерфейса. Серия сменяющих в нем друг друга страниц с описанием последовательности действий помогает пользователю сориентироваться в приложении. Такой инструмент используется в разных ситуациях: например, если человек впервые заходит в приложение или выбирает опцию «показать, как». Паттерны 135 База знаний. Многие современные клиентские платформы включают базы знаний, организованные по типу сервиса Quora. Они представляют собой набор вопросов и ответов пользователей системы. Создавать и использовать такие базы знаний могут только члены службы поддержки. Однако в последнее время доступ к базе знаний все чаще могут получить и рядовые пользователи. Обычно они задают вопрос или открывают обсуждение по какой-то проблеме и могут просмотреть список вопросов и ответов по этой теме, которые уже задавали другие пользователи. В современных приложениях справочные системы часто представляют собой именно базы знаний, которые служат пользователям своеобразной «самопомощью». Интернет-сообщество. Популярные или специализированные инструменты также могут поддерживаться онлайн-сообществом своих пользователей. Это достаточно продвинутый метод, цель которого — создать сообщество постоянных пользователей, которые помогают друг другу, делятся лайфхаками и создают экосистему, способствующую росту популярности платформы. Иногда эти сообщества возникают спонтанно, как группы в социальных сетях или на форумах, таких как LinkedIn, Facebook или Reddit. Многие компании создают, размещают и модерируют собственные онлайн-сообщества пользователей, чтобы поддерживать эффективную коммуникацию. Они также создают и модерируют официальные группы и страницы в социальных сетях. При разработке систем помощи пользователям комбинируйте различные способы их организации исходя из потребностей своей аудитории. Когда использовать Системы помощи должны быть в каждом хорошо спроектированном приложении. Необходимо предусмотреть наличие встроенных копий, подсказок в полях форм и всплывающих окон со справкой. Как помочь новичкам стать экспертами? Некоторые прибегают к помощи полноценной справочной системы, но большинство пользователей не будут тратить время на ее изучение. Такая система обязательна для сложных приложений. Зачем Почти всем пользователям бывает необходима помощь. Тому, кто впервые сталкивается с задачей (или давно не занимался чем-то подобным), нужна поддержка иного рода, чем тому, кто решает такие задачи часто. Уровень знакомства с темой и предпочитаемые способы ее изучения различаются даже у новичков. Кто-то предпочитает посмотреть обучающее видео, а кто-то нет. Большинству помогают всплывающие подсказки, но некоторых они раздражают. Тексты справки, доступные одновременно на нескольких уровнях, прекрасно справляются со своими задачами, даже если имеют несколько нетрадиционный вид. В удачных справочных системах тексты справки находятся под рукой, но не 136 Глава 2. Организация контента: информационная архитектура и структура приложений прямо на виду, чтобы не мешать пользователям. Однако пользователи должны знать, где искать помощь. Если они не замечают или не открывают свертываемую панель (см. одноименный паттерн Collapsible Panels (Свертываемые панели)), то никогда не узнают, что же там находится. Как Простой способ помочь пользователю разобраться в интерфейсе — это текст на экране, например описательные заголовки и инструкции. Справка, всплывающая при наведении указателя мыши на инструмент управления, — тоже хороший вариант. Однако такой способ работает только в десктопных приложениях, когда браузер может отслеживать положение курсора, отображая соответствующие подсказки. На мобильных устройствах это тоже можно реализовать, но, чтобы увидеть такую подсказку, на нее потребуется нажать, поскольку в мобильном интерфейсе нет курсоров. Это также означает, что любые элементы веб-приложений, подразумевающие наведение курсора, в мобильных версиях должны быть доступны для касания, нажатия на значок или через меню. В ситуациях, когда пользователь хочет самостоятельно и подробно изучить ваш продукт, используйте вариант справочного руководства. Оно может являться частью приложения или отдельной системой. Это более сложный инструмент, поскольку при его разработке придется создать больше контента. Преимущество руководств в том, что они создаются надолго и их не нужно часто обновлять, а пользователи могут обращаться к ним неоднократно. Представьте, что справочные системы имеют несколько уровней детализации. Некоторые из них близки к пользователю и его задаче и помогают сосредоточиться на ее выполнении. Другие представляют собой отдельные независимые системы, и их цель — обучение. Создайте справочные системы на нескольких уровнях, включая некоторые (не обязательно все) их типы из списка ниже. Каждый уровень потребует от пользователя больше усилий, чем предыдущий, но может предоставить более подробную и точную информацию. Содержательные заголовки, инструкции, примеры и справочный текст на самой странице, включая такие паттерны, как Input Hints (Подсказки при вводе) и Input Prompt (Приглашение к вводу) (оба рассматриваются в главе 10). При их использовании старайтесь не перегружать страницу текстом. Текстовые подсказки в полях форм. Всплывающие подсказки. Используйте их для кратких, одно- или двухстрочных описаний функций интерфейса, в которых пользователь может сразу не разобраться. Для функций, обозначенных иконками, всплывающие подсказки обязательны. Даже самые странные и необычные значки мож- Паттерны 137 но использовать, если подсказка поможет разобраться в их назначении! (Правда, я не рекомендую включать такие значки в дизайн.) Недостатки подсказок заключаются в том, что они заслоняют собой контент и некоторых пользователей раздражает, что они выскакивают постоянно. Небольшая задержка при наведении мыши, например 1–2 секунды, может решить эту проблему. Hover Tools (Инструменты, доступные при наведении) (или ховеры, глава 8). Они могут применяться для вывода более длинных описаний, отображаемых при выборе или просмотре элементов интерфейса. Предусмотрите для них место на странице, его потребуется больше, чем для небольшой всплывающей подсказки. Большие справочные тексты, располагающиеся внутри свертываемых панелей (см. главу 4). Ознакомительные материалы, такие как вводный экран знакомства, пошаговые руководства и видео. Когда пользователь запускает приложение или сервис в первый раз, он использует эти материалы, чтобы быстро разобраться в его работе (см. раздел «Instant Gratification (Мгновенное вознаграждение)» в главе 1). Пользователям также могут быть полезны ссылки на справочные ресурсы. Предусмотрите переключатель, чтобы пропускать вводную часть, когда необходимость в ней отпадет, и предложите способ вернуться к ней позже, на случай если пользователь захочет освежить информацию. Справка, отображаемая в отдельном окне, обычно в браузерах с поддержкой HTML, но иногда в WinHelp или Mac Help (десктопных справочных приложениях). Такая справка часто представляет собой онлайн-руководство — целую книгу, доступную из меню справки или с помощью кнопки «Справка» в диалоговых окнах и на HTML-страницах. Техническая поддержка — как правило, в чате, по электронной почте, на сайте, в Twitter или по телефону. Поддержка онлайн-сообщества. Этот вариант подходит только для самых популярных сервисов — таких как Photoshop, Linux, MacOS X или MATLAB, — но он пользуется большим авторитетом у аудитории. Создайте отдельный ресурс для сообщества или используйте ресурсы социальных сетей или традиционные форумы. Примеры Экранная справка: ярлыки и подсказки. Первый возможный уровень справки — это справка, которая появляется прямо во время пользования системой: ярлыки, всплывающие оповещения и подсказки. В десктопном приложении Adobe Photoshop (рис. 2.55) при наведении курсора мыши на значок инструмента (на котором нет ярлыка) меняется цвет фона значка и выводится подсказка, объясняющая, что делает этот инструмент. Это пример реализации обучения через использование. 138 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.55. Adobe Photoshop: анимированные заголовки в виде инструментов наведения и подсказок Элементы управления Microsoft Excel (рис. 2.56) используют постоянные ярлыки. Выбранный инструмент имеет определенный внешний вид и соответствующую метку. Но если пользователь наведет курсор на кнопку альтернативного режима просмотра, метка на время изменится и покажет, как называется выделенный (не выбранный) инструмент. В Excel также широко используются обычные подсказки при наведении курсора, как показано на рис. 2.57, особенно для значков, которые не имеют ярлыков по умолчанию. Рис. 2.56. Microsoft Excel: анимированные заголовки как инструменты наведения курсора Рис. 2.57. Microsoft Excel: подсказки Справочные системы. Размещение обучающих и справочных материалов внутри самой программы или приложения — практика, которая давно и успешно применяется в разработке интерфейсов. По сути, такая система — это циф- Паттерны 139 ровая версия руководства пользователя, доступная в любое время при необходимости. Она очень полезна, поскольку с ее помощью пользователи могут получить ответы на свои вопросы самостоятельно, не обращаясь в службу поддержки. Им также не нужно прерывать работу над задачей. Кроме того, новички с помощью такого руководства самостоятельно обучаются использованию продукта. Наличие в продукте (или на отдельном сайте, на который может ссылаться продукт) справочной системы помогает снизить количество обращений в службу поддержки и создает дополнительные преимущества для пользователей. В Adobe Photoshop (рис. 2.58) содержатся встроенные пояснения, как найти справочные и учебные материалы. Из Photoshop пользователь может перейти по ссылке на справочный сайт Adobe Photoshop (рис. 2.59). Microsoft Excel (рис. 2.60) предлагает полную справочную систему в отдельном окне приложения, которое можно открыть во время работы. Рис. 2.58. Справочный раздел в Adobe Photoshop 140 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.59. Справка Adobe Photoshop (веб-сайт) Рис. 2.60. Справка Microsoft Excel (в самом приложении) Знакомство с интерфейсом: пошаговая инструкция. Как посетителю или новому сотруднику проще всего изучить, как устроено место, куда он пришел, или его новая работа? А как пользователю быстрее всего освежить в памяти подзабытый функционал? Разумеется, попросить более опытного коллегу Паттерны 141 побыть гидом. Многие платформы используют этот подход для обучения новичков. Можно создавать и развертывать пошаговые руководства, своего рода экскурсии по структуре приложения или способам выполнения конкретных задач. Такие пошаговые руководства часто проектируются в виде окон, располагающихся поверх стандартного интерфейса, или серий всплывающих окон, рассказывающих об основных компонентах страницы. Таким образом, новый интерфейс разрабатывается один раз, а затем используется множеством людей. Userlane (рис. 2.61) — это компания, предлагающая платформу пользовательских руководств, которую другие сервисы могут развернуть в своих продуктах. На примере «Википедии» можно видеть, что обучающая панель представляет собой всплывающее окно поверх основного интерфейса. Пользователь изучает компоненты интерфейса или этапы работы по одному за раз, что помогает лучше усвоить информацию. Изучать функционал можно в удобном для себя темпе, а в конце обучения доступен итоговый обзор ключевых функций. Рис. 2.61. Режим всплывающего окна: обучающая панель с выделенным шагом (Userlane) Аналогично, сервис Pendo (рис. 2.62) предлагает всплывающие руководства пользователя как часть своей платформы взаимодействия с клиентами. Клиенты Pendo, как правило, компании — разработчики программного обеспечения, 142 Глава 2. Организация контента: информационная архитектура и структура приложений создают руководства пользователя по работе с приложением. В примере пользователь находится в процессе выполнения задачи. Пояснение, каким должен быть следующий шаг — переход к настройкам, всплывает в верхней части экрана. Рис. 2.62. Режим наложения: пошагово всплывающие окна, указывающие на элементы пользовательского интерфейса (Pendo) Онлайн-сообщества. Если все варианты уже перепробованы, пользователь может обратиться за советом к сообществу. Этот инструмент уже не относится к разработке ПО как такового, но это все еще дизайн продукта — поскольку UX подразумевает не только то, что установлено на компьютере пользователя. Взаимодействие с пользователем включает в себя взаимодействие с организацией, ее сотрудниками или представителями и ее веб-сайта. Приложение для разработки пользовательских интерфейсов Sketch используется широко, и неудивительно, что компания хочет объединить сообщество вокруг популярного продукта. Сообщество пользователей Sketch (рис. 2.63) демонстрирует, как этот ресурс может служить источником новостей и информации. Точно так же форумы Adobe (рис. 2.64) позволяют дизайнерам и пользователям обсуждать возникающие вопросы. Adobe создает форум. Пользователи создают на нем контент в форме дискуссий, вопросов, ответов и советов. Так информация быстрее распространяется среди членов сообщества. Паттерны 143 Рис. 2.63. Сообщество пользователей как обучающий ресурс, размещено третьей стороной (сообществом Sketch в Spectrum) Рис. 2.64. Форумы пользователей Adobe 144 Глава 2. Организация контента: информационная архитектура и структура приложений Подобные объединения возникают только для продуктов, которые пользователи используют постоянно, на работе или дома. Но развитие онлайн-сообщества — это зачастую стандартная схема для многих продуктов и их огромное преимущество. Поэтому стоит подумать о том, как объединить своих пользователей в комьюнити. Tags (Теги) Что это Теги — это метод классификации и категоризации информации путем добавления к ней меток. Другими словами, это метод создания или прикрепления описательных метаданных к статье, посту в соцсетях или любому другому сообщению. Они представляют собой дополнительный, тематический, способ организации фасетной классификации и системы навигации для вашего продукта. Пользователи применяют теги для поиска и просмотра контента по фасетам или по категориям. Еще один плюс тегов в том, что их может размещать сам пользователь. Они могут быть частью пользовательского контента. С помощью тегов пользователи также могут управлять своими данными: группировать контент, искать, просматривать, делиться им с друзьями или вспоминать. К одному сообщению или одной статье можно добавить несколько тегов. По определенному тегу можно просматривать или находить контент или активность других пользователей, помеченные тем же тегом. Это свойство часто используется в досках обсуждений, блогах, приложениях для общения и на сайтах. В социальных сетях распространилась традиция добавлять хеш-символ «#» в начале слова, чтобы отметить его как хештег. Хештеги позволяют переходить из поста или статьи к результатам поиска, включающим посты других людей, отмеченные тем же хештегом. Это отличный способ быстро распространить информацию. Когда использовать Используйте теги, когда считаете, что пользователю будет полезно классифицировать, просмотреть, продвинуть интересующий его контент и поделиться им. Теги — это система классификации, создаваемая пользователем. Когда ее создают и распространяют читатели или потребители, она становится способом найти интересующий контент и перейти к нему. Приложения или платформы, содержащие большой объем информации, такие как новостные издания или социальные сети, будут добавлять теги к своему контенту или разрешать пользователям помечать свои сообщения. Таким образом, система навигации и поиска по темам расширяется вместе с контентом, дополняя схему навигации и организации информационной архитектуры, которые вы разработали в своем продукте. Паттерны 145 Зачем Теги в основном добавляют с двумя целями. Прежде всего, они помогают продвинуть ваш продукт среди пользователей, поскольку люди быстро могут находить контент, медиафайлы и другие материалы, которые им интересны, по тегу или ключевому слову. Более того, если пользователи часто размещают теги, они становятся более привязаны к вашему продукту или платформе, так как они создают свой собственный контент (обычно для обмена в социальных сетях), с помощью вашего. Все это повышает частоту использования вашего продукта и лояльность пользователей. Вторая причина добавлять теги к контенту или позволять пользователям делать это — возможность создать активное и широкое пользовательское сообщество вокруг своего продукта, что в противном случае было бы слишком дорого и трудоемко. Сообщества могут быстро формироваться вокруг актуальных или регулярно обновляемых тем. Со временем может возникнуть ориентированная на пользователя упорядоченная структура. Это может быть полезно, если вы хотите стимулировать или поощрить пользователей к поиску, чтению, обмену, комментированию и другой работе с информацией, которая им интересна. Как Создайте или адаптируйте программные средства, позволяющие добавлять слова в контент или в сообщения в качестве тегов. Кроме того, помеченный контент должен обрабатываться инструментом поиска, и индексы или результаты поиска по ключевым словам должны включать весь контент, помеченный таким ключевым словом. Теги или хештеги также должны автоматически преобразовываться в ссылки. Выбор тега инициирует поиск по нему и открывает страницу результатов с наиболее релевантным или последним контентом, помеченным этим тегом. Примеры Stack Overflow (рис. 2.65 и 2.66) — это очень популярная доска обсуждений в виде вопросов и ответов и онлайн-платформа для разработчиков программного обеспечения. Этот сайт почти полностью состоит из пользовательского контента в виде веток обсуждений, помеченных тегами. Другими словами, это эффективная и надежная система коллективного поиска информации по тегам/темам. Читатели могут просматривать списки последних и популярных вопросов. Они также используют теги, прикрепленные к каждому сообщению. Участники добавляют к постам множество тегов. Это позволяет читателям находить обсуждения, помеченные одинаково, а также похожие темы. Благодаря возможности отслеживать и выводить связанные теги создается обширная информационная и навигационная экосистема, в которой вероятность найти необходимый контент очень высока. 146 Глава 2. Организация контента: информационная архитектура и структура приложений Рис. 2.65. Сайт Stack Overflow, показывающий соответствующие теги (каждый расположен в отдельном прямоугольнике со скругленными углами под темой) для каждого вопроса Texas Monthly (рис. 2.67) использует популярную систему управления контентом Wordpress и платформу веб-публикаций для создания онлайн-журналов. Отличительной особенностью Wordpress является возможность добавлять теги к статьям и постам во время публикации. Эти теги отображаются вместе с основной статьей и ведут к другим сообщениям в системе Wordpress, генерирующей дополнительные страницы для читателя на основе тега, который он выбрал. В примере Texas Monthly теги выводятся в нижней части статьи. Авторы выбрали ряд ключевых слов для этой и других статей. В этом примере, когда пользователь нажимает на тег, к примеру «Путешествия», ему становится доступен список других статей о путешествиях, опубликованных Texas Monthly. Это помогает увеличить среднее время, которое пользователь проводит на сайте, посещаемость сайта и вовлеченность читателей. Паттерны 147 Рис. 2.66. Лента Stack Overflow, отфильтрованная по тегу Рис. 2.67. Теги к статьям в Texas Monthly (при поддержке Wordpress) 148 Глава 2. Организация контента: информационная архитектура и структура приложений Evernote — это персональное десктопное, веб- и мобильное приложение для ведения заметок и веб-архивирования. Его пользователи сохраняют статьи, файлы, презентации и веб-страницы в одном месте: на платформе Evernote. Это позволяет пользователям добавлять свои собственные теги при «привязывании» страницы к Evernote (рис. 2.68). По этим тегам можно классифицировать Рис. 2.68. Evernote Screen Clipper предоставляет возможность добавлять теги и находить похожие сохраненные статьи и заметки. Есть также каталог тегов, где можно посмотреть, какие теги существуют в Evernote и сколько статей помечено каждым из них (рис. 2.69). При выборе определенного тега выводятся результаты поиска заметок с этим тегом. В дополнение к возможности свободного поиска по тексту пользовательская система тегов Evernote — очень удобный способ классификации и управления большими объемами разнопланового контента. Внутри самого приложения Evernote доступен поиск по тегу (рис. 2.70). Паттерны 149 Рис. 2.69. Каталог тегов в Evernote Рис. 2.70. Приложение Evernote с возможностью поиска по тегам 150 Глава 2. Организация контента: информационная архитектура и структура приложений Заключение Разработка информационной архитектуры, или ИА, — сложная задача для дизайнера интерфейсов, поскольку ИА одновременно и абстрактна (схемы организации и присваивания меток), и конкретна (элементы навигации и теги). Важно помнить, что ИА должна основываться на языке, который использует аудитория, и мысленной модели сферы бизнеса или задачи, для которой разрабатывается ИА. Проектировать ИА необходимо таким образом, чтобы в нее можно было со временем добавлять новые данные и вся система оставалась организованной. Создавайте архитектуру, которая всегда остается актуальна. Процессы, описанные в этой главе, помогут вам в этом: взаимоисключающая, коллективно исчерпывающая категоризация, использование общепринятых методов организации, дробление контента на части, разработка системы типов страниц на основе использования и паттерны. Важно рассматривать ИА как невидимую схему продукта, а различные паттерны проектирования взаимодействия и виджеты — как способы исследования этого информационного пространства. Чтобы хорошо изучить информационную архитектуру и перемещаться по ней, потребуется использовать полный набор инструментов: поиск, просмотр, навигацию, теги, перекрестные ссылки, различные типы мультимедиа и многое другое. В главе 11 мы рассмотрим, как современные фреймворки проектирования интерфейсов и принципы атомарного дизайна помогают быстро создавать масштабируемые виджеты информационной архитектуры. ГЛАВА 3 Подскажите дорогу: навигация, указатели и ориентирование Паттерны, рассматриваемые в этой главе, посвящены проблеме навигации. Как пользователь узнает, где он находится, куда идти дальше и как попасть из одного места в другое? Чтобы ответить на эти вопросы, мы рассмотрим следующие важные аспекты навигации: цель навигации в UX; методы поиска пути в программном продукте; различные типы навигации; как проектировать навигацию; полезные паттерны навигации. Навигация может быть сложной, потому что перемещение по веб-сайту или приложению — это как дорога на работу: приходится ехать, чтобы добраться до нужного места, но скучно, а иногда раздражает и отнимает много времени и сил. Ведь можно же было потратить их на что-то более интересное, например поиграть в компьютерную игру или заняться важным делом. Лучший вариант таких поездок — их отсутствие. Удобно, когда все под рукой и не нужно никуда ехать. Аналогично, пользователям, особенно подготовленным и опытным (которые уже запомнили, где что находится), комфортнее работать, когда большинство инструментов в интерфейсе находятся в пределах досягаемости. Иногда нужно помещать редко используемые инструменты на отдельные вкладки, чтобы они не загромождали интерфейс, а иногда имеет смысл группировать элементы на других страницах. Все способы хороши, если только «расстояния», на которые приходится перемещаться пользователю, остаются минимальными. Чем меньше, тем лучше. 152 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Понимание информации и пространства задач Цель навигации в том, чтобы помочь пользователю узнать и понять информационное пространство, в котором он находится, в том числе понять, какие задачи можно выполнить. В конце концов, пользователи просто должны знать, как ориентироваться в приложении. Навигация помогает пользователю узнать: информацию и инструменты, доступные с точки зрения предмета и области его применения; как структурированы контент и функционал; где он сейчас; куда он может пойти; откуда он пришел и как вернуться или как начать сначала. Предположим, вы создали большой веб-сайт или приложение, которое понадобилось разбить на разделы, подразделы, специализированные инструменты, страницы, окна, мастеры и т. д. Как помочь пользователю найти нужный путь? Указатели Указатели — это средства, помогающие пользователям разобраться в ближайших окрестностях. Самые распространенные указатели — это заголовки страниц и окон, логотипы и прочие средства обозначения бренда продукта, а также вкладки и индикаторы выбора. Такие паттерны и техники, как продуманные ссылки глобальной и локальной навигации, Progress Indicator (Индикатор выполнения), Breadcrumbs (Хлебные крошки) и Annotated Scrollbar (Аннотированная полоса прокрутки), описанные в этом разделе, подскажут пользователю, где он находится и, во многих случаях, куда он может попасть, сделав еще один шаг. Они помогают не потеряться и спланировать свои действия. Ориентирование Ориентирование — это поиск маршрута к поставленной цели. Термин объясняет сам себя. Но сам процесс того, как люди ориентируются, является объектом исследований специалистов в сфере когнитивной науки, дизайна окружающей среды и веб-дизайна. Найти правильный путь пользователю помогут следующие практические инструменты. Понятные указатели. Ясные недвусмысленные метки подсказывают, где находится то, что вы ищете, и объясняют, как туда добраться. Указатели находятся именно там, где их ожидаешь увидеть, и пользователь никогда не остается без поддержки в момент принятия решений. Проверьте, как Навигация 153 это реализовано в интерфейсе, который вы разрабатываете: пройдите по всем основным возможным маршрутам использования. В каждой точке, где пользователь будет решать, куда пойти дальше, обязательно предусмотрите соответствующий указатель или метку. На странице, которую пользователь видит первой, добавьте привлекающий внимание «призыв к действию», который невозможно не заметить. Внешние ориентиры. В ресторане вы будете искать туалет в дальней части зала, а в месте пересечения дорожки с изгородью вы ожидаете увидеть калитку. Аналогично, считается, что кнопка, закрывающая диалоговое окно, должна находиться в его правом верхнем углу, а логотип — в верхнем левом углу веб-страницы. Помните, что такие ориентиры обычно определяются культурными традициями, и новичок (например, кто-то, кому никогда раньше не доводилось использовать данную операционную систему) может не знать о них. Карты. Иногда люди переходят от указателя к указателю и от ссылки к ссылке, не понимая в действительности, куда они направляются в более масштабной системе координат. (Вам когда-нибудь приходилось искать дорогу в незнакомом аэропорту? Это примерно то же самое.) Однако есть люди, которые предпочитают представить полную картину местности, особенно если они часто там бывают. Там, где нет указателей, или на плотно застроенной территории, например в городских кварталах, карты могут стать единственным средством навигации. В этой главе вы найдете паттерн Clear Entry Points (Понятные точки входа) — пример тщательно продуманной системы указателей в сочетании с внешними ориентирами: ссылки должны быть оформлены так, чтобы выделяться на странице. Progress Indicator (Индикатор выполнения), очевидно, представляет собой карту. Паттерн Modal Panel (Модальная панель) выступает в роли внешнего ориентира, так как, выходя из модальной панели, вы попадаете туда же, где только что находились. Здесь я сравниваю виртуальные пространства с физическими, однако у виртуальных пространств есть один навигационный козырь, которого нет (пока) в физических пространствах: Escape Hatch (Аварийный выход). Где бы вы ни находились, просто щелкните на такой ссылке, и вы окажетесь на знакомой странице. Просто, как кабина для телепортации. Или волшебные башмачки Элли, с помощью которых она вернулась домой из Изумрудного города. Навигация Давайте кратко рассмотрим типы навигации, которые обычно используют проектировщики и с которыми пользователи, вероятно, знакомы. Типы, описанные здесь, в целом определяются их назначением. Этот список далеко не полный. 154 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Названия тоже могут быть другими, но мы используем самые распространенные термины: глобальный, утилитарный, ассоциативный и встроенный, связанный контент, теги и социальные сети. Глобальная навигация Это элементы навигации по сайту или приложению, которые находятся на главном экране. Обычно это меню, вкладки и/или боковые панели, и именно с помощью этих элементов пользователи перемещаются по навигационной структуре сайта. (В более ранней версии этой книги глобальная навигация определялась как паттерн. Но сейчас она настолько привычна и понятна пользователям, что в выделении отдельного паттерна больше нет смысла.) Элементы глобальной навигации почти всегда находятся в верхней или левой части веб-страницы, а иногда и в обеих (так называемый навигационный макет в виде перевернутой L). Иногда вы можете найти их справа, но такое размещение может вызвать неудобства с горизонтальной прокруткой и не подходить к размеру страницы. В мобильной среде мы видим два основных подхода к глобальной навигации. Первый — это панель навигации, расположенная в нижней части экрана. Она остается в этом же месте, когда пользователь переходит от одного экрана к другому. Ее также можно прокручивать влево-вправо, если она содержит дополнительные навигационные элементы. Второй подход — меню «гамбургер» — столбец из трех горизонтальных линий. Иногда это маленький значок из трех точек. Касание этой кнопки вызывает панель глобальной навигации. Служебная навигация Элементы служебной навигации также располагаются на главном экране и включают ссылки и инструменты, не связанные с основным содержимым сайта или приложения: вход в систему, справка, печать, редактор настроек (см. паттерн Settings Editor (Редактор настроек) в главе 2), выбор языка и т. д. Когда посетители регистрируются на сайте, они видят набор навигационных ссылок в правом верхнем углу. Часто там присутствует значок с изображением человека или маленькая фотография участника, если она есть. Это символ участника — его аватар, намекающий, что здесь содержится ваша личная информация. Пользователи, как правило, ищут там инструменты, связанные с их активностью на сайте: настройки учетной записи, профиль пользователя, выход из системы, помощь и т. д. Дополнительные сведения см. в паттерне Sign-in Tools (Инструменты регистрации). Иногда отображаются все элементы служебной навигации. Часто они свернуты за значком аватара, и пользователь должен щелкнуть на значке, чтобы открыть их. Принципы проектирования 155 Ассоциативная и встроенная навигация Ассоциативная и встроенная навигация — это ссылки внутри контента или рядом с ним. Когда пользователь взаимодействует с сайтом, по этим ссылкам ему доступны возможности, которые могут быть ему полезны или интересны. Такие ссылки тематически организуют контент. Сопутствующий контент Популярная форма ассоциативной навигации — раздел или панель сопутствующих статей. Новостные сайты и блоги часто его используют. Когда пользователь читает статью, на боковой панели или в футере выводится список статей на похожую тему или того же автора. Теги Теги, задаваемые пользователем и системой, поддерживают ассоциативную навигацию и связанные статьи или ссылки. Благодаря облаку тегов можно искать темы на сайтах с большим количеством статей и там, где эти темы четко структурированы. (На небольших сайтах и блогах этот способ не так эффективен.) Более популярный метод навигации — перечислять теги в конце статьи; каждый тег — это ссылка, ведущая к набору статей, помеченных этим тегом. Социальные сети Когда сайт интегрирован с социальными сетями, в игру вступает еще больше возможностей навигации. Она может принимать различные формы. Например, модуль новостей или сообщений с отображением активности ваших друзей и контента, которым они делятся. Или своего рода раздел «Популярное» со ссылками на истории и посты, которыми чаще всего делятся пользователи сети. Подробнее о том, как использовать социальные сети в своих проектах, читайте в книге Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User Experience Кристиана Крамлиша и Эрин Мэлоун (O’Reilly, 2015). Принципы проектирования Навигация должна быть продумана. Какие параметры навигации отображаются, как они помечены, а также где и когда отображается навигация в пользовательском интерфейсе — все это вопросы дизайна. В этом разделе кратко обсуждаются принципы создания эффективной навигации. 156 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Разделяйте навигационный и визуальный дизайн Навигационную модель следует отделять от ее визуального дизайна. Определите количество и последовательность необходимых параметров навигации и параметры по умолчанию. Нужно ли пользователю расширять навигационные категории для просмотра структуры ссылками на второй или третий уровни? Такие рассуждения помогут более гибко и глубоко обдумать создание самих страниц. После того как вы определитесь, переходите к визуальной части. Существуют общепринятые способы визуализации размещения навигационных элементов. Несмотря на то что всегда хочется создать что-то новое, использование привычных шаблонов дает свои преимущества. Умственная нагрузка Когда вы заходите в незнакомое помещение, то первым делом осматриваетесь. За долю секунды вы успеваете оценить форму комнаты, меблировку, освещение, выходы и прочие ориентиры; очень быстро вы делаете заключение, что это за комната и насколько она соответствует цели, почему вы зашли в нее. Затем вам нужно сделать то, зачем вы пришли. Где? Как? Может быть, вы сумеете ответить на эти вопросы мгновенно, а может и нет. Вас также могут отвлечь интересные предметы в комнате. Когда вы заходите на сайт или открываете новую страницу приложения, вы совершаете похожие умственные усилия. Каждый раз возникает необходимость разбираться в новом пространстве: вы замечаете его форму, расположение элементов, содержимое, варианты выхода и способы выполнения вашей задачи. На это тратятся силы и время. Изменение контекста заставляет менять фокус внимания и приспосабливаться к новому окружению. Даже если вам уже знакома страница (или комната), куда вы только что попали, все равно без затрат не обойтись. Определенное время уходит на восприятие, обдумывание, ориентирование в информационном пространстве. Это небольшие затраты, но к ним нужно отнести и время, затрачиваемое на отображение окна или загрузку страницы. Все это относится к работе с веб-страницами, окнами приложений, диалоговыми окнами или экранами устройств. Решения, которые пользователи принимают, размышляя, куда идти дальше, практически одинаковы — всегда приходится читать ярлыки, расшифровывать значки или полагаться на волю случая, щелкая на ссылках или кнопках, назначение которых непонятно. Помимо этого, решения людей часто зависят от времени загрузки. Если после щелчка на элементе содержимое загружается слишком долго — или вообще не загружается, — пользователь испытывает разочарование. В результате он может попросту закрыть страницу, не найдя того, за чем пришел (итак, сколько пользователей вы ежедневно теряете из-за видеопроигрывателя на боковой Принципы проектирования 157 панели?). Также помните, что никому не захочется сидеть на сайте, который грузится слишком медленно. Именно по этой причине компании, подобные Google, всячески стараются сокращать время загрузки: любые задержки могут стоить им пользователей. Сокращение расстояний Теперь вы знаете, что переход со страницы на страницу имеет определенную «стоимость», и понимаете, почему так важно минимизировать число таких прыжков. Общее правило: количество нажатий и щелчков, необходимых, чтобы добраться из точки А в точку Б, должно быть минимальным. Постарайтесь сократить количество прыжков до одного-двух. Существует несколько способов добиться этого. Широкая глобальная навигация Спроектируйте навигацию и приложение так, чтобы на первом, самом верхнем уровне было больше вариантов выбора. Сделайте структуру сайта как можно более плоской, то есть минимизируйте уровни иерархии сайта. Обеспечьте доступ к большему количеству экранов непосредственно в глобальной навигации. Другими словами, не ограничивайте количество элементов навигации верхнего уровня до минимума, если при этом пользователям придется перемещаться по множеству категорий и подкатегорий. Поместите часто используемые элементы в глобальную навигацию Частота исполь- зования также влияет на дизайн навигации. Расположите отдельные элементы так, чтобы они находились на верхнем уровне навигационной структуры, таким образом, пользователь будет иметь к ним прямой доступ, вне зависимости от того, где они находятся в структуре сайта или приложения. Редко используемые инструменты или контент расположите глубже в структуре сайта. Они потребуют детализации в соответствующем подменю. Это хорошо подходит для одного инструмента или экрана. Скройте редко используемые настройки или дополнительные шаги за дополнительной «дверью»: аккордеоном или панелью со вкладками. Как всегда, экспериментируйте с различными вариантами и возможностями использования, тестируйте их, если сомневаетесь. Объединение шагов Реального прироста эффективности можно добиться благо- даря такой структуре приложения, когда обычные задачи можно выполнять на одном экране. Ничто так не раздражает пользователя, как то, что для решения простой задачи ему приходится постоянно переходить на несколько уровней подстраниц, диалогов и т. д., выполняя один шаг за раз. Еще хуже, если между шагами есть зависимость. Необходимость возвращаться назад из-за того, что какое-то условие не было выполнено, — это напрасная трата времени и сил. 158 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Можно ли разработать дизайн приложения так, чтобы 80 % самых распространенных задач можно было выполнить на одном экране? В определенных типах приложений это сделать довольно сложно. Инструмент или форма могут быть очень сложны. Сгруппируйте и сегментируйте элементы на экране, сократите ярлыки, преобразуйте текст в картинки, используйте специальные элементы управления, позволяющие экономить пространство, и уберите тексты инструкций в подсказки и всплывающие окна. Затем примените пошаговое представление, чтобы отображался только первый шаг или наиболее часто используемые элементы управления. Используйте Module Tabs (Автономные вкладки) или Accordion (Аккордеон), чтобы скрыть другие шаги или содержимое по умолчанию. В дальнейшем их можно выводить автоматически, по мере работы с инструментом, или это может быть вторичная информация, для просмотра которой пользователь должен щелкнуть на ссылке или перейти на другую вкладку. Второй метод заключается в объединении нескольких шагов, инструментов или экранов в один Мастер (Wizard) с несколькими этапами (мы рассмотрим его вкратце). Навигационные модели Какова навигационная модель вашего сайта или приложения? Другими словами, как связаны между собой экраны (или страницы, или пространства) и как пользователи перемещаются между ними? Давайте взглянем на несколько моделей, которые обычно используются на сайтах или в приложениях. Спицы колеса Чаще всего эта модель (рис. 3.1) применяется на мобильных устройствах. Все основные разделы сайта или приложения указаны на домашней странице, «втулке колеса». Пользователь щелкает или нажимает на ссылки, совершает необходимую операцию и возвращается к «втулке», чтобы отправиться по другой «спице». Экраны-спицы жестко ограничены одной задачей, экранное пространство расходуется экономно. Места для перечисления других основных разделов может просто не быть. Хороший пример такой архитектуры — домашний экран iPhone; также можно вспомнить паттерн Menu Page (Страница меню), применяемый на некоторых веб-сайтах. Полносвязанность По этой модели строятся многие веб-сайты. Домашняя страница или главный экран, как и каждая другая страница, связаны со всеми остальными. На каждом экране есть элементы глобальной навигационной структуры, такие как Навигационные модели 159 Рис. 3.1. Архитектура колесных спиц верхнее меню. Глобальная навигация может быть одноуровневой (как показано на рис. 3.2 для пяти страниц) или глубокой и сложной, с множеством уровней и глубоким содержимым. Но если пользователь может с текущей страницы перейти на любую другую всего одним шагом, полная связанность сохраняется. Рис. 3.2. Модель полной связности 160 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Многоуровневая, или древовидная, структура Это также популярный вариант архитектуры сайта (рис. 3.3). Главные страницы полностью связаны между собой, но подстраницы связаны только внутри своих разделов (и зачастую соединены с главными страницами других разделов при помощи инструментов глобальной навигации). Вы наверняка встречали такие сайты, где подстраницы перечислены на сайдбарах или на вложенных вкладках и становятся видны пользователю только после того, как он щелкнет на ссылке, ведущей на главную страницу или категорию. Чтобы перейти с одной произвольной подстраницы на другую, потребуется совершить два шага или более. Добавление раскрывающихся меню, внедрение паттернов Fat Menus (Полные меню) и Sitemap Footer (Карта сайта в подвале) на многоуровневом сайте превращает его в полносвязанный, что предпочтительнее. Рис. 3.3. Многоуровневая структура Эта модель также встречается в корпоративных онлайн-инструментах. Компании, предлагающие набор веб-приложений, часто отделяют эти приложения друг от друга. Это может быть связано с тем, что полная интеграция в единую платформу нежелательна или просто еще не произошла, либо с тем, что приложения являются результатом недавних или текущих приобретений. Другая причина в том, что ком- Навигационные модели 161 поненты приложения могут продаваться отдельно. Конечный результат — набор продуктов, в котором каждое приложение является самостоятельным, отдельным от других. Однако поставщик программного обеспечения и клиент обычно хотят иметь единый вход в точку доступа ко всему контенту. Итак, они объединены вверху, за логином. Там пользователь может получить доступ к каждому из приложений и управлять настройками своей учетной записи. Пошаговая структура Слайд-шоу, технологические схемы и Мастеры (см. одноименный паттерн в главе 2) шаг за шагом проводят пользователя через последовательность экранов в строго определенном порядке (рис. 3.4). На каждой странице обязательно присутствуют заметные ссылки «Назад/Далее». Пошаговая навигация может быть такой же простой, как разработка интерфейса поисковика, который затем выводит страницу результатов поиска. Еще один хороший пример — онлайнпокупки. Для них есть готовый путь от страницы продукта к корзине, к процессу оформления заказа (может быть несколько экранов) и, наконец, к подтверждению покупки. Третий пример — анкеты или онлайн-опросы как первый шаг на пути привлечения клиентов во многих компаниях розничной торговли (особенно одежды, косметики и других товаров для индивидуального потребления). Клиент отвечает на вопросы, которые выявляют его предпочтения стиля, бюджета, размеров, брендов, частоты покупок и т. д. Рис. 3.4. Пошаговый поток Пирамида Вариант пошаговой модели «пирамида» состоит из центрального экрана, или страницы меню, на которой перечислена вся последовательность элементов, или подстраниц (рис. 3.5). Пользователь выбирает любой элемент, переходит к нему, а затем использует ссылки «Назад/Далее» для перемещения между элементами в строгом порядке. В любой момент он также может вернуться на центральный экран. Подробнее об этом рассказывается при рассмотрении паттерна Pyramid (Пирамида) далее в этой главе. Некоторые объекты удобнее представлять как одно большое пространство, а не несколько мелких. Сюда относятся карты, большие изображения, длинные текстовые документы, инфографика и представления, растянутые во времени (такие как звук и видео). Панорамирование и зум — это также способы навигации, поэтому разработайте соответствующие элементы управления: перемещение 162 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование по горизонтали и вертикали, приближение и удаление, возврат в заданное или в исходное состояние. Рис. 3.5. Пирамида Такая структура схематично показана на рис. 3.6. Интерфейсы карт — самый распространенный пример такого типа навигации. Рис. 3.6. Панорама с приближением Паттерны 163 Плоская навигация В некоторых типах приложений средства навигации почти не требуются. Вспомните приложения формата Canvas Plus Palette (Холст и палитра), такие как Photoshop, или сложные программы, подобные Excel. Множество функций и инструментов с легкостью открываются через меню, панели инструментов и палитры. Инструменты, которые не нужны прямо сейчас, можно убирать на модальные панели или делать доступными через пошаговые последовательности. Такие приложения качественно отличаются от остальных, перечисленных здесь, в том, что касается стилей навигации: пользователь всегда знает, где он находится, но ему не всегда удается быстро найти нужные инструменты, просто потому, что ему всегда доступно огромное количество различных возможностей и функций. Есть еще несколько замечаний. Во-первых, все рассмотренные модели не обязательно использовать по отдельности. Во-вторых, некоторые из перечисленных механизмов ограничивают возможности навигации. В большинстве случаев глобальная навигация и короткие перемещения считаются плюсом. Но если пользователь находится в режиме просмотра полноэкранного слайд-шоу, ему совершенно не требуется сложное глобальное навигационное меню! Он хочет сосредоточиться на слайд-шоу, поэтому ему достаточно ссылок «Назад/Далее» и «аварийного выхода». Размещение полного набора элементов глобальной навигации требует определенных компромиссов: они занимают место, загромождают экран, увеличивают когнитивную нагрузку и вызывают у пользователя чувство, что покидать страницу бессмысленно. В-третьих, все эти механизмы и паттерны можно реализовывать по-разному. На сложном веб-сайте или в приложении глобальная навигация может осуществляться с помощью вкладок, меню или дерева сбоку экрана — этот технический вопрос решается на этапе проектирования макета страницы. Модальную панель можно представить в формате «лайтбокса» или в виде традиционного модального диалогового окна — и снова это решение можно отложить до момента, когда вы будете определять, какие фрагменты интерфейса делать модальными. Визуальный дизайн проектируется на поздних этапах создания приложения, после разработки информационной архитектуры и навигационных моделей. Паттерны Напомню, что в этой главе мы говорим о некоторых аспектах навигации: общей структуре или модели, понимании, где вы находитесь в данный момент, решении, куда пойти дальше, и оптимальном пути к цели. 164 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Мы начнем с паттернов для моделей навигации, до некоторой степени независимых от макетов экрана. Clear Entry Points (Понятные точки входа). Menu Page (Страница меню). Pyramid (Пирамида). Modal Panel (Модальная панель). Deep Links (Глубокие ссылки) Escape Hatch (Аварийный выход). Fat Menus (Полные меню). Sitemap Footer (Карта сайта в подвале). Sign-in Tools (Инструменты регистрации). Следующие несколько паттернов хорошо работают как указатели «Вы находитесь здесь» (подобно грамотным элементам глобальной навигации). Progress Indicator (Индикатор выполнения). Breadcrumbs (Хлебные крошки). Annotated Scrollbar (Аннотированная полоса прокрутки). Progress Indicator (Индикатор выполнения), Breadcrumbs (Хлебные крошки) и Annotated Scrollbar (Аннотированная полоса прокрутки) также служат интерактивными картами содержимого. Annotated Scrollbar (Аннотированная полоса прокрутки) больше подходит для моделей типа «панорама с приближением», чем для нескольких взаимосвязанных страниц. Паттерн Animated Transition (Анимированный переход) помогает пользователям не теряться при перемещении из одного места в другое. Это просто визуализация, но она очень эффективна, поскольку благодаря ей пользователь остается в курсе, где он находится и что происходит. Теперь перейдем к самим паттернам. Clear Entry Points (Понятные точки входа) Что это Точек входа в интерфейс должно быть всего одна-две, чтобы пользователь знал, с чего начать. Начинающим и тем, кто использует продукт редко, это поможет лучше ознакомиться с продуктом. Ориентируйте точки входа на определенный тип аудитории или на конкретную задачу. Используйте четкие призывы к действию (рис. 3.7). Паттерны 165 Рис. 3.7. Схема понятных точек входа Когда использовать Если вы разрабатываете веб-сайт или приложение в основном для новичков или нечастого использования. Большинству пользователей будет проще разобраться, если они прочитают короткую инструкцию, выполнят несложное пробное задание или выберут один из нескольких часто используемых вариантов. Однако если назначение приложения понятно каждому и если большинство пользователей будет раздражать каждый лишний шаг (как, например, в приложениях для опытных пользователей и экспертов), то использовать данный паттерн не рекомендуется. Зачем Некоторые приложения и веб-сайты содержат беспорядочную смесь информации и структур: множество каскадных панелей, незнакомые термины и фразы, стороннюю рекламу или панели инструментов, почему-то отключенных. Никаких четких инструкций, что делать в первую очередь, у пользователя нет. «Ну, я пришел — и что дальше?» Для таких пользователей предусмотрите на экране несколько опций, позволяющих приступить к работе. Если эти опции будут понятны и предсказуемы, то пользователи с уверенностью выберут нужную и начнут работу — и получат мгновенное вознаграждение. Если же не начнут, то хотя бы поймут назначение продукта, поскольку вы обозначите важные задачи или категории с самого начала. Таким образом, вы сделаете приложение более понятным. 166 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Как Когда пользователь заходит на веб-сайт или запускает приложение, точки входа должны служить «дверью» в основной раздел этого сайта или приложения. После того как пользователь откроет ее, сопровождайте его по интерфейсу, давая понятные и однозначные пояснения, пока он не ознакомится с контекстом и не сможет продолжать работу самостоятельно. Совокупность точек входа должна учитывать практически все причины, по которым человек может выбрать продукт. Точек входа может быть одна, две или несколько; это зависит от дизайна продукта. Однако описывайте их такими словами, которые без труда поймут пользователи, впервые работающие с приложением, — не используйте специфические термины. Визуальное выделение точки входа должно соответствовать ее значимости. Домашняя или начальная страница большинства сайтов обычно дополнительно содержит список навигационных ссылок: глобальная навигация, служебная навигация и т. д. Эти ссылки должны быть мельче и менее заметными, чем понятные точки входа. Они более специализированы и не обязательно ведут к центральным элементам веб-сайта, точно так же, как через заднюю дверь вы не попадете в гостиную. Понятные точки входа — это своего рода парадные двери. Примеры На веб-сайте Apple главная страница раздела, посвященного iPad (рис. 3.8), служит всего нескольким целям. Она идентифицирует продукт, представляет его пользователям с привлекательной стороны и направляет их к ресурсам, где они смогут купить это устройство или больше узнать о нем. Глобальная навигация визуально отступает на второй план, уступая главную роль понятным, четко определенным точкам входа. Остальная часть страницы — это еще одна входная дверь: крупные рекламные изображения других моделей iPad. Spotify (рис. 3.9) привлекает внимание нового клиента с помощью главной страницы своего сайта. В центре экрана расположен простой и ясный призыв к действию. Adobe Illustrator и другие приложения демонстрируют диалоговое окно при запуске приложения (рис. 3.10). Это ориентирует нового или нечастого пользователя на возможные действия. Основные из них — создание нового или открытие существующего документа. Можно приступить к ним двумя способами. Слева для опытных и уверенных пользователей, готовых немедленно взяться за дело, есть две заметные кнопки: Create New (Создать новый) и Open (Открыть). Хотя они небольшие, их визуализация делает их привлекательными точками входа для начала работы. Справа присутствуют те же два варианта, но они больше по размеру, более заметны и содержат больше пояснений. В разделе Start a New File Fast (Быстрое создание нового файла) представлены несколько вариантов Паттерны 167 объектов, которые можно создать, для разных размеров устройства и экрана. Схематические изображения каждого из них делают их понятнее. Ниже, в разделе Recent (Последние открытые файлы), находится сетка с миниатюрами недавно открытых файлов, чтобы можно было быстрее вернуться к ним. Это хороший пример разработки разных точек входа для разных пользователей. Рис. 3.8. Страница iPad на сайте Apple Рис. 3.9. Главная страница Spotify — простой и лаконичный путь 168 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.10. Начальное диалоговое окно Adobe Illustrator Prezi (рис. 3.11), как и Spotify, использует точку входа на веб-сайте, чтобы облегчить потенциальным клиентам переход к покупке. В случае с Prezi его инновационное ПО для презентаций нуждается в демонстрации. Дифференциация его продукта чрезвычайно важна, и, вероятно, это то, что больше всего интересует потенциальных покупателей Prezi. Точка входа говорит им: «Заходи и проверь». Tesla (рис. 3.12) предлагает три точки входа, представленные тремя моделями Tesla на изображении. Основное внимание уделяется модели 3 (пользовательский интерфейс увеличивает ее масштаб — умный ход). При выборе модели 3 появятся две точки входа: собрать свою Tesla или посмотреть доступные автомобили. Паттерны 169 Рис. 3.11. Главная страница Prezi Рис. 3.12. Главная страница Tesla 170 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Menu Page (Страница меню) Что это Заполните страницу списком ссылок на страницы с большим количеством контента. Для каждой ссылки выведите достаточно сведений, чтобы пользователь мог сделать уверенный выбор. Другого значимого содержимого на странице быть не должно. Домашняя страница Craigslist (рис. 3.13) — отличный пример. Рис. 3.13. Craigslist Когда использовать Если вы разрабатываете домашнюю страницу, экран приветствия или любой другой экран, назначение которого — служить «оглавлением», показать пользователю возможные направления. Связанного контента (такого как статья, видео Паттерны 171 или реклама) может и не быть. Или просто позвольте пользователю выбрать свой путь, не отвлекая его. Паттерн Menu Page (Страница меню) особенно часто используется в мобильных приложениях и версиях сайтов, чтобы эффективно использовать пространство небольших экранов и иметь возможность выводить разнообразные элементы навигации. Если цель — удержать пользователей на странице полной версии сайта, возможно, стоит выделить ее часть для привлекающих внимание и интересных посетителю элементов. Тогда Menu Page (Страница меню) не самый удачный выбор. Кроме того, дизайн сайта должен выражать его назначение и ценность — лучше посвятить первую страницу именно этому. Чтобы решиться на создание страницы меню, требуется определенная смелость, так как вы должны быть совершенно уверены в том, что: посетителям известно, о чем этот сайт или приложение; они знают, зачем пришли и как это найти; они ищут определенный предмет, и им нужно добраться до него как можно быстрее; их не интересуют новости, обновления и статьи; их не напугает нагруженный интерфейс главной страницы. Зачем Благодаря отсутствию отвлекающих элементов пользователи могут сосредоточиться на доступных элементах навигации. В вашем распоряжении целый экран (или как минимум большая его часть), чтобы организовать, пояснить и проиллюстрировать ссылки и направить пользователей к страницам, которые им нужны (см. рис. 3.13). Как При создании мобильного дизайна паттерн Menu Page (Страница меню) становится одним из важнейших инструментов, особенно если речь идет о веб-сайтах и приложениях с многоуровневой функциональностью. Метки списков должны быть короткими, целевые элементы — достаточно крупными, чтобы не промахиваться при их касании, а иерархия — не слишком глубокой. Не переусердствуйте: страницу меню очень легко перегрузить. Используйте этот паттерн для редко посещаемых страниц, таких как справка или алфавитный указатель. Всегда ищите способы расположить, сгруппировать и маркировать контент так, чтобы его было легче понять. Информация ниже касается полноэкранных версий сайтов и приложений. 172 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Во-первых, маркируйте ссылки и включайте ровно столько контекстной информации, чтобы пользователь мог выбрать направление. Это не всегда просто. Удобно, когда каждая ссылка дополняется кратким описанием или анонсом, но текст может занимать много места. То же самое относится и к миниатюрам — они отлично выглядят, но много ли от них пользы? Посмотрите на страницу каталога сайта мэрии Сан-Франциско на рис. 3.14 и Калифорнийского университета в Беркли на рис. 3.15. Посетители страницы «Департаменты» сайта SF.gov видят только алфавитный список. Посетители сайта Калифорнийского университета в Беркли уже знают значения этих ссылок — это названия академических программ, поэтому дополнительная информация касается самого обучения, а не информации об университете. Таким образом, дизайнер может добавить больше ссылок в верхнюю часть экрана. В результате получается информативная и полезная страница. С другой стороны, статьи на странице ресурсов AIGA (рис. 3.16) только выигрывают от описательного текста и изображений. Одного заголовка не всегда достаточно, чтобы посетитель захотел щелкнуть на нем и прочитать статью. (Помните, что если пользователь щелкает на ссылке, но открывшаяся страница не соответствует его ожиданиям, то он быстро разочаровывается. Убедитесь, что используете точные и правдивые описания!) Во-вторых, обратите внимание на визуальную организацию списка ссылок. Разбит ли он на категории, а может быть, представляет собой двух- или трехуровневую иерархическую структуру? Упорядочен ли он по дате? Воплотите эту организационную схему в дизайне списка. В-третьих, не забудьте поле поиска. Наконец, подумайте, хотите ли вы сказать посетителям что-нибудь еще? Пространство домашней страницы особенно ценно, так как именно она в первую очередь привлекает посетителей сайта. У вас есть интересная статья, анонс которой можно поместить на главную страницу? Привлекательный рисунок или фото? Тем не менее, если вам кажется, что такой элемент скорее разозлит посетителей, чем заинтригует, лучше создайте обычную страницу меню. Примеры Веб-сайт города и округа Сан-Франциско, SF.gov (на момент написания этой книги находится в разработке), использует порталы (см. рис. 3.14). Он объединяет ссылки на службы и департаменты, поскольку чаще всего люди ищут здесь конкретный отдел или службу в этой крупной правительственной организации. Паттерны 173 Рис. 3.14. Сайт SF.gov На веб-сайте Калифорнийского университета в Беркли (рис. 3.15) на странице Academics представлен список ссылок. Когда пользователь заходит в этот раздел, он, вероятно, ищет конкретный отдел или ресурс, а не, скажем, рассказ о том, что такое Беркли. Весь смысл этой страницы в том, чтобы направить посетителя туда, где он сможет найти необходимую информацию. 174 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.15. Страница меню Калифорнийского университета, список факультетов и колледжей Беркли Паттерны 175 Веб-сайт AIGA содержит множество ресурсов для профессиональных дизайнеров. Категории верхнего уровня представлены элементами глобальной навигации, но главная страница для каждой категории представляет собой страницу меню (рис. 3.16). Каждая статья сопровождается эскизом изображения и кратким обзором; богатое форматирование достаточно информативно, чтобы пользователь мог решить, стоит ли тратить время на чтение той или иной статьи. Рис. 3.16. Страница меню с сайта AIGA Эта страница привлекает пользователя сама по себе, она не содержит никакой конкретной информации. 176 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Наконец, Музей современного искусства использует крупные изображения и мелкий текст в своей версии страницы меню (рис. 3.17). Рис. 3.17. Музей современного искусства, Нью-Йорк. Страница меню выставки PS1 Pyramid (Пирамида) Что это Последовательность страниц, связанная ссылками «Назад/Далее». Создайте главную страницу, которая содержит ссылки на все страницы в последовательности, и организуйте возможность просматривать их по порядку или произвольно. На рис. 3.18 представлена схема этого паттерна. Паттерны 177 Рис. 3.18. Схематическое представление паттерна Pyramid (Пирамида) Когда использовать Если сайт или приложение содержит последовательность страниц, которую пользователь обычно просматривает одну за другой, например слайд-шоу, мастер, главы книги или набор продуктов. Некоторые пользователи предпочтут просматривать их по одной за раз и в произвольном порядке, поэтому им нужна возможность выбирать желаемое из полного списка элементов. Зачем Этот паттерн уменьшает количество переходов, которые пользователю приходится совершать для перемещения по приложению. Он помогает сделать навигацию более эффективной и продемонстрировать логическую связь между страницами. Ссылки или кнопки «Назад/Далее» (или «Предыдущая/Следующая») прекрасно подходят для этого. Они понятны пользователям. Однако избегайте ситуации, когда пользователь окажется заблокированным в последовательности страниц, из которой невозможно с легкостью выбраться: если человек просмотрел уже семь страниц, то для того, чтобы вернуться к началу, ему придется семь раз щелкнуть на кнопке «Назад»? Это верный способ угробить интерес к приложению! Поместив на каждую из страниц в последовательности ссылку для перехода обратно на главную страницу, вы предоставляете пользователю дополнительный выбор. Теперь он может двигаться не в двух направлениях, а в трех: назад, вперед и наверх. Интерфейс не слишком усложнился, но пользователю, который просто изучает содержимое страниц (или который изменил планы на полпути), понадобится меньше переходов, чтобы попасть, куда ему нужно. Это намного удобнее. 178 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Связывание отдельных страниц удобно также, когда пользователю действительно нужно просмотреть все страницы. Без ссылок «Назад/Далее» ему придется постоянно переходить на главную и оттуда на следующую; проще сдаться и забыть об этом приложении. Как Расположите по порядку все элементы или страницы второго уровня на главной странице. Используйте такое представление списка, которое соответствует типу элементов (см. главу 7): например, Thumbnail Grid (Сетка миниатюр) для фотографий или насыщенный текстовый список для статей. Щелчок на элементе или ссылке должен вести пользователя на страницу этого элемента. Поместите кнопки или ссылки «Назад» и «Далее» на каждую из страниц. Многие сайты также содержат краткое описание следующего элемента, например заголовок статьи или эскиз изображения. Добавьте также ссылку «Вверх» или «Отмена», ведущую обратно на главную страницу. Один из вариантов паттерна Pyramid (Пирамида) превращает статичную линейную последовательность в цикл, связывая последнюю страницу с первой без необходимости возвращаться на главную страницу. Это обычно работает, но знает ли пользователь, что он оказывается в бесконечном цикле? Распознает ли он первую страницу последовательности? Вовсе не обязательно. Если порядок следования важен, свяжите последнюю страницу с главной — это даст понять пользователю, что он просмотрел все страницы. Примеры Страница альбома фотографий в Facebook — классический пример пирамиды. Альбом можно просмотреть целиком, прокрутив страницу (см. рис. 3.19). Фотографии представлены миниатюрами. При выборе фотографии открывается слайд-шоу, организованное в виде пирамиды (рис. 3.20). Прокрутка вправо, прокрутка влево или повторный выход в сетку — варианты навигации. Паттерны 179 Рис. 3.19. Фотоальбом Facebook 180 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.20. Дочерняя страница из фотоальбома в Facebook с кнопками «Назад», «Далее» и «Закрыть» рядом с фотографией Modal Panel (Модальная панель) Что это Экран, который не содержит навигационных элементов, кроме подтверждения сообщения, заполнения формы или щелчка, чтобы убрать панель. Модальные панели появляются поверх основного экрана. Они, как правило, вызываются действием пользователя. Это может быть выбор чего-то или совершение определенного действия. Модальные панели часто появляются в виде лайтбокса поверх главного экрана или страницы: контент под ним виден, но затемнен и недоступен. Модальные панели используются для простых задач, которые требуют полного внимания пользователя. Эти панели обычно состоят из одной страницы, и элементы навигации не появляются, пока пользователь не завершит задачу. На рис. 3.21 показана схема паттерна Modal Panel (Модальная панель). Когда использовать Если нужно сосредоточиться на одном действии или процессе либо чтобы не потерять контекст, работая над подзадачей, когда требуется покинуть главную страницу, а затем вернуться. Модальные панели также могут пригодиться, когда состояние приложения требует участия пользователя. В ориентированном на работу с документами приложении при сохранении документа, например, может Паттерны 181 Рис. 3.21. Схематическое представление паттерна Modal Panel (Модальная панель) потребоваться, чтобы пользователь указал имя файла, если оно еще не задано. В других контекстах для продолжения работы пользователю может быть необходимо войти в систему или подтвердить, что он прочитал важное сообщение. Если пользователь начинает простую операцию, которая может в дальнейшем потребовать ввода дополнительной информации, попробуйте найти способ получить ее без использования модальной панели. Можно добавить текстовое поле прямо под кнопкой, на которой пользователь щелкнул, и оставить его там дожидаться реакции пользователя. Не парализуйте весь сайт или приложение до получения второстепенных данных. Пусть пользователь займется важными делами, а к этому вопросу он вернется позже. Зачем Модальная панель исключает возможность использования других вариантов навигации. Пользователь не может игнорировать ее и перейти к другой функции приложения — ему придется решить поставленную задачу здесь и сейчас. Как только он сделает это, он снова попадет в точку, где он был до появления модального окна. Эту модель просто понять и программировать, хотя в последние годы она чересчур часто использовалась в приложениях. Модальная панель дезорганизует. Если пользователь еще не готов к тому, чтобы ответить на вопрос, который она задает, то она прерывает его рабочий процесс, заставляя думать о том, что его в данный момент совершенно не волнует. Но при правильном использовании модальная панель подталкивает пользователя к следующему решению, которое ему необходимо будет принять. Другие модели навигации не отвлекают внимание пользователя. 182 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Как В месте экрана, где сконцентрировано внимание пользователя, поместите панель, диалоговое окно или страницу, запрашивающую необходимую информацию. При этом у пользователя не должно быть возможности открыть другую страницу. Эта панель должна быть относительно простой, с минимумом отвлекающих деталей, чтобы пользователь фокусировал внимание исключительно на стоящей перед ним задаче. Помните, что это паттерн навигации. Тщательно обозначьте и правильно маркируйте выход из модальной панели, причем выходов не должно быть много: один, два, максимум три. В большинстве случаев выходы представляют собой кнопки с краткими ярлыками команд, такими как «Сохранить» или «Не сохранять». Также чаще всего добавляют кнопку «Закрыть» или крестик в правом верхнем углу. После щелчка на любой из них пользователь должен возвращаться на страницу, где он находился в момент, когда открылась модальная панель. Эффект лайтбокса — это очень эффективное визуальное представление модальной панели. Затемняя большую часть экрана, дизайнер подсвечивает модальную панель, фокусируя на ней внимание пользователя. (Чтобы это сработало, модальная панель должна быть достаточной большой, иначе пользователю будет сложно ее найти.) Некоторые веб-сайты используют модальные окна для экранов входа и регистрации. Онлайн-магазины и другие сайты, которые запрашивают вход/регистрацию только тогда, когда это действительно нужно (чтобы не отвлекать пользователя), обычно проектируются так: глобальная и локальная навигация скрывается, и все, что остается, — это войти в систему или выйти из нее. В операционных системах и на платформах GUI обычно используются модальные диалоговые окна уровня операционной системы. Они лучше всего подходят для традиционных десктопных приложений: создателям веб-сайтов следует избегать их в пользу более простых техник наложения, которые проще контролировать и которые меньше раздражают пользователей. Такие окна обычно блокируют весь интерфейс, кроме самого окна. Примеры Airbnb использует лайтбокс, чтобы привлечь внимание пользователя (рис. 3.22). Он появляется непосредственно над главной страницей веб-сайта. Взаимодействовать с ним можно только тремя способами: войти в систему, зарегистрироваться или нажать знакомую кнопку «X» в левом верхнем углу. Это типичный элемент многих модальных панелей с лайтбоксом. Если Airbnb не распознает компьютер пользователя (обычно после очистки cookie-файлов), модальная панель возвращается на место, чтобы отобразить экран двухфакторной аутентификации. Паттерны 183 Рис. 3.22. Модальная панель входа в систему Airbnb и модальная панель проверки безопасности Как мы уже говорили, онлайн-магазины часто откладывают вход или регистрацию, чтобы не прерывать процесс покупки. Однако после того, как пользователь заходит в корзину, имеет смысл попросить его войти в систему. Зарегистрированные покупатели активируют свои данные для доставки и оплаты, а продавец приглашает новых клиентов на регистрацию. Сайт продавца фото- и видеотехники B&H — хороший пример такой модели (рис. 3.23). 184 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.23. Панель регистрации на сайте B&H Macy’s использует модальное окно в процессе покупки (рис. 3.24). В этом случае он подтверждает, что выбранный покупателем товар был добавлен в корзину. Macy’s использует этот способ, чтобы предложить дополнительные товары, которые могут заинтересовать покупателя. Priceline использует модальные панели, чтобы реагировать на отсутствие активности путешественника (рис. 3.25). Если клиент искал рейс или отель, но не предпринял никаких действий со страницы результатов поиска, возможно, он переключился на другую задачу или ушел. Priceline стремится к взаимодействию с клиентом, поэтому вскоре появляется модальное окно, предлагающее показать еще более свежие результаты. Форма с тенью модального диалогового окна macOS привлекает к себе внимание, когда оно всплывает из строки заголовка (анимированное, конечно). Эти и другие модальные диалоговые окна фактически мешают пользователю взаимодействовать с остальным интерфейсом; таким образом, пользователь вынужден завершить или отменить предлагаемое действие, прежде чем начать другое (рис. 3.26). Паттерны 185 Рис. 3.24. Подтверждение покупки на сайте Macy’s Рис. 3.25. Модальное окно Priceline 186 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.26. Модальная панель в приложении Mac Deep Links (Глубокие ссылки) Что это Фиксированное состояние веб-сайта или приложения в URL-адресе, который можно сохранить или отправить другу. При загрузке этого адреса восстанавливается в точности то состояние, которое видел пользователь. Другими словами, глубокая ссылка — это способ связи как с местоположением в системе, так и с состоянием, таким как вход в систему, или возобновление незавершенного процесса в точке остановки, или сохранение информации, чтобы не загружать ее заново. Закладки, постоянные ссылки и глубокие ссылки — все это способы удобно перемещаться в выбранную точку или положение, даже если оно спрятано глубоко внутри навигационной структуры. Они позволяют избежать перехода по множеству ссылок, чтобы попасть на нужную страницу. Глубокие ссылки в мобильной ОС — это особый метод, позволяющий пользователям переходить от приложения к приложению на мобильном устройстве без потери информации или контекста задачи. На рис. 3.27 схематически показано, как работает этот паттерн. Паттерны 187 Рис. 3.27. Схематическое представление паттерна Deep Links (Глубокие ссылки) Когда использовать Если контент сайта или приложения специализированный и интерактивный: масштабируемые уровни карты, страницы книг, видеоролики или инфографика. В этом случае пользователю может быть трудно найти определенную точку или состояние, они могут отделяться от начальной точки множеством шагов. Приложение может содержать много настраиваемых параметров и состояний, таких как режимы просмотра, масштаб, уровни данных и т. д. Они усложняют поиск конкретной точки и просмотр ее в «правильном» состоянии. Зачем Паттерн Deep Links (Глубокие ссылки) позволяет попасть прямо в желаемую точку и в нужное состояние приложения, сэкономив время и усилия. Он представляет собой прямую ссылку на определенный контент или постоянную ссылку на запись в блоге, в том смысле, что URL-адрес всегда будет указывать на этот контент. Однако она более сложна, чем обычная постоянная ссылка, так как содержит данные и о состоянии приложения, и о месторасположении контента. Этот паттерн полезен для фиксации состояния, которое пользователь захочет восстановить позже, особенно если глубокую ссылку можно сохранить с помо- 188 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование щью привычных механизмов (таких как закладки в браузере). Он упрощает рассылку интересного контента другим пользователям — именно тут этот паттерн проявляет себя во всей красе. URL-адрес с глубокой ссылкой можно отправить по электронной почте, опубликовать в Twitter или социальной сети, обсудить на форуме, вставить в запись в блоге или использовать еще множеством других способов. Такая ссылка может содержать определенное сообщение, стать вирусной или превратиться в «социальное явление». Как Отслеживайте местоположение пользователя и фиксируйте его в URL-адресе. Также сохраняйте сопутствующие данные: комментарии, слои данных, маркеры, выделение и т. д., чтобы при переходе по этой ссылке восстановить их. Подумайте, какие еще параметры или состояния интерфейса можно сохранить: уровень приближения или увеличения, режим просмотра, результаты поиска и т. п. Не обязательно фиксировать все эти состояния: загрузка глубокой ссылки не должна менять настройки, которые пользователь менять не хочет. Проработайте несколько сценариев использования и определите эти настройки. URL-адреса — это наилучший формат для сохранения глубоких ссылок. Они универсальны, легко пересылаются, короткие и поддерживаются большинством инструментов, таких как службы сохранения закладок. По мере того как пользователь перемещается по содержимому и меняет различные параметры, выводите обновленный URL-адрес в адресной строке браузера, чтобы его было легко увидеть и скопировать. Однако не все пользователи будут искать его там, поэтому предусмотрите инструмент «Ссылка», говорящий пользователю: «Щелкни здесь, чтобы получить ссылку на эту страницу». Некоторые сайты генерируют фрагменты кода JavaScript, не только описывающие позицию и состояние, но и позволяющие пользователям встраивать элементы в другие веб-сайты. Отдельно следует рассмотреть мобильные глубокие ссылки. Приложения iOS и Android могут быть сконфигурированы таким образом, чтобы общедоступные URL-адреса вели в соответствующие расположения родной мобильной ОС (а не на общедоступный URL-адрес в браузере). Это позволяет запускать по любым общим ссылкам связанное с ними мобильное приложение вместе с его более надежными (как правило) элементами управления и высокой производительностью. Мобильные нативные приложения также могут передавать глубокие ссылки из одного приложения в другое. Например, приложение IMDB может содержать ссылку на трейлер фильма на веб-сайте. Вместо того чтобы открывать мобильный веб-браузер, ссылка ведет, например, в приложение YouTube на устройстве пользователя, которое лучше контролирует воспроизведение и взаимодействие. Паттерны 189 Примеры Одна из самых приятных особенностей обмена видео с YouTube — возможность встроить начальную точку для клипа в саму ссылку «поделиться» (рис. 3.28). Ссылка на ролик в YouTube включает указание начальной точки в нем. Воспроизведение у получателя начнется с нее, а не с самого начала. Рис. 3.28. Обмен видео с YouTube Google Books фиксирует множество состояний в своих URL-адресах (рис. 3.29): место, где остановился читатель, режим просмотра (одностраничный, двухстраничный, миниатюры), наличие панелей инструментов и даже результаты поиска. Масштаб сюда не входит, поскольку пользователь настраивает его индивидуально. URL-адрес, как видно, длинный и дублирует браузерный. Рис. 3.29. Две глубокие ссылки в Google Books: в адресной строке браузера и в инструменте «Ссылка» 190 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование В Apple iOS операционная система сама проверяет общедоступные URL-адреса на соответствие конфигурации глубоких ссылок всех установленных приложений. Это позволяет переходить из мобильного браузера, чтобы просматривать выбранную страницу, ленту, видео или слушать песню в приложении (рис. 3.30), а не в нем, поскольку функциональность браузера для прямой ссылки ограничена. Переход в приложение позволяет пользователю наслаждаться дополнительным функционалом и комфортным просмотром. Рис. 3.30. iOS. Глубокая ссылка из браузера на приложение Сайт объявлений о вакансиях Indeed.com содержит надежные инструменты поиска и фильтрации для тех, кто ищет работу. Эти параметры записываются в URL-адрес, позволяя совместно использовать поиск или сохранять его для последующего запуска с обновлениями (рис. 3.31). Паттерны 191 Рис. 3.31. Сервис поиска работы Indeed; параметры записываются в URL-адрес, чтобы результат поиска можно было использовать совместно или сохранить Escape Hatch (Аварийный выход) Что это Маркированная соответствующим образом кнопка или ссылка, возвращающая пользователя из текущего представления в уже известное место. Используйте их на страницах с ограниченными возможностями навигации, а также когда пользователь запутался в приложении, совершил ошибку или не знает, как покинуть страницу. Схема на рис. 3.32 иллюстрирует эту концепцию. Когда использовать Если вы работаете над страницами, составляющими последовательность, например, мастера, или любыми страницами, ограничивающими пользователя определенным набором ситуаций, например, как при использовании паттерна Modal Panel (Модальная панель). Также выходы можно использовать на страницах, куда пользователи могут попадать не из контекста, а, например, через результаты поиска. 192 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.32. Схематическое представление паттерна Escape Hatch (Аварийный выход) Существуют также «экраны смерти». Например, страницы ошибок HTTPсервера, такие как Error 404 Not Found (таких страниц множество), — отличное место, чтобы разместить там аварийный выход. Зачем Ограниченная навигация — это одно, а отсутствие выхода — совсем другое! Если у пользователя будет простой и очевидный способ покинуть страницу безо всяких условий, ему не будет казаться, что он в ловушке. Такая возможность помогает людям чувствовать себя в безопасности при исследовании приложения или сайта. Она похожа на функцию Undo (Отмена) — побуждает пользователей пробовать разные варианты, не боясь последствий. См. паттерн Safe Exploration (Безопасное исследование) в главе 1. Если пользователи могут попасть на какие-то страницы через результаты поиска, то вдвойне важно на каждой из них предусмотреть «аварийный выход». Посетитель щелкнет на нем, чтобы попасть на привычную страницу и понять, где же он очутился. Паттерны 193 Как Поместите на страницу кнопку или ссылку, которая будет возвращать пользователя в «безопасное место». Например, на главную страницу сайта, центральную страницу в дизайне «спицы колеса» или любую другую страницу, на которой много элементов навигации и которая понятна пользователю. Выбор конкретной страницы зависит от дизайна приложения. Примеры Под логотипами, обычно расположенными в левом верхнем углу веб-сайта, часто прячут ссылки, ведущие на главную страницу. Это позволяет не только создать аварийный выход, ведущий в знакомое место, но и поддержать фирменный стиль. В некоторых диалоговых окнах ту же роль играет кнопка Cancel (Отмена). Она позволяет пользователю сказать: «Я закончил, забудьте, что я вообще сюда приходил». Вам когда-нибудь доводилось звонить в компанию, например в банк, и пробиваться через бесконечные добавочные меню? Эти меню длинные, сбивают с толку и отнимают много времени. Если вы вдруг понимаете, что неправильно набрали очередной номер (или нажали не ту клавишу), то вы можете просто повесить трубку и попытаться повторить все с самого начала. Однако во многих таких системах есть скрытый аварийный выход, о котором часто умалчивают: если в любой момент нажать 0, то вас соединят с оператором. На многих сайтах есть страницы с ограниченными возможностями навигации, такие как модальные панели. Один из примеров — экран настроек LinkedIn. Этот раздел отделен от основного веб-приложения. Глобальной навигации нет. Если пользователь окажется здесь, есть два способа вернуться назад, через два аварийных выхода. Первый — это логотип LinkedIn, ведущий на главную страницу. Второй — ссылка «Вернуться на LinkedIn.com», привязанная к фото профиля участника (рис. 3.33). С помощью аварийного выхода можно покинуть тупиковую страницу браузера. На страницах 404 Not found сайта Curbed.com есть аварийный выход. В тексте содержится ссылка для перехода на главную страницу (рис. 3.34). Curbed также размещает системные оповещения о статусе, так что если веб-сайт Curbed не активен, пользователь будет знать об этом. 194 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.33. Страница настроек LinkedIn со ссылкой и фото профиля в правом верхнем углу в качестве аварийного выхода, ведущего на LinkedIn Рис. 3.34. Curbed.com, страница ошибки с аварийным выходом на домашнюю страницу Паттерны 195 Fat Menus (Полные меню) Что это Полный список вариантов навигации в выпадающих или раскрывающихся меню. Также их называют «мегаменю». Используйте это представление, чтобы перечислить все подстраницы разделов сайта. Тщательно продумайте их организацию, используйте список правильно подобранных категорий или естественную сортировку и разверните меню по горизонтали. Полное меню "All Microsoft" на сайте Microsoft.com — хороший пример этого паттерна (рис. 3.35). Рис. 3.35. Меню на сайте Microsoft Когда использовать Если на сайте или в приложении много страниц и они разбиты на множество категорий, возможно, в иерархии из трех или более уровней. Вы хотите сделать их заметнее для посетителей, чтобы они знали обо всех доступных им возможностях. При этом пользователям удобно работать с раскрывающимися меню (нужно щелкнуть на них, чтобы увидеть их содержимое) и выпадающими меню (открываются при наведении указателя мыши). Зачем Полные меню упрощают работу со сложными сайтами. Благодаря им посетители увидят больше вариантов навигации, чем в обычном режиме просмотра сайта. Большое количество ссылок на каждой странице позволяет пользователю быстро переходить с текущей подстраницы на любую другую подстраницу (или почти на любую). Таким образом, многоуровневый веб-сайт, в котором подстраницы разных разделов не связаны между собой, превращается в полносвязанный. Полные меню — это форма прогрессивного раскрытия, важной концепции UIдизайна. Сложные элементы скрыты, пока они не нужны пользователю. Посетитель сайта просматривает заголовки меню, чтобы получить общее представление 196 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование о темах его содержимого, и только когда он выберет определенную тему, чтобы изучить ее подробнее, он открывает полное меню. Он не видит множество подстраниц до тех пор, пока не будет к этому готов. Если вы уже используете меню для глобальной навигации, попробуйте превратить их в полные меню, если добавление большего количества ссылок сделает контент привлекательнее для нечастых посетителей. Им не придется углубляться в категории и подкатегории сайта в поисках необходимого — они увидят его сразу. Как В каждом меню представьте хорошо организованный список ссылок. Если удобно, распределите ссылки по именованным разделам (паттерн Titled Sections (Именованные разделы) из главы 4), если нет — используйте другой подходящий порядок сортировки, например по алфавиту или по времени. Используйте заголовки, разделители, пустое пространство, неяркие графические элементы и другие инструменты для визуальной организации ссылок. Не забывайте о преимуществах горизонтального развертывания: при желании меню можно развернуть по горизонтали на всю страницу. На многих сайтах для представления категорий используются столбцы. Однако если сделать меню слишком длинными, они могут выйти за пределы экрана. Удачный дизайн интерфейса подразумевает соответствие полных меню стилистике остального сайта. Проектируйте их так, чтобы их цветовая схема, расположение и прочее соотносились с контентом на странице. Некоторые реализации меню не поддерживаются технологиями доступности, такими как экранные дикторы. Убедитесь, что ваше полное меню работает с ними. Если нет, попробуйте более статичную стратегию, например паттерн Sitemap Footer (Карта сайта в подвале). При необходимости адаптируйте полные меню для мобильных устройств. В этом случае выровняйте верстку столбцов по левому краю. Меню будет содержать один столбец с вертикальным расположением разделов. Лучше не добавлять много элементов навигации на каждую страницу. Вместо этого представьте такое меню в виде справочной страницы навигации, доступной по отдельной схеме. Примеры Macy’s, как и большинство крупных ретейлеров, предлагает обширный ассортимент, включающий разнообразные категории товаров. В таких случаях найти и просмотреть конкретную категорию или интересующий товар бывает непросто. Тогда может пригодиться хорошо продуманное полное меню. Macy’s использует двухчастную структуру (рис. 3.36). Покупатель сначала открывает меню верхнего уровня с основными категориями. После выбора одной из них Паттерны 197 открывается вторая панель во всю страницу. На этой панели выводится весь набор категорий второго уровня. Рис. 3.36. Двухуровневое полное меню Macy’s с прогрессивным раскрытием На сайте Starbucks мы видим очень хороший пример полного меню (рис. 3.37). Все разделы меню одинаковой ширины, но разной высоты. Они соответствуют общей схеме страницы (единообразны). Стиль меню соответствует стилю сайта, а обилие пустого пространства упрощает чтение. В дизайн меню включены рекламные элементы, но они не навязчивы. 198 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.37. Раздел меню «Кофе» в Starbucks Как видно на рис. 3.38, в полных меню Mashable использован гибридный подход. Текстовые меню смещены влево и не выделяются. На сайте по максимуму используются преимущества горизонтального развертывания для показа избранных статей. Это хороший вариант, поскольку осведомленный пользователь может быстро пробежаться по заголовкам, прокручивая меню. Рис. 3.38. Меню Mashable’s Science Американский Красный Крест широко использует полные меню (рис. 3.39). Когда пользователь щелкает на любом пункте меню верхнего уровня, выпадающие полные меню закрывают верхнюю часть экрана. Хорошая организация и представление тем и ссылок делают сложную структуру сайта простой и понятной. Разделы в каждом полном меню организованы по наиболее часто задаваемым вопросам или жизненным ситуациям. Паттерны 199 Рис. 3.39. Меню сайта Американского Красного Креста WebMD использует алфавитную сортировку для списка тем в разделе «Здоровье» (рис. 3.40). Предусмотрен прямой доступ к информации о частых заболеваниях, длинный список дополнительных ресурсов и место для двух партнерских материалов с графикой. Посетитель с высокой долей вероятности найдет нужную информацию и продолжит изучать сайт. Рис. 3.40. Алфавитная организация меню WebMD Health 200 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Sitemap Footer (Карта сайта в подвале) Что это Полный каталог ссылок, организованный по категориям, который содержит обзор всего контента веб-сайта и ссылки на все основные разделы и страницы (рис. 3.41). Другими словами, карта сайта в подвале — это справочник веб-сайта и может служить указателем на другие сайты и ресурсы. Уникальность расположения внизу страницы (в подвале) в том, что при этом отсутствуют ограничения по вертикали, как для полных меню, которые расположены в верхней части экрана. Рис. 3.41. Подвал сайта Whole Foods Когда использовать Если на страницах сайта много свободного места, а размер страниц и время их загрузки не ограничены жесткими рамками. Вы не хотите загромождать шапку и боковую панель навигационными элементами. На сайте достаточно много страниц, но не слишком много категорий и «важных» разделов (тех, которые пользователь обязательно станет искать). Почти полную карту сайта — по крайней мере, карту страниц, не указанных в шапке, — можно уместить в полосу шириной до половины высоты окна. В шапке страницы могут находиться элементы глобального навигационного меню. Однако оно показывает не все уровни иерархии сайта, а, возможно, только категории верхнего уровня. Вы предпочитаете полным меню простую, наглядную визуализацию подвала страницы — ее может быть проще спроектировать и удобнее использовать. Паттерны 201 Зачем Карта сайта в подвале делает сайт нагляднее. Посетитель одновременно видит больше вариантов навигации, чем при обычном просмотре сайта. Большое количество ссылок на каждой странице позволяет пользователю быстро переходить с текущей подстраницы на любую другую подстраницу (или почти на любую). Таким образом, многоуровневый веб-сайт, в котором подстраницы разных разделов не связаны между собой, превращается в полносвязанный. Подвал страницы привлекает внимание пользователя, который дошел до конца страницы. Поместив туда интересные ссылки, вы повысите вероятность того, что пользователь останется на сайте и прочитает что-то еще. Наконец, видя полную карту сайта, пользователям проще понять его структуру и где искать интересующую их информацию. Это очень полезно на сложных сайтах. Иногда приходится выбирать между картой сайта в подвале и полными меню. Обычно первый вариант проще реализовать и отладить, так как он нединамичен. Меню могут выпадать или раскрываться при наведении указателя или щелчке мыши, но карта сайта — это набор статичных ссылок. Его проще использовать программам для чтения экрана, и он не требует точного наведения курсора, поэтому он более удобен. С другой стороны, если посетитель торопится или зашел на сайт случайно, то он может вообще не заметить подвал. Он обращает внимание на контент и заголовки. Если сомневаетесь, проведите пользовательское тестирование и оцените, как часто люди щелкают на ссылках в подвале страницы. Как Разработайте полосу шириной во всю страницу и поместите туда ссылки на главные разделы сайта (категории) и наиболее важные подстраницы. Добавьте служебную навигацию, например выбор языка, и другую стандартную информацию, такую как сведения об авторских правах и заявления о конфиденциальности. Карта сайта в подвале может быть полной, но это не обязательно. Ее назначение — показать посетителю то, что он вероятнее всего будет искать, в то же время не перегружая шапку и боковую панель. Поместите карту сайта в подвал каждой страницы сайта. Сделайте ее частью глобальной навигации, дополняющей шапку. На практике часто элементы глобальной навигации вверху страницы ориентируют на задачи сайта и отвечают на первые вопросы посетителя: о чем этот сайт? как попасть в Х прямо сейчас? В то же время карта сайта в подвале отображает полную информационную архитектуру сайта. Такое «разделение обязанностей» очень эффективно. 202 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Если контент сайта требует сложной навигации — например, большой набор продуктов, новостных статей, музыки, видео, книг и т. д., — то верхнюю часть страницы можно использовать для навигации по контенту, а подвал для всего остального. Что чаще всего можно найти на карте сайта в подвале: основные категории контента; информацию о сайте или компании; корпоративные сведения, контакты или вакансии; ссылки на партнерские или дочерние сайты, например посвященные другим брендам компании; ссылки на социальные инструменты, такие как форумы; инструменты справки и поддержки; контактную информацию; актуальные промоакции; для некоммерческих организаций — сведения о том, как сделать пожертвование или стать волонтером. Примеры На сайте REI наглядно видно различие между элементами глобальной навигации вверху страницы, ориентированными на задачи, и эффективной картой сайта в подвале (рис. 3.42). О покупках, обучении и путешествиях вы узнаете из ссылок в шапке — за этим приходит большинство пользователей. Подвал выполняет вторичные, но не менее важные задачи: он содержит справку о компании, сведения о поддержке клиентов, информацию о членстве в клубе и т. д. Шапка и подвал страницы Los Angeles Times демонстрируют аналогичный подход, но в контексте крупного издания. Меню шапки организовано по основным темам новостей. Оно соответствует традиционной структуре газет. Подвал отличается: основные его элементы — корпоративная информация и ссылки, информация для вторичной аудитории, такой как рекламодатели и соискатели на вакансии (рис. 3.43). Сайт The Wall Street Journal устроен похожим образом (рис. 3.44). В шапке представлена четкая структура новостных тем. Подвал посвящен в основном бизнесу: подписке, обслуживанию клиентов и другим видам деятельности в Dow Jones & Company. В разделе «Инструменты» содержится дополнительная информация для потребителей. New York Times не следует этой схеме. Подвал в нем представляет собой расширенное представление информационной иерархии нового контента. Это каталог, который дублирует навигацию в шапке (рис. 3.45). Присутствуют также корпоративные организационные ссылки, но они находятся в самом низу и визуально отделены. Паттерны 203 Рис. 3.42. Шапка и подвал страницы веб-сайта REI Рис. 3.43. Шапка и подвал страницы Los Angeles Times 204 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.44. Подвал страницы Wall Street Journal Рис. 3.45. Подвал страницы New York Times Рис. 3.46. Подвал страницы Salesforce Паттерны 205 Salesforce использует карту сайта в подвале страницы, чтобы кратко описать три ключевые сферы интереса посетителей и клиентов (рис. 3.46). Первый набор ссылок ведет к описанию продукции компании и говорит о том, почему клиентам будет интересно узнать о ней. Второй набор содержит ссылки на стандартные сведения о компании, о карьере и инвесторах. Третий представляет важный связанный контент, такой как корпоративный маркетплейс сторонних приложений и информация о ежегодной конференции, организуемой компанией. Sign-In Tools (Инструменты регистрации) Что это Элементы служебной навигации для регистрации и входа на сайт в правом верхнем углу экрана. Корзина покупок, ссылка на профиль и настройки учетной записи, кнопки помощи и выхода из системы. Когда использовать Инструменты регистрации полезны на любых сайтах и службах, где пользователю необходимо входить в систему под своими учетными данными. Зачем Этот паттерн полностью конвенциональный: именно в правом верхнем углу окна люди ожидают увидеть подобные инструменты — так почему бы не поместить их туда? Пользователям приятно обнаруживать их на привычном месте. Как Отведите место в правом верхнем углу каждой страницы для инструментов регистрации. Первым выводите логин пользователя (и по возможности миниатюру его фото профиля), если имя и фото не представлены где-то еще на странице. Убедитесь, что инструменты регистрации работают одинаково на каждой странице. Объедините следующие элементы: кнопку или ссылку для выхода из системы (это очень важный элемент, никогда не забывайте о нем); ссылку на параметры учетной записи; ссылку на настройки профиля; кнопку или ссылку на раздел помощи; ссылку на раздел поддержки пользователей; корзину покупок; личные сообщения или другие уведомления; 206 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование ссылку на персональные коллекции элементов (наборы изображений, избранное, списки желаний и т. п.); ссылку на домашнюю страницу. Не делайте эту область слишком большой или заметной, чтобы она не доминировала над основной частью страницы. Так быть не должно, это всего лишь служебная навигация. Если пользователю будет нужно, он обратит внимание на этот раздел; в остальное время он должен быть «невидим» (разумеется, не буквально). Некоторые элементы можно обозначать не текстом, а небольшими значками: корзину покупок, сообщения, справку. Для них есть стандартные узнаваемые иконки. Некоторые примеры вы найдете ниже. Поле поиска часто помещают рядом с инструментами регистрации, однако оно должно оставаться на неизменном и привычном месте независимо от того, вошел пользователь в систему или нет. Если пользователь еще не вошел в систему, то в этой области страницы можно показать поле для ввода учетных данных — логина и пароля, а также добавить призыв к действию и, возможно, инструменты для восстановления пароля. Примеры Ниже приведены некоторые примеры инструментов входа в Airbnb (рис. 3.47), Google (рис. 3.48) и Twitter (рис. 3.49). Они визуально незаметны, но их просто найти, поскольку они находятся в привычном месте — углу страницы или окна. Рис. 3.47. Инструменты входа в систему Airbnb Паттерны 207 Airbnb предоставляет набор ссылок для зарегистрированных пользователей и для входа в систему: стать хозяином, предстоящие поездки, сохраненные поисковые запросы в дополнение к раскрывающемуся меню входа в систему для участника. Google и Twitter полностью скрывают инструменты входа в систему в раскрывающемся меню. Доступом по умолчанию к ним служит только миниа­ тюра фото профиля пользователя. Рис. 3.48. Инструменты входа в систему Google 208 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.49. Инструменты входа в Twitter Progress Indicator (Индикатор выполнения) Что это Карта страниц, расположенная на каждой странице из последовательности, для понимания выполнения, с указателем «Вы находитесь здесь». Сайт ретейлера Menlo Club (рис. 3.50) использует такой индикатор для процесса оформления заказа. Паттерны 209 Рис. 3.50. Индикатор выполнения оформления Menlo Club Когда использовать Если вы разрабатываете описание, схему процесса, мастер или что-то, что требует пошаговых действий пользователя. Путь пользователя по большей части линейный. Если топология навигации объемна и иерархична (в противоположность линейной), рассмотрите паттерн Breadcrumbs (Хлебные крошки). Если шагов или элементов очень много, а их порядок не важен, то можно применить паттерн Two-Panel Selector (Двухпанельный селектор, глава 7). Зачем Индикатор выполнения сообщает пользователю, какие шаги уже пройдены и, что еще важнее, сколько ему осталось пройти. Исходя из этого, он решает, стоит ли продолжать, и оценивает примерное время на завершение работы. Индикатор выполнения также служит элементом навигации, позволяя пользователям возвращаться на уже завершенный этап одним щелчком мыши на его названии. Как Поместите небольшую карту страниц ближе к краю страницы. Сделайте так, чтобы она занимала одну строку или столбец и визуально не мешала воспринимать основной контент. Индикатор текущей страницы должен выделяться на фоне остальных. Сделайте его ярче или темнее остальных и продумайте, как отмечать страницы, на которые пользователь уже заходил. Для большего удобства карту можно поместить рядом с основными элементами навигации — обычно это кнопки «Назад» и «Далее». Как маркировать страницы на карте? Если страницы или шаги последовательности пронумерованы, используйте числа — они занимают мало места и их легко понять. Лучше, если вы также добавите заголовки страниц (короткие, чтобы карта не стала громоздкой). Это поможет пользователям понять, к каким страницам возвращаться, и представить, что их ждет впереди. 210 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Примеры Слайд-шоу на рис. 3.51 сопровождается простым индикатором выполнения внизу в виде подсчета страниц с указанием номера текущей страницы. С его помощью нельзя перемещаться по сайту. Этой цели служат кнопки со стрелками «Назад» и «Далее», расположенные по бокам изображения. Рис. 3.51. Слайд-шоу National Geographic Kids с индикатором выполнения в виде номера страницы (в центре внизу) Слайд-шоу Vanity Fair также использует статический индикатор выполнения в виде нумерации страниц (рис. 3.52). Сам индикатор не служит для навигации. Конфигуратор продукта Mini Cooper (рис. 3.53) содержит полнофункциональный индикатор выполнения, который позволяет пользователю перемещаться вперед и назад по желанию, но упорядочивает страницы в определенной последовательности. Индикатор выполнения вверху — это основной элемент управления для «игр» с приложением, перемещения по страницам и изучения возможностей. Процесс оформления заказа в онлайн-магазине обычно состоит из нескольких определенных шагов. На сайте B&H Photo (рис. 3.54) для этого процесса пре­ дусмотрен стандартный индикатор хода в верхней части страницы. Следующие шаги остаются неактивны, пока пользователь не завершит предыдущие. Паттерны 211 Рис. 3.52. Слайд-шоу Vanity Fair с индикатором выполнения в виде номера страницы 212 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.53. Конфигуратор продукта Mini Cooper с картой последовательности вверху страницы Рис. 3.54. Оформление заказа на сайте B&H с индикатором выполнения Паттерны 213 Breadcrumbs (Хлебные крошки) Что это Хлебные крошки — особый тип навигации, который показывает путь от начальной страницы по навигационной иерархии и структуре сайта к выбранной странице. Навигационный паттерн Breadcrumbs (Хлебные крошки) можно представить как серию ссылок «родитель — потомок», детализирующих информационную архитектуру сайта. Хлебные крошки показывают, где в иерархии содержимого находится текущая страница. Сайт Target (рис. 3.55) — пример частого использования хлебных крошек для больших каталогов товаров. Рис. 3.55. Паттерн Breadcrumbs (Хлебные крошки) на сайте Target Когда использовать Если у приложения или сайта иерархическая структура из двух или более уровней. Пользователи перемещаются по ней с помощью элементов прямой навигации, обзора, фильтрации, поиска по сайту или глубоких внешних ссылок на контент. Одной глобальной навигации недостаточно, чтобы сказать пользователю: «Вы находитесь здесь», так как иерархия очень разветвленная. В качестве альтернативы можно использовать инструменты обзора или фильтры большого объема данных, таких как товары в интернет-магазине. Товары разбиваются на категории в иерархии, но такой способ не обязательно будет соответствовать тому, как пользователь будет искать нужные продукты. Зачем Паттерн Breadcrumbs подразумевает представление всех уровней иерархии от самого верхнего до текущей страницы. В определенном смысле это один линейный «срез» общей карты сайта или приложения. 214 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Как и индикатор хода выполнения процесса, хлебные крошки помогают пользователю не забыть, где он находится. Это особенно удобно, если он внезапно перемещается на более глубокий уровень, например, переходя по ссылке из результатов поиска или используя фасетный поиск. В отличие от индикатора хода выполнения процесса, хлебные крошки не говорят пользователю, куда идти дальше. Они показывают только текущее местоположение. Некоторые специалисты утверждают, что паттерн Breadcrumbs (название паттерна — отсылка к сказке о Гензеле и Гретель, в которой Гензель разбрасывал хлебные крошки в лесу, чтобы найти по ним дорогу домой) — лучший способ сориентировать пользователя, каким образом он попал в данное место с верхнего уровня иерархии. Но это верно, только если пользователь действительно шел сверху вниз, никуда не сворачивая, не заходя в тупики, не выполняя поиск, не переходя по ссылкам с других страниц… Это маловероятно. Таким образом, паттерн Breadcrumbs ориентирует пользователя, где он находится по отношению к остальной части приложения или сайта, но в контексте, а не в истории перемещений. Взгляните на сайт Target на рис. 3.55. Фасетный поиск — поиск элементов с определенными характеристиками — привел меня на эту страницу, расположенную глубоко в иерархии сайта (то же самое могло произойти при поиске по ключевому слову). Но, оказавшись здесь, я вижу, что это за место в иерархии и какие еще товары могут меня заинтересовать. Благодаря хлебным крошкам я могу посмотреть все стационарные миксеры Target и сравнить их характеристики. Наконец, обычно паттерн Breadcrumbs представляет собой активные ссылки или кнопки, которые сами по себе служат элементами навигации. Как На каждой странице, лежащей ниже определенного уровня в иерархии (на более глубоком уровне архитектуры), создайте список родительских страниц от текущей до начальной. Цель такого представления — проследить взаимоотношение страниц или детализировать путь от текущей страницы к начальной. Вверху страницы разместите строку с текстом или полосу значков, отмечающих текущее положение в иерархии. Начните с верхнего уровня; правее поместите метку следующего уровня и так далее вплоть до текущей страницы. Между уровнями вставьте графический или текстовый символ, указывающий на взаимоотношения «родитель — потомок». Обычно это стрелка вправо, треугольник, знак «больше» (>), косая черта (/) или правые кавычки-елочки (»). В качестве ярлыков для обозначения каждой страницы лучше использовать заголовки этих страниц. Пользователи, уже побывавшие на этих страницах, будут узнавать заголовки, а новичкам они подскажут содержимое страниц. Текстовые ярлыки должны содержать ссылки на соответствующие страницы. Паттерны 215 Некоторые последовательности хлебных крошек заканчиваются на текущей странице. Если у вас именно такой вариант, оформите его так, чтобы маркер текущей страницы визуально отличался от остальных, так как это просто текст, без ссылки. Примеры Samsung широко использует хлебные крошки, особенно в разделе сайта, посвященном поддержке клиентов, где много контента. На рис. 3.56 показаны два варианта использования этого паттерна. Первый — когда паттерн ожидаемо находится в левом верхнем углу, чуть выше центрального изображения. Он показывает, где мы находимся в иерархии. Ниже, в основной области, расположен пошаговый виджет «Найти свой телевизор», который помогает клиенту сузить круг поиска. Слева мы видим меньшую хлебную крошку, которая показывает, где пользователь находится в иерархии продуктов. Рис. 3.56. Раздел клиентской поддержки на сайте Samsung; два варианта представления хлебных крошек 216 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование B&H Photo использует крупное, заметное представление для хлебных крошек, чтобы клиент видел, где он находится в этом огромном онлайн-каталоге продуктов (рис. 3.57). Рис. 3.57. Хлебные крошки на сайте B&H На рис. 3.58 показан пример применения паттерна Breadcrumbs вне «страничного» контекста. Инструменты разработчика браузера Chrome, так же как и многие другие подобные инструменты, предоставляют пользователям возможность управлять очень глубокими иерархическими структурами (в данном случае — объектной моделью документа и вложенными структурными тегами на странице HTML). Хлебные крошки здесь просто незаменимы, иначе в подобной структуре очень просто потеряться. Паттерны 217 Рис. 3.58. Инструменты разработчика Chrome Annotated Scroll Bar (Аннотированная полоса прокрутки) Что это Дополнение к обычной полосе прокрутки, чтобы она представляла собой уведомление, или карту содержимого открытого документа либо экрана, или индикатор «Вы находитесь здесь». В примере из Google Docs (рис. 3.59) всплывающая панель, прикрепленная к полосе прокрутки, показывает текущее положение пользователя в многостраничном документе. Когда использовать Если вы разрабатываете приложение, ориентированное на работу с документами или данными. Пользователи ищут в таких документах или в графике определенные элементы, например номера страниц, названия глав или разделов, либо уведомления. По мере прокрутки документа ориентироваться в нем может быть сложно, и полоса прокрутки поможет понять, куда идти дальше. 218 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Рис. 3.59. Полоса прокрутки с номерами страниц в Google Docs Зачем Хотя пользователь, прокручивая содержимое, не покидает одной области, указатели все равно необходимы. При быстрой прокрутке очень сложно прочитать мелькающий на экране текст (или даже невозможно, если страница обновляется недостаточно быстро), поэтому необходим дополнительный индикатор позиции. Даже если пользователь резко остановит прокрутку, часть документа на экране может не содержать никаких ориентиров, например заголовков. Почему полоса прокрутки? Потому что именно на нее обращает внимание пользователь. Если поместить указатели на полосу прокрутки, то он их заметит и будет использовать, что намного удобнее, чем одновременно пытаться смотреть на две разные области экрана. Того же эффекта можно добиться, расположив указатели рядом с полосой прокрутки — чем ближе, тем лучше. Когда индикаторы полосы прокрутки отображаются прямо на ней, то получается что-то вроде одномерной реализации паттерна Overview Plus Detail (Обзор и детали) (см. главу 9). Полоса прокрутки — это обзор, а прокручиваемое содержимое страницы — это детали. Как Поместите индикатор позиции прямо на полосу прокрутки или рядом с ней. Подойдут как статические, так и динамические индикаторы, меняющиеся по мере того, как пользователь просматривает страницу (рис. 3.59). Статические индикаторы не меняют свой вид каждую секунду и могут выглядеть, например, как блоки определенного цвета на полосе прокрутки (см. снимок экрана программы DiffMerge на рис. 3.60). Однако убедитесь, что их назначение понятно: они могут сбить с толку пользователей, не привыкших видеть графику на полосе прокрутки. Паттерны 219 Динамические индикаторы меняются по мере того, как пользователь прокручивает документ, и часто представляют собой всплывающие подсказки. Когда позиция в документе меняется, рядом с бегунком полосы прокрутки появляется подсказка с информацией о том, что сейчас выводится на экран. Информация в подсказке зависит от приложения. В Microsoft Word, например, подсказка содержит номера страниц и заголовки. В любом случае важно понять, чего ожидает пользователь и что, следовательно, должна содержать подсказка. Удобно начать со структуры контента. Если он представляет собой программный код, то можно вывести название текущей функции или метода; если это электронная таблица, то номер строки и т. д. Также учитывайте, выполняет ли пользователь поиск строки, — в таком случае подсказка должна содержать информацию о том, где находятся результаты поиска. Примеры Приложение DiffMerge, показанное на рис. 3.60, визуально подчеркивает различия между двумя версиями текстового файла: различающиеся разделы отмечены Рис. 3.60. DiffMerge 220 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование красным цветом, а соответствующая часть полосы прокрутки выделена синим. Полоса прокрутки служит картой, что облегчает сравнение файлов. В браузере Chrome полоса прокрутки помогает искать текст на странице (рис. 3.61). Когда вы ищете слово или строку на веб-странице, Chrome подсвечивает найденные фрагменты желтым цветом. Одновременно в тех местах, где обнаружены совпадения, желтые индикаторы выводятся на полосу прокрутки. Так пользователь может сразу прокрутить документ до места, где находится интересующее его содержимое. В этом примере в тексте выделены два вхождения искомого слова. Обратите внимание на маленькие черточки, расположенные сверху вниз на полосе прокрутки справа. Первые два совпадения подсвечены желтым. Очевидно, что в остальной части статьи совпадения тоже есть, потому что мы видим множество желтых меток ниже по полосе прокрутки. Рис. 3.61. Результаты поиска слова в Chrome Паттерны 221 Animated Transition (Анимированный переход) Что это Добавьте движения и возможность менять внешний вид объектов, чтобы указать, что совершается определенное действие. Сгладьте переход с помощью анимации, которая сделает его естественным. Этот паттерн включает в себя слайды, затемняемые входы/выходы, изменение яркости, масштабирование и другие способы анимации. Когда использовать Анимация элементов интерфейса очень популярна в мобильных приложениях. Она уже стала стандартом качественного взаимодействия с пользователем на мобильных устройствах. Некоторые папки, окна и анимации прокрутки являются частью самой мобильной ОС. Используйте анимацию, если вы хотите визуально подтвердить, что сигнал от пользователя получен, например нажатие кнопки, или что действие выполняется (например, страница загружается), или если вы просто хотите добавить изюминку в свое приложение. Если пользователи перемещаются по большому виртуальному пространству, такому как изображение, электронная таблица, график или текстовый документ, у них должна быть возможность масштабировать документ, прокручивать или поворачивать его целиком вокруг своей оси. Это особенно полезно для информационной графики, такой как карты или схемы. Этот паттерн используется также для разделов, которые можно закрывать и снова открывать, причем это может делать и система, и пользователь: деревья со свертываемыми родительскими узлами, открывающиеся и закрывающиеся отдельные окна или свертываемые панели. Анимированный переход также можно применять, когда пользователь переходит между страницами, которые не связаны друг с другом. Анимированные переходы помогут понять, где находится файл или объект в самом интерфейсе, например где в панели запуска macOS может находиться значок запуска. Зачем Трансформации могут дезориентировать пользователя. Например, мгновенное масштабирование нарушает пространственную ориентацию, как и вращение и закрывание целых разделов, поскольку при этом меняется макет страницы. Даже неплавная прокрутка длинной страницы текста может замедлить восприятие. Однако если переход из одного состояния в другое осуществляется плавно, он уже не так пугает. Другими словами, можно анимировать переход между состояниями, чтобы он не содержал рывков. Так пользователь не потеряет ориентацию 222 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование в пространстве. Это работает: вспомните привычный мир — когда вы в последний раз мгновенно перемещались с первого этажа на третий? Говоря менее образно, при анимированном переходе пользователь улавливает постепенное изменение состояния, а не пытается сориентироваться в резко изменившихся условиях. Этот инструмент может дать полезную обратную связь по управлению пользовательским интерфейсом и навигации. На рис. 3.62 мы видим две анимации, Рис. 3.62. Увеличение значка и переход окна приложения в macOS Паттерны 223 которые широко использует Apple macOS. Первая — это увеличение иконок в документе. Оно помогает пользователям понять, на каком значке находится указатель, когда они проводят пальцем вперед и назад. Второй — это эффект масштабирования открытия/закрытия страницы. Окно документа анимируется на значок приложения, помогая пользователю вспомнить, куда он его поместил. Грамотно спроектированный анимированный переход даст приложению преимущество с точки зрения качества, скорости и динамичности. Как Для каждого типа трансформации, используемого в интерфейсе, разработайте короткую анимацию, «соединяющую» исходное состояние с конечным. Для масштабирования и вращения покажите на экране промежуточные состояния; для свертывания панели анимируйте ее сжатие, пока остальные панели расширяются, занимая освобожденное пространство. Старайтесь максимально естественно копировать соответствующий физический процесс. Однако этот паттерн — палка о двух концах. Не укачайте пользователя! Анимация должна быть быстрой и точной, а между действием пользователя и началом анимации не должно быть задержки либо она должна быть минимальной. Ограничьте анимацию элементами экрана, для которых она действительно важна; не нужно анимировать экран целиком. Делайте ее короткой. Согласно исследованиям, 300 миллисекунд — оптимальная длительность анимации для гладкой прокрутки. Проведите пользовательское тестирование, чтобы выбрать самый удачный вариант. Если пользователь быстро совершает несколько действий одно за другим, например нажимает стрелку вниз для прокрутки документа, объедините их в одной анимации. Иначе несчастному, который нажал эту стрелку десять раз, придется лицезреть анимацию длительностью в несколько секунд. Запомните: главное — скорость и отклик. Вот несколько возможных переходов: подсветка и затемнение; расширение и сжатие; постепенное появление или исчезновение; плавный переход; скольжение; пульсирующий круг. Примеры При открытии сайта Tesla (рис. 3.63) используется простой инструмент зум. На экране появляются три модели Tesla, затем масштаб изображения увеличивается, фокусируя внимание пользователя на модели 3. Пользователь не управ- 224 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование ляет масштабированием. Однако он может перемещаться влево и вправо, чтобы выбрать другую модель Tesla. Этот панорамный эффект плавно анимирован. Рис. 3.63. Анимация масштабирования на начальной странице Tesla.com Паттерны 225 Сервис Prezi широко использует масштабирование и панорамирование для создания уникальных и плавных презентаций. На рис. 3.64 показан выбор экранов из демонстрации. По мере того как пользователь просматривает экраны, презентация приближается, появляется текст, далее панорама перемещается вправо и масштаб изображения уменьшается при выходе из раздела. Так создается интересное ощущение полета в информационном пространстве. Рис. 3.64. Сервис Prezi для создания презентаций включает анимированное масштабирование и демонстрацию слайдов 226 Глава 3. Подскажите дорогу: навигация, указатели и ориентирование Что еще почитать Узнать больше о возможностях и значении анимации и о том, как включить ее в дизайн интерфейса, вы сможете, прочитав эти книги: Creating Web Animations: Bringing Your UIs to Life, Кирупа Чиннатамби (O'Reilly, 2017). Transitions and Animations in CSS: Adding Motion with CSS, Эстель Вейл (O'Reilly, 2016) SVG Animations: From Common UX Implementations to Complex Responsive Animation, Сара Дрезнер (O'Reilly, 2017) Заключение Продуманные инструменты навигации и ориентирования помогут пользователям быстрее изучить приложение, легко определять свое местоположение в нем и не терять контекст, уверенно использовать возможности продукта, знать, что делать и куда идти, и избегать волнений, путаницы или ошибок. Навигация имеет, возможно, самый длительный жизненный цикл из всех функций приложения. Если она грамотно спроектирована (то есть исходя из целей пользователя и задач, с которыми он работает), она будет актуальной всегда. Информативные инструменты навигации и ориентирования помогают новому пользователю быстро освоиться, восстановить состояние после ошибочных действий и работать над задачами, не чувствуя ограничений. Подход к проектированию и навигационные паттерны, описанные в этой главе, помогут вам создать такой пользовательский интерфейс, перемещаться по которому настолько удобно и быстро, что этого почти не замечаешь. ГЛАВА 4 Организация элементов на странице Определенное расположение элементов на странице составляет ее макет. В случае дизайна интерфейса его образуют информационные, функциональные, структурные элементы и элементы оформления страницы. Продуманное размещение этих элементов помогает ориентировать пользователей на странице и сообщать им о степени важности информации и функций. Независимо от того, проектируете ли вы веб-инструмент или мобильное приложение, очень важно продумать схему расположения контента на странице, чтобы пользователь понимал, что ему нужно знать и что с этим делать. Часто, говоря о дизайне страниц, используют эпитет «чистый». Это значит, что он учитывает принципы визуальной иерархии информации, визуального потока, выравнивания по сетке и основан на гештальт-подходе. В этой главе мы определим те принципы, с помощью которых вы сообщаете пользователям, что им нужно знать и что им нужно делать. Основные принципы построения макета В этом разделе обсуждаются несколько основных принципов организации элементов на странице: визуальная иерархия, визуальный поток и динамическое отображение. Визуальная иерархия Концепция визуальной иерархии очень важна в дизайне. Ее суть в следующем: самое важное должно выделяться, а наименее важное выделять не нужно. Читатель должен схватывать информационную структуру, видя организацию страницы. 228 Глава 4. Организация элементов на странице Хорошая визуальная иерархия моментально сообщает пользователю: о важности элементов страницы; о взаимоотношениях между элементами; о том, что ему делать дальше. Визуальная иерархия в действии Взгляните на пример на рис. 4.1. Можете ли вы сразу определить наиболее важную информацию в примере А? А в примере Б? Большинство людей скажет, что пример Б проще для понимания, даже при том, что в нем одни прямоугольники и квадраты. Это связано с тем, что расположение элементов, их относительный размер и пропорции соответствуют их важности и подсказывают, на что следует обратить внимание. Рис. 4.1. А) Пример отсутствия визуальной иерархии и Б) пример визуальной иерархии Как сделать так, чтобы элемент выглядел важным? Размер Размер заголовков и подзаголовков дает читателю представление о порядке и важности. Заголовки могут выглядеть крупнее и ярче благодаря контрастному размеру, толщине или цвету. Маленькие полоски текста внизу экрана тихо шепчут: «Я всего лишь подвал!» и так и просят не обращать на них внимания (рис. 4.2). Положение Просто взглянув на размер, положение и цвета на макете на рис. 4.3, вы угадаете самые важные элементы в каждом из четырех примеров. Основные принципы построения макета 229 Рис. 4.2. Пример эффекта, создаваемого размером шрифта Рис. 4.3. Определение важности по положению, размеру или цвету 230 Глава 4. Организация элементов на странице Плотность Плотность определяется объемом пустого пространства между элементами экрана. Взгляните на пример на рис. 4.4. Слева показан макет, где блоки контента расположены плотнее. Пример справа имеет более открытый вид с равномерно распределенным контентом. В таком дизайне текст также будет немного сложнее читать и понимать, какие элементы страницы связаны друг с другом. Рис. 4.4. Пример большей и меньшей плотности расположения элементов Цвет фона Добавление тени или цвета фона привлечет внимание к блоку текста и выделит его. В примере слева на рис. 4.5 все элементы расположены на одном фоне. Это подразумевает, что между ними нет различий и они одинаково важны. Для сравнения: в примере справа фон и контрастные элементы в центре сразу выделяют элемент, подразумевая его большую важность. Контраст привлекает внимание. Рис. 4.5. Пример с отсутствием фона и выделяющимся фоном Основные принципы построения макета 231 Ритм Списки, сетки, чередующиеся элементы, такие как заголовки и сводки, а также пустое пространство создают сильный визуальный ритм, притягивающий взгляд, — см. пример на рис. 4.6. Рис. 4.6. Списки и сетки для создания визуального ритма Выделение мелких элементов Помещайте небольшие, но важные элементы вверху страницы, вдоль левого края либо в правом верхнем углу. Делайте их контрастными, изменяйте толщину шрифта и выделяйте пустым пространством. Однако обратите внимание, что на страницах, где много текста, например на большинстве сайтов, определенные элементы управления, в частности поля поиска, поля для входа в систему и большие кнопки, выделяются в любом случае. Это относится не столько к визуальным характеристикам, сколько к значению: если пользователю нужно поле поиска, то его взгляд сразу же зацепится за него (даже если он не привык читать ярлыки для таких полей). Другой способ подчеркнуть мелкие детали — использовать пустое пространство и контраст, чтобы разделять их, как показано на рис. 4.7. Рис. 4.7. Приемы привлечения внимания к мелким элементам 232 Глава 4. Организация элементов на странице Выравнивание и сетка В цифровом дизайне удобочитаемость имеет огромное значение. Очень важно направить читателя к необходимой ему информации и действию. Создание дизайна по принципу сетки (рис. 4.8) позволяет дизайнеру выделить контент благодаря визуальной однородности и сбалансированности макета (рис. 4.9). Сетки также помогают команде дизайнеров работать над отдельными, но взаимосвязанными макетами. Рис. 4.8. Макет без сетки (слева) и макет, выполненный по принципу сетки (справа) Рис. 4.9. Сетки, наложенные на примеры на рис. 4.8 Сетки встречаются во всех вариантах цифрового дизайна, и это основополагающий элемент отзывчивого дизайна, включающего динамичный контент, о котором мы поговорим позже. Сетки состоят из отступов от края макета и расстояний между колонками (рис. 4.10 и 4.11). Основные принципы построения макета 233 Рис. 4.10. Вертикальная сетка с отступами от края макета (желтый) и межколоночными отступами (синий) Рис. 4.11. Горизонтальная сетка с отступами от края макета (желтый) и межколоночными отступами (синий) Сетки позволяют визуально упорядочить композицию и снижают когнитивную нагрузку пользователя. Четыре важных принципа гештальта «Гештальт» — это термин, который берет свое начало в научной психологии 1920-х годов. Гештальт в переводе с немецкого означает «образ». В дизайне мы часто ссылаемся на гештальт-принципы, которые относятся к набору правил, описывающих то, как люди воспринимают визуальные объекты. Теория группирования и выравнивания была разработана в начале ХХ века гештальтпсихологами. Они описали несколько особенностей визуального человеческого восприятия. Мы рассмотрим каждый из них подробнее. 234 Глава 4. Организация элементов на странице Близость Когда вы располагаете вещи рядом одна с другой, зрители ассоции- руют их друг с другом. На этом основывается группировка контента и элементов управления в пользовательском интерфейсе. Сгруппированные предметы связаны, разрозненные — нет. Рис. 4.12. Гештальт-принцип близости Подобие Предметы, похожие по форме, размеру или цвету, воспринимаются как связанные друг с другом. Если у вас есть несколько похожих вещей и вы хотите, чтобы зрители воспринимали их как одинаково интересные варианты, оформите их в одном (отличительном) графическом стиле. Список из множества похожих элементов, расположенных в строке или столбце, становится набором однородных элементов, просматриваемых в определенном порядке. Тщательно выровняйте эти элементы, чтобы создать визуальную линию. Примеры включают маркированные списки, навигационные меню, текстовые поля в форме, таблицы с полосами строк и списки с парами «заголовок — аннотация». Один или несколько элементов этого списка нужно выделить из остальных? Оформите его несколько иначе, например используйте контрастный фон, но сохраняйте соответствие общему стилю (см. пример справа на рис. 4.13). Или используйте графический элемент, чтобы нарушить линию, по которой выровнены элементы, например растягивание, наложение или расположение под углом. Непрерывность Наши глаза естественно следуют за прямыми и кривыми линиями, образованными расположением других элементов, как показано на рис. 4.14. Смыкание Мозг естественным образом «смыкает» линии, создавая простые замкнутые формы, такие как прямоугольники и окружности, даже если они формально не нарисованы. В примерах на рис. 4.15 вы, скорее всего, увидите (по часовой стрелке от верхнего левого угла) прямоугольник, круг и два треугольника. Ни одна из этих форм на самом деле не представлена на изображении, но мысленно вы завершаете линию. Основные принципы построения макета 235 Рис. 4.13. Группировка связанных однородных элементов (слева) и выделение двух элементов среди однородных (справа) Рис. 4.14. Два примера визуальной непрерывности Рис. 4.15. Пример непрерывности 236 Глава 4. Организация элементов на странице Эти принципы лучше всего комбинировать. Непрерывность и смыкание объясняют выравнивание. Когда вы выравниваете вещи, вы формируете непрерывную линию вдоль их краев, и пользователи будут следовать этой линии и предполагать связность элементов. Если выровненных элементов достаточно, чтобы сформировать фигуру — ее границами также может служить пустое пространство или пространство, заполненное элементами другого рода, — смыкание также работает. Визуальный поток Визуальный поток определяет путь, по которому обычно следует взгляд читателей при просмотре страницы. Конечно же, он тесно связан с визуальной иерархией — хорошо продуманная визуальная иерархия определяет точки фокусировки, где необходимо привлечь внимание к наиболее важным элементам, а визуальный поток переводит взгляд читателей с этих точек на менее важную информацию. Будучи дизайнером, вы должны уметь контролировать визуальный поток на странице, чтобы пользователи следовали по правильному пути в правильной последовательности. Когда вы пытаетесь определить визуальный поток, несколько факторов могут работать друг против друга. Один из них — стремление человека читать сверху вниз и слева направо. Так мы обычно читаем сплошной текст, но любые точки фокусировки на странице могут сбить нас с обычной последовательности, и это может быть и хорошо, и плохо. Точки фокусировки — это точки, на которых взгляд человека останавливается независимо от его желания. Обычно взгляд следует от самой сильной до самой слабой точки фокусировки. На грамотно организованной странице их всего несколько; когда точек фокусировки слишком много, они ослабляют значимость друг друга. В хорошей визуальной иерархии точки фокусировки используются, чтобы взгляд читателя останавливался в нужных местах в правильном порядке. В следующий раз, когда вы возьмете в руки журнал, обратите внимание на рекламные объявления и на их элементы, привлекающие ваш взгляд. Лучшие специалисты в сфере дизайна рекламы мастерски располагают точки фокусировки в нужных местах и тем самым управляют вашим вниманием. Так как же создать хороший визуальный поток? Один из самых простых способов — использовать для соединения элементов на странице воображаемые линии, прямые или изогнутые. Это определит визуальную последовательность, по которой с легкостью будет следовать зритель. В примере на рис. 4.16 дизайнер, создавший эту старую домашнюю страницу Uber, использовал несколько техник, чтобы направлять взгляд пользователя: синие кнопки призыва к действию; сетку, чтобы внести гармонию в композицию, крупный размер заголовка по сравнению с подзаголовком. Обратите особое внимание на пристальный взгляд молодой женщины на фотографии. Он направлен на заголовок, и здесь используется воображаемая линия, чтобы зритель подсознательно обвел взглядом макет и увидел самые важные элементы страницы. Основные принципы построения макета 237 Рис. 4.16. Визуальная иерархия на старой версии домашней страницы Uber В примерах, приведенных на рис. 4.17, ваш взгляд будет естественно следовать за линиями. Нетрудно создать макет, в котором взгляд следует за потоком, но избегайте такой организации, при которой поток нарушается. Если вы хотите, чтобы пользователи прочитали историю на сайте и ознакомились с ценами, расположите основной контент вдоль непрерывной линии и не прерывайте его дополнительными деталями, отвлекающими внимание. Рис. 4.17. Воображаемые линии для визуального потока Если вы разрабатываете форму или набор интерактивных инструментов, не располагайте элементы управления по всей странице — это заставляет пользователя напрягаться, чтобы найти их. Посмотрите на примере рис. 4.18, где находится кнопка призыва к действию; ее легко найти, потому что дизайнер поместил ее 238 Глава 4. Организация элементов на странице после текста, который пользователь прочитает первым. Если вам все равно, будут ли читать этот текст, отделите призыв к действию пустым пространством. Рис. 4.18. Призывы к действию На рис. 4.19 показан плохой пример визуального потока и визуальной иерархии. Сколько на этой странице точек фокусировки и как они конкурируют друг с другом? Куда вы посмотрите в первую очередь и почему? На что обращать внимание на этой странице? Рис. 4.19. Беспорядочная визуальная иерархия Weather Underground Основные принципы построения макета 239 Использование динамического отображения Пока все, что мы обсуждали, в равной степени относилось к пользовательским интерфейсам, веб-сайтам, плакатам, билбордам и журнальным страницам. Для них важна статическая компоновка элементов страницы. Но вы же работаете с динамикой компьютера — и внезапно время становится еще одним измерением! Важно, что компьютеры позволяют пользователям взаимодействовать со страницей на таком уровне, который невозможен для большинства печатных материалов. Используйте все преимущества динамической природы электронных дисплеев. Например, организация пространства: даже на самых больших компьютерных экранах гораздо меньше места, чем, например, на плакате или газетной странице. Если же вы работаете с мобильными устройствами, то вам для воплощения дизайна отводится совсем крохотное пространство. Можно по-разному организовать его, чтобы показать больше контента, чем может поместиться на одном экране. Полосы прокрутки Полосы прокрутки позволяют пользователю произвольно перемещаться в одном или двух направлениях (но не используйте горизонтальную прокрутку для текстов!). Полосы прокрутки часто служат своеобразными «иллюминаторами», открывающими вид на крупный элемент, например объемный текст, изображение или таблицу. Если хотите, разделите контент на несколько блоков: паттерны Module Tabs (Автономные вкладки), Collapsible Panels (Свертываемые панели), Accordion (Аккордеон) и Movable Panels (Перемещаемые панели) наделяют пользователя некоторыми правами управления организацией страницы, в отличие от более статичного Titled Sections (Именованные разделы). Следующие техники используют организацию во времени, позволяя пользователю видеть разный контент в разное время. Отзывчивое включение Чтобы пользователь успешно заполнил форму или завершил процесс либо чтобы не ошибиться в модели мышления пользователя, можно активировать определенные функции в пользовательском интерфейсе только тогда, когда пользователь выполняет определенное действие. В примере на рис. 4.20 представлен типичный пример отключения системных настроек MacOS на основе двоичного выбора. 240 Глава 4. Организация элементов на странице Рис. 4.20. Системные настройки MacOS Прогрессивное раскрытие В некоторых контекстах информация отображается только после того, как пользователь выполняет определенное действие. Moo.com, интернет-магазин визитных карточек и печатной продукции (рис. 4.21), использует эту технику в своем потоке «создание пользовательского продукта». На макете клиенту не доступны изменяемые параметры, пока он не нажмет на редактируемые области карточки. Рис. 4.21. Пример прогрессивного раскрытия информации в Moo.com Области пользовательского интерфейса Независимо от того, разрабатываете ли вы макеты страниц для веб-, десктопных или мобильных приложений, ваш интерфейс обычно будет включать одну или несколько из следующих областей (см. также рис. 4.22): Основные принципы построения макета 241 Шапка окна. Это самая верхняя область в любом макете, она используется для брендинга и размещения элементов глобальной навигации в мобильном и веб-дизайне, а в десктопных версиях там обычно находится панель инструментов и навигации. Шапка, как правило, неизменяемый элемент макета, поэтому всегда тщательно подбирайте ее содержимое. Меню и навигация. Обычно располагается в верхней или левой части экрана либо организована в виде панелей (см. ниже). Область основного контента. Основная часть пространства страницы. Именно здесь расположены информационное наполнение, формы, области задач и элементы брендинга как отправные точки взаимодействия. Футер, или подвал. Здесь размещаются дублирующие или вторичные элементы глобальной навигации, а также полезная информация, например контактная. Панели. Панели могут располагаться сверху, сбоку или снизу. Они могут быть постоянными или сворачиваемыми в зависимости от своего назначения. Рис. 4.22. Области пользовательского интерфейса в веб- и десктопных приложениях 242 Глава 4. Организация элементов на странице Паттерны Паттерны из этой главы описывают конкретные способы реализации перечисленных концепций. Первые три паттерна служат для оформления общей визуальной иерархии страницы, экрана или окна, независимо от типа размещаемого контента. Определить визуальную схему стоит в самом начале работы над проектом, так как от нее зависит, как будут выглядеть все основные страницы и окна интерфейса. Виды макетов Следующие паттерны чаще всего используются для десктопных и веб-приложений. Если вам в первую очередь важно показать результаты поиска, Grid of Equals (Выравнивание по сетке) — хороший выбор. Однако если ваше приложение предназначено для выполнения задач или создания объектов, Center Stage (Центральная сцена) подойдет больше. Что бы вы ни выбрали, убедитесь, что этот выбор соответствует контенту, который необходим пользователю для достижения цели. Visual Framework (Визуальная структура). Center Stage (Центральная сцена). Grid of Equals (Выравнивание по сетке). Рис. 4.23. Визуальная структура (вверху слева), Центральная сцена с панелью (вверху справа), Выравнивание по сетке (внизу слева) Паттерны 243 Деление информации на фрагменты Следующая группа паттернов представляет способы разбиения содержимого страницы или окна на части. Их полезно применять, когда необходимо отобразить больше информации, чем может поместиться на одной странице. Эти паттерны относятся и к разработке визуальной иерархии, но они подразумевают также использование интерактивных элементов и специфических механизмов, предоставляемых средствами разработки пользовательских интерфейсов. Titled Sections (Именованные разделы). Module Tabs (Автономные вкладки). Accordion (Аккордеон). Collapsible Panels (Сворачиваемые панели). Movable Panels (Перемещаемые панели). Visual Framework (Визуальная структура) Что это Все страницы сайта или приложения создаются по одинаковым шаблонам в едином стиле. На каждой странице используется одинаковый базовый макет, ширина шапки, полей и межколоночный интервал, набор цветов и стилистических компонентов, но дизайн достаточно гибкий, чтобы варьировать содержимое страниц. Когда использовать Если вы создаете веб-сайт с множеством страниц или пользовательский интерфейс с множеством окон — другими словами, практически любой сложный программный инструмент. Интерфейс должен быть связным, представлять собой единую структуру с продуманным дизайном. Его должно быть легко использовать и по нему должно быть легко перемещаться. Зачем Когда в пользовательском интерфейсе используется один цвет, шрифт и макет страниц, когда заголовки и средства навигации — указатели — все время остаются на привычных местах, пользователи всегда знают, где они находятся и где искать то, что им нужно. Им не приходится изучать новую схему расположения элементов при каждом изменении контекста — переходе от одной страницы к другой. Вы когда-нибудь читали книгу, в которой номера страниц и заголовки на каждой странице находились бы в разных местах? Определенная визуальная схема, повторяющаяся на каждой странице, помогает контенту выделиться на ее фоне. То, что неизменно, уходит в сознании поль- 244 Глава 4. Организация элементов на странице зователя на задний план, а то, что меняется, попадает в центр внимания. Кроме того, если добавить в дизайн особые визуальные элементы, приложение станет более узнаваемым. Как Разработайте общие элементы для каждой страницы или окна. Главные страницы и главные окна обычно «особенные» в том смысле, что расположение элементов на них может немного отличаться от страниц второго уровня, но они, тем не менее, тоже должны содержать общие элементы, связывающие их с остальной частью интерфейса. Например: Цвет — фоновые цвета, цвета текста и цветовые акценты. Шрифты — для заголовков, подзаголовков, основного текста, сносок и второстепенного текста. Стиль написания и грамматика — заголовки, имена, содержимое, краткие описания и длинные блоки текста и все остальные случаи использования языка. На всех прочих страницах визуальная схема, подобно примеру JetBlue ниже, также по возможности должна включать общие элементы: указатели «Вы находитесь здесь»: заголовки, логотипы, навигация в виде хлебных крошек, глобальная навигация с указателями текущей страницы и автономные вкладки; средства навигации, включая глобальную и служебную навигацию, кнопки «OK/Отмена», кнопки возврата и выхода, а также навигационные паттерны, такие как Progress Indicator (Индикатор выполнения) и Breadcrumbs (Хлебные крошки) (они описаны в главе 3); техники, применяемые для определения именованных разделов (паттерн Titled Sections (Именованные разделы)); пробелы и выравнивание элементов: поля страниц, междустрочный интервал, расстояние между ярлыками и связанными с ними элементами управления, а также выравнивание текста и ярлыков; общая организационная схема; расположение элементов на странице, в столбцах и строках с учетом размера полей страниц и расстояний между элементами. Реализация визуальной схемы поможет отделить стилистические аспекты пользовательского интерфейса от контента. Это очень полезно. Если определить схему только в одном месте, например в таблице стилей CSS, классе Java или библиотеке стилей, то ее можно будет менять независимо от контента, то есть при необходимости вам будет проще поправить что-то в дизайне (этот принцип применим и в разработке ПО). Паттерны 245 Рис. 4.24. Пример визуальной схемы мобильной версии сайта компании JetBlue Примеры Визуальная схема веб-сайта JetBlue включает в себя ограниченную палитру, строгую шапку и единообразие шрифтов и сглаженных прямоугольников (рис. 4.25). Эти элементы используются даже на странице входа в систему и в модальных диалоговых окнах; они смотрятся органично. Обратите внимание на стилевое сходство мобильной версии. Рис. 4.25. Домашняя страница JetBlue 246 Глава 4. Организация элементов на странице Похожим образом сайт TED использует ограниченную цветовую схему и сетку, чтобы сохранить единообразие (рис. 4.26). Рис. 4.26. Домашняя страница TED Center Stage (Центральная сцена) Что это Все, что относится к выполнению задачи, обычно располагается в центре большинства пользовательских интерфейсов. В этом типе организации самое важное размещается в самом крупном разделе страницы или окна, а дополнительный контент и вспомогательные инструменты располагаются на небольших панелях. Когда использовать Если страница служит для представления одного единого блока контента, редактирования документа или выполнения определенной задачи. Прочий контент и функции считаются вторичными. «Центральную сцену» можно использовать в большинстве приложений — сюда входят текстовые редакторы и электронные таблицы, формы и графические редакторы, а также веб-страницы с одной главной статьей, изображением или функцией. Зачем Чтобы пользователь сразу же увидел самую важную информацию (или задачу), а не бродил в растерянности по странице. Четкий центральный элемент привлекает внимание. Так же как первая строка в новостной статье определяет ее суть Паттерны 247 и назначение, элемент, находящийся в центре внимания, определяет назначение пользовательского интерфейса. После этого пользователь может оценить, как периферийные элементы соотносятся с центральным. Это проще, чем разглядывать страницу, пытаясь выяснить, что же здесь главное. А что должно быть на втором месте? Как они связаны? И так далее. Как Создайте визуальную иерархию, в которой основной контент или документ будет доминировать над остальным. (Визуальную иерархию мы рассматривали во введении к этой главе.) При разработке интерфейса на основе паттерна Center Stage (Центральная сцена) учитывайте следующие факторы (хотя ни один из них не является обязательным). Размер. Содержимое «центральной сцены» должно быть как минимум в два раза шире содержимого в левом и правом полях, и в два раза выше содержимого верхнего и нижнего полей. (Пользователь может менять размер, но при первом открытии интерфейс должен выглядеть именно так.) Не забывайте о размере экрана: если у пользователя маленький монитор, то на каком уровне следует обрезать контент снизу? Убедитесь, что в любом случае центральная сцена будет занимать большую часть экрана. Заголовки. Крупные заголовки являются точками фокусировки и могут привлекать внимание пользователя к верхней части «центральной сцены». Конечно же, этот принцип работает и в печатных медиа. Подробнее о заголовках и точках фокусировки рассказывается во введении к этой главе и в описании паттерна Titled Sections (Именованные разделы). Контекст. Что пользователь ожидает увидеть, когда открывает страницу: графический редактор, длинную текстовую статью, карту или дерево файловой системы? Обратите внимание, что мы не упомянули один стандартный параметр макета страницы — расположение. В действительности не так важно, где будет находиться центральная сцена: вверху, слева, справа, внизу или по центру, любой вариант может быть хорош. Если она достаточно большая, она всегда будет находиться примерно по центру. Помните, что на удачно спроектированных типовых страницах элементы по традиции находятся в определенных местах: например, в графических редакторах панели инструментов расположены вверху, а панели навигации — с левого края страницы. Примеры В текстовом редакторе Google Docs (рис. 4.27) документ занимает почти все пространство; так же организован и редактор электронных таблиц. Даже инструменты вверху страницы не занимают слишком много места. В результате получается чистый и сбалансированный дизайн. 248 Глава 4. Организация элементов на странице Рис. 4.27. Страница Google Docs Десктопное приложение Sketch (рис. 4.28) спроектировано с использованием паттерна Центральная сцена. При открытии нового чистого документа или шаблона пользователь видит холст, на котором он может сосредоточиться для создания контента, не отвлекаясь на другие функции. Рис. 4.28. Bohemian Sketch Паттерны 249 Поскольку большинство продуктов в Google Suite ориентированы на задачи, центральная сцена — это общая структура большинства из них (рис. 4.29), например Google Earth, Google Slides, Google Hangout и Google Sheets. Рис. 4.29. Google Maps Чтобы узнать больше о дизайне Google, перейдите по ссылке https://material.io/ design. Grid of Equals (Выравнивание по сетке) Что это Расположение элементов контента, например результатов поиска, в ячейках сетки или матрицы. Все элементы должны соответствовать одному образцу и иметь одинаковый размер шрифта. При необходимости к каждому элементу может быть добавлена ссылка на его страницу. Когда использовать Если на странице находится множество элементов одного стиля и значимости, таких как новостные статьи, публикации в блоге, продукты или тематические разделы. Вы хотите, чтобы пользователь мог просматривать эти элементы и выбирать их. Зачем Сетка, в которой элементы размещаются равномерно, подчеркивает одинаковую важность этих элементов. Если элементы созданы на базе одного паттерна, 250 Глава 4. Организация элементов на странице то пользователь понимает, что они похожи. Это способ задать эффективную визуальную иерархию, которая будет соответствовать назначению контента приложения. Как Подумайте, как должны выглядеть отдельные элементы сетки. Нужны ли для них эскизы иконок или графические символы? А как насчет заголовков, подзаголовков, аннотаций? Попробуйте разместить всю необходимую информацию на ограниченном пространстве — в высоту, в ширину или в квадратном поле — и примените этот шаблон ко всем элементам сетки, которые нужно показать. Расположите элементы в сетке или матрице. Каждый элемент должен соответствовать общему шаблону, и все элементы должны быть похожи друг на друга. Теперь организуйте элементы в сетке. Можно ограничиться одной строкой или создать матрицу шириной в два, три или более элементов. При разработке дизайна учитывайте ширину экрана — как страница будет выглядеть в узком окне? Где будет работать большинство пользователей — в большом окне браузера или на экране мобильного устройства (рис. 4.30)? Рис. 4.30. Пример отзывчивого дизайна: десктопная версия (слева), мобильная версия (в центре), версия для планшета (справа) Элементы сетки можно подсвечивать — либо статически (для выделения одного элемента на фоне остальных), либо динамически, при наведении указателя мыши. Меняйте цвета и стили, но не позицию, размер или структурные элементы сетки. Примеры В примере Hulu (рис. 4.31) размер и относительная важность каждого элемента в сетке одинаковы и взаимодействуют друг с другом. Паттерны 251 Рис. 4.31. Сетка Hulu На страницах CNN (рис. 4.32) и Apple TV (рис. 4.33) единообразное визуальное оформление элементов подчеркивает их равнозначность. Преимущество использования сеток для отображения списков элементов заключается в том, что пользователю нужно будет взаимодействовать только с одним элементом сетки, чтобы понять, как ведут себя все остальные. Рис. 4.32. Сетка телеканала CNN 252 Глава 4. Организация элементов на странице Рис. 4.33. Сетка Apple TV Titled Sections (Именованные разделы) Что это Такой способ организации страницы, при котором контент разбит на упорядоченные разделы, при этом у каждого раздела имеется заметный заголовок, который служит для визуального выделения раздела среди остальных. Когда использовать Если на странице очень много контента, но вы хотите сделать его полностью видимым и удобным для просмотра и восприятия. Контент можно упорядочить по темам или по задачам, для решения которых он предназначен. Зачем Если разделить контент на организованные части с подходящими заголовками, его будет легче воспринимать. Информационная архитектура становится простой и понятной. Пользователю гораздо удобнее просматривать страницу, содержащую в себе разделы. Как Сначала хорошо продумайте информационную архитектуру — разделите контент на упорядоченные фрагменты (если вы этого еще не сделали) и придумайте для них краткие и хорошо запоминающиеся заголовки (рис. 4.34): Паттерны 253 для заголовков используйте выделяющийся шрифт — более жирный, широкий, большего размера, более насыщенного цвета, из другого семейства шрифтов, со смещением и т. д. Подробнее о визуальной иерархии говорится во вступлении к этой главе; попробуйте поместить заголовок на полосу контрастного цвета; используйте пустые пространства для отделения разделов друг от друга; помещайте разделы на подложки контрастных цветов; рамки из утопленных, скошенных или выпуклых линий знакомы вам по многим десктопным пользовательским интерфейсам. Но они могут превратиться в простой визуальный шум, если будут слишком большими, окажутся слишком близко друг к другу или будут вложены одна в другую. Рис. 4.34. Примеры именованных разделов Если на странице остается все еще слишком много информации, попробуйте применить паттерн Module Tabs (Автономные вкладки), Accordion (Аккордеон) или Collapsible Panels (Свертываемые панели). Если придумать хорошие заголовки для частей сложно, это может значить, что выбранная группировка не подходит для данного контента. Попробуйте переупорядочить контент в такие группы, которые проще назвать и запомнить. Наличие категории «Разное» также говорит о неидеальной организации, хотя иногда такая категория действительно нужна. Примеры На странице настроек учетной записи в системе Amazon (рис. 4.35) используются три уровня заголовков, соответствующие трем уровням визуальной иерархии: заголовок страницы, заголовки разделов и подзаголовки наверху списков ссылок. Обратите внимание на использование пустого пространства, рамок и выравнивания для структуризации страницы. На странице настроек Google также есть именованные разделы (рис. 4.36). Некоторые из них содержат функциональные возможности, другие — глубокие ссылки на другие страницы настроек. Рис. 4.35. Страница настроек учетной записи Amazon Рис. 4.36. Страница настроек учетной записи Google Паттерны 255 Module Tabs (Автономные вкладки) Что это Модули контента, помещенные в небольшую область, разбитую на вкладки. Одновременно пользователь видит только одну вкладку, и ему нужно щелкать на разных вкладках, чтобы просмотреть их содержимое. Рис. 4.37. Пример использования паттерна Module Tabs (Автономные вкладки) Когда использовать Если на странице много разнообразного контента — такого, как текстовые блоки, списки, кнопки, элементы управления формами и изображения, — и у вас нет достаточно места, чтобы показать сразу все. Такой контент можно объединить в группы или модули (или упорядочить по разделам). Вот свойства таких модулей: пользователь должен видеть только один модуль за раз; они должны быть одинаковыми по высоте и длине; их должно быть немного — меньше десяти и вообще как можно меньше; статичность: в этом паттерне не предполагается часто добавлять новые страницы или редактировать или удалять существующие; содержимое разных модулей может быть связанным или похожим. Зачем Деление контента на фрагменты и поочередное скрытие этих фрагментов может быть очень эффективным способом организации страницы. Вкладки хорошо служат этой цели, так же как «аккордеоны», перемещаемые и свертываемые панели и простая сетка именованных разделов. Как Начните с создания хорошей информационной архитектуры. Разбейте содержимое на взаимосвязанные части (если вы этого еще не сделали) и придумайте для них короткие запоминающиеся заголовки. Помните, что если разделить контент неправильно, то пользователям постоянно придется переключаться между 256 Глава 4. Организация элементов на странице вкладками во время поиска информации или сравнения элементов. Уважайте пользователей и обязательно протестируйте выбранный способ организации информации. Четко помечайте активную вкладку — например, выделяя ее границы на общей панели. (Только цвета не всегда достаточно. Если у вас всего две вкладки, убедитесь, что активную и скрытую вкладки перепутать невозможно.) Вкладки не обязательно должны находиться вверху набора модулей. Их можно разместить в столбце в левой части экрана, или внизу, или даже повернуть на 90 градусов вместе с текстом. На веб-страницах нужно отличать автономные вкладки от навигационных (которые используются для глобальной навигации, разделения документов или загрузки новых страниц). Автономные вкладки полезны и для навигации, но данный паттерн предназначен прежде всего, чтобы упростить просмотр нескольких фрагментов или модулей контента на одной странице. Если вкладок слишком много и они не помещаются в узком пространстве, можно сократить ярлыки, добавив многоточия (это сузит вкладки), или использовать кнопки типа «карусель» со стрелками, чтобы переходить по вкладкам. Ярлыки для вкладок можно поместить слева, а не сверху. Но никогда не выстраивайте вкладки в два ряда. Примеры В поисковике авиабилетов Expedia (рис. 4.38) на вкладках находятся разные типы поисковых запросов. Это позволяет Expedia представить доступные варианты наглядно, не жертвуя ценным пространством экрана. Рис. 4.38. Поиск на сайте Expedia Паттерны 257 На странице системных настроек macOS (рис. 4.39) также используются автономные вкладки, чтобы помещать определенный функционал именно в то место, где пользователь будет его искать. Сверху расположены вкладки «Аккумулятор» и «Адаптер питания». Рис. 4.39. Системные настройки macOS Accordion (Аккордеон) Что это Модули контента, размещенные на панелях одинаковой ширины, которые можно разворачивать и сворачивать независимо друг от друга (рис. 4.40). Рис. 4.40. Примеры «аккордеонов» 258 Глава 4. Организация элементов на странице Когда использовать Если на странице много разнообразного контента — такого как текстовые блоки, списки, кнопки, элементы управления формами и изображения, — и у вас нет достаточно места, чтобы показать сразу все. Такой контент можно объединить в группы или модули (или упорядочить по разделам). Свойства таких модулей: пользователь должен иметь возможность одновременно видеть содержимое разных модулей; некоторые модули могут быть длиннее или короче, но все они должны быть одинаковыми по ширине; модули должны составлять палитру инструментов, двухуровневое меню или другую упорядоченную систему интерактивных элементов; содержимое модулей может быть похожим или связанным по другим признакам; необходимо сохранять линейный порядок модулей. Обратите внимание, что ярлыки нижних модулей «аккордеона» могут выйти за границы экрана, если пользователь откроет большой модуль или несколько модулей одновременно. Если это создаст неудобство для пользователей, подберите другое решение. Зачем «Аккордеоны» стали привычным элементом интерфейса веб-страниц — почти таким же знакомым для каждого пользователя, как вкладки и раскрывающиеся меню (хотя принцип их работы и не столь очевиден). На многих сайтах «аккордеоны» помогают упорядочивать очень длинные списки страниц и категорий в меню. В целом, чтобы не захламлять интерфейс, содержимое полезно группировать и частично убирать с экрана по умолчанию. «Аккордеон» относится к той же категории инструментов, что и автономные вкладки, перемещаемые и свертываемые панели и именованные разделы. Все они выполняют одну задачу. «Аккордеоны» бывают полезны при проектировании навигационных систем веб-страниц, но по-настоящему они проявляют себя в десктопных приложениях, особенно если на них размещать панели инструментов (в этом они схожи с перемещаемыми панелями). Благодаря тому что любой набор модулей можно открыть и оставить открытым, «аккордеон» помогает настраивать удобное «жизненное пространство» пользователя. И разумеется, в таком интерфейсе совсем несложно открыть редко используемый модуль, если он понадобился. Паттерны 259 Как Задайте заголовок для каждого раздела. Он должен быть кратким, но достаточно информативным, чтобы пользователь легко понял, какой контент под ним находится. Создайте визуальный аффорданс (подсказку о том, как использовать объект), например значок стрелки или треугольника сигнализирует о том, что, щелкнув на нем, можно вывести дополнительную информацию. Предусмотрите возможность открывать сразу несколько модулей. На этот счет существуют разные мнения: некоторые дизайнеры предпочитают, чтобы открываться мог только один модуль за раз, поэтому иногда реализации имеют такое ограничение (или по крайней мере переключатель, который можно установить в соответствующее значение). Но по моему опыту, в приложениях лучше иметь возможность открывать сразу несколько модулей. Это позволит избежать неожиданного исчезновения ранее открытого модуля и даст возможность пользователям сравнивать информацию из разных модулей без необходимости постоянно закрывать и открывать их. Если «аккордеон» используется в приложении или на веб-сайте, куда пользователь входит со своими учетными данными, он должен сохранять состояние открытых и закрытых модулей между сеансами. Это одинаково важно для навигационных меню и панелей инструментов. Примеры Раздел «Часто задаваемые вопросы» на страницах справки сайта Samsung организован в виде «аккордеона»: в нем показаны вопросы, а ответы выводятся на экран при нажатии на стрелку расширения (рис. 4.41). Это позволяет пользователю быстро просмотреть страницу, найти нужную информацию и перейти к другой теме, если необходимо. На странице настроек Google Chrome в раскрывающихся «аккордеонах» содержатся подробные параметры настроек (рис. 4.42). Это позволяет пользователю увидеть все варианты и разобраться в том, куда нажимать. 260 Глава 4. Организация элементов на странице Рис. 4.41. Страница помощи на сайте Samsung Рис. 4.42. Настройки Google Chrome Паттерны 261 Collapsible Panels (Сворачиваемые панели) Что это Панели, на которых размещен вспомогательный или дополнительный контент. Пользователь может сворачивать и разворачивать их. Когда использовать Если на странице много разнообразного контента — такого как текстовые блоки, списки, кнопки, элементы управления формами и изображения. Или когда используется паттерн Center Stage (Центральная сцена), и контент на ней необходимо визуально выделить. Свойства таких панелей: контент в них должен описывать, уточнять, пояснять или любым другим образом дополнять контент основной части страницы; панели должны быть не настолько важны, чтобы открывать их по умолчанию; ценность модулей для разных пользователей может быть разной. Некоторым необходимо всегда видеть определенный модуль, а другим он совершенно не нужен; даже если модуль важен для пользователя, ему не требуется держать его открытым постоянно. Когда модуль закрыт, на его месте отображается основное содержимое страницы; иногда может потребоваться открыть сразу несколько модулей; модули не связаны друг с другом. Автономные вкладки или аккордеон упорядочивают контент и подразумевают, что их содержимое каким-то образом связано. Свертываемые панели не группируют содержимое. Зачем Интерфейс выглядит проще, если второстепенный функционал или контент не находятся на странице постоянно. Когда пользователь скрывает вспомогательный модуль, то освободившееся пространство занимает контент центральной сцены (или оно остается пустым). Это пример использования паттерна Progressive Disclosure (Прогрессивное раскрытие), когда скрытый контент демонстрируется пользователю в необходимом месте и в необходимое время. В целом, чтобы не захламлять интерфейс, содержимое полезно группировать и частично убирать с экрана, когда оно не нужно. Как Поместите каждый вспомогательный модуль на панель, которую пользователь сможет открыть или закрыть одним щелчком. Добавьте на кнопку или ссылку для этого действия ярлык с названием модуля или просто текст «Еще...». Ис- 262 Глава 4. Организация элементов на странице пользуйте по возможности значок меню, двойную угловую скобку или поворачивающийся треугольник, чтобы указать на дополнительное скрытое содержимое. Когда пользователь закрывает панель, освободившееся место должен занимать другой контент. Например, можно переместить вверх информацию, которая находилась под свертываемой панелью. Анимация появления или увода панели помогает пользователю запомнить функционал, а также положение и внешний вид панели, чтобы быстрее найти ее в следующий раз. Если вы поймете, что большинство пользователей открывают свертываемую панель, которая по умолчанию закрыта, измените ее настройки и открывайте ее на странице по умолчанию. Примеры Приложение Apple news (рис. 4.43) использует левую панель для добавления или удаления новостных и тематических каналов, а также навигации по ним. Когда пользователь хочет сосредоточиться только на содержимом, он может коснуться значка панели (слева от «Сегодня» в центральном заголовке), чтобы убрать ее влево. В Google Maps (рис. 4.44) пользователь может продолжать просматривать карту во время поиска маршрутов; когда пункты отправления и назначения выбраны, Рис. 4.43. Сайт Apple news, версия для iPad, с развернутой панелью навигации Паттерны 263 панель сворачивается, чтобы маршрут было удобно просмотреть. Если нужно отредактировать маршрут, изменить или добавить остановку, можно легко развернуть боковую панель. Рис. 4.44. Google Maps, версия для iPad, показывающая левую панель с функцией построения маршрута Movable Panels (Перемещаемые панели) Что это Блоки с контентом, которые можно открывать и закрывать независимо друг от друга. Пользователь может размещать эти блоки как ему удобно. Перемещаемые панели часто встречаются на «центральной сцене» в приложениях для создания объектов, например в Adobe Suite (рис. 4.45), и для работы с данными и взаимодействий, например в Microsoft Excel и Skype. Когда использовать Если вы создаете десктопное приложение или сайт, на котором большинство пользователей входят в систему со своими учетными данными. Перемещаемые панели часто используются на новостных порталах, дашбордах и в приложениях формата «холст и палитра». Экран, который вы проектируете, является основной 264 Глава 4. Организация элементов на странице Рис. 4.45. Перемещаемые панели в Adobe Illustrator частью таких инструментов, а значит, пользователи будут видеть его часто и много. Вам понадобится поместить на него большое количество разнородного контента, такого как текстовые блоки, списки, кнопки, элементы управления формами и изображения. Свойства таких панелей: почти всегда пользователю нужно видеть на экране несколько модулей; для разных пользователей модули имеют разную ценность. Некоторым людям необходимы модули А, Б и В, а другим они совсем не нужны — эти пользователи работают с модулями Г, Д и Е; модули могут иметь разные размеры; вам неважно, как расположены модули на экране, но для пользователей это может иметь большое значение (в противоположность этому организацию страницы со статическими именованными разделами следует выстраивать на основе важности модулей: самые важные разделы помещаются вверху); модулей много, возможно, так много, что если все их показать одновременно, то пользователь растеряется. Либо вы, либо пользователь должны определить, какие модули оставить, а какие скрыть; возможность для пользователей убирать модули по своему выбору (и возвращать их обратно); Паттерны 265 модули могут быть частью панели инструментов или любой другой упорядоченной системы интерактивных элементов. Зачем У всех пользователей разные интересы. На дашбордах и порталах пользователям важно самостоятельно выбирать, какой контент будет отображаться на экране. Когда люди долго над чем-то работают в десктопном приложении, они предпочитают организовать рабочую среду так, чтобы она соответствовала их потребностям. Они могут поместить самые необходимые инструменты ближе к месту работы, скрыть ненужное и использовать пространственную память, чтобы запомнить, где что находится. Говоря рационально, перемещаемые панели помогают пользователям работать более эффективно и комфортно (и долго — после того как они организуют свою рабочую среду). Такой способ персонализации возможен и на других уровнях. Можно, например, задать свои настройки на развлекательном сайте, который вы посещаете не очень часто. Персонализация повышает заинтересованность и вовлеченность пользователей. Наконец, в дизайн на базе перемещаемых панелей очень просто добавлять новые модули, например от сторонних разработчиков. Как Присвойте каждому модулю имя, оформите строку заголовка, задайте размер по умолчанию и упорядочите модули в определенной конфигурации. Предусмотрите для пользователя возможность перемещать модули, как ему нравится, желательно перетаскиванием. Сделайте так, чтобы каждый модуль можно было открыть и закрыть простым движением, например щелчком мыши на кнопке в строке заголовка. В зависимости от выбранного дизайна можно разрешить помещать модули в любое место интерфейса, даже если они будут накладываться друг на друга. Или же можно заранее создать стандартную сетку с «ячейками», куда можно перетаскивать модули, — это позволит поддерживать порядок на странице (и, в некотором роде, чувство собственного достоинства!), не тратя много времени. В некоторых интерфейсах используются «призраки» — крупные динамические объекты, например прямоугольники с пунктирными границами, которые обозначают «место посадки» модуля. Попробуйте реализовать возможность убирать все модули одновременно. Крестик в строке заголовка — удобный и привычный инструмент для удаления одного модуля. Но если модуль убрать, как вернуть его обратно? Предусмотрите возможность добавлять модули — в том числе, возможно, принципиально новые — из списка доступных, который можно загрузить и просмотреть. ГЛАВА 5 Визуальный стиль и эстетика «Никогда не недооценивайте силу красоты». Визуальный дизайн — это больше чем просто «обшивка» пользовательского интерфейса. Качественный визуальный дизайн и правильная подача выделяют цифровой продукт на фоне остальных. Визуальный язык интерфейса выражает позицию и дух бренда и выступает в роли его своеобразного амбассадора в различных точках взаимодействия. Визуальный дизайн способен повысить или же, наоборот, испортить удобство использования продукта и доверие к бренду. В 2002 году группа исследователей сделала интересное открытие. Проект Stanford Web Credibility Project (http://credibility.stanford.edu) поставил перед собой цель — выяснить, какие аспекты вызывают у людей доверие или недоверие к веб-сайтам. Многие параметры оказались вполне предсказуемы: репутация компании, обслуживание клиентов, спонсорство и реклама — все это помогало пользователям решить, заслуживает ли сайт доверия. Однако самым важным фактором — номером один в списке — был визуальный дизайн веб-сайта. Пользователи не доверяли сайтам, которые выглядели дилетантскими. При этом стильные, профессионально оформленные сайты значительно больше располагали к себе пользователей, даже если почти никаких других причин доверять сайту эти пользователи не видели. Этот вывод справедлив и сейчас: привлекательный дизайн важен. Истинная красота — это гармоничный союз внешнего облика и желаемого функционала. В цифровом дизайне недостаточно, чтобы каждый пиксель просто был на своем месте. Он также должен приносить пользу, ясность или добавлять привлекательности, а зачастую и служить всем этим трем целям сразу. В этой главе мы рассмотрим основные элементы визуального дизайна и постараемся ответить на вопрос, что делает визуальный дизайн эстетически привлекательным. Основы визуального дизайна 267 Основы визуального дизайна Вот некоторые аспекты визуального дизайна, которые мы обсудим в этой главе: Визуальная иерархия. Структура. Цвет. Типографика. Удобочитаемость. Эмоциональный отклик. Изображения. Взгляните на четыре примера на рис. 5.1. Они отличаются друг от друга, но содержат в основном одни и те же визуальные элементы. Меняется только цвет и оформление текста, но ощущения эти примеры вызывают абсолютно разные. Например, одна цветовая схема может вызвать у вас улыбку, а другая — неприязнь. Одинаковый контент производит разные впечатления. Визуальная иерархия Визуальная иерархия служит для представления визуальных элементов в том или ином макете. Рассмотрим свойства визуальной иерархии. Ясность Насколько точно дизайн передает информацию, вкладываемую дизайнером. Направленность на действие Как пользователь узнает, какие действия он может совершить на странице. Аффорданс Аффорданс означает, что элементы выглядят или ведут себя в соответствии с ожиданиями. Например, трехмерная кнопка дает визуальный сигнал о том, что на ней можно щелкнуть. Структура Структура влияет на расположение и пропорции визуального дизайна. Последовательность Визуальные элементы должны быть предсказуемы и еди- нообразно оформлены. Если вы используете значки, то каждый из них всегда должен иметь одинаковый функционал. То же самое касается использования языковых средств. 268 Глава 5. Визуальный стиль и эстетика Рис. 5.1. Примеры визуального дизайна Выравнивание Ничто так не раздражает пользователя, как изменение элементов страницы без видимых причин при переходе на другую страницу. Убедитесь, что элементы всегда остаются на своих местах. Если где-то вдруг меняется вырав- Основы визуального дизайна 269 нивание текста (по левому краю, по центру, по правому краю), это тоже мешает пониманию и восприятию дизайна продукта. Цвет Цвет напрямую влияет на восприятие. Это одна из важнейших составляющих дизайна, наряду с базовыми формами и фигурами. И все же использование цвета подразумевает множество нюансов — мастера живописи изучали их веками. Мы можем разобрать здесь только самые основы. При создании цветовой схемы интерфейса первым делом необходимо исключить все цвета, затрудняющие чтение текста: Всегда помещайте темный передний план на светлый фон и наоборот. Для теста попробуйте открыть ваш макет в графическом пакете, например Photoshop, и обесцветить его (сделать в оттенках серого). Когда выделение красным или зеленым цветом указывает на важное различие, не забудьте также изменить форму элемента или добавить текст. Это связано с тем, что многие дальтоники не различают эти цвета. По статистике, 10 % мужчин и около 1 % женщин страдают дальтонизмом в той или иной форме. Избегайте определенных цветовых сочетаний. Например, ярко-синий текст на ярко-красном фоне утомляет глаза. Это связано с тем, что синий и красный — это дополнительные цвета, находящиеся на противоположных сторонах цветового круга (рис. 5.2). Рис. 5.2. Цветовой круг 270 Глава 5. Визуальный стиль и эстетика Чтение черного текста на белом фоне менее утомительно для глаз, однако белый фон, как правило, выглядит довольно ярко, что может добавлять усталости. Поэтому, если вы разрабатываете продукт для планшета и предполагаете наличие пустых пространств вокруг контента или элементов интерфейса, используйте более темный фон, чтобы уменьшить его яркость фона. Исходя из сказанного выше, сформулируем несколько правил использования цвета. Теплые и холодные цвета Красный, оранжевый, желтый, коричневый и бежевый считаются теплыми цветами. Синий, зеленый, фиолетовый, серый (если используется в больших количествах) и белый считаются холодными. См. рис. 5.3. Рис. 5.3. Теплые цвета в сравнении с холодными Темный и светлый фон Страницы со светлым фоном (белым, бежевым и светлосерым) существенно отличаются от страниц с очень темным фоном. Светлый фон в основном используется в компьютерных (и в печатаемых) интерфейсах, страницы же с темным фоном могут казаться более резкими, мрачными либо более энергичными, в зависимости от других аспектов дизайна (рис. 5.4). Основы визуального дизайна 271 Рис. 5.4. Темный фон в сравнении со светлым Высокая и низкая контрастность Независимо от того, темный фон или светлый, элементы на нем могут иметь высокий или низкий контраст. Сильный контраст ассоциируется с напряжением, силой и дерзостью, в то время как низкий контраст успокаивает и расслабляет (рис. 5.5). Рис. 5.5. Контраст 272 Глава 5. Визуальный стиль и эстетика Насыщенные и ненасыщенные цвета Сильно насыщенные, или чистые, цвета — например ярко-желтый, красный и зеленый — символизируют энергию, живость, яркость и тепло. Они отважны, у них есть характер. Но если их чересчур много, они могут утомлять глаза, поэтому в большинстве UI-дизайнов они используются точечно, и это не более одного-двух ярких цветов. Приглушенные цвета, темные или светлые (тона, или оттенки, соответственно), составляют основную часть большинства цветовых палитр. Вам, скорее всего, не понравилось бы весь день смотреть на розовый экран, работая за компьютером. См. рис. 5.6. Рис. 5.6. Насыщенные цвета в сравнении с ненасыщенными Комбинации оттенков При комбинировании оттенков возникают интересные эффекты. Два насыщенных цвета могут дать гораздо больше энергии, движения или разнообразия, чем один. Страница с комбинацией одного насыщенного цвета и набора приглушенных цветов привлекает внимание к насыщенному цвету и создает впечатление многослойной: более яркие и сильные цвета кажутся ближе, тогда как серые и более бледные цвета исчезают. Использование оттенков, заметно отличающихся по насыщенности, делает дизайн экспрессивным. Плоский же дизайн, в котором преобладают более приглушенные или светлые цвета, является спокойным. Не полагайтесь только на цвет Цвет — это здорово, но, когда необходимо выделить важную информацию, нельзя полагаться только на цвет. Хороший пример из реального мира — знак «Стоп» в США (рис. 5.7). Где бы вы ни были, знаки «Стоп» всегда будут выглядеть одинаково. Они красные, на них есть надпись «СТОП» и они имеют отчетливую форму восьмиугольника. Знак передает ин- Основы визуального дизайна 273 формацию о действии, которое необходимо совершить тому, кто его видит, по трем когнитивным каналам. Рис. 5.7. Пример знака «Стоп» в США Этот же принцип действует и в цифровом мире. Помогите пользователям понять информацию, которую вы пытаетесь передать, выделив ее цветом и формой. Справочные материалы и ресурсы по теме «Цвет» https://www.colorbox.io https://color.adobe.com/create http://khroma.co Типографика Подавляющая часть контента в сети, кроме видео и роликов с котиками, представляет собой текст. Создание разборчивого, не утомляющего глаз текстового интерфейса — само по себе искусство. Тема типографики заслуживает отдельной книги, и на самом деле целые серии книг посвящены только ей. Вы, конечно, можете самостоятельно поупражняться в типографике, как показано на рис. 5.8. 274 Глава 5. Визуальный стиль и эстетика В этом разделе мы затронем самые важные ее аспекты, которые необходимо понимать. Рис. 5.8. Анатомия шрифта для цифрового дизайна Виды гарнитур Существует несколько терминов, которые помогут понять неко- торые тонкости использования шрифтов. Гарнитура — это название конкретного дизайна шрифта. Например, Helvetica, Arial или Times New Roman. Шрифт — это определенный размер, толщина и стиль гарнитуры; например Helvetica Bold 12 pt, или Arial Italic 8 pt, или Times New Roman 18 pt. Часто слово «шрифт» неправильно используют для описания гарнитуры в цифровом дизайне. Мы не знаем, откуда это пошло, но полезно знать разницу. Существует несколько уровней классификации гарнитур, мы рассмотрим наиболее актуальные для цифрового дизайна. С засечками У гарнитур с засечками (Serif) на концах символов есть маленькие прямые и кривые линии (рис. 5.9). В эту группу входят самые распространенные гарнитуры для чтения больших объемов текста. Засечки обычно тонко направляют читателя от буквы к букве, тем самым делая процесс чтения менее утомительным для глаз. Без засечек Шрифты без засечек (Sans serif) (рис. 5.10) не имеют линий на концах символов. Они, как правило, выглядят более современно, а символы обычно остаются достаточно удобочитаемыми, если их размер невелик. Это одна из основных причин, по которым шрифты без засечек часто используются в пользовательских интерфейсах. Основы визуального дизайна 275 Рис. 5.9. Примеры шрифтов с засечками Рис. 5.10. Примеры шрифтов без засечек 276 Глава 5. Визуальный стиль и эстетика Экранные Экранные гарнитуры (Display) (рис. 5.11) хорошо подходят для букв большого размера, они могут быть с засечками или без засечек. Экранные гарнитуры хороши для формирования представления о бренде, для заголовков или логотипов, но они не подходят для пользовательских интерфейсов, элементов управления, форм или основного текста. Никогда не используйте экранные гарнитуры для крупных объемов текста, поскольку это перегружает страницу, а мелкий текст, набранный таким шрифтом, сложно разобрать. Рис. 5.11. Примеры экранных гарнитур Моноширинные В моноширинных (Monospace) шрифтах (рис. 5.12) буквы имеют одинаковую ширину. Эти гарнитуры использовались на заре компьютерной эпохи, кроме того, они применяются в интерфейсах светодиодных экранов, в интерфейсах, где основной контент — числа, и на экранах, для которых не пре­ дусмотрены сложные способы визуализации текста. Примерами могут служить интерфейсы некомпьютерных электронных устройств, дисплеи в автомобилях и бытовых приборах. Размер Размер шрифта (кегль) измеряется в пунктах и обычно указывается в единицах pt. Чем меньше пунктов, тем меньше размер шрифта. Как правило, чтобы сохранить удобочитаемость, шрифты размером менее 10 pt не используются. Для основного текста чаще всего используется стандартный размер 12 pt (рис. 5.13). Для такой информации, как сведения об авторских правах, которую можно разместить в подвале сайта, подойдет размер шрифта 9 pt. В приложе- Основы визуального дизайна 277 ниях, ориентированных в первую очередь на чтение (например, на новостных сайтах или в электронных библиотеках), лучше всего по умолчанию установить удобный размер шрифта (например, 12 pt) и позволить пользователю увеличивать его по желанию. Рис. 5.12. Примеры моноширинных шрифтов Рис. 5.13. Примеры размеров шрифта Интерлиньяж Интерлиньяж — это расстояние между строками текста, в част- ности, расстояние между базовой линией (см. рис. 5.8) одной строки текста и базовой линией соседней строки. Интерлиньяж должен быть достаточным, 278 Глава 5. Визуальный стиль и эстетика чтобы взгляд было удобно переводить со строки на строку и чтобы строки не накладывались друг на друга, однако не слишком большим, чтобы строки не казались обособленными (рис. 5.14). Рис. 5.14. Интерлиньяж: с малым значением, пропорциональным и большим значением Трекинг и кернинг Трекинг и кернинг взаимосвязаны. Трекинг — это горизон- тальный интервал между всеми символами. Неправильно подобранный трекинг способен повлиять на удобочитаемость, особенно если значение трекинга выбрано так, что символы располагаются слишком плотно или слишком далеко друг от друга. Тем не менее даже при правильном выборе значения трекинга могут возникнуть проблемы с некоторыми символами. Вот тут-то и приходит на помощь кернинг. Кернинг — это регулирование дизайнером расстояния (трекинга) между определенными парами символов (обычно в сторону уменьшения). Это необходимо, например, когда буква, занимающая много места, в частности заглавная «D», и буква, занимающая гораздо меньше места («I»), расположены рядом и находятся на неудобном расстоянии друг от друга. Кернинг помогает сделать пары букв более сбалансированными и разборчивыми. Большинство гарнитур, оптимизированных для цифрового дизайна, таких как шрифты Google Fonts, Apple или Microsoft UI, уже кернированы, чтобы выглядеть на экране более пропорционально. Сопряжение шрифтов Сопряжение шрифтов — это сочетание двух гарнитур в дизайне. Комбинирование шрифтов — нетривиальная задача, но, к счастью, Основы визуального дизайна 279 существуют сайты, которые помогают в выборе шрифтов, хорошо сочетающихся друг с другом. Существует множество тонкостей поиска подходящих комбинаций, в этом могут помочь несколько простых правил: При объединении шрифтов, принадлежащих к одному семейству гарнитур, используйте различную толщину или стиль (полужирный, курсив), чтобы выделять текст. Никогда не комбинируйте две схожие гарнитуры. Способ избежать этого — сочетать шрифт с засечками и шрифт без засечек (рис. 5.15). Рис. 5.15. Примеры сопряжения шрифтов Выравнивание абзаца Выравнивание абзаца подразумевает проведение воображаемой вертикальной линии, по которой выравнивается текст абзаца. В цифровом дизайне существует четыре варианта выравнивания: по левому краю, по центру, по правому краю и по ширине. При выравнивании текста по ширине интервал между словами регулируется таким образом, чтобы строки были выровнены по левому и правому краю. Выравнивание по левому краю — беспроигрышный вариант. Как видно на рис. 5.16, оно повышает удобочитаемость больших объемов текста. Выровненный по центру текст будет привлекать внимание пустым пространством вокруг него, но не увлекайтесь этим, поскольку такой текст труднее читать. 280 Глава 5. Визуальный стиль и эстетика Выравнивание текста по правому краю и по ширине обычно не используются в дизайне пользовательских интерфейсов. Рис. 5.16. Выравнивание абзацев Числа При выборе гарнитуры всегда обращайте внимание на то, как цифры и буквы выглядят вместе. В некоторых гарнитурах трудно отличить строчную букву «l» от цифры «1» или «0» от заглавной буквы «O». Удобочитаемость Выбирая шрифт для фрагмента текста, вы решаете, каким голосом «говорит» этот текст. Голос может быть громким или мягким, дружелюбным или формальным, разговорным или официальным, современным или старомодным. Как и в случае с цветом, удобочитаемость (ее когнитивная часть) имеет наибольшее значение при выборе шрифта. Тексты, набранные небольшим кеглем, то есть так называемый «основной текст» в печати и на веб-сайтах, требуют тщательного подбора шрифта. Следующие принципы также применимы к «шрифтам ярлыков» в графических пользовательских интерфейсах (GUI), используемым для заголовков текстовых полей и других элементов управления: На экранах компьютеров более эффективны мелкие шрифты без засечек, в отличие от печатной продукции, в которой основной текст, набранный шрифтом с засечками, обычно более удобочитаемый. Дело в том, что пиксели недостаточно велики, чтобы хорошо отображать крошечные засечки. (Хотя некоторые шрифты с засечками, такие как Georgia, даже на компьютерах выглядят приемлемо.) Основы визуального дизайна 281 Избегайте наклонных, курсивных или других орнаментальных шрифтов — они нечитаемы при малых размерах. Геометрические шрифты, как правило, трудно читать при небольшом кегле, поскольку округлые буквы (e, c, d, o и т. д.) в них трудно различить. Таковы Futura, Universal и некоторые другие шрифты середины XX века. Текст, набранный полностью заглавными буквами, трудно читать, хотя это отличный вариант для заголовков и коротких текстов. По возможности помещайте большие объемы текста в столбец средней ширины — около 10–12 английских слов. Не выравнивайте по ширине узкие столбцы текста; пусть лучше будет «оборван» правый край. Эмоциональный отклик Теперь поговорим о чувственном и эмоциональном аспектах. Гарнитуры поразному «звучат» — у них разные свойства, текстуры и цвета. Например, некоторые шрифты плотные и темные, в то время как другие более открытые (рис. 5.17). Взгляните на толщину штрихов и относительные размеры отверстий букв, чтобы оценить посыл. Используйте тест с прищуриванием (squint test), чтобы объективно и по-новому посмотреть на шрифт. В некоторых шрифтах буквы более узкие, чем в других, а в некоторых семействах шрифтов есть «сжатые» версии, в которых символы еще более узкие. Значение трекинга может быть большим или маленьким, что делает блок текста более открытым или плотным. Рис. 5.17. Примеры гарнитур Засечки и кривые добавляют еще одно измерение к цвету и текстуре шрифта. Засечки дополнительно влияют на масштабирование — поскольку они намного 282 Глава 5. Визуальный стиль и эстетика меньше самой буквы, они делают текстуру шрифта более изысканной: толстые шрифты без засечек выглядят по сравнению с ними грубыми и строгими. Кривые и углы, используемые в буквах, включая те, которые образуют засечки, объединяются, чтобы сформировать общую текстуру. Тем не менее не всегда легко объяснить, почему одни шрифты «звучат» формально, а другие — неформально. Comic Sans и другие игривые шрифты, безусловно, неформальны, однако шрифт Georgia по сравнению с Didot или Baskerville также кажется неформальным. Слова, написанные заглавными буквами, «звучат» более формально, чем те, что набраны строчными, а курсив «звучит» неформально. В восприятии шрифтов играют роль и культурные аспекты. Старомодные шрифты, обычно с засечками, как правило, выглядят (как вы думаете?) устаревшими, хотя шрифт Futura (без засечек) по-прежнему выглядит так, будто он взят из учебника по биологии 1963 года. Шрифт Verdana так часто использовался в интернете, что стал его стандартом. А Chicago всегда будет оригинальным шрифтом Mac, неважно, в каком контексте он используется. Свобода и компактность В некоторых дизайнах используется много пустых пространств, в других же элементы размещаются более компактно. Обилие пустого пространства на экране создает впечатление воздушности, открытости, тишины, спокойствия, свободы или величавости и достоинства, в зависимости от других факторов дизайна. Компактный же дизайн иногда может вызвать ощущение настойчивости или напряженности. Почему? Поскольку текст и другие графические элементы должны «дышать», то когда элементы сталкиваются друг с другом, с рамками или границами экрана, они вызывают визуальное напряжение (рис. 5.18). Наши глаза хотят видеть пробелы между элементами. Дизайн, в котором заголовки помещаются прямо над текстом, вызывает чувство беспокойства. Точно так же плотное расположение элементов почему-то создает деловую, рабочую атмосферу. Рис. 5.18. Свободный и компактный визуальный дизайн Основы визуального дизайна 283 Однако не всегда компактный дизайн создает напряженность. Иногда он ассоциируется с удобством и комфортом. Если вы выделите для текста и других элементов именно столько места, сколько нужно, и уменьшите межстрочный интервал (интерлиньяж) до минимально удобного для чтения, вы получите более приятный дизайн и избавитесь от разрозненности строк. Углы и кривые Дизайн, составленный из вертикальных линий и прямых углов, обычно выглядит спокойнее и безмятежнее, чем тот, в котором преобладают диагонали и неправильные формы. Точно так же дизайн с множеством разных углов выглядит более подвижным, чем дизайн с одним повторяющимся углом. Кривые тоже могут добавить движения и живости, но не всегда. Дизайн, состоящий из множества кругов и дуг, может успокаивать и умиротворять. Но кривая, проходящая через весь экран, приводит в движение весь дизайн, а несколько тщательно подобранных кривых в прямоугольном дизайне привносят изысканность и оригинальность. В примере на рис. 5.19 на сайте Stripe используются углы для создания динамичного и четкого дизайна, чтобы привлечь взгляд и внимание читателя к важной информации. Рис. 5.19. Сайт онлайн-платежей Stripe 284 Глава 5. Визуальный стиль и эстетика Обратите внимание на участки, где пересекаются кривые. Они образуют прямой угол? Такое пересечение создает более спокойную и умиротворяющую композицию. Если же они пересекаются под более острым углом, конструкция приобретает большую напряженность и подвижность. (Это не всегда так, но в целом верно.) При работе с углами, кривыми линиями и неправильными фигурами подумайте о расположении точек фокусировки: например, в острых углах, местах пересечения линий и там, где сходится множество линий. Используйте эти точки, чтобы направить взгляд зрителя в желаемую область. Текстуры и гармония Текстура может сделать визуальный дизайн более ярким. Текст формирует свою собственную текстуру, и можно управлять ее внешним видом, подбирая подходящие шрифты. Для большинства страниц и интерфейсов шрифты служат самым важным элементом текстуры. Кроме того, текстуру можно использовать для окружения и выделения важных визуальных элементов. Текстуры привлекают внимание и, в зависимости от формы, могут придать дизайну теплоты, яркости, волнения или напряжения. Самые эффектные текстуры в дизайне интерфейса — это малозаметные, неяркие шахматные клетки цепляющих глаз цветов. В них используются мягкие цветовые переходы и очень мелкие детали. При использовании в больших зонах их эффект заметно усиливается. Исключением можно назвать пример на рис. 5.20. Szimpla Kert — это магазин и кафе в Будапеште, на его веб-сайте используются яркие цвета, а также текстура, вместе они создают праздничный динамичный дизайн. Рис. 5.20. Сайт Szimpla Kert Основы визуального дизайна 285 Не увлекайтесь текстурами в качестве фона для текста — это редко бывает оправданно. Все текстуры, кроме самых малозаметных, снижают удобочитаемость мелкого текста. Их можно использовать в качестве фона для крупного текста, но следите за тем, как края букв будут взаимодействовать с различными цветами текстуры: это может визуально исказить буквы. Изображения Фотографии Фотография может задать настроение дизайну. В интернете и мобильных цифровых продуктах фотография — один из самых мощных инструментов, позволяющих представить бренд. Удачно подобранная фотография может моментально рассказать историю, что гораздо эффективнее, чем слова. Фотографии — очень эффективный способ вызвать эмоциональный отклик. В большинстве десктопных и мобильных приложений контент и простота использования важнее стиля. Используйте декоративные изображения в функциональных графических интерфейсах очень умеренно и аккуратно, поскольку они отвлекают на себя внимание. Вот несколько полезных советов: Если вы используете фотографию лица, обязательно обратите внимание на то, куда направлен взгляд человека на ней. Люди склонны смотреть туда, куда смотрят другие люди. Даже когда эти люди лишь изображение на экране. По возможности старайтесь избегать клише. Как часто вы видели в интернете одинаковые счастливые улыбающиеся лица? Детей, запускающих воздушных змеев? Деловых людей в строгих костюмах? Как насчет дорог, петляющих среди роскошных горных пейзажей? Закатов или пляжей? Прогулок по холмам под солнечным голубым небом? Не полагайтесь на эти визуальные условности, чтобы задать тон бренду. Использовать стоковые изображения (готовые фотографии, которые можно купить, иногда без уплаты роялти) допустимо, но впечатление от такого фото не сравнится с тем, которое создает уникальное фото или дизайн, созданный профессионалами. Иконки Иконки (рис. 5.21) — это графические изображения, которые заменяют текст и служат для выражения идеи или обозначения функциональных возможностей. Создание иконок, как и в случае с типографикой, фотографией или иллюстрацией, требует мастерства. Иконки моментально выражают сложные идеи и дают пользователю представление о том, что произойдет, когда он щелкнет на элементе или коснется его. Используйте общепринятые обозначения, которые встречаются в интернете или других продуктах. Так вы избавите пользователя от необходимости заново учить, что означает иконка. 286 Глава 5. Визуальный стиль и эстетика Убедитесь, что все иконки выполнены в одном визуальном стиле: имеют одинаковую толщину, заливку или контур. Не полагайтесь только на иконки. Используйте их к месту и по возможности добавляйте текстовые ярлыки, чтобы информация была понятнее. Рис. 5.21. Иконки Ссылки на иконки и ресурсы https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/ custom-icons https://thenounproject.com https://material.io/tools/icons Отсылки к культуре Дизайн может ссылаться на элементы культуры — на определенный бренд, фильм, художественный стиль, историческую эпоху, литературный жанр или местную шутку. Знакомая отсылка может вызвать воспоминания или эмоции, достаточно сильные, чтобы превзойти влияние всех остальных факторов дизайна, хотя в лучших дизайнах отсылки к культуре дополняют другие элементы оформления. Прежде чем добавить в дизайн отсылки к культуре, изучите аудиторию. 10-летний ребенок не оценит отсылки к поп-арту 1970-х годов. Скорее всего, взрослый молодой человек в Индии тоже. Но если вы уверены, что выбранная отсылка будет знакома вашей аудитории, она может стать хорошей «приманкой» и эмоционально заинтересовать пользователя. Отсылки к культуре редко используются в дизайне функциональных приложений, но их все же можно увидеть в таких решениях, как QuickBooks, где Визуальный дизайн для корпоративных приложений 287 некоторые страницы выглядят как чеки и счета. Здесь это уже нечто большее, чем простая стилистическая обработка, это символ офлайн-взаимодействия — и символ культурный: тот, кто никогда не видел чековую книжку, не отреагирует так же, как тот, кто знает, что это такое. Повторяющиеся мотивы Хорошему дизайну присуща целостность: все его элементы представляют собой единое целое, и каждый элемент в отдельности дополняет другие структурно и визуально. Добиться этого непросто. Здесь нет четких правил, это приходит с навыками и практикой. Но есть одна вещь, которая помогает достичь визуального единства, — повторение визуальных элементов или мотивов. Мы уже говорили об углах и кривых: вы можете использовать диагональные линии под одинаковым углом или линии одинаковой кривизны как повторяющиеся элементы дизайна. Обратите внимание на типографику. Используйте один шрифт для основного текста и дополнительные для небольших элементов, таких как боковые панели или ссылки навигации. Так они будут выделяться на контрасте с основным шрифтом. Используйте один и тот же шрифт для всех заголовков или именованных разделов. Можно также добавлять мелкие графические элементы из набора шрифта (ширину и цвет линий, например) в остальной части дизайна. Создаваемая таким образом гармония может стать мощным инструментом ­дизайна. Используйте ее целенаправленно для групп схожих элементов — пользователи будут считать, что сходство по форме означает сходство по функциям. Визуальный дизайн для корпоративных приложений Те, кто работает над цифровыми продуктами, ориентированными на потребителей, возможно, уже знают все, что обсуждалось ранее. Люди ожидают, что веб-сайты и мобильные приложения будут обладать выраженной графической стилистикой, и вы редко встретите простой и нейтральный дизайн в продуктах такого рода. Но что, если вы работаете с десктопными или корпоративными приложениями? Если попытаться применить эти принципы к дизайну элементов управления, у вас останется не так много вариантов. Нативные приложения Windows или Mac обычно используют стандартный дизайн платформы, и если вы хотите отказаться от него, вам придется усердно поработать над разработкой собственного. Корпоративные приложения необходимо оптимизировать для рабочих процессов, в них должно быть удобно работать в течение всего дня. В таких условиях проще обойтись стандартным дизайном, а графические изыски использовать где-нибудь еще. 288 Глава 5. Визуальный стиль и эстетика Но даже если вы выбираете нейтральный дизайн виджетов, все равно есть способы применить творческий подход: Фон. Ненавязчивые изображения, градиентные заливки и невыраженные текстуры или повторяющиеся мотивы больших участков фона могут значительно оживить интерфейс. Используйте их в диалоговых окнах или в качестве фона страницы: для древовидных структур, таблиц, списков или блоков (в сочетании с рамкой блока). Цвета и шрифты. Управляйте общими цветовыми схемами и шрифтами в стандартном пользовательском интерфейсе. Например, используйте для заголовков шрифт на несколько пунктов больше, чем стандартный текст диалогового окна, и, как вариант, расположите заголовок на полосе контрастного цвета. Подумайте о таком оформлении, если разрабатываете макет страницы с использованием паттерна Titled Sections (Именованные разделы) (глава 7). Рамки. Рамки предлагают еще одну возможность для творческой стилизации. Опять же, если вы используете разделы с заголовками или любой другой вид группировки, измените стиль рамок блоков. Изображения. В некоторых наборах инструментов пользовательского интерфейса можно заменить стандартный внешний вид определенных элементов управления пользовательскими изображениями. Часто такая возможность есть для кнопок, поэтому кнопки, в том числе их границы, можно оформить по своему желанию. Иногда можно выбрать способ отрисовки элементов таблиц, древовидных структур и списков. Также можно добавлять на макет статические изображения, что позволяет размещать изображения любого размера практически в любом месте. Доступность Доступность — одна из труднейших задач дизайна. Операционные системы, такие как Windows, позволяют пользователям менять цвета и темы шрифтов рабочего стола не только для развлечения — люди с ослабленным зрением используют темы рабочего стола с высококонтрастными цветовыми схемами и крупными шрифтами, чтобы видеть свои действия. Убедитесь, что ваш дизайн работает с этими схемами. Это хорошо и правильно1. Еще одна опасность — утомляемость глаз. Если вы разрабатываете приложение, предназначенное для использования в полноэкранном формате или в течение длительного времени, приглушите насыщенные цвета, уменьшите слишком 1 И в зависимости от того, где вы реализуете свой программный продукт, это также может быть обязательным по закону. Правительство США, например, требует, чтобы все программное обеспечение, используемое федеральными учреждениями, было доступно для людей с ограниченными возможностями. Подробнее см. по ссылке http://www. section508.gov. Закон об американцах-инвалидах также предусматривает использование определенных стандартов дизайна (https://oreil.ly/mNptX). Диапазоны визуальных стилей 289 крупный текст, снизьте контрастность и замените яркие текстуры — словом, сделайте дизайн спокойным и неброским. Что еще более важно, если ваше приложение будет использоваться в ситуациях с высокой нагрузкой, например для управления тяжелой техникой, удалите все лишнее, что может отвлечь от работы. В этом случае когнитивные задачи гораздо важнее эстетики. Диапазоны визуальных стилей Мода на стили довольно изменчива. Чаще всего к изменению визуальных стилей UI приводит выход новых версий операционных систем. Так, Apple, Microsoft, а теперь и Google задают тенденции в визуальном оформлении приложений, которые будут использоваться на их платформах. Мы подробно рассмотрим некоторые из самых популярных стилей для этих платформ и их точек взаимодействия: веб-, десктопных и мобильных приложений. Скевоморфизм Скевоморфный дизайн — это стиль пользовательского интерфейса, имитирующий характеристики реальных объектов. Скевоморфизм часто используется в переходный период, когда вводится новый тип взаимодействия и вы хотите, чтобы пользователь понял, как что-то работает, используя идею или концепцию, с которыми он уже знаком. Когда был впервые выпущен iPad, скевоморфный визуальный дизайн присутствовал почти в каждом приложении. Скевоморфизм использовался в качестве визуального средства информирования пользователя о том, как взаимодействовать с сенсорным интерфейсом. В примере Apple Wallet, показанном на рис. 5.22 (слева), элементы, хранящиеся в списке данных, имеют визуальный дизайн, имитирующий внешний вид карточек или билетов. Такая имитация реальных объектов в цифровом формате помогает пользователю найти то, что он ищет, а также распознавать и упорядочивать содержимое. Apple вновь успешно использует скевоморфизм в своем приложении-калькуляторе, см. рис. 5.22 (справа). Цифры в окружностях представляют собой оптимальный размер «сенсорной мишени» (мы обсудим это подробнее в контексте мобильного дизайна в главе 6), а функциональность отражает то, что вы ожидаете от обычного калькулятора. Таким образом, разработчики iOS превратили iPhone в устройство, которое трансформируется и изменяется для соответствия предполагаемому функционалу приложения. 290 Глава 5. Визуальный стиль и эстетика Рис. 5.22. Кошелек Apple Wallet и калькулятор Apple для iOS Скевоморфизм можно также использовать в другом стиле, чтобы повысить удобство использования. В процессе настройки приложения Square Invoice (рис. 5.23) дизайнер решил использовать визуальный язык реальной проверки, чтобы пользователь знал, где найти номера учетных записей маршрутизации и проверки, необходимые для создания аккаунта. Диапазоны визуальных стилей 291 Рис. 5.23. Вход в учетную запись банка Square Invoice Иллюстрации Дизайн интерфейса не должен быть холодным и стерильным. Если это важно для бренда, использование иллюстраций — хороший способ создать позитивное и теплое впечатление от приложения или веб-сайта. Иллюстрации также избавят вас от необходимости ограничиваться только реальными объектами. Вы сможете использовать всю силу своего воображения, чтобы выражать сложные концепции. Eventbrite (рис. 5.24) — это сервис для поиска событий и покупки билетов, который использует иллюстрации в интерфейсе мобильного приложения для создания дружелюбного и привлекательного внешнего вида. Florence (рис. 5.25) — это ресурс, на котором самозанятые медсестры могут подобрать смены. Это мог быть скучный рядовой сайт, но иллюстрации и визуальный дизайн задали веселый и дружелюбный тон. Рис. 5.24. Интерфейс Eventbrite Рис. 5.25. Сайт Florence.co.uk Диапазоны визуальных стилей 293 Happy Cow (рис. 5.26) — это мобильное приложение, которое помогает вегетарианцам и веганам находить рестораны и продукты питания в любой точке мира. Сайт использует маскот «Happy Cow» и веселые иконки в интерфейсе. Рис. 5.26. Приложение Happy Cow Если вы разрабатываете продукт, похожий на примеры выше, собственные иллюстрации станут эффективным способом создать запоминающийся бренд. Плоский дизайн Плоский дизайн, для которого характерны сплошной цвет фона, простые и понятные иконки и типографика без засечек, — один из самых популярных стилей визуального дизайна в интернете и мобильных приложениях. Вспомните стиль указателей в аэропортах и на дорогах, и вы поймете, почему этот плоский и минималистичный стиль такой универсальный и привлекательный. Он не зависит от культурных особенностей, его легко локализовать и быстро масштабировать для разных размеров экрана. 294 Глава 5. Визуальный стиль и эстетика Плоский дизайн считается исключительно цифровым стилем, поскольку визуальный язык пользовательского интерфейса (за исключением иконок) больше не имитирует вещи из реальной жизни. Вместо этого пользовательский интерфейс сливается с фоном и позволяет пользователю сосредоточиться на контенте. На рис. 5.27 приведены примеры плоского дизайна в мобильных приложениях. Какие у них общие черты? Это сплошные цвета, один шрифт, но разных размеров, использование двумерных иконок. Когда вы обратите внимание на этот визуальный стиль, вы заметите, что он используется буквально везде. Рис. 5.27. Приложения Cash и Booking.com AirVisual (рис. 5.28) — это мобильное приложение, которое показывает качество воздуха в городах по всему миру. В нем плоский дизайн сочетается с использованием уникальных иллюстраций для понятного и удобного визуального представления. Подробнее о плоском дизайне: https://www.microsoft.com/design/fluent https://material.io/design Диапазоны визуальных стилей 295 Рис. 5.28. Приложение AirVisual Минимализм В минималистичном дизайне количество элементов на странице сведено к минимуму. Такой дизайн часто используется в приложениях, предназначенных для простых задач, или там, где интерфейс в основном служит для просмотра данных, а не для ввода или управления ими. Clear Todos (рис. 5.29) — это яркий пример минималистичного дизайна, включающего только оттенки одного цвета, текст и очень ограниченный набор визуальных подсказок о работе интерфейса. Приложение Calm (рис. 5.30, слева) отображает только самую необходимую для пользователя информацию. В приведенном примере одна кнопка используется для управления функционалом, а едва заметная, но необходимая анимация подсказывает пользователю, что делать. В Apple Health (рис. 5.30, справа) основу визуального интерфейса составляет красочная инфографика с полужирным начертанием. 296 Глава 5. Визуальный стиль и эстетика Рис. 5.29. Приложение Clear Todos Рис. 5.30. Приложения Calm и Apple Health Диапазоны визуальных стилей 297 Glitché (рис. 5.31, слева) — это приложение для создания фотографий и видео в стиле «глитч». Его минималистичный пользовательский интерфейс позволяет сосредоточиться на работе и не отбирает ценное пространство экрана у основной задачи редактирования фото и видео. В музыкальном приложении Bloom Брайана Ино (рис. 5.31, справа) используются только звуковые подсказки о том, как с ним взаимодействовать. Интерфейс основан на тонких приглушенных изменениях цвета и фонового звука и вызывает желание исследовать и творить. Рис. 5.31. Приложения Glitché и Bloom Адаптивный/параметрический дизайн Адаптивный, или параметрический, дизайн представляет собой крайнюю степень минимализма. В таком дизайне форма не является статической или определенной, а скорее генерируется алгоритмически вокруг ближайших объектов (статических или динамических). Этот дизайн широко используется в видеоили фотоприложениях и все чаще и чаще встречается в других продуктах. Такой дизайн не делает опору на текст. Представьте себе интерфейс, который остается практически невидим до тех пор, пока в нем не возникает необходимость — тогда 298 Глава 5. Визуальный стиль и эстетика UI появляется и словно обтекает объект, с которым может взаимодействовать пользователь. В разработке таких интерфейсов главное — создание высококонтрастного и подвижного визуального стиля. Приложение Apple Measure (рис. 5.32) — это инструмент для измерений, поставляемый с iOS. Чтобы что-то измерить, пользователь направляет телефон или планшет на объект, а затем измерительные инструменты и функции объединяются в интерфейс. Рис. 5.32. Приложение iOS Apple Measure Заключение 299 Simple (рис. 5.33) — это приложение для мобильного банкинга. Чтобы добавить чек в приложение, пользователю предлагают сфотографировать его. При этом появляется пользовательский интерфейс, позволяющий определить, правильно ли расположен чек и когда можно делать снимок. Рис. 5.33. Поиск чека в приложении Simple Заключение Совершенствование навыков создания качественного визуального дизайна требует времени. Графический дизайн — это отдельная дисциплина, и одной главы недостаточно, чтобы разобраться в нюансах построения сеток, в теории цвета, типографике и гештальте и по-настоящему понять, как создавать визуальный дизайн с пиксельной точностью (pixel perfect). К счастью, с появлением новых инструментов для создания и редактирования сайтов большинство приемов, необходимых, чтобы добиться идеально продуманного и детально проработанного дизайна, становятся доступны каждому, у кого есть кредитная карта и контент, которым можно поделиться. Платформы для веб-разработки, такие как Squarespace, Wix и WordPress, предлагают готовые шаблоны, созданные дизайнерами. Эти инструменты избавляют от необходимости думать о подходящем макете или ширине отступов и полей и об удобочитаемости. Мы бегло рассмотрели, что нужно знать о визуальном дизайне в контексте разработки пользовательских интерфейсов. Важный вывод в том, что эстетика имеет большое значение, а расположение и внешний облик деталей существенно влияют на то, как в итоге аудитория воспримет ваш продукт или услугу. ГЛАВА 6 Мобильные интерфейсы Оказавшись на улице, оглянитесь вокруг. Куда бы вы ни посмотрели, вы увидите людей с телефонами. В мире множество устройств iPhone, телефонов на базе Android и других смартфонов и планшетов. В некоторых странах мобильный интернет уже популярнее стационарного. По прогнозам, к 2025 году мобильным интернетом будут пользоваться пять миллиардов человек1. Возможно, что продукт, который вы разрабатываете, будут использовать именно на мобильных устройствах. Мобильная разработка — это не просто еще один навык или сфера деятельности, это необходимость. Очевидно, что мобильные устройства стали неотъемлемой частью повседневной жизни. Сотовый телефон — это не просто телефон или устройство для выхода в интернет, это основное средство общения, торговли, развлечений, транспорта и навигации. У смартфонов и планшетов есть преимущество — возможность непосредственно управлять объектами на экране, например прикоснуться к элементу, который вы хотите выбрать или отредактировать. Это делает мобильные интерфейсы простыми и интуитивно понятными. Теперь мало просто подогнать размер страницы веб-сайта под экран мобильных устройств. Компании, заботящиеся о масштабировании своих цифровых продуктов в будущем, используют такие подходы, как mobile-first (сначала разрабатывается мобильный дизайн, а затем масштабируется под экраны других устройств) и отзывчивый дизайн (responsive-design) (веб-дизайн, в котором интерфейс подстраивается под различные размеры экранов). Мир мобильных приложений разнообразен и простирается от мобильных версий сайтов до нативных мобильных приложений. Некоторые сайты пытаются сохранить в мобильном варианте всю функциональность полноэкранной версии, но в формате, ограниченном параметрами небольших устройств. Это и понятно — многие люди выходят в интернет только с мобильных устройств, но хотят пользоваться всеми возможностями «больших» сайтов. Вы можете 1 The Mobile Economy Report, GSM Association, 2018. Проблемы и возможности мобильного дизайна 301 создать два варианта дизайна: один для мобильной, второй для десктопной версии. Если вы работаете над инструментами и приложениями для больших экранов и не занимаетесь веб-сайтами, возможно, эта глава вам не нужна. Однако ваша компания может захотеть оценить, насколько ваш продукт (или набор продуктов) можно адаптировать для использования на мобильных устройствах. Вам следует лучше узнать свою пользовательскую аудиторию, понять ее требования, задачи, контексты использования инструментов и приложений. Изучайте своего потребителя — поймите его потребности, задачи и контекст, в котором он пользуется вашим продуктом. У любого подхода есть свои плюсы и минусы, и в зависимости от того, какие функции вы планируете добавить в свой продукт, вы будете проектировать либо десктопное приложение (сайт), либо его мобильную версию, либо мобильное приложение. Создание мобильных приложений — нетривиальное занятие, но оно стоит затраченных усилий. Некоторые пользователи будут заходить на ваш сайт через мобильный браузер, медленный и своеобразный, которым к тому же практически невозможно нормально пользоваться на маленьком экране. Люди заходят в интернет, находясь в местах (и в условиях), где нет удобного рабочего стола и компьютера с большим экраном. В этой главе мы не будем обсуждать технические нюансы выбора платформы и способов представления подходящего дизайна для различных ситуаций использования (например, таблицы стилей CSS) — это все легко найти в интернете или в других источниках. Чтобы значительно улучшить качество дизайна своих мобильных продуктов, вам потребуется сравнительно немного времени и средств на обучение и тренировку полученных навыков. Проблемы и возможности мобильного дизайна Сложность мобильной разработки в том, что пользователь мобильных продуктов не сидит перед большим экраном и полноразмерной клавиатурой. Крошечный экран На экранах мобильных устройств нет достаточного места, чтобы вывести всю необходимую информацию. Вы не сможете себе позволить такую роскошь, как боковые панели, длинные меню в шапке, крупные изображения, которые служат только для красоты, или длинные списки ссылок. Дизайн приходится «раздевать», оставляя только самое необходимое. Самые важные функции выведите на главной странице. Остальное спрячьте подальше внутрь сайта либо уберите вообще. 302 Глава 6. Мобильные интерфейсы Разная ширина экрана Сложно создать дизайн, который будет одинаково хорошо смотреться на экранах шириной 360 пикселей и 640 пикселей. Прокрутить мобильный экран несложно (именно поэтому я делаю акцент на ширине, а не на высоте), однако доступное пространство необходимо использовать с умом. Некоторые веб-сайты создаются сразу в нескольких вариантах — с разными вариантами логотипов, элементов навигации и т. д. — для самых маленьких устройств с клавиатурой или для устройств размера iPhone. Сенсорные экраны В основном для выхода в интернет и работы с приложениями используются устройства с сенсорными экранами. Ваш продукт должен работать и с клавиатурой, поскольку она предусмотрена в большинстве существующих мобильных устройств, но упор в разработке имеет смысл делать на особенности сенсорных экранов. Перемещаться по ссылкам с клавиатуры довольно просто, разумеется, если при разработке вы соблюдали принципы качественного дизайна (ограниченный контент, линейный макет и т. п.). Но в случае с сенсорным экраном все гораздо сложнее: пальцем нелегко попасть по маленькой цели. Убедитесь, что ссылки и кнопки достаточно крупные. Их размер не должен быть меньше 48 × 48 dp (9 мм) для устройств Android1 и 44 × 44 pt для Apple iOS2, и между ними должны быть промежутки. Конечно же, места для остального контента в таком случае остается меньше. Сложности при вводе текста Никому не нравится вводить текст с экрана или с экранной клавиатуры на мобильном устройстве. Продумайте такие варианты взаимодействия, в которых вводить текст либо не нужно, либо нужно по минимуму. Когда это возможно, используйте автозаполнение в текстовых полях (оно предсказывает букву, которую пользователь собирается ввести, чтобы сократить взаимодействие с клавиатурой) и автоподстановку нужных значений. Учитывайте, что в некоторых ситуациях с числами работать намного проще, чем с текстом. Окружающие условия Люди используют телефоны и другие мобильные устройства в самых разных условиях: на улице в солнечный день, в темных залах кинотеатров, в конференцзалах, в автомобилях, автобусах, поездах, самолетах, магазинах, ванных комнатах и в постели. Для начала представьте, насколько может различаться освещение — 1 Material. IO Accessibility Guidelines (https://oreil.ly/S5tSG). 2 Apple Developer Human Interface Guidelines (https://oreil.ly/wnZOS). Проблемы и возможности мобильного дизайна 303 изящный серый текст на сером фоне невозможно читать под прямым солнечным светом. Также учитывайте звуковую среду: кто-то вообще не услышит звуки, издаваемые устройством, а кому-то неожиданный звук покажется неприятным или неуместным. Наконец, учитывайте фактор движения. Крошечный текст сложно читать, когда устройство (или сам пользователь) движется. В крохотную цель на сенсорном экране трудно попасть даже в идеальных условиях, а в трясущемся автобусе это и подавно почти невозможно! Создавайте дизайн для «толстых пальцев» и так, чтобы любые ошибки было легко исправить. Информация о местоположении Мобильные телефоны перемещаются вместе со своими владельцами. Это означает, что эти устройства могут точно определять, в каких местах их используют. Информацию о местоположении можно обрабатывать и объединять с локальными данными при разработке сценариев использования приложений, которые смогут предполагать, в каких ситуациях оказался пользователь, и лучше удовлетворять его потребности. Социальное влияние и ограниченное внимание Мобильные пользователи редко проводят на сайте или в приложении много времени и концентрируют на них все свое внимание. Они используют приложения, одновременно занимаясь чем-нибудь еще: гуляя, катаясь на велосипеде, разговаривая с друзьями, сидя на собрании или (упаси боже) управляя автомобилем. Иногда внимание пользователя полностью сосредоточено на устройстве, например во время игры, однако это случается намного реже, чем при работе за компьютером. Таким образом, ваш дизайн должен быть ориентирован на людей, чье внимание рассеяно: делайте задачи простыми и быстрыми, чтобы их можно было в любой момент начать заново, а элементы интерфейса — интуитивно понятными. Кроме того, всегда учитывайте, что многие пользователи будут отвлекаться на разговоры или другие социальные взаимодействия. Они могут передавать устройство другим людям, чтобы показать что-то на экране. Кто-то будет заглядывать в экран через плечо владельца. Иногда пользователям нужно моментально отключать звук — в некоторых ситуациях громкая музыка или сигналы недопустимы, — а иногда, наоборот, включать его на полную мощность, чтобы окружающие хорошо слышали речь или музыку. Ваше приложение подходит ко всем этим условиям? Поддерживает ли оно успешное социальное взаимодействие? 304 Глава 6. Мобильные интерфейсы Как создать хороший мобильный дизайн Если вы просто пытаетесь упаковать весь контент обычного сайта в окно размером 360 × 640, остановитесь. Взгляните на задачу по-новому. 1. Выясните, что действительно нужно мобильным пользователям Человеку, который находится вне дома или офиса, может понадобиться всего одна функция. У него не так много потребностей, как у пользователя полной версии сайта. Разработайте дизайн для разных возможных ситуаций, например: «мне срочно нужно узнать определенную вещь прямо сейчас, и побыстрее»; «у меня есть несколько свободных минут, развлеките меня»; «свяжите меня с другими людьми, например в социальной сети»; «если есть что-то, о чем мне нужно знать, расскажите мне об этом»; «что есть там, где я сейчас нахожусь?» 2. Избавьтесь от всего лишнего Не бойтесь избавляться от ненужного: лишнего контента, броских экранных элементов, боковых панелей, врезок с цитатами, рекламы, изображений, карты сайта, ссылок на соцсети и т. д. Сосредоточьтесь на узком круге задач, которые будет выполнять мобильный пользователь, разместите минимум элементов фирменного стиля и скомпонуйте остальное. Убедитесь, что даже на главной странице нужный контент находится сверху. Это значит, что придется распрощаться со «слоеным пирогом» из логотипов, рекламы, вкладок и заголовков, захламляющих экран. На рис. 6.1 показан пример очень плохого дизайна: единственное, что действительно интересует пользователя, это счет матча внизу экрана! (А если пользователь повернет телефон горизонтально, то эта ценная информация вообще скроется из виду.) Уменьшив сайт до минимального размера, все же проверьте, что при необходимости пользователь сможет перейти на его полную версию. Поместите ссылку на нее в заметном месте. Помните, что доступ в интернет у многих есть только с мобильного устройства, поэтому не рассчитывайте, что они смогут открыть полную версию сайта именно на большом экране — у них может просто не быть такой возможности, не говоря уже о том, что устройство может быть не подключено к интернету. Вариант — создать два отдельных, но параллельных дизайна, как упоминалось выше, когда все функции и информация полной версии сайта представлены и в мобильном варианте (что вовсе избавляет пользователя от необходимости открывать «большой» сайт). Главную, или домашнюю, страницу все же придется «оголить». Возможно, вместо плоской и широкой навигационной иерархии, в ко- Как создать хороший мобильный дизайн 305 торой с домашней страницы можно напрямую перейти на множество внутренних страниц, вам потребуется создать более узкую и глубокую иерархию. В этом случае оставьте на домашней странице только несколько самых важных ссылок, расчистив ее небольшую площадь. (Разумеется, учитывайте, чтобы переходы от страницы к странице не занимали в таком случае слишком много времени.) Рис. 6.1. Пример плохого дизайна мобильных устройств, где нужная информация занимает лишь небольшое пространство внизу экрана 3. Используйте аппаратные возможности устройства Мобильные устройства обладают замечательными возможностями, которых нет у настольных компьютеров: определение местоположения, голосовая интеграция, ввод с помощью жестов, тактильная отдача (стуки и вибрация) и другие полезные функции. Некоторые устройства поддерживают многозадачность: приложение может работать в фоновом режиме, пока пользователь занят чем-то еще. Используете ли вы эти возможности? 4. Расположите содержимое линейно Мы снова возвращаемся к проблеме ширины экрана. На многих устройствах ширина экрана слишком мала для макетов, на которых материалы расположены рядом друг с другом. Не тратьте время на поиск выхода из ситуации, просто 306 Глава 6. Мобильные интерфейсы смиритесь с тем, что контент придется располагать вертикально. Упорядочьте его так, чтобы он хорошо читался именно в таком варианте. Подробнее об этом говорится при описании паттерна Vertical Stack (Вертикальный стек) далее в этой главе. 5. Оптимизируйте самые частые операции Определив, какие задачи пользователь будет выполнять чаще всего, и убрав все лишнее, попытайтесь максимально упростить эти задачи. Следуйте эвристическим правилам: избавьте пользователей от необходимости вводить текст либо сократите количество символов до минимума; старайтесь, чтобы обновлять страницы требовалось как можно реже, и облегчите их вес. Страницы могут загружаться очень медленно, а в большинстве регионов мира до сих пор нет скоростного беспроводного интернета; как можно реже используйте прокрутку по вертикали и горизонтали, если только она не помогает избежать обновлений страниц и ввода текста. Другими словами, если вам необходимо вывести объемный контент, лучше разместите его на одной длинной вертикальной странице, а не на множестве маленьких; уменьшайте количество касаний, которые пользователю необходимо сделать, чтобы получить нужную информацию или выполнить задачу. В целом, касаться элементов или кнопок лучше, чем вводить текст, но все же старайтесь сокращать и это. Несколько полезных примеров Далее рассмотрим мобильные версии страниц, отвечающие описанным выше ограничениям дизайна. При этом страницы сохраняют фирменный стиль и индивидуальность «больших братьев». В некоторых примерах я приведу страницу сайта и ее мобильную версию для сравнения. Lugg (рис. 6.2) — это служба переездов по запросу. Мобильный сайт и мобильное приложение компании созданы с соблюдением принципов мобильной разработки. Приложение Lugg сосредоточено на основной задаче сервиса. В нем присутствуют крупные элементы для ввода текста и кнопки, а также четкий призыв к действию. Вся самая важная информация видна сразу. Booking.com — это сайт планирования путешествий, на котором можно забронировать отели, купить авиабилеты и взять автомобиль напрокат, поэтому логично, что интерфейс главных страниц мобильной версии сайта и мобильного приложения сразу предлагает посетителю поиск в пункте назначения (рис. 6.3). Booking.com также использует данные о геолокации смартфона. Как создать хороший мобильный дизайн 307 Рис. 6.2. Мобильная версия сайта Lugg и нативное приложение для iOS Рис. 6.3. Мобильная версия сайта Booking.com и нативное приложение для iOS 308 Глава 6. Мобильные интерфейсы Кроссворд New York Times (рис. 6.4, слева) получил высокие оценки за оптимизацию с учетом ограничений и возможностей мобильного исполнения. Когда пользователь касается области для ввода буквы, вся строка выделяется, и в синей области над клавиатурой появляется подсказка. Это отличная реализация, которая сокращает количество требуемых касаний и упрощает взаимодействие с приложением. Приложение NPR One (рис. 6.4, справа) — отличный пример оптимизации функционала в упрощенном мобильном пользовательском интерфейсе. Оно использует данные геолокации, чтобы подключаться к ближайшей станции, и отображает одну крупную кнопку воспроизведения. Рис. 6.4. Кроссворд New York Times в мобильном приложении для iOS и приложение NPR One Gratuity (рис. 6.5, слева) — это калькулятор чаевых, в котором все функции грамотно и красиво размещены на одном экране, а кнопки достаточно крупные, чтобы их было удобно нажимать. Паттерны 309 Music Memos (рис. 6.5, справа) — решение для быстрой записи звука. Приложение лаконично, что позволяет выделить основные функции, и предлагает изящную анимацию начала записи. Рис. 6.5. Gratuity и Music Memos Паттерны Во введении мы упоминали о необходимости располагать материалы вертикально, чтобы обеспечить максимальную гибкость. Подробнее об этом рассказывается в описании паттерна Vertical Stack (Вертикальный стек). В мобильном приложении необходимо визуализировать навигационную структуру верхнего уровня. Закрепленная панель инструментов вверху каждой страницы — один из стандартных способов организации мобильного интерфейса; также популярны интерфейсы на основе вкладок и полностраничных меню. Менее очевидны паттерны Filmstrip (Фотопленка) и Touch Tools (Инструменты, реагирующие на касание), однако они тоже заслуживают внимания. 310 Глава 6. Мобильные интерфейсы На мобильных веб-страницах глобальные меню часто оформляются с использованием паттерна Bottom Navigation (Нижняя навигация), чтобы освободить ценное пространство вверху страницы для более важного контента. Списки — важнейшая часть мобильной среды: списки приложений, изображений, сообщений, контактов, действий, настроек, чего угодно! Как на веб-страницах, так и в приложениях списки должны быть хорошо продуманы, привлекательны и удобны в использовании. Обычных текстовых списков чаще всего достаточно, но и карусели с сетками миниатюр отлично подходят для мобильного дизайна (в главе 7 вы найдете описания соответствующих паттернов и подробный рассказ о дизайне списков). Иногда подходят и бесконечные списки. Вот еще паттерны, которые рассматриваются в этой главе: Collections and Cards (Коллекции и карточки) Infinite List (Бесконечный список) Generous Borders (Больше воздуха) Loading or Progress Indicators (Индикаторы загрузки или выполнения) Richly Connected Apps (Тесно связанные приложения) Vertical Stack (Вертикальный стек) Что это Способ организации контента в столбце по вертикали (рис. 6.6), по возможности без размещения элементов рядом друг с другом. Должен быть предусмотрен перенос текста на следующую строку, а также прокрутка, поскольку контент может уходить за нижний край экрана на большинстве устройств. Когда использовать Этот паттерн рекомендуется применять, если предполагается, что люди будут просматривать контент на устройствах разного размера, особенно если он в основном содержит текстовые материалы и формы. (Не обязательно его использовать для иммерсивного контента, такого как полноэкранное видео или игра, так как обычно он не выходит за пределы экрана и прокручивать его не требуется.) Если переход с одной страницы на другую отнимает много времени — например, долго загружаются страницы, — то этот паттерн тоже имеет смысл. С другой стороны, если приложение локальное, переход между страницами осуществляется почти мгновенно, так как их не нужно загружать из сети. В таком случае логичнее поместить контент на несколько экранов, требующих не прокрутки, а только касания или смахивания. Не забудьте, что вертикальная прокрутка длинной страницы лучше, чем бесконечное ожидание загрузки. Паттерны 311 Рис. 6.6. Вертикальный стек Зачем Ширина экранов разных устройств разная. Невозможно предугадать, какого размера устройство будет у пользователя, если только не распознать его программными методами или не создавать приложение исключительно для определенной модели. (Можно проектировать дизайн отдельно для уникальных устройств и для экранов стандартных размеров, но не каждый может себе это позволить.) Дизайн окна, превосходящего экран по ширине, предусматривает возможность боковой прокрутки или зума, но он никогда не будет настолько же удобен, как дизайн с вертикальной прокруткой. Размер шрифта также может меняться без вашего ведома, но вертикальный стек с переносом текста грамотно справляется с этой проблемой. 312 Глава 6. Мобильные интерфейсы Как Поместите контент вертикально, с возможностью прокрутки. Самые важные элементы должны располагаться вверху, чтобы пользователи сразу видели их, а менее важные — ниже. Полезный контент — с точки зрения пользователя, разумеется, — необходимо выводить в пределах первых 100 (или меньше) пикселей вертикального стека. Верхняя часть экрана считается самой ценной. Не захламляйте ее «слоеным пирогом» из длинных логотипов, рекламы и бесконечных панелей инструментов, из-за чего полезная информация сползает в самый низ страницы. Это крайне раздражает пользователей. Для экономии пространства по горизонтали помещайте ярлыки над соответствующими элементами управления, а не рядом с ними. Вам потребуется вся доступная ширина экрана, чтобы сделать текстовые поля и элементы управления выбором достаточно широкими. Кнопки можно помещать рядом друг с другом только в том случае, если вы абсолютно уверены, что их общая ширина не превысит ширину экрана. Если на кнопках находится длинный текст, который, возможно, понадобится перевести на другой язык или увеличить, лучше сразу забудьте о таком варианте. Уменьшенные изображения довольно легко разместить рядом с текстом, и так часто делают в списках статей, контактов, книг и т. п. — см. паттерн Collections and Cards (Коллекции и карточки). Убедитесь, что дизайн умещается на экране шириной 128 пикселей (или минимального размера устройств, для которых вы его создаете). Примеры Сайты ESPN, Washington Post и REI (рис. 6.7) иллюстрируют три стиля реализации паттерна Vertical Stack (Вертикальный стек). На главную страницу сайта ESPN выводится только самое важное содержимое, а остальное прячется за элементами меню или за нижним краем экрана. Washington Post показывает сразу все, стек на рис. 6.7 — это всего лишь небольшой фрагмент очень длинной страницы! Главная страница REI содержит меню всех доступных мест и способов покупки с привлекающим внимание объявлением. Salon.com (рис. 6.8) предлагает вертикальную разметку стека в мобильной версии сайта и в мобильном приложении. Это позволяет гибко изменять количество отображаемого контента и упрощает прокрутку новых статей большим пальцем одной руки. Паттерны 313 Рис. 6.7. Вертикальный стек на мобильных сайтах ESPN, Washington Post и REI Рис. 6.8. Salon.com 314 Глава 6. Мобильные интерфейсы Filmstrip (Фотопленка) Что это Возможность перелистывать страницы, проводя пальцем вперед и назад, чтобы просматривать контент по одной странице за раз (рис. 6.9). Рис. 6.9. Фотопленка Когда использовать Если контент на нескольких страницах концептуально схожий — например, прогноз погоды для разных городов или результаты матчей в разных видах спорта. Пользователям не составит труда перелистать несколько страниц, прежде чем добраться до нужной, так как на каждой из них может оказаться что-то интересное. Этот паттерн может стать удобной альтернативой другим навигационным схемам для мобильных приложений, таким как панели инструментов, вкладки или полноразмерные меню. Зачем Каждый из элементов, которые вам необходимо показать, сможет занять целый экран. Не придется расходовать пространство на заголовки вкладок и другие инструменты навигации. Поскольку пользователи не смогут сразу попасть на нужную страницу — им потребуется пролистать все предыдущие, — этот паттерн стимулирует использование функции поиска и помогает находить что-то новое. Многим пользователям просто нравится перелистывать страницы на сенсорном экране. Паттерны 315 Недостаток данного паттерна в том, что он плохо масштабируется; если страниц верхнего уровня будет слишком много, то необходимость перелистывать их, чтобы добраться до нужной, начнет раздражать. Кроме того, он не понятен интуитивно. Новый пользователь приложения не сразу догадается, что для перехода между страницами их требуется перелистывать. Как Фактически, «фотопленка» — это вариант реализации паттерна Carousel (Карусель) для мобильных приложений. Различие состоит в том, что в карусели обычно отображаются метаданные (информация об элементе или странице) и контекст, например фрагменты предыдущей и следующей страниц. В мобильных приложениях так делают редко; чаще всего фотопленка используется в качестве навигационной структуры верхнего уровня. Чтобы показать пользователю, что есть и другие страницы верхнего уровня, которые можно перелистывать, используйте индикатор в виде точек внизу экрана, как в приложении «Погода». Примеры Основные страницы приложения BBC News для iPhone (рис. 6.10) структурированы в виде фотопленки. Пользователь может переключаться между вкладками Top Stories, My News, Popular, Video и Live. Рис. 6.10. Приложение BBC News 316 Глава 6. Мобильные интерфейсы Встроенное в iPhone приложение «Погода» (рис. 6.11) с помощью фотопленки показывает погоду в различных географических точках, которые выбирает пользователь. Рис. 6.11. Приложение «Погода» для iPhone Touch Tools (Инструменты, реагирующие на касание) Что это Вывод определенных инструментов на экран только в ответ на прикосновение или нажатие кнопки; такие инструменты размещаются на неширокой динамической полосе поверх содержимого. Netflix (рис. 6.12) — это цифровой продукт для просмотра видео. Основное внимание пользователь уделяет видео, но в любой момент он может сделать паузу, включить и отключить субтитры, перемотать видео назад или вперед. Коснувшись экрана, пользователь сможет вызвать нужную ему функцию. Параметры исчезают примерно через пять секунд неиспользования. Когда использовать Если вы разрабатываете иммерсивное или полноэкранное приложение, например для просмотра видео, фотографий, карт, книг, игр. Пользователю иногда будут требоваться элементы управления навигацией или воспроизведением, информация о содержимом и т. п. Подобные инструменты занимают много места, но необходимость в них возникает редко. Паттерны 317 Рис. 6.12. Инструменты, реагирующие на касание, в мобильном приложении Netflix Зачем Большую часть времени на экране доминирует основной контент. Пользователя не отвлекают элементы управления, которые занимают место и конкурируют с содержимым приложения. Помните, что в мобильном контексте экранное пространство и внимание человека намного более ценны, чем принято считать. Пользователь сам выбирает, когда включать отображение элементов управления и использовать их. Как Выводите контент на весь экран без дополнительных элементов. Когда пользователь касается экрана устройства или нажимает определенную аппаратную или экранную кнопку, показывайте инструменты. Во многих приложениях инструменты, реагирующие на касание, появляются только при касании определенной области экрана. Поэтому пользователь не может случайно их активировать, используя устройство привычным образом. Кроме того, при прикосновении к разным частям экрана можно показывать разные инструменты. Поместите элементы управления на полупрозрачную подложку небольшого размера, которая будет выводиться поверх контента. Благодаря полупрозрачности создается впечатление, что инструменты появились временно и скоро снова пропадут (а так обычно и происходит). 318 Глава 6. Мобильные интерфейсы Если пользователь не касается элементов управления в течение нескольких секунд, убирайте их с экрана. Также они должны мгновенно исчезать при прикосновении к экрану за пределами подложки инструментов. Пользователей часто раздражает необходимость дожидаться, когда они исчезнут сами. Примеры В видеоплеере на iPhone инструменты, реагирующие на касание, появляются, когда пользователь дотрагивается до указанной области экрана (рис. 6.13). Примерно через пять секунд они исчезают, если не выбрать ни один из них. Рис. 6.13. Инструменты, реагирующие на касание, в приложении YouTube для iPhone Приложение Apple Notes (рис. 6.14, слева) предназначено для чтения заметок, но при прикосновении к экрану появляются инструменты редактирования. Паттерны 319 Рис. 6.14. Apple Notes и нижняя панель навигации Amazon Bottom Navigation (Нижняя навигация) Что это Размещение инструментов глобальной навигации в самом низу экрана. Amazon использует простую систему «нижней навигации» в глобальном футере своего мобильного веб-сайта (рис. 6.14, справа). Когда использовать Если нужно разместить некоторые элементы глобальной навигации на мобильном сайте, но они второстепенны для большинства пользователей. Важнейшая задача для вас — показать на главной странице сайта свежие, интересные материалы. Зачем Верх страницы мобильного сайта — самая полезная ее часть. Поместите туда не более двух-трех самых важных навигационных ссылок (если это вообще нужно), а остальное пространство отведите под контент, интересный большинству пользователей. 320 Глава 6. Мобильные интерфейсы В поисках инструментов навигации пользователь с легкостью прокрутит страницу и доберется до них, даже если они будут спрятаны глубоко внизу. Как Создайте набор элементов меню, выстройте их в столбец и поместите внизу экрана. Они должны быть удобны для касания на сенсорном экране — растяните элементы на весь экран и сделайте текст большим и хорошо читаемым. В мобильном приложении вы вряд ли будете помещать в подвал полную карту сайта: здесь есть место лишь для нескольких важных ссылок. Но принцип тот же: чтобы не занимать под навигацию слишком много места вверху страницы, ее можно переместить в самый низ, где пространство менее ценно. Примеры На сайте NPR полоса с информацией и ссылками есть внизу каждой страницы (рис. 6.15, слева). На ней размещены стандартные навигационные ссылки и ссылка на текстовую версию. Рис. 6.15. Нижняя навигация сайта NPR и футер сайта REI Паттерны 321 В мобильной версии сайта REI используются простые ссылки в футере, как в полноэкранной версии, и большая кнопка подходящего размера для мобильных экранов, на которой указан телефонный номер для связи (рис. 6.15, справа). Collections and Cards (Коллекции и карточки) Что это Коллекции — это серии миниатюрных изображений, представленных в виде списка элементов, из которых пользователь может выбирать нужный (рис. 6.16). Карточки схожи с коллекциями, но содержат контент и функции. Они часто используются в онлайн-магазинах, сайтах с видеоконтентом и на новостных сайтах. Рис. 6.16. Паттерн Collections and Cards (Коллекции и карточки) Когда использовать Этот паттерн применим, когда необходимо показать списки статей, записей в блогах, видео, приложений или другого сложного контента, особенно если для всех них или их части есть связанные изображения. Предложите пользователю щелкнуть на них или коснуться их для просмотра. 322 Глава 6. Мобильные интерфейсы Зачем Миниатюры изображений делают текстовые списки более удобными для просмотра, потому что они выглядят привлекательно и помогают идентифицировать элементы, которые можно сделать больше по высоте. Условия чтения на мобильных устройствах редко бывают идеальными. Красочные изображения помогают различать элементы, чтобы быстрее просматривать и анализировать списки. Для многих новостных сайтов и блогов этот паттерн — самый удобный способ разместить ссылки на статьи. Такие сайты выглядят более привлекательно и «законченно», чем те, на которых представлены только заголовки статей или фрагменты текста. Как Поместите миниатюру рядом с текстом элемента. На большинстве сайтов и приложений ее помещают слева. Вы можете добавить другие визуальные маркеры, например пятизвездочные рейтинги или значки, обозначающие присутствие людей в социальных сетях. Не бойтесь использовать яркие или насыщенные цвета. Скорее всего, вы не станете создавать столько визуализации для полной версии сайта, но для мобильных устройств это приемлемо. Даже если цвета кажутся слишком яркими, не волнуйтесь — на маленьких экранах насыщенные цвета выглядят лучше, чем на больших. Примеры Многие новостные сайты используют этот паттерн для представления статей; а к ресурсам с видеоконтентом и другим средствам массовой информации он подходит по самой своей природе. Такой способ организации помогает пользователю просматривать список и выбирать элементы. В приложениях Jacobin, NPR и The Atlantic этот паттерн эффективно используется для тематических статей (рис. 6.17). Этот паттерн чрезвычайно универсален. В примере на рис. 6.18 вы увидите возможные варианты миниатюр и текста или списка карточек в разных приложениях. Паттерны 323 Рис. 6.17. Приложения Jacobin, NPR и The Atlantic для iPad 324 Глава 6. Мобильные интерфейсы Рис. 6.18. Приложения Hulu, CNN, Jigsaw и Pinterest для iPad Паттерны 325 Infinite List (Бесконечный список) Что это Демонстрация нового контента в длинном списке по мере его прокрутки вниз, как показано на рис. 6.19. Рис. 6.19. Бесконечная прокрутка Когда использовать Если необходимо показать длинный список сообщений электронной почты, результатов поиска, статей, публикаций из архива или любых других элементов. По сути, список получается «бездонным». Пользователи вероятнее всего найдут нужные элементы в начале списка, но иногда им потребуется прокручивать его довольно долго. 326 Глава 6. Мобильные интерфейсы Зачем Первые несколько страниц результатов загружаются довольно быстро, и долго ждать появления полезной информации не приходится. Загрузка каждой последующей порции тоже не занимает много времени, и этот процесс контролирует пользователь: он сам решает, нужно ли загружать еще данные и когда это делать. Так как новые элементы просто добавляются к уже имеющимся на странице, контекст не меняется — пользователь не переходит на новую страницу с незнакомыми элементами, как при постраничном просмотре результатов поиска. Как При первой отправке страницы или списка на мобильное устройство обрежьте их до разумной длины. Длина может зависеть от размера элементов, времени загрузки и цели пользователя — он собирается прочитать все или только просмотреть список и выбрать нужное (как в результатах поиска)? Внизу прокручиваемого списка поместите кнопку для загрузки и просмотра новых элементов. Укажите, сколько элементов загружать. Можно обойтись и без кнопки. После загрузки первой порции данных начинайте загружать очередную часть по умолчанию. Добавьте ее к уже выведенным на экране элементам после загрузки и после того, как пользователь прокрутит первый список до конца (если же пользователь не будет прокручивать список дальше, не загружайте новые элементы — скорее всего, они ему не нужны). В разработке программного обеспечения такой подход к управлению списками неопределенной длины хорошо известен под названием «ленивая загрузка». Примеры Бесконечные списки используются в приложениях iPhone, включая Mail, а также сторонних приложениях , таких как Facebook (рис. 6.20, слева). В мобильной версии, как и на полноразмерном веб-сайте Facebook, загружается несколько первых страниц обновлений; затем пользователь при необходимости загружает еще. В приложении для работы с электронной почтой Apple (рис. 6.20, справа) бесконечная прокрутка служит для отображения списка имеющихся в ящике электронных писем. Паттерны 327 Рис. 6.20. Facebook и электронная почта Apple iOS Generous Borders (Больше воздуха) Что это Свободное пространство вокруг тех элементов пользовательского интерфейса, которые можно нажимать. Большие поля и пробелы на устройствах с сенсорными экранами вокруг кнопок, ссылок и любых элементов управления, реагирующих на касание. Рис. 6.21. Больше воздуха 328 Глава 6. Мобильные интерфейсы Когда использовать Если на экране есть кнопки с текстовыми ярлыками, списки элементов, обычные текстовые ссылки — в общем, любой небольшой объект, которого касается пользователь. Зачем Объекты должны быть достаточно крупными, чтобы без труда попадать по ним пальцем. В частности, они должны быть достаточной высоты, что бывает сложно реализовать для текстовых кнопок и ссылок. Как Расположите вокруг каждого объекта широкое поле, рамки и пустое пространство, чтобы объект был достаточно большим и его было удобно касаться. Одна из хитростей, позволяющая добиться этого, — сделать реагирующим на касание пространство, окружающее объект. Размер самой кнопки не изменится, и она не будет выбиваться из дизайна, но вы получите несколько дополнительных сенсорных пикселей. Насколько велики должны быть эти объекты? Хороший вопрос. В идеале элемент управления должен быть достаточно большим, чтобы на него без труда могли нажимать все люди. У кого-то крупные пальцы, у кого-то нарушена координация — это добавляет сложности. Кроме того, мобильными устройствами часто пользуются в неидеальных условиях: при плохом освещении, в движущемся транспорте, отвлекаясь на что-то еще. Итак, все же какие размеры оптимальны? Это зависит от типа устройства, для которого вы разрабатываете продукт, и от разрешения экрана. Ориентиры следующие: 48 × 48 dp (9 мм) для устройств Android; 44 × 44 pt для Apple iOS. Примеры В приложении Autodesk Sketchbook (рис. 6.22, слева) для iPhone предусмотрено достаточно много места вокруг сенсорных объектов. Все приложение создает впечатление расслабленности и свободы. В мобильном приложении Zoom (рис. 6.22, справа) большие сенсорные кнопки, по которым легко попасть пальцем. Приложение Instacart (рис. 6.23) похоже на примеры выше, хотя его визуальный стиль заметно отличается. Кнопки для основных действий — «Add item» (добавить в корзину), элементы навигации — отличаются друг от друга. Рис. 6.22. Приложения Autodesk Sketchbook и Zoom Рис. 6.23. Приложение Instacart 330 Глава 6. Мобильные интерфейсы Loading or Progress Indicators (Индикатор загрузки или Индикатор выполнения) Что это Анимация микровзаимодействия (одиночное событие на устройстве), которая используется для информирования пользователя о том, что что-то должно произойти, но еще не отобразилось на экране. Их можно использовать, чтобы указывать неопределенное или предполагаемое количество времени, которое потребуется для загрузки экрана или для выполнения задачи и ее вывода на экран. Грамотно спроектированные индикаторы сглаживают впечатление от медленной загрузки и даже могут формировать восприятие бренда. Когда использовать Если пользователю приходится дожидаться загрузки контента, особенно на странице, которая динамически отвечает на его действия. Зачем Данные через мобильный интернет могут загружаться медленно и неравномерно. Показывайте все, что уже удалось загрузить, чтобы пользователь мог с этим работать. В целом, индикаторы выполнения создают впечатление, что время загрузки сокращается. Они демонстрируют, что в ответ на жест пользователя действительно что-то происходит, особенно когда индикаторы появляются точно там, куда пользователь только что нажал. Как Если страницу удалось загрузить быстро, покажите ее сразу, но если какой-то элемент загружается медленно (например, тяжелое изображение или видео), выведите ненавязчивый анимированный индикатор выполнения в том месте, где в результате появится загружаемый элемент. (На мобильной платформе может быть уже предусмотрен стандартный индикатор.) Если действие пользователя приводит к обновлению части страницы или загрузке новой страницы, располагайте индикатор выполнения прямо поверх обновляемого контента. Примеры Trulia (рис. 6.24, слева) — это приложение для работы с недвижимостью, которое использует бесконечный цикл в верхней части экрана, чтобы указать, что экран загружается, и заполнители изображений, чтобы пользователь знал, что что-то должно загрузиться. Паттерны 331 SoundHound (рис. 6.24, справа) — приложение, с помощью которого можно узнать, какая музыка играет в данный момент. Когда пользователь нажимает кнопку «Слушать», запускается привлекательная и простая анимация, обозначающая, что система прослушивает композицию и ищет совпадение в своей базе. Рис. 6.24. Экран загрузки Trulia и анимированный индикатор выполнения SoundHound Когда на устройстве iPhone устанавливается новое приложение, поверх его значка выводится миниатюрный круглый индикатор выполнения, указывающий, сколько еще ждать завершения загрузки (рис. 6.25). Он выглядит довольно симпатично, а его назначение понятно любому с первого взгляда. 332 Глава 6. Мобильные интерфейсы Рис. 6.25. Индикатор выполнения во время установки приложения на iPhone Richly Connected Apps (Тесно связанные приложения) Что это Использование функций мобильного устройства. Например, переадресация на другие приложения, такие как камера, набор номера, карта или браузер; и предварительное заполнение форм хранения паролей и информации кредитных карт актуальными данными пользователя. Когда использовать Если данные в разных мобильных приложениях можно легко «связать», например через телефонные номера и гиперссылки. Более сложный вариант — возможность сохранять изображения (с использованием камеры устройства), звук или видео или подтягивать данные из соцсетей, Паттерны 333 например имя пользователя в Facebook или Twitter. В любом случае, ваше приложение должно уметь перенаправить пользователя в другое приложение для выполнения действий, связанных с устройством. Зачем Пользователи могут работать только в одном мобильном приложении за раз, даже если запущено несколько. Необходимость вручную переключаться между ними раздражает. Мобильные устройства зачастую обладают достаточным функционалом и понимают контекст, чтобы перенаправлять пользователя из одного приложения в другое. На момент написания этой главы переносить информацию из одного приложения в другое на мобильных устройствах непросто. На настольном компьютере данные можно ввести с клавиатуры, скопировать и вставить или даже выбрать из файловой системы. На мобильной платформе таких возможностей нет. Поэтому возникает необходимость в автоматическом перемещении данных. Как Отслеживайте данные, которые можно связать с другими приложениями или службами. Когда пользователь касается элемента управления, или выделяет такие данные, или использует специальные возможности приложения, открывайте связанное приложение для обработки таких данных. Вот несколько примеров. Предусмотрите все возможные способы передачи данных в другое приложение: телефонные номера — в программу для набора номера; адреса — в карту или список контактов; даты — в календарь; адреса электронной почты — в приложение для работы с почтой; гиперссылки — в браузер; музыку и видео — в медиаплеер. Кроме того, предусмотрите возможность, например, делать снимки или просматривать географическую карту, не выходя из приложения. Какие-то из этих операций можно выполнять и на настольном компьютере, однако сама природа мобильных устройств упрощает выбор и запуск «правильного» приложения для данных определенного типа. Вам не нужно выбирать, какой почтовый клиент или какую адресную книгу использовать и т. п. К тому же, во 334 Глава 6. Мобильные интерфейсы многих мобильных устройствах есть функции телефона, камеры, определения местоположения. Примеры Citizen (рис. 6.26) — приложение для отслеживания событий в реальном времени, которое использует данные геолокации, чтобы сообщать пользователю о преступлениях и других происшествиях в районе, где он находится. Когда пользователь сам хочет добавить новость, приложение использует данные о его местоположении и активирует камеру телефона или запись видео, чтобы пользователь мог опубликовать пост прямо из приложения. Рис. 6.26. Приложение Citizen Simple (рис. 6.27) — это банковское приложение. Чтобы привязать чек, активируется функция камеры и информация с чека считывается приложением. Приложение Google Calendar (рис. 6.28) интегрируется с телефоном, картами, списками контактов и электронной почтой. Паттерны 335 Рис. 6.27. Интеграция приложения Simple с камерой Рис. 6.28. Приложение Google Calendar 336 Глава 6. Мобильные интерфейсы Станьте мобильными Как видите, разработка интерфейсов для смартфонов и планшетов — далеко не последнее дело, и она чрезвычайно важна для успеха цифровых продуктов. Мобильный веб-сайт или приложение, которое вы создаете, могут стать основным способом взаимодействия пользователя с вашим брендом, поэтому уделите особое внимание мелочам, микровзаимодействиям, удобству использования и контексту применения мобильного продукта. ГЛАВА 7 Списки В этой главе мы рассмотрим только одну тему: интерактивное отображение списков. Почему спискам посвящена целая глава? — спросите вы. В интерфейсах списки встречаются повсеместно: списки статей, страниц, фотографий, видео, карт, книг, игр, фильмов, ТВ-программ, музыкальных композиций, товаров, электронных писем, записей в блогах, обновлений, постов, комментариев, результатов поиска, людей, событий, файлов, документов, приложений, ссылок, инструментов, моделей и действий. Разнообразных списков очень и очень много. Они есть практически в любом интерфейсе. После прочтения этой главы вы получите о них четкое представление, поймете принципы их проектирования и сможете выбрать лучший вариант списка для своего интерфейса. Когда нужны списки Прежде чем перейти к дизайну списков, полезно проанализировать их практическое применение. Что пользователи будут делать со списком? Представьте следующие возможные сценарии. Обзор контента. Что список может рассказать пользователям? Иногда им необходимо пролистать его целиком, чтобы понять, что в нем содержится. Для этого полезно дополнить текстовые списки изображениями или наглядной визуальной организацией. Просмотр элементов списка. Будет ли пользователь изучать отдельные элементы списка по порядку или вразнобой? Будет ли он нажимать или щелкать на них, чтобы открыть? Если да, то необходимо предусмотреть простой способ, чтобы либо вернуться к списку и выбрать другой элемент, либо перейти сразу к следующему элементу. Поиск конкретного элемента. Пользователь ищет что-то конкретное? Поиск должен быть простым, с минимумом нажатий, прокруток и переходов вперед-назад по страницам. 338 Глава 7. Списки Сортировка и фильтр. Эти функции полезны, если пользователь ищет элемент или группу элементов с заданными характеристиками (например, события в интервале времени от Х до Y) либо анализирует закономерности набора данных. Добавление, удаление, изменение порядка или категории элементов. Элементы в списке необходимо поменять местами? Пользователь является владельцем списка? В большинстве приложений и на большинстве сайтов владельцы списков могут сами перемещать элементы внутри списка, располагая их в желаемом порядке или формируя группы. Необходимо также предусмотреть функции редактирования и удаления: либо с использованием возможностей платформы (множественный выбор элементов при зажатой клавише Shift или касание в режиме редактирования), либо добавив к элементам поле для флажков, которые можно устанавливать, чтобы выбирать необходимые элементы. Возвращаясь к информационной архитектуре В главе 2 мы обсуждали информационную архитектуру: организацию информации независимо от ее визуального представления. Вернемся к этому вопросу. Допустим, вам необходимо вывести на страницу список. Какими невизуальными характеристиками он обладает? Длина • Какой длины список? Поместится ли он в отведенное ему пространство? • Может ли он оказаться «бесконечным»? Результаты поиска в Сети или в обширном архиве данных часто формируют настолько длинный список, что пользователю никогда не пролистать его до конца. Порядок • Упорядочен ли список? Например, по алфавиту или по порядку чисел. (См. главу 2, чтобы узнать больше о способах организации данных и контента.) • Потребуется ли пользователю изменить порядок элементов списка? Если да, то как? • Если вы выводите упорядоченный список, возможно, следует использовать группировку — или нет? Возьмем, к примеру, архив записей в блоге: статьи в нем обычно организованы в хронологическом порядке, и в большинстве случаев по году и месяцу. Пользователь, который ищет конкретную статью, может помнить, что она была опубликована до статьи Х, но после статьи Y, но не помнить точный месяц публикации. Поэтому группировка по месяцам затруднит поиск, и в этом случае предпочтительнее использовать плоский список, упорядоченный по времени. Возвращаясь к информационной архитектуре 339 Группировка • Распределены ли элементы списка по категориям? Понятна ли такая разбивка? Если нет, стоит добавить визуальное или текстовое пояснение. • Входят ли категории в состав более крупных категорий? Иными словами, присутствует ли в списке многоуровневая иерархия, как в файловой системе? • Допустимы ли другие варианты разбивки на категории — например, для разных пользователей или случаев применения? Могут ли пользователи создавать свои собственные категории? Типы элементов • Что представляют собой элементы списка? Они простые или сложные? Или они служат для представления более крупных элементов, например заголовки для статей или превью для видеороликов? • Сильно ли отличаются друг от друга элементы в списке (например, какието из них простые, а какие-то сложные)? Или они однородны? • Есть ли для каждого элемента соответствующее изображение? • Имеет ли каждый элемент строгую структуру полей? Представляет ли такая структура значение для пользователя — или, может быть, можно сортировать элементы по определенным полям? (Такую структуру обычно имеют электронные письма: поля «от кого», «тема», метка времени — и эта структура выводится в списке писем.) Взаимодействие • Выводить ли в списке элемент целиком или же только краткие сведения о нем (например, имя и первые несколько фраз из письма)? • Что, предположительно, будет делать пользователь с элементами списка? Просматривать или выбирать для подробного изучения или для совершения определенных действий? Или же элементы списка — это кнопки или ссылки, которые необходимо нажать? • Может ли пользователю понадобиться выбрать сразу несколько элементов из списка? Динамическое представление • Как долго загружается весь список? Практически мгновенно или это потребует определенного времени? • Сразу ли отображаются изменения в списке? Значит ли это, что новые элементы автоматически добавляются в начало списка? От ответов на эти вопросы будет зависеть выбор одного из многочисленных вариантов дизайна списка. Конечно, при выборе следует также учитывать и тип 340 Глава 7. Списки контента (блог должен отличаться от, скажем, списка контактов), тип макета страницы и возможные ограничения. Что вы пытаетесь показать? Вопросы о взаимодействии, приведенные выше, определяют практически все дальнейшие решения. К примеру, полностью интерактивный список — с функциями множественного выбора, перетаскивания, редактирования элементов и т. д. — является ключевым элементом интерфейса. Такой список подходит для приложений для работы с фотографиями, клиента электронной почты или других приложений со сложным функционалом, в которых пользователи могут создавать и изменять свой контент. В интерфейсах такого типа и некоторых других в списках выводятся только эскизы или миниатюры элементов, а элементы целиком открываются только при их выборе пользователем. Существует минимум три способа организовать такое представление. «Где выводить подробное представление элемента списка, когда пользователь выбирает его?» Используя паттерн Two-Panel Selector or Split View (Двухпанельный селектор, или Раздельный просмотр), можно выводить подробности рядом с элементом. Этот вариант удобен при поиске и просмотре элементов, поскольку все детали видны сразу. При этом сохраняется контекст, поскольку не нужно перезагружать страницу или переходить на новую. При использовании паттерна One-Window Drilldown (Детализация в одном окне) представление списка заменяется подробным представлением выбранного элемента. Этот вариант часто используется в ограниченных пространствах, когда не хватает места, чтобы разместить двухпанельный селектор — например на экранах мобильных устройств или модульных панелях. Пользователь как бы перепрыгивает со страницы списка на страницу элемента, поэтому вести поиск и просмотр становится сложнее. List Inlay (Раскрывающийся список) позволяет включить подробности в сам список. Когда пользователь щелкает на элементе или касается его, список раскрывается и в нем выводятся детали. Этот паттерн также поддерживает возможности поиска и просмотра, но, если открыто много элементов, просматривать список целиком может быть неудобно. Обратимся к самим элементам списка. Какие подробности выводить для каждого элемента, если подразумевается, что пользователь будет нажимать на него, чтобы изучить? Здесь тоже могут быть три самых частых варианта: пользователь хочет быстро просмотреть весь список, изучить список или найти в нем нужный элемент. Что вы пытаетесь показать? 341 Если нужен конкретный элемент, например определенный телефон из списка контактов, можно выводить только название элемента. Но в случаях, подразумевающих изучение элементов, например новых статей на сайте, дополнительные подробности могут повысить интерес пользователя (до определенного предела, разумеется). Если для элемента есть связанное изображение, добавьте его эскиз. «Как выводить графические элементы?» Cards (Карточки) содержат текст, картинку и функциональный элемент в одном представлении. В основе этого паттерна лежит Grid of Equals (Выравнивание по сетке), см. главу 4. Thumbnail Grid (Сетка миниатюр) — типичный паттерн для представления изображений. Двумерная сетка небольших картинок очень наглядна. Она привлекает внимание как центральный элемент страницы. Миниатюры изображений часто сопровождаются текстом, но он вторичен по отношению к картинке. Здесь тоже задействованы принципы выравнивания по сетке. Carousel (Карусель) — альтернатива сетке миниатюр, занимающая меньше места на странице. Она линейна, а не двумерна, и чтобы увидеть более 1–2 объектов, пользователь должен использовать прокрутку. В зависимости от варианта дизайна карусель предусматривает больше места для представления выделенного или центрального элемента списка, чем сетка миниатюр. Очень длинные списки сложно проектировать. Помимо технических сложностей, связанных с длительной загрузкой и размером экрана, необходимо решить не менее, а то и более сложные вопросы взаимодействия с пользователем: как перемещаться по списку и изучать его? Как найти нужный элемент, особенно если текстовый поиск не эффективен? С ними помогут справиться следующие техники и паттерны, применимые ко всем описанным выше вариантам представления элементов (кроме, пожалуй, карусели, в которой больше ограничений). «Как управлять очень длинным списком?» Используя паттерн Pagination (Разбивка на страницы), можно разделить список на части, а пользователь будет самостоятельно загружать эти части по необходимости. Так часто делают на сайтах — там этот паттерн просто и удобно применять. Он особенно полезен, если велика вероятность, что пользователь найдет желаемое на первой странице, поскольку обычно люди не хотят их долго пролистывать. Также можно использовать этот паттерн, если загрузка всего списка займет слишком много времени или места. При таком способе организации добавьте указатель общего количества страниц в списке, а также возможность перемещаться по страницам, пропуская некоторые из них. Альтернатива разбиению на страницы — часто используемый в мобильном дизайне одностраничный паттерн Infinite List (Бесконечный список) (см. главу 6). 342 Глава 7. Списки При таком способе представления загружается одна часть списка, после которой размещается кнопка для загрузки следующей части. Пользователь остается на этой же странице. Этот паттерн полезен, если вы не знаете окончательную длину списка или если он бесконечный. Как вариант, части бесконечного списка могут загружаться автоматически, когда пользователь достигает конца уже загруженной части. См. паттерн Continuous Scrolling (Непрерывная прокрутка). Если прокручиваются очень длинный алфавитный список или диапазоны дат, используйте Alpha/Numeric Scroller (Алфавитную/числовую полосу прокрутки): в ней на полосе прокрутки расположены буквы алфавита и можно перейти прямо к нужной букве. Для поиска конкретных элементов очень важно предусмотреть поле «Найти». Функция фильтра — отсев элементов, не удовлетворяющих заданным критериям, — помогает сократить список до удобного размера. До сих пор речь шла о плоских списках — таких, которые не содержат подкатегорий, вложений и иерархии. Однако списки могут изменяться; возможно, вы захотите разделить элементы списка на категории. «Как выводить иерархические списки?» Паттерн Titled Sections (Именованные разделы) хорошо работает для отдельных уровней вложений. Просто разделите список на части и дайте им названия, а также позвольте пользователям упорядочивать элементы внутри этих разделов, чтобы не нарушать разделение. Если разделов не очень много, используйте Accordion (Аккордеон), чтобы пользователи могли закрыть разделы, которые им не нужны. Стандартным решением для нескольких уровней в иерархии являются деревья. Они обычно представлены в виде упорядоченной иерархической структуры со значками «+» и «–» (чаще всего встречаются в Windows) или вращающимися треугольниками. Уровни могут разворачиваться и сворачиваться автоматически или по действию пользователя. Древовидные структуры используются во многих интерфейсах. Далее мы подробно рассмотрим решения для представления списков в веби мобильных пользовательских интерфейсах. Паттерны Теперь, когда вы определили цель выводимых списков, давайте посмотрим, когда и как их использовать. Two-Panel Selector or Split View (Двухпанельный селектор, или Раздельный просмотр). Паттерны 343 One-Window Drilldown (Детализация в одном окне). List Inlay (Раскрывающийся список). Cards (Карточки). Thumbnail Grid (Сетка миниатюр). Carousel (Карусель). Pagination (Разбивка на страницы). Jump to Item (Прыжок к элементу). Alpha/Numeric Scroller (Алфавитная/числовая полоса прокрутки). New-Item Row (Строка для нового элемента). Two-Panel Selector or Split View (Двухпанельный селектор, или Раздельный просмотр) Что это Также известный как Split View (Раздельный просмотр), данный паттерн состоит из двух расположенных рядом панелей интерфейса. В первом отображается список элементов, которые пользователь может выбрать по своему желанию; во втором — содержимое выбранного элемента, как показано на рис. 7.1. Рис. 7.1. Сайт Spotify 344 Глава 7. Списки Когда использовать Если вам необходимо показать список элементов. Для каждого элемента есть важные подробности — содержимое электронного письма, длинная статья, полноразмерное изображение, вложенные элементы (если список содержит категории или папки) или сведения о размере и дате файла. Вы хотите, чтобы пользователи всегда видели общую структуру списка и могли быстро и легко перемещаться между его элементами. Возможность просматривать сразу несколько элементов не нужна. Экран устройства, для которого вы проектируете интерфейс, должен быть достаточно большим, чтобы на него можно было вывести одновременно две панели; самые маленькие экраны смартфонов не годятся для использования этого паттерна, но на более крупных смартфонах или планшетах его можно реализовать. Зачем Этот паттерн не сразу понятен, но он очень популярный и эффективный. Пользователи легко усваивают, что им требуется выбрать элемент на одной панели, чтобы увидеть его содержимое на другой. Они запоминают эту модель, работая на сайтах или в почтовых клиентах, и используют ее в других приложениях. Когда две панели располагаются рядом друг с другом, общая структура страницы остается легко заметной (сколько осталось непрочитанных сообщений?), и при этом легко переключить внимание на отдельный элемент (о чем это письмо?). У такой структуры есть несколько преимуществ перед другими способами организации, как, например, два отдельных окна в паттерне One-Window Drilldown (Детализация в одном окне). Он требует от пользователя меньше усилий. Глазам не нужно преодолевать большие расстояния между панелями, а выделение происходит одним щелчком или нажатием клавиши, а не переходом на другую страницу, что требует дополнительных щелчков мышью. Он сокращает когнитивную нагрузку. Когда контент на странице меняется полностью или частично (как в случае с паттерном One-Window Drilldown (Детализация в одном окне)), пользователю приходится сосредоточивать все свое внимание на новом контенте. Когда страница по большей части остается неизменной, как в паттерне Two-Panel Selector (Двухпанельный селектор), пользователь обращает внимание только на небольшой фрагмент страницы, который не меняется. Значительного изменения контекста не происходит. Пользователю не требуется запоминать много информации. Вернемся к примеру с электронным письмом: если пользователь видит только текст письма, никакие другие элементы на странице не могут напомнить ему контекст. Если Паттерны 345 он важен, пользователю придется или запоминать его, или возвращаться к представлению списка. Но если список виден тут же на странице, запоминать ничего не придется, достаточно просто посмотреть. В этом случае список выступает в роли указателя «Вы находитесь здесь». Это быстрее, чем загружать новую страницу для каждого элемента, как в случае с паттерном One-Window Drilldown (Детализация в одном окне). Как Поместите список с возможностью выделения одного или нескольких элементов вверху или в левой части страницы, а панель с подробным представлением элементов — в правой части, как показано на рис. 7.2. Такая организация использует преимущества визуального потока, поскольку большинство пользователей читают слева направо (поэтому меняйте порядок расположения панелей для пользователей, читающих справа налево). Рис. 7.2. Приложение News для Apple iOS При выборе элемента выводите его подробности или содержимое на второй панели. Выделение элемента должно осуществляться одним щелчком. Предоставьте пользователям возможность менять выбор элементов с клавиатуры — 346 Глава 7. Списки чаще всего для этого используют клавиши со стрелками, — так они потратят меньше усилий и времени; этот вариант также подойдет для продуктов, которые не предусматривают использование мыши. Сделайте выделение очевидным. Во многих инструментах предусмотрены способы сделать это, например инвертирование фона для выбранного элемента. Если этот вариант не подходит или такого инструмента у вас нет, попробуйте изменить цвет или яркость — это поможет визуально отличить выделенные элементы от остальных. Как должен выглядеть список с возможностью выделения элементов? Это зависит от общей структуры контента или от выполняемой задачи. Например, в большинстве файловых систем пользователи видят иерархическую структуру, то есть то, как организованы файлы. В решениях для редактирования видео или создания анимации используются интерактивные шкалы времени. В графических пользовательских интерфейсах используются холсты с разметкой; свойства выделенных на них элементов выводятся в редакторе свойств рядом с холстом. В двухпанельном селекторе для вкладок используется похожая семантика: в одной области расположены селекторы, а в другой, рядом с ними, содержимое выбранного селектора. Аналогично, похожи между собой паттерны List Inlay (Раскрывающийся список) и Accordion (Аккордеон), а также One-Window Drilldown (Детализация в одном окне) и Menu Screen (Страница меню). Примеры Во многих клиентах электронной почты этот паттерн используется для вывода в одном представлении списка писем и выбранного письма. Такие представления лучше располагать по ширине всей страницы, поэтому размещайте список элементов вверху страницы, а не слева (рис. 7.3). Приложение Apple Photos (рис. 7.4) отображает различные папки и категории изображений в двухпанельном селекторе. Результатом является второй список изображений. Когда пользователь выбирает изображение, заменяется все окно целиком; см. паттерн One-Window Drilldown (Детализация в одном окне). Паттерны 347 Рис. 7.3. Клиент электронной почты Google Рис. 7.4. Приложение Apple Photos 348 Глава 7. Списки One-Window Drilldown (Детализация в одном окне) Что это Список элементов в отдельном окне или на отдельной странице. При выборе элемента список заменяется подробным представлением этого элемента, как показано в примере на рис. 7.5. Рис. 7.5. Клиент электронной почты Mac для iPhone Когда использовать Если вы разрабатываете веб- или мобильный интерфейс и вам необходимо показать список элементов. Для каждого элемента есть важные подробности — содержимое электронного письма, длинная статья, полноразмерное изображение или сведения о размере и дате файла. Как вариант, можно просто увеличить размер элементов списка и подробных сведений о нем. Вам потребуется пространство всей страницы, чтобы показать список, а затем подробные сведения. Обычно так выглядят онлайн-форумы, на Паттерны 349 которых всю площадь страницы занимает список тем, а сами обсуждения выводятся на отдельной странице с прокруткой. Зачем Такой вариант организации элементов списка и подробных сведений о них может быть единственно подходящим для очень ограниченных пространств. В этом случае каждое отдельное представление может занять все доступное пространство страницы. Неглубокая иерархия паттерна One-Window Drilldown (Детализация в одном окне) позволяет не углубляться в интерфейс и быстро возвращаться к исходному списку. Как Создайте список в формате, который вы считаете наиболее подходящим: простые текстовые названия, карточки, строки, дерево или схема — любой из этих вариантов отлично подходит к данному паттерну, как и другие форматы. Если необходимо, добавьте вертикальную полосу прокрутки, чтобы уложиться в отведенное пространство. Когда пользователь щелкает, касается или каким-то другим образом выбирает один из элементов списка, вместо списка выводите на экран сведения об элементе или его содержимое. Добавьте в это новое представление кнопку «Назад» или «Отмена», ведущую обратно на экран списка (если только они уже не предусмотрены на самом устройстве). На странице элемента списка могут быть и другие варианты навигации, такие как подробные сведения об элементе, переход к элементам третьего уровня (в иерархическом списке) или к соседнему элементу списка (предшествующему или последующему). В каждом из этих случаев выводите на экран полностью новое представление и убедитесь, что вернуться назад не составляет труда. Один из недостатков данного паттерна в том, что для перехода от одного элемента к другому пользователь вынужден постоянно возвращаться к главному списку. Ему приходится много щелкать на ссылках и кнопках, чтобы изучить несколько элементов, а быстро перейти от одного элемента к другому (как в двухпанельном селекторе) или с легкостью сравнить их (как в раскрывающемся списке) не получится. Справиться с этим помогут ссылки «Назад» и «Далее», ведущие прямо на страницы предыдущего и следующего элементов. Примеры Этот паттерн широко используется в мобильном дизайне. Сравните мобильную версию почтового клиента (рис. 7.5) с его десктопным аналогом. Обратите внимание, что при таком подходе с детализацией в одном окне требуется выводить 350 Глава 7. Списки больше текста в списке, чтобы пользователю хватало контекста для идентификации и сортировки сообщений. В примере на рис. 7.6 читатель может просмотреть все комментарии к посту на Reddit и, щелкнув на стрелке «назад» в шапке, легко вернуться к списку тем. Рис. 7.6. Сайт Reddit List Inlay (Раскрывающийся список) Что это Список элементов, представленный в форме строк одного столбца. Когда пользователь выбирает элемент, подробные сведения о нем выводятся прямо внутри списка, раздвигая соседние элементы (рис. 7.7). Необходимо обеспечить, чтобы элементы можно было открывать и закрывать независимо друг от друга. Паттерны 351 Рис. 7.7. Раскрывающиеся элементы списка на сайте Kayak Когда использовать Если вам необходимо показать список элементов. Для каждого элемента есть важные подробности — содержимое электронного письма, длинная статья, полноразмерное изображение или сведения о размере и дате файла и т. д. Эти детали занимают не слишком много места, но и не так мало, чтобы выводить их в самом списке. 352 Глава 7. Списки Вы хотите, чтобы пользователи всегда видели общую структуру списка и могли быстро и легко перемещаться между его элементами. Возможно, им понадобится одновременно видеть подробнее два или более элементов, например для сравнения. Для организации такого списка лучше использовать вертикальные столбцы, а не сетку. Зачем В раскрывающемся списке подробные сведения об элементах отображаются в контексте самого списка. Пользователь видит соседние элементы, что помогает ему понимать и использовать открывшиеся данные. Кроме того, можно одновременно просматривать несколько элементов. Это невозможно в двухпанельном селекторе, при детализации в одном окне, в панелях, всплывающих при наведении курсора, и в большинстве других форматов отображения подробных сведений об элементе списка. Если в вашем приложении часто требуется сравнивать элементы, возможно, данный паттерн — лучший выбор. Поскольку раскрывающийся список образует аккуратный вертикальный столбец, он хорошо сочетается с двухпанельным селектором. Это удобно для представления трехуровневой иерархии. Вспомните, например, как выглядит почтовый клиент или RSS-лента: сообщения или статьи можно выводить в раскрывающемся списке, а блоки с элементами (почтовые ящики, группы, фильтры) — рядом, в двухпанельном селекторе. Как Сформируйте столбец списка элементов. Когда пользователь щелкает на элементе, разверните его и выведите дополнительные сведения об элементе прямо внутри списка. Таким же жестом элемент должен сворачиваться. Когда элемент открывается, следующие элементы должны сдвигаться ниже, освобождая пространство для него. Поскольку список с открытыми элементами может стать очень длинным, нужно предусмотреть полосы прокрутки. Добавьте элемент управления для скрытия подробностей (кнопку «Закрыть» или крестик). В некоторых реализациях его размещают внизу панели подробностей, однако часто удобнее поместить его наверху, так как деталей может оказаться много и тогда пользователю будет неудобно прокручивать их до конца. Поместите закрывающий элемент управления рядом с открывающим (или замените один другим). Так пользователю не придется долго водить курсором, если он захочет открыть элемент, изучить подробности и снова закрыть. При разворачивании и сворачивании элемента используйте Animated Transition (Анимированный переход), чтобы удержать внимание пользователя на открытом элементе. Если приложение поддерживает возможность редактирования Паттерны 353 элементов, то в панели подробностей можно поместить редактор, а не сведения об элементе (или все вместе). Раскрывающийся список работает по принципу аккордеона: все находится в одном столбце, а панели разворачиваются и сворачиваются в пределах этого столбца. В этом смысле двухпанельный селектор схож с набором вкладок, а детализация в одном окне — со страницей меню. Примеры В приложении Voice Memos для Apple iOS (рис. 7.8) используется раскрывающийся список, чтобы скрыть функциональные возможности и отображать элементы управления воспроизведением и записью только тогда, когда пользователь нажимает на запись в списке. Рис. 7.8. Приложение Voice Memos для Apple iOS Приложение Transit (рис. 7.9) — пример уникального гибридного использования раскрывающегося списка в сочетании с модальным окном. Когда пользователь видит ближайшие к нему маршруты, он может нажать на любой из них, и рас- 354 Глава 7. Списки крывшийся список будет содержать не только время прибытия следующего автобуса или поезда, но и остановки на маршруте. Рис. 7.9. Приложение Transit Что почитать еще Билл Скотт и Тереза Нил описали эту технику в своей книге Designing Web Interfaces (O’Reilly, 2009). Раскрывающийся список — это одна из техник вложения, включающая в себя вкладки диалогов (Dialog Inlays) и вкладки деталей (Detail Inlays). Cards (Карточки) Что это Карточки — это один из самых популярных и гибких элементов пользовательского интерфейса. Карточки — это автономные компоненты, которые содержат изображения, текст, а иногда и действия. Карточки напоминают игральные Паттерны 355 карты, отсюда и название. Эти стильные элементы часто используются на новых веб-сайтах и в мобильных приложениях, разработанных по принципам отзывчивого дизайна (с возможностью изменения размера) с использованием библиотек популярных UI-элементов. На рис. 7.10 показан пример использования карточек на сайте Pinterest. Рис. 7.10. Веб-сайт и мобильное приложение Pinterest Когда использовать Если вы выводите список разнородных элементов со схожими атрибутами. Например, для всех элементов необходимо включить изображение, текст, способ добавить в избранное или поделиться элементом, а также ссылку на страницу с деталями. Если вам нужно показать коллекцию элементов, но каждый элемент может отличаться по размеру и/или соотношению сторон. Зачем Карточки часто используются в мобильном и веб-дизайне, поэтому пользователь, скорее всего, уже имел с ними дело. Карточки позволяют гибко настраивать макет или размер области просмотра (тип экрана). Как Подумайте, что пользователь будет делать со списком элементов. Что общего у этих элементов? Для всех есть изображение, название и краткое описание? 356 Глава 7. Списки Может, они показывают рейтинг? Вы хотите, чтобы каждый элемент ссылался на страницу с его подробным описанием? Была возможность добавить товар в корзину? Поделиться товаром в социальных сетях? Для всех ли элементов будут предусмотрены эти возможности? Если да, то карточки, скорее всего, лучший способ представления списка. Полезно при разработке дизайна взять самый крупный элемент и создать его макет. Потом сделать то же самое для самого мелкого элемента. Настраивайте макет до тех пор, пока дизайн не будет выглядеть привлекательно, а информация не будет удобочитаемой и понятной для обоих размеров. Решите, какие действия будут отображаться на ярлыках, а какие — в виде текстовых ссылок. Используйте реальные фото, чтобы определить подходящую ориентацию (портретную или альбомную) для того контента, который вы будете показывать. Примеры На сайте и в мобильном приложении Airbnb (рис. 7.11) карточки используются для отображения списков домов и квартир. Применение этого стиля обеспечивает единообразный внешний вид, а также привлекательный способ просмотра информации, когда все элементы выглядят однородно и не выделяются среди других. На сайте Uber Eats (рис. 7.12) у карточек с фотографией, названием ресторана и оценками пользователей отсутствуют рамки. Рис. 7.11. Веб-сайт и мобильное приложение Airbnb Паттерны 357 Рис. 7.12. Веб-сайт Uber Eats Что почитать еще Больше информации о карточках можно узнать, пройдя по этим ссылкам: https://material.io/design/components/cards.html https://getbootstrap.com/docs/4.0/components/card Thumbnail Grid (Сетка миниатюр) Что это Список элементов в форме сетки небольших однотипных изображений, как показано на рис. 7.13. Когда использовать Если элементам списка соответствуют небольшие индивидуальные визуализации: изображения, логотипы, снимки экрана, уменьшенные фотографии и т. п. Они схожи по размеру и стилю. Список может быть длинным, и тогда его удобно делить на именованные разделы. 358 Глава 7. Списки Рис. 7.13. Приложение Google Photos Если для каждого элемента вы хотите вывести некоторые метаданные (сопутствующую информацию), такие как название и дата создания, но этой информации будет немного — изображение займет почти все пространство, выделенное для представления элемента. Пользователи захотят увидеть весь список и быстро пролистать его в поисках интересующего элемента. Также им может понадобиться выбрать один или несколько элементов, чтобы переместить их, удалить или просмотреть. Зачем Сетка миниатюр — это компактное, привлекательное представление большого количества элементов. Этот паттерн — разновидность паттерна Выравнивание Паттерны 359 по сетке, он создает визуальную иерархию равнозначных элементов, а их расположение в виде упорядоченной сетки привлекает внимание. Может показаться, что список элементов проще представить в виде текста, но очень часто изображения оказывается легче распознавать и выделять, чем текст. Квадратных картинок легко касаться пальцем (если речь идет о сенсорном экране), они также удобны для тех, кто использует мышь или джойстик. Этот паттерн хорошо работает на экранах смартфонов и планшетов. Как Задайте всем миниатюрам примерно одинаковые размеры — сетка будет выглядеть аккуратнее. Разместите текстовые метаданные рядом с картинками, но используйте мелкий шрифт, чтобы визуальный акцент оставался на изображении. Сетка миниатюр выглядят привлекательнее, когда все картинки имеют одинаковую ширину и высоту. Если у вас изображения разных размеров, с разными соотношениями сторон или очень большого размера, то для создания аккуратных миниатюр может потребоваться дополнительная обработка. Постарайтесь подобрать такой размер и соотношение сторон, с которыми все изображения будут смотреться удачно, даже если часть рисунков придется обрезать. (Уменьшить размер изображения просто; правильно кадрировать — нет. Будьте аккуратны и не нарушайте целостность изображения. Выбирайте для миниатюры самый подходящий фрагмент.) Исключение — когда размер и пропорции изображения важны для пользователя. Например, среди личных фотографий могут быть снимки как с портретной, так и с альбомной ориентацией. Такие изображения не нужно кадрировать под идеальный формат миниатюры — пользователь захочет видеть их такими, какие они есть! С другой стороны, в галерее продуктов (таких как туфли или рубашки) все миниатюры должны иметь одинаковую ширину и высоту, а продукты — выглядеть единообразно. Примеры В macOS Finder можно увидеть большое разнообразие миниатюр, представляющих разные типы содержимого каталогов (рис. 7.14). Для файлов изображений выводится сжатая версия соответствующих изображений; каталоги представлены простым значком папки. Если графическое представление содержимого файла недоступно, то выводится общий значок с указанием типа файла (например, DOC). Сетка миниатюр становится разнородной и выглядит не так изящно, как в других примерах этого паттерна, но размер и стиль значков сообщают пользователю важную информацию о содержимом. 360 Глава 7. Списки Рис. 7.14. MacOS Finder Видеоприложение HBO Now (рис. 7.15) содержит фотографии и названия фильмов или телешоу в виде сетки миниатюр. Рис. 7.15. Результаты поиска в приложении HBO Now Паттерны 361 На мобильных устройствах сетки миниатюр используются во многих контекстах: для перечисления приложений, возможностей и самих изображений. Обратите внимание на относительный размер миниатюр на рис. 7.16. На домашних экранах Google Images и iPhone они достаточно крупные, чтобы их можно было без труда коснуться пальцем. Рис. 7.16. Приложение Google Drive Что почитать еще Больше информации о списках миниатюр можно узнать, пройдя по этим ссылкам: https://developer.apple.com/design/human-interface-guidelines/ios/views/collections https://material.io/design/components/image-lists.html#types Carousel (Карусель) Что это Список элементов-изображений в виде горизонтальной полосы или дуги, который пользователи могут пролистывать или перебирать вперед и назад (см. рис. 7.17). 362 Глава 7. Списки Рис. 7.17. Карусель Apple TV Когда использовать Если элементам списка соответствуют индивидуальные визуализации: изображения, логотипы, снимки экрана, уменьшенные фотографии и т. п. Визуализации схожи по размеру и стилю. Список плоский, то есть не делится на категории или уровни. Если для каждого элемента вы хотите вывести некоторые метаданные (сопутствующую информацию), такие как название и дата создания, но этой информации будет немного — изображение займет почти все пространство, выделенное для представления элемента. Каждый элемент может заинтересовать пользователя. Пользователи будут перебирать их, не пытаясь найти что-то определенное. Им не нужно видеть весь список. Даже если пользователь ищет что-то конкретное, он с легкостью перелистает набор изображений, прежде чем увидит нужное. Список можно упорядочить по дате добавления элементов или по популярности. Если у вас не хватает пространства по высоте, чтобы создать сетку миниатюр. По ширине, возможно, тоже, но вы хотите сделать список интересным и привлекательным. Зачем Карусель — это очень интересный интерфейс, в котором пользователь с удовольствием рассматривает текущий визуальный элемент и перелистывает список. Паттерны 363 В таком списке невозможно сразу перейти к конкретному элементу — сначала нужно просмотреть все предыдущие. Таким образом, этот паттерн подталкивает пользователей изучать весь список и делать предположения о его элементах. Интерфейс такого формата занимает совсем немного места по вертикали, поэтому в небольших пространствах он удобнее, чем сетка миниатюр. Его можно либо растянуть, либо сжать по горизонтали. Если реализация паттерна подразумевает акцент на центральном или выбранном элементе — например соответствующее изображение увеличивается, — то такая схема представляет собой «фокусное пятно и контекст», когда один элемент представлен подробно в окружении соседних элементов небольшого размера. Как Сначала создайте миниатюры для всех элементов карусели. О нюансах выбора размера и пропорций картинки рассказывается в описании паттерна Thumbnail Grid (Сетка миниатюр) (но помните, что картинки разных размеров и с разным соотношением сторон в карусели выглядят еще хуже, чем в сетке миниатюр). Текстовые метаданные выводите рядом с миниатюрой, но мелким шрифтом, чтобы не отвлекать внимание от рисунка. В виджете с горизонтальной прокруткой разместите миниатюры по горизонтали: в случайном порядке или упорядочив понятным для пользователя способом (например, по дате). Показывайте на экране небольшое число картинок — менее 10, — остальные скройте. Поместите большие стрелки справа и слева от списка миниатюр — для пролистывания содержимого карусели. Один щелчок на стрелке должен передвигать карусель сразу на несколько элементов. Добавьте анимацию для большей привлекательности интерфейса. Создайте под каруселью полосу прокрутки в дополнение к стрелкам, чтобы пользователь мог быстро прокрутить длинный список (например, если он ищет определенный элемент). Если выяснится, что ее используют очень часто, возможно, лучше заменить карусель на более привычный вертикальный список и добавить поле поиска. Центральный элемент карусели можно увеличить, чтобы привлечь к нему дополнительное внимание. Увеличенный элемент можно сделать динамическим, например показать по­ дробные сведения о продукте или вывести элементы управления видео, если список представляет собой набор видеороликов. Что касается внешнего вида карусели, она может быть прямой, дугообразной или круглой. Дизайнеры часто создают иллюзию трехмерности, сжимая элементы и делая их более прозрачными по мере удаления от центра. 364 Глава 7. Списки Аналог карусели в мобильном дизайне — это паттерн Filmstrip (Фотопленка). На небольшом экране выводится только один элемент за раз. Пользователь перелистывает или смахивает его, чтобы перейти к следующему. Примеры На многих веб-сайтах реализован простой линейный вариант карусели, позволяющий перемещаться по списку продуктов. На Amazon Books так представлены обложки книг (рис. 7.18). Обратите внимание, что для разных эскизов выводится сопроводительный текст разного объема и разное оформление. Сколько информации выводить о каждой книге? Как близко друг к другу должны располагаться обложки? Рис. 7.18. Сайт Amazon Books В каруселях как на Amazon, так и на Airbnb (рис. 7.19) предусмотрены стрелки. Они помогают пользователю понять, что за пределами видимой области страницы тоже есть контент. Паттерны 365 Рис. 7.19. Сайт Airbnb Pagination (Разбивка на страницы) Что это Длинный список, разбитый на страницы, которые загружаются по одной, с элементами управления, чтобы перемещаться по этому списку, см. рис. 7.20. Рис. 7.20. Элементы управления разбивкой на страницы на сайте TripAdvisor 366 Глава 7. Списки Когда использовать Если нужно показать на экране очень-очень длинный список. Большинство пользователей будут искать в нем один определенный элемент или просматривать первые несколько элементов (как обычно бывает с результатами поиска). В любом случае им не нужно видеть список целиком. Если технология, которую вы используете, не поддерживает загрузку полного списка на одной странице или в поле с полосой прокрутки по любой из следующих причин: загрузка списка целиком займет слишком много времени, а вы не хотите заставлять пользователя ждать. Причиной также может быть медленное интернет-соединение или долгое время отклика сервера; отрисовка списка займет слишком много времени; список получается фактически бесконечным, а реализация бесконечного списка (см. одноименный паттерн) или списка с непрерывной прокруткой (который предназначен именно для таких случаев) невозможна по какимлибо причинам. Зачем При разбиении на страницы список делится на порции, которые легко воспринимать. Кроме того, пользователь сам решает, загружать ли ему больше страниц или достаточно уже имеющихся данных. Еще одно преимущество данного паттерна в том, что он очень часто встречается в сети, особенно если речь идет о результатах поиска (хотя это и не единственно возможный вариант их вывода). Его легко реализовать, и в некоторых системах он входит в комплект поставки. Как Для начала решите, сколько элементов размещать на каждой странице. Для этого оцените, сколько места занимает каждый элемент, с экранами какого размера обычно работают пользователи (не забудьте о мобильных устройствах), сколько времени занимает загрузка или отображение элементов, а также вероятность того, что пользователь найдет желаемое на первой странице. Это очень важно: одной страницы должно быть достаточно! Скорее всего, большинство пользователей не захотят загружать другие страницы, поэтому если они не найдут то, что ищут, на первой, они не обрадуются. (Если вы разрабатываете инструмент поиска, убедитесь, что самые релевантные результаты выводятся первыми.) Паттерны 367 Если предполагается, что пользователь будет проводить на странице довольно много времени (изучая, например, список товаров или видео), предоставьте ему возможность самому выбирать, сколько элементов выводить на странице. Некоторых людей раздражает необходимость бесконечно листать туда и обратно, чтобы увидеть все, что их интересует. Затем определите, как будут выглядеть элементы управления. Чаще всего они располагаются внизу страницы, но некоторые дизайнеры также помещают дублирующий набор кнопок или ссылок наверху — если пользователю действительно необходимо перейти дальше, не заставляйте его прокручивать страницу до конца. Добавьте следующие элементы управления: кнопки или ссылки «Назад/Далее» вместе с изображениями треугольников или стрелок. На первой странице отключайте ссылку «Назад», а на последней — ссылку «Далее» (если, конечно, список не бесконечный и последняя страница существует); ссылку на первую страницу. Она всегда должна быть хорошо заметна — помните, что на первой странице размещены самые важные элементы; последовательность нумерованных ссылок на страницы. Не привязывайте ссылку к текущей странице, но выделите ее номер контрастным цветом и размером шрифта — он служит указателем «Вы находитесь здесь»; многоточия, заменяющие номера страниц в последовательности, если страниц слишком много — например, больше 20. Не забывайте о ссылке на первую страницу и на последнюю, если она есть. Не заменяйте многоточиями ссылки на страницы, соседние с текущей. Остальные можно заменять; можно указать общее число страниц (если оно известно). Есть несколько способов: использовать подписи вида «Страница 2 из 45» или просто всегда выводить нумерованную ссылку на последнюю страницу. Примеры На сайте Etsy удачно расположены все элементы управления и подсказки из списка выше. На рис. 7.21 показана первая страница очень длинного списка элементов. На рис. 7.22 собраны примеры с разных интернет-сайтов. Подумайте, какие из них более наглядны — где проще понять, что означают ссылки и где щелкать дальше, — и какие помогают лучше понять местоположение пользователя и общее число страниц. Также обратите внимание на размер ссылок и кнопок. По каким из них проще попасть курсором или пальцем, а по каким сложнее? 368 Глава 7. Списки Рис. 7.21. Элементы управления постраничным представлением результатов поиска на сайте Etsy Рис. 7.22. Против часовой стрелки сверху: сайты The Atlantic, eBay, National Geographic, Target, Anthropologie Jump to Item (Прыжок к элементу) Что это Переход к элементу списка, когда пользователь вводит его имя, как показано на рис. 7.23. Когда использовать Если в интерфейсе используется список с прокруткой, таблица, раскрывающееся меню, комбинированный список или дерево. Элементы отсортированы по алфавиту или по порядку. Пользователю нужно быстро и точно выбрать один элемент, и лучше с клавиатуры. Паттерны 369 Рис. 7.23. Приложение Font Book Этот паттерн часто используется в системах поиска файлов, в длинных списках имен и раскрывающихся меню, где пользователь выбирает область или страну. Также его можно применять для числовых данных, таких как годы или денежные суммы, и даже для дат, например месяцев или дней недели. Зачем Люди не очень хорошо умеют искать по длинным спискам слов и чисел — в отличие от компьютеров. Так пусть компьютер этим и займется! Еще одно преимущество данной техники — не нужно отрывать руки от клавиатуры. Заполняя форму или работая в диалоговом окне, можно быстро найти нужный элемент списка, просто введя первые несколько букв названия, — система сама переходит к нужному пункту, а пользователь спокойно продолжает работу. Не нужно ничего пролистывать или щелкать или отрывать руку от клавиатуры и переходить на мышь. 370 Глава 7. Списки Как Когда пользователь вводит первую букву или цифру элемента, который он ищет, переходите к первому подходящему элементу; автоматически прокручивайте список, чтобы элемент стал видимым, и выделяйте его. Продолжайте выделять первое точное совпадение с запросом, по мере того как пользователь вводит новые символы. Если такой элемент не находится, сохраните выделение последнего совпадения — не возвращайтесь к началу списка. Как вариант, предусмотрите звуковое оповещение о том, что элемент не найден; в некоторых приложениях они используются, в некоторых — нет. Примеры Один из вариантов прыжка к элементу используется в инструменте поиска в приложении Spotify. Пользователь начинает вводить текст, и результаты поиска будут содержать более точные совпадения по мере набора текста, поскольку каждая буква позволяет системе лучше предсказать, какие композиции или какихисполнителей ищет пользователь. В примере на рис. 7.24 в левом верхнем углу я набрала «Brian», и алгоритмы Spotify определили, что я ищу. Мне даже не нужно вводить второе слово, прежде чем в результатах поиска появится имя исполнителя, которого я искала. В некотором смысле этот пошаговый поиск удобнее — и, безусловно, быстрее. Рис. 7.24. Вариант использования паттерна Jump to Item (Прыжок к элементу) в приложении Spotify Паттерны 371 Alpha/Numeric Scroller (Алфавитная/числовая полоса прокрутки) Что это Полоса прокрутки с буквами, цифрами или шкалой времени, как показано на рис. 7.25 (слева). Рис. 7.25. Элементы управления полосой прокрутки приложения Health для Apple iOS и приложение Contacts для iPhone Когда использовать Когда пользователи ищут определенный элемент в длинном списке, оформленном в виде таблицы, дерева или списка с полосой прокрутки, и хотят выполнить эту задачу как можно быстрее. Зачем Алфавитная/числовая полоса прокрутки встречается нечасто, но ее предназначение очевидно. Это интерактивная карта содержимого списка, во многом схожая 372 Глава 7. Списки с аннотированной полосой прокрутки (Annotated Scroll Bar). Оба этих паттерна напоминают Jump to Item (Прыжок к элементу) — они позволяют моментально переместиться к определенному пункту в упорядоченном списке. Этот паттерн возник, вероятно, по аналогии с книгами (такими как словари) и записными книжками (адресными справочниками), в которых специальными ярлыками отмечаются места, где начинается очередной алфавитный раздел. Как Поместите длинный список в область с полосой прокрутки. Вдоль полосы прокрутки разместите буквы алфавита; когда пользователь щелкает на определенной букве, прокручивайте список до этой буквы. Примеры Разработчики iPhone создали самую известную реализацию этого паттерна. На рис. 7.25 (справа) показано встроенное приложение Contacts (Контакты). New-Item Row (Строка для нового элемента) Что это Паттерн, в котором последняя или первая строка таблицы или списка используется для создания нового элемента, как в четвертом элементе списка на рис. 7.26. Когда использовать Если интерфейс содержит таблицу, список, древовидное представление или любой другой набор элементов, организованный по вертикали (по одному элементу в каждой строке). В определенный момент у пользователя возникает необходимость добавить новые элементы. Однако в интерфейсе недостаточно места, чтобы разместить дополнительные кнопки или элементы управления, поэтому вы хотите максимально упростить процесс ввода. Используйте этот паттерн также, если хотите четко указать тип информации или функций, добавляемых пользователем. Зачем Возможность вводить данные непосредственно в существующую таблицу позволяет создавать элементы в том месте, где они в конечном итоге и будут находиться. Это более логично, чем добавлять элемент куда-то в другую часть интерфейса. Кроме того, интерфейс выглядит более изысканным, когда для создания элемента не открывается новая страница. Используется меньше площади экрана, меньше элементов навигации (не нужно переходить в другое окно), и пользователь в итоге выполняет меньше действий. Паттерны 373 Рис. 7.26. Переключение между профилями в приложении Hulu Как Обеспечьте простой и очевидный способ создания нового объекта в пустой строке таблицы. Например, режим редактирования может включаться щелчком мышью в строке или строка может содержать кнопку «Добавить новый». В этом месте интерфейса должен создаваться новый элемент и помещаться в строку. Все столбцы таблицы (если она состоит из нескольких столбцов) должны быть редактируемыми, чтобы пользователь мог сразу задать все нужные значения. Для этого внутри ячеек могут быть текстовые поля, раскрывающиеся списки или любые другие элементы управления. Паттерн Good Defaults (Хорошие варианты по умолчанию, глава 10), часто применяемый в формах, куда пользователи вводят информацию, значительно упрощает работу и сокращает время создания нового элемента: благодаря предварительному заполнению ячеек подходящими значениями пользователю не приходится редактировать каждый столбец. Есть несколько вопросов, на которые обязательно нужно ответить при разработке такого интерфейса. Что, если пользователь не завершит редактирование? Можно сделать так, чтобы элемент считался созданным, невзирая на это, и оста- 374 Глава 7. Списки вался активным, пока пользователь не вернется и не удалит его. Если полей много, на помощь снова приходит паттерн Good Defaults (Хорошие варианты по умолчанию). В зависимости от реализации этот паттерн может напоминать Input Prompt (Приглашение к вводу, глава 10). В обоих случаях сначала элемент содержит образец значения, который пользователь должен заменить на реальные данные, причем этот образец представлен в виде подсказки, сообщающей пользователю, что делать. Примеры Чаще всего можно встретить паттерн New-Item Row (Строка для нового элемента) в приложениях, где пользователь организует или создает свой собственный контент. Приложение Slack (рис. 7.27) использует данный паттерн в функции «Add Workspaces» (Добавить рабочие пространства). Рис. 7.27. Функция «Add Workspaces» (Добавить рабочие пространства) в приложении Slack Многообразие списков 375 Многообразие списков В этой главе мы рассмотрели самые распространенные способы отображения и случаи использования списков. Очевидно, что большая часть контента, который вы видите в веб- и мобильных приложениях, на самом деле представляет собой списки. При разработке списков пробуйте разные способы отображения их содержимого и всегда учитывайте, какую задачу пытается решить пользователь, оптимизируя для этого дизайн. ГЛАВА 8 За дело! Действия и команды Эта глава посвящена «глаголам» интерфейса — действиям и командам. Другими словами, мы узнаем, как пользователи могут выполнять поставленные задачи. Вот темы, которые мы рассмотрим: способы инициирования действия или активации команд; как дать пользователю понять, что с элементом можно взаимодействовать с помощью аффордансов; паттерны и компоненты для управления элементами и их редактирования. До сих пор мы говорили о «существительных» в дизайне интерфейса. Сперва мы изучили структуру, поток и визуальную организацию интерфейсов. Мы рассмотрели объекты интерфейса, такие как окна, текст, ссылки и статические элементы на страницах. В следующих главах мы рассмотрим сложные компоненты, такие как визуализация данных и формы. Так называемые глаголы (действия и команды) следует представлять как методы выполнения задач в приложении, например: начать, приостановить, отменить или завершить действие; задать настройку, конфигурацию или значение; управлять объектом или компонентом в интерфейсе; применить изменение или преобразовать; переместить или удалить что-либо; добавить или создать что-либо. Многие из описанных в этой главе паттернов заимствованы из аппаратных интерфейсов, которые были разработаны и стандартизированы задолго до повсеместного распространения программных средств. Другие паттерны прямо имитируют поведение и методы реального мира. И действительно, реальный мир обладает богатой историей и в нем давно сложились лучшие практики, которым можно следовать. Стандартные руко- За дело! Действия и команды 377 водства по стилю для ОС, например для Android и iOS, Windows и Macintosh, а также фреймворки JavaScript для отзывчивых веб-интерфейсов и мобильных UI во многом облегчат процесс создания удобного пользовательского интерфейса. Большинство пользователей теперь предпочитают знакомые модели поведения интерфейса, к которым они привыкли, используя другие приложения. Поэтому и им, и вам будет удобнее, если ваш продукт будет содержать общепринятые шаблоны, даже если из-за этого он утратит немного оригинальности. Обычно люди хотят использовать уже известные методы. Чтоб создать хороший интерфейс, необходимо понять, что «неоригинальность» современных программных сред означает лишь то, что существуют почти универсальные стандарты UI, которым пользователи уже обучены. Людям не нужно привыкать к новому приложению, вместо этого они сразу могут применять имеющиеся навыки. Таким образом, опытный UI-разработчик, продакт-менеджер, инженер или группа разработчиков возьмут за основу устоявшиеся стандарты ПО, имеющиеся наборы инструментов пользовательского интерфейса, библиотеки компонентов и готовые фреймворки. Многие самые распространенные функции и возможности приложений больше не нужно программировать с нуля. Это высвобождает время и силы для разработки уникальных функций, которые действительно оценят ваши пользователи и которые выделят ваш продукт. Примерами таких стандартных функций служат операции вырезания, копирования и вставки. Хотя это абстрактный процесс, он основан на реальных действиях. «Вырезанный» или перемещенный объект или текст хранится в «буфере обмена» — он невидим и временно находится в памяти компьютера. Рядовые пользователи настольных компьютеров, как правило, понимают, как работает этот принцип. То же самое верно и для всплывающих меню (контекстных меню), которые некоторые пользователи ищут повсюду, а другие даже не думают искать. Другой пример — перетаскивание (drag-and-drop). Данная функция прямо имитирует реальный мир: поднятие и опускание объектов. Но она обязательно должна работать так, как интуитивно ожидают пользователи — перемещать объект в заданное место, например в папку, — иначе иллюзия прямого управления разрушится. Чтобы сделать свой интерфейс менее скучным и более удобным, предусмотрите возможность выполнения требуемых действий, подберите для них подходящие ярлыки, убедитесь, что их легко найти и что они составляют правильную последовательность операций. Все это можно сделать несколькими способами. Для начала перечислим привычные способы совершения действий в интерфейсе. 378 Глава 8. За дело! Действия и команды Касание, смахивание и масштабирование В мобильных операционных системах и приложениях жесты пальцами — основной метод выполнения действий. Существует множество действий, которые мы можем выполнять в операционной системе (ОС) с сенсорным экраном. В данной книге мы не будем подробно останавливаться на дизайне взаимодействий в мобильных средах. Но мы рассмотрим основные действия, о которых нужно знать, — это касание (tap), смахивание (swipe) и сведение-разведение пальцев (pinch). Касание означает прикосновение к значку, кнопке или объекту в мобильной ОС. Это может привести к запуску приложения, нажатию кнопки, выбору объекта (например, изображения) либо к другому действию в зависимости от контекста. Смахивание — это распространенный способ выполнения некоторых других действий. Проведение пальцем по экрану в приложении — это способ навигации: прокрутка страницы вверх или вниз, переход к следующему изображению в серии, перемещение по карусели или списку страниц либо открытие другой страницы в приложении, например экрана настроек или страницы с информацией. В списках смахивание элемента в строке — это способ вывести на экран действия, которые можно совершить с этим элементом, например архивирование или удаление. Сведение-разведение двух пальцев обычно служит для масштабирования элемента или управления просмотром. Сведение пальцев — скольжение двух пальцев по направлению друг к другу на сенсорном экране — уменьшает фотографию или вебстраницу. И наоборот — разведение двух пальцев в стороны увеличивает элемент. Вращение и встряхивание Мобильные устройства достаточно невелики, поэтому можно двигать всем устройством для выполнения команд, что невозможно при работе с большими устройствами. Это возможно благодаря наличию в мобильных устройствах акселерометров и других датчиков. Например, почти все пользователи знают, что при просмотре видео или изображения на мобильном устройстве поворот устройства на девяносто градусов изменит ориентацию области просмотра с книжной на альбомную и наоборот. Чаще всего это действие выполняют для удобства просмотра видео. Встряхивание устройства также распространенный способ выполнения действий. В зависимости от приложения встряхивание может использоваться, чтобы перейти к прослушиванию следующей композиции или отменить действие. Кнопки Кнопки помещаются прямо в интерфейс — и пользователю не нужно их искать — и обычно группируются семантически (см. паттерн Button Groups (Группы кнопок)). Они большие, с легкочитаемыми ярлыками, их функциональность Панели инструментов 379 очевидна, и их очень просто использовать даже новичкам. Однако они занимают много места, в отличие от строк меню и всплывающих меню. На лендингах, таких как веб-сайты компаний или страницы продуктов, призывы к действию обычно представляют собой одиночные большие, хорошо заметные кнопки, идеально отвечающие своему предназначению — привлечь внимание и крикнуть: «Щелкни меня!» Строки меню Строки меню — это стандартный элемент большинства десктопных приложений. Обычно они содержат полный набор доступных в приложении действий, организованный наиболее предсказуемым образом (например, меню File (Файл), Edit (Правка), View (Вид)). Некоторые действия распространяются на все приложение, другие — только на выбранные элементы. Строки меню часто дублируют функциональность контекстных меню и панелей инструментов, поскольку они поддерживают доступность — их понимают программы чтения экрана, элементы меню могут вызываться сочетаниями клавиш и т. д. (Одно только это свойство делает их незаменимыми в большинстве продуктов.) Строки меню есть и в некоторых веб-приложениях, особенно в тех, которые ориентированы на выполнение задач, в программах для рисования и прочих продуктах, имитирующих десктопные приложения. Всплывающие меню Всплывающие, или контекстные, меню открываются щелчком правой кнопки мыши или похожим жестом на панелях или элементах. Обычно они содержат не все действия, доступные в интерфейсе, а те, которые чаще всего нужны в данном контексте. Всегда старайтесь делать контекстные меню короткими. Раскрывающиеся меню Пользователи открывают такие меню, щелкая на соответствующих элементах управления, таких как комбинированные поля. Однако не стоит использовать раскрывающиеся меню для действий, так как они чаще применяются для выбора состояний при заполнении форм. Панели инструментов Классическая панель инструментов представляет собой длинную полосу кнопок с иконками. Кроме них, на панели инструментов также часто можно увидеть другие виды кнопок и элементы управления, например текстовые поля или раскрывающиеся селекторы (см. паттерн Dropdown Chooser (Раскрывающийся 380 Глава 8. За дело! Действия и команды селектор) в главе 10). Панели инструментов с иконками подходят, когда для действий можно подобрать понятную визуализацию; если действие необходимо описывать словами, то лучше использовать другие элементы управления, такие как комбинированные поля или кнопки с текстовыми ярлыками. Непонятные значки часто ведут к ошибкам, недопониманию и неудобствам для пользователей. Ссылки Ссылкам не нужны границы. С распространением интернета любой цветной текст, особенно синий, воспринимается как ссылка, которая должна реагировать на щелчок мыши. Если вам необходимо указать на действие, но вы не хотите загромождать интерфейс или отвлекать внимание пользователя на кнопки, можно использовать простые текстовые ссылки. Ссылку можно подчеркнуть по умолчанию или сделать так, чтобы подчеркивание появлялось только при наведении курсора. Когда пользователь подводит указатель мыши к такому тексту, меняйте вид указателя и внешний вид ссылки (например, цвет или границы фона), чтобы акцентировать то, что ссылка активна. Панели действий Панели действий фактически представляют собой меню, которые пользователям не нужно открывать, — они всегда видны в главном интерфейсе. Это отличная замена панелям инструментов на случай, когда действия удобнее описывать словами, а не изображениями. См. паттерн Action Panel (Панель действий). Инструменты, доступные при наведении указателя мыши, или ховеры Чтобы добавить два или больше действий для каждого элемента интерфейса, но при этом не загромождать интерфейс множеством одинаковых кнопок, можно сделать эти кнопки невидимыми в обычном режиме — они должны появляться только при наведении на них указателя мыши. (Это очень удобно для интерфейсов, в которых пользователи постоянно используют мышь, но не подходит для сенсорных экранов.) Подробнее об этом рассказывается в описании паттерна Hover Tools (Инструменты, доступные при наведении). Помимо этого, есть невидимые действия, для которых вообще не существует никаких меток, объясняющих, что они делают. Пользователям необходимо как-то узнавать (или догадываться) об их наличии, если только вы не добавляете письменные инструкции. Таким образом, невидимые действия нисколько не помогают изучать интерфейс. Пользователи не могут просмо- Действия с клавиатурой 381 треть список невидимых действий, чтобы выяснить, какие из них доступны, тогда как кнопки, ссылки и меню позволяют исследовать пользовательский интерфейс и узнавать что-то новое. В тестах удобства использования я много раз наблюдала, как, изу­чая новый продукт, пользователи методично проходили по меню элемент за элементом, просто чтобы выяснить, какие действия можно совершить. Но, несмотря на это, почти всегда придется внедрить в интерфейс одно или несколько невидимых действий. Например, пользователи часто ожидают, что двойной щелчок на элементе даст какой-нибудь результат. Кроме того, клавиатура (или ее эквивалент) иногда может быть единственным способом доступа для людей с нарушениями зрения и людей, не имеющих возможности использовать мышь. Опытные пользователи некоторых операционных систем и приложений предпочитают работать, вводя команды в программной оболочке и/или нажимая различные сочетания клавиш. Однократный и двойной щелчок Пользователи объектно-ориентированных операционных систем — Windows и macOS — знают, что однократный щелчок на объекте, например изображении или файле документа, означает выбор данного объекта для выполнения над ним какого-либо действия. Сначала выберите объект. Затем используйте действие или команду, и она будет применена к выбранному объекту. Например, выбрав файл на рабочем столе компьютера, вы можете выполнить над ним действие, скажем, «переместить в корзину». При работе с приложением однократный щелчок на элементе позволит перемещать его, масштабировать или применять к нему какое-либо действие или команду. В зависимости от контекста пользователи обычно рассматривают двойной щелчок как команду «открыть элемент», «запустить приложение» или «редактировать элемент». Двойной щелчок на изображении часто открывает его в редакторе или средстве просмотра и редактирования изображений. Двойной щелчок на значке приложения в большинстве операционных систем запускает это приложение. Двойной щелчок на фрагменте текста позволяет отредактировать этот текст. Действия с клавиатурой Существует два типа действий с клавиатурой, которые следует учитывать при разработке пользовательского интерфейса. Оба могут считаться своего рода «ускорителями». Другими словами, это возможности или функции, которые кажутся более скрытыми или сложными, но на самом деле позволяют более опытным пользователям выполнять задачи быстрее. Эти действия в идеале призваны помочь реже использовать мышь и меньше двигать руками. 382 Глава 8. За дело! Действия и команды Команды клавиатуры также важны для обеспечения доступа к интерфейсу людей с разным уровнем физических возможностей, которым могут потребоваться вспомогательные технологии. Таким людям необходимо вводить команды без использования мыши и компонентов графического интерфейса пользователя (GUI). Вот почему оба рассматриваемых метода помогают пользователю управлять пользовательским интерфейсом, не отрывая рук от клавиатуры. Эти методы — сочетания клавиш и порядок табуляции. Сочетания клавиш Сочетания клавиш, например хорошо известное Ctrl+S для сохранения, необходимо включать в большинство десктопных приложений, чтобы обеспечить их доступность и удобство использования. Для пользовательских интерфейсов основных ОС, включая Windows, Mac и некоторые среды Linux, существуют рекомендации по стилю, в которых описаны все стандартные сочетания, причем они очень похожи между собой. Помимо этого, в приложения обычно встраиваются сочетания клавиш для доступа к меню и элементам управления. Буквы, соответствующие этим клавишам, выделяются в названиях подчеркиванием. Таким образом, пользователи могут активировать элементы управления, не щелкая на них мышью и не переходя к ним клавишей Tab (обычно для активации нужно нажать клавишу Alt, а затем клавишу с подчеркнутой буквой). Порядок табуляции Порядок табуляции означает возможность использовать клавишу Tab (или другую назначенную клавишу) для перемещения «фокуса» клавиатуры или перехода от одного компонента пользовательского интерфейса к другому. Пользователь может непрерывно перемещаться по элементам экрана. Выбранному компоненту пользовательского интерфейса можно задавать команды с клавиатуры, пока пользователь не переместит фокус на следующий компонент экрана. Когда выбраны поле с формой или кнопка отправки, с ними можно совершать действия без использования мыши. Это полезно для людей, которым приходится работать в голосовых браузерах или которые не могут использовать весь функционал клавиатуры и мыши. Перетаскивание Перетаскивание элементов в интерфейсе чаще всего означает «переместить это сюда» или «сделать это с этим». Другими словами, можно перетащить файл на значок приложения, подразумевая «открыть этот файл в этом приложении», или из одного места в «Проводнике» в другое, тем самым перемещая или копируя его. Фактический результат перетаскивания зависит от контекста, но практически всегда позволяет выполнить одно из этих двух действий. Аффорданс 383 Ввод команд Интерфейсы командной строки (Command-line interfaces, CLI) — это возврат к гораздо более ранней компьютерной эпохе, когда графического интерфейса еще не существовало. На экранах компьютеров отображался только текст. Операционными системами можно было управлять, вводя команды непосредственно в строку или место на экране для ввода текста. Интерфейсы командной строки обычно допускают использование всех действий, встроенных в программную систему, в свободной форме, независимо от того, идет ли речь об операционной системе или о приложении. Мы называем такие действия «невидимыми», так как в большинстве интерфейсов командной строки неопытному пользователю сложно быстро получить список доступных команд. Их не очень просто обнаружить, но они становятся мощным оружием, если вы их изучите, — с помощью всего одной правильно подобранной команды можно сделать очень многое. Поэтому интерфейсы командной строки лучше всего подходят для пользователей, которые хотят как следует изучить возможности продукта. И macOS, и Windows разрешают доступ к режиму терминала для такого взаимодействия с компьютером. Так работали операционные системы Unix и DOS. Сейчас вводимые вручную SQL-запросы — это широко используемая форма печатаемых команд. Аффорданс Когда объект пользовательского интерфейса выглядит так, как будто он может позволить вам что-то сделать, например коснуться его, щелкнуть или перетащить, мы говорим, что он «позволяет» (affords) выполнить это действие. Такое свойство объекта называют аффорданс (affordance). Например, традиционные кнопки с выпуклым краем позволяют нажимать их или щелкать; полоса прокрутки — перетаскивать; инструмент выбора даты выглядит вращающимся или круглым и поэтому позволяет вращать его; текстовое поле — печатать; синее подчеркнутое слово позволяет щелкнуть на нем или коснуться. Современные мобильные пользовательские интерфейсы и графические интерфейсы для настольных компьютеров предлагают функциональные возможности именно через этот тип прямого восприятия, приглашения к действию и управления. В разработке стоит исходить из практического правила, согласно которому каждый интересный визуальный компонент что-то делает. Исходя из этого, аффорданс может представлять собой: значки, объекты или формы, которые отличаются от остального интерфейса; стиль текста, отличающийся от обычного текста для чтения; объект, реагирующий на наведение курсора; объект, реагирующий на касание или смахивание; яркий или высококонтрастный визуальный дизайн; 384 Глава 8. За дело! Действия и команды некоторые объекты, которыми можно манипулировать: тени, границы или текстура, блики; объект или компонент, который просто выглядит иначе или отделен свободным пространством от остальных объектов на экране. Прямое манипулирование объектами Сегодня, когда для большинства взаимодействий используются мобильные устройства, дизайн предполагает прямое управление компонентами экрана. Нажмите кнопку, чтобы подтвердить действие, смахните элемент списка, чтобы удалить его или открыть контекстное меню, перетащите объект, чтобы изменить его положение, проведите двумя пальцами по карте, чтобы уменьшить масштаб, коснитесь изображения, чтобы получить доступ к контекстным элементам управления изображением. Это не похоже на традиционный подход с использованием меню рабочего стола, когда пользователь должен выбрать объект, а затем перейти к другой части интерфейса, чтобы активировать команду и применить к выбранному объекту. Главное здесь то, что обычно в мобильных интерфейсах нет сложных, непрямых действий с элементами меню и большого числа вариантов для выбора. Предлагается выполнять действия с объектами одно за другим, используя несколько простых жестов, чтобы воздействовать непосредственно на конкретный объект, или вызывать контекстное меню, когда это необходимо. На рис. 8.1 показан аффорданс интерфейса Adobe Premier Rush. Это мобильное приложение предназначено для редактирования видеороликов для соцсетей и служит хорошим примером реализации пользовательского интерфейса. В программных интерфейсах отсутствуют сенсорные подсказки о том, какой элемент можно изменить или обработать: большинство подсказок визуальны, а остальные представляют собой аффорданс (например, выделение или движение). Универсальные элементы управления видеоплеером в верхней части экрана трудно отнести к малопонятным. На нижней панели все несколько сложнее. Ярко-синяя вертикальная линия накладывается поверх видео- и аудиодорожек, что указывает на то, что это некий инструмент или ориентир в медиафайле. На самом деле, это курсор воспроизведения, указывающий точку воспроизведения в файле. Сами клипы представлены в виде крупных значков: квадратов или прямоугольников с кадром из основного видео. Предполагается, что создатель помнит события на записях или по крайней мере понимает, что это действительно те ролики, которые ему нужны, и знает, что в них содержится. Вокруг клипа автоматически возникает подсвеченная рамка (таким образом вы понимаете, что его можно выбрать), когда он пересекается с синей линией воспроизведения или когда по ней щелкают. Паттерны 385 Рис. 8.1. Приложение Adobe Premiere Rush Паттерны Первые паттерны этой главы посвящены трем из множества способов представления действий. Если вы автоматически добавляете действия на полосу меню или во всплывающее меню приложения, остановитесь и подумайте: скорее всего, лучше использовать что-то из этого списка: Button Groups (Группы кнопок). Hover Tools (Инструменты, доступные при наведении) или Pop-Up Tools (Всплывающие инструменты). Action Panel (Панель действий). 386 Глава 8. За дело! Действия и команды Паттерн Prominent «Done» Button (Заметная кнопка «Готово») или Assumed Next Step (Предполагаемый следующий шаг) оптимизирует самую важную кнопку на многих веб-страницах и в диалоговых окнах. Smart Menu Items (Умные элементы меню) — это техника для усовершенствования некоторых действий, обычно помещаемых в меню; это универсальный паттерн, подходящий для разных типов меню (или кнопок и ссылок). Было бы прекрасно уметь завершать любые действия пользователя мгновенно, но это невозможно. Preview (Предварительный просмотр) показывает предполагаемый результат еще до того, как пользователь предпримет действие. Spinners (Спиннеры) и Loading Indicators (Индикаторы загрузки) — широко распространенные способы сообщить пользователю, на каком этапе процесса он находится, а Cancelability (Возможность отмены) означает способность пользовательского интерфейса прерывать операцию по запросу пользователя. Три последних паттерна предназначены для обработки последовательностей действий: Multi-Level Undo (Многоуровневая отмена). Command History (История команд). Macros (Макрос). Эти три взаимосвязанных паттерна наиболее полезны в сложных приложениях, особенно тех, которые пользователи тщательно изучают и часто используют. (Поэтому примеры для этих паттернов взяты из таких сложных инструментов, как Linux, Photoshop и MS Word.) Помните, что эти паттерны довольно сложно реализовать. Они требуют, чтобы приложение моделировало действия пользователя как дискретные, поддающиеся описанию и иногда обратимые операции, а такую модель очень непросто встроить в существующую программную архитектуру. Для дальнейшего изучения разработки действий и команд мы рекомендуем книгу Design Patterns: Elements of Reusable Object-Oriented Software (Gamma, Erich, et al.; Addison-Wesley, 1998)1. Button Groups (Группы кнопок) Что это Связанные действия, представленные небольшими наборами кнопок в едином графическом стиле. Если действий больше трех-четырех, можно предусмотреть несколько наборов кнопок. 1 Гамма Э., Хелм Р., Джонсон Р., Влиссидес Дж. Паттерны объектно-ориентированного проектирования. СПб.: Питер. Паттерны 387 Когда использовать Если интерфейс подразумевает большое число действий. Все они должны быть постоянно видны пользователю, однако их необходимо организовать так, чтобы они были расположены упорядоченно и их было легко найти. Некоторые действия могут быть похожи, дополнять друг друга или оперировать схожей семантикой — тогда их можно объединять в группы от двух до пяти. Группы кнопок можно использовать для операций, общих для всего приложения (таких как Open (Открыть) или Preferences (Настройки)); для действий с отдельными элементами (Save (Сохранить), Edit (Правка), Delete (Удалить)) или для действий определенного спектра. Но не забывайте, что разноплановые действия группировать не следует. Зачем Группы кнопок делают интерфейс интуитивно понятным. Грамотно организованные наборы кнопок выделяются в сложном макете, и поскольку они хорошо заметны, они сразу сообщают пользователю о доступных ему действиях. Они словно говорят: «Вот то, что ты можешь сделать». Здесь также работают гештальт-принципы, о которых говорилось в главе 4. Близость элементов воспринимается как признак наличия между ними связи — кнопки находятся рядом друг с другом, значит, они выполняют схожие действия. Это можно сказать и о визуальной схожести: если, например, сделать все кнопки одного размера, то они будут выглядеть, как будто принадлежат одной группе. И наоборот, группы кнопок, разнесенные по разным частям интерфейса (или кнопки разного размера), сообщают пользователю, что они отвечают за не связанные между собой действия. Правильный выбор размера и расположения группы кнопок помогает сформировать общий составной визуальный профиль (соблюдается принцип замкнутости). Как Объедините взаимосвязанные кнопки в логические группы. Присвойте им ярлыки из коротких и однозначных глаголов или глагольных конструкций. Используйте лексику, понятную пользователю. Не смешивайте кнопки, воздействующие на разные объекты или из разных сфер действия. Такие кнопки помещайте в разные группы. Все кнопки в группе должны быть оформлены в едином графическом стиле: иметь одинаковые границы, цвет, высоту и/или ширину, стиль иконки, динамические эффекты и т. д. Разместите их в одном столбце или, если они не очень широкие, в одной строке. 388 Глава 8. За дело! Действия и команды Однако если одна из кнопок в группе отвечает за основное действие, например Submit (Передать данные) на веб-странице, то ее следует выделить. Основное действие — это то, которое будут выполнять большинство пользователей, или, по крайней мере, то, которого вы от них ожидаете. Сделайте такую кнопку более заметной, чтобы она выделялась на фоне остальных. Если действия всех кнопок распространяются на один объект или несколько объектов, то поместите группу кнопок слева или справа от этих объектов. Не размещайте их под объектами, поскольку нижняя область сложных элементов пользовательского интерфейса, например списков из нескольких столбцов или деревьев, часто превращается в «слепое пятно» для пользователей, так что они могут попросту не увидеть кнопки. Чтобы кнопки были достаточно заметными, сделайте оставшуюся часть интерфейса простой и лаконичной. Если у вас нестандартный дизайн, который лучше работает с кнопками, ­находящимися под объектами, обязательно проведите тестирование удобства использования. Если кнопок достаточно много и для них имеются иконки, их можно расположить на панели инструментов или на ленте вверху страницы. Использование групп кнопок позволяет избежать нагромождения разномастных кнопок и ссылок или длинного и тяжелого для восприятия списка действий, которые, на первый взгляд, мало отличаются друг от друга. Этот паттерн формирует локальную визуальную иерархию действий: пользователь моментально видит, что связано между собой и что важно. Примеры Стандартные инструменты графических редакторов обычно группируются по функциональности. На рис. 8.2 показаны основные инструменты в Google Docs, разделенные вертикальными линиями, или рисками. Такая группировка способствует узнаванию. На этом интерфейсе не менее 27 кнопок. Нужно многое просмотреть и понять. Но благодаря тщательной визуальной и семантической организации интерфейс не кажется перегруженным. Рис. 8.2. Группы кнопок в приложении Google Docs Во втором примере (рис. 8.3) показан заголовок окна поиска в macOS. По традиции, кнопки в macOS всегда напоминают предметы из реального мира. Группа Navigation — это две кнопки, помещенные вместе в группу. Группа View Controls Паттерны 389 представляет собой разделенную на части кнопку. Закругленные края есть только у кнопок слева и справа, а у кнопок посередине — нет. Рис. 8.3. Окно поиска Apple macOS Hover Tools (Инструменты, доступные при наведении), или Pop-Up Tools (Всплывающие инструменты) Что это Кнопки и другие элементы управления, отвечающие за действия, размещенные рядом с объектами, к которым они относятся, однако скрытые до тех пор, пока пользователь не подведет к ним указатель мыши. В мобильном пользовательском интерфейсе инструменты должны отображаться рядом с объектом, когда пользователь касается его. Когда использовать Если в приложении или на сайте необходимо показать много действий. Вы хотите сохранить понятный и лаконичный интерфейс, но вывести в нем весь набор действий, желательно — рядом с объектами, к которым они применимы. Вы уже выделили для них место, но, если они постоянно видимы, интерфейс получается слишком сложным и перегруженным. Если интерфейс включает столбцы или списки небольших элементов: фотографий, сообщений, результатов поиска и т. п. С каждым элементом списка пользователь может выполнять несколько действий. Если интерфейс не предназначен для сенсорного экрана и вы уверены, что большинство пользователей будут использовать мышь. Зачем Инструменты, доступные при наведении, становятся видны именно в тот момент, когда в них возникает необходимость. Все остальное время они не заметны, благодаря чему интерфейс выглядит очень просто и не перенасыщен деталями. Эти инструменты появляются в ответ на определенные действия пользователя, что привлекает к ним дополнительное внимание. 390 Глава 8. За дело! Действия и команды Всплывающие (контекстные) меню, раскрывающиеся меню и строки меню также отвечают этим критериям, но используются не везде. Они лучше всего подходят для традиционных десктопных приложений, а не для веб-интерфейсов (кстати, и для десктопных приложений это не всегда лучший выбор). Ховеры очень легко вызвать, так как для этого требуется совершить простое и естественное действие — навести указатель мыши на объект. К сожалению, на устройствах с сенсорным экраном нет мыши и, следовательно, невозможно навести курсор. На сенсорном экране эта операция предполагает касание объекта. В этом случае разместите набор действий, которые можно применить к объекту, в списке или на всплывающей панели, сгруппированной с объектом, или поверх объекта. Как Предусмотрите достаточно места для каждого объекта с инструментами, появляющимися при наведении, чтобы вывести все доступные действия. Скройте те из них, которые слишком загромождают интерфейс, — и выводите их только при наведении указателя мыши на эту область. Интерфейс должен моментально реагировать на наведение указателя мыши. Не используйте анимированный переход — сразу же показывайте инструменты и так же быстро скрывайте их, как только пользователь уберет курсор. Кроме того, не увеличивайте область, где размещаются инструменты, и не меняйте расположение элементов на странице. Этот механизм должен быть как можно более легким и быстрым, чтобы пользователю было удобно пользоваться нужными инструментами. Если область наведения представляет собой элемент списка, то можно подсветить его, изменив фоновый цвет или выделив с помощью рамки. Появление инструментов привлекает внимание пользователя, но подсветка делает это еще быстрее. Ховеры — удобная альтернатива раскрывающимся меню, всплывающим меню, панелям действий, раскрывающимся спискам и повторяющимся кнопкам и наборам кнопок. Примеры В Slack широко используются ховеры (рис. 8.4). Они есть в каждой публикации в основной ленте или тредах. Можно было бы показывать эти кнопки постоянно — тогда интерфейс стал бы перегруженным — или перенести их на верхнюю панель инструментов. В таком случае эти действия распространялись бы только на выбранные публикации. Это довольно неудобно. В данном же случае инструменты всегда перед глазами и интуитивно понятны (или, по крайней мере, с ними легко разобраться). Паттерны 391 Другие реализации паттерна Hover Tools (Инструменты, доступные при наведении) используют оверлеи «показать/скрыть» для отображения кнопок или элементов управления, таких как ползунки. Такой вариант схож с паттерном Dropdown Chooser (Раскрывающийся селектор) из главы 10, с той лишь разницей, что он используется для действий, а не для настроек. Рис. 8.4. Slack; примеры ховеров в публикациях и тредах В плеере на YouTube (рис. 8.5) используется наведение курсора для отображения ползунка громкости и других элементов управления. Элементы управления видеоплеером отображаются только тогда, когда указатель мыши перемещается по самой области проигрывателя. В противном случае они скрыты, чтобы ничего не отвлекало от просмотра видео. 392 Глава 8. За дело! Действия и команды Рис. 8.5. Веб-плеер YouTube Action Panel (Панель действий) Что это Панель или другая группа команд, отличная от статического меню. В нее могут входить самые часто совершаемые действия или наиболее подходящие команды, в зависимости от того, где находится пользователь или какую задачу он выполняет. Панели действий — это способ организовать команды в привлекательном представлении. Когда использовать Если интерфейс содержит список элементов и набор действий с этими элементами. Действий слишком много, чтобы выводить их для каждого элемента, и слишком много, чтобы размещать их на панели, доступной при наведении указателя мыши (паттерн Hover Tools (Инструменты, доступные при наведении)). Можно поместить их в меню, но, возможно, вы вообще не планируете добавлять строку меню или хотите, чтобы варианты действий было проще найти. То же самое со всплывающими (контекстными) меню — они просто недостаточно заметны. Пользователи могут даже не знать, что они вообще существуют. Паттерны 393 Может быть, набор действий слишком сложен для меню. Меню лучше всего подходят для отображения одноуровневых действий в очень простом линейном порядке, где каждому элементу отводится одна строка (так как каскадные меню, где каждый следующий уровень раскрывается вправо, слишком сложны для многих пользователей). Если действия необходимо сгруппировать, но при этом группы невозможно поместить в стандартные меню верхнего уровня — например, File (Файл), Edit (Правка), View (Вид), Tools (Сервис) или Format (Формат), — можно попробовать использовать иной способ представления. Этот паттерн может потребовать очень много экранного пространства, поэтому обычно не подходит для небольших устройств. Зачем Три основные причины, по которым стоит использовать панели действий вместо меню или отдельного набора кнопок для каждого элемента, — это наглядность, доступное пространство и свобода представления. Выводя действия прямо в главном пользовательском интерфейсе, а не пряча их в меню, вы делаете их гораздо более заметными. На самом деле, панели действий — это тоже меню; просто они не организованы в строки или раскрывающиеся или всплывающие элементы. Пользователям ничего не нужно делать, чтобы увидеть, что находится на панели действий, — все и так уже у них перед глазами, так что элементы интерфейса проще заметить. Это особенно удобно для тех, кто не очень хорошо знаком с традиционной моделью организации документа и меню. Существует огромное количество способов структурировать объекты в интерфейсе: списки, сетки и таблицы, иерархии и практически любая произвольная структура, какую только можно придумать. Однако группы кнопок и традиционные меню позволяют создать только список (и то не очень длинный). Панели действий имеют свободный формат — они дают вам столько же свободы для визуальной организации «глаголов», сколько обычно доступно для «существительных». Как Добавление панели действий в пользовательский интерфейс. Зарезервируйте место в пользовательском интерфейсе для панели действий. Поместите ее снизу или сбоку от элемента, на который распространяются эти действия. Как правило, это список, таблица или дерево элементов, поддерживающих выбор, но это может быть и «центральная сцена» (см. паттерн Center Stage (Центральная сцена) в главе 4). Помните, что очень важно располагать модули рядом друг с другом. Если поместить панель действий слишком далеко от элемента, к которому она относится, то пользователи могут не уловить связь между ними. 394 Глава 8. За дело! Действия и команды Панель может иметь форму простого прямоугольника. Это может быть одна из панелей, расположенных каскадом, например перемещаемая панель (см. паттерн Movable Panel (Перемещаемые панели) в главе 4), «ящик» в MacOS X или даже отдельное окно. Если панель можно закрывать, то сделайте так, чтобы ее было легко снова открыть, особенно если действия представлены только на ней и не дублируются в меню! Вам, скорее всего, потребуется выводить действия, необходимые в зависимости от ситуации. Содержимое панели действий может зависеть от состояния приложения (например, открыт ли уже какой-нибудь документ), элементов, выбранных в каком-то списке, или от других факторов. Сделайте панель действий динамической. Изменения будут привлекать внимание пользователя, а это хорошо. Структуризация действий. Теперь нужно решить, как структурировать действия, которые вы будете представлять. Вот несколько способов: простые списки; списки из нескольких столбцов; списки по категориям, как в примере из iPhone выше; таблицы или сетки; деревья; любая комбинация перечисленного выше на одной панели. Если вы решите разбить действия на категории, то я рекомендую сгруппировать их в зависимости от выполняемой задачи. Подумайте, что пользователи будут делать в этом интерфейсе. Все же попытайтесь представить эти группы линейно. Представьте себе, что вы зачитываете список действий кому-то, кто не видит экран, — можно ли перечислить их в логической последовательности, понятно обозначив начало и конец? Именно так незрячий пользователь будет «слышать» интерфейс. Обозначение действий. Для ярлыков можно использовать текст, значки или и то и другое, в зависимости от того, что лучше соответствует природе действий. Если в основном полагаться на значки, то в итоге получится… привычная панель инструментов! (Или палитра, если ваш пользовательский интерфейс предназначен для приложения визуальной организации элементов.) Текстовые ярлыки на панели действий могут быть длиннее, чем текст в меню или на кнопках. Они могут занимать даже несколько строк — на панели действий нет необходимости экономить на словах. Просто помните, что длинные описания лучше подходят для новичков или тех, кто редко пользуется приложением, ведь им необходимо узнать (или вспомнить), для чего служат те или Паттерны 395 иные действия. Расходовать пространство на длинные ярлыки нежелательно в насыщенных высокопроизводительных интерфейсах, в которых в основном работают опытные пользователи. Если слов будет слишком много, даже взгляд новичка проскользнет по ним не останавливаясь. Примеры Снимок экрана на рис. 8.6 взят из приложения Dropbox. Это десктопный пользовательский веб-интерфейс. В правой части экрана находится панель действий. Цель состоит в том, чтобы по щелчку мыши всегда иметь быстрый доступ к самым частым действиям. Наиболее вероятная или наиболее часто используемая команда выделяется дополнительно. В целом группировка и разделение этих команд показывают, что это панель действий. Рис. 8.6. Панель действий в приложении Dropbox На следующих снимках экрана из ОС Windows 10 показаны два примера отображения/скрытия панели действий. Они не всегда видны из-за их размера. Пользователь должен щелкнуть, чтобы открыть их. Но после открытия они не исчезают и показывают большое количество вариантов и действий, доступных пользователю. Меню «Пуск» Microsoft Windows 10 (рис. 8.7) — легендарное всплывающее меню — это классический список значков приложений с дополнительными возможностями. Теперь панель намного больше и на ней отображаются группы плиток (на самом деле большие квадратные кнопки, некоторые с динамическим статусом, например погода). Плитки сгруппированы в соответствии с наиболее вероятными задачами пользователей. Выбор одной из них запустит приложение или откроет каталог. 396 Глава 8. За дело! Действия и команды Рис. 8.7. Меню «Пуск» в Microsoft Windows 10 Панель действий Microsoft Windows 10 (рис. 8.8) вызывается через значок диалогового окна в правом нижнем углу. Большая часть этой панели представляет собой прокручиваемый список уведомлений. Многие из этих уведомлений — это призывы к действию: пользователю необходимо изменить настройку, запустить процесс или исправить проблему. Уведомления можно щелкать, поэтому пользователь может выполнять действия прямо из этого списка. Внизу находится набор кнопок для доступа к уведомлениям и настройкам системы. В других руководствах по разработке данный паттерн называется Task Pane (Панель задач). Паттерны 397 Рис. 8.8. Панель действий Microsoft Windows 10 398 Глава 8. За дело! Действия и команды Prominent «Done» Button (Заметная кнопка «Готово»), или Assumed Next Step (Предполагаемый следующий шаг) Что это Кнопка или другой заметный элемент, который пользователи выбирают в качестве следующего шага либо для очевидного завершения процесса или закрытия страницы. Когда использовать Если необходимо поместить в интерфейс кнопку, аналогичную кнопке Done (Готово), Submit (Отправить), OK или Continue (Продолжить), всегда используйте этот паттерн. Создавайте хорошо заметную кнопку для последнего шага любой транзакции, например покупки в интернет-магазине, а также для применения группы настроек. Зачем Очевидный и понятный последний шаг вызывает ощущение завершенности. У пользователей не остается сомнений, что операция будет выполнена, как только они щелкнут на этой кнопке. Не заоставляйте их сомневаться, завершили ли они задачу. Посыл этого паттерна — последний шаг всегда должен быть очевидным. Чтобы добиться этого, используйте структуру макета страницы — в главе 4 мы рассматривали визуальную иерархию, визуальный поток, группировку и выравнивание. Как Создайте кнопку, выглядящую как настоящая кнопка, а не ссылка; используйте либо стандарты платформы для нажимаемых кнопок, либо крупный или средний графический символ кнопки выразительного цвета и с четко очерченными границами. Это поможет выделить кнопку на странице, так что она не потеряется среди остальных элементов. Поместите кнопку, завершающую транзакцию, в месте, где останавливается взгляд, перемещаясь по макету страницы. Присвойте ей узнаваемый ярлык. Сделайте кнопку заметной. При выборе ярлыка отдавайте предпочтение словам, а не значкам. Текст понять проще, к тому же большинство пользователей будут ожидать увидеть кнопку Done (Готово) или Submit (Отправить). Текст на кнопке может быть или глаголом, или короткой глагольной фразой, описывающей в терминах пользователя, что произойдет далее; ярлыки Send (Отправить), Buy (Купить) или Change Record (Из- Паттерны 399 менить запись) конкретнее, чем простое Done (Готово), поэтому в большинстве случаев более эффективны. Поместите кнопку туда, где пользователь без труда ее найдет. Проследите за потоком выполнения задачи на странице, в форме или диалоговом окне и поместите эту кнопку сразу после последнего шага. Обычно выбирают нижнее и/или правое поле страницы. Место для таких кнопок можно предусмотреть в макете страницы (см. паттерн Visual Framework (Визуальная структура) в главе 4), или оно может быть задано стандартами платформы — если это так, то придерживайтесь стандартов. В любом случае убедитесь, что кнопка находится рядом с последним текстовым полем или элементом управления. Если она окажется слишком далеко, то пользователи не смогут быстро ее найти и будут искать другие подсказки о том, что делать дальше. В случае с сайтом это может привести к тому, что пользователи покинут страницу (и, вероятно, отменят покупку), так как не поймут, что им необходимо предпринять. Примеры В магазине Google Play для ОС Android (рис. 8.9) отображается информация о конкретной игре. Предпочтительное действие «установить» на соответствующей кнопке Install (Установить) очевидно благодаря размеру, цвету, расположению и выделению пустым пространством. Это хорошая реализация для мобильной среды. Вам даже не нужно читать ярлык, кнопка действия выделяется визуально: зеленый цвет привлекает внимание. Насыщенный цвет контрастирует с белым фоном, но в то же время перекликается с синим цветом заголовков (белая или светло-серая кнопка с черной границей визуально слилась бы с формой); кнопка действительно похожа на кнопку. Она имеет форму прямоугольника со слегка скругленными углами. Кроме того, она крупная; кнопка расположена справа внизу от основного контента, в данном случае от мобильной игры. Как поток выполнения задачи (пользователь будет изу­чать страницу сверху вниз), так и визуальный поток направляют взгляд пользователя к кнопке; кнопка также выделяется за счет пустого пространства вокруг нее. В интерфейсах поиска авиабилетов на веб-сайтах JetBlue.com (рис. 8.10), Kayak. com (рис. 8.11) и Southwest.com (рис. 8.12) кнопки используются очень грамотно. Они отвечают всем рекомендациям данного паттерна, и пользователь не может не заметить их. Для каждой из этих страниц «Найти» — основное действие. Оно представлено заметной кнопкой контрастного цвета. (На самом деле у Southwest есть два призыва к действию: Search (Найти) и Book Now (Забронировать сейчас) для найденного предложения.) 400 Глава 8. За дело! Действия и команды Рис. 8.9. Магазин Google Play в мобильном устройстве на платформе ОС Android Среди этих примеров дизайн JetBlue наиболее эффективен. Кнопку легко увидеть благодаря контрасту цветов, ярлыку, расположению посередине и большому пустому пространству вокруг. Паттерны 401 Рис. 8.10. Сайт JetBlue.com На сайте Kayak кнопка поиска такая же яркая, но такое выделение менее эффективно, поскольку на кнопке выведен только значок и она расположена в дальнем правом углу экрана, где не очень заметна. Лупа — это стандартный символ поиска, но пользователь все равно должен связывать форму со словом или понятием. Southwest использует один дизайн для двух кнопок, поэтому внимание пользователя распыляется. Это уже не единственный призыв к действию. На нижней панели Book (Забронировать) кнопка эффективна: контраст белого и синего, а также ярлык и место привязки сообщают о задаче, которую должна выполнить панель (помочь пользователям найти рейс). Вверху, в разделе со специальными предложениями, комбинация красного и желтого менее контрастна, и кнопка кажется немного потерянной. В этой области страницы есть другие, гораздо более крупные элементы, которые привлекают внимание, к тому же сама кнопка расположена так, что взгляд не останавливается на ней. Airbnb (рис. 8.13) предлагает очевидную кнопку типа «готово/следующий шаг» на главном экране. Пользователь заполняет форму поиска жилья, после чего нажимает на единственную большую кнопку «Search» («Поиск»), привлекающую внимание, — это основное действие сайта Airbnb. 402 Глава 8. За дело! Действия и команды Рис. 8.11. Сайт Kayak.com Рис. 8.12. Сайт Southwest.com Паттерны 403 Рис. 8.13. Сайт Airbnb.com Smart Menu Items (Умные элементы меню) Что это Ярлыки меню, динамически отображающие действия, которые можно будет совершить при их вызове. Механизм, позволяющий сделать меню более эффективным и отзывчивым, предлагая различные варианты выбора в зависимости от действий пользователя. Когда использовать Если в пользовательском интерфейсе есть элементы меню, воздействующие на определенные объекты, например команда Close (Закрыть), или элементы, поведение которых может меняться в зависимости от контекста, например команда Undo (Отменить). Зачем Элементы меню, сообщающие, что произойдет, если их выбрать, делают интерфейс интуитивно понятным. Пользователю не придется задумываться о том, на какой объект будет направлено действие. Кроме этого, снижается вероятность ошибки — например, пользователь не удалит «Главу 8» вместо «сноски 3». Это создает благоприятные условия для безопасного исследования. 404 Глава 8. За дело! Действия и команды Как Каждый раз, когда пользователь выделяет другой объект (или текущий документ, последнюю отменяемую операцию и т. д.), изменяйте воздействующие на этот объект элементы меню, дополняя действия. Очевидно, что если никакой объект не выделен, то такие элементы меню следует отключать, подчеркивая связь между элементами меню и соответствующими объектами. Кстати, этот паттерн также можно применять для ярлыков кнопок, ссылок и всего остального, что считается «глаголом» в контексте пользовательского интерфейса. Но что, если выделено несколько объектов? Пока на этот вопрос невозможно дать исчерпывающий ответ — в существующих программных инструментах этот паттерн в основном применяется к документам и операциям отмены, но можно, например, использовать множественное число для ярлыка, скажем, Delete Selected Objects (Удалить выделенные объекты). Примеры На рис. 8.14 показано меню приложения Adobe Lightroom. Первый элемент в раскрывающемся меню Edit (Редактировать) динамический. Последним фильтром, который применил пользователь, был фильтр Increase Clarity (Увеличить четкость). Меню запоминает его и соответственно меняет свой первый элемент. Запускаемое им действие Undo (Отменить) основано на предыдущем действии пользователя. Ярлык меняется в зависимости от действий пользователя. Клавиши-ускорители удобны, если требуется многократно применять один и тот же фильтр. В предыдущем примере была показана строка меню, однако этот паттерн также можно эффективно применять к контекстным инструментам, таким как раскрывающееся меню в системе Gmail (рис. 8.15). Некоторые команды в нем меняются в зависимости от выбранного сообщения электронной почты. Элемент меню Add [person from email] to Contacts list (Добавить [имя человека] в список контактов) намного понятнее, чем безликая альтернатива, такая как Add sender to Contacts list (Добавить отправителя в список контактов). Паттерны 405 Рис. 8.14. Приложение Adobe Lightroom Рис. 8.15. Система Gmail 406 Глава 8. За дело! Действия и команды Preview (Предварительный просмотр) Что это Упрощенная визуализация вероятных результатов действия или применения команды, отображаемая еще до того, как пользователь подтвердит действие. Реалистичное моделирование возможных результатов действий пользователя, чтобы он мог выбрать тот, который ему нравится или необходим. Этот паттерн противоположен более простому и привычному методу проектирования взаимодействий, когда пользователь должен сначала запустить команду, а затем ждать, чтобы увидеть результаты. Когда использовать Если пользователь собирается выполнить что-то «тяжеловесное»: открыть большой файл, напечатать документ из 10 страниц, отправить форму, заполнение которой заняло много времени, или подтвердить покупку в интернет-магазине. Ему нужна гарантия, что он делает это правильно. Ошибка может привести к дополнительным расходам времени или даже денег. Также этот паттерн полезен в ситуациях, когда пользователь хочет внести изменение с трудно предсказуемым результатом, например наложить фильтр на фотографию. Он хочет проверить, будет ли эффект соответствовать его ожиданиям. Зачем Предварительный просмотр помогает предотвратить множество ошибок. Пользователь мог сделать опечатку или неправильно понять что-то, что привело к действию, которое он собирается выполнить (например, положить не тот товар в корзину интернет-магазина). Сопровождая планируемое действие кратким текстовым или наглядным описанием, вы даете пользователю шанс вернуться назад и исправить ошибки. Предварительный просмотр также делает приложение интуитивно понятным. Если пользователь никогда раньше не выполнял это действие или не знает, к каким результатам оно приведет, предварительный просмотр объяснит это лучше любой инструкции, а пользователь получит нужную информацию именно тогда и именно там, где это требуется. Как Непосредственно перед тем, как пользователь совершит действие, покажите ему всю необходимую информацию, чтобы он увидел последствия. Если это Паттерны 407 предварительный просмотр страницы перед печатью, то покажите, как она будет выглядеть на бумаге выбранного размера; если это операция над изображением, то покажите крупным планом, как оно будет выглядеть после внесения изменений; если это транзакция, то выведите на экран все, что известно о ней системе. Показывайте то, что действительно важно — не больше и не меньше. Предусмотрите возможность подтверждать действие прямо со страницы предварительного просмотра. Не заставляйте пользователь закрывать эту страницу или переходить куда-то еще. Также предусмотрите способ отказаться от действия. Если у пользователя есть шанс исправить операцию, просто отредактировав ранее введенные данные, дайте ему сделать это. В некоторых мастерах и других линейных процессах это реализовано путем перехода на несколько шагов назад. Примеры В приложении Apple Photos (рис. 8.16, слева) представлен широкий выбор фотофильтров. Каждый фильтр предлагает визуализацию по принципу «что видите, то и получаете». Во время редактирования фотографии внизу экрана выводятся миниатюры, показывающие, как будет выглядеть фото с применением каждого фильтра. Пользователям не нужно строить предположения, какой эффект дает фильтр, и не нужно сначала применять фильтр, чтобы увидеть, что он делает. Можно просто просмотреть визуализированные эскизы и выбрать понравившийся. Это намного удобнее, чем запоминать, как работает команда и каков будет результат. (Photoshop и другие приложения для обработки изображений используют похожие реализации предварительного просмотра.) Пример Bitmoji (рис. 8.16, справа) схож с описанным выше. В приложении Bitmoji можно создавать индивидуальные аватары в анимационном стиле и забавные мультфильмы и делиться ими в мессенджерах и социальных сетях. Первый шаг в Bitmoji — создание собственного мультяшного персонажа, для которого необходимо выбрать волосы, цвет глаз, мимику, тон кожи и другие особенности. На этом шаге пользователь пытается подобрать наиболее близкое соответствие своему внешнему виду из ограниченного набора вариантов. При выборе тона кожи Bitmoji выводит лица на основе выбора пользователя, а затем предлагает предварительный просмотр эскизов для каждого из доступных тонов кожи. Создавать реалистичный персонализированный аватар становится проще и быстрее, если можно просмотреть весь набор эскизов с разными оттенками кожи. На сайтах, предлагающих создать или настроить какой-то продукт, предварительный просмотр необходим, чтобы пользователь знал, какие опции он уже добавил. Хороший пример — настраиваемая комплектация автомобиля 408 Глава 8. За дело! Действия и команды Prius на рис. 8.17. Когда пользователь задает точные желаемые параметры для своего автомобиля Prius, экран предварительного просмотра обновляется, отображая выбор пользователя. Предварительные эскизы экстерьера и интерьера помогают потенциальным покупателям лучше понять, как может выглядеть их выбор. Пользователь может переходить от одного этапа к другому, а также экспериментировать с вариантами на каждом этапе, чтобы увидеть, как будет выглядеть желаемый продукт. Цель — получить ценовое предложение для автомобиля, основанное на индивидуальных потребностях потенциального покупателя. Такие инструменты для предварительного просмотра хорошо привлекают аудиторию. Рис. 8.16. Приложения Apple Photos и Bitmoji Паттерны 409 Рис. 8.17. Сайт Toyota.com Функция подбора макияжа от Sephora.com (рис. 8.18) — более персонализированный пример. Используя этот инструмент, покупатели смогут подобрать подходящие бьюти-продукты из огромного ассортимента. Они могут экспериментировать с тем, как будет выглядеть макияж. В приложение можно добавить изображение своего лица, а затем применить к нему огромный набор косметических средств и техник. Можно пробовать различные продукты и оттенки на коже, глазах, ресницах, бровях и губах. В результате покупатели получают список продуктов для создания желаемого образа: в раздел What You’re Wearing (Что вы использовали) автоматически заносятся продукты, которые выбирал покупатель для предварительного просмотра. 410 Глава 8. За дело! Действия и команды Рис. 8.18. Сайт Sephora.com Spinners (Спиннеры) и Loading Indicators (Индикаторы загрузки) Что это Анимация или другой индикатор, который отображается после подтверждения действия пользователем и до получения им ответа. Если перед получением ответа возникает задержка, спиннеры и индикаторы загрузки сообщают пользователю, что его сеанс «активен» и что система обрабатывает запрос, чтобы пользователь не отменял действие. Spinners (Спиннеры). Спиннер — это анимация, показывающая, что система обрабатывает какой-то процесс. Обычно он не сообщает об изменении состояния, например не показывает прогресс в выполнении задачи в процентах (хотя это не всегда так). Loading Indicators (Индикаторы загрузки). Индикатор загрузки обычно представляет собой анимацию в виде линейки или шкалы термометра с выводом ключевых данных о задаче, занимающей много времени, например загрузка больших файлов или изображений либо скачивание и установка мобильного приложения. Индикаторы загрузки выводят постоянно обновляемый счетчик «пустой/полный», полезные данные, такие как процент завершения, количество Паттерны 411 байтов обработанных и необработанных данных, а также время, оставшееся до завершения операции. Когда использовать Если длительная операция прерывает работу пользовательского интерфейса или выполняется в фоновом режиме более двух секунд. Вот несколько кратких полезных выводов, которые сделали известные эксперты в области юзабилити и цифрового дизайна Дон Норман и Якоб Нильсен, исследовавшие данную тему1. При задержке менее одной десятой доли секунды пользователям кажется, что они взаимодействуют с «живым» пользовательским интерфейсом, потому что реакция программы ощущается как мгновенная. Нет задержки при переходе от одного действия UI к другому. Это ожидаемое время отклика для программы. В промежутке от одной десятой секунды до одной секунды пользователь ощущает задержку, но не будет прерывать действие, ожидая быстрого продолжения. Если задержка ответа превышает одну секунду, пользователь может подумать, что что-то пошло не так и случился сбой в интерфейсе, либо он может отказаться от задачи. В этой ситуации обязательны спиннеры или индикаторы загрузки, чтобы сообщить пользователям, что программа работает либо что они могут перейти к другому действию, пока завершается процесс. Зачем Пользователи начинают беспокоиться, когда в интерфейсе ничего не происходит. Даже если вы меняете указатель мыши на значок с изображением циферблата или песочных часов (что необходимо делать в любом случае, если остальная часть интерфейса заблокирована), все равно не заставляйте пользователя ждать неопределенное время. Практика показывает, что, когда пользователи видят индикатор загрузки, они терпеливо ожидают ее окончания, даже если при этом приходится ждать дольше, чем без вывода индикатора. Возможно, потому что теперь они знают, что система «думает», а не зависла и не ожидает от них каких-то действий. 1 Nielsen, Jakob. “Response Times: The 3 Important Limits.” Nielsen Norman Group, Nielsen Norman Group, 1 Jan. 1993, https://oreil.ly/6IunB. В этой статье, обновленной в 2014 году, приводятся дополнительные источники исследований времени отклика ПО и его влияния на пользователей. 412 Глава 8. За дело! Действия и команды Как Показывайте анимированную индикацию того, какая часть процесса уже выполнена. Либо в текстовой форме, либо графически (или обоими способами) сообщайте пользователю: что происходит в данный момент; какая часть операции уже завершена; сколько времени осталось ждать; как остановить процесс. Иногда допустимы неточности в оценке времени, когда корректируется приблизительное значение. Однако в некоторых случаях просто невозможно определить, сколько времени еще ждать. В таких ситуациях выводите спиннер без указания состояния процесса. В большинстве инструментов графических пользовательских интерфейсов предусмотрен виджет или диалоговое окно для реализации данного паттерна. Однако помните о возможных проблемах с обработкой операций: индикатор загрузки необходимо постоянно обновлять, пока сама операция свободно выполняется. По возможности не блокируйте остальную часть экрана. Пока на нем находится индикатор загрузки, разрешите пользователям работать с интерфейсом. Если операцию, за ходом выполнения которой наблюдает пользователь, можно отменить, предусмотрите кнопку отмены или другой элемент с аналогичным функционалом прямо на панели индикатора или рядом с ней — именно там пользователь будет ее искать. Подробнее об этом говорится в описании следующего паттерна — Cancelability (Возможность отмены). Примеры Спиннеры обычно используются, когда ожидание отклика непродолжительно. Их функция — сообщить пользователю: «Мы обрабатываем ваш запрос, подождите секунду». Благодаря сервису Apple Touch ID для iPhone (рис. 8.19) разработчики приложений (в данном случае CVS) обеспечивают для клиентов безопасный вход в систему без необходимости вводить имя пользователя и пароль. В момент, пока iPhone/iOS и CVS обрабатывают вход, мы видим спиннер iOS. Спиннеры также являются стандартной частью большинства инструментариев и фреймворков пользовательского интерфейса. На рис. 8.20 показаны спецификация и пример фреймворка пользовательского интерфейса Twitter Bootstrap. Настраиваемый спиннер — один из стандартных компонентов библиотеки Bootstrap, и его можно использовать в любом месте веб-приложения Bootstrap. Паттерны 413 Рис. 8.19. Apple iOS, мобильное приложение CVS, пример спиннера iOS Рис. 8.20. Библиотека компонентов Twitter Bootstrap (getbootstrap.com), примеры спиннеров 414 Глава 8. За дело! Действия и команды Инструментарий Blueprint UI (рис. 8.21) предлагает компонент, который поддерживает встроенное отображение спиннера как части кнопки. Когда пользователь нажмет одну из этих кнопок, он увидит, что значок на кнопке на мгновение сменится на спиннер. Рис. 8.21. Инструментарий Blueprint (blueprintjs.com), состояние загрузки кнопки Индикаторы загрузки представляют более подробный статус загрузки, а также отображают информацию о процессах, занимающих больше времени. Они используются в ситуациях, когда времени ожидания достаточно для получения и отображения этой информации. Благодаря индикаторам пользователь будет знать, сколько времени займет процесс, и может подождать, отменить задачу или заняться чем-то еще и вернуться позже. На рис. 8.22 вновь показан магазин Google Play, на этот раз с загружаемой на устройство Android игрой. Кнопка Install (Установить) исчезла. Ее заменил информативный индикатор загрузки, представленный серо-зеленой горизонтальной линией. Анимированная зеленая полоса показывает, какой объем игры загружен от общего размера файла (серой полосы). Эта же информация представлена и в числовом виде. Добавлено также процентное выражение объема загрузки. Adobe использует индикаторы загрузки в приложении Creative Cloud для настольных компьютеров MacOS. В примере представлена его уменьшенная версия. На рис. 8.23 показан процесс обновления Photoshop CC. Небольшой индикатор загрузки напоминает термометр, согласно данным которого обновление загружено на 3 %. Паттерны 415 Рис. 8.22. Магазин Google Play, ОС Android Рис. 8.23. Менеджер рабочего стола Adobe Creative Cloud, macOS 416 Глава 8. За дело! Действия и команды Cancelability (Возможность отмены) Что это Способ мгновенно отменить операцию, занимающую много времени, без негативных последствий. Когда использовать Если операция блокирует пользовательский интерфейс или выполняется в фоновом режиме дольше двух секунд, например при печати файла, отправке запроса в базу данных или загрузке объемного файла. Также используйте этот паттерн, когда пользователь занят операцией, исключающей большинство других видов взаимодействия с системой, например работой с модальным диалоговым окном. Зачем Возможность отменить задачу или процесс в пользовательском интерфейсе в любое время важна для удобства использования. Это часть «пользовательского контроля и свободы действий», одной из 10 ключевых эвристик или рекомендаций по юзабилити, которые эксперт в области программного обеспечения Якоб Нильсен из Nielsen Norman Group вывел на основе обзора отраслевых исследований и их результатов1. Пользователи могут передумать. После запуска операции иногда возникает желание прервать ее, особенно если индикатор загрузки говорит, что она зай­ мет много времени. Какие-то операции могут запускаться вообще случайно. Возможность отменить ее помогает предотвращать ошибки и устранять их последствия — у пользователя всегда есть возможность остановить процесс, который, как он уже знает, завершится ошибкой, например загрузку страницы с недоступного веб-сервера. Пользователям комфортнее изучать интерфейс и исследовать различные функции, если они уверены, что любую операцию можно отменить. Это мотивирует их к безопасному исследованию (см. главу 1), поскольку интерфейс становится проще и интереснее осваивать. Как Сначала выясните, существует ли способ ускорить выполнение операции, чтобы она казалась быстрой. Не обязательно, чтобы операция действительно заверша1 Nielsen, Jakob. “10 Usability Heuristics for User Interface Design: Article by Jakob Nielsen.” Nielsen Norman Group, 24 Apr. 1994. Nielsen Norman Group, 24 апреля 1994 года, https:// oreil.ly/Sdw4P. Паттерны 417 лась быстро; достаточно, если она кажется быстрой пользователю. В интернете и в сетевых приложениях это может означать проактивную загрузку данных или кода — отправку их пользователю еще до того, как он их запросит, — а также отправку данных частями с отображением каждой части по получении. Помните, что скорость чтения у пользователей ограничена. Пока загружаются данные, предоставьте пользователям возможность прочитать уже загруженную часть, затем очередную и т. д. Однако если операцию действительно необходимо отменить, сделайте следующее: поместите кнопку отмены прямо в интерфейс рядом с индикатором загрузки (который вы, конечно же, используете) или туда, где выводятся результаты операции. Обозначьте ее словом Stop (Стоп) или Cancel (Отмена) и/или добавьте на кнопку узнаваемый всеми значок остановки — красный восьмиугольник, красный круг с белой горизонтальной полосой или крестик. Как только пользователь нажмет кнопку отмены, прерывайте операцию немедленно. Если промедлить секунду или две, то пользователь засомневается, действительно ли отмена произошла (или ему покажется, что вместо того, чтобы отменять операцию, система решила дождаться ее завершения). Покажите пользователю, что отмена выполнена: например, остановите индикатор загрузки и выведите сообщение об изменении состояния. Несколько параллельных операций — сложный случай. Как отменить только одну из них? Можно добавить информацию о том, что именно будет отменено, прямо на ярлык кнопки отмены или во всплывающую подсказку (схожий принцип см. в описании паттерна Smart Menu Items (Умные элементы меню)). Если действия представлены в виде списка или набора панелей, можно создать отдельную кнопку отмены для каждого из них, чтобы избежать двусмысленности. Примеры На экране установки игры в магазине Google Play (рис. 8.24) отображается минималистичный значок отмены. Серо-зеленая полоса — это спиннер. Зеленая полоса анимируется слева направо в течение нескольких секунд, пока устанавливается соединение для загрузки. Обратите внимание на большой значок отмены «X» справа от индикатора. Пользователь может в любой момент отменить процесс загрузки и установки. Adobe в своем десктопном приложении Creative Cloud для macOS использует другой стиль кнопки отмены «X» (рис. 8.25). На этой раскрывающейся панели рабочего стола в строке Photoshop CC рядом с индикатором загрузки есть значок «X». Клиент может щелкнуть на нем, чтобы отменить процесс обновления/ установки в любой момент. 418 Глава 8. За дело! Действия и команды Рис. 8.24. Магазин Google Play, ОС Android Рис. 8.25. Менеджер рабочего стола Adobe Creative Cloud, macOS Паттерны 419 Multi-Level Undo (Многоуровневая отмена) Что это Возможность быстро отменять результат выполнения последовательности действий. Многоуровневая отмена — это отмена операций пользователя из истории в сохраняемой последовательности. Паттерн Multi-Level Undo (Многоуровневая отмена) позволяет пошагово отменить любые недавние команды или действия из истории в порядке, обратном их выполнению. То есть первым отменяется последнее совершенное действие, вторым — предпоследнее и т. д. Как правило, для многоуровневой отмены доступна ограниченная история операций. Когда использовать Если вы создали высокоинтерактивный пользовательский интерфейс, более сложный, чем простая навигация по страницам или заполнение форм. Это могут быть программы для работы с электронной почтой и базами данных, средства разработки, графические редакторы и среды программирования. Добавьте эту функцию, если вы хотите дать пользователям возможность отменить последовательность действий, а не только одно последнее действие. Зачем Возможность отменять длинные последовательности действий создает ощущение безопасности при исследовании интерфейса. Пользователи охотнее экспериментируют с интерфейсом, поскольку уверены, что не внесут необратимых изменений, даже если случайно сделают что-то не так. Это касается любых пользователей, не только новичков1. Когда пользователь изучит интерфейс, он будет работать с уверенностью, что ошибки можно исправить. Если его палец соскользнет и он случайно вызовет неверную команду, то не придется прикладывать усилий для восстановления исходного состояния — возвращаться к сохраненным файлам, закрывать и заново запускать приложение или идти к системному администратору с просьбой восстановить файл. Это экономит время и нервы пользователей. Многоуровневая отмена также позволяет опытным пользователям быстро осваивать различные способы выполнения одной задачи. Например, пользователь может наложить последовательность фильтров на изображение, изучить результат, чтобы понять, получилось ли то, что нужно, и затем вернуться к исходному изображению. После этого он может попробовать другую последовательность фильтров, при желании сохранить ее и снова отменить результат. 1 Алан Купер (Alan Cooper) и Роберт Рейманн (Robert Reimann) посвятили концепции отмены целую главу в своей книге «About Face 2.0: The Essentials of Interaction Design» (издательство Wiley). 420 Глава 8. За дело! Действия и команды Это можно сделать и без многоуровневой отмены, но тогда это займет больше времени (чтобы закрыть и повторно открыть изображение). Когда пользователь поглощен творческим процессом, скорость и простота операций очень важны, чтобы сохранять концентрацию на работе. Подробнее об этом рассказывается в главе 1, особенно при рассмотрении паттернов Safe Exploration (Безопасное исследование) и Incremental Construction (Пошаговое построение). Как Отменяемые операции. В первую очередь определите, что будет представлять собой действие в продукте, который вы разрабатываете: как оно называется, с каким объектом связано и как отменяется. На основании этого можно создавать интерфейс. Решите, какие операции должны быть отменяемыми. Возможность отмены необходимо предусмотреть для любых действий, меняющих файл или базу данных (всех сохраняемых результатов), но она не обязательна для временных состояний или состояний просмотра. К примеру, в большинстве приложений можно отменять следующие типы изменений: ввод текста в документы или электронные таблицы; операции в базах данных; изменения в изображениях или на холстах; изменение макета: положение, размер, порядок следования или группировка элементов в графических приложениях; операции с файлами, такие как удаление или переименование; создание, удаление или изменение порядка объектов, таких как электронные сообщения или столбцы электронной таблицы; любые операции вырезания, копирования или вставки. Следующие типы изменений обычно не сохраняются в истории операций и не отменяются. Хороший тому пример — операции навигации: выделение текста или объекта; навигация между окнами и страницами; положение указателя мыши или текстового курсора; положение полосы прокрутки; местоположение или размер окна или панели; изменения, сделанные в несвязанном или модальном диалоговом окне. Некоторые операции считаются пограничными. Например, иногда в приложениях можно отменять действия по заполнению форм, а иногда нет. Однако если переход по клавише Tab из одного поля, где были сделаны изменения, в другое Паттерны 421 приводит к фиксации изменения, то, возможно, лучше сделать это изменение отменяемым. ПРИМЕЧАНИЕ Определенные типы операций вообще невозможно отменить. Однако чаще всего это интуитивно понятно исходя из природы приложения. Неотменяемые операции включают в себя этап оплаты покупки в онлайн-магазине, публикацию сообщения на форуме или в чате или отправку электронного письма, как бы нам иногда того ни хотелось! В любом случае убедитесь, что отменяемые операции представляют ценность для пользователя. Всегда определяйте их и присваивайте им имена, исходя из того, как их понимает пользователь, а не система. Например, ввод текста нужно отменять целыми блоками слов, а не побуквенно. Проектирование стека отмены или истории действий. Очередное выполненное действие помещается в верх стека истории операций, а каждая отмена аннулирует действие, находящееся наверху (самое последнее действие), затем второе сверху (предпоследнее), третье и т. д. Операция возврата ввода (Redo) работает точно так же, но в обратном порядке — по направлению к верхушке стека. Чтобы стек было удобно использовать, его глубина должна составлять как минимум 10–12 элементов или даже больше, если это можно реализовать в приложении. Необходимый объем стека можно установить на основе опыта использования продукта или тестирования юзабилити. Ларри Константайн и Люси Локвуд утверждают, что не стоит помещать в стек более 12 элементов, так как «пользователям редко нужно большее количество уровней отмены»1. Но эксперты, использующие широкие возможности профессиональных инструментов, могут считать иначе. Представление. Наконец, определите, как представить стек отмены пользователю. В большинстве десктопных приложений команды Undo/Redo (Отменить/ Вернуть ввод) находятся в меню Edit (Правка). Также команда Undo (Отменить ввод) обычно связывается с сочетанием клавиш Ctrl+Z. В грамотно организованных приложениях «умные» элементы меню (см. паттерн Smart Menu Items (Умные элементы меню)) сообщают пользователю, какая операция является следующей в стеке отмены. Примеры Microsoft Word (рис. 8.26) — пример типичного представления многоуровневой отмены. В данном случае пользователь ввел какой-то текст, а затем вставил 1 См. Constantine, Larry L., and Lucy A.D. Lockwood «Instructive Interaction: Making Innovative Interfaces Self-Teaching» User Experience, vol. 1, no. 3, 2002. Winter, https:// oreil.ly/QMNpz (https://oreil.ly/QMNpzg). 422 Глава 8. За дело! Действия и команды таблицу. Первая операция отмены удаляет таблицу. После этого очередной операцией отмены — следующим действием в стеке отмены — становится удаление введенного текста, что и происходит, если еще раз нажать Undo. В то же время у пользователя есть возможность «отменить отмену» при помощи пункта меню Redo (Вернуть ввод). Если пользователь находится на вершине стека (как на первом снимке экрана), то повтор невозможен, а соответствующий пункт меню заменяется действием Repeat (Повторить). Эту абстрактную концепцию сложно реализовать в интерфейсе. Если вы все же попытаетесь сделать что-то подобное, добавьте ее описание в справочную систему, чтобы объяснить принцип ее работы. Рис. 8.26. История операций в Microsoft Word Хотя это и не видно, Word сохраняет стек отмены в памяти. Это позволяет пользователю нажимать кнопку Undo (Отменить ввод) несколько раз, чтобы вернуться к предыдущему состоянию файла. Когда пользователь отменяет последнее действие с помощью команды Undo (Отменить ввод), первый элемент интеллектуального меню Edit (Правка) заменяется на следующее действие в стеке отмены. Паттерны 423 Большинство пользователей никогда не составят четкого представления о применяемых здесь алгоритмах; большинство вообще не знают, что такое стек, не говоря уж о том, как его можно использовать в сочетании с отменой и повтором ввода. Вот почему «умные» элементы меню просто необходимы для удобства использования. Они объясняют, что именно произойдет дальше, снижая когнитивную нагрузку на пользователя. Важно здесь то, что пользователи понимают, что могут перемещаться назад и вперед по последовательности своих недавних действий. Command History (История команд) Что это Отменяемые действия. По мере выполнения операций сохраняйте информацию о них в отдельном списке, который можно просмотреть: какие операции были выполнены, с какими объектами и когда. Этот список будет содержать описание шагов, которые сделал пользователь. Список можно просматривать и редактировать, применяя, удаляя или изменяя последовательность действий в нем. Обычно такая запись ведется для файлов, фотографий или других цифровых объектов, к которым применяются указанные команды. История браузера. Интернет-браузеры ведут запись сайтов, приложений и URL-адресов, которые посещал пользователь. Такой файл похож на файл журнала. Данные из него можно искать по ключевым словам в строке URL или по дате. Это полезно, если требуется найти сайт, на который пользователь уже заходил, но не может вспомнить его точный URL-адрес. Когда использовать Если пользователи выполняют длинные и сложные последовательности действий либо в графическом интерфейсе, либо в командной строке. Большинство пользователей достаточно опытны, но даже новичкам нужен интерфейс, помогающий выполнять повторяющиеся операции длительное время. Этот паттерн придется кстати в графических редакторах и программных средах. Зачем Иногда пользователю бывает нужно вспомнить или проверить, что он уже делал в приложении. Например, ему может понадобиться: повторить действие или команду, которые он делал раньше, а теперь забыл; вспомнить порядок, в котором выполнялись определенные действия; повторить последовательность операций, выполненную для одного объекта, с другим объектом; 424 Глава 8. За дело! Действия и команды сохранить журнал действий по причинам юридического характера или в целях безопасности; преобразовать интерактивную последовательность команд в сценарий или макрос (см. паттерн Macros (Макрос) в этой главе). Как Ведите постоянно обновляемый список действий пользователя. Если интерфейс управляется из командной строки, то это просто — нужно всего лишь записывать все, что в нее вводится. По возможности сохраняйте историю всех сеансов, чтобы пользователь мог видеть операции, сделанные неделю назад или даже раньше. Если речь идет о графическом интерфейсе или комбинации графического интерфейса и интерфейса командной строки, то задача немного усложняется. Найдите краткий и универсальный способ описать любые действия словами (хотя ничто не мешает использовать графику). Убедитесь, что вы выбрали подходящую степень детализации: если одно действие применяется сразу к семнадцати объектам, то записывайте его как одно действие, а не как семнадцать. Какие команды сохранять в журнале, а какие нет? Подробно мы это обсуждали в описании паттерна Multi-Level Undo (Многоуровневая отмена). Если команда отменяемая, то ее нужно фиксировать в истории. Наконец, покажите историю пользователю. Делать ее видимой не обязательно, так как она практически всегда играет вспомогательную роль. Список команд, от более старых к более новым, — хороший вариант ее представления. При желании к каждой команде можно добавить метку времени. Примеры Google Chrome (рис. 8.27), как и все браузеры, хранит историю веб-сайтов и веб-приложений, которые посещает пользователь. Пользователь может просматривать историю и искать по ней, что позволяет открывать ранее посещенные сайты или делиться элементами из списка с другими пользователями. Страница истории Google Chrome, хотя и не содержит строгую историю действий, представляет собой список ресурсов, которые посещал пользователь. Это позволяет использовать функцию подсказки при вводе текста в поле URL-адреса, если URL-адрес или файл уже есть в истории. Чтобы перейти на сайт из истории, можно воспользоваться поиском по ней или выбрать URL вручную. Стек отмены в Adobe Photoshop CC (рис. 8.28) фактически представляет собой историю команд. Его можно использовать для отмены действий, но это совсем не обязательно; можно просто прокручивать и просматривать содержимое Паттерны 425 истории для напоминания о совершенных действиях. Значки используются для идентификации различных классов действий, что довольно необычно, но удобно. Такая тщательно собранная история действий — давняя особенность Photoshop. Каждый инструмент, действие, фильтр или другая команда записываются в хронологическом порядке. Записи можно просмотреть в палитре History (История) (в нижнем левом углу изображения). Функция History (История) служит не просто для отмены действий, в ней также можно выборочно активировать и деактивировать действия или изменять их последовательность, что может быть полезно для работы с изображениями. Рис. 8.27. История браузера Google Chrome 426 Глава 8. За дело! Действия и команды Рис. 8.28. Окно приложения Adobe Photoshop CC Macros (Макрос) Что это Макрос — это одно действие, включающее в себя несколько других, более мелких операций. Пользователи создают макросы, составляя последовательности действий. Их можно сохранять для повторного использования по отдельности или в последовательности других команд. Макросы позволяют существенно экономить время и значительно повышать эффективность рабочего процесса. Когда использовать Если пользователям нужно повторять длинные последовательности действий или команд. Возможно, требуется циклически пройти по списку файлов, изображений, записей базы данных или других объектов, выполняя для каждого из объектов одни и те же действия. В этом случае уже могут быть реализованы паттерны Multi-Level Undo (Многоуровневая отмена) или Command History (История команд). Зачем Никому не хочется выполнять одни и те же задачи снова, и снова, и снова! Это именно то, что должны делать компьютеры, а не люди. В главе 1 описан паттерн пользовательского поведения Streamlined Repetition (Упрощенное повторение); Паттерны 427 макросы представляют собой идеальный механизм для поддержки этого поведения. Очевидно, что макросы помогают пользователям работать быстрее. Кроме того, чем меньше команд или манипуляций необходимо для выполнения задачи, тем меньше вероятность опечаток, оплошностей или одинаковых ошибок. Можно также вспомнить концепцию потока, о которой говорилось в первой главе. Если пользователь может сжать длинную последовательность действий в одну команду или сочетание клавиш, это очень помогает войти в состояние рабочего потока: пользователь делает больше, прилагая меньше усилий и тратя меньше времени, и не отвлекается от основной цели, так как не распыляет внимание на детали. Как Предоставьте пользователю способ записывать последовательности действий и с легкостью воспроизводить их в любой момент времени. Воспроизведение должно запускаться одной командой, нажатием одной клавиши или перетаскиванием объекта. Определение макроса. У пользователя должна быть возможность присваивать макросам названия по своему выбору. Позвольте ему просматривать последовательности действий на случай, если понадобится проверить или просто вспомнить, что было сделано (как в паттерне Command History (История команд)). Сделайте так, чтобы можно было из одного макроса ссылаться на другой и встраивать их друг в друга. Пользователи будут работать с макросами не один день, так что убедитесь, что они сохраняются в файлах или базе данных. Представляйте их в списке с возможностью поиска и сортировки или даже в списке, разбитом на категории, в зависимости от требований пользователей. Выполнение макроса. Чтобы не усложнять задачу, макрос можно просто воспроизводить в прямом смысле этого слова. Или же, если макросы работают с различными целевыми объектами, предусмотреть возможность параметризации (то есть вместо определенного имени объекта использовать заполнитель или переменную). Также макросы должны уметь воздействовать одновременно на несколько объектов. Расположение макросов (или элементов управления, предназначенных для их запуска) в интерфейсе зависит от приложения, однако лучше показывать их там же, где находятся основные команды. Возможность самостоятельно записывать последовательности и создавать новые макросы на основе уже существующих позволяет пользователю даже изобрести совершенно новый язык или визуальную грамматику — идеально соответствующую его рабочей среде и привычкам. Это очень мощный инструмент. Фактически это элемент программирования; 428 Глава 8. За дело! Действия и команды но если пользователь не считает себя программистом, то и не стоит его так называть, чтобы не напугать («Я не умею программировать, у меня просто ничего не получится!»). Примеры В приложении Adobe Photoshop CC (рис. 8.29) много возможностей для создания и использования макросов. Главная — это возможность создавать или записывать сложные, многоэтапные команды редактирования и преобразования изображений. В Photoshop они называются действиями. Действия значительно ускоряют рабочие процессы с изображениями за счет автоматизации и повторного использования. В данном примере слева выбрано существующее действие под названием Sepia Toning (Тонирование сепией), чтобы показать несколько вложенных шагов, которые последовательно выполняются в рамках этого действия. Справа в меню Actions (Действия) показаны параметры записи, редактирования и тонкой настройки сложных многоэтапных действий. Рис. 8.29. Запись макроса в Adobe Photoshop CC На рис. 8.30 показано меню и диалоговое окно Batch automation (Пакетная автоматизация) в приложении Adobe Photoshop CC. Это еще один конструктор макросов. В данной системе хранятся созданные пользователем сценарии рабочего процесса, которые предписывают Photoshop открывать изображения из одного располо- Паттерны 429 жения, применять сохраненные действия и сохранять изображения с указанным именем в другом расположении. Это еще больше экономит время, поскольку пользователю не нужно открывать каждое изображение вручную, чтобы применить макрос. Таким образом, можно быстро обрабатывать очень большое количество файлов в автоматическом режиме, значительно экономя силы. Рис. 8.30. Пакетная автоматизация: настройка серии действий для автоматического выполнения с несколькими файлами 430 Глава 8. За дело! Действия и команды С помощью современных решений можно интегрировать и создавать сценарии для различных веб-приложений, сервисов и платформ, как если бы они были одним приложением. IFTTT (If This, Then That) (рис. 8.31) — это веб-приложение для создания сценариев. Сторонние продукты становятся доступными для использования, если их компании-разработчики имеют доступ к API и интегрированы с платформой IFTTT. Клиент может предоставить свои сторонние учетные записи IFTTT и интегрировать различные веб-приложения с помощью макросов, называемых в IFTTT рецептами. Вот несколько примеров того, что могут делать рецепты IFTTT: Синхронизировать фото профиля во всех своих учетных записях в социальных сетях. Осуществлять автоматическое резервное копирование файлов изображений из социальных сетей в облачное хранилище. Включать и выключать устройства домашней автоматизации с помощью мобильного телефона. Сохранять сообщения из социальных сетей в облачной таблице. Сохранять данные о состоянии организма со специализированных фитнесустройств в облачной таблице. Для создания рецептов IFTTT необходимо указать учетные данные пользователя для входа в его онлайн-аккаунты, после чего создаются простые макросы с использованием веб-приложения IFTTT (рис. 8.31). Крупная фраза на экране Рис. 8.31. Создание апплета IFTTT (If This, Then That) Паттерны 431 Рис. 8.32. Microsoft Excel 432 Глава 8. За дело! Действия и команды «if [Twitter] then [+] that» — это макрос, находящийся в процессе создания. Первая часть уже готова. Данная учетная запись интегрирована с учетной записью Twitter. Если щелкнуть на значке Twitter, откроется страница настройки триггера Twitter для макроса. На следующем этапе осуществляется настройка шага «that». Например, запись каждого твита в электронную таблицу Google. Эти действия должно выполнять приложение IFTTT или любой другой интегрированный веб-сервис. Данные макросы позволяют настраивать автоматизированные бизнес-процессы, которые объединяют не связанные между собой веб-приложения и сервисы. В Microsoft Excel (рис. 8.32) можно записывать макросы, присваивать им имена, сохранять вместе с документом и даже назначать им сочетания клавиш. В данном примере пользователь может записать макрос, а затем отредактировать его в среде программирования (упрощенном редакторе Visual Basic, встроенном в Excel). Пользователь записывает макросы для обработки данных и управления электронными таблицами в Excel. Их можно редактировать и сохранять для повторного использования. Если вы разрабатываете приложение с широкими возможностями для создания сценариев, то на примере Excel подумайте, в каких ситуациях макросы могут вызвать неудобства. Быть может, вы захотите наложить ограничения на возможности макросов в своем приложении. Заключение В этой главе мы рассмотрели различные режимы и способы выполнения действий или запуска команд. У вас, как у разработчика взаимодействий, имеется в распоряжении набор паттернов и практик, помогающих пользователям увидеть и понять, что они могут делать и что происходит в приложении. Самые важные действия должны быть хорошо заметны. Чтобы этого достичь, можно использовать графические приемы, описанные в данной главе. Действия должны быть понятны, чтобы вы могли направлять пользователей к желаемому следующему шагу. Такие паттерны, как Preview (Предварительный просмотр) и Multilevel Undo (Многоуровневая отмена), помогают пользователям избежать ошибок, а также быстрее изучить новый инструмент. Не стоит недооценивать положительные эмоции, которые пользователь испытывает от возможности безопасно работать с интерфейсом (то есть когда пользователь сохраняет контроль над своими действиями, потому что понимает, как их предварительно просматривать, запускать и отменять). Для более продвинутых пользователей или в сложных взаимодействиях предусмотрите возможность записывать действия, как если бы они находились на шкале времени, с возможностью перемещаться по ней вперед и назад, — это мощный инструмент контроля. Наконец, если пользователям нужна скорость и эффективность, чтобы автоматически совершать множественные действия, предоставьте возможность создавать макросы или похожие функции. ГЛАВА 9 Отображение сложных данных Информационная графика, в том числе карты, таблицы и диаграммы, представляет информацию визуально, а не вербально, своим уникальным способом. Графика позволяет пользователям делать выводы при помощи зрительного канала восприятия; она показывает, а не говорит. Визуализация данных — это одновременно искусство и наука. Это специализация дизайна, которая требует как экспертных знаний предмета, так и умения чувствовать дизайн визуально. Создание искусных визуализаций — это отдельная дисциплина. В этой главе представлены основы информационной графики и показаны некоторые из самых распространенных способов представления данных в мобильных приложениях или на сайтах. Основы инфографики «Информационная графика» означает визуальное представление данных с целью сообщить определенную информацию пользователю. К ней относят также таблицы и древовидные представления, так как, по сути, они являются визуальными, даже несмотря на то, что состоят в основном из текста, а не из линий и фигур. Другие известные типы статичной инфографики — это карты, блок-схемы, гистограммы и чертежи реальных объектов. Однако мы работаем с компьютерами, а не с бумагой. Благодаря интерактивным возможностям практически любой хороший статический дизайн можно сделать еще лучше. Интерактивные средства позволяют скрывать и отображать информацию по мере необходимости; пользователь может сам выбирать, каким образом просматривать и изучать данные. Даже у простого действия упорядочивания и перестановки данных на интер­ активном экране есть своя ценность — пользователь вовлекается в процесс их исследования, а не остается пассивным наблюдателем. Это дорогого стоит. Скорее всего, пользователь не создаст шедевральный график или таблицу, но в процессе работы с ним он узнает о таких его свойствах, которые никогда бы не заметил на бумаге. 434 Глава 9. Отображение сложных данных В конечном итоге цель работы с инфографикой — узнать что-либо. Однако дизайнеры должны понимать, что именно пользователю требуется узнать. Возможно, он ищет что-то определенное, например конкретную улицу на карте, и тогда он должен иметь возможность найти ее, используя прямой поиск или фильтруя не относящуюся к этой улице информацию. «Общая картина» ему нужна только для того, чтобы получить необходимые конкретные данные. Возможность искать, фильтровать и углубляться в детали критически важна при работе с данными. С другой стороны, иногда пользователю требуется узнать что-то менее конкретное. Он может смотреть на карту просто для того, чтобы получить представление о плане города, а вовсе не искать определенный адрес. Или же он может быть ученым, создающим наглядную иллюстрацию биохимического процесса и пытающимся понять механизм его работы. В этом случае важна именно общая картина; пользователю необходимо видеть, как части соединяются, образуя целое. Он может увеличивать или уменьшать масштаб, время от времени рассматривать детали и сравнивать одно представление данных с другим. Хорошая интерактивная инфографика отвечает на следующие вопросы: Как организованы данные? Какие связи существуют между данными? Каким образом можно изучать данные? Можно ли изменить порядок данных, чтобы взглянуть на них иначе? Как отсечь лишнее и увидеть только необходимое? Каково значение конкретных данных? Читая следующие разделы, помните, что термин «информационная графика» всеобъемлющ. Он включает в себя графики, графы, карты, таблицы, деревья, шкалы времени и всевозможные виды диаграмм. Данные могут быть чрезвычайно объемными и многоуровневыми или краткими и сжатыми. Многие из представленных ниже техник можно с успехом применять даже к таким типам графики, которые, казалось бы, совершенно для этого не подходят. Прежде чем перейти к описанию самих паттернов, давайте обсудим некоторые из перечисленных выше вопросов. Организационные модели: как организованы данные? Первое, что пользователь видит в любой визуализации — это форма представления данных. В идеальном случае внутренняя структура данных сама предполагает нужную форму. Какие модели (табл. 9.1) лучше всего подходят для отображения ваших данных? Основы инфографики 435 Таблица 9.1. Модели организации информации Модель Схема Наиболее распространенный вид графики Линейная Список или график одной переменной Табличная Электронная таблица, многоколоночный список, сор­тируемая таблица, график с несколькими осями Y или другие многомерные графики Иерархическая Дерево, каскадный список, древовидная таблица Сетевая Направленный граф, блок-схема Географическая (или пространственная) Карта, план или точечная диаграмма Текстовая Облако слов, направленный граф Другая Разнообразные графики, например графики в параллельных координатах или древовидные карты Попробуйте применить эти модели к данным, которые планируете отображать. Если подойдут две или больше, оцените, какие свойства данных подчеркивает каждая из них. Например, если данные могут быть и географическими и табличными, то только табличное представление не отразит их географическую природу — если не добавить представление в виде карты, то пользователь упустит интересные особенности или связи в данных. Преаттентивные элементы визуализации: что с чем связано? Организационная модель многое говорит пользователю о форме данных. Часть этой информации воспринимается на подсознательном уровне; люди распознают схемы, таблицы и карты и делают выводы относительно представленных в этих структурах данных еще до того, как начинают думать о них осознанно. Но это заслуга не только формы. То, как выглядят отдельные элементы данных, также работает преаттентивно1: пользователь обычно ассоциирует друг с другом похожие вещи. 1 Преаттентивный — термин из когнитивной психологии, буквально — «предшествующий вниманию» или, говоря простым языком, «понятный с первого взгляда». — Примеч. ред. 436 Глава 9. Отображение сложных данных Если вы прочитали четвертую главу, то уже знаете о гештальт-принципах (если же вы ее пропустили, то сейчас самое время вернуться и прочитать введение к главе 4). Большинство из этих принципов, особенно подобие и непрерывность, применимы и здесь. Остановимся подробнее на том, как они работают. Определенные визуальные элементы преаттентивны: они передают информацию еще до того, как пользователь осознанно обратит на них внимание. Посмотрите на рис. 9.1 и найдите синие объекты. Полагаю, вы справились довольно быстро. Теперь взгляните на рис. 9.2 и сделайте то же самое. Рис. 9.1. Найдите синие объекты Рис. 9.2. Еще раз найдите синие объекты И снова вы справились с задачей быстро, не так ли? В действительности совершенно не важно, сколько на рисунке красных объектов; время, которое тратится на поиск синих, остается постоянным! Можно предположить, что оно должно находиться в линейной зависимости от общего количества объектов — время порядка N, если говорить в терминах алгоритмов, — но это не так. Цвет работает на примитивном когнитивном уровне. Всю тяжелую работу за вас выполняет система визуального восприятия, причем создается впечатление, что она функционирует в режиме «массового параллелизма». Основы инфографики 437 С другой стороны, визуально монотонный текст заставляет прочитывать все значения и анализировать их. На рис. 9.3 та же задача, что и в примере с цветными объектами, показана на примере чисел. Как быстро вам удастся найти числа, большие единицы? Рис. 9.3. Найдите значения больше единицы Когда речь идет о подобных текстах, время поиска действительно линейно зависит от количества элементов. Что, если в той же задаче с текстом увеличить размер нужных цифр, как на рис. 9.4? Рис. 9.4. Еще раз найдите значения больше единицы Совсем другое дело! Теперь время поиска снова стало постоянным. Ведь размер — это еще один подсознательный элемент визуализации. Тот факт, что более крупные числа выходят за правую границу ячейки, помогает вам найти 438 Глава 9. Отображение сложных данных их, так как выравнивание — это дополнительный преаттентивный элемент визуализации. На рис. 9.5 показаны некоторые известные преаттентивные элементы визуализации. Рис. 9.5. Восемь преаттентивных элементов визуализации Эта концепция оказывает серьезное влияние на текстовую инфографику, такую как таблица чисел, показанная на рис. 9.3. Если определенные данные должны выделяться на фоне других, то нужно изменить их цвет, размер или другие преаттентивные элементы визуализации. В целом эти элементы можно применять для установления различий между классами или измерениями данных любого типа на любой инфографике. Иногда это называется кодированием. Когда необходимо вывести на графике многомерный набор данных, для кодирования всех этих измерений в одном статическом представлении можно использовать несколько разных визуальных элементов. Рассмотрим точечную диаграмму на рис. 9.6. Позиция точек определяется вдоль осей X и Y; цвет представляет собой третий преаттентивный элемент визуализации. Форма маркеров могла бы стать четвертым элементом, но в данном случае она лишь дублирует Основы инфографики 439 цвет. Это добавочное кодирование помогает пользователям визуально разделять три группы данных. Километров за литр Такое кодирование в чем-то схоже с общей концепцией графического дизайна под названием «многоуровневое представление». Когда вы смотрите на хорошо проработанную иллюстрацию любого типа, вы воспринимаете различные классы информации. Преаттентивные элементы, такие как цвет, заставляют некоторые из них выделяться, но благодаря схожести вы видите связь между ними, как если бы каждый из них был нанесен на прозрачную пленку, а пленки наложены на базовый рисунок. Это чрезвычайно мощный способ сегментирования данных — каждый слой проще всей иллюстрации в целом, и зритель может исследовать эти слои по очереди, но в то же время сохраняются и подчеркиваются взаимоотношения между частями целого. Вес автомобиля в килограммах Рис. 9.6. Кодирование с помощью трех элементов визуализации на точечной диаграмме Навигация и просмотр: как изучать данные? Первый этап исследования интерактивного визуального представления данных может включать произвольный просмотр — пользователь просто пытается понять, что здесь изображено. Он перемещается по массиву данных, чтобы отыскать необходимую информацию. Для обнаружения нужных данных также можно использовать фильтрацию и поиск, но навигация по виртуальному 440 Глава 9. Отображение сложных данных пространству набора данных зачастую предпочтительнее. Пользователь видит интересующие его данные в контексте всей имеющейся информации. В сфере визуализации информации есть хорошо известное правило: «фокус плюс контекст». Хорошая визуализация должна позволять пользователю сфокусироваться на интересующей его точке, одновременно показывая достаточно материала вокруг нее, чтобы он понимал, где именно эта точка находится на общей картине. Вот несколько популярных техник навигации и просмотра. Прокрутка и панорамирование. Если данные не помещаются на экране целиком, то их можно показать в окне с функцией прокрутки — тем самым контент, оказавшийся за пределами экрана, будет легкодоступен пользователям. Полосы прокрутки знакомы всем, их легко использовать. Однако данных может быть слишком много и они могут быть разного размера (что делает прокрутку неточной), или же за пределами экрана остаются данные, которые необходимо постоянно обновлять либо пересчитывать (из-за чего прокручивание замедляется). В этих случаях вместо полос прокрутки попробуйте создать кнопки, которые пользователь будет нажимать, чтобы выводить очередную страницу с данными. В других приложениях применяется панорамирование, когда курсор «захватывает» графический элемент и перетаскивает его в нужную точку, как в Google Maps. Эти техники подходят для множества различных ситуаций, но в их основе лежит один принцип: интерактивное перемещение видимой части графического элемента. Иногда не потеряться пользователю помогает функция общего обзора. На миниатюре полного изображения в углу экрана может находиться прямоугольный индикатор, указывающий фрагмент, который в данный момент представлен подробно; помимо полос прокрутки или других средств перемещения пользователь может перетаскивать этот прямоугольник. Масштабирование. Масштабирование (зум) — это изменение масштаба просматриваемой области изображения, тогда как при прокрутке меняется сама область. Если вы отображаете карту или диаграмму со множеством данных, дайте пользователю возможность приблизить интересующие его точки. Не пытайтесь втиснуть все детали в полное представление; если ярлыков очень много или если на иллюстрации есть очень мелкие детали (в частности, на картах), это все равно невозможно. По мере увеличения (приближения) изображения и появления дополнительного пространства эти детали будут возникать на экране. Обычно масштабирование осуществляется при помощи сведения и разведения пальцев, щелчков мышью или нажатий кнопок, причем вся зона просмотра увеличивается или уменьшается единообразно. Однако это не единственный способ. В некоторых приложениях в инфографике создаются нелинейные искажения, по мере того как пользователь передвигает по ней Основы инфографики 441 указатель мыши: увеличивается только то, что находится прямо под указателем, а то, что находится достаточно далеко, не меняется. Скрытие и вывод интересующих данных. В древовидных представлениях пользователи обычно могут произвольно открывать и закрывать родительские элементы, чтобы исследовать их содержимое. Некоторые иерархические диаграммы и графы также позволяют открывать и закрывать фрагменты диаграмм «на месте», не открывая новое окно и не переходя на другую страницу. Это позволяет изучать содержимое или взаимоотношения между предками и потомками, не покидая рабочего окна. Детализация. Определенные типы инфографики представляют только «верхний уровень» информации. Пользователь может щелкнуть на точке карты, чтобы просмотреть сведения о городе, или на ключевой точке диаграммы, чтобы увидеть диаграмму следующего уровня. Для этого можно использовать то же самое окно или отдельную панель в этом окне либо каждый раз открывать новое окно. Данная техника напоминает скрытие и вывод интересующих данных, только вид просмотра независим от изображения и не интегрирован в него. Если вы добавляете в интерактивную инфографику функцию поиска, свяжите его результаты с одной из перечисленных ранее техник, которая будет задействована. Другими словами, когда пользователь ищет на карте город Сидней, масштабируйте или панорамируйте карту, выводя на экран эту точку. Таким образом, вы реализуете преимущество использования пространственной памяти и контекста. Сортировка и перестановка: можно ли изменить порядок данных, чтобы увидеть их по-другому? Иногда простое изменение порядка представления данных может выявить их неожиданные взаимосвязи. Посмотрите на следующий график, взятый из диаграмм смертности Национального института рака (рис. 9.7). Здесь показано число смертей от рака легких в штате Техас. В алфавитном порядке выведены основные муниципальные районы Техаса — вполне логичный порядок сортировки по умолчанию, если вам необходимо найти определенные города, но в таком виде, как они отображаются сейчас, эти данные не вызывают желания их проанализировать. Например, совершенно не очевидно, почему у городов Абилин (Abilene), Элис (Alice), Амарилло (Amarillo) и Остин (Austin) схожие показатели — может, это просто случайность. Однако в этом веб-приложении можно изменить порядок представления данных, отсортировав показатели по убыванию, как на рис. 7.8. Неожиданно график становится намного интереснее. На первом месте оказывается Галвестон (Galveston) — почему, если его сосед Хьюстон (Houston) намного дальше на 442 Глава 9. Отображение сложных данных шкале? Что такого особенного в Галвестоне? (Конечно же, чтобы задавать такие вопросы, необходимо разбираться в географии Техаса, но вы понимаете, о чем я.) Аналогично, в чем причина различия между соседями Далласом (Dallas) и ФортУортом (Fort Worth)? И очевидно, что южные города на границе с Мексикой — Эль-Пасо (El Paso), Браунсвилл (Brownsville) и Ларедо (Laredo) — отличаются минимальными показателями смертности от рака легких по сравнению со всеми остальными районами Техаса. Из-за чего? На эти вопросы невозможно ответить, имея лишь такой набор данных, но, по крайней мере, он побуждает их задавать. Рис. 9.7. Сведения о смертности от рака по городам, сортировка по алфавиту Когда люди взаимодействуют с графическим представлением данных, у них больше возможностей сделать выводы на основе графики. Сортировка и изменение порядка позволяют помещать рядом разные данные, что помогает проводить различные сравнения — намного проще оценить соседние данные, чем те, что разнесены по разным концам диаграммы. А пользователи обычно обращают больше внимания на крайние точки шкалы, как продемонстрировано в этом примере. Как еще можно использовать эту особенность? В паттерне Sortable Table (Сортируемая таблица) говорится об одном очевидном способе: когда в таблице много столбцов, пользователи могут захотеть отсортировать строки по определенному столбцу. Этот паттерн встречается очень часто. (Многие реализации таблиц Основы инфографики 443 также допускают перестановку самих столбцов путем перетаскивания.) В древовидных структурах можно менять местами дочерние узлы. На диаграммах и связных графах можно реализовать пространственное перемещение элементов с сохранением связей между ними. Рис. 9.8. Тот же график, но данные упорядочены по убыванию Опираясь на подходы к информационной архитектуре, рассмотренные в главе 2, обратите внимание на следующие типы сортировки и перестановки: в алфавитном порядке; численно; по дате или времени; по физическому местоположению; по категории или тегу; по популярности — часто используемые или редко используемые; по предпочтениям пользователя; абсолютно случайная (никогда не знаешь, что увидишь дальше). Простейший пример показан на рис. 9.9. Гистограммы, в которых каждый столбец объединяет несколько значений данных («многоуровневые» гистограммы), могут также допускать перестановку элементов — сегменты столбцов, находящиеся ближе всего к основанию, проще оценивать и сравнивать, поэтому можно разрешить пользователям самостоятельно определять, какая переменная должна находиться внизу. 444 Глава 9. Отображение сложных данных Рис. 9.9. Перестановка элементов в многоуровневой гистограмме На первый взгляд кажется, что переменная, выделенная в примере светло-голубым цветом, имеет одинаковую величину во всех столбцах. Отличаются ли ее размеры на самом деле и насколько? Какие из светло-голубых столбцов самые высокие? Действительно, это невозможно определить точно, если не переместить эти данные к основанию — при такой трансформации все светло-голубые прямоугольники выравниваются по нижнему краю. Теперь визуальное сравнение провести очень просто: самыми высокими оказались светло-голубые прямоугольники 6 и 12, а разница в высоте приблизительно соответствует общей высоте столбцов. Поиск и фильтры: покажите только то, что мне нужно Иногда не требуется выводить на экран все данные сразу. Например, вы начинаете со всех имеющихся данных и затем сужаете набор до необходимой подгруппы — это фильтр. Можно также отобрать часть данных с помощью поиска или запросов. Большинство пользователей даже не видят разницы между фильтром и запросом (хотя, скажем, с точки зрения базы данных она огромна). Какой бы термин вы ни использовали, пользователь хочет одного: сконцентрироваться исключительно на интересующем его фрагменте данных, убрав все остальное. Самые простые техники фильтрации и запросов позволяют пользователям самостоятельно выбирать, какие данные просматривать. Флажки и другие простые элементы управления включают и отключают отображение различных фрагментов интерактивной графики. В таблице можно вывести часть столбцов, оставив другие скрытыми, в зависимости от выбора пользователя; на карте можно отобразить только выбранные пользователем интересные места (например, рестораны). Логическим продолжением этого простого механизма является паттерн Dynamic Queries (Динамические запросы), обладающий богатыми интерактивными возможностями. Иногда бывает достаточно выделить на экране набор данных, но не скрывать и не удалять остальные. Так пользователь будет видеть этот набор в контексте. Это можно интерактивно реализовать при помощи простых элементов управления, о которых говорилось выше. В паттерне Data Brushing (Окрашивание данных) описан вариант, когда одни и те же данные выделяются на нескольких иллюстрациях одновременно. Основы инфографики 445 Посмотрите на рис. 9.10. На этой интерактивной карте лыжных трасс показаны четыре категории трасс, обозначенные при помощи разных символов, а также подъемники и технические помещения. Когда все эти данные выводятся одновременно, карта становится слишком перегруженной и прочитать полезную информацию практически невозможно. Однако щелкая на символах трасс, пользователь может включать и выключать различные уровни данных. Слева показано, как выглядит карта, когда никакие трассы не подсвечены, справа выделение трасс темным цветом осуществляется одним щелчком. Рис. 9.10. Интерактивная карта лыжных трасс В зависимости от типа изображения механизмы поиска могут довольно широко различаться. Конечно же, в таблице или дереве необходим текстовый поиск; карта должна поддерживать поиск по адресу и другим параметрам местоположения; числовые диаграммы и графики должны предусматривать возможность поиска определенных значений или диапазонов значений. Что именно будут искать ваши пользователи? Результаты поиска можно отображать в контексте — прямо на графическом элементе. Например, сделайте так, чтобы можно было прокручивать таблицу или карту, располагая найденный элемент прямо в центре экрана. Когда пользователь видит результаты в контексте остальных данных, он лучше понимает найденную информацию. Перечислим характеристики, которыми должны обладать хорошие интерфейсы фильтров и запросов. Высокая интерактивность. Скорость отклика интерфейса на поиск и фильтрацию должна быть максимальна. Однако не проектируйте отклик на каждое нажатие клавиши, если, к примеру, это значительно замедляет скорость ввода текста. 446 Глава 9. Отображение сложных данных Повторяемость. Пользователь может менять параметры поиска, уточнять запрос или настраивать фильтр, пока не получит желаемый результат. Также есть возможность комбинировать операции: пользователь выполняет поиск, получает страницу с результатами, а затем отфильтровывает их, чтобы оставить только самое необходимое. Зависимость от контекста. Результаты поиска отображаются в контексте, чтобы пользователю было проще понять их место в общей структуре данных. Это свойство также полезно применять и к другим типам поиска: лучшие механизмы текстового поиска выводят ключевое слово с частью предложения, в котором оно находится. Сложность. Возможность не просто включать или выключать отображение полного набора данных, но и задавать сложные условия для вывода информации. Например, показать все элементы, для которых выполняются условия X, Y и Z, не выполняются условия A и B и которые находятся в интервале времени от M до N. Такая сложность помогает проверять гипотезы относительно данных и изучать информацию различными способами. Фактические данные: как узнать их конкретные значения? Несколько распространенных техник помогают зрителю увидеть на общем изображении конкретные значения. Изучите свою аудиторию: если пользователям нужно только количественное представление, не стоит тратить время и место на экране, помечая каждую деталь. Однако обычно все же необходимо вывести несколько фактических значений или текст. Так как во всех этих методиках используется текст, не забывайте о принципах графического дизайна, позволяющих создавать привлекательный текст: хорошо читаемые шрифты подходящего размера (не слишком крупные и не слишком мелкие), грамотное визуальное разделение независимых элементов текста, выравнивание связанных элементов, отсутствие крупных границ и рамок вокруг блоков текста, а также затемнений. Ярлыки. Очень часто в инфографике ярлыки наносятся прямо на изображение, например названия городов на карте. Ярлыки также могут объяснять значения символов на точечной диаграмме, столбцы на гистограмме и прочие элементы, сведения о которых пользователю обычно приходится искать вдоль осей или в легенде. Ярлыки проще использовать. Они точно и недвусмысленно выражают значение (если их правильно разместить) и находятся прямо в точках интереса или рядом с ними — не нужно постоянно переводить взгляд с данных на легенду и обратно. Их недостаток в том, что они загромождают изображение, так что не переусердствуйте. Легенды. Когда цвет, фактура, стиль линии, символ или размер используется в инфографике для представления значений (или категорий, или диапазонов значений), легенда поясняет, что есть что. Легенда должна располагаться на той же странице, что и графический элемент, чтобы пользователю не нужно было переводить взгляд слишком далеко. Паттерны 447 Оси, линейки, сетки и шкалы времени. Когда суть данных задается их местоположением, как на графиках и картах (но не на большинстве диаграмм), эти инструменты показывают пользователю, какому точному значению соответствует данное местоположение. Все перечисленные элементы — это прямые или кривые, вдоль которых располагаются соответствующие величины. Пользователь проводит воображаемую линию от интересующей его точки к оси — возможно, через промежуточные точки, чтобы найти значение. В этой ситуации нагрузка на пользователя немного больше, чем когда точки обозначаются ярлыком. Однако ярлыки загромождают графику с высокой плотностью данных, а многим пользователям вовсе не нужны точные значения — они хотят всего лишь увидеть общую картину данных. В этом случае лучше использовать оси. Всплывающие данные. В этой главе вы найдете паттерн Datatips (Всплывающие данные). Такие данные представляют собой всплывающую подсказку со значениями данных для точки, на которую наведен курсор. Они предоставляют такое же преимущество близости расположения, как ярлыки, и при этом не загромождают графику. Однако они работают только на интерактивной инфографике. Подсветка данных. Как и в паттерне Datatips (Всплывающие данные), данные подсвечиваются, когда пользователь подводит к точке интереса указатель мыши. Однако на экране появляется не значение в определенной точке, а «срез» данных в контексте всего информационного представления. Часто при этом остальная информация затемняется. Подробнее об этом рассказывается в описании паттерна Data Spotlight (Подсветка данных). Окрашивание данных. Техника, называемая окрашиванием данных (data bru­ shing), позволяет пользователю сделать выборку данных и увидеть ее также в другом контексте. Обычно эта техника применяется, когда вы работаете с двумя или несколькими представлениями; например, при выборе изолированной группы точек на точечной диаграмме эти точки данных подсвечиваются в таблице, где выводятся те же значения. Подробнее об этом рассказывается в разделе, посвященном паттерну Data Brushing (Окрашивание данных), в этой главе. Паттерны Так как в этой книге речь идет об интерактивных интерфейсах, большинство паттернов описывают способы взаимодействия с данными: перемещение по данным, сортировку, выделение, вставку и изменение элементов, поиск конкретных значений или наборов значений. Лишь некоторые из них используются для статической графики: дизайнерам инфографики давно известны паттерны Multi-Y Graph (График с несколькими осями Y) и Small Multiples (Набор мини-диаграмм1), но эти паттерны также прекрасно работают в мире цифровых интерфейсов. 1 Или мультидиаграммы, множественные графики, мультиграфики, small multiples и т. д. — различные термины для обозначения серии небольших однотипных графиков или диаграмм. — Примеч. ред. 448 Глава 9. Отображение сложных данных Следующие паттерны подойдут для любой интерактивной графики, независимо от базовой структуры данных (некоторые из них сложнее изучать и применять, чем остальные, так что не стоит внедрять их во все графические элементы): Datatips (Всплывающие данные). Data Spotlight (Подсветка данных). Dynamic Queries (Динамические запросы). Data Brushing (Окрашивание данных). Оставшиеся паттерны представляют способы конструирования сложных представлений многомерных данных — данных с множеством атрибутов или переменных. Они стимулируют пользователей задавать вопросы и сравнивать элементы данных по различным параметрам. Multi-Y Graph (График с несколькими осями Y). Small Multiples (Набор мини-диаграмм). Datatips (Всплывающие данные) Что это Данные появляются, когда вы касаетесь пальцем или наводите указатель мыши на интересующий вас объект в интерактивной таблице данных или когда вы щелкаете на значке. Работа паттерна Datatips (Всплывающие данные) показана на примере диаграммы исследовательского центра Пью (рис. 9.11). Рис. 9.11. Диаграмма исследовательского центра Пью Changing Face of America Паттерны 449 Когда использовать Если вы выводите на экран общее представление данных практически в любой форме. Большая часть данных скрывается под определенными точками на графике, например названия улиц на карте или значения столбцов на гистограмме. Пользователь указывает на них мышью или касается их на сенсорном экране. Зачем Поиск нужных значений — частая задача при работе с графикой, содержащей большой объем данных. Пользователям необходимо видеть как общее представление, так и конкретные значения, которые в нем не отражаются. Во всплывающих подсказках можно выводить небольшие фрагменты контекстнозависимых данных и располагать их именно там, куда обращено внимание пользователя, — около указателя мыши. Если информация хорошо организована, то пользователи быстро найдут то, что им нужно, а вам не придется выводить на общий план сразу все детали. Кто-то может рассматривать схемы просто из любопытства: что еще здесь есть? Что я могу найти? Всплывающие подсказки представляют собой простую и эффективную форму интерактивности. Они быстрые (не нужно загружать страницы!), легкие и позволяют увидеть данные, которые в противном случае остались бы скрыты. Как В окне, созданном по типу всплывающего, покажите данные, относящиеся к конкретной точке на общем представлении. Необязательно делать это окно точно таким же, как всплывающая подсказка, — главное, чтобы оно появлялось именно там, где находится указатель мыши, выводилось поверх графики и было временным. Пользователи довольно быстро схватывают принцип его работы. Внутри этого временного окна форматируйте данные сообразно с их структурой. Организуйте их поплотнее, так как пользователи ожидают, что окошко будет маленьким; не делайте его таким, чтобы оно заслоняло собой слишком большую часть картинки. Тщательно продумайте местоположение окна. Если есть возможность программно задать позицию, чтобы окно закрывало собой как можно меньше полезного контента, сделайте это. Иногда можно даже форматировать всплывающие данные в зависимости от ситуации. Например, по желанию пользователя выводить на интерактивной карте либо названия мест, либо их координаты (значения широты и долготы). Если несколько наборов данных выводятся в виде отдельных линий на графике, то всплывающие данные можно оформлять для каждой линии по-разному и выводить для каждой из них свой тип информации. 450 Глава 9. Отображение сложных данных Всплывающие подсказки часто содержат активные ссылки на подробные данные, недоступные в главном представлении. Преимущество такого подхода в том, что всплывающие подсказки интуитивно понятны. Они содержат не только данные, но и ссылку с инструкциями, как узнать эти подробности. Еще один способ динамического отображения скрытых данных — создать прямо на иллюстрации или рядом с ней статическую панель. Когда пользователь наводит указатель мыши на различные точки иллюстрации, данные, связанные с этими точками, появляются на статической панели. Идея та же, просто используется зарезервированное пространство, а не временная всплывающая подсказка. Пользователю придется переключать внимание между указателем мыши и панелью, зато панель с данными не будет закрывать собой иллюстрацию. Вдобавок, если на панели данных информация будет сохраняться какое-то время, пользователи смогут просматривать ее, одновременно выполняя другие действия. В современной интерактивной инфографике всплывающие данные часто используются вместе с подсветкой данных. Она подсвечивает срез данных, например линию или набор разбросанных точек, а всплывающие подсказки выводят значения для точки, на которую наведен курсор. Примеры В приложении CrimeMapping (рис. 9.12) на карту нанесены значки, указывающие на вид совершённого преступления. Пользователь может увеличивать и уменьшать масштаб карты, а также фильтровать виды преступлений, щелкнув на кнопке What (Что) на панели слева. В приложении CrimeMapping используются паттерны Datatips (Всплывающие данные) и Data Spotlight (Подсветка данных). Подсветкой выделяются точки на карте, где произошли кражи, а во всплывающей подсказке выводятся по­дробные сведения о конкретном случае кражи. Обратите внимание на ссылку в поле всплывающих данных, по которой доступны исходные данные о преступлении. Карты Google Maps содержат столько географических данных, что о них стоит упомянуть отдельно. Карта может переключаться между режимом упрощенного просмотра и видом со спутника и включать слои трафика, маршрутов и маркеров мест (рис. 9.13). Мобильное приложение Transit (рис. 9.14) показывает маршрут на карте с упрощенными значками и всплывающими подсказками. Цвета, символы и информация меняются в зависимости от того, какой вид транспорта выбран. Рис. 9.12. Приложение CrimeMapping Рис. 9.13. Карты Google Maps 452 Глава 9. Отображение сложных данных Рис. 9.14. Мобильное приложение Transit Data Spotlight (Подсветка данных) Что это Когда пользователь подводит указатель мыши к интересующей его области, подсвечивайте соответствующий срез данных (линию графика, слой карты и пр.) и затеняйте остальное. Очень красивый сайт Atlas of Emotions (рис. 9.15) показывает диапазон эмоций и их интенсивность. Когда пользователь наводит курсор на данные, подсвечиваются связанные с ним эмоции из выбранной группы. Когда использовать Если представление содержит так много информации, что даже структура данных становится неочевидна. Пользователю сложно заметить взаимоотношения и отследить связи между наборами данных. Если сама структура данных очень сложна — они могут включать несколько независимых переменных и запутанные «срезы» зависимых данных, таких как линии, области, разбросанные точки, системы связей. (Если при наведении указателя мыши нужно показать только значение в точке или простую фигуру, лучше подойдет всплывающая подсказка. С другой стороны, эти два метода часто используются вместе.) Паттерны 453 Рис. 9.15. Сайт Atlas of Emotions Зачем Подсветка позволяет разъединить нити данных. Это один из способов реализации «фокуса» в контексте сложной инфографики: пользователь устраняет лишний визуальный шум, затеняя ненужные данные, и может сосредоточиться на интересующем его срезе. Однако второстепенные, с его точки зрения, данные не исчезают с экрана, а обеспечивают понятный контекст. Также этот паттерн хорошо поддерживает динамическое исследование. Пользователь быстро переключается между различными срезами данных, что позволяет ему видеть крупные и мелкие различия между ними. Разумеется, чтобы пользователь заметил эту разницу, переход должен быть быстрым и плавным (без мерцания). Ну и наконец, работать с подсветкой довольно весело и интересно. Как Прежде всего разработайте представление, исходно не зависящее от подсветки. Постарайтесь сделать срезы данных хорошо видимыми и единообразными, 454 Глава 9. Отображение сложных данных чтобы пользователь мог понять суть, не взаимодействуя с графикой (в конце концов, кто-то может работать с распечаткой). Для создания эффекта подсветки выделяйте интересующие пользователя срезы данных цветом (либо более светлым, либо более насыщенным), затеняя или переводя в оттенки серого все остальное. Сделайте так, чтобы отклик на перемещение указателя мыши был мгновенным и плавным, иначе впечатление от работы испортится. При наведении указателя мыши на элементы данных дополнительно можно подсвечивать соответствующую информацию в легенде и других связанных блоках. Попробуйте реализовать «режим подсветки». В этом режиме при первом наведении указателя мыши подсветка включается не сразу, а через пару секунд, но после этого любое изменение положения курсора моментально отражается на поведении подсветки. Таким образом, подсветка не будет включаться при случайном наведении указателя мыши на данные. Альтернативой наведению курсора может быть простой щелчок кнопки мыши или касание сенсорного экрана. Этот вариант не предусматривает мгновенного отклика, как при наведении, но работает на устройствах с сенсорным экраном и позволяет избежать случайного включения подсветки. Однако вы, возможно, предпочтете зарезервировать щелчок для другого действия, например вывода подробных данных. Используйте всплывающие подсказки, чтобы описывать конкретные точки данных или выделенный срез данных, а также чтобы предоставлять пользователю необходимые инструкции. Примеры Вот пример работы подсветки данных. На сайте Winds and Words (рис. 9.16) представлена интерактивная визуализация данных сериала «Игра престолов». Когда пользователь выбирает персонаж, другие уходят на задний план, и выбранный персонаж отображается вместе с его связями с другими героями. Паттерны 455 Рис. 9.16. Сайт Winds and Words Dynamic Queries (Динамические запросы) Что это Простые стандартные элементы управления, такие как ползунки и флажки, с помощью которых пользователь определяет, какие именно данные отображаются, и фильтрует их. Результаты выводятся в области отображения по мере настройки этих элементов пользователем. Приложение Google Public Data Explorer (рис. 9.17) позволяет выбирать переменные и сразу видеть результаты. Пользователь также может перемещать ползунок по шкале времени, чтобы увидеть хронологические изменения данных. 456 Глава 9. Отображение сложных данных Рис. 9.17. Приложение Google Public Data Explorer Когда использовать Если вы выводите большой многомерный набор данных любой формы и любым способом представления. Пользователю необходимо отфильтровать данные, чтобы, например, удалить лишние, или увидеть, какие данные отвечают определенным критериям, или понять взаимоотношения между атрибутами данных, или же просто изучить, что они собой представляют. У самого набора данных есть фиксированный и предсказуемый комплект атрибутов (или параметров, переменных, измерений — какой термин вам больше нравится), интересующих пользователей. Обычно это числовые атрибуты, ограниченные определенным диапазоном; также это могут быть сортируемые строки, даты, категории или перечисления (наборы чисел, представляющих нечисловые значения). Помимо этого, атрибутами могут быть видимые области представления данных на экране, которые пользователь интерактивно выбирает. Динамические запросы можно применять к результатам поиска. В фасетных механизмах поиска используются особые интерфейсы запроса, позволяющие исследовать огромные базы данных элементов, таких как продукты, изображения или тексты. Паттерны 457 Зачем Во-первых, научиться пользоваться динамическими запросами очень легко. Не нужно тратить время на изучение сложного языка запросов; при помощи простых и понятных элементов управления можно формулировать элементарные булевы выражения вроде «цена > $70 AND цена < $100». Конечно же, у таких элементов управления нет всего функционала настоящего языка запросов — не усложняя интерфейс, можно реализовать только самые простые запросы, — но в большинстве случаев этого достаточно. Во-вторых, мгновенный отклик интерфейса на запрос позволяет изучать данные свободно. Например, как только пользователь перемещает ползунок, он видит, как набор данных сокращается или расширяется. Как только он добавляет или удаляет различные поднаборы данных, на его глазах они переносятся в нужное место и определенным образом меняют свое представление. Пользователь может постепенно изобретать длинные и сложные запросы, изменяя сначала один элемент управления, затем другой и третий. Таким образом, пользователь непрерывно взаимодействует с данными интерактивно, в стиле вопросов и ответов. Мгновенный отклик приложения сокращает количество итераций, поэтому изу­ чение данных приносит удовольствие, а пользователь входит в состояние потока. В-третьих (и это более тонкая особенность паттерна), если пользователь видит четко обозначенные элементы управления динамическими запросами, он понимает, на основе каких атрибутов он может формулировать запросы. Например, если один из атрибутов данных — число в диапазоне от 0 до 100, то пользователь узнает об этом, видя ползунок, на одном конце которого находится 0, а на противоположном — 100. Как Способ реализации динамического запроса зависит от представления данных, от того, какие запросы, по вашему мнению, будут вводить пользователи, а также от возможностей пакета разработки. Как уже говорилось, в большинстве программ атрибуты данных привязываются к простейшим элементам управления, которые обычно располагаются рядом с основным представлением данных. Такой сценарий позволяет выполнять запросы одновременно ко многим переменным, а не только к тем, что закодированы при помощи пространственных особенностей изображения. Кроме того, большинство людей умеют пользоваться ползунками и кнопками. Некоторые программы поддерживают интерактивный выбор прямо в визуальном представлении информации. Например, пользователь обводит интересующую его область, и данные, попавшие в нее, удаляются (или сохраняются, а удаляется все остальное). Это простое действие, но у него есть недостаток — оно тесно связано с пространственным отображением данных. Если вокруг данных невозможно нарисовать рамку или как-то еще выбрать интересующие пользователя точки, то запрос составить невозможно! Аргументы «за» и «против» такой техники обсуждаются в разделе, посвященном паттерну Data Brushing (Окрашивание данных). 458 Глава 9. Отображение сложных данных Вернемся к элементам управления. Их выбор для динамических запросов такой же, как для форм любого типа: основан на типе отображаемых данных, типе запросов, которые будет делать пользователь, и имеющихся в вашем распоряжении элементах управления. Вот некоторые распространенные методики: ползунки для выбора числа из определенного диапазона; двойные ползунки или пары ползунков для определения подмножества: «покажите точки данных больше первого значения, но меньше второго»; переключатели или комбинированные поля (раскрывающиеся меню) для выбора одного из нескольких возможных значений. Также можно использовать их для выбора целых наборов переменных или данных. В любом случае в качестве дополнительного метазначения часто используется «Все»; флажки для выбора произвольного подмножества значений, переменных или слоев данных; текстовые поля для ввода отдельных значений. Помните, что в текстовых полях легче сделать ошибку и опечатку, чем при использовании ползунков и кнопок. Примеры Интерфейс приложения Apple Health (рис. 9.18) позволяет пользователю выбирать дни и просматривать активность за каждый день. Рис. 9.18. Приложение Apple Health Паттерны 459 Data Brushing (Окрашивание данных) Что это Выбор элементов данных в одном представлении и одновременное их отображение в другом представлении. В примере на рис. 9.19 показана шкала времени, с помощью которой доступен просмотр разных временных представлений с изменением точек данных на карте, а также данных на боковой панели справа. Рис. 9.19. График American Panorama: численность иммигрантского населения Когда использовать Чтобы показать два изображения или больше. Это могут быть два линейных графика и точечная диаграмма, точечная диаграмма и таблица, диаграмма и дерево или карта и шкала времени — что угодно, но все графические элементы должны содержать один и тот же набор данных. Зачем Окрашивание данных предоставляет много возможностей для интерактивного изучения информации. Во-первых, возможность выбирать данные, используя в качестве селектора сам графический элемент. Иногда проще найти нужные точки визуально, чем непрямыми путями, например при помощи динамических запросов, — изолированный объект на графике сразу бросается в глаза, его можно 460 Глава 9. Отображение сложных данных быстро изменить, а вот чтобы догадаться, как определить его численно, может потребоваться несколько секунд, а то и больше. «Действительно ли мне нужны все точки, для которых X > 200 и Y < 5,6? Я не знаю; лучше я просто обведу вон ту группу точек». Во-вторых, видя выделенные или окрашенные точки данных в другом представлении (или в нескольких), пользователь может оценить их как минимум еще в одном графическом контексте. Это может быть очень и очень полезно. Возвращаясь к примеру с выделением объекта, представьте, что пользователь хочет узнать, в какой области другого пространства данных, индексированного по другим переменным, находятся выделенные точки. Узнав это, он может сделать вывод о том, почему данные именно таковы. Основной принцип здесь — согласованные или связанные представления. Несколько представлений одних и тех же данных могут быть связаны или синхронизированы так, чтобы определенные действия, например масштабирование, панорамирование и выделение, выполняемые в одном представлении, мгновенно отражались и в другом. Такая согласованность призвана подчеркнуть тот факт, что эти представления в действительности просто разные проекции одних и тех же данных. Опять же, пользователь обращает внимание на то, как одни и те же данные выглядят в разных контекстах, что позволяет ему делать аналитические выводы. Как Сначала определите, каким образом пользователи будут выбирать, или окрашивать, данные. С этой проблемой вы сталкиваетесь, создавая любой набор выделяемых объектов: пользователям может понадобиться один объект или несколько, смежные или отдельные объекты, он может захотеть выделить их все сразу или по очереди. Вот несколько идей: щелчки по ключевым словам; выделение по одному одиночными щелчками мышью; выделение диапазона, включая и выключая его. Как видите, очень важно, чтобы на окрашивание данных немедленно откликались все изображения. Убедитесь, что система поддерживает быстрый отклик. Если данные одинаково отображаются во всех представлениях, включая элемент, на котором осуществляется выбор (окрашивание), то пользователю проще найти их и понять, что они выбраны. Кроме того, это формирует единый слой восприятия (см. раздел о преаттентивных элементах дизайна во введении к этой главе). Цветовой тон — это тоже преаттентивный элемент изображения, чаще всего применяемый для окрашивания, вероятно, потому что яркий цвет легко заметить, даже если ваше внимание фокусируется на чем-то другом. Паттерны 461 Примеры Этот паттерн хорошо подходит для карт, поскольку географические данные обычно можно группировать и выводить разными способами. Отличный пример окрашивания данных представлен в приложении AllTrails (рис. 9.20, слева). Когда пользователь водит пальцем по карте маршрутов внизу экрана, указатель карты (синяя точка) перемещается по маршруту и указывает высоту и уклон в этой точке. Решение Trulia (рис. 9.20, справа) показывает на карте списки, которые соответствуют параметрам поиска. Пользователи могут фильтровать результаты по районам, обозначенным на карте, коснувшись или щелкнув на кнопке Local Info и просмотрев данные, относящиеся к выделенной области. Рис. 9.20. Приложение AllTrails и результаты поиска Trulia 462 Глава 9. Отображение сложных данных Multi-Y Graph (График с несколькими осями Y) Что это Несколько графиков, расположенных один поверх другого на одной панели, с общей осью X. Рис. 9.21. График New York Times Когда использовать Если вы размещаете два и более графиков — обычно простых линейных графиков, гистограмм или комбинированных двумерных диаграмм (или комбинацию этих графиков). Ось X в этих графиках общая, чаще всего это шкала времени, но они, тем не менее, описывают разные сущности и иногда имеют разные единицы измерения или масштаб по оси Y. Тем самым вы наглядно представляете «вертикальные» взаимоотношения между наборами данных: корреляции, подобие, неожиданные различия и т. д. Зачем Во-первых, выравнивание графиков по оси X сообщает, что эти данные связаны между собой, а во-вторых, когда они расположены рядом, их удобно сравнивать. Паттерны 463 Как Выводите один график прямо поверх другого. Для обоих используйте одну и ту же ось X, но разделите ось Y на два отдельных вертикальных пространства. Иногда оси Y могут немного перекрывать друг друга, но в целом старайтесь, чтобы графики не пересекались. В некоторых случаях оси Y вообще не нужны; возможно, пользователю не нужны точные значения или же они содержатся на самом графике, как, например, на гистограмме с маркированными столбцами. В таком случае просто подвигайте кривые графиков вверх и вниз, чтобы они не пересекались. Обозначьте каждый график так, чтобы его принадлежность можно было однозначно идентифицировать. По возможности используйте вертикальную координатную сетку; это позволит отследить значение X в нескольких наборах данных, что упрощает сравнение. Кроме того, она помогает определить точное значение в конкретной точке (или близко к ней) без карандаша и линейки. Примеры Веб-приложение Google Trends позволяет сравнивать частоту использования различных поисковых запросов. В примере на рис. 9.22 показано сравнение объемов запросов для двух спортивных терминов. Такое представление наглядно, и его легко воспринимать. Однако на этом возможности Google Trends не ограничиваются. Относительный объем поиска иллюстрируется верхним графиком, в то время как нижний показывает количество упоминаний в новостях. Поскольку метрики и масштабы разные, здесь используются две оси Y. Рис. 9.22. Веб-приложение Google Trends 464 Глава 9. Отображение сложных данных На рис. 9.23 представлен интерактивный график с несколькими осями Y, построенный в приложении MATLAB. Здесь доступны три оси Y, обозначенные разными цветами вдоль левого края и принадлежащие разным трассировкам данных. Можно перетаскивать мышью трассировки выше и ниже на графике, растягивать их по вертикали, перемещая цветные концевые элементы, и менять отображаемые диапазоны, редактируя границы по осям Y прямо на графике. Это очень интересный пример. И знаете почему? Возможно, вы заметили, что трассировки похожи, как будто взаимосвязаны: например, на всех трех значение Y резко снижается сразу же после отметки 1180. Однако насколько они похожи? Сдвинем их и увидим… Рис. 9.23. График в приложении MATLAB Глаза очень хорошо улавливают взаимосвязи между графиками данных. Трассировки данных на рис. 9.24 выполнены в разных масштабах, но, располагая их рядом и поверх друг друга, можно сделать вывод о том, почему данные именно таковы. График с несколькими осями Y не обязательно должен выглядеть как традиционный график. В карте погоды на рис. 9.25 используются пиктограммы, иллюстрирующие ожидаемые погодные условия. Они выстроены вдоль той же шкалы времени X, на базе которой построен график (здесь используется и следующий паттерн, Small Multiples (Набор мини-диаграмм)). Паттерны 465 Рис. 9.24. Еще одно представление графика в приложении MATLAB Рис. 9.25. Карта погоды на веб-сайте The Weather Channel 466 Глава 9. Отображение сложных данных Small Multiples (Набор мини-диаграмм1) Что это Данный паттерн отображает множество небольших графических представлений данных в виде двумерных или трехмерных объектов. Изображения располагаются на странице в виде плитки в одном или двух дополнительных измерениях, образуя либо одномерную последовательность, либо двумерную матрицу. Тепловая климатическая карта (рис. 9.26) отображает изменение данных с течением времени в виде небольших эскизов, тем самым большой объем информации становится удобно воспринимать. Рис. 9.26. Тепловая климатическая карта из публикации Орегонского университета Когда использовать Если необходимо вывести большой набор данных, содержащий более двух измерений или независимые переменные. Один «срез» данных можно показать в виде рисунка: графика, таблицы, карты или изображения; однако отобразить большее количество измерений за раз может быть сложно. Пользователям может понадобиться просмотреть рисунки по одному, перелистывая их назад и вперед в поисках различий. Для паттерна Small Multiples (Набор мини-диаграмм) требуется достаточно свободного места. Его редко удается использовать на мобильных устройствах, если только не делать каждый элемент совсем крохотным. Применяйте его, если большинство пользователей будут работать на больших экранах или с распечатками документов. 1 Понятие small multiples довольно распространенное, но устоявшегося русского перевода нет. Встречаются «мини-диаграммы», «множественные графики», «мини-графики», «мультиграфики», «мультидиаграммы» и даже «маленькие однотипности». Мы остановились на варианте «набор мини-диаграмм», как наиболее точно отражающем сущность этого понятия. — Примеч.ред. Паттерны 467 С другой стороны, искрографики (спарклайны) — это один из способов представления небольших образцов, удобный именно для мелких объектов, таких как бегущая строка или столбец ячеек. Фактически, это миниатюрный график, с которого убраны все ярлыки и оси. Его единственное предназначение — демонстрировать форму или границы области простого набора данных. Зачем Мини-диаграммы чрезвычайно информативны — они одновременно показывают огромное количество информации в очень доступном виде. Каждое изображение рассказывает свою историю, но, если собрать их вместе и показать последовательность изменений, становится понятной общая картина. Как отмечает Эдвард Тафти в своей ставшей настольной книге «Envisioning Information» (издательство Graphics Press), «многомерный, насыщенный данными дизайн на основе небольших образцов наглядно демонстрирует изменения, отличия между объектами, а также масштаб модификаций». (Тафти придумал название этого паттерна и изложил в доступной форме идею небольших образцов в своей книге о визуализации информации.) Но что, если вы показываете несколько измерений на отдельных изображениях и при этом надо показать еще одно измерение, которое никак не добавить на имеющиеся изображения? В этом случае у вас есть выбор. Последовательное представление. Покажите, как это измерение меняется с течением времени. Например, можно воспроизвести изображения последовательно, как кадры фильма, или добавить кнопки «Назад»/«Далее», чтобы пользователь мог перелистывать изображения, которые выводятся на экран по одному, и т. д. Трехмерное представление. Поместите изображения вдоль третьей пространственной оси, например оси Z. Набор мини-диаграмм. Снова используйте оси X и Y, но в более крупном масштабе. Когда изображения располагаются рядом друг с другом, пользователь может быстро переводить взгляд с одного на другое. Ему не нужно запоминать, что было на предыдущем экране, как при последовательном представлении (хотя кадры фильма могут быть очень эффективны, если нужно показать мелкие изменения). Ему также не нужно расшифровывать или вращать сложный трехмерный график, как в случае, когда двумерные рисунки располагаются вдоль третьей оси. Последовательные и трехмерные представления хороши, но не всегда, и они часто совершенно бесполезны в неинтерактивной среде. Как Выберите, сколько дополнительных измерений вы будете представлять — одно или два. В первом случае изображения можно выводить вертикально, горизон- 468 Глава 9. Отображение сложных данных тально или даже построчно, как комикс, — чтобы их можно было читать как одну строку от начала и до конца. Если измерений два, используйте двумерную таблицу или матрицу — одно измерение выводите в столбцах, а второе — в строках. Независимо от того, сколько измерений вы используете, добавляйте понятные ярлыки к каждому образцу, при необходимости, или к крайним элементам. Убедитесь, что пользователь понимает, какое именно измерение данных меняется в образцах и сколько измерений вы закодировали — одно или два. Каждое изображение должно быть похожим на все остальные: используйте рисунки одного размера и/или формы, один масштаб по осям (в случае графиков) и один тип содержимого. Мини-диаграммы должны подчеркивать значимые различия между объектами. Исключите несущественные визуальные различия. Разумеется, не стоит помещать слишком много небольших образцов на одну страницу. Если одно из измерений данных находится в диапазоне от 1 до 100, скорее всего, вам не нужно 100 строк или столбцов небольших образцов — что делать в таком случае? Можно «разложить» эти 100 значений, например, в пять «контейнеров» по 20 значений в каждом. Или использовать технику под названием черепитчатая укладка (shingling), напоминающую раскладку по контейнерам, но позволяющую содержимому отдельных контейнеров накладываться друг на друга. (Да, некоторые данные будут отображаться по нескольку раз, но для пользователей, ищущих закономерности, это даже преимущество; обязательно убедитесь, что ярлыки в представлении понятны и пользователям не составит труда разобраться, что здесь происходит.) Некоторые графики, содержащие небольшие изображения в двух дополнительных измерениях, называют решетчатыми графиками или решетчатыми диаграммами. Этот термин использует Уильям Кливленд, признанный авторитет в области статистической графики. Также этот термин можно встретить в программных пакетах S-PLUS и R. Примеры Климатическая диаграмма Северной Америки, показанная на рис. 9.26, включает множество закодированных переменных. В основе рисунка на каждой диаграмме лежит, естественно, двумерная географическая карта, а поверх нее наложен цветокодированный график одного из климатических показателей, например температуры. Данные, обозначенные цветом, образуют на каждом из рисунков интересные фигуры; они заставляют задуматься, почему цветные области покрывают определенные части континента. Все вместе мини-диаграммы кодируют две дополнительные переменные: каждый столбец представляет месяц года, а каждая строка — климатический показатель. Вероятно, вы проследили изменения по строкам, то есть узнали, как погода меняется в течение года, но и сравнение внутри отдельных столбцов провести также несложно. Паттерны 469 В примере на рис. 9.27 решетка используется для кодирования двух независимых переменных — этнической/религиозной принадлежности и уровня дохода — распределенных по географическому признаку, то есть по штатам США. Зависимая переменная, закодированная цветом, представляет ожидаемый уровень общественной поддержки программы субсидий на школьное образование (оранжевый означает полную поддержку, а зеленый наоборот). Результирующий график очень информативен, и из него можно сделать интересные выводы об отношении американцев к этой программе. Рис. 9.27. Диаграмма, содержащая набор мини-диаграмм с географическими и демографическими данными 470 Глава 9. Отображение сложных данных Возможности визуализации данных Пример на рис. 9.28 — отличная демонстрация того, как грамотно выполненная визуализация данных может быть информативной и при этом радовать глаз. Инфографика Show Your Stripes представляет данные об изменении температуры с 1850 по 2019 год с использованием лишь полос и цвета. Ее разработчик собрал обширную информацию и упростил ее для удобства зрителя. Одно изображение убедительно заменяет несколько диаграмм и графиков. Рис. 9.28. Инфографика Show Your Stripes (https://showyourstripes.info), опубликованная в журнале The Economist, сентябрь 2019 г. Да, изображения могут поведать многое, но, когда вы добавляете интерактивности, вы делаете их более наглядными. Примеры в этой главе показывают, что графические объекты, например карты или диаграммы, могут стать отличным и визуально привлекательным способом представить большой объем информации. ГЛАВА 10 Получение данных от пользователя: формы и элементы управления Рано или поздно вам понадобится собрать информацию от пользователей. Возможно, даже в первые минуты работы в интерфейсе. Под каким именем входить в систему? По каким словам выполнить поиск? Куда доставить заказ? В этой главе мы рассмотрим ряд тем, связанных с получением информации от пользователей: рекомендации по разработке полезных и удобных форм; различные виды форм для тех или иных целей; разработка эффективного автозаполнения; разработка сложных элементов управления. Поначалу может показаться, что взаимодействие между формами реализовать проще всего, — и на это есть несколько причин. Каждый знает, как работать с текстовыми и комбинированными полями и флажками. Интерактивные формы используются уже более двух десятилетий, и их выбор очень широк. Элементы управления вводом, которые мы рассмотрим в главе 11, также важная часть UI-фреймворков. Для всех этих инструментов интерфейса существуют готовые элементы форм и элементы управления. Однако формы могут быть непонятными, неудобными или их может быть сложно заполнять. Вот еще один пример вопроса, который поможет понять, что необходимо учитывать дизайнерам при разработке форм и элементов управления: для какого региона вам нужен прогноз погоды? Пользователь может не знать, указывать ли ему город, страну или почтовый индекс. Достаточно ли будет сокращений? А что, если допущена орфографическая ошибка? Или введен неизвестный системе город? Есть ли карта, чтобы выбрать место одним щелчком мыши? И почему система не запомнила то место, которое он уже выбирал вчера? В этой главе обсуждаются способы, позволяющие избавиться от подобных проблем. Паттерны, техники и элементы управления, о которых здесь пойдет речь, 472 Глава 10. Получение данных от пользователя: формы и элементы управления в основном применяются для дизайна форм — под формой понимается простая последовательность пар вопросов и ответов. Однако они будут полезными и в других контекстах, например при разработке единичных элементов управления на веб-страницах или панелей инструментов в приложениях. Дизайн ввода данных и дизайн форм — это ключевые навыки для разработчиков интерфейсов, так как их можно применять для любых продуктов и на любых платформах. Прежде всего рассмотрим несколько рекомендаций о том, как создавать эффективные и удобные формы и элементы управления. Основы дизайна форм Вот несколько принципов, о которых следует помнить при создании форм и средств пользовательского ввода данных. Уважайте время и внимание пользователя. При создании формы учитывайте, сколько времени и усилий потребуется для ее заполнения. Причем пользователям эти усилия могут казаться более значительными, чем дизайнеру. Используя методы, описанные в этой главе, сделайте форму как можно более короткой и простой. Убедитесь, что пользователь понимает цель формы. Форма требует определенных действий пользователя в обмен на что-то. Заголовки, контекст и формулировки формы должны пояснять, почему запрашивается именно эта информация, как она будет использоваться и что получит пользователь. Минимизируйте объем вводимых данных. Тщательно обдумайте каждый вопрос или элемент. Не заставляйте пользователя делать ненужную работу. Например, если вы запросите почтовый индекс США, сможете ли вы определить город и штат? Нет необходимости запрашивать тип платежной системы кредитных карт (Visa, Mastercard и т. д.), потому что она определяется по первым двум цифрам номера карты. Не требуйте вводить имя и фамилию, если в качестве имени пользователя может выступать адрес электронной почты. Избавьтесь от беспорядка. Форма не самое подходящее место для всего, что может отвлечь пользователя. Сделайте ее простой, понятной и соответствующей цели. Сгруппируйте и по возможности разделите элементы формы на разделы. Если вы создаете длинную или сложную форму, разбейте ее на описательные разделы с заголовками (см. паттерн Titled Sections (Именованные разделы)). Сгруппируйте и озаглавьте элементы формы. Используйте заголовки и подзаголовки для организации формы и пояснения ее назначения. Используйте динамическое отображение/скрытие разделов для длинных сложных форм. Если отобразить сразу всю длинную или сложную форму, можно напугать пользователя. Скорее всего, пользователь пропустит какой-нибудь шаг. Разбейте формы на разделы, так чтобы по умолчанию ото- Основы дизайна форм 473 бражался только первый раздел. Выводите остальные разделы по очереди. Необязательные части формы могут быть по умолчанию скрыты. Используйте выравнивание, чтобы сделать вертикальный поток более четким. Организуйте вертикальный поток как в одном столбце, так и в нескольких, с помощью выравнивания. Выровняйте левые края полей ввода и используйте одинаковое вертикальное разделение везде, где это возможно. Взгляд должен легко перемещаться от заголовка к полю ввода. Укажите, какие поля являются обязательными, а какие — нет. Маркировка обязательных для заполнения полей — это правило хорошего тона, которое к тому же повышает удобство использования и помогает снизить количество ошибок. Помечать только обязательные поля или, наоборот, необязательные? Используйте единый подход для всех форм в приложении или на сайте, который вы разрабатываете. Ярлыки, инструкции, примеры и справка. Используйте описательные ярлыки, примеры ввода и текст справки в отдельных полях формы. Ярлыки — все еще лучший способ обеспечить доступность для людей с ограниченными возможностями. Текст-заполнитель в полях не должен быть длинным — это может сбить с толку пользователей: они могут подумать, что уже все заполнили. Используйте лексику, соответствующую предметной области и знакомую пользователям. Не бойтесь вставлять инструкции в форму, если это необходимо (и вы всегда можете поместить их во всплывающее или модальное окно, которое пользователь вызовет сам). Используйте ширину полей, чтобы оценить длину ввода. Выбор элементов управления повлияет на ожидания пользователя от запроса. Переключатель подразумевает выбор «одного из многих», тогда как в однострочное текстовое поле можно ввести одно слово или фразу. Большое многострочное поле ввода подразумевает более подробный ответ, например длиной в абзац. Позвольте вводить данные в разных вариантах. Сделайте допустимыми разные форматы дат, адресов, номеров телефонов, номеров кредитных карт и т. д. в соответствии с паттерном Forgiving Format («Великодушный» формат). Если вы запрашиваете данные определенного формата, добавьте примеры. Предотвращение ошибок и максимально быстрая проверка. Наша цель — помочь пользователю сделать все правильно с первого раза. Дайте инструкции и примеры, чтобы было понятно, какая информация необходима. Разверните контекстную справку в форме. Показывайте сообщение об ошибке, как только становится ясно, что пользователь допустил ее. Подумайте о том, чтобы выводить обратную связь по каждому полю. Помогите пользователю выявить любые отдельные ошибки, прежде чем отправлять форму целиком. Добавьте содержательное сообщение об ошибке: укажите, в каком поле ошибка, почему она возникла и как ее исправить. См. паттерны Password Strength Meter (Измеритель надежности пароля) и Error Messages (Сообщения об ошибках). 474 Глава 10. Получение данных от пользователя: формы и элементы управления Паттерн Autocompletion (Автозаполнение) идет еще дальше, сообщая пользователю, какие данные введены правильно, напоминая, что он уже вводил, либо экономя время, предлагая самые частые варианты ввода. Используйте выровненные по верхнему краю ярлыки в мобильном и вебдизайне. Ярлыки с выравниванием по верхнему краю отображаются над полями ввода, а не слева от них. Такое выравнивание лучше всего подходит для страниц с отзывчивым дизайном, поскольку компоненты могут накладываться вертикально без изменения макета. Таким образом снижается вероятность смещения ярлыка и поля ввода. Учитывайте международные различия. Форму могут заполнять пользователи из других стран и других культур. Не всегда язык формы можно изменить без нарушения макета (длина переведенного текста может отличаться, как и направление письма). Также необходимо иметь возможность переключать стили и форматирование чисел, единиц измерения, дат, времени, валют и других стандартов. Помимо этого, различия в законодательстве о безопасности и конфиденциальности данных в разных странах могут повлиять на то, какую информацию вы можете законно собирать, передавать и хранить. Сообщение об успешной отправке. Когда пользователь успешно отправил форму, обязательно сообщите ему об этом и расскажите, что будет дальше. Проверка удобства использования. Почему-то, когда речь заходит о формах ввода, дизайнеры и пользователи расходятся в предположениях о терминологии, возможных ответах, навязчивости и других проблемах контекста использования. Проведите пользовательское тестирование, даже если вы уверены, что ваш дизайн хорош. Дизайн форм продолжает развиваться Одна из основных особенностей дизайна форм — то, что он продолжает меняться и развиваться. Как дизайнеры взаимодействия, мы должны учитывать плюсы и минусы новых возможностей форм. Обязательные и необязательные Помечать обязательные поля звездочкой (*) все еще нужно. В этом случае неплохо объяснить, что означает звездочка, хотя на многих сайтах уже не добавляют легенду. Поскольку это несколько усложняет взаимодействие, теперь используются другие подходы. Эксперты в области юзабилити Nielsen/Norman Group отмечают, что маркировка всех обязательных полей — по-прежнему самый часто используемый подход1. Один из вариантов — сравнить количество обязательных полей с количеством необязательных и пометить те, которых меньше, — исключения из большинства. Второй вариант — отображать только обязательные поля, опуская все не1 Budiu, Raluca. Marking Required Fields in Forms. Nielsen Norman Group, 16 июня 2019 г., https://oreil.ly/vPQSQ. Паттерны 475 обязательные. Пометка о том, что все поля являются обязательными, помогает устранить путаницу, но во многих формах ее тоже не делают. Третий способ — не отмечать обязательные поля, а помечать необязательные поля словом «необязательный» рядом с ярлыком или полем ввода. Это стандартный подход, используемый в системе веб-дизайна США (https://oreil.ly/VH3Jp) и стандартах веб-дизайна правительства Великобритании (https://oreil.ly/oQV6S). Плавающие ярлыки Теперь можно отображать ярлыки полей ввода внутри самих элементов формы. По умолчанию ярлыки выводятся в полном размере, подобно тексту-заполнителю в поле ввода. Однако если пользователь выбирает поле ввода, плавающий ярлык превращается в мелкий текст и перемещается вверх, ближе к внутренней верхней части поля ввода. Он не мешает, но остается видимым, когда пользователь вводит текст. Хотя этот анимационный эффект привлекает внимание, подумайте, принесет ли он реальную пользу. Что почитать еще Множество изданий посвящены именно дизайну форм. Вот три книги, которые стоит прочесть, если вы хотите более подробно изучить эту тему: Джессика Эндерс (Jessica Enders). Designing UX: Forms: Create Forms That Don’t Drive Your Users Crazy. SitePoint, 2016. Кэролайн Джарретт, Джерри Гафни (Caroline Jarrett, and Gerry Gaffney). Forms That Work: Designing Web Forms for Usability. Elsevier/Morgan Kaufmann, 2010. Люк Вроблевски (Luke Wroblewski). Web Form Design: Filling in the Blanks. Rosenfeld Media, 2008. Паттерны Большинство из следующих паттернов описывают элементы управления — в частности, как комбинировать их между собой и сочетать с текстом так, чтобы их было легко использовать. Некоторые паттерны определяют структурные взаимоотношения между элементами, как, например, Dropdown Chooser (Раскрывающийся селектор) и Fill-in-the-Blanks (Заполнение пропусков). Другие, например Good Defaults (Хорошие варианты по умолчанию) и Autocompletion (Автозаполнение), касаются значений элементов управления и способов изменения этих значений. Многие из этих паттернов работают в основном с текстовыми полями. Действительно, текстовые поля можно найти везде, но это не значит, что пользователям всегда легко догадаться, что в них вводить. Проще всего работать с текстовыми полями, когда они представлены в контексте, объясняющем, как их использо- 476 Глава 10. Получение данных от пользователя: формы и элементы управления вать. Следующие паттерны предлагают множество способов создания такого контекста. Forgiving Format («Великодушный» формат). Structured Format (Структурированный формат). Fill-in-the-Blanks (Заполнение пропусков). Input Hints (Подсказки при вводе). Input Prompt (Приглашение к вводу). Password Strength Meter (Измеритель надежности пароля). Autocompletion (Автозаполнение). Следующие два паттерна предназначены для элементов управления, отличных от текстовых полей. Паттерн Dropdown Chooser (Раскрывающийся селектор) описывает способ создания пользовательских элементов управления, а List Builder (Компоновщик списков) — обычно изменяемую комбинацию элементов управления, позволяющую пользователю создавать собственные списки элементов (этот паттерн уже упоминался выше, в таблице элементов управления). Оставшиеся паттерны относятся ко всей форме. Они одинаково подходят как для текстовых полей, так и для раскрывающихся меню, переключателей, списков и других элементов управления с сохранением состояния, но их необходимо использовать единообразно во всех частях формы (или диалогового окна, или даже всего приложения). Good Defaults и Smart Prefills (Хорошие варианты по умолчанию и Умное предзаполнение). Error Messages (Сообщения об ошибках). К дизайну форм применимы и паттерны из других глав. Ярлыки можно размещать поверх полей формы (так форма становится длиннее, но можно использовать более длинные фразы) или же выровнять вдоль левого края формы. Выбор дизайна влияет на скорость заполнения формы. Можно использовать и некоторые возможности паттернов, описанных в главах 3 и 4. Форма-«привратник» — любая форма, которая стоит между пользователем и его ближайшей целью, такая как форма входа в систему или оформления покупки — должна находиться на центральной сцене (см. одноименный паттерн), чтобы все внимание пользователя было сосредоточено на ней. Также можно использовать модальную панель (см. одноименный паттерн), закрывающую собой содержимое страницы. Если вы разрабатываете длинную форму, охватывающую несколько тем, то ее можно разбить на именованные разделы (см. одноименный паттерн) или даже на несколько отдельных страниц (обратите внимание, что вкладки не лучший Паттерны 477 способ группировки в формах). Если форма разбивается на последовательность страниц, то паттерны Wizard (Мастер) и Progress Indicator (Индикатор выполнения) помогут пользователю ориентироваться. Наконец, добавьте заметную кнопку Готово (см. одноименный паттерн из главы 8), чтобы обозначить завершение заполнения или отправку формы. Если вы планируете добавить возможность сделать что-то еще, например очистить форму или открыть справку, сделайте соответствующие кнопки или ссылки менее заметными. Forgiving Format («Великодушный» формат) Что это Возможность вводить текст в разнообразных форматах с использованием различного синтаксиса и интерпретация этого текста системой. Пример можно увидеть на сайте Weather.com (рис. 10.1). Рис. 10.1. Сайт Weather.com Когда использовать Если предполагается, что пользователи будут вводить текст в форме и стиле (с пробелами, дефисами, аббревиатурами и заглавными буквами), которые невозможно предугадать. Если говорить в общем, пользовательский интерфейс должен обрабатывать любые вводимые данные — с разными значениями, форматами или синтаксисом, — однако визуально оставаться простым. Зачем Пользователь просто хочет сделать что-то и не думать о «правильных» форматах и сложной организации интерфейса. Компьютеры хорошо справляются с задачей обработки вводимых данных разных типов (до определенного предела, конечно же). Это идеальный союз: пользователь вводит информацию, как ему удобно, и если она имеет смысл, компьютер обрабатывает ее. 478 Глава 10. Получение данных от пользователя: формы и элементы управления Таким образом, интерфейс остается простым для понимания. Можно даже не прибегать к паттернам Input Hints (Подсказки при вводе) и Input Prompt (Приглашение к вводу), хотя обычно они всегда используются вместе, как в примере на рис. 8.1. Как вариант, можно использовать Structured Format (Структурированный формат), но он лучше работает, когда формат ввода абсолютно предсказуем (как в случае числовых данных, например телефонных номеров). Как Сложность этого паттерна в том, что он превращает задачу дизайна пользовательского интерфейса в задачу программирования. Приходится задумываться о том, что может напечатать пользователь. Возможно, вы запрашиваете только дату или время, поэтому меняться может только формат ввода — это простой случай. Но если нужно вводить поисковые запросы, то меняется действие, которое программа будет совершать с данными. Это уже сложнее. Умеет ли приложение безошибочно отличать первый случай от второго? Как? Во всех приложениях этот паттерн реализуется по-разному. Просто убедитесь, что система реагирует на различные форматы ввода так, как этого ожидает пользователь. Тестируйте, тестируйте и снова тестируйте ее. Примеры На веб-сайте New York Times «великодушный» формат используется в нескольких формах. На рис. 10.2 показаны формы поиска недвижимости и различных финансовых показателей. Рис. 10.2. Два текстовых поля на веб-сайте New York Times, в которые можно вводить данные в разных форматах Google Finance (рис. 10.3) помогает пользователям найти аббревиатуру для акций, сопоставляя вводимые символы с наиболее вероятными вариантами. Не обязательно знать или вводить точную аббревиатуру. Паттерны 479 Рис. 10.3. Добавление акций в персональный список отслеживания в приложении Google Finance Рассмотрим формы, которые запрашивают у пользователя номера банковских карт. Если пользователь вводит 16 цифр, то важно ли, разделяет он их пробелами, дефисами или ничем не разделяет? В PayPal, например, можно вводить номера карт в любом формате. В поле ввода номера банковской карты можно использовать в качестве разделителей пробелы, дефисы либо вводить номер вообще без пробелов. PayPal стандартизирует формат сразу после ввода (рис. 10.4). Снимок экрана на рис. 10.5 представляет собой страницу планирования встречи в Google Calendar. Посмотрите на поля «from» и «to» — в них не обязательно указывать дату полностью, как сейчас в текстовых полях. Если сегодня 13 июля и вы хотите назначить встречу на 20 июля, вы можете ввести дату в любом из этих форматов: Saturday 7/20 Saturday 20/7 20/7/2019 7/20/2019 20/7 7/20 480 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.4. PayPal Указанная дата затем «возвращается» пользователю в формате, соответствующем его языку и местоположению. Паттерны 481 Рис. 10.5. Приложение Google Calendar Structured Format (Структурированный формат) Что это Использование вместо одного текстового поля набора текстовых полей, отражающего структуру запрашиваемых данных. Когда использовать Если в интерфейсе требуются данные определенного формата. Этот формат используется повсеместно и хорошо знаком пользователям, поэтому предполагается, что они будут вводить данные нужным образом. Примерами могут быть данные банковских карт, местные телефонные номера, а также ключи лицензий или серийные номера. Не рекомендуется применять этот паттерн для любых данных, вводить которые можно в разных форматах. Учитывайте, что ваш интерфейс может использоваться в других странах, где стандарты ввода имен, адресов, почтовых индексов и телефонных номеров могут сильно отличаться. Для интернациональных интерфейсов лучше использовать паттерн Forgiving Format («Великодушный» формат). 482 Глава 10. Получение данных от пользователя: формы и элементы управления Зачем Структура текстового поля сама подсказывает, какие данные вводить. Пользователю не нужно задумываться, вводить ли дефисы, слеш или пробелы, — система уже позаботилась об этом. Этот паттерн чаще всего представлен в виде набора коротких текстовых полей, а не одного крупного поля. Уже одно это сокращает ошибки при вводе данных. Пользователю намного проще перепроверить несколько коротких строк (от двух до пяти символов), чем одну длинную, особенно если в ней много цифр. Точно так же переписать или запомнить длинный номер удобнее, разбив его на части. Так работает человеческий мозг. Сравните этот паттерн с паттерном Forgiving Format («Великодушный» формат), работающим ровно наоборот: он позволяет вводить данные в любом формате и не дает подсказок, что именно нужно вводить (хотя иногда наводящая информация содержится в паттерне Input Hints (Подсказки при вводе)). Паттерн Structured Format (Структурированный формат) лучше подходит для ввода данных в предсказуемом формате, а Forgiving Format («Великодушный» формат) — для ввода в свободной форме. Как Создайте набор текстовых полей, отражающий формат запрашиваемых данных. Длина текстовых полей должна быть небольшой и соответствовать длине предполагаемого ввода. После того как пользователь ввел все цифры или символы в первом текстовом поле, подтверждайте ввод, автоматически переводя курсор в следующее поле. Конечно же, пользователь сможет вернуться и отредактировать введенные данные, но автоматический перенос помогает понять, сколько цифр требуется в каждом поле. Чтобы дать пользователю больше подсказок о том, чего от него ожидают, можно применить паттерн Input Prompt (Приглашение к вводу). Так очень часто делают в полях для ввода дат, например, выводя текст «дд/мм/гггг». Примеры На сайте Airbnb используется паттерн Structured Format (Структурированный формат) в форме, где покупатель вводит защитный код для подтверждения личности (рис. 10.6). Форма содержит четыре дефиса-заполнителя — по одному на каждую цифру. Их количество соответствует количеству цифр в коде. Это структурированный формат для четырехзначного кода, при котором курсор автоматически переходит в следующее поле, когда пользователь вводит цифру. Паттерны 483 Рис. 10.6. Форма ввода кода безопасности Airbnb В компании Official Payments — поставщика услуг в штате Калифорния — онлайн-формы для уплаты налогов содержат структурированные данные (рис. 10.7). Отдельные поля для ввода номера телефона налогоплательщика и периода налогообложения содержат символы, подсказывающие правильный формат. Поля номера телефона и даты структурированы так, чтобы избежать ошибок при вводе данных. Таким же образом в Outlook для Microsoft Office 360 при планировании встречи открывается диалоговое окно с селекторами даты и времени (рис. 10.8). Они разделены на отдельные поля ввода, и пользователь должен заполнить каждое из них последовательно. Невозможно выбрать всю строку даты или времени и ввести новые значения или альтернативные варианты, такие как «дд/мм/гггг». Каждый месяц, день, год, час, минуту и маркер am/pm необходимо вводить отдельно, в определенном месте и формате (если не используется раскрывающийся список выбора даты). 484 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.7. Сайт Officialpayments.com Рис. 10.8. Microsoft Outlook/Office 360 Паттерны 485 Fill-in-the-Blanks (Заполнение пропусков) Что это Одно или несколько пустых полей для ввода текста предложения или фразы. Публичная библиотека Сан-Франциско (рис. 10.9) использует этот подход в поле поиска. Рис. 10.9. Сайт публичной библиотеки Сан-Франциско Когда использовать Если нужно запросить данные, которые можно представить в виде одной строки текста, числа или варианта из раскрывающегося списка. Вы пытались создать набор пар из ярлыков и элементов управления, но обычный описательный стиль ярлыков (например, «Имя:» или «Адрес:») недостаточно очевиден, и пользователи не понимают, что от них требуется. Однако можно описать действие, которое нужно выполнить, фразой в повелительном наклонении. Зачем Паттерн Fill-in-the-Blanks (Заполнение пропусков) делает интерфейс интуитивно понятным и упрощает формулировку правил или условий. В конце концов, мы все знаем, как закончить предложение (используя глагольную группу или именную конструкцию). Когда пользователь видит пустое поле ввода в контексте вербального описания, ему проще понять, что происходит и что от него требуется. Как Напишите как можно более точную фразу, применив все свое умение формулировать. Вместо слов используйте элементы управления. Если вы планируете встроить элементы управления в середину фразы, а не в конец, то лучше всего использовать текстовые и комбинированные поля и раскрывающиеся списки — то есть элементы управления такой же ширины и высоты, что и слова в предложении. Также убедитесь, что направляющая текста в предложении совпадает с направляющими элементов управления, иначе предложение будет выглядеть неаккуратно. Установите длину элементов 486 Глава 10. Получение данных от пользователя: формы и элементы управления управления, достаточную для ввода вариантов, и предусмотрите пробелы между элементами управления и словами рядом с ними. Этот паттерн особенно полезен при определении условий, например при поиске элементов или фильтрации данных из представления. Примеры из приложений Excel и eBay на рис. 10.10, 10.11 и 10.12 иллюстрируют данный подход. Роберт Рейманн (Robert Reimann) и Алан Купер (Alan Cooper) считают этот паттерн идеальным для обработки запросов; они обозначают его термином natural language output (организация элементов управления, соответствующая естественному языку)1. Однако в этом паттерне таится ловушка: при его использовании очень сложно локализовать интерфейс (перевести на другой язык), так как смысл часто зависит от порядка слов в предложении. Во многих интернациональных продуктах и на веб-сайтах использовать его вообще не рекомендуется. Чтобы пользовательский интерфейс имел смысл на другом языке, может потребоваться изменить весь порядок элементов. Обратитесь к квалифицированному переводчику, который подскажет, можно ли локализовать интерфейс. Примеры Microsoft Excel широко использует функцию заполнения пропусков для правил условного форматирования. Они позволяют пользователям настраивать автоматическое выделение ячеек на основе логических правил, чтобы увидеть важный статус или результаты. Использование формата заполнения пропусков позволяет легко указать желаемую логику. На рис. 10.10 и 10.11 мы видим два разных способа сделать это. В «классическом» примере последовательность раскрывающихся меню с фразами позволяет настроить довольно сложную инструкцию «если — то». Пользователь выбирает серию операторов и условий в последовательности, подобной предложению, чтобы указать желаемую логику. На рис. 10.10 правила для заполнения пустого поля соответствуют конструкциям естественного языка: «Форматируйте только ячейки, которые содержат значения от 33 до 66. Используйте для них желтую заливку и полужирный желтый текст». На рис. 10.11 мы создаем правила, когда отображать зеленые, желтые и красные значки. Здесь нужно настроить еще кое-что, но Excel предлагает набор из трех конструкторов с заполнением пустых операторов. Они более компактны, в них используются логические символы, такие как «> =» вместо записи «больше или равно». Логику отображения легко построить, пройдя через структуру заполнения пропусков. Для этого потребуется совершить больше действий, но для зеленого значка при чтении слева направо мы можем установить правило 1 См. книгу этих авторов «About Face 2.0: The Essentials of Interaction Design» (издательство Wiley). С. 205. Паттерны 487 «Отображать зеленый значок, когда значение больше или равно 67 %» (Display the green icon when the value is greater than or equal to 67 percent). Excel обрабатывает числовое значение, которое пользователь вводит здесь, и автоматически подставляет логику заполнения пустого поля для второго, желтого, значка, чтобы он не конфликтовал с первым. Рис. 10.10. Классическое условное форматирование в Microsoft Excel Рис. 10.11. Набор значков условного форматирования в Microsoft Excel Когда пользователи ищут товары на eBay, они могут использовать расширенный поиск, чтобы задать различные критерии. Форма, показанная на рис. 10.12, содержит несколько примеров заполнения пропусков. 488 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.12. Форма поискового фильтра eBay Input Hints (Подсказки при вводе) Что это Фраза или пример, объясняющие, что требуется от пользователя, размещенные рядом с пустым текстовым полем или под ним. Когда использовать Если в интерфейсе есть текстовое поле, но некоторым пользователям может быть непонятно, что именно туда требуется вводить, а вы не хотите, чтобы ярлык поля был слишком длинным. Зачем Если текстовое поле будет содержать подсказку, пользователям не придется угадывать, какие данные в него вводить. Подсказка дает контекст, который не всегда получается создать при помощи ярлыка. Если визуально отделить Паттерны 489 подсказку от основного ярлыка, то пользователи, знающие, что делать, могут игнорировать ее и обращать внимание только на ярлык и элемент управления. Как Напишите короткий пример или объяснение и поместите его под текстовое поле или рядом с ним. Подсказка может быть видна постоянно или появляться, только когда в поле помещен курсор ввода. Текст не должен бросаться в глаза, но при этом должен хорошо читаться; используйте шрифт на два пункта меньше, чем шрифт основного ярлыка (разница в один пункт будет выглядеть как ошибка, а не как намеренное изменение размера). Кроме того, подсказки должны быть краткими. Если предложений будет больше одного-двух, то пользователи их просто пропустят и не будут читать. Примеры На рис. 10.13 показаны две короткие подсказки при вводе на странице регистрации 1-800-Flowers (http://1800flowers.com). Преимущество подсказок при вводе в том, что при их использовании поля остаются пустыми — их нужно заполнить и не получится пропустить, так как их нельзя спутать с уже заполненными. Рис. 10.13. Экран регистрации на сайте 1-800-Flowers 490 Глава 10. Получение данных от пользователя: формы и элементы управления Диалоговые окна печати, используемые в некоторых приложениях Microsoft Office, содержат подсказки при вводе под текстовым полем с «великодушным» форматом — они используют номера страниц, диапазоны страниц или и то и другое (рис. 10.14). Подсказка объясняет, как использовать функцию печати диапазона страниц. Она полезна всем, кто не знаком с этой функцией, но опытные пользователи могут не обращать на нее внимания и переходить прямо к полю ввода. Рис. 10.14. Диалоговое окно печати Microsoft Word При необходимости в подсказках при вводе можно использовать более длинные описания. На странице регистрации Gmail (рис. 10.15) подсказка примерно той Паттерны 491 же длины, как соседнее текстовое поле. Но на самом деле Google предоставляет дополнительную информацию, для этого пользователь должен щелкнуть на ссылке «Why we ask for this information» (Почему мы запрашиваем эту информацию), по которой открывается веб-страница в новом окне браузера. Стремление разъяснить политику компании похвально, но большинство пользователей никогда не перейдут по ссылке при заполнении формы, особенно если они хотят закончить как можно быстрее и их не очень волнуют вопросы обработки персональных данных. Поэтому не полагайтесь на связанные страницы, если вы хотите сообщить что-то важное. Рис. 10.15. Страница регистрации Gmail 492 Глава 10. Получение данных от пользователя: формы и элементы управления Apple размещает подсказки при вводе в правой части формы, выравнивая элементы управления с подсказками (рис. 10.16). Это изящный способ структурировать страницу, содержащую много подсказок. Рис. 10.16. Экран оформления заказа Apple В некоторых формах подсказки выводятся, только когда курсор ввода находится в самом текстовом поле или когда выполняется условие, как на сайте Yelp (рис. 10.17). Эта подсказка появляется только после того, как пользователь начинает вводить пароль, но не включает обязательный символ. В противном случае подсказки скрыты. Такая реализация весьма удобна, поскольку скрытые подсказки не загромождают интерфейс и не добавляют визуального шума, однако пользователь не видит их, пока не нажмет на текстовое поле (или не выделит его клавишей Tab). Если вы используете такой вариант, обратите внимание, что необходимо оставить для подсказок место в интерфейсе или расширить его. Рис. 10.17. Подсказка при вводе пароля на сайте Yelp Сайт Trunk Club (рис. 10.18) предлагает довольно компактную вертикальную форму регистрации. Когда пользователь выбирает поле «Password» (Пароль), открывается форма с подсказками для пароля. То есть подсказки появляются только тогда, когда пользователь выделяет соответствующее поле. Паттерны 493 Рис. 10.18. Сайт Trunk Club Input Prompt (Приглашение к вводу) Что это Пример заполнения или инструкция, предварительно размещенные в текстовом поле и поясняющие пользователю, что делать или вводить. Такой текст также называется текстом-заполнителем. Когда использовать Если пользовательский интерфейс содержит текстовое поле, раскрывающийся список или комбинированное поле, куда необходимо вводить информацию. Обычно в таком случае вы используете хорошее значение по умолчанию (см. одноименный паттерн), но здесь это невозможно — вероятно, потому, что такого значения просто нет. Примеры из инструментария Blueprintjs UI (рис. 10.19) показывают, как приглашения к вводу помогают объяснить назначение поля. Зачем Это делает интерфейс приложения интуитивно понятным. Как и подсказки при вводе, приглашение к вводу — это хороший способ добавить справку к элементам управления, назначение или формат которых могут быть непонятны. 494 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.19. Инструментарий Blueprintjs UI; четыре примера ввода с подсказками Когда используется подсказка, то пользователь, который бегло просматривает интерфейс, может игнорировать ее (или пропустить). Иногда именно это и нужно. Но приглашение к вводу находится именно в том месте, где пользователь собирается вводить текст, так что игнорировать его невозможно. Преимущество этого инструмента в том, что пользователю не приходится гадать, нужно ли ему что-то делать с этим элементом управления — это ему говорит сам элемент управления (помните, что пользователи не заполняют формы, чтобы развлечься, поэтому они хотят закончить эту работу как можно быстрее). Вопрос или призыв «Заполните это поле!» вряд ли останется незамеченным. Не то же самое, что плавающие ярлыки. В современном дизайне форм часто используются так называемые «плавающие ярлыки» (floating labels, см. статью Брэда Фроста о плавающих ярлыках (https://oreil.ly/QqVjd)). При этом для простоты и привлекательности используются элементы ярлыков HTML в полях формы, очень похожие на приглашения к вводу. Однако приглашение к вводу исчезает, когда курсор находится в поле ввода формы, содержащем текст приглашения. Плавающие ярлыки перемещаются и меняют размер, но не исчезают при помещении курсора в поле. Посмотрите еще раз на рис. 10.15 (Страница регистрации Gmail) — за пределами полей формы нет ярлыков. Ярлык «Phone number (optional)» (Номер телефона (необязательно)) и следующий ярлык «Recovery email address (optional)» (Адрес электронной почты для восстановления (необязательно)) — это на самом деле плавающие ярлыки внутри полей ввода. В этом случае приглашения к вводу излишни. При выборе поля номера телефона ярлык перемещается к верхнему краю поля ввода вместо полного исчезновения текста (раньше это был огромный недостаток приглашений Паттерны 495 к вводу). Текст с ярлыка по-прежнему доступен пользователю, и его не нужно запоминать. С другой стороны, использования только плавающих ярлыков может быть недостаточно, если, чтобы что-то объяснить, нужно вывести и ярлык, и приглашение к вводу. Как Подберите текст для приглашения: для раскрывающегося списка используйте слова «Выберите», «Выделите» или «Отметьте»; для текстового поля используйте слова «Введите» или «Укажите»; используйте короткую глагольную фразу. Закончите ее существительным, описывающим, что именно нужно вводить, например «Выберите город», «Напечатайте здесь свое сообщение» или «Введите имя пациента». Поместите эту фразу в элемент управления, туда, где обычно находится значение. (Само приглашение не должно выглядеть как вариант выбора в раскрывающемся списке; если пользователь выберет его, то непонятно, как система должна его обрабатывать.) Смысл в том, чтобы сообщить пользователю, что он должен сделать, чтобы перейти к следующему шагу, поэтому не переходите на этот шаг, пока пользователь действительно не сделает то, что нужно! Пока приглашение в элементе управления не задействовано, кнопка (или другое средство) завершения этого этапа должна оставаться неактивной. Это позволит не выводить лишний раз сообщение об ошибке. Если пользователь стирает то, что он ввел ранее, восстанавливайте приглашение к вводу. Если данные, которые будет вводить пользователь, можно довольно точно предугадать, лучше использовать паттерны Good Defaults (Хорошие варианты по умолчанию) и Smart Prefills (Умное предзаполнение), а не Input Prompt (Приглашение к вводу). Возможно, пользователь уже вводил свой адрес электронной почты, а страну проживания распознает встроенный механизм определения местоположения. Примеры Приложение Lyft (рис. 10.20) содержит форму с приглашением к вводу. Приглашение отображается по умолчанию и исчезает, когда пользователь начинает вводить текст. Если пользователь удаляет то, что он написал, текст приглашения к вводу возвращается. 496 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.20. Приглашение к вводу в мобильном приложении Lyft Password Strength Meter (Измеритель надежности пароля) Что это Сообщение для пользователя, допустим ли пароль, который он задает, и насколько он надежен, выводимое по мере ввода символов пользователем. Когда использовать Если в интерфейсе необходимо установить новый пароль, обычно при регистрации на различных сайтах. Пароль должен быть надежным, и вы хотите помочь пользователю создать именно такой пароль. Зачем Надежные пароли защищают не только пользователей, но и сами сайты, особенно когда на них хранится конфиденциальная информация или сведения о кон- Паттерны 497 тактах. Слабые пароли использовать нельзя, так как они подвергают систему опасности взлома. Измеритель надежности сообщает информацию о новом пароле по мере ввода: достаточно ли он надежен, нужно ли создать новый пароль, и если да, то с какими символами (цифрами, заглавными буквами и т. д.). Если система в любом случае отклонит ненадежный пароль, лучше сделать это как можно раньше, не дожидаясь, пока пользователь заполнит все поля формы. Как Покажите рядом с полем ввода пароля оценку надежности — либо одновременно с вводом нового пароля, либо сразу после того, как курсор ввода будет убран. Оценка должна включать текст и/или картинку с обозначением уровня надежности: слабый, средний, надежный. Добавьте формулировки для описания слишком коротких или недопустимых паролей. Цвет помогает обозначить недопустимое значение (красный), подходящее значение (зеленый или синий) и нечто среднее (другой цвет, чаще всего желтый). Измеритель надежности пароля Yelp — хороший пример использования этого паттерна (рис. 10.21). Рис. 10.21. Измеритель надежности пароля на сайте Yelp 498 Глава 10. Получение данных от пользователя: формы и элементы управления По возможности добавьте советы, как повысить надежность слабого пароля: например, пароль должен содержать не менее восьми символов и включать цифры или заглавные буквы. Несколько неудачных попыток создать надежный пароль наверняка разочаруют пользователя — помогите ему избежать этого. Кроме того, в форме, содержащей поле пароля, используйте подсказки при вводе или другой текст, объясняющий задачу. Краткое напоминание о том, каким должен быть надежный пароль, пригодится почти любому, а если ваша система отклоняет слабые пароли, об этом необходимо предупредить заранее, пока пользователь еще не добрался до конца формы! Во многих системах устанавливается ограничение на минимальную длину пароля: 6–8 символов. По умолчанию пароль не отображается, но вы можете добавить переключатель, который позволяет увидеть пароль. Не предлагайте варианты паролей, только общие советы о том, каким должен быть хороший пароль. Я не буду углубляться в вопросы создания безопасных паролей. Этой теме посвящено множество книг и сетевых публикаций. Если она вас интересует, вы найдете массу полезной информации самостоятельно. Примеры Измеритель надежности пароля на сайте GitHub (рис. 10.22) использует современный подход, при котором требования или условия для пароля (отображаемые в виде подсказок) преобразуются в своего рода счетчик. Его также можно рассматривать как своеобразный чек-лист. Пользователь также может прочитать требования и следовать им напрямую. По мере ввода некоторые ключевые слова и фразы в подсказке меняют цвет с красного (требование надежности пароля не выполнено) на зеленый (требование выполнено). Таким образом, можно корректировать пароль по мере ввода, чтобы подобрать надежный вариант. На сайте Airbnb реализован схожий функционал, при этом измеритель надежности пароля выглядит как настоящий чек-лист, который обновляется по мере ввода (рис. 10.23). H&M использует очень компактный измеритель надежности пароля в виде чеклиста (рис. 10.24). Он представляет собой подсказку для ввода, состоящую из краткого набора фраз. Когда пользователь вводит надежный пароль, требования помечаются как выполненные. Ретейлер Menlo Club также использует минималистичный подход (рис. 10.25). На его сайте представлен классический измеритель надежности пароля в стиле термометра, который использует только цвет и длину. Подсказок или инструкций нет. Когда пользователь вводит пароль, цветная полоса продвигается по шкале, меняя цвет с красного на желтый и, наконец, на зеленый. Паттерны 499 Рис. 10.22. Состояния измерителя надежности пароля GitHub На сайте Glassdoor предложен еще один минималистичный подход (рис. 10.26). Есть подсказка для ввода пароля, но требования к нему невелики. Индикатор надежности пароля имеет только два состояния: красный значок предупреждения о том, что пароль не соответствует заданным критериям, и зеленая галочка, означающая, что пароль допустим. 500 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.23. Состояния измерителя надежности пароля на сайте Airbnb Рис. 10.24. Состояния измерителя надежности пароля H&M Паттерны 501 Рис. 10.25. Измеритель надежности пароля Menlo Club Рис. 10.26. Измеритель надежности пароля Glassdoor сокращен до двух состояний: либо «предупреждение/ошибка», либо «ОК» 502 Глава 10. Получение данных от пользователя: формы и элементы управления Autocompletion (Автозаполнение) Если вы добавите автозаполнение, поиск станет намного более эффективным. В режиме реального времени, когда пользователь вводит слово или фразу в поле поиска, предлагайте наиболее вероятное совпадение на основе введенных символов. Это реализация интеллектуального механизма предложения самых популярных или наиболее часто используемых поисковых запросов. Эта функция экономит время, поскольку поисковый запрос не приходится вводить целиком, а можно выбрать из предложенных совпадений. Сайт Amazon (рис. 10.27) — хороший пример использования этой возможности. Рис. 10.27. Автозаполнение на сайте Amazon Что это Когда пользователь вводит текст, показывайте список возможных вариантов с функцией выбора нужного и по возможности автоматически завершайте ввод. Когда использовать Если пользователь вводит что-то предсказуемое, например URL-адрес, собственное имя или адрес, сегодняшнюю дату или имя файла, можно предположить, что он пытается ввести, используя для этого сохраненную историю ввода данных или имеющийся набор значений, скажем имена файлов в каталоге. Паттерны 503 Поля поиска, поле URL-адреса в браузере, поле адреса электронной почты, часто встречающиеся формы (например, для регистрации на веб-сайте или оформления покупки), редакторы текста и командная строка — со всеми этими элементами становится намного проще работать, если в них предусмотрена функция автозаполнения. Прогнозные и социальные алгоритмы теперь также поддерживают автозаполнение. Поисковые движки при автозаполнении анализируют популярные, трендовые или наиболее часто вводимые поисковые запросы. Зачем Автозаполнение экономит время, силы, снижает когнитивную нагрузку и даже нагрузку на запястья пользователя. Оно превращает трудоемкий процесс ввода текста в простую задачу выбора (а иногда выбор осуществляется сразу для всех полей формы — вдвойне удобно!). Вы экономите пользователям бесчисленное количество секунд работы и сохраняете здоровыми тысячи запястий. Если текст длинный и его трудно вводить (или трудно запомнить) — такой как URL-адреса или адреса электронной почты, — то ценность автозаполнения возрастает. Пользователю не приходится напрягать память, поскольку «знания из внешнего мира» выводятся в форме привычного списка. Предотвращение ошибок — еще одно преимущество: чем длиннее и необычнее текст, тем больше риск, что пользователь сделает опечатку. Автоматическое заполнение позволяет этого избежать. Пользу автозаполнения для мобильных устройств трудно переоценить. Вводить текст на крохотном устройстве — сомнительное удовольствие, и если речь идет о длинной строке сложного текста, то грамотное автозаполнение не только сэкономит немало времени, но и не даст отчаяться. И снова оно в первую очередь пригодится при вводе адресов электронной почты и URL-адресов. Автозаполнение часто применяется в текстовых редакторах и в интерфейсах на основе командной строки. По мере того как пользователь вводит команду или фразу, приложение или программная оболочка может предлагать различные варианты завершения. Редакторы кода и оболочки операционных систем отлично подходят для реализации данного паттерна, так как используемый в них язык ограничен и предсказуем (в противоположность человеческому языку, такому как английский или русский). Программный код проще спрогнозировать. Наконец, список вариантов завершения фразы может служить картой или проводником по контенту. Это хорошо демонстрируют поисковые системы, а также поля поиска на отдельно взятых сайтах: пользователь вводит начало фразы и сразу же видит похожие запросы, сделанные другими пользователями, или ссылки на материалы, которые могут его заинтересовать. Таким образом, пользователь получает доступ к коллективной истории поиска всего онлайн-сообщества. Очень часто люди ищут одно и то же. И благодаря функции автозаполнения отдельному пользователю становится доступен опыт многих. 504 Глава 10. Получение данных от пользователя: формы и элементы управления Как С каждым новым символом, который вводит пользователь, приложение формирует список возможных вариантов завершения уже введенного текста. Если пользователь вводит одно значение из ограниченного числа допустимых вариантов, используйте этот набор допустимых значений. Если же возможных значений очень много, то для завершения ввода можно использовать что-то из следующего: данные из истории пользовательского ввода; распространенные фразы из встроенного «словаря» приложения; возможные совпадения с текстом контента, по которому осуществляется поиск или просмотр (например, контент страницы веб-сайта); объекты, подходящие по контексту, например корпоративный список контактов для внутренней электронной почты; самые популярные или часто отправляемые поисковые запросы. Далее возможны два способа проектирования взаимодействия с функцией автозаполнения. Первый — выводить возможные подстановки по запросу, например по нажатию клавиши Tab, и позволять пользователю явно выбирать один из вариантов в списке. Так делается во многих редакторах программного кода. Этот подход лучше использовать, когда, оценивая доступные варианты, пользователь может сразу выбрать, что ему нужно, но ему трудно ввести текст целиком без посторонней помощи. «Знания из внешнего мира лучше, чем знания в голове». Второй путь — подождать, пока останется один подходящий вариант, а затем представить его пользователю. В Word для этого служат всплывающие подсказки; во многих других формах оставшаяся часть фразы вводится в поле, но при этом вновь вставленные символы выделяются, так что следующим нажатием можно стереть автоматическую подстановку. В любом случае у пользователя есть выбор — сохранить предложенный вариант или нет, и по умолчанию он не сохраняется. Убедитесь, что автозаполнение не раздражает пользователей. Если предлагаемые варианты будут неверны, пользователю это не понравится — ему придется стирать автоматически добавленный текст и заново вводить то, что он и собирался, и стараться при этом избежать повторной подстановки неверных значений. Следующие рекомендации помогут этого избежать: всегда предоставляйте пользователю выбор — принимать подстановку или нет; ответ по умолчанию — нет; не мешайте вводить данные привычным способом. Если пользователь хочет ввести текст, несмотря на автозаполнение, убедитесь, что в итоге отображается именно то, что вводил пользователь; Паттерны 505 если пользователь отклоняет предложенный вариант подстановки один раз, не предлагайте его больше. Пусть пользователь делает то, что считает нужным; делайте правильные предположения. Примеры Во многих клиентах электронной почты автозаполнение логично используется, чтобы помогать пользователям вводить адреса в полях To: (Кому:) и CC: (Копия:). Обычно адреса подставляются из адресной книги, списка контактов или списка адресов, с которых уже велась переписка. На примере Apple Mail (рис. 10.28) показан один вариант подстановки, предложенный после того, как пользователь ввел «fid»; предложенный текст автоматически выделяется, поэтому его можно стереть одним нажатием клавиши. Таким образом, если предположение оказалось неверным, можно продолжать печатать прямо «сквозь» него. Рис. 10.28. Автозаполнение в электронной почте Apple Mail Приложение электронной почты Google Gmail предлагает использовать автозаполнение при написании писем (рис. 10.29). Нажав клавишу со стрелкой вправо, можно завершить предложение вариантами автозаполнения. Рис. 10.29. Автозаполнение Gmail в теле письма 506 Глава 10. Получение данных от пользователя: формы и элементы управления Раскрывающиеся списки с вариантами автозаполнения могут принимать множество различных форм. На рис. 10.30 показаны несколько примеров форматирования раскрывающихся списков. Автозаполнение может применяться только к определенным типам данных или более широко, включая поиск в различных источниках данных. Функцию автозаполнения также можно эффективно использовать для продвижения продуктов и при платном размещении. Рис. 10.30. Автозаполнение в браузере Apple Safari Рис. 10.31. Автозаполнение в браузере Google Chrome Паттерны 507 Рис. 10.32. Автозаполнение в поисковой строке Google.com Рис. 10.33. Автозаполнение в поисковой строке Android 508 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.34. Автозаполнение в поисковой строке на сайте Yelp.com Рис. 10.35. Автозаполнение в поисковой строке «Things to Do» на сайте Expedia.com Паттерны 509 Рис. 10.36. Автозаполнение в поисковой строке на сайте Kayak.com Dropdown Chooser (Раскрывающийся селектор) Что это Раскрывающаяся или всплывающая панель с более сложным или иерархическим пользовательским интерфейсом для выбора значения, чем в привычном меню. Когда использовать Если пользователь сообщает приложению информацию, выраженную в нетекстовой форме. Это может быть выбор из предложенных вариантов (как в примере с палитрой цветов на рис. 10.37), дата или время, число и т. д. — то, что не вводится с клавиатуры. Необходимо создать удобный и наглядный интерфейс, поддерживающий такой выбор, но вы не хотите занимать место на главной странице; вам достаточно небольшого участка, где будет отображаться текущее значение. Зачем Большинство пользователей хорошо знакомы с раскрывающимися списками (если к ним добавляется текстовое поле, они называются комбинированными полями). Во многих приложениях эта концепция успешно расширяется до более сложных раскрывающихся панелей, чем простые списки, например деревьев, двумерных таблиц и произвольных представлений данных. Их функционал понятен, поскольку кнопка с нарисованной стрелкой вниз указывает, что ее нажатие раскрывает панель. 510 Глава 10. Получение данных от пользователя: формы и элементы управления Раскрывающийся селектор — это сложный пользовательский интерфейс, но при этом он занимает мало места, и поэтому удобен во многих ситуациях. Раскрывающиеся селекторы используются на всевозможных панелях инструментов, в формах, диалоговых окнах и на веб-страницах. Страница, которую видит пользователь, остается простой и привлекательной, а сложный интерфейс селектора отображается только по запросу пользователя. Как Когда раскрывающийся селектор закрыт, показывайте только текущее значение элемента управления на кнопке или в текстовом поле. Справа добавьте стрелку вниз, возможно, в виде отдельной кнопки — проведите тестирование и посмотрите, какой вариант визуально привлекательнее и удобнее для пользователей. Щелчок на стрелке (или всего элемента управления) должен открывать панель селектора, а повторный щелчок — закрывать ее. Максимально адаптируйте панель селектора для выбора, который делает пользователь. Панель должна быть относительно небольшой; для визуальной организации используйте знакомый всем формат инфографики, например список, таблицу или древовидное представление; иногда подходит специализированный формат, например календарь или калькулятор (см. примеры ниже). О представлении списков подробно рассказывается в главе 7. Можно добавить на панель всплывающего селектора полосу прокрутки, если пользователю нужно выбрать значение из большого набора, например найти файл в файловой системе. Но помните, что использовать прокрутку на всплывающей панели может быть сложно для людей, не обладающих достаточной сноровкой! Ссылки или кнопки на панели могут, в свою очередь, открывать вторичные пользовательские интерфейсы, помогающие пользователю в выборе значений, например диалоговые окна для выбора цвета или поиска файлов или страницы справки. Чаще всего такие диалоговые окна бывают модальными. Если вы планируете сделать такое модальное диалоговое окно (скажем, открывающееся щелчком на кнопке) основным способом выбора значения, используйте раскрывающийся селектор, вместо того чтобы сразу открывать модальное окно. Всплывающая панель может содержать наиболее часто выбираемые элементы или элементы, выбранные последними. Упрощая поиск популярных вариантов, вы сокращаете общее время (или количество щелчков мышью), которое пользователь в среднем тратит на выбор значений. Паттерны 511 Примеры В первом примере показано несколько раскрывающихся селекторов в приложении Microsoft Word (рис. 10.37). Рис. 10.37. Раскрывающиеся селекторы в приложении Microsoft Word В приложении Photoshop раскрывающиеся селекторы обычно используются для компактных панелей инструментов, поддерживающих множество способов взаимодействия с пользователем. На рис. 10.38 показаны три примера: элемент управления Brush (Кисть), инструмент выделения области Marquee Tool и элемент управления Opacity (Непрозрачность). Селектор Brush (Кисть) представляет собой список с вариантами выбора, имеющий одну особенность — в нем есть дополнительные элементы управления, такие как ползунок, шкала направления кисти, значки предустановок и расширяемый каталог кистей, в котором находится еще больше вариантов выбора. Выбор правого нижнего угла инструмента Marquee Tool открывает меню параметров, в котором также отображаются его специальные версии. Селектор Opacity (Непрозрачность) — это обычный ползунок и текстовое поле, дублирующее его значение. 512 Глава 10. Получение данных от пользователя: формы и элементы управления Инструмент дизайна Sketch содержит многофункциональный раскрывающийся селектор выбора цвета (рис. 10.39). Он включает в себя организованное представление цветов, элементы управления цветом и оттенком, числовые значения цветов и сетку сохраненных цветов. Дополнительные меню обеспечивают доступ к расширенным функциям. Рис. 10.38. Раскрывающиеся селекторы в приложении Photoshop Рис. 10.39. Раскрывающийся селектор в приложении Sketch Паттерны 513 Вместо текстового меню внутри раскрывающихся селекторов часто применяются сетки миниатюр (см. одноименный паттерн в главе 7). Два примера из PowerPoint (рис. 10.40) и Keynote (рис. 10.41) демонстрируют два разных стиля сетки миниатюр. Рис. 10.40. Раскрывающиеся селекторы с сеткой миниатюр в приложении Microsoft PowerPoint 514 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.41. Раскрывающиеся селекторы с сеткой миниатюр в приложении Keynote List Builder (Компоновщик списков) Что это Паттерн для создания сложной выборки из большого исходного набора объектов. В компоновщике списков исходный и целевой списки отображаются в одном и том же виджете. Это позволяет пользователю перемещать элементы между ними путем перетаскивания или с помощью кнопок. Этот паттерн также называется мультиселектором из двух столбцов. Когда использовать Если пользователь создает в интерфейсе список элементов, выбирая значения из другого списка. Исходный список может быть длинным — например, слишком длинным для отображения в виде набора флажков. Паттерны 515 Зачем Смысл этого паттерна в том, чтобы показывать оба списка на одной странице. Пользователь видит, что есть что: ему не приходится постоянно открывать, к примеру, модальное диалоговое окно. Более простая альтернатива компоновщику списков — один список элементов с флажками. Оба варианта решают задачу выделения поднабора. Однако если исходный список очень длинный (например, целая файловая система), пользователь не может сразу увидеть все поставленные галочки, поэтому, чтобы получить полное представление о выбранном поднаборе элементов, ему приходится постоянно прокручивать список. Как Расположите исходный и целевой списки рядом друг с другом в строку или столбец. Между списками добавьте кнопки Add (Добавить) и Remove (Удалить) (если не очевидно, что здесь работает обычное перетаскивание). Можно обозначить кнопки словами, стрелками или и тем и другим. Можно добавить другой функционал, например поиск по обоим спискам. Исходный список может представлять собой многоуровневый каталог с открытой или закрытой структурой папок. В целевой список можно добавить инструменты перемещения или перетаскивания, чтобы упорядочить элементы в нем сверху вниз. В зависимости от типа элементов можно либо действительно перемещать их из источника в место назначения (удаляя их в исходном списке), либо сохранять исходный список неизменным. Список файлов в файловой системе лучше не менять; если это произойдет, пользователи будут сбиты с толку, поскольку они воспринимают такой список как модель фактической файловой системы, где файлы на самом деле не удаляются. Выбор за вами. Предусмотрите возможность делать множественный выбор в списке, чтобы за один раз переместить сразу несколько элементов. Примеры В большинстве современных реализаций этого паттерна элементы можно перемещать перетаскиванием или просто щелчком; важно, чтобы пользователь получал визуальное подтверждение того, что выбранные элементы перемещены. Интерфейс для создания списков в мультиселекторе веб-приложения multiselect. js быстрый и простой (рис. 10.42). В этом проекте с открытым исходным кодом используется типичный виджет с множественным выбором из двух столбцов для веб-приложений. 516 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.42. Реализация multiselect.js на сайте Loudev.com Drupal предлагает аналогичный компонент — виджет компоновщика списков с множественным выбором как часть системы управления корпоративным контентом (рис. 10.43). Рис. 10.43. Система управления контентом Drupal Можно создавать графические списки. В приложении Lightroom (рис. 10.44) представлен более современный компоновщик списков: можно перетаскивать элементы из потенциально длинного списка исходных изображений в «пакетную» группу, чтобы выполнять операции со всеми изображениями в пакете Паттерны 517 одновременно. Крупный текст сообщает пользователю, что делать в важные моменты, например создать новый пакет или удалить изображение из пакета. Рис. 10.44. Приложение Adobe Lightroom Good Defaults (Хорошие варианты по умолчанию) и Smart Prefills (Умное предзаполнение) Что это Значения по умолчанию, которые подставляются в элементы форм, чтобы экономить время и силы пользователей. Хорошие варианты по умолчанию используют для подстановки ранее введенные данные, информацию из учетной записи пользователя, текущее местоположение, текущую дату и время и любые другие значения, которые могут быть полезны и ускорить заполнение формы. Когда использовать Если в интерфейсе необходимо ответить на вопросы, заполнив любой тип формы (например, вписать данные в текстовые поля или установить переключатели), но вы хотите сберечь время и усилия пользователей. Вероятно, большинство из них выберут определенный ответ или уже предоставили достаточно информации, чтобы точно предположить, каким он будет. Если вопрос технический или напрямую не относится к пользователям, возможно, они не знают ответа или не задумываются о нем, так что их устраивает «то, что выберет система». 518 Глава 10. Получение данных от пользователя: формы и элементы управления Однако варианты по умолчанию не всегда уместны, особенно когда дело касается конфиденциальной информации или сферы политики, например паролей, пола или гражданства. Здесь нужно быть очень осторожными, так как ошибка может доставить пользователям неудобства или разозлить их. (И пожалуйста, не ставьте по умолчанию галочки в поле «Да, я хочу получать рекламные сообщения»!) Зачем Предоставляя по умолчанию разумные ответы на различные вопросы, вы экономите усилия пользователей. В этом весь смысл. Вы избавляете их от необходимости думать над ответом и печатать его. Заполнять формы — сомнительное развлечение, и если этот паттерн вдвое сократит время, затрачиваемое на форму, пользователи будут вам благодарны. Даже если вариант по умолчанию не подходит пользователю, по крайней мере он увидит пример ответа. Уже одно это может сэкономить время, которое он бы потратил на раздумья или, что еще хуже, на ошибку. Иногда применение этого паттерна ведет к нежелательным последствиям. Если пользователь пропускает поле в форме, то задаваемый в нем вопрос может не «отпечататься» у него в сознании. Он может просто забыть, что такой вопрос задавался, может не понимать возможных затруднений, связанных с этим вопросом или с ответом на него по умолчанию. Ввод ответа, выбор значения или щелчок на кнопке заставляет пользователя задуматься над вопросом, а это очень важно, если вы хотите, чтобы он хорошо изучил приложение. Как Заранее заполняйте текстовые, комбинированные поля и другие элементы управления подходящими значениями по умолчанию. Это можно делать при первом появлении страницы или использовать информацию, которую пользователь ввел до этого, для динамической установки значений по умолчанию на следующих страницах. (Например, если пользователь введет почтовый индекс Соединенных Штатов, то, исходя из этого, можно подставить штат, страну и иногда город.) Не устанавливайте значение по умолчанию только потому, что считаете, что пустых полей быть не должно. Делайте это, только когда вы уверены, что большинство пользователей в большинстве случаев не будут менять подставленное значение, — иначе вы просто добавите им работы. Изучите своих пользователей! Редко используемые интерфейсы, например утилиты установки программ, стоит упомянуть отдельно. Вы запрашиваете технические детали, такие как папка для установки, на случай, если пользователи захотят изменить ее. Но в 90 % случаев Паттерны 519 они этого не захотят. И им все равно, куда вы установите программу — для них это просто не важно. Идеальная ситуация, чтобы предложить местоположение по умолчанию. Примеры На сайте Kayak (рис. 10.45) значения по умолчанию подставляются, когда пользователь начинает поиск рейса. Kayak предлагает недельный отпуск: в поле для выбора дат он подставляет период в одну неделю, начинающийся через месяц от сегодняшнего дня. Варианты по умолчанию логичны: чаще всего человек ищет полет туда и обратно для одного пассажира в эконом-классе, а пункт вылета можно подставить на основании текущего местоположения пользователя или его предыдущих поисковых запросов. Kayak идет еще дальше, подставляя дату вылета туда (через месяц) и обратно (неделю спустя). В итоге пользователь тратит меньше времени на работу с этими полями формы и быстрее достигает желанной цели. Рис. 10.45. Сайт Kayak Мобильное приложение Fandango (рис. 10.46) ведет поиск фильмов по умолчанию на основании даты и текущего местоположения пользователя. Когда вы открываете приложение, оно формирует список сеансов на сегодня в вашем районе. Кроме того, по умолчанию на странице появляется небольшой всплывающий баннер внизу (над результатами поиска), предлагающий посмотреть, какие фильмы идут сегодня в ближайшем кинотеатре. При создании нового файла изображения в Photoshop по умолчанию открывается буфер обмена ОС (рис. 10.47). Предполагается, что пользователь только что создал снимок экрана и редактирует его. Таким образом, Photoshop использует ширину и высоту изображения из буфера обмена для предварительного заполнения размеров файла в диалоговом окне Create New (Создать новый), и это хороший способ сэкономить время. Не беспокойтесь о несовпадении размеров изображения и холста. 520 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.46. Fandango — приложение для iOS Рис. 10.47. Диалоговое окно Create New в приложении Photoshop CC Паттерны 521 Диалоговое окно, показанное на рис. 10.48, появляется при изменении размера холста в Photoshop. Как видно, в данном случае оригинальный размер изображения составляет 1340 × 1060. Эти значения по умолчанию заносятся в поля Width (Ширина) и Height (Высота), определяющие новый размер, — во многих случаях их очень удобно использовать как отправную точку. Если пользователь захочет создать тонкую рамку вокруг изображения, то для этого ему нужно будет всего лишь добавить к текущим измерениям по два пикселя; если он захочет сделать холст изображения шире, но не выше, то исправит только значение в поле Width (Ширина); если же просто нажать кнопку OK, то ничего не изменится. Рис. 10.48. Диалоговое окно в Photoshop CC Error Messages (Сообщения об ошибках) Что это Заметное сообщение об ошибке, появляющееся в форме в случае ошибки ввода, например пропуска обязательного поля. В сообщении можно описать, как исправить ошибку. По возможности добавьте индикаторы рядом с исходными элементами управления. Когда использовать Пользователи могут заполнить форму неправильно. Например, пропустить необходимые поля, ввести неверные числа или неправильный адрес электронной 522 Глава 10. Получение данных от пользователя: формы и элементы управления почты. Вы хотите, чтобы они повторили попытку, обратить их внимание на опечатки до того, как они превратятся в проблему, и помочь им разобраться, что от них требуется. Зачем Сообщения об ошибках помогают пользователям исправить ошибки и выполнить задачу как можно быстрее и проще. Два традиционных способа выводить сообщения об ошибках используются довольно редко и не очень хороши. Первый способ — модальные диалоговые окна. Такие сообщения могут быть очень полезными и рассказывать, в чем заключается ошибка и как ее исправить. Но чтобы вернуться к работе и исправить ошибку, модальное диалоговое окно придется закрыть, а как только оно исчезает, перечитать сообщение об ошибке невозможно. Второй традиционный подход — выводить сообщения об ошибках на экране ошибки, после того как пользователь нажимает кнопку подтверждения отправки формы. Сообщение можно прочитать, но, чтобы исправить ошибку, нужно нажать кнопку «Назад», при этом сообщение об ошибке пропадает. Вам нужно запомнить, что в нем говорилось, а затем просмотреть форму, чтобы найти ошибку и исправить ее. Это требует усилий и вряд ли приведет к успеху, либо придется потратить дополнительное время. Сегодня на многих веб-страницах сообщение об ошибке выводится в самой форме. Благодаря тому что сообщения и элементы управления находятся на одной странице, пользователь может читать сообщение и сразу вносить правки, не перескакивая со страницы на страницу и не пытаясь запомнить сложный текст. Кроме того, иногда в веб-формах сообщения об ошибках выводятся рядом с элементами управления, в которых эти ошибки сделаны. Пользователь сразу видит проблему, и ему не нужно запоминать название поля и прокручивать страницу в его поисках — рядом с полем находятся и инструкции по исправлению ошибки. Как Форма должна предотвращать ошибки определенного рода. Если количество вариантов ограничено или их сложно вводить, используйте раскрывающиеся списки вместо текстовых полей. В текстовых полях добавляйте подсказки при вводе и приглашения к вводу, применяйте «великодушный» формат, автозаполнение, хорошие варианты по умолчанию и умное предзаполнение (см. соответствующие паттерны). Сокращайте общее количество полей, насколько это возможно. Четко маркируйте обязательные и необязательные поля и не создавайте слишком много обязательных полей. Если ошибка все же произошла и ваша форма длинная и сложная, выводите сообщение вверху формы. Верхняя часть страницы — это первое, что видят люди. (И это удобно для пользователей с нарушениями зрения — для них форма Паттерны 523 озвучивается сверху вниз, так что они сразу же узнают о проблеме.) Добавьте привлекающее внимание изображение и используйте более заметный текст, например красный цвет и полужирный шрифт. В современных коротких формах этот шаг часто опускается. Универсальный стандарт — маркировка полей формы, вызвавших ошибку. Поместите рядом с ними специальные сообщения — это требует свободного места, но как минимум используйте цвет и/или небольшую картинку. В этом контексте пользователи обычно ассоциируют красный цвет с ошибками. Используйте его; но некоторые пользователи не различают цвета, поэтому предусмотрите и другие сигналы, такие как слова-предупреждения, полужирный (но не очень крупный) текст и графика. Если вы проектируете форму для веб-приложения или другой клиент-серверной системы, старайтесь выполнить основной объем проверки на клиентской стороне. Это значит, что проверять форму и выводить отчет для пользователя необходимо при заполнении формы, а не после ее отправки. Современный стандарт предусматривает проверку введенных данных сразу после того, как курсор перемещается в следующее поле. В некоторых формах содержится код проверки, который запускает ее, когда пользователь выбирает поле ввода. Сообщения об ошибках и отчеты можно выводить сразу, когда пользователь вводит неверные данные. В любом случае это намного быстрее: у пользователя есть возможность исправить все перед отправкой формы. (Иногда сообщение об ошибке появляется, когда пользователь только начинает ввод, и не исчезает, пока пользователь не закончит без ошибки. Это раздражает, поэтому не делайте так.) Мы не будем подробно рассматривать, как правильно составлять сообщения об ошибках, но вот несколько советов: сообщения должны быть краткими, но достаточно подробными, чтобы объяснить, в каком поле допущена ошибка и что именно сделано неправильно: «Не указан адрес» вместо «Недостаточно информации»; используйте обычный язык, а не компьютерный жаргон: «В почтовом индексе присутствует буква» вместо «Ошибка проверки числового значения»; будьте вежливы: «Извините, произошла ошибка! Пожалуйста, нажмите “Отправить” еще раз» вместо «JavaScript Error 693» или «Форма не содержит данных». Примеры В формах регистрации на Mailchimp (рис. 10.49), Mint (Intuit) (рис. 10.50) и H&M (рис. 10.51) используется традиционный подход. Пользователь заполняет форму, а затем выбирает «Отправить». Кнопка Get Started! («Начало работы») в Mailchimp становится активной после успешного ввода адреса электронной почты и пароля, но пропускает незаполненное обязательное поле имени пользователя. Ошибка обнаруживается, когда пользователь отправляет форму, и ему необходимо повто- 524 Глава 10. Получение данных от пользователя: формы и элементы управления рить попытку. Место, где возникла проблема, выделяется, и выводится сообщение об ошибке. В дополнение к нему Mailchimp выводит общее предупреждение об ошибке вверху формы. Однако сообщение об ошибке очевидно. Рис. 10.49. Страница регистрации Mailchimp Паттерны 525 В примере с Mint (рис. 10.50) в сообщении об ошибке объясняется, что пароль в строке подтверждения не совпадает с паролем в первой строке и его необходимо ввести повторно, чтобы устранить несоответствие. Рис. 10.50. Страница регистрации Mint (Intuit) В H&M (рис. 10.51) кнопка «Become a Member» (Стать членом клуба) всегда активна. Если клиент забывает заполнить обязательное поле, сообщение об ошибке выводится только после нажатия этой кнопки. Само сообщение об ошибке составлено хорошо: оно точно описывает, что нужно сделать, чтобы решить проблему. В современном подходе предпочтительнее избегать ситуации, когда пользователь пропускает требуемый шаг или вводит неверное значение. Кнопка отправки просто не станет активной, пока не будут успешно выполнены все необходимые шаги. 526 Глава 10. Получение данных от пользователя: формы и элементы управления Рис. 10.51. Страница регистрации H&M Twitter делит процесс регистрации на несколько этапов (рис. 10.52). На этапе 1 кнопка продолжения неактивна по умолчанию. Невозможно перейти к этапу 2, пока не будет заполнена первая страница. Переход к следующему шагу регистрации совершается только после успешного заполнения формы данными верного формата. Кроме того, форма находится в модальном диалоговом окне. Из него Паттерны 527 нельзя никуда перейти, можно только закрыть его и прервать процесс регистрации. Проверка происходит в реальном времени, до того как пользователь нажмет кнопку продолжения. После исправления обязательных полей селектор для перехода к следующему шагу становится активным. Адрес электронной почты также проверяется в режиме реального времени. Обратная связь выводится до отправки формы, что избавляет пользователя от ненужных действий. Рис. 10.52. Регистрация в Twitter Когда вы добавляете в корзину на сайте Jos. A. Bank товар с неуказанными характеристиками, выводится вежливое напоминание о необходимости добавить недостающую информацию, как показано на рис. 10.53. В этом случае кнопка Add to Bag (Добавить в корзину) всегда активна. Покупатель должен нажать на нее, чтобы сгенерировать сообщение об ошибке. Рис. 10.53. Сайт Jos. A. Bank 528 Глава 10. Получение данных от пользователя: формы и элементы управления Заключение Дизайн форм и элементов управления — это одна из областей проектирования, в которой дизайнер действительно может проанализировать все возможные варианты использования и точно продумать обработку различных взаимодействий — стандартных взаимодействий, ошибок, а также пограничных вариантов. Поначалу может показаться, что создавать формы довольно просто, но эта задача может стать изнуряющей и сложной. Однако принципы проектирования, изложенные в этой главе, помогут справиться с ней и создавать полезные, удобные в использовании проекты. Приведенные примеры можно рассматривать как модели управления важными процессами, такими как регистрация и пароли, проверка и сообщения об ошибках, форматирование данных и создание элементов управления для сложных инструментов и настроек. ГЛАВА 11 Системы пользовательского интерфейса и атомарный дизайн В предыдущей главе приводилось множество примеров закономерности в дизайне интерфейса: экранные интерфейсы обычно представляют собой систему часто используемых компонентов. Недавние изменения подходов к разработке интерфейсов основаны на этой тенденции дизайна как системы. В этой главе мы рассмотрим основанные на компонентах фреймворки пользовательского интерфейса. Их понимание и использование поможет обеспечить согласованность, масштабируемость и удобство применения разрабатываемого продукта. Итак, в этой главе мы представим: обзор систем пользовательского интерфейса на основе компонентов; краткое изложение принципов атомарного дизайна, основанного на компонентном подходе; обзор некоторых полезных UI-фреймворков (библиотек компонентов) для полноэкранных и мобильных веб-приложений. Современная разработка приложений означает создание разнообразных интерактивных возможностей для потребителей и бизнес-клиентов независимо от того, какое устройство они используют и где находятся. Ожидается, что интерфейс всегда активен, всегда взаимодействует с окружающим миром, с другими людьми и динамически реагирует на действия пользователя. Современное ПО создается с возможностью подключения к интернету, чтобы использовать мощные преимущества облачной обработки, хранения и передачи информации. Мобильные устройства стали ведущей потребительской платформой. Клиенты ожидают, что приложения используют все возможности устройства, такие как камеры, голосовой ввод, данные о местоположении в реальном времени, история действий и предпочтения и многое другое. Они также хотят иметь доступ к приложениям с нескольких устройств — мобильных телефонов, планшетов, настольных компьютеров, часов, телевизоров и т. д. — с плавным переходом и одинаковым опытом взаимодействия. Они также ожидают, что 530 Глава 11. Системы пользовательского интерфейса и атомарный дизайн устройства меньшего размера будут обладать функциональностью и возможностями полноразмерных устройств. Разработчики создают системы пользовательского интерфейса, чтобы установить стандарты UI в этой среде. Подход к проектированию и разработке, который делает это возможным, основан на компонентах и виджетах, а также на подключении к другим системам в реальном времени для выполнения взаимодействия, операций, обработки данных в реальном времени и их хранения. Его цель — спроектировать и построить систему компонентов, которая позволяет пользователям выполнять свои задачи независимо от типа устройств, размеров экрана, операционных систем или веб-браузеров. Системы пользовательского интерфейса Системы пользовательского интерфейса, или проектирования UI, — это системы стилей и стандартов пользовательского интерфейса, которые помогают дизайнерам, разработчикам и партнерам поддерживать качество и единообразие внешнего вида своих программных продуктов. Они используют компонентный подход, а также нацелены на максимальную стандартизацию функциональности и внешнего вида, поддерживая при этом соответствие различным стандартам операционных систем (ОС). Данные стандарты не содержат указаний о применимых технологиях, например, какой язык программирования использовать. Для вас, как для дизайнера взаимодействия, главное то, что компонентный подход сейчас является отраслевым стандартом (по крайней мере, для таких простых функций, как заполнение форм, выбор даты и времени и т. д.). Остановимся на этом подробнее. Системы пользовательского интерфейса технологических компаний, таких как Microsoft, Apple, Google и многих других, поддерживают работу в нескольких операционных системах и на множестве устройств с экранами разных размеров: Система Microsoft Fluent Design содержит стандартизированную библиотеку стилей и модулей кода для ОС Windows, интернета, iOS и Android. Рекомендации Apple по пользовательскому интерфейсу распространяются на приложения для macOS и iOS, watchOS (для Apple Watch) и tvOS (для Apple TV). Система материального дизайна Google охватывает веб-приложения, Android, iOS, а теперь и нативные приложения для десктопных ОС через интерфейс Flutter UI. Системы пользовательского интерфейса 531 Microsoft Fluent — UI-система на основе компонентов Рассмотрим в качестве примера одну систему пользовательского интерфейса и один ее компонент. В 2017 году компания Microsoft выпустила Fluent — собственную UI-систему. Она служит для того, чтобы все продукты в экосистеме Microsoft выглядели в едином характерном стиле, будь то на рабочем столе Windows, на Android, iOS или в интернете. Сайт системы Fluent демонстрирует ее возможности (рис. 11.1). Представим, что вы дизайнер взаимодействия в Microsoft и разрабатываете приложение, для которого требуется инструмент выбора даты и времени. Если вы проектируете версию для интернета, вам следует обратить внимание на веб-инструмент Fluent для выбора даты в сети (рис. 11.2). Если вы разработчик мобильных систем, вам потребуется либо инструмент выбора даты Fluent iOS (рис. 11.3), либо Fluent Android (рис. 11.4). Наконец, если вы дизайнер десктопных приложений Windows, вы будете работать с инструментом выбора даты Fluent Windows (рис. 11.5). Рис. 11.1. Домашняя страница сайта системы пользовательского интерфейса Microsoft Fluent 532 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Рис. 11.2. Инструмент выбора даты Microsoft Fluent для веб-приложений Мы кратко рассмотрели систему проектирования пользовательского интерфейса на основе компонентов. Как дизайнеры взаимодействия разрабатывают системы с такими же преимуществами согласованности, масштабируемости и возможности многократного использования для собственной работы? Один такой метод стал очень популярен: атомарный дизайн (atomic design). Мы рассмотрим этот подход к дизайну в следующем разделе. Системы пользовательского интерфейса 533 Рис. 11.3. Инструмент выбора даты Microsoft Fluent для iOS Рис. 11.4. Инструмент выбора даты Microsoft Fluent для Android 534 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Рис. 11.5. Инструмент выбора даты Microsoft Fluent для Windows Атомарный дизайн: способ проектирования систем Дизайн и методологии проектирования развиваются параллельно с системами проектирования пользовательских интерфейсов. Проектирование теперь основано на идее о том, что мы разрабатываем систему гибких многократно используемых компонентов для сборки интерфейсов практически для любого устройства или экрана. Многие дизайнеры мыслят подобным образом. Атомарный дизайн — это, вероятно, самое известное название такого подхода. Впервые его описал дизайнер Брэд Фрост в своем блоге, а теперь и в книге «Atomic Design» (http://atomicdesign. bradfrost.com) (Brad Frost, 2017). Сейчас этот подход широко применяется и адаптируется для решения проблем дизайна интерфейсов и создания собственных систем проектирования. Рассмотрим его основные принципы. Обзор Атомарный дизайн включает в себя выбранные принципы и структуру для категоризации компонентов пользовательского интерфейса. Кратко опишем их. Атомарный дизайн: способ проектирования систем 535 Разделение Атомарный дизайн — это, по сути, подход к созданию интерфейсов «снизу вверх». Начните с анализа продукта, который вы разрабатываете. Затем разделите страницы и экраны на самые мелкие части, способные функционировать самостоятельно. Начать можно и с одного из вышеупомянутых UI-фреймворков, потому что они уже разделены на компоненты. Гид по стилю Далее необходимо определить основные и универсальные компоненты стиля: цвет, типографику, сетку макета (или план для современных контейнеров без сетки с изменением размера), значки и т. д. См. главу 4, в которой мы обсуждали сетку и макет, и главу 5, в которой речь шла о цвете и типографике. Важно помнить, что наша конечная цель — добиться уникального и приятного внешнего вида. Выбор здесь зависит от следования базовым принципам бренда или фирменного стиля. Компоненты системы атомарного дизайна будут основываться на этом и наследовать стили через CSS. Начните со стилизации самых простых элементарных единиц. По мере объединения этих элементов добавляйте стандарты стиля для управления внешним видом, поведением и организацией, вплоть до шаблонов для целых страниц компонентов. Последовательность Основная цель — избежать «UX-долга», постепенного расхождения в стилях и оформлении. Один и тот же компонент должен использоваться повторно во всех разделах целиком и сохранять свой дизайн. Не создавайте его заново каждый раз, это может изменить его внешний вид. Продукт должен расти и расширяться, сохраняя единообразие пользовательского интерфейса. Модульность Вам требуется система строительных блоков, которые можно собрать в инструменты и страницы для удовлетворения конкретной потребности. Мелкие кусочки соединяются, чтобы получились более крупные. Метафорой может послужить конструктор LEGO. Вы можете использовать мелкие детали по отдельности или соединить их вместе, чтобы создать гораздо более крупные и надежные компоненты и инструменты. Вложенность Как уже говорилось, общая стратегия состоит в том, чтобы начать с минимально возможных функциональных элементов и универсальных стандартов стиля, таких как типографика и цветовые палитры. Используйте меньшие части для создания больших. Например, простое поле ввода текста можно комбинировать с ярлыком, подсказкой при вводе или приглашением к вводу (см. главу 10) и раскрывающимся селектором в поле ввода, чтобы создать более удобный динамический компонент формы. Применяется также принцип наследования стилей. Стиль более мелких компонентов переносится с ними в более крупную совокупность. Изменение стиля на базовом уровне изменит его повсюду в системе. Например, цвет из цветовой палитры можно настроить для 536 Глава 11. Системы пользовательского интерфейса и атомарный дизайн повышения контраста и улучшения доступности, и эти настройки вступят в силу везде, где используется данный цвет. Вы можете настроить радиус скругления кнопок, и все компоненты, использующие элемент кнопки, сразу отразят это изменение. Команда дизайнеров может воспользоваться общей библиотекой стилей или общим ссылочным файлом. При правильном связывании файлы проекта автоматически обновляются при обновлении исходного файла. В подключенных продуктах команда инженеров должна интегрировать любые обновления проекта в исходный код, в котором отображен связанный компонент. Как только это будет сделано, продукт отразит изменения. Построение Очевидная цель создания набора LEGO-подобных строительных блоков состоит в том, чтобы конструировать целые экраны, рабочие процессы и приложения. Дизайнеры могут стилизовать существующие компоненты вебприложений, такие как кнопки и поля ввода, а затем на их основе «продолжать стройку». Они также могут начать с модулей и компонентов, уже доступных во UI-фреймворках, подобных тем, которые мы обсуждали ранее. Существует множество вариантов на выбор с разными возможностями настройки. Какие-то варианты подразумевают больше разработки, для других уже есть обширные библиотеки UI-компонентов. Выберите тот, который лучше всего соответствует вашим потребностям и работает с фреймворком JavaScript, который используют ваши разработчики. Отсутствие привязки к технологии Несмотря на технический характер этой главы, Фрост и многие другие авторы отмечают, что дизайнеры должны сосредоточиться на проектировании, а не на ограничениях конкретной технологии или фреймворка. Цель та же, что и всегда: понимание пользователей, поиск возможностей упростить для них взаимодействие и создание привлекательных и удобных программ. Атомарный дизайн, структуры пользовательского интерфейса и паттерны проектирования — это просто инструменты для достижения этой цели, а не ограничения или блокираторы. Иерархия атомарного дизайна Структура системы проектирования пользовательского интерфейса, построенной на принципах атомарного дизайна, основана на переходе от малого и простого к большому и сложному. Атомы Атомы определяются как самый маленький базовый строительный блок системы пользовательского интерфейса. Это модули, которые нельзя разделить дальше, не лишив их способности функционировать самостоятельно. Примеры могут включать поле ввода текста, ярлык, цвет, шрифт. Молекулы Молекулы — это группы из двух или более атомов, которые образуют более полный функциональный элемент. Примерами могут быть изображение Фреймворки пользовательского интерфейса 537 с заголовком и подписью, формирующие молекулу новости или рекламы в паттерне «Выравнивание по сетке» (глава 4) или форма ввода с ярлыком, подсказкой при вводе, приглашением к вводу и кнопкой отправки. Организмы Организмы представляют собой объединение молекул в доволь- но сложные объекты, которые выполняют несколько функций или основную функцию продукта. Хороший пример организма — модуль шапки в приложении или на веб-сайте. Он может включать логотип компании, компонент глобальной навигации (например, полное меню, см. главу 3), модуль поиска, служебную навигацию или инструменты регистрации, аватар пользователя и счетчик уведомлений. Шаблоны Шаблоны — это каркас для объединения молекул и организмов в определенных целях. Это способы разметки для создания типов страниц, которые вам понадобятся в зависимости от контента. Часто эти шаблоны представляют собой повторяющийся тип страницы. Примеры могут включать форму, домашнюю страницу, отчет с диаграммой или экран для табличных данных. Страницы Страницы представляют собой конечный продукт: шаблоны, запол- ненные контентом. Базовый шаблон и систему модулей можно стандартизировать, но каждая страница отличается в зависимости от своего уникального контента. И теперь у вас есть единообразная визуальная схема (глава 4), применяемая ко всему сайту. Как дизайнеру взаимодействия воплотить систему, созданную по принципам атомарного дизайна? К счастью, существует множество библиотек компонентов интерфейса, которые можно быстро стилизовать, модифицировать и использовать. Они называются фреймворками пользовательского интерфейса. Вероятно, ваша команда разработчиков уже пользуется ими. В следующем разделе мы рассмотрим некоторые UI-фреймворки. Фреймворки пользовательского интерфейса В этом разделе мы обсуждаем UI-фреймворки, которые относятся к вебтехнологиям и мобильным веб-технологиям: HTML, CS и JavaScript (или аналогичному языку программирования, например CoffeeScript или TypeScript). Это связано с тем, что в третьем издании этой книги особое внимание уделено полноэкранным веб-интерфейсам и интерфейсам для мобильных устройств. Фреймворки пользовательского интерфейса называются по-разному: фреймворки клиентского интерфейса, CSS-фреймворки, UI-наборы, UI-инструменты. Но все они состоят из одного и того же: системы программных компонентов для создания пользовательского интерфейса на основе размеров экрана. К фреймворкам стоит присмотреться по двум причинам: 538 Глава 11. Системы пользовательского интерфейса и атомарный дизайн это отличные примеры компонентных систем в действии; скорее всего, вы будете разрабатывать продукты, использующие один из таких фреймворков. Обзор Современные разработчики полноэкранных веб-приложений и мобильных приложений создали фреймворки для JavaScript (или другого аналогичного языка) для рендеринга фронтенд-кода. Эти фреймворки представляют собой просто библиотеки подготовленных настраиваемых модулей кода, которые легче настроить, чем писать код с нуля. Они используются для создания соответствующего HTML-, CSS- и JavaScript-кода для полноэкранных вебприложений и мобильных веб-приложений. Благодаря их использованию скорость разработки увеличивается, а код более согласован с интерфейсом. Angular, React, Vue, Ember и Node.js — примеры самых популярных фреймворков для JavaScript. Эти платформы кода обрабатывают вводимые пользователем данные, выполняют вызовы API и обрабатывают данные, возвращаемые этими API. Преимущества Фреймворки — это промежуточный механизм, помогающий избавиться от многих сложностей. Фреймворки обеспечивают ряд преимуществ: Скорость. Если код для обработки большинства ожидаемых вариантов использования уже подготовлен, то рабочий продукт создается быстрее. Последовательность. Модули кода и общий CSS-код визуализируют компоненты интерфейса в едином стиле. Маскировка различных возможностей браузеров. В недалеком прошлом браузеры имели разные уровни поддержки стандартов HTML, CSS и JavaScript. Во многих браузерах также реализовывались специфичные только для них возможности. Это была попытка выделиться и «выиграть войну браузеров». В результате довольно сложно было добиться того, чтобы разрабатываемые в то время версии веб-приложений и мобильных веб-приложений работали и выглядели одинаково в разных браузерах. Современные фреймворки для JavaScript автоматически учитывают различия между браузерами и ОС. Автоматическое добавление отзывчивого дизайна. В современном мире мы наблюдаем взрывной рост количества разных видов устройств и размеров экранов. Отзывчивый дизайн — ответ на этот вызов. Гибкая разметка, которая автоматически подстраивается под размер экрана пользователя, помогла дизайнерам создавать проекты, работающие на разных устройствах. Современные фреймворки поддерживают эту важную возможность. Фреймворки пользовательского интерфейса 539 Расцвет UI-фреймворков Фреймворки также предоставляют библиотеки компонентов для клиентского интерфейса или уровня представления приложения. Вот почему они называются UI-фреймворками, UI-наборами, UI-инструментами, CSS-фреймворками или интерфейсными фреймворками. Они содержат модули и компоненты, знакомые дизайнерам взаимодействия: заголовки, кнопки, входные данные формы, изображения и т. д. Дизайнеры могут по-разному настраивать внешний вид UI-фреймворков. В действительности, на сегодняшний день проектирование — это в основном не что иное, как работа с фреймворками. Вот контекст для проектирования современного пользовательского интерфейса: Основанные на компонентах UI-фреймворки — часть системного подхода к UI-дизайну. Создавайте систему, а не отдельные страницы. UI-фреймворки — начальная точка, и их можно адаптировать и стилизовать. UI-фреймворки — это пол, а не потолок. Они экономят время и энергию, которые можно использовать для решения других, более сложных задач. Далее мы рассмотрим некоторые общие инструменты пользовательского интерфейса, сравним и сопоставим их, изучив несколько примеров для каждого из них. Обзор некоторых UI-фреймворков В этом разделе мы кратко рассмотрим некоторые современные UI-фрейм­ворки. Их десятки, и с каждым днем их появляется все больше. Конечно, на страницах этой книги нам не удастся провести полное сравнение. Важно, что все они используют CSS, поэтому цвет, типографику и другие стили дизайна можно легко настраивать. Другая их ключевая особенность в том, что эти инструменты состоят из модулей и компонентов. В основе проектов, разработанных по принципам атомарного дизайна, часто находятся именно UI-фреймворки. Некоторые из них мы и рассмотрим: Bootstrap; Foundation; Semantic UI; Materialize; Blueprint; UIkit. Bootstrap Bootstrap — один из самых популярных UI-фреймворков. Он разрабо- тан в Twitter и является общедоступным. На рис. 11.6 показан список компонентов, 540 Глава 11. Системы пользовательского интерфейса и атомарный дизайн включенных по умолчанию. На рис. 11.7 представлены основные компоненты кнопок. Рис. 11.6. Компоненты Bootstrap Фреймворки пользовательского интерфейса 541 Рис. 11.7. Компоненты кнопок Bootstrap 542 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Foundation Foundation — это еще один популярный UI-фреймворк. Он создан в Zurb, отличается надежностью и имеет широкое сообщество участников. Многие крупные предприятия используют этот фреймворк. На рис. 11.8 показан список компонентов, включенных по умолчанию. На рис. 11.9 представлены примеры компонентов кнопок. Рис. 11.8. Компоненты Foundation Фреймворки пользовательского интерфейса 543 Рис. 11.9. Компоненты кнопок Foundation Semantic UI Semantic — это фреймворк дружественного пользовательского интерфейса. Он использует естественный язык и концепции реального мира. На рис. 11.10 показан список компонентов, которые включены по умолчанию, а на рис. 11.11 показаны его компоненты кнопок. 544 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Рис. 11.10. Компоненты Semantic UI Фреймворки пользовательского интерфейса 545 Рис. 11.11. Компоненты кнопок Semantic UI 546 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Materialize Materialize — один из многих UI-фреймворков, основанный на Material, системе дизайна для Android. Разработанный компанией Google, Material широко используется в нативных приложениях на Android и в сторонних мобильных и веб-приложениях. Materialise помогает сохранять единый стиль Material при разработке. На рис. 11.12 показан список компонентов, включенных по умолчанию. На рис. 11.13 приведены примеры компонентов кнопок. Рис. 11.12. Компоненты Materialize Фреймворки пользовательского интерфейса 547 Рис. 11.13. Компоненты кнопок Materialize 548 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Blueprint Blueprint — это UI-фреймворк, оптимизированный для обработки большого количества данных в веб-приложениях. Он разработан компанией Palantir Technologies и является общедоступным. На рис. 11.14 показан список компонентов, которые включены по умолчанию. На рис. 11.15 представлены примеры кнопок. Рис. 11.14. Компоненты Blueprint Фреймворки пользовательского интерфейса 549 Рис. 11.15. Компоненты кнопок Blueprint UIkit UIkit — это минималистичный UI-фреймворк, предназначенный для быстрого начала работы с дизайном компонентов клиентского интерфейса. 550 Глава 11. Системы пользовательского интерфейса и атомарный дизайн На рис. 11.16 показан список компонентов UIkit, которые включены по умолчанию, а на рис. 11.17 представлены примеры компонентов кнопок. Рис. 11.16. Компоненты UIkit Фреймворки пользовательского интерфейса 551 Рис. 11.17. Компоненты кнопок UIkit 552 Глава 11. Системы пользовательского интерфейса и атомарный дизайн Заключение В основе современной разработки масштабируемых единообразных интерфейсов лежит сочетание системного подхода к проектированию, такого как атомарный дизайн, с современным фреймворком пользовательского интерфейса, например одного из тех, что мы рассмотрели в этой главе. UI-фреймворки — стандартная часть инженерной основы программных проектов, поэтому ваша команда разработчиков, скорее всего, выберет один из них. Фреймворки используют подход, основанный на паттернах. Преимущество такого подхода заключается в более быстром и простом проектировании и развертывании стандартизированных повторяющихся частей интерактивного дизайна. В этом случае пользователям будет проще освоить элементы управления и они смогут увереннее пользоваться интерфейсом. Кроме того, при масштабировании системы командой разработчиков исключается вероятность появления случайных вариаций компонента или разных способов выполнения одной и той же задачи. Это позволяет сосредоточиться на действительно сложных задачах проектирования взаимодействия. ГЛАВА 12 По ту сторону экрана В предыдущих главах мы рассматривали сферу проектирования интерфейсов для десктопных, веб- и мобильных приложений — паттерны и передовые практики проектирования ориентированных на пользователя цифровых продуктов для устройств с сенсорными экранами, в которых основные действия выполняются щелчком или касанием элемента. Однако в сложных системах этих интерфейсов происходят изменения, которые в основном затрагивают способы взаимодействия (или отсутствия взаимодействия) пользователя с системами или систем с пользователем. Большинство видимых систем подразумевают наличие пользователя, который вводит информацию в систему или совершает транзакции, и интерфейса, который возвращает результаты пользователю. Паттерны, используемые этими системами, различаются в зависимости от предполагаемого назначения системы. Инструменты социального взаимодействия, такие как YouTube, Facebook или Twitter, используют схожие паттерны, потому что по своей сути задачи, которые они должны выполнять, очень похожи. На самом базовом уровне взаимодействия включают публикацию пользователем контента, который другие люди могут просматривать и комментировать. Владелец контента может редактировать его, удалять или изменять круг лиц, которые могут его просматривать. Другие пользователи могут ставить лайки, делиться контентом с другими или даже сообщать системе, что контент является оскорбительным или что они не хотят видеть его. Таким образом, хотя система является посредником и показывает контент на основе сложного набора алгоритмов, с точки зрения пользователя взаимодействия довольно просты. Точно так же новостные сайты, такие как New York Times, The Atlantic или ваша местная онлайн-газета, используют аналогичный паттерн с системной точки зрения. В них встроена система управления контентом, которую журналисты, редакторы и фотографы используют, чтобы размещать его и просматривать, прежде чем он станет общедоступным. Пользователи могут читать статьи, делиться ими, а в некоторых системах оставлять и редактировать комментарии. 554 Глава 12. По ту сторону экрана На сайтах электронной коммерции также присутствует простой паттерн. В их основе лежит система, куда сотрудник загружает фотографию и описание, а также параметры конкретного товара; а также система, которая отслеживает, сколько товаров есть в наличии и где их можно найти. Пользователь просматривает категории или коллекции товаров и в конечном итоге переходит на страницу сведений о продукте, где может выбрать определенный размер и количество, добавить товар в корзину и совершить покупку. Все это паттерны для мобильных и веб-приложений. Но поскольку технологии усложняются, сложность ввода и вывода также растет. Алгоритмы (наборы правил вычисления данных) управляют информацией и контентом, который видят пользователи. Эти алгоритмы развиваются и усложняются благодаря машинному обучению: модулю искусственного интеллекта, в котором системы ищут закономерности для идентификации и классификации данных. Повсеместные вычисления (также называемые интернетом вещей или промышленным интернетом) относятся к способности объектов или пространств интегрироваться в подключенные к интернету устройства, такие как датчики, которые могут считывать информацию об окружающей среде и передавать эту информацию обратно. Эти системы могут быть очень сложными и большую часть времени полностью невидимы для людей. Эти сложные системы «взаимодействуют» с человеком иначе, чем устройства с экраном, о которых мы говорили в этой книге. По мере роста автоматизации пользователю даже не понадобится клавиатура — взаимодействия станут проще, поскольку система будет выполнять действия от имени пользователя, а пользователь будет подтверждать или отклонять их. В будущем эти типы взаимодействия будут все более и более распространенными. Состав: интеллектуальные системы Инфраструктура технологий претерпевает масштабные изменения. Теперь не пользователи активно вводят данные в систему, а системы анализируют действия и местоположение пользователя для вычисления этих данных. Интернет вещей Интернет вещей — это устройства, которые подключены к интернету. Смартфон, телевизор, автомобиль, холодильник, люстру и даже кормушку для собак можно подключить и контролировать через интернет. Системы упреждения Системы упреждения — это системы, которые незаметно наблюдают за действиями пользователя и предоставляют ему данные, предложения или даже заранее Заключение 555 размещают заказы. Например, подключенный холодильник, который знает, какие продукты в нем находятся, и заказывает молоко, когда оно заканчивается. Вспомогательные системы Вспомогательные системы позволяют пользователям расширять и «усиливать» свои физические способности с помощью технологий. Естественные пользовательские интерфейсы Естественный пользовательский интерфейс подразумевает использование движений, жестов, касаний или других тактильных и сенсорных способов ввода и вывода. Сенсорные экраны смартфона или планшета — пример первых естественных пользовательских интерфейсов. Есть и другие примеры, такие как Amazon Alexa или Microsoft Kinect, которые считывают жесты. Разнообразных интерфейсов, которых можно касаться, которые можно сжимать, смахивать удерживать или с которыми можно разговаривать, становится все больше. Заключение Третье издание книги «Разработка интерфейсов. Паттерны проектирования» охватывает огромное количество паттернов и методов проектирования приложений для любых устройств с экранами (от настольных до мобильных). По мере того как эти системы становятся более сложными, мы надеемся, что их интерфейсы для пользователей станут, наоборот, более простыми и понятными. Роль разработчика — понять эти паттерны и правильно применять их в зависимости от контекста. А одна из основных задач дизайна — сформулировать историю, повествование и задать сценарии и правила, которые будут применяться к этим сценариям. Независимо от того, как пользователи взаимодействуют с интерфейсами, паттерны и принципы этой книги всегда актуальны. Понимание основных паттернов грамотной архитектуры пользовательского интерфейса, создание визуального представления с четкой иерархией информации, которая следует принципам гештальта, поддержка пользователя соответствующей справочной информацией — все это помогает сделать интерфейс понятным пользователю. Мы оставляем вас с этой мыслью. Поскольку разработчики и технические специалисты создают интерфейсы, которые в той или иной степени затрагивают жизнь людей, нам предоставляется возможность вступать в будущее с этичным, ориентированным на человека мышлением и делать жизнь людей и планеты лучше. У нас есть потрясающие технологии и инструменты, и мы должны задать себе вопрос: какое будущее мы создадим с их помощью? Об авторах Дженифер Тидвелл занимается разработкой дизайна и созданием пользовательских интерфейсов более десяти лет. Она исследует паттерны пользовательского интерфейса с 1997 года, а также разрабатывает дизайны и создает сложные приложения и веб-интерфейсы с 1991 года. Недавно перешла из сферы цифрового дизайна к ландшафтному, в котором по-прежнему сочетает удобство использования, красоту и лучшие инженерные практики. Чарли Брюэр является дизайнером пользовательских интерфейсов и имеет большой опыт работы с веб-приложениями B2B и платформами SaaS. Работает над созданием инструментов дизайна, позволяющих превращать идеи в цифровые продукты. За время своей профессиональной деятельности он занимался созданием независимого кино, преподавательской деятельностью, а также созданием цифровых брендов для клиентов со всего мира. Чарли разработал новаторский маркетплейс программной телевизионной рекламы, стал сооснователем стартапа игры для социальной сети и запустил несколько цифровых продуктов. Эйнн Валенсия является директором по дизайну в компании The City of San Francisco Digital Services и доцентом Калифорнийского колледжа искусств. За время своей карьеры она занималась созданием креативных команд, запуском крупных продуктов и сервисов, наставничеством и обучением дизайнеров, а также сотрудничала с крупными мировыми брендами. Имеет обширный опыт работы в области дизайна физических и цифровых продуктов, сервисов и программного обеспечения. Об обложке Животное на обложке книги «Разработка интерфейсов. Паттерны проектирования» — утка-мандаринка (Aix galericulata), одна из самых красивых уток. Родиной этих красочных птиц является Китай, ареал их обитания простирается от юго-востока России, севера Китая и Японии до юга Англии и Сибири. Самцы мандаринок имеют красочное оперение. Их легко отличить по радужной короне, щекам каштанового цвета и белой полосе в районе глаз, идущей от красного клюва к затылку. Оперение самок менее яркое — белое, коричневое или зеленовато-коричневое с белым горлом и грудкой. Эти птицы обитают в лесных массивах возле ручьев и озер. Будучи всеядными, они, как правило, придерживаются сезонной диеты. Осенью они поедают желуди и злаки, весной едят насекомых, наземных моллюсков и водные растения, а в летние месяцы питаются земляными червями, кузнечиками, лягушками, рыбой и моллюсками. Брачный ритуал уток-мандаринок начинается с тщательно продуманного и сложного брачного танца, который включает в себя встряхивающие движения, имитирующие питье и прихорашивание. Самцы борются друг с другом, чтобы завоевать самку, но в конечном итоге самка сама выбирает себе пару. Утята мандаринок инстинктивно следуют за матерями, известными своей самоотверженностью: они симулируют травмы, чтобы отвлечь на себя таких хищников, как выдры, еноты, собаки, норки, хорьки, филины и травяные змеи. Утки-мандаринки не вымирающий вид, но считаются подверженными этой угрозе. Лесорубы постоянно вторгаются в их среду обитания, а охотники и браконьеры ценят самцов за их оперение. Их мясо считается невкусным для людей, поэтому на них обычно не охотятся ради пищи. Многие животные, изображенные на обложках книг издательства O’Reilly, находятся под угрозой исчезновения; все они важны для нашей планеты. Иллюстрация на обложке сделана Карен Монтгомери на основе черно-белой гравюры из иллюстрированной книги Вуда «Естественная история». Шрифты обложки — Gilroy Semibold и Guardian Sans, шрифт текста — Adobe Minion Pro, шрифт заголовка — Adobe Myriad Condensed, шрифт исходного кода — Dalton Maag Ubuntu Mono. Дженифер Тидвелл, Чарли Брюэр, Эйнн Валенсия Разработка интерфейсов. Паттерны проектирования 3-е издание Перевел с английского С. Черников Руководитель дивизиона Ю. Сергиенко Ведущий редактор Е. Строганова Научный редактор М. Трусковская Художественный редактор В. Мостипан Корректоры С. Беляева, М. Молчанова Верстка Л. Егорова Изготовлено в России. Изготовитель: ООО «Прогресс книга». Место нахождения и фактический адрес: 194044, Россия, г. Санкт-Петербург, Б. Сампсониевский пр., д. 29А, пом. 52. Тел.: +78127037373. Дата изготовления: 08.2022. Наименование: книжная продукция. Срок годности: не ограничен. Налоговая льгота — общероссийский классификатор продукции ОК 034-2014, 58.11.12 — Книги печатные профессиональные, технические и научные. Импортер в Беларусь: ООО «ПИТЕР М», 220020, РБ, г. Минск, ул. Тимирязева, д. 121/3, к. 214, тел./факс: 208 80 01. Подписано в печать 29.06.22. Формат 70×100/16. Бумага офсетная. Усл. п. л. 45,150. Тираж 1000. Заказ 0000.
