Добавить в коллекции Добавить в сохраненное
  1. Инженерия
  2. Информатика
Загрузил Vladimir Saul

Разработка пользовательских интерфейсов, 2-е издание, Дженифер Тидвелл

реклама 
ББК 32.973.23-044
УДК 004.5
Т39
Т39
Тидвелл Дж.
Разработка пользовательских интерфейсов. 2-е изд. — СПб.: Питер, 2011. —
480 с.: ил.
ISBN 978-5-459-00434-2
Разработать хороший интерфейс не так-то просто. Пользователю в наше время требуется программное обеспечение, работа которого прекрасно отлажена, интерфейс радует взгляд, да и в целом пользоваться программой легко. При этом клиенты и менеджеры требуют, чтобы ПО было
оригинальным и быстро продавалось. Технологии разработки пользовательских интерфейсов, как
для веб-приложений, так и для настольных приложений и мобильных устройств, предоставляют
весь необходимый инструментарий, но нигде не говорится о том, как оптимальным образом этот
инструментарий использовать.
Книга «Разработка пользовательских интерфейсов» рассказывает о лучших достижениях в этой
области, о наиболее удачных паттернах проектирования, о самых красивых решениях общих проблем, а также о методах применения абстрактных идей на практике. Каждый рассматриваемый
шаблон содержит практические советы, которые вы можете тут же воплотить в жизнь. Для опытных разработчиков книга послужит источником интересных идей, а начинающие найдут в ней те
ориентиры в мире интерфейсов, которые помогут не сбиться c пути и сразу же начать применять
лучшие паттерны.
Второе издание книги значительно переработано с учетом глобальных изменений, происшедших
в сфере проектирования взаимодействия, а также дополнено шаблонами проектирования интерфейсов для социальных сетей и мобильных устройств.
ББК 32.973.23-044
УДК 004.5
Права на издание получены по соглашению с O’Reilly. Все права защищены. Никакая часть данной книги не может
быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Информация, содержащаяся в данной книге, получена из источников, рассматриваемых издательством как
надежные. Тем не менее, имея в виду возможные человеческие или технические ошибки, издательство не
может гарантировать абсолютную точность и полноту приводимых сведений и не несет ответственности за
возможные ошибки, связанные с использованием книги.
ISBN 9781449379704 англ.
ISBN 978-5-459-00434-2
© Authorized Russian translation of the English edition of
Designing Interfaces. Second Edition© O'Reilly Media, Inc. This
translation is published and sold by permission of O'Reilly
Media, Inc., the owner of all rights to publish and sell the same.
© Перевод на русский язык ООО Издательство «Питер», 2011
© Издание на русском языке, оформление ООО Издательство «Питер», 2011
Краткое оглавление
Предисловие ко второму изданию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Глава 1. Чем занимаются пользователи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Глава 2. Организация содержимого: информационная архитектура
и структура приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Глава 3. Подскажите дорогу: навигация, указатели и ориентирование . . . . . . . . . . 102
Глава 4. Организация страницы: компоновка элементов страницы . . . . . . . . . . . . . 150
Глава 5. Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Глава 6. За дело! Действия и команды . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Глава 7. Отображение сложных данных: деревья, таблицы
и прочая информационная графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Глава 8. Получение данных от пользователя: формы и элементы управления . . . . . 349
Глава 9. Использование социальных сетей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
Глава 10. Будем мобильными! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Полезные источники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Оглавление
Предисловие ко второму изданию . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
Изменения во втором издании . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Небольшие кусочки интерфейса, свободное
О шаблонах в целом . . . . . . . . . . . . . . . . . .
Прочие коллекции шаблонов . . . . . . . . . . .
О шаблонах в этой книге . . . . . . . . . . . . . .
Аудитория . . . . . . . . . . . . . . . . . . . . . . . . .
Как организована книга . . . . . . . . . . . . . . .
Благодарности . . . . . . . . . . . . . . . . . . . . . .
соединение . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
15
17
19
19
22
23
24
Глава 1. Чем занимаются пользователи . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Средство, ведущее к цели . . . . . . . . . . . . . . . . . . . . . . . .
Основы исследования пользовательской аудитории . . . . .
Мотивация пользователей к обучению . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Safe Exploration (Безопасное исследование) . . . . . . . .
Instant Gratification (Мгновенное вознаграждение) . . .
Satisficing (Разумная достаточность) . . . . . . . . . . . . . .
Changes in Midstream (Изменения на полпути) . . . . . . .
Deferred Choices (Отложенный выбор) . . . . . . . . . . . . .
Incremental Construction (Пошаговое построение) . . . .
Habituation (Привыкание) . . . . . . . . . . . . . . . . . . . . . .
Microbreaks (Микроперерывы) . . . . . . . . . . . . . . . . . . .
Spatial Memory (Пространственная память) . . . . . . . . .
Prospective Memory (Проспективная память) . . . . . . . .
Streamlined Repetition (Организованное повторение) . .
Keyboard Only (Только клавиатура) . . . . . . . . . . . . . . .
Other People’s Advice (Советы других людей) . . . . . . . .
Personal Recommendations (Личные рекомендации) . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
27
29
32
34
35
36
36
38
38
40
40
42
43
44
45
46
48
49
Глава2. Организация содержимого: информационная
архитектура и структура приложения . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Общая картина . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Отображение одного объекта . . . . . . . . . . . . . . . .
Отображение списка объектов . . . . . . . . . . . . . . .
Инструменты для создания объектов . . . . . . . . . .
Содействие при выполнении единственной задачи
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
51
52
53
54
54
Оглавление 7
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Feature, Search, and Browse (Новость, поиск и обзор)
News Stream (Лента новостей) . . . . . . . . . . . . . . . . .
Picture Manager (Диспетчер изображений) . . . . . . . .
Dashboard (Приборная панель) . . . . . . . . . . . . . . . . .
Canvas Plus Palette (Холст и палитра) . . . . . . . . . . . .
Wizard (Мастер) . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Settings Editor (Редактор настроек) . . . . . . . . . . . . . .
Alternative Views (Альтернативные представления) . .
Many Workspaces (Несколько рабочих пространств) .
Multi-Level Help (Многоуровневая помощь) . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. . .
. . .
. . .
. . .
. . .
. . .
. . .
. . .
. . .
...
. . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
. . . . . . . . . . . . . . . . . . . 55
. . . . . . . . . . . . . . . . . . . 56
. . . . . . . . . . . . . . . . . . . 59
. . . . . . . . . . . . . . . . . . . 65
. . . . . . . . . . . . . . . . . . . 70
. . . . . . . . . . . . . . . . . . . 75
. . . . . . . . . . . . . . . . . . . 79
. . . . . . . . . . . . . . . . . . . 83
. . . . . . . . . . . . . . . . . . . 89
. . . . . . . . . . . . . . . . . . . . 92
. . . . . . . . . . . . . . . . . . . 95
Глава 3. Подскажите дорогу: навигация, указатели и ориентирование . . . . . 102
Не теряйтесь . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Цена навигации . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Минимизация расстояний . . . . . . . . . . . . . . . . . . . . . . .
Навигационные модели . . . . . . . . . . . . . . . . . . . . . . . . . . .
Дизайнерские условности для веб-сайтов . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Clear Entry Points (Понятные точки входа) . . . . . . . . . . .
Menu Page (Страница меню) . . . . . . . . . . . . . . . . . . . . .
Pyramid (Пирамида) . . . . . . . . . . . . . . . . . . . . . . . . . . .
Modal Panel (Модальная панель) . . . . . . . . . . . . . . . . . .
Deep-linked State (Глубокая ссылка) . . . . . . . . . . . . . . .
Escape Hatch (Аварийный люк) . . . . . . . . . . . . . . . . . . .
Fat Menus (Полные меню) . . . . . . . . . . . . . . . . . . . . . . .
Sitemap Footer (Карта сайта внизу страницы) . . . . . . . .
Sign-In Tools (Инструменты регистрации) . . . . . . . . . . .
Sequence Map (Карта последовательности) . . . . . . . . . .
Breadcrumbs (Хлебные крошки) . . . . . . . . . . . . . . . . . . .
Annotated Scrollbar (Полоса прокрутки с примечанием) .
Animated Transition (Анимированный переход) . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
102
104
104
105
110
111
111
114
118
121
124
127
129
133
137
140
143
145
148
Глава 4. Организация страницы: компоновка элементов страницы . . . . . . . . 150
Основы компоновки страницы . . . . . . . . . . . . . . . . . . . . . . . . . . .
Визуальная иерархия: что важнее? что взаимосвязано? . . . . .
Визуальный поток: на что смотреть дальше? . . . . . . . . . . . . . .
Использование динамических дисплеев . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Visual Framework (Визуальная схема) . . . . . . . . . . . . . . . . . . .
Center Stage (Центральная сцена) . . . . . . . . . . . . . . . . . . . . . .
Grid of Equals (Сетка равных) . . . . . . . . . . . . . . . . . . . . . . . . .
Titled Sections (Именованные разделы) . . . . . . . . . . . . . . . . . .
Module Tabs (Модульные вкладки) . . . . . . . . . . . . . . . . . . . . . .
Accordion (Аккордеон) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Collapsible Panels (Свертываемые панели) . . . . . . . . . . . . . . . .
Movable Panels (Перемещаемые панели) . . . . . . . . . . . . . . . . .
Right/Left Alignment (Выравнивание по правому/левому краю)
Diagonal Balance (Диагональный баланс) . . . . . . . . . . . . . . . . .
Responsive Disclosure (Ответное обнаружение) . . . . . . . . . . . .
Responsive Enabling (Ответное включение) . . . . . . . . . . . . . . .
Liquid Layout («Резиновый» макет) . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
150
151
154
158
159
160
164
168
171
174
177
181
185
190
192
195
198
201
Глава 5. Списки . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Сценарии использования списков . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
Обратно к информационной архитектуре . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
8 Оглавление
Несколько решений . . . . . . . . . . . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Two-Panel Selector (Двухпанельный селектор) . . . . .
One-Window Drilldown (Погружение в одном окне) . .
List Inlay (Список с вкладышами) . . . . . . . . . . . . . .
Thumbnail Grid (Сетка эскизов) . . . . . . . . . . . . . . . .
Carousel (Карусель) . . . . . . . . . . . . . . . . . . . . . . . .
Row Striping (Чередование строк) . . . . . . . . . . . . . .
Pagination (Разбивка на страницы) . . . . . . . . . . . . .
Jump to Item (Прыжок к элементу) . . . . . . . . . . . . .
Alphabet Scroller (Алфавитная полоса прокрутки) . .
Cascading Lists (Каскадные списки) . . . . . . . . . . . . .
Tree Table (Древовидная таблица) . . . . . . . . . . . . . .
New-Item Row (Строка для нового элемента) . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
208
211
212
216
220
223
228
233
236
240
242
243
245
247
Глава 6. За дело! Действия и команды . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Проверка границ доступного . . . . . . . . . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Button Groups (Группы кнопок) . . . . . . . . . . . . . . . . . . . . .
Hover Tools (Инструменты, доступные при наведении) . . . .
Action Panel (Панель действий) . . . . . . . . . . . . . . . . . . . . .
Prominent «Done» Button (Заметная кнопка «Готово») . . . .
Smart Menu Items (Умные элементы меню) . . . . . . . . . . . .
Preview (Предварительный просмотр) . . . . . . . . . . . . . . . .
Progress Indicator (Индикатор хода выполнения процесса)
Cancelability (Возможность отмены) . . . . . . . . . . . . . . . . . .
Multi-Level Undo (Многоуровневая отмена) . . . . . . . . . . . .
Command History (История команд) . . . . . . . . . . . . . . . . . .
Macros (Макрос) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
253
256
257
260
263
267
270
272
275
278
280
284
286
Глава 7. Отображение сложных данных: деревья, таблицы
и прочая информационная графика . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 289
Основы информационной графики . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Организационные модели: как организованы эти данные? . . . . . . . . . . . . . . . . . . . . . . . .
Подсознательные элементы визуализации: что с чем связано? . . . . . . . . . . . . . . . . . . . . .
Навигация и просмотр: как изучать эти данные? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Сортировка и перестановка: можно ли изменить порядок данных,
чтобы увидеть их по-другому? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Поиск и фильтрация: покажите только то, что мне нужно . . . . . . . . . . . . . . . . . . . . . . . . .
Фактические данные: как узнать их конкретные значения? . . . . . . . . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Overview Plus Detail (Обзор и детали) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Datatips (Всплывающие данные) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Data Spotlight (Прожектор на данные) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dynamic Queries (Динамические запросы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Data Brushing (Окрашивание данных) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Local Zooming (Локальное масштабирование) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Sortable Table (Сортируемая таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Radial Table (Круглая таблица) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Multi-Y Graph (График с несколькими осями Y) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Small Multiples (Небольшие образцы) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Treemap (Древовидная карта) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
289
290
291
295
296
299
301
302
303
307
311
316
320
324
328
331
335
339
344
Глава 8. Получение данных от пользователя: формы и элементы
управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Основы дизайна форм . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349
Оглавление 9
Выбор элементов управления . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Списки элементов . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Текст . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Числа . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Дата и время . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Forgiving Format («Великодушный» формат) . . . . . . . . . . . . . . . . . . . . .
Structured Format (Структурированный формат) . . . . . . . . . . . . . . . . . .
Fill-in-the-Blanks (Заполнение пропусков) . . . . . . . . . . . . . . . . . . . . . . .
Input Hints (Подсказки при вводе) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Input Prompt (Приглашение к вводу) . . . . . . . . . . . . . . . . . . . . . . . . . . .
Password Strength Meter (Измеритель надежности пароля) . . . . . . . . . .
Autocompletion (Автозаполнение) . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Dropdown Chooser (Раскрывающийся селектор) . . . . . . . . . . . . . . . . . . .
List Builder (Компоновщик списков) . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Good Defaults (Хорошие варианты по умолчанию) . . . . . . . . . . . . . . . . .
Same-Page Error Messages (Сообщения об ошибках на той же странице)
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
352
353
359
361
363
364
365
368
370
372
375
378
380
385
388
390
393
Глава 9. Использование социальных сетей . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
О чем не говорится в этой главе . . . . . . . . . . . . . . . . . . . . . . . . .
Основы социальных взаимодействий . . . . . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Editorial Mix (Редакторский микс) . . . . . . . . . . . . . . . . . . . . .
Repost and Comment (Перенос публикаций и комментарии) . .
Conversation Starters (Приглашения к разговору) . . . . . . . . . .
Inverted Nano-pyramid (Инвертированная нанопирамида) . . .
Timing Strategy (График публикации) . . . . . . . . . . . . . . . . . .
Specialized Streams (Специализированные потоки) . . . . . . . .
Social Links (Социальные ссылки) . . . . . . . . . . . . . . . . . . . . .
Sharing Widget (Виджет для рассылки) . . . . . . . . . . . . . . . . .
News Box (Поле новостей) . . . . . . . . . . . . . . . . . . . . . . . . . .
Content Leaderboard (Доска почета) . . . . . . . . . . . . . . . . . . .
Recent Chatter (Последние комментарии) . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
398
398
402
403
409
412
415
417
420
424
427
430
434
438
Глава 10. Будем мобильными! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 441
Сложности мобильного дизайна . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
С чего начать разработку мобильного дизайна . . . . . . . . . . . . . . . . . .
Несколько стоящих примеров . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Шаблоны . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Vertical Stack (Вертикальный стек) . . . . . . . . . . . . . . . . . . . . . . . . . . .
Filmstrip (Фотопленка) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Touch Tools (Инструменты, реагирующие на касание) . . . . . . . . . . . . .
Bottom Navigation (Нижняя навигация) . . . . . . . . . . . . . . . . . . . . . . . .
Thumbnail-and-Text List (Список эскизов и текста) . . . . . . . . . . . . . . . .
Infinite List (Бесконечный список) . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Generous Borders (Щедрое окаймление) . . . . . . . . . . . . . . . . . . . . . . .
Text Clear Button (Кнопка стирания текста) . . . . . . . . . . . . . . . . . . . . .
Loading Indicators (Индикаторы загрузки) . . . . . . . . . . . . . . . . . . . . . .
Richly Connected Apps (Тесно связанные приложения) . . . . . . . . . . . . .
Streamlined Branding (Общий фирменный стиль) . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
...............
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
442
444
446
448
449
452
453
455
457
459
461
463
464
466
468
Полезные источники . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Веб-сайты . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 472
Книги . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 473
Об авторе . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 475
Предисловие
ко второму изданию
За пять лет, прошедшие с публикации первого издания «Дизайна интерфейсов»,
многое изменилось.
Большинство дизайнеров пользовательских интерфейсов, которые сегодня занимают должности проектировщиков восприятия пользователя, дизайнеров взаимодействия, информационных конструкторов или носят любые другие названия, работают
в сети. Хороший дизайн требуется бесчисленным веб-сайтам, веб-сервисам, программному обеспечению с загрузкой из сети, блогам, интернет-магазинам. С течением
времени все проще становится предоставлять пользователям готовые продукты в смехотворно короткие сроки. Многие из перечисленных продуктов отличаются высокой
интерактивностью, но даже традиционные веб-сайты — статические и прямолинейные
в прошлом — сегодня содержат динамические и интерактивные компоненты, такие как
видеопроигрыватели или контент социальных сетей. Дизайн заполонил все вокруг!
Но не настольные приложения. По сравнению с тем, как активно дизайн для них
создавался всего несколько лет назад, нынешнее состояние можно назвать затишьем.
Разумеется, все пользователи зависят от сложного программного обеспечения, установленного на ноутбуках и настольных компьютерах. Клиенты электронной почты,
браузеры, редакторы документов, профессиональные приложения и операционные
системы все так же остаются важной частью сетевой жизни. Однако многие аспекты
дизайна интерфейсов настольных приложений обрели постоянную форму и стали привычными. В результате с начала 2000-х годов требования читателей книг по дизайну
изменились: вместо дизайна настольных приложений они захотели больше узнавать
о веб-дизайне.
Случилось и еще одно важное изменение: настало время расцвета для мобильного
дизайна, который в 2005 году находился еще в зачаточном состоянии. iPhone и другие
сложные мобильные устройства завоевали огромную популярность. Благодаря этим
небольшим гаджетам вся сеть теперь помещается в карман куртки, а многие дизайнеры столкнулись со специфическими проблемами, характерными исключительно
для мобильных устройств. Каким образом мобильность меняет дизайн интерфейсов,
особенно веб-сайтов? Окончательный ответ на этот вопрос еще не найден, но сообщество дизайнеров уже изобрело некоторые успешно работающие подходы и методики.
Также дизайнеры не могут игнорировать влияние интерактивных социальных сетей. Еще в самом начале работы над очередным проектом дизайна мне необходимо подумать о связи с блогами, с ���������������������������������������������������������
Twitter��������������������������������������������������
, с ����������������������������������������������
Facebook��������������������������������������
, предусмотреть поля для ввода комментариев, запланировать форум и прочие способы общения пользователей в сети. Я была
бы очень нерадивым дизайнером, если бы не обращала внимания на такую важную
область. Люди проводят в сети много времени, немалую его часть тратя на социальное
общение. Для искушенных пользователей поддержка социальных сетей на различных
Изменения во втором издании 11
веб-сайтах стала обязательным элементом. Теперь сложно найти сайт, не связанный
ни с одним из социальных сервисов (а большинство связаны сразу с несколькими).
Но подождите, это еще не все! С момента публикации первой книги мир дизайна
восприятия пользователя (user experience design или UX-дизайн) также успел осознать
ценность шаблонов, и на сцену вышли коллекции шаблонов, связанные с этим новым
направлением. Многие из них очень хороши. Некоторые дизайнеры взяли примеры
шаблонов из первой книги, доработали их, изменили, переименовали в соответствии
с новыми условными соглашениями или предоставили новые сведения об использовании шаблонов. Другие дизайнеры создали шаблоны в областях, которые в первой книге упоминались лишь вскользь: интерфейсы социальных сетей и мобильных устройств,
управление жестами, поиск и многофункциональные интернет-приложения (лучшие
из этих шаблонов перечислены во введении, в разделе ссылок, а также рассмотрены
среди других шаблонов в книге).
Так можно ли утверждать, что написанное в 2005 году до сих пор остается в силе?
По большей части, да. Человеческий разум не изменился — визуальная иерархия
все так же работает, прогрессивное обнаружение тоже, а движущиеся объекты все так
же привлекают внимание как лягушек, так и людей. Хорошие шаблоны, основанные на
фундаментальных принципах дизайна, так же состоятельны, как и 5, и 10, и 20 лет назад. Другие же шаблоны, не имеющие под собой такого надежного основания, попросту
вышли из моды. Второе издание — это возможность бросить взгляд в прошлое: у меня
было время понаблюдать, насколько успешно приживаются шаблоны, и сделать определенные выводы. В результате несколько шаблонов я действительно из книги удалила.
Однако большинство остались, потому что они по-прежнему работают. Я добавила
новые примеры, а в некоторых случаях провела свежее исследование эффективности.
Помимо этого, я написала (или позаимствовала) новые шаблоны, отражающие изменения, которые произошли в течение последних пяти лет. В следующем разделе
я опишу их более подробно.
Изменения во втором издании
Вот, что вы получаете с этой книгой:
Глава о социальных сетях
В главе 9, «Использование социальных сетей», излагаются некоторые тактики
и шаблоны интегрирования в сайт или приложение возможностей социальных сетей. Эта глава охватывает далеко не все аспекты социальных интерфейсов, она всего лишь дополняет другие работы, посвященные данной теме, в частности «�������
Designing Social Interfaces» (издательство O’Reilly, http://oreilly.com/catalog/9780596154936/).
Глава о дизайне для мобильных устройств
Глава 10, «Будем мобильными!», включает несколько шаблонов, применимых
только к мобильным устройствам. Они предназначены для платформы, с которой,
вероятно, придется работать большинству дизайнеров: устройства с сенсорными
экранами и полным спектром возможностей подключения, такие как iPhone.
Я касаюсь как приложений, так и веб-сайтов. И снова, эту главу нельзя считать
всеобъемлющей. Однако в ней вы найдете шаблоны и идеи, которые помогут вам
создавать элегантные мобильные интерфейсы, даже если вы не специализируетесь
на интерфейсах для мобильных устройств.
12 Предисловие ко второму изданию
Само существование этой главы поднимает интересный вопрос. «Хороший»
шаблон должен быть одинаково хорош для любых платформ, включая, возможно,
мобильные. Однако дизайн для мобильных устройств накладывает так много новых
ограничений на размер экрана, интерактивные жесты, социальные ожидания и время задержки, что некоторые шаблоны просто не могут качественно справляться
с ними. И наоборот, большинство шаблонов, написанных специально для мобильных приложений, плохо (или недостаточно эффективно) работают на больших
экранах; именно такие шаблоны нашли свой дом в главе 10.
Реорганизованные главы и исправленные вступления
Поскольку существует так много старых и новых шаблонов, описывающих представление списков элементов, я решила реорганизовать три главы с учетом этого.
Глава 5 теперь посвящена исключительно спискам. Туда вошли шаблоны из второй
(Two-Panel Selector (Двухпанельный селектор), One-Window Drilldown (Погружение в одном окне)) и шестой (Row Striping (Чередование строк), Cascading
Lists (Каскадные списки)) глав первого издания. Я также добавила несколько новых шаблонов, таких как List Inlay (Списки с вкладышами) и Alphabetic Scroller
(Алфавитные списки с прокруткой).
Кроме того, вступления к главам, посвященным информационной архитектуре (глава 2), навигации (глава 3) и макету страниц (глава 4) обновлены, для того
чтобы отразить последние тенденции в дизайне и сделать акцент на веб-дизайне
(или аналогичном ему).
Новые шаблоны, описывающие популярные новые взаимодействия
За последние пять лет устоялось несколько новых техник, и те из них, что напоминают шаблоны — абстрактные и универсальные, повсеместно встречающиеся
и удобные для пользователей, — представлены здесь. В качестве примера можно
перечислить Fat Menus (Полные меню), Sitemap Footer (Карта сайта внизу
страницы), Hover Tools (Инструменты, доступные при наведении), Password
Strength Meter (Измерение надежности пароля), Data Spotlight (Подсветка данных) и Radial Table (Круглый стол).
Не совсем новые шаблоны, не вошедшие в первое издание
Эти идеи уже давно витают в воздухе, но в 2005 году я либо не посчитала их
достаточно важными, либо в то время они не так бросались в глаза. Теперь их время пришло. Сюда входят шаблоны Dashboard (Приборная панель), News Stream
(Лента новостей), Carousel (Карусель), Grid of Equals (Сетка равных), Microbreaks
(Микроперерывы), Picture Manager (Диспетчер изображений) и Feature, Search,
and Browse (Новость, поиск и обзор).
Переименованные шаблоны и шаблоны, область применения которых изменилась
Например, шаблон Card Stack (Пачка карточек) переименован в Module Tabs
(Модульные вкладки), а Closable Panels (Закрываемые панели) в Collapsible
Panels (Свертываемые панели); я внесла эти изменения с учетом современной
терминологии, а также содержимого других библиотек шаблонов. Так, Accordion
(Аккордеон) — это ответвление шаблона Collapsible Panels (Свертываемые панели), ставшее самостоятельным шаблоном, так как дизайнеры, технические писатели и авторы коллекций шаблонов привыкли называть данную технику именно
«аккордеоном». В то же время One-Window Drilldown (Погружение в одном окне)
Изменения во втором издании 13
и Two-Panel Selector (Двухпанельный селектор)������������������������������
�����������������������������
— шаблоны из главы, посвященной информационной архитектуре — были слегка урезаны, и теперь они описывают
только оформление списков элементов.
Новые примеры, новые исследования и новые связи с другими библиотеками шаблонов
Почти все шаблоны иллюстрируются схемами или рисунками, а ко многим добавился раздел «В других библиотеках», отсылающий читателя к тому же (или очень
похожему) шаблону в других наборах шаблонов. Удобно, когда есть возможность
почерпнуть вдохновение в другом месте или ознакомиться с дополнительными
примерами. Помимо этого, описания некоторых шаблонов в этой книге слегка
изменены, чтобы принять во внимание новый способ мышления или свежее исследование соответствующего вопроса. Один из таких шаблонов — Row Striping
(Чередование строк); были проведены эксперименты с целью оценить значимость
данной техники, и вы сможете познакомиться с результатами.
Несколько шаблонов удалены
Многие из них перешли в категорию «до банальности очевидных», и, хотя
в качестве инструментов дизайна они все так же полезны, отводить под них целые
разделы в книге уже не имеет смысла. Сюда относятся: Extras on Demand (Дополнения по запросу), Intriguing Branches (Интригующие ответвления), Global
Navigation (Глобальная навигация) и Illustrated Choices (Иллюстрированный
выбор). Определенные шаблоны в современном дизайне не используются, например Color-Coded Sections (Цветокодированные разделы).
Главы «Компоновщики и редакторы» больше нет
Разумеется, дизайнеры все так же работают над приложениями из этих категорий, но, как я ни старалось, мне не удалось придумать ничего нового в дополнение
к уже имеющейся информации. Ни обновленных примеров, ни примечательных
работ. Также опрос показал, что читатели сочли эту главу одной из наименее ценных. Поскольку мне не хотелось делать книгу слишком большой, я решила убрать
эту главу, освободив место для нового материала.
Наконец, я хотела бы вкратце перечислить, чего вы не найдете в этом новом издании. Следующие области так хорошо описаны в других уже опубликованных или
готовящихся выйти в свет коллекциях шаблонов, что мне показалось бессмысленным
еще раз рассматривать их в своей книге:
yy поиск;
yy общий интерфейс социальной сети;
yy интерфейсы, управляемые жестами;
yy глубокий анализ интерфейсов для мобильных устройств;
yy типы анимированных переходов;
yy техники предоставления помощи и справочных материалов.
Я надеюсь, что в следующие несколько лет мы увидим новые наборы шаблонов для
других областей дизайна: сетевых игр, геоинформационных систем, сетевых сообществ
и т. д. Мне представляется, что нас ждут увлекательные исследования и полезные
открытия — это прекрасно! Я приглашаю всех, кто неравнодушен к дизайну, последовать по моим стопам и написать новые шаблоны или бросить вызов нам, создателям
шаблонов, заставив сделать существующие коллекции еще лучше!
Введение
Когда-то, давным-давно, у дизайнеров интерфейсов был удручающе скромный набор
инструментов.
Нам было доступно всего лишь несколько простых элементов управления: текстовые поля, кнопки, меню, крохотные пиктограммы и модальные диалоговые окна. Мы
тщательно подбирали их друг к другу, следуя руководству по стилю Windows Style
Guide или рекомендациям Macintosh Human Interface Guidelines, и надеялись, что
пользователям будет достаточно понятен получившийся интерфейс, но слишком часто
мы ошибались. Мы разрабатывали интерфейсы для небольших экранов с несколькими
цветами, для медленных процессоров и неторопливых сетей (если пользователь вообще был подключен к сети). Мы делали их серыми и нейтральными.
Но все изменилось. Если вы разрабатываете интерфейсы сегодня, то имеете дело
с намного более обширной палитрой компонентов и идей. У вас есть возможность выбирать из чрезвычайно разнообразного ассортимента прикладных пакетов для создания пользовательских интерфейсов, включая наборы инструментов Java, HTML/CSS,
JavaScript, Flash и бесчисленные варианты с открытым кодом. Собственные пакеты
для разработки пользовательских интерфейсов, предлагаемые Apple и Microsoft, стали
намного богаче и привлекательнее. Технологии отображения усовершенствовались.
Веб-приложения часто выглядят настолько же профессионально спроектированными,
как и веб-сайты, в которые они встроены, а некоторые особенности сетевой разработки
успешно возвращаются в настольные программы в форме синих подчеркнутых ссылок,
кнопок Назад и Вперед, дерзких шрифтов и фоновых изображений и приятных взгляду
цветовых схем не в серой гамме.
Однако создавать хорошие интерфейсы все так же непросто. Предположим, что вы
непрофессиональный или обучившийся самостоятельно дизайнер. Если вы будете
тщательно соблюдать правила работы с прикладными пакетами разработки пользовательских интерфейсов и следовать разнообразным рекомендациям по стилю оформления или имитировать существующие приложения, то, вероятно, из-под вашего пера
будут выходить удовлетворительные, хотя и заурядные интерфейсы.
Увы, и этого может быть уже недостаточно. Ожидания пользователей сегодня
выше, чем были когда-то, и если окажется, что с вашим интерфейсом неудобно работать, то пользователи, столкнувшись с ним впервые, сразу же составят о нем плохое
мнение. Даже если интерфейс подчиняется всем существующим стандартам, вы могли
неверно понять предпочтительный способ работы пользователей, выбрать непра-
Небольшие кусочки интерфейса, свободное соединение 15
вильную терминологию или сделать интерфейс слишком запутанным. Нетерпеливые
пользователи не оставят вам возможности предаваться сомнениям; если вы создадите
неудобный веб-сайт или веб-приложение, то они, разочарованные, просто сдадутся
и уйдут к конкуренту, нажав всего лишь одну кнопку. Таким образом, цена построения
посредственных интерфейсов сегодня намного выше, чем когда бы то ни было.
Такие устройства, как телефоны, телевизоры и приборные панели в автомобилях,
когда-то были исключительной сферой деятельности промышленных дизайнеров.
Но сегодня эти устройства стали весьма замысловатыми. Они работают на базе
компьютеров с постоянно увеличивающейся мощностью, а программные функции
и приложения множатся в ответ на требования рынка. Новые возможности пришли
для того, чтобы остаться, независимо от того, насколько просто с ними справляться.
С учетом этой тенденции, хороший дизайн интерфейсов и взаимодействия становится
нашей единственной надеждой на сохранение коллективного душевного равновесия
в последующие 10 лет.
Небольшие кусочки интерфейса,
свободное соединение
Как дизайнер интерфейсов, пытающийся осмыслить все технологические изменения,
произошедшие за последние несколько лет, я вижу два основных эффекта, наблюдаемые в искусстве дизайна интерфейсов. Первый — это быстрое распространение
интерфейсов-идиом, интерфейсов с индивидуальным творческим почерком. Это легко
узнаваемые типы или стили интерфейсов, каждый из которых обладает собственным
запасом объектов, действий и визуальных элементов. Вероятно, вы без труда опознаете
все примеры, приведенные на рис. В.1, и все больше подобных уникальных стилей
изобретается с течением времени.
Второй эффект заключается в ослаблении правил сборки интерфейсов на базе
подобных идиом. Больше никого не удивляет смешение нескольких идиом в одном
интерфейсе или соединение частей одних элементов управления с частями других.
В сетевых справочных приложениях, которые в течение достаточно длительного
времени форматировались при помощи гипертекста, теперь могут появляться интерактивные апплеты, анимация или ссылки на электронные доски объявлений. В самих
интер­фейсах могут использоваться фрагменты текстовой справки, переплетенные
с формами или редакторами; раньше такие возможности встречались редко. Раскрывающиеся меню комбинированных полей могут оформляться с использованием
броских макетов, например цветовых сеток или ползунков, вместо стандартного
столбца текстовых элементов. Вам могут встретиться веб-приложения, оформленные
в виде ориентированных на работу с документами программ рисования, не имеющих,
однако, полос меню, в которых готовый результат сохраняется только в какую-либо
базу данных.
Такой свободный формат веб-страниц, кажется, научил пользователей сдерживать
свои ожидания по отношению к графике и интерактивности. Теперь считается допустимым нарушение старых правил Windows по стилю оформления, если, конечно,
пользователю понятно, чего вы добиваетесь в своем интерфейсе.
16 Введение
Рис. В.1. Набор интерфейсов-идиом
А теперь к сложной части. Одни программы, устройства и веб-приложения использовать просто, другие — нет. Следование руководствам по стилю оформления никогда
и ни в коем случае не гарантировало, что интерфейс будет удобным в использовании,
но сегодня у дизайнеров еще более широкий выбор, чем раньше (что, как ни парадоксально, позволяет сделать дизайн намного сложнее). Какими характеристиками
обладают простые в использовании интерфейсы?
Можно сказать, что «приложения, с которыми легко работать, спроектированы
интуитивным образом». Но это практически тавтология.
За исключением того, что слово «интуитивный» вводит в заблуждение. Джеф
Раскин ( �������������������������������������������������������������������������
Jef����������������������������������������������������������������������
���������������������������������������������������������������������
Raskin���������������������������������������������������������������
) как-то заметил, что, когда мы говорим «интуитивный» в контексте программного обеспечения, мы в действительности имеем в виду «привычный».
Компьютерная мышь не будет интуитивно понятной человеку, который никогда ее не
видел (хотя рычащий медведь гризли не вызовет у него в плане понимания никаких
О шаблонах в целом 17
сомнений). В человеческом мозге на этот случай нет никакого врожденного или инстинктивного механизма, на который можно было бы положиться. Но как только человек потратит 10 секунд на обучение работе с мышью, она станет для него привычной,
и он никогда не забудет этот навык. То же самое относится и к синему подчеркнутому
тексту, кнопкам Воспроизведение/Пауза и т. д.
Скажем по-другому: «приложения, с которыми легко работать, спроектированы
привычным вам образом».
Это уже о чем-то говорит. «Привычный» не обязательно означает, что определенное
приложение во всем идентично некоторому основополагающему продукту (например,
Word, Photoshop, Mac OS или Walkman). Пользователи достаточно сообразительны.
Если части хорошо распознаются, а взаимоотношения между ними ясны, то пользователи могут применить свои предыдущие знания к новому интерфейсу и быстро
разобраться в нем.
Здесь в дело вступают шаблоны. В этой книге перечислено множество знакомых
частей интерфейса и показано, как их можно повторно использовать в разно­образных
контекстах. Шаблоны описывают распространенные структуры — часто узкоспециальные, такие как способы представления списков — не слишком концентрируясь на
деталях, что дает вам достаточно пространства для творчества.
Если вы знаете, чего пользователь ожидает от приложения, и если вы выберете
правильный вариант из своего набора идиом и каркасов (крупный масштаб), элементов управления (мелкий масштаб) и шаблонов (охват диапазона), то сможете собрать
нечто очень знакомое и в то же время не утратите оригинальность.
А это лучшее, что можно себе представить.
О шаблонах в целом
В сущности, шаблоны — это структуральные и поведенческие характеристики, улучшающие пригодность чего-либо: пользовательского интерфейса, веб-сайта, объектноориентированной программы или даже здания. Они делают объекты более простыми
для понимания или более привлекательными, а инструменты более полезными и удоб­
ными в использовании.
Таким образом, шаблоны могут служить описанием рекомендуемых практик в данной области дизайна. Они фиксируют распространенные ответы на сложные вопросы
дизайна (обычно называемые «показаниями» в литературе, посвященной шаблонам)
и, следовательно, по определению не могут быть новыми. Это не готовые к применению компоненты — каждая реализация шаблона хоть немного, но отличается от всех
остальных. Это и не простые эвристические правила. И они не смогут послужить вам
гидом в последовательности решений по созданию дизайна — если вам требуется
полное пошаговое описание того, как разрабатывается интерфейс, то, определенно,
вам нужно обратиться не к каталогу шаблонов!
Как можно описать шаблоны?
Они конкретные, а не расплывчатые
Все дизайнеры опираются на принципы хорошего дизайна, такие как «предотвращать ошибки», «создавать сильную визуальную иерархию» и «не заставлять
пользователя думать». Однако сложно создать реальный работающий дизайн,
18 Введение
не имея в запасе ничего, кроме фундаментальных принципов! Шаблоны достаточно конкретны, чтобы заполнить пространство между высокоуровневыми общими
принципами и низкоуровневой «грамматикой» дизайна пользовательского интерфейса (виджеты, текст, графические элементы, сетка выравнивания и т. д.).
Работают в разных платформах и системах
Конечно, шаблоны более конкретны, чем эвристические принципы, но они, тем
не менее, определяют абстракции — качественные шаблоны не связаны намертво
с какими-то конкретными платформами или идиомами. Некоторые даже успешно применяются в таких разных областях, как традиционная печать и создание
интерактивных систем. В идеальном случае шаблон описывает некую крупицу
истины — общие знания о том, как человеку удобнее всего работать с искусственно
созданным артефактом — и поэтому остается в силе даже после того, как технологии или способы их реализации меняются.
Продукты, а не процессы
В отличие от эвристических правил или сконцентрированных на пользователе
дизайнерских техник, которые лишь направляют вас на путь поиска решения инженерной или дизайнерской проблемы, шаблоны — это и есть возможные решения
проблем.
Предположения, а не требования
Разумеется, вам почти всегда необходимо следовать принципам хорошего дизайна и эвристическим правилам. Дизайнеры должны учитывать руководства по
корпоративному стилю своих компаний, чтобы создавать гармоничные продукты.
Однако шаблоны — это всего лишь подсказки, добрые советы. Можно следовать
им или игнорировать их. Все зависит от контекста вашего дизайна и требований
пользователей.
Взаимоотношения между элементами, не отдельные элементы
Текстовое поле — это не шаблон. Однако пространственные отношения между
текстовым полем и коротким справочным текстом рядом с ним могут быть шаблоном. Так изменения в наборе элементов — например, происходящие по мере
взаимодействия пользователя с программным обеспечением — могут составлять
шаблон, хотя некоторые шаблоны описывают исключительно статические взаимоотношения.
Зависят от конкретного контекста дизайна
Когда шаблон реализуется в определенном дизайне, дизайнер корректирует
общий шаблон, подгоняя его под свою ситуацию. Например, некоторые шаблоны
можно использовать дословно, но если вы понимаете общие принципы, почему
бы не проявить фантазию? Приспособьте шаблон к своим пользователям и их
требованиям.
Некоторые наиболее совершенные наборы шаблонов составляют язык шаблонов.
Такие шаблоны напоминают визуальные языки, тем что они охватывают весь словарь
элементов, применяемых в дизайне (хотя языки шаблонов более абстрактные и поведенческие; визуальные языки говорят о формах, значках, цветах, шрифтах и т. д.).
Набор шаблонов в данной книге, конечно, не настолько полон и содержит методики,
не относящиеся к традиционным шаблонам, но он достаточно краток и выразителен,
чтобы быть легко управляемым и полезным.
О шаблонах в этой книге 19
Прочие коллекции шаблонов
Литература, с которой все началось, была посвящена строительству, а не программному обеспечению. В книге Кристофера Александера (Christopher Alexander) «A Pattern
Language» и сопутствующей ей «The Timeless Way of Building» была предложена общая
концепция шаблонов и описан многоуровневый язык, включающий 250 шаблонов. Ее
часто называют золотым стандартом языка шаблонов за полноту, взаимосвязанность
и за то, что она опирается на человеческие представления о том, как построен мир.
В середине 1990-х публикация книги «Design Patterns»1 (издательство AddisonWesley�����������������������������������������������������������������������
) Эриха Гаммы (��������������������������������������������������������
Erich���������������������������������������������������
��������������������������������������������������
Gamma���������������������������������������������
), Ричарда Хелма (���������������������������
Richard��������������������
�������������������
Helm���������������
), Ральфа Джонсона (Ralph Johnson) и Джона Влиссидеса ( John Vlissides) в корне изменила подход
к архитектуре коммерческого программного обеспечения. Эта книга представляет
собой набор шаблонов, описывающих объектно-ориентированные микроархитектуры.
Если вы знакомы с техникой проектирования программного обеспечения, то об идее
шаблонов узнали, вероятно, из этой книги. После нее многие другие авторы создавали
книги о программных шаблонах. Подобные программные шаблоны делают приложения более привычными — но для тех, кто пишет их, а не использует!
«������������������������������������������������������������������������
Common������������������������������������������������������������������
�����������������������������������������������������������������
Ground�����������������������������������������������������������
» стал первым приличным набором шаблонов. Он является непосредственным предшественником набора шаблонов в моей книге. Затем последовали
многие другие наборы и языки, в частности «Interaction Design Patterns» Мартийна
ван Велие (Martijn van Welie), «The Design of Sites» ван Дайна, Лэндей и Хонга (van
Duyne, Landay, Hong); шаблоны для мобильных устройств «Little Springs», теперь
известные как Design4��������������������������������������������������������������
Mobile��������������������������������������������������������
; библиотека «������������������������������������������
Yahoo�������������������������������������
! �����������������������������������
Design�����������������������������
Pattern���������������������
����������������������������
Library�������������
��������������������
», превратившаяся в «Designing Web Interfaces», все остальные книги о дизайнерских шаблонах,
выпущенные издательством O'Reilly, включая «Designing Social Interfaces», «Designing
Gestural Interfaces» и первое издание этой книги.
О шаблонах в этой книге
Таким образом, ничего кардинально нового здесь нет. Если вы уже разработали несколько дизайнов веб-сайтов или пользовательских интерфейсов или если хотя бы
много об этом думали, то большинство представленных шаблонов должны быть вам
знакомы. Но одни могут оказаться вам в новинку, а другие — лежать за пределами
вашего обычного дизайнерского репертуара.
Эти шаблоны работают как для настольных приложений, так и для интерактивных
веб-сайтов. Многие из них также можно применять на мобильных или телевизионных
устройствах, например цифровых рекордерах.
Хотя в этой книге не будут подробно описываться все интерфейсы-идиомы, упомянутые ранее, они составляют ее часть. Несколько глав сфокусированы на наиболее
распространенных идиомах: формах, информационных графиках, мобильных интерфейсах и взаимодействии с социальными сетями. В остальных главах рассматриваются
темы, полезные при использовании большинства идиом, такие как организация, нави1
Гамма Э., Хелм Р., Джонсон Р., Влиссидес Дж. Приемы объектно-ориентированного проектирования. Паттерны проектирования. СПб.: Питер, 2007.
20 Введение
гация, действия и визуальный стиль. Мы не будем останавливаться на таких идиомах,
как сетевые игры или сообщества, — просто из-за нехватки места.
Эта книга предназначена в первую очередь для тех, кто уже знаком с концепцией
дизайна интерфейсов и терминологией: «диалоговое окно», «выделение», «комбинированное поле», «навигационная панель» и «пустое пространство». Здесь не описываются такие признанные методы, как, например, копирование и вставка, потому
что вы уже должны знать, что они собой представляют. Однако, рискуя повторить
очевидное, я рассказываю о некоторых популярных техниках для того, чтобы поддержать их использование в новых контекстах или чтобы привести их в пример во
время обсуждения альтернативных решений.
В этой книге не представлен полный процесс создания дизайна интерфейса. Крайне
важен целостный подход к разработке дизайна, например ваш процесс должен включать следующие элементы:
‰‰исследование на местах, чтобы понять, что представляет собой целевая пользовательская аудитория и чем она занимается;
‰‰анализ целей и задач, чтобы описать и разъяснить, какие операции пользователи
будут выполнять с тем, что вы создаете;
‰‰модели дизайна, такие как персоны (модели пользователей), сценарии (модели
наиболее часто встречающихся задач и ситуаций) и прототипы (модели самого
интерфейса);
‰‰эмпирическую проверку дизайна в различных точках процесса разработки, например тестирование удобства использования и наблюдение за пользователями,
фактически работающими с дизайном;
‰‰достаточно времени, чтобы последовательно разработать несколько вариантов дизайна, так как с первого раза у вас, возможно, не получится все сделать правильно.
Тема процесса разработки дизайна выходит далеко за пределы этой книги, и вы
найдете множество других книг и учебников, посвященных этому. Прочитайте их.
Однако есть и более серьезная причина, почему в этой книге я не предлагаю вам
рецепта создания интерфейса. Хороший дизайн невозможно уместить в один рецепт.
Это творческий процесс, меняющийся по мере того, как продвигается работа. Например, в любом проекте вы обязательно допустите несколько ошибок дизайна и не
поймете этого, пока не дойдете до конца. У меня так было много раз.
Помимо этого, дизайн не линеен. Большая часть глав в этой книге организована
более-менее последовательно, представляя приблизительный порядок хода разработки
дизайна: сначала принимаются крупные решения относительно содержимого и масштаба, затем следует навигация, дизайн страниц и, наконец, мельчайшие подробности
взаимодействия с формами, панелями инструментов и другими элементами. Однако
в ходе работы вы часто будете перескакивать вперед и назад по этапам процесса.
Возможно, вам уже в самом начале проекта будет известно, как должен выглядеть
определенный экран, и тогда это будет фиксированная точка; начиная с этой точки,
нужно будет пройти процесс назад, чтобы выработать правильную структуру навигации. Конечно же, это не идеальный вариант, но подобные вещи постоянно случаются
в реальной жизни.
Таким образом, можно перечислить несколько вариантов использования этих
шаблонов:
О шаблонах в этой книге 21
Обучение
Если у вас за плечами нет многолетнего опыта разработки дизайнов, то набор шаблонов может послужить инструментом для обучения. Можно прочитать
книгу полностью, чтобы получить общее представление об идеях, и возвращаться
к определенным шаблонам, когда в этом будет возникать необходимость. Так же
как расширение словарного запаса помогает выражать идеи вслух, расширение
вашего дизайнерского «словаря» позволит создавать более экспрессивные дизайны
интерфейсов.
Примеры
Для каждого шаблона в этой книге приводится, по крайней мере, один пример.
Для некоторых даже несколько, и они могут стать для вас хорошим первоисточником. Возможно, в примерах вы найдете что-то такое, чего не будет в тексте шаблонов. Если же вы хорошо знакомы с шаблонами, то именно примеры, возможно,
станут для вас наиболее полезной составляющей книги.
Терминология
Если вы беседуете о дизайне интерфейса с пользователями, программистами,
менеджерами или пишете спецификации, то названия шаблонов можно использовать как средство коммуникации и обсуждения идей. Это еще одно хорошо известное преимущество языков шаблонов. (Термины «одиночка» (singleton) и «фабрика»
(factory) первоначально были названиями шаблонов, но сегодня они повсеместно
используются проектировщиками программного обеспечения.)
Сравнение альтернативных вариантов дизайна
Если в начале работе вы решили применить для организации материала на
­странице шаблон Module Tabs (Модульные вкладки), но обнаружили, что получается не так хорошо, как вы надеялись, то среди шаблонов несложно подобрать
похожий альтернативный вариант, например Titled Sections (Титулованные
раз­делы) или Accordion (Аккордеон). В книге представлены и другие наборы
шаб­лонов «или/или», почти всегда с объяснением причин, почему стоит выбрать
тот или иной шаблон. Опытные дизайнеры знают: если представить клиенту несколько вариантов дизайна на выбор, в итоге это приведет к наиболее удачному
решению.
Вдохновение
В описании каждого шаблона я попыталась объяснить, почему этот шаблон
делает интерфейс более простым или забавным. Если вы поймете это, но захотите
сделать что-то по-своему, не так, как в примерах, то сможете творчески подойти
к процессу. Книга может стать трамплином в вашем творческом процессе: пролистайте ее, и одна или две идеи обязательно западут в душу.
Еще одно предостережение: каталог шаблонов — это не контрольный список. Невозможно измерить качество продукта, сосчитав количество использованных в нем
шаблонов. У каждого дизайнерского проекта уникальный контекст, и даже если необходимо решить распространенную проблему дизайна (например, как уместить на
одной странице слишком много содержимого), то каждый конкретный шаблон может
оказаться плохим решением в определенном контексте. Никакие рекомендации не заменят ни хорошего критического взгляда на дизайн, ни правильного процесса создания
дизайна, который помогает обнаруживать и исправлять ошибки.
22 Введение
В конце концов, вы должны научиться работать без подобных справочников. По
мере того как вы будете превращаться в опытного дизайнера, вы освоите эти идеи до
такой степени, что даже не будете замечать, как ваши руки будут воплощать их; шаблоны станут вашей второй натурой. С настоящего момента они становятся частью
вашего ежедневного набора инструментов.
Аудитория
Если вы разрабатываете пользовательские интерфейсы любого масштаба, то эта книга
может оказаться вам полезной. Она предназначена для людей, работающих над:
‰‰настольными приложениями;
‰‰веб-приложениями или насыщенными интернет-приложениями (rich Internet
application, RIA);
‰‰веб-сайтами;
‰‰программным обеспечением для мобильных устройств или другой бытовой элек-
троники;
‰‰системами «под ключ», такими как интерактивные терминалы;
‰‰операционными системами.
Конечно же, между этими платформами дизайна существуют принципиальные
различия, однако я убеждена, что у них больше общего, чем принято считать. Вы
увидите в шаблонах примеры, взятые из множества разных платформ, и это сделано
намеренно — чтобы добиться одинаковых результатов, приходится часто прибегать
к одним и тем же шаблонам.
Как я узнала из отзывов читателей предыдущего издания, эта книга оказалась более
ценной для начинающих дизайнеров, чем для тех, кто уже много лет создает дизайны
сайтов или интерфейсов — им и так материал хорошо известен. Однако даже если вы
делаете свои первые шаги в мире дизайна, вы уже должны быть знакомы с основами,
такими как доступные наборы инструментов и комплекты элементов управления,
концепции, подобные перетаскиванию и фокусировке, а также важность тестирования удобства использования и сбора мнений пользователей. Если это не так, то взять
успешный старт вам помогут несколько превосходных книг, перечисленных в списке
литературы.
В частности, данная книга нацелена на следующие аудитории:
‰‰разработчики программного обеспечения, которым необходимо создавать пользо-
вательские интерфейсы своих программ;
‰‰дизайнеры веб-страниц, от которых сегодня требуется разработка более интерак-
тивных веб-приложений или веб-сайтов;
‰‰дизайнеры интерфейсов и специалисты по удобству использования, недавно на-
чавшие свою деятельность;
‰‰более опытные дизайнеры, которым хотелось бы узнать, как другие дизайнеры
решают определенные проблемы; для них примеры в книге могут служить источниками идей;
Как организована книга 23
‰‰профессионалы в смежных областях, таких как техническая документация, дизайн
продуктов и информационная архитектура;
‰‰менеджеры, желающие понять, что составляет хороший дизайн интерфейса;
‰‰разработчики приложений с открытым кодом и энтузиасты. В действительности
мы не говорим о «дизайне с открытым кодом»; основной идеей является освещение
лучших практик в дизайне интерфейсов, чтобы ими мог воспользоваться любой
желающий.
Как организована книга
Шаблоны организованы в тематические главы; каждой главе предшествует небольшое
введение, в котором кратко раскрываются концепции, лежащие в основе шаблонов.
Я хочу подчеркнуть слово «кратко». О некоторых концепциях можно было бы написать целые книги. Вводные разделы знакомят вас с контекстом; если вы уже имеете
представление об этом, то они просто освежают ваши знания, а если нет, то из введения
вы узнаете, с какими темами вам следовало бы ознакомиться более глубоко.
Первый набор глав применим практически к любому интерфейсу, с которым вы
можете встретиться по работе, будь это настольное приложение, веб-приложение,
веб-сайт, устройство или что-то другое:
‰‰глава 1, «Чем занимаются пользователи», рассказывает об общих формах поведения и характере использования, поддерживаемых хорошими интерфейсами;
‰‰в главе 2, «Организация содержимого: информационная архитектура и структура
приложения», обсуждается информационная архитектура с точки зрения применения к высокоинтерактивным интерфейсам. Здесь рассматриваются разные
организационные модели, легко узнаваемые типы интерфейсов и «гильдии» шаблонов (группы некрупных шаблонов, которые удобно и эффективно комбинируются
в определенном типе интерфейса);
‰‰глава 3, «Подскажите дорогу: навигация, указатели и ориентирование», посвящена
навигации. Вы узнаете о шаблонах, позволяющих перемещаться по интерфейсу:
между страницами и окнами и по большим виртуальным пространствам;
‰‰в главе 4, «Организация страницы: компоновка элементов страницы», описаны
шаблоны создания макетов и расположения элементов страницы. Здесь рассказывается, как передать смысл, просто правильно разместив компоненты;
‰‰в главе 5, «Списки», собраны наборы шаблонов, предназначенных для отображения
списков элементов, а также предлагаются критерии выбора между ними;
‰‰глава 6, «За дело! Действия и команды», рассказывает, как представлять действия
и команды; используйте эти шаблоны для обработки «глаголов» интерфейса.
Дальше идет набор глав, посвященных определенным идиомам. Вы можете прочитать их все, но в реальных проектах вам вряд ли понадобится каждая идиома. Наиболее
широко применимы главы 7 и 8, так как в большинстве современных интерфейсов
используются деревья, таблицы или формы в том или ином виде:
‰‰в главе 7, «Отображение сложных данных: деревья, таблицы и прочая информационная графика», собраны шаблоны для деревьев, таблиц, диаграмм и информаци-
24 Введение
онных графиков в целом. Она посвящена когнитивным аспектам представления
данных и тому, как применять шаблоны для передачи знаний и смысла;
‰‰глава 8, «Получение данных от пользователя: формы и элементы управления», посвящена формам и элементам управления. Помимо шаблонов, эта глава содержит
таблицу, сопоставляющую типы данных с разнообразными элементами управления,
позволяющими представлять их;
‰‰в главе 9, «Использование социальных сетей», обсуждаются способы интегрирования современных социальных компонентов в дизайн веб-сайта или приложения.
Хотя дизайнеры не всегда сцепляют свои сайты с социальными сетями, это все же
происходит довольно часто, и взаимодействие с социальной сетью может в немалой
степени повлиять на дизайн;
‰‰глава 10, «Будем мобильными!», представляет техники и концепции, которые необходимо знать для преобразования обычного дизайна в дизайн для мобильного
устройства. В других шаблонах также могут приводиться примеры интерфейсов
мобильных устройств, но это основная глава, посвященная им.
Наконец, последняя глава завершает собой процесс создания дизайна, но и она
также может применяться к любому фрагменту дизайна:
‰‰Дополнительную главу, «Улучшаем внешний вид: визуальный стиль и эстетика»,
вы можете скачать с сайта издательства «Питер» www.piter.com. В ней рассматриваются эстетические вопросы. Здесь принципы и шаблоны графического дизайна
применяются для того, чтобы продемонстрировать, как (и почему это нужно) навести глянец на внешний вид и функциональность интерфейса, когда разработка
его поведения завершена.
Я выбирала примеры для этой книги, основываясь на многих факторах. Конечно
же, наиболее важный из них — насколько хорошо пример описывает данный шаблон
и концепцию дизайна, но есть и другие соображения: общая пригодность для дизайна
и печати, разнообразие платформ (настольные приложения, веб-сайты, устройства
и т. д.), известность и доступность этих приложений для читателей. Таким образом,
предпочтение отдается программному обеспечению Microsoft и Apple, известным вебсайтам, таким как расширения Google и Yahoo!, и потребительскому программному
обеспечению и устройствам, которые несложно найти. Но это не означает, что они
всегда являются образцами хорошего дизайна, и я не хочу выказывать неуважение
к превосходной работе, проделанной бесчисленными дизайнерами в менее знакомых
публике приложениях. Если вам известны примеры, отвечающие этому требованию,
пожалуйста, сообщите мне о них.
Благодарности
Прежде всего, признаю, что я в глубочайшем долгу перед моим редактором Мэри
Трезелер (Mary Treseler), благодаря которой этот проект завершился точно в срок. Ты
знала, что второе издание необходимо, и с воистину безграничным терпением заставила меня написать его именно так, как нужно. Моя благодарность всей технологической
группе O'Reilly: Рэйчел Монаган (�����������������������������������������������
Rachel�����������������������������������������
Monaghan��������������������������������
����������������������������������������
), Одри Дойл (������������������
Audrey������������
Doyle������
�����������
), Ро-
От издательства 25
берту Романо (Robert Romano), Рону Билодо (Ron Bilodeau) и всем остальным, кого
я ненамеренно забыла упомянуть.
Технические редакторы этой книги внесли неоценимый вклад, предоставив фантастические комментарии. Барбара Баллард (Barbara Ballard), Эрин Малоун (Erin
Malone), Дэн Саффер (Dan Saffer) — спасибо вам!
Идея выпустить второе издание давно витала в воздухе. Непосредственные беседы
и косвенные замечания других дизайнеров пользовательского интерфейса и создателей шаблонов помогли мне претворить ее в жизнь. Билл Скотт (Bill Scott), Люк
Вроблевски (Luke Wroblewski), Мартийн ван Вели (Martijn van Welie), Эрин Малоун
(Erin Malone), Кристиан Крамлиш (Christian Crumlish), Дэн Саффер (Dan Saffer),
Джеймс Реффел ( �����������������������������������������������������������������
James������������������������������������������������������������
Reffell����������������������������������������������������
�����������������������������������������������������������
), Скотт Дженсон (����������������������������������
Scott�����������������������������
Jenson����������������������
����������������������������
) и мои коллеги из отдела UX в Google: большая часть моих знаний получена от вас. Я также благодарна
людям, говорившим со мной и оставлявшим отзывы на различных презентациях,
конференциях и мини-конференциях, в которых я приняла участие в последние годы.
Конечно, спасибо всем, кто купил или прочитал первое издание! Без вас второе
издание никогда не появилось бы на свет.
Наконец, я безмерно благодарна Ричу, который всем сердцем поддерживал меня
от начала до конца проекта, и Мэтью, который еще слишком мал, чтобы понять, насколько полезными были для меня его полные любви объятья. Я люблю вас обоих!
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу электронной почты
comp@piter.com (издательство «Питер», компьютерная редакция).
Дополнительную главу «Улучшаем внешний вид: визуальный стиль и эстетика»
вы можете скачать с сайта издательства «Питер» www.piter.com.
будем рады узнать ваше мнение!
На веб-сайте издательства http://www.piter.com вы найдете подробную информацию
о наших книгах.
Чем занимаются
пользователи
1
Эта книга практически полностью посвящена внешнему виду и поведению настольных
приложений, веб-приложений и интерактивных устройств. Но первая глава будет
исключением из правила: здесь вы не встретите ни снимков экрана, ни макетов, ни
примеров навигации, ни графиков — вообще никаких иллюстраций.
Почему? В конце концов, ради чего вы выбрали эту книгу?
Все просто: хороший интерфейс начинается не с картинок. Он начинается с понимания людей: что они собой представляют, почему они используют именно эту
программу и как они могут взаимодействовать с ней. Чем больше вы знаете о людях
и чем больше вы проникаетесь их чувствами, тем более эффективные дизайны для
людей вы создаете. В конечном счете, программное обеспечение представляет собой
всего лишь средство достижения целей, поставленных людьми, которые используют
его. Чем лучше вы продумаете это средство, тем более благоприятными будут впечатления пользователей.
Каждый раз, когда человек обращается к приложению или использует любой цифровой продукт, он общается с машиной. Разговор может быть буквенным, например
при помощи командной строки или меню телефона, или немым, как, например, между
художником и холстом, когда создатель и создаваемая вещь идут на какие-то взаимные уступки. В случае ориентированного на пользователя программного обеспечения
разговор может также осуществляться через посредника. Но, независимо от ситуации,
связующим звеном в этом разговоре служит пользовательский интерфейс, и именно
он помогает пользователю достичь поставленных целей.
Таким образом, будучи дизайнером пользовательских интерфейсов, вы должны
детально представить себе разговор между пользователем и приложением или, по
крайней мере, определить основные термины. А для того чтобы написать сценарий разговора, необходимо понимать его человеческую сторону настолько хорошо, насколько
это вообще возможно. Каковы мотивы и намерения пользователя? Какой «словарь»
слов, значков и жестов ожидает встретить пользователь? Что может сделать приложение, чтобы удовлетворить ожидания пользователя? Каким образом пользователь
и машина будут общаться, чтобы их разговор имел смысл для обоих?
В дизайне интерфейсов есть известное изречение: «Узнай пользователей, ведь
они — не ты!»
Итак, в этой главе мы поговорим о людях. Сначала во вводном разделе кратко раскрываются несколько фундаментальных идей, а затем начинается обсуждение самих
Средство, ведущее к цели 27
шаблонов. Эти шаблоны отличаются от шаблонов, с которыми вы встретитесь в последующих главах, так как они описывают человеческое поведение (а не поведение
системы), которое должен поддерживать разрабатываемый вами дизайн программного
обеспечения. Программы, поддерживающие поведение, свойственное человеку, помогают пользователям достичь их целей.
Средство, ведущее к цели
У каждого, кто использует инструмент, программное обеспечение и т. д., есть основание для того, чтобы пользоваться ими. Например:
‰‰поиск некоторого факта или объекта;
‰‰изучение чего-либо;
‰‰выполнение транзакции;
‰‰управление или мониторинг чего-либо;
‰‰создание чего-либо;
‰‰общение с другим человеком;
‰‰развлечение.
Для поддержки подобных абстрактных целей могут использоваться хорошо известные идиомы, типы поведения пользователей и дизайнерские шаблоны. Дизайнеры
взаимодействия узнали, например, как помочь людям найти определенные факты
в огромных объемах интерактивной информации. Также они научились представлять
задачи так, чтобы их легко можно было выполнять последовательно. Существуют
способы обучения построению эффективных документов, иллюстраций и кода.
Первый шаг в дизайне интерфейса заключается в том, чтобы понять, чего же в действительности хотят добиться пользователи этого интерфейса. Например, заполнение
формы практически никогда не бывает целью само по себе — люди делают это только
потому, что им нужно приобрести что-то в интернет-магазине, обновить водительские
права или установить программное обеспечение. Они выполняют определенный тип
транзакции.
Задавая правильные вопросы, вы поможете себе соединить цели пользователей
с процессом создания дизайна. Пользователи и клиенты обычно разговаривают с вами
в терминах желаемых возможностей и решений, а не требований и задач. Когда пользователь или клиент говорит вам, что ему нужна определенная возможность, спросите
его, почему она ему нужна, — определите его непосредственную цель. Получив ответ
на этот вопрос, снова спросите, почему. И так далее. Продолжайте задавать вопрос до
тех пор, пока не выйдете за границы насущной проблемы дизайна1.
1
Это тот же принцип, который лежит в основе хорошо известной техники под названием «анализ коренной причины» (root cause analysis). Однако анализ коренной причины — это средство
устранения организационных проблем; здесь же можно применять его метод «пять почему»
(ну, чуть больше или меньше) для того, чтобы понять повседневное поведение пользователя
и его требования к возможностям дизайна.
28 Глава 1 • Чем занимаются пользователи
Почему же необходимо задавать эти вопросы, если перед вами поставлены четкие требования? Потому что если вам нравится процесс разработки дизайнов, то вы очень легко можете столкнуться с интересной проблемой дизайна интерфейсов. Возможно, вам
хорошо удается построение форм, запрашивающих правильную информацию, обладающих правильными элементами управления или правильно расположенных на экране.
Но настоящее искусство дизайна интерфейсов лежит в решении правильной проблемы.
Таким образом, не следует слишком увлекаться дизайном этой формы. Если существует какая-либо возможность завершить транзакцию, не заставляя пользователя
заполнять форму, то следует вообще избавиться от формы. Это приближает пользователя к его цели и позволяет ему (а может быть, и вам) потратить на ее достижение
меньше времени и усилий.
Давайте применим подход с вопросами «почему?» для того, чтобы копнуть некоторые типичные сценарии дизайна чуть глубже.
‰‰Почему менеджер среднего звена использует клиентскую программу для работы
с электронной почтой? Конечно же, для того чтобы «читать электронную почту».
А почему он или она вообще читает и отправляет электронную почту? Для того
чтобы общаться с другими людьми. Само собой, той же цели можно достичь и другими способами: при помощи телефона, поговорив с человеком в вестибюле здания,
отправив ему официальный документ. Но, очевидно, электронная почта удовлетворяет некоторым требованиям, с которыми не справляются прочие способы. Так
каковы же они и почему они так важны для пользователя? Конфиденциальность?
Возможность сохранения копий всех сообщений? Негласное правило, принятое
в обществе? Что еще?
‰‰Отец отправляется на интерактивный веб-сайт туристического агентства, вводит
название города, где его семья планирует провести летний отпуск, и пытается найти
сведения о ценах на авиабилеты на различные даты. Он использует полученную
информацию, но его целью не является простой поиск и изучение различных вариантов. Спросите, почему. Его целью в действительности является транзакция —
покупка билетов на самолет. Конечно, он мог бы сделать это на разных других
веб-сайтах или по телефону, позвонив в офис туристического агентства. Но почему
именно этот веб-сайт лучше всех остальных вариантов? Он быстрее? Удобнее? Дает
бо`льшую вероятность найти наиболее выгодный вариант?
‰‰Пользователю мобильного телефона необходим способ более быстрого поиска
в адресной книге. Вы, как дизайнер, можете придумать несколько идей, которые
позволили бы сэкономить во время поиска несколько нажатий клавиш. Но почему,
прежде всего, пользователю необходима эта возможность? Оказывается, он делает
много звонков, находясь за рулем, и не хотел бы отрывать взгляд от дороги дольше,
чем необходимо, — он хочет звонить людям, оставаясь в то же время в безопасности (в той степени, в которой это вообще возможно). В идеальном случае он хотел
бы иметь возможность вообще не смотреть на телефон! Лучшим решением в этой
ситуации будет голосовой набор: все, что необходимо пользователю, — это произнести имя, а дальше телефон сам сделает звонок.
‰‰Иногда анализ целей происходит совершенно не очевидным способом. Посвященный сноубордингу веб-сайт может предоставлять информацию (обучение),
включать интернет-магазин (транзакции) и набор видеороликов (развлечение).
Основы исследования пользовательской аудитории 29
Предположим, кто-то посетил веб-сайт, чтобы сделать покупку, но по пути отклонился от своей основной цели и увлекся чтением раздела про различные трюки на
сноуборде — получается, что его старая цель (совершение транзакции) изменилась
на новую (просмотр и обучение). Возможно, он вернется к совершению покупки,
а может быть, и нет. А раздел с развлечениями на этом веб-сайте одинаково интересен 12-летнему и 35-летнему посетителям? Если 35-летний посетитель чувствует
себя на этом веб-сайте неуютно, то покинет его, чтобы купить свой новый сноуборд
в другом интернет-магазине, или ему все равно?
Моделировать пользователей как единую безликую сущность, рассматривая набор
простых вариантов использования и считая, что у пользователя может быть только
одна задача или одна цель, казалось бы, просто, но это ошибочный путь. Такой подход
не обязательно дает реальное представление о пользователях.
Для того чтобы создать хороший дизайн, необходимо учесть множество более «неустойчивых» факторов: инстинктивные реакции, предпочтения, социальный контекст,
убеждения и ценности. Все эти факторы могут оказать влияние на дизайн приложения
или веб-сайта. Среди таких «неустойчивых» факторов можно обнаружить критически
важную функцию или особенность дизайна, которая сделает ваше приложение более
привлекательным и успешным.
Так что будьте любознательными. Специализируйтесь на любопытстве. Узнайте,
кем ваши пользователи в действительности являются, как они думают и чувствуют.
Основы исследования пользовательской аудитории
Опытное обнаружение — это единственный по-настоящему хороший способ получения нужной информации. Чтобы приступить к созданию дизайна, необходимо
охарактеризовать типы людей, которые будут пользоваться тем, для чего вы создадите
дизайн (не забудьте учесть перечисленные выше «неустойчивые» категории), и лучший способ сделать это — пойти и встретиться с этими людьми.
Конечно же, каждая группа пользователей уникальна. Целевая аудитория, скажем,
нового мобильного телефона будет кардинально отличаться от целевой аудитории научного программного обеспечения. Даже если один и тот же человек использует обе
вещи, его ожидания по отношению к ним отличаются: исследователь, работающий
с научным приложением, смирится с менее изысканным дизайном в пользу хорошей
функциональности, но тот же человек может отнести свой новый телефон обратно
в магазин через несколько дней, если обнаружит, что пользовательский интерфейс
устройства слишком сложен для него.
Уникален и каждый пользователь. То, с чем не справится один человек, не представит сложности для другого. Фокус заключается в том, чтобы понять своих пользователей в целом, то есть настолько хорошо изучить отдельных пользователей, чтобы
суметь отделить особенности или капризы от общих поведенческих шаблонов.
В частности, необходимо узнать:
‰‰какую цель пользователи ставят при работе с программным обеспечением или
веб-сайтом;
‰‰определенные задачи, которые они выполняют, чтобы достичь этих целей;
30 Глава 1 • Чем занимаются пользователи
‰‰язык и слова, при помощи которых они описывают свои действия;
‰‰их навыки в использовании программного обеспечения, аналогичного тому, над
которым вы работаете;
‰‰их отношение к различным вещам с вашим дизайном, влияние разных дизайнов
на это отношение.
Я не могу сказать вам, какова будет ваша конкретная целевая аудитория. Вы
должны выяснить, что пользователи будут делать с программным обеспечением или
веб-сайтом, для которого вы создаете дизайн, и насколько оно вписывается в более
широкий контекст их жизни. Хотя это может оказаться довольно сложно, попытайтесь
описать свою потенциальную аудиторию в терминах того, как и почему они используют ваше программное обеспечение. Вы можете получить несколько разных ответов,
представляющих разные пользовательские группы, — это нормально. Возможно, у вас
появится желание поднять руки и сказать: «Я не знаю, кто мои пользователи» или
«Да кто угодно может быть потенциальным пользователем», но это не поможет вам
определиться с дизайном. Не имея конкретного и честного описания этих людей, вы
создадите дизайн, не имеющий под собой никакой реальной основы.
К сожалению, фаза анализа пользовательской аудитории требует довольно много
времени в начальной стадии цикла разработки дизайна. Это дорогостоящая процедура,
но она стоит того, так как дает вам больше шансов решить правильную проблему, то
есть вы с самого начала будете создавать правильную вещь.
К счастью, вам на помощь приходит огромное количество книг, курсов и методологий. Хотя в этой книге мы не специализируемся на исследовании пользовательской
аудитории, я перечислю несколько методов и тем, которые стоит принять во внимание.
Непосредственное наблюдение
Интервью и посещение пользователей прямо на месте работы дают возможность
сразу же погрузиться в их мир. Можно задавать пользователям вопросы о том,
каковы их цели и какие задачи они обычно выполняют. Чаще всего интервью проводятся «на местах», там, где пользователи фактически используют программное
обеспечение, например на работе или дома. Интервью могут быть структурированы — состоять из предопределенного набора вопросов — или не структурированы,
когда вы просто зондируете почву, спрашивая то, что первое приходит в голову.
Интервью дают очень большую степень свободы: можно спросить много или мало,
сделать его длинным или коротким, официальным или неформальным, провести
его лично или по телефону. Это отличная возможность узнать то, чего вы не знаете.
Спрашивайте, почему. И спрашивайте снова и снова.
Исследования конкретных случаев
Исследования конкретных случаев дают глубокое и подробное представление
о нескольких репрезентативных пользователях или группах пользователей. Иногда такие исследования можно применять для изучения «экстремальных» пользователей, раздвигающих границы функциональности программного обеспечения,
особенно когда целью является обновление дизайна существующего приложения.
Также их можно проводить в виде долгосрочных экспериментов по наблюдению,
изучая контекст использования с течением месяцев или даже лет. Наконец, если
вы разрабатываете дизайн специфического программного обеспечения для одного
Основы исследования пользовательской аудитории 31
пользователя или веб-сайта, то вам необходимо узнать о реальном контексте как
можно больше.
Опросы
Письменные опросы позволяют получить данные сразу от множества пользователей. Иногда можно даже добиться статистически значимого числа респондентов. Так как прямого контакта с человеком нет, определенно, теряется множество
дополнительной информации — если вы о чем-то не спросите, то вы об этом и не
узнаете, но тем не менее опросы дают очень четкую картину определенных аспектов
целевой аудитории. Чрезвычайно важно тщательно продумать схему опроса. Если
вам нужны надежные числа, а не качественное «ощущение» целевой аудитории, то
абсолютно необходимо правильно написать вопросы, правильно выбрать адресатов
опроса и правильно проанализировать ответы — а это настоящая наука.
Искусственные образы
Этот метод не относится к методам сбора данных, но он помогает понять, что
­делать с данными после того, как вы их получили. Это дизайнерская техника,
которая «моделирует» целевую аудиторию. Для каждой крупной группы пользова­
телей вы создаете вымышленного представителя, объединяющего наиболее важные
аспекты пользователей в данной группе: какие задачи они пытаются выполнить,
их конечные цели, уровень опыта в рассматриваемой сфере и навыки общения
с компьютерами в целом. Такие образы помогают не потерять фокус. По ходу
­создания дизайна вы можете задавать себе вопросы вроде «Действительно ли
этот вымышленный представитель сделал бы X? А что он мог бы сделать вместо
этого?»
Вероятно, вы заметили, что некоторые из этих методов, например интервью и опросы, подозрительно напоминают маркетинговую деятельность. И именно ею они
и являются! Также могут оказаться полезными группы для тематического опроса —
фокус-группы (хотя и не настолько, как другие методы), а концепция сегментации
рынка отражает определение целевых аудиторий, которое мы здесь используем. В обоих случаях основной целью является максимально глубокое понимание аудитории.
Различие заключается в том, что, как дизайнер, вы стараетесь понять людей, использующих программное обеспечение. Специалист по маркетингу пытается понять
людей, приобретающих его.
Это непросто — разобраться в реальных проблемах, сопутствующих взаимодействию пользователей с системой. Пользователям не всегда хватает языковых или
интроспективных навыков, чтобы объяснить, что им в действительности нужно для
достижения поставленных целей, поэтому вам приходится проделывать огромную
работу, выискивая полезные дизайнерские концепции в той информации, которую
пользователи способны вам передать, — собственные наблюдения обычно бывают
искаженными.
Одни из перечисленных методов весьма формальны, другие нет. Формальные и количественные методы полезны, в первую очередь, из-за своей научной основы. При
правильном применении они позволяют увидеть мир таким, каков он в действительности, а не как вы его себе представляете. Если исследовать пользовательскую аудиторию наобум, не принимая во внимание отклонения, например ваши неосознанные
предубеждения при выборе пользователей для интервью, то в итоге у вас на руках
32 Глава 1 • Чем занимаются пользователи
окажутся данные, не отражающие реальную целевую аудиторию, которые в конечном
итоге могут только навредить дизайну.
Однако если у вас нет времени на применение формальных методов, лучше просто
неформально встретиться с несколькими пользователями, чем вообще не применять
никакие способы изучения аудитории. Поговорите с пользователями — это полезно
для души. Если вы сумеете проникнуться чувствами пользователей и представить,
как эти люди в реальности работают с вашим дизайном, то сможете создать для них
оптимальное решение.
Мотивация пользователей к обучению
Перед тем как вы начнете процесс создания дизайна, оцените общий подход. Подумайте о том, каким будет стиль взаимодействия в целом — если угодно, какой будет
личность дизайна.
Разговаривая с кем-то на определенную тему, вы корректируете свои высказывания
в зависимости от вашего понимания собеседника. Вы можете учитывать, насколько
ему важна данная тема, каков объем его знаний на эту тему, насколько он восприимчив к предоставляемой вами информации и вообще интересен ли ему этот разговор.
Неверная оценка любого из перечисленных аспектов приведет к нежелательным результатам: собеседнику будет казаться, будто его опекают, ему будет неинтересно, он
потеряет терпение или совершенно отгородится от вас.
Эта аналогия приводит нас к некоторым очевидным советам относительно дизайна.
Например, специфический словарь, используемый в интерфейсе, должен соответствовать уровню знаний пользователей; если некоторым пользователям этот словарь
незнаком, предоставьте им способ изучения неизвестных терминов. Если пользователи
не очень хорошо знают компьютерную область в целом, не заставляйте их использовать мудреные элементы управления или нехарактерные условные обозначения.
Учитывайте, что уровень интереса пользователей может быть низким, и не требуйте
от них прилагать слишком много усилий за незначительное вознаграждение.
Некоторые из этих вопросов так или иначе проникают во все области дизайна интерфейсов. Например, ожидают ли ваши пользователи краткого, узконаправленного
обмена данными о чем-то очень конкретном или им необходим разговор с более свободным выбором тем? Другими словами, насколько открытым будет ваш интерфейс?
Если он чрезмерно закрытый, то пользователи чувствуют себя как в ловушке; если
слишком открытый, то пользователи застывают на месте парализованные, не готовые
к такому уровню взаимодействия и мучающиеся в сомнениях, что делать дальше.
Следовательно, необходимо выбрать, какую степень свободы вы предоставите
пользователям. На одном конце шкалы находится мастер установки программного
обеспечения: пользователь проходит его этапы, не имея возможности использовать
другие элементы управления, за исключением кнопок Далее, Назад и Отмена. Он остро
сфокусирован и специфичен, но довольно эффективен и успешен при условии, что он
работает, и работает быстро. На другом конце может находиться приложение, подобное Excel, с «бескрайним» интерфейсом, в котором в одном месте собрано огромное
количество разнообразных возможностей. В любой момент времени у пользователя
есть около 872 вариантов действий, но это хорошо, так как самостоятельные, опытные
Мотивация пользователей к обучению 33
пользователи могут добиться очень многого всего лишь в одном интерфейсе. Этот
интерфейс также является успешным, но совершенно по другим причинам.
Вот еще более фундаментальный вопрос: как много усилий пользователи готовы
приложить, чтобы изучить ваш интерфейс?
Здесь очень легко переоценить намерения пользователей. Возможно, они работают
с интерфейсом ежедневно в обязательном порядке, предписываемом их служебными
обязанностями, — очевидно, что тогда у них будет мотивация изучить его очень хорошо, но это редкий случай. Вероятно, они используют интерфейс изредка и изучают
его лишь до такой степени, чтобы уметь выполнять самые насущные задачи (принцип
разумной достаточности). Возможно, они увидят интерфейс всего однажды на 30 секунд. Будем честными: можно ли ожидать, что все пользователи достигнут хорошего
или даже профессионального уровня, или большинство из них навсегда останутся
новичками?
Приведем несколько примеров программного обеспечения, предназначенного для
опытных и профессиональных пользователей:
‰‰Photoshop.
‰‰Dreamweaver.
‰‰Excel.
‰‰Среды для написания программного кода.
‰‰Средства системного администрирования веб-серверов.
А вот несколько примеров из приложений, предназначенных для случайных пользователей:
‰‰Информационные системы в туристических центрах или музеях.
‰‰Элементы управления Windows или Mac OS для настройки фона рабочего стола.
‰‰Страницы интернет-магазинов, где производится оформление покупки.
‰‰Мастера установки.
‰‰Банкоматы.
Между этими двумя группами существуют кардинальные различия. Предположения о знании пользователями инструментов пронизывают эти интерфейсы, проявляясь в использовании экранного пространства, определении меток, усложнении
элементов управления и местах, где предлагается (или не предлагается) помощь.
В приложениях из первой группы реализовано множество сложных функций,
и они не предполагают пошаговой помощи пользователям при выполнении операций.
Считается, что пользователи уже знают, что делать, поэтому приложения оптимизированы для эффективной работы, а не удобного обучения; чаще всего они строятся
вокруг работы с документами или списками (за исключением нескольких приложений
командной строки). Обычно о них пишутся целые книги и курсы, а кривые обучения
для них довольно крутые.
Приложения второй группы — совершенная противоположность: ограниченные
в функциональности, но дающие подробные советы по ходу работы. Они обладают
упрощенными интерфейсами и не предполагают наличия знаний об ориентированных
на документы или списки стилях работы с приложениями (например, строках меню,
множественном выборе и т. д.). Часто используются мастера, снимающие с пользова-
34 Глава 1 • Чем занимаются пользователи
теля ответственность за фокусировку внимания. Смысл в том, что такие приложения
не мотивируют пользователей к изучению интерфейсов ценой больших усилий — это
просто не требуется!
Итак, когда мы познакомились с крайними случаями, давайте рассмотрим приложения, находящиеся в середине шкалы:
‰‰Microsoft PowerPoint.
‰‰Клиенты электронной почты.
‰‰Социальная сеть Facebook.
‰‰Программы ведения блогов.
В этот средний интервал попадает большинство приложений. Они должны одинаково хорошо обслуживать людей, находящихся на противоположных концах шкалы:
помогать новым пользователям изучать инструмент (и удовлетворять их необходимость в немедленном вознаграждении), в то же время позволяя опытным пользователям, часто использующим этот инструмент, без проблем выполнять их работу.
Дизайнеры приложений, вероятно, понимали, что люди не пойдут на трехдневный
курс, чтобы научиться работать с почтовой программой. Тем не менее сложившиеся
типы интерфейсов невероятно живучи. Люди быстро изучают основы, достигая того
уровня, который их устраивает, и не задумываются о том, чтобы выучить что-то еще,
пока не возникнут определенные обстоятельства, мотивирующие их к этому.
В какой-то момент вам придется сделать выбор между двумя концами спектра.
Хотелось бы, чтобы люди могли использовать ваше приложение, не тратя время на
знакомство с ним, но не менее важно оказывать максимальную поддержку опытным
пользователям и пользователям, работающим с приложением очень часто или даже
постоянно. Постарайтесь найти золотую середину именно для своей ситуации. Организационные шаблоны из главы 2, такие как Multi-Level Help (Многоуровневая
помощь), помогут вам обслужить обе аудитории.
Шаблоны
Люди уникальны, но поведение их довольно предсказуемо. Дизайнеры исследуют посещения веб-сайтов и поведение пользователей уже долгие годы; ученые, исследующие
процесс мышления, и прочие специалисты потратили многие сотни часов, изучая, как
люди выполняют различные действия и как они осознают процесс своей деятельности.
Таким образом, люди, которые работают с вашим программным обеспечением
или выполняют действие, поддержку которого вы хотели бы внедрить в новое программное обеспечение, будут совершать некоторые ожидаемые действия. При этом
часто выявляются поведенческие шаблоны, перечисленные далее. Велика вероятность
того, что и вы тоже их заметите, особенно если будете целенаправленно наблюдать за
моделями поведения.
Замечание для горячих поклонников шаблонов: поведенческие шаблоны не похожи
на шаблоны, о которых будет говориться далее в этой книге. Они описывают человеческое поведение, а не элементы интерфейса и не столь строги, как те, что вы найдете
в последующих главах. Я перечислю шаблоны поведения, никак их не структурируя,
и приведу лишь краткие характеристики.
Шаблоны 35
И снова, интерфейс, поддерживающий эти шаблоны, поможет пользователям
достичь поставленных целей намного более эффективно, чем интерфейс, не учитывающих их. Шаблоны эти относятся не только к интерфейсу; иногда весь пакет — интерфейс, лежащую в его основе структуру, выбор возможностей и документацию —
следует рассматривать в свете поведенческих шаблонов. Однако, будучи дизайнером
интерфейсов или дизайнером взаимодействия, вы должны считаться с шаблонами
точно так же, как все остальные участники команды. Возможно, вы окажетесь в наилучшей позиции, чтобы выступить в защиту пользователей.
1. Safe Exploration (Безопасное исследование).
2. Instant Gratification (Мгновенное вознаграждение).
3. Satisficing (Разумная достаточность).
4. Changes in Midstream (Изменения на полпути).
5. Deferred Choices (Отложенный выбор).
6. Incremental Construction (Пошаговое построение).
7. Habituation (Привыкание).
8. Microbreaks (Микроперерывы).
9. Spatial Memory (Пространственная память).
10. Prospective Memory (Проспективная память).
11. Streamlined Repetition (Организованное повторение).
12. Keyboard Only (Только клавиатура).
13. Other People’s Advice (Советы других людей).
14. Personal Recommendations (Личные рекомендации).
Safe Exploration (Безопасное исследование)
«Позвольте мне исследовать, не теряясь и не попадая в неприятности».
Когда пользователь понимает, что у него есть возможность исследовать интерфейс
без ужасающих последствий, то, скорее всего, он в итоге узнает больше и получит
более позитивные впечатления о приложении, чем тот, кто на это не решился. Хорошее программное обеспечение позволяет людям пробовать неизвестные функции
и возвращать систему в исходное состояние, снова пробовать что-то новое и т. д., без
всякого стресса.
«Ужасающие последствия» даже не обязаны быть такими уж страшными. Простой
досады бывает достаточно, чтобы отпугнуть пользователя от добровольного исследования. Закрывание всплывающих окон, повторный ввод ошибочно стертых данных,
поспешное отключение звука на ноутбуке, когда веб-сайт неожиданно начинает воспроизведение громкой музыки — все это может отпугнуть. Создавая практически любой тип интерфейса, подготовьте для пользователя безопасные способы его изучения,
чтобы пользователи могли поэкспериментировать, не опасаясь никаких последствий.
Вот несколько примеров:
‰‰фотограф пробует несколько фильтров в программе для обработки цифровых
изображений. После этого он решает, что ему не нравится результат, и нажимает
кнопку Отмена несколько раз, чтобы вернуться к началу. Затем он пробует другой
36 Глава 1 • Чем занимаются пользователи
фильтр, а потом еще один, каждый раз имея возможность отменить результат применения фильтра (о том, как это работает, рассказывается в шаблоне под названием
Multi-Level Undo (Многоуровневая отмена), описанном в главе 6);
‰‰новый посетитель корпоративной домашней страницы щелкает на разнообразных
ссылках, чтобы посмотреть, что еще он может здесь найти, будучи уверенным, что
кнопка Назад всегда вернет его обратно на главную страницу. Никакие дополнительные окна или всплывающие объявления не открываются, и кнопка Назад работает предсказуемо. Можно представить себе, какая неразбериха получится, если
веб-приложение будет делать что-либо другое в ответ на нажатие кнопки Назад или
если в приложении будет кнопка, выглядящая, как кнопка Назад, но функционирующая совсем по-другому. Пользователь будет дезориентирован и может вообще
отказаться от использования этого приложения.
Instant Gratification (Мгновенное вознаграждение)
«Я хочу сделать это прямо сейчас, а не потом».
Людям нравится видеть мгновенные результаты своих действий — это заложено
в человеческой природе. Если кто-то начинает использовать приложение и получает
«успешный опыт» в первые несколько секунд, это доставляет удовольствие! С большой вероятностью пользователь продолжит работу с этим приложением, даже если
позже ему станет сложнее добиваться поставленных целей. Он будет чувствовать себя
спокойнее в этом приложении и будет более уверен в своих силах, чем если бы ему
пришлось потратить много времени, чтобы разобраться что к чему.
Мгновенное вознаграждение необходимо в различных областях дизайна. Например, можно предположить, что в первую очередь будет делать новый пользователь
приложения, и разработать пользовательский интерфейс так, чтобы это первое действие оказалось потрясающе простым. Если целью пользователя является, например,
рисование объекта, то можно сразу же открыть новый холст, вывести на него яркую,
привлекающую внимание подсказку, а рядом поместить палитру. Если пользователю
необходимо выполнить какую-либо задачу, то подскажите ему типичную отправную
точку.
Это также означает, что не следует прятать начальную функциональность за тем,
что должно быть прочитано, или тем, чего нужно долго ждать, например регистрационным экраном, длинными инструкциями, медленно загружающимися страницами или
объявлениями. Они отбивают охоту использовать приложение, так как не позволяют
быстро завершить первую задачу.
Satisficing (Разумная достаточность)
«Меня это устраивает. Я не хочу тратить время на то, чтобы выучить что-то еще».
Когда люди встречаются с новым интерфейсом, они не тратят время на то, чтобы
методично просмотреть все элементы интерфейса, а затем решить: «Да, пожалуй,
эта кнопка с наибольшей вероятностью даст мне то, что нужно». Нет, пользователь
обычно быстро просматривает интерфейс, выбирает тот элемент, который на первый
взгляд должен решить его задачу, и пытается его применить, даже если не уверен, что
прав.
Шаблоны 37
Термин satisficing — разумная достаточность — образован из двух слов: «satisfying»
(удовлетворительный) и «sufficing» (достаточный). Он был придуман в 1957 году
социологом Гербертом Саймоном (Herbert Simon), который использовал его для описания поведения людей во всевозможных экономических и социальных ситуациях.
Люди предпочитают довольствоваться достаточно хорошим, а не наилучшим, если
изучение всех альтернативных вариантов может требовать траты лишнего времени
или усилий.
Разумная достаточность в действительности представляет собой очень рациональное поведение, если оценить всю ту умственную работу, которая необходима для
анализа сложного интерфейса. Как заметил Стив Круг (Steve Krug) в своей книге
«Don’t Make Me Think»1 (издательство New Riders), люди не любят думать больше,
чем необходимо, — это лишняя работа! Но если в интерфейсе предусмотрена пара
вариантов, которые пользователь замечает сразу же, то он попробует оба. Высока вероятность, что выбор окажется правильным, но даже если это не так, то вернуться назад
и попробовать что-то еще несложно (предполагается, что интерфейс поддерживает
безопасное исследование).
Дизайнеры могут сделать из вышесказанного несколько выводов:
‰‰используйте в интерфейсе «призывы к действию». Давайте пользователям четкие
указания: введите текст здесь; перетащите изображение сюда; коснитесь этой кнопки, чтобы начать работу и т. д.;
‰‰делайте метки короткими и используйте простые слова, позволяющие их быстро
прочитать (это относится к элементам меню, кнопкам, ссылкам или любым другим
компонентам, идентифицируемым текстом). Пользователь пробегает их глазами
и делает догадки относительно содержания, поэтому пишите метки так, чтобы
первое предположение всегда оказывалось правильным. Если догадка пользователя
окажется неверной несколько раз, то он будет разочарован, а это плохо для вас обоих;
‰‰макет интерфейса должен отражать суть приложения. В главе 4 об этом рассказывается более подробно. Пользователи анализируют цвета и формы, которые видят,
и более эффективно следуют этим сигналам, чем текстовым меткам, которые необходимо читать;
‰‰продумайте простой способ перемещения по интерфейсу; особенно это касается
возвращения в точки, где второпях можно легко сделать неправильный выбор.
Предусмотрите «аварийные люки» (см. главу 3). На типичных веб-сайтах пользователи с легкостью применяют кнопку Назад, поэтому разработать простую
навигацию назад-вперед важно и для веб-приложений, настольных приложений,
мобильных устройств;
‰‰помните, что сложный интерфейс предъявляет высокие когнитивные требования
к новым пользователям. Визуальная сложность часто склоняет неопытных пользователей к тому, чтобы довольствоваться малым: они ищут первое, чем смогут
успешно воспользоваться.
Именно разумная достаточность мешает многим пользователям избавиться от
странных привычек даже после длительной работы с системой. Например, давным1
Стивен Круг. Не заставляйте меня думать! 2-е изд. СПб.: Символ-Плюс, 2003.
38 Глава 1 • Чем занимаются пользователи
давно пользователь выучил способ А делать что-либо, и даже если более новая версия
системы предлагает способ Б в качестве более удачной альтернативы (или если он
всегда присутствовал в системе), пользователь не видит никакого преимущества в том,
чтобы изучить его. В конце концов, на изучение нового нужно потратить силы, а ведь
можно просто продолжать использовать менее эффективный способ А. Не всегда это
иррациональный выбор. Избавление от старых привычек и изучение новых путей
требует дополнительной энергии, а небольшие улучшения того не стоят.
Changes in Midstream (Изменения на полпути)
«Я передумал, пока делал что-то».
Иногда люди вносят изменения в то, что делают, прямо в середине процесса. Например, человек входит в комнату, чтобы найти ключ, который оставил там, но, оказавшись внутри, обнаруживает газету и принимается за чтение. Или он может посетить
веб-сайт Amazon.com, чтобы ознакомиться с обзорами продуктов, а в итоге приобретает
книгу. Возможно, он просто сбился с первоначального пути, а может быть, изменение
было намеренным. В любом случае, пока пользователь работает с созданным вами
интерфейсом, его первоначальные цели могут измениться.
Для дизайнера это означает, что он должен дать пользователю возможность изменить поставленную цель. Предоставьте ему право выбора. Не запирайте пользователя в среде с ограниченным выбором и отсутствием глобальной навигации или без
соединения с другими страницами или функциональностью, если только для этого не
существует веских причин. А такие причины могут найтись: см. примеры в шаблонах
под названием Wizard (Мастер, глава 2) и Modal Panel (Модальная панель, глава 3).
Также можно упростить запуск процесса, остановку в середине и возвращение
в точку остановки из какого-либо другого места (часто это называется повторной
входимостью). Например, юрист начал вводить информацию в форму на iPad. После
этого в кабинет вошел клиент, и юрист выключил устройство, намереваясь вернуться
к форме позже и завершить ввод данных. Введенная информация не должна быть
утеряна.
Для поддержки возможности повторного входа запрограммируйте в диалоговых
окнах и веб-формах запоминание значений, введенных ранее, и не делайте диалоговые
окна модальными; если окно не модальное, то пользователь может перетащить его
в угол экрана, чтобы продолжить работу в нем позже. Приложения в стиле компоновщика — текстовые редакторы, среды для разработки программного кода и программы
для рисования — могут позволять пользователю работать одновременно над несколькими проектами, откладывая в сторону любое количество проектов во время работы
над каким-то одним. Подробнее об этом рассказывается в шаблоне Many Workspaces
(Несколько рабочих столов) в главе 2.
Deferred Choices (Отложенный выбор)
«Я не хочу отвечать на этот вопрос прямо сейчас, позвольте мне закончить!»
Это следствие желания пользователя получать мгновенное вознаграждение. Если
задать пользователю несколько на первый взгляд незначительных вопросов, пока он
Шаблоны 39
пытается выполнить какую-либо задачу, он, скорее всего, пропустит вопросы, чтобы
вернуться к ним позже.
Например, на некоторых сетевых досках объявлений применяются очень длинные и запутанные процедуры регистрации пользователей. Экранные имена, адреса
электронной почты, настройки безопасности, картинка-аватар, описания… список
можно продолжать до бесконечности. «Но ведь я всего лишь хотел опубликовать одно
маленькое объявление», — жалобно говорит пользователь. Почему бы не пропустить
большую часть вопросов, ответить только на несколько обязательных и не вернуться
(если понадобится) позже, чтобы заполнить остальные поля? Иначе пользователю
придется провести на странице регистрации не менее получаса, сочиняя свою краткую
биографию и размышляя, где найти идеальное изображение для своего аватара.
Еще один пример — создание нового проекта в редакторе веб-страниц. Есть несколько параметров, которые необходимо определить в первую очередь, например
­название проекта, но выбор остальных настроек можно отложить без всяких проблем — в какую папку на сервере вы планируете поместить готовый проект? Да я еще
не знаю!
Иногда дело просто в нежелании отвечать на вопрос. В других случаях у пользователя может быть недостаточно информации, чтобы дать ответ прямо сейчас. Что
если приложение для написания музыки запросит у вас название, тональность и темп
новой песни еще до того, как вы начнете ее писать (пример такого чудесного дизайна
вы найдете в Apple GarageBand)?
Следствия для дизайна интерфейсов очевидны, хотя их и не всегда легко реализовать:
‰‰не приставайте к пользователю со слишком большим числом вопросов и вариантов
выбора с самого начала;
‰‰в формах, которые пользователю необходимо заполнить, четко помечайте необходимые поля и не делайте обязательными слишком много полей. Позвольте пользователю продолжать работу, не тратя время на необязательные вопросы;
‰‰иногда можно отделять несколько важных вопросов или настроек от остальных,
менее значительных. Выводите на экран короткий список и прячьте длинный;
‰‰по возможности используйте шаблон Good Defaults (Хорошие варианты по умолчанию) (глава 8), чтобы предоставить пользователям несколько разумных ответов
по умолчанию, с которых удобно начать работу. Однако помните, что заранее подготовленные ответы все равно должны быть проверены пользователем на случай,
если их потребуется изменить. Они тоже требуют небольших затрат;
‰‰обеспечьте пользователю возможность вернуться к отложенным полям позже
и сделайте доступ к ним очевидным. Иногда в диалоговых окнах выводят краткие
замечания вроде «Вы всегда сможете изменить эти данные, нажав кнопку Редактировать проект». Некоторые веб-сайты сохраняют наполовину заполненные
пользовательские формы или другие постоянные данные, например содержимое
корзин с еще не приобретенными товарами;
‰‰если на веб-сайте, представляющем полезные услуги, регистрация необходима, то
пользователи с намного большей вероятностью зарегистрируются, если сначала позволить им поработать с веб-сайтом — втянуться и увлечься — и только после этого
спрашивать, кто же они такие. На некоторых сайтах можно совершить покупку­
40 Глава 1 • Чем занимаются пользователи
вообще без регистрации; лишь в самом конце пользователя спрашивают, хочет ли
он, чтобы введенные персональные данные были автоматически сохранены для
него в новой учетной записи.
Incremental Construction (Пошаговое построение)
«Дайте мне это изменить. Нет, опять неправильно. Попробую еще раз. Вот так-то
лучше».
Когда пользователи создают что-то, они обычно не выполняют четко определенную
последовательность шагов. Даже у эксперта не получится начать с начала, методично
проработать весь процесс создания и получить в конце нечто завершенное и идеальное.
Все совсем не так. Обычно пользователь начинает с небольшого фрагмента, работает над ним, потом делает шаг назад и оценивает результат, тестирует его (если это,
например, код или другой компонент, поддерживающий проверку в действии), исправляет ошибки и только после этого переходит к построению следующего фрагмента
желаемой вещи. Или даже начинает все сначала, если промежуточный результат его не
устраивает. Творческий процесс требует двигаться не только вперед, но иногда и назад,
и порой количество перемещений в противоположных направлениях совпадает. Помимо этого, создание готового продукта часто осуществляется пошагово и включает
последовательность небольших изменений вместо нескольких крупномасштабных.
Иногда процесс идет сверху вниз, иногда снизу вверх.
Интерфейсы в стиле компоновщика должны поддерживать такой стиль работы.
Предусмотрите возможность создания за один раз лишь небольших фрагментов
и сделайте интерфейс восприимчивым к быстрым изменениям и частым сохранениям.
Чрезвычайно важна обратная связь: постоянно демонстрируйте, как результат будет
выглядеть целиком и как он будет вести себя, когда с ним будет работать пользователь.
Если вы имеете дело с кодом, симуляторами или чем-либо исполняемым, делайте
этап компиляции максимально коротким, чтобы обратную связь можно было почувствовать мгновенно — пусть между внесением изменений и результатом не остается
никакой задержки, или же пусть она будет минимальной.
Когда творческую деятельность поддерживают хорошие инструменты, пользователь может достичь ощущения погружения в поток, тогда он полностью вовлекается
в процесс работы, не замечая ничего вокруг, и проводит так несколько часов, испытывая удовольствие от приятного и эффективного времяпрепровождения. Художникам,
спортсменам и программистам хорошо знакомо это состояние.
Плохие инструменты гарантированно будут отвлекать пользователя от работы.
Если ему приходится ждать хотя бы 30 секунд, чтобы увидеть результат только что
внесенного небольшого изменения, то концентрация нарушается и поток прерывается.
Если вам интересно больше узнать о потоке и концентрации внимания, обратите
внимание на книги Михая Чиксентмихайи (Mihaly Csikszentmihalyi), который изучал
эту область много лет.
Habituation (Привыкание)
«Этот способ работает везде, почему же он не работает здесь?»
Когда человек постоянно работает в одном интерфейсе, некоторые часто используемые физические действия становятся рефлекторными, например нажатие Ctrl+S
Шаблоны 41
для сохранения документа, щелчок на кнопке Назад, чтобы покинуть веб-страницу,
нажатие клавиши Return, чтобы закрыть модальное диалоговое окно, использование
определенных движений для развертывания и свертывания окон и даже нажатие на
педаль тормоза в автомобиле. Пользователю не нужно сознательно думать об этих
действиях — они входят в привычку.
Эта тенденция помогает людям становиться опытными пользователями определенных инструментов (а также создавать ощущение потока). Привыкание заметно повышает эффективность, что нетрудно понять, но оно также может скрывать ловушки.
Если какое-то действие превращается в привычку и пользователь пытается применить
его в ситуации, где оно не работает, или, что еще хуже, делает что-то разрушительное,
то он впадает в ступор. Ему мгновенно нужно снова начать сознательно думать об
инструменте (Что я только что сделал? Как же мне теперь сделать то, что нужно?) и,
вероятно, также потратить время на возмещение ущерба, нанесенного этим автоматическим движением.
Например, последовательное нажатие клавиш Ctrl+X, Ctrl+S обозначает сохранение
файла в текстовом редакторе emacs. Сочетание Ctrl+A перемещает курсор ввода текста
в начало строки. Эти действия быстро входят в привычку у пользователей emacs, и когда пользователь нажимает в редакторе Ctrl+A, Ctrl+X и Ctrl+S, то выполняет довольно
безвредную пару операций.
Но что произойдет, если ввести ту же привычную последовательность в Micro­soft
Word?
1. Ctrl+A: выделить все.
2. Ctrl+X: вырезать выделенный фрагмент (в данном случае — весь документ).
3. Ctrl+S: сохранить документ (ой…).
Вот почему в приложениях так важно единообразие (а также надежная функция
отмены последнего действия)!
Точно так же важно единообразие в пределах одного приложения. Некоторые приложения таят подвох — они создают у пользователей впечатление, что определенное
действие всегда приводит к выполнению операции А, и они забывают, что в одном
специальном режиме это действие выполняет операцию Б. Никогда так не делайте.
Это гарантированный способ заставить пользователей ошибаться, и чем больше у
пользователей опыта, то есть чем сильнее они привыкли работать в этом приложении,
тем больше вероятность, что они сделают эту ошибку.
Особенно внимательно к этому аспекту следует относиться при разработке интерфейсов мобильных устройств, управляемых жестами. Разобравшись в своем устройстве и привыкнув к нему, пользователь ожидает, что стандартные жесты будут работать
совершенно одинаково во всех приложениях. Всегда проверяйте, что результат применения жестов в ваших приложениях предсказуем.
По этой же причине диалоговые окна с подтверждением операции часто не помогают защитить пользователя от случайных изменений. Когда всплывает модальное
­диалоговое окно, пользователь может легко избавиться от него, просто нажав кнопку OK или клавишу Return (когда в диалоговом окне кнопка OK по умолчанию находится в фокусе). Если диалоговые окна постоянно выскакивают, пока пользователь
вносит намеренные изменения, например удаляет файлы, то подобный быстрый ответ
входит в привычку. А когда в диалоговом окне действительно возникает необходи-
42 Глава 1 • Чем занимаются пользователи
мость, толку от него уже нет никакого, так как пользователь привык не обращать на
него внимание.
Мне известно, как минимум, одно приложение, в котором кнопки в диалоговом
окне подтверждения выводятся в случайном порядке при каждом появлении окна.
Пользователю действительно приходится читать метки на кнопках, чтобы выяснить,
какую из них нужно нажать! Возможно, это не лучший способ проектирования диалогового окна подтверждения — в большинстве ситуаций лучше вообще обойтись без
них, — но, по крайней мере, этот дизайн помогает избавиться от привычек.
Microbreaks (Микроперерывы)
«Я жду поезда. Неплохо было бы сделать что-то полезное в оставшиеся пару минут».
Часто бывает так, что у людей появляется несколько свободных минут. Это может
быть небольшой перерыв в работе, чтобы «проветрить голову», или время, которое
они проводят в очередях в магазине или в пробке на дороге. Им становится скучно,
появляется раздражительность. Они хотят заняться чем-то полезным или хотя бы
развлечься, чтобы время прошло быстрее. Но это не должно быть слишком серьезное
занятие — ведь на него все равно не удастся выделить достаточно времени.
Данный шаблон относится главным образом к мобильным устройствам, которые
в подобной ситуации легко вытащить из кармана.
Вот несколько типичных действий, которые пользователи выполняют во время
микроперерывов:
‰‰проверка электронной почты;
‰‰чтение ленты новостей (см. главу 2), например, в Facebook или Twitter;
‰‰посещение информационного сайта, чтобы проверить, что происходит в мире;
‰‰просмотр короткого видео;
‰‰быстрый поиск в сети;
‰‰чтение книги в интернет-библиотеке;
‰‰короткая игра.
Главное отличие действий, которыми заполняются микроперерывы, — это простота
и доступность. Очень просто, например, включить устройство и запустить приложение
или открыть веб-сайт. Не требуйте сложной настройки. Не делайте процесс загрузки
слишком длинным. А если для того, чтобы воспользоваться услугой, пользователю
необходимо войти в свою учетную запись, постарайтесь сохранить его учетные данные
из предыдущего сеанса. Не заставляйте его вводить пароль каждый раз.
Что касается ленты новостей, загружайте свежее содержимое как можно быстрее
и выводите его на первом же экране, который увидит пользователь. Другие приложения, такие как игры, видео, сетевые библиотеки, должны запоминать, где пользователь
остановился, и восстанавливать предыдущее состояние без запроса пользователя
(то есть поддерживать повторную входимость).
Если вы разрабатываете приложение для работы с электронной почтой или любую
другую программу, в которой пользователю придется периодически наводить порядок в данных, предоставьте ему способы эффективной сортировки и классификации.
Это означает, например, отображение для каждого сообщения достаточно данных, по
Шаблоны 43
которым пользователь мог бы узнать отправителя и вспомнить содержимое письма.
Также можно позволить ему помечать наиболее интересные сообщения, с легкостью
удалять их, писать короткие ответы или дополнения.
Отдельно стоит упомянуть о времени загрузки. Если содержимое загружается
слишком долго — можете не сомневаться, пользователь не станет заходить в ваше
приложение (особенно во время микроперерывов!). Убедитесь, что страницы легко
читаются, самое полезное содержимое загружается в первую очередь и с минимальной
задержкой.
Spatial Memory (Пространственная память)
«Клянусь, это кнопка была здесь секунду назад! Куда она пропала?»
Когда люди часто имеют дело с объектами и документами, то, возвращаясь к ним,
ориентируются на свои воспоминания об их местоположении, а не восстанавливая
в памяти фактические пути и названия.
Рассмотрим, например, рабочий стол Windows, Mac или Linux. Многие люди
используют фон рабочего стола для размещения документов, ссылок на часто запускаемые приложения и других подобных вещей. Выясняется, что для поиска нужных
объектов люди пользуются пространственной памятью, и это очень эффективный
подход. Они придумывают собственные варианты группировки или вспоминают, что
нужный документ «был в самом верху прямо над тем значком и наискосок от вон той
группы». (Естественно, можно найти эквиваленты и в реальном мире. Рабочие столы
многих людей постоянно находятся в «художественном беспорядке» — для стороннего
человека это просто куча барахла, в которой, однако, владелец стола может мгновенно
найти нужную вещь. И боже вас упаси, сделать уборку на таком столе!)
Во многих приложениях кнопки диалоговых окон (OK, Отмена и т. д.) размещаются в предсказуемых местах, отчасти потому, что пространственная память на такие
элементы управления очень сильна. В сложных приложениях люди также могут находить объекты, запоминая, где они находятся по отношению к другим элементам:
инструментам на панелях инструментов, объектам в иерархических списках и т. д.
Таким образом, следует с большой осторожностью применять такие шаблоны, как
Responsive Disclosure (Управляемое обнаружение) (см. главу 4). Добавление чеголибо в интерфейс обычно не вызывает проблем, но перемещение существующих элементов управления может разрушить пространственную память и затруднить поиск
объектов. Однако это зависит от многих обстоятельств, так что если вы не уверены,
испытайте изменения на своих пользователях.
Пространственная память, как и привыкание, еще один довод в пользу необходимости единообразия как среди разных программ, так и в пределах одного приложения.
Люди ожидают найти определенную функциональность в привычных местах. Пример
вы найдете в шаблоне Sign-in Tools (Инструменты с регистрацией) в главе 3.
Пространственная память объясняет, почему полезно предоставлять области для
хранения документов и объектов, где порядок может наводить сам пользователь, как,
например, на вышеупомянутых рабочих столах. Это не всегда практично, особенно
когда объектов очень много, но для небольшого количества работает довольно хорошо.
Когда пользователи упорядочивают объекты самостоятельно, они с большей вероятностью запоминают, куда и что поместили. (И не изменяйте выбранный ими порядок,
44 Глава 1 • Чем занимаются пользователи
пока они сами не попросят об этом!) Шаблон Movable Panels (Перемещаемые панели)
в главе 4 описывает один из способов сделать это.
По той же причине динамическое изменение меню иногда имеет неприятные последствия. Люди привыкают видеть определенные элементы вверху или внизу меню.
Перемещение или сокрытие элементов меню с целью помочь пользователю работает
против привыкания и приводит к ошибкам. Это же относится и к меню навигации
на веб-страницах. Старайтесь делать так, чтобы на второстепенных страницах сайта
элементы меню находились там же, где и на главной странице.
Кстати, верхние и нижние области списков и меню — это особые места в когнитивном смысле. Люди чаще замечают их и лучше запоминают, чем элементы в середине
меню. Вносить изменения в эти области без ведома пользователя крайне неже­лательно.
Prospective Memory (Проспективная память)
«Оставлю это здесь, чтобы не забыть заняться этим позже».
Проспективная память — это хорошо известный психологический феномен, который пока не получил заслуженного внимания в дизайне интерфейсов, хотя я считаю,
что это совершенно неправильно.
Мы применяем проспективную память, когда планируем сделать что-то в будущем
и организуем некий способ напомнить себе о необходимости сделать это. Например,
если вам нужно принести на следующий день на работу книгу, то вы можете накануне вечером положить ее на столик у входной двери. Если вы должны ответить на
электронное сообщение позже (а не прямо сейчас), то можете оставить его открытым
на экране в качестве физического напоминания. Если вы часто пропускаете встречи,
то можете настроить в Outlook или на мобильном устройстве напоминания, которые
будут подавать звуковой сигнал за пять минут до очередной встречи.
Фактически каждый из нас применяет проспективную память. Это часть нашей
сложной, высокоорганизованной и наполненной задачами жизни: мы используем
свое знание мира для того, чтобы помочь собственной неидеальной памяти. И нужно
уметь делать это хорошо.
Некоторое программное обеспечение поддерживает проспективную память.
В Outlook и на большинстве мобильных платформ, как упоминалось выше, эта поддержка реализована активно и напрямую; в этих системах есть календарь, и они могут
подавать звуковые предупреждения. Но что еще можно сделать?
‰‰заметки для себя, например, на виртуальных «липких листочках»;
‰‰оставлять окна приложений открытыми на экране;
‰‰примечания, прямо на документах (например, «Допиши меня!»);
‰‰делать закладки в браузере, ведущие на веб-сайты, которые нужно просмотреть
позже;
‰‰документы, оставленные прямо на рабочем столе, а не на их обычных местах в архиве;
электронные
сообщения, которые оставляют в папке входящих сообщений (и, во牉
можно, помеченные флагами) вместо того, чтобы перемещать их в архив.
Люди используют любые типы средств идентификации для поддержки пассивного
проспективного запоминания, но обратите внимание, что ни одна из перечисленных
Шаблоны 45
техник не была создана специально для этого! То, для чего они в действительности
разрабатывались, — это обеспечение гибкости и возможности организации пользователями своей информации без вмешательства системы. Хороший клиент электронной
почты позволяет создавать папки с любыми именами и не заботиться о том, что вы
делаете со своими входящими сообщениями. Текстовым редакторам все равно, что
вы вводите и что для вас значит огромный текст, написанный пурпурными буквами;
редактору программного кода без разницы, добавите вы комментарий «Дописать это!»
в заголовок метода или нет. Браузеры не знают, зачем вы сохраняете определенные
закладки.
Во многих случаях такая гибкость и невмешательство — это именно то, что вам действительно нужно. Дайте людям инструменты для создания собственных систем напоминаний, но не пытайтесь разработать систему, слишком умную саму по себе. Если
окно приложения бездействует какое-то время, не следует думать, что оно никому не
нужно и что его можно закрыть. В целом не нужно с благими намерениями удалять
файлы или объекты, которые система может посчитать бесполезными; возможно, ктото специально оставил их здесь. Также не упорядочивайте и не сортируйте объекты
автоматически, если пользователь не просит систему об этом.
Что вы можете сделать как дизайнер для поддержки проспективной памяти? Если
кто-то оставит форму наполовину заполненной и временно ее закроет, то можно сохранить данные формы до следующего посещения — это поможет напомнить пользователю, на чем он остановился (шаблон Deferred���������������������������������
�����������������������������������������
Choices�������������������������
��������������������������������
(Отложенный выбор)). Подобным образом многие приложения запоминают несколько последних объектов или
документов, которые в них редактировались. Также можно предложить пользователям
списки «наиболее интересных объектов» — как прошлых, так и будущих — в стиле закладок и сделать эти списки легко доступными для чтения и редактирования. Помимо
этого можно использовать шаблон Many Workspaces (Несколько рабочих столов),
позволяющий пользователям оставлять открытыми незаконченные страницы, пока
идет работа над чем-то другим.
Вот более сложная проблема: если пользователь приступает к задачам и оставляет
их незавершенными, подумайте о том, как оставить на видном месте какое-нибудь напоминание, идентифицирующее незаконченные задачи, отличное от открытого окна.
И еще одна: как пользователь может собрать напоминания из разных источников
(электронная почта, документы, календари и т. д.) в одном месте? Включите фантазию!
Streamlined Repetition (Организованное повторение)
«Сколько раз мне нужно это повторить?»
В некоторых типах приложений пользователям иногда приходится выполнять одну
и ту же операцию снова и снова. Чем проще это для них, тем лучше. Если вы можете
помочь им упростить эту операцию до одного нажатия клавиши или щелчка мышью
в каждом цикле повторения или, еще лучше, до нескольких нажатий или щелчков для
всей последовательности повторений, то сэкономите пользователям много времени
и сил.
Хороший пример такого поведения — это диалоговые окна Find and Replace (Найти
и заменить), часто присутствующие в текстовых редакторах (���������������������
Word�����������������
, редакторы электронных сообщений и т. д.). В таких диалоговых окнах пользователь вводит старую
46 Глава 1 • Чем занимаются пользователи
фразу и новую фразу, а затем для каждого вхождения этой фразы во всем документе
всего лишь один раз нажимает кнопку Replace (Заменить). И это в случае, когда пользователю нужно проверять и разрешать или запрещать каждую замену; если он знает, что
действительно необходимо заменить все вхождения, то может просто нажать кнопку
Replace All (Заменить все). Одно движение — и вся работа сделана.
Вот более общий пример. Photoshop позволяет записывать действия (actions) для
того, чтобы затем выполнять некоторые произвольные последовательности операций
всего одним щелчком мыши. Если нужно обработать 20 изображений, изменив их
размеры, применив кадрирование, усилив яркость и сохранив их, то эти шаги можно
записать, работая над первым файлом в последовательности, а затем просто нажимать
кнопку Play (Воспроизвести) нужного действия для каждого из оставшихся 19. См.
шаблон Macros (Макрос) в главе 6, где об этом говорится подробнее.
Среды для написания сценариев еще более неспецифичны. ����������������������
Unix������������������
и подобные операционные системы позволяют вносить в сценарий все, что только можно ввести в оболочке. Можно заново вызывать и выполнять отдельные команды, даже очень длинные,
всего лишь нажимая Ctrl+P и Return. Можно собрать любой набор команд, выполненных
в командной строке, поместить их в цикл for и запустить, один раз нажав клавишу
Return. Или же сохранить эти команды в сценарии командного процессора (или в цикле
for сценария командного процессора!) и выполнить в виде отдельной команды. Написание сценариев — это очень мощный инструмент, и по мере усложнения сценариев
он превращается в полнофункциональное программирование.
Прочие варианты включают возможность копирования и вставки (устраняющую
необходимость повторно вводить одно и то же в миллионе мест), создаваемые пользователем ярлыки для различных приложений на рабочем столе операционной системы
(позволяющие не искать каталоги этих приложений в файловой системе), закладки
в браузере (чтобы пользователям не приходилось вводить URL-адреса вручную)
и даже сочетания клавиш на клавиатуре.
Непосредственное наблюдение за пользователями поможет вам выяснить, поддержку каких типов повторяемых задач вам следует реализовать. Пользователи не
всегда смогут сказать вам об этом навскидку. Они могут даже не осознавать, что выполняют повторяющиеся действия, которые можно было бы упростить при помощи
правильных инструментов, — возможно, они уже давно привыкли работать таким
образом и перестали замечать это неудобство. Наблюдая за работой пользователей,
вы увидите то, чего не видят даже они.
В любом случае основная мысль заключается в том, чтобы предложить пользова­
телям способы упрощения повторяющихся задач, которые в противном случае могут
требовать больших временных затрат, быть скучными и вести к возникновению
ошибок.
Keyboard Only (Только клавиатура)
«Пожалуйста, не заставляйте меня использовать мышь».
У некоторых людей возникают реальные физические проблемы при использовании
мыши. Многие предпочитают не переключаться между мышью и клавиатурой, так
как это требует времени и усилий; они лучше будут постоянно держать руки только
на клавиатуре. Часть пользователей не могут видеть экран, а используемые ими вспо-
Шаблоны 47
могательные технологии зачастую взаимодействуют с программным обеспечением
только при помощи API клавиатуры.
Для удобства таких пользователей некоторые приложения разрабатываются так,
чтобы управлять ими можно было только с клавиатуры. Обычно управление с помощью мыши также поддерживается, но таких операций, которые можно выполнить
только мышью, нет, так что пользователи, имеющие только клавиатуру, не страдают
от ограничения функциональности.
Для поддержки работы только при помощи клавиатуры существует несколько
стандартных приемов:
‰‰можно определить сочетания «горячих» клавиш, клавиши быстрого вызова и клавиши выбора для операций, включаемых через меню, например Ctrl+S для со-
хранения документа. См. список стандартных операций в руководстве по стилю
оформления для вашей платформы;
‰‰выбор нужного пункта в списках, даже поддерживающих множественный выбор,
обычно возможен также при помощи стрелок на клавиатуре в сочетании с модификаторами (такими, как клавиша Shift), хотя это зависит от используемого
компонента;
‰‰клавиша Tab обычно перемещает клавиатурный фокус (выбор элемента управле-
ния, на который действует ввод с клавиатуры в данный момент времени) с одного
элемента управления на следующий, а переход в обратном порядке осуществляется при помощи клавишного сочетания Shift+Tab. Это иногда называется «обход
по клавише Tab». Многие пользователи ожидают, что эта техника будет работать
в интерфейсах, содержащих формы;
‰‰большинство стандартных элементов управления, даже переключатели и комбини-
рованные поля, позволяют пользователям менять выбранное значение при помощи
клавиатуры путем нажатия стрелок, клавиши Return или пробела;
‰‰в диалоговых окнах и на веб-страницах обычно предусматривается кнопка по
умолчанию — кнопка, говорящая: «Эту задачу я выполнил». На веб-страницах чаще
всего это кнопки Submit (Отправить) или Done (Готово), а в диалоговых окнах — OK
или Cancel (Отмена). Когда пользователь нажимает на такой странице или в диалоговом окне клавишу Return, выполняется именно эта операция по умолчанию.
После этого система переводит пользователя на следующую страницу или возвращает в предыдущее окно.
Существуют и многие другие техники. Формы, панели управления и стандартные
веб-страницы довольно легко управляются с клавиатуры. В графических редакторах и других пространственных приложениях это реализовать сложнее, но не невозможно.
Работа только с помощью клавиатуры особенно важна для приложений, где необходимо вводить данные. В них скорость ввода данных имеет первостепенное значение,
и пользователи не могут позволить себе убирать руки с клавиатуры и переносить их
на мышь каждый раз, когда нужно перейти из одного поля в другое или даже с текущей страницы на следующую. (В действительности многие подобные формы даже
не требуют нажатия клавиши Tab для перехода между элементами управления — это
делается автоматически.)
48 Глава 1 • Чем занимаются пользователи
Other People’s Advice (Советы других людей)
«А что другие говорят об этом?»
Люди — социальные существа. Так же сильно, как наши собственные мнения, может влиять на нас и то, что думают наши коллеги.
Обратите внимание на впечатляющий рост возможностей для пользователей вводить свои комментарии в интерактивном режиме: вы можете комментировать книги
на Amazon, фильмы на IMDb или фотографии на flickr, а бесчисленное количество
розничных продавцов предлагают пользователям пространство для ввода собственных
обзоров продаваемых продуктов. Интернет-аукционы, подобные eBay, превращают
мнения пользователей в реальные цены. Блоги (интернет-дневники) — это вообще
неограниченные трибуны для желающих высказать и обсудить свое мнение о чем
угодно, от продуктов до программирования и политики.
Советы коллег, непосредственные или косвенные, всегда влияют на выбор людей,
когда те принимают различные решения. Поиск продуктов в Интернете, выполнение
транзакций (нужно ли мне приобрести этот продукт?), игры (что в этом месте сделали
другие игроки) и даже создание вещей — все это может происходить более эффективно
при содействии других людей. Но даже если особой помощи пользователю не оказали,
ему, по крайней мере, будет приятнее получить результат.
Вот более тонкий пример. Программисты используют приложение MATLAB для
выполнения научных и математических расчетов. Каждые несколько месяцев производитель ������������������������������������������������������������������
MATLAB������������������������������������������������������������
проводит открытый конкурс программистов; в течение нескольких дней каждый участник пытается как можно лучше написать код MATLAB для
решения сложной научной задачи. Выигрывает тот, кто делает это быстрее и точнее
всех. Хитрость в том, что каждый игрок может видеть код, предоставленный другими
участниками, а копирование только поощряется! «Совет» в данном случае дается
косвенно и принимает форму открытого кода, но это оказывает существенное влияние. В результате выигравшую программу нельзя назвать «авторским продуктом»,
но она, несомненно, является квинтэссенцией лучшего кода, чем тот, который может
предоставить один программист. (Во многих смыслах это микрокосм разработки
программного обеспечения с открытым кодом, управляемый мощным набором социальных движущих сил.)
Не все приложения и программные системы могут включать в себя социальный
компонент и не везде стоит пытаться его реализовать. Но подумайте, не поможет ли
это повысить эффективность работы пользователей? Наверное, можно придумать
что-то более интересное, чем простое добавление общего форума на обычный веб-сайт.
Как убедить пользователей конструктивно принимать участие? Как интегрировать
социальный компонент в рабочий процесс типичного пользователя?
Если речь идет о творческой задаче, то можно поощрять представление творений
пользователей для публичной оценки. Если целью является поиск некоторого факта
или объекта, возможно, есть способ упростить для пользователей проверку, не выполняли ли другие люди подобные исследования.
Среди всех шаблонов, рассмотренных в книге, шаблон из второй главы Multi-Level
Help (Многоуровневая помощь) наиболее точно описывает эту идею; интерактивное
сообщество, где пользователь находит поддержку, может стать ценной частью справочной системы для некоторых приложений.
Шаблоны 49
Personal Recommendations (Личные рекомендации)
«Друг посоветовал прочитать эту книгу; наверное, она действительно хороша».
Этот шаблон работает по тому же принципу, что и предыдущий — на нас оказывает
сильное влияние мнение других людей. Настолько сильное, что мы с большей вероятностью просмотрим видео или прочитаем статью, порекомендованную другом, чем
найденную иным способом. Личное отношение и совет имеют определяющее значение
при выборе, чего бы такого интересного почитать в Интернете.
Таким образом, важно поддерживать обмен личным мнением. Позвольте пользователям рассылать URL-адреса (или даже само содержимое) друзьям и родственникам
по электронной почте или через социальные сети, такие как Facebook или Buzz.
Это подразумевает использование или разработку целого набора механизмов. Вопервых, что именно пользователи будут отправлять? Если для содержимого не существует постоянного URL-адреса, подумайте о том, как его формировать (подробнее об
этом говорится в шаблоне Deep-linked State (Сильно связанное состояние) в главе 3).
URL-адрес должен приводить нового посетителя на ту же страницу, которую видит
отправитель, когда хочет поделиться чем-то интересным. В противном случае возникнет беспорядок и непонимание.
Во-вторых, с кем пользователь будет делиться находками? Позвольте ему подключиться к социальной сети или предусмотрите удобный способ отправки электронного
сообщения.
В-третьих, каков подлинный смысл подобных рекомендаций? Если пользователь
отправляет нескольким наиболее близким друзьям электронное письмо с личным
обращением — не автоматически сформированным, а тем, которое он придумал и написал сам! — это потенциально может послужить очень высокой рекомендацией.
В конце концов, кто-то подумал о вас и потратил время на написание сообщения.
Однако чем больше получателей перечислено в строке адреса, тем меньше степень
«уникальности» письма.
Когда пользователь публикует ссылку на своей стене в ���������������������������
Facebook�������������������
или ��������������
Twitter�������
, предполагаемое послание несколько иное: «Это мне показалось интересным и забавным,
к тому же говорит что-то обо мне как о личности». И снова, подписчики с большой
вероятностью прочитают опубликованное содержимое, особенно если считают, что у
пользователя хороший вкус. Более того, они могут скопировать ссылку к себе на стену
или в блог, а их читатели — к себе и т. д. Именно так зарождаются мемы, появляется
вирусная реклама, и социальные сети продолжают расширяться.
Организация
содержимого:
информационная
архитектура и структура
приложения
2
Итак, на данный момент вы уже знаете, чего пользователи хотят от вашего приложения
или сайта. Вы выбрали платформу: сеть, настольный компьютер, мобильное устройство или какую-либо комбинацию всего перечисленного. Вы также знаете, какую
идиому или тип интерфейса будете использовать: форму, интернет-магазин, утилиту
для просмотра изображений или что-то еще — а может быть, объедините в одном дизайне сразу несколько идиом. Если вы действительно хорошо подготовились, то уже
написали несколько типичных сценариев, описывающих, как люди могут использовать высокоуровневые элементы приложения для достижения своих целей. Вы четко
представляете, какую воплощенную идею данное приложение добавит в жизнь людей.
И что теперь?
Можно приступить к созданию набросков интерфейса. Те, кто предпочитает мыслить образно, делают это на данном этапе. Если вы относитесь к такому типу людей
и вам нужно поэкспериментировать с черновиками, вырабатывая общие концепции
дизайна, сделайте это.
Но если вы не привыкли мыслить зрительными образами (а иногда даже если
привыкли), то воздержитесь пока от рисования набросков интерфейса. Они могут
заблокировать ваше мышление в первых скетчах, которые вы положите на бумагу.
Сейчас вам понадобится гибкость и неограниченная фантазия, чтобы определиться
с общей организацией приложения.
Иногда полезно подумать о приложении в терминах данных и задач, с которыми
оно будет управляться. Какие объекты будут видны пользователям? По каким категориям они будут разбиты, в каком порядке отсортированы? Что пользователям нужно
будет делать с ними? Итак, после абстрактного размышления, сколько вариантов
представления этих вещей и задач вы можете предложить?
Такое изыскание поможет вам более творчески подойти к дизайну интерфейса.
Информационная архитектура — это искусство организации информационного
пространства. Оно объединяет несколько аспектов: представление, поиск и про-
Общая картина 51
смотр данных, добавление меток, разбиение на категории, сортировку, манипулирование, принятие стратегических решений, какую информацию следует показать,
а какую скрыть. Вот с чего следует начинать, особенно если вы работаете над новым
продуктом.
Общая картина
Давайте сначала взглянем на самый высокий уровень вашего приложения. С точки
зрения дизайнера, сайт или приложение, вероятно, выполняет несколько функций:
предоставляет информацию, продает товар, создает впечатление о товарном знаке,
предоставляет возможности социального взаимодействия и т. п. На домашней стра­
нице или на первом экране приложения следует представить весь спектр предлагаемых
услуг. Благодаря текстовым сообщениям и понятным изображениям пользователь
­выберет ту часть вашего сайта или приложения, которая будет соответствовать его
целям.
На этом этапе вы принимаете решения, касающиеся проекта в целом. Какую
модель взаимодействия выбрать? Метафору рабочего стола? Простейшую модель
традиционного веб-сайта? Или сделать современный интерактивный сайт, объединяющий особенности первого и второго? Будет ли это автономное устройство, такое
как мобильный телефон или цифровой видеомагнитофон, для которого придется
проектировать все взаимодействия с нуля? Модель взаимодействий должна обеспечивать единообразие возможностей объекта, она определяет, как пользователи будут
переключаться между различными аспектами его функциональности. На этом уровне
я не буду углубляться в дальнейшие подробности, так как почти все шаблоны в данной
книге применяются для более мелких проектов.
Теперь посмотрим на модули, составляющие приложение или сайт: страницы, выполняющие отдельные важные функции. В приложении это может быть главный экран
или основной интерактивный инструмент; в насыщенном веб-сайте — одна страница,
такая как главная страница Gmail; в более статичном веб-сайте — группа страниц, посвященных одному процессу или функции.
Любая такая страница прежде всего предназначена для:
1) демонстрации одного объекта, такого как карта, книга, видео или игра;
2) демонстрации списка или набора объектов;
3) предоставления инструментов для создания объекта;
4) оказания помощи в выполнении задачи.
Разумеется, в большинстве приложений и сайтов эти возможности объединяются.
На веб-сайте можно показать пользователю основную статью (1), список дополнительных статей (2), wiki-область для зарегистрированных пользователей, чтобы они могли
создавать свои страницы (3), и регистрационную форму для новых посетителей (4).
Это прекрасно. Каждый из фрагментов сайта должен быть сконструирован с помощью
шаблонов и инструментов, соответствующих данному конкретному организационному
принципу.
Этот список отражает некоторые принципы, которые Тереза Нейл сформулировала
в отношении структуры насыщенных интернет-приложений. Основываясь на главной
52 Глава 2 • Организация содержимого: информационная архитектура и структура
цели пользователя — информация, процесс или творчество, — она определяет три
типа структур1.
Этот список дает нам каркас, предлагая уместить в него идиомы и шаблоны, о которых мы поговорим в этой и последующих главах.
Отображение одного объекта
Ваша страница предназначена для этого? Цель дизайна страницы — показать или
дать пользователю поиграть только с одним элементом содержимого? Нет списков
других элементов, на которые пользователь захочет взглянуть, нет комментариев, нет
оглавления или карты сайта или чего-то подобного?
Да вы счастливчик!
Все что вам нужно — продумать взаимодействие пользователя с этим единственным элементом. Информационная архитектура вряд ли будет сложной. В вашем
случае понадобятся мелкие инструменты, размещенные вокруг главного содержимого (полосы прокрутки и ползунки, поля для регистрации, глобальная навигация,
оформление «шапки» и нижней части страницы и т. д.), но это мелочи, которые легко
спроектировать. Дизайн может принять одну из следующих форм:
‰‰длинная страница с вертикальной прокруткой, заполненная текстом (статьи, книги
и аналогичное крупное содержимое);
‰‰интерфейс с масштабированием для очень больших и детальных объектов, таких
как карты, изображения или информационная графика. Известный пример — географические карты, такие как Google Maps;
‰‰идиома «мультимедийный проигрыватель», включающая видео- и звуковые проигрыватели.
При разработке такого интерфейса обратите внимание на следующие шаблоны
и методы:
‰‰Alternative Views (Альтернативные представления) для демонстрации содержимого различными способами;
‰‰Many Workspaces (Несколько рабочих пространств) на случай, если пользователю
захочется увидеть несколько мест, состояний или документов одновременно;
‰‰Deep-linked State (Глубокая ссылка) из главы 3. Благодаря возможностям этого
шаблона пользователь может сохранить определенную точку или состояние содержимого, чтобы вернуться к нему позже, или отправить кому-то URL-адрес,
указывающий именно на эту точку или состояние;
‰‰Sharing Widget (Виджет для рассылки) и другие шаблоны для социальных сетей
из главы 9;
‰‰некоторые шаблоны для мобильных устройств из главы 10, если одна из целей
вашего дизайна — доставка контента на мобильные устройства.
1
Статья «Rich Internet Screen Design» в UX Magazine: http://www.uxmag.com/design/rich-internet-
application-screen-design.
Общая картина 53
Отображение списка объектов
Это основная задача большинства цифровых приложений. Списки есть везде! Цифровой мир изобрел множество популярных способов отображения списков, большинство
из которых вам знакомы: простые текстовые списки, меню, сетки изображений, результаты поиска, списки электронных сообщений, таблицы, деревья, и это, разумеется,
далеко не полный список.
Списки представляют собой одну из самых сложных областей информационной
архитектуры. Какой длины должен быть список? Сделать его простым или иерархическим, а если иерархическим, то какого типа? Как он будет отсортирован и сможет ли
пользователь динамически менять способ сортировки? Нужно ли добавить к списку
фильтры или возможность поиска? Какая информация или операции будут связаны
с каждым элементом списка, когда и как их отображать?
Поскольку списки так распространены, каждый дизайнер должен хорошо ориентироваться в различных способах их представления. Я могу лишь снова повторить
уже знакомую вам истину: изучая и формализуя эти методики, вы тренируете свое
во­ображение и учитесь изобретать новые интересные варианты представления содержимого.
Несколько шаблонов для дизайна интерфейса, основанного на списках, представлены в этой главе (остальные перечислены в главе 5). Основываясь на одном из этих
шаблонов, можно построить целый сайт или приложение или его небольшой фрагмент.
Они определяют структуру, в которую затем можно поместить другие техники отображения — текстовые списки, списки эскизов и т. д. Прочие высокоуровневые способы
организации данных, не перечисленные здесь, включают календари, полностраничные
меню и результаты поиска.
‰‰шаблон Feature, Search, and Browse (Новость, поиск и обзор) применяется на
бесчисленных веб-сайтах, отображающих товары и текстовое содержимое. Поиск
и обзор — это альтернативные способы обнаружения интересующих пользователей
объектов, а новость на первой странице сразу же привлекает внимание посетителя
к главному элементу;
‰‰в блогах, на сайтах новостей, в приложениях электронной почты и социальных
сетях, таких как Twitter, для отображения содержимого используется шаблон
News Stream (Лента новостей). При этом последние обновления всегда выводятся
в верхней части страницы;
‰‰Picture Manager (Диспетчер изображений) — это хорошо структурированный тип
интерфейса для работы с фотографиями и другими изображениями. Он может
включать иерархии и простые списки, инструменты для организации и сортировки
документов, средства редактирования изображений и т. д.
Выбрав общую идею для дизайна вашего интерфейса, не помешает взглянуть и на
другие шаблоны и техники отображения списков. Они могут быть частью шаблонов,
перечисленных выше. Например, внутри диспетчера изображений для отображения
фотографий часто используются Thumbnail Grid (Сетка эскизов) и Pagination (Разбиение на страницы) — и все это в пределах двухпанельного ­селектора (шаблон TwoPanel Selector). Подробнее об этом рассказывается в главе 5.
54 Глава 2 • Организация содержимого: информационная архитектура и структура
Инструменты для создания объектов
Компоновщики и редакторы — два великих семейства мира программного обеспечения. К этой категории относятся Microsoft������������������������������������������
���������������������������������������������������
Word�������������������������������������
�����������������������������������������
, Excel������������������������������
�����������������������������������
, PowerPoint������������������
����������������������������
и другие приложения Office, Adobe Photoshop, Illustrator, In Design, Dreamweaver и прочие инструменты,
необходимые в каждодневной работе дизайнера, а также средства создания программного обеспечения, такие как разнообразные редакторы кода и интегрированные среды
разработки. У них долгая история, большие пользовательские базы и хорошо проработанные стили взаимодействия, отполированные многолетним использованием.
Большинству людей знакомы средства выражения, применяемые в этих инструментах: текстовые редакторы, редакторы кода, редакторы растровых изображений
и векторной графики, электронные таблицы.
В главе 8 предыдущего издания этой книги обсуждалась разработка различных
аспектов таких инструментов. Однако на уровне структуры приложения или информационной архитектуры чаще всего используются следующие шаблоны:
‰‰Canvas Plus Palette (Холст и палитра) описывает большинство таких приложений. Этот хорошо узнаваемый, прочно установившийся шаблон для визуальных
редакторов прекрасно оправдывает пользовательские ожидания;
‰‰почти все приложения этого типа строятся на базе шаблона Many Workspaces
(Несколько рабочих пространств). Внутри одного окна содержится несколько документов, над которыми пользователь может работать параллельно;
‰‰шаблон Alternative Views (Альтернативные представления) дает пользователям
возможность взглянуть на один документ или рабочее пространство с разных точек
зрения, чтобы оценить различные аспекты своего творения;
‰‰о шаблоне Blank Slate Invitation (Приглашение чистой доски) его авторы Билл
Скотт и Тереза Нейл рассказывают в книге «Designing Web Interfaces» (http://oreilly.
com/catalog/9780596516253/). Это крайне полезный шаблон для компоновщиков
и редакторов, и он тесно связан с шаблоном Input Hints (Подсказки при вводе)
из главы 8.
Содействие при выполнении единственной задачи
Возможно, ваш интерфейс не предназначен для отображения списка объектов или
создания нового объекта. У многих интерфейсов существует единственная цель: помочь пользователю выполнить конкретную задачу. Вход в систему, регистрация, публикация, печать, загрузка, покупка, изменение настройки — все эти задачи попадают
в нашу категорию.
Здесь ведущую роль играют формы. Формам посвящена глава 8 — там вы найдете
описание множества элементов управления и шаблонов, необходимых для создания
эффективных форм. В главе 6 рассказывается о еще одном полезном наборе шаблонов,
которые концентрируются скорее на «глаголах», а не на «существительных».
Если пользователь может выполнить необходимую задачу в небольшой ограниченной области, такой как поле ввода учетных данных, то особых усилий к разработке
информационной архитектуры прилагать не нужно. Но если задача усложняется,
становится длинной, или разветвленной, или предлагает несколько вариантов выбора,
то вам придется как следует поработать над ее структурированием:
Шаблоны 55
‰‰чаще всегда задачу разбивают на небольшие шаги или группы шагов. В этом случае
пройти через все необходимые этапы пользователям помогает интерфейс на базе
шаблона Wizard (Мастер);
‰‰Settings Editor (Редактор настроек) — это очень распространенный тип интерфейса, позволяющий пользователям менять настройки или параметры объекта
(приложения, документа, продукта и т. п.). Такой вариант совершенно ничего
общего не имеет с пошаговым выполнением задачи. Здесь вы должны предоставить
пользователю доступ к большому ассортименту настроек или переключателей
и позволить ему выбирать подходящие значения параметров — в тех случаях, когда
это необходимо.
Шаблоны
Некоторые из шаблонов в этой главе крупномасштабные; они определяют взаимодействия в больших разделах приложений или сайтов (иногда во всем приложении или
сайте целиком). Часть шаблонов, включая Picture Manager (Редактор изображений),
Canvas Plus Palette (Холст и палитра) и Feature, Search, and Browse (Новость, поиск
и обзор) представляют собой объединения нескольких более мелких шаблонов, которые
хорошо работают вместе (я называю их «гильдиями» мелкомасштабных шаблонов):
1. Feature, Search, and Browse (Новость, поиск и обзор).
2. News Stream (Лента новостей).
3. Picture Manager (Редактор изображений).
4. Dashboard (Приборная панель).
5. Canvas Plus Palette (Холст и палитра).
6. Wizard (Мастер).
7. Settings Editor (Редактор настроек).
Последние три шаблона можно назвать мета-шаблонами, в том смысле, что они
применимы ко всем шаблонам в предшествующем списке. Например, почти любое
содержимое, документ или список можно отобразить несколькими разными способами, и возможность переключаться между ними — это еще один инструмент в
руках пользователя.
8. Alternative Views (Альтернативные представления).
Аналогичным образом, пользователь может открыть несколько экземпляров интерфейса: для разных проектов или разных вариантов одной работы (вспомните
вкладки со страницами разных веб-сайтов в окне браузера). Предложите таким
пользователям преимущества шаблона Many Workspaces (Несколько рабочих
пространств).
9. Many Workspaces (Несколько рабочих пространств).
Многие шаблоны, как приведенные здесь, так и рассматриваемые далее в книге, в
различной степени облегчают процесс обучения работе с интерфейсом. Шаблон
Multi-Level Help (Многоуровневая помощь) определяет способы интегрирования
справки непосредственно в приложение, чтобы пользователь мог обратиться за
помощью в любой ситуации.
10. Multi-Level Help (Многоуровневая помощь).
56 Глава 2 • Организация содержимого: информационная архитектура и структура
Feature, Search, and Browse (Новость, поиск и обзор)
Рис. 2.1. Веб-сайт компании EMS
Что
Поместите на главную страницу веб-сайта или приложения три элемента: основную
статью или продукт, поле поиска и список элементов или категорий, которые пользователь сможет пролистать.
Использовать, когда…
На вашем сайте пользователям предлагаются длинные списки элементов — статей,
продуктов, видео и т. д., среди которых можно выполнять поиск или просто просматривать в произвольном порядке. Вы хотите сразу же заинтересовать новых посетителей,
предложив им прочитать или посмотреть что-то увлекательное.
Почему
Эти три элемента можно обнаружить на множестве успешных сайтов. Если присмотреться — они используются почти везде!
Поиск и обзор — это два наиболее распространенных способа обнаружения желаемой информации. Если человек знает, что конкретно он ищет, то его цель — поле
поиска. Другие пользователи могут неторопливо перебирать представленные списки
и категории в поисках того, что им приглянется.
Новость не обязательно должна быть текстовой. Это то, чем вы «цепляете» пользователя, нечто намного более интересное, чем списки категорий и поля поиска, особенно
если вы применяете в оформлении яркие изображения и заголовки. Зайдя на вашу
страницу, пользователь сразу видит, что он может почитать и с чем поэксперименти-
Шаблоны 57
ровать. Для этого ему не нужно выполнять никакие дополнительные действия! Возможно, ваше предложение окажется для него намного привлекательнее того, за чем
он первоначально пришел.
Как
Разместите поле поиска там, где его легко найти: в верхнем углу или внутри специального баннера наверху страницы. Поле поиска должно отличаться от остального
содержимого. Выделите его при помощи пустого пространства или выберите контрастный фоновый цвет.
Постарайтесь в верхней половине окна не использовать другие текстовые поля (за
исключением поля для входа в систему, если оно требуется), чтобы не путать пользователей. Очень часто люди принимают за поле поиска первое же текстовое поле,
встретившееся им на странице. Сделайте так, чтобы они всегда оказывались правы!
Выделите центральную сцену (шаблон Center Stage из 4 главы) для главной
статьи, продукта или видео. Рядом с ней, обязательно выше середины страницы,
поместите область просмотра остального содержимого — списки тем или категории
продуктов. Можно использовать ссылки на страницы, посвященные этим категориям.
Кстати, ссылки не обязательно должны вести на другие страницы. Они могут менять
содержимое текущей страницы, заменяя центральный объект списком элементов из
выбранной категории (см. шаблон Two-Panel Selector (Двухпанельный селектор) из
главы 5).
Если метки категорий раскрываются для вывода подкатегорий, это означает, что
список ведет себя как дерево. На некоторых сайтах, таких как Amazon���������������
���������������������
, метки категорий превращаются в меню: если навести на такую метку указатель мыши, появится
меню подкатегорий.
Проявляйте фантазию при выборе центрального элемента страницы. Именно эта
область поможет вам продать товар, объявить о специальном предложении или привлечь внимание к сенсационным новостям. Но будьте осторожны: по содержимому
главной сцены посетители судят обо всем сайте. Объект или статья, выбранные в качестве новости, многое скажут о ценностях сайта. В зависимости от того, объявите
вы о благотворительном мероприятии или продаже специальных продуктов, у людей
­создастся о вас определенное впечатление. Старайтесь изучить свою целевую аудиторию. Что они захотят узнать о вас? Что привлечет их внимание и удержит на вашем
сайте?
Позаботьтесь о том, чтобы пользователи не потерялись, просматривая категории
и подкатегории объектов, — используйте шаблон Breadcrumbs (Хлебные крошки) из
главы 3.
Примеры
Этот шаблон хорошо подходит для новостных сайтов (���������������������������
CNET�����������������������
, рис. 2.2), сайтов издательств (Lulu), баз знаний (About.com, рис. 2.3) и, разумеется, интернет-магазинов
(Amazon, рис. 2.4; или EMS, рис. 2.1 выше).
58 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.2. Веб-сайт CNET
Рис. 2.3. Веб-сайт About.com
Шаблоны 59
Рис. 2.4. Веб-сайт Amazon
News Stream (Лента новостей)
Рис. 2.5. Веб-сайт Twitter
60 Глава 2 • Организация содержимого: информационная архитектура и структура
Что
Отображайте связанную со временем или датой информацию в обратном хронологическом порядке — новейшие элементы должны быть наверху. Обновляйте содержимое
динамически и объединяйте элементы, поступающие из разных источников или от
разных людей, в единую ленту новостей.
Использовать, когда...
Ваш сайт или приложение базируется на одном или нескольких коммуникативных
каналах, таких как блоги, электронная почта, обновления социальных сетей, новостные сайты. Задача вашего сайта или приложения — вовремя доставлять содержимое
пользователем.
Такой канал может быть персональным, когда он «принадлежит» пользователю
(клиент электронной почты или список друзей в сети Facebook), или публичным,
таким как веб-сайт или открытая лента в Twitter.
Почему
Людям удобнее отслеживать новости, если самые свежие события отображаются наверху — пользователю не приходится прикладывать усилия, чтобы добраться до них.
Они могут часто заходить на сайт или в приложение и всегда будут видеть именно то,
за чем пришли.
Каждый день люди посещают множество сайтов и приложений, позволяющих следить за активностью друзей, участвовать в обсуждениях или читать новые записи в блогах или конференциях по интересам. Если несколько источников «новостей» объединить в одном месте, человеку будет проще не потеряться в море информации.
Этот шаблон поддерживает поведенческий шаблон Microbreaks (Микроперерывы)
из главы 1. Один взгляд на ленту новостей дает пользователю огромное количество
полезной (или развлекательной) информации и требует приложения минимума усилий и времени.
Если речь идет, например, о корпоративном сайте, то наличие на первой странице
веб-сайта поля новостей (шаблон News Box из главы 9) или аналогичного инструмента позволяет посетителям сразу же увидеть, какие новые и значительные события
произошли в организации. Особенно полезно это для больших компаний, у которых
есть множество способов заинтересовать посетителей: рассказать о новых продуктах,
о новой статье в блоге, опубликовать видео, новостную заметку, отчет о благотворительной работе и другое содержимое.
Как
Выводите поступающие новые элементы в обратном хронологическом порядке. Если
технология позволяет, «выталкивайте» их наверх списка, не ожидая, пока пользователь запросит обновление, но тем не менее предусмотрите вариант моментального
обновления содержимого страницы.
Очень насыщенные ленты можно разбивать на тематические разделы, сортируя по
отправителю, источнику, поисковому запросу или ориентируясь на другие факторы —
и пусть пользователь выбирает, какой именно поток он хочет просмотреть в данный
момент. В таких службах, как Facebook, FriendFeed, Twitter и некоторых RSS-ридерах,
справа или слева от входящего содержимого отображаются списки ссылок для выбора
тематических потоков (это один из вариантов реализации шаблона Two-Panel Selector
Шаблоны 61
(Двухпанельный селектор)). Некоторые сайты, ­например Tweetdeck, базируются на
шаблоне Many Workspaces (Несколько рабочих пространств) и состоят из нескольких
параллельных лент входящего содержимого.
Сведения, отображаемые для каждого элемента, могут включать следующие местоимения.
Что
Короткие микрообновления отображайте полностью. В противном случае выводите заголовок, несколько слов или предложений статьи (или новости) и эскиз
изображения, если таковой имеется.
Кто
Это может быть автор обновления, название блога, где опубликована статья,
автор этой статьи или отправитель электронного сообщения. Имена настоящих
людей «очеловечивают» интерфейс, но не забывайте о балансе между узнава­нием
и авторитетностью: названия издательств, блогов, компаний и т. д. не менее важны.
Используйте и имена, и названия, если это не приводит к неразберихе.
Когда
Указывайте дату или время; рассмотрите возможность использования относительных значений времени, таких как «вчера» или «одиннадцать минут назад».
Г де
Если источник новости — это веб-сайт, то добавьте ссылку на него. Если новость взята из одного из блогов вашей компании, то вставьте ссылку на этот блог.
(Однако возможна и еще одна интерпретация «где»: можете ли вы получить географические данные, связанные с данной новостью, или указать место на карте?)
Если для данной новости существуют какие-то дополнения, которые несложно
вывести в форме списка, то добавьте ссылку или функциональную кнопку Еще. Попробуйте разработать способ отображения всего содержимого новости в окне ленты
новостей. Если ваша лента выполнена в формате списка, то возможные варианты —
Two-Panel Selector (Двухпанельный селектор), One-Window Drilldown (Погружение
в одном окне) и List Inlay (Списки с вкладышами). Далее вы найдете примеры для
каждой из этих моделей.
Предоставьте пользователю возможность немедленно реагировать на элементы
ленты новостей. Звездочки для выбора рейтинга, кнопки или ссылки «Отлично!»
и «Мне нравится», функция занесения в избранное доступны во многих системах.
Так пользователь может сообщить о своем мнении относительно данного элемента, не
прилагая особого труда — виртуально «пожать руку» автору новости, если у него нет
времени на написание длинного ответа. Но возможность написания длинных ответов
также должна быть предусмотрена! Помещая элементы управления и текстовые поля
вплотную к элементам ленты новостей, вы поощряете взаимодействие и общение.
В социальных системах это очень удобно и полезно.
В подобных интерфейсах также часто можно поделиться понравившейся новостью
с друзьями: либо в частном порядке по электронной почте, либо публично, перенеся
данный элемент в свою ленту аналогичной социальной системы. См. шаблон Sharing
Widget (Виджет для рассылки) в главе 9.
На момент написания этой главы дизайн ленты новостей для мобильных устройств
был достаточно прост. Почти во всех системах весь экран занимал один список, зачастую в формате шаблона Thumbnail-and-Text List (Список с эскизами и текстом) из
62 Глава 2 • Организация содержимого: информационная архитектура и структура
главы 10. В текст внедрялись ссылки, и пользователь мог получить более подробное
содержание, просто прикоснувшись или щелкнув на элементе списка.
Во многих лентах новостей, включая Twitter и Facebook, шаблон Infinite List
(Бесконечный список) из 10 главы применяется как для мобильной, так и для полноэкранной версии. Этот шаблон позволяет загрузить одну-две страницы ­последних
обновлений и затем при необходимости подгружать более старые новости.
В некоторых ресурсах используется аналогичная концепция: лента активности
(activity stream). Это отсортированная по времени лента действий (обычно относящихся к социальной сети) отдельного человека, системы или организации. Это полезная концепция, не противоречащая шаблону News Stream (Лента новостей), который
описывает поток действий, интересующих пользователя или группу пользователей, но
генерируемых не ими. У ленты новостей обычно несколько разнообразных источников.
Примеры
Digg (рис. 2.6) и Google News (рис. 2.7) — это публичные ленты новостей. Их цели
и дизайн различаются, но в обеих используются возможности из данного шаблона.
В системе Digg все входящие элементы отображаются в одном большом списке; Google
News разбивает их на темы, внутри которых первыми отображаются самые новые статьи (если щелкнуть на заголовке темы, то пользователь попадает на страницу с одним
списком). Информация, которая отображается для каждого элемента в обеих лентах,
почти одинакова: заголовок, анонс, ссылка на источник и относительная отметка времени. Используются имена людей: в Digg это имя предоставившего новость, а в Google
News — имя автора статьи. На обоих сайтах можно отмечать наиболее интересные
элементы: кнопкой «digg» на одном и звездочкой на втором. Помимо этого, новостью
можно поделиться, отправив ее друзьям по электронной почте.
В двух предыдущих примерах показаны публичные ленты новостей; следующие
примеры посвящены персональным лентам.
Социальные сети, сайты для сбора новостей из разных источников и приложения,
посвященные общению (такие как электронная почта), — это богатый источник примеров для шаблона News Stream (Лента новостей). На рис. 2.8 и 2.9 показаны страницы
Facebook и Google Reader; последний представляет собой сайт для сбора новостей на
базе технологии RSS. В обоих используется один список элементов, отсортированный
в обратном хронологическом порядке. Каждый элемент списка состоит из ссылки
на источник, заголовка, анонса (если необходимо), имени автора и относительной
временно´й метки. Пользователи могут поставить отметку «мне нравится», отправить
новость другу, щелкнуть на ссылке, чтобы прочитать более подробную информацию.
Однако есть и различия. Google Reader позволяет пользователю разбить огромный
общий поток новостей на отдельные подпотоки, объединенные одним источником или
темой. Список подпотоков отображается в древовидном списке слева, превращая окно
в двухпанельный селектор (шаблон Two-Panel Selector). На момент написания этой
главы в Facebook такая возможность по умолчанию не предоставлялась. Вместо этого
представление автоматически (и непредсказуемо) переключалось между вариантами
Top Stories (Популярные новости) и Most Recent (Недавние обновления). Тем не менее
в Facebook превосходно проработана возможность мгновенного реагирования. Опубликовать короткий комментарий к записи друга не сложнее, чем просто подумать об этом.
Шаблоны 63
Рис. 2.6. Веб-сайт Digg
Рис. 2.7. Веб-сайт Google News
64 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.8. Веб-сайт Facebook
Рис. 2.9. Веб-сайт Google Reader
Шаблоны 65
Picture Manager (Диспетчер изображений)
Рис. 2.10. Два представления из программы iPhoto
Что
Используйте эскизы, поэлементное представление и функции обзора для создания
знакомой структуры, позволяющей управлять фотографиями, видео и другими иллюстративными элементами.
Использовать, когда...
Ваше программное обеспечение предназначено для работы со списками или коллекциями иллюстративных элементов: фотографий, рисунков, видеоклипов и т. д.
Список может находиться на веб-странице, в приложении или и там, и там. Владельцу
содержимого могут предлагаться возможности редактирования, а остальным посетителями — только различные способы обзора, просмотра и комментирования.
Почему
Этот стиль приложения легко узнается множеством людей. Кроме того, это гильдия
шаблонов — набор шаблонов, связанных вместе и поддерживающих друг друга предсказуемым способом. Увидев сетку эскизов (изображений или видео) в правильном
контексте, пользователь сразу же понимает, чего ожидать: он сможет пролистать элементы, щелкнуть на любом из них для детального просмотра, настроить слайд-шоу
или список воспроизведения и т. д.
Шаблоны и другие компоненты, часто занимающие важное место в этой гильдии,
включают:
‰‰шаблон Thumbnail Grid (Сетка эскизов);
‰‰шаблон One-Window Drilldown (Погружение в одном окне);
‰‰шаблон Two-Panel Selector (Двухпанельный селектор);
‰‰шаблон Pyramid (Пирамида);
‰‰вкладки и шаблон Collapsible Panels (Свертываемые панели);
‰‰шаблон Button Groups (Группы кнопок);
‰‰деревья или другие иерархические структуры;
‰‰шаблон Keyboard Only (Только клавиатура);
‰‰шаблон Sharing Widget (Виджет для рассылки);
‰‰поле поиска;
‰‰комментарии и дискуссии.
66 Глава 2 • Организация содержимого: информационная архитектура и структура
Как
Создайте два основных представления: сетку эскизов (элементов списка) и крупное
представление одного элемента. Пользователи будут переключаться между ними.
Разработайте интерфейс обзора сетки эскизов, чтобы пользователи могли с лег­костью
исследовать большие коллекции.
Сетка эскизов
Применяйте этот шаблон для отображения последовательности элементов. Во многих
диспетчерах изображений для каждого элемента также выводится небольшой объем
метаданных, таких как имя или автор файла. Однако делать это надо аккуратно, чтобы
не загромождать интерфейс. Можно добавить элемент управления для изменения размера эскизов. Также предложите пользователям возможность сортировать элементы
по различным критериям, например по дате, метке, рейтингу, фильтровать элементы
и отображать только элементы, помеченные определенным образом.
Когда пользователь щелкает на элементе, сразу же показывайте его в представлении одного элемента. Приложения часто позволяют пользователям перемещаться по
сетке с помощью клавиатуры — например, кнопками со стрелками или с помощью
клавиши пробел (см. шаблон Keyboard Only (Только клавиатура) в главе 1).
Пользователю-владельцу элемента предложите на данном уровне интерфейса
способы перемещения, реорганизации и удаления элементов. Это означает, что в интерфейсе должен быть доступен множественный выбор: щелчки на элементах при
нажатой клавише Shift, флажки, захват нескольких элементов при перетаскивании
указателя мыши. Обязательно должны работать такие функции, как вырезание, копирование и вставка.
На уровне сетки эскизов предложите всем пользователям функции создания слайдшоу или списков воспроизведения.
Представление одного элемента
После соответствующего действия пользователя откройте крупное представление выбранного изображения (или окно проигрывателя для видеоклипа). Рядом покажите
метаданные — информацию об элементе. Такое представление может находиться рядом с сеткой эскизов, если окно большое, либо выводиться на место сетки. На практике
это означает выбор между шаблонами Two-Panel Selector (Двухпанельный селектор)
и One-Window Drilldown (Погружение в одном окне). Подробнее о шаблонах, связанных со списками, рассказывается в главе 5.
Если речь идет об интерфейсе веб-сайта или приложения, связанного с Интернетом, то на данном уровне также можно добавить социальные функции: комментарии,
кнопку «мне нравится», возможность рассылки друзьям; см. шаблон Sharing Widget
(Виджет для рассылки) и другие шаблоны из главы 9. Можно внедрить проставление
меток — видимых всем посетителям или только создателю метки. В публичных коллекциях на различных веб-сайтах часто добавляется раздел «аналогичные элементы,
которые вам могут понравиться».
На этом уровне тоже можно использовать функции редактирования. Например,
создайте редактор фотографий с простейшими возможностями: кадрирование, коррек-
Шаблоны 67
тировка цвета и яркости, корректировка эффекта красных глаз. Редактировать можно
не только изображение, но и свойства метаданных. Если полный редактор слишком
сложен для встраивания в данный контекст, предоставьте пользователю возможность
запустить «настоящий» редактор (например, в Adobe Bridge есть кнопка для передачи
фотографии в Photoshop). Для поддержания простой и понятной визуальной группировки возможностей применяйте шаблон Button Groups (Группы кнопок).
Свяжите элемент с предыдущим и последующим элементами в списке, добавив
кнопки «назад» и «вперед». Это особенно важно при использовании для представления одного элемента шаблона One-Window Drilldown (Погружение в одном окне),
где наличие кнопки «назад» необходимо. Также рассмотрите навигационный шаблон
Pyramid (Пирамида) из главы 3.
Интерфейс обзора
Содержимое сетки эскизов должно опираться на интерфейс обзора — сложный, простой или практически несуществующий, в зависимости от природы при­ложения.
Как минимум, в большинстве интерфейсов присутствует поле поиска, позволяющее выполнить поиск по элементам одного пользователя либо по всем публичным
элементам (или оба варианта сразу).
Личные интерфейсы управления фотографиями и видео, особенно настольные
приложения, аналогичные Picasa и iPhoto, должны поддерживать обзор файлов на
жестком диске, чтобы пользователь мог находить изображения в разных каталогах
файловой системы. Возможности группировки элементов в альбомы, наборы, проекты
и другие типы коллекций также должны быть встроены в интерфейс. Помимо этого,
большинство таких интерфейсов поддерживают функции добавления в избранное
или присвоения рейтинга.
Обычно в приложениях и на веб-сайтах интерфейс обзора элементов поме­щается
слева от сетки эскизов. В высокоинтерактивном программном обеспечении эти две
области связываются как двухпанельный селектор: когда пользователь ­выбирает
категорию или папку (или вводит критерий поиска), соответствующее ­содержимое
моментально отображается в сетке эскизов рядом с интерфейсом обзора.
Иногда также используются фильтры. В Adobe Bridge они включены в интерфейс
обзора, и для выбора нужного подмножества из большой коллекции элементов можно
настраивать более 10 свойств, включая ключевые слова, дату изменения, тип камеры
и значение ISO.
На веб-сайтах, таких как YouTube и Flickr, где хранятся публичные коллекции,
домашняя страница может представлять собой единый интерфейс поиска. Перед
создателями таких сайтов встает интересный вопрос: если на домашнюю страницу
заходит зарегистрированный пользователь, «владеющий» содержимым, то для него
следует открыть его личные коллекции или некое избранное содержимое, которое
также увидят прочие посетители? Или оба варианта?
Примеры
Picasa������������������������������������������������������������������������������
и ���������������������������������������������������������������������������
Adobe����������������������������������������������������������������������
Bridge���������������������������������������������������������������
���������������������������������������������������������������������
, так же, как и iPhoto�����������������������������������������
�����������������������������������������������
(см. рис. 2.10), — это настольные приложения, предназначенные для управления личными коллекциями изображений. Их
интерфейсы обзора (во всех случаях это двухпанельные селекторы) различаются
68 Глава 2 • Организация содержимого: информационная архитектура и структура
по сложности: от очень простого дизайна iPhoto до множества панелей и фильтров
Adobe Bridge. В Picasa (рис. 2.11) и iPhoto при переходе к представлению одного
элемента открывается шаблон One-Window Drilldown (Погружение в одном окне),
а в Adobe Bridge (рис. 2.12) все три представления показаны на одной странице.
Рис. 2.11. Два представления из приложения Picasa
Рис. 2.12. Приложение Adobe Bridge, объединяющее все представления
в одном комплексном окне
Дизайн веб-сайта Flickr (рис. 2.13) неоднократно копировался многими другими
веб-сайтами, предназначенными для хранения коллекций изображений и видео. Просмотр изображений в Flickr отличается от принятого в личных настольных приложениях. Наборы, пулы, группы и публичные коллекции пользователя — все это способы
исследования вселенной Flickr. Для жизнеспособности этого сайта также крайне
важны социальные элементы. Но помимо них вы видите сетку эскизов, погружение
Шаблоны 69
в одном окне при изучении одного элемента, подробные сведения о каждом элементе
и функции навигационного шаблона Pyramid (Пирамида): предыдущее изображение,
следующее изображение, переход наверх.
Рис. 2.13. Веб-сайт Flickr
Этого шаблона придерживаются и сетевые хранилища видеоклипов. Зайдя на канал пользователя в YouTube, можно выбрать либо представление сетки эскизов, либо
представление списка клипов сбоку от проигрывателя (это вариант по умолчанию).
Оба варианта показаны на рис. 2.14. Если щелкнуть на эскизе, то открывается страница
соответствующего видео, где отображается подробная информация и комментарии.
Обзор и поиск содержимого осуществляются через списки воспроизведения, списки
последних добавленных видео, наиболее часто просматриваемых видео, видео с самым
высоким рейтингом. Разумеется, как и на других сайтах, здесь есть поле поиска.
Рис. 2.14. Канал «Улицы Сезам» на веб-сайте YouTube
Интерфейс обзора содержимого на веб-сайте TED намного сложнее (рис. 2.15).
На домашней странице используется динамическая иконографика, составленная
из эскизов разных размеров. Включая и выключая различные поля, пользователь
сужает круг представленных видеоклипов и в результате находит именно то, что искал. При наведении указателя мыши на элемент раскрывается поле с подробностями.
Если щелкнуть на эскизе видео, то вы переходите в представление одного элемента,
аналогичное YouTube.
70 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.15. Веб-сайт TED
В других библиотеках
Шаблон Image Browser (Обзор изображений) на веб-сайте Welie.com включает некоторые аспекты шаблона Picture Manager (Диспетчер изображений):
http://welie.com/patterns/showPattern.php?patternID=image-browsing
Dashboard (Приборная панель)
Рис. 2.16. Веб-сайт Fitbit
Шаблоны 71
Что
Выводите данные на одной насыщенной информацией странице, которая должна
регулярно обновляться. Показывайте пользователям необходимую информацию,
предусмотрите различные действия и позвольте настраивать представление в соответствии с их предпочтениями.
Использовать, когда...
Ваш сайт или приложение обрабатывает входящий поток информации от какого-то
источника: веб-сервера, социальной сети, новостного сайта, табло авиарейсов, коммерческой базы данных, финансовых инструментов и т. д. Пользователи выиграют от
непрерывного мониторинга этой информации.
Почему
Это знакомый и узнаваемый стиль страницы. У приборных панелей долгая история
как в сетевом, так и в реальном мире, и у людей выработались устойчивые ожидания
относительно того, как они должны работать: они показывают полезную информацию,
сами обновляются, часто включают графики для отображения данных и т. д.
Приборная панель — это также гильдия взаимосвязанных шаблонов и инструментов. Во многих сетевых приборных панелях предсказуемым образом используются
следующие элементы:
‰‰шаблон Titled Sections (Именованные разделы);
‰‰вкладки и шаблон Collapsible Panels (Свертываемые панели);
‰‰шаблон Movable Panels (Перемещаемые панели);
‰‰шаблон One-Window Drilldown (Погружение в одном окне);
‰‰разнообразные списки и таблицы (см. главу 5);
‰‰шаблон Row Striping (Чередование строк);
‰‰информационная графика (см. главу 7);
‰‰шаблон Datatips (Всплывающие данные).
Как
Определите, какую информацию пользователь хочет или должен увидеть. Это не так
просто, как звучит. Необходим критический взгляд: нельзя просто заляпать экран
беспорядочными данными, поскольку пользователь не сможет выбрать то, что действительно важно. Избавьтесь от ненужной информации или хотя бы сделайте ее
менее заметной.
Используйте хорошую визуальную иерархию (см. главу 4) для организации списков, таблиц и информационной графики. Старайтесь делать так, чтобы вся важная
информация помещалась на одной странице, не требуя или почти не требуя прокрутки.
Так пользователю будет проще усваивать информацию. Группируйте связанные данные в именованные разделы (шаблон Titled Sections) и используйте вкладки только
в том случае, если уверены, что пользователям не потребуется видеть на экране содержимое двух вкладок одновременно.
Применяйте возможности шаблона One-Window Drilldown (Погружение в одном окне) для предоставления дополнительной информации об элементах данных
72 Глава 2 • Организация содержимого: информационная архитектура и структура
(пользователь должен иметь возможность щелкнуть на ссылке или картинке, чтобы
получить подробные сведения). В подобных случаях хорошо работает шаблон Datatips
(Всплывающие данные), который предоставляет информацию о конкретных точках
данных при наведении указателя мыши на графические элементы, представляющие
информацию.
Выбирайте подходящие и хорошо проработанные информационные графические
элементы для отображения данных. Датчики, круговые шкалы, секторные диаграммы
и трехмерные столбчатые диаграммы выглядят привлекательно, но не всегда подходят
для восприятия сравнительной информации. Простые линейные и столбчатые диаграммы лучше отражают суть данных, особенно распределенных по времени. Если
числа и текст имеют большее значение, чем изображения, то используйте списки
и таблицы. Для таблиц данных, состоящих из нескольких столбцов, хорошо подходит
шаблон Row Striping (Чередование строк).
Пользователи пытаются охватить всю необходимую информацию на приборной
панели одним взглядом, не всматриваясь в каждый элемент на странице. Поэтому, если
вы показываете текст, подсветите ключевые слова и числа, чтобы они выделялись на
общем информационном фоне.
Нужно ли разрешать пользователям настраивать приборную панель? Многие
интерфейсы предлагают функцию индивидуальной настройки внешнего вида,
и пользователи зачастую ожидают этого. Например, можно позволить пользователю
менять местами разделы — в iGoogle и My Yahoo! помимо возможности выбирать
ото­бражаемые гаджеты также применяется шаблон Movable Panels (Перемещаемые
панели).
Примеры
My�����������������������������������������������������������������������������
Yahoo�����������������������������������������������������������������������
����������������������������������������������������������������������������
!����������������������������������������������������������������������
���������������������������������������������������������������������
— это приборная панель в стиле портала, где на одной странице для зарегистрированного пользователя отображается прогноз погоды, новости, сообщения
электронной почты и другая персонализированная информация (рис. 2.17). На такую
страницу пользователь заходит много раз в течение дня. Внешний вид настраивается
с помощью перемещаемых панелей; кроме того, пользователь сам решает, какие разделы и виджеты должны отображаться на странице.
Netvibes������������������������������������������������������������������
предлагает полностью настраиваемые приборные панели, которые можно объединить со всеобъемлющим поиском в сети (рис. 2.18). Благодаря такому
ин­струменту пользователь успевает вовремя отслеживать диалоги, изображения
и статьи, относящиеся к интересующей его теме. Во всплывающих подсказках отображаются первые несколько слов статьи, и пользователь решает, хочет он узнать
больше или нет.
Веб-приложение Google�������������������������������������������������������������
�������������������������������������������������������������������
������������������������������������������������������������
Analytics���������������������������������������������������
больше похоже на Fitbit (рис. 2.16): здесь для визуального представления состояния системы используется информационная графика.
На рис. 2.19 в качестве системы выбран веб-сайт, а приборная панель иллюстрирует
данные журнала посещений.
Шаблоны 73
Рис. 2.17. Веб-сайт My Yahoo!
Рис. 2.18. Веб-сайт Netvibes
74 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.19. Веб-сайт Google Analytics
В других библиотеках
http://quince.infragistics.com/Patterns/Dashboard.aspx
http://patternry.com/p=information-dashboard/
Приборные панели — это один из канонических макетов экрана, применяемых для
насыщенных интернет-приложений. Билл Скотт и Тереза Нейл рассказывают об этом
в статье в UX Magazine:
http://www.uxmag.com/design/rich-internet-application-screen-design
Наконец, вас может заинтересовать книга Стивена Фью «Information
������������� Dash�����
board Design: The Effective Visual Communication of Data» (http://oreilly.com/catalog/9780596100162/).
Шаблоны 75
Canvas Plus Palette (Холст и палитра)
Рис. 2.20. Photoshop CS5
Что
Поместите палитру со значками рядом с пустым холстом; пользователь щелкает на
кнопках палитры, чтобы создавать объекты на холсте.
Использовать, когда…
Вы разрабатываете привычный графический редактор. Типичный вариант использования включает создание новых объектов и размещение их в некотором виртуальном
пространстве.
Почему
Эта пара панелей — палитра, при помощи которой создаются объекты, и холст, на
который они помещаются, — применяется так часто, что с ней встречался практически каждый пользователь настольного программного обеспечения. Это естественный
случай переноса знакомых физических объектов в виртуальный экранный мир. У палитры есть огромное преимущество — ее оформление основывается на визуальном
распознавании; наиболее часто встречающиеся значки (кисть, рука, увеличительное
стекло и т. д.) используются снова и снова в разных приложениях, но всегда сохраняют
один и тот же смысл.
76 Глава 2 • Организация содержимого: информационная архитектура и структура
Как
Создайте большую пустую область, которая будет служить пользователю холстом. Это
может быть отдельное окно, как в Photoshop (см. рис. 2.20), или встроенная область на
той же странице, где находятся прочие инструменты. Главное — пользователь должен
видеть холст рядом с палитрой. Поместите дополнительные инструменты (панели
свойств, образцы цвета и т. д.) справа или ниже холста. Выделите для них небольшие
похожие на палитру окна или панели.
Сама палитра должна представлять собой сетку, содержащую кнопки с нарисованными на них значками. На них может также находиться текст, если значки не очень
понятные; в некоторых компоновщиках пользовательских интерфейсов на палитре
рядом со значками выводятся названия соответствующих компонентов. Так делается
в Visio, где палитры имеют вид сложных визуальных конструкций, предназначенных
для специфических областей. Однако наличие значков необходимо всегда, чтобы
пользователи узнавали в вашей палитре именно палитру инструментов.
Поместите палитру слева от холста или над ним. Палитра может быть разбита на
подгруппы, а для их представления можно использовать шаблон Module Tabs (Модульные вкладки) или Collapsible Panels (Свертываемые панели).
Большая часть кнопок палитры предназначена для рисования объектов на холсте.
Однако в некоторых компоновщиках в палитру успешно интегрируются и другие
функции, например кнопки масштабирования или выделения при помощи лассо. Это
началось давным-давно, когда в MacPaint режимы смешались на одной палитре (см.
рис. 2.24), и людям пришлось изучить, для чего предназначены стрелка, рука и прочие значки.
Движения, применяемые для создания объектов, варьируются от приложения
к приложению. В некоторых реализована только возможность перетаскивания (dragand-drop); в других нужно один раз щелкнуть на палитре и еще раз на холсте; в третьих применяется шаблон One-off Mode (Одноразовый режим), Spring-Loaded Mode
(Подпружиненный режим) (описание обоих шаблонов вы найдете в первом издании
этой книги) и другие тщательно продуманные действия. Я давно обнаружила, что
тестирование удобства использования в этой области имеет особое значение, так как
ожидания пользователей могут меняться в весьма широком диапазоне.
Примеры
Редактор векторной графики Raven (рис. 2.21) от Aviary и Sumo Paint (рис. 2.22) — это
два сетевых графических редактора, полностью отвечающих требованиям данного
шаблона.
В Adobe Flash Builder палитра компонентов Flex UI находится в нижнем левом
углу, как показано на рис. 2.23. Рядом со значками есть текстовые метки, разъясняющие, какой тип компонента создается с помощью данного элемента палитры. Предполагается, что пользователи этого приложения достаточно хорошо подготовлены
и им известны примерные названия нужных компонентов (также на рисунке показана
операция перетаскивания с палитры на холст).
Шаблоны 77
Рис. 2.21. Интернет-приложение Raven
Рис. 2.22. Интернет-приложение Sumo Paint
78 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.23. Приложение Flash Builder
Давайте предпримем путешествие во времени и взглянем на один из интерфейсов, благодаря которому шаблон Canvas Plus Palette (Холст и палитра) получил
такое широкое распространение — MacPaint (рис. 2.24). Не так уж много изменилось
с 1984 года — основные элементы все те же, и та же пространственная конфигурация
используется в современных программах, таких как Photoshop. В действительности,
сегодня в Photoshop и прочих визуальных компоновщиках все так же используются
многие значки из MacPaint.
Рис. 2.24. Интерфейс MacPaint, приблизительно 1984 год
Шаблоны 79
В других библиотеках
Palette/Canvas (Палитра/Холст)�������������������������������������������������
������������������������������������������������
— один из канонических макетов экрана, применяемых в насыщенных интернет-приложениях. Билл Скотт и Тереза Нейл рассказывают
о нем в статье в UX Magazine:
http://www.uxmag.com/design/rich-internet-application-screen-design
Wizard (Мастер)
Рис. 2.25. Первые два шага мастера настройки My Yahoo!
Что
Проведите пользователя по интерфейсу шаг за шагом, выполняя задачи в предопределенном порядке.
Использовать, когда…
Вы разрабатываете пользовательский интерфейс для длинной или сложной задачи,
которая будет в новинку для пользователя. К этой задаче пользователь обращается
нечасто; возможно, ему не нужен детальный контроль над ее выполнением (знакомый
пример — установка программного пакета). Вы можете быть уверены, что создатель
пользовательского интерфейса лучше знает, как наилучшим образом решить текущую
задачу.
Задачи, хорошо подходящие для реализации при помощи такого подхода, обычно
бывают очень разветвленными или чрезвычайно длинными и утомительными; они
состоят из последовательности принимаемых пользователем решений, влияющих на
выбор на следующем шаге.
Хитрость заключается в том, что пользователь должен сам захотеть отдать контроль над тем, что и когда происходит. Во многих контекстах такая схема работает
превосходно, так как принятие решений часто превращается в неприятную обязанность для людей, выполняющих определенные задачи: «Не заставляйте меня думать,
просто скажите, что делать дальше». Представьте себе перемещение по незнакомому
аэропорту — намного проще следовать указательным знакам, чем выяснять общую
структуру аэропорта. Вы не слишком много узнаете о том, как устроен аэропорт, но
вам это и не нужно.
Однако в других контекстах данный подход может вызвать отторжение у пользователей. Часто опытные пользователи находят мастера до обидного негибкими
и примитивными. Это, в частности, относится к программному обеспечению, поддерживающему творческие процессы: написание текстов, рисование или програм-
80 Глава 2 • Организация содержимого: информационная архитектура и структура
мирование. То же можно сказать и о пользователях, которые по-настоящему хотят
изучить программное обеспечение; мастера не позволяют им увидеть, какой эффект
в действительности оказывают их действия или как меняется состояние приложения
в зависимости от сделанного выбора. Некоторых людей это просто выводит из себя.
Постарайтесь хорошо изучить своих пользователей!
Почему
Разделяй и властвуй. Разбивая задачу на последовательность шагов, на каждом из которых пользователь работает в отдельном «ментальном пространстве», вы эффективно
упрощаете задачу. Вы заранее составляете продуманную карту выполнения поставленной задачи, избавляя пользователя от необходимости задумываться над ее структурой.
Все, что пользователям нужно делать, — это последовательно выполнять все шаги,
будучи убежденными, что если следовать инструкции, то все в итоге будет хорошо.
Однако сама необходимость использования мастера указывает на возможную излишнюю сложность задачи. Если ее можно упростить настолько, что желаемого результата позволит добиться короткая форма или несколько щелчков мышью, то лучше
сделать именно так — такое решение проще и эффективнее. (Кроме того, в некоторых
странах с определенным менталитетом мастер воспринимается несколько негативно
из-за «снисходительного» отношения к пользователю.)
Как
Разбиение задачи
Разбейте операции, составляющие задачу, на последовательность «порций» или групп
операций. Может быть, перед вами стоит задача представлять эти группы в строго
определенной последовательности, а может быть, и нет; тем не менее можно разбить
задачу на шаги 1–4 просто для удобства.
Тематическое разбиение процесса покупки в интернет-магазине может включать
в себя экраны выбора продукта, ввода информации об оплате, ввода адреса для выставления счета и ввода адреса для доставки товара. Порядок представления не играет
особой роли, так как последующие шаги не зависят от предыдущих. Однако объединение схожих возможностей выбора в группы упрощает жизнь людям, заполняющим
эти формы.
Возможно, вы решите разбить задачу в точках принятия решений, чтобы в зависимости от выбора, сделанного пользователем, определенным образом динамически
менялись последующие шаги. Например, в мастере установки программного обеспечения пользователь может выбрать установку дополнительных пакетов, требующих принятия дополнительных решений; если же пользователь отдаст предпочтение другому
способу установки, с ограниченным количеством компонентов, то дополнительные
шаги будут пропущены. Динамические пользовательские интерфейсы хорошо подходят для представления разветвленных задач, подобных этой, так как пользователю
не приходится отвлекаться на то, что не имеет отношения к его выбору.
В любом случае самое сложное в дизайне пользовательских интерфейсов такого
рода — это определиться с размерами порций и их числом. Глупо создавать мастер из
двух шагов, а мастер, включающий пятнадцать шагов, быстро утомит пользователя.
С другой стороны, порции по отдельности не должны быть слишком большими, или
вы потеряете преимущества, свойственные данному шаблону.
Шаблоны 81
Физическая структура
Мастера, в которых каждому шагу отводится отдельная страница с кнопками навигации Назад и Вперед, — это наиболее очевидная и хорошо известная реализация
данного шаблона. Однако это не всегда самый верный выбор, так как каждый шаг
представляет собой изолированное пространство пользовательского интерфейса, не
позволяющее увидеть контекст, то есть пользователю в каждый момент времени не
очевидно, что было раньше и что будет дальше. Тем не менее преимуществом таких
мастеров является то, что в них каждому шагу посвящается целая страница, включающая иллюстрации и объяснения.
Если вы выберете этот вариант, позвольте пользователю при желании переходить
вперед и назад по всей последовательности задачи. Предложите способ возврата на
шаг назад или иной вариант изменения ранее сделанного выбора. Помимо этого,
многие пользовательские интерфейсы дополняются картой или обзором всех шагов
с возможностью выбора, что дает некоторые преимущества двухпанельного селектора.
(В отличие от селектора, допускающего абсолютно свободный доступ к любому элементу, мастер подразумевает четко определенный порядок шагов, даже если он всего
лишь рекомендуемый.)
Если же вы решите выводить все шаги на одной странице, то можете для этого
воспользоваться одним или несколькими шаблонами, рассматриваемыми в главе 4:
‰‰Titled Sections (Именованные разделы) с ясно обозначенными номерами шагов
в заголовках. Он подходит для не сильно разветвленных задач, так как все шаги
можно одновременно видеть на экране;
‰‰Responsive Enabling (Ответное включение), когда все шаги представлены на одной
странице, но каждый последующий остается недоступным до тех пор, пока пользователь не завершит работу на предыдущем;
‰‰Responsive Disclosure (Ответное обнаружение), когда очередной шаг в пользова-
тельском интерфейсе не отображается до тех пор, пока пользователь не завершит
предыдущий. Лично я считаю, что это наиболее элегантный способ реализации
короткого мастера. Он динамичный, компактный и легкий в использовании.
Шаблон Good Defaults (Хорошие варианты по умолчанию) из главы 8 рекомендуется использовать, независимо от того, как вы организуете шаги. Если пользователь
захотел передать контроль над процессом в ваши руки, то велика вероятность, что он
также позволит вам выбирать разумные значения по умолчанию для пунктов, которые
для него не слишком важны, например местоположение папки для установки программного обеспечения.
Примеры
Пример из системы My Yahoo! на рис. 2.25 иллюстрирует множество хороших особенностей современного мастера. Техника «лайтбокс» применяется для привлечения
внимания к модальным диалогам. Приведена понятная карта последовательности
(шаблон Sequence Map из главы 3) шагов, демонстрирующая пользователю, что произойдет дальше. Мастер короткий, легкий в использовании и визуально интересный.
Кнопка отмены находится в правом верхнем углу и служит аварийным люком (шаблон
Escape Hatch) для выхода из интерфейса.
82 Глава 2 • Организация содержимого: информационная архитектура и структура
В диалоговом окне добавления банка в интернет-приложении Mint (рис. 2.26) нет
длинной последовательности шагов и неизменной кнопки Далее. И все же это мастер,
проводящий пользователя через относительно сложную последовательность шагов,
по одному экрану за раз. Список шагов представлен слева; его нельзя использовать
для перехода на определенный шаг, но он дает пользователю представление о том,
чего следует ожидать.
Дизайнеры Microsoft Office избавились от множества мастеров, но некоторые остались — и для этого были основательные причины. Импортирование данных в Excel
способно сбить с толку любого. Мастер импорта данных (рис. 2.27) представляет
собой традиционное приложение для такого формата: с кнопками Назад/Вперед, разветвлениями и без карты последовательности. Он может показаться неудобным, но он
работает. Каждый экран позволяет сфокусироваться на текущей задаче, не беспокоясь
о том, что будет дальше.
Рис. 2.26. Мастер добавления банка в приложении Mint
В других библиотеках
http://ui-patterns.com/patterns/Wizard
http://www.welie.com/patterns/showPattern.php?patternID=wizard
http://patternry.com/p=one-page-wizard/
http://patternry.com/p=multiple-page-wizard/
http://quince.infragistics.com/Patterns/Wizard.aspx
Мастер — это один из канонических макетов экрана для насыщенных интернетприложений. Билл Скотт и Тереза Нейл рассказывают о нем в статье в UX Magazine:
http://www.uxmag.com/design/rich-internet-application-screen-design
Шаблоны 83
Рис. 2.27. Мастер импорта данных в Excel
Settings Editor (Редактор настроек)
Рис. 2.28. Системные параметры в Mac OS
Что
Создайте автономную страницу или окно, которое легко найти и где пользователи
смогут изменять значения настроек, свойств или параметров. Если настроек очень
много, разбейте содержимое на отдельные вкладки или страницы.
84 Глава 2 • Организация содержимого: информационная архитектура и структура
Использовать, когда...
Вы создаете любое из следующих приложений или инструментов или нечто похожее:
‰‰приложение, включающее глобальные настройки;
‰‰операционную систему, мобильное устройство или платформу, где есть параметры,
относящиеся ко всей системе в целом;
‰‰сайт или приложение, на котором пользователю нужно регистрироваться — ему
потребуется редактировать свою учетную запись или профиль;
‰‰открытые инструменты для создания документов или других сложных продуктов.
Пользователям понадобится менять свойства документа, свойства объектов внутри
документа и другие элементы;
‰‰настройщик продукта (product configurator), позволяющий модифицировать продукт в интерактивном режиме (в действительности, это другой шаблон; его требования и ограничения немного отличаются: http://www.welie.com/patterns/showPattern.
php?patternID=product-configurator).
Почему
Несмотря на то что в обоих шаблонах используются формы, редактор настроек отличается от мастера, и он предъявляет очень четкие требования. У пользователя должна
быть возможность найти и отредактировать нужное свойство, не проходя предписанную последовательность шагов: случайный доступ очень важен. Для упрощения поиска свойства следует группировать по категориям, причем категории должны быть
понятными и иметь очевидные названия.
Еще один важный аспект дизайна редактора настроек заключается в том, что люди
будут использовать его для просмотра существующих настроек, а не только для их изменения. Пользователю должно быть сразу понятно, какое значение присвоено тому
или иному параметру.
У опытных пользователей существуют определенные ожидания относительно
редакторов настроек, параметров учетных записей и пользовательских профилей.
Они должны располагаться в знакомых местах и вести себя предсказуемо. Нарушая
предсказуемость, вы подвергаете свое приложение большой опасности!
Как
Во-первых, простота поиска. На большинстве платформ, как мобильных, так и настольных, предусмотрено стандартное местоположение глобальных настроек. Следуйте принятым условностям и не пытайтесь быть умнее других. Аналогично, на вебсайтах, где пользователи должны регистрироваться в системе, ссылка на параметры
учетной записи или профиль находится рядом с именем пользователя, часто в верхнем
правом или левом углу.
Во-вторых, группируйте похожие свойства на отдельных страницах и присваивайте
этим страницам понятные названия. (Иногда все свойства или настройки помещаются
на одну страницу, но так бывает нечасто.) Упражнения на сортировку карточек с репрезентативной группой пользователей поможет вам определить категории и выбрать для
них названия. Если свойств очень много, то вам может потребоваться трех- или четы-
Шаблоны 85
рехуровневая иерархия групп. Однако будьте осторожны: пользователю совершенно не
хочется щелкать мышью 53 раза, чтобы добраться до часто используемого параметра.
В-третьих, определитесь с представлением этих страниц. Вкладки, двухпанельный
селектор и погружение в одном окне (см. главу 5) с обширным «меню» страниц наверху страницы представляется мне наиболее популярным макетом для редактора
настроек.
Дизайн самих форм заслуживает отдельной главы. Подробнее о шаблонах и методиках, связанных с формами, рассказывается в главе 8.
Наконец, решите, будут ли изменения, сделанные пользователем, вступать в силу
немедленно, или лучше создать кнопки Сохранить и Отмена? Это зависит от типа настроек. Глобальные параметры, охватывающие платформу целиком, обычно применяются сразу же после изменения значений. Настройки на веб-сайтах сохраняются при
помощи щелчка по специальной кнопке. В приложениях это может быть реализовано
двумя различными способами. В любом случае, это не самая большая проблема. Следуйте неписанным правилам, если таковые имеются, или подумайте, чего требует
технология, лежащая в основе системы. Если же решение принять так и не удалось,
протестируйте систему с пользователями.
Примеры
В Windows 7 так много свойств, что это требует глубокой иерархии страниц. Снимки экрана на рис. 2.29 иллюстрируют путешествие от верхушки редактора настроек
до страницы, которая позволит изменить тему рабочего стола (однако есть и еще
один уровень — чтобы изменить значки на рабочем столе или другой неочевидный
элемент интерфейса, потребуется запустить диалоговое окно по ссылке на последнем
экране).
Тем не менее дизайнеры немного смягчили суровость этой глубокой иерархии.
Например, на странице верхнего уровня находится список ярлыков; вероятно, это
элементы, к которым пользователи обращаются наиболее часто. Наверху этой страницы также есть поле поиска и след из «хлебных крошек» (фактически, ссылок на
предыдущие шаги — см. шаблон Breadcrumbs). Добавляя списки элементов на верхних двух уровнях, дизайнеры показывают пользователям, какие элементы попадают
в какие категории.
В редакторах профиля Yahoo! (рис. 2.30) и Facebook (рис. 2.31) для представления
страниц используются вкладки. Пример из Yahoo!, фактически, двухуровневый������
�����
— обратите внимание на вкладки наверху страницы.
На странице Amazon на всю информацию, связанную с учетной записью, ведет
одна ссылка: Your Account (рис. 2.32). На этой странице меню (см. шаблон Menu Page
в главе 3) не только перечислены параметры учетной записи, но есть информация
о заказах, раздел управления кредитными картами, раздел цифрового содержимого
и даже социальные функции и список желаний. Такая прозрачная и в то же время
насыщенная организация великолепна! Если у меня возникают любые вопросы относительно наших взаимоотношений с Amazon, я знаю, где искать ответ (сравните
с Facebook, который традиционно прячет определенную информацию профиля за
сложными дизайнерскими уловками).
86 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.29. Редактор настроек Windows 7
Шаблоны 87
Рис. 2.30. Настройки профиля в Yahoo!
Рис. 2.31. Настройки профиля в Facebook
88 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.32. Настройки учетной записи на веб-сайте Amazon
Шаблоны 89
Alternative Views (Альтернативные представления)
Рис. 2.33. Веб-сайт Google Maps
Что
Позвольте пользователю выбирать между альтернативными представлениями, в корне
отличающимися по своей структуре от представления по умолчанию.
Использовать, когда…
Вы создаете инструмент для просмотра или редактирования сложного документа,
списка, веб-сайта, карты или другого содержимого. Возможно, вы уже предоставляете пользователям возможности некоторых настроек, например позволяете выбирать
размер шрифта, язык, порядок сортировки, масштаб и т. д., но таких простых настроек
недостаточно для того, чтобы вместить все возможные пользовательские модификации
интерфейса.
Возможно, вы столкнулись с прямо противоречащими друг другу требованиями
дизайна. Невозможно одновременно показать пользователю набор возможностей А
и набор возможностей Б, поэтому вам приходится разрабатывать их представления
отдельно, а пользователь должен будет выбрать наиболее подходящее для него.
Почему
Как ни старайтесь, вы не сможете учесть все возможные сценарии использования
в одном дизайне. Например, вывод на печать нередко вызывает на веб-сайтах проблемы, так как требования к отображению информации меняются: нужно удалить навигационные и интерактивные элементы, а оставшееся содержимое отформатировать
в соответствии с размером бумаги.
Шаблон Alternative Views (Альтернативные представления) рекомендуется использовать еще по нескольким причинам:
‰‰у пользователей есть определенные предпочтения относительно скорости, визуального стиля и прочих факторов;
‰‰пользователю необходимо временно взглянуть на данные с другой точки зрения
или «другими глазами», для того чтобы по-новому понять смысл проблемы.
Вспомните карту, которую можно представить в виде схемы или как спутниковую
фотографию (рис. 2.33);
90 Глава 2 • Организация содержимого: информационная архитектура и структура
‰‰если пользователь редактирует слайд-шоу или веб-сайт, он выполняет основную
часть работы в «структурном» представлении документа, которое включает определенные инструменты редактирования, маркеры невидимого содержимого, направляющие, личные заметки и т. д. Однако время от времени он должен видеть
свою работу такой, какой она предстанет перед конечным пользователем.
Как
Выберите несколько сценариев использования, которые невозможно с легкостью реализовать в обычном режиме работы приложения или веб-сайта. Разработайте дизайн
специализированных представлений для них и предлагайте их в качестве альтернативных вариантов в том же окне или на том же экране.
В таких альтернативных представлениях какая-то информация будет добавляться,
а какая-то — устраняться, но основное содержимое должно оставаться неизменным.
Распространенный пример переключения представлений — изменение внешнего вида
списка. Как в Windows, так и в Mac OS пользователь может просматривать список
файлов в формате сетки эскизов, древовидной таблицы, каскадного списка, «карусели»
(шаблоны Thumbnail Grid, Tree Table, Cascading Lists, Carousel).
Если интерфейс необходимо разобрать на части, например для печати или использования с программой чтения экрана, то попробуйте убрать вторичное содержимое,
сжать или удалить изображения и исключить все навигационные элементы, кроме
основных.
Разместите «переключатель» режима где-нибудь в главном интерфейсе. Он не обязательно должен бросаться в глаза; в PowerPoint и Word кнопки режимов находятся
в левом нижнем углу, на который обращают меньше всего внимания. В большинстве
приложений альтернативные представления символизируются кнопками со значками. Обязательно удостоверьтесь, что у пользователя не вызовет затруднений возврат
к представлению по умолчанию. Когда пользователь будет переключаться между
режимами, полностью сохраняйте текущее состояние приложения: выбранные элементы, местонахождение пользователя в документе, незафиксированные изменения,
операции отмены и восстановлении (Undo/Redo) и т. д. Их потеря может стать большим
сюрпризом для пользователя.
Приложения, умеющие «запоминать» своих пользователей, часто сохраняют выбор альтернативного представления до следующего посещения. Другими словами,
если пользователь решает включить альтернативное представление, то приложение
отобразит его по умолчанию и при следующем посещении пользователя. Веб-сайты
делают это при помощи файлов cookie; настольные приложения могут отслеживать
предпочтения каждого пользователя; приложение на мобильном телефоне может
просто запоминать, какое представление было включено при последнем его использовании. В веб-приложениях альтернативные представления можно реализовать при
помощи CSS. Например, так обычно создается версия для печати.
Примеры
На рис. 2.34 и 2.35 графические редакторы Microsoft PowerPoint и Adobe Illu­stra­tor
показывают разные представления рабочего продукта. В слайд-шоу пользователь
Шаблоны 91
обычно редактирует по одному слайду за раз, включая заметки к слайду, но иногда
бывает полезно взглянуть на все слайды вместе, словно выложенные для просмотра
на виртуальном столе (не показан третий вариант представления, когда PowerPoint
раскрывается на весь экран, и начинается воспроизведение слайд-шоу). В примере
с веб-сайтом Illustrator показывает либо абрисы графических объектов документа
(полезно при наличии множества сложных многоуровневых объектов), либо обычное
полностью сформированное представление изображений. Вариант с очертаниями
значительно ускоряет работу.
Рис. 2.34. Альтернативные представления в PowerPoint
Рис. 2.35. Альтернативные представления в Illustrator
На полях новостных сайтов вокруг основной статьи обычно выводится множество
дополнительного содержимого, по большей части анимированного или интерактив­
ного. Однако многие сайты заботливо предлагают версию для печати: ту же статью,
но без «рюшечек». При этом используется самое простое форматирование и мини­
мальное указание на принадлежность сайта. Такой пример с сайта CNN показан на
рис. 2.36.
В других библиотеках
http://quince.infragistics.com/Patterns/Alternative%20Views.aspx
92 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.36. Статья на основном веб-сайте CNN и ее версия для печати
Many Workspaces (Несколько рабочих пространств)
Рис. 2.37. Окна и вкладки в браузере Firefox
Что
Используйте несколько вкладок высшего уровня, группы вкладок и окна, позволяя
пользователям одновременно просматривать несколько страниц, проектов, файлов
или контекстов. Предоставьте пользователям возможность располагать рабочие пространства рядом.
Шаблоны 93
Использовать, когда...
Вы создаете приложение для просмотра или редактирования любого типа содер­
жимого: веб-сайта, документа, изображения или целого проекта из множества файлов.
Дизайнеры обычных веб-сайтов чаще всего об этом не задумываются, да им и не
нужно. Все распространенные браузеры предоставляют отличную реализацию данного
шаблона, давая пользователям возможность открывать несколько вкладок или окон
(рис. 2.37).
Также несколько рабочих пространств вряд ли необходимы в приложениях, где
центральная организационная структура — это личная лента новостей. Клиенты
электронной почты, личные страницы Facebook и так далее включают только одну
ленту новостей, нужную пользователю; если он откроет несколько окон, особой пользы от этого не будет. Тем не менее клиенты электронной почты позволяют открывать
одновременно несколько сообщений в разных окнах. Некоторые приложения Twitter
способны выводить несколько отфильтрованных потоков бок о бок: например, ленту
результатов поиска, ленту из пользовательского списка, ленту популярных сообщений
(см. пример TweetDeck на рис. 2.38).
Почему
Люди — многозадачные существа. Наши мысли могут отклоняться от главного направления и уходить в неизведанные дали, нередко в конце длинного пути упираясь
в тупик; мы бросаем задачу А, для того чтобы сразу переключиться на задачу Б, а потом
перескакиваем на давно заброшенную задачу В. Так или иначе, но все люди делают
несколько дел одновременно, и ваш хорошо продуманный интерфейс должен поддерживать эту человеческую особенность.
Наглядное сравнение двух или более элементов помогает людям учиться и черпать
вдохновение. Позвольте пользователям располагать страницы или документы рядом,
не заставляйте их постоянно переключаться между окнами.
Этот шаблон напрямую поддерживает шаблоны из главы 1, такие как Prospec­tive
Memory (Проспективная память) — человек может оставить на экране открытое окно,
чтобы напомнить себе о незавершенной задаче; и Safe Exploration (Безопасное исследование), поскольку нет ничего страшного в том, чтобы открыть еще одно рабочее
окно, оставив оригинал в исходном состоянии.
Как
Выберите один или несколько способов отображения рабочих пространств. Во многих
популярных приложениях используются следующие варианты:
‰‰вкладки;
‰‰отдельные окна операционной системы;
‰‰столбцы или панели внутри окна;
‰‰разделение одного окна на части, причем пользователь сам может настраивать
размеры частей.
Если в каждом рабочем пространстве вы имеете дело с относительно простым содержимым, таким как текстовые файлы, списки или ленты новостей, то удобнее всего
применять панели или разделение окна на части. Более сложное содержимое может
требовать выделения целых вкладок или окон, чтобы пользователю одновременно
было доступно большое пространство.
94 Глава 2 • Организация содержимого: информационная архитектура и структура
Самые сложные примеры из виденных мной — это среды разработки программных
проектов. В одном открытом проекте может одновременно идти работа с несколькими
файлами кода, таблицами стилей, командными окнами (где запускаются компиляторы
и другие компоненты), окнами результатов или файлами журнала и даже графическими редакторами. Это означает, что на экране открыто множество окон или панелей.
(А затем пользователь может временно переключиться на другой проект с аналогичным набором открытых файлов и редакторов! Некоторые среды разработки поддерживают и такое.)
При закрытии веб-браузера, такого как Chrome, набор рабочих пространств (все
открытые веб-страницы на вкладках и в окнах) автоматически запоминаются. Когда
пользователь снова запускает браузер, полный набор ранее открытых веб-страниц
восстанавливается практически в неизменном виде. Это особенно приятно после
неожиданных сбоев, случающихся в работе браузера или компьютера. Рассмотрите
возможность добавления такой функции — пользователи будут вам благодарны.
Примеры
TweetDeck ���������������������������������������������������������������������
— это приложение на основе ленты новостей, способное одновременно показывать несколько потоков: отфильтрованные потоки из Twitter, потоки из других
источников и т. п. В примере на рис. 2.38 вы видите несколько типичных столбцов из
TwettDeck. Дух ленты новостей сохраняется, так как все обновления можно видеть на
экране одновременно; если бы столбцы были разнесены на разные вкладки или окна,
пользователь не смог бы моментально видеть новые входящие сообщения.
Рис. 2.38. Веб-сайт TweetDeck
На небольших экранах мобильных устройств места слишком мало, чтобы отображать разное содержимое бок о бок. В Safari на iPhone это решено так: пользователь
может открыть до восьми веб-сайтов одновременно и переключаться между ними
с помощью интерфейса формата «карусель» (шаблон Carousel). На рис. 2.39 поль-
Шаблоны 95
зователю нужно провести пальцем слева направо или справа налево, чтобы попасть
в другое окно.
Рис. 2.39. Окна браузера Safari на iPhone
Multi-Level Help (Многоуровневая помощь)
Рис. 2.40. Различные техники предоставления помощи в Excel
96 Глава 2 • Организация содержимого: информационная архитектура и структура
Что
Для того чтобы обеспечить всех пользователей необходимой справочной информацией, используйте как легкие, так и тяжеловесные решения.
Использовать, когда…
Ваше приложение очень сложно. Некоторым пользователям может понадобиться
полнофункциональная справочная система, но вы знаете, что у большинства не будет
достаточно времени, чтобы ею воспользоваться. Кроме того, существуют и нетерпеливые пользователи и (или) те, кто нечасто пользуется вашим приложением. В частности, ваше программное обеспечение может быть предназначено для подготовленных
и опытных пользователей, но как помочь новичкам превратиться в экспертов?
Почему
Пользователям практически любого программного обеспечения необходима та или
иная степень поддержки. Тому, кто впервые сталкивается с конкретной задачей (или
давно не занимался чем-то подобным), нужна помощь, отличная от той, которая требуется человеку, часто использующему данное приложение. Даже среди новых пользователей уровень вовлеченности и стиль обучения может варьироваться в чрезвычайно
большом диапазоне. Одни захотят прочитать учебник, другие нет; большинство находит всплывающие подсказки полезными, а некоторых они раздражают.
Справочная информация, предоставляемая одновременно на нескольких уровнях,
прекрасно справляется со своими задачами даже в том случае, когда имеет несколько
нетрадиционный вид. Удачно спроектированная справочная система будет находиться
в пределах досягаемости, но не постоянно перед глазами пользователя, чтобы не вызывать раздражение. Однако пользователи должны знать, где следует искать справку.
Если они не замечают или не открывают свертываемую панель (см. одноименный
шаблон), то никогда не узнают, что же на ней находится.
Как
Создайте справку на нескольких уровнях, используя методики (не обязательно все) из
следующего списка. Такую справочную систему можно представить как не­прерывный
спектр: каждый последующий уровень справки требует от пользователя приложить
больше усилий, но может предоставить более подробную информацию.
Подписи и инструкции находятся прямо на странице, включая такие шаблоны, как
Input Hints (Подсказки при вводе) и Input Prompt (Приглашение к вводу) (глава 8).
Постарайтесь не переборщить с ними. Если вы реализуете их достаточно лаконично,
то пользователи не будут возражать против их присутствия, но не пытайтесь уместить
целые абзацы текста — мало кто потратит время на то, чтобы их прочитать.
Всплывающие подсказки. Используйте их для вывода кратких одно- или двухстрочных описаний функций интерфейса, назначение которых не очевидно. Для возможностей, представляемых только значками, наличие всплывающих подсказок очень
важно; пользователи спокойно отнесутся даже к самым бессмысленным значкам, если
всплывающие подсказки будут говорить, для чего они предназначены! (Конечно же,
я не пытаюсь пропагандировать плохой дизайн значков.) Недостатком всплывающих
подсказок является то, что они скрывают содержимое, находящееся под ними, а также
то, что некоторым пользователям не нравится их постоянное появление на экране. Не-
Шаблоны 97
большая задержка после наведения указателя мыши (одна или две секунды) устраняет
фактор раздражения для большинства людей.
Шаблон Hover Tools (Инструменты, доступные при наведении). Это более длинные описания, которые динамически отображаются, когда пользователь выделяет
определенные элементы интерфейса или подводит к ним указатель мыши. Вместо
крохотных всплывающих подсказок лучше предусмотрите для них отдельную область
на странице.
Длинные справочные тексты на свертываемых панелях (см. одноименный шаблон
в главе 4).
Вводный материал, например статические экраны приветствия, ознакомительные
туры по сайту или приложению, обучающие видеоклипы. Когда пользователь впервые
запускает приложение или службу, такие материалы сразу же указывают ему на возможные первые шаги (см. шаблон Instant Gratification (Мгновенное вознаграждение)
в главе 1). Также пользователя могут заинтересовать ссылки на справочные ресурсы.
Предусмотрите возможность отключения вводных материалов — в конечном итоге
пользователь потеряет к ним интерес, — но оставьте возможность возврата к ним гденибудь в интерфейсе, на случай если у пользователя возникнет желание почитать
справку.
Справка в отдельном окне, часто представляемая в форме страницы HTML в браузере, но иногда и в окне WinHelp или Mac Help. Часто справка выглядит как интерактивное руководство — целая книга, — которое открывается при помощи элементов
меню Help (Справка) или кнопкой Help (Справка) в диалоговом окне или на странице
HTML.
«Живая» техническая поддержка, обычно по электронной почте, на веб-сайте,
в Twitter или по телефону.
Неформальная помощь сообщества. Это возможно только для наиболее распространенных приложений, в которых пользователи заинтересованы материально или
лично, таких как Photoshop, Linux, Mac OS X или MATLAB, и для пользователей
сообщество может оказаться бесценным источником помощи. Используйте ресурсы
социальных сетей или более традиционные сетевые форумы.
Примеры
Firefox — это «всего лишь» браузер, к тому же бесплатный, но его справочная ­система
великолепна. Помощь предлагается почти на всех уровнях, перечисленных выше;
одинаково хорошую поддержку получают как новички, так и эксперты. Все примеры
далее будут относиться к этому браузеру, так что вы сможете сами оценить диапазон
справочной информации, предлагаемой всего лишь для одного продукта.
Когда вы заходите на веб-сайт Firefox, чтобы загрузить браузер, вас приветствует
страница с описанием процесса установки и недвусмысленным призывом к действию
(рис. 2.41).
При первом запуске вы видите экран приветствия, способный заинтриговать любого пользователя: простые способы настройки внешнего вида приложения, связи
с социальными сетями, ссылки на справочные ресурсы (см. рис. 2.42). Эта страница
также подтверждает, что установка прошла успешно; если пользователю потребуется
нечто большее, например загрузить обновления безопасности, то сообщение об этом
он также увидит на странице приветствия.
98 Глава 2 • Организация содержимого: информационная архитектура и структура
Рис. 2.41. Страница загрузки браузера Firefox
Рис. 2.42. Страница приветствия Firefox
Шаблоны 99
Для каждого инструмента в окне браузера выводится всплывающая подсказка
(рис. 2.43). Основные кнопки — назад, далее, обновить, домой — знакомы боль­шинству
пользователей, но менее очевидные элементы могут нуждаться в пояснении.
В основных текстовых полях используются приглашения к вводу (см. шаблон Input
Prompts) (рис. 2.44). Это более удобный вариант, чем подсказки при вводе (шаблон
Input Hints), которые отображаются рядом с текстовыми полями, так как приглашения не загромождают интерфейс. Помимо этого, когда пользователь начинает вводить
текст, стирая приглашение, никакая ценная информация не будет потеряна. Оба вышеупомянутых шаблона рассматриваются в главе 8.
Рис. 2.43. Всплывающие подсказки в Firefox
Рис. 2.44. Приглашения к вводу в Firefox
Некоторые диалоговые окна сами рассказывают о себе, как показано на рис. 2.45.
Рис. 2.45. Диалоговое окно панели инструментов в Firefox
100 Глава 2 • Организация содержимого: информационная архитектура и структура
В других диалоговых окнах содержатся ссылки на официальную справочную систему; соответствующая страница справки открывается в окне браузера, когда пользователь щелкает на круглой фиолетовой кнопке в нижнем левом углу (рис. 2.46 и 2.47).
Рис. 2.46. Диалоговое окно настроек Firefox
Рис. 2.47. Страница справки для диалогового окна настроек Firefox
Шаблоны 101
Наконец, когда возможности всех остальных источников помощи исчерпаны, пользователь может обратиться за советом к широкому пользовательскому сообществу. Мы
уже вышли за пределы дизайна интерфейсов как такового, но все еще говорим о дизайне продукта: впечатление пользователя не ограничивается битами информации,
представленными на его компьютере. Оно включает взаимодействие с организацией,
его сотрудниками и другими представителями, с веб-сайтом (рис. 2.48).
Возникновение подобного сообщества возможно только для продуктов, в которых
пользователи глубоко заинтересованы — возможно потому, что каждый день используют его дома или на работе (как в ситуации с Firefox), или потому, что у них возникает
к продукту сильная эмоциональная привязанность.
Рис. 2.48. Форумы поддержки Firefox
Подскажите дорогу:
навигация, указатели
и ориентирование
3
Шаблоны, рассматриваемые в этой главе, посвящены проблеме навигации. Как пользователь узнает, где он находится, куда идти дальше и как попасть из одного места
в другое?
Причина, почему я называю это «проблемой», такова. Навигация по веб-сайту или
приложению аналогична ежедневным поездкам на работу из пригорода. Это необходимо делать для того, чтобы попадать в нужное место, но это скучно, иногда выводит
из себя, а время и энергия, которые тратятся на поездку, кажутся потерянными. Ведь
можно же было потратить их на что-то более интересное, например компьютерную
игру или выполнение своей непосредственной работы.
Лучший вариант подобных поездок и аналогичного времяпрепровождения — их
отсутствие. Довольно удобно всегда иметь все под рукой и не испытывать необходимости куда-то за этим ехать. Аналогично, пользователю комфортнее работать, когда
большинство инструментов в интерфейсе лежат в пределах досягаемости, особенно
если речь идет о подготовленных и опытных людях (то есть пользователях, которые
уже запомнили, где что находится). Иногда нужно помещать редко используемые
инструменты на отдельные вкладки, чтобы они не загромождали интерфейс, а иногда
имеет смысл группировать элементы на других страницах. Все способы хороши, если
только «расстояния», на которые приходится перемещаться пользователю, остаются
минимальными.
Таким образом, чем меньше, тем лучше. Давайте на минуту обратимся к терминологии, а затем снова вернемся к этой концепции.
Не теряйтесь
Предположим, вы создали большой веб-сайт или приложение, которое понадобилось
разбить на разделы, подразделы, специализированные инструменты, страницы, окна,
мастера и т. д. Как помочь пользователю найти нужный путь?
Указатели (signpost) — это средства, помогающие пользователям разобраться
с ближайшими окрестностями. Наиболее распространенные указатели — это заголовки
страниц и окон, логотипы и прочие средства обозначения марки продукта, а также
вкладки и индикаторы выбора. Такие шаблоны и техники, как продуманные ссылки
глобальной и локальной навигации, Sequence Map (Карта последовательности),
Не теряйтесь 103
Breadcrumbs (Хлебные крошки) и Annotated Scrollbar (Полоса прокрутки с примечаниями), описанные в этом разделе, подскажут пользователю, где он находится
и, зачастую, куда он может попасть, сделав один или несколько шагов. Они помогают
не потеряться и спланировать следующие действия.
Поиск маршрута, ведущего к определенной цели, называется ориентированием
(wayfinding). Термин вполне понятен. Но сам процесс ориентирования является объектом исследований, проводимых специалистами в сфере когнитивной науки, дизайна
окружающей среды и веб-дизайна. Помогают пользователям найти правильный путь
следующие несложные элементы.
Хорошие указатели
Ясные недвусмысленные метки подсказывают, где находится то, что вы ищете,
и говорят, как туда добраться. Указатели находятся именно там, где их ожидаешь
увидеть, и пользователь никогда не остается без руководства к действию в момент
принятия решений. Можете проверить, как это реализовано в интерфейсе, который
вы разрабатываете: пройдите по всем маршрутам, соответствующим основным
вариантам использования приложения. В каждой точке, где пользователь будет
решать, куда пойти дальше, обязательно предусмотрите соответствующий указатель или метку. На первой странице добавьте привлекающий внимание «призыв
к действию», который пользователь не сможет не заметить.
Внешние ориентиры
В ресторане вы будете искать туалет в дальней части зала, а в месте пересечения
дорожки с изгородью вы ожидаете увидеть калитку. Аналогично, считается, что
кнопка, закрывающая диалоговое окно, должна находиться в его правом верхнем
углу, а логотип — в верхнем левом углу веб-страницы. Помните, что такие ориентиры обычно определяются культурными традициями, и новичок (например, кто-то,
кому никогда раньше не доводилось использовать данную операционную систему)
может не знать о них.
Карты
Иногда люди переходят от указателя к указателю и от ссылки к ссылке, не понимая в действительности, куда они направляются в более масштабной системе
координат. (Вам когда-нибудь приходилось искать дорогу в незнакомом аэропорту? Это примерно то же самое.) Однако есть люди, которые предпочитают иметь
полную картину местности, особенно если они часто ее посещают. Там, где нет
хороших указателей, или на тесно застроенной площади, например в городском
квартале, карты могут стать единственным средством навигации.
В этой главе вы найдете шаблон Clear Entry Points (Понятные точки входа), являющийся примером тщательно продуманной системы указательных знаков в сочетании
с внешними ориентирами — ссылки должны быть оформлены так, чтобы выделяться
на странице шаблона Sequence Map (Карта последовательности) — как понятно из
названия, речь пойдет о карте; также для представления карт виртуальных пространств
можно использовать шаблон Overview Plus Detail (Обзор и детали) (глава 7). Шаблон
Modal Panel (Модальная панель) выступает в роли как бы внешнего ориентира, так как,
выходя из модальной панели, вы попадаете в точности туда, где только что находились.
Здесь я сравниваю виртуальные пространства с физическими, однако виртуальные
пространства обладают уникальной возможностью обеспечения удобства навигации,
104 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
которая в физических пространствах (пока) отсутствует: Escape Hatch (Аварийный
люк). Где бы вы ни находились, просто щелкните на этой ссылке, и вы окажетесь на
знакомой странице. Просто, как кабина для телепортации. Или волшебные башмачки
Элли, с помощью которых она возвратилась домой из Изумрудного города.
Цена навигации
Когда вы заходите в незнакомое помещение, то первым делом осматриваетесь. За
долю секунды вы успеваете заметить форму комнаты, меблировку, освещение, выходы и прочие ориентиры; очень быстро вы делаете некоторые предположения относительно того, что это за комната и насколько она соответствует цели, которую вы
преследовали, зайдя в нее. Затем вам нужно сделать то, зачем вы пришли. Где? Как?
Возможно, вы сумеете ответить на эти вопросы мгновенно, а может, и нет. Вас также
могут отвлечь другие интересные вещи в этом помещении.
Посещение веб-страницы или открывание окна также подразумевают некоторые
умственные усилия. Каждый раз возникает необходимость разбираться в новом пространстве: вы замечаете его форму, расположение элементов, содержимое, варианты
выхода и способы выполнения вашей задачи. На это тратятся силы и время. Переключение контекста заставляет перефокусировать внимание и приспосабливаться
к новому окружению.
Даже если вам уже знакомо окно (или комната), в которое вы только что попали, все
равно без затрат не обойтись. Небольшие, но они все же присутствуют, особенно если
учесть фактическое время, затрачиваемое на отображение окна или загрузку страницы.
Все это относится к работе с веб-страницами, окнами приложений, диалоговыми
окнами или экранами на различных устройствах. Решения, которые пользователи принимают, размышляя, куда пойти дальше, практически одинаковы — всегда приходится
читать метки, расшифровывать значки или отдавать себя на волю судьбы, щелкая на
ссылках или кнопках, назначение которых непонятно.
Помимо этого, решения людей в значительной степени зависят от времени загрузки. Если после щелчка на каком-то элементе содержимое загружается слишком
долго — или вообще не загружается, — пользователь испытывает разочарование.
В результате он может попросту закрыть страницу, не найдя того, за чем пришел
(итак, сколько пользователей вы ежедневно теряете из-за видеопроигрывателя, расположенного сбоку страницы?). Также помните, что никому не захочется исследовать
сайт, все страницы которого загружаются крайне медленно.
Именно по этой причине компании, подобные Google, старательно работают над сокращением времени загрузки: любые задержки могут стоить им потери пользователей.
Минимизация расстояний
Теперь вы знаете, что переход со страницы на страницу имеет определенную «стоимость», и понимаете, почему так важно минимизировать число прыжков с одного
места на другое. Если вам необходимо реализовать распространенную задачу, включающую множество переходов, постарайтесь все же сократить количество прыжков
до одного-двух.
Навигационные модели 105
Настоящий выигрыш в эффективности может дать структура приложения. Одна
из самых отвратительных вещей, которые дизайнер может заставлять делать пользователей, — это проходить по многоуровневой иерархии страниц или диалоговых окон
каждый раз, когда возникает необходимость выполнить простую рутинную задачу.
(Еще хуже — подвести пользователя к последнему этапу и сообщить, что завершить
задачу невозможно из-за отсутствия какого-либо важного предварительного условия,
а затем снова отправить в начало дороги.)
Можно ли разработать дизайн приложения так, чтобы 80 % наиболее распространенных задач или вариантов использования не включали ни одного или максимум
одно переключение контекста?
В определенных типах приложений это сделать довольно сложно. Конкретный
инструмент слишком велик, чтобы расположить его на главной странице? Попробуйте
уменьшить его: уберите элементы управления, сократите метки, используйте специальные элементы управления, позволяющие экономить пространство. Инструмент
сбивает пользователя с толку, когда находится на главной странице вместе с остальными элементами? Снова — попробуйте уменьшить его, окружить пустым пространством
или уберите в такое место, где он не будет бросаться в глаза. Можно ли применить
прогрессивное обнаружение для постепенного вывода дополнительного содержимого
на страницу? Можно ли скрыть часть содержимого с помощью модульных вкладок
или интерфейса типа «аккордеон»?
Иногда удобнее прятать функциональность на страницах, для доступа к которым
требуется сделать больше одного прыжка. Это относится к тем 20 %, оставшимся
после того, как вы сделали 80 % функциональности легко доступной. Также может
возникнуть такая ситуация, когда в приложении простота представления окажется
важнее, чем экономия одного-двух прыжков. Редко используемую функциональность
рекомендуется помещать за дополнительную «дверь» (также следуя правилу 80/20).
Как всегда, если появятся сомнения, действуйте в соответствии со здравым смыслом:
пробуйте разные типы дизайна и тестируйте удобство использования.
Навигационные модели
Какова навигационная модель вашего сайта или приложения? Другими словами, как
связаны между собой различные экраны (или страницы, или пространства) и как
пользователи перемещаются между ними?
Для начала немного терминологии.
Глобальная навигация — это то, что можно увидеть на главном экране любого сайта
или приложения. Обычно она имеет форму меню, вкладок и/или боковых колонок,
с помощью которых пользователи перемещаются по формальной навигационной
структуре сайта. (В предыдущем издании этой книги глобальная навигация определялась как отдельный шаблон. Сегодня ее элементы настолько широко распространены
и понятны, что не требуют подобного обособления.)
Служебная навигация, элементы которой также располагаются на главном экране,
включает ссылки и инструменты, не связанные с основным содержимым сайта или
приложения: вход в систему, справка, печать, редактор настроек (см. одноименный
шаблон в главе 2), выбор языка и т. д.
106 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Ассоциативная и поточная навигация — это ссылки внутри или рядом с фактическим содержимым. По мере того как пользователь читает или как-то по-другому
взаимодействует с сайтом, через эти ссылки он получает возможность ознакомиться
с наиболее подходящим или интересным для него содержимым. Они связывают фрагменты содержимого в единое целое.
Давайте теперь взглянем на несколько моделей, которые можно встретить на типичных сайтах или в приложениях.
Спицы колеса
Наиболее часто эта архитектура (рис. 3.1)
применяется на мобильных устройствах. Все
основные разделы сайта или приложения перечислены на домашнем экране, «втулке колеса».
Пользователь щелкает или касается ссылок,
делает то, что ему необходимо, и возвращается
к «втулке», чтобы отправиться по другой «спице колеса». Экраны-спицы жестко ограничены
одной задачей, экранное пространство расходуется экономно. Места для перечисления других
основных разделов может просто не быть. Хороший пример такой архитектуры — домашний
Рис. 3.1. Спицы колеса
экран iPhone; также можно вспомнить шаблон
Menu Page (Страница меню), применяемый на
некоторых веб-сайтах.
Полная связность
На базе этой модели строятся многие вебсайты. Домашняя страница или главный экран
существует, но он, как и каждая другая страница,
связан со всеми прочими страницами. На каждом
экране присутствует глобальная навигационная
структура, такая как меню. Глобальная навигация может быть одноуровневой (как показано на
рис. 3.2 для пяти страниц) или глубокой и сложной, с множеством уровней и глубоко запрятанным содержимым. Но если пользователь может
с текущей страницы перейти на любую другую
Рис. 3.2. Полная связность
всего лишь одним прыжком, полная связность
сохраняется.
Многоуровневая структура
Это также популярный вариант архитектуры сайта (рис. 3.3). Главные страницы
полностью связаны между собой, но подстраницы связаны только внутри своих
разделов (и, зачастую, соединены с главными страницами других разделов при
помощи инструментов глобальной навигации). Вы наверняка встречали такие
сайты, где подстраницы перечислены на боковых колонках или на подвкладках
и становятся видны пользователю только после того, как он щелкнет на ссылке,
ведущей на главную страницу или категорию. Для того чтобы попасть с одной произвольной подстраницы на другую, потребуется совершить два или более прыж-
Навигационные модели 107
ков. Добавление раскрывающихся меню, внедрение шаблона Fat Menus (Полные
меню) и Sitemap Footer (Карта сайта внизу страницы) на многоуровневом сайте
превращает его в полносвязный, что предпочтительнее.
Рис. 3.3. Многоуровневая структура
Пошаговая структура
Слайд-шоу, технологические цепочки и мастера (см. одноименный шаблон
в главе 2) шаг за шагом проводят пользователя через последовательность экранов
в строго определенном порядке (рис. 3.4). На каждой странице обязательно присутствуют заметные ссылки Назад/Далее.
Рис. 3.4. Пошаговая структура
Пирамида
Вариант пошаговой модели — пирамида — состоит из центрального экрана или
страницы меню, на которой перечислена
вся последовательность элементов или
подстраниц (рис. 3.5). Пользователь выбирает любой элемент, переходит к нему,
а затем использует ссылки Назад/Далее
для перемещения между элементами
в строгом порядке. В любой момент он
также может вернуться на центральный
экран. Подробнее об этом рассказывается при рассмотрении шаблона Pyramid
(Пирамида) далее в этой главе.
Рис. 3.5. Пирамида
108 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Панорама с приближением
Некоторые объекты удобнее представлять с помощью
одного большого пространства, а не множества составляющих. В эту категорию попадают карты, большие изображения, длинные текстовые документы, информационная графика и представления, растянутые во времени (такие как
звук и видео). В главе 7 о них рассказывается более подробно. Перемещение по панораме и приближение отдельных
частей — это также способы навигации, поэтому предложите пользователям соответствующие элементы управления:
Рис. 3.6. Панорама
перемещение по горизонтали и вертикали, приближение
с приближением
и удаление, возврат на исходную точку и в исходное состояние. Такая структура схематично показана на рис. 3.6.
Плоская навигация
В некоторых типах приложений средства навигации почти не требуются. Вспомните приложения формата «холст и палитра», такие как Photoshop, или сложные
программы, подобные Excel. Множество функций и инструментов с легкостью
открываются через меню, панели инструментов и палитры. Инструменты, которые реже оказываются востребованными, можно убирать на модальные панели
или в глубь пошаговых последовательностей. Такой тип приложений качественно
отличается от остальных перечисленных здесь стилей навигации: пользователь
всегда знает, где он находится, но ему не всегда удается быстро найти нужные инструменты, просто потому, что в каждый момент времени ему доступно огромное
количество различных возможностей и функций.
Модальная панель
Это пространство, не предлагающее почти
никаких инструментов навигации. Пользователь может лишь подтвердить, что он прочитал сообщение на панели, заполнить форму
или попросту закрыть панель (рис. 3.7). Модальные панели часто отображаются поверх
основного экрана или страницы, и они используются для небольших, сконцентрированных
задач, требующих полного внимания польРис. 3.7. Модальная панель
зователя. Подробнее об этом рассказывается
в шаблоне Modal Panel (Модальная панель).
A
Понятные точки входа
Как пользователь узнает, с чего начать, если
окажется на сложном веб-сайте или в приложении? Шаблон Clear Entry Points (Понятные
точки входа) проясняет ситуацию (рис. 3.8).
Человек, впервые открывший сайт или приложение, или тот, кто в последний раз польB
зовался ими достаточно давно, избавляется
Рис. 3.8. Понятные точки входа
от необходимости заново изучать интерфейс.
Навигационные модели 109
Закладки
Закладки (рис. 3.9), постоянные ссылhttp://
ки, глубокие ссылки и шаблон Deeplinked State (Глубокая ссылка) — это все
способы в любой момент быстро попасть
в избранную точку сайта и приложения,
даже если она находится глубоко в навигационной структуре. Пользователю
не нужно заново проходить по множеству
ссылок и меню, чтобы оказаться на нужРис. 3.9. Закладки
ной странице.
Аварийный люк
Если пользователь безнадежно запутался в приложении, не может избавиться
от постоянно вылезающей ошибки или
попадает в глубь навигационной структуры на страницу, контекст которой даже
не понимает, ему необходим аварийный
люк (рис. 3.10). Это хорошо заметная, интуитивно понятная ссылка, ведущая на
знакомую страницу или состояние. См.
Рис. 3.10. Аварийный люк
шаблон Escape Hatch (Аварийный люк).
Относительно этих навигационных моделей необходимо сделать несколько замечаний. Во-первых, их не обязательно использовать по отдельности. Приложение или
сайт может объединять несколько вариантов, в частности модальные панели, понятные
точки входа, закладки и аварийный люк. Это локальные структуры, не влияющие на
глобальную стратегию навигации.
Во-вторых, некоторые из перечисленных механизмов ограничивают возможности
навигации. В большинстве случаев открытый доступ и короткие перемещения считаются плюсом. Но если пользователь находится в середине полноэкранного слайд-шоу,
ему совершенно не нужно видеть сложное глобальное навигационное меню! Он хочет
сфокусироваться на содержимом слайд-шоу, поэтому ему достаточно ссылок Назад/
Далее и аварийного люка. Представление полного набора навигационных элементов
требует определенных жертв: они занимают место, загромождают экран, увеличивают
когнитивную нагрузку.
В-третьих, все эти механизмы и шаблоны на практике можно реализовывать поразному. На сложном веб-сайте или в приложении глобальная навигация может осуществляться с помощью вкладок, меню или дерева сбоку экрана — этот технический
вопрос решается на этапе проектирования макета страницы. Модальную панель можно
реализовать в формате «лайтбокса» или в виде традиционного модального диалогового
окна — и снова это решение можно отложить до момента, когда вы будете определять,
какие фрагменты интерфейса будут модальными.
Визуальный дизайн проектируется на поздних этапах создания приложения, после
информационной архитектуры и навигационных моделей.
110 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Дизайнерские условности для веб-сайтов
Очень хорошо, когда навигационная модель отделена от ее визуального дизайна. Это
помогает обдуманно и творчески подойти к дизайну самих страниц. Однако на вебсайтах давно прижились определенные условности, относящиеся к расположению
навигационных элементов, и было бы недальновидно игнорировать их.
Элементы глобальной навигации почти всегда располагаются наверху или слева на
веб-странице; иногда и там, и там. Их редко помещают справа, так как это может привести к проблемам с размером страницы и горизонтальной прокруткой (исключение
составляет дизайн на основе шаблона Liquid Layout («Резиновый» макет), подробнее
о котором рассказывается в главе 4).
Два относительно новых подхода к глобальной навигации предлагают шаблоны
Fat Menus (Полные меню) и Sitemap Footer (Карта сайта внизу страницы). Пользователю демонстрируется вся структура иерархического сайта, однако при этом
расходуется много экранного пространства наверху или внизу страницы. Как говорилось выше, эти шаблоны превращают многоуровневую навигационную модель
в полносвязную.
Если, открывая веб-сайт, пользователи чаще всего сразу же входят в систему со
своим именем и паролем, то в верхнем правом углу можно вывести для них набор
служебных навигационных элементов. Обычно именно там пользователь ищет инструменты, подобные настройкам учетной записи или профиля, ссылке для выхода из
системы, справочной информации и т. д. Подробнее об этом рассказывается в шаблоне
Sign-in Tools (Инструменты регистрации).
Распространенная форма ассоциативной навигации — ссылки, встроенные в содержимое или расположенные рядом с ним, предназначенные для тематического
объединения элементов — это раздел или панель «Похожие статьи». Этот инструмент
часто применяется на новостных сайтах и блогах. Когда пользователь открывает одну
статью, на боковой панели или внизу страницы выводится список статей на эту же
или похожую тему или написанных тем же автором.
Теги — как определяемые пользователем, так и встроенные в систему — также поддерживают ассоциативную навигацию. Облака тегов помогают находить тематические
материалы на многих сайтах, особенно если статей чрезвычайно много или они разбиты на множество подкатегорий. (На небольших сайтах и блогах они работают не
так хорошо.) Самый распространенный вариант расположения — перечисление тегов
в конце статьи, к которой они относятся. При щелчке на теге открывается целый набор
статей, объединенных этим тегом.
Если сайт пользуется преимуществами интеграции социальных сетей, то на сцену
выходит еще больше инструментов навигации. На главной странице может находиться поле новостей (шаблон News Box), отсылающее пользователей к элементам,
опуб­ликованным последними. В поле наиболее популярного содержимого (шаблон
Content Leaderboards) отображаются новости, которыми пользователи делятся или
которые комментируют чаще всего. Раздел последних разговоров (шаблон Recent
Chatter) отсылает к текущим беседам между различными пользователям. Социальные
ссылки и виджеты для рассылки (шаблоны Social Links и Sharing Widgets) напрямую соединяют пользователей с социальными службами. Этим шаблонам посвящена
глава 9.
Шаблоны 111
Шаблоны
Напомню, что в этой главе мы говорим о нескольких аспектах навигации: общей
структуре или модели, понимании, где вы находитесь в данный момент, выяснении,
куда пойти дальше, и эффективном достижении поставленной цели.
Мы начнем с шаблонов, описывающих навигационные модели и более-менее независимых от макетов экрана.
1. Clear Entry Points (Понятные точки входа).
2. Menu Page (Страница меню).
3. Pyramid (Пирамида).
4. Modal Panel (Модальная панель).
5. Deep-linked State (Глубокая ссылка).
6. Escape Hatch (Аварийный люк).
Следующие шаблоны объединяют макет и модель традиционного веб-сайта.
1. Fat Menus (Полные меню).
2. Sitemap Footer (Карта сайта внизу страницы).
3. Sign-in Tools (Инструменты регистрации).
Следующие несколько шаблонов хорошо работают в качестве указателей «Вы
находитесь здесь» (а также хорошо проработанных элементов глобальной навигации). Sequence Map (Карта последовательности), Breadcrumbs (Хлебные крошки)
и Annotated Scrollbar (Полоса прокрутки с примечаниями) также служат интерактивными картами содержимого. Annotated Scrollbar (Полоса прокрутки с примечаниями)
больше подходит для моделей типа «панорама с приближением», чем для нескольких
взаимосвязанных страниц.
1. Sequence Map (Карта последовательности).
2. Breadcrumbs (Хлебные крошки).
3. Annotated Scrollbar (Полоса прокрутки с примечаниями).
Шаблон Animated Transition (Анимированный переход) помогает пользователям не терять ориентацию при перемещении из одного места в другое. Это визуальный трюк и ничего более, но он очень эффективен в том смысле, что позволяет
пользователю сохранить понимание того, где он находится и что происходит.
4. Animated Transition (Анимированный
A
переход).
Clear Entry Points
(Понятные точки входа)
Что
В интерфейсе должно быть лишь несколько точек входа; ориентируйте их на задачи
и давайте понятные названия. Используйте
понятные призывы к действию.
B
Рис. 3.11. Схематическое
представление шаблона Cler Entry
Points (Понятные точки входа)
112 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Использовать, когда…
Вы разрабатываете веб-сайт или приложение, которое часто будет использоваться
новичками или случайными пользователями. Большинству пользователей будет
проще разобраться в происходящем, если они прочитают короткий вступительный
текст, выполнят несложную задачу или выберут из небольшого списка один из часто
используемых вариантов.
Однако если назначение приложения очевидно для любого, и если большинство
пользователей будет раздражать очередной необходимый шаг навигации (как, например, в приложениях, предназначенных для подготовленных и опытных пользователей), то использовать данный шаблон не рекомендуется.
Почему
Некоторые приложения и веб-сайты предоставляют пользователю некую беспорядочную смесь информации и структуры: множество каскадных панелей, незнакомые
термины и фразы, посторонние объявления или панели инструментов, по неизвестным
причинам отключенные. Они не дают сомневающемуся пользователю никаких четких
инструкций относительно того, что сделать в первую очередь. «Ну, я пришел — и что
же дальше?»
Для таких пользователей перечислите на экране несколько вариантов, позволяющих приступить к работе. Если они будут отвечать их ожиданиям, то пользователи
смогут с уверенностью выбрать нужный и начать работу — это также позволит им
получить мгновенное вознаграждение. Если же это не так, то пользователю хотя бы
будет понятно, для чего предназначены сайт или приложение, так как важные задачи
или категории будут определены с самого начала. Таким образом, вы сделаете приложение более понятным с первого взгляда.
Как
Когда пользователь заходит на веб-сайт или запускает приложение, создайте для него
при помощи этих точек входа «двери» в основное содержимое этого сайта или приложения. После того как пользователь выберет одну из них, аккуратно и недвусмысленно
переведите его в само приложение и познакомьте с ним, чтобы, в достаточной мере
ознакомившись с контекстом, пользователь мог продолжать работу самостоятельно.
В общем, эти точки входа должны описывать практически все причины, по которым
человек мог выбрать данное приложение или веб-сайт. Точек входа может быть однадве или множество; это зависит от того, какой вариант лучше подходит для вашего
конкретного дизайна. Однако описывать точки входа необходимо такими словами,
которые без труда поймут пользователи, впервые работающие с этим приложением, —
это не место для специфических терминов.
Визуально точки входа следует представлять, выделяя их пропорционально значимости.
На домашней или начальной странице большинства сайтов обычно дополнительно
выводится список навигационных ссылок: глобальная навигация, служебная навигация и т. д. Эти ссылки должны быть мельче и менее заметными, чем понятные точки
входа. Они более специализированы и не ведут напрямую в сердце веб-сайта, точно
так же, как задняя дверь в доме не позволяет сразу попасть в гостиную. «Парадные
двери» — это более привычные точки входа .
Шаблоны 113
Примеры
На веб-сайте Apple главная страница раздела, посвященного устройству iPad
(рис. 3.12), не должна содержать слишком много элементов. Она идентифицирует
продукт, показывает его пользователям в наиболее привлекательном виде и направляет их к ресурсам, которые позволят купить это устройство или больше узнать о нем.
Глобальная навигация визуально отступает на второй план, уступая сцену сильным,
хорошо определенным точкам входа. Остальные области страницы заполнены текстом
и ссылками, чтобы экран не выглядел пустым, но это все, что пользователь видит, пока
не прокручивает страницу или не уходит с нее.
Рис. 3.12. Страница iPad на веб-сайте Apple
При запуске Fireworks и других приложений сначала открывается диалоговое окно
приветствия (рис. 3.13). Оно рассказывает новому или не часто заходящему сюда
пользователю о самых популярных из возможных действий: создать новый элемент,
открыть существующий или почитать справочные ресурсы. (Удобно, что в этом диалоговом окне предусмотрен флажок, отключающий его вывод при очередном запуске
приложения. Опытным пользователям окно приветствия только мешает, так как добавляет лишний шаг к процессу начала работы, но никакой ценности при этом для
них не несет.)
114 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Рис. 3.13. Диалоговое окно приветствия в Fireworks
В других библиотеках
http://quince.infragistics.com/Patterns/Clear%20Entry%20Points.aspx
Menu Page (Страница меню)
Рис. 3.14. Веб-сайт Craigslist
Шаблоны 115
Что
Заполните страницу списком ссылок на насыщенные содержимым страницы вашего
сайта или приложения. Для каждой ссылки выведите достаточно сведений, чтобы
пользователь мог сделать уверенный выбор. Другого значимого содержимого на
странице быть не должно.
Использовать, когда...
Вы разрабатываете домашнюю страницу, экран приветствия или любой другой экран,
предназначение которого — служить «оглавлением». Он предоставляет пользователю
всевозможные направления для исследования. Места для специального содержимого
(такого как статья, видео или реклама) может не быть. А возможно, вы просто хотите
позволить пользователю выбрать свой путь, не отвлекая его на всяческие раздражители.
Шаблон Menu Pages (Страницы меню) особенно необходим мобильным версиям
приложений и сайтов из-за небольшого размера их экранов.
Если вы хотите «зацепить» пользователей своего (полноразмерного) веб-сайта,
возможно, стоит выделить часть пространства для каких-то привлекающих внимание
и способных заинтересовать посетителя элементов. Тогда Menu Pages (Страницы
меню) будет не самым удачным выбором. Помимо этого, сайт должен недвусмысленно
сообщать о своем назначении и ценности — лучше потратить пространство первой
страницы именно на это.
Для того чтобы решиться на создание страницы меню, требуется смелость, так как
вы должны быть совершенно уверены в том, что:
‰‰посетителям известно, о чем этот сайт или приложение;
‰‰они знают, за чем пришли и как это найти;
‰‰их не интересуют новости, обновления и статьи.
Почему
Благодаря отсутствию отвлекающих элементов пользователи могут полностью сосредоточиться на доступных элементах навигации. Вам предоставляется целый экран
(или, как минимум, большая его часть) для организации, объяснения и иллюстрирования ссылок. Таким образом, вы сможете направить пользователей к тем страницам,
которые наилучшим образом отвечают их требованиям.
Как
При создании дизайна для мобильного устройства шаблон Menu Pages (Страницы
меню) становится одним из важнейших инструментов, особенно если речь идет о вебсайтах и приложениях с многоуровневой функциональностью. Метки списков должны
быть короткими, цели достаточно большими, чтобы не промахнуться при прикосновении к экрану, а иерархия — не слишком глубокой.
Остальное также применимо к полноэкранным сайтам и приложениям.
Во-первых, обозначайте ссылки и предоставляйте ровно столько контекстной информации, чтобы пользователю было несложно выбрать направление. Это не всегда
просто. Удобно, когда каждая ссылка дополняется кратким описанием или анонсом,
но текст занимает много места на странице. То же самое относится и к эскизам — они
отлично выглядят, но много ли от них пользы?
116 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Взгляните на рис. 3.15 и 3.16. Посетителям сайта MIT������������������������
���������������������������
уже известен смысл ссылок — это названия учебных программ, — поэтому дополнительная информация не
требуется. Получается, что дизайнер может уместить в один экран больше полезных
ссылок. Страница становится насыщенной информацией и очень удобной для знающего человека.
Рис. 3.15. Страница меню на веб-сайте MIT
С другой стороны, статьи на странице ресурсов AIGA только выигрывают от
описательного текста и изображений. Одного заголовка не всегда достаточно, чтобы
посетитель захотел щелкнуть его и прочитать статью. (Помните, однако, что если
пользователь щелкает на ссылке, но открывшаяся страница не соответствует его
ожиданиям, то он быстро разочаровывается. Удостоверьтесь, что в вашем дизайне используются точные и честные описания!)
Во-вторых, обратите внимание на визуальную организацию списка ссылок. Он
разбит на категории, а может быть, составляет двух- или трехуровневую иерархическую структуру? Он отсортирован по дате? Воплотите эту организационную схему
в дизайне списка. Подробнее об этом рассказывается в главе 5.
В-третьих, не забудьте поле поиска.
Наконец, подумайте, хотите ли вы на этой странице сказать посетителям чтонибудь еще? Пространство домашней страницы особенно ценно, так как именно она
в первую очередь привлекает пользователей. У вас есть интересная статья, анонс которой можно поместить на первую страницу? Интересный рисунок или фотография?
Поле новостей с привлекательным содержимым (см. главу 9)? Тем не менее, если вам
Шаблоны 117
кажется, что такой элемент будет скорее раздражать посетителей, а не интриговать их,
лучше создайте чистую страницу меню, без дополнений.
Рис. 3.16. Страница меню на веб-сайте AIGA
Примеры
На веб-сайте MIT�������������������������������������������������������������
����������������������������������������������������������������
(Массачусетского технологического института) страница ������
Education (Образование) содержит очень мало объяснений, но множество ссылок. Если
пользователь зашел сюда, то это, по мнению создателей сайта, означает, что он ищет
сведения об определенном факультете или ресурсе и его не интересуют рассказы
о, скажем, истории института. Цель данной страницы — направить посетителя в тот
раздел сайта, который ответит на его четко поставленный вопрос (то же самое относится и к примеру с Craiglist на рис. 3.14).
Веб-сайт AIGA содержит множество ресурсов для профессиональных дизайнеров.
Категории верхнего уровня перечислены в форме элементов глобальной навигации,
но полный список находится на странице меню, показанной на рис. 3.16. Для каждой
статьи выводится эскиз изображения и краткий обзор; насыщенное форматирование
118 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
предоставляет посетителю достаточно контекста, чтобы он мог решить, стоит ли потратить время на прочтение той или иной статьи.
Наконец, страница меню на веб-сайте музея современного искусства содержит
большие изображения и совсем немного текста (рис. 3.17). Страница и сама по себе
выглядит очень привлекательно, размещать на ней какое-то особое содержимое не
требуется.
Рис. 3.17. Страница меню на веб-сайте MoMA
В других библиотеках
В шаблоне Directory Navigation (Навигация по каталогу) приводится специализированный пример использования страницы меню:
http://welie.com/patterns/showPattern.php?patternID=directory
Pyramid (Пирамида)
Что
Свяжите последовательность страниц
ссыл­ками Назад/Далее. Объедините это последовательное представление с главной
страницей, на которой есть ссылки на все
страницы в последовательности и на которую можно попасть с любой страницы.
Использовать, когда…
На веб-сайте или в приложении предусмотрена последовательность страниц, кото-
Рис. 3.18. Схематическое представление
шаблона Pyramid (Пирамида)
Шаблоны 119
рую пользователь обычно просматривает одну за другой, например слайд-шоу, мастер,
главы книги или набор продуктов. Некоторые пользователи хотели бы просматривать
их в произвольном порядке по одной за раз, поэтому им нужна возможность выбирать
желаемое из полного списка элементов.
Навигационная модель «пирамида» используется почти во всех диспетчерах изображений (см. одноименный шаблон в главе 2). Иногда пользователи просматривают
изображения по отдельности, а в других случаях пролистывают целые последовательности. Шаблон Pyramid (Пирамида) поддерживает оба варианта.
Почему
Этот шаблон уменьшает количество переходов, которые пользователю приходится
делать для перемещения по приложению. С его помощью можно сделать навигацию
более эффективной и в то же время явно продемонстрировать логическую связь между
страницами.
Ссылки или кнопки Назад/Далее (или Предыдущая/Следующая) прекрасно подходят
для этого. Люди всегда знают, для чего они нужны. Однако пользователю не всегда
нравится оказываться заблокированным в последовательности страниц, из которой
невозможно с легкостью выбраться: если он прошел уже семь страниц, то для того,
чтобы вернуться к началу, ему нужно будет семь раз щелкнуть на кнопке Назад? Нет,
так не интересно!
Поместив на каждую из страниц в последовательности ссылку обратно на родительскую страницу, вы предоставляете пользователю выбор. Теперь вместо двух
основных направлений у него есть уже три: назад, вперед и наверх. Интерфейс не
слишком усложнился, но пользователю, который просматривает содержимое страниц
(или человеку, изменившему решение на полпути), понадобится намного меньше переходов, чтобы попасть туда, куда он стремится. Это намного удобнее.
Помимо этого, логическая связь отдельных страниц удобна, когда пользователю
действительно нужно просмотреть все страницы. Без ссылок Назад/Далее ему пришлось бы постоянно переходить на главную страницу и оттуда на следующую; проще
сдаться и покинуть приложение.
Как
Перечислите все элементы или страницы второго уровня на родительской странице
в правильном порядке. Используйте такое представление списка, которое соответствует типу элементов (см. главу 5): например, эскизы для фотографий или насыщенный
текстовый список для статей. Щелчок на элементе или ссылке должен переносить
пользователя на страницу, посвященную этому элементу.
Поместите кнопки или ссылки Назад и Далее на каждую из страниц в цепочке. На
многих сайтах также выводится небольшое представление следующего элемента, например заголовок статьи или эскиз изображения (как на веб-сайте Flickr на рис. 3.19).
Помимо этого, добавьте ссылку Вверх, переносящую пользователя обратно на родительскую страницу, и пометьте ее Вернуться к <название_главной_страницы> или как-то
в этом роде.
Один из вариантов шаблона Pyramid (Пирамида) превращает статичную линейную
последовательность в цикл, связывая последнюю страницу с первой без необходимости возвращения на родительскую страницу. Это в какой-то степени работает, но
знает ли пользователь, что он оказывается в бесконечном цикле? Узнает ли он первую
120 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
страницу последовательности, когда снова увидит ее? Вовсе не обязательно. Если порядок следования для вас важен, свяжите последнюю страницу с родительской — это
даст понять пользователю , что он увидел все существующие страницы.
Примеры
Веб-сайт �������������������������������������
Flickr�������������������������������
— это классический пример реализации шаблона Pyramid (Пирамида). В этом
диспетчере изображений используется последовательность, называемая потоком фотографий
(photostream), все содержимое которой можно
увидеть, если щелкать по ссылке наверху виджета (рис. 3.19). Два эскиза представляют предыдущее и последующее изображение в потоке.
Рис. 3.19. Веб-сайт Flickr
Интерактивный раздел веб-сайта New York
Times, показанный на рис. 3.20, представляет
собой еще один вариант диспетчера изображений. На родительской странице выводится беспорядочная сетка эскизов, на каждом из которых можно щелкнуть. На
страницах элементов (рис. 3.21) есть кнопки со стрелками, позволяющие пролистывать последовательность фотографий. Обратите внимание, что пользователь знает, на
каком месте в последовательности он находится — «121 из 176», — это очень удобная
функция. Кнопки Вверх нет, но единственный элемент управления на этой панели,
Close (Закрыть), возвращает пользователя на родительскую страницу. (Кстати, это
также интересный вариант использования модальной панели.)
Рис. 3.20. Интерактивный раздел веб-сайта New York Times; это родительская страница,
где показаны все фотографии
Шаблоны 121
Рис. 3.21. Дочерняя страница того же раздела с расположенными рядом с фотографией
кнопками Назад, Далее и Закрыть
Modal Panel (Модальная панель)
Что
Показывайте пользователю только одну
страницу без прочих вариантов навигации,
пока он не решит конкретную задачу.
Использовать, когда…
Приложение находится в состоянии, из
Рис. 3.22. Схематическое
ко­торого оно не может выйти без помощи
представление шаблона Modal Panel
пользователя. В ориентированном на рабо(Модальная панель)
ту с документами приложении, например,
может потребоваться, чтобы пользователь
при сохранении документа предоставил имя файла, если оно еще не было определено. В других контекстах для продолжения работы пользователю необходимо войти
в систему или подтвердить, что он прочитал важное сообщение.
Если пользователь приступает к какому-либо простому действию, которое может
в дальнейшем потребовать ввода дополнительной информации, попробуйте найти
способ, как получить ее без использования модальной панели. Можно добавить текстовое поле прямо под кнопкой, которую пользователь щелкнул, и оставить его там
дожидаться реакции пользователя. Не нужно останавливать весь сайт или приложение
до тех пор, пока не будут получены малозначительные данные. Пусть пользователь
займется важными делами, а к этому вопросу он вернется позже.
Почему
Модальная панель исключает возможность использования всех остальных вариантов навигации. Пользователь не может игнорировать ее и обратиться к какой-либо
122 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
функции приложения — ему необходимо справиться с поставленной задачей здесь
и сейчас. Как только он делает это, он снова попадает в ту точку, где был до появления
модального окна.
Это очень простая модель для понимания и программирования, хотя в последние
годы она чрезмерно часто использовалась в приложениях. Модальная панель несет
деструктивный характер. Если пользователь еще не готов к тому, чтобы ответить на
вопрос, задаваемый модальной панелью, то она прерывает его рабочий процесс, вероятно, заставляя думать о том, что его в данный момент совершенно не волнует. При
правильном использовании модальная панель подталкивает пользователя к решению,
которое ему необходимо сейчас принять. Нет никаких других вариантов навигации,
которые могли бы отвлечь подобным образом.
Как
В том же месте экрана, где сконцентрировано внимание пользователя, поместите
панель, диалоговое окно или страницу, запрашивающую необходимую информацию.
При этом у пользователя не должно быть возможности открыть какую-либо другую
страницу приложения. Эта панель должна быть относительно простой, с минимумом
отвлекающих моментов, чтобы внимание пользователя фокусировалось исключительно на стоящей перед ним задаче.
Помните, что данный шаблон относится к навигации. Необходимо тщательно обозначить и правильно подписать выход с модальной панели, причем выходов не должно
быть много: один, два, максимум три. В большинстве случаев выходы имеют форму
кнопок с краткими командными метками, такими как Сохранить или Не сохранять. Также чаще всего добавляют кнопку Закрыть или крестик в правом верхнем углу. После
щелчка на любой из них пользователь должен снова оказываться на той странице, где
он находился в момент, когда открылась модальная панель.
Эффект «лайтбокса» — это очень эффективное визуальное представление модальной панели. Затемняя большую часть экрана, дизайнер подсвечивает модальную
панель, фокусируя на ней внимание пользователя. (Чтобы это сработало, модальная
панель должна быть достаточной большой, иначе пользователю будет сложно ее найти. Мне встречались модальные панели, затерянные где-то на окраинах сайта и такие
маленькие, что их было очень сложно найти в большом окне браузера.)
Вместо того чтобы помещать модальную панель поверх другой страницы, дизайнеры некоторых веб-сайтов просто конструируют страницы с максимально ограниченными возможностями навигации. Обычно так реализуются экраны регистрации
и входа в систему: глобальная и локальная навигация устраняется, остаются только
выходы (Отмена, Продолжить и т. п.) и аварийный люк.
В операционных системах и платформах GUI обычно используются модальные
диалоговые окна уровня операционной системы. Они лучше всего подходят для
традиционных настольных приложений: создателям веб-сайтов следует избегать их
в пользу более простых техник наложения. Дизайнеру их проще контролировать, и они
меньше раздражают пользователей.
Примеры
На веб-сайте SlideShare, для того чтобы привлечь внимание к диалоговому окну входа
в систему, применяется лайтбокс. Если попытаться выполнить на сайте какое‑либо
Шаблоны 123
действие, требующее регистрации, появляется модальная панель, показанная на
рис. 3.23. У пользователя есть три выхода: войти в систему, зарегистрироваться или
щелкнуть на знакомом крестике в правом верхнем углу. Это типичный пример множества подсвеченных модальных панелей в сети.
Аналогичный лайтбокс применяется на веб-сайте Kayak для уточнения параметров
поиска. Обратите внимание на стрелку слева, указывающую, на какой ссылке пользователь щелкнул для перехода к этой модальной панели (рис. 3.24). Продуманная
деталь.
Рис. 3.23. Модальное диалоговое окно входа в систему на веб-сайте SlideShare
Рис. 3.24. Модальная панель для уточнения параметров поиска на веб-сайте Kayak
124 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
«Теневая» форма модального диалогового окна в операционной системе Mac
прекрасно привлекает внимание — она выпадает из-под полосы заголовка окна (разумеется, действие анимировано). Эти и другие модальные диалоговые окна уровня
приложения не разрешают пользователю запускать никакие другие функции. Ему
необходимо решить текущую задачу или закрыть модальное окно, прежде чем продолжить работу (рис. 3.25).
Рис. 3.25. Модальная панель в приложении Mac
В других библиотеках
http://quince.infragistics.com/Patterns/Modal%20Panel.aspx
http://patternry.com/p=overlay/
Также см. шаблон Dialog Overlay (Наложение диалогового окна) в книге «���
Designing Web Interfaces» Билла Скотта и Терезы Нейл (издательство O’Reilly, http://
oreilly.com/catalog/9780596516253/). В этой главе также рассказывается о других типах
наложения содержимого.
Deep-linked State (Глубокая ссылка)
Что
Зафиксируйте состояние веб-сайта или
приложения в URL-адресе, который
можно сохранить и отправить другу. При
загрузке этого адреса восстанавливается
в точности то состояние, которое видел
первый пользователь.
http://
Использовать, когда...
Содержимое сайта или приложения Рис. 3.26. Схематическое представление
шаблона Deep-linked State (Глубокая ссылка)
очень объемно и отличается высокой
интер­активностью: карта, книга, видео или информационная графика. В этом случае
пользователь может испытывать трудности с нахождением определенной точки или
состояния, либо искомую точку могут отделять от начальной точки слишком большое
количество шагов. Приложение может содержать много параметров и состояний, настраиваемых пользователем, таких как режим просмотра, масштаб, уровень данных
и т. д. Они усложняют поиск конкретной точки и просмотр ее в «правильном» состоянии.
Шаблоны 125
Почему
Глубокая ссылка дает пользователю возможность попасть непосредственно в желаемую точку и состояние приложения, сэкономив время и усилия. То же самое можно
сказать о глубокой ссылке на некое содержимое традиционного сайта или постоянной
ссылке на запись в блоге. Смысл в том, что URL�������������������������������������
����������������������������������������
-адрес всегда будет указывать на нужное содержимое, независимо от того, как давно он был сформирован. Однако природа
глубокой ссылки чуть сложнее, чем постоянной, так как она указывает и на состояние
приложения, и на позицию содержимого.
Этот шаблон полезен для фиксации состояния, которое пользователь захочет
восстановить позже, особенно если глубокую ссылку можно сохранить с помощью
привычных механизмов (таких как закладки в браузере, сайты подобные Delicious
и т. д.). Он упрощает рассылку интересного содержимого, и именно здесь данный шаблон демонстрирует себя в полной красе. URL-адрес, содержащий глубокую ссылку,
можно отправить по электронной почте, опубликовать в Twitter или социальной сети,
обсудить на форуме, вставить в запись в блоге или использовать различными другими
способами. Он может нести определенное заявление или стать сетевым вирусным
явлением.
Как
Отслеживайте состояние содержимого и описывайте его при помощи URL-адреса.
Также учитывайте вспомогательные данные: комментарии, слои данных, маркеры,
выделение и т. д., восстанавливая их при очередном переходе по этому URL-адресу.
Подумайте, какие еще параметры или состояния интерфейса может захотеть сохранить пользователь: уровень приближения или увеличения, режим просмотра,
результаты поиска и т. п. Не обязательно захватывать все эти состояния: загрузка
глубокой ссылки не должна менять пользовательские параметры, если пользователь
этого не хочет. Проработайте несколько сценариев использования и выберите наиболее подходящий вариант.
URL�����������������������������������������������������������������������
-адреса — это наилучший формат для сохранения глубоких ссылок. Они универсальны, легко пересылаются, короткие и поддерживаются большим ассортиментом
инструментов, таких как службы сохранения закладок. (Если вам приходится иметь
дело с несетевыми приложениями, то, вероятно, потребуется проявить изобретательность.) Можно использовать и другие форматы, такие как XML; в целом, с текстом
проще управляться, чем с двоичными данными.
По мере того как пользователь перемещается по содержимому и меняет различные
параметры, выводите обновленный URL-адрес в адресном поле браузера, чтобы его
можно было легко увидеть и скопировать. Однако не все пользователи будут искать
его там, поэтому также рекомендуется предусмотреть на странице специальный инструмент, говорящий пользователю: «Щелкни здесь, чтобы сформировать ссылку на
эту страницу». Некоторые сайты генерируют фрагменты кода JavaScript, не только
описывающие позицию и состояние, но позволяющие пользователю встраивать интерактивные элементы в другие веб-сайты.
Примеры
В URL-адресах веб-сайта Google Books сохраняется огромное количество сведений
о состоянии (рис. 3.27): позиция в книге, режим просмотра (одностраничный, двух-
126 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
страничный, эскизы), наличие панелей инструментов и даже результаты поиска.
Степень масштабирования в адресе не фиксируется, но это и понятно, так как данный параметр каждый пользователь устанавливает сам. URL-адрес в поле Ссылка, на
самом деле, не нужен, так как в адресном поле браузера отображается точно такое же
значение.
Рис. 3.27. Глубокая ссылка на страницу в Google Books отображается в двух местах:
в адресном поле браузера и в поле Ссылка
Many�����������������������������������������������������������������������
Eyes������������������������������������������������������������������
����������������������������������������������������������������������
, инструмент визуализации от IBM����������������������������������
�������������������������������������
, дает посетителям возможность составлять собственные информационные графики на основе стандартных типов и наборов данных (рис. 3.28). В результате получаются интерактивные насыщенные компоненты. Для того чтобы поделиться примером визуализации, можно либо сгенерировать
код JavaScript (и встроить его в другой веб-сайт), либо сделать снимок экрана.
Рис. 3.28. Захват состояния информационного графика в веб-приложении Many Eyes
Шаблоны 127
В следующем интерфейсе это не рекламируется, но YouTube позволяет добавить
в URL-адрес видео временную метку. При загрузке такого адреса просмотр начинается
с указанного момента. О том, как это сделать, рассказывается на http://youtubetime.com
(рис. 3.29): добавьте в конце URL-адреса код #t=XmYs, где X — это количество минут,
а Y — количество секунд.
Рис. 3.29. Объяснение на сайте YouTubeTime, как при помощи дополнительного кода
в URL-адресе создать глубокую ссылку на середину видеоклипа
Escape Hatch (Аварийный люк)
Что
На каждой странице с ограниченным
числом вариантов навигации создайте понятную кнопку или ссылку, которая будет безопасно переводить
пользователя с этой страницы в уже
знакомое место.
Использовать, когда…
Рис. 3.30. Схематическое представление
Вы работаете над страницами, сошаблона Escape Hatch (Аварийный люк)
ставляющими какой-либо последовательный процесс, например мастер, или любыми страницами, блокирующими
пользователя в ограниченном числе навигационных ситуаций, например как при использовании шаблона Modal Panel (Модальная панель). Пользователи могут попадать
на эти страницы вне контекста, например через результаты поиска.
Аварийные люки не нужны, если на странице реализован шаблон Sequence Map
(Карта последовательности) или Breadcrumbs (Хлебные крошки). Пользователи,
понимающие, что это такое, могут использовать их для возврата в знакомое место.
128 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Почему
Ограниченная навигация — это одно, а отсутствие выхода — совсем другое! Если
у пользователя будет простой и очевидный способ уйти со страницы без всяких условий, ему не будет казаться, что он в ловушке.
Такая возможность помогает людям чувствовать себя в безопасности при исследовании приложения или веб-сайта. Она аналогична функции Undo (Отмена) — побуждает пользователей пробовать то и это не боясь последствий. См. шаблон Safe
Exploration (Безопасное исследование) в первой главе.
Если пользователи могут попасть на какие-то страницы через результаты поиска,
то вдвойне важно на каждой странице предусмотреть «аварийный люк». Посетитель
сможет щелкнуть на нем, чтобы попасть на «нормальную» страницу, которая сумеет
объяснить, где же он очутился.
Как
Поместите на страницу кнопку или ссылку, которая будет переносить пользователя
обратно в «безопасное место». Например, безопасной может быть главная страница
веб-сайта, центральная страница в дизайне «спицы колеса» или любая другая страница, обладающая широкими возможностями навигации и понятная для пользователя.
Выбор конкретной страницы зависит от дизайна приложения.
Примеры
Под логотипами, обычно находящимися в левом верхнем углу веб-сайта, часто прячут
ссылки, ведущие на главную страницу узла. Такой способ позволяет не только создать
аварийный люк, ведущий в знакомое место, но и поддержать фирменный стиль.
В некоторых диалоговых окнах ту же роль играет кнопка Cancel (Отмена). Она
позволяет пользователю сказать: «Я закончил с этим, забудьте, что я вообще сюда
приходил».
Вам когда-нибудь доводилось звонить в компанию, например в банк, и прорабатывать последовательность бесконечных телефонных переадресаций с набором
дополнительных номеров? Эти меню могут быть длинными, сбивающими с толку
и отнимающими много времени. Если вы обнаруживаете в какой-то момент времени, что неправильно набрали очередной номер (или выбрали не тот номер), то вы
мо­жете просто повесить трубку и попытаться повторить процесс с самого начала.
Однако во многих системах телефонных меню есть скрытый аварийный люк, о котором часто не сообщают: если в любой момент набрать 0, то вас соединят с живым
оператором.
На многих веб-сайтах есть страницы с ограниченными возможностями навигации,
такими как модальные панели. Один из примеров — экран входа в систему на веб-сайте
Netflix����������������������������������������������������������������������������
. Если пользователь попадает сюда, но понимает, что входить в систему не хочет, он может просто щелкнуть на логотипе Netflix и окажется на домашней странице
(рис. 3.31).
Иногда неплохо работает буквальная реализация. ������������������������������
Google������������������������
Labs�������������������
�����������������������
предлагает возможности, еще не готовые к опубликованию, которые периодически глючат. В примере на
рис. 3.32 Google Maps предоставляет пользователю четкий «аварийный» URL-адрес,
который следует использовать, если что-то идет не так.
Шаблоны 129
Рис. 3.31. Экран входа в систему на веб-сайте Netflix; аварийным люком служит логотип
Рис. 3.32. Аварийный люк на веб-сайте Google Maps
В других библиотеках
Эти два шаблона называются Home Link (Ссылка на домашнюю страницу). Концепция очень похожа на концепцию аварийного люка.
http://ui-patterns.com/patterns/HomeLink
http://welie.com/patterns/showPattern.php?patternID=home
Fat Menus (Полные меню)
Рис. 3.33. Меню «Все продукты» на веб-сайте Microsoft
130 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Что
Покажите полный список навигационных вариантов в раскрывающихся или вылетающих меню. Перечислите все подстраницы в разделах сайта. Тщательно продумайте их
организацию, список категорий или естественный порядок сортировки и разверните
меню по горизонтали.
Использовать, когда...
На веб-сайте или в приложении много страниц, они разбиты на множество категорий,
возможно, составляют иерархическую структуру глубиной в три или больше уровней.
Вы хотите, чтобы посетитель увидел, какие еще возможности есть на этом сайте. Ваши
пользователи знакомы с концепцией раскрывающихся меню (нужно щелкнуть, чтобы
увидеть содержимое меню) и вылетающих меню (такой тип меню открывается при
наведении указателя мыши).
Почему
Полные меню делают сложные сайты более удобными для исследования. Благодаря им
посетитель может одновременно увидеть больше вариантов навигации, чем обнаружит
при обычном просмотре сайта.
Показывая такое количество ссылок на каждом экране, вы предоставляете пользователю возможность перейти с текущей подстраницы на любую другую подстраницу
другого раздела (или, почти на любую). Таким образом, вы превращаете многоуровневый веб-сайт, в котором подстраницы разных разделов не связаны между собой,
в полносвязный.
Полные меню — это форма прогрессивного обнаружения, важной концепции дизайна пользовательского интерфейса. Сложные элементы убираются с экрана до того
момента, когда они понадобятся пользователю. Посетитель сайта просматривает заголовки меню, чтобы получить общее представление о происходящем, и только будучи
готовым к погружению, сознательно открывает полное меню. Миллионы вариантов
навигации не вываливаются на экран до тех пор, пока пользователь не будет готов
справиться с ними.
Если вы уже используете меню для глобальной навигации, рассмотрите возможность превращения их в полные меню. Возможно, одновременное отображение множества ссылок сделает содержимое более привлекательным для случайных посетителей.
Людям не придется углубляться в категории и подкатегории иерархии сайта в поисках
интересных страниц — они предстанут перед ними на первом же экране, без задержек.
Как
В каждом меню представляйте хорошо организованный список ссылок. Если удобно,
распределите их по именованным разделам (шаблон Titled Sections из главы 4), если
же нет, то используйте другой порядок сортировки, соответствующий природе содержимого, например по алфавиту или по времени.
Используйте заголовки, разделители, пустое пространство, неяркие графические
элементы и другие инструменты, помогающие визуальной организации ссылок. Не
забывайте о преимуществах горизонтального пространства: при желании меню можно развернуть по горизонтали на всю страницу. На многих сайтах для представления
категорий используются столбцы. Однако если сделать меню слишком длинными,
Шаблоны 131
они могут выйти за пределы экрана (размером окна браузера управляет пользователь,
поэтому не делайте слишком смелых предположений).
Лучше всего, когда полные меню на сайте стилистически согласуются со всем
остальным содержимым. Разрабатывайте полные меню с учетом цветовой схемы, сетки
элементов на странице и других стилистических или графических особенностей сайта.
Некоторые реализации меню плохо сочетаются с технологиями обеспечения
удобства просмотра, такими как программы чтения экрана. Удостоверьтесь, что ваши
полные меню их поддерживают. Если добиться этого невозможно, рассмотрите возможность применения статической стратегии, такой, например, как карта сайта.
Примеры
На веб-сайте Starbucks мы видим очень хороший образец полных меню (рис. 3.34).
Все разделы меню одинаковой ширины, хотя и разной высоты. Они соответствуют
общей схеме компоновки страницы (выглядят одинаково). Стиль меню отвечает
внешнему виду всего сайта, а большое количество пустого пространства упрощает
чтение. В дизайн меню также внедрена реклама, но она не кажется навязчивой. Дополнительные выступы позволяют уйти от скучной прямоугольной формы и добавляют
изыс­канности.
Рис. 3.34. Кофе-меню на веб-сайте Starbucks
Как видно на рис. 3.35, меню на веб-сайте Slate читать сложнее, оно более загромождено текстом (хотя и отвечает общему стилю страницы). Разработчики решили не
разворачивать меню по горизонтали на всю ширину экрана. Однако идея перечислять
в полных меню наиболее важные статьи кажется удачной. Опытный пользователь может пробежать глазами большое количество заголовков, всего лишь наведя указатель
мыши на строку меню, и выбрать нужное.
На веб-сайте ��������������������������������������������������������������
American������������������������������������������������������
Red��������������������������������������������������
�����������������������������������������������������
Cross��������������������������������������������
�������������������������������������������������
меню не просто развертываются наверху страницы (рис. 3.36). Когда пользователь подводит указатель мыши к элементу меню
верхнего уровня, полное меню раскрывается на месте новостной панели типа «карусель», занимая ее экранное пространство. Для любого элемента верхнего уровня
открывается одно общее полное меню, поэтому все подстраницы в каждой категории
можно увидеть сразу.
132 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Рис. 3.35. Меню раздела «Новости и политика» на веб-сайте Slate
Рис. 3.36. Меню веб-сайта American Red Cross (включающее все пункты)
На веб-сайте WebMD длинные плоские списки тем, относящихся к здоровью, отсортированы в алфавитном порядке, как видно на рис. 3.37.
Шаблоны 133
Рис. 3.37. Меню Health A–Z (Здоровье от А до Я) на веб-сайте WebMD
Sitemap Footer (Карта сайта внизу страницы)
Рис. 3.38. Оформление нижней части экрана на сайте Whole Foods
Что
Поместите карту сайта в нижнюю часть экрана на каждой странице сайта. Считайте ее
частью глобальной навигации, дополняющей заголовок. Если карту сайта необходимо
уместить в небольшое компактное пространство, сократите ее.
Использовать, когда
Пространство на разрабатываемом вами сайте используется щедро; размер страницы
и время ее загрузки не ограничиваются жесткими рамками. Вы не хотите загромождать
заголовок и боковую панель навигационными элементами.
На сайте достаточно много страниц, но не слишком много категорий и «важных»
разделов (тех, которые пользователь обязательно станет искать). Почти полную карту сайта — по крайней мере, карту страниц, не перечисленных в заголовке — можно
уместить в полосу не больше половины высоты окна браузера.
В заголовке могут находиться элементы глобального навигационного меню. Однако он показывает не все уровни в иерархии сайта — возможно, только категории
верхнего уровня. Вы предпочитаете полным меню простую, хорошо скомпонованную
информационную полосу внизу страницы, вероятно, для упрощения реализации или
повышения удобства использования сайта.
134 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Почему
Карта сайта внизу страницы делает сложный веб-сайт более простым для исследования. Посетитель одновременно видит больше вариантов навигации, чем мог бы
обнаружить при обычном изучении сайта.
Показывая такое количество ссылок на каждом экране, вы предоставляете пользователю возможность перейти с текущей подстраницы на любую другую подстраницу
другого раздела (или почти на любую). Таким образом, вы превращаете многоуровневый веб-сайт — в котором подстраницы разных разделов не связаны между собой, —
в полносвязный. Полоса внизу страницы всегда притягивает внимание пользователя,
закончившего читать содержимое (например, статью). Поместив туда интересные
ссылки, вы призываете пользователя провести больше времени на сайте, знакомясь
с разнообразным содержимым.
Наконец, видя полную карту сайта, пользователи получают хорошее представление
о структуре содержимого, догадываются, где искать интересующие их возможности.
На сложных сайтах это может быть очень полезно.
Иногда дизайнерам приходится делать выбор между картой сайта внизу страницы
и полными меню. На традиционных сайтах первый вариант проще реализовать и отлаживать, так как он не зависит от действий пользователя. Меню могут вылетать или
раскрываться при наведении указателя или щелчке мыши, но карта сайта — это всего
лишь набор статических ссылок. Его проще разбирать программам для чтения экрана,
и он не требует точного наведения указателя мыши, что означает большее удобство
в использовании.
С другой стороны, если посетитель торопится или он зашел на сайт случайно, то
карту сайта внизу экрана он может вовсе не заметить. Его внимание концентрируется
на содержимом страницы и заголовках. Если вы сомневаетесь, то проведите тестирование с пользователями и пронаблюдайте, как часто они будут щелкать ссылки в карте
сайта внизу экрана.
Как
Разработайте полосу шириной во всю страницу, которая будет содержать ссылки на
главные разделы сайта (категории) и наиболее важные подстраницы. Добавьте служебную навигацию, например возможность выбора языка и ссылки на социальные
инструменты (глава 9) и другую типичную для этой части экрана информацию, такую
как сведения об авторском праве и заявления о конфиденциальности.
Карта сайта может быть полной, но не обязательно. Смысл в том, чтобы показать
посетителю то, что он будет искать с наибольшей вероятностью, в то же время не перегружая заголовок и боковую панель.
На практике часто оказывается, что варианты глобальной навигации наверху страницы отвечают на первые вопросы посетителя, возникающие при заходе на веб-сайт:
о чем здесь говорится? как мне попасть в раздел Х прямо сейчас? В то же время карта
сайта внизу страницы демонстрирует актуальную иерархическую структуру сайта.
Такое «разделение обязанностей» работает очень хорошо.
Если само содержимое вашего сайта требует сложной навигации — например, это
большой набор продуктов, новостных статей, музыки, видео, книг и т. д., — то верхнюю
часть страницы можно использовать для навигации по содержимому, а полосу внизу
страницы для всего остального.
Шаблоны 135
Что же чаще всего можно найти в карте сайта внизу страницы:
‰‰основные категории содержимого;
‰‰информацию о сайте или компании;
‰‰ссылки на партнерские сайты, например сайты торговых знаков, принадлежащих
той же компании;
‰‰ссылки на социальные инструменты, такие как форумы;
‰‰инструменты справки и поддержки;
‰‰контактную информацию;
‰‰описание текущих кампаний;
‰‰для некоммерческих организаций — сведения о благотворительности и волонтерской работе.
Примеры
Веб-сайт REI демонстрирует различия между ориентированной на задачи глобальной навигацией, находящейся наверху страницы, и эффективной картой сайта внизу
страницы (рис. 3.39). О покупках, обучении и путешествиях вы узнаете из ссылок
в за­головке — так и должно быть, ведь большинство посетителей приходит именно
за этим. Полоса внизу страницы выполняет вторичные, но не менее важные задачи:
предлагает справочную информацию, поддержку для клиентов, сведения для членов
клуба и т. д.
Рис. 3.39. Заголовок и нижняя полоса на веб-сайте REI
На нижней полосе веб-сайта Los Angeles Times выводятся практически те же данные, что и на двойной вкладке в заголовке, но организованные в виде простого списка
(рис. 3.40).
136 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Рис. 3.40. Заголовок и нижняя полоса веб-сайта Los Angeles Times
На сайте Wall Street Journal просто колоссальная информационная полоса внизу
страницы (рис. 3.41). Вероятно, на своих веб-сайтах вы такую делать не будете.
Рис. 3.41. Нижняя полоса веб-сайта Wall Street Journal
Flickr�������������������������������������������������������������������������
, как всегда, придерживается минималистичного подхода (рис. 3.42). Дизайнеры этой веб-галереи решили воздержаться от столбцов, присутствующих в дизайне
нижней полосы большинства других сайтов, выбрав вместо этого построчную структуру. На сайте MapQuest мы видим привычные столбцы, но компактно размещенные
в очень небольшом пространстве (рис. 3.43).
Шаблоны 137
Рис. 3.42. Нижняя полоса веб-сайта Flickr
Рис. 3.43. Нижняя полоса веб-сайта MapQuest
В других библиотеках
http://welie.com/patterns/showPattern.php?patternID=sitemap-footer
http://ui-patterns.com/patterns/FatFooter
Этот шаблон иногда называют «полной нижней полосой» (Fat Footer), слегка
расширяя его определение. Несколько великолепных примеров вы найдете в статье
«Informative and Usable Footers in Web Design» журнала Smashing Magazine.
http://www.smashingmagazine.com/2009/06/17/informative-and-usable-footers-in-webdesign/114/
Sign-In Tools (Инструменты регистрации)
Рис. 3.44. Инструменты регистрации на веб-сайте Flickr
Что
Поместите элементы служебной навигации, связанные с регистрацией и входом на
сайт, в правый верхний угол экрана. Там же должны отображаться такие инструменты, как корзина покупок, ссылка на профиль и настройки учетной записи, ссылка на
справочный раздел и кнопка выхода из системы.
Использовать, когда...
Инструменты регистрации полезны на любых сайтах и службах, где пользователю
приходится входить в систему, указывая свои учетные данные.
138 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Почему
Этот шаблон полностью основан на условностях: именно в правом верхнем углу окна
люди ожидают увидеть подобные инструменты — так почему бы не поместить их туда?
Пусть пользователи обрадуются, обнаружив их на привычном месте.
Как
Зарезервируйте пространство в правом верхнем углу каждой страницы для инструментов регистрации. Первым отображайте экранное имя пользователя (и, если возможно,
уменьшенную версию его аватара), если только имя и аватар не представлены где-то
еще на странице. Удостоверьтесь, что на каждой странице сайта или приложения инструменты регистрации работают одинаково и предсказуемо.
Объедините в небольшом компактном пространстве следующие элементы:
‰‰кнопку или ссылку для выхода из системы (это очень важный элемент, никогда не
забывайте о нем);
‰‰ссылку на параметры учетной записи;
‰‰ссылку на настройки профиля;
‰‰кнопку или ссылку на справочную систему сайта;
‰‰ссылку на раздел поддержки пользователей;
‰‰корзину покупок;
‰‰личные сообщения или другие уведомления;
‰‰ссылку на персональные коллекции элементов (наборы изображений, избранное,
списки желаний и т. п.);
‰‰ссылку на домашнюю страницу.
Не делайте это пространство слишком большим или заметным, чтобы оно не доминировало над основным содержимым страницы. Так не должно быть, это всего
лишь служебная навигация. Если пользователю будет нужно, он обратит внимание на
этот раздел; в остальное время раздел «невидим» (не буквально, конечно). Некоторые
элементы можно обозначать не текстом, а небольшими значками: корзину покупок,
сообщения, справку. Для них существуют стандартные узнаваемые изображения. Некоторые примеры вы найдете далее.
Поле поиска часто помещают рядом с инструментами регистрации, однако оно
должно оставаться на неизменном и привычном месте независимо от того, вошел
пользователь в систему или нет.
Если пользователь еще не вошел в систему, то в этой области страницы можно показать поля для учетных данных — имени и пароля. Также можно добавить призыв
к действию и, возможно, инструменты для восстановления забытого пароля.
Примеры
На рис. 3.45 показаны инструменты регистрации с веб-сайтов Mint, Twitter, Amazon
и Gmail. Они визуально ненавязчивы, но их легко найти, поскольку они находятся
в правильном месте.
На веб-сайте Scribd используются почти все инструменты, перечисленные в этом
шаблоне (рис. 3.46). Их довольно много, и раскрывающееся меню позволяет избежать
Шаблоны 139
беспорядка и перегруженности в этом углу страницы. В программе iTunes также применяется раскрывающееся меню (рис. 3.47).
Рис. 3.45. По часовой стрелке, начиная с верхнего левого угла: Mint, Twitter, Amazon, Gmail
Рис. 3.46. Инструменты регистрации на веб-сайте Scribd
Рис. 3.47. Инструменты регистрации в программе iTunes
140 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Sequence Map (Карта последовательности)
Рис. 3.48. Карта последовательности для процесса совершения покупки
на веб-сайте Hanna Andersson
Что
На каждой странице показывайте карту всех страниц по порядку, обязательно добавляя указатель «Вы находитесь здесь».
Использовать, когда…
Вы разрабатываете интерфейс для письменного изложения текста, поточного процесса, мастера или любого другого приложения, по которому пользователь проходит
страницу за страницей. Путь пользователя большей частью является линейным.
Если топология навигации объемна и иерархична (в противоположность линейной), то рассмотрите вариант использования шаблона Breadcrumbs (Хлебные крошки). Если шагов или элементов очень много, а их порядок не имеет большого значения,
то можно применить шаблон Two-Panel Selector (Двухпанельный селектор, глава 5)
или Overview Plus Detail (Обзор и детали, глава 7).
Почему
Карта последовательности сообщает пользователю, какие этапы уже завершены и, что
еще важнее, сколько этапов ему осталось пройти. Основываясь на этом, он решает,
стоит ли ему продолжать и сколько времени потребует завершение последовательности. Он не теряется и всегда знает, где находится в данный момент.
Карта последовательности также играет роль дополнительного устройства навигации, позволяя пользователям переходить к различным этапам пути (в том числе, уже
завершенным) одним щелчком мыши.
Как
Где-нибудь у края экрана поместите небольшую карту последовательности страниц
вашего приложения. Эта карта должна по возможности занимать одну строку или
столбец, чтобы не конкурировать с фактическим содержимым страницы. Текущая
страница должна как-то выделяться на фоне остальных. Ее, например, можно обозначить более ярким или более темным рисунком или шрифтом; также продумайте,
как будут отмечаться страницы, на которых пользователь уже побывал.
Для большего удобства карту можно поместить рядом с основными элементами
навигации, в роли которых обычно выступают кнопки Назад и Далее.
Как же отмечать страницы на карте? Если страницы или шаги последовательности
действий пронумерованы, то очевидным решением будет использование нумерации —
Шаблоны 141
числа занимают мало места и их понимание обычно не вызывает затруднений у пользователя. Но также рекомендуется вставлять в карту заголовки страниц (короткие,
чтобы карта не стала слишком громоздкой). Таким образом, пользователи получают
достаточно информации, чтобы понимать, к каким страницам нужно вернуться, и получают информацию о том, что ждет впереди.
Примеры
В показанном на рис. 3.49 слайд-шоу карта последовательности находится внизу
страницы. Благодаря ей пользователи могут перемещаться по изображениям в случайном порядке, хотя большинство, вероятно, все же будет использовать кнопки Prev
(Предыдущее) и Next (Следующее) наверху окна.
Рис. 3.49. Слайд-шоу на веб-сайте Boston Globe; карта последовательности
находится под фотографией
Конфигуратор продукта Mini Cooper (рис. 3.50) представляет собой смесь редактора настроек и мастера. Пользователи могут перемещаться вперед и назад, но страницы
все же организованы в пронумерованную последовательность. Карта последовательности наверху страницы — это основной элемент управления приложением, который
позволяет переходить на разные страницы и изучать всевозможные варианты.
Мастера установки обычно состоят из множества шагов. В окне мастера Adobe
(рис. 3.51) типичная карта последовательности находится слева. Если шаги не относятся к выбранному варианту или пропускаются, то перейти на них невозможно
(ссылки отключены). Например, для пробной установки не нужно указывать идентификатор Adobe ID.
142 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Рис. 3.50. Конфигуратор продукта Mini Cooper; карта последовательности
находится слева вверху
Рис. 3.51. Программа установки Adobe CS5; карта последовательности находится слева
В других библиотеках
http://ui-patterns.com/patterns/StepsLeft
http://developer.yahoo.com/ypatterns/navigation/bar/progress.html
Шаблоны 143
Breadcrumbs (Хлебные крошки)
Рис. 3.52. Реализация «хлебных крошек» на веб-сайте Target
Что
На каждой странице в иерархии выводите список всех родительских страниц, вплоть
до главной страницы.
Использовать, когда…
У приложения или сайта иерархическая структура с двумя или более уровнями.
Пользователи перемещаются по ней с помощью элементов прямой навигации, обзора,
фильтрации, поиска в пределах сайта или по глубоким ссылкам, полученным извне.
Одной глобальной навигации недостаточно для того, чтобы предоставить пользователю указатель «Вы находитесь здесь», так как иерархия очень глубокая или большая.
В качестве альтернативы можно использовать набор инструментов обзора или
фильтрации большого объема данных, такого как продукты в интернет-магазине.
Продукты разбиваются на иерархические категории, но такой способ упорядочения не
обязательно соответствует пути, следуя которому пользователь будет искать нужные
продукты.
Почему
Шаблон Breadcrumbs (Хлебные крошки) подразумевает перечисление всех уровней
иерархии от самого верхнего и вплоть до текущей страницы. В определенном смысле
это один линейный «срез» общей карты веб-сайта или приложения.
Таким образом, как и карта последовательности, «хлебные крошки» помогают
пользователю не забыть, где он находится. Это особенно удобно, если он внезапно
переходит на более глубокий уровень дерева, как, например, при использовании
результатов поиска или многогранного инструмента обзора. В отличие от карты последовательности, «хлебные крошки» не могут подсказать пользователю, куда ему
направляться дальше. Они отображают только текущий момент.
Многие источники утверждают, что шаблон Breadcrumbs (Хлебные крошки) (название шаблона происходит из сказки о Мальчике с пальчик, который разбрасывал
их по пути в лес, чтобы обозначить дорогу домой) наиболее полезен для того, чтобы
сообщать пользователю, как он попал в данное место с верхнего уровня веб-сайта или
приложения. Но это верно только в том случае, если пользователь действительно
шел сверху вниз, не уходя на запасные пути, не проходя по другим ветвям, не заходя
в тупики, не выполняя поиск по структуре, не перепрыгивая по ссылкам с других
страниц… Это маловероятно.
Таким образом, работа шаблона Breadcrumbs (Хлебные крошки) состоит в том,
чтобы дать пользователю понять, где он находится по отношению к остальной части
приложения или веб-сайта, то есть речь идет о контексте, а не истории перемещений.
144 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Взгляните на рис. 3.52 в начале раздела. Многогранный обзор — поиск элементов
с определенными характеристиками — привел меня на эту страницу глубоко в иерар­
хии веб-сайта Target (то же самое могло бы произойти при поиске по ключевому
слову). Но оказавшись здесь, я вижу, что это за место в иерархии продуктов и какие
еще товары могли бы меня заинтересовать. Благодаря «хлебным крошкам» я могу
взглянуть на все стационарные миксеры Target и сравнить различные варианты.
Наконец, обычно шаблон Breadcrumbs (Хлебные крошки) реализуется в форме
ссылок или кнопок, которые сами по себе работают в качестве навигационного приспособления.
Как
Вверху страницы создайте строку текста или полосу значков, обозначающих текущий
уровень в иерархии. Начните с верхнего уровня; правее поместите название или значок
следующего уровня и т. д., вплоть до текущей страницы. Между уровнями вставьте небольшой рисунок или символ, указывающий на взаимоотношения родитель/потомок.
Обычно выбирают указывающую вправо стрелку, треугольник, знак «больше» (>),
косую черту (/) или правые кавычки-елочки (»).
В качестве меток для обозначения каждой страницы лучше использовать заголовки этих страниц. Пользователи, уже побывавшие на этих страницах, будут узнавать
заголовки, а для новичков заголовки должны, по меньшей мере, достаточно ясно
отражать содержимое страниц. Текстовые метки должны содержать ссылки на соответствующие страницы.
Некоторые последовательности «хлебных крошек» заканчиваются на текущей
странице. Если у вас именно такой вариант, то обозначение текущей страницы должно
визуально отличаться от остальных, так как это просто текст, без ссылки.
Примеры
Панель управления операционной системы Windows 7 представляет собой иерархический редактор настроек глубиной до трех уровней. На рис. 3.53 показан снимок экрана
раздела Personalization (Персонализация) в категории Appearance and Personalization
(Внешний вид и персонализация) (в котором помимо указанной предусмотрено, как
минимум, еще шесть подкатегорий).
Рис. 3.53. Панель управления ОС Windows 7
В сетевых сообществах, таких как показанное на рис. 3.54, содержимое обычно
составляет глубокую иерархическую структуру: категории форумов, форумы, подфорумы, дополнительные подфорумы и нити разговоров. «Хлебные крошки» помогают
пользователя понимать и перемещаться по такой иерархии.
Шаблоны 145
Рис. 3.54. Форумы на веб-сайте Mothering.com
На рис. 3.55 показан пример применения шаблона Breadcrumbs (Хлебные крошки) за пределами «страничного» контекста. Инструменты разработчика браузера
Chrome, так же, как и многие другие инструменты для разработчиков программного
обеспечения, предоставляют пользователям возможность управлять очень глубокими
иерархическими структурами (в данном случае — вложенными структурными тегами
на странице HTML). «Хлебные крошки» здесь просто незаменимы, иначе в подобной
структуре очень просто потеряться.
Рис. 3.55. Инструменты разработчика браузера Chrome
Примеры
http://developer.yahoo.com/ypatterns/navigation/breadcrumbs.html
http://ui-patterns.com/patterns/Breadcrumbs
http://www.welie.com/patterns/showPattern.php?patternID=crumbs
http://patternry.com/p=breadcrumbs/
http://quince.infragistics.com/Patterns/Breadcrumbs.aspx
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-andbest-practices-2/
Annotated Scrollbar (Полоса прокрутки с примечанием)
Рис. 3.56. Полоса прокрутки на веб-сайте MSNBC показывает разделы страницы
146 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Что
Сделайте так, чтобы полоса прокрутки служила одновременно и картой содержимого,
и указательным знаком «Вы находитесь здесь».
Использовать, когда…
Речь идет о приложении, ориентированном на работу с документами, или об интерфейсе вида «панорама с приближением», таком как карта. Пользователи ищут в таких
документах или изображениях определенные элементы, например номера страниц
или другие ориентиры, и по мере прокрутки документа могут терять ориентацию в его
пространстве, не понимая, куда направляться дальше.
Почему
Несмотря на то что пользователь, прокручивая содержимое, находится в одном и том
же пространстве пользовательского интерфейса, указатели все равно остаются важным
средством навигации. При быстрой прокрутке очень сложно прочитать мелькающий
на экране текст (или даже невозможно, если изображение на экране обновляется недостаточно быстро), поэтому необходим дополнительный индикатор позиции. Даже
если пользователь резко остановит прокрутку, оказавшаяся на экране часть документа
может не содержать никаких ориентиров, например заголовков.
Почему полоса прокрутки? Потому что именно на ней фокусируется внимание
пользователя. Если поместить указатели на полосу прокрутки, то он их заметит и будет использовать, что намного удобнее, чем одновременно пытаться смотреть на две
разные области экрана. Того же эффекта можно добиться, расположив указатели рядом
с полосой прокрутки — чем ближе, тем лучше.
Когда индикаторы полосы прокрутки отображаются прямо на ее дорожке, то
в результате получается что-то вроде одномерной реализации шаблона Overview
Plus Detail (Обзор и детали) (см. главу 7). Дорожка — это обзор, а прокручиваемое
окно — это детали.
Как
Поместите индикатор позиции прямо на полосу прокрутки или рядом с ней. Подходят
как статические, так и динамические индикаторы. Статические индикаторы не меняют
свой вид с каждой секундой и могут выглядеть, например, как блоки определенного цвета, заполняющие дорожку полосы прокрутки (см. снимок экрана программы tkdiff на
рис. 3.57). Однако удостоверьтесь, что их назначение очевидно, — подобные вещи могут
сбить с толку пользователей, не привыкших к графике на дорожке полосы прокрутки!
Динамические индикаторы меняются по мере того, как пользователь прокручивает
документ, и часто реализуются в форме всплывающих подсказок. Когда позиция в документе меняется, рядом с бегунком полосы прокрутки возникает подсказка с информацией о содержимом, оказавшемся на экране. Информация, включенная в подсказку,
может меняться в зависимости от приложения. В Microsoft Word, например, выводятся
номера страниц и заголовки.
В любом случае необходимо понять, чего с наибольшей вероятностью будет ожидать пользователь и что, таким образом, нужно поместить в подсказку. Удобно начать
со структуры содержимого. Если содержимое представляет собой программный код,
то можно выводить имя текущей функции или метода; если это электронная таблица,
то показывайте номер строки и т. д. Также учитывайте, не включил ли пользователь
Шаблоны 147
какой-то специальный режим, например поиск строки, — в таком случае в подсказке
должны содержаться сведения об этом.
Пример
В приложении tkdiff���������������������������������������������������������������
���������������������������������������������������������������������
(рис. 3.57) различия между двумя версиями текстового файла выделяются визуально: новые разделы помечены зеленым цветом, измененные — синим,
а удаленные — красным. Полоса прокрутки с примечаниями одновременно служит
картой документа, делая различия больших файлов более простыми для восприятия.
Рис. 3.57. Приложение tkdiff
В браузере Chrome полоса прокрутки помогает искать текст на странице (рис. 3.58).
Когда вы ищете слово или строку на веб-странице, Chrome подсвечивает найденные
фрагменты желтым цветом. Одновременно в тех местах, где обнаружены совпадения,
желтые индикаторы выводятся и на полосу прокрутки. Таким образом, пользователь
может сразу прокрутить документ до места, где находится интересующее его содержимое.
Рис. 3.58. Результаты поиска в браузере Chrome
В других библиотеках
http://quince.infragistics.com/Patterns/Annotated%20Scrollbar.aspx
148 Глава 3 • Подскажите дорогу: навигация, указатели и ориентирование
Animated Transition (Анимированный переход)
Рис. 3.59. В Mac OS анимируется сворачивание окна
Что
Сгладьте необычные или дезориентирующие переходы при помощи анимации, благодаря которой они будут выглядеть более естественно.
Использовать, когда…
Пользователи перемещаются по большому виртуальному пространству, такому как
изображение, электронная таблица, график или текстовый документ. У них есть возможность масштабировать документ, прокручивать или поворачивать его целиком
вокруг своей оси. Это особенно полезно для информационной графики, такой как
карты или схемы (подробнее об информационной графике говорится в главе 7).
Кроме того, в интерфейсе могут быть разделы, которые можно закрывать и снова
открывать, причем это может делаться как системой, так и пользователем: деревья со
свертываемыми родительскими узлами, открывающиеся и закрывающиеся отдельные
окна или интерфейс, построенный на базе шаблона Collapsible Panels (Свертываемые
панели) (см. главу 4). Анимированный переход также можно использовать, когда
пользователь переходит с одной автономной страницы на другую.
Почему
Все эти трансформации могут нарушить ориентацию пользователя в виртуальном
пространстве. Например, мгновенное масштабирование нарушает пространственную
ориентацию; то же самое относится к вращению и закрыванию целых разделов, требующему изменения макета экрана. Даже скачкообразная прокрутка длинной страницы
текста может замедлить пользовательское восприятие.
Однако когда переход из одного состояния в другое осуществляется плавно, это
уже не выглядит пугающим. Другими словами, можно анимировать переход между
состояниями, чтобы он выглядел гладким, а не скачкообразным. Благодаря этому
пользователь не потеряет ориентацию в пространстве. Вероятно, такой механизм
работает, потому что напоминает нашу физическую реальность — когда в последний
Шаблоны 149
раз вы мгновенно перемещались с первого на третий этаж здания? Помимо этого, анимированный переход дает глазам пользователя шанс отследить перемещение объекта,
пока происходит изменение, чтобы не пришлось снова искать его в интерфейсе после
внезапной перемены окружения.
Качественно выполненные анимированные переходы делают приложение более
интересным и современным. Они могут быть забавными и на них приятно смотреть.
Как
Для каждого типа трансформации, используемого в интерфейсе, разработайте короткую анимацию, соединяющую первое состояние со вторым. Для масштабирования
и вращения можно показать на экране промежуточные состояния; для свертывания панели можно анимировать ее сжимающееся изображение, пока остальные панели расширяются, занимая освобожденное пространство. Старайтесь с максимальной степенью
достоверности создать впечатление, что на экране происходит физический процесс.
Однако этот шаблон — настоящий обоюдоострый меч. Остерегайтесь — пользователя может легко укачать! Анимация должна быть быстрой и точной, а между действием
пользователя и началом анимации не должно быть задержки либо пауза должна быть
минимальной. Ограничьте анимацию элементами экрана, для которых она действительно важна; не нужно анимировать экран целиком. Помимо этого, анимация должна
быть короткой. Я считаю, что главное — не выходить за пределы секунды, а исследования демонстрируют, что 300 миллисекунд — идеальная длительность анимации
для обеспечения гладкой прокрутки. Поэкспериментируйте на пользователях, чтобы
выбрать наиболее удачный вариант.
Если пользователь быстро производит несколько последовательных действий, например много раз нажимает стрелку вниз для прокрутки документа, то объединяйте
их в одно анимированное действие. Иначе пользователю за десятикратное нажатие
стрелки вниз придется лицезреть анимацию длительностью в несколько секунд.
Я снова повторю: главное — быстрота и отклик.
Некоторые типы переходов перечислены в библиотеке шаблонов Yahoo! (http://developer.yahoo.com/ypatterns/richinteraction/transition/) и в книге «Designing Web Interfaces»:
‰‰подсветка и затемнение;
‰‰расширение и сжатие;
‰‰постепенное возникновение или исчезновение изображения; плавное микширование изображений;
‰‰самовосстановление;
‰‰скольжение;
‰‰прожектор.
В других библиотеках
Подробное обсуждение и множество отличных примеров анимированных переходов
из предыдущего списка вы найдете в наборе шаблонов Transition в библиотеке дизайнерских шаблонов Yahoo! по адресу:
http://developer.yahoo.com/ypatterns/richinteraction/transition/
Помимо этого, в книге Скотта и Нейл «�����������������������������������������
Designing��������������������������������
Web����������������������������
�������������������������������
Interfaces�����������������
���������������������������
» целая глава посвящена переходам. Там рассказывается о тех же базовых принципах, что и на сайте
Yahoo!, но ее стоит прочитать.
Организация страницы:
компоновка элементов
страницы
4
Компоновка страницы — это искусство манипулирования вниманием пользователя
с целью выразить определенный смысл, передать последовательность действий или
организовать точки взаимодействия.
Если слово «манипулирование» кажется вам излишне грубым, подумайте об этом
с такой точки зрения. Режиссеры кино и телевидения зарабатывают себе на жизнь,
манипулируя вашим вниманием к фильму или телеэкрану, и вы, вероятно, добровольно участвуете в этом. То же самое можно сказать и о редакторах, которые компонуют
статьи, заголовки и объявления на газетных страницах. Если бы все это содержимое
представлялось скучно и неряшливо, без каких-либо акцентов, захватывающих и направляющих ваше внимание, то вам в действительности было бы намного сложнее
уяснить смысл — что здесь заслуживает внимания, а что нет?
Несмотря на то что в конечном итоге это искусство, в правильной компоновке страницы больше рационального обоснования, чем можно подумать. Некоторые важные
идеи из графического дизайна объясняются во введении к этой главе; каждая из них
может стать вашим помощником при компоновке страниц, экранов и диалоговых окон.
Мы поговорим о визуальной иерархии, визуальном потоке и точках фокусировки,
о группировке и выравнивании — все это популярные и рациональные подходы к дизайну страниц. Шаблоны из этой главы описывают конкретные способы применения
этих высокоуровневых концепций в дизайне интерфейсов.
Однако непостоянная интерактивная природа компьютерных экранов делает компоновку проще в одних аспектах и сложнее в других. Мы поговорим о том, почему это
так. Некоторые из рассматриваемых шаблонов, помимо экранных окон, также будут
работать и для печатных страниц, но большинство шаблонов на печати не применимы,
так как подразумевают взаимодействие пользователя со страницей.
Основы компоновки страницы
В этом разделе обсуждаются несколько основных элементов разметки страницы:
визуальная иерархия, визуальный поток и использование динамических дисплеев.
Основы компоновки страницы 151
Визуальная иерархия: что важнее? что взаимосвязано?
Концепция визуальной иерархии играет важную роль во всех формах графического
дизайна. Проще говоря, самое важное должно выделяться сильнее всего, а наименее
важную часть страницы выделять не нужно. Заголовки обязаны выглядеть как заголовки, подзаголовки — как подзаголовки, а списки — как списки. Другими словами, читатель должен схватывать информационную структуру страницы, видя ее компоновку.
Какой элемент разрабатываемой вами странице важнее всего? Поместите его
в центр внимания. Можно ли классифицировать оставшиеся элементы по убыванию
важности? Скомпонуйте их на странице таким образом, чтобы каждый последующий
привлекал все меньше внимания; делайте так, чтобы они выглядели менее интересно.
Вкратце, хорошая визуальная иерархия моментально сообщает зрителю о следующем:
‰‰относительная важность элементов страницы;
‰‰взаимоотношения между элементами.
Как сделать так, чтобы элемент выглядел важным?
Для короткого, но крупного текста, такого как заголовки и короткие фразы, применяйте шрифт большого размера и контрастный цвет, увеличивая визуальный вес содержимого (рис. 4.1). Кроме того, важность
элемента можно подчеркнуть за счет
большого количества пустого пространства — белого или с заливкой фонового
цвета. Для того чтобы выделить важный
текст на фоне обычного, используйте две
или больше из приведенных ниже характеристик.
С помощью следующих средств можно подчеркнуть или наоборот, преуменьшить значение блоков элементов меньшего размера — основного текста, ссылок
или интерактивных инструментов. См.
Рис. 4.1. Иерархия крупного текста
примеры на рис. 4.2.
Плотность
Плотный, тяжелый блок сильнее контрастирует со страницей; открытое пространство выглядит менее контрастным.
Цвет фона
Контраст притягивает внимание. Черное на белом (или наоборот) — это наиболее контрастный вариант из возможных.
Позиция и размер
Средний или большой текстовый блок, расположенный приблизительно в центре страницы, притягивает внимание и создает впечатление основного содержимого
экрана (это может быть статья или публикация в блоге). Маленькие полоски текста
внизу экрана тихо шепчут: «Я всего лишь служебное поле!» и так и просят не обращать на них внимания!
152 Глава 4 • Организация страницы: компоновка элементов страницы
Ритм
Списки, сетки, чередующиеся элементы, такие как заголовки и сводки, а также
разделение пустым пространством создают сильный визуальный ритм, неодолимо
притягивающий взгляд.
Рис. 4.2. Способы подчеркнуть важность блоков текста или небольших элементов
(по часовой стрелке, начиная с верхнего левого угла): плотность, фоновый цвет,
ритм и позиция и размер
Помещайте небольшие, но важные элементы наверху экрана, вдоль левого края,
либо в правом верхнем углу (рис. 4.3). Делайте их очень контрастными, придавайте
визуальный вес и выделяйте пустым пространством. Однако обратите внимание, что
на заполненном текстом экране, например, на большинстве веб-сайтов, определенные
элементы управления, в частности поля поиска, поля для входа в систему и большие
кнопки, выделяются в любом случае. Это относится не столько к визуальным характеристикам, сколько к значению: если пользователю нужно поле поиска, то его глаза
сразу же обнаружат его на экране (даже если он не читает метки текстовых полей).
Высококонтрастные, яркие изображения притягивают внимание; точно так же
мы обращаем внимание на изображения
лиц. Однако в большинстве случаев посетители веб-сайтов, ищущие информацию
или желающие выполнить какую-то задачу, рисунки игнорируют. Изображения —
это безразличные символы визуальной
иерархии. Тщательно продумывайте их
использование. Подробнее о применении визуальных элементов для передачи
эмоций, фирменного стиля и других нерациональных атрибутов рассказывается
Рис. 4.3. Акцентирование небольших
элементов
в главе 11.
Основы компоновки страницы 153
И еще одно: не сбрасывайте со счетов «рекламную слепоту». Пользователи могут
сознательно игнорировать элементы, похожие на рекламу, даже если те несут полезную информацию! И снова это говорит о значении элементов, а не о визуальном
представлении. Если вы когда-либо натыкались на заполненную объявлениями вебстраницу и намеренно игнорировали яркую, многоцветную и постоянно движущуюся
рекламу (чтобы прочитать монотонные блоки текста, ради которых зашли), то знаете,
что мы не рабы нашей жестко запрограммированной визуальной системы! Мы можем
не замечать вещи, которые не стоят внимания, и выделять наиболее важные области
страницы.
Как продемонстрировать взаимоотношения между элементами страницы?
Сгруппированные элементы создают впечатление взаимосвязанных (рис. 4.4). И наоборот, изолированность подразумевает разобщенность. Именно по этой причине
в предыдущем разделе я рекомендую небольшие, но важные элементы окружать
пустым пространством. Это отвечает гештальт-принципам близости и замкнутости
(подробнее об этом во врезке «Четыре важных гештальт-принципа» чуть ниже).
Схожие элементы выглядят равными по важности (рис. 4.5). Если у вас есть несколько элементов одного типа и вы хотите, чтобы зрителю они представлялись одинаково интересными альтернативами, примените для них одинаковую (и самобытную)
графическую обработку.
Рис. 4.4. Группировка связанных элементов
Рис. 4.5. Равнозначные элементы
Один элемент должен выделяться среди себе подобных? Немного измените графическую обработку, например выберите контрастный фоновый цвет. В целом он все
же не должен сильно отличаться от соседей (рис. 4.6). Можно также применить графический элемент, нарушающий линию, по которой выровнены элементы: выдвиньте
один из них, наложите его на другой или измените угол.
Список из множества похожих элементов, выровненный в строгую линию или
выстроенный в столбец, превращается в набор равных элементов, который следует
просматривать в определенном порядке (рис. 4.7). Тщательно выровняйте эти элементы относительно друг друга, чтобы создать визуальную линию (см. описание
гештальт-принципа непрерывности в следующей врезке). В качестве примеров можно
привести маркированные списки, меню навигации, текстовые поля в форме, таблицы
со строками чередующихся цветов и списки из заголовков и анонсов. Обратите вни-
154 Глава 4 • Организация страницы: компоновка элементов страницы
мание на повторяющийся шаблон в последних двух примерах. Хорошо выполненное
чередование выглядит очень привлекательно и создает приятный визуальный ритм
на странице.
Рис. 4.6. Выделение одного элемента
среди равнозначных
Рис. 4.7. Списки элементов
Текст со сдвигом и сжатый текст, как бы подпирающие собой более сильный элемент, смягчают его. Именно так работают подписи к изображениям, вспомогательный
текст, комментарии и т. п. (рис. 4.8).
Локализация подразумевает взаимоотношения по типу родитель/потомок
(рис. 4.9). Используйте поля, блоки фонового цвета, модульные вкладки, «аккордеоны», текстовые блоки и группы инструментов, окруженные пустым пространством,
для ограничения и компоновки связанных элементов (см. описание гештальт-принципа замкнутости в следующей врезке). Сдвиг также подразумевает взаимоотношение
родитель/потомок в контексте каркаса иерархического меню.
Рис. 4.8. Подписи и комментарии
Рис. 4.9. Локализация
Визуальный поток: на что смотреть дальше?
Визуальный поток определяет курс, которому обычно следует взгляд читателей при
просмотре страницы. Конечно же, он тесно связан с визуальной иерархией — хорошо
продуманная визуальная иерархия определяет на странице точки фокусировки, где
необходимо привлечь внимание к наиболее важным элементам, а визуальный поток
переводит взгляд читателей с этих точек на менее важную информацию. Будучи ди-
Основы компоновки страницы 155
зайнером, вы должны уметь контролировать визуальный поток на странице, чтобы
пользователи проходили по нужному пути в правильной последовательности.
Когда вы пытаетесь определить визуальный поток, несколько сил могут работать
друг против друга. Одна из них — человеческое стремление читать сверху вниз и слева
направо. Столкнувшись с однообразной страницей текста, мы делаем это естественным
образом, но любые визуальные точки фокусировки на странице могут сбить человека
с обычной последовательности, и это может быть и хорошо и плохо.
Точки фокусировки (focal points) — это точки, на которых взгляд человека останавливается независимо от его желания. Обычно взгляд следует от самой сильной до
самой слабой точки фокусировки. На хорошо продуманной странице их всего лишь
несколько; когда точек фокусировки слишком много, они ослабляют значимость друг
друга. В хорошей визуальной иерархии точки фокусировки используются для того,
чтобы взгляд читателя останавливался в нужных местах в правильном порядке.
Когда вы в следующий раз возьмете в руки журнал, взгляните на несколько удачно
скомпонованных объявлений и обратите внимание, куда сразу же упадет ваш
взгляд. Лучшие мастера коммерческой
графики являются отличными специалистами по расстановке точек фокусировки
и умело манипулируют тем, на что вы
посмотрите в первую очередь.
Так как создать хороший визуальный
поток? Один из самых простых способов — использовать для соединения элементов на странице воображаемые линии,
либо прямые, либо изогнутые (рис. 4.10).
Рис. 4.10. Воображаемые линии,
Это определит визуальную последоваопределяющие визуальный поток
тельность, которой с легкостью будет следовать зритель.
Помещайте призыв к действию после текста, который пользователи должны прочитать в первую очередь. Если вам все равно, прочитают они этот текст или нет, то
изолируйте призывы к действию с помощью пустого пространства (рис. 4.11).
Рис. 4.11. Призывы к действию: в составе потока и вне его
Точно так же при разработке формы расположите элементы управления вдоль
непрерывного пути, не забыв в конце поместить кнопки, сообщающие «Я закон-
156 Глава 4 • Организация страницы: компоновка элементов страницы
чил» ( OK , Отмена , Подтвердить , Купить
и т. д.) (рис. 4.12). Два конкретных подхода к компоновке форм см. в шаблонах
Right/Left Alignment (Выравнивание по
правому/левому краю) и Diagonal Ba­
lance (Диагональный баланс), а также
обратите внимание на шаблон Prominent
«Done» Button (Заметная кнопка «Готово») в главе 6.
Несложно создать макет с хорошим
потоком, но будьте внимательны, опасайРис. 4.12. Кнопка OK в конце формы
тесь макетов, в которых нарушается поток восприятия! Если вам действительно
важно, чтобы посетители сайта прочитали определенную историю или восприняли
ценные предложения, скомпонуйте критические элементы этого повествования вдоль
непрерывной линии и не разрывайте ее привлекающими внимание дополнениями.
Разрабатывая форму или набор интерактивных инструментов, не разбрасывайте
элементы управления по всей странице — не заставляйте пользователя проделывать
дополнительную работу, разыскивая их.
На рис. 4.13 показан не самый лучший пример визуального потока и визуальной
­иерархии. Сколько здесь точек фокусировки? Они конкурируют или взаимодействуют? На чем взгляд останавливается в первую очередь? Что на этой странице важнее
всего?
Рис. 4.13. Блок Weather Underground нарушает визуальную иерархию
Основы компоновки страницы 157
ЧЕТЫРЕ ВАЖНЫХ ГЕШТАЛЬТ-ПРИНЦИПА
Теория, лежащая в основе группировки и выравнивания, была разработана в начале XX века гештальт-психологами. Они описали несколько свойств, характеризующих компоновку элементов,
которые, по их мнению, изначально заложены в наши визуальные системы. Среди этих свойств
можно отметить следующие:
Близость
Поместите элементы рядом, чтобы пользователи ассоциировали их друг с другом. Это основа
строгой группировки содержимого и элементов управления в пользовательском интерфейсе.
Сходство
Если у двух элементов совпадает форма, размер, цвет или направление, то зрители также ассоциируют эти элементы друг с другом.
Непрерывность
Нашим глазам хочется видеть непрерывные линии и кривые, формируемые путем выравнивания небольших элементов.
Замкнутость
Мы предпочитаем видеть простые замкнутые формы, например прямоугольники и пятна пустого пространства, даже тогда, когда они не были нарисованы специально. Группы элементов
часто воспринимаются как замкнутые фигуры.
Рисунок 4.14 иллюстрирует каждое из свойств и показывает варианты их сочетания для создания
эффективного общего дизайна.
Рис. 4.14. Четыре гештальт-принципа

158 Глава 4 • Организация страницы: компоновка элементов страницы
Несомненно, перечисленные принципы очень важны по отдельности, но лчше всего использовать
их в сочетании друг с другом. Избыточность не всегда вредна: пятая группировка выглядит более
похожей на настоящий макет страницы, чем на мозаику в ретростиле.
Непрерывность и замкнутость, таким образом, объясняют выравнивание. Когда вы выравниваете
элементы, то их края образуют непрерывную линию, а пользователи следуют вдоль этой линии
(вероятно, бессознательно), предполагая наличие связи между выровненными элементами. Если
эти элементы настолько связаны, что образуют фигуру либо превращают в предполагаемую фигуру пустое пространство или «отрицательное пространство» вокруг, то эффект усиливается за счет
принципа замкнутости.
Использование динамических дисплеев
Пока все, о чем я говорила, в равной степени относилось к пользовательским интерфейсам, веб-сайтам, плакатам, рекламе и журнальным страницам. Для них важны
статические аспекты компоновки элементов страницы. Но вам же приходится иметь
дело с динамическим дисплеем компьютера — и неожиданно время становится еще
одним измерением дизайна! Кроме того, компьютеры допускают взаимодействие
пользователя со страницей на таком уровне, который невозможен для большинства
печатных материалов.
Для того чтобы воспользоваться преимуществом динамической природы компьютерных дисплеев, существует бесконечное количество способов. Можно, например,
сконцентрироваться на использовании пространства: даже на самых больших компьютерных экранах гораздо меньше места, чем, например, на плакате или газетной
странице. Такова жизнь. Если же вы работаете с мобильными устройствами, то вам
для воплощения дизайна отводится совсем крохотное пространство. Существуют
различные способы использования этого пространства для представления большего
количества содержимого, чем может поместиться на одном экране.
Использование полос прокрутки — это один из наиболее распространенных способов реализации небольшого «иллюминатора», открывающего вид на крупный
элемент, например объемный текст, изображение или таблицу. Полосы прокрутки
позволяют пользователю произвольно перемещаться в одном или двух измерениях.
(Однако, пожалуйста, не используйте горизонтальную прокрутку для интерфейсов,
содержащих текст!)
Если у вас есть возможность разбить содержимое на несколько связанных между
собой разделов, то можно воспользоваться разными вариантами: шаблоны Module
Tabs (Модульные вкладки), Collapsible Panels (Свертываемые панели), Accordion
(Аккордеон) и Movable Panels (Перемещаемые панели) передают управление компоновкой страницы в руки пользователя, в отличие от более статичного Titled Sections
(Именованные разделы). (Также содержимое можно разделить на несколько виртуальных страниц и позволить пользователю перемещаться по ним; см. главу 3.) Эти
шаблоны заставляют работать время и позволяют пользователю видеть в разные
моменты разное содержимое.
Если вам необходимо направить пользователя по определенной последовательности шагов, то для этого существует два проверенных способа — шаблоны Responsive
Enabling (Ответное включение) и Responsive Disclosure (Ответное обнаружение).
Шаблоны 159
Шаблоны
Шаблоны из этой главы описывают конкретные способы реализации перечисленных
концепций.
Первые три шаблона предназначены для определения визуальной иерархии целой
страницы, экрана или окна, независимо от типа информации, которую вы собираетесь
туда поместить. Определять визуальную схему рекомендуется в самом начале работы
над проектом, так как от этого зависит, как будут выглядеть все основные страницы
и окна интерфейса.
1. Visual Framework (Визуальная схема).
Ваша страница предназначена для отображения одного самого важного элемента
или нескольких элементов или инструментов одинаковой значимости? Центральная
сцена оформляется на странице, где один главный элемент или задача окружен несколькими незначительными, а сетка равных позволяет визуально уравновесить несколько соседних элементов (разумеется, в разных частях одной большой страницы
можно применять оба шаблона).
2. Center Stage (Центральная сцена).
3. Grid of Equals (Сетка равных).
Следующая группа шаблонов представляет альтернативные способы разбиения содержимого страницы или окна на части. Их полезно применять, когда вам необходимо
отобразить больше информации, чем может поместиться на одном экране. Должны
ли все разделы присутствовать на экране одновременно или их можно (и нужно) просматривать независимо? Разрешить ли пользователю каким-либо образом манипулировать разделами на странице или в таком случае он не заметит скрытое содержимое?
Эти шаблоны относятся и к разработке визуальной иерархии, но поскольку в них
задействована интерактивность, они могут помочь вам сделать выбор среди специ­
фических механизмов, предоставляемых средствами разработки пользовательских
интерфейсов.
4. Titled Section (Именованные разделы).
5. Module Tabs (Модульные вкладки).
6. Accordion (Аккордеон).
7. Collapsible Panels (Свертываемые панели).
8. Movable Panels (Перемещаемые панели).
Шаблоны Right/Left Alignment (Выравнивание по правому/левому краю) и Dia­
gonal Balance (Диагональный баланс) основываются на концепциях визуального потока, выравнивания и других принципах, о которых мы говорили во введении к этой
главе. Они касаются пространственных взаимоотношений между более мелкими
и статичными элементами на странице, такими как текст и элементы управления.
9. Right/Left Alignment (Выравнивание по правому/левому краю).
10. Diagonal Balance (Диагональный баланс).
Три последних шаблона определяют динамические аспекты компоновки содержимого. Responsive Enabling (Ответное включение) и Responsive Disclosure (Ответное
160 Глава 4 • Организация страницы: компоновка элементов страницы
обнаружение) представляют собой два способа направления действий пользователя
в соответствии с последовательностью шагов или набором вариантов. Они указывают, что он может сделать в каждый момент времени, в то же время запрещая уходить
в другое место, где его могут поджидать неприятности. Liquid Layout («Резиновый»
макет) — это техника организации страницы, позволяющая менять размер и форму
страницы в зависимости от желаний пользователя.
11. Responsive Disclosure (Ответное обнаружение).
12. Responsive Enabling (Ответное включение).
13. Liquid Layout («Резиновый» макет).
Visual Framework (Визуальная схема)
Рис. 4.15. Веб-сайт JAQK
Что
Для дизайна каждой страницы используйте один и тот же базовый макет, набор цветов
и стилистических компонентов, но обеспечьте достаточную гибкость, чтобы помещать
на страницы разное содержимое.
Использовать, когда…
Вы создаете веб-сайт с множеством страниц или пользовательский интерфейс с множеством окон — другими словами, практически любое сложное программное обеспечение. Необходимо, чтобы интерфейс был связным, то есть вид разных окон принадлежал бы единой структуре с продуманным дизайном. Использование интерфейса
и навигация должны быть простыми.
Почему
Когда в пользовательском интерфейсе используется один цвет, шрифт и макет страниц, когда заголовки и средства навигации — указатели — все время остаются на
привычном месте, пользователи всегда знают, где они находятся и где искать то, что
им нужно. Им не приходится знакомиться с новым интерфейсом при каждом переключении контекста — переходе от одной страницы или окна к другой.
Вам когда-нибудь встречалась книга, в которой номера страниц и заголовки на
каждой странице перепрыгивали бы в новое место?
Строгая визуальная схема, повторяющаяся на каждой странице, помогает содержимому страницы выделиться на ее фоне. То, что остается постоянным, уходит в созна-
Шаблоны 161
нии пользователя на задний план, а на то, что меняется, обращается особое внимание.
Помимо этого, добавление в дизайн особой визуальной схемы помогает определению
фирменного стиля — пользователи сразу узнают страницы вашего приложения.
Как
Разработайте общее представление каждой страницы или окна в создаваемом интерфейсе. Главные страницы и главные окна обычно бывают «особенными» в том смысле, что компоновка элементов на них может немного отличаться от страниц второго
уровня, но они, тем не менее, все так же должны нести определенные «фамильные»
черты, связывающие их с остальной частью интерфейса. Например:
‰‰цвет: фоновые цвета, цвета текста и цветовые акценты;
‰‰шрифты: для заголовков, подзаголовков, обычного текста, сносок и второстепенного текста;
‰‰стиль написания и грамматика: заголовки, имена, содержимое, краткие описания
и длинные блоки текста, то есть все случаи использования языка.
На всех прочих страницах также по возможности должны использоваться общие
элементы:
‰‰указатели «Вы находитесь здесь»: заголовки, логотипы, навигация в виде «хлебных
крошек», глобальная навигация с указателями текущей страницы и модульные
вкладки;
‰‰навигационные средства, включая глобальную и служебную навигацию, кнопки
OK/Cancel (OK/Отмена), кнопки возврата и выхода, а также навигационные шаблоны, такие как Sequence Map (Карта последовательности) и Breadcrumbs (Хлебные
крошки) (они описаны в главе 3);
‰‰техники, применяемые для определения именованных заголовков (шаблон Titled
Sections (Именованные разделы));
‰‰промежутки и выравнивание элементов: поля страниц, интервал между строками,
расстояние между метками и связанными с ними элементами управления, а также
выравнивание текста и меток;
‰‰общая схема компоновки: расположение элементов на странице, в столбцах и строках с учетом упомянутых выше полей страниц и промежутков между элементами.
Если вам знакомы концепции графического дизайна, то вы можете узнать в некоторых из этих методик составляющие сетки для макета. Сетка — это структурный
шаблон для группы страниц или типов компоновки элементов. Каждая страница
индивидуальна, но для всех страниц устанавливаются определенные размеры полей,
а содержимое выравнивается вдоль невидимых линий сетки. Хорошая визуальная
схема действительно включает не только единую сетку, но и другие аспекты общего
представления дизайна, например цвета, визуальные детали и стиль написания.
Реализация визуальной схемы должна заставить вас отделить стилистические
аспекты пользовательского интерфейса от его содержания. Это очень полезно. Если
определить схему только в одном месте, например в таблице стилей CSS или классе
Java, то ее можно будет менять независимо от содержимого, то есть при необходимости
вам будет проще поправить что-то в дизайне, чтобы добиться идеального результата
(это также хорошая практика разработки программного обеспечения).
162 Глава 4 • Организация страницы: компоновка элементов страницы
Примеры
Визуальную схему веб-сайта JetBlue составляют ограниченная цветовая палитра,
сильный заголовок и единообразное применение шрифтов и сглаженных прямо­
угольников (рис. 4.16). Эти элементы используются даже на странице входа в систему
и в модальных диалоговых окнах; они не выглядят случайными.
Точно так же набор цветов ограничен на веб-сайте TED. Кроме того, сохранить
единообразие помогает сетка макета (рис. 4.17). Следует обратить внимание на интересную проблему, типичную для многих современных многофункциональных сайтах:
второстепенные или связанные сайты (такие как блог или конференция) должны сохранять визуальное сходство с главным сайтом, но все же иметь некоторые отличия.
В данном случае на двух связанных сайтах используется большинство элементов визуальной схемы главного веб-сайта TED, однако присутствуют и заметные ключевые
различия (рис. 4.18).
Рис. 4.16. Веб-сайт JetBlue
Шаблоны 163
Рис. 4.17. Веб-сайт TED
Рис. 4.18. Дополнительные веб-сайты TED, созданные на базе такой же визуальной
схемы, но не идентичные
164 Глава 4 • Организация страницы: компоновка элементов страницы
Center Stage (Центральная сцена)
Рис. 4.19. Редактор Flash
Что
Поместите самую важную часть пользовательского интерфейса в самый большой подраздел страницы или окна; объедините дополнительные инструменты и содержимое
на небольших панелях, окружающих сцену.
Использовать, когда…
Основная задача страницы — продемонстрировать пользователю один блок логически
связанного содержимого, позволить ему отредактировать документ или выполнить
определенную задачу. Остальное содержимое и функции считаются вторичными.
«Центральную сцену» можно использовать в большинстве приложений — сюда входят
текстовые редакторы и электронные расчетные таблицы, формы и графические редакторы, а также веб-страницы с одной главной статьей, изображением или функцией.
Почему
Взгляд пользователя необходимо сразу же направить на наиболее важную информацию (или задачу), не позволяя ему растерянно бродить по странице. Четко выраженный центральный элемент приковывает внимание. Так же как первая строка в новостной статье определяет ее суть и назначение, элемент, находящийся на «центральной
сцене», определяет назначение пользовательского интерфейса.
Когда это сделано, пользователь может оценить, как периферийные элементы соотносятся с тем, что находится в центре. Для пользователя это проще, чем непрерывно
сканировать страницу, чтобы выяснить, что же здесь должно занимать первое место?
А что должно быть на втором? Какая между ними связь? И так далее.
Шаблоны 165
Как
Создайте визуальную иерархию, в которой главное содержимое или документ будет
доминировать над всем остальным. (Обсуждение визуальной иерархии см. во введении к этой главе.) При разработке интерфейса на основе шаблона Center Stage (Центральная сцена) учитывайте следующие факторы (хотя ни один из них не является
абсолютной необходимостью).
Размер
Содержимое «центральной сцены» должно быть, как минимум, в два раза шире
всего, что находится в левом и правом полях, и в два раза выше того, что занимает
верхнее и нижнее поля. (Пользователю можно разрешить менять ее размер, но при
первом открытии интерфейс должен выглядеть именно так.) Не забывайте о размере экрана: если у пользователя маленький монитор, то на каком уровне следует
обрезать содержимое снизу? Удостоверьтесь, что в любом случае центральная сцена
займет большую часть экрана.
Цвет
Для выделения центральной сцены используйте цвет, контрастирующий с информацией на полях. В пользовательских интерфейсах настольных приложений
белый цвет хорошо контрастирует со стандартным серым цветом Windows������
�������������
, особенно в таблицах и деревьях. Также белый цвет зачастую хорошо работает на вебстраницах, так как в рекламных объявлениях и навигационных панелях обычно
применяют другие фоновые цвета; кроме того, считается, что пользователи вебсайтов «приучены» искать обычный текст на белом фоне.
Заголовки
Крупные заголовки являются точками фокусировки и могут привлекать внимание пользователя к верхней части «центральной сцены». Конечно же, этот принцип
работает и в печатных средствах информации. Подробнее о заголовках и точках
фокусировки рассказывается во введении к этой главе и в описании шаблона Titled
Sections (Именованные разделы).
Контекст
Что пользователь ожидает увидеть, когда открывает страницу: графический редактор, длинную текстовую статью, карту или дерево файловой системы? Воспользуйтесь знанием о том, чего он ожидает — поместите этот объект на центральную
сцену и сделайте его легко узнаваемым. Пользователь будет искать именно этот
объект; ожидания — козырь среди всех прочих правил, описывающих визуальное
восприятие. (Однако это не означает, что можно намеренно выводить пользователей из себя, пряча то, что они ищут. На некоторых веб-сайтах основное содержимое
находится на странице так низко, что оказывается под нижней границей небольших
окон, и для того чтобы добраться до него, приходится прокручивать окно. Это
чистой воды садизм.)
Обратите внимание, что я не упомянула об одной традиционной составляющей
макета страницы — позиции. В действительности не так уж важно, где будет находиться центральная сцена: вверху, слева, справа, внизу или по центру, — любой вариант
можно заставить хорошо работать. «Центральная сцена» достаточно велика, чтобы
при любом раскладе оказываться приблизительно в центре интерфейса. Помните,
166 Глава 4 • Организация страницы: компоновка элементов страницы
что в прочно установившихся жанрах существуют особые соглашения относительно
того, что должно находиться в каждом поле: например, панели инструментов вверху
графических редакторов или панели навигации слева на веб-страницах. Проявляйте
фантазию, но держите ухо востро!
Если вы сомневаетесь, то сделайте снимок экрана вашего макета, уменьшите его,
размойте и попросите кого-нибудь указать, где на этой странице начинается основное
содержимое. За примером я снова отправляю вас во введение к этой главе.
Примеры
В текстовом редакторе Google���������������������������������������������������
���������������������������������������������������������
Docs����������������������������������������������
��������������������������������������������������
почти все горизонтальное пространство предназначено для размещения документа; так же скомпонован и экран редактора электронных таблиц. Даже инструменты наверху страницы не занимают слишком много места.
В результате получается чистый и сбалансированный образ (рис. 4.20).
Рис. 4.20. Текстовый редактор Google Docs
На страницах с текстовым содержимым, таким как публикации в блогах, поля
часто загромождаются множеством лишних элементов. Такие сайты, как Newfangled
(рис. 4.21) и Steepster��������������������������������������������������������������
�����������������������������������������������������������������������
(рис. 4.22), отдают главному содержимому достаточно пространства, чтобы оно могло конкурировать с элементами навигации и прочими периферийными функциями. Обратите внимание, какую площадь занимают главные статьи на
обоих сайтах и как высоко расположено начало статьи.
В других библиотеках
http://www.welie.com/patterns/showPattern.php?patternID=center-stage
Шаблоны 167
Рис. 4.21. Статья на веб-сайте Newfangled
Рис. 4.22. Статья на веб-сайте Steepster
168 Глава 4 • Организация страницы: компоновка элементов страницы
Grid of Equals (Сетка равных)
Рис. 4.23. Веб-сайт Nike
Что
Расположите содержимое в ячейках сетки или матрицы. Все элементы должны соответствовать общему шаблону и иметь одинаковый визуальный вес на странице. Если
необходимо, поместите под каждым элементом ссылку на соответствующую страницу
с подробностями.
Использовать, когда...
На странице находится множество элементов одного стиля и значимости, таких как
новостные статьи, публикации в блоге, продукты или тематические разделы. Вы хотите предоставить пользователю возможность предварительного просмотра и выбора
элементов.
Почему
Сетка, в которой элементы размещаются на одинаковой площади, подчеркивает одинаковую важность этих элементов. Если элементы созданы на базе одного шаблона, то
пользователь понимает, что они похожи. Данная методика определяет эффективную
визуальную иерархию, которая должна соответствовать семантике содержимого.
Сетки смотрятся опрятно, рационально и уравновешенно. Это отвечает общему
стилю вашего сайта или приложения.
Как
Подумайте, как должны выглядеть отдельные элементы сетки. Какие выбрать эскизы
изображений или графические символы? Нужны ли заголовки, подзаголовки, анонсы?
Ссылки на тематические страницы (то есть содержащие полные истории для соответствующих элементов сетки)? Не ограничивайтесь блоками основного текста: создайте
разноцветные заголовки; творчески используйте пустое пространство и изображения,
можно ли их единообразно внедрить во все элементы? Поэкспериментируйте с размещением необходимой информации на относительно небольшом пространстве —
высоком, широком или квадратном — и примените этот шаблон ко всем элементам
сетки, которые должны оказаться на экране.
Шаблоны 169
Теперь организуйте элементы в сетке. Можно ограничиться одной строкой либо
создать матрицу шириной в два, три или более элементов. При разработке дизайна
учитывайте ширину экрана — как страница будет выглядеть в узком окне? Будет ли
большинство пользователей работать в большом окне браузера? А как изменится
страница на крошечном экране мобильного устройства?
Элементы сетки можно подсвечивать — либо статически (для выделения одного
элемента на фоне остальных), либо при наведении указателя мыши. Меняйте цвета
и другие стилистические компоненты, но не позицию и не размер. Структурные
­элементы сетки должны оставаться неизменными — содержимое не должно прыгать по экрану, когда пользователь подводит указатель мыши к тому или другому
элементу!
Аналог этого шаблона — шаблон Thumbnail Grid (Сетка эскизов) из главы 5. Он
описывает способ размещения компонентов в виде двумерной матрицы небольших
изображений, возможно, дополненных некоторым количеством текста. Также обратите внимание на шаблон Thumbnail-and-Text List (Список эскизов и текста) для мобильного дизайна (глава 10). Он описывает один столбец, а не сетку, но идея остается
неизменной: используйте один согласованный, стилистически продуманный шаблон
для всех элементов списка.
Примеры
На веб-сайтах Nike (рис. 4.23), Hulu (рис. 4.24), CNN (рис. 4.25) все элементы сетки
соответствуют одному общему шаблону. В целом создается хороший ритмичный
и успокаивающий эффект. Обратите внимание, что на этих сайтах по-разному сбалансированы текст и изображения.
Рис. 4.24. Веб-сайт Hulu
170 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.25. Веб-сайт CNN
В примерах с веб-сайтов MapQuest�������������������������������������������������
���������������������������������������������������������
(рис. 4.26) и ����������������������������������
IBM�������������������������������
(рис. 4.27) показано, как реализовать этот шаблон с одной строкой элементов (технически она тоже считается сеткой). Общий стиль визуального исполнения сообщает зрителю, что это равнозначные
элементы. Все элементы содержат одну или несколько ссылок. В большинстве случаев
этот шаблон как раз и используется для анонсирования содержимого, к полной версии
которого можно перейти, щелкнув на ссылке внутри элемента.
Рис. 4.26. Веб-сайт MapQuest
В других библиотеках
Несколько великолепных примеров вы найдете в статье «15 Tips for Designing Terrific
Tables» Джошуа Джонсона:
http://designshack.co.uk/articles/css/15-tips-for-designing-terrific-tables
Шаблоны 171
Рис. 4.27. Внутренняя страница веб-сайта IBM
Titled Sections (Именованные разделы)
Рис. 4.28. Именованные разделы на веб-сайте JetBlue
Что
Разбейте содержимое на автономные разделы, снабдив каждый четко различимым
заголовком, а затем расположите все разделы на странице.
Использовать, когда…
На странице очень много содержимого, но вы хотите сделать ее максимально удобной
для быстрого просмотра и восприятия. Содержимое можно разбить на тематические
или посвященные определенным задачам разделы, имеющие смысл для пользователя.
Почему
При помощи четко определенных и именованных разделов содержимое делится на
удобоваримые порции, каждая из которых понятна пользователю с одного ­взгляда —
172 Глава 4 • Организация страницы: компоновка элементов страницы
информационная архитектура становится очевидной. (См. во введении к этой главе
обсуждение визуальной иерархии — в целом это тот же вопрос визуализации содержимого так, чтобы была понятна его фактическая структура. Также определение
информационной архитектуры см. в главе 2.)
Пользователю гораздо комфортнее изучать страницу, аккуратно разбитую на подобные разделы. Благодаря особенностям нашего визуального восприятия мы всегда
стремимся увидеть более крупные блоки, независимо от того, намеренно они созданы
или нет. Так создайте их специально!
Как
Сначала хорошо продумайте информационную архитектуру — разбейте содержимое
на связные фрагменты (если это еще не сделано) и присвойте им краткие и хорошо
запоминающиеся названия. Затем выберите способ представления:
‰‰для заголовков используйте шрифт, выделяющийся на фоне остального содержи-
мого, — более жирный, широкий, большего размера, более насыщенного цвета, из
другого семейства шрифтов, со смещением и т. д. Подробнее о визуальной иерархии
говорится во вступлении к этой главе;
‰‰попробуйте поместить заголовок на полосу контрастного цвета;
‰‰используйте пустое пространство для отделения разделов друг от друга;
‰‰помещайте разделы на подложки контрастных цветов;
‰‰рамки, состоящие из вытравленных, скошенных или выпуклых линий, знакомы
вам по многим настольным пользовательским интерфейсам. Они могут потеряться — и превратиться в простой визуальный шум, — если будут слишком большими,
окажутся слишком близко друг к другу, или если вы создадите слишком глубокую
вложенность.
Если на странице все еще остается слишком много информации, попробуйте применить шаблон Module Tabs (Модульные вкладки), Accordion (Аккордеон) или Collapsible Panels (Свертываемые панели).
Если у вас возникают сложности с придумыванием разумных заголовков для
фрагментов содержимого, это может быть знаком, что выбранная группировка неестественна и не подходит для данного типа информации. Попробуйте реорганизовать
ее, разрезав на другие порции, которые будет проще назвать и запомнить. Категории
«Разное» также говорят о не совсем верной организации, хотя иногда в них возникает
необходимость.
Примеры
На странице настроек учетной записи в системе ����������������������������������
Amazon����������������������������
используются три уровня заголовков, соответствующие трем уровням визуальной иерархии: заголовок страницы,
заголовки разделов (Orders (Заказы), Payment (Оплата), Settings (Настройки)) и подзаголовки наверху списков ссылок (рис. 4.29). Обратите внимание на использование
пустого пространства, рамок и выравнивания для структуризации страницы.
Утилита синхронизации устройства iPhone (рис. 4.30) демонстрирует способ
организации, при котором содержимое разных типов аккуратно распределяется по
именованным разделам. Между собой разделы имеют мало общего (за исключением
Шаблоны 173
шрифта) — нет общей сетки, выравнивания или плана размещения содержимого. Однако рамки и пустое пространство разбивают страницу на фрагменты таким образом,
что все становится понятно без дополнительных ухищрений.
Рис. 4.29. Настройки учетной записи на веб-сайте Amazon
Рис. 4.30. Утилита синхронизации устройства iPhone
174 Глава 4 • Организация страницы: компоновка элементов страницы
В других библиотеках
http://quince.infragistics.com/Patterns/Titled%20Sections.aspx
http://patternry.com/p=content-groups/
Module Tabs (Модульные вкладки)
Рис. 4.31. Веб-сайт MapQuest
Что
Поместите модули содержимого в небольшую область, разбитую на вкладки. Одновременно пользователю будет видна только одна вкладка. Пользователь щелкает на
разных вкладках, для того чтобы вывести их содержимое наверх.
Использовать, когда…
На странице много разнородного содержимого, это могут быть текстовые блоки,
списки, кнопки, элементы управления форм и изображения. У вас нет достаточного
количества места, чтобы показать сразу все.
Части содержимого можно объединить в группы или модули (или рассортировать
по логически согласованным разделам). Модули должны обладать следующими характеристиками:
‰‰пользователю не нужно одновременно видеть содержимое разных модулей;
‰‰они похожи по высоте и длине;
‰‰их немного — точно меньше десяти;
‰‰набор модулей относительно статичен; новые страницы добавляются редко, существующие также редко редактируются или удаляются;
‰‰содержимое разных модулей может быть связанным или похожим.
Почему
Вкладки повсеместно встречаются в интерфейсах настольных приложений и вебсайтов. Они знакомы всем, и ни у кого не возникает вопросов относительно того, как
они работают.
В целом, разбиение содержимого на фрагменты, из которых на экране одно­
временно отображается только один, может быть очень эффективным способом
Шаблоны 175
упорядочения пространства. Вкладки работают просто отлично, так же как «аккордеоны», перемещаемые панели, свертываемые панели и простая сетка именованных
разделов.
Как
Начните с создания хорошей информационной архитектуры. Разбейте содержимое
на взаимосвязанные части (если это еще не сделано) и присвойте им короткие запоминающиеся заголовки. Помните, что если разделить содержимое неправильно, то
пользователям постоянно придется переключаться между вкладками во время поиска
информации или сравнения элементов. Будьте добры к своим пользователям и обязательно протестируйте выбранный способ организации информации.
Недвусмысленно помечайте активную вкладку — например, выравнивая ее по краю
общей панели. (Одного цвета не всегда достаточно. Если у вас только две вкладки,
удостоверьтесь, что активную и скрытую перепутать невозможно.)
Однако вкладки не обязательно должны иметь традиционный вид и находиться
наверху пачки модулей. Их можно разместить в виде столбца в левой части экрана,
уложить внизу или даже повернуть на 90 градусов и вывести текст вертикально.
Модульные вкладки — это не то же самое, что навигационные вкладки на вебсайтах (которые применяются для глобальной навигации, разделения документов или
загрузки новых страниц). Они также полезны, но данный шаблон рассказывает о том,
как упростить для пользователя просмотр альтернативных фрагментов или модулей
содержимого в пределах одной страницы.
Если вкладок слишком много и они не помещаются в узком пространстве, то существует несколько выходов из подобной ситуации: укоротите метки и добавьте многоточия (сделав, таким образом, каждую вкладку уже) или используйте для перемещения
по вкладкам навигационные кнопки типа «карусель». Метки можно поместить слева,
а не сверху. Но никогда не выстраивайте вкладки в два ряда.
(В первом издании книги этот шаблон назывался Card Stack (Пачка карточек).
Большинству людей эта концепция знакома под общим названием «вкладки»; однако
название «модульные вкладки» применяется, по крайней мере, в двух других библиотеках шаблонов.)
Примеры
 Microsoft������������������������������������������������������������������������
���������������������������������������������������������������������������������
Office�����������������������������������������������������������������
�����������������������������������������������������������������������
для Windows�����������������������������������������������������
������������������������������������������������������������
7 наверху документов находится «лента», а не привычное меню и панели инструментов (рис. 4.32). По сути, это набор модульных вкладок.
Вкладки могут располагаться и по бокам страницы, как показано на рис. 4.33.
Некоторые модульные вкладки в Mac�����������������������������������������
��������������������������������������������
����������������������������������������
OS��������������������������������������
больше похожи на кнопки. Однако функционируют они именно так, как ожидается от вкладок. Метки вкладок перечисляются
наверху окна: Audio (Музыка), Photos (Фотографии), Movies (Фильмы) и Widgets (Виджеты), как показано на рис. 4.34.
В других библиотеках
http://developer.yahoo.com/ypatterns/navigation/tabs/moduletabs.html
http://ui-patterns.com/patterns/ModuleTabs
http://www.welie.com/patterns/showPattern.php?patternID=tabbing
http://patternry.com/p=horizontal-module-tabs/
176 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.32. Две вкладки на ленте в Excel
Рис. 4.33. Приложение SourceForge
Шаблоны 177
Рис. 4.34. Приложение iWeb
Accordion (Аккордеон)
Рис. 4.35. Палитра в приложении Word
178 Глава 4 • Организация страницы: компоновка элементов страницы
Что
Поместите модули содержимого на панели одинаковой ширины, которые можно открывать и закрывать независимо друг от друга.
Использовать, когда...
На странице много разнородного содержимого, это могут быть текстовые блоки,
списки, кнопки, элементы управления форм и изображения. У вас нет достаточного
количества места, чтобы показать сразу все.
Части содержимого можно объединить в группы или модули (или рассортировать
по логически согласованным разделам). Модули должны обладать следующими характеристиками:
‰‰пользователю может понадобиться одновременно видеть содержимое разных
модулей;
‰‰некоторые модули очень длинные или, наоборот, короткие, но по ширине они все
одинаковые;
‰‰модули составляют палитру инструментов, двухуровневое меню или другую связную систему интерактивных элементов;
‰‰содержимое модулей может быть похожим или связанным по любому другому
признаку;
‰‰вам необходимо сохранить линейный порядок модулей.
Также обратите внимание, что заголовки нижних модулей «аккордеона» могут
оказаться за пределами нижней части экрана, если пользователь откроет большой
модуль или несколько модулей одновременно. Если это действительно так, то попробуйте подобрать другой вариант интерфейса.
Почему
«Аккордеон» стал привычным элементом интерфейса веб-страниц — почти таким же
родным для каждого пользователя, как модульные вкладки и раскрывающиеся меню
(хотя принцип его работы и не столь очевиден). На многих веб-сайтах аккордеоны
помогают упорядочивать очень длинные списки страниц и категорий в меню.
В целом, чтобы не захламлять интерфейс, содержимое полезно группировать и частично убирать с экрана по умолчанию. «Аккордеон» относится к той же категории
инструментов, что и модульные вкладки, перемещаемые панели, свертываемые панели
и именованные разделы. Все они выполняют одну задачу.
«Аккордеоны» бывают полезны при проектировании навигационных систем вебстраниц, но по-настоящему они проявляют себя в настольных приложениях, особенно
когда применяются для размещения панелей инструментов (в этом они схожи с перемещаемыми панелями). Благодаря тому, что любой набор модулей можно открыть
и оставить на экране в таком виде, «аккордеон» помогает настраивать «жизненное
пространство» пользователя наиболее удобным для него способом. И разумеется,
в таком интерфейсе совсем несложно в случае необходимости открыть редко используемый модуль.
Как
Расположите модули вертикально, в порядке, наиболее подходящем для данного приложения или сайта. Присвойте каждому модулю короткий описательный заголовок
Шаблоны 179
и поместите его в горизонтальную полосу, по которой пользователь будет щелкать
для открывания и закрывания модуля. Указать на «открываемость» строки заголовка модуля можно с помощью значка треугольника: в закрытом состоянии он должен
указывать вправо, а в открытом вниз.
У пользователя может возникнуть необходимость открыть сразу несколько модулей. На этот счет существуют разные мнения: некоторые дизайнеры предпочитают,
чтобы открытым мог быть только один модуль, поэтому некоторые реализации имеют
такое ограничение (или предлагают разработчикам установить значение соответствующего переключателя). Но по моему опыту, в приложениях лучше позволять пользователям открывать произвольное число модулей. При таком подходе их не будет
шокировать внезапное и неожиданное исчезновение ранее открытого модуля: «Эй,
где предыдущее меню? Оно только что было здесь!»
При использовании в приложении или на веб-сайте, куда пользователь входит
со своими учетными данными, «аккордеон» должен сохранять состояние открытых
и закрытых модулей между сеансами. Это одинаково важно для навигационных меню
и панелей инструментов.
«Аккордеоны» можно вкладывать один в другой, если содержимое модуля требует дальнейшего деления на категории, но вложенные «аккордеоны» выглядят
гро­моздко и могут смущать пользователя. Становится трудно отличить «внешнюю»
панель ­«аккордеона» от «внутренней». Когда все выровнено в один столбец, иерархия ­становится неочевидной. Лучше создать один
плоский набор модулей и при необходимости использовать внутри вкладок какой-нибудь другой
способ структурирования информации, например
вкладки.
Эта техника появилась еще в 1993 году, если
не раньше. В компоновщике пользовательского
интерфейса на базе Motif, который назывался
UIM/X, в качестве палитр виджетов применялись
закрываемые панели — даже с разворачивающимися стрелками.
(В первой редакции книги этот шаблон назывался Closable Panels (Закрываемые панели). Но
с тех пор в пользовательской среде прижилось название «аккордеон».)
Примеры
В окне обзора файлов приложения Picasa модули
«аккордеона» представляют различные способы
просмотра фотографий пользователя. Содержимое
каждой панели может дополнительно делиться на
подкатегории, как на рис. 4.36, где используются
именованные разделы. В инструментах разработки
Chrome���������������������������������������
, с другой стороны, «аккордеоны» вложены один в другой (рис. 4.37). Схему вложенности
можно понять, если долго приглядываться, но это
непросто.
Рис. 4.36. Левая боковая панель
в приложении Picasa
180 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.37. Правая боковая панель браузера Chrome с вложенными «аккордеонами»
Рис. 4.38. Боковая панель на веб-сайте CNN
Шаблоны 181
На веб-сайте CNN����������������������������������������������������������
�������������������������������������������������������������
в структуре формата «аккордеон» отображается персонализированный материал. В этой реализации одновременно может быть открыта только
одна панель. Лично мне хотелось бы видеть эти панели открытыми одновременно, но,
возможно, у разработчиков сайта попросту не хватило горизонтального пространства.
Как видно на рис. 4.39, «аккордеон» используется в нижней полосе веб-сайта
Yahoo��������������������������������������������������������������������������
! ������������������������������������������������������������������������
Developer���������������������������������������������������������������
Network�������������������������������������������������������
��������������������������������������������������������������
, чтобы пользователи могли открыть интересующие их разделы и скрыть ненужные. Также обратите внимание на карту сайта внизу страницы,
о которой рассказывалось в главе 3.
Рис. 4.39. Информационная полоса внизу страницы Yahoo! Developer Network
В других библиотеках
http://developer.yahoo.com/ypatterns/navigation/accordion.html
http://ui-patterns.com/patterns/AccordionMenu
http://www.welie.com/patterns/showPattern.php?patternID=accordion
В книге «Designing Web Interfaces» Билла Скотта и Терезы Нейл (издательство
O’Reilly, http://oreilly.com/catalog/9780596516253/) также говорится о шаблоне Accordion
(Аккордеон).
Collapsible Panels (Свертываемые панели)
Рис. 4.40. Веб-сайт Google Maps
182 Глава 4 • Организация страницы: компоновка элементов страницы
Что
Поместите вспомогательный или дополнительный материал на панели, которые пользователь сможет открывать и закрывать.
Использовать, когда…
На странице много разнородного содержимого, это могут быть текстовые блоки,
списки, кнопки, элементы управления форм и изображения. У вас нет достаточного
количества места, чтобы показать сразу все. Возможно, однако, наличие приоритетного
содержимого, которое должно занимать на экране центральную сцену (см. одноименный шаблон).
Часть содержимого страницы объединена в группы или модули (или его можно
рассортировать по логически согласованным группам). Эти модули должны обладать
следующими характеристиками:
‰‰их содержимое описывает, модифицирует, объясняет или любым другим образом
поддерживает содержимое главной части страницы;
‰‰модули не настолько важны, чтобы открывать их на экране по умолчанию;
‰‰ценность модулей для разных пользователей разная. Некоторым необходимо всегда
видеть определенный модуль, а другим он совершенно не нужен;
‰‰даже если модуль имеет ценность для пользователя, он не нужен ему на экране
все время. Когда модуль закрыт, на его месте отображается основное содержимое
страницы;
‰‰иногда может потребоваться открыть сразу несколько модулей;
‰‰модули не связаны друг с другом. Когда используются модульные вкладки или
«аккордеон», то группировка модулей подразумевает, что их содержимое каким-то
образом связано. Свертываемые панели не группируют содержимое.
Почему
Интерфейс выглядит проще, если малозначимые фрагменты содержимого не находятся на экране постоянно. Когда пользователь скрывает модуль, служащий для
поддержки основного содержимого, то освободившееся пространство отдается под
содержимое главной сцены (или остается пустым). Это пример принципа прогрессивного обнаружения: показывать скрытое содержимое «точно вовремя» — в том месте
и в то время, когда пользователю это необходимо.
В целом, чтобы не захламлять интерфейс, содержимое полезно группировать и частично убирать с экрана, когда оно не востребовано. Свертываемые панели относятся
к той же категории инструментов, что и модульные вкладки, перемещаемые панели,
«аккордеоны» и именованные разделы. Все они выполняют одну задачу.
Как
Поместите каждый вспомогательный модуль на панель, которую пользователь сможет
открыть или закрыть одним щелчком. Добавьте на кнопку или ссылку, с помощью которой это будет делаться, название модуля или просто надпись «Еще...» Рассмотрите
возможность использования значка шеврона или поворачивающегося треугольника,
чтобы указать на дополнительное скрытое содержимое. Когда пользователь закрывает
панель, на освободившемся пространстве должно размещаться другое содержимое.
Шаблоны 183
Например, можно переместить вверх информацию, которая находилась на странице
ниже свертываемой панели.
Подумайте, можно ли использовать анимацию. Когда панель плавно выезжает или
убирается за пределы экрана, пользователь лучше отслеживает изменения интерфейса.
Если в вашем интерфейсе несколько подобных модулей, то их можно либо разместить на одной панели (см. шаблоны Module Tabs (Модульные вкладки) и Accordion
(Аккордеон)), либо поместить в разные места главной страницы.
Обнаружив, что большинство пользователей открывают свертываемую панель,
которая по умолчанию закрыта, измените ее настройки и показывайте на экране сразу
после открытия приложения.
Примеры
Веб-сайт Google Maps, показанный на рис. 4.40, демонстрирует, насколько полезно
убирать с экрана временно ненужные панели — без боковой панели видимая площадь
карты становится намного больше.
На некоторых форумах, таких как представленный на рис. 4.41, длинные комментарии убираются в свертываемые панели. Посетитель может пробежать глазами по
сокращенной версии обсуждения, чтобы понять, о чем речь, и, заинтересовавшись,
развернуть любой из длинных комментариев.
Рис. 4.41. Комментарии к статье на веб-сайте MSNBC
Во многих приложениях дополнительные боковые панели прикрепляются к центральной сцене. Для того чтобы закрыть боковую панель браузера Firefox (рис. 4.42),
нужно щелкнуть единственную кнопку X; открывается панель через меню или с помощью сочетания клавиш. Обратите внимание, как это несправедливо: закрыть панель намного проще, чем открыть, по крайней мере, пока пользователь не запомнит
сочетание клавиш! На веб-странице или в нечасто используемом приложении намного
удобнее было бы иметь соответствующую кнопку где-нибудь на панели инструментов.
На момент написания этой главы на страницах видеороликов веб-сайта YouTube
(рис. 4.43) используется множество свертываемых панелей. Они предназначены для дополнительного содержимого, такого как описание видео, статистика просмотров, список других клипов того же автора (на снимке экрана не показано). Внимание посетителя
привлекается к этим расширяемым областям с помощью цвета: если подвести указатель мыши к заголовку, он подсвечивается голубым цветом. По умолчанию все панели
скрыты, и они снова закрываются после обновления страницы. В результате получается очень чистый и свободный интерфейс, который, тем не менее, предоставляет интересную информацию пользователям, решившим заглянуть на дополнительные панели.
184 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.42. Боковая панель закладок в браузере Firefox
Рис. 4.43. Свертываемые панели на веб-сайте YouTube; показаны три состояния:
все панели закрыты; открыта панель с описанием видео; открыта панель статистики
(невозможно открыть обе эти панели одновременно)
Шаблоны 185
В других библиотеках
http://www.welie.com/patterns/showPattern.php?patternID=collapsible-panels
http://www.welie.com/patterns/showPattern.php?patternID=details-on-demand
http://quince.infragistics.com/Patterns/Closable%20Panels.aspx
Movable Panels (Перемещаемые панели)
Рис. 4.44. Веб-сайт My Yahoo!
Что
Поместите различные инструменты или разделы содержимого на отдельные панели
и позвольте пользователю открывать, закрывать и перемещать их по интерфейсу независимо друг от друга, создавая собственную компоновку.
Использовать, когда…
Вы создаете либо настольное приложение, либо веб-сайт, на котором большинство
пользователей входят в систему со своими учетными данными. Перемещаемые панели часто используются на новостных порталах, приборных панелях и в приложениях
формата «холст плюс палитра». Вам нужно, чтобы у пользователей возникало некое
чувство управления приложением, или, по крайней мере, им должна доставлять удовольствие игра с элементами интерфейса.
Рассматриваемая страница представляет собой основную часть приложения или
сайта — пользователи видят ее часто и в течение длительного времени. На странице
много разнородного содержимого, это могут быть текстовые блоки, списки, кнопки,
элементы управления форм и изображения. Для того чтобы разместить на экране все
содержимое сразу, места недостаточно.
186 Глава 4 • Организация страницы: компоновка элементов страницы
Часть содержимого страницы можно объединить в группы или модули (или рассортировать по логически взаимосвязанным разделам). Эти модули должны обладать
следующими характеристиками:
‰‰почти всегда пользователю нужно видеть на экране несколько модулей;
‰‰для разных пользователей модули имеют разную ценность. Некоторым людям
необходимы модули А, Б и В, а другим они совсем не нужны — эти пользователи
работают с модулями Г, Д и Е;
‰‰модули могут иметь разные размеры;
‰‰вам неважно, как расположены модули на экране, но для пользователей это может
иметь большое значение (в противоположность этому, страницу со статическими
именованными разделами следует компоновать, основываясь на важности модулей:
наиболее важные разделы выводятся сверху);
‰‰модулей много, возможно, так много, что если все модули показать на экране
одновременно, то пользователь потеряется в них. Либо вы, либо пользователь
должны определить, какие модули должны остаться, а какие необходимо скрыть;
‰‰вы хотите предоставить пользователям возможность по своему выбору убирать
модули с экрана (но также возможность быстро возвращать их обратно);
‰‰модули могут быть частью панели инструментов или любой другой связной системы интерактивных элементов.
Почему
У всех пользователей разные интересы. На веб-сайтах формата «приборная панель»
и порталах наиболее важно предоставлять пользователю возможность самостоятельно
выбирать, какое содержимое будет отображаться на экране.
Когда людям приходится долго над чем-либо работать, у них возникает желание
реорганизовать среду для того, чтобы она наилучшим образом отвечала их стилю работы. Они могут поместить самые необходимые инструменты ближе к месту работы,
скрыть ненужные вещи и использовать пространственную память для того, чтобы
запомнить, где что находится. Говоря рационально, перемещаемые панели помогают
пользователям работать более эффективно и комфортно (в долгосрочной перспективе — после того, как они потратят время на перекомпоновку среды).
Такой способ персонализации возможен также и на других уровнях. Можно, например, задать свои настройки на развлекательном веб-сайте, который вы посещаете
не очень часто. Персонализация повышает заинтересованность и степень вовлеченности пользователей.
Наконец, в дизайне на базе перемещаемых панелей очень просто добавлять новые
модули, например, поставляемые третьими сторонами.
Как
Присвойте каждому модулю имя в строке заголовка, определите размер по умолчанию
и организуйте разумную конфигурацию модулей по умолчанию. Позвольте пользователю по своему вкусу перемещать фрагменты интерфейса на странице, желательно,
с помощью технологии drag-and-drop. Сделайте так, чтобы каждый модуль можно
было открыть и закрыть простым движением, таким как щелчок мышью на кнопке
в строке заголовка.
Шаблоны 187
В зависимости от выбранного дизайна можно дать пользователю свободу помещать
фрагменты в любое место интерфейса, даже если они будут перекрывать друг друга.
Или же можно заранее создать стандартную сетку с «ячейками», куда могут «прилипать» различные фрагменты, — это позволяет сохранить выравнивание страницы
(и, в некотором роде, чувство собственного достоинства!), не заставляя пользователя
тратить слишком много времени на подгонку окон. В некоторых интерфейсах используются «призрачные тени» — крупные, динамически возникающие изображения,
которые показывают «место посадки» модуля. Например, в качестве указателей цели
можно использовать пунктирные прямоугольники.
Подумайте, не разрешить ли пользователям убирать модули с экрана. Крестик
в строке заголовка — удобный и привычный инструмент для удаления фрагмента
интерфейса. Но если модуль убрать, как потом вернуть его обратно? Предоставьте
пользователям список доступных модулей для просмотра и поиска нужных.
Внутри модуля также могут предлагаться механизмы настройки просматриваемого
содержимого и различных параметров (например, виджеты с прогнозом погоды часто позволяют выбрать страну и город). В некоторых дизайнах для входа в редактор
настроек используется дополнительная кнопка или раскрывающееся меню в строке
заголовка модуля.
Внутри приложения или на веб-сайте, куда пользователь зашел со своими учетными данными, состояние модулей (открыты они или закрыты) должно сохраняться
между сеансами. Ваши пользователи ожидают этого и будут разочарованы, если
компоновка экрана поменяется (также можно предусмотреть кнопку Восстановить состояние по умолчанию на случай, если пользователь запутается в настройках и захочет
начать сначала).
Примеры
Веб-сайт ����������������������������������������������������������������������
iGoogle���������������������������������������������������������������
(рис. 4.45 и 4.46) демонстрирует механику перетаскивания перемещаемых панелей по странице. Пользователь цепляет строку заголовка панели;
в начале перетаскивания пунктирное призрачное изображение показывает, где панель
находилась. Если перетащить панель к свободной «зоне посадки», то там появится
другое призрачное изображение, говорящее, что если пользователь отпустит панель
сейчас, то она приземлится именно на обозначенное место.
В настольных приложениях перемещаемые панели применяются в различных вариантах: для отображения всех важных панелей инструментов в сложном интерфейсе
(����������������������������������������������������������������������������
MATLAB����������������������������������������������������������������������
) или для компоновки маленьких палитр вокруг основного документа (����
Photoshop и другие приложения формата «холст и палитра»). В окне MATLAB (рис. 4.47)
панели уложены вплотную друг к другу в пределах одного окна, примерно как на
веб-сайте My Yahoo! или iGoogle, но размеры панелей можно менять. В Photoshop
(рис. 4.48) окна палитр разбросаны по рабочему столу; пользователь может передвигать их, менять размер и компоновать в пачки модульных вкладок.
В других библиотеках
http://quince.infragistics.com/Patterns/Movable%20Panels.aspx
http://www.welie.com/patterns/showPattern.php?patternID=customization-window
http://patternry.com/p=drag-and-drop-modules/
http://developer.yahoo.com/ypatterns/richinteraction/dragdrop/modules.html
188 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.45. Страница iGoogle; перетаскивание панели только началось
Рис. 4.46. Страница iGoogle; сюда можно поместить панель
Шаблоны 189
Рис. 4.47. Рабочий стол приложения MATLAB
Рис. 4.48. Рабочий стол приложения Photoshop
В литературе для разработчиков часто используется термин портлет. Он описывает конкретные компоненты, составляющие перемещаемые панели, которые, таким
образом, формируют страницу портала.
190 Глава 4 • Организация страницы: компоновка элементов страницы
Right/Left Alignment (Выравнивание по правому/левому краю)
Рис. 4.49. Параметры операционной системы Mac OS
Что
При разработке формы или таблицы, состоящей из двух столбцов, выровняйте метки,
стоящие слева, по правой стороне, и элементы, стоящие справа, — по левой стороне.
Использовать, когда…
Вы компонуете форму или любой другой набор элементов, перед которыми будут находиться текстовые метки. Также можно применять к внутренней структуре таблиц
и к другим включающим в себя два столбца структурам, в которых строки читаются
слева направо.
Метки могут быть разной длины — длинные и короткие и даже разбитые на несколько строк. При выравнивании меток по левому краю они оказались бы слишком
далеко от соответствующих полей. Пользователям будет сложно проследить связь
между элементами, находящимися на большом расстоянии.
Почему
Когда текст помещается вплотную к элементу, для которого он служит меткой, формируется строгая перцепционная пара — намного более явная, чем если бы эти два
элемента отделялись друг от друга большим пространством. Если выровнять метки
разной длины по левой стороне, то короткие метки окажутся недостаточно близко
к соответствующим элементам управления и поперечная группировка будет наруше-
Шаблоны 191
на (это иллюстрирует работу гештальт-принципа близости). Пользователям намного
проще связывать каждую метку с соответствующим элементом управления, когда они
наблюдают выравнивание по правой и левой сторонам.
Кстати, элементы управления следует всегда выравнивать по левой стороне. В сочетании с выровненными по правой стороне метками и равномерными промежутками
между элементами управления они формируют изящный четкий двойной край прямо
в центре и вдоль всей страницы (пользуясь преимуществом гештальт-принципа непрерывности). Этот четкий край плавно направляет взгляд зрителя по странице сверху
вниз, поддерживая хороший визуальный поток.
Иногда возникают ситуации, когда метки лучше не выравнивать по правому
краю. Например, существуют научные доказательства того, что читать выровненный
по правому краю текст сложнее, чем выровненный по левому краю (так как глазам
приходится проделывать больше работы для поиска начала строки). Если в вашем
интерфейсе используются длинные метки, которые пользователь должен внимательно
читать, попробуйте все же выровнять их по левому краю.
При локализации интерфейса, когда метки переводят на другой язык, их длина меняется. Если интерфейс при этом искажается, то лучше поместите метки поверх элементов управления (но при этом их станет сложнее читать, а длина страницы увеличится).
В некоторых макетах выравнивание меток по правой стороне смотрится неудачно.
Слева от меток может находиться столбец значков, или, возможно, разделы формы
могут отделяться друг от друга выровненными по левому краю заголовками — все эти
форматы разрушают выравнивание по правому (левому) краю (хотя и не обяза­тельно).
Посмотрите, какой из вариантов будет смотреться удачнее, и остановитесь на нем.
Как
Вместо того чтобы выравнивать текстовые метки по левой стороне, выровняйте их по
правой. Они должны находиться вплотную к соответствующим элементам управления,
отставая лишь на несколько пикселов. В результате вы, вероятно, получите неровный левый край, но это обычно не имеет значения. Если некоторые метки слишком
длинные, чтобы можно было применить этот шаблон, то попробуйте разбить их на несколько строк или же просто поместите их над элементами управления, отказавшись,
таким образом, от данного шаблона.
После этого выровняйте элементы управления по левому краю вдоль воображаемой
линии, находящейся на расстоянии в несколько пикселов от правого края меток. Необходимо точно, до пиксела, выровнять их, иначе элементы управления будут выглядеть
неряшливо (человеческий взгляд великолепно распознает даже малейшие неровности).
Противоположная сторона столбца элементов управления также может оказаться
неровной. Это не очень хорошо, если речь идет о текстовых полях, комбинированных
полях и других визуально тяжелых объектах, как на рис. 4.49. Попробуйте растянуть
их так, чтобы выровнять и правые края. Также можно попытаться выровнять по одной
линии короткие поля, а по другой — длинные.
Примеры
Этот шаблон также можно применять для страниц, на которых вообще нет элементов
управления для ввода данных. На этой записи из адресной книги Mac OS X (рис. 4.50)
очень мало пустого пространства между двумя столбцами, но разница в цвете помогает
визуально отделить один столбец от другого. Обратите внимание, что метка home page
192 Глава 4 • Организация страницы: компоновка элементов страницы
(домашняя страница) намного длиннее остальных; из-за этого выравнивание меток по
левой стороне могло бы стать менее приятным для взгляда и более сложным для чтения.
Рис. 4.50. Адресная книга Mac OS X
В других библиотеках
http://quince.infragistics.com/Patterns/Right%20Aligned%20Labels.aspx
http://www.uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php
Diagonal Balance (Диагональный баланс)
Рис. 4.51. Панель управления операционной системы Windows 7
Шаблоны 193
Что
Организуйте элементы на странице асимметрично, но сбалансируйте их, поместив
визуальный вес в верхний левый и нижний правый углы.
Использовать, когда…
Вы создаете страницу или диалоговое окно, где вверху находится заголовок или колонтитул, а внизу — несколько ссылок или кнопок, обозначающих действия, например
OK и Cancel (Отмена), Submit (Отправить) или Back (Назад) и Next (Далее). Страница
достаточно мала, чтобы все содержимое помещалось на экране, и прокручивать его
нет необходимости.
Почему
Визуально выделяющиеся элементы страницы, такие как заголовки, вкладки или
кнопки, должны способствовать балансировке композиции на экране. Они уже находятся на противоположных концах страницы; если дополнительно разнести их на
противоположные стороны, то они будут удачно балансировать. (Вообразите себе,
что это гири, — чем больше и чем контрастнее эти элементы, тем они тяжелее; чем
ближе к краю они находятся, тем больший вес нужно поместить на противоположную
сторону для компенсации.)
Помимо того что диагональный баланс приятен для взгляда, он помогает глазам
пользователя комфортно путешествовать слева направо и сверху вниз — идеальный
визуальный поток для пользователей, говорящих на языках с написанием слева направо (обсуждение визуального потока см. во введении к этой главе). В этом визуальном
потоке должны также находиться остальные элементы страницы. Взгляд пользователя
приходит в итоге к элементам, представляющим то, что он обычно делает в интерфейсе
в последнюю очередь, например покидает его или идет в какой-нибудь другой раздел.
Как
Поместите заголовок, вкладки или какой-либо другой сильный элемент в верхний
левый угол страницы; поместите кнопки в нижний правый. Содержимое (любой
ширины) остается в середине. Если само содержимое также вносит вклад в баланс
страницы, тем лучше — например, не следует оставлять слишком много пустого пространства на одной стороне.
Попытайтесь представить, на что было бы похоже диалоговое окно выбора рисунка
пользователя, показанное на рис. 4.51, если бы вы поместили кнопки OK и Cancel (Отмена) на левый край, а не на правый. Все диалоговое окно выглядело бы перекошенным
на левую сторону и ненадежным.
В Windows традиционное размещение заголовка в верхнем левом углу, а кнопок —
в нижнем правом углу автоматически выполняет за вас работу по балансировке.
В Mac OS X многие элементы, такие как строки заголовка, вкладки и кнопки действий,
выровнены по центру, так что диагональный баланс встречается там намного реже.
В классической книге довебовской эпохи Кевина Маллета (�����������������������
Kevin������������������
�����������������
Mullet�����������
) и Даррелла Сано (Darrell Sano) «Designing Visual Interfaces» (издательство Sun Microsystems)
описана идея диагонального баланса: «Симметричная компоновка автоматически
обеспечивает визуальную уравновешенность. Уравновешенности можно добиться
и в асимметричной компоновке, но ее напряженная, более драматичная форма баланса
194 Глава 4 • Организация страницы: компоновка элементов страницы
зависит от точного расчета, нацеленного на визуальную компенсацию различий в размере, позиции и важности основных элементов». Ниже показано, как можно достичь
такого баланса.
Примеры
Простой экран, показанный на рис. 4.52, направляет взгляд пользователя в нижний
правый угол, где находится призыв к действию.
Рис. 4.52. Экран подключения к сети WiFi на сайте Starbucks
Точки фокусировки на показанном далее веб-сайте (рис. 4.53) — это логотип,
движущаяся машина, строка «Let’s Motor» и текстовое поле поиска дилера в нижнем
правом углу. Все эти элементы находятся приблизительно на диагональной линии.
Движение на фотографии еще сильнее подталкивает взгляд вниз и вправо. Несомненно, дизайнеры этой страницы хотели заставить людей воспользоваться текстовым полем. Если бы текстовое поле находилось в левом нижнем углу, это нанесло бы
большой ущерб эффективности страницы, так как текстовое поле могло бы потеряться
в остальном содержимом.
Рис. 4.53. Веб-сайт http://miniusa.com образца 2005 года
Шаблоны 195
Responsive Disclosure (Ответное обнаружение)
Рис. 4.54. Веб-сайт AutoTrader
Что
Начните с самого лаконичного варианта пользовательского интерфейса и проведите
пользователя по последовательности шагов, включая все больше и больше элементов
интерфейса после завершения каждого шага.
Использовать, когда…
Интерфейс должен помочь пользователю выполнить сложную задачу шаг за шагом.
Это нужно когда задача ему в новинку или лежит за пределами его области знаний.
Однако вы не хотите, чтобы пользователь для выполнения каждого шага переходил
на новую страницу, — лучше оставить весь интерфейс на одной странице.
Также задача может быть разветвленной: информация «ниже по течению» существенно зависит от выбора пользователя на предыдущих этапах.
Почему
В этом шаблоне интерфейс как будто «создается» на глазах у пользователя. Сначала
пользователь видит только элементы, необходимые для завершения первого шага.
Когда он переходит к следующему шагу, отображается очередной набор элементов
в дополнение к первому, затем еще один и т. д.
Так как пользователь видит задачу, раскрывающуюся прямо перед его глазами
в динамически растущем пользовательском интерфейсе, у него быстрее и проще формируется правильная ментальная модель задачи. При этом нет ни одного из неудобных
переключений контекста, навязываемых экранами мастера: состояние рабочего потока
не нарушается жестким набором модальных экранов, отображаемых лишь по одному.
Помимо этого, так как весь пользовательский интерфейс сосредоточен на одной
странице, пользователь может с легкостью вернуться назад и изменить что-либо в ранее настроенных элементах. Как только исправляется что-то на одном шаге, пользователь мгновенно видит изменение результатов последующих шагов. Это лучше, чем
прыгать из одного окна мастера в другое.
Для редко выполняемых задач такой вариант может оказаться выигрышней, чем
одновременное представление всего сложного взаимосвязанного набора элементов управления, так как пользователю всегда очевидно, в чем заключается первый
шаг и каким оказывается следующий. Ему никогда не приходится слишком много
думать.
196 Глава 4 • Организация страницы: компоновка элементов страницы
Как же выбрать между этим шаблоном и шаблоном Responsive Enabling (Ответное включение)? Если используется второй, то все элементы управления сразу
помещаются в пользовательский интерфейс, но некоторые отключаются до тех пор,
пока не настанет их время вступить в игру (конечно же, в ответ на какой-либо другой
пользовательский выбор). Иногда вследствие этого интерфейс становится слишком
загроможденным и сложным на вид. Как всегда, решать вам: если нужно вместить
пользовательский интерфейс в очень небольшое пространство или если вы считаете,
что слишком много элементов управления в интерфейсе будут выглядеть неудачно
и заставят пользователей нервничать, то лучше выбрать шаблон Responsive Disclosure
(Ответное обнаружение).
Как
Начните с отображения элементов управления и текста, необходимых для первого
шага. Когда пользователь завершит его, покажите элементы управления для второго.
Оставляйте составляющие предыдущих шагов на виду, позволяя пользователю при
необходимости возвращаться к ним. Пусть все необходимое находится на одной странице или в одном диалоговом окне, чтобы пользователю не приходилось неожиданно
перескакивать в новое пространство пользовательского интерфейса.
Во многих подобных пошаговых дизайнах выбор, сделанный пользователем на
одном шаге, меняет оставшуюся часть задачи (то есть задача разветвленная, а не линейная). Например, в интерактивной форме заказа спрашивается, совпадает ли адрес
для выписки счета с адресом для доставки товара. Если пользователь говорит «да»,
то в пользовательском интерфейсе поля для второго адреса даже не отображаются.
В противном случае в процесс добавляется еще один шаг, и в случае необходимости
в интерфейсе появляется второй набор полей для ввода данных.
Концепция ответного обнаружения не нова. Она использовалась еще в 1981 году
в первом коммерческом интерфейсе типа WIMP (Windows, Icons, Mouse, Pull-down
menus — оконно-графический интерфейс с указателями и меню), Xerox Star. Его
дизайнеры считали прогрессивное обнаружение — более общую концепцию, включающую ответное обнаружение, — основным принципом дизайна: «Прогрессивное
обнаружение утверждает, что детали должны быть скрыты от пользователя, пока он
не попросит специально или ему не потребуется увидеть их. Таким образом, Star не
только предоставляет параметры по умолчанию; в этом интерфейсе параметры, которые пользователи вряд ли будут менять, скрываются до тех пор, пока пользователи
явно не сообщат, что хотели бы изменить их»1. И это так.
В таблицах свойств Star, например, пустое пространство было зарезервировано для
элементов управления, которые появлялись по необходимости в ответ на выбор, сделанный пользователем. Например, когда пользователь выбирал один пункт из набора
значений, включающего слово Other (Другое), то могло появиться дополнительное
текстовое поле для ввода числа.
1
Джонсон, Дж. А. ( Johnson, J.A.) и др., The Xerox Star: A Retrospective, IEEE Computer, сентябрь
1989, 22(9), с. 11–29. См. также http://www.digibarn.com/friends/curbow/star/retrospect
Шаблоны 197
Примеры
На веб-сайте Kayak (рис. 4.55) календарь и поля сравнения скрыты до тех пор, пока
пользователь не заполнит форму. Когда они появятся, внимание пользователя перей­
дет на них.
Рис. 4.55. Веб-сайт Kayak
Еще один вариант ответного обнаружения — выгрузка элементов пользовательского интерфейса в зависимости от выбора, сделанного в раскрывающемся меню или
другом ограниченном списке. Так делается в примере из Google Docs на рис. 4.56: когда
пользователь выбирает разные значения в поле Question Type (Тип вопроса), соответствующим образом меняются элементы управления ниже (то же самое происходит
в примере из AutoTrader на рис. 4.54).
В других библиотеках
http://patternry.com/p=inline-input-adder/
http://quince.infragistics.com/Patterns/Responsive%20Disclosure.aspx
198 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.56. Создание полей формы в Google Docs
Responsive Enabling (Ответное включение)
Рис. 4.57. Веб-сайт TurboTax
Что
Начните с интерфейса, где отключено большинство элементов, и проведите пользователя по последовательности шагов, включая все больше и больше элементов по мере
завершения каждого шага.
Использовать, когда…
Интерфейс ведет пользователя по сложной задаче шаг за шагом, поскольку пользователь не очень хорошо знаком с компьютерами или эта задача выполняется редко (то же
самое относится и к шаблону Wizard (Мастер)). Однако вы не хотели бы, чтобы на
каждом шаге пользователь переходил на новую страницу, — лучше сохранить все необходимые данные на одной. Помимо этого, нужно, чтобы интерфейс был стабильным;
и нежелательно, чтобы на каждом шаге он динамически менял конфигурацию, как это
происходит в шаблоне Responsive Disclosure (Ответное обнаружение).
Шаблоны 199
Почему
Как и шаблон Responsive Disclosure (Ответное обнаружение), этот шаблон использует преимущество динамичности компьютерных дисплеев и позволяет пользователю выполнять задачу в интерактивном режиме. Таким образом, у пользователя
формируется правильная ментальная модель, объединяющая причины и следствия.
Пользовательский интерфейс подсказывает возможные последствия выбора: если
установить этот флажок, то придется заполнять эти четыре текстовых поля, которые
только что стали активными.
Помимо этого, пользователь не может сделать ничего, чтобы попасть в неприятности,
так как в интерфейсе эти действия заблокированы путем отключения элементов управления. Следовательно, на экране не всплывают и ненужные сообщения об ошибках.
Как
В некоторых приложениях большинство действий первоначально отключены — доступны только те, которые относятся к первому шагу пользователя. По мере того
как пользователь делает свой выбор и выполняет действия, должны включаться дополнительные элементы. В этом отношении данный шаблон очень похож на шаблон
Responsive Disclosure (Ответное обнаружение), так как компьютер сам указывает,
какую последовательность действий должен выполнить пользователь, чтобы пройти
через этот интерфейс.
В настольных пользовательских интерфейсах больше распространена похожая, но
менее привязанная к последовательности техника. Когда пользователь выполняет в интерфейсе определенные действия, некоторые операции или настройки становятся ненужными или невозможными, и поэтому они отключаются до тех пор, пока пользователь
не сделает все необходимое для их включения. Общая последовательность не так важна.
По возможности помещайте отключенные элементы вплотную к тому содержимому, которое их включает. Это помогает пользователю находить волшебные кнопки
активации соответствующих операций и понимать взаимоотношения между элементами. В двух примерах на рис. 4.57 и 4.58 такое текстовое поле (или флажок, соответственно) находится выше и левее отключенного элемента, что повторяет естественный
визуальный поток сверху вниз и слева направо.
При создании интерфейсов, в которых применяется ответное включение или ответное обнаружение, всегда отключайте только элементы, которые действительно
невозможно или нельзя использовать. Будьте осторожны и не ограничивайте действия
пользователя, пытаясь сделать интерфейс более дружелюбным или простым для понимания. Решая, что можно отключить, тщательно рассматривайте каждый элемент:
действительно ли существует серьезная причина блокировать именно его? Нельзя
ли оставить эту функциональность доступной? Как всегда, тестирование удобства
использования дает пользователям шанс сообщить вам, что вы сделали неправильно.
С удобством использования этого шаблона связана еще одна проблема, которую
Брюс Тоньяццини называет «загадочно затемненные элементы меню», — когда дизайн
не дает никакой подсказки, почему данный элемент отключен. Старайтесь минимизировать набор элементов, которые необходимо отключать, особенно если они находятся далеко от элементов, которые их включают. Также где-либо в интерфейсе или
в его справочной системе сообщите пользователю, чем вызвано отключение каждой
функции. Этой проблемы избежать проще, если отключенные элементы управления
представляют собой не меню на панели вверху окна, а находятся в главном пользо-
200 Глава 4 • Организация страницы: компоновка элементов страницы
вательском интерфейсе вплотную к тому объекту, который позволит включить их.
Пространственная близость — очень важный фактор.
Примеры
Рис. 4.58. Окно системных настроек Mac OS X
Это окно системных настроек Mac OS X (рис. 4.58) представляет собой типичный
пример отключения в зависимости от двоичного выбора: нужно ли в OS X выводить
дату и время на панели меню или нет? Если пользователь говорит, что нужно, то он
получает множество инструментов настройки их отображения. Если же нет, то эти
настройки не имеют никакого значения, поэтому просто отключаются. Такое поведение (а также сдвиг списка вариантов вправо под флажком) говорит пользователю,
что эти настройки влияют на отображение даты и времени, которое включается этим
флажком, — и ни на что более.
Можно также перевернуть смысл этого шаблона
и создать интерфейс с «ответным выключением».
В навигационных системах, применяемых в автомобилях �����������������������������������������
Toyota�����������������������������������
����������������������������������
Prius�����������������������������
и ��������������������������
Lexus���������������������
, эта техника используется, когда пользователь вводит адрес назначения (рис. 4.59). Зная, какие улицы существуют
в заданной области поиска, система сужает выбор
возможных названий, отображая после ввода каждой буквы только те буквы, которые могут встретиться далее. Буквы, которые невозможно подставить на текущую позицию, отключаются, так что
пользователю приходится рассматривать меньшее
количество вариантов, плюс создается впечатление, что система «знает», что именно пользователь
пытается ввести. Таким образом, процесс ввода
адреса становится проще и приятнее (когда остается совсем мало подходящих улиц, система вообще
убирает клавиатуру и отображает возможные улицы в виде списка вариантов для выбора — см. шаблон Autocompletion (Автозаполнение) в главе 8).
В других библиотеках
Рис. 4.59. Навигационная сис­
тема гибридного автомобиля Lexus
http://quince.infragistics.com/Patterns/Responsive%20
Enabling.aspx
Шаблоны 201
Liquid Layout («Резиновый» макет)
Рис. 4.60. Диалоговое окно открытия файла в Mac OS
Что
Когда пользователь меняет размеры окна, изменяйте размер содержимого страницы,
чтобы она всегда была «заполнена».
Использовать, когда…
Пользователю может потребоваться, чтобы содержимое рабочего окна программы,
диалогового окна или страницы отображалось на большем (или меньшем) пространстве. Это обычно происходит, когда страница включает много текста (как, например,
веб-страница) или содержит насыщенный информацией элемент управления: таблицу,
дерево или графический редактор. Данный шаблон работает не так хорошо, когда визуальный дизайн требует определенной площади полезного пространства, не больше
и не меньше.
Почему
Если только вы не разрабатываете «закрытый» пользовательский интерфейс, такой
как справочный терминал или полноэкранная видеоигра, невозможно предугадать
условия, в которых пользователь будет просматривать этот интерфейс. Размер экрана,
настройки шрифтов, другие окна на экране или важность каждой конкретной страницы для пользователя — все это выпадает из сферы вашего контроля. Но как тогда
решить, какой размер страницы будет оптимальным для всех пользователей?
Предоставляя пользователю определенную долю контроля над компоновкой страницы, вы делаете пользовательский интерфейс более гибким. Пользователю больше
понравится интерфейс, который он всегда может настроить в соответствии с текущими
требованиями и актуальным контекстом.
Если вам необходимы еще доказательства, то подумайте, что происходит с «фиксированным» пользовательским интерфейсом с жесткой компоновкой, когда изменяются
настройки языка или размера шрифта. Столбцы остаются идеально выровненными?
Страницы не становятся внезапно слишком большими и не обрезаются по краям?
Если нет, то отлично; у вас простой и надежный дизайн. Однако страницы, разработан-
202 Глава 4 • Организация страницы: компоновка элементов страницы
ные так, чтобы справляться с изменениями размеров окна, обычно хорошо работают
и при смене языка или установке другого размера шрифта.
Как
Сделайте так, чтобы содержимое страницы всегда заполняло окно, даже если размер
окна меняется. Состоящий из нескольких строк текст нужно переносить у правого поля, если только ширина его не составляет десять-двенадцать слов (подробнее
об этом чуть далее). Деревья, таблицы, графики и редакторы на центральной сцене
должны увеличиваться, а их поля должны оставаться компактными. Если на странице
есть что-либо похожее на форму, то при горизонтальном растягивании текстовые поля
должны удлиняться — пользователи оценят это, если им нужно будет ввести данные,
длина которых превышает обычную длину текстового поля. Аналогично, все прокручиваемое содержимое (например, списки и таблицы) должно удлиняться и, чаще
всего, также расширяться.
Веб-страницы и схожие пользовательские интерфейсы должны при расширении
сохранять макет, при котором навигационные средства и указатели привязаны к верхнему и левому полям страницы. Фоновые цвета и узоры всегда должны полностью
заливать новое пространство, даже если это не удается сделать с содержимым.
Что происходит, когда окно становится слишком маленьким для своего содержимого? Можно включить по краям полосы прокрутки. Или же должно сжиматься пустое
пространство; откровенное отсекание содержимого также может происходить, когда
окно становится совсем миниатюрным, но самые важные данные должны держаться
до последнего.
Если вы имеете дело с текстовыми абзацами, то помните, что они могут стать
­совершенно неудобочитаемыми, если их ширина будет слишком большой. Графические дизайнеры пытаются найти оптимальную длину строки для удобного чтения
текста; одним из показателей считается от 10 до 12 средних английских слов на строку,
другой показатель — строка должна вмещать от 30 до 35 em (букв m в нижнем ре­
гистре). Если абзац намного шире, то взгляду пользователя приходится перемещаться
на слишком большое расстояние от конца одной строки до начала следующей; если
же абзац слишком узкий, то текст становится прерывистым и его тоже неудобно
­читать.
(Существуют доказательства, что текст с большей длиной строки, скажем, 100 символов на строку, читается быстрее, чем текст с короткими строками, хотя пользователи
предпочитают все же короткие строки с числом символов, меньшим 551.)
Пример
Операционная система ����������������������������������������������������������
Mac�������������������������������������������������������
������������������������������������������������������
OS����������������������������������������������������
���������������������������������������������������
X��������������������������������������������������
позволяет изменять размер стандартного диалогового окна Open (Открыть), в котором реализован «резиновый» макет. Это очень удобно,
так как у пользователей появляется возможность открывать на экране фрагмент иерархии файловой системы нужного размера, не ограничиваясь небольшим стандартным
пространством (рис. 4.60).
1
См. исследование «Use Reading Performance or User Preference» на веб-сайте http://usability.
gov/guidelines
Шаблоны 203
Если «жидкий» макет применяется для отображения текста в окне браузера, то
элементы должны изящно «перетекать» при изменении размера окна, как в примере
с веб-сайта Drupal������������������������������������������������������������������
������������������������������������������������������������������������
.�����������������������������������������������������������������
org��������������������������������������������������������������
на рис. 4.61. Обратите внимание, что текст никогда не расползается так широко, чтобы его было невозможно прочитать, даже если развернуть окно
браузера на полный экран.
Рис. 4.61. Веб-сайт Drupal.org
Окно Google Docs можно сделать очень узким (рис. 4.62) — при этом длинные
панели инструментов, которые обычно находятся наверху документа, компактно
складываются и все так же остаются на экране (при этом существует ограничение на
минимальный размер окна — см. пример).
В других библиотеках
http://www.welie.com/patterns/showPattern.php?patternID=liquid-layout
http://quince.infragistics.com/Patterns/Liquid%20Layout.aspx
http://www.designofsites.com/designing-effective-page-layouts/expanding-screen-width
204 Глава 4 • Организация страницы: компоновка элементов страницы
Рис. 4.62. Редактор слайд-шоу Google Docs
Списки
5
Эта глава посвящена единственной теме: отображению списков элементов в интерактивной среде. Речь пойдет всего лишь об абстрактных элементах. Фактические
данные — сложные и высокоструктурированные наборы данных — мы не будем рассматривать вплоть до седьмой главы.
Вы спросите, чем же списки заслужили отдельной главы?
Вспомните, как много типов элементов отображаются в форме списков: статьи,
страницы, фотографии, видео, карты, книги, игры, фильмы, телешоу, песни, продукты, сообщения электронной почты, публикации в блогах, обновления статуса, записи
на форумах, комментарии, результаты поиска, люди, события, файлы, документы,
приложения, ссылки, URL-адреса, инструменты, режимы, действия... (продолжите
самостоятельно).
Почти любой относительно сложный интерфейс или веб-сайт включает списки. Эта
глава поможет вам начать думать о них логически, понять различные аспекты дизайна
и научиться идти на компромиссы при разработке интерфейсов на основе списков.
Поскольку с этой темой пересекается множество прочих аспектов дизайна, я буду
часто ссылаться на другие главы и шаблоны. О меню рассказывается в главе 6, о сложных данных — в седьмой главе, а ссылкам и прочим навигационным механизмам посвящена глава 3. На дизайн для мобильных платформ накладываются специфические
ограничения, поэтому десятая глава также будет упоминаться. Однако и помимо этого
нам очень о многом нужно поговорить.
Сценарии использования списков
Прежде чем переходить к вопросам дизайна, полезно проанализировать, в каких же
случаях возникает необходимость использовать списки. Для чего они нужны пользователям? И какой из возможных сценариев следует применять?
Получение общего представления
Какое впечатление получит зритель от списка в целом? В некоторых случаях
пользователь должен иметь возможность пробежаться глазами по списку и понять,
о чем речь. Иногда для этого требуются не просто слова, но также изображения
и тщательная визуальная организация содержимого.
206 Глава 5 • Списки
Обзор элементов
Будет ли пользователь внимательно просматривать элементы (по порядку
или в случайной последовательности)? Понадобится ли ему нажимать элементы,
для того чтобы открыть их? Если да, то возврат обратно к списку и поиск другого
элемента или переход к следующему элементу в списке должны осуществляться
очень просто и интуитивно.
Поиск определенного элемента
Пользователь ищет что-то конкретное? Он должен находить это быстро, с минимальным количеством щелчков, переходов и прокрутки.
Сортировка и фильтрация
Если пользователь ищет элемент или группу элементов, обладающих определенными характеристиками (например, «все созданное между датами X и Y»), или
желает получить общее представление о возможных наборах данных, то функции
сортировки и фильтрации будут очень полезны. Подробнее об этом рассказывается
в главе 7.
Упорядочивание, добавление, удаление и разбиение элементов по категориям
Рассмотрим интерфейс формата «диспетчер изображений», содержащий фотографии пользователя: пользователь является владельцем списка и всех элементов
внутри него. В большинстве приложений и сайтов, предназначенных для отображения личных коллекций, предусмотрены возможности манипулирования этими
списками: пользователь может перетаскивать элементы, группируя их в нужном порядке или в соответствии с определенной схемой. Он может захотеть одновременно
выделить несколько элементов, для того чтобы переместить их, отредактировать
или удалить; в дизайне должны использоваться либо стандарты группового выделения, предусмотренные самой платформой (например, щелчки на элементах при
нажатой клавишей Shift), либо флажки рядом с элементами, с помощью которых
можно выделить любой произвольный набор данных.
Обратно к информационной архитектуре
Мы обсуждали информационную архитектуру — дизайн информации, не зависящий
от ее визуального представления — в главе 2. Давайте на секунду вернемся к этой теме.
У вас есть список элементов, который необходимо отобразить на странице. Попробуем
перечислить наиболее важные не визуальные характеристики списка.
Длина
‰‰какова длина списка? Поместится ли он в отведенное для него пространство?
‰‰может ли список быть «бесконечным»? Например, результаты веб-поиска зачастую
содержат так много элементов, что пользователь никогда не доходит до конца
списка. То же самое можно сказать об элементах, которые извлекаются из очень
большого и глубокого архива.
Порядок
‰‰можно ли упорядочить список по какому-то естественному признаку, например по
алфавиту или по времени создания?
Обратно к информационной архитектуре 207
‰‰понадобится ли пользователю менять порядок сортировки списка? Если да, то по
какому признаку он станет сортировать элементы?
‰‰если вы решите упорядочить список, то выиграет удобство использования от
группировки элементов или нет? В качестве примера представьте себе архив
публикаций в блоге. Статьи естественным образом упорядочены по времени, но
в большинстве блогов они разбиваются на категории по месяцу и году, а не выводятся в одном плоском упорядоченном списке. Если человек ищет определенную
статью, то он, скорее всего, помнит, что она была «до статьи X, но после статьи Y»,
но не может назвать точный месяц публикации. Таким образом, группировка по
месяцу написания усложняет поиск статьи; простой упорядоченный по времени
список заголовков может оказаться эффективнее.
Группировка
‰‰элементы разбиты по категориям? Это разбиение естественное, и пользователи
сразу же поймут его? Если нет, то как его можно объяснить — словами, визуально?
‰‰категории большие? В более широком смысле — образуют ли элементы многоуровневую иерархию, как, например, файлы в файловой системе?
‰‰элементы разбиты на категории однозначно, или существует несколько потенциальных вариантов разбиения, соответствующих разным случаям использования
и разным типам пользователей? Сможет ли пользователь создавать собственные
категории для каких-то своих целей?
Типы элементов
‰‰каковы отдельные элементы? Они простые или насыщенные и сложные? Это
полноценные фрагменты данных или «дублеры» более крупного содержимого —
заголовки статей, эскизы видеоклипов?
‰‰элементы списка сильно отличаются друг от друга (одни простые, другие сложные)
или все одинаковые?
‰‰связываются ли с отдельными элементами изображения или иконки?
‰‰обладает ли каждый элемент строгой структурой, включающей определенные
поля? Нужно ли пользователю знать структуру элементов? Будет ли он сортировать список по значениям этих полей? (Сообщения электронной почты обычно
формируют строгую структуру, предлагающую множество возможностей сортировки — по времени, по отправителю, по теме и т. д., — и эта структура четко прослеживается в списках сообщений.)
Взаимодействие
‰‰нужно ли показывать элементы списка целиком, или лучше ограничиться неким
анонсом (название или несколько первых предложений), а остальное спрятать?
‰‰что пользователь будет делать с этими элементами? Просматривать? Выбирать для
тщательного изучения? Выполнять какие-то задачи? Или элементы представляют
собой ссылки и кнопки, на которых пользователь будет щелкать?
‰‰понадобится ли пользователю одновременно выбирать несколько элементов?
Динамическое поведение
‰‰как много времени займет загрузка списка целиком? Содержимое будет появляться
моментально (или с минимальной задержкой) или после заметной паузы, в течение
которой список собирается где-то еще (например, на стороне сервера)?
208 Глава 5 • Списки
‰‰будет ли список меняться в процессе работы? Нужно ли показывать обновления
сразу же, как только они происходят? Означает ли это автоматическую вставку
новых элементов в начало списка?
Ответы на эти вопросы приводят к множеству разнообразных дизайнерских решений. Разумеется, решение должно учитывать тип содержимого (блоги должны внешне
отличаться от, скажем, списков контактов), макет страницы, где выводится список,
и ограничения реализации.
Несколько решений
Перечисленные в предыдущем разделе вопросы, связанные с взаимодействием, задают
тон почти всех остальных решений. Например, полностью интерактивный список —
с множественным выделением, функциями перетаскивания, редактированием элементов и т. д. — обычно доминирует в интерфейсе. Это относится к диспетчерам изображений, клиентам электронной почты и другим полнофункциональным приложениям,
с помощью которых пользователи управляют принадлежащим им содержимым.
В таком и других типах интерфейса часто действует требование показывать в списке только названия или эскизы элементов и раскрывать какой-то элемент полностью,
только когда его выбирает пользователь. Существует, как минимум, три способа реализации такого поведения:
Когда пользователь выбирает элемент списка, где должны отображаться подробные сведения?
‰‰в Двухпанельном селекторе подробные сведения выводятся справа от списка. Этот
шаблон хорошо подходит для перелистывания и просмотра элементов, так как здесь
все видно сразу. Страница не меняется при выборе элемента, поэтому переключения контекста или перезагрузки содержимого не происходит;
‰‰в Списке с вкладышами подробные сведения внедрены в список, но открываются
только по запросу пользователя: когда он щелкает или касается названия/эскиза
элемента. Данный шаблон также хорошо поддерживает перелистывание и просмотр, хотя если раскрыть сразу много элементов, пробежаться глазами по списку
будет трудно. Во время поиска по содержимому элементов подходящие записи
можно автоматически раскрывать на экране, упрощая тем самым жизнь пользователям;
‰‰при Погружении в одном окне на то место, которое занимал список, выводятся
подробные сведения о выбранном элементе. Так часто делают при небольших пространствах, куда двухпанельный селектор не помещается, — это экраны мобильных
устройств или небольшие модульные панели. Однако пользователю приходится
перескакивать с экрана списка на экран подробных сведений и обратно, что усложняет поиск и обзор.
Теперь давайте обратим внимание на сами элементы. Как много подробностей
нужно показывать для элемента, предполагая, что пользователь щелкнет на нем, если
захочет увидеть целиком? И снова, вам нужно подумать о трех основных вариантах
использования: получение общего представления о данных, просмотр списка и поиск
элементов. Во многих сфокусированных задачах, таких как поиск телефонного номера
Несколько решений 209
в длинном списке контактов, необходимо знать только одно значение: название элемента. Но для многих более широких задач, связанных с перебором элементов (таких
как чтение новостей на веб-странице), полезно показывать более обширную информацию, так как это делает элемент списка более привлекательным (разумеется, также
не следует забывать о чувстве меры). Если с элементами списка связаны изображения,
то не выводите их целиком — используйте только эскизы!
Как мне отобразить список с тяжелыми визуальными элементами?
‰‰используйте широкие строки. Выделяйте для каждой строки текста несколько
экранных строк. Усильте впечатление за счет небольшого графика или эскиза изображения, если оно является частью содержимого, и применяйте расширенное
форматирование текста, создавая в каждой строке миниатюрную визуальную
иерар­хию. Подробнее об основах данного шаблона рассказывается в главе 4 (шаблон Grid of Equals (Сетка равных));
‰‰шаблон Thumbnail-and-Text (Эскиз и текст) в десятой главе рассказывает об ис-
пользовании широких строк на мобильных устройствах;
‰‰шаблон Thumbnail Grid (Сетка эскизов) часто применяется для отображения гра-
фических объектов. Двумерная сетка небольших изображений оказывает сильное
визуальное воздействие; она доминирует на странице и притягивает внимание.
К текстовым данным также зачастую добавляют эскизы, но небольшие по размеру
и не такие доминирующие. Более подробную информацию вы найдете в описании
шаблона Grid of Equals (Сетка равных);
‰‰«Карусель» — это альтернатива сетке эскизов, занимающая на странице меньше ме-
ста. Это линейное представление, а не двумерное, и для того чтобы увидеть больше
объектов, пользователю необходимо прокрутить его содержимое. В зависимости
от дизайна, реализация «карусели» позволяет выделить больше пространства для
отображения выбранного или центрального объекта, чем сетка эскизов.
Хорошо структурированные однородные наборы элементов удобно выводить
в формате таблицы, выделяя отдельные столбцы для разных сфер интересов. Таблица может поддерживать сортировку, реализованную разными способами (например,
как рассказывается в шаблоне Sortable Table (Сортируемая таблица) или с помощью
раскрывающегося меню «Сортировать по...»). Чередование строк (см. одноименный
шаблон) помогает пользователю следовать взглядом по одной строке, не перескакивая
на другие: слева направо и снова к началу строки. Таблицы — это, по сути, списки, но
это сложное представление данных, поддерживающее фильтрацию и визуализацию
с помощью сложных инструментов. Другие шаблоны, относящиеся к таблицам, вы
найдете в главе 7.
Дизайн очень длинных списков, особенно на веб-страницах, представляет определенную сложность. Существуют чисто технические проблемы, связанные с временем
загрузки и длиной страницы, однако еще труднее продумать дизайн взаимодействия:
как пользователь будет просматривать элементы и перемещаться по списку? Как он
найдет определенный элемент, особенно если текстовый поиск не вернет желаемых
результатов? Следующие техники и шаблоны применимы ко всем перечисленным
ранее способам отображения списков и их элементов (за исключением, возможно,
«карусели», так как этот шаблон накладывает более жесткие ограничения):
210 Глава 5 • Списки
Как справиться с очень длинным списком?
‰‰разбивка на страницы (pagination) позволяет загружать список по частям. Управ-
ление передается в руки пользователя: он сам выбирает, сколько частей и когда
нужно загрузить. Разумеется, эта техника часто применяется на веб-сайтах, поскольку ее несложно продумать и реализовать. Разбивка на страницы особенно
удобна, если пользователь с большой вероятностью обнаружит нужные элементы
на первой же странице, так как большинство не станут после этого утруждать себя
загрузкой дополнительных фрагментов. Также прибегнуть к данной технике можно в том случае, если отображение полного списка грозит вылиться в бесконечно
долгую загрузку бесконечно длинной страницы. Хороший дизайн сразу сообщает,
сколько страниц занимает полный список, и позволяет переходить по страницам
в произвольном порядке;
‰‰бесконечный список — это одностраничная альтернатива разбивке на страницы.
Первый раздел длинного списка загружается сразу, а внизу выводятся кнопки или
ссылки, позволяющие подгрузить еще содержимое. Страница при этом не обновляется. Этот шаблон часто используется в дизайне для мобильных устройств, и вы
найдете его описание в главе 10. Однако не сбрасывайте его со счетов при разработке обычных веб-страниц! Он весьма полезен в ситуациях, когда вам неизвестна
длина списка или когда он «бездонный»;
‰‰существует вариант бесконечного списка, в котором дополнительные порции загружаются автоматически по мере того, как пользователь прокручивает страницу
вниз. См. шаблон Continuous Scrolling (Непрерывная прокрутка) на веб-сайте
http://ui-patterns.com/patterns/ContinuousScrolling;
‰‰если очень длинный алфавитный список содержится в поле с полосой прокрутки,
рассмотрите возможность реализации шаблона Alphabet Scroller (Алфавитная
полоса прокрутки). Родственный полосе прокрутки с примечаниями (шаблон
Annotated Scrollbar из главы 3), этот инструмент представляет собой полосу
прокрутки, размеченную буквами алфавита; пользователь с легкостью переходит
к нужной букве;
‰‰прямой поиск через соответствующее текстовое поле может оказаться критически
важным механизмом для пользователей, желающих найти определенные эле­
менты. Кроме того, укоротить список до разумного размера помогает фильтрация — ­удаление целых классов элементов, которые не отвечают определенным
критериям.
Пока что мы говорили в основном о плоских списках: списках без категорий,
­изолированных частей и иерархии. Каким бы образом вы не отображали список,
иногда все же возникает необходимость разбить его на категории для простоты восприятия.
Как вывести список, включающий категории или иерархию?
‰‰именованные разделы (шаблон Titled Sections из главы 4) хорошо подходят для
списка с одним уровнем вложенности. Просто разбейте список на разделы, имеющие собственные заголовки, и, если нужно, разрешите пользователю сортировать
отдельные разделы, не разрушая при этом категоризацию. Если разделов мало,
попробуйте применить шаблон Accordion (Аккордеон) — такая организация позволяет скрывать ненужные данные;
Шаблоны 211
‰‰для отображения двухуровневой и более глубокой иерархии обычно используют
простые деревья. Содержимое каждого последующего уровня выводится с отступом
относительно предыдущего, а для того чтобы скрыть или развернуть определенный уровень, нужно нажать на значок плюса, минуса (повсеместно встречаются
в Windows) или треугольника. Уровни открываются и закрываются либо пользователем, либо автоматически средствами интерфейса, когда того требует задача.
Во многих пакетах разработки пользовательских интерфейсов есть бесплатные
реализации деревьев;
‰‰каскадные списки представляют собой древовидную структуру, поставленную на
бок, где каждый уровень иерархии отображается в отдельном столбце. Популяризированный операционной системой Mac OS, этот шаблон обеспечивает эффективную работу с иерархиями, но занимает очень много пространства (его не получится
реализовать в небольшом окне или экране);
если
элементы хорошо структурированы и вы хотели бы вывести их в формате
‰‰
таблицы, то можно использовать древовидную таблицу. Как несложно понять из
названия, это предсказуемо выглядящее сочетание таблицы и дерева.
Шаблоны
Первыми идут три шаблона, в которых сведения об элементах размещаются рядом со
списком, внутри него или вообще на другой странице:
1. Two-Panel Selector (Двухпанельный селектор).
2. One-Window Drilldown (Погружение в одном окне).
3. List Inlay (Список с вкладышами).
Следующие несколько шаблонов рассказывают об отображении разнообразных списков: списков изображений (Thumbnail Grid (Сетка эскизов) и Carousel (Карусель)),
таблиц (Row Striping (Чередование строк)), длинных списков (Pagination (Разбивка
на страницы), Jump to Item (Прыжок к элементу), Alphabet Scroller (Алфавитная полоса прокрутки)) и иерархий (Cascading Lists (Каскадные списки) и Tree Table (Древовидная таблица)). Если вы создаете таблицу или древовидную таблицу, постарайтесь
сделать ее сортируемой (шаблон Sortable Table (Сортируемая таблица) из главы 7).
4. Thumbnail Grid (Сетка эскизов).
5. Carousel (Карусель).
6. Row Striping (Чередование строк).
7. Pagination (Разбивка на страницы).
8. Jump to Item (Прыжок к элементу).
9. Alphabet Scroller (Алфавитная полоса прокрутки).
10. Cascading Lists (Каскадные списки).
11. Tree Table (Древовидная таблица).
Наконец, шаблон New-Item Row (Строка для нового элемента) позволяет добавлять элементы в список независимо от способа его отображения на экране.
12. New-Item Row (Строка для нового элемента).
212 Глава 5 • Списки
Two-Panel Selector (Двухпанельный селектор)
Рис. 5.1. Системные настройки операционной системы Mac OS
Что
Разместите в интерфейсе две панели бок о бок. В первой покажите набор элементов,
в котором пользователь может произвольно выбирать любой, во второй выводите содержимое выбранного элемента.
Использовать, когда…
Вы представляете список объектов. С каждым элементом связано интересное содержимое, например текст электронного сообщения, длинная статья, полноразмерное изображение, элементы второго уровня (если список представляет собой набор категорий
или папок) или сведения о размере или дате создания файла.
Вы хотите, чтобы список был на экране целиком, чтобы пользователь мог видеть общую структуру списка, но чтобы он также мог проходить по элементам с произвольной
скоростью и в произвольном порядке. Пользователям не нужно видеть содержимое
сразу нескольких элементов одновременно.
Дисплей, с которым вы работаете, достаточно велик, чтобы одновременно могли
отображаться две отдельные панели. Небольшие дисплеи мобильных телефонов не
справятся с этим шаблоном, но он может подойти для экранов более крупных мобильных устройств.
Почему
Двухпанельный селектор — это известная условность, но чрезвычайно популярная
и эффективная. Люди быстро понимают, что они должны выбрать элемент на одной
панели, чтобы увидеть его содержимое на другой. Они могут обучиться этому, используя клиента электронной почты, Проводник Windows (Windows Explorer) или
разнообразные веб-сайты; а потом распространяют отработанную технику на другие
внешне похожие приложения.
Когда обе панели отображаются на экране и находятся рядом, пользователи могут
быстро переключать внимание между ними, сначала наблюдая общую структуру спи-
Шаблоны 213
ска («Сколько непрочитанных сообщений еще осталось?»), а потом сразу же переводя
взгляд на подробные сведения об элементе («О чем говорится в этом сообщении?»).
У такой тесной интеграции есть несколько преимуществ по сравнению с прочими
физическими структурами, такими как два отдельных окна или структура шаблона
One-Window Drilldown (Погружение в одном окне):
‰‰уменьшается объем затрачиваемых физических усилий. Глазам пользователя не
приходится проделывать долгий путь от одной панели к другой, а смена панели
осуществляется одним щелчком мыши или нажатием клавиши, без необходимости
проходить по нескольким окнам или экранам (что может потребовать дополнительных щелчков);
‰‰уменьшается визуальная когнитивная нагрузка. Когда поверх остальных окон
всплывает новое, или когда содержимое страницы полностью меняется (как
в шаблоне One-Window Drilldown (Погружение в одном окне)), пользователю
неожиданно приходится отдавать больше внимания тому, на что он смотрит. Когда
же окно остается большей частью неизменным, как в шаблоне Two-Panel Selector
(Двухпанельный селектор), пользователь может сфокусироваться на небольшой
области, в которой произошли изменения. Масштабного переключения контекста
не происходит;
‰‰снижается нагрузка на память пользователя. Снова вернемся к примеру с электронной почтой: когда пользователь видит только текст электронного сообщения, на
экране нет ничего, что напоминало бы о положении этого сообщения в контексте
папки входящих писем. Если ему понадобится это узнать, то придется вспоминать
или возвращаться обратно к списку. Но если список уже на экране, то можно просто взглянуть, не напрягая память. Таким образом, список служит указателем «Вы
находитесь здесь» (подробнее об указателях рассказывается в главе 3);
‰‰это быстрее, чем загрузка новой страницы для каждого элемента, что происходит,
например, при погружении в одном окне.
Как
Поместите список выбора на верхнюю или левую панель, а панель сведений расположите внизу или справа. Таким образом, вы воспользуетесь преимуществом
визуального потока, которого ожидает большинство пользователей, читающих слева
направо (можно попробовать изменить направление, если дизайн создается для языка,
в котором читают справа налево).
Когда пользователь выбирает элемент, его содержимое или сведения о нем
должны немедленно отображаться на второй панели. Выбор должен осуществляться одним щелчком мыши. В то же время предоставьте пользователю возможность
выбирать элемент с помощью клавиатуры, в частности с помощью стрелок — тем
самым вы не только уменьшите количество необходимых физических усилий, но
и сокра­тите время, затрачиваемое на просмотр списка, а также обеспечите работу
с использованием только клавиатуры (см. шаблон Keyboard Only (Только клавиатура) в главе 1).
Сделайте так, чтобы пользователю было очевидно, какой элемент выбран в данный момент. В большинстве инструментальных пакетов разработки графических
214 Глава 5 • Списки
­ оль­зовательских интерфейсов предусмотрен какой-либо способ иллюстрации
п
­выделения, например для выбранного элемента могут меняться местами фоновый
цвет и цвет переднего плана. Если этот вариант выглядит неудачно или если вы
используете ­инструментальный пакет, не поддерживающий эту возможность, то
попробуйте ­отмечать выбранный элемент особым цветом или уровнем яркости, отличающимся от установленного для всех остальных, — это помогает подчеркнуть его
на фоне списка.
Как должен выглядеть список с возможностью выбора? Это зависит от многих обстоятельств: от внутренней структуры содержимого или, возможно, от выполняемой
задачи. Например, большинство программ просмотра файловой системы выводят
иерархию каталогов, так как именно таким способом структурируются все файловые
системы. В приложениях для создания анимации или редактирования видео есть
интерактивные временные шкалы. В компоновщиках пользовательского интерфейса
может использоваться сам холст, а свойства выбранных на нем объектов могут отображаться в окне свойств, находящемся рядом с холстом.
Семантика двухпанельного селектора аналогична вкладкам: одна область для элементов выбора и другая, рядом с ней, для содержимого выбранного объекта. В этом
смысле список с вкладышами похож на «аккордеон» (см. главу 4), а погружение в одном окне — на страницу меню (см. главу 3).
Когда концепция выбора элемента и вывода сведений охватывает несколько панелей, для упрощения навигации по иерархической информационной архитектуре
можно применить шаблон Cascading Lists (Каскадные списки).
Примеры
Во многих клиентах электронной почты этот шаблон применяется для одновременного
отображения списка сообщений и содержимого выбранного сообщения (рис. 5.2). Ширина таких представлений обычно чуть меньше ширины окна, поэтому список удобнее
помещать наверху, а панель сведений внизу — не рядом друг с другом. (В этом примере
демонстрируется использование третьей панели выбора слева, где пользователь может
щелкнуть на одном из нескольких почтовых ящиков.)
Как и во многих других диспетчерах изображений, в Picasa (рис. 5.3) папки изображений и категорий выводятся в двухпанельном селекторе слева, а список изображений в выбранной папке или категории — справа. Когда пользователь выбирает
определенное изображение, меняется все содержимое окна; см. шаблон One-Window
Drilldown (Погружение в одном окне).
В других библиотеках
http://quince.infragistics.com/Patterns/Two-Panel%20Selector.aspx
http://www.welie.com/patterns/showPattern.php?patternID=overview-detail
Шаблоны 215
Рис. 5.2. Окно приложения Mac Mail на рабочем столе
Рис. 5.3. Окно приложения Picasa
216 Глава 5 • Списки
One-Window Drilldown (Погружение в одном окне)
Рис. 5.4. Экраны приложения Mac Mail на iPhone
Что
Выводите список или меню элементов в одном окне. Когда пользователь выберет
элемент списка, покажите сведения или содержимое этого элемента в том же окне,
полностью заменив его содержимое.
Использовать, когда…
Вы показываете список элементов, с каждым из которых связано интересное содержимое, такое как текст электронного сообщения, длинная статья, полноразмерное
изображение или информация о размере и дате файла.
В вашем распоряжении довольно мало пространства — недостаточно для реализации двухпанельного селектора или списка с вкладышами. Например, этот дизайн
предназначен для очень маленького экрана мобильного устройства, для боковой панели веб-сайта или виджета.
Возможно, элементы списка и их содержимое очень велико. Для отображения списка требуется целый экран или окно, и то же самое требование распространяется на
отображение содержимого отдельных элементов. Так часто бывает с интерактивными
форумами: список тем растягивается на всю страницу по ширине; содержимое каждой
темы выводится на отдельной странице с полосой прокрутки.
Почему
В ограниченном пространстве это может быть единственным разумным вариантом
представления списка и содержимого элементов. Каждое представление занимает все
доступное пространство, «развертываясь» на всю страницу.
Шаблоны 217
Как и у страницы меню (см. одноименный шаблон в главе 3), основное преимущество данного шаблона — простота. Список элементов (или ссылок) легко понять:
чтобы увидеть больше, нужно щелкнуть или коснуться его, и вы автоматически «погрузитесь» на уровень ниже. Затем можно снова вернуться к главному списку или
меню и перейти к другому элементу.
Как
Создайте список в таком формате, который вам кажется наиболее подходящим: простые текстовые названия, несколько «широких строк» с форматированием текста,
дерево или схема, сетка эскизов — выберите любой из этих или какой-либо другой
вариант. Если необходимо, добавьте вертикальную полосу прокрутки.
Когда пользователь щелкает, касается или иным образом выбирает один из элементов списка, выводите на экран совершенно новое представление, включающее
сведения об элементе или его содержимое. В таком представлении второго уровня
должна присутствовать кнопка Назад или Отмена, возвращающая пользователя обратно на экран списка (если только платформа не поддерживает аппаратные кнопки
с подобными функциями).
Экран второго уровня может предлагать и другие навигационные возможности,
такие как дальнейшее погружение в сведения об элементе, переход к элементу третьего
уровня (в иерархическом списке) или «соседнему» элементу второго уровня. В каждом
из этих случаев на экран выводится полностью новое содержимое. Однако удостоверьтесь, что пользователь всегда сможет с легкостью вернуться на предыдущий экран.
Один из недостатков данного шаблона заключается в том, что для перехода от одного элемента к другому пользователю приходится постоянно возвращаться к главному
списку. Ему приходится много щелкать по ссылкам и кнопкам, а быстро перейти от
одного элемента к другому (как в двухпанельном селекторе) или с легкостью сравнить
их (как в списке с вкладышами) не получится. Справиться с такой проблемой помогут
ссылки Назад и Далее, соединяющие текущую страницу второго уровня со страницами
предыдущего и следующего элементов (см. шаблон Pyramid (Пирамида) в главе 3).
Примеры
Примерами данного шаблона изобилует мобильный дизайн (рис. 5.4). Сравните мобильную версию клиента электронной почты с его настольным аналогом, показанным
в шаблоне Two-Panel Selector (Двухпанельный селектор). Обратите внимание, что
подход с погружением в одном окне требует выводить больше текста в списке, поэтому у пользователя все равно имеется достаточно контекста для идентификации
и сортировки сообщений.
Погружение в одном окне используется и в полноразмерных приложениях, и на
веб-страницах. Очень часто его можно наблюдать в дизайне форумов и сообществ:
темы перечисляются на одной страницы, а нити обсуждений выводятся на собственных экранах. Такой подход демонстрирует веб-сайт Ravelry и около шести миллионов
других интерактивных форумов (рис. 5.5).
Настольное приложение Picasa, диспетчер изображений, состоит из двухпанельного селектора и сетки эскизов. Так выглядит интерфейс обзора (рис. 5.6). Но когда
пользователь щелкает на фотографии, содержимое всего окна (за исключением
нижней панели инструментов) заменяется новым макетом, в котором центральную
218 Глава 5 • Списки
сцену занимает крупная версия фотографии, а рядом размещаются наборы различных
инструментов.
Рис. 5.5. Форумы на веб-сайте Ravelry
В других библиотеках
http://quince.infragistics.com/Patterns/One-Window%20Drilldown.aspx
Шаблоны 219
Рис. 5.6. Приложение Picasa
220 Глава 5 • Списки
List Inlay (Список с вкладышами)
Рис. 5.7. Раскрывающиеся элементы списка на веб-сайте Kayak
Что
Выводите список элементов в форме строк одного столбца. Когда пользователь выбирает элемент, показывайте подробные сведения прямо внутри списка, раздвигая
соседние элементы. У пользователя должна быть возможность открывать и закрывать
элементы независимо друг от друга.
Использовать, когда...
Вы создаете представление списка элементов. С каждым элементом связано интересное содержимое, такое как текст сообщения электронной почты, длинная статья,
полноразмерное изображение или сведения о размере и дате файла. Содержимое занимает не слишком много места, однако оно и не настолько мало, чтобы выводить его
на экран постоянно.
Вы хотите, чтобы список всегда был на экране, чтобы пользователь видел общую
структуру списка, но также мог быстро и легко перемещаться между его элементами.
Возможно, пользователю нужно будет одновременно видеть содержимое двух или
более элементов, например, для сравнения.
Структура списка позволяет выводить его в столбцах.
Почему
В списке с вкладышами содержимое элементов отображается в контексте самого
списка. Пользователь видит соседние элементы, что помогает ему понимать и использовать открывшиеся сведения.
Кроме того, пользователь может одновременно видеть содержимое нескольких
элементов. Это невозможно в двухпанельном селекторе, при погружении в одном окне,
в нахлестывающихся окнах и в большинстве других форматов отображения подробных
Шаблоны 221
сведений об элементе списка. Если в вашем приложении часто требуется сравнивать
элементы, возможно, данный шаблон окажется наилучшим выбором.
Поскольку список с вкладышами образует аккуратный вертикальный столбец,
он хорошо сочетается с двухпанельным селектором. Это удобно для представления
трехуровневой иерархии. Вспомните, например, как выглядит клиент электронной
почты или RSS-лента: сообщения или статьи можно выводить в списке с вкладышами,
а содержимое элементов (почтовые ящики, группировки, фильтры) — рядом в двухпанельном селекторе.
Как
Выводите список элементов в столбце. Когда пользователь щелкает на элементе, раскрывайте его содержимое на месте, показывая дополнительные сведения об элементе
прямо внутри списка. Таким же жестом можно закрывать элемент.
Когда элемент открывается, следующие элементы должны сдвигаться ниже, освобождая пространство для него. Поскольку список с открытыми элементами может
стать очень длинным, нужно предусмотреть полосы прокрутки.
Добавьте элемент управления, явно указывающий на то, что он служит для закрытия панели подробностей (кнопка Закрыть или крестик). В некоторых реализациях
такой элемент находится внизу панели подробностей, однако зачастую бывает удобно
дублировать его наверху, так как содержимое может оказаться длинным, и тогда пользователю будет неудобно целиком прокручивать его вниз. Поместите закрывающий
элемент управления рядом с исходным открывающим (или заменяйте один другим).
Это гарантирует, что пользователю не придется далеко перемещать указатель мыши,
если он захочет открыть элемент, взглянуть на его содержимое и снова закрыть.
При открывании и закрывании панели подробностей используйте анимированные
переходы, чтобы взгляд пользователя не терялся, а его внимание не уходило от только
что открытого элемента.
Если в вашем приложении разрешается редактирование элементов, то в панели
подробностей может открываться редактор, а не сведения об элементе (или оба этих
инструмента).
Список с вкладышами работает по принципу «аккордеона»: все находится в одном
столбце, а панели открываются и закрываются на месте в пределах этого столбца.
В этом смысле двухпанельный селектор схож с вкладками, а погружение в одном
окне — со страницей меню (глава 3).
Примеры
В приложении Google Reader (рис. 5.8) список с вкладышами используется в контексте двухпанельного селектора. Здесь представлена многоуровневая иерархия
контейнеров; контейнеры перечислены в древовидной структуре слева. Список статей
занимает центральную сцену, и пользователь может открывать их на месте, знакомясь
с содержимым.
Вместо того чтобы скакать между списком отзывов о книгах и фактическим текстом
каждого отзыва, на мобильном сайте Amazon все это можно прочитать в одном списке
с вкладышами. Список элементов слева дразнит пользователя короткими анонсами
обзоров, и если человека что-то заинтересует, то он касается заголовка. Содержимое
раскрывается, и он читает отзыв полностью (рис. 5.9). Значки плюса и минуса указывают на то, что здесь можно открыть панель подробностей.
222 Глава 5 • Списки
Рис. 5.8. Веб-приложение Google Reader
В других библиотеках
http://www.patternry.com/p=inline-expand/
Билл Скотт и Тереза Нейл упомянули об этой технике в своей книге «Designing
Web Interfaces» (издательство O'Reilly, http://oreilly.com/catalog/9780596516253/). Списки с вкладышами входят в тот же набор техник, что и вложенные диалоговые окна
и вложенные подробности.
Шаблоны 223
Шаблон Accordion (Аккордеон) присутствует во многих библиотеках шаблонов,
включая мою. Многие советы по дизайну одинаково хорошо применимы как к «аккордеонам», так и к спискам с вкладышами. (В действительности, на практике между
ними особой разницы не наблюдается.)
Рис. 5.9. Отзывы на сайте Amazon на экране iPhone
Thumbnail Grid (Сетка эскизов)
Рис. 5.10. Список продуктов на веб-сайте Hanna Andersson
224 Глава 5 • Списки
Что
Выводите список визуально интересных элементов в форме сетки небольших однотипных изображений. Пользователь сможет выбрать один или несколько эскизов,
чтобы просмотреть содержимое или что-либо с ним сделать.
Использовать, когда...
Элементам списка соответствуют небольшие визуальные представления, идентифицирующие их уникальным образом: изображения, логотипы, снимки экрана,
уменьшенные фотографии и т. п. Они схожи по размеру и стилю. Список может быть
длинным, и тогда его удобно делить на именованные разделы (см. одноименный шаблон в главе 4).
Для каждого элемента вы хотите вывести некоторые метаданные, такие как название и дата, но этой информации будет немного — рисунок займет почти все пространство, выделенное для представления элемента.
Пользователям необходимо видеть список целиком, чтобы они могли быстро
просмотреть его в поисках интересующего элемента. Также пользователям может понадобиться выбрать один или несколько элементов для перемещения, удаления или
просмотра.
Почему
Сетка эскизов — это насыщенное, привлекательное представление большого числа элементов. Имеющий много общего с сеткой равных (см. одноименный шаблон в главе 4),
этот шаблон создает визуальную иерархию с равными по значимости элементами, а представление в виде жесткой сетки надежно привлекает внимание к этой части страницы.
Может показаться, что список элементов проще представить в текстовой форме, но
очень часто рисунками манипулировать оказывается удобнее и логичнее.
Эскизов примерно квадратной формы легко касаться пальцем (если речь идет
о сенсорном экране), они также удобны для пользователей, использующих механические указательные устройства (мышь). Этот шаблон хорошо работает на мобильных
устройствах с сенсорными экранами с относительно высоким разрешением, таких
как iPhone.
Как
Организуйте список эскизов в двумерную сетку. Отредактируйте эскизы так, чтобы
они были примерно одинакового размера — сетка будет выглядеть аккуратнее. Разместите текстовые метаданные вплотную к эскизам, но используйте мелкий шрифт,
для того чтобы визуальный акцент оставался на изображении.
Сетки эскизов выглядят привлекательнее, когда все эскизы одинаковой ширины
и высоты. Если вам предоставили изображения разных размеров или с разными соотношениями сторон или же рисунки очень большого размера, то для создания аккуратных эскизов может потребоваться дополнительная обработка. Постарайтесь найти
такой размер и соотношение сторон, с которыми все изображения будут смотреться
удачно, даже если часть рисунков придется обрезать. (Уменьшить размер изображения
просто; правильно кадрировать — нет. Будьте крайне осторожны и не нарушайте целостность изображения. Если изображения приходится обрезать, внимательно относитесь к выбору наиболее подходящего фрагмента, который будете показывать в эскизе.)
Шаблоны 225
Исключениями являются изображения, размер и пропорции которых важны для
пользователя. Например, среди личных фотографий могут попасться снимки как
с портретной, так и с альбомной ориентацией. Такие изображения не нужно кадрировать под идеальный формат эскиза — пользователю необходимо видеть фотографии
такими, какие они есть!
С другой стороны, в галерее продуктов (таких как туфли или рубашки) все эскизы
должны иметь одинаковую ширину и высоту, а продукты обязаны выглядеть единообразно.
Примеры
В Mac OS Finder можно увидеть большое разнообразие эскизов, представляющих
разные типы содержимого каталогов (рис. 5.11). Для файлов изображений выводится сжатая версия соответствующих изображений; каталоги представлены простым
значком папки. Если графическое представление содержимого файла недоступно,
то выводится общий значок с указанием типа файла (например, DOC). Сетка эскизов
становится разнородной и выглядит не так изящно, как в других примерах в этом
шаблоне, но размер и стиль значков сообщают пользователю важную информацию
о содержимом.
Рис. 5.11. Приложение Mac OS Finder
226 Глава 5 • Списки
Веб-сайты архива дизайнов AIGA (рис. 5.12) и YouTube (рис. 5.13) представляют
собой диспетчеры изображений. В первом текстовая информация отсутствует, а во
втором ее очень много.
Рис. 5.12. Веб-сайт архива дизайнов AIGA
Рис. 5.13. Веб-сайт YouTube
На веб-сайтах Zappos (рис. 5.14) и Hanna Andersson (см. рис. 5.10) можно увидеть
очень аккуратно организованные сетки эскизов, которые используются для представления галереи продуктов. Единообразие добавляет стиля — схожие черты и различия
между продуктами сразу бросаются в глаза, и страница создает ощущение сильного
визуального ритма.
Шаблоны 227
Рис. 5.14. Веб-сайт Zappos
228 Глава 5 • Списки
На мобильных устройствах сетки эскизов используются во многих контекстах:
для перечисления приложений, возможностей и изображений. Обратите внимание
на относительный размер эскизов на рис. 5.15. На домашних экранах Google Images
и iPhone они велики ровно настолько, чтобы их можно было без труда коснуться пальцем. Пример из Facebook более «расслаблен» — вокруг каждого элемента довольно
много свободного места.
Рис. 5.15. Сетки эскизов на устройстве iPhone: Facebook, Google Images и домашний экран
В других библиотеках
http://ui-patterns.com/patterns/Thumbnail
Carousel (Карусель)
Рис. 5.16. Веб-сайт Marriott
Шаблоны 229
Что
Поместите список визуально интересных элементов в горизонтальную полосу или
арку и позвольте пользователям пролистывать или перебирать их. Если это преду­
смотрено в дизайне, увеличивайте центральный элемент.
Использовать, когда...
Элементам списка соответствуют визуальные представления, идентифицирующие их
уникальным образом: изображения, логотипы, снимки экрана, уменьшенные фотографии и т. п. Представления схожи по размеру и стилю. Список плоский, то есть не
делится на категории или уровни.
Для каждого представления вы будете показывать некоторые метаданные, такие
как название и дата, но информации будет немного — большую часть пространства,
отведенного для элемента, будет занимать изображение.
Каждый элемент может заинтересовать пользователя. Пользователи будут мимоходом перебирать их, не пытаясь найти что-то определенное. Им не нужно видеть на
экране весь список целиком. Даже если пользователю нужно найти определенный
элемент, его не затруднит перелистать множество изображений, прежде чем на экране
окажется нужный. Возможно, список будет упорядочен: по дате или по потенциальной
ценности для пользователей.
В вашем распоряжении недостаточно большое по высоте пространство, чтобы создать сетку эскизов. Возможно, по горизонтали пространство также ограничено. Тем не
менее вам необходимо сделать список интересным и привлекательным.
Почему
Карусель — это очень интересный и забавный интерфейс просмотра визуальных
элементов, в котором пользователь с удовольствием рассматривает текущий элемент и с не меньшим удовольствием перелистывает, чтобы перейти к следующему.
К определенной точке в глубине списка невозможно перейти моментально — нужно
просмотреть все предыдущие элементы. Таким образом, данный шаблон подталкивает
к неспешному изучению всего содержимого списка.
Интерфейс такого формата занимает совсем немного места по вертикали, поэтому
в небольших пространствах его использовать удобнее, чем сетку эскизов. Его можно
либо сильно растянуть, либо компактно сжать по горизонтали.
Если на центральном или выбранном элементе делается акцент — например, соответствующее изображение увеличивается, — то данный шаблон предоставляет пользователю «фокусное пятно и контекст», то есть детальное представление одного элемента
и небольшие эскизы соседних. Подробнее об этом принципе говорится в главе 7.
Как
Во-первых, создайте эскизы для всех элементов карусели. О проблемах, связанных с выбором размера и пропорций эскиза, рассказывается в описании шаблона
Thumbnail Grid (Сетка эскизов) (но помните, что эскизы разных размеров и с разным
соотношением сторон в карусели выглядят еще хуже, чем в сетке эскизов). Текстовые
метаданные выводите вплотную к эскизу, но мелким шрифтом, чтобы не отвлекать
внимание от рисунка.
230 Глава 5 • Списки
В виджете с горизонтальной прокруткой разместите эскизы по горизонтали: в случайном порядке или упорядочив понятным для пользователя способом (например,
по дате). Показывайте на экране небольшое число эскизов — менее 10 — остальные
должны быть скрыты. Поместите большие стрелки справа и слева от списка эскизов — пользователи будут использовать их для пролистывания содержимого карусели.
Один щелчок должен передвигать карусель сразу на несколько элементов. Добавьте
анимацию для усиления визуальной привлекательности интерфейса.
Если пользователю может понадобиться быстро прокрутить длинный список (например, в поисках определенного элемента), то в дополнение к стрелкам создайте под
каруселью полосу прокрутки. Если выяснится, что пользователи очень часто прибегают к помощи полосы прокрутки, возможно, лучшим решением станет превратить
карусель в более привычный вертикальный список и добавить поле поиска.
Центральный элемент карусели можно увеличивать, привлекая к нему дополнительное внимание. Это создает семантику единичного выделения — очевидно, что
увеличенный элемент является выбранным, значит, на основании такого выбора
можно производить различные действия, например показывать подробные сведения
о продукте или выводить элементы управления видео, если список представляет собой набор видеоклипов.
Что касается внешнего вида карусели, она может быть прямой, дугообразной или
круглой. Дизайнеры часто создают иллюзию трехмерности, сжимая элементы и делая
их более прозрачными по мере удаления от центра.
Аналог карусели в мире мобильного дизайна — это шаблон Filmstrip (Кинопленка); подробнее о котором рассказывается в главе 10. В каждый момент времени на
небольшом экране виден только один элемент. Пользователь перелистывает или прокручивает его, чтобы перейти к следующему.
Примеры
На многих веб-сайтах реализован простой, линейный вариант карусели, позволяющий
перемещаться по списку продуктов. На Amazon и Google Books так отображаются
обложки книг (рис. 5.17). Обратите внимание на разный объем текста, связанный
с каждым из эскизов в этих двух примерах. Разное оформление намекает на разное
предназначение этих сайтов. Как много информации следует сообщать о каждой книге? Насколько близко друг к другу нужно выводить изображения обложек?
На веб-сайтах Apple и Flickr (рис. 5.18 и 5.19) карусель дополняется горизонтальной полосой прокрутки. Список может включать огромное количество элементов,
и полоса прокрутки необходима для ускорения перемещения. Обратите внимание,
что в примере с веб-сайта Apple используется полоса прокрутки с примечаниями (см.
одноименный шаблон в главе 3). Она помогает пользователям находить категории
продуктов. Горизонтальное размещение списка упрощает вывод названий продуктов,
однако уместить большое количество категорий здесь не получится. Это довольно необычное решение — наборы категорий нечасто оформляют в виде карусели. Обычно
для этого выбирают обычный плоский список.
Cover Flow (рис. 5.20) представляет собой мультимедийную карусель, в которой
центральный, выбранный элемент увеличивается на фоне других. Сравните ее с дугообразной каруселью в приложении на платформе Android (рис. 5.21); функциональность у них похожа, но визуальное представление кардинально отличается.
Шаблоны 231
Рис. 5.17. Веб-сайты Amazon и Google Books
Рис. 5.18. Карусель продуктов на веб-сайте Apple
Рис. 5.19. Инструменты организации содержимого на веб-сайте Flickr
Рис. 5.20. Cover Flow в iTunes
232 Глава 5 • Списки
Рис. 5.21. Приложение Sherpa для платформы Android (изображение с веб-сайта
http://www.androidtapp.com/sherpa-discover-your-world/sherpa-nearest-dining-on-carousel/)
На веб-сайте New York Times список наиболее интересных статей также выводится
в формате карусели (рис. 5.22). Пользователь наверняка захочет взглянуть на каждую
из представленных статей; он будет перелистывать их медленно и вдумчиво. Именно
поэтому здесь представлены не все заметки, появляющиеся на сайте ежедневно, — их
слишком много! Люди обычно пробегают глазами по заголовкам и щелкают на тех,
которые им приглянутся. Сенсационные материалы и специальные статьи — совсем
другое дело.
Рис. 5.22. Наиболее интересные статьи на веб-сайте New York Times
В других библиотеках
http://developer.yahoo.com/ypatterns/selection/carousel.html
http://ui-patterns.com/patterns/Carousel
http://welie.com/patterns/showPattern.php?patternID=carrousel
Шаблоны 233
Row Striping (Чередование строк)
Рис. 5.23. Веб-сайт JetBlue
Что
Для окрашивания фонового цвета строк таблицы чередуйте два схожих оттенка.
Использовать, когда…
В интерфейсе присутствует таблица с множеством столбцов, но строки таблицы визуально трудно отделимы друг от друга. Пользователи ищут в таблице строки с определенными данными.
Почему
Блоки спокойного цвета определяют разные строки таблицы и служат фоном для содержащейся в них информации. Это удобно, когда невозможно разделить данные на
«куски» при помощи пустого пространства. Картографы и графические дизайнеры
используют этот прием уже очень давно. (Вспомните, что цветной фон также очень
эффективен для определения разделов на странице и выражения визуальной иерархии. Подробнее об этом рассказывается в главе 4.)
Когда человек смотрит на таблицу со сплошным фоновым цветом, он воспринимает столбцы как связанные объекты из-за близости данных внутри столбца: если
взять один столбец, то записи в нем будут находиться ближе друг к другу, чем записи
в одной строке. Однако вам нужно, чтобы зрители могли читать таблицу по строкам,
а не только по столбцам. Окрашивая соседние строки в разные цвета, вы делаете их
визуально связанными объектами. (Здесь работают гештальт-принципы непрерывности и замкнутости; см. главу 4.)
234 Глава 5 • Списки
В частности, чередование строк помогает пользователю:
‰‰читать данные в строке слева направо и в обратном направлении, не перескакивая
на другие строки;
‰‰видеть зону самой таблицы, отделяя ее от окружающей страницы.
Тем не менее чередование строк привносит визуальный шум. В некоторых контекстах это может затруднять работу пользователей или делать таблицу более сложной
для восприятия.
Два исследования, посвященные чередованию строк (которое также известно под
названием zebra striping — расцветка под зебру), доказывают, что эта техника обладает
небольшим, но существенным преимуществом и в определенных условиях улучшает
скорость и точность чтения информации. Таблицы, в которых это оказалось особенно
заметно, были большими, включали множество строк, а столбцы в них были расставлены довольно широко. В небольших таблицах чередование строк особого преимущества
не давало. Интересно, что когда пользователей напрямую спрашивали, нравится им
чередование строк или нет, они отвечали положительно! Обсуждение этих исследований и ссылки на исходные исследования, выполненные Formulate Information Design,
вы найдете на следующих веб-сайтах:
http://www.alistapart.com/articles/zebrastripingdoesithelp/
http://www.alistapart.com/articles/zebrastripingmoredataforthecase/
Как
Выберите пару спокойных ненасыщенных цветов, значения которых близки, но не
идентичны (другими словами, один должен быть чуть-чуть темнее другого). Хорошие
варианты: светло-голубой и белый, бежевый и белый или два схожих оттенка серого;
при этом цвет текста в строках должен быть, конечно же, темным. Один из цветов этой
пары обычно является фоновым цветом страницы.
Чередуйте цвета в строках таблицы. Если строки достаточно узкие, то можно также поэкспериментировать с группировкой: три первые строки белые, следующие три
голубые и т. д. Помните только, что согласно упомянутому выше исследованию, пользователи предпочитают чередование одиночных строк, а не групп из нескольких строк.
Этот шаблон практически исключает необходимость в горизонтальных линиях
между строками (хотя их все равно можно использовать, если они тонкие и не привлекают внимания). Если данные в столбцах выровнены, то и вертикальные линии
или толстые границы вокруг таблицы не нужны — благодаря ощущению визуальной
замкнутости и чередующимся цветам строк пользователь без труда определит, где
заканчивается таблица. Однако если пользователи утверждают, что чередование
строк работает не очень хорошо, вместо него можно попробовать использовать очень
тонкие горизонтальные линии. Они дают тот же эффект — заставляют людей видеть
горизонтальную группировку, а не вертикальную.
Примеры
В примере с сайта JetBlue в начале раздела (рис. 5.23) в каждой строке таблицы содержится несколько строк текста. Сами данные занимают много места и требуют
тщательного форматирования, поэтому здесь в дополнение к пустому белому пространству необходимо применять дополнительные инструменты разделения строк
Шаблоны 235
таблицы. Можно было бы использовать тонкие горизонтальные линии, но чередование
строк более жестко определяет форму таблицы.
Более распространен вариант, когда в одной строке таблицы содержится одна
строка текста. В приложении iTunes применено именно такое форматирование, как
видно на рис. 5.24.
Рис. 5.24. Приложение iTunes
Электронные таблицы в Excel (рис. 5.25) позволяют выбирать стиль линий сетки,
и чередование строк — одна из возможностей. В этой таблице несложно проследить
каждую строку слева направо и обратно.
Рис. 5.25. Таблица из приложения Excel с чередованием строк
236 Глава 5 • Списки
Однако посмотрите, что произойдет, если убрать чередование фонового цвета
(рис. 5.26). Столбцы стали более визуально выделенными, а отдельные строки очень
сложно прочитать слева направо. Некоторые дизайнеры, тем не менее, находят такое
представление более аккуратным и приятным для взора. Невозможно дать однозначный ответ, стоит ли во всех обстоятельствах применять чередование строк.
Рис. 5.26. Таблица из приложения Excel без чередования строк
В других библиотеках
Эта техника также известна под названиями «чередующиеся цвета строк» и «расцветка
под зебру». В сети можно найти множество разнообразных описаний:
http://ui-patterns.com/patterns/AlternatingRowColors
http://www.welie.com/patterns/showPattern.php?patternID=zebra-table
http://quince.infragistics.com/Patterns/Alternating%20Row%20Colors.aspx
Pagination (Разбивка на страницы)
Рис. 5.27. Элементы управления страницами на веб-сайте Songza
Что
Разбивайте очень длинный список на страницы и загружайте их по одной. Добавляйте элементы управления, с помощью которых пользователь будет перемещаться по
списку вперед, назад, на первую и на последнюю страницу.
Шаблоны 237
Использовать, когда...
Нужно показать на экране очень, очень длинный список. Большинство пользователей
будут искать в нем один определенный элемент или просматривать первые несколько
элементов (как обычно бывает с результатами поиска). В любом случае, им не нужно
видеть список целиком.
Технология, которую вы используете, не поддерживает загрузку полного списка
на одной странице или в поле с полосой прокрутки по любой из следующих причин:
‰‰загрузка списка целиком займет слишком много времени, а вы не хотите заставлять
пользователя ждать. Причиной также может быть медленное соединение с Интернетом или медленный сервер, с которого принимаются данные;
‰‰составление списка займет слишком много времени;
‰‰список получается, фактически, бесконечным, а реализация бесконечного списка
(см. одноименный шаблон) или списка с непрерывной прокруткой (которые предназначены именно для таких случаев) невозможна по некоторым причинам.
Почему
При разбиении на страницы список делится на порции, которые пользователь может
охватить взглядом и легко понять. Помимо этого, решение, хочет ли он увидеть больше, принимает он сам — достаточно ему имеющихся данных или нужно загрузить
следующую порцию?
Еще одно преимущество данного шаблона заключается в том, что он повсеместно встречается в сети, особенно если речь идет о результатах поиска (хотя это и не
единственно возможный вариант их вывода). Его легко реализовать и в некоторых
системах он входит в стандартную поставку.
Как
Во-первых, решите, сколько элементов будет на каждой странице. Оцените, как много
места занимает каждый элемент, с экранами какого размера обычно работают пользователи (не забудьте учесть мобильные устройства), сколько времени занимает загрузка или отображение элементов, а также вероятность того, что пользователь найдет
желаемое на первой странице.
Это очень важно: одной страницы должно быть достаточно! Велики шансы, что
большинство пользователей не захотят загружать вторую и последующую страницы,
поэтому невозможность найти желаемое на первой может разочаровать их. (Если вы
разрабатываете поисковую систему, удостоверьтесь, что в верхних строках на первой
странице всегда будут находиться самые качественные результаты.)
Если пользователь с большой вероятностью будет задерживаться на странице
надолго (это может быть, например, представление списка продуктов или видео), то
подумайте, не предоставить ли ему самому возможность выбирать, сколько элементов
будет выводиться на каждой странице. Некоторых людей раздражает необходимость
бесконечно перелистывать страницы туда и обратно, чтобы рассмотреть все интересующие их элементы.
Затем необходимо решить, как будут выглядеть элементы управления. Чаще всего
они располагаются внизу страницы, но некоторые дизайнеры также помещают дублирующий набор кнопок или ссылок наверху — если пользователю действительно
238 Глава 5 • Списки
необходимо попасть на следующую страницу, не нужно заставлять его прокручивать
содержимое текущей страницы до конца.
Добавьте следующие элементы управления:
‰‰кнопки или ссылки Назад/Далее, значение которых усиливается изображениями
треугольников или стрелок. На первой странице отключайте ссылку Назад, а на
последней — ссылку Далее (если, конечно, список не бесконечный и последняя
страница существует);
‰‰ссылку на первую страницу. Она всегда должна быть хорошо заметна — помните,
что первая страница содержит наиболее важные элементы;
‰‰последовательность нумерованных ссылок на страницы. Номер текущей страницы,
разумеется, не должен содержать ссылку, однако его следует выделить контрастным
цветом и размером шрифта, для того чтобы дать пользователю навигационную
подсказку «Вы находитесь здесь»;
‰‰многоточия, заменяющие последовательности нумерованных ссылок, если страниц
слишком много — например, больше 20. И снова, всегда сохраняйте ссылки на
первую страницу и, если есть, на последнюю. Не заменяйте многоточиями ссылки
на страницы, соседние с текущей. Все остальное можно игнорировать;
‰‰можно указать общее число страниц (если известно). Есть несколько способов:
можно использовать подписи вида «Страница 2 из 45» или просто всегда выводить
нумерованную ссылку на последнюю страницу. Другие идеи вы сможете почерпнуть из примеров.
Примеры
На веб-сайтах Digg и Google превосходно реализованы все советы из предыдущего
списка. Снимки экрана на рис. 5.28 иллюстрируют наиболее интересные состояния
элементов управления: первая и последняя страницы для небольшого числа элементов,
первая, промежуточная и последняя страницы для очень большого числа элементов.
Обратите внимание, что для того чтобы убрать с экрана часть ссылок, на сайте Digg
используются многоточия, а Google просто игнорирует начало и конец диапазона. Digg
точно знает, сколько страниц занимает список элементов, а список Google зачастую
бывает бесконечным (в последнем примере показано состояние на последней странице
конечного результата поиска — система вернула всего 21 страницу).
На рис. 5.29 вы видите галерею примеров со всех концов Интернета. Подумайте,
какие из них проще разбирать визуально — что означает эта ссылка и вот та? где мне
нужно щелкнуть теперь? — и какие дают наиболее полную информацию о местоположении пользователя и общем числе страниц. Также обратите внимание на размер
ссылок и кнопок. Насколько точно придется целиться пользователю, чтобы попасть
по ним указателем мыши или кончиком пальца?
В других библиотеках
http://www.welie.com/patterns/showPattern.php?patternID=paging
http://ui-patterns.com/patterns/Pagination
http://www.patternry.com/p=search-pagination/
http://quince.infragistics.com/Patterns/Paging.aspx
Шаблоны 239
В библиотеке шаблонов Yahoo! вы найдете две версии шаблона Pagination (Разбивка на страницы): для поисковых систем и для других типов элементов:
http://developer.yahoo.com/ypatterns/navigation/pagination/item.html
http://developer.yahoo.com/ypatterns/navigation/pagination/search.html
Рис. 5.28. Примеры с веб-сайтов Digg и Google
Рис. 5.29. Примеры с различных веб-сайтов (против часовой стрелки, начиная сверху):
Kayak, Drupal.org, Flickr, Target, Last.fm, Mothering.com, Amazon, eBay, YouTube и Hulu
240 Глава 5 • Списки
Jump to Item (Прыжок к элементу)
“C-h-i”
Рис. 5.30. Диалоговое окно выбора шрифта в Mac OS
Что
Когда пользователь вводит имя элемента в таблице или дереве, переводите фокус сразу
на этот элемент и выделяйте его.
Использовать, когда...
В интерфейсе для представления списка элементов используется список с прокруткой,
таблица, раскрывающееся меню, комбинированный список или дерево. Элементы отсортированы по алфавиту или по порядку номеров. Пользователь хочет выбрать один
элемент быстро и точно, предпочтительно с помощью клавиатуры.
Этот шаблон часто используется в системах поиска файлов, в длинных списках
имен и раскрывающихся меню, где пользователь выбирает штат или страну. Также
можно применять его для числовых данных, таких как год или денежная сумма, и даже
для календарного времени, например для выбора месяца или дня недели.
Почему
Люди не очень хорошо умеют искать определенные элементы в длинных списках слов
и чисел. Однако компьютерам это удается превосходно. Так давайте предоставим им
эту работу!
Еще одно преимущество данной техники — она не заставляет пользователя отрывать руки от клавиатуры. Заполняя форму или работая в диалоговом окне, пользователь с легкостью находит нужный элемент списка, просто введя первые несколько
букв названия — система сама переходит к нужному пункту, а пользователь спокойно
продолжает работу. Не нужно ничего пролистывать или щелкать; рука никогда не
переносится с клавиатуры на мышку.
Как
Когда пользователь вводит первую букву или цифру требуемого элемента, переходите
к первому элементу, отвечающему этому критерию; автоматически прокручивайте
список, чтобы элемент оказывался на экране, и выделяйте его.
Пока пользователь без перерыва вводит очередные символы, продолжайте переводить курсор на каждый последующий элемент, удовлетворяющий составному критерию поиска. Если такой элемент не находится, то выделение должно оставаться на
Шаблоны 241
последнем найденном элементе — не нужно возвращаться обратно к началу списка.
Возможно, следует подать звуковой сигнал, сообщая пользователю, что элемент не
найден; в одних приложениях это делается, в других нет.
Примеры
Вариант шаблона Jump to Item (Прыжок к элементу) используется функцией ин­
крементного поиска (рис. 5.31) в GNU Emacs. Когда пользователь включает режим
поиска i-search, нажав клавишное сочетание Ctrl+S, при вводе каждого очередного
символа он попадает на первый элемент соответствующей кумулятивной строки
в документе. То, что материал, по которому осуществляется поиск, не отсортирован,
не имеет значения.
Рис. 5.31. Инкрементный поиск в Emacs
После того как была найдена первая строка, переход к последующим вхождениям
той же строки осуществляется по клавишному сочетанию Ctrl+S. В некотором смысле
такой инкрементный поиск удобнее (и, определенно, быстрее), чем типичные диалоговые окна Find (Поиск) в настольных приложениях, которые не обновляются в процессе
ввода строки поиска.
Помимо автоматического перехода к первому элементу, все прочие вхождения искомой строки в документе подсвечиваются. Это дает пользователю множество дополнительной контекстуальной информации о выполняемом поиске: распространенная ли
это строка или нет? компактно ли собраны вхождения или разбросаны по документу?
242 Глава 5 • Списки
Alphabet Scroller (Алфавитная полоса прокрутки)
Что
Дополните полосу прокрутки рядом с алфавитным списком буквами алфавита.
Использовать, когда...
Пользователи точно знают, какой элемент
им нужно найти в длинном списке, оформленном в виде таблицы, дерева или списка
с полосой прокрутки. Вы хотите помочь им
как можно быстрее выполнить эту задачу.
Почему
Алфавитная полоса прокрутки нечасто
встречается на сайтах и в приложениях, но
ее предназначение очевидно. Это интерактивная карта содержимого списка, во многом
схожая с полосой прокрутки с примечаниями (см. одноименный шаблон в главе 3). Оба
Рис. 5.32. Веб-сайт About.com
этих шаблона напоминают технику «прыжка
к элементу» — они позволяют моментально
переместиться к определенной точке в упорядоченном списке.
Этот шаблон возник, вероятно, по аналогии с книгами (такими как словари) и записными книжками (адресными справочниками), в которых специальными ярлыками
отмечаются места, где начинается очередной алфавитный раздел.
Как
Поместите длинный алфавитный список
в область с полосой прокрутки. Вдоль полосы про­крутки разместите буквы алфавита;
когда поль­зователь щелкает на определенной букве, прокручивайте список до этой
буквы (рис. 5.32).
Существует множество примеров такого
оформления алфавитных списков, так почему же не применить ту же схему к любой
другой сортировке, например по номеру или
по дате? Попробуйте реализовать этот шаблон на других данных!
Примеры
Создатели iPhone создали наиболее известную реализацию этого шаблона. На рис. 5.33
показано встроенное приложение Contacts
(Контакты).
Рис. 5.33. Список контактов в iPhone
Шаблоны 243
Cascading Lists (Каскадные списки)
Рис. 5.34. Диалоговое окно выбора шрифта в Mac OS
Что
Каждый очередной уровень иерархической структуры выглядит как список, допускающий выбор элементов. При выделении любого элемента в списке потомки этого
элемента отображаются на следующем уровне.
Использовать, когда…
Данные имеют иерархическую структуру. Иерархия глубокая, и на каждом уровне
множество элементов. Можно было бы использовать древовидное представление
­(иерархическую схему дерева), но в этом случае пользователю пришлось бы по­
стоянно прокручивать его вверх и вниз, чтобы увидеть нужные элементы, и он не
смог бы получить более полное представление об элементах на глубоких уровнях
иерархии.
Иерархия может быть буквальной, как, например, файловая система, или концептуальной — данный шаблон часто применяется для навигации и выбора элементов
в категориях или для выбора последовательности взаимосвязанных элементов, как
в примере со шрифтами на рис. 5.34.
Почему
Разбивая иерархию на несколько прокручиваемых списков, можно одновременно
отобразить на экране больше информации. Вот и все. Наличие данных перед глазами очень важно при работе со сложными информационными структурами. Помимо
этого, списки позволяют изящно организовать элементы: пользователю проще отслеживать, где он находится, когда уровни иерархии обозначены удобными списками
с предсказуемым местоположением, чем когда на экране открыта обширная схема
дерева.
244 Глава 5 • Списки
Как
Поместите элементы первого уровня иерархии в самый левый список (предполагается использование семантики единственного выбора). Когда пользователь выбирает
элемент в первом списке, отображайте дочерние элементы в следующем списке, находящемся правее. То же самое делайте с потомками второго списка — показывайте
дочерние элементы выбранного во втором списке элемента в третьем списке, который
должен быть справа от второго.
Когда пользователь достигает элементов, не имеющих потомков — листовых
элементов, в противоположность ветвям, — в самом правом поле можно показывать
сведения о последнем выбранном элементе. Например, можно показать эскиз изображения, содержащегося в выбранном графическом файле. Или вместо этого можно
создать интерфейс для редактирования элемента, просмотра его содержимого или
любого другого действия, подходящего для вашего приложения.
В этом шаблоне очень удобно то, что с каждым списком можно с легкостью ассоциировать кнопки: удалить текущий элемент, переместить выше или ниже. Многие
инструментальные средства позволяют делать это в древовидных структурах путем
прямой манипуляции, но если древовидные представления недоступны, то разумной
альтернативой могут стать каскадные списки.
Примеры
Этот снимок экрана утилиты Mac OS X Finder (рис. 5.35) представляет собой
­эк­стре­мальный пример, так как здесь можно увидеть целых семь уровней. Однако
он демонстрирует, насколько хорошо шаблон масштабируется, позволяя пользо­вателю
глубоко погружаться в иерархию файловой системы, но в то же время не теряться
в ней. (Внимание: этот шаблон может вводить в заблуждение людей, не слишком
­хорошо знакомых с концепцией иерархии, особенно когда иерархия достаточно
­глубока.)
Рис. 5.35. Утилита Finder из Mac OS X
В NeXTSTEP эта техника была реализована еще в 1990 году (или около того)
в собственной утилите просмотра файлов. Пример на рис. 5.36 взят с веб-сайта http://
www120.pair.com/mccarthy/nextstep/intro.htmld/Workspace.html.
В других библиотеках
http://quince.infragistics.com/Patterns/Cascading%20Lists.aspx
Шаблоны 245
Рис. 5.36. Утилита просмотра файлов NeXTSTEP
Tree Table (Древовидная таблица)
Рис. 5.37. Приложение Mac OS Finder
Что
Поместите поля элементов в столбцы, как в таблице, но для демонстрации древовидной структуры используйте отступы в первом столбце.
246 Глава 5 • Списки
Использовать, когда…
Элементы списка хорошо структурированы и обладают специфическими атрибутами,
которые особенно интересны пользователям. Их можно представить в формате таблицы
или списка с несколькими столбцами. Однако элементам свойственна строгая иерар­
хия, и вам хотелось бы продемонстрировать ее так, как это позволяет делать дерево.
Пользователи имеют достаточный опыт работы с графическим интерфейсом, так
как это не самый простой шаблон, чтобы его могли быстро изучить неподготовленные люди (то же самое можно сказать о большинстве иерархических представлений,
включая деревья и каскадные списки).
Почему
Сочетание двух подходов к просмотру данных в одном представлении дает вам преимущества обоих, но приводит к дополнительной визуальной и программной сложности. У вас есть возможность показывать пользователям иерархию элементов, а также
матрицу дополнительных данных или атрибутов элементов в одной унифицированной
структуре.
Рис. 5.38. Диспетчер закладок в одной из ранних версий браузера Firefox
Как
В примерах хорошо видно, что нужно делать: поместите дерево (иерархическое представление) в первый столбец, а атрибуты элементов — в последующие столбцы. Строки (для каждого элемента используется одна строка) обычно допускают выделение.
Конечно же, этот шаблон можно сочетать с шаблоном Sortable Table (Сортируемая
таблица), чтобы создавать более удобные для просмотра интерактивные структуры. Сортировка по столбцам нарушает упорядоченное древовидное представление,
Шаблоны 247
­ оэтому необходимо предусмотреть дополнительную кнопку или какое-либо другое
п
средство, позволяющее отсортировать таблицу в соответствии с иерархическими
связями дерева данных.
Эта техника чаще всего применяется в клиентах для работы с электронной почтой
и чтения новостей, где нити дискуссий образуют структуры, аналогичные деревьям.
Пример
В одном из диалоговых окон браузера Firefox когда-то использовался великолепный
образец древовидной таблицы. Разделители — горизонтальные линии — помогают
визуально группировать элементы в категории — это отличная идея (рис. 5.38).
В других библиотеках
http://quince.infragistics.com/Patterns/Tree-Table.aspx
New-Item Row (Строка для нового элемента)
Рис. 5.39. Приложение Microsoft Outlook
Что
Используйте последнюю или первую строку таблицы для того, чтобы на месте создавать новый элемент.
Использовать, когда…
В интерфейсе присутствует таблица, список, древовидное представление или любое
другое вертикальное представление набора элементов (по одному элементу в каждой
строке). В определенный момент у пользователя возникает необходимость добавить
в него новые элементы. Однако в интерфейсе недостаточно пространства для размещения дополнительных кнопок или элементов управления, поэтому вы хотите, чтобы
создание нового элемента осуществлялось эффективно и просто.
Почему
Позволяя пользователю вводить данные непосредственно в конец (или в начало)
существующей таблицы, вы объединяете акт создания с местом, где элемент в конечном итоге будет «жить». Концептуально это более логичное решение, чем добавление
элемента в какой-то другой части пользовательского интерфейса. Помимо этого,
интерфейс выглядит более элегантным, когда для создания элемента не открывается
совершенно новая страница. Используется меньше площади экрана, сокращается
объем навигации (и устраняется переход в другое окно), и пользователь в итоге выполняет меньше работы.
248 Глава 5 • Списки
Как
Предоставьте пользователю простой и очевидный способ создания нового объекта
в пустой строке таблицы. Например, режим редактирования может включаться одним
щелчком мышью в этой строке, строка может содержать кнопку Новый элемент или
фальшивый элемент, как показано на рис. 5.39.
В этом месте в пользовательском интерфейсе должен создаваться новый элемент
и помещаться в эту строку. Все столбцы таблицы (если она состоит из нескольких
столбцов) должны допускать редактирование, чтобы пользователь мог сразу установить все необходимые значения элемента. Внутри ячеек могут быть текстовые поля,
раскрывающиеся списки или любые другие элементы управления, позволяющие
быстро и точно определять значения. Шаблон Good Defaults (Хорошие варианты
по умолчанию, глава 8), часто применяемый в формах для пользовательского ввода
информации, помогает сократить объем затрачиваемых пользователем усилий и количество времени за счет предварительного заполнения ячеек подходящими значениями;
пользователю не приходится редактировать каждый столбец.
Есть несколько вопросов, на которые обязательно нужно ответить при разработке
такого интерфейса. Что произойдет, если пользователь покинет новый элемент, не
завершив редактирование? Можно сделать так, чтобы элемент в допустимом формате
создавался с самого начала и мог существовать, даже если пользователь покинет его
в середине редактирования. При желании пользователь может вернуться и удалить
его. Если полей много, на помощь снова приходит шаблон Good Defaults (Хорошие
варианты по умолчанию).
В зависимости от реализации этот шаблон может напоминать шаблон Input Prompt
(Приглашение к вводу, глава 8). В обоих случаях сначала элемент содержит фик­
тивное значение, которое пользователь должен заменить на реальное, причем фиктивное значение формулируется в виде приглашения, говорящего пользователю, что
делать.
Примеры
Во встроенных шаблонах электронных таблиц Excel, таких как таблица подсчета расходов, показанная на рис. 5.40, строка для нового элемента четко выделяется за счет
синей подсветки. В примере из PowerPoint на рис. 5.41 новый слайд создается, когда
пользователь в режиме просмотра схемы вводит название в последней строке, однако
интерфейс не такой понятный. (Мне пришлось потратить время на то, чтобы найти
эту возможность. Я и не подозревала о ее существовании!)
Рис. 5.40. Новая запись в электронной таблице Excel
Шаблоны 249
Рис. 5.41. Новый слайд в слайд-шоу PowerPoint
В других библиотеках
http://quince.infragistics.com/Patterns/New-Item%20Row.aspx
http://www.welie.com/patterns/showPattern.php?patternID=list-entry-view
За дело!
Действия и команды
6
Эта глава посвящена «глаголам» интерфейса. Мы много говорили об общей структуре
и потоке, визуальной компоновке и «существительных», таких как окна, текст, ссылки
и статические элементы страниц. В главе 7 речь снова пойдет о «существительных»,
а глава 8 посвящена традиционным (и нескольким нетрадиционным) элементам
управления и виджетам: это те составляющие интерфейса, которые позволяют пользователям передавать информацию и выбирать состояние, но сами по себе не играют
особой роли.
А сейчас давайте поговорим о кнопках и о меню.
Звучит увлекательно, не так ли? Вероятно, нет. В интерфейсах настольных приложений меню используются с момента появления первого компьютера Macintosh,
а кнопки еще дольше. То, что мы называем кнопками, — это всего лишь визуальное
представление физического устройства, бывшего предшественником графических
пользовательских интерфейсов.
Да, это правда — у «глаголов» пользовательских интерфейсов долгая история,
и за время их существования было разработано множество передовых методов их
реализации. Стандартные руководства по соблюдению стилей для различных платформ, таких как Windows и Macintosh, обычно позволяют создать довольно сносные
интерфейсы. Большинство пользователей исходят из известных им общепринятых
правил использования меню или месторасположения кнопок, так что лучше следовать
этим правилам, даже если они кажутся вам слишком ограничивающими или просто
бессмысленными.
С известной всем функциональностью, такой как вырезание, копирование и вставка
элементов, также связана длинная история. Если бы ее можно было заново изобрести
сегодня, вероятно, она бы работала по-другому, но сейчас даже неопытные пользователи имеют четкое представление о том, как все «должно работать». То же самое
можно сказать о всплывающих меню (контекстных меню), к которым у пользователей двоякое отношение: одни ищут такие меню повсюду, а другие вообще никогда не
вспоминают о них. Перетаскивание (drag-and-drop) было придумано не так давно,
но, без всяких сомнений, оно должно работать так, как ожидают пользователи, иначе
иллюзия прямой манипуляции будет разрушена.
С учетом всего сказанного, у вас есть возможность реализовать в интерфейсе несколько интересных вещиц, чтобы сделать его менее скучным и более удобным в использовании. Вы должны делать правильные действия доступными, хорошо их обо-
За дело! Действия и команды 251
значать, обеспечивать их простое обнаружение и поддерживать последовательности
действий. Существует несколько творческих подходов к этому.
Для начала я перечислю общепринятые средства, благодаря которым пользователи
выполняют определенные действия в интерфейсе.
Кнопки
Кнопки помещаются прямо в интерфейс — от пользователя не требуется никаких действий, для того чтобы обнаружить их — и обычно семантически группируются (см. шаблон Button Groups (Группы кнопок)). Они большие, с легко
читаемыми метками, их функциональность очевидна, и их чрезвычайно просто
использовать даже самым неопытным пользователям. Однако они занимают в интерфейсе много места, в отличие от строк меню и всплывающих меню. На важных
страницах, таких как корпоративные веб-сайты или страницы представления новых
продуктов, призывы к действию обычно представляют собой одиночные большие,
хорошо заметные кнопки, идеально отвечающие своему предназначению — привлечь внимание и крикнуть: «Щелкни меня!»
Строки меню
Строки меню представляют собой стандартный элемент большинства настольных приложений. Обычно они содержат полный набор доступных в приложении
действий, организованный наиболее предсказуемым образом (например, меню File
(Файл), Edit (Правка), View (Вид)). Некоторые действия распространяются на все
приложение, другие только на индивидуально выбранные элементы. Полосы меню
часто дублируют функциональность, внедряемую в контекстные меню и панели
инструментов, так как они обладают свойством доступности (accessibility) — их
могут понимать программы чтения экрана, элементы меню могут включаться
комбинациями клавиш и т. д. (Одно только это свойство делает их незаменимыми в большинстве продуктов.) Полосы меню присутствуют и в некоторых вебприложениях, особенно в тех, которые ориентированы на выполнение задач, в программах рисования и прочих продуктах, имитирующих настольные приложения.
Всплывающие меню
Также известные под названием контекстных меню, всплывающие меню открываются щелчком правой кнопки мыши или схожим действием, производимым
на панелях или элементах. Обычно они содержат не все действия, доступные в интерфейсе, а те, которые чаще всего нужны в данном контексте. Всегда старайтесь
делать контекстные меню короткими.
Раскрывающиеся меню
Пользователи открывают такие меню, щелкая на соответствующих элементах
управления, таких как комбинированные поля. Однако использовать раскрывающиеся меню для действий обычно не рекомендуется, так как они чаще применяются
для выбора состояний, а не для выполнения действий.
Панели инструментов
Каноническая панель инструментов представляет собой длинную полосу пиктографических кнопок (кнопок с рисунками). На панели инструментов также
зачастую можно увидеть другие типы кнопок и элементов управления, например
текстовые поля или раскрывающиеся селекторы (см. шаблон Dropdown Chooser
(Раскрывающийся селектор) в главе 8). Пиктографические панели инструментов
252 Глава 6 • За дело! Действия и команды
лучше всего работают, когда для обозначенных действий можно выбрать очевидное
визуальное представление; если действия необходимо описывать словами, то лучше
прибегать к другим элементам управления, таким как комбинированные поля или
кнопки с текстовыми метками. Загадочные значки — это классический источник
непонимания и неудобства.
Ссылки
У ссылок нет границ. Благодаря Всемирной сети теперь любой цветной текст,
особенно синий, воспринимается как ссылка, которая должна реагировать на щелчок мыши. В пользовательском интерфейсе, который вы не хотите загромождать
привлекающими внимание кнопками, можно использовать простые текстовые
ссылки. Когда пользователь подводит указатель мыши к такому тексту, меняйте
вид указателя и подчеркивайте текст, для того чтобы показать, что после щелчка
на этом слове последует что-то полезное.
Панели действий
Панели действий фактически представляют собой меню, которые пользователям не нужно открывать, — они всегда отображаются в главном интерфейсе. Это
отличная замена панелям инструментов на случай, когда действия удобнее описывать словами, а не рисунками. См. шаблон Action Panel (Панель действий).
Инструменты, доступные при наведении указателя мыши
Для того чтобы добавить два или больше действий для каждого элемента интерфейса, но при этом не загромождать его множеством одинаковых кнопок, можно
сделать эти кнопки невидимыми в обычном режиме — они должны появляться
только при наведении на них указателя мыши. (Это очень удобно для интерфейсов, в которых пользователи постоянно используют мышь, но не подходит для
сенсорных экранов.) Подробнее об этом рассказывается в шаблоне Hover Tools
(Инструменты, доступные при наведении).
Помимо этого также есть невидимые действия, для которых вообще не существует никаких меток, объясняющих, что они делают. Пользователям необходимо
каким-либо образом узнавать (или догадываться) об их наличии, если только вы не
помещаете в интерфейс особые письменные инструкции, таким образом, невидимые
действия нисколько не помогают изучать интерфейс. Другими словами, пользователи
не могут просмотреть список невидимых действий, чтобы выяснить, какие из них им
доступны, тогда как кнопки, ссылки и меню позволяют исследовать пользовательский ­интерфейс и узнавать что-то новое. При тестировании удобства использования
я много раз наблюдала, как при встрече с новым продуктом пользователи методично
про­ходили по меню, элемент за элементом, просто чтобы разведать, что здесь можно
сделать.
Но, несмотря на это, практически всегда необходимо внедрять в интерфейс одно
или несколько невидимых действий. Например, пользователи зачастую ожидают, что
двойной щелчок на элементе даст какой-нибудь результат. Кроме того, клавиатура
(или ее эквивалент) иногда может быть единственным способом доступа для людей
с нарушениями зрения и людей, не имеющих возможности использовать мышь.
Опытные пользователи некоторых операционных систем и приложений предпочитают работать, вводя команды в программной оболочке и (или) нажимая различные
клавишные сочетания.
Проверка границ доступного 253
Двойной щелчок на элементе
В зависимости от контекста пользователи обычно рассматривают двойной щелчок как команду «открыть этот элемент» или «сделать то, что для этого элемента
является действием по умолчанию». Например, в графическом редакторе двойной
щелчок на элементе зачастую означает открытие таблицы свойств или специализированного редактора для данного элемента. Двойной щелчок на значке приложения
в большинстве операционных систем позволяет запустить это приложение. Двойной щелчок на фрагменте текста позволяет отредактировать этот текст.
Клавишные сочетания
Клавишные сочетания, например хорошо известное сохранение по нажатию
Ctrl+S, должны встраиваться в большинство настольных приложений для обеспечения доступности и удобства использования. Для основных платформ пользовательских интерфейсов, включая Windows, Mac и некоторые среды Linux, существуют
рекомендации по стилю, в которых описаны все стандартные клавишные сочетания, причем они очень похожи между собой. Помимо этого, в приложения обычно
встраиваются клавишные сочетания для доступа к пунктам меню и элементам
управления. Буквы, соответствующие этим клавишам, выделяются в названиях
подчеркиванием. Таким образом, пользователи могут активировать элементы
управления, не щелкая на них мышью и не переходя к ним клавишей Tab (обычно
для активации нужно нажать клавишу Alt, а затем клавишу с подчеркнутой буквой).
Перетаскивание
Перетаскивание элементов в интерфейсе чаще всего означает «переместить
это сюда» или «сделать это с этим». Другими словами, можно перетащить файл на
значок приложения, говоря «открыть этот файл в этом приложении», или перетащить файл из одного места в утилите поиска файлов в другое, переместив или
скопировав его. Фактический результат перетаскивания зависит от контекста, но
практически всегда позволяет выполнить одно из этих двух действий.
Ввод команд
Интерфейсы командной строки обычно допускают использование всех действий, встроенных в программную систему, в свободной форме, независимо от того,
об операционной системе или о приложении идет речь. Я называю такие действия
«невидимыми», так как в большинстве интерфейсов командной строки неопытному
пользователю невозможно с легкостью получить список доступных команд. Их не
очень просто обнаружить, но они становятся мощным оружием, если вы узнаете
об их существовании, — при помощи одной хорошо сконструированной команды
можно сделать очень многое. Следовательно, интерфейсы командной строки лучше
всего подходят для пользователей, имеющих веские основания для того, чтобы как
следует изучить программное обеспечение.
Проверка границ доступного
Некоторые типы приложений позволяют создавать нестандартные кнопки и элементы
управления. Визуальные редакторы, мультимедийные проигрыватели, приложения,
предназначенные для опытных пользователей, программы мгновенного обмена
254 Глава 6 • За дело! Действия и команды
с­ ообщениями, игры и все остальное, что должно развлекать и вызывать интерес, —
у всех этих приложений найдутся пользователи, достаточно любознательные для того,
чтобы выяснить, как использовать необычные, но хорошо продуманные элементы
интерфейса.
Где можно проявить большую фантазию? Среди элементов из первого списка
в предыдущем разделе, так как кнопки и меню проще использовать, чем клавишные
сочетания. Действия чаще всего принимают вид:
‰‰значков, реагирующих на щелчки мыши;
‰‰текста, реагирующего на щелчки мыши, но который не выглядит как кнопка;
‰‰объекта, реагирующего на наведение указателя мыши;
‰‰объекта, который выглядит так, как будто им можно манипулировать;
‰‰объекта, помещенного практически на все элементы, находящиеся на экране.
Как долго может продолжаться полет фантазии, чтобы в получившемся приложении все же мог разобраться обычный пользователь?
Возьмем пример из реальной жизни — приложение GarageBand, показанное на
рис. 6.1. В этом интерфейсе так много всего происходит. Некоторые объекты, очевидно,
являются кнопками, например элементы управления воспроизведением (прокрутка
вперед и назад, воспроизведение и т. д., а также стрелки на полосах прокрутки). Также
можно найти несколько ползунков и ручек.
Рис. 6.1. Приложение GarageBand
Но взгляните в самую правую часть окна, между красной вертикальной линией
и краем приложения с текстурой древесины. На ваш взгляд, какие элементы могут
реагировать на щелчки мыши? Почему? Если хотите, можете сжульничать и сразу
взглянуть на рис. 6.2 (а если вам уже известно приложение GarageBand, пожалуйста,
потерпите).
На рис. 6.2 показано, какие объекты в интерфейсе позволяют выполнять действия.
Вы определенно не могли заранее знать, что они все делают, поскольку в книге не
предусмотрены такие вещи, как всплывающие подсказки, изменение внешнего вида
при наведении указателя мыши или возможность поэкспериментировать. Но поняли
Проверка границ доступного 255
ли вы, что на некоторых из этих объектов можно щелкнуть
или манипулировать ими другими способами? Полагаю, да.
Как? Вероятно, вы знаете, что в подобных интерфейсах
прямой манипуляцией выполняется большое количество
действий, поэтому у вас есть основание предполагать, что
любой интересный визуальный элемент разрешает определенные действия. Вы можете знать, что ползунки, такие
как ползунок регулировки громкости внизу экрана, иногда
оснащаются кнопками быстрого перехода, находящимися
по краям, и могли распознать ползунок в этом интерфейсе,
основываясь на своем опыте знакомства с приложением
iTunes���������������������������������������������������
. Также вы могли догадаться, что крохотные квадратные значки обычно играют роль кнопок, зачастую связанных
с представлением; множество таких значков используется
в приложениях Word�������������������������������������
�����������������������������������������
и ����������������������������������
PowerPoint������������������������
. Вы могли видеть вертикальную линию, заканчивающуюся наверху перевернутым
треугольником, в некоторых других контекстах — иногда она
допускала перемещение, иногда нет. Но разве этот треугольРис. 6.2. Действия
ник не выглядит перемещаемым?
в приложении
GarageBand
Когда объект выглядит так, будто позволяет вам сделать
что-то, например щелкнуть по нему мышью или перетащить,
мы говорим, что он разрешает выполнять это действие. Традиционные кнопки с приподнятыми краями разрешают нажимать, бегунок на полосе ползунка разрешает
перетаскивать, текстовое поле разрешает вводить символы, синее подчеркнутое слово
разрешает щелкать по нему мышью. Все, что реагирует на указатель мыши, что-то
разрешает, хотя не всегда можно сразу же сказать, что именно!
На рис. 6.2 специально выделены разрешения в интерфейсе GarageBand. Это важное понятие. В программных интерфейсах у пользователя практически нет сенсорных
подсказок относительно того, за что можно ухватиться или чем можно манипулировать. В основном все подсказки приходятся на визуальные элементы, остальные — на
изменение курсора мыши. Используйте подсказки для того, чтобы правильно сообщать об имеющихся в интерфейсе разрешениях.
Вот несколько основных советов по дизайну:
‰‰если возможно, следуйте общепринятым правилам. Повторно используйте концепции и элементы управления пользовательских интерфейсов, уже известные
пользователям, как, например, ползунки регулировки громкости в данном примере;
‰‰используйте псевдотрехмерную графику — подсвечивание и тени, — для того чтобы
придать элементам интерфейса выпуклость;
‰‰когда указатель мыши оказывается над элементами, допускающими щелчок или
перетаскивание, меняйте форму указателя, например отображайте значок пальца
или руки;
‰‰используйте всплывающие подсказки или другое описание для того, чтобы сообщать пользователю, что могут делать объекты, находящиеся под указателем мыши.
Если подсказки вам не нужны, это здорово — у вас самодостаточный дизайн; но
большинство пользователей все равно ожидают увидеть подсказки.
256 Глава 6 • За дело! Действия и команды
Шаблоны
Первые шаблоны этой главы посвящены трем из множества способов представления
действий. Обнаружив, что вы машинально добавляете действия на полосу меню или
во всплывающее меню приложения, остановитесь на мгновение и подумайте, не стоит
ли вместо этого использовать группы кнопок или панели действий.
‰‰Button Groups (Группы кнопок).
‰‰Hover Tools (Инструменты, доступные при наведении).
‰‰Action Panel (Панель действий).
Шаблон Prominent «Done» Button (Заметная кнопка «Готово») позволяет улучшить самую важную кнопку на многих веб-страницах и диалоговых окнах. Smart Menu
Items (Умные элементы меню) — это техника для усовершенствования некоторых
действий, обычно помещаемых в меню; это очень универсальный шаблон, полезный
для множества типов меню (или кнопок и ссылок).
‰‰Prominent «Done» Button (Заметная кнопка «Готово»).
‰‰Smart Menu Items (Умные элементы меню).
Было бы здорово уметь завершать любые начатые пользователем действия мгновенно, но это невозможно — некоторые действия занимают много времени. Предварительный просмотр позволяет показать пользователю, что произойдет дальше,
еще до того, как он предпримет соответствующее действие. Индикатор хода процесса
представляет собой хорошо известную технику, сообщающую пользователю о том,
что происходит, пока выполняется какая-либо операция, а возможность отмены означает способность пользовательского интерфейса прерывать операцию по запросу
пользователя.
‰‰Preview (Предварительный просмотр).
‰‰Progress Indicator (Индикатор хода процесса).
‰‰Cancelability (Возможность отмены).
Три последних шаблона — Multi-Level Undo (Многоуровневая отмена), Command
History (История команд) и Macros (Макрос) — предназначены для обработки последовательностей действий. Эти три взаимосвязанных шаблона наиболее полезны
в сложных приложениях, особенно тех, которые пользователи глубоко изучают и часто используют. (Поэтому примеры для этих шаблонов взяты из такого сложного
­программного обеспечения, как Linux, Photoshop, Word и MATLAB.) Помните, что
эти шаблоны довольно сложно реализовать. Они требуют, чтобы приложение моделировало действия пользователя как дискретные, поддающиеся описанию и иногда
обратимые операции, а такую модель очень непросто встроить в существующую программную архитектуру. В описании шаблона Command (Команда) из книги «Design
Patterns» (издательство Addison-Wesley) вы найдете несколько хороших советов по
реализации.
‰‰Multi-Level Undo (Многоуровневая отмена).
‰‰Command History (История команд).
‰‰Macros (Макрос).
Шаблоны 257
Button Groups (Группы кнопок)
Рис. 6.3. Заголовок главного экрана Google Docs с четырьмя группами кнопок
Что
Представляйте связанные действия при помощи небольших наборов кнопок, схожих
между собой и выровненных по горизонтали или по вертикали. Если действий более
трех-четырех, то создавайте несколько наборов кнопок.
Использовать, когда…
В интерфейсе необходимо представить большое число действий. Все они должны
быть постоянно видны пользователю, однако их необходимо организовать так, чтобы
избежать хаоса и сложностей с поиском. Некоторые действия могут быть похожи, могут дополнять друг друга или оперировать над схожей семантикой — тогда их можно
объединять в группы от двух до пяти.
Группы кнопок можно использовать для операций, распространяющихся на все
приложение (таких как Open (Открыть) или Preferences (Настройки)); на отдельные
элементы (Save (Сохранить), Edit (Правка), Delete (Удалить)) или на группы элементов
с определенной функциональностью. Но не забывайте, что действия с разными диапазонами применения группировать не следует.
Почему
Группы кнопок помогают пользователю сразу понять, для чего предназначен интерфейс. Правильно составленные наборы кнопок хорошо выделяются на фоне сложного
контекста, а так как их прекрасно видно, они мгновенно сообщают пользователю о доступных ему действиях. Они говорят: «Вот те действия, с которыми тебе придется
работать в этом контексте».
Здесь также работают гештальт-принципы, о которых говорилось в главе 4. Близость элементов воспринимается как признак наличия между ними связи — кнопки
­находятся рядом друг с другом, значит, они выполняют схожие действия. Это можно
сказать и о визуальной схожести: если, например, сделать все кнопки одного размера, то они будут выглядеть так, как будто принадлежат одной группе. И наоборот,
­группы кнопок, разнесенные по разным частям интерфейса (или кнопки разного
размера), сообщают пользователю, что они отвечают за не связанные между собой
действия.
Правильный выбор размера и выравнивание группы кнопок помогают сфор­
мировать составную визуальную фигуру большего размера (это принцип замк­
нутости).
258 Глава 6 • За дело! Действия и команды
Как
Объедините кнопки в группу. Назовите их короткими и недвусмысленными глаголами
или глагольными конструкциями и не используйте жаргон, если только пользователь
не ожидает именно этого. Не смешивайте кнопки, воздействующие на разные объекты
или обладающие разными сферами действия. Отличающиеся друг от друга кнопки
помещайте в разные группы.
Все кнопки в группе должны быть похожи: одинаковые границы, цвет, высота
и/или­ ширина, стиль пиктограммы, динамические эффекты и т. д. Разместите их
в одном столбце или, если они не очень широкие, в одной строке.
(Однако если одна из кнопок в группе отвечает за «главное» действие, например
Submit (Передать данные) на веб-странице, то ее следует выделить особо. Главное действие — это то, которое будут выполнять большинство пользователей, или, по крайней
мере, то, которое вы ожидаете от них. Сделайте такую кнопку более заметной, чтобы
она выделялась на фоне остальных.)
Если действия всех кнопок распространяются на один объект или несколько объектов, то поместите группу кнопок слева или справа от этих объектов. Можно было
бы поместить их ниже, но у пользователей нижняя область сложных элементов пользовательского интерфейса, например списков из нескольких столбцов или деревьев,
часто превращается в «слепое пятно», так что они могут попросту не увидеть кнопки.
Для того чтобы кнопки были достаточно заметными, сделайте оставшуюся часть
интерфейса простой и лаконичной. Если вы разработали особый дизайн, который
лучше работает с кнопками, находящимися под объектами, то обязательно проведите тестирование удобства использования. Если кнопок достаточно много и для них
можно нарисовать осмысленные значки, то они также могут располагаться на панели
инструментов или на подобной полосе вверху страницы.
Используя группы кнопок, вы можете избежать нагромождения разномастных
кнопок и ссылок или длинного и тяжелого для восприятия списка действий, которые
на первый взгляд мало чем отличаются друг от друга. Благодаря этому шаблону возникает миниатюрная визуальная иерархия действий: пользователь моментально видит,
что связано между собой и что важно.
Примеры
Стандартные инструменты редакторов WYSIWYG (what you see is what you get — что
видишь, то и получаешь) обычно группируются по функциональности. Два примера
на рис. 6.4, взятые из приложений Word и Flash Builder, демонстрируют группировку
часто используемых инструментов, которая в значительной мере способствует узнаванию.
Как видно на рис. 6.5, в приложении iTunes группы кнопок можно найти в каждом
из четырех углов главного окна, плюс стандартные кнопки в строке заголовка (например, закрывающие и свертывающие окно). Когда пользователь бродит по подразделу
Music Store (Музыкальный магазин), то на третьей панели (не показанной здесь, но
схожей с веб-страницей) появляется еще больше действий, в основном представленных ссылками, а также кнопка для каждой песни в таблице.
Шаблоны 259
В этом интерфейсе не меньше тринадцати кнопок. При этом я не считаю четыре
кнопки полос прокрутки и три заголовка таблицы, реагирующих на щелчки мыши.
Здесь можно сделать много чего, но благодаря продуманной визуальной и семантической организации интерфейс никогда не выглядит перегруженным.
Рис. 6.4. Приложения Microsoft Word и Adobe Flash Builder
Рис. 6.5. Приложение iTunes
В других библиотеках
http://quince.infragistics.com/Patterns/Button%20Groups.aspx
260 Глава 6 • За дело! Действия и команды
Hover Tools (Инструменты, доступные при наведении)
Рис. 6.6. Веб-сайт Twitter
Что
Поместите кнопки и другие элементы управления, отвечающие за действия, рядом
с объектами, к которым они относятся. Однако не показывайте их до тех пор, пока
пользователь не подведет к этому месту указатель мыши.
Использовать, когда...
В приложении или на сайте необходимо показывать много действий, но в то же время
вы стремитесь сохранить чистый и лаконичный интерфейс. Тем не менее действия
должны быть представлены в интерфейсе, предпочтительно — рядом с объектами,
на которые они распространяются. Вы уже выделили для них пространство, но если
они постоянно находятся на виду, интерфейс получается слишком сложным и перегруженным.
Инструменты, доступные при наведении, часто используются в интерфейсах,
включающих столбцы или списки небольших элементов: фотографий, сообщений,
результатов поиска и т. п. Над каждым элементом списка пользователь может выполнять несколько действий.
Интерфейс не предназначен для сенсорного экрана, и вы уверены, что большинство пользователей будут работать с ним с помощью мыши. (Если вы разрабатываете
веб-страницу, то подумайте, не будет ли удобнее создать разные версии для устройств
с сенсорным экраном и обычных ноутбуков и настольных компьютеров.)
Почему
Инструменты, доступные при наведении, отображаются именно в тот момент, когда
в них возникает необходимость. Все остальное время они не видны, благодаря чему
интерфейс выглядит очень просто и не перенасыщен деталями. Эти инструменты
появляются в ответ на определенные действия пользователя, что привлекает к ним
дополнительное внимание.
Всплывающие (контекстные) меню, раскрывающиеся меню и полосы меню также
отвечают этим критериям, но в определенных типах интерфейсов их сложно обнаружить. Они лучше всего подходят для традиционных настольных приложений, а не
Шаблоны 261
для веб-интерфейсов (кстати, и для настольных приложений они также не всегда
являются наилучшим выбором). Инструменты, доступные при наведении, очень легко обнаружить, так как их отображение включается самым простым и естественным
действием — наведением указателя мыши на объект.
К сожалению, на устройствах с сенсорным экраном такие инструменты работают не
очень хорошо. Навести указатель мыши на объект очень легко, это привычное действие
человека, изучающего интерфейс. Однако на сенсорном экране это означает, что пользователю придется прикоснуться к объекту — этот жест подразумевает уже не ознакомление, а совершение действия. Он не помогает в изучении незнакомого интерфейса.
Как
Выделите достаточно пространства каждому объекту с инструментами, появляющимися при наведении, чтобы можно было удобно расположить все доступные инструменты. Скройте те из них, которые слишком загромождают интерфейс, — они будут
появляться только при наведении на эту область указателя мыши.
Интерфейс должен моментально реагировать на наведение указателя мыши. Не
используйте анимированный переход — сразу же показывайте инструменты и так же
быстро скрывайте их, как только пользователь уберет указатель. Кроме того, не увеличивайте область, где размещаются инструменты, и не меняйте компоновку страницы. Смысл заключается в том, чтобы сделать этот механизм как можно более легким
и быстрым, не усложняя для пользователя обращение к необходимым инструментам.
Если областью наведения является элемент списка, то можно подсветить его,
изменив фоновый цвет или выделив элемент с помощью рамки. Появление кнопок
инструментов привлечет внимание пользователя, но подсветка еще быстрее привлечет
его взгляд.
Инструменты, доступные при наведении, представляют собой удобную альтернативу раскрывающимся меню, всплывающим меню, панелям действий, спискам
с вкладышами и наборам кнопок, одинаковым для каждого элемента.
Примеры
На веб-сайте Grooveshark инструменты, появляющиеся при наведении, представляют
действия, которые пользователь может выполнить с каждым треком (рис. 6.7). В качестве альтернативы можно было бы показывать эти кнопки постоянно — интерфейс
стал бы более тяжелым, но не критично — или перенести их на верхнюю панель инструментов. В таком случае эти действия распространялись бы только на треки, выбранные в списке — это довольно неудобно для дизайнера, программиста и особенно
для пользователя, ведь ему пришлось бы задумываться над тем, как выбрать песню,
а затем выстроить пространственную и логическую связь между выбранными песнями
и инструментами наверху таблицы. В данном же случае инструменты всегда перед
глазами и очень понятны.
Преимущество инструментов, доступных при наведении, заключается в том, что
благодаря им интерфейс становится чище и лаконичнее. Плохо только, что пользователь не может сразу же увидеть все доступные действия. Страница результатов поиска Zillow, показанная на рис. 6.8, демонстрирует один из возможных компромиссов:
в обычном состоянии значки инструментов затенены, но они становятся более яркими
и заметными, когда пользователь подводит к этой области указатель мыши.
262 Глава 6 • За дело! Действия и команды
Рис. 6.7. Веб-сайт Grooveshark
Рис. 6.8. Веб-сайт Zillow
В некоторых реализациях данного шаблона используются полупрозрачные накладные элементы, содержащие кнопки или ползунки. Этот подход аналогичен шаблону
Dropdown Chooser (Раскрывающийся селектор) из главы 8; различие состоит лишь
в том, что в данном случае накладной элемент позволяет выполнить действие, а не
установить значение параметра. На рис. 6.9 показан ползунок регулировки громкости
в проигрывателе YouTube — он появляется при наведении указателя мыши.
Шаблоны 263
Рис. 6.9. Проигрыватель на веб-сайте YouTube
В других библиотеках
http://patternry.com/p=hover-reveal-tools/
http://www.flickr.com/photos/designingwebinterfaces/tags/hoverrevealtools/
Action Panel (Панель действий)
Рис. 6.10. Приложение iPhoto
Что
Вместо того чтобы использовать меню, представляйте большую группу схожих действий на панели пользовательского интерфейса, насыщенной элементами и всегда
находящейся на экране.
Использовать, когда…
Интерфейс содержит список элементов и набор предназначенных для них действий.
Действий слишком много, чтобы выводить отдельный набор для каждого элемента,
и слишком много, чтобы прятать их на панель, появляющуюся при наведении указателя мыши (шаблон Hover Tools (Инструменты, доступные при наведении)). Можно
поместить их в меню, но, вероятно, вы вообще не желаете создавать строку меню или
вам нужно сделать действия более очевидными. То же самое можно сказать и о всплывающих (контекстных) меню — они просто недостаточно очевидны и не видны на экране. Пользователи могут даже не знать, что всплывающие меню вообще существуют.
Также возможна ситуация, когда набор действий слишком сложен для меню. Меню
лучше всего подходят для отображения одноуровневых действий (так как каскадные
меню, где каждый последующий уровень раскрывается вправо, слишком сложны для
многих пользователей) в очень простом линейном порядке, где каждому элементу
отводится ровно одна строка. Если действия необходимо сгруппировать, но при этом
группы невозможно поместить в стандартные меню верхнего уровня — например, File
(Файл), Edit (Правка), View (Вид), Tools (Сервис) или Format (Формат), — можно попробовать прибегнуть к совершенно другому способу представления.
264 Глава 6 • За дело! Действия и команды
Этот шаблон может потребовать очень много экранного пространства, так что
обычно его не рекомендуется использовать на небольших устройствах.
Почему
Существуют три основные причины использования панелей действий вместо меню
или отдельного набора кнопок для каждого элемента: наглядность, доступное пространство и свобода представления.
Располагая действия прямо в главном пользовательском интерфейсе, а не пряча
их в меню, вы делаете их гораздо более заметными. В действительности панели действий также относятся к меню; просто они не скрыты в строках, раскрывающихся
или всплывающих меню. Пользователям ничего не нужно делать для того, чтобы
увидеть, что находится на панели действий, — все и так уже прямо перед глазами, так
что элементы интерфейса проще заметить. Это особенно удобно для пользователей,
не очень хорошо знакомых с традиционной моделью документа и меню.
Существует огромное количество способов структуризации объектов в интерфейсе:
списки, сетки и таблицы, иерархии и практически любая произвольная структура, какую
только можно придумать. Однако группы кнопок и традиционные меню дают возможность создать только список (и не очень длинный). Панели действий имеют свободный
формат — они дают вам столько же пространства для визуальной организации «глаголов», сколько обычно бывает доступно для существительных. Используйте его с умом!
Как
Добавление панели действий в пользовательский интерфейс
Зарезервируйте часть пространства в пользовательском интерфейсе для панели действий. Поместите ее снизу или сбоку от того, на что распространяются эти действия.
Как правило, это список, таблица или дерево элементов, поддерживающих выбор, но
это также может быть «центральная сцена» (см. шаблон Center Stage (Центральная
сцена) в главе 4). Помните, что очень важно близко расположить элементы. Если поместить панель действий слишком далеко от того, с чем она работает, то пользователи
могут не уловить связь между ними.
Панель может иметь вид простого прямоугольника, находящегося на странице.
Это может быть одна из нескольких панелей, расположенных каскадом, например
перемещаемая панель (см. шаблон Movable Panel (Перемещаемые панели) в главе 4),
«ящик» в Mac OS X или даже отдельное окно. Если панель закрываемая, то сделайте
так, чтобы ее было легко снова открыть, особенно если действия, о которых идет речь,
содержатся только на панели действий и не дублируются в меню!
Велики шансы, что вам понадобится показывать разные действия в зависимости
от ситуации. Содержимое панели действий может быть связано с состоянием приложения (например, открыт ли уже какой-нибудь документ?), элементами, выбранными
в каком-то списке, или с другими факторами. Пусть панель действий будет динамической. Изменения будут привлекать внимание пользователя, а это хорошо.
Структуризация действий
Теперь нужно решить, как структурировать действия, которые вы будете представлять.
Вот несколько средств реализации структуры:
Шаблоны 265
‰‰простые списки;
‰‰списки из нескольких столбцов;
‰‰списки по категориям, как в примере из iPhoto выше;
‰‰таблицы или сетки;
‰‰деревья;
‰‰любая комбинация перечисленного выше на одной панели.
Если вы решите разбить действия на категории, то я рекомендую сгруппировать
их в зависимости от выполняемой задачи. Подумайте, что пользователи будут делать
в этом интерфейсе. Все же попытайтесь представить эти группы линейно. Представьте
себе, что вы зачитываете список действий кому-то, кто не видит экран, — можно ли
перечислить их в логической последовательности, понятно обозначив начало и конец?
Именно так незрячий пользователь будет «слышать» интерфейс.
Обозначение действий
Для именования действий можно использовать текст, значки или и то и другое, в зависимости от того, что лучше соответствует природе действий. В действительности,
если в основном полагаться на значки, то в итоге получается… традиционная панель
инструментов! (Или палитра, если ваш пользовательский интерфейс предназначен
для приложения визуальной компоновки элементов.)
Текстовые метки на панели действий могут быть длиннее, чем текст в меню или на
кнопках. Они могут занимать даже несколько строк — на панели действий нет необходимости экономить на словах. Просто помните, что длинные описания лучше подходят
для новичков или тех, кто редко пользуется приложением, ведь им необходимо узнать
(или вспомнить), для чего предназначены те или иные действия. Расход дополнительного пространства на длинные метки может быть нежелательным в насыщенных
высокопроизводительных интерфейсах, в которых в основном работают опытные
пользователи. Если слов будет слишком много, даже взгляд новичка проскользнет по
ним не останавливаясь.
Примеры
Снимок экрана на рис. 6.10 взят из приложения iPhoto. В других диспетчерах изображений, таких как Picasa (рис. 6.11), используются аналогичные панели действий,
применяемых к каждому изображению. Сравните сложную панель Picasa с относительно простой панелью в iPhoto: разные варианты рассчитаны на разные аудитории
и потребности (iPhoto для новичков, Picasa для опытных пользователей).
На снимке экрана утилиты Поиск Windows��������������������������������������
���������������������������������������������
из Windows XP (рис. 6.12) показан каталог со списком изображений, к которому присоединена панель действий. В Microsoft
этот элемент интерфейса называется панелью задач. Панель состоит из закрываемых
субпанелей (см. шаблон Collapsible Panels (Свертываемые панели) в главе 4), на
каждой из которых располагается разумное количество схожих между собой действий.
Обратите внимание, что первые два раздела, Picture Tasks (Задачи для изображений)
и File and Folder Tasks (Задачи для файлов и папок) полностью ориентированы на задачи:
они сформулированы при помощи глаголов (View (Просмотреть), Order (Сортировать),
Print (Печатать) и Copy (Копировать)) и предвосхищают операции, которые пользова-
266 Глава 6 • За дело! Действия и команды
тели чаще всего выполняют в каталогах изображений. Однако третий раздел на этой
панели, Other Places (Другие места), представляет собой список объектов.
Рис. 6.11. Приложение Picasa
Рис. 6.12. Утилита Поиск Windows
Шаблоны 267
В других библиотеках
Другие веб-ресурсы часто называют этот шаблон панелью задач, как, например,
в библиотеке шаблонов Infragistics:
http://quince.infragistics.com/Patterns/Task%20Pane.aspx
Prominent «Done» Button (Заметная кнопка «Готово»)
Рис. 6.13. Приложение Songza
Что
Поместите кнопку, завершающую транзакцию, в конец визуального потока; сделайте
ее большой и заметной.
Использовать, когда…
Возникает необходимость поместить в интерфейс кнопку, аналогичную кнопке Done
(Готово), Submit (Отправить), OK или Continue (Продолжить), всегда используйте этот
шаблон. В целом следует создавать хорошо заметную кнопку для последнего шага
любой транзакции, например покупки в интернет-магазине, а также для фиксации
группы настроек.
Почему
Очевидный и понятный последний шаг дает пользователям чувство завершенности.
У них не остается сомнений, что транзакция будет выполнена, как только они щелкнут
на этой кнопке. Не оставляйте их мучиться сомнениями, все ли они сделали правильно, и стоит ли надеяться на результат.
В этом шаблоне говорится о том, что последний шаг всегда нужно делать очевидным. Для этого необходимо воспользоваться знаниями о компоновке страницы —
в главе 4 обсуждались визуальная иерархия, визуальный поток, группировка и выравнивание.
Как
Создайте кнопку, выглядящую как настоящая кнопка, а не ссылка; либо руководствуйтесь стандартами для вашей платформы, описывающими нажимающиеся кнопки, либо
268 Глава 6 • За дело! Действия и команды
используйте среднего размера рисунок кнопки с четко очерченными границами. Это
поможет кнопке выделиться на фоне страницы, и она не потеряется среди остальных
элементов.
Что касается названия кнопки, то следует отдавать предпочтение словам, а не
значкам. Когда речь идет о подобных действиях, текст понять проще, в частности,
потому, что большинство пользователей ищут кнопки с надписями Done (Готово)
или Submit (Отправить). Текст на кнопке может быть или глаголом, или короткой
глагольной фразой, описывающей в терминах пользователя, что произойдет далее;
метки Send (Отправить), Buy (Купить) или Change Record (Изменить запись) конкретнее, чем простое Done (Готово), поэтому в большинстве случаев более четко отражают
смысл.
Поместите кнопку туда, где пользователь без труда найдет ее. Проследите за потоком выполнения задачи на странице, форме или в диалоговом окне и поместите эту
кнопку прямо за последним шагом. Обычно выбирают нижнее и (или) правое поле
страницы. В макете страницы может быть предусмотрено стандартное место для
таких кнопок (см. шаблон Visual Framework (Визуальная схема) в главе 4), или же
местонахождение кнопки может диктоваться стандартами данной платформы; если
это так, то придерживайтесь стандартов.
В любом случае удостоверьтесь, что кнопка находится рядом с последним текстовым полем или элементом управления. Если она окажется слишком далеко, то пользователи не смогут найти ее сразу же по завершении работы и будут искать другие
подсказки относительно того, что делать дальше. В Интернете это может привести
к тому, что пользователи покинут страницу (и, вероятно, отменят покупку), даже не
понимая этого.
Пример
На рис. 6.14 показана типичная форма на веб-странице. Вероятно, вы видите интересующую нас кнопку, даже не читая метки, исключительно благодаря визуальному
дизайну:
‰‰синий цвет хорошо выделяется. Насыщенный цвет контрастирует с белым фоном,
но в то же время перекликается с синим цветом заголовков. (Белая или светлосерая кнопка с черной границей визуально слилась бы с формой);
‰‰рисунок, выбранный для кнопок, действительно выглядит как кнопка. Он имеет
закругленную форму или форму таблетки с очень легкой внешней тенью, благодаря
чему кнопки выглядят выпуклыми. Кроме того, кнопки большие;
‰‰обе кнопки расположены прямо под полями формы. Как поток выполнения задачи
(пользователь будет заполнять форму сверху вниз), так и визуальный поток приводят взгляд пользователя к кнопкам;
‰‰кнопки также выделяются за счет пустого пространства слева, справа и снизу.
В интерфейсах поиска авиарейсов на веб-сайтах JetBlue, Kayak и Southwest
(рис. 6.15) используются очень правильные кнопки. Они отвечают всем рекомендациям данного шаблона, и пользователь не может не заметить их. С другой стороны,
такая же кнопка на веб-сайте American Airlines теряется на фоне формы — она слишком маленькая, расположена слишком далеко от края формы, слишком сильно при-
Шаблоны 269
жата к границе формы и слишком похожа на остальные элементы, чтобы выделяться
на их фоне (рис. 6.16). Помимо этого, метка GO (Вперед!) не так хорошо описывает
конкретную задачу, стоящую перед пользователем, в отличие от Search (Поиск) и Find
flights (Найти рейсы).
Рис. 6.14. Веб-сайт OneHourCourses.com
Рис. 6.15. Веб-сайты JetBlue, Kayak и Southwest
270 Глава 6 • За дело! Действия и команды
Рис. 6.16. Веб-сайт American Airlines
В других библиотеках
В некоторых библиотеках шаблонов описаны очень похожие концепции, такие как
Primary Action (Основное действие) и Action Button (Кнопка действия). Люк Вроблевски в своей книге «Web Form Design» (издательство Rosenfeld Media) обсуждает
различие между главными и вторичными действиями в формах.
http://www.welie.com/patterns/showPattern.php?patternID=action-button
http://patternry.com/p=primary-secondary-actions/
http://quince.infragistics.com/Patterns/Primary%20Action.aspx
Smart Menu Items (Умные элементы меню)
Рис. 6.17. Приложение Mac Mail
Что
Динамически меняйте название элементов меню: они должны точно сообщать, что
произойдет, если их выбрать.
Шаблоны 271
Использовать, когда…
В пользовательском интерфейсе есть элементы меню, действующие на определенные
объекты, например команда Close (Закрыть), или элементы, поведение которых может
слегка меняться в зависимости от контекста, например команда Undo (Отменить).
Почему
Элементы меню, точно сообщающие, что произойдет, если их выбрать, облегчают восприятие интерфейса. Пользователю не приходится задумываться о том, какой объект
будет затронут этим действием, помимо этого, уменьшается вероятность ошибки —
например, пользователь не удалит по ошибке «Главу 8» вместо «Сноски 3». Таким
образом поощряется безопасное исследование.
Как
Каждый раз, когда пользователь меняет выделенный объект (или текущий документ,
последнюю отменяемую операцию и т. д.), немного модифицируйте действующие на
этот объект элементы меню, добавляя некоторые детали. Очевидно, что если никакой
объект не выделен, то такие элементы меню следует отключать, подчеркивая связь
между элементами меню и соответствующими объектами.
Кстати, этот шаблон также можно применять для меток кнопок, ссылок и всего
остального, что считается «глаголом» в контексте пользовательского интерфейса.
Но что же делать, если выделено несколько объектов? Пока на этот счет невозможно дать исчерпывающий ответ — в существующем программном обеспечении данный
шаблон в основном применяется к документам и операциям отмены, но можно, например, написать метку во множественном числе, скажем, Delete Selected Objects (Удалить
выделенные объекты).
Пример
На рис. 6.18 показан один из пунктов меню приложения Illustrator. В данном случае
пользователь последним применял фильтр Drop Shadow (Падающая тень). Меню помнит об этом, и первые два элемента меняются, позволяя, во-первых, снова применить
этот фильтр и, во-вторых, настроить фильтр перед тем, как повторно применять его
(пункт меню Drop Shadow… (Падающая тень) открывает диалоговое окно настройки
фильтра). Вероятно, пользователь применил уже так много фильтров, что ему было
бы удобно находить напоминание о том, какой использовался последним. А клавишные сочетания очень полезны для последовательного применения одного и того же
фильтра несколько раз!
Рис. 6.18. Меню программы Illustrator
272 Глава 6 • За дело! Действия и команды
Предыдущие два примера иллюстрируют полосы меню приложений, однако этот
шаблон также можно эффективно применять к инструментам, воздействующим на
отдельные элементы. На рис. 6.19 показано раскрывающееся меню в системе Gmail.
Элемент меню Add [имя человека] to Contacts list (Добавить [имя человека] в список
контактов) намного понятнее, чем безликая альтернатива, такая как Add sender to
Contacts list (Добавить отправителя в список контактов).
Рис. 6.19. Меню Gmail
Preview (Предварительный просмотр)
Рис. 6.20. Экран подготовки к печати в приложении PowerPoint
Шаблоны 273
Что
Дайте пользователю возможность заранее увидеть, как будет выглядеть результат его
действий.
Использовать, когда…
Пользователь собирается выполнить что-то «тяжеловесное»: открыть большой файл,
напечатать документ из 10 страниц, отправить форму, заполнение которой заняло
много времени, или подтвердить покупку в интернет-магазине. Ему необходима гарантия, что он делает это правильно. Ошибка может привести к дополнительной трате
времени или даже денег.
Также этот шаблон полезен в ситуациях, когда пользователь планирует выполнить
некоторое визуальное изменение с трудно предсказуемым результатом, например
наложить фильтр на фотографию. Он хочет заранее проверить, будет ли эффект соответствовать его ожиданиям.
Почему
Предварительный просмотр помогает предотвратить множество ошибок. Пользователь
мог сделать опечатку или неправильно понять что-то, предшествующее действию,
которое он собирается выполнить (например, положить не тот товар в корзину интернет-магазина). Показывая ему краткое текстовое или визуальное описание того, что
сейчас произойдет, вы даете ему шанс вернуться назад и исправить ошибки.
Предварительный просмотр также делает приложение более понятным. Если
пользователь никогда раньше не выполнял это действие или не знает, чем оно может
обернуться в данных обстоятельствах, предварительный просмотр объяснит это лучше любой документации, а пользователь получит нужные сведения в точности тогда
и там, где это требуется.
Как
Непосредственно перед тем, как пользователь совершит действие, покажите ему
всю необходимую информацию для того, чтобы он получил четкое представление
о последствиях. Если это предварительный просмотр страницы перед печатью, то
покажите, как она будет выглядеть на бумаге выбранного размера; если это операция
над изображением, то покажите крупным планом, как будет выглядеть изображение;
если это транзакция, то выведите на экран сводку обо всем, что системе известно
о данной транзакции. Показывайте то, что действительно важно — не больше и не
меньше.
Позвольте пользователю подтвердить действие прямо со страницы предварительного просмотра. Нет необходимости заставлять его закрывать предварительный просмотр или переходить куда-то еще.
Также предусмотрите способ отказа от действия. Если у пользователя есть шанс
исправить транзакцию, просто отредактировав ранее введенную информацию, то
предоставьте способ сделать это. Во многих мастерах и других линейных процессах
это всего лишь вопрос перехода на несколько шагов назад.
274 Глава 6 • За дело! Действия и команды
Примеры
Приложение Picasa позволяет применять к фотографиям разнообразные фильтры
(рис. 6.21). С каждым фильтром связан эскиз изображения — пользователь сразу видит, какой результат он получит в итоге! Иногда пользователю нужно поэкспериментировать с множеством схожих фильтров, чтобы добиться желаемого эффекта, и, пока
он пробует фильтры в библиотеке один за другим, ему необходима быстрая ответная
реакция приложения. Это классическая ситуация использования предварительного
просмотра. (Аналогичные механизмы предварительного просмотра реализованы
в Photoshop и других приложениях для обработки изображений.)
Рис. 6.21. Приложение Picasa
На сайтах, предлагающих в интерактивном режиме создать или настроить какой-то
продукт, предварительный просмотр необходим, для того чтобы пользователь знал,
какого результата ему уже удалось добиться. Хороший пример — индивидуальная
карточка сети кофеен Starbucks (рис. 6.22). Оказавшись на шаге проверки результата, пользователь может вернуться назад и поменять детали или перейти на этап
создания карты. Также у него есть возможность попросить помощи или отменить всю
­транзакцию.
В других библиотеках
http://quince.infragistics.com/Patterns/Preview.aspx
http://ui-patterns.com/patterns/LivePreview
Книга «Designing Web Interfaces» Билла Скотта и Терезы Нейл (издательство
O’Reilly, http://oreilly.com/catalog/9780596516253/) также рассказывает о возможностях
предварительного просмотра. (Живой просмотр (���������������������������������
live�����������������������������
����������������������������
preview���������������������
) отличается от предварительного просмотра тем, что изменения становятся видны сразу же, как только
пользователь вносит их.)
Шаблоны 275
Рис. 6.22. Приложение настройки индивидуальной карты на веб-сайте Starbucks
Progress Indicator (Индикатор хода выполнения процесса)
Рис. 6.23. Диалоговое окно копирования в Mac OS
Что
Показывайте пользователю, какая доля длительной операции уже выполнена.
Использовать, когда…
Длительная операция прерывает работу пользовательского интерфейса или выполняется в фоновом режиме более двух секунд.
Почему
Пользователи начинают беспокоиться, когда в пользовательском интерфейсе ничего не происходит. Даже если вы меняете указатель мыши на значок циферблата
или песочных часов (что необходимо делать в любом случае, если остальная часть
интерфейса заблокирована), все равно не нужно заставлять пользователя ждать неопределенное время.
276 Глава 6 • За дело! Действия и команды
Эксперименты показывают, что, когда пользователи видят индикатор хода выполнения процесса, они более терпеливо ожидают его окончания, даже если при
этом ­приходится ждать дольше, чем без вывода индикатора. Возможно, потому что
теперь они знают, что «система думает», а не зависла и не ожидает от них какого-либо
­действия.
Как
Показывайте анимированную индикацию того, какая часть процесса уже выполнена.
Либо вербально, либо графически (или обоими способами) сообщайте пользователю:
‰‰что происходит в данный момент;
‰‰какая доля операции уже завершена;
‰‰сколько времени остается ждать;
‰‰как остановить процесс.
Что касается оценки времени, то иногда допустимы ошибки, если приблизительное
значение постепенно корректируется. Однако иногда пользовательский интерфейс
просто не в состоянии сказать, сколько еще остается ждать. В этом случае все равно
показывайте анимированное изображение, не связанное с процентом выполнения.
Вспомните, как в браузерах во время загрузки страницы индикатор загрузки, представляющий собой небольшое изображение, непрерывно циклически меняется.
В большинстве инструментов для построения графических пользовательских
интерфейсов предусмотрено средство или диалоговое окно для реализации данного
шаблона. Однако помните о возможных проблемах с потоками: индикатор хода выполнения необходимо постоянно обновлять, пока сама операция свободно выполняется.
Если возможно, не блокируйте остальную часть пользовательского интерфейса. Пока
на экране находится индикатор хода выполнения процесса, разрешайте пользователям
работать с интерфейсом.
Если операцию, за ходом выполнения которой наблюдает пользователь, можно
отменить, то создайте кнопку отмены или аналогичное средство прямо на панели индикатора или рядом — именно там пользователь будет ее искать. Подробнее об этом
говорится в следующем шаблоне — Cancelability (Возможность отмены).
Пример
Когда на веб-сайте Flickr пользователь загружает несколько файлов изображений
(а эта операция может занять много времени), на экране появляется насыщенный
и богатый информацией индикатор хода выполнения (рис. 6.24). Он показывает ­размер каждого файла, процент его загрузки и текущее состояние. Кроме того,
внизу находится общий индикатор хода выполнения. Когда загрузка всех файлов
завер­шается, на экране появляется заметное и недвусмысленное сообщение, предлагающее перейти к следующей задаче в логической последовательности. (Еще одно
приятное дополнение — это сообщение о проценте выполнения задачи в заголовке
страницы.)
На загрузку интерфейса веб-сайта Grooveshark требуется некоторое время. Здесь
индикатор хода выполнения представляет собой стилизованное изображение акулымолота (торгового знака компании), которое заливается цветом слева направо по мере
загрузки кода страницы (рис. 6.25).
Шаблоны 277
Рис. 6.24. Индикатор хода загрузки нескольких файлов на веб-сайте Flickr
Рис. 6.25. Веб-сайт Grooveshark
278 Глава 6 • За дело! Действия и команды
В других библиотеках
http://quince.infragistics.com/Patterns/Progress%20Indicator.aspx
http://www.welie.com/patterns/showPattern.php?patternID=processing-page
В книге «Designing Web Interfaces» также рассказывается о шаблоне Progress
Indicator (Индикатор хода выполнения процесса).
Cancelability (Возможность отмены)
Рис. 6.26. Браузер Firefox
Что
Обеспечьте способ мгновенной отмены длительной операции без побочных эффектов.
Использовать, когда…
Длительная операция блокирует пользовательский интерфейс или выполняется
в фоновом режиме дольше двух секунд, например при печати файла, отправке запроса в базу данных или загрузке большого файла. Также используйте этот шаблон,
когда пользователь вовлечен в операцию, исключающую большинство других видов
взаимодействия с системой, например при работе с модальным диалоговым окном.
Почему
Пользователи могут изменять свои решения. После начала длительной операции
иногда возникает желание прервать ее, особенно если индикатор хода выполнения
говорит, что операция займет много времени. Пользователи могут вообще случайно
запускать какие-то операции. Возможность отмены определенно помогает предотвращать ошибки и устранять их последствия — у пользователя всегда есть возможность
прекратить процедуру, которая, как он уже знает, завершится ошибкой, например загрузку страницы с веб-сервера, который оказывается отключенным.
Пользователь комфортнее себя чувствует, изучая интерфейс и пробуя различные
функции, если у него есть уверенность, что любую операцию можно отменить. Это
способствует безопасному исследованию (см. главу 1), что, в свою очередь, делает
интерфейс проще и интереснее для освоения.
Как
Сначала выясните, не существует ли способа ускорить выполнение длительной операции, чтобы она казалась мгновенной. Не обязательно, чтобы операция действительно
завершалась быстро; если она кажется быстрой пользователю, этого достаточно.
В Интернете и в сетевых приложениях это может означать загрузку данных или кода
Шаблоны 279
заранее — отправку их клиенту еще до того, как он их потребует, — а также отправку
данных по частям с мгновенным отображением каждой части, как только она прибывает. Помните, что скорость чтения у пользователей ограничена. Время, затрачиваемое
на загрузку, можно использовать для того, чтобы позволить пользователю прочитать
данные на первой странице, затем на следующей и т. д.
Однако если операцию действительно необходимо отменить, то сделайте так: поместите кнопку отмены прямо в интерфейс рядом с индикатором хода выполнения
(который вы, конечно же, используете) или туда, где выводятся результаты операции.
Обозначьте ее словом Stop (Стоп) или Cancel (Отмена) и (или) поместите на кнопку
международный значок остановки — красный восьмиугольник, красный круг с белой
горизонтальной полосой или крестик.
Как только пользователь нажмет кнопку отмены, немедленно прерывайте операцию. Если промедлить секунду или две, то пользователь засомневается, действительно
ли отмена произошла (или ему покажется, что вместо того чтобы отменять операцию,
система решила дождаться ее завершения). Покажите пользователю, что отмена выполнена: например, остановите индикатор хода выполнения и выведите сообщение
об изменении состояния.
Несколько параллельных операций могут стать серьезной проблемой. Как пользователю отменить только одну из них, не затрагивая другие? Можно сообщать, что именно будет отменено при нажатии кнопки отмены, прямо в ее метке или во всплывающей
подсказке (схожую концепцию см. в шаблоне Smart Menu Items (Умные элементы
меню)). Если действия представлены в виде списка или набора панелей, то можно создать отдельную кнопку отмены для каждого из них, чтобы избежать двусмысленности.
Примеры
Диалоговое окно установки утилиты Adobe AIR, показанное на рис. 6.27, — это простой, минималистичный пример возможности отмены.
Рис. 6.27. Диалоговое окно установки Adobe AIR
Если запустить в операционной системе Mac OS несколько длительных операций
копирования файла, то отменить их можно будет по отдельности, хотя все они перечисляются в одном диалоговом окне (рис. 6.28). Это логично — операции копирования не зависят друг от друга, поэтому любую из них можно прервать, не затрагивая
остальные.
280 Глава 6 • За дело! Действия и команды
Рис. 6.28. Диалоговое окно копирования Mac OS, где перечислены четыре операции
Multi-Level Undo (Многоуровневая отмена)
Рис. 6.29. Приложение Photoshop
Что
Обеспечьте возможность с легкостью аннулировать последовательности действий,
выполненных пользователем.
Использовать, когда…
Вы создали высокоинтерактивный пользовательский интерфейс, более сложный, чем
система, предназначенная для простого перемещения по страницам или заполнения
форм. Сюда входят программы для чтения электронной почты и для работы с базами
данных, средства разработки, графическое программное обеспечение и среды программирования.
Почему
Возможность отменять длинные последовательности действий дает пользователям
ощущение безопасности при исследования интерфейса. Изучая содержимое интерфейса, они могут экспериментировать с ним, поскольку уверены, что не внесут
Шаблоны 281
необратимых изменений, даже если случайно сделают что-то не так. Это относится
к пользователям с любым уровнем мастерства, не только к новичкам1.
Как только пользователь достаточно хорошо узнает интерфейс, он может работать
в полной уверенности, что ошибки поправимы. Если его палец соскальзывает и он
случайно вызывает неправильный элемент меню, то никакой сложной и тяжелой процедуры восстановления не требуется; не нужно возвращаться к ранее сохраненным
файлам, закрывать и заново запускать приложение или идти к системному администратору с просьбой восстановить файл из архива. Это экономит время пользователя
и избавляет его от душевных страданий.
Многоуровневая отмена также позволяет опытным пользователям быстро и просто изучать различные пути выполнения одной задачи. Например, пользователь
может наложить последовательность фильтров на изображение, изучить результат,
чтобы понять, получилось ли то, что нужно, и затем снова вернуться в начальную
точку. После этого он может попробовать другую последовательность фильтров, при
желании сохранить ее и снова отменить результат. Это можно было бы сделать и без
многоуровневой отмены, но заняло бы больше времени (на закрытие и повторное открытие изображения). Когда пользователь захвачен творческим процессом, скорость
и простота использования очень важны для сохранения сосредоточенности. Подробнее
об этом рассказывается в главе 1, особенно в шаблонах Safe Exploration (Безопасное
исследование) и Incremental Construction (Пошаговое построение).
Как
Отменяемые операции
В программном обеспечении, для которого строится ваш пользовательский интерфейс,
необходимо, в первую очередь, определить строгую модель действия: как называется
каждое действие, с каким объектом связано и как отменяется. На основании этого
можно создавать интерфейс отмены.
Решите, какие операции должны быть отменяемыми. Для любого действия, меняющего файл, и иных процедур с результатом, сохраняемым навсегда, необходимо
предусмотреть возможность отмены, но это не обязательно для временных состояний
или состояний, связанных с просмотром. В частности, в большинстве приложений
ожидается, что следующие типы изменений будут отменяемыми:
‰‰ввод текста в документы или электронные таблицы;
‰‰транзакции в базах данных;
‰‰изменения в изображениях или на холстах для рисования;
‰‰изменение компоновки страницы: положение, размер, порядок следования или
группировка элементов в графических приложениях;
‰‰операции над файлами, такие как удаление и модификация;
‰‰создание, удаление или изменение порядка объектов, таких как электронные сообщения или столбцы электронной таблицы;
‰‰любые операции вырезания, копирования или вставки.
1
Алан Купер (Alan Cooper) и Роберт Рейманн (Robert Reimann) посвятили концепции отмены
целую главу в своей книге «About Face 2.0: The Essentials of Interaction Design» (издательство
Wiley).
282 Глава 6 • За дело! Действия и команды
Следующие типы изменений обычно не бывают отменяемыми. Подумайте: даже
если из лучших побуждений сделать их отменяемыми, это может привести лишь
к тому, что пользователей будет раздражать загроможденный ненужными действиями
стек отмены:
‰‰выделение текста или объекта;
‰‰навигация между окнами и страницами;
‰‰положение указателя мыши или текстового курсора;
‰‰положение полосы прокрутки;
‰‰местоположение или размер окна или панели;
‰‰изменения, сделанные в незафиксированном или модальном диалоговом окне.
Некоторые операции считаются пограничными. Например, иногда в приложениях
можно отменять действия по заполнению форм, а иногда нет. Однако если переход
по клавише Tab из одного поля, где были сделаны изменения, в другое, приводит
к фиксации изменения, то, вероятно, лучше сделать так, чтобы это изменение можно
было отменить.
Определенные типы операций вообще невозможно отменить. Однако чаще всего
пользователи без проблем понимают это, исходя из природы приложения. Неотменяемые операции включают в себя шаг приобретения при совершении транзакции
в электронном магазине, публикацию сообщения на форуме или в чате или отправку
электронной почты, как бы нам иногда ни хотелось отменить их!
В любом случае удостоверьтесь, что отменяемые операции понятны пользователю.
Всегда определяйте и именуйте эти операции, исходя из представления о них пользователя, а не компьютера. Например, ввод текста нужно отменять целыми блоками
слов, а не побуквенно.
Конструкция стека отмены
Как только выполняется очередная операция, она отправляется наверх стека, а каждая
отмена аннулирует операцию, находящуюся наверху, затем вторую сверху, третью
и т. д. Операция повтора (redo) работает точно так же, но в обратном порядке — по
направлению к верхушке стека.
Для того чтобы его было удобно использовать, глубина стека должна составлять,
как минимум, 10–12 элементов или даже больше, если это можно реализовать в приложении. Продолжительные наблюдения или тестирование удобства использования
скажут вам, каковы границы разумного. (Константайн (Larry Constantine) и Локвуд
(Lucy Lockwood) утверждают, что наличие более дюжины элементов в стеке отмены
излишне, так как «пользователи редко могут эффективно использовать большее
количество уровней отмены»1. Точка зрения опытных пользователей программ с широкими возможностями может отличаться от этого утверждения. Как всегда, лучше
руководствоваться мнением своих пользователей.)
1
См. публикацию Ларри Константайна (Larry Constantine) и Люси Локвуд (Lucy Lockwood)
«Instructive Interaction: Making Innovative Interfaces Self-Teaching» по адресу http://foruse.com/
articles/instructive.htm
Шаблоны 283
Представление
Наконец, определите, как представить стек отмены пользователю. В большинстве настольных приложений команды Undo/Redo (Отмена/Повтор) находятся в меню Edit
(Правка). Также команда Undo (Отмена) обычно связывается с клавишным сочетанием
Ctrl+Z. В тщательно продуманных приложениях «умные» элементы меню сообщают
пользователю, какая операция является следующей в стеке отмены.
Однако на снимке экрана в начале этого раздела (рис. 6.29) показан другой, визуальный способ представления стека отмены. В ����������������������������������
Photoshop�������������������������
на экране находится прокручиваемый список отменяемых операций, включающий, в том числе, операции,
которые уже были отменены (здесь также есть одна — этот пункт выделен серым
цветом). Пользователь может выбирать в стеке произвольную точку, в которую хотел
бы вернуться. Визуальная история команд может быть довольно полезной, хотя бы для
напоминания, что было только что сделано. Подробнее об этом говорится в шаблоне
Command History (История команд).
Пример
Более типичное представление многоуровневой отмены показано на рис. 6.30. В данном случае пользователь ввел какой-то текст, а затем вставил таблицу. Первая операция отмены удаляет таблицу. После этого очередной операцией отмены — следующим
действием в стеке отмены — становится удаление введенного текста, что и делается,
если еще раз вызывать эту операцию. В то же время у пользователя есть возможность
«отменить отмену» при помощи пункта меню Redo (Повторить). Если пользователь
находится на вершине стека (как на первом снимке экрана), то повтор невозможен,
а этот пункт меню заменяется действием Repeat (Выполнить повторно).
Рис. 6.30. Приложение Microsoft Word
Сбивает с толку? Еще бы. Большинству пользователей так никогда и не удается составить четкую ментальную картину применяемых здесь алгоритмов; большинство людей
вообще не знают, что такое стек, не говоря уж о том, как его можно использовать в сочетании с повторным выполнением и повторением действий. Вот почему «умные» элементы
меню просто необходимы, чтобы эти операции было удобно использовать. Они объясняют, что именно произойдет далее, снижая когнитивную нагрузку на пользователя.
В других библиотеках
http://patternry.com/p=undo/
http://quince.infragistics.com/Patterns/Undo.aspx
284 Глава 6 • За дело! Действия и команды
Command History (История команд)
Рис. 6.31. История команд в приложении MATLAB (в нижнем левом углу)
Что
По ходу того, как пользователь выполняет действия, фиксируйте в списке на экране,
какие операции были сделаны, с чем и когда.
Использовать, когда…
Пользователи выполняют длинные и сложные последовательности действий либо
в графическом интерфейсе, либо в командной строке. Большинство пользователей
достаточно опытны, но даже неопытным пользователям нужен эффективный интерфейс, помогающий выполнять длительную работу с повторяющимися операциями.
Этот шаблон будет очень уместен в графических редакторах и программных средах.
Почему
Иногда у пользователя возникает необходимость вспомнить или проверить, что он
уже сделал, работая с данным программным обеспечением. Например, ему может
понадобиться:
‰‰повторить действие или команду, которые он делал раньше, а теперь забыл;
‰‰вспомнить порядок, в котором были выполнены определенные действия;
‰‰повторить последовательность операций, выполненную для одного объекта, с дру-
гим объектом;
сохранить
журнал своих действий по причинам юридического характера или в ц剉
лях обеспечения безопасности;
‰‰преобразовать интерактивную последовательность команд в сценарий или макрос
(см. шаблон Macros (Макрос) в этой главе).
Компьютеры хорошо справляются с хранением точных журналов выполняемых
действий; у людей это получается хуже. Воспользуйтесь этим преимуществом.
Как
Храните постоянно обновляющийся список действий, выполняемых пользователем.
Если интерфейс управляется из командной строки, то это просто — нужно всего лишь
Шаблоны 285
записывать все, что вводится в командной строке. Если возможно, сохраняйте историю
команд между сеансами, чтобы пользователь мог всегда просмотреть, что было сделано
неделю назад или даже раньше.
Если речь идет о графическом интерфейсе или комбинации графического интерфейса и интерфейса командной строки, то задача немного усложняется. Найдите
краткий единообразный способ описания любых действий при помощи слов (хотя
ничто не мешает сделать это визуально). Удостоверьтесь, что действия определяются
с достаточным уровнем модульности: если одно действие применяется сразу к сем­
надцати объектам, то записывайте его как одно действие, а не как семнадцать.
Какие команды следует записывать в журнал, а какие нет? Подробное обсуждение
этого см. в шаблоне Multi-Level Undo (Многоуровневая отмена). Если команда отменяемая, то ее нужно фиксировать в истории.
Наконец, показывайте историю пользователю. Постоянное наличие истории на
экране в большинстве приложений не обязательно, так как в работе пользователя она
практически всегда играет вспомогательную роль. Списки команд — от более старых
к более новым — работают превосходно. При желании можно добавлять к каждой команде в истории временную метку. В MATLAB, как показано на рис. 6.31, дата и время
добавляются в историю в момент, когда запускается программа.
Примеры
В операционной системе Unix������������������������������������������������
����������������������������������������������������
и ее многочисленных вариациях используются программные оболочки, такие как tcsh и bash, которые записывают собственные истории
команд в файлы. Пользователь может вывести на экран содержимое такого файла
командой history, как показано на рис. 6.32. К истории также можно обратиться при
помощи различных конструкций командной строки, например !! (повторить последнюю команду), !3 (повторить команду, выполненную три команды назад) и Ctrl+P — это
клавишное сочетание можно последовательно нажимать, чтобы по одной выводить на
экран предыдущие команды.
Рис. 6.32. Командная оболочка Unix
Стек отмены в Photoshop, с которым вы уже встречались в шаблоне Multi-Level
Undo (Многоуровневая отмена), фактически является историей команд. Его можно
использовать для отмены действий, но это совсем не обязательно; можно просто
286 Глава 6 • За дело! Действия и команды
­ рокручивать и просматривать содержимое истории, проверяя свои действия. Значки
п
используются для идентификации различных классов действий, что необычно, но
удобно (рис. 6.33).
Рис. 6.33. Снова приложение Photoshop
Macros (Макрос)
Что
Макрос — это одно действие, включающее
в себя несколько других, более мелких действий. Пользователи создают макросы, составляя последовательности действий.
Использовать, когда…
Пользователям нужно повторять длинные
последовательности действий или команд.
Возможно, требуется циклически пройти по
списку файлов, изображений, записей базы
данных или других объектов, выполняя для
каждого из объектов одни и те же действия.
Вероятно, вы уже реализовали многоуровневую отмену или историю команд.
Рис. 6.34. Приложение Photoshop
Почему
Никому не хочется выполнять один и тот же набор повторяющихся интерактивных
задач снова, и снова, и снова! Это именно то, над чем должны работать компьютеры,
а не люди. В главе 1 описан шаблон пользовательского поведения под названием
Streamlined Repetition (Организованное повторение); макросы представляют собой
идеальный механизм для поддержки этого поведения.
Очевидно, что макросы помогают пользователям работать быстрее. Кроме того,
уменьшая число команд или движений, необходимых для выполнения задачи, они
также снижают вероятность опечаток, оплошностей или одинаковых ошибок.
Можно также вспомнить концепцию потока, о которой говорилось в первой главе. Если пользователь может сжать длинную последовательность действий в одну
Шаблоны 287
команду или клавишное сочетание, это очень способствует вхождению в состояние
рабочего потока: пользователь делает больше, прилагая меньше усилий и тратя меньше времени, и не отвлекается от основной цели, так как ему не нужно распылять свое
внимание на детали.
Как
Предоставьте пользователю способ записывать последовательности действий и с легкостью воспроизводить их в любой момент времени. Воспроизведение должно запускаться одной командой, нажатием одной клавиши или перетаскиванием объекта.
Определение макроса
У пользователя должна быть возможность присваивать макросам названия по своему выбору. Позвольте ему просматривать последовательности действий на случай,
если понадобится проверить или просто вспомнить, что они делают (как в шаблоне
Command History (История команд)). Сделайте так, чтобы можно было из одного
макроса ссылаться на другой и встраивать их друг в друга.
Пользователи будут работать с макросами в течение длительных периодов времени,
так что удостоверьтесь, что они надежно сохраняются — в файлах или базе данных.
Представляйте их в списке с возможностью поиска и сортировки или даже в списке,
разбитом на категории, в зависимости от требований пользователей.
Выполнение макроса
Для того чтобы не усложнять ситуацию, макрос можно просто воспроизводить в прямом смысле этого слова. Или же, если макросы работают с различными целевыми
объектами, нужно предусмотреть возможность параметризации (то есть вместо
определенного имени объекта использовать «заполнитель» или переменную). Также
макросы должны уметь воздействовать одновременно на несколько объектов.
Расположение макросов в интерфейсе (или элементов управления, предназначенных для их запуска) зависит от природы приложения, однако лучше показывать их
там же, где располагаются основные команды приложения. Они вполне достойны этого.
Возможность самостоятельно записывать последовательности и создавать новые
макросы на основе уже существующих дает пользователю потенциальную возможность изобретения совершенно нового языка или визуальной грамматики — грамматики, идеально приспособленной к его рабочей среде и привычкам. Это чрезвычайно
эффективное средство. Фактически это программ