Add to collection(s) Add to saved
  1. Инженерия
  2. Информатика
Uploaded by Vladimir Saul

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

advertisement 
ББК 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 (История команд)). Сделайте так, чтобы можно было из одного
макроса ссылаться на другой и встраивать их друг в друга.
Пользователи будут работать с макросами в течение длительных периодов времени,
так что удостоверьтесь, что они надежно сохраняются — в файлах или базе данных.
Представляйте их в списке с возможностью поиска и сортировки или даже в списке,
разбитом на категории, в зависимости от требований пользователей.
Выполнение макроса
Для того чтобы не усложнять ситуацию, макрос можно просто воспроизводить в прямом смысле этого слова. Или же, если макросы работают с различными целевыми
объектами, нужно предусмотреть возможность параметризации (то есть вместо
определенного имени объекта использовать «заполнитель» или переменную). Также
макросы должны уметь воздействовать одновременно на несколько объектов.
Расположение макросов в интерфейсе (или элементов управления, предназначенных для их запуска) зависит от природы приложения, однако лучше показывать их
там же, где располагаются основные команды приложения. Они вполне достойны этого.
Возможность самостоятельно записывать последовательности и создавать новые
макросы на основе уже существующих дает пользователю потенциальную возможность изобретения совершенно нового языка или визуальной грамматики — грамматики, идеально приспособленной к его рабочей среде и привычкам. Это чрезвычайно
эффективное средство. Фактически это программирование; но если пользователь не
считает себя программистом, то и не стоит называть его так, чтобы не отпугнуть («Я не
умею ничего программировать, у меня просто не получится сделать это!»).
Примеры
 ������������������������������������������������������������������������������
Microsoft���������������������������������������������������������������������
��������������������������������������������������������������������
Excel���������������������������������������������������������������
можно записывать макросы, присваивать им имена, сохранять вместе с документом и даже назначать им клавишные сочетания. Пользователь может по
своему выбору запускать их кнопкой на панели инструментов или при помощи элемента управления ActiveX, встроенного в документ (то есть их можно использовать
в качестве программ обратного вызова для кнопок или текстовых полей).
Макросы Excel, показанные на рис. 6.35 и 6.36, написаны на языке Visual Basic,
и пользователь при желании может редактировать их вручную. Вот здесь он превращается в программиста. Так как Visual Basic предоставляет доступ к огромному объему
288 Глава 6 • За дело! Действия и команды
универсальных функций, большинство из которых напрямую не связаны с операциями над электронными таблицами, макросы могут превратиться в серьезную угрозу
безопасности для всех приложений Office. Четко ограничивая доступную макросам
функциональность и способы их запуска (например, только щелкая на кнопках панели
инструментов), вы жертвуете потенциалом макросов во имя безопасности.
(Обратите внимание, что на момент написания этой главы не все версии Excel поддерживают макросы на языке Visual Basic.)
Рис. 6.35. Запись макроса в приложении Excel
Рис. 6.36. Макрос в Excel, написанный на языке Visual Basic
7
Отображение
сложных данных:
деревья, таблицы
и прочая информационная
графика
Информационная графика, включая карты, таблицы и диаграммы, передает знания
визуально, а не вербально. Качественно выполненная графика позволяет зрителям делать заключения при помощи собственных глаз и разума; она показывает, а не говорит.
Такая графика — мой любимый тип интерфейса. Однако неудобные инструменты
или неадекватный дизайн резко ограничивают возможные варианты применения,
и многие насыщенные информацией интерфейсы из-за этого работают далеко не так
успешно, как могли бы.
Шаблоны из этой главы помогут научиться наилучшим образом использовать
имеющиеся у вас инструменты, а также познакомят вас с некоторыми полезными
и интересными инновациями в визуальном дизайне. Идеи, описанные во вводном разделе этой главы, позволят вам понять, какие аспекты дизайна будут наиболее важными
в каждом конкретном интерфейсе.
Основы информационной графики
«Информационная графика» означает всего лишь визуальное представление данных
с целью передачи определенного знания пользователю. Я включаю сюда таблицы
и древовидные представления, так как, по существу, они являются визуальными, даже
несмотря на то, что состоят в основном из текста, а не из отрезков и прямоугольников.
Прочие известные типы статичной информационной графики — это карты, блоксхемы, гистограммы и чертежи реальных объектов.
Однако мы имеем дело с компьютерами, а не с бумагой. Благодаря интерактивности
практически любой хороший статический дизайн можно сделать еще лучше. Интерактивные средства позволяют пользователям скрывать и отображать информацию по
мере необходимости; с их помощью пользователь оказывается в «кресле водителя»
и может по своему усмотрению выбирать, как просматривать и изучать данные.
290 Глава 7 • Отображение сложных данных: деревья, таблицы
Даже у простого акта манипулирования и перестановки данных на интерактивном
экране есть своя ценность — пользователь становится участником открытия, а не
пассивным наблюдателем. Эта возможность может оказаться бесценной. Вероятно,
пользователю не удастся создать лучший в мире график или таблицу, но в процессе
манипулирования этим графиком или таблицей он окажется лицом к лицу с такими
аспектами данных, которые мог бы никогда не заметить на бумаге.
В конечном итоге цель работы с информационной графикой — изучение чего-либо.
Однако дизайнеры должны понимать, что именно пользователю требуется изучить.
Возможно, он ищет что-то определенное, например конкретную улицу на карте, и тогда
ему необходимо иметь возможность найти ее путем прямого поиска или путем фильтрации сторонней информации. «Общая картина» ему нужна только для того, чтобы
получить необходимые специфические данные. Возможности искать, фильтровать
и углубляться в детали критически важны при работе с данными.
С другой стороны, иногда пользователю требуется узнать что-то менее конкретное.
Он может смотреть на карту просто для того, чтобы получить представление о плане
города, а вовсе не искать определенный адрес. Или же он может быть ученым, создающим наглядную иллюстрацию биохимического процесса и пытающимся понять, как
тот работает. В этом случае важно общее представление; пользователю необходимо
видеть, как части соединяются, образуя целое. Он может увеличивать или уменьшать
масштаб представления, иногда углубляться в детали и сравнивать одно представление
данных с другим.
Хорошая интерактивная информационная графика дает пользователям ответы на
следующие вопросы:
‰‰Как организованы эти данные?
‰‰Какие связи существуют между данными?
‰‰Каким образом можно изучать эти данные?
‰‰Можно ли изменить порядок данных, чтобы взглянуть на них по-другому?
‰‰Как отсечь лишнее и увидеть только необходимое?
‰‰Каковы определенные значения данных?
Читая следующие разделы, помните, что термин «информационная графика» всеобъемлющ. Он включает в себя графики, графы, карты, таблицы, деревья, временные
шкалы и всевозможные виды диаграмм. Данные могут быть чрезвычайно объемными
и многоуровневыми или немногочисленными и сжатыми. Многие из представленных
ниже методик можно с успехом применять даже к таким типам графики, которые,
казалось бы, совершенно для этого не подходят.
Перед тем как переходить к описанию самих шаблонов, давайте подготовим почву,
обсудив некоторые из перечисленных выше вопросов.
Организационные модели: как организованы эти данные?
Первое, что пользователь видит при любой визуализации информации — это форма,
выбранная вами для представления данных. В идеальном случае внутренняя структура
данных сама предполагает нужную форму. Какие из следующих моделей (табл. 7.1)
наилучшим образом подходят для отображения ваших данных?
Основы информационной графики 291
Таблица 7.1. Распространенные модели организации информации
Модель
Схема
Наиболее распространенный вид графики
Линейная
Список или график одной переменной
Табличная
Электронная таблица, многоколоночный список, сортируемая таблица, круглая таблица,
график с несколькими осями Y или другие
многомерные графики
Иерархическая
Дерево, каскадный список, круглая таблица,
древовидная таблица, древовидная карта или
направленный граф
Сетевая
(или органическая)
Направленный граф, блок-схема или круглая
таблица
Географическая
(или пространственная)
Карта, план или график рассеяния
Текстовая
Облако слов, направленный граф
Другая
Разнообразные графики, например графики
в параллельных координатах или древовидные карты
Попробуйте применить эти модели к данным, которые планируете отображать.
Если подойдут две или больше, то оцените, какие аспекты данных подчеркивает каждая из них. Например, если данные могут быть и географическими, и табличными, то
отображение их исключительно в виде таблицы может заслонить их географическую
природу — если не создать также представление в виде карты, то пользователь упустит
из виду интересные особенности или связи в данных.
Подсознательные элементы визуализации: что с чем связано?
Организационная модель, которую вы выбираете, многое говорит пользователю
о форме данных. Часть этой информации воспринимается на подсознательном уровне;
люди распознают деревья, таблицы и карты и немедленно приходят к определенным
выводам относительно представленных в этих структурах данных, причем еще до того,
как начинают думать о них осознанно. Но это заслуга не только формы. Взгляд на отдельные элементы данных также работает на подсознательном уровне: пользователь
обычно ассоциирует друг с другом внешне похожие вещи.
Если вы прочитали четвертую главу, то вам уже известно о гештальт-принципах
(если же вы перепрыгнули через нее, то сейчас самое время вернуться и прочитать
введение к главе 4). Большинство из этих принципов, особенно сходство и непрерывность, работают и здесь. Я попробую поподробнее рассказать о том, как они работают.
292 Глава 7 • Отображение сложных данных: деревья, таблицы
Определенные визуальные элементы работают на подсознательном уровне: они
передают информацию еще до того, как пользователь намеренно обратит на них внимание. Посмотрите на рис. 7.1 и найдите серые объекты.
Полагаю, вам удалось сделать это довольно быстро. Теперь взгляните на рис. 7.2
и сделайте то же самое.
Рис. 7.1. Найдите серые объекты
Рис. 7.2. Еще раз
И снова вы справились с задачей быстро, не так ли? В действительности совершенно не важно, сколько на рисунке черных объектов; время, затрачиваемое на поиск серых, остается постоянным! Можно предположить, что оно должно находиться
в линейной зависимости от общего числа объектов — время порядка N, если говорить
в алгоритмических терминах, — но это не так. Цвет работает на примитивном когнитивном уровне. Всю тяжелую работу за вас выполняет система визуального восприятия, причем создается впечатление, что она функционирует в режиме «массового
параллелизма».
С другой стороны, визуально монотонный текст заставляет читать все значения
и думать о них. На рис. 7.3 та же задача, что и в примере с цветными объектами, показана на примере чисел. Как быстро вам удастся обнаружить числа, которые больше
единицы?
Рис. 7.3. Найдите значения больше единицы
Когда речь идет о подобных текстах, время поиска действительно линейно зависит
от числа элементов. Что, если в той же задаче с текстом увеличить размер нужных
цифр, как на рис. 7.4?
Совсем другое дело! Теперь время поиска снова стало постоянным. Ведь размер —
это еще один подсознательный элемент визуализации. Тот факт, что более крупные
числа выходят за правую границу ячейки, помогает вам найти их, так как выравнивание представляет собой дополнительный подсознательный элемент визуализации.
Основы информационной графики 293
Рис. 7.4. Еще раз
На рис. 7.5 показаны некоторые известные подсознательные элементы визуализации.
Рис. 7.5. Восемь подсознательных элементов визуализации
294 Глава 7 • Отображение сложных данных: деревья, таблицы
Эта концепция будет иметь серьезные последствия для текстовой информационной
графики, такой как таблица чисел, показанная на рис. 7.3. Если определенные данные
должны выделяться на фоне других, то нужно изменить их цвет, размер или другие
подсознательные элементы визуализации. В целом эти элементы можно применять
для установления различий между классами или измерениями данных любого типа
на любой информационной графике. Иногда это называется кодированием.
Когда необходимо вывести на графике многомерный набор данных, для кодирования всех этих измерений в одном статическом представлении можно использовать
несколько разных визуальных элементов. Рассмотрим точечную диаграмму на рис. 7.6.
Позиция точек определяется вдоль осей X и Y; цвет представляет собой третий подсознательный элемент визуализации. Форма маркеров могла бы стать четвертым
элементом, но в данном случае она лишь дублирует цвет. Это добавочное кодирование
помогает пользователям визуально разделять три группы данных.
Рис. 7.6. Кодирование с помощью трех подсознательных элементов визуализации
на точечной диаграмме
Такое кодирование в чем-то схоже с общей концепцией графического дизайна под
названием «многоуровневое представление». Когда вы смотрите на хорошо проработанную иллюстрацию любого типа, вы воспринимаете различные классы информации.
Подсознательные элементы, такие как цвет, заставляют некоторые из них выделяться,
но благодаря схожести вы видите связь между ними, как если бы каждый из них был
нанесен на прозрачную пленку, а пленки наложены на базовый рисунок. Это чрезвычайно мощный способ сегментирования данных — каждый слой проще всей иллюстрации в целом, и зритель может исследовать эти слои по очереди, но в то же время
сохраняются и подчеркиваются взаимоотношения между частями целого.
Основы информационной графики 295
Навигация и просмотр: как изучать эти данные?
Первый этап исследования интерактивного визуального представления данных может
происходить как произвольный просмотр — пользователь просто пытается понять, что
здесь изображено. Он пробует навигацию, чтобы отыскать необходимую информацию.
Для обнаружения нужных данных также можно использовать фильтрацию и поиск,
но навигация по виртуальному пространству набора данных зачастую предпочтительнее. При этом включается пространственная память (см. шаблон Spatial Memory
(Проспективная память) в главе 1), и пользователь может видеть интересующие его
данные в контексте всей имеющейся информации.
В сфере визуализации информации есть одно хорошо известное правило, которое
звучит как «фокус плюс контекст». Хорошая визуализация должна позволять пользователю сфокусироваться на интересующей его точке, одновременно показывая
достаточно материала вокруг нее, чтобы он понимал, где именно эта точка находится
на общем графике.
Вот несколько распространенных техник навигации и просмотра.
Прокрутка и панорамирование
Если представление данных не помещается целиком на экране, то его можно
показать в окне с функцией прокрутки, предоставив пользователю простой и знакомый доступ к частям, оказавшимся за пределами экрана. Полосы прокрутки
привычны, их легко использовать. Однако некоторые представления оказываются
слишком большими, или их размер не детерминирован (что делает прокрутку неточной), или же за пределами видимой части остаются данные, которые необходимо получать или пересчитывать (из-за чего прокручивание замедляется). В этих
случаях вместо полос прокрутки попробуйте создать кнопки, которые пользователь
будет нажимать для вывода очередного экрана данных. В других приложениях
применяется панорамирование (���������������������������������������������
panning��������������������������������������
), когда курсор «захватывает» информационную иллюстрацию и перетаскивает ее до тех пор, пока не будет найдена точка
интереса, как в Google Maps.
Эти техники подходят для множества различных ситуаций, но в их основе ле­
жит одна и та же идея: интерактивно перемещать видимую часть иллюстрации.
Иногда не потеряться пользователю помогает шаблон Overview Plus Detail (Обзор
и детали). Небольшое изображение всей картинки целиком в углу экрана содержит
прямоугольный индикатор над тем местом, которое в данный момент отображается в подробностях; помимо полос прокрутки или других средств перемещения
пользователь может также перетаскивать этот прямоугольник.
Масштабирование
Масштабирование — это изменение масштаба просматриваемой части изображения, тогда как при прокрутке меняется его местоположение. Чтобы отобразить
насыщенную данными карту или диаграмму, дайте пользователю возможность
приблизить интересующие его точки. Это означает, что нет необходимости втискивать все имеющиеся подробности в полное представление; если меток очень много
или если на иллюстрации есть очень мелкие детали (в частности, на картах), это
все равно невозможно. По мере того как пользователь увеличивает (приближает)
изображение и появляется дополнительное пространство, эти детали будут возникать на экране.
296 Глава 7 • Отображение сложных данных: деревья, таблицы
Обычно масштабирование осуществляется при помощи щелчков мыши или
нажатий кнопок, причем вся зона просмотра увеличивается или уменьшается
единообразно. Однако это не единственный способ масштабирования. В некоторых
приложениях создаются нелинейные искажения информационной иллюстрации по
мере того, как пользователь помещает поверх нее указатель мыши: увеличивается
только то, что находится прямо под указателем, а то, что находится достаточно
далеко, не меняется. Подробнее об этом говорится в шаблоне Local Zooming (Локальное масштабирование).
Открывание и закрывание интересующих данных
В древовидных представлениях пользователям обычно разрешается произвольно открывать и закрывать родительские элементы, чтобы исследовать их содержимое. Некоторые иерархические диаграммы и графы также позволяют открывать
и закрывать фрагменты диаграмм «на месте», не открывая новое окно и не переходя
на другой экран. Благодаря этому у пользователя появляется возможность с легкостью изучать содержимое или взаимоотношения между предками и потомками, не
покидая рабочего окна. В шаблоне Cascading Lists (Каскадные списки) из пятой
главы описан еще один эффективный способ исследования иерархии; он работает
исключительно за счет открывания и закрывания элементов одним щелчком мыши.
Погружение
Определенные типы информационной графики представляют только «верхний уровень» информации. Пользователь может щелкнуть на точке карты, чтобы
просмотреть сведения о городе, или щелкнуть на ключевой точке диаграммы,
чтобы увидеть диаграмму следующего уровня. Для такого «погружения» можно
использовать то же самое окно или отдельную панель в том же окне, либо каждый
раз открывать новое окно. Данная техника напоминает открывание и закрывание
интересующих данных, за исключением того, что просмотр происходит независимо
от изображения и не интегрируется в него.
Если вы снабжаете интерактивную информационную иллюстрацию поиском, свяжите его результаты с той из перечисленных ранее техник, которая будет задействована.
Другими словами, когда пользователь ищет на карте город Сидней, показывайте, как
карта масштабируется или панорамируется, выводя на экран эту точку. Таким образом,
вы дадите пользователю преимущества пространственной памяти и знания контекста.
Сортировка и перестановка: можно ли изменить порядок данных,
чтобы увидеть их по-другому?
Иногда простое изменение порядка представления данных может выявить их неожиданные взаимосвязи. Посмотрите на следующий график, взятый из диаграмм
смертности Национального института рака (рис. 7.7). Здесь показано число смертей
от рака легких в штате Техас. В алфавитном порядке выведены основные муниципальные районы Техаса — вполне резонный порядок сортировки по умолчанию, если
вам необходимо найти определенные города, но в таком виде, как они отображаются
сейчас, эти данные не побуждают зрителя задаться вопросами. Например, совершенно
не очевидно, почему у городов Абилин (Abilene), Элис (Alice), Амарилло (Amarillo)
и Остин (Austin) схожие показатели — может, это просто случайность.
Основы информационной графики 297
Рис. 7.7. Сведения о смертности от рака по городам, сортировка по алфавиту
Однако это веб-приложение позволяет изменить порядок представления данных,
отсортировав их по убыванию показателей, как на рис. 7.8. Неожиданно график становится намного интереснее. На первом месте оказывается Галвестон (Galveston) —
почему, если его сосед Хьюстон (Houston) намного дальше на этой шкале? Что такого
особенного в Галвестоне? (Конечно же, для того чтобы задавать такие вопросы, необходимо немного ознакомиться с географией Техаса, но вы понимаете, о чем я.) Аналогично, в чем причина различия между соседями Далласом (Dallas) и Форт-Уортом
(Fort Worth)? И очевидно, что южные города на границе с Мексикой — Эль-Пасо
(El Paso), Браунсвилл (Brownsville) и Ларедо (Laredo) — отличаются минимальными
показателями смертности от рака легких по сравнению со всеми остальными районами Техаса. Из-за чего? На эти вопросы невозможно ответить, имея лишь такой набор
данных, но, по крайней мере, он побуждает их задавать.
Когда люди могут взаимодействовать с графическим представлением данных, у них
больше шансов сделать выводы на основе информационных иллюстраций. Сортировка и изменение порядка позволяют помещать рядом разные данные, что помогает
проводить различные сравнения — намного проще оценить соседние данные, чем те,
что находятся на противоположных концах изображения. А пользователи обычно
концентрируют внимание на крайних точках градаций, как я продемонстрировала
в этом примере.
298 Глава 7 • Отображение сложных данных: деревья, таблицы
Рис. 7.8. Тот же график, но данные упорядочены по убыванию
Как еще можно использовать эту концепцию? В шаблоне Sortable Table (Сортируемая таблица) говорится об одном очевидном способе: когда в таблице много столбцов,
пользователи могут захотеть отсортировать строки по определенному столбцу. Этот
шаблон встречается очень часто. (Многие реализации таблиц также допускают перестановку самих столбцов путем перетаскивания.) В деревьях можно менять местами
дочерние узлы. На диаграммах и связных графах можно реализовать пространственное
перемещение элементов с сохранением связей между ними. Используйте свое воображение!
Обратите внимание на эти типы сортировки и перестановки:
‰‰в алфавитном порядке;
‰‰численно;
‰‰по дате или времени;
‰‰по физическому местоположению;
‰‰по категории или метке;
‰‰по популярности — часто используемые или редко используемые;
‰‰сортировка по предпочтениям пользователя;
‰‰абсолютно случайная (никогда не знаешь, что увидишь дальше).
Простейший пример см. на рис. 7.9. Гистограммы, в которых каждый столбец объединяет несколько значений данных («многоуровневые» гистограммы), могут также
допускать перестановку элементов — сегменты столбцов, находящиеся ближе всего
к основанию, проще оценивать и сравнивать, поэтому можно разрешить пользователям
самостоятельно определять, какая переменная должна находиться внизу.
Основы информационной графики 299
На первый взгляд кажется, что переменная, выделенная в примере штриховкой
цветом, имеет одинаковую величину во всех столбцах. Отличаются ли ее размеры на
самом деле и насколько? Какие из заштрихованных столбцов самые высокие? Действительно, это невозможно определить точно, если не переместить заштрихованные
данные к основанию — при такой трансформации все заштрихованные прямоугольники выравниваются по нижнему краю. Теперь визуальное сравнение выполнить очень
просто: самыми высокими оказались столбцы 6 и 12, а разница в высоте приблизительно соответствует общей высоте столбцов.
Рис. 7.9. Перестановка элементов в многоуровневой гистограмме
Поиск и фильтрация: покажите только то, что мне нужно
Иногда не нужно видеть на экране весь набор данных одновременно. Например, вы
начинаете со всех имеющихся данных и затем сужаете набор до необходимой подгруппы — это фильтрация. Можно также отобрать часть данных путем поиска или
при помощи запросов. Большинство пользователей даже не видят разницы между
фильтрацией и запросом (хотя, скажем, с точки зрения базы данных между ними
огромная разница). Какой бы термин вы ни использовали, намерение пользователя
остается одним и тем же: сконцентрироваться исключительно на интересующем его
фрагменте данных, избавившись от всего остального.
Самые простые техники фильтрации и запроса позволяют пользователям самостоятельно выбирать, какие аспекты данных нужно просмотреть. Флажки и другие
элементы, управляемые одним щелчком, включают и отключают отображение различных фрагментов интерактивной графики. В таблице можно вывести часть столбцов,
оставив другие скрытыми, в зависимости от выбора пользователя; на карте можно
отобразить только выбранные пользователем интересные места (например, рестораны). Логическим продолжением этих несложных элементов управления фильтрацией
является шаблон Dynamic Queries (Динамические запросы), обладающий богатыми
интерактивными возможностями.
Иногда бывает достаточно выделить на экране некоторую выборку данных, но
не скрывать и не удалять остальные. Так пользователь будет видеть этот поднабор
в контексте общей информации. Можно интерактивно выделять данные при помощи простых элементов управления, как говорилось ранее. В шаблоне Data Brushing
(Окрашивание данных) описан вариант, когда одни и те же данные подсвечиваются
на нескольких информационных иллюстрациях одновременно.
Посмотрите на рис. 7.10. Это интерактивная карта лыжных трасс способна отображать четыре категории трасс, обозначенные при помощи разных символов, а также
такие особенности, как подъемники и технические помещения. Когда все одновремен-
300 Глава 7 • Отображение сложных данных: деревья, таблицы
но включено, карта так забивается данными, что прочитать полезную информацию
практически невозможно. Однако щелкая на символах трасс, пользователь может
включать и выключать различные уровни данных. На первом снимке экрана показано,
как карта выглядит, когда трассы не выделены, на втором выделение трасс включено.
Рис. 7.10. Интерактивная карта лыжных трасс
В зависимости от типа изображения механизмы поиска могут варьироваться в довольно широком диапазоне. Конечно же, в таблице или дереве необходим текстовый
поиск; карта должна поддерживать поиск по адресу и по другим параметрам физического местоположения; числовые диаграммы и графики могут позволять пользователям искать определенные значения данных или диапазоны значений. Что именно
будет интересовать ваших пользователей при поиске?
После завершения поиска и получения результатов интерфейс можно изменить так,
чтобы результирующие данные отображались в контексте — прямо на изображении.
Например, прокрутите таблицу или карту так, чтобы найденный элемент оказался
прямо в центре экрана. Когда пользователь видит результаты в контексте остальных
данных, это помогает ему лучше понять найденную информацию. Шаблон Jump to
Item (Прыжок к элементу) представляет собой распространенный вариант поиска
и прокручивания за один шаг.
Лучшие интерфейсы фильтрации и запроса характеризуются следующими параметрами.
Высокая интерактивность
Они с максимальной скоростью реагируют на выполняемые пользователем
поиск и фильтрацию. Однако интерфейс не должен каким-то сложным образом
реагировать на каждое нажатие клавиши, если это значительно замедляет скорость
ввода пользователем текста.
Повторяемость
Интерфейсы позволяют пользователю уточнять поиск, запрос или фильтр до тех
пор, пока не будет получен желаемый результат. Также такие интерфейсы позволяют
комбинировать операции: пользователь выполняет поиск, получает полный экран
результатов, а затем отфильтровывает их, чтобы оставить только самое нужное.
Основы информационной графики 301
Зависимость от контекста
Они отображают результаты поиска в контексте близких по смыслу данных, чтобы пользователю было проще понять их место в общем пространстве данных. Это
также можно сказать о других типах поиска: лучшие механизмы текстового поиска
отображают ключевое слово с частью предложения, которому оно принадлежит.
Сложность
Они не просто включают или выключают отображение полного набора данных,
а разрешают пользователю выбирать сложные сочетания условий вывода информации. Например, способно ли представление показать все элементы, для которых
выполняются условия X, Y и Z, не выполняются условия A и B, и во временном
диапазоне от M до N? Возможность комплексной выборки помогает проверять
гипотезы относительно данных и исследовать информацию различными творческими путями.
Фактические данные: как узнать их конкретные значения?
Несколько распространенных техник помогают зрителю получить на общем изображении конкретные значения. Изучите свою аудиторию: если пользователи заинтересованы исключительно в количественном представлении данных, то нет никакой
необходимости тратить время и место на экране, помечая каждую деталь. Однако
обычно все же необходимо показать несколько фактических значений или вывести
определенный текст.
Так как во всех этих методиках используется текст, не забывайте о принципах графического дизайна, позволяющих создавать привлекательный текст: хорошо читаемые
шрифты подходящего размера (не слишком большого и не слишком маленького),
правильное визуальное разделение независимых элементов текста, выравнивание
связанных элементов, отсутствие тяжелых границ и рамок вокруг блоков текста, по
возможности максимально четкое и понятное изображение данных.
Метки
Очень часто в информационной графике метки наносятся прямо на изображение, например названия городов на карте. Метки также могут объяснять значения
символов на точечной диаграмме, столбцы на гистограмме и прочие элементы,
сведения о которых пользователю обычно приходится искать вдоль осей или в легенде. Метки проще в реализации и использовании. Они точно и недву­смысленно
сообщают значения данных (при условии правильного размещения) и располагаются прямо в точках интереса или рядом с ними — пользователю не нужно постоянно переводить взгляд с данных на легенду и обратно. Недостатком их является
то, что чрезмерное количество меток загромождает изображение, так что будьте
аккуратны.
Легенды
Когда цвет, фактура, стиль линии, символ или размер используется в информационной графике для изображения значений (или категорий, или диапазонов
значений), легенда сообщает пользователю, что есть что. Легенда должна располагаться на той же странице так, чтобы пользователю не нужно было переводить
взгляд между данными и легендой на слишком большое расстояние.
302 Глава 7 • Отображение сложных данных: деревья, таблицы
Оси, линейки, сетки и временные шкалы
Когда суть данных задается их местоположением, как на графиках и картах (но
не на большинстве диаграмм), оси, линейки и так далее показывают пользователю,
какому точному значению соответствует данное местоположение. Все перечисленные элементы — это линии или кривые, вдоль которых размечены эталонные
величины. Пользователю приходится рисовать воображаемую линию от интересующей его точки к оси и, возможно, интерполировать, чтобы найти правильное
значение. В этой ситуации нагрузка на пользователя немного больше, чем когда
точки обозначаются прямо на иллюстрации. Однако метки загромождают графику
с высокой плотностью данных, а многим пользователям вовсе не нужны точные
значения — они хотят всего лишь получить общее представление об имеющихся
данных. В этом случае лучше использовать оси.
Всплывающие данные
В этой главе вы найдете шаблон Datatips (Всплывающие данные). Всплывающие данные, представляющие собой всплывающую подсказку, содержащую
значения данных для точки, над которой находится указатель мыши, обладают
преимуществом физической близости, как метки, но не загромождают графику.
Однако они работают только на интерактивной информационной графике.
Прожектор на данные
Как и в шаблоне Datatips (Всплывающие данные), прожектор подсвечивает
данные, когда пользователь подводит к точке интереса указатель мыши. Однако на
экране появляется не значение в определенной точке, а «срез» данных в контексте
всего информационного представления. Часто остальная информация затемняется
для лучшего выделения интересующих сведений. Подробнее об этом рассказывается в описании шаблона Data Spotlight (Прожектор на данные).
Окрашивание данных
Техника, называемая окрашивание данных (data brushing), позволяет пользователю
сделать выборку данных и увидеть, как эта выборка отображается в другом контексте. Обычно эта техника применяется, когда вы работаете с двумя или несколькими
представлениями; например, при выборе изолированной группы точек на точечной
диаграмме эти точки данных подсвечиваются в таблице, где выводятся те же значения.
Подробнее об этом рассказывается в разделе, посвященном шаблону Data Brushing
(Окрашивание данных) в этой главе.
Шаблоны
Так как в этой книге речь идет об интерактивном программном обеспечении, в большинстве шаблонов рассказывается о способах взаимодействия с данными: о перемещении по данным, о сортировке, выделении, вставке и изменении элементов, о поиске конкретных значений или наборов значений. Лишь некоторые из них предназначены для
статической графики: дизайнерам информационной графики давно известны шаблоны
Multi-Y Graph (График с несколькими осями Y) и Small Multiples (Небольшие образцы), но эти шаблоны также прекрасно работают в мире программного обеспечения.
Но не забывайте о шаблонах из других глав книги. Вспомните шаблон Alternative
Views (Альтернативные представления) из главы 2, помогающий структурировать
Шаблоны 303
интерактивную графику. В главе 3 вы найдете шаблоны Annotated Scrollbar (Полоса
прокрутки с примечаниями) и Animated Transition (Анимированный переход), которые позволяют пользователям не потеряться в больших и сложных пространствах
данных. Если ваше представление данных имеет форму таблицы, то для вас будут
полезны шаблоны из главы 5, такие как Row Striping (Чередование строк), Alphabet
Scroller (Алфавитная полоса прокрутки) и Jump to Item (Прыжок к элементу).
Первая группа шаблонов подойдет для любой интерактивной графики, независимо
от базовой структуры данных (некоторые из них сложнее изучать и применять, чем
остальные, так что не стоит внедрять их во все создаваемые вами информационные
изображения; в частности, Data Brushing (Окрашивание данных) и Local Zooming
(Локальное масштабирование) относятся к сложным инструментам, которые больше
подходят для опытных пользователей). Эти шесть интерактивных инструментов позволяют зрителю сосредоточиться на определенных фрагментах набора данных, в то
же время сохраняя контекст.
1. Overview Plus Detail (Обзор и детали).
2. Datatips (Всплывающие данные).
3. Data Spotlight (Прожектор на данные).
4. Dynamic Queries (Динамические запросы).
5. Data Brushing (Окрашивание данных).
6. Local Zooming (Локальное масштабирование).
Оставшиеся шаблоны представляют способы конструирования сложных представлений многомерных данных — данных, обладающих множеством атрибутов или
переменных. Они подталкивают пользователей к тому, чтобы те задавали вопросы, интересовались структурой, выполняли различные сравнения среди элементов данных.
7. Sortable Table (Сортируемая таблица).
8. Radial Table (Круглая таблица).
9. Multi-Y Graph (График с несколькими осями Y).
10. Small Multiples (Небольшие образцы).
11. Treemap (Древовидная карта).
Overview Plus Detail (Обзор и детали)
Рис. 7.11. Диаграмма сообщества Perl (http://labs.linkfluence.net/fpw09/map/)
304 Глава 7 • Отображение сложных данных: деревья, таблицы
Что
Поместите иллюстрацию с общим представлением данных рядом с увеличенным
детальным видом. Когда пользователь перетаскивает область просмотра по общему
представлению, показывайте соответствующую часть изображения в детальном представлении.
Использовать, когда…
Вам надо показать большой набор данных в большом информационном представлении, чаще всего, на изображении или карте. Необходимо, чтобы пользователи сохраняли ориентацию относительно общей картины, но в то же время могли увеличивать
нужные фрагменты для изучения деталей. Пользователи будут в произвольном порядке просматривать данные, изучать небольшие участки или искать интересующие их
точки. Высокоуровневое представление используется для поиска конкретных данных,
но при этом пользователям не нужно видеть все подробности — чтобы получать требуемые наборы подробных сведений, достаточно увеличивать небольшие фрагменты
изображения.
Почему
Это очень старый способ, позволяющий справиться с излишней сложностью: предоставьте пользователям высокоуровневое представление имеющихся данных и способ
изменения масштаба для получения необходимых деталей. При этом оба вида информации должны отображаться на одной странице — так пользователи смогут легко
отменить и повторить масштабирование.
Эдвард Тафти (Edward Tufte) использует термины «микро- и макроданные» для
описания схожей концепции, применяемой в географических картах, диаграммах
и другой статичной информационной графике. Перед глазами у пользователя всегда
находится общая структура, но он по желанию может «всмотреться» в небольшие
детали: «темп визуализации уплотняется, замедляется и персонализируется». Аналогично, пользователи, работающие с интерфейсом, в котором используется шаблон
Overview Plus Detail (Обзор и детали), могут методически прокручивать содержимое,
перепрыгивать с места на место, сравнивать и сопоставлять данные с произвольной
скоростью — быстрее или медленнее.
Наконец, общее представление данных может служить указателем «Вы находитесь
здесь». Пользователю достаточно одного взгляда, чтобы найти свое местоположение
в контексте всего набора данных — в этом ему помогает область просмотра, обозначенная на общем представлении.
Как
На экране всегда должно находиться общее изображение набора данных. Это может
быть небольшая вставная панель, как в примере в начале описания шаблона (см.
рис. 7.11). Также возможна панель сбоку от детального представления или даже отдельное окно (в случае многооконного приложения, такого как Photoshop).
На этом изображении обозначьте область просмотра. Чаще всего по негласному
правилу используются красные рамки, но это не обязательно. Главное, чтобы область
просмотра можно было распознать с одного взгляда, поэтому рекомендуется выбирать
Шаблоны 305
цвета, контрастирующие с основными цветами на панели обзора. Если графика в целом довольно темная, то сделайте светлую рамку; если графика светлая, то создайте
рамку темного цвета. Область просмотра должна перетаскиваться указателем мыши,
чтобы пользователи могли произвольно перемещать ее по общему изображению.
В детальном представлении показывайте увеличенную «проекцию» того, что находится в области просмотра. Эти два элемента должны работать синхронно: если
область просмотра перемещается, то и детальное представление должно меняться в зависимости от того, что в него попадает; если область просмотра уменьшается, то масштаб детального представления должен увеличиваться. Аналогично, если на панели
детального просмотра есть полосы прокрутки или другие средства панорамирования,
то область просмотра должна двигаться вместе с ними. Реакция одного на изменение
другого должна быть мгновенной, с задержкой в десятую долю секунды (стандартное
время ответа для прямой манипуляции).
Примеры
В приложении Photoshop холст изображения (детальное представление) находится
слева, а обзор справа (рис. 7.12). В окне Navigator (Навигатор) отображается изображение целиком, а красная рамка показывает размер и позицию того фрагмента, который
в данный момент виден на холсте изображения.
Рис. 7.12. Приложение Photoshop
На веб-сайте Google Finance интерактивная панель обзора позволяет выбирать
произвольные промежутки времени, данные для которых выводятся на графике. Обратите внимание на «ручки» по бокам рамки и метки с указанием года, сообщающие,
информация за какой период представлена на экране (рис. 7.13).
На веб-сайте New York Times также есть временная шкала для манипулирования
информационным графическим представлением, посвященным изменениям окружающей среды (рис. 7.14). Пользователь выбирает события на временной шкале, чтобы
посмотреть подробную информацию о них. Здесь также работает навигационный
шаблон Pyramid (Пирамида): для того чтобы перейти к следующему событию, нужно
просто щелкнуть на кнопке Next (Далее) в правом верхнем углу.
306 Глава 7 • Отображение сложных данных: деревья, таблицы
Рис. 7.13. Веб-сайт Google Finance
Рис. 7.14. Интерактивная графика на веб-сайте New York Times (http://www.nytimes.com/
interactive/2010/04/22/science/earth/20100422_environment_timeline.html)
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,226,17,0,0,247
http://quince.infragistics.com/Patterns/Overview%20Plus%20Detail.aspx
Глобальная концепция «обзора и деталей» обсуждается во множестве книг, посвященных визуализации информации, включая работы Эдварда Тафти.
Шаблоны 307
Datatips (Всплывающие данные)
Рис. 7.15. Живая карта SPOT Adventures
Что
Каждый раз, когда указатель мыши оказывается над интересующей пользователя
точкой, выводите значения данных для этой точки во всплывающей подсказке или
в другом всплывающем окне.
Использовать, когда…
Вы показываете на экране общее представление набора данных практически в любой
форме. Большая часть данных скрывается под определенными точками на иллюстрации, например, это могут быть названия улиц на карте или значения столбцов на
гистограмме. Пользователь указывает на интересующие его точки при помощи мыши
или сенсорного экрана.
Почему
Поиск значений данных — очень распространенная задача при работе с насыщенной
данными графикой. Пользователям необходимо общее представление, но им также
нужно узнавать конкретные факты, которые на нем не отражены. Всплывающие подсказки позволяют показывать небольшие сконцентрированные фрагменты контекстно-зависимых данных. Благодаря им данные оказываются именно там, где фокусируется внимание пользователя, — около указателя мыши. Если информация хорошо
организована, то пользователям очень легко находить требуемые подробности, а вам
не приходится помещать на общее представление все детали одновременно.
Помимо этого, некоторые люди могут изучать изображение просто из любопытства — что еще здесь есть? Что я могу обнаружить? Всплывающие подсказки представляют собой простую и эффективную форму интерактивности. Они быстрые
(никакой загрузки дополнительной страницы!), легкие и позволяют увидеть набор
данных, который в противном случае остался бы скрытым.
308 Глава 7 • Отображение сложных данных: деревья, таблицы
Если вы попытаетесь реализовать при помощи всплывающих подсказок не вывод
дополнительной информации, а отображение увеличенного фрагмента данных, над
которыми находится указатель мыши, то лучше применить шаблон Local Zooming
(Локальное масштабирование).
Как
В окне, похожем на всплывающую подсказку, показывайте сведения, относящиеся
к текущей точке на общем представлении данных. Необязательно делать это окно
точь-в-точь как всплывающая подсказка — главное, чтобы оно появлялось точно
в том месте, где находится указатель мыши, выводилось поверх иллюстрации и было
временным. Пользователи довольно быстро схватывают идею.
Внутри этого временного окна форматируйте данные так, как того требует их
структура. Лучше компоновать их достаточно плотно, так как пользователи ожидают,
что окошко всплывающей подсказки будет маленьким; не делайте всплывающее окно
таким, чтобы при отображении оно заслоняло собой слишком большой фрагмент
иллюстрации. Также хорошо продумайте местоположение окна. Если существует
возможность программно выбирать позицию, чтобы окно закрывало собой как можно
меньше полезного содержимого, попробуйте реализовать ее.
Иногда можно даже форматировать всплывающие данные по-разному, в зависимости от ситуации. Например, по желанию пользователя на интерактивной карте могут
выводиться либо названия мест, либо их координаты (значения широты и долготы).
Если несколько наборов данных выводятся в виде отдельных линий на графике, то
всплывающие данные можно оформлять для каждой линии по-разному, также можно
выводить для каждой из них свой тип информации.
Всплывающие подсказки часто содержат ссылки, позволяющие «погружаться» в те
фрагменты данных, которые недоступны в главном информационном представлении.
Большим преимуществом такого подхода является то, что никаких дополнительных
описаний не требуется — все понятно с первого взгляда. Пользователь видит только
нужные сведения, а в дополнение к ним — ссылку и, возможно, краткое приглашение
щелкнуть на ней.
Еще один способ динамического отображения скрытых данных — создать прямо
на иллюстрации или рядом с ней статическую панель для временных данных. Когда
пользователь наводит указатель мыши на различные точки иллюстрации, данные,
связанные с этими точками, появляются на статической панели. Идея не меняется,
просто используется специально зарезервированное постоянное пространство, а не
временная всплывающая подсказка. Пользователю приходится переключать внимание между указателем мыши и панелью, но зато дополнительные данные никогда не
закрывают собой иллюстрацию. Помимо этого, если на панели данных информация
сохраняется в течение некоторого времени, пользователи могут выполнять другие
действия указателем мыши, все так же имея перед глазами нужные сведения.
В современной интерактивной информационной графике всплывающие данные
часто объединяются с другим механизмом — прожектором на данные. Прожектор
подсвечивает срез данных, например линию или набор разбросанных точек, тогда как
всплывающие подсказки выводят значения для определенной точки, находящейся
под указателем мыши.
Шаблоны 309
Примеры
На веб-сайте San Francisco Crimespotting (карта происшествий в Сан-Франциско)
используются как всплывающие данные (рис. 7.16), так и прожектор на данные. Прожектором подсвечиваются точки на карте, где произошли кражи, а во всплывающей
подсказке выводятся подробные сведения о конкретной выбранной пользователем
точке. Обратите внимание на ссылку в поле всплывающих данных. Она позволяет
получить исходные необработанные данные о преступлении.
Рис. 7.16. Веб-сайт San Francisco Crimespotting (http://sanfrancisco.crimespotting.org/)
Бывают такие плотные или насыщенные текстом наборы данных, что для них практически невозможно создать удобные постоянные метки. Если бы не всплывающие
данные, то пользователи не смогли бы извлечь необходимую информацию из графика,
показанного на рис. 7.17 (график взят из проекта IBM�����������������������������
��������������������������������
Many������������������������
����������������������������
Eyes�������������������
�����������������������
). На панели всплывающей подсказки достаточно места, чтобы вывести как текстовые, так и числовые
данные — площади простых меток для этого недостаточно. Кроме того, здесь также
есть подсказка: если щелкнуть в этом месте графика, то будут подсвечены связанные
данные (это опять использование прожектора).
Карты в проекте Google Maps содержат столько географической информации, что
о них стоит упомянуть отдельно. API��������������������������������������������
�����������������������������������������������
этого приложения позволяет с легкостью создавать всплывающие подсказки, отвечающие требованиям конкретного приложения,
как, например, в примере с SPOT�����������������������������������������������������
���������������������������������������������������������
Adventures������������������������������������������
����������������������������������������������������
в начале раздела (см. рис. 7.15) и в примере на рис. 7.18.
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,237,17,0,0,258
http://quince.infragistics.com/Patterns/Data%20Tips.aspx
310 Глава 7 • Отображение сложных данных: деревья, таблицы
Рис. 7.17. График в проекте Many Eyes (http://www-958.ibm.com/software/data/cognos/
manyeyes/visualizations/us-government-expenses-1962-2004)
Рис. 7.18. Карта инвестиционной привлекательности Калифорнии (http://www.recovery.
ca.gov/html/funding/stimulus%20map/districtsmap.jsp)
Шаблоны 311
Data Spotlight (Прожектор на данные)
Рис. 7.19. Веб-приложение Google Public Data Explorer
Что
Когда пользователь подводит указатель мыши к интересующей его области графика,
подсвечивайте соответствующий срез данных и затеняйте остальное.
Использовать, когда
Представление содержит так много информации, что даже структура данных становится неочевидна. Пользователю сложно заметить взаимоотношения и отследить связи
между наборами данных.
Сама структура данных очень сложна — они могут включать несколько независимых переменных и запутанные «срезы» зависимых данных, таких как линии, области,
разбросанные точки, системы связей. (Если при наведении указателя мыши нужно
показать всего лишь значение в точке или простую фигуру, для этого лучше подходит
всплывающая подсказка. С другой стороны, эти два метода часто используются в сочетании друг с другом.)
Почему
Прожектор позволяет разъединить нити данных. Это один из способов реализации
«фокуса» в контексте сложной информационной графики: пользователь устраняет
лишний визуальный шум, затеняя ненужные данные, и может сосредоточиться на
интересующем его срезе. Однако второстепенные с его точки зрения данные не исчезают с экрана, они все так же обеспечивают понятный контекст.
Также данный шаблон хорошо поддерживает динамическое исследование. Пользователь быстро переключается между различными срезами данных, что позволяет ему
видеть как крупные, так и мелкие различия между ними. Разумеется, для того чтобы
пользователь заметил эту разницу, переход должен осуществляться быстро и гладко
(без мерцания).
Наконец, прожектор делает изучение данных веселым и интересным занятием.
312 Глава 7 • Отображение сложных данных: деревья, таблицы
Как
Во-первых, разработайте информационное представление, не зависящее по своей природе от прожектора. Постарайтесь сделать срезы данных хорошо видимыми и единообразными, чтобы пользователь мог ухватить суть представления, не взаимодействуя
с графикой (в конце концов, кто-то может распечатать его).
Для создания эффекта прожектора выделяйте интересующие пользователя срезы
данных цветом (либо более светлым, либо более насыщенного оттенка), затеняя или
переводя в оттенки серого все остальное. Сделайте так, чтобы отклик на перемещение
указателя мыши был мгновенным, иначе впечатление пользователя от работы с представлением испортится.
Помимо включения прожектора при наведении указателя мыши на элементы данных, можно также подсвечивать соответствующую информацию в легенде и других
связанных информационных блоках.
Подумайте, можно ли реализовать «режим прожектора». В этом режиме при первоначальном наведении указателя мыши на точку данных подсветка включается не сразу,
а через пару секунд, но после этого любое изменение положения курсора моментально
отражается на поведении прожектора. Таким образом, прожектор не будет включаться
при случайном попадании указателя мыши в область данных. Так сделано в примере
с веб-сайта Crimespotting (рис. 7.20).
Альтернативой наведению на элемент курсора может быть простой щелчок кнопкой
мыши или прикосновение к сенсорному экрану. Мгновенной реакции, как при наве­
дении, нет, зато прожектор невозможно включить случайно, и, кроме того, такой ва­
риант идеален для устройств с сенсорным экраном. Возможно, однако, что вы хотите зарезервировать щелчок для другого действия, такого как погружение в глубь
данных.
Используйте всплывающие подсказки для описания конкретных точек данных
или выделенного среза данных, а также для предоставления пользователю других
инструкций.
Примеры
В проекте ����������������������������������������������������������������������
San�������������������������������������������������������������������
Francisco���������������������������������������������������������
������������������������������������������������������������������
Crimespotting�������������������������������������������
��������������������������������������������������������
прожектор можно навести на точки, соответствующие различным преступлениям, которые произошли в данной географической
области. Когда пользователь подводит указатель мыши к элементу данных на карте
или к одному из пунктов в легенде, где перечислены типы правонарушений (см.
рис. 7.20), небольшими светлыми окружностями подсвечиваются все точки данных
соответствующего типа. Остальная часть карты затемняется.
Интерактивный график Top Secret на веб-сайте Washington Post выглядит очень
привлекательно, однако пассивному зрителю разобраться в таком представлении
непросто (рис. 7.21). Прожектор позволяет с легкостью вычленить информацию,
связанную с определенным агентством.
Шаблоны 313
Иногда в представлении крайне сложно показать все имеющиеся данные. График формата «круглая таблица» на веб-сайте Wall���������������������������������
�������������������������������������
��������������������������������
Street��������������������������
�������������������������
Journal������������������
(рис. 7.22) включает множество интерактивных элементов, позволяющих исследовать связи между
­веб-сайтами. Для того чтобы увидеть определенную связь, нужно щелкнуть на ячейке.
Если просто подвести указатель к ячейке, то появятся «призрачные» изображения ­соответствующих линий. Команда Show all (Показать все) превращает график
в интереснейшее представление, которое, однако, не дает почти никакой полезной
информации. Оказывается, ограниченные интерактивные представления намного
привлекательнее!
Рис. 7.20. Проект San Francisco Crimespotting
314 Глава 7 • Отображение сложных данных: деревья, таблицы
Рис. 7.21. Интерактивное представление на веб-сайте Washington Post
(http://projects.washingtonpost.com/top-secret-america/)
Шаблоны 315
Рис. 7.22. Интерактивное представление на веб-сайте Wall Street Journal
316 Глава 7 • Отображение сложных данных: деревья, таблицы
Dynamic Queries (Динамические запросы)
Рис. 7.23. Веб-приложение Google Public Data Explorer
Что
Предоставьте пользователю возможность осуществления немедленной и интерактивной фильтрации данных. Пользователь определяет, какие именно данные отображаются, настраивая простые стандартные элементы управления, такие как ползунки
и флажки. Как только он устанавливает нужные значения, результат сразу же появляется в области отображения.
Использовать, когда…
Вы показываете большой многомерный набор данных любой формы, применяя любой
способ представления. Пользователю необходимо отфильтровать часть данных, чтобы,
например, избавиться от ненужных фрагментов, или увидеть, какие данные отвечают определенным критериям, или понять взаимоотношения между разными атрибутами данных, или же просто изучить набор данных и проверить, что из него можно извлечь.
У самого набора данных есть фиксированный и предсказуемый комплект атрибутов (или параметров, переменных, измерений — какой термин вам больше нравится),
интересующих пользователей. Обычно это числовые атрибуты, ограниченные определенным диапазоном; также это могут быть сортируемые строки, даты, категории или
перечисления (наборы чисел, представляющих нечисловые значения). Помимо этого,
атрибутами могут быть видимые области представления данных на экране, которые
пользователь интерактивно выбирает.
Динамические запросы можно применять к результатам поиска. В многогранных
механизмах поиска используются особые интерфейсы запроса, позволяющие исследовать огромные базы данных элементов, таких как продукты, изображения или
текстовые статьи.
Почему
Во-первых, научиться пользоваться динамическими запросами очень легко. Пользователю не приходится тратить время на изучение сложного языка запросов; при помощи
Шаблоны 317
простых и понятных элементов управления можно формулировать элементарные
булевы выражения вроде «цена > $70 и цена < $100». Конечно же, у таких элементов
управления нет мощности настоящего языка запросов, но это плата за то, чтобы сохранить пользовательский интерфейс относительно простым. В большинстве случаев
достаточно простых запросов.
Во-вторых, мгновенное реагирование интерфейса на запрос способствует свободному изучению набора данных. Например, как только пользователь перемещает
ползунок, он видит, как набор данных сокращается или расширяется. Как только он
добавляет или удаляет различные поднаборы данных, на его глазах они переносятся
в нужное место и определенным образом изменяют свое представление. Пользователь
может постепенно изобретать длинные и сложные выражения запросов, изменяя сначала один элемент управления, потом другой, потом третий. Таким образом, между
пользователем и данными происходит непрерывное интерактивное взаимодействие
в стиле вопросов и ответов. Мгновенная реакция приложения сокращает количество
итераций, поэтому изучение данных приносит удовольствие, а пользователь может
войти в состояние потока (см. шаблон Incremental Construction (Пошаговое построение) в главе 1).
В-третьих (это более тонкая особенность данного шаблона), наличие четко обозначенных элементов управления динамическими запросами говорит пользователю,
каковы же те атрибуты, на базе которых он может формулировать запросы. Например,
если одним из атрибутов данных является число в диапазоне от 0 до 100, то пользователь узнает об этом, видя ползунок, на одном конце которого находится значение 0,
а на противоположном — 100.
Как
Способ реализации динамического запроса зависит от представления данных, от
того, какие вопросы, по вашему мнению, будут задавать пользователи, а также от
­возможностей вашего пакета разработки. Как уже говорилось, в большинстве программ атрибуты данных привязываются к простейшим элементам управления, ко­
торые обычно располагаются рядом с основным представлением данных. Такой
сце­нарий позволяет выполнять запросы одновременно по многим переменным, а не
только закодированным при помощи каких-то пространственных особенностей изображения. Помимо этого, большинство людей без труда управляются с ползунками
и кнопками.
Некоторые программы поддерживают интерактивный выбор прямо в визуальном
представлении информации. Например, пользователь рисует рамку вокруг интересующего его региона, и данные, попавшие в рамку, удаляются (или сохраняются на экране,
тогда как удаляется вся остальная информация). Это прямая манипуляция в самом
прямом смысле, но у нее есть недостаток — она тесно связана с пространственным отображением данных. Если вокруг данных невозможно нарисовать рамку или каким-то
другим способом выбрать интересующие пользователя точки, то запрос по ним также
невозможен! Аргументы «за» и «против» такой техники обсуждаются в разделе, посвященном шаблону Data Brushing (Окрашивание данных).
Вернемся к элементам управления. Выбор элементов управления для динамических запросов аналогичен выбору элементов управления для форм любого типа: нужно
основываться на типе отображаемых данных, типе запросов, которые будет делать
318 Глава 7 • Отображение сложных данных: деревья, таблицы
пользователь, и имеющихся в вашем распоряжении элементах управления. Некоторые
распространенные методики включают:
‰‰ползунки для выбора одного числа в определенном диапазоне;
‰‰двойные ползунки или пары ползунков для определения поднабора в диапазоне:
«покажите точки данных больше первого значения, но меньше второго значения»;
‰‰переключатели или комбинированные поля (раскрывающиеся меню) для выбора
одного из нескольких возможных значений. Также можно использовать их для
выбора целых наборов переменных или данных. В любом случае в качестве дополнительного мета-значения часто используется «Все»;
‰‰флажки для выбора произвольного поднабора значений, переменных или слоев
данных;
‰‰текстовые поля для ввода отдельных значений, вероятно, используемые в контексте
шаблона Fill-in-the-Blanks (Заполнение пропусков — см. главу 8). Помните, что
текстовые поля предоставляют больше возможностей для ошибок и опечаток, чем
ползунки и кнопки.
Примеры
В примере на рис. 7.24 показан набор из шести фильтров для древовидной карты (см.
шаблон Treemap (Древовидная карта) далее в этой главе). Флажки, представляющие
фильтры 1 и 2, отсекают огромные фрагменты данных всего лишь двумя стандартными
запросами: доступен ли определенный элемент и есть ли для него фотография?
Для остальных фильтров используются двойные ползунки. На каждом из них по
два независимых бегунка, при помощи которых пользователь определяет диапазон. На
ползунке Price (Цена) установлен диапазон приблизительно от $80 до $1000 (прямо
скажем, не очень реалистичный), а когда пользователь перемещает любой из бегунков,
вся древовидная карта изменяется, отражая новый ценовой диапазон. То же самое
происходит и с остальными ползунками.
В проекте San Francisco Crimespotting (рис. 7.25) предлагается набор простых
и интуитивно понятных переключателей, которые позволяют просмотреть данные
о преступлениях для разного времени суток: когда темно, светло, в период ежедневных
поездок на работу и с работы, во время ночной рабочей смены и т. д. Также пользователь может выбрать интересующий его период дня с помощью элемента управления,
похожего на часы. Для того чтобы сузить диапазон дат, нужно передвинуть двойной
ползунок на длинном линейном графике (который сам по себе является представлением данных) или выбрать конкретную дату в календаре.
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,231,17,0,0,252
http://www.infovis-wiki.net/index.php?title=Dynamic_query
Название и концепция динамических запросов возникли в начале 1990-х годов.
Их использовали в своих основополагающих работах Кристофер Альберг, Кристофер Вильямсон и Бен Шнейдерман. Некоторые их этих работ можно найти в сети,
включая:
http://hcil.cs.umd.edu/trs/91-11/91-11.html
http://hcil.cs.umd.edu/trs/93-01/93-01.html
Шаблоны 319
Рис. 7.24. Панель корректировки древовидной карты Hive Group
Рис. 7.25. Веб-сайт San Francisco Crimespotting
320 Глава 7 • Отображение сложных данных: деревья, таблицы
Data Brushing (Окрашивание данных)
Рис. 7.26. Приложение BBN Cornerstone
Что
Позвольте пользователю выбирать элементы данных в одном представлении; одновременно показывайте те же выбранные данные в другом представлении.
Использовать, когда…
На экране находятся два или несколько изображений. Это могут быть два линейных
графика и точечная диаграмма, точечная диаграмма и таблица, диаграмма и дерево
или карта и таблица — что угодно, но все изображения должны содержать один и тот
же набор данных.
Почему
Окрашивание данных представляет собой очень насыщенную форму интерактивного
изучения информации. Во-первых, у пользователя есть возможность выбирать определенные данные, используя в качестве селектора само изображение. Иногда проще
найти нужные точки визуально, чем косвенными путями, например при помощи динамических запросов, — изолированный объект на графике бросается в глаза мгновенно,
его можно сразу же выделить или как-то изменить, а вот для того чтобы догадаться,
как определить его численно, может потребоваться несколько секунд, а то и больше.
«Действительно ли мне нужны все точки, для которых X > 200 и Y < 5,6? Я не знаю;
лучше я просто нарисую рамку вокруг вон той группы точек».
Во-вторых, мгновенно получая выделенные или «окрашенные» точки данных на
другом изображении (или нескольких), пользователь может оценить их, как минимум,
еще в одном графическом контексте. Это может оказаться очень и очень полезно.
Снова прибегая к примеру с обособленным объектом, представьте, что пользователь
хочет узнать, в какой области другого пространства данных, индексированного по
другим переменным, находятся выделенные им точки. Получив эти сведения, он может
мгновенно догадаться о причинах феномена, характеризующегося такими данными.
Основным принципом здесь являются согласованные или связанные представления.
Несколько представлений одних и тех же данных могут быть связаны или синхронизированы так, чтобы определенные манипуляции, например масштабирование, панора-
Шаблоны 321
мирование и выделение, производимые в одном представлении, мгновенно отражались
и в другом. Согласованность изменений подчеркивает тот факт, что эти представления
в действительности являются просто разными проекциями одних и тех же данных.
Опять же, пользователь фокусируется на том, как определенные данные выглядят
в разных контекстах, что позволяет ему проникнуть в суть изображаемой информации.
Как
Каким образом пользователи будут выбирать или «окрашивать» данные? С этой проблемой вы сталкиваетесь, создавая любой набор выделяемых объектов: пользователям
может понадобиться один объект или несколько, смежные или отдельные объекты, он
может захотеть выделить их все сразу или по очереди. Вот несколько идей:
‰‰рисование рамки вокруг точек данных (очень распространено);
‰‰выделение по одному одиночными щелчками мыши;
‰‰выделение диапазона (если необходимо) щелчками мыши с удержанием клавиши
Shift, как, например, в списках;
‰‰добавление и вычитание точек щелчками мыши с удержанием клавиши Ctrl, так же,
как в списках;
‰‰рисование произвольной фигуры вокруг точек данных (лассо);
‰‰инвертирование выделения при помощи команд меню, кнопки или клавиши.
Если вы решите обойтись только рамкой, то лучше оставлять ее на экране после
того, как все объекты будут выделены. Некоторые системы, например Cornerstone, разрешают интерактивно менять размер рамки. В действительности при использовании
любого метода пользователю очень удобно иметь возможность расширять или сужать
выбранный набор точек, так как при этом он мгновенно видит, как новые точки «включаются» в других представлениях, что помогает лучше проникнуть в суть изображения.
Как можно видеть, очень важно, чтобы на окрашивание данных немедленно реагировали все изображения. Удостоверьтесь, что ваше приложение на это способно.
Если данные одинаково отображаются во всех представлениях, включая иллюстрацию, на которой осуществляется выбор («окрашивание»), то пользователю проще
найти их и понять, что они выбраны. Кроме того, это формирует единый перцепционный слой (см. раздел о подсознательных элементах дизайна во введении к этой главе).
Цветовой тон — это тоже подсознательный элемент изображения, наиболее часто
применяемый для выбора, вероятно, потому, что яркий цвет легко увидеть, даже если
ваше внимание фокусируется на чем-то другом. Поэтому данный шаблон называется
«окрашиванием».
Примеры
Снимки экрана на рис. 7.26 и 7.27 взяты из приложения Cornerstone — пакета для
статистических расчетов и построения графиков. Три окна на рис. 7.27 представляют
точечную диаграмму, гистограмму остатков одной из переменных на графике, а также
таблицу необработанных данных. Все представления поддерживают «окрашивание»
данных; вы видите рамку вокруг двух столбцов на гистограмме. На обоих графиках
выбранные данные отображаются красным, а в таблице они выделяются серым. Если
окрасить модель автомобиля в таблице, то вы увидите, как точка, представляющая эту
модель, на верхнем графике станет красной, а на гистограмме появится красная полоса.
322 Глава 7 • Отображение сложных данных: деревья, таблицы
Рис. 7.27. Пакет Cornerstone
Карты хорошо подходят для применения этого шаблона, поскольку географические
данные зачастую можно группировать и выводить различными другими способами.
Следующие три примера иллюстрируют окрашивание данных, связанных с картами:
изображений на полосе-фотопленке (с веб-сайта Flickr, рис. 7.28), местоположений,
определенных с помощью ������������������������������������������������������
GPS���������������������������������������������������
, в хронологическом списке (с веб-сайта SPOT�������
�����������
Adven������
tures��������������������������������������������������������������������������������
, рис. 7.29), точек регистрации по различным адресам человека, посещающего социальные мероприятия, также упорядоченных по дате (с веб-сайта Weeplaces, рис. 7.30).
Во всех трех примерах элементы, выбранные в линейном представлении, подсвечиваются на карте. На Flickr и SPOT реализована и противоположная возможность: можно
выделить элементы на карте, и они будут подсвечены в линейном представлении.
Рис. 7.28. Карта на веб-сайте Flickr (http://www.flickr.com/map/)
Шаблоны 323
Рис. 7.29. Живая карта на веб-сайте SPOT Adventures
Рис. 7.30. Веб-сайт Weeplaces (http://www.weeplaces.com/)
324 Глава 7 • Отображение сложных данных: деревья, таблицы
В других библиотеках
http://quince.infragistics.com/Patterns/Data%20Brushing.aspx
Следующий шаблон под названием Linked Multiples (Связанные образцы) представляет собой обобщение шаблона Data Brushing (Окрашивание данных).
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,225,17,0,0,246
Local Zooming (Локальное масштабирование)
Рис. 7.31. Календарь DateLens
Что
Показывайте все данные на одной компактной странице так, чтобы все элементы данных были очень небольшими. Там, где находится указатель мыши, меняйте вид страницы, делая соответствующие элементы данных крупными и удобными для чтения.
Использовать, когда…
Вы отображаете большой набор данных в любой форме — графики, карты, сетки и даже
таблицы — на большом или маленьком экране. Пользователь может выбирать интересующие его места указателем мыши или при помощи сенсорного экрана.
Пользователи свободно просматривают данные или ищут интересующие их подробности в организационной структуре (например, определенную дату в календаре).
Для поиска этих точек необходимо высокоуровневое представление, но пользователям
не нужно видеть все имеющиеся детали для всех данных одновременно — увеличения
отдельных фрагментов достаточно для получения подробностей.
Некоторые формы локального масштабирования, в частности линзы типа «рыбий
глаз», подходят только для того, чтобы пользователь мог изучить новую технику интерактивной работы с данными и достичь высокого уровня профессионализма в определенном приложении. Использование локального масштабирования требует терпения.
Почему
Обычное масштабирование хорошо работает для большинства видов высокоплотной
информационной графики, но при этом приходится жертвовать контекстом: увели-
Шаблоны 325
ченное до максимума представление не позволяет одновременно видеть изображение ­всего набора данных. Локальное масштабирование фокусируется на отдельных
деталях, сохраняя при этом контекст. Пользователь остается в том же смысловом
пространстве.
Платой за локальное масштабирование может стать искажение смыслового пространства. Обратите внимание, как появление линзы типа «рыбий глаз» — локального
масштабирования с сохранением топологической непрерывности между увеличенной
областью и оставшейся частью представления — меняет вид окна на рис. 7.31. Неожиданно общее представление данных меняется: ориентиры перемещаются и пространственные взаимоотношения искажаются («вот это было в середине по правой стороне
экрана, а теперь оно находится уже не там»).
Другие виды локального масштабирования не вносят искажений, но могут скрывать части общего представления. Например, при использовании виртуальной лупы
пользователь видит увеличенную область и часть контекста, но не то, что скрывается
за рамкой лупы.
Шаблон Overview Plus Detail (Обзор и детали) — это хорошая альтернатива
локальному масштабированию. Он также предлагает держать на одной странице
детальное и общее представления (фокус и контекст), но делит два уровня масштабирования на два разных представления, находящихся бок о бок, а не интегрирует
их в одну искаженную картину. Если локальное масштабирование слишком сложно
реализовать или если пользователям слишком сложно работать с ним, то лучше прибегнуть к шаблону Overview Plus Detail (Обзор и детали).
Еще одна возможная альтернатива — шаблон Datatips (Всплывающие данные).
Здесь пользователь снова получает общее представление и отдельные детали, но
отображаемая информация становится, скорее, не увеличением, а описанием данных
в выбранной точке. Всплывающие данные представляют собой временный элемент,
иногда появляющийся поверх иллюстрации, а локальное масштабирование может
быть ее неотъемлемой частью. Благодаря этому изображение с локальным масштабированием можно напечатать или сделать снимок экрана.
Как
Заполните все доступное пространство имеющимися данными, но используйте очень
мелкий шрифт и рисунки. Растягивайте содержимое, чтобы динамически «залить»
окно целиком (см. шаблон Liquid Layout («Резиновый» макет) в главе 4). По необходимости убирайте детали. Если текст является важным структурным элементом, то
по возможности выбирайте шрифты крохотного размера; если же текст все равно не
помещается, то используйте абстрактное визуальное представление, например цветные
прямоугольники или линии, имитирующие текст.
Предложите пользователю режим локального масштабирования. В этом режиме
при перемещении мыши по иллюстрации увеличивайте небольшие участки, находящиеся прямо под указателем мыши.
Как будет выглядеть увеличенный элемент — зависит от типа информационной
графики, с которым вы работаете. Не обязательно буквально понимать увеличение
и реализовывать на странице виртуальную лупу. В приложении DateLens на рис. 7.31
используется одновременно и горизонтальное, и вертикальное увеличение и сжатие,
однако в TableLens (рис. 7.32) применяется только вертикальное увеличение и сжатие,
326 Глава 7 • Отображение сложных данных: деревья, таблицы
так как интересующими пользователя точками данных являются строки целиком,
а не отдельные ячейки. На карте или изображении необходимо тесно связывать оба
направления, чтобы не нарушать соотношение сторон. Другими словами, не растягивайте и не сжимайте карту — из-за этого ее будет сложнее читать.
Линзы локального масштабирования бывают довольно сложными в управлении,
так как пользователь может нацеливать их на очень мелкие элементы. Они не выглядят мелкими, так как увеличиваются под линзой, но в действительности пользователь
перемещает указатель мыши по общему изображению, а не по увеличившемуся пространству. Небольшое движение курсора становится огромным прыжком. Поэтому,
когда речь идет о дискретных точках данных, таких как ячейки таблицы или узлы
сетки, можно просто перемещать фокус от одной точки интереса к другой.
Представления с увеличением по типу «рыбий глаз» — одни из наиболее распространенных в системах визуализации данных. Область, примыкающая к «линзе»,
искажается, обеспечивая топологическую непрерывность представления. (Среди примеров в этом шаблоне к данному типу относится система DateLens.) Искажение может
вызывать зрительный дискомфорт у пользователей, которые постоянно перемещают
область локального масштабирования.
Примеры
Приложение DateLens, показанное на рис. 7.31 в начале этого раздела, представляет
собой календарь, работающий как на настольных компьютерах, так и на мобильных
устройствах (это было экспериментальное приложение, и приблизительно с 2004 года
оно уже не поддерживается). Вы видите общее представление календаря, где каждая
строка обозначает неделю, а темные прямоугольники указывают, на какие дни назначены встречи. Например, щелкните на ячейке. Она разворачивается (с применением
шаблона Animated Transition (Анимированный переход)), показывая расписание на
этот день. Оставшаяся часть иллюстрации сжимается, освобождая пространство для
конкретного дня, за исключением строки и столбца, которым принадлежит ячейка.
(Благодаря этому в действительности вы получаете полезную информацию о расписании на неделю, а также о встречах, которые проводились, скажем, по четвергам
на других неделях.)
Приложение Inxight TableLens разрешает пользователю открывать произвольное
число строк и перемещать это «окно» вверх и вниз по таблице. На рис. 7.32 показаны
четыре увеличенные строки. Обратите внимание, что здесь увеличение идет только
в вертикальном направлении.
В операционной системе Mac�������������������������������������������������
����������������������������������������������������
������������������������������������������������
OS����������������������������������������������
реализована простая версия локального масштабирования (рис. 7.33); аналогичный вариант можно найти на веб-сайте Google images
(рис. 7.34).
Лупа на картах Cartifact выглядит как настоящая и реализована очень красиво.
Пользователь может установить не только уровень увеличения, но и стиль изображения внутри линзы (рис. 7.35). Благодаря этому ему не приходится то приближать
всю карту, чтобы рассмотреть детали, то снова удалять ее для обзора контекста. Альтернативные стили рисования (вид с воздуха, стиль Cartifact, исторический рисунок,
косоугольное трехмерное представление) позволяют взглянуть на одну и ту же область
с разных точек зрения — при этом представление остальной части карты меняться не
будет.
Шаблоны 327
Рис. 7.32. Приложение Inxight TableLens
Рис. 7.33. Операционная система Mac OS
Рис. 7.34. Веб-сайт Google Images
328 Глава 7 • Отображение сложных данных: деревья, таблицы
Рис. 7.35. Лупа на картах Cartifact (http://cartifact.com/webmaps/)
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,222,17,0,0,243
http://quince.infragistics.com/Patterns/Local%20Zooming.aspx
Sortable Table (Сортируемая таблица)
Рис. 7.36. Заголовок сортируемой таблицы в приложении iTunes
Что
Показывайте данные в таблице и позволяйте пользователю сортировать строки в зависимости от значений в столбцах.
Использовать, когда…
В интерфейсе отображается многомерная информация: пользователь может просматривать ее, менять порядок отображения, настраивать, осуществлять поиск отдельных
элементов или просто изучать основу этих разнообразных переменных.
Почему
Предоставив пользователю возможность изменять порядок сортировки в таблице,
вы достигнете сразу нескольких целей. Во-первых, сортировка способствует изучению данных. У пользователя появилась возможность делать на основе имеющихся
данных выводы, которые в противном случае были бы невозможны: как много данных такого типа? какую долю составляют эти данные по отношению к тем? есть ли
в наборе ­данных еще хоть один элемент такого типа? что стоит на первом месте, а что
на по­следнем? Неожиданно поиск конкретных элементов становится проще — поль­
зователю нужно запомнить только один атрибут требуемого элемента (например,
Шаблоны 329
дату последнего редактирования), потом отсортировать данные по этому атрибуту
и найти его.
К тому же, если порядок сортировки сохраняется между запусками программного
обеспечения, пользователь может эффективно настраивать интерфейс в зависимости
от того, как ему удобнее работать с данным приложением. Некоторые сортируют таблицы от первого элемента к последнему, другим удобнее сортировать их от последнего элемента к первому; третьим необходима сортировка по переменной, которую никто
другой вообще не считает интересной. Это очень хорошо, когда у человека появляется
инструмент управления пользовательским интерфейсом.
Наконец, концепция заголовков, реагирующих на щелчки мышью, знакома большинству пользователей. Они могут ожидать встретить ее, даже если в интерфейсе
вашего приложения это не реализовано.
Как
Тщательно продумайте набор столбцов (то есть переменных). По каким атрибутам
пользователь будет сортировать или искать данные? И наоборот, что не нужно показывать в таблице? Что можно скрыть до тех пор, пока пользователь не запросит
дополнительные сведения об определенном элементе?
Заголовки столбцов таблицы должны быть визуально выделены, чтобы пользователю было понятно, что он может щелкнуть на них мышью. Обычно для этого используются скошенные границы, делающие заголовки похожими на кнопки, или синий
подчеркнутый текст. Можно также добавить стрелки вверх или вниз, показывающие
порядок сортировки: по возрастанию или по убыванию. (Наличие стрелки также
указывает, по какому столбцу в данный момент выполнена сортировка — полезный
побочный эффект!) Рассмотрите возможность визуального реагирования на наведение
указателя мыши, например подсвечивания заголовка или изменения формы указателя,
чтобы подчеркнуть, что щелчок на заголовке вызывает какие-то действия.
Используйте устойчивый алгоритм сортировки. Это означает, что если пользователь выполняет сортировку сначала по имени, а потом по дате, то результирующий
список должен иметь вид упорядоченных групп элементов с одинаковыми датами,
в каждой из которых они отсортированы по имени. Другими словами, при выполнении очередной сортировки по другому атрибуту таблица должна сохранять текущий
порядок сортировки в течение максимально возможного времени. Еле уловимое, но
очень полезное преимущество.
Если технология вашего пользовательского интерфейса допускает это, то разрешите пользователям менять порядок следования столбцов путем перетаскивания.
Примеры
Inxight TableLens — это таблица со строками, сжатыми до полосок минимальной
ширины, длина которых представляет значения в соответствующих ячейках. (Чтобы
увидеть строку обычной ширины, нужно на ней щелкнуть, но в данном случае я говорю не об этом.) Одна из самых замечательных особенностей данного представления
информации заключается в возможности выполнять сортировку по любому столбцу:
когда данные тесно взаимосвязаны, как в этом примере, пользователь может с легкостью увидеть существующие взаимозависимости.
330 Глава 7 • Отображение сложных данных: деревья, таблицы
Показанный на рис. 7.37 набор данных представляет дома, выставленные на
продажу в округе Санта-Клара, штат Калифорния. На этом снимке экрана пользователь щелкнул на заголовке столбца Bedroom (Спальни), выполнив, таким образом,
сортировку по этой переменной: чем больше спален, тем длиннее темная полоса.
Ранее в этой таблице с устойчивым алгоритмом сортировки была выполнена сортировка по площади дома в квадратных футах (столбец Square Foot), так что можно
заметить вторичный «пилообразный» шаблон: например, все дома с четырьмя спальнями отсортированы по площади. Переменная Baths (Ванные комнаты) практически
зеркально отражает атрибут Square Foot, так же как и переменная Price (Цена), демонстрирующая грубую корреляцию. Интуитивно понятно, почему это так: чем больше
в доме спален, тем больше обычно бывает ванных комнат, и тем больше площадь
дома.
Можно представить себе и некоторые другие вопросы, на которые могло бы ответить подобное изображение. Как почтовый индекс соотносится с ценой? Насколько
сильна корреляция между ценой и площадью? Работают ли определенные агенты по
продаже недвижимости только в конкретных городах? Сколько всего агентов? И так
далее.
Рис. 7.37. Inxight TableLens
В других библиотеках
http://ui-patterns.com/patterns/SortByColumn
http://www.welie.com/patterns/showPattern.php?patternID=table-sorter
http://quince.infragistics.com/Patterns/Sortable%20Table.aspx
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,233,17,0,0,254
Шаблоны 331
Radial Table (Круглая таблица)
Рис. 7.38. Анализ данных по покупке автомобилей
(http://mkweb.bcgsc.ca/circos/intro/general_data/)
Что
Выводите таблицу или список элементов не в привычной прямоугольной форме,
а в форме окружности. Связи между элементами показывайте как линии, соединяющие точки на окружности.
Использовать, когда...
Перед вами стоит задача показать длинный список или таблицу элементов с произвольными взаимоотношениями между ними: потоками, связями, соединениями,
сходствами. Можно кодировать даже числовые отношения, делая линии толще или
тоньше в зависимости от значения.
Почему
Круговое представление упрощает визуализацию взаимоотношений произвольной
природы. В таблице или даже в одном столбце элементов это сделать достаточно
сложно. Линия между двумя точками на дуге получается короче, чем при попытке
­соединить кривой две точки прямого отрезка. Таким образом, поиск повторяющихся
шаблонов и последовательностей в данных вызывает меньше сложностей у поль­
зователя. (Это не всегда так; если возможно, протестируйте несколько типов визуа-
332 Глава 7 • Отображение сложных данных: деревья, таблицы
лизации связей, чтобы понять, что лучше подходит для ваших конкретных наборов
данных.)
Даже если визуализировать связи не нужно, некоторые виды табличных данных
удобнее рассматривать в круговом представлении — например, очень длинные наборы
данных с крупномасштабными и мелкомасштабными характеристиками. Крупномасштабные характеристики могут включать группы и кластеры, верхние уровни иерархии, метки больших фрагментов данных. Подробнее об этом — в примерах.
Circos, создатели дизайна круглых таблиц, дают такое объяснение:
Внутри круга разрешение меняется линейно, увеличиваясь по мере удаления
от центра. Таким образом, центр круга идеально подходит для компактного представления сводной статистики или точек интереса (то есть информации с низким
разрешением), от которых пользователь переходит к окружности, где получает
возможность детально изучить соответствующие подробности (то есть получить
информацию высокого разрешения)1.
Наконец, круглые таблицы часто получаются очень привлекательными. Умело нарисованная, такая визуализация выглядит свежо, красиво и интересно.
Как
Изогните линейную таблицу или список, придав ему форму окружности. Если нужны
текстовые метки, то поместите их за пределами окружности. В некоторых круглых
таблицах одну половину окружности занимает ось x, а другую — ось y. Это полезно
для отображения взаимосвязей между двумя одномерными наборами данных.
Если исходная таблица включает множество столбцов независимых данных —
чисел, полос гистограммы, пиктограмм, графиков рассеяния и т. п., — то организуйте
их внутри или вне окружности в зависимости от визуального масштаба и взаимосвязанности. Крупномасштабные конвергентные данные должны быть внутри; мелкомасштабные, детальные, дивергентные данные размещаются снаружи, где для этого
больше пространства.
Если элементы таблицы разбиты по категориям, то их также можно закодировать — например, как группы ячеек, разделенные промежутками, или как группы
ячеек одного цвета, или как дуги, параллельные окружности (внутри или снаружи от
оси данных).
Внутри круга показывайте связи между элементами. Связи могут принимать форму произвольных кривых или правильных дуг, соединяющих ячейки таблицы. Цвет
и толщина линий часто иллюстрируют дополнительные атрибуты этих связей, такие
как источник или цель (цвет линии), объем или сила (толщина линии). Иногда из-за
таких атрибутов линии приходится делать такими толстыми, что они начинают сливаться друг с другом. Есть несколько способов справиться с этой проблемой:
‰‰исключайте ненужные линии; рисуйте только те, на которых следует сконцентрировать внимание пользователей;
‰‰используйте алгоритмы рисования, аккуратно объединяющие линии в группы, для
того чтобы сохранять элегантную визуальную организацию;
1
http://mkweb.bcgsc.ca/circos/intro/circular_approach/
Шаблоны 333
‰‰если иллюстрация обладает интерактивными возможностями, то применяйте ме-
тодики, подобные прожектору или динамическим запросам (см. соответствующие
шаблоны). Так пользователи смогут выбрать только интересующие их поднаборы
данных.
Возможно, пользователям понадобится объяснение, как интерпретировать информацию круглой таблицы. Подобные графики имеют большую ценность для терпеливых и информированных зрителей, но если человек впервые столкнулся с такой
визуализацией, или он недостаточно мотивирован, чтобы потратить время и изучить
новый для него механизм, то значение данных, скорее всего, ускользнет от него. Если
вы подозреваете, что ваши пользователи с большой вероятностью пропустят круглую
таблицу, не вникая в ее содержимое, лучше подумайте над более простой визуальной
интерпретацией.
Примеры
SolidSX Software Explorer — это приложение, способное рисовать круглые таблицы
на основании кода программных пакетов. На рис. 7.39 показаны зависимости, вызовы
и иерархические взаимоотношения между элементами кода в библиотеке. Обратите
внимание на дуги на внешней стороне окружности (иллюстрирующие статическую
иерархию) и линии графа вызовов внутри нее (тщательно прорисованные для упрощения восприятия).
Рис. 7.39. Приложение SolidSX Software Explorer (http://www.solidsourceit.com/products/
SolidSX-source-code-dependency-analysis.html)
334 Глава 7 • Отображение сложных данных: деревья, таблицы
Eigenfactor���������������������������������������������������������������
Project�������������������������������������������������������
��������������������������������������������������������������
и Мориц Стефанер представляют элегантную диаграмму шаблонов цитирования между различными научными дисциплинами (рис. 7.40). Связей
очень много, но они так хорошо прорисованы, что взгляд пользователя следует по ним
без особого труда. На диаграмме видно, какие дисциплины более изолированные (например, экономика), а какие тесно взаимосвязаны.
Рис. 7.40. Шаблоны цитирования научных дисциплин
(http://well-formed.eigenfactor.org/radial.html)
Диаграмма генома на рис. 7.41 демонстрирует, что круговой формат эффективно
иллюстрирует не только связи, но и другие шаблоны данных. Эту диаграмму можно
было бы развернуть в горизонтальную полосу, но данная версия компактнее и, по
мнению многих, удобнее читается, чем длинный тонкий линейный график. Обратите
внимание, что графики внутри таблицы представляют крупномасштабные особенности, в отличие от крохотных разноцветных отрезков на внешнем крае. Именно поэтому
они находятся внутри.
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,217,17,0,0,238
Огромное количество примеров вы найдете на веб-сайтах Circos и Visual Complexity:
http://mkweb.bcgsc.ca/circos/
http://mkweb.bcgsc.ca/circos/
Шаблоны 335
Рис. 7.41. Диаграмма генома бактерии
(http://www.plosone.org/article/info:doi/10.1371/journal.pone.0011748)
Multi-Y Graph (График с несколькими осями Y)
Рис. 7.42. График на веб-сайте New York Times
336 Глава 7 • Отображение сложных данных: деревья, таблицы
Что
Поместите несколько графиков один поверх другого на одной и той же панели; ось X
у них должна быть общей.
Использовать, когда…
Интерфейс предназначен для изображения двух и более графиков, обычно простых линейных графиков, гистограмм или комбинированных двумерных гистограмм (а также
любого сочетания перечисленного). Для данных на этих графиках можно использовать
одну ось X, например временную шкалу, но они, тем не менее, описывают разные сущности. Вы подталкиваете пользователя к поиску «вертикальных» взаимоотношений между показанными наборами данных: корреляций, подобий, неожиданных различий и т. д.
Почему
Во-первых, выравнивание графиков по оси X говорит зрителю, что эти данные связаны
между собой, а во-вторых, когда они расположены бок о бок, их удобно сравнивать. На
рис. 7.42 близость двух графиков делает заметным сходство между формами кривых;
можно видеть, что выступы нижнего графика приблизительно совпадают с интересными особенностями верхнего, а линии координатной сетки позволяют выполнить
точное сравнение. Например, на вертикальной линии между точками 1990 и 1991
находятся пики обеих кривых.
Того же результата можно добиться, наложив один график на другой. Однако когда
графики расположены на небольшом удалении и имеют собственные оси Y, их можно
рассматривать и как индивидуальные объекты без визуальных помех, вызываемых
другими объектами.
Во-вторых, у показанных наборов данных диапазоны значений по оси Y сильно
отличаются: диапазон верхнего графика составляет от 0 почти до 150, а диапазон
нижнего — от –30 до +20. Если их поместить на общую ось Y, то один из графиков
будет выглядеть как прямая линия. Можно было бы нарисовать еще одну ось Y по
левой стороне, но тогда появилась бы другая проблема — как выбрать такой масштаб,
чтобы графики выглядели связанными. В любом случае прямое наложение заставляет
зрителя думать, что для наборов данных используется одна и та же шкала Y, и сравнивать их, исходя из этого, как «яблоки с яблоками», а не как «яблоки с апельсинами».
Если диапазоны значений по оси Y отличаются, то наложение графиков может вводить
зрителей в заблуждение.
Как
Выводите один график прямо над другим. Для обоих используйте одну и ту же ось X,
но разделите ось Y на два обособленных вертикальных пространства. Иногда оси Y
могут немного перекрывать друг друга, но в целом старайтесь, чтобы графики визуально не пересекались.
В некоторых случаях оси Y вообще не нужны; возможно, пользователю не обя­
зательно знать точные значения, или же точные значения содержатся на самом графике, как, например, на гистограмме с маркированными столбцами. В таком случае просто
подвигайте кривые графиков вверх и вниз, добиваясь того, чтобы они не пересекались.
Обозначайте каждый график так, чтобы пользователь мог недвусмысленно идентифицировать его принадлежность. Если возможно, добавьте вертикальные линии
Шаблоны 337
координатной сетки; они позволяют зрителям прослеживать значение X в нескольких наборах данных, что упрощает сравнение. Кроме того, они помогают определять
точное значение в конкретной точке (или близко к ней), не пользуясь угольником
и карандашом.
Примеры
Веб-приложение Google����������������������������������������������������������
����������������������������������������������������������������
Trends���������������������������������������������������
���������������������������������������������������������
позволяет сравнивать частоту использования различных поисковых запросов. В примере на рис. 7.43 показаны данные для двух спортивных терминов со сравнимыми объемами запросов (это позволяет показать их на одном
простом графике). Однако на этом возможности Google Trends не исчерпываются.
Относительный объем поиска иллюстрируется верхним двойным графиком, в то время как нижний показывает количество упоминаний в новостях. Поскольку метрики
и масштабы разные, здесь используются две оси Y.
Рис. 7.43. Веб-приложение Google Trends
На рис. 7.44 представлен интерактивный график с несколькими осями Y, построенный в приложении MATLAB. Здесь можно манипулировать тремя осями Y,
обозначенными разными цветами вдоль левого края и принадлежащими разным
трассировкам данных. Можно указателем мыши перетаскивать трассировки выше
и ниже на графике, растягивать их по вертикали, перемещая цветные концевые элементы, и менять отображаемые диапазоны, редактируя прямо на графике граничные
значения диапазонов по осям Y. Этот пример очень интересен. И знаете, почему?
Возможно, вы заметили, что трассировки выглядят похожими, как будто между ними
существует взаимосвязь: например, на всех трех значение Y резко падает вниз сразу
же после вертикальной линии с отметкой 1180. Однако насколько они похожи? Передвинем их и посмотрим…
Глаза человека очень хорошо справляются с задачей улавливания взаимоотно­
шений между визуально воспроизведенными элементами данных. Трассировки данных
на рис. 7.45 выполнены в разных масштабах, но, располагая их рядом и поверх друг
338 Глава 7 • Отображение сложных данных: деревья, таблицы
друга, пользователь может глубже проникать в суть феномена, породившего такие
данные.
Рис. 7.44. График в приложении MATLAB
>
Рис. 7.45. Еще одно представление графика в приложении MATLAB
График с несколькими осями Y не обязательно должен быть традиционным математическим представлением. В карте погоды на рис. 7.46 используются пиктограммы,
иллюстрирующие ожидаемые погодные условия. Они выстроены вдоль той же самой
временной шкалы X, на базе которой построен график (также здесь работает следующий шаблон, Small Multiples (Небольшие образцы)).
В других библиотеках
http://quince.infragistics.com/Patterns/Multi-Y%20Graph.aspx
Шаблоны 339
Рис. 7.46. Карта погоды на веб-сайте The Weather Channel
Small Multiples (Небольшие образцы)
Рис. 7.47. Тепловая климатическая карта из публикации Орегонского университета
Что
Создайте множество небольших представлений данных в виде двумерных или трехмерных изображений. Выложите их на странице в одном или двух дополнительных
измерениях: рисунки должны образовывать либо одномерную последовательность,
либо двумерную матрицу.
Использовать, когда…
Необходимо вывести большой набор данных, имеющий больше двух измерений или
независимых переменных. Один «срез» данных можно с легкостью показать в виде
рисунка: графика, таблицы, карты или изображения; однако отобразить большее
340 Глава 7 • Отображение сложных данных: деревья, таблицы
­ оличество измерений за раз может быть сложно. Пользователям может понадобиться
к
просмотреть рисунки по одному, перелистывая их назад и вперед в поисках различий.
Для того чтобы использовать шаблон Small Multiples (Небольшие образцы), нужно
иметь достаточно вместительную область отображения. Редко удается применить его
успешно на мобильных устройствах, если только не выводить каждый образец крохотного размера. Большинство пользователей видят реализацию этого шаблона либо
на больших экранах, либо на отпечатанных документах.
С другой стороны, искрографики (sparkline) — это один из способов представления
небольших образцов, чрезвычайно удобный именно для небольших представлений,
таких как бегущая строка или столбец табличных ячеек. Фактически, это миниатюрный график, с которого убраны все метки и оси. Его единственное предназначение —
демонстрировать форму или очертания простого набора данных.
Почему
Небольшие образцы чрезвычайно насыщенны данными — они одновременно показывают огромное количество информации, но в очень доступном виде. Каждый
рисунок рассказывает свою историю, но если собрать их все вместе и показать, как
рисунок меняется в последовательности, то при этом становится очевидной еще более
обширная история.
Как сказал Эдвард Тафти в своей классической книге «Envisioning Information»
(издательство Graphics Press), «многомерные, насыщенные данными дизайны на
основе небольших образцов визуально демонстрируют изменения, отличия между
объектами, а также масштаб модификаций». (Тафти придумал название шаблона
и изложил в доступной форме идею небольших образцов — small multiples — в своей
книге о визуализации информации.)
Но что же делать, если вы показываете несколько измерений на отдельных изображениях, и при этом надо показать еще одно измерение, которое никак не изобразить
на имеющихся картинках? В этом случае у вас есть выбор.
Последовательное представление
Покажите, как это измерение меняется с течением времени. Например, можно
воспроизвести изображения последовательно в виде фильма или предоставить
пользователю кнопки Назад/Далее, чтобы он мог перелистывать изображения,
одновременно видя на экране только одно из них.
Трехмерное представление
Поместите изображения вдоль третьей пространственной оси, например оси Z.
Небольшие образцы
Снова используйте оси X и Y, но в более крупном масштабе.
Когда рисунки находятся рядом друг с другом, пользователь может быстро переводить взгляд с одного на другой. Ему не нужно запоминать, что находилось на предыдущем экране, как требует последовательное представление (хотя фильм может
быть очень эффективным орудием демонстрации мелких изменений между кадрами).
Пользователю также не приходится расшифровывать или вращать сложный трехмерный график, как в случае, когда двумерные рисунки располагаются вдоль третьей оси.
Последовательные и трехмерные представления иногда работают превосходно, но не
всегда и зачастую оказываются совершенно бесполезными в неинтерактивной среде.
Шаблоны 341
Как
Выберите, сколько дополнительных измерений вы будете представлять – одно или
два. В первом случае изображения можно выводить вертикально, горизонтально или
даже построчно, как комикс — начиная с первого образца и прослеживая изменения
по строкам; в итоге пользователь завершит изучение на последнем изображении.
В случае двух измерений нужно использовать двумерную таблицу или матрицу — одно
измерение выводится в столбцах, а второе — в строках.
Независимо от того, сколько измерений вы используете, снабжайте образцы четкими понятными заголовками, располагая их по краям изображения, а если необходимо,
добавьте заголовки на каждый образец. Удостоверьтесь, что пользователь понимает,
какое именно измерение данных меняется в образцах и сколько измерений данных вы
закодировали — одно или два.
Каждое изображение должно быть похожим на все остальные: используйте рисунки
одного размера и (или) формы, одну и ту же степень масштабирования по осям (в случае графиков) и один и тот же тип содержимого. Небольшие образцы предназначены
для того, чтобы подчеркнуть значимые различия между объектами. Попытайтесь исключить несущественные визуальные различия.
Конечно же, не следует помещать слишком много небольших образцов на одну страницу. Если одно из измерений данных заключается в диапазоне от 1 до 100, то, вероятно, вам не нужно 100 строк или столбцов небольших образцов, но что же тогда делать?
Можно «разложить» эти 100 значений, например, в пять «контейнеров» по 20 значений в каждом. Или можно использовать технику под названием черепитчатая укладка
(shingling), напоминающую раскладку по контейнерам, но допускающую значительное
перекрытие содержимого отдельных контейнеров. (Да, некоторые данные будут отображаться по нескольку раз, но для пользователей, ищущих в данных некоторую систему, это становится преимуществом; обязательно убедитесь, что представление четко
обозначено и пользователям не составит труда разобраться, что здесь происходит.)
Обратите внимание, что некоторые изображения небольших образцов с двумя дополнительными измерениями носят названия решетчатых графиков или решетчатых
диаграмм. Этот термин использует Уильям Кливленд (William Cleveland), признанный
авторитет в области статистической графики. Также этот термин можно встретить
в программных пакетах S-PLUS и R.
Примеры
Климатический график Северной Америки, показанный на рис. 7.47, включает множество закодированных переменных. В основе рисунка на каждом образце лежит, естественно, двумерная географическая карта, а поверх нее наложен цветокодированный
график одного из климатических показателей, например температуры. На каждом из
рисунков наблюдаются интересные фигуры, образованные цветовыми данными; они
заставляют зрителя задаваться вопросами, почему пятна цвета находятся над определенными частями континента.
Все вместе небольшие образцы кодируют две дополнительные переменные: каждый столбец представляет месяц года, а каждая строка — климатический показатель.
Вероятно, вы взглядом проследили изменения по строкам, то есть узнали, как погода
меняется в течение года, но сравнения внутри отдельных столбцов провести так же
несложно.
342 Глава 7 • Отображение сложных данных: деревья, таблицы
В примере на рис. 7.48 решетка используется для кодирования двух независимых
переменных — этнической/религиозной принадлежности и уровня дохода — распределенных по географическому признаку, то есть по штатам США. Зависимая
переменная, закодированная цветом, представляет ожидаемый уровень общественной поддержки школьной программы по использованию чеков (оранжевый означает
полную поддержку, а зеленый наоборот). Результирующий график насыщен детальной
информацией и сообщает множество интересных сведений об отношении американцев
к этой программе.
Рис. 7.48. График с небольшими образцами для географических и демографических данных
(http://www.stat.columbia.edu/~cook/movabletype/archives/2009/07/hard_sell_for_b.html)
На снимке экрана (рис. 7.49) показан более абстрактный двумерный решетчатый
график, также называемый в книге Уильяма Кливленда «Visualizing Data» словом
Шаблоны 343
«coplot» (сокращение от conditioning plot — определяющий график). Этот пример,
созданный в программном пакете ����������������������������������������������
R���������������������������������������������
, демонстрирует множество, оцениваемое по четырем измерениям: широта, долгота, глубина и амплитуда. Значения в измерениях
глубины и амплитуды перекрывают друг друга — это техника черепитчатой укладки,
упомянутая ранее.
Рис. 7.49. Двумерный решетчатый график данных по землетрясениям
(http://www.sph.umich.edu/~nichols/biostat_bbag-march2001.pdf)
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,298,17,0,0,319
http://quince.infragistics.com/Patterns/Small%20Multiples.aspx
Также рекомендую обратиться к упомянутым выше работам Эдварда Тафти и Уиль­
яма Кливленда.
344 Глава 7 • Отображение сложных данных: деревья, таблицы
Treemap (Древовидная карта)
Рис. 7.50. Карта рынка на веб-сайте SmartMoney
(http://www.smartmoney.com/map-of-the-market/)
Что
Показывайте многомерные и (или) иерархические данные в виде прямоугольников
разных размеров. Можно вкладывать эти прямоугольники друг в друга для обозначения иерархии либо помечать их цветом или текстом для отображения дополнительных
переменных.
Использовать, когда…
Данные организованы в виде дерева. Также они могут быть многомерными — у каждого элемента несколько атрибутов, например размер и категория, что позволяет группировать элементы согласно значениям атрибутов. Пользователям необходимо видеть
общее представление множества данных — возможно, сотен или тысяч, — и экраны их
компьютеров достаточно велики, чтобы вместить большое изображение.
Пользователи должны быть достаточно терпеливы и мотивированы, чтобы научиться использовать этот необычный интерфейс. Древовидные карты не всегда легко
читать, особенно людям, никогда не встречавшимся с ними ранее. Помимо этого, карты
лучше работают на экране, чем на бумаге, так как понимать представленные данные
пользователям помогают всплывающие подсказки, динамические запросы и прочие
интерактивные механизмы.
Почему
В древовидных картах множество атрибутов данных показаны на одной насыщенной
информацией диаграмме. Используя позиционирование, размер, локализацию, цветовые оттенки и (или) значения, а также текстовые метки элементов, древовидные карты
Шаблоны 345
позволяют «упаковать» огромное количество данных в один интерфейс, в котором
взгляд человека автоматически начинает искать тенденции, взаимоотношения между
отдельными переменными и интересующими его данными.
Взгляните на древовидную карту с веб-сайта SmartMoney, где показаны характеристики более 500 акций публичной подписки за последние 52 недели. Здесь обозначены
относительные размеры различных секторов рынка, а также компаний, работающих
в этих секторах, — блоки сплошного цвета соответствуют отдельным компаниям.
Можно мгновенно увидеть, что наибольшую прибыль (ярко-зеленый цвет) за последний год получили компании из категорий «Технология» (Technology) и «Цикличные
компании по выпуску потребительских товаров» (Consumer Cyclicals); категории
«Финансы» (Financial) и «Энергия» (Energy) большей частью красные, значит, для
них год прошел не так хорошо.
При помощи этой древовидной карты очень легко получить общее представление
и выделить изолированные объекты. Она помогает вам улавливать взаимосвязи между
размером и цветом, размером и местоположением, местоположением и цветом — все
это дает очень разные представления о рынке и позволяет проникнуть в глубь происходящих процессов. Вы бы потратили куда больше времени, пытаясь понять это путем
изучения длинных таблиц курсов акций.
Как
Критически важный шаг при разработке древовидной таблицы заключается в том,
чтобы определить, какими визуальными переменными будут кодироваться атрибуты
данных.
Размер прямоугольника
Обычно размер прямоугольника обозначает число, например размер, цену или
процентное значение. Необходимо, чтобы площадь прямоугольника была пропорциональна этому числу. Если диапазон чисел слишком велик, в итоге у вас
по­лучается несколько огромных прямоугольников и несколько микроскопических; в этом случае можно позволять пользователю либо увеличивать масштаб
изображения, чтобы детально изучать мелкие данные, либо убирать крупные
прямоугольники с автоматическим увеличением более мелких. Для этого часто
применяются динамические запросы (см. одноименный шаблон в этой главе). На
рис. 7.24 показан пример использования динамических запросов совместно с древовидной картой.
Группировка и вложение
Если данные сами по себе обладают иерархической структурой, как, например,
таксономическое дерево или файловая система, то следует соответствующим образом группировать и вкладывать друг в друга прямоугольники. Если же нет, то
проверьте, существует ли среди элементов данных естественная группировка или
категоризация, имеющая смысл для пользователя. Возможно ли несколько разных
способов разбиения на категории? Можно предоставить пользователю выбор, каким именно образом сгруппировать данные на экране. Очевидного способа разбить
данные на категории нет? Тогда можно выбрать числовой атрибут, например цену,
и «разложить» информацию по «контейнерам» (от $0 до $5, от $5 до $10 и т. д.).
Также можно вообще не группировать элементы данных. Подумайте, может быть
346 Глава 7 • Отображение сложных данных: деревья, таблицы
лучше подойдет какой-то другой вариант отображения данных, так как группировка — это одна из самых сильных сторон древовидных карт.
Цвет
Цвет можно применять для представления числовых или упорядоченных
каким-либо другим образом данных, как в примере с веб-сайта SmartMoney на
рис. 7.50, а также для обозначения категорий. Для числовых значений выберите
два цвета, которые будут соответствовать конечным точкам диапазона возможных
значений, например красный и зеленый, белый и синий или желтый и красный;
оттенки цвета между этими конечными точками будут представлять различные значения диапазона. В случае разбиения на категории используйте отдельный цвет для
представления каждой категории. (Если оттенки будут очень похожими, то у зрителей может возникнуть впечатление наличия упорядоченности там, где ее нет.)
Позиция
Местоположение прямоугольника на древовидной карте частично диктуется
его положением в иерархии или категоризации. Однако и в пределах одной категории у вас может быть достаточно свободы для определения местоположения.
На некоторых древовидных картах самые большие прямоугольники размещаются
в верхнем левом углу категории, а затем оставшееся пространство заполняется так,
чтобы прямоугольники наименьшего размера оказались в нижнем правом углу.
Это придает странице ритмичность и упрощает для пользователей визуальное
сравнение числа маленьких или больших прямоугольников в основных категориях.
В рассматриваемом примере позиция не представляет собой дополнительную переменную; она только дублирует размер и группировку. Однако в других реализациях
древовидной карты передается порядок сортировки — например, по возрасту или
по имени в алфавитном порядке. Это зависит от того, как много переменных необходимо одновременно передать.
Большинство древовидных карт позволяют пользователям погружаться в отдельные элементы данных. Например, при наведении указателя мыши появляются большие всплывающие подсказки, полностью описывающие элемент (см. шаблон Datatips
(Всплывающие данные) в этой главе). Обычно, для того чтобы вместить описания
в прямоугольники древовидной карты, приходится исключать часть текста, так что
всплывающие подсказки оказывают большую помощь. Помимо этого, одинарный или
двойной щелчок мыши часто переводит пользователя на другую страницу или в окно,
посвященное соответствующему элементу.
Что касается реализации, написать код для удачной и привлекательной компоновки древовидной карты — это нетривиальная задача. К счастью, существует множество
алгоритмов построения древовидной карты. Одни представляют собой ученые труды;
другие принимают вид программного обеспечения с открытым кодом или бесплатных
программ; третьи «встроены» в продукты. Различия в алгоритмах сводятся в основном
к тому, как они выбирают соотношения сторон прямоугольников (то есть отношение
ширины к высоте; чем ближе к квадрату, тем лучше), как заполняют пространство
для каждой категории и насколько стабильны по отношению к изменениям данных.
Древовидные карты могут требовать дополнительных пояснений. Подобное представление данных обладает большой ценностью для терпеливых и опытных пользователей, но если человек не знаком с подобным представлением или недостаточно
Шаблоны 347
мотивирован на то, чтобы потратить время и изучить его, то значение прямоугольников от него ускользнет. Если у вас есть основания полагать, что большинство ваших
пользователей закроют страницу, даже не попытавшись разобраться в древовидной
карте, подумайте, не упростить ли ее или, может, заменить более привычным представлением.
Примеры
Уже не существующее сегодня веб-приложение Newsmap (рис. 7.51) иллюстрирует
«ландшафт новостей», как он представлен в Google News. В любой момент времени
Newsmap�����������������������������������������������������������������������
может собрать основные заголовки новостей в ��������������������������
Google��������������������
и нарисовать древовидную карту, в которой самые большие прямоугольники будут представлять наиболее
популярные истории. Используется следующая кодировка:
‰‰размер блока: популярность новости; сколько источников сообщили об этой истории;
‰‰цветовой тон: тема;
‰‰группировка верхнего уровня: также тема;
‰‰значение цвета (темнее/светлее): срок давности.
Так как размер текста в заголовках пропорционален размеру блоков, который,
в свою очередь, пропорционален популярности, ваш взгляд немедленно притягивается
к самым большим элементам. Что вы прочитали здесь в первую очередь? Вероятно,
заголовок False warnings (Фальшивые предупреждения), а затем Please Work for Free!
(Пожалуйста, работайте бесплатно!) Таким образом, древовидная карта представляет
собой автоматически создаваемую визуальную иерархию.
Рис. 7.51. Веб-приложение Newsmap
348 Глава 7 • Отображение сложных данных: деревья, таблицы
На веб-сайте ���������������������������������������������������������������
Hive�����������������������������������������������������������
Group�����������������������������������������������������
����������������������������������������������������������
можно найти небольшой набор похожих вариантов визуализации древовидных карт: товары, продаваемые на Amazon.com, данные о населении
Земли и т. д. На рис. 7.52 показан список статей, которые последними перечислялись
в рекламе Digg.
У пользователя есть возможность настраивать некоторые виды кодирования информации: размер блока, цвет и группировку — при помощи панели в верхней части
окна (Group by (Группировать по…), Size represents (Размер представляет…) и Color
represents (Цвет представляет…)). Такой вариант настройки очень удобен в подобном
приложении. В конце концов, с каждой статьей ассоциируется множество атрибутов
данных — слишком много, чтобы их можно было передать доступными тремя или
четырьмя визуальными переменными. Разработчикам древовидной карты не было
заранее известно, в каких атрибутах пользователь будет заинтересован больше всего.
Они сделали хорошие предположения по умолчанию и поместили в интерфейс простые и понятные элементы управления, позволяющие пользователям самостоятельно
управлять представлением.
Рис. 7.52. Визуализация статей Digg на веб-сайте Hive Group
(http://www.hivegroup.com/gallery/)
В других библиотеках
http://patternbrowser.org/code/pattern/pattern_anzeigen.php?4,215,17,0,0,236
http://quince.infragistics.com/Patterns/Treemap.aspx
Бен Шнейдерман изобрел древовидные карты в 1990 году, и с тех пор он и его коллеги из университета Мэриленда занимаются усовершенствованием данной техники.
Историю древовидной карты, а также множество ссылок на документы и реализации
можно найти на веб-сайте http://www.cs.umd.edu/hcil/treemap-history/
Получение данных
от пользователя:
формы и элементы
управления
8
Рано или поздно разрабатываемое вами программное обеспечение обязательно попросит пользователя ответить на какой-либо вопрос. Это может произойти даже
в первые несколько минут взаимодействия между ними: куда следует установить
данное приложение? Под каким именем вы будете входить в систему? По каким словам выполнить поиск?
Такие типы взаимодействия реализовать проще всего. Каждый знает, как работать
с текстовыми полями, флажками и комбинированными полями. Эти элементы управления вводом часто становятся первыми элементами интерфейса, которые новичкидизайнеры используют при построении своих первых графических интерфейсов или
веб-сайтов.
Создать неуклюжую форму взаимодействия пользователя и приложения совсем
несложно. Например, приложение может задать такой вопрос: для какого района вы
хотите получить прогноз погоды? Пользователь задумывается — нужно ли ему указать город, страну или почтовый индекс? А аббревиатуры достаточно? А что будет,
если допустить орфографическую ошибку? А что, если запросить город, неизвестный
системе? А нет ли здесь карты, чтобы выбрать место одним щелчком мыши? И почему
система не могла запомнить район, который он уже выбирал вчера?
В этой главе обсуждаются способы, позволяющие избавиться от подобных проблем.
Шаблоны, техники и элементы управления, о которых здесь пойдет речь, в основном
применяются для дизайна форм, где под «формой» понимается простая последовательность пар вопросов и ответов. Однако они будут полезными и в других контекстах,
например когда речь идет о единичных элементах управления на веб-страницах или
о панелях инструментов в приложениях. Дизайн ввода данных и дизайн форм — это
ключевые навыки для дизайнеров интерфейсов, так как их можно применять в любых
отраслях дизайна и на любых платформах.
Основы дизайна форм
Для начала я перечислю несколько принципов, о которых следует помнить при создании форм и средств пользовательского ввода данных.
350 Глава 8 • Получение данных от пользователя: формы и элементы управления
Удостоверьтесь, что пользователь понимает, какие данные у него запрашивают
и зачем.
Здесь все зависит исключительно от содержимого, и любое обобщение может
оказаться бессмысленным, но я попробую. Для написания меток нужно использовать слова, которые понимает ваша целевая аудитория, — простой язык для
новичков и редких пользователей и тщательно продуманный профессиональный
жаргон или специализированный словарь для экспертов в данной предметной
области. В длинной или скучной форме потратьте немного пространства на объяснение, зачем вам нужна вся эта информация, разбейте форму на описательные
именованные разделы и пообещайте пользователю сохранность конфиденциальных
данных. Если вы помещаете на панель инструментов (или в другое место, также
ограниченное в пространстве) элемент управления, назначение которого неочевидно, добавьте описательную всплывающую подсказку или контекстно-зависимую
справку другого типа, чтобы сообщить пользователю, что делает данный элемент.
Если возможно, вообще не задавайте вопросы.
Задавая пользователю вопрос, особенно если это происходит в процессе выполнения какой-либо другой задачи, вы оказываете на него давление. Вы заставляете его прервать поток размышлений и переключить внимание на то, чего
он совершенно не ожидал. Даже в самых благоприятных ситуациях ввод данных
в текстовые поля — это не то, чем люди предпочли бы заниматься для собственного
развле­чения. Можно ли заранее заполнить элементы управления вводом известной или предсказуемой информацией, как рекомендует шаблон Autocompletion
(Авто­заполнение)? Можно ли предложить разумное значение по умолчанию, которое снимет задачу выбора с 80 % ваших пользователей? Можно ли не задавать
вопросы?
В этом принципе есть одно важное исключение — безопасность. Иногда элементы управления вводом используются для идентификации пользователя; например,
приложение запрашивает пароль или номер кредитной карты. Очевидно, что не
следует пытаться вводить в заблуждение такие механизмы безопасности, небрежно
заполняя поля ввода данных конфиденциальной информацией.
Знания «из внешнего мира» зачастую точнее, чем знания «в голове»1.
Не стоит ожидать от людей, что они с легкостью будут запоминать различные
списки и перечисления. Если вы просите пользователя сделать выбор из пред­
определенного набора элементов, то предоставьте ему этот набор или список, чтобы
он мог без труда просмотреть его содержимое. Раскрывающиеся списки, комбинированные поля, простые списки и прочие подобные элементы управления дают
пользователям возможность просматривать наборы элементов.
(Очевидно, что люди в состоянии запомнить собственное имя, день рождения, адрес, город или страну, номер телефона и другую личную информацию —
и легко и просто могут вводить ее в разнообразные формы. Здесь необходимости
1
Согласно концепции американского психолога Дональда Нормана, знания, которыми мы пользуемся автоматически (например, слепая печать), относятся к «знаниям в голове», а знания,
которые мы получаем извне, чтобы осуществить какое-то малопонятное действие, относятся
к знаниям «из внешнего мира» (человек, увидевший клавиатуру впервые, будет искать надпись
на каждой клавише, чтобы понять, какую букву она отобразит при нажатии).
Основы дизайна форм 351
в «знаниях­ из внешнего мира» нет; текстовых полей достаточно, тем более, что
они удобнее раскрывающихся меню.)
Аналогично, если вы просите пользователя ввести данные, отформатированные
особым образом, то нужно сообщить ему с помощью подсказки, какой именно
формат ожидается в каждом конкретном случае. Даже если пользователь уже
встречался с пользовательским интерфейсом вашей программы ранее, он может
не помнить, что именно здесь требуется, и ненавязчивое напоминание будет очень
кстати. Этой цели служат шаблоны Good Defaults (Хорошие варианты по умолчанию), Structured Format (Структурированный формат) и Input Hints (Подсказки
при вводе). Шаблон Autocompletion (Автозаполнение) идет на шаг впереди, показывая пользователю допустимый формат вводимых данных или напоминая ему,
что он вводил в том же месте раньше.
Аккуратно обрабатывайте ошибки и по возможности будьте великодушны.
Сделайте так, чтобы дату, адрес, номер телефона, номер кредитной карты
и подобные сведения можно было вводить в различных форматах — пользуйтесь
преимуществами шаблона Forgiving Format («Великодушный» формат). Если
пользователь все же вводит неправильную информацию, то сообщение об ошибке
должно появляться сразу же, как только становится понятно, что форма заполняется неправильно (иногда для проверки приходится ждать, когда будут заполнены
еще несколько полей). Прямо на странице формы вежливо укажите, в каком поле
кроется ошибка, в чем она заключается и как пользователь может ее устранить. См.
шаблоны Password Strength Meter (Измеритель надежности пароля) и Same-Page
Error Messages (Сообщения об ошибках на той же странице).
Остерегайтесь буквального воспроизведения программной модели, лежащей
в основе приложения.
Многие формы создаются специально для редактирования записей в базе
данных или для редактирования объектов в объектно-ориентированном языке
программирования. Имея на руках подобную структуру данных, очень легко разработать форму для ее заполнения. Каждый элемент структуры получает, во-первых,
метку и, во-вторых, элемент управления (или набор сгруппированных элементов
управления). Они сортируются в разумном порядке, перечисляются сверху вниз,
и форма готова, не так ли?
Не совсем. Дизайн, буквально отражающий структуру данных, работает довольно хорошо, но в итоге интерфейс получается либо утилитарный и скучный,
либо слишком сложный. Что, если элементы структуры не соответствуют тому,
какие данные пользователь ожидает ввести? А что, если структура содержит, скажем, тридцать элементов? В некоторых контекстах, например в таблицах свойств
в программных средах, допустимо отображать структуры так, как они фактически
реализованы, — в этом и заключается смысл. Но для всего остального лучше подходит более элегантное и ориентированное на пользователя представление.
Итак, проблема заключается в следующем: можно ли сделать форму менее обременительной, сыграв на зависимостях между элементами структуры, знакомых
графических конструкциях (например, этикетках с адресом), несформулированных
предположениях или сведениях о пользователе, полученных при предыдущем
взаимодействии с ним? Можно ли упростить проблему так, чтобы ее можно было
решить прямой манипуляцией, например путем перетаскивания объектов по экрану? Проявляйте фантазию!
352 Глава 8 • Получение данных от пользователя: формы и элементы управления
Всегда тестируйте удобство использования.
Вследствие определенных причин, когда речь идет о формах для ввода данных,
разработчики и пользователи часто делают принципиально разные предположения относительно терминологии, возможных ответов, навязчивости и вопросов,
связанных с контекстом использования. Я уже говорила это раньше и повторю
еще раз: всегда тестируйте удобство использования, даже если вы уверены, что
у вас получился хороший дизайн. Это даст вам подкрепленные реальным опытом
свидетельства того, что работает, а что нет в вашей конкретной ситуации.
Выбор элементов управления влияет на то, какие вопросы будет ожидать пользователь, так что подходите к этому с умом.
Переключатель предполагает выбор одного элемента из группы, а текстовое
поле из одной строки подталкивает к короткому, но довольно свободному по форме
ответу. Сознательно или нет, пользователи основываются на физической форме
элемента управления — его типе, размере и т. д., — когда размышляют о том, что
у них спрашивают, и их ожидания формируются соответствующим образом. Если
вы используете текстовое поле для запроса числа, то пользователи полагают, что
допустимы любые значения; когда они вводят 12, а вы удивляете их сообщением
«Допустимый диапазон чисел — от 1 до 10», это выбивает почву из-под ног. Ползунок или счетчик был бы в данной ситуации намного лучшим решением.
В следующем разделе представлен список возможных элементов управления
для разнообразных типов пользовательского ввода. Вы сами или разработчики,
с которыми вы сотрудничаете, должны принимать решения относительно семантики каждого вопроса. Это бинарное значение? Дата или время? Выбор одного
элемента из нескольких? Выбор нескольких элементов из многих доступных?
Допускающее вариации, но требующее проверки значение? Выясните это, а затем
выберите элемент управления, основываясь на ограничениях конкретного дизайна.
Выбор элементов управления
Далее описаны элементы управления и шаблоны для различных типов информации,
которую вы, вероятно, будете запрашивать у пользователей, например для числовых
значений или списка, допускающего выбор одного элемента. Естественно, ни в коем
случае этот набор нельзя считать полным. В действительности вы можете придумать
множество других элементов управления. Однако перечисленные здесь типы данных
довольно распространены, а элементы управления прекрасно подходят для создания
понятных и удобных интерфейсов.
При выборе среди возможных элементов управления для каждого типа информации основывайтесь на следующих факторах.
Доступное пространство
Одни элементы управления занимают много экранного пространства, другие
могут быть меньше по размеру, но сложнее в использовании, чем более крупные.
В коротких формах на веб-страницах можно тратить экранное пространство на
переключатели или иллюстрированные списки, но в сложных приложениях обычно
возникает необходимость упаковать как можно больше содержимого в как можно
меньшее пространство. Панели инструментов и таблицы свойств накладывают
Выбор элементов управления 353
особенно сильные ограничения, так как чаще всего их высота допускает только
одну строку текста, и по ширине они также обычно бывают небольшими.
Умение пользователя обращаться с компьютером в целом
Текстовые поля знакомы практически всем пользователям любых приложений,
которые вы можете разрабатывать, но не у каждого получится с легкостью разобраться в использовании ползунка с двумя бегунками. Если на то пошло, многие
случайные пользователи компьютера также не имеют представления, как обращаться с окном списка, допускающим множественный выбор.
Опыт пользователя в предметной области
Текстовое поле представляет собой прекрасный выбор элемента управления,
если все пользователи знают, что, предположим, в данном месте допустимы только значения от 1 до 10 и от 20 до 30. Новички могут сделать ошибку, но если они
составляют очень малую часть пользовательской аудитории (и если контекст достаточно прост для изучения), то можно не обращать на это внимания — крохотное
текстовое поле все равно может быть намного удобнее использовать, чем большой
набор взаимосвязанных элементов управления.
Ожидания, сформированные другими приложениями
Выделение текста жирным шрифтом, подчеркнутым шрифтом или курсивом,
как правило, осуществляется кнопками с соответствующими пиктограммами. Было
бы странно, если бы в вашем приложении это задавалось переключателями.
Доступная технология
На момент написания этой главы язык HTML предоставлял очень небольшой
набор элементов управления, которые используются в настольных приложениях:
текстовые поля, переключатели и флажки, прокручиваемые списки и раскрывающиеся списки, допускающие ввод значений. Коммерческие средства для разработки
графических интерфейсов пользователя и инструменты с открытым кодом обеспечивают дизайнера более широким ассортиментом элементов управления. Набор
предлагаемых ими элементов управления может варьироваться, но большинство
таких инструментов допускают программное расширение, благодаря чему можно
создавать специальные элементы управления для особых ситуаций.
В следующих разделах перечисляются разнообразные варианты элементов управления для четырех наиболее распространенных сценариев пользовательского ввода:
списки элементов, текст, числа, дата и время. Каждый вариант иллюстрируется типичным примером, взятым из Windows 2000. (Помните, что эти примеры не обязательно
демонстрируют наилучшие варианты визуализации соответствующих элементов
управления! У вас есть свобода решить, как рисовать их и выводить на экране, особенно если речь идет о разработке для веб-приложений и сайтов. Подробное обсуждение
см. во введении к главе 9.)
Списки элементов
Огромный ассортимент знакомых элементов управления позволяет пользователям
выбирать пункты или варианты из списков. Ваш выбор элемента управления зависит
от того, сколько пунктов или вариантов разрешается выбирать пользователю (один
или много), а также от числа пунктов в списке (два, несколько или много).
354 Глава 8 • Получение данных от пользователя: формы и элементы управления
Элементы управления для выбора одного из двух вариантов (бинарный выбор)
Флажок
Преимущества: простой, занимает мало места.
Недостатки: недвусмысленно определяет только один
вариант, поэтому его противоположность остается неявной и несформулированной. В результате пользователь может не понять, что означает сброшенный
флажок.
Два переключателя
Преимущества: оба варианта сформулированы и видны
на экране.
Недостатки: занимают больше места.
Раскрывающийся список с двумя вариантами выбора
Преимущества: оба варианта сформулированы; небольшой и предсказуемый объем занимаемого пространства;
простое расширение при необходимости добавления более чем двух вариантов.
Недостатки: одновременно на экране виден только один вариант; требует определенной сноровки.
«Залипающая» кнопка-переключатель
Преимущества: те же, что и у флажка; традиционный
элемент управления, занимает мало экранного про­
странства.
Недостатки: те же, что и у флажка; помимо этого, в отличие от флажка, не воспринимается в качестве стандартного элемента управления для выбора текстовых
значений.
Элементы управления для выбора одного из N элементов,
когда число N невелико
N переключателей
Преимущества: все варианты выбора всегда видны на экране.
Недостатки: занимает много места.
Раскрывающийся список из N элементов
Преимущества: занимает мало места.
Недостатки: одновременно виден только один вариант выбора,
за исключением ситуации, когда список открыт; требует определенной сноровки.
Набор из N взаимоисключающих пиктографических кнопок-переключателей
Преимущества: занимает мало места; видны все
варианты выбора.
Выбор элементов управления 355
Недостатки: значки могут быть сложными для понимания и требовать всплывающих подсказок; пользователи могут не осознавать, что варианты выбора
взаимоисключающие.
Список или таблица, допускающие единственный выбор
Преимущества: видны несколько вариантов выбора; рамку
можно сделать совсем небольшой, оставив на виду только
три элемента.
Недостатки: занимает больше места, чем раскрывающийся
список или счетчик.
Счетчик
Преимущества: занимает мало места.
Недостатки: одновременно виден только один вариант выбора;
требует большой сноровки; незнаком неподготовленным пользователям. Обычно лучше использовать раскрывающийся список.
Элементы управления для выбора одного из N элементов, когда N велико
Раскрывающийся список из N элементов, при необходимости прокручиваемый
Преимущества: занимает мало места.
Недостатки: одновременно виден только один вариант
выбора, за исключением ситуации, когда список раскрыт;
требует большой сноровки для прокручивания элементов
в раскрывающемся списке.
Список или таблица, допускающие единственный выбор
Преимущества: видны несколько вариантов выбора; при необходимости можно сделать совсем небольшим.
Недостатки: занимает больше места, чем раскрывающийся
список.
Допускающее единственный выбор дерево или каскадный список с элементами,
разбитыми на категории
Преимущества: видны несколько вариантов выбора;
в определенных случаях организация данных облегчает поиск элементов.
Недостатки: могут быть незнакомы неподготовленным пользователям; занимают много места; требуют
большой сноровки.
356 Глава 8 • Получение данных от пользователя: формы и элементы управления
Нестандартная реализация браузера, например, для поиска файлов, цветов или
шрифтов
Преимущества: хорошо подходит для просмотра доступных вариантов.
Недостатки: может быть незнаком некоторым пользователям; сложен в разработке
дизайна; чаще всего представляет собой отдельное окно, поэтому его быстродействие обычно ниже, чем у элементов управления, находящихся прямо на
странице.
Элементы управления для выбора нескольких из N элементов в любом порядке
Массив из N флажков
Преимущества: все варианты сформулированы и видны на экране.
Недостатки: занимает много места.
Массив из N «залипающих» кнопок
Преимущества: занимает мало места; все варианты
выбора видны на экране.
Недостатки: значки могут быть сложными для понимания и требовать всплывающих подсказок; кнопки могут показаться взаимоисключающими.
Список или таблица, допускающие множественный выбор
Преимущества: на экране видны несколько вариантов выбора; при необходимости можно сделать этот элемент очень
небольшим.
Недостатки: не все варианты выбора видны без прокрутки;
занимает много места (но заключается в ограниченном пространстве); пользователи могут не понимать, что список
допускает множественный выбор.
Выбор элементов управления 357
Список элементов, представляющих собой флажки
Преимущества: на экране видны несколько вариантов выбора; при необходимости этот элемент управления можно
сделать совсем небольшим; средство выбора (флажок) представлено очевидным образом.
Недостатки: не все варианты выбора видны без прокрутки;
занимает много места (но заключается в ограниченном пространстве).
Допускающее множественный выбор дерево или каскадный список, элементы
которого разбиты на категории
Преимущества: на экране видны несколько вариантов
выбора; в определенных случаях организация данных
облегчает поиск элементов.
Недостатки: могут быть незнакомы неподготовленным пользователям; требуют большой сноровки; выглядят так же, как дерево или список с единственным
выбором.
Пользовательский вариант браузера, например, для поиска файлов, цветов или
шрифтов
Преимущества: хорошо подходит для просмотра доступных вариантов.
Недостатки: может быть незнаком некоторым пользователям; сложен в разработке
дизайна; чаще всего представляет собой отдельное окно, поэтому его быстродействие обычно ниже, чем у элементов управления, находящихся непосредственно
на странице.
358 Глава 8 • Получение данных от пользователя: формы и элементы управления
Шаблон List Builder (Компоновщик списков)
Преимущества: выбранный набор очень просто просмотреть; список может быть
упорядоченным; упрощает работу с большим исходным списком.
Недостатки: занимает очень много места из-за наличия двух списков; сложно
работать с большим набором выбранных объектов.
Элементы управления для создания неупорядоченного списка
вводимых пользователем элементов
Список или таблица с кнопкой Add (Добавить) или New (Создать)
Преимущества: действие добавления очевидно и четко
показано на экране.
Недостатки: занимает много места; визуальная перегруженность.
Список или таблица с применением шаблона New Item Row (Строка для нового
элемента)
Преимущества: занимает мало места; редактирование выполняется на месте.
Недостатки: действие добавления не так очевидно, как выраженное при помощи кнопки.
Список или таблица, поддерживающие вставку путем перетаскивания элементов
Преимущества: визуально элегантное и компактное решение;
перетаскивание представляет собой эффективное и интуитивно понятное действие.
Недостатки: действие добавления не визуализировано, поэтому пользователи могут не знать, что объекты нужно перетаскивать в список.
Выбор элементов управления 359
Элементы управления для создания упорядоченного списка элементов
Неупорядоченный список со стрелками для перемещения элементов вверх и вниз
Преимущества: действия по изменению порядка элементов наглядно представлены на экране.
Недостатки: занимает много места.
Неупорядоченный список, внутри которого возможно перетаскивание элементов
Преимущества: визуально элегантное и компактное решение;
перетаскивание представляет собой эффективное и интуитивно понятное действие.
Недостатки: действия по перемещению неочевидны, поэтому пользователи могут не знать, что они доступны.
Текст
Получение вводимого пользователем текста — это одна из простейших задач, выполняемых формами. Элементы управления обычно выбираются в зависимости от
числа строк во вводимом тексте, от того, определяются ли строки заранее, может ли
пользователь вводить произвольный текст, и содержит ли текст форматирование.
Элементы управления для ввода одной строки текста
Текстовое поле из одной строки
Элементы управления для ввода одной строки текста
либо выбора одного из N вариантов
Комбинированное поле
Преимущества: реагирует на действия пользователя быстрее,
чем отдельное диалоговое окно; знакомо всем пользователям.
Недостатки: чтобы сохранить разумную длину раскрывающегося списка, приходится ограничивать число элементов.
Текстовое поле с кнопкой Дополнительно (также можно использовать ее с комбинированным полем, а не текстовым)
Преимущества: позволяет открывать специализированное диалоговое окно для выбора элемента, например утилиту поиска файлов или раскрывающийся список.
Недостатки: менее знакомо некоторым пользователям, чем комбинированное поле;
медленнее в использовании.
360 Глава 8 • Получение данных от пользователя: формы и элементы управления
Элементы управления для ввода нескольких строк неформатированного текста
Текстовая область шириной в несколько строк
Элементы управления для ввода нескольких строк форматированного текста
Текстовая область со встроенными тегами
Преимущества: опытные пользователи могут не прибегать к помощи панели инструментов, напрямую вводя теги.
Недостатки: не относится к классу редакторов WYSIWYG (what you see is what
you get — что видишь, то и получаешь).
Усовершенствованный текстовый редактор
Преимущества: мгновенная реакция, так как редактируемый текст играет роль содержимого для предварительного просмотра.
Недостатки: необходимо использовать панель инструментов, так что работа только
при помощи клавиатуры невозможна.
Выбор элементов управления 361
Числа
Так как числа зачастую должны отвечать сложным правилам форматирования, ввод
числа в форму — это несколько более сложная задача, чем ввод обычного текста. Выбор
вариантов ввода зависит от типа вводимого числа, а также от допустимого диапазона.
Элементы управления для ввода чисел любого типа или формата
Текстовое поле с использованием шаблона Forgiving Format («Великодушный
формат»)
Преимущества: визуально элегантное решение; допускает множество форматов и типов данных.
Недостатки: по виду элемента управления нельзя сделать однозначный вывод
об ожидаемом формате, из-за чего пользователь может временно прийти в замешательство; требует внимательной проверки введенных данных внутри
приложения.
Текстовое поле с использованием шаблона Structured Format (Структурированный формат)
Преимущества: желаемый формат однозначно определяется,
исходя из формы элемента управления.
Недостатки: может занимать больше места; большая визуальная сложность; не
позволяет отклоняться от определенного формата, даже когда это необходимо;
сложнее для разбора технологиями чтения экрана.
Счетчик (лучше подходит для целых чисел или дискретных значений)
Преимущества: пользователь может выбрать нужное значение, наводя
курсор на кнопку и щелкая кнопкой мыши и не прикасаясь к клавиатуре; также при необходимости возможен ввод с клавиатуры.
Недостатки: незнаком некоторым пользователям; для того чтобы открыть нужное
значение, может потребоваться длительное удержание кнопки; требует сноровки
для работы с очень мелкими кнопками.
Элементы управления для ввода чисел из ограниченного диапазона
Ползунок
Преимущества: очевидная метафора; визуально демонстрируется позиция значения в диапазоне; пользователь не может ввести
число за пределами диапазона.
Недостатки: занимает много места; неочевиден способ доступа с клавиатуры; отметки значений могут загромождать представление.
Счетчик
Преимущества: когда используются кнопки, значения ограничиваются
определенным диапазоном; занимает мало места; возможен ввод как
с клавиатуры, так и исключительно при помощи мыши.
362 Глава 8 • Получение данных от пользователя: формы и элементы управления
Недостатки: знаком не всем пользователям; требует сноровки для использования
очень мелких кнопок; необходима проверка; невозможно визуально определить
положение значения в диапазоне.
Текстовое поле с проверкой ошибок по факту (могут использоваться шаблоны
Input Hints (Подсказки при вводе), Input Prompt (Приглашение к вводу) и т. д.)
Преимущества: знакомо всем пользователям; занимает
мало места; возможен доступ только с клавиатуры.
Недостатки: необходима проверка; никаких ограни­чений
на вводимое значение не накладывается, поэтому сообщать пользователю о допустимом диапазоне приходится другими спо­собами.
Ползунок с текстовым полем (может принимать форму раскрывающегося селектора с ползунком в раскрывающейся части)
Преимущества: допускает визуальный и числовой
ввод.
Недостатки: сложен; когда оба элемента находятся на странице, занимает много
места; требует проверки текстового поля, если пользователь вводит значение
с клавиатуры.
Элементы управления для ввода части более крупного диапазона
Двойной ползунок (может использоваться совместно с двумя текстовыми
­полями)
Преимущества: занимает меньше места, чем два ползунка.
Недостатки: незнаком большинству пользователей; отсутствует доступ с клавиатуры, если только не используются текстовые поля.
Два ползунка (также могут сочетаться с текстовыми полями)
Преимущества: выглядят не так пугающе, как двойной ползунок.
Недостатки: занимают очень много места; также отсутствует
доступ с клавиатуры, если только не используются текстовые
поля.
Два счетчика (могут быть связаны при помощи шаблона Fill-in-the-Blanks (Заполнение пропусков))
Преимущества: когда используются кнопки, диапазоны значений ограничены;
занимают мало места; поддерживают ввод как с клавиатуры, так
и при помощи мыши.
Недостатки: незнакомы некоторым пользователям; требуют сноровки при использовании очень мелких кнопок; необходима проверка; отсутствует визуальное
представление позиции значения в диапазоне.
Два текстовых поля с проверкой ошибок (могут использоваться шаблоны Input
Hints (Подсказки при вводе), Input Prompt (Приглашение к вводу), Fill-in-theBlanks (Заполнение пропусков))
Преимущества: знакомы всем пользователям; занимают намного
меньше места, чем ползунки.
Выбор элементов управления 363
Недостатки: необходима проверка; никаких ограничений на вводимые значения
не накладывается, поэтому сообщать пользователю о допустимом диапазоне
приходится другими способами.
Дата и время
Из-за множества возможных форматов и проблем с обозначением даты в разных странах принять введенную пользователем дату и время может быть довольно непросто.
Варианты ввода следующие.
Текстовое поле с «великодушным форматом»
Преимущества: визуально простое; допускает большой диапазон форматов и типов даты; доступ с клавиатуры.
Недостатки: по внешнему виду элемента управления нельзя точно определить
ожидаемый формат данных, из-за чего пользователь может временно войти
в замешательство; требует тщательной проверки по факту ввода.
Текстовое поле со структурированным форматом
Преимущества: ожидаемый формат легко определить, исходя
из внешнего вида элемента управления.
Недостатки: может занимать больше места; большая визуальная нагрузка; не допускает отклонений от указанного формата, даже если это необходимо; сложное
для разбора технологиями чтения экрана.
Элемент управления в форме календаря или часов
Преимущества: очевидная метафора; ввод ограничивается
только допустимыми значениями.
Недостатки: занимает много места; может не поддерживать доступ с клавиатуры.
Раскрывающийся селектор с элементом управления в форме календаря или
часов
Преимущества: сочетает преимущества текстового поля и календаря; занимает мало места.
Недостатки: сложное взаимодействие; требует
сноровки для выбора значений в раскрывающейся части.
364 Глава 8 • Получение данных от пользователя: формы и элементы управления
Шаблоны
Как вы, вероятно, уже догадались, если прочитали список элементов управления
в предыдущем разделе, большинство из следующих шаблонов описывают элементы
управления — в частности, как комбинировать их между собой и сочетать с текстом
так, чтобы их было легко использовать. Некоторые шаблоны определяют структурные
взаимоотношения между элементами, как, например, Dropdown Chooser (Раскрывающийся селектор) и Fill-in-the-Blanks (Заполнение пропусков). Другие, например Good
Defaults (Хорошие варианты по умолчанию) и Autocompletion (Автозаполнение),
рассматривают значения элементов управления и способы изменения этих значений.
Многие из этих шаблонов работают в основном с текстовыми полями: Forgiving
Format («Великодушный» формат), Structured Format (Структурированный формат),
Fill-in-the-Blanks (Заполнение пропусков), Input Hints (Подсказки при вводе), Input
Prompt (Приглашение к вводу), Password Strength Meter (Измеритель надежности
пароля) и Autocompletion (Автозаполнение). Действительно, текстовые поля можно
найти везде, но это не означает, что пользователи всегда без труда догадываются, что
в них вводить. Проще всего работать с текстовыми полями, когда они представляются в контексте, объясняющем, как их использовать. В следующих шаблонах описано
множество способов создания такого контекста.
1. Forgiving Format («Великодушный» формат).
2. Structured Format (Структурированный формат).
3. Fill-in-the-Blanks (Заполнение пропусков).
4. Input Hints (Подсказки при вводе).
5. Input Prompt (Приглашение к вводу).
6. Password Strength Meter (Измеритель надежности пароля).
7. Autocompletion (Автозаполнение).
Следующие два шаблона предназначены для элементов управления, отличных от
текстовых полей. Шаблон Dropdown Chooser (Раскрывающийся селектор) описывает
способ создания специальных элементов управления, а List Builder (Компоновщик
списков) описывает постоянно изобретаемую заново комбинацию элементов управления, позволяющую пользователю создавать собственные списки элементов (он уже
упоминался выше, в таблице элементов управления).
8. Dropdown Chooser (Раскрывающийся селектор).
9. List Builder (Компоновщик списков).
Остальные шаблоны должны охватывать форму целиком. Они одинаково предназначены как для текстовых полей, так и для раскрывающихся списков, переключателей, списков и других элементов управления с сохранением состояния, но их
необходимо единообразно использовать во всех частях формы (или диалогового окна,
или даже всего приложения).
10. Good Defaults (Хорошие варианты по умолчанию).
11. Same-Page Error Messages (Сообщения об ошибках на той же странице).
К дизайну форм применимы и шаблоны из других глав. Например, в четвертой
главе в шаблоне Right/Left Alignment (Выравнивание по правому/левому краю) рас-
Шаблоны 365
сказывалось о выравнивании меток и элементов управления. Метки могут находиться
поверх полей формы (так форма становится длиннее, но возможно использование
более длинных фраз) или же их можно выровнять вдоль левого края формы. Выбор
дизайнера влияет на скорость заполнения формы.
Главы 3 и 4 также заставляют подумать о глобальных проблемах дизайна. Формапривратник — любая форма, которая стоит между пользователем и его ближайшей целью, такая как форма входа в систему или оформления покупки — должна находиться
на центральной сцене (см. одноименный шаблон), чтобы все внимание пользователя
было сосредоточено на ней. Также можно использовать модальную панель (см. одноименный шаблон), закрывающую собой содержимое страницы.
Если вы разрабатываете длинную форму, охватывающую несколько тем, то ее
можно разбить на именованные разделы (см. одноименный шаблон) или даже на несколько отдельных страниц (обратите внимание, что вкладки в качестве механизма
группировки для форм показывают себя не очень хорошо). Если форма разбивается
на последовательность страниц, то шаблоны Wizard (Мастер) и Sequence Map (Карта
последовательности) помогут пользователю не потеряться в процессе.
Наконец, на форме должна быть заметная кнопка «Готово» (см. одноименный шаблон из главы 6), представляющая собой последнее действие в последовательности.
Если вы предоставляете пользователю возможность сделать что-то еще, например
очистить форму или открыть справку, то соответствующие кнопки или ссылки должны
быть менее заметными.
Forgiving Format («Великодушный» формат)
Рис. 8.1. Веб-сайт Weather.com
Что
Разрешите пользователям вводить текст в разнообразных форматах с использованием
различного синтаксиса и реализуйте приложение так, чтобы оно интеллектуально
интерпретировало этот текст.
Использовать, когда…
Интерфейс запрашивает данные, которые пользователи могут вводить с непредсказуемым сочетанием пробелов, дефисов, аббревиатур и заглавных букв. В более
общем случае пользовательский интерфейс способен принимать вводимые данные
всевозможных видов — разные значения, форматы или синтаксис. Однако визуально
интерфейс должен оставаться простым.
Почему
Пользователю просто нужно сделать что-то, не задумываясь о «правильных» форматах и сложных пользовательских интерфейсах. Компьютеры хорошо справляются
с задачей обработки вводимых данных разных типов (до определенного предела,
366 Глава 8 • Получение данных от пользователя: формы и элементы управления
конечно же). Это превосходная комбинация: пользователь вводит то, что ему удобно,
и если полученные данные имеют смысл, программное обеспечение делает с ними то,
что нужно.
Таким образом, сохраняется исключительная простота интерфейса, а пользователю
не приходится задействовать слишком много мозговых клеток для того, чтобы разобраться, что к чему. Можно даже не прибегать к использованию шаблонов Input Hints
(Подсказки при вводе) и Input Prompt (Приглашение к вводу), хотя обычно они всегда
идут рука об руку, как в примере на рис. 8.1.
Альтернативой этому шаблону является шаблон Structured Format (Структурированный формат), но он лучше работает, когда формат ввода абсолютно предсказуем
(как в случае числовых данных, например телефонных номеров).
Как
Хитрость этого шаблона (вы знали, что без нее не обойдется) заключается в том, что
он превращает проблему дизайна пользовательского интерфейса в проблему программирования. Приходится задумываться о том, какие виды текста пользователь будет
предоставлять приложению. Возможно, вы запрашиваете у пользователя только дату
или время, поэтому варьируется исключительно формат ввода — это простой случай.
Но если речь идет о критериях поиска, то варьируется действие, которое программное
обеспечение будет производить с данными. Это уже сложнее. Умеет ли приложение
безошибочно отличать первый случай от второго? Как?
Во всех приложениях этот шаблон реализуется по-разному. Просто убедитесь, что
ответ программного обеспечения на различные форматы ввода соответствует тому,
чего ожидает пользователь. Тестируйте, тестируйте и снова тестируйте приложения
на реальных пользователях.
Примеры
На веб-сайте New York Times «великодушный» формат применяется в нескольких
формах для ввода пользовательских данных. На рис. 8.2 показаны формы поиска недвижимости и различных финансовых показателей.
Рис. 8.2. Два текстовых поля на веб-сайте New York Times
Существует ситуация, в которой данный шаблон можно было бы использовать,
но почему-то это делается крайне редко: ввод номера кредитной карты. Если пользователь вводит 16 цифр, то какая разница, разделяет он их пробелами, дефисами
или ничем не разделяет? Лишние символы выкинуть совсем несложно! В платежной
системе PayPal можно вводить номер карты с дефисами (рис. 8.3).
Пример на рис. 8.4 взят из функции приложения Outlook, предназначенной для
настройки напоминания о встрече. Посмотрите на поля Start time: (Время начала) и End
time: (Время завершения) внизу — в действительности не нужно задавать определенную дату полностью, как она отображается в этих текстовых полях на снимке экрана.
Шаблоны 367
Если сегодня 24 апреля, а встреча назначается на 29 апреля, то можно ввести любой
из следующих вариантов:
‰‰next Thu;
‰‰thu;
‰‰4/29/2004;
‰‰4/29;
‰‰5 days;
‰‰nxt thu;
‰‰29/4/2004;
‰‰29/4;
‰‰five days.
И так далее; вероятно, есть и другие допустимые форматы. Выбранная дата затем
«возвращается» пользователю в допустимом формате, в зависимости от языка и региона проживания.
Рис. 8.3. Веб-сайт PayPal
Рис. 8.4. Microsoft Outlook
В других библиотеках
http://ui-patterns.com/patterns/ForgivingFormat
http://quince.infragistics.com/Patterns/Forgiving%20Format.aspx
368 Глава 8 • Получение данных от пользователя: формы и элементы управления
Structured Format (Структурированный формат)
Рис. 8.5. Экран установки приложения Photoshop
Что
Вместо одного текстового поля используйте набор текстовых полей, отражающий
структуру запрашиваемых данных.
Использовать, когда…
Интерфейс запрашивает у пользователя особый тип текстового ввода, отформатированный определенным образом. Поскольку этот формат хорошо определен и знаком
пользователям, предполагается, что им никогда не нужно будет отклоняться от ожидаемого формата. Примером может служить информация о кредитных картах, местные
телефонные номера, а также ключи лицензий или серийные номера.
В целом не рекомендуется применять данный шаблон для любых данных, формат
которых может быть разным у разных пользователей. В частности, подумайте, что
может произойти, если ваш интерфейс будет использоваться в других странах. Имена,
адреса, почтовые индексы, телефонные номера — в разных странах стандарты могут
сильно отличаться. Для интернационального интерфейса лучше использовать шаблон
Forgiving Format («Великодушный» формат).
Почему
Структура текстового поля сама подсказывает, какой тип информации запрашивается.
Например, пользователю легко сопоставить шесть текстовых полей на рис. 8.5 с числом, разбитым на шесть частей, которое написано на коробке компакт-диска с приложением Photoshop, и сделать вывод, что этот лицензионный номер и нужно здесь
ввести. Вероятно, он также без труда понимает, что пробелы или дефисы, отделяющие
шесть частей друг от друга, вводить не нужно.
Интересно, что этот шаблон чаще всего реализуется в виде набора коротких текстовых полей, а не одного объемного текстового поля. Уже это само по себе исключает
ошибки при вводе данных. Пользователю намного проще проверить еще раз несколько
коротких строк (от двух до пяти символов), чем одну длинную, особенно если она
включает много цифр. Аналогично, переписать или запомнить длинный номер удобнее, разбив его на части. Так работает человеческий мозг.
Сравните этот шаблон с шаблоном Forgiving Format («Великодушный» формат),
идущим по прямо противоположному курсу: он позволяет вводить данные в любом
формате и не имеет никаких структурных признаков, указывающих, что именно запрашивается у пользователя (хотя иногда наводящая информация добавляется в форме,
например, шаблона Input Hints (Подсказки при вводе)). Шаблон Structured Format
(Структурированный формат) лучше подходит для ввода данных в очень предсказуемом формате, а Forgiving Format («Великодушный» формат) — для ввода информации
в свободной форме.
Шаблоны 369
Как
Создайте набор текстовых полей, отражающий формат запрашиваемых данных. Длина
текстовых полей должна быть небольшой и соответствовать длине запрашиваемой
информации.
Как только пользователь вводит все цифры или символы в первом текстовом поле,
подтверждайте это, автоматически переводя фокус ввода на следующее поле. Конечно
же, человек может вернуться обратно и отредактировать предыдущее поле, но автоматический перенос дает представление о том, сколько цифр требуется в каждом поле.
Для того чтобы дать пользователю дополнительные подсказки о том, что от него
ожидается, можно применить шаблон Input Prompt (Приглашение к вводу). В действительности в полях данных структурированного формата, предназначенных
для ввода дат, приглашения используются очень часто, например, в виде текста
«дд/мм/гггг».
Примеры
В простейшем случае структурированный формат буквально принимает форму данных со всеми пробелами, дефисами и скобками, как показано в табл. 8.1.
Таблица 8.1. Структурированный формат
Данные
Значение
Телефонный номер
(504) 555-1212
Номер кредитной карты
1021 1234 5678 0000
Дата
12/25/2004
Номер ISBN
0-1950-1919-9
Вид элемента управления
Для ввода даты в сетевом журнале ����������������������������������������������
LiveJournal�����������������������������������
(рис. 8.6) используется структурированный формат в сочетании с раскрывающимся списком для выбора месяца. По
умолчанию устанавливается текущий день и время.
Рис. 8.6. Ввод даты в сетевом журнале LiveJournal
В других библиотеках
http://ui-patterns.com/patterns/StructuredFormat
http://quince.infragistics.com/Patterns/Structured%20Format.aspx
370 Глава 8 • Получение данных от пользователя: формы и элементы управления
Fill-in-the-Blanks (Заполнение пропусков)
Рис. 8.7. С веб-сайта New York Times
Что
Организуйте одно или несколько полей в форме простого предложения или фразы,
сделав поля «пропусками», которые должен заполнить пользователь.
Использовать, когда…
У пользователя нужно запросить данные, которые могут быть представлены в виде
одной строки текста, одного числа или одного из вариантов в раскрывающемся списке. Вы попытались сконструировать набор пар из меток и элементов управления, но
обычный описательный стиль меток (например, «Имя:» или «Адрес:») недостаточно
очевиден для пользователей, чтобы те поняли, что от них требуется в данном интерфейсе. Однако можно вербально описать действие, которое нужно выполнить, фразой
в повелительном наклонении.
Почему
Шаблон Fill-in-the-Blanks (Заполнение пропусков) делает интерфейс самоописательным. В конце концов, мы все знаем, как завершить незаконченное предложение
(глагольная группа или именная конструкция — это то, что нужно). Когда поля ввода
представляют собой «пропуски» в контексте вербального описания, пользователю
проще понять, что происходит в данном интерфейсе и что требуется от него.
Как
Напишите предложение или фразу, применив все свое умение формулировать. Вместо
слов используйте элементы управления.
Если вы планируете встроить элементы управления в середину фразы, а не в конец, то лучше всего использовать текстовые поля, раскрывающиеся списки и комбинированные поля — другими словами, элементы управления, имеющие такой же
форм-фактор (ширину и высоту), что и слова в предложении. Также удостоверьтесь,
что опорная линия текста в предложении совпадает с опорными линиями элементов
управления, иначе предложение будет выглядеть неряшливо. Установите такую длину
элементов управления, чтобы они вмещали выбираемые или вводимые пользователем варианты, и сохраняйте достаточное расстояние между элементами управления
и окружающими словами.
Этот шаблон особенно полезен при определении условий, например при поиске
элементов или фильтрации для исключения части данных из представления. Примеры
из приложений Excel и eBay на рис. 8.8 и 8.9 иллюстрируют данный подход. Роберт
Рейманн (�����������������������������������������������������������������������
Robert�����������������������������������������������������������������
Reimann���������������������������������������������������������
����������������������������������������������������������������
) и Алан Купер (�����������������������������������������
Alan�������������������������������������
Cooper������������������������������
������������������������������������
) называют этот шаблон идеальным способом обработки запросов; они используют для него термин natural language
output (организация элементов управления, соответствующая естественному языку)1.
1
См. книгу этих авторов «About Face 2.0: The Essentials of Interaction Design» (издательство
Wiley). С. 205.
Шаблоны 371
Однако этот шаблон таит ловушку: при его использовании очень сложно локализовать интерфейс (перевести на другой язык), так как восприятие смысла зависит от порядка слов в предложении. Во многих интернациональных продуктах и на веб-сайтах
использовать его вообще не рекомендуется. Чтобы пользовательский интерфейс имел
смысл на другом языке, может потребоваться полная перестановка элементов. Чтобы
удостовериться, что интерфейс может быть переведен на другой язык, нужно обратиться к квалифицированному переводчику.
Примеры
В показанном на рис. 8.8 диалоговом окне настройки формата ячеек в Excel пользователь выбирает слова и словосочетания «предложения» в раскрывающихся списках.
При выборе другого варианта в открытом раскрывающемся списке последние два
поля — в которых здесь находятся значения 0.7 и 0.9, — могут заменяться другими элементами управления, например одним текстовым полем для словосочетания «greater
than» (больше, чем).
Рис. 8.8. Приложение Excel
Для поиска продуктов на веб-сайте eBay можно использовать длинную форму,
позволяющую фильтровать результаты по разным критериям. Форма на рис. 8.9 иллюстрирует несколько вариантов заполнения пропусков.
Рис. 8.9. Форма фильтрации поиска на веб-сайте eBay
В других библиотеках
http://ui-patterns.com/patterns/FillInTheBlanks
372 Глава 8 • Получение данных от пользователя: формы и элементы управления
Input Hints (Подсказки при вводе)
Рис. 8.10. Страница регистрации на веб-сайте Twitter
Что
Рядом с пустым текстовым полем поместите предложение или пример, объясняющий,
что требуется от пользователя.
Использовать, когда…
В интерфейсе присутствует текстовое поле, но тип требуемого содержимого может
быть неочевиден некоторым пользователям. Вы не хотите, чтобы метка текстового
поля была слишком длинной.
Почему
Текстовое поле, объясняющее, что в него должно вводиться, освобождает пользователя от необходимости гадать. Подсказка дает контекст, который не всегда возможно
создать при помощи метки. Если визуально отделить подсказку от основной метки,
то пользователи, знающие, что делать, могут игнорировать ее и сконцентрироваться
на метке и элементе управления.
Как
Напишите короткий пример или объяснение и поместите его под текстовое поле или
рядом с ним. Подсказка может быть видна постоянно или появляться только при
переключении фокуса на данное текстовое поле.
Текст должен быть неярким и не привлекающим внимания, но при этом хорошо
читаться; используйте шрифт на два пункта меньше, чем шрифт основной метки
(разница в один пункт будет выглядеть как ошибка, а не как намеренное изменение
размера). Помимо этого, подсказки всегда должны быть краткими. Если предложений
будет больше одного-двух, то взгляд пользователя просто скользнет по ним, а текст
будет проигнорирован.
Этот шаблон часто используется в сочетании с шаблоном Forgiving Format («Великодушный» формат), как демонстрирует пример из приложения Word на рис. 8.11, или
в сочетании с шаблоном Structured Format (Структурированный формат). Альтернативой ему является шаблон Input Prompt (Приглашение к вводу), подразумевающий,
что подсказка находится непосредственно внутри элемента управления, всплывающие
подсказки и шаблон Good Defaults (Хорошие варианты по умолчанию), в котором
в элемент управления заранее помещается допустимое значение. Преимущество подсказок при вводе заключается в том, что элемент управления остается пустым и поль-
Шаблоны 373
зователю приходится задумываться над ответом и самостоятельно формулировать его.
Иногда это лучше, чем делать всю работу за него.
Примеры
В диалоговом окне настройки печати, которое используется в нескольких приложениях Microsoft��������������������������������������������������������������������
�����������������������������������������������������������������������������
Office�������������������������������������������������������������
�������������������������������������������������������������������
(см. рис. 8.11), подсказка находится под «великодушным» текстовым полем, допускающим ввод номеров страниц, диапазонов страниц или и того
и другого. Подсказка будет полезной для любого человека, который раньше никогда не
настраивал параметр Pages (Страницы), но пользователи, уже понимающие этот принцип, не обращают внимания на текст — они сразу переходят к полю для ввода текста.
Рис. 8.11. Диалоговое окно настройки печати из Microsoft Office
При необходимости можно использовать более длинные подсказки при вводе.
Пример со страницы регистрации почтовой системы Gmail (рис. 8.12) демонстрирует максимальную длину подсказки. Если даже этого пользователю недостаточно, он
щелкает по ссылке для перехода к полноценной справке. Однако большинство людей
этого никогда не делают, так как с заполнением формы каждому хочется разделаться
побыстрее, к тому же мало кто настолько беспокоится о безопасности конфиденциальной информации. Отсюда вывод — не прячьте важную информацию за ссылками,
велика вероятность, что ее никто не увидит.
Рис. 8.12. Страница регистрации почтовой системы Gmail
374 Глава 8 • Получение данных от пользователя: формы и элементы управления
На веб-сайте Blogger подсказки выровнены по правому краю формы, а горизонтальные полоски помогают не перепутать, к какому элементу управления относится
какая подсказка (рис. 8.13). Это элегантный способ структурирования страницы со
множеством подсказок.
Рис. 8.13. Страница регистрации на веб-сайте Blogger
В некоторых формах подсказки появляются только после перевода фокуса на
­ пределенное текстовое поле (рис. 8.14). Это удобно, так как скрытые подсказки
о
не загромождают интерфейс и не добавляют визуальный шум. С другой стороны,
­пользователь не видит их, пока не щелкнет на текстовом поле (или не переходит к нему
с помощью клавиши Tab). Если вы решите прибегнуть к такому способу, не забудьте
оставить в интерфейсе пустое пространство, где будет появляться текст подсказки,
так же как при реализации инструментов, доступных при наведении мыши (см. главу 6). На странице Twitter (см. рис. 8.10) используются оба типа подсказок.
В других библиотеках
http://quince.infragistics.com/Patterns/Input%20Hints.aspx
Шаблоны 375
Рис. 8.14. Страницы регистрации веб-сайтов Twitter, Yahoo! и Hotmail
с динамическими подсказками при вводе
Input Prompt (Приглашение к вводу)
Рис. 8.15. Страница регистрации на веб-сайте Yahoo!
Что
Заранее показывайте в текстовом поле или раскрывающемся списке «приглашение»,
говорящее пользователю, что делать или вводить.
Использовать, когда…
Пользовательский интерфейс содержит текстовое поле, раскрывающийся список
или комбинированное поле, требующие ввода информации. В обычном случае вы использовали бы удобное значение по умолчанию, но здесь это невозможно — вероятно,
потому, что разумное значение по умолчанию подобрать просто нельзя, как в форме
с веб-сайта Yahoo! на рис. 8.15.
Почему
Это делает интерфейс приложения понятным. Как и подсказки при вводе, приглашение к вводу — это хитрый способ добавить справочную информацию к элементам
управления, назначение или формат которых могут быть непонятны.
376 Глава 8 • Получение данных от пользователя: формы и элементы управления
Когда используется подсказка, то человек, быстро просматривающий интерфейс,
может игнорировать ее (или упустить из виду). Иногда именно это и нужно. Но приглашение к вводу находится ровно там, куда пользователь собирается вводить текст,
так что игнорировать его невозможно. Преимуществом является то, что пользователю
не приходится гадать, нужно ли ему что-то сделать с этим элементом управления, —
элемент управления сам говорит, что да, нужно, и сообщает, что именно здесь требуется (помните, что пользователи заполняют формы не для удовольствия, поэтому
стараются делать как можно меньше и поскорее избавляться от них). Вопрос или
призыв «Заполните это поле!» вряд ли ускользнет от внимания пользователей.
Интересный побочный эффект этого шаблона заключается в том, что пользователи
могут вообще не обращать внимания на метки, предшествующие текстовым полям.
Посмотрите еще раз на рис. 8.15. Метка Name (Имя) абсолютно не нужна для того,
чтобы пользователь понял назначение формы. Так как взгляд пользователя в первую
очередь притягивается к текстовым полям, приглашения First Name (Имя) и Last Name
(Фамилия), вероятно, все равно будут прочитаны раньше метки Name (Имя)! Но
я не говорю, что метки нужно убирать, — приглашение исчезает навсегда, как только
пользователь вводит поверх свой текст, и при последующем прочтении формы он уже
может не помнить, что именно запрашивалось в конкретном элементе управления.
Если вы подойдете к реализации данного шаблона со всей тщательностью, возможно, вам удастся избавиться от меток. Когда пользователь стирает значение, на
этом месте в текстовом поле должно снова появляться приглашение к вводу. Однако
это относится только к той информации, которая знакома и понятна любому человеку
(такой как имя или адрес электронной почты).
Как
Выберите подходящую строку приглашения, начинающуюся, например, с одного из
этих слов:
‰‰для раскрывающегося списка используйте слова «Выберите», «Выделите» или
«Найдите»;
‰‰для текстового поля используйте слова «Введите» или «Напечатайте».
Закончите ее существительным, описывающим, что именно вводит пользователь,
например «Выберите город», «Напечатайте здесь ваше сообщение» или «Введите имя
пациента». Поместите эту фразу в элемент управления, туда, где обычно находится
значение. (Само приглашение не должно быть еще одним вариантом выбора в раскрывающемся списке; если пользователь оставляет приглашение неизменным, то
непонятно, что должно с этим делать приложение.)
Так как смысл здесь заключается в том, чтобы сказать пользователю, какие действия он должен выполнить для перехода к следующему шагу, не допускайте продолжения операции, пока пользователь действительно не сделает этого! Пока приглашение остается нетронутым в элементе управления, кнопка (или другое средство),
позволяющая пользователю завершить эту часть операции, должна оставаться недоступной. Таким образом, вам не придется лишний раз показывать пользователю
сообщение об ошибке.
В текстовых полях, если пользователь стирает введенную им ранее информацию,
восстанавливайте приглашение к вводу.
Шаблоны 377
Если в вашем случае можно сделать довольно точные предположения относительно
того, что пользователь введет в определенные элементы управления, то лучше использовать шаблон Good Defaults (Хорошие варианты по умолчанию), а не Input Prompt
(Приглашение к вводу). Возможно, пользователь уже вводил раньше свой адрес
электронной почты, а страну проживания распознает механизм, встроенный в веб-сайт.
Примеры
Рисунки 8.16 и 8.17 содержат два примера форм, в которых приглашения к вводу заменяют метки текстовых полей. Оба запрашивают очень простую и понятную информацию, которую любой человек сможет предоставить, не особо задумываясь об этом. В
обоих примерах, если пользователь стирает введенное значение, в текстовом поле снова
появляется приглашение к вводу (это хорошо демонстрирует второй снимок экрана).
На веб-сайте Apple такое поле дополнительно подсвечивается желтым цветом, напоминая, что без данного значения закончить заполнение формы не удастся: ненавязчивый вариант сообщения об ошибке на той же странице (см. одноименный шаблон).
Пример с веб-сайта Culinary Culture демонстрирует запоминающийся визуальный
стиль, которого можно добиться с помощью умелого сочетания шрифтов, дизайна
значков и приглашений к вводу.
Рис. 8.16. Оформление покупки на веб-сайте Apple
Рис. 8.17. Форма с веб-сайта CulinaryCulture.com
В других библиотеках
http://quince.infragistics.com/Patterns/Input%20Prompt.aspx
http://ui-patterns.com/patterns/InputPrompt
378 Глава 8 • Получение данных от пользователя: формы и элементы управления
Password Strength Meter (Измеритель надежности пароля)
Рис. 8.18. Страница регистрации в почтовой системе Gmail
Что
Немедленно, пока пользователь еще вводит символы, сообщайте ему, допустим ли его
новый пароль и насколько он надежен.
Использовать, когда...
Пользовательский интерфейс запрашивает новый пароль. Это довольно часто происходит при регистрации на различных веб-сайтах. Ваш веб-сайт или система нуждаются
в надежных паролях, и вы хотите помочь пользователю в создании такого пароля.
Почему
Надежные пароли защищают не только пользователей, но и сами сайты, особенно
когда там хранится конфиденциальная информация или происходит социальное взаимодействие. Слабые пароли необходимо запрещать, так как они подвергают систему
опасности взлома.
Измеритель надежности пароля немедленно сообщает пользователю информацию
о новом пароле: достаточно он надежен или нет, нужно ли создать новый пароль, и если
да, то с какими характеристиками (цифры, заглавные буквы и т. д.). Если система
в любом случае отвергнет ненадежный пароль, то лучше, чтобы это произошло как
можно раньше, не дожидаясь, пока пользователь заполнит все поля формы.
Как
Либо в то время как пользователь вводит новый пароль, либо сразу после того, как
фокус ввода покидает это текстовое поле, показывайте рядом с полем оценку надежности пароля. Как минимум оценка должна содержать текст и/или картинку с обозначением уровня надежности: слабый, средний, надежный. Особые формулировки
используются для описания слишком коротких или недопустимых паролей. Цвет
помогает обозначить недопустимое значение (красный), хорошее значение (зеленый
или синий) и нечто среднее (другой цвет, чаще всего желтый).
Если возможно, выводите дополнительные советы о том, как повысить надежность слабого пароля: например, пароль должен содержать не менее восьми символов
и включать цифры или заглавные буквы. Несколько неудач подряд при попытке создать надежный пароль наверняка разочаруют пользователя — помогите ему избежать
этого.
Кроме того, в форме, содержащей поле пароля, необходимо использовать подсказки при вводе или другой текст, объясняющий стоящую перед пользователем задачу.
Краткое напоминание о составляющих надежного пароля будет полезно почти любому
пользователю, а если ваша система отвергает слабые пароли, об этом необходимо пред-
Шаблоны 379
упреждать заранее, пока пользователь еще не добрался до конца формы! Во многих
системах устанавливается ограничение на минимальную длину пароля: шесть–восемь
символов.
(Помните, что сам пароль никогда не должен отображаться на экране. Также никогда не предлагайте варианты паролей. Вы можете давать пользователю только общие
советы относительно создания надежного пароля.)
Я не буду углубляться в подробности принципов безопасности паролей. Этой теме
посвящено множество книг и сетевых публикаций. Если вас интересует данная тема,
вы самостоятельно сможете найти массу полезной информации.
Примеры
Измеритель надежности пароля на веб-сайте Blogger (рис. 8.19) включает пять состояний, одно из которых (Too short (Слишком короткий)) сообщает пользователю,
как исправить недопустимый пароль — сделать его не менее восьми символов длиной.
Если щелкнуть на синем подчеркнутом тексте, откроется окно с рассказом, как создать надежный пароль. Также на странице есть подсказка (она не показана на снимке
экрана) — она находится у правого края и сообщает об ограничении на минимальную
длину пароля.
Рис. 8.19. Пять состояний измерителя надежности пароля на веб-сайте Blogger
У измерителя надежности пароля на веб-сайте MSN только три состояния
(рис. 8.20). Здесь также используется подсказка, сообщающая, что в пароле должно
быть не менее шести символов без пробелов, и предлагающая щелкнуть на ссылке,
чтобы получить детальное объяснение. Этот измеритель производит более тяжеловесное впечатление, чем предыдущий.
380 Глава 8 • Получение данных от пользователя: формы и элементы управления
Рис. 8.20. Три состояния измерителя надежности пароля на веб-сайте MSN
Yahoo! предлагает конкретные, детальные советы по созданию надежного пароля
в двух подсказках, которые отображаются, когда фокус ввода переходит на поле пароля (рис. 8.21).
Рис. 8.21. Веб-сайт Yahoo!
В других библиотеках
http://ui-patterns.com/patterns/PasswordStrengthMeter
Можно найти код для проверки надежности пароля на JavaScript и других языках
программирования. Если будете искать такой код в сети, то задавайте разные строки
поиска: password strength meter, password meter, password checker и другие варианты.
Autocompletion (Автозаполнение)
Рис. 8.22. Веб-сайт Amazon
Шаблоны 381
Что
Когда пользователь вводит значение в текстовое поле, прогнозируйте возможные
ответы, показывайте список вариантов с функцией выбора и по возможности автоматически завершайте ввод.
Использовать, когда…
Пользователь вводит что-то предсказуемое, например URL-адрес, собственное имя
или адрес, сегодняшнюю дату или имя файла. Можно сделать разумное предположение относительно того, что он пытается ввести; например, использовать для этого
сохраненную историю ранее вводимых данных или выбрать из другого имеющегося
набора значений, скажем, имен файлов в каталоге.
Поля поиска, поле URL-адреса в браузере, поле адреса электронной почты, часто
встречающиеся формы (например, для регистрации на веб-сайте или оформления
покупки), редакторы текста и командная строка — со всем этим становится намного
проще работать, когда на помощь приходит автозаполнение.
Почему
Автозаполнение экономит время, силы, снижает когнитивную нагрузку и, в конечном
итоге, нагрузку на запястья пользователя. Оно превращает трудоемкий процесс ввода
текста в простую задачу выбора (а иногда выбор осуществляется сразу для всех полей
формы — вдвойне удобно!). Вы экономите пользователям бесчисленное количество
секунд работы и сохраняете здоровыми тысячи запястий.
Если вводимый текст длинный и трудный (или, по крайней мере, его трудно запомнить) — такой как URL-адреса или адреса электронной почты, — то ценность автозаполнения возрастает. Пользователю не приходится напрягать память, поскольку
«знания из мира» предоставляются ему в форме привычного списка. Дополнительным
преимуществом является предотвращение ошибок: чем длиннее и необычнее нужная
строка, тем больше шансов, что пользователь сделает опечатку. Автоматическое завершение записей позволяет избежать этого.
Пользу автозаполнения для мобильных устройств трудно переоценить. Вводить
текст на крохотном устройстве — удовольствие сомнительное, и если речь идет о длинной строке сложного текста, то хорошо реализованное автозаполнение не только сэкономит пользователю немало времени, но и не даст пасть духом. И снова, в первую
очередь это необходимо при вводе адресов электронной почты и URL-адресов.
Автозаполнение зачастую применяется в текстовых редакторах и в интерфейсах на
основе командной строки. По мере того как пользователь вводит команду или фразу,
приложение или программная оболочка может предлагать различные варианты завершения. Редакторы кода и оболочки операционных систем — отличные кандидаты для
реализации данного шаблона, так как используемый язык ограничен и предсказуем
(в противоположность человеческому языку, такому как английский или русский).
Программный код проще спрогнозировать.
Наконец, список вариантов завершения фразы может служить картой или проводником по большому миру содержимого. Это хорошо демонстрируют поисковые
системы, а также поля поиска на отдельно взятых сайтах: пользователь вводит начало
фразы и сразу же видит похожие запросы, сделанные другими пользователями, или
ссылки на материалы, которые могут его заинтересовать. Таким образом, любозна-
382 Глава 8 • Получение данных от пользователя: формы и элементы управления
тельный или сомневающийся пользователь получает ненавязчивую помощь, а также
способ навигации в небольшом уголке публичного ментального пространства.
Как
С каждым новым символом, который вводит пользователь, приложение незаметно
формирует список возможных вариантов завершения уже введенной строки. Если
пользователь вводит одно из ограниченного числа допустимых значений, то используйте этот набор допустимых значений. Если же возможных значений очень много, то
для завершения ввода можно использовать одну из следующих заготовок:
‰‰предыдущие записи, ранее введенные этим пользователем, сохраненные в истории
или настройках;
‰‰распространенные фразы, которые часто использовались в прошлом другими
пользователями, поставляемые в качестве встроенного «словаря» приложения;
‰‰возможные совпадения, извлеченные из содержимого, по которому осуществляется
поиск или просмотр (например, содержимое веб-сайта);
‰‰объекты, подходящие по контексту, например корпоративный список контактов
для внутренней электронной почты.
Начиная с этого момента к дизайну взаимодействия с функцией автозаполнения
можно подходить двумя путями. Один из них — показывать пользователю список возможных завершений по требованию, например по нажатию клавиши Tab, и позволять
ему явно выбирать один из вариантов в списке. Так делается во многих редакторах
программного кода (см. рис. 8.26). Вероятно, этот подход лучше использовать в ситуациях, когда при взгляде на доступные варианты пользователь может безошибочно
выбрать, что ему нужно, но ему трудно ввести текст целиком без посторонней помощи.
«Знания из внешнего мира лучше, чем знания в голове».
Второй путь — подождать, пока не останется один разумный вариант завершения,
а затем представить его пользователю без специального требования. В ��������������
Word����������
это делается при помощи всплывающей подсказки; во многих формах это делается путем ввода
оставшейся части фразы в поле, но при этом вновь вставленные символы выделяются,
так что очередной жест может стереть автоматически добавленную часть. В любом случае у пользователя есть выбор — сохранить автоматически завершенную фразу или нет,
и по умолчанию считается, что сделанное приложением дополнение ему не требуется.
Оба подхода можно использовать одновременно, как на рис. 8.26.
Удостоверьтесь, что автозаполнение не раздражает пользователей. Если приложение сделает неверное предположение, это не понравится пользователю — ему
придется делать дополнительные движения для того, чтобы стереть автоматически
добавленные символы и заново ввести то, что он первоначально собирался, стараясь
при этом избежать повторного ошибочного завершения. Помогут избежать раздражения следующие рекомендации:
‰‰всегда предоставляйте пользователю выбор — принимать вариант завершения или
нет; ответ по умолчанию — нет;
‰‰не мешайте пользователю вводить данные привычным способом. Если пользователь намеревается напечатать определенную строку и продолжает делать это, несмотря на попытки автозаполнения, убедитесь, что в результате получается именно
то, что необходимо пользователю;
Шаблоны 383
‰‰если пользователь отвергает определенный вариант завершения в одном месте, не
продолжайте предлагать его. Пусть пользователь делает то, что считает нужным;
‰‰делайте правильные предположения.
Вот один возможный способ простой реализации автозаполнения. Превратите текстовое поле в комбинированное поле (представляющее собой комбинацию текстового
поля с возможностью пользовательского ввода и раскрывающегося списка). Каждый
раз, когда пользователь вводит уникальное значение в текстовое поле, создавайте для
него новый элемент в раскрывающемся списке. Теперь, если ваш графический интерфейс пользователя допускает упреждающий ввод в комбинированных полях (а это
возможно во многих интерфейсах), элементы раскрывающегося списка будут автоматически использоваться для завершения вводимых пользователем строк. Типичный
пример приведен выше на рис. 8.22. Большинство современных браузеров хранят
список недавно посещенных веб-сайтов в комбинированном поле, где пользователь
вводит URL-адреса.
Примеры
Во многих клиентах электронной почты, как и следовало ожидать, автозаполнение
используется для того, чтобы помогать пользователям вводить адреса в полях To:
(Кому:) и CC: (Копия:). Обычно адреса берутся из адресной книги, списка контактов
или списка адресов, с которыми ранее уже происходил обмен сообщениями. На этом
примере, взятом из Mac Mail, показан один вариант завершения, предложенный после
того, как пользователь ввел «dis»; дополнительный текст автоматические выделяется,
поэтому его можно стереть одним нажатием клавиши. Таким образом, если предположение сделано неверно, можно продолжать печатать прямо «сквозь» него.
Рис. 8.23. Клиент электронной почты Mac Mail
Раскрывающиеся списки с вариантами автозаполнения могут принимать множество различных форм. На рис. 8.24 показано несколько примеров форматирования
раскрывающихся списков.
Форма на веб-сайте Dopplr, показанная на рис. 8.25, не показывает полный список
вариантов завершения. Вместо этого она сообщает, что найдено 40 таких вариантов,
и что просмотреть их можно, если щелкнуть на ссылке.
Наконец, в редакторах программного кода, таких как Visual Studio, большая ставка
делается на очень сложные механизмы автозаполнения (рис. 8.26). Естественно, Visual
Studio����������������������������������������������������������������������������
���������������������������������������������������������������������������
IntelliSense���������������������������������������������������������������
умеет завершать встроенные ключевые слова языка программирования, но также запоминает имена функций, классов и переменных, определенных самим
пользователем. Он может даже показать аргументы вызываемой функции (на правом
снимке экрана). Помимо этого, поддерживаются оба подхода — «выбор из списка» и
«принятие одного подходящего варианта завершения», — а вызывать автозаполнение
можно даже намеренно, нажимая клавиши Ctrl+пробел.
384 Глава 8 • Получение данных от пользователя: формы и элементы управления
Рис. 8.24. Против часовой стрелки, начиная с верхнего левого угла:
Chrome, Firefox, Kayak, Google, Safari для iPhone, Mac OS Spotlight
Рис. 8.25. Веб-сайт Dopplr
Рис. 8.26. Автозаполнение в Visual Studio
Шаблоны 385
Таким образом, автозаполнение в Visual Studio служит средством помощи при
вводе, запоминании и просмотре контекстно-зависимых функций и классов. Это очень
полезная возможность.
В других библиотеках
http://developer.yahoo.com/ypatterns/selection/autocomplete.html
http://ui-patterns.com/patterns/Autocomplete
http://patternry.com/p=autocomplete/
http://www.welie.com/patterns/showPattern.php?patternID=autocomplete
(Обратите внимание, что в большинстве других библиотек английский вариант
названия данного шаблона звучит как «Autocomplete».)
Dropdown Chooser (Раскрывающийся селектор)
Рис. 8.27. Приложение Microsoft Word
Что
Используйте концепцию меню, но в более широком смысле — создайте раскрывающуюся или всплывающую панель, содержащую сложный пользовательский интерфейс
для выбора значения.
Использовать, когда…
Пользователю необходимо сообщить приложению значение, выбрав его из набора
предустановленных вариантов (как в примере с палитрой цветов в начале шаблона), — дату или время, число, любое другое значение, отличное от свободно вводимого
с клавиатуры текста. Нужно предоставить пользователю интерфейс, поддерживающий
такой выбор, в виде удобного визуального представления вариантов или интерактивного инструмента, но вы не хотите расходовать пространство на главной странице; там
достаточно небольшой области, где отображается текущее значение.
Почему
Большинству пользователей хорошо знаком элемент управления, имеющий форму
раскрывающегося списка (и носящий название комбинированного поля, когда он
386 Глава 8 • Получение данных от пользователя: формы и элементы управления
­сочетается с текстовым полем). Во многих приложениях эта концепция успешно расширяется до более сложных раскрывающихся панелей, чем простые списки, например
деревьев, двумерных таблиц и произвольных представлений данных. Пользователи без
труда используют их, если на элементе управления есть кнопка с нарисованной стрелкой вниз, указывающая, что щелчок на кнопке раскрывает дополнительную панель.
Раскрывающийся селектор — это сложный пользовательский интерфейс, заключенный в небольшом пространстве, поэтому он представляет собой превосходное решение для множества ситуаций. Раскрывающиеся селекторы используются на панелях
инструментов, в формах, диалоговых окнах и на веб-страницах всех сортов. Страница,
которую видит пользователь, остается простой и элегантной, а интерфейс селектора
отображается, только когда пользователь специально запрашивает его. Это отличный
способ убрать сложное представление из виду до тех пор, пока оно не понадобится.
Как
Когда раскрывающийся селектор закрыт, показывайте только текущее значение элемента управления на кнопке или в текстовом поле. Справа добавьте указывающую
вниз стрелку. Это может быть, например, отдельная кнопка, а может быть и нет — по
вашему усмотрению; поэкспериментируйте и посмотрите, какой вариант будет визуально лучше и удобнее для ваших пользователей. Щелчок на стрелке (или на всем
элементе управления) должен открывать панель селектора, а повторный щелчок —
закрывать ее.
Максимально адаптируйте панель селектора для выбора, который должен делать
пользователь. Панель должна быть относительно небольшой и компактной; для визуальной организации используйте знакомый формат информационной графики,
например список, таблицу или древовидное представление; также иногда подходит
специализированный формат, такой как календарь или калькулятор (см. следующие
примеры). О представлении списков подробно рассказывается в главе 5.
Можно добавить на панель всплывающего селектора полосу прокрутки, если пользователь понимает, что ему нужно выбрать значение из большого набора, например
найти файл в файловой системе. Но помните, что прокрутка на всплывающей панели
может оказаться сложной задачей для людей, не обладающих достаточной сноровкой!
Ссылки или кнопки на панели могут, в свою очередь, открывать вторичные пользовательские интерфейсы, помогающие пользователю в выборе значений, например
диалоговые окна для выбора цвета, диалоговые окна для поиска файлов или страницы
справочной системы. Чаще всего такие диалоговые окна бывают модальными. В действительности, если вы планируете сделать такое модальное диалоговое окно (скажем,
открывающееся по щелчку на кнопке) основным способом выбора значения, то вместо
того чтобы сразу открывать его, можно сначала отображать раскрывающийся селектор.
На всплывающей панели могут содержаться наиболее часто выбираемые элементы или
элементы, выбранные последними. Упрощая поиск распространенных вариантов, вы
сокращаете общее время (или количество щелчков мышью), затрачиваемое средним
пользователем на выбор значений.
Примеры
В приложении Photoshop раскрывающиеся селекторы повсеместно используются для
реализации компактных панелей инструментов, поддерживающих множество способов взаимодействия с пользователем. На рис. 8.28 показаны два примера: элемент
Шаблоны 387
управления Brush (Кисть) и элемент управления Opacity (Непрозрачность). Селектор
Brush (Кисть) представляет собой список с возможностью выбора вариантов, имеющий
одну хитрость — здесь есть дополнительные элементы управления, такие как ползунок,
текстовое поле и круглая кнопка со стрелкой вправо, открывающая еще одну панель,
на которой находится еще больше вариантов выбора. Селектор Opacity (Непрозрачность) — это обычный ползунок и текстовое поле, дублирующее его значение.
Рис. 8.28. Раскрывающиеся селекторы в Photoshop
Вместо текстового меню внутри раскрывающихся селекторов часто применяются сетки эскизов (см. одноименный шаблон в главе 5). Два примера из PowerPoint
(рис. 8.29) и iWeb (рис. 8.30) демонстрируют два разных стиля сетки эскизов.
Рис. 8.29. Microsoft PowerPoint
388 Глава 8 • Получение данных от пользователя: формы и элементы управления
Рис. 8.30. Раскрывающийся селектор выбора темы в iWeb
В других библиотеках
http://quince.infragistics.com/Patterns/Drop%20Down%20Chooser.aspx
В сети также можно найти другие специфические типы раскрывающихся селекторов, такие как панели выбора цвета и шрифта, панели выбора даты и календари,
ползунки для выбора числовых значений.
List Builder (Компоновщик списков)
Рис. 8.31. Диалоговое окно из приложения Microsoft Outlook
Шаблоны 389
Что
Показывайте на странице оба списка: исходный и целевой; позволяйте пользователю
перемещать элементы между ними путем перетаскивания или с помощью кнопок.
Использовать, когда…
Пользователь должен создать в интерфейсе список элементов, выбрав значения из
другого списка. Исходный список может быть длинным — слишком длинным, чтобы
его можно было с легкостью отобразить, например, в виде набора флажков.
Почему
Смысл этого шаблона в том, чтобы показывать оба списка на одной странице. Пользователь видит, что есть что: ему не приходится постоянно открывать, например,
модальное диалоговое окно.
Более простой альтернативой компоновщику списков может быть один список элементов с привязанными к ним флажками. Оба варианта решают проблему выделения
поднабора. Однако если исходный список очень длинный (например, файловая система полностью), пользователь не может, бросив один взгляд, увидеть все установленные
галочки, поэтому его представление о выбранном поднаборе элементов получается
неполным и ему приходится постоянно прокручивать список вверх и вниз.
Как
Поместите рядом исходный и целевой списки: либо бок о бок, либо один поверх второго. Между двумя списками создайте кнопки Add (Добавить) и Remove (Удалить)
(если только пользователям не очевидно, что здесь работает обычное перетаскивание).
Можно обозначить кнопки словами, стрелками или и тем и другим.
В этом шаблоне есть место и для других кнопок. Если целевой список упорядоченный, то можно использовать кнопки Move Up (Переместить вверх) и Move Down
(Переместить вниз), как показано на рис. 8.31. (На кнопках также могут быть значки
со стрелками в дополнение к словам или вместо них.)
В зависимости от того, с какими элементами вы работаете, можно либо действительно перемещать элементы из источника в место назначения (таким образом,
исходный список будет «терять» элемент), либо сохранять неизменным исходный
список. Список файлов в файловой системе не должен меняться; если это произойдет,
пользователи будут очень удивлены, поскольку они воспринимают такой список как
модель фактической файловой системы, и файлы на самом деле не удаляются. Однако
список Available fields (Доступные поля) в примере из Outlook на рис. 8.31 на самом деле
теряет элементы. Решайте сами.
Если возможно, реализуйте семантику множественного, а не единственного выбора, чтобы пользователи могли за раз перемещать из одного списка в другой сразу
несколько элементов.
Примеры
Большинство современных реализаций данного шаблона позволяют перетаскивать
элементы между областями; а если этим элементам соответствуют хорошие визуальные представления, тем лучше. Веб-сайт Flickr (рис. 8.32) демонстрирует более
глубокий подход к компоновке списков: элементы перетаскиваются из потенциально
390 Глава 8 • Получение данных от пользователя: формы и элементы управления
очень длинного списка исходных изображений в «пакет». После этого над всеми изображениями в «пакете» можно выполнить определенные операции. Крупный текст
подсказывает пользователю, что делать в критические моменты взаимодействия с вебприложением, например, при создании нового пакета или удалении изображения из
пакета.
Рис. 8.32. Веб-сайт Flickr
В других библиотеках
http://www.welie.com/patterns/showPattern.php?patternID=parts-selector
Good Defaults (Хорошие варианты по умолчанию)
Рис. 8.33. Веб-сайт Kayak
Шаблоны 391
Что
Когда возможно, заранее заполняйте поля форм значениями, которые, по вашему
мнению, с наибольшей вероятностью выбрали бы пользователи.
Использовать, когда…
Интерфейс приложения задает пользователям вопросы, для ответа на которые требуется заполнить любой тип формы (например, вписать данные в текстовые поля или
установить переключатели), но вы хотите сэкономить пользователям время и усилия.
Вероятно, большинство пользователей выберут один конкретный ответ, или же пользователь уже предоставил достаточно информации в этом интерфейсе, чтобы можно
было сделать точное предположение. Что касается технической или необязательной
информации, возможно, пользователи не знают или не задумываются об ответе, так
что для них вполне подходит «то, что выберет система».
Однако предоставлять варианты по умолчанию не всегда мудро, когда дело касается конфиденциальной информации или информации, относящейся к сфере политики, например паролей, пола или гражданства. Делая подобные предположения
или заранее заполняя поля данными, нужно быть очень осторожными, так как ошибка
может доставить пользователям неудобства или разозлить их. (И во имя любви ко
всему живому не оставляйте флажки «Да, я хочу получать рекламные сообщения»
установленными по умолчанию!)
Почему
Предоставляя разумные ответы по умолчанию на различные вопросы, вы экономите
усилия пользователей. В этом весь смысл. Вы избавляете их от необходимости думать
над ответом и печатать его. Заполнять формы — сомнительное развлечение, и если этот
шаблон сократит время, затрачиваемое на форму, вдвое, пользователи будут благодарны.
Даже если установленное по умолчанию значение окажется ошибочным, вы хотя
бы предлагаете пользователю пример ожидаемого ответа. Уже это может сэкономить
пару секунд размышлений или, что еще лучше, избавить от сообщения об ошибке.
Иногда вы сталкиваетесь с непредусмотренным и нежелательным последствием
применения шаблона Good Defaults (Хорошие варианты по умолчанию). Если пользователь пропускает поле в форме, то задаваемый в нем вопрос может не «отпечатываться» у него в сознании. Он может просто забыть, что такой вопрос задавался, может
не понимать вероятных осложнений, связанных с этим вопросом или с ответом на него
по умолчанию. Действие по вводу ответа, выбору значения или щелканью на кнопке
заставляет пользователя относиться к вопросу сознательно, а это очень важно, если
вы хотите, чтобы он хорошо изучил приложение.
Как
Заранее заполняйте поля, комбинированные поля и другие элементы управления
разумными значениями по умолчанию. Это можно делать при первом отображении страницы для пользователя, но можно также использовать информацию, ранее
введенную пользователем в приложении, для динамической установки значений по
умолчанию на следующих страницах. (Например, если пользователь введет почтовый
индекс Соединенных Штатов, то, исходя из этого значения, можно выбрать штат,
страну и иногда город.)
392 Глава 8 • Получение данных от пользователя: формы и элементы управления
Не устанавливайте значение по умолчанию только потому, что, по вашему мнению,
пустых элементов управления быть не должно. Это нужно делать только тогда, когда
вы уверены, что большинство пользователей в большинстве случаев менять установленное значение по умолчанию не будут — в противном случае вы просто добавите
им работы. Старайтесь узнать своих пользователей!
Редко используемые интерфейсы, например утилиты установки программного обеспечения, заслуживают отдельного упоминания. У пользователей следует запросить
некоторую техническую информацию, такую как папка для установки, на случай, если
они захотят изменить ее. Но в 90 % случаев они не захотят. И их не будет заботить,
куда вы установите программное обеспечение — для них это просто не важно. Такой
случай идеально подходит для того, чтобы предложить местоположение по умолчанию.
Примеры
На веб-сайте Kayak (рис. 8.33) значения по умолчанию подставляются в поля, когда
пользователь начинает поиск авиарейса. Большинство из них вполне понятны: чаще
всего человек ищет полет туда и обратно для одного пассажира в экономическом классе, а пункт вылета можно заполнить, исходя из текущего местоположения пользователя или его предыдущих поисковых запросов (однако даты вылета и прибытия могут
быть произвольными). В результате пользователь тратит меньше времени на обдумывание этих разделов формы и быстрее достигает желанной цели: результата поиска.
Диалоговое окно, показанное на рис. 8.34, появляется при изменении размера
холста в приложении Photoshop��������������������������������������������������
�����������������������������������������������������������
. Как видно на снимке экрана, в данном случае оригинальный размер изображения составляет 476 × 306. Эти значения по умолчанию
заносятся в поля Width (Ширина) и Height (Высота), определяющие новый размер, —
очень удобно в определенных случаях. Если я захочу создать тонкую рамку вокруг
изображения, то для этого мне нужно будет всего лишь добавить к текущим измерениям по два пиксела; если я захочу сделать холст изображения шире, но не выше, то
исправлю только значение в поле Width (Ширина); если же я просто нажму кнопку
OK, то ничего не изменится.
Рис. 8.34. Диалоговое окно в Photoshop
Шаблоны 393
В других библиотеках
http://patternry.com/p=good-defaults/
http://ui-patterns.com/patterns/GoodDefaults
Same-Page Error Messages
(Сообщения об ошибках на той же странице)
Рис. 8.35. Поле регистрации на веб-сайте Netflix
Что
Отображайте сообщения об ошибках для формы на той же странице, где находится
сама форма; выводите само сообщение вверху страницы, а если возможно, также создавайте заметные индикаторы рядом с элементами управления, в которых встретилась
ошибка.
Использовать, когда…
Есть вероятность, что пользователи заполнят форму неправильно. Например, они
могут пропустить необходимые поля, ввести неверные числа или неправильный адрес
электронной почты. Вы хотите побудить их повторить попытку. Ваша цель — обратить
внимание на опечатки до того, как они превратятся в проблему, и помочь запутавшимся пользователям разобраться, что от них требуется.
Почему
Традиционно приложения с графическим пользовательским интерфейсом сообщают
об ошибках при помощи модальных диалоговых окон. Такие сообщения могут быть
очень полезными и содержать информацию о том, в чем заключается ошибка и как ее
исправить. Но модальное диалоговое окно нужно закрыть для того, чтобы получить
возможность вернуться к работе и исправить ошибку, а как только оно исчезает, перечитать сообщение об ошибке уже невозможно! (Возможно, предполагается, что его
нужно хорошенько запомнить.)
Потом, когда появились веб-формы, сообщения об ошибке также начали выводиться в отдельно загружаемом окне после того, как пользователь нажимает кнопку
подтверждения отправки сведений. Сообщение можно прочитать, но для устранения
ошибки нужно нажимать кнопку Назад; как только это делается, сообщение об ошибке
пропадает. Приходится просматривать форму для поиска поля, содержащего ошибку,
а это требует дополнительного времени и усилий и не гарантирует, что не будет сделана другая ошибка.
394 Глава 8 • Получение данных от пользователя: формы и элементы управления
Сегодня во многих веб-формах сообщение об ошибке выводится на самой форме.
Благодаря тому, что сообщения и элементы управления находятся на одной странице,
пользователь может читать сообщение и с легкостью вносить поправки, не прыгая со
страницы на страницу и не пытаясь запомнить сложный текст.
Еще лучше, когда в веб-формах сообщения об ошибках выводятся рядом с элементами управления, где были сделаны ошибки. Пользователь сразу видит, где возникли
проблемы, ему не нужно запоминать имя поля и прокручивать страницу в его поисках — рядом с самим полем находятся и инструкции по исправлению ошибки.
Как
Форма должна предотвращать ошибки определенного рода. Если количество вариантов
ограничено или они сложны для ввода, используйте раскрывающиеся списки вместо
свободных текстовых полей. В текстовых полях добавляйте подсказки и приглашения
к вводу, применяйте «великодушный» формат, автозаполнение и значения по умолчанию (см. соответствующие шаблоны в этой главе). Четко обозначайте поля, требующие
обязательного ввода данных, и не создавайте слишком много обязательных полей.
Если ошибка все же произошла, выводите сообщение вверху формы, даже если
детальную информацию показываете рядом с соответствующими элементами управления. Верхняя часть страницы — это первое, что видят люди. (Это также удобно для
пользователей с нарушениями зрения — для них форма читается сверху вниз, так что
они сразу же узнают о том, что здесь возникла проблема.) Поместите на страницу
привлекающий внимание рисунок и используйте более заметный текст, например
выделите его красным цветом и полужирным шрифтом.
После этого обозначьте поля формы, вызвавшие ошибку. Если возможно, поместите
рядом с ними специальные сообщения — это потребует дополнительного пространства
рядом, выше или ниже, но, по крайней мере, цвет и (или) небольшой рисунок всегда можно использовать, как в примере на рис. 8.35. В этом контексте пользователи
обычно ассоциируют красный цвет с ошибками. Свободно используйте его, но так как
некоторые пользователи не различают цвета, создавайте и другие сигналы, такие как
особый язык, полужирный (но не огромный) текст и графика.
Если вы разрабатываете форму для веб-приложения или для какой-либо другой
клиент-серверной системы, то попытайтесь выполнить как можно большую часть
проверки на клиентской стороне. Тем самым вы сэкономите много времени. Если возможно, выводите сообщение об ошибке на уже загруженной странице, чтобы избежать
дополнительного ожидания при загрузке новой страницы.
Руководство по написанию сообщений об ошибках лежит за пределами тем, рассматриваемых в этой книге, но вот несколько советов:
‰‰делайте сообщения об ошибках краткими, но достаточно подробными, чтобы объяснить, в каком поле допущена ошибка и что именно сделано неправильно: «Вы не
ввели адрес» вместо «Недостаточно информации»;
‰‰используйте обычный язык, а не компьютерный жаргон: «В почтовом индексе присутствует буква» вместо «Ошибка проверки числового значения»;
‰‰будьте вежливыми: «Извините, но произошла ошибка! Пожалуйста, еще раз
нажмите­ кнопку «Отправить»» вместо «���������������������������������������
JavaScript�����������������������������
����������������������������
Error�����������������������
693» или «Форма не содержит данных».
Шаблоны 395
Примеры
На страницах регистрации веб-сайтов Twitter и Mint (рис. 8.36 и 8.37 соответственно)
рядом с элементами управления выводится либо сообщение об ошибке, либо короткое
сообщение «OK». Это удобно в небольших формах.
Рис. 8.36. Страница регистрации на веб-сайте Twitter
Рис. 8.37. Страница регистрации на веб-сайте Mint
На веб-сайте Yahoo! некоторые сообщения об ошибке содержат шутку, тогда как
другие написаны сухим и понятным языком (рис. 8.38).
Рис. 8.38. Страница регистрации на веб-сайте Yahoo!
396 Глава 8 • Получение данных от пользователя: формы и элементы управления
Если в интернет-магазине Hanna Andersson добавить в корзину продукт, для которого указана не вся обязательная информация, то появляется ненавязчивое напоминание о пропущенном значении (рис. 8.39). (Если честно, из-за приглашения к вводу
это поле действительно несложно пропустить.) После того как ошибка исправлена, на
месте сообщения выводится дополнительная информация. Обратите внимание, что
как только вы представляете все необходимые данные, на форме появляется новая
кнопка: Begin Checkout (Оформить покупку).
Рис. 8.39. Форма информации о покупке на веб-сайте Hanna Andersson
В других библиотеках
http://ui-patterns.com/patterns/InputFeedback
http://www.welie.com/patterns/showPattern.php?patternID=input-error
Два вышеупомянутых шаблона называются Input Feedback (Ответная реакция на
ввод) и Input Error Message (Сообщение об ошибке при вводе). Попробуйте поискать
в сети шаблоны с похожими названиями.
Использование
социальных сетей
9
В 2009–2010 годах случился бум социальных сетей. Коммерческие и некоммерческие
компании, а также представители отдельных продуктов ринулись создавать свои
­страницы в Facebook, Twitter и хранилищах мультимедиа, таких как Flickr и YouTube.
Тем, у кого уже были собственные блоги, Twitter��������������������������������
���������������������������������������
и Facebook���������������������
�����������������������������
позволили значительно расширить аудиторию. Компании обнаружили, что если регулярно пополнять
ленту блога интересными материалами, это привлекает внимание аудитории, а если
какое-то содержимое станет «вирусным», то реклама распространится на всю сеть.
Бесплатно!
Хотя не совсем бесплатно.
Организации вкладывают много труда в создание успешного образа в социальной
среде. Одним сотрудникам приходится тратить много времени на написание и публикацию материалов, другим — на поиск и чтение похожей информации в сети и на
обдумывание стратегии реакции. Продуманные корпоративные сайты организаций
поддерживают связи с социальными сетями, при этом тщательно разрабатываются
и поддерживаются страницы на других ресурсах (таких как Facebook и YouTube).
И кто-то должен заботиться об общей стратегии: где необходимо приложить усилия,
когда и в связи с какой актуальной темой.
Уже наработаны определенные практики, объединяющие подобные усилия. Социальные сети — еще очень молодое явление, и конкретные рекомендации в ближайшие
месяцы и годы будут очень быстро меняться. Как и в остальных главах, шаблоны
и принципы в этой главе — не безоговорочные правила, хотя я все же надеюсь, что они
переживут наиболее популярные сайты и технологии 2010 года.
В этой главе мы сфокусируемся на одном аспекте социальных сетей: как использовать разнообразные формы социального взаимодействия для продвижения торгового
знака, распространения идеи, видео или иного художественного произведения, а также
для поддержки важных кампаний. Ключ к успеху здесь — привлечь последователей,
то есть людей, которые будут сознательно и добровольно прислушиваться к вашим
словам. Торговая марка может завоевать огромную аудиторию через уникальные
кампании, проводимые в социальных сетях. (В этой главе мы будем толковать слово
«торговая марка» достаточно широко, охватывая личные, некоммерческие, художественные организации, а также объединения, связанные с какими-то событиями или
развлечениями.)
398 Глава 9 • Использование социальных сетей
О чем не говорится в этой главе
Есть бесконечное множество вариантов использования социальных сетей в личных
целях. Возможно, какие-то рекомендации относительно этого также существуют,
а спор между приверженцами разных точек зрения мог бы быть очень занимательным! Однако данная книга предназначена для дизайнеров интерфейсов сайтов и программного обеспечения, поэтому мы будем говорить только о нуждах и требованиях
разработчиков.
Еще одна тема, которой мы касаться не будем, — это интернет-сообщества. Они
представляют отдельное направление искусства, а шаблоны и передовые методики,
предназначенные для них, заметно отличаются от тех, что описаны в этой главе. На
момент ее написания несколько организаций и торговых марок сумели построить
успешные интерактивные сообщества, однако доказательств того, что подобные
группировки значительно содействуют продвижению, нет. (Если торговая марка сама
является интерактивным сообществом, как, например, Stack Overflow или Ravelry, то
ситуация меняется; многие из них довольно прибыльны. В любом случае, мы о них
говорить не будем.)
Наконец, многие сайты демонстрируют успешное использование социальных сетей
для достижения совершенно новых целей. Delicious, Yelp, Foursquare и другие создают
продукты, основываясь на коллективном знании, распространяемом в сети. Мне кажется, что со временем таких сайтов должно стать больше. Эрик Малоун и Кристиан
Крамлиш подробно описали несколько способов сбора и концентрирования общественного мнения в своей книге «Designing Social Interfaces» (издательство O’Reilly,
http://oreilly.com/catalog/9780596154936/). Эта глава дополняет их книгу.
Основы социальных взаимодействий
Какие принципы и шаблоны следует учесть при разработке стратегии использования
социальных сетей?
Первый принцип настолько очевиден, что я присвою ему порядковый номер ноль.
Вы должны делать это еще до того, как приступите к планированию взаимодействия
с социальными сетями:
0. Слушайте
Найдите сообщества, в которых обсуждают вашу торговую марку, продукты,
организацию — или конкурентов. Но не ограничивайтесь этим. Подумайте, какие
темы граничат с миссией или целью вашей торговой марки, и узнайте, что люди
говорят об этом. Если ваша организация может внести в обсуждение полезный
вклад, участвуйте в обсуждениях.
yy Найдите обсуждения в сети и прочитайте их. Если необходимо, используйте
­инструменты, помогающие отслеживать появление новых сообщений. Это
особенно важно, если вы работаете на торговую марку с сильным сетевым
влиянием.
yy Убедитесь, что в вашей организации знают об отзывах в сети, даже если эти
отзывы негативные.
Основы социальных взаимодействий 399
yy В сообществах с большим числом читателей, таких как известные блоги, представитель вашей организации должен зарегистрироваться и принимать участие
в обсуждениях. Остальным читателям должно быть понятно, что этот человек
официально представляет всю организацию.
yy Принимая участие в беседах, отвечайте на вопросы, предлагайте информацию,
аккуратно исправляйте недопонимания, принимайте критику.
yy Чутко реагируйте на происходящее, но не выходите за рамки приличий; не
будьте излишне болтливыми, но и не занимайте оборонительную позицию.
И воздержитесь от навязчивой рекламы.
Теперь давайте поговорим об активных, творческих аспектах использования социальных сетей. Как сделать свое присутствие в них полезным, приносящим прибыль,
но при этом интересным для остальных пользователей?
Следующие шесть принципов выстроены более-менее по степени важности. Если
вы не создаете материалы, которые людям нравилось бы читать (принцип 1), то нет
никакого смысла в том, чтобы тратить силы на их распространение или продвижение
в поисковых системах. Некоторые из этих рекомендаций подойдут для вашей конкретной ситуации, другие нет. Принципы 5 и 6, в частности, применяются реже остальных,
поскольку требуют больших вложений.
1. Создавайте хорошие материалы
Пишите, рисуйте, записывайте и создавайте разными другими способами
материалы, которые понравятся людям. Публикуйте их регулярно и достаточно
часто, чтобы пользователи не потеряли интерес. Привлекайте зрителей к обсуждению — например, в комментариях к записям на Facebook — и принимайте участие
в беседах.
yy Создайте редакторский микс (см. одноименный шаблон), хорошо представляющий вашу организацию. Публикуйте оригинальные материалы, привлекающие разных людей, варьируя длину, стиль и тип текста, изображений, видео,
подкастов.
yy Добавляйте ссылки на материалы других авторов. Применяйте шаблон Repost
and Comment (Перенос публикаций и комментарии) для повышения значимости оригинального материала, а также для того, чтобы поблагодарить другие
достойные внимания веб-сайты.
yy Наличие индивидуальных голосов (см. одноименный шаблон) в редакторском
миксе привлекает больше, чем один общий корпоративный голос.
yy Используйте приглашения к разговору (см. одноименный шаблон), для того
чтобы подтолкнуть пассивных читателей к активному общению. Если человек
вступит с вами в диалог, то он с большой вероятностью будет возвращаться
снова и снова.
2. Отдавайте эти хорошие материалы читателям
Отправляйтесь туда, где люди проводят время: электронная почта, Facebook,
Twitter����������������������������������������������������������������������
, ��������������������������������������������������������������������
RSS�����������������������������������������������������������������
-потоки, ��������������������������������������������������������
Digg����������������������������������������������������
или любое другое место, где нравится находиться вашим сетевым читателям. Добавляйте свои материалы в их персональные потоки
новостей (см. одноименный шаблон в главе 2) — ежедневные ленты извещений
и обновлений, которые они получают через различные службы. Другими словами,
делайте людей своими последователями, но обязательно с их разрешения.
400 Глава 9 • Использование социальных сетей
yy Используйте несколько социальных каналов или служб, чтобы охватить столько
читателей, сколько возможно (в разумных пределах, разумеется). Встречайтесь
с ними на их площадках, не ожидайте, что кто-то захочет присоединиться к новой службе, только чтобы получать ваши обновления.
yy Не перегружайте последователей избыточным потоком информации. Разумно
подходите к использованию различных служб и учитывайте разработанные для
них соглашения и сложившиеся условности. Продумайте график публикации
(см. одноименный шаблон) материалов.
yy На корпоративную страницу поместите социальные ссылки (см. одноименный
шаблон), чтобы пользователи могли напрямую перейти к вашему каналу в со­
циальной сети; максимально упростите для них переход в статус «последо­
вателя».
yy Если ваша организация генерирует большой объем материалов, а у разных продуктов или направлений могут быть совершенно разные аудитории, рассмотрите
возможность разбиения одного очень насыщенного потока содержимого на
специализированные потоки (см. одноименный шаблон).
yy Используйте инвертированную нанопирамиду (см. одноименный шаблон) для
написания обновлений статуса, анонсов и заголовков. Подобные вещи, умело
написанные, привлекают читателей, «цепляют» их, заставляя углубляться
в материалы.
3. Позволяйте пользователям решать, какие материалы считать хорошими
Создайте инструменты, позволяющие последователям делиться содержимым
вашего потока со своими читателями, и разрешите отправку по самым коротким связям (таким как электронная почта). Собирайте отзывы через системы
­голосования, кнопки «нравится/не нравится» и другие приспособления. Обра­
щайте внимание, о каких материалах говорят больше всего — это признак «хорошести».
yy Предоставьте людям возможность комментировать ваши публикации, однако
будьте избирательны. Не представляющие интереса новости и публикации
в блоге редко получают комментарии, а незаполненные области комментариев
не притягивают внимание. Обилие комментариев, однако, может привлечь еще
больше читателей.
yy Помещайте рядом с публикациями виджет для рассылки (см. одноименный
шаблон), чтобы пользователи могли с легкостью поделиться интересным материалом со своими последователями в социальных сетях. Это очень мощный
механизм, широко распространяющий ваши материалы, вовлекающий читателей в процесс рассылки и предоставляющий информацию о том, какие элементы
оказались наиболее популярными.
yy Кнопка «отправить по электронной почте» позволяет поделиться интересной
информацией с ближайшими друзьями, «в личном порядке». Если статья пересылается по электронной почте, получатель с большой вероятностью прочитает
ее полностью, так как воспринимает это как персональную рекомендацию. Личные рекомендации (см. одноименный шаблон в главе 1) — еще один сильный
механизм социальных сетей.
Основы социальных взаимодействий 401
yy При публикации таких вещей, как описания продуктов или рецепты — негативные отзывы о которых не окажут отрицательного влияния на вашу организацию, — рассмотрите возможность реализации рейтинговой системы.
Коллективная мысль, выраженная путем оценок и обзоров, помогает другим
читателям увидеть плохие и хорошие стороны (однако остерегайтесь проблем,
которые могут возникнуть, если попросить людей оценивать вещи, которые
ваша организация напрямую производит или инвестирует в них).
yy Позволяйте читателям голосовать за наиболее понравившиеся материалы,
продвигая их в неком рейтинге. Для этого можно добавить кнопку «нравится»,
рисунок звездочки или поднятого большого пальца, а также любой другой подходящий механизм. Подробнее об этом говорится в шаблоне «Vote to ­Promote»
в библиотеке шаблонов Yahoo!, а также в книге «Designing Social Interfaces».
4. Сделайте так, чтобы хорошие материалы было легко найти
Хорошо организуйте домашнюю страницу; регулярно публикуйте новые материалы и показывайте наиболее часто просматриваемые элементы на боковых
панелях, в рейтинговых списках и в других представлениях. Предлагайте пользователю, просматривающему веб-сайт, похожие материалы и предоставляйте
доступ к архивам и живым обсуждениям. Обеспечьте индексацию содержимого
механизмами поиска, поскольку в долгосрочной перспективе именно они станут
основным путем доступа к материалам веб-сайта.
yy Поместите на домашнюю страницу поле новостей (см. одноименный шаблон),
рекламирующее самые свежие статьи, новости, публикации в блоге, видео и т. д.
Обычно это «социальные объекты», распространяемые в социальных сетях,
комментарии к которым пишут сторонние читатели.
yy Если вы собираете данные о том, сколько раз определенный элемент содержимого был отослан по электронной почте или по другим каналам, оценен или прокомментирован, то можно создать «доску почета» (см. одноименный шаблон)
со списком самых популярных элементов.
yy Подумайте, можно ли для вашего блога, библиотеки видео или другой большой
коллекции материалов создать списки лидеров. Это хорошая отправная точка
для новых читателей. Однако удостоверьтесь, что человек, ответственный за ведение таких списков, обновляет их достаточно часто и со знанием дела и списки
отражают реальное положение вещей.
yy Когда пользователь открывает публикацию в блоге, новость или другой материал, показывайте ему набор ссылок на похожие публикации. Исходите из
того, что пользователя интересует данная тема; возможно, он захочет почитать
связанные материалы. Пусть ему будет интересно листать страницы вашего
сайта и вчитываться в содержимое.
yy Проверьте, что ваши материалы индексируются в поисковых системах. Удостоверьтесь, что заголовки и другие метаданные хорошо описывают соответствующее содержимое. Также проверьте поисковый механизм своего сайта: он должен
правильно находить то, что требуется посетителям.
yy Сохраняйте стабильную, понятную и узнаваемую сетевую личность. Сможет ли
любой пользователь Facebook найти вашу страницу в этой сети, выполнив поиск
402 Глава 9 • Использование социальных сетей
по названию организации? Или ему придется зайти на ваш веб-сайт и щелкнуть
на одной из социальных ссылок там? (Это также должно быть одним из вариантов, но поиск в социальной сети проще для пользователя.)
5. Смешивайте хорошие пользовательские материалы со своими хорошими материалами
Публикуйте написанные гостями статьи, публикации для блога, обзоры и любительские видеоклипы. Устраивайте конкурсы фотографий и демонстрируйте на
своей странице работы победителей — конечно, с указанием авторства. Большинство организаций до этого уровня так никогда и не доходят, и это нормально — не
каждая компания или некоммерческая организация выиграет от такого. Но если
ваши последователи полны энтузиазма и талантливы, воспользуйтесь этим!
6. Взращивайте сообщество
Это также подходит не для каждой организации, но некоторые сумели ­взрастить
целые интернет-сообщества вокруг популярной идеи или деятельности: садоводство, игры, музыка, технология и т. д. Нельзя сказать, что сообщества действительно помогают выстроить торговую марку или увеличить долю на рынке — доказательств этому нет, поэтому не рассчитывайте на подобную выгоду. Однако они
предоставляют людям место в сети, куда те могут прийти, задать вопросы, завести
друзей, поделиться идеями, помочь друг другу, высказать свое мнение, подурачиться и показать какие-то интересные (на их взгляд, не на ваш) вещи.
Шаблоны
Используйте следующие шаблоны при создании материалов для социальных сетей:
1. Editorial Mix (Редакторский микс).
2. Personal Voices (Индивидуальные голоса).
3. Repost and Comment (Перенос публикаций и комментарии).
4. Conversation Starters (Приглашения к разговору).
5. Inverted Nano-pyramid (Инвертированная нанопирамида).
При разработке механизмов, определяющих когда, где и как распространять материалы, используйте эти шаблоны:
1. Timing Strategy (График публикации).
2. Specialized Streams (Специализированные потоки).
3. Social Links (Социальные ссылки).
4. Sharing Widget (Виджет для рассылки).
5. News Box (Поле новостей).
6. Content Leaderboard (Доска почета).
7. Recent Chatter (Последние комментарии).
Шаблоны 403
Editorial Mix (Редакторский микс)
Рис. 9.1. Различные темы обсуждений на странице Epicurious в Facebook
Что
Публикуйте регулярный поток статей или ссылок, включающий разнообразные
новости, интересные для широкой публики очерки, фотографии, видео, социальную
рекламу и другие типы материалов. Воздержитесь от прямой саморекламы.
Использовать, когда...
Вы хотите повысить узнаваемость названия, престиж вашей организации, усилить
связи с клиентами и, возможно, подстегнуть продажи. Читатели будут с удовольствием
знакомиться с опубликованными вами материалами, и у вас есть ресурсы для поиска
или создания такого содержимого.
Почему
Разнообразие тем и вариантов представления материалов скорее привлечет широкую
аудиторию, нежели небольшой набор узконаправленных статей. Некоторые из ваших
читателей могут натолкнуться в вашей насыщенной ленте на темы, которые в противном случае вообще никогда не попались бы им на глаза.
Более фундаментальная причина заключается в том, что каждый элемент должен
быть интересен сам по себе. Вы хотите, чтобы ваши последователи читали ваши статьи,
щелкали на ссылках, просматривали видео и ожидали новых публикаций. Еще лучше,
если последователи будут переносить ваши публикации в свои ленты или рассылать
друзьям — благодаря «вирусному» распространению ваше имя станет известно огромному количеству людей. Некоторые из них станут вашими последователями.
Как
Определите набор тем, связанных с вашей миссией и в то же время интересных большому количеству людей. Среди организаций, рассмотренных в этой главе, популярны следующие темы: еда, спорт, природа, путешествия, экологические технологии,
­политика, воспитание детей, помощь при стихийных бедствиях, высокие технологии
404 Глава 9 • Использование социальных сетей
и наука. Они будоражат умы людей. А о чем можете рассказать вы, чтобы вызвать
интерес и привлечь внимание?
Разработайте микс, подходящий для вашей организации. У каждого пользователя
социальных сетей есть собственное уникальное сочетание типов материалов и тем,
которые ему нравятся. Объединяет их одно: их много, и они интересные.
Длинное текстовое содержимое публикуйте в блоге. Такую публикацию можно
затем связать с микроблогом или другим сайтом, поддерживающим короткие записи,
например Twitter. (Большинство организаций дублируют в подобных системах не все
свои материалы.) Короткие, недолговечные элементы можно публиковать напрямую
в микроблогах.
Стимулируйте комментирование ваших публикаций. Это чаще всего происходит
в социальных сетях, таких как Facebook, или микроблогах, таких как Twitter. Люди
оставляют комментарии и в автономных блогах, но на момент написания этой главы,
при условии наличия более удобных средств связи, разговоры в блогах не завязываются.
Не перегружайте каналы социальных сетей слишком большим объемом публикаций! Подробнее о количестве материалов и времени опубликования говорится
в шаблоне Timing Strategy (График публикации).
Избегайте неприкрытой рекламы. В целом, разумеется, все эти технологии относятся к рекламе, однако читатели прекрасно видят, когда их пытаются загнать в маркетинговую ловушку, и им это не нравится. Они подписывались на ваши обновления не
для того, чтобы их заваливали объявлениями. Таким образом, публикуйте информационные или развлекательные материалы, ограничиваясь рекламой только наиболее
специфических и полезных элементов: информации о скидках, новых продуктов или
напоминаний о популярных распродажах. Перед тем как публиковать, спросите себя:
если последователи никогда не увидят этот текст, огорчит ли их это?
Вот несколько типов содержимого, хорошо подходящего для публикации:
‰‰новостные статьи;
‰‰интервью с экспертами в данной области;
‰‰короткие, емкие цитаты и остроумные замечания;
‰‰обзоры продуктов;
‰‰статьи или видео о происходящем «за кулисами» в вашей организации;
‰‰рецепты и пошаговые инструкции;
‰‰социальная реклама;
‰‰варианты помощи благотворительной организации или участия в подобном событии;
‰‰юмор;
‰‰личное мнение;
‰‰письма читателей;
‰‰короткие рассказы — из реальной жизни или выдуманные;
‰‰музыкальные или художественные представления, обычно в форме видеозаписей;
‰‰слайд-шоу;
‰‰подкасты;
‰‰вопросы, призывающие читателей высказаться; см. шаблон Conversation Starters
(Приглашения к разговору);
Шаблоны 405
‰‰регулярные комментарии от руководящего работника; см. шаблон Personal Voices
(Индивидуальные голоса);
‰‰публикации из блогов других людей; см. шаблон Repost and Comment (Перенос
публикаций и комментарии).
Помните, что материал, публикуемый в социальном потоке, ваши последователи
будут использовать в своих целях: для формирования или поддержки сетевой личности («Меня интересует эта тема»), для передачи информации ближайшим друзьям,
для развлечения широкого круга друзей, для косвенного высказывания своего мнения
или же просто для создания связей. Захотят ли они делать это с вашим содержимым?
Оно смешное, противоречивое, красивое, наполнено истиной, оригинальное?
Примеры
Сеть кофеен Starbucks����������������������������������������������������������
�������������������������������������������������������������������
публикует материалы, которые могут заинтересовать посетителей: список тем включает кофе, чай, специальные предложения в кофейнях, музыку,
благотворительность и др. Это могут быть текстовые статьи, видеоклипы, публикации,
взятые из других источников. На рис. 9.2 показана страница Starbucks в Facebook.
Рис. 9.2. Страница Starbucks в Facebook
406 Глава 9 • Использование социальных сетей
Корпоративным блогам необходим надежный баланс между разнообразием и сфокусированностью тем. Как видно на рис. 9.3, блог Whole����������������������������
���������������������������������
���������������������������
Foods����������������������
рассказывает в основном о натуральных продуктах, тогда как блог Google, отражая большой ассортимент
продуктов и услуг компании, охватывает намного больший диапазон тем.
Рис. 9.3. Заголовки в блогах Whole Foods и Google
Personal Voices (Индивидуальные голоса)
Рис. 9.4. Лента Тони Сиеха (Tony Hsieh) в Twitter
Шаблоны 407
Что
Привлекайте сотрудников вашей организации к участию в социальных сетях от своего
имени, отдельно от общего корпоративного потока информации. Пусть они публикуют
записи в своем блоге, комментируют чужие публикации, используют Twitter и другие
социальные каналы.
Использовать, когда...
В вашей организации есть любители социальных сетей — люди, готовые и желающие
активно участвовать в сетевой жизни как от своего лица, так и от имени организации.
Это могут быть специалисты в определенной области знаний, инженеры, маркетологи
и даже директоры. Вы не возражаете против нескольких голосов в социальных сетях
в противовес одному официальному голосу организации.
Почему
Индивидуальный голос очеловечивает торговую марку. Читателям проще прочувствовать связь с человеком с определенным именем и внешностью, а не с безликим
голосом организации.
Как
Позвольте сотрудникам публиковать материалы в социальных сетях, подписываясь
своим именем. Пусть они рассказывают анекдоты, истории из личного опыта, делятся
воспоминаниями, описывают используемые ими продукты, а также разговаривают на
другие общечеловеческие темы.
Подумайте, может быть, стоит разработать руководство по «социальной жизни»
для сотрудников, включающее что-то еще помимо банальных правил «не публиковать
ничего такого, за что на нас могут подать в суд». Некоторые компании, такие как SAP
и Oracle, публикуют подобные руководства в сети; их можно использовать в качестве
примера.
Примеры
Директор Zappos часто публикует записи в Twitter, и на момент написания этой главы
у него 1,7 миллиона последователей (см. рис. 9.4). Причудливые, смешные, очень личные публикации Тони Сиеха привлекают много внимания, но при этом не содержат
излишней рекламы торговой марки. ���������������������������������������������
Zappos���������������������������������������
призывает и других сотрудников использовать Twitter, а на веб-сайте компании даже есть специальная страница, посвященная
публикациям ее сотрудников (рис. 9.5).
Несколько известных ведущих и репортеров канала ��������������������������
CNN�����������������������
также используют Twit�����
ter; среди них Вольф Блитзер, Андерсон Купер и Эд Генри (рис. 9.6). Их публикации
несут отпечаток личности и производят намного более «человечное» впечатление,
чем официальный канал CNN в Twitter. Полный список сотрудников CNN, пишущих
в Twitter, можно найти на этом сайте в списке @CNN/anchors-and-reporters.
Крупные технологические компании, подобные Google���������������������
���������������������������
и IBM���������������
������������������
, призывают сотрудников создавать публичные блоги и приводят ссылки на подобные ресурсы на
своем корпоративном веб-сайте; см. рис. 9.7 (в действительности, IBM присутствует
в социальных сетях только в форме блогов своих сотрудников).
408 Глава 9 • Использование социальных сетей
Рис. 9.5. Публикации сотрудников Zappos в микроблогах Twitter
Рис. 9.6. Личные потоки ведущих CNN в Twitter
Шаблоны 409
Рис. 9.7. Несколько блогов сотрудников IBM и Google
Repost and Comment (Перенос публикаций и комментарии)
Рис. 9.8. Вирусное видео на сайте YouTube и множество ссылок на него в социальных сетях
Что
Вместо того чтобы всегда генерировать только собственные уникальные материалы,
делитесь ссылками на записи на других сайтах, цитируйте их или переносите целиком
в свою ленту. Добавляйте комментарии и приглашайте читателей к обсуждению.
Использовать, когда...
Вы могли бы выступать в социальных сетях, помимо прочего, в качестве агрегатора: находить интересную информацию, которая обязательно понравится вашей аудитории,
410 Глава 9 • Использование социальных сетей
и публиковать ее в своем блоге или ленте. Вы выступаете в роли редактора, идейного
лидера, к мнению которого читатели прислушиваются и вкусу которого доверяют.
Этот шаблон подойдет не каждой организации. Некоторые предпочитают публиковать только то содержимое, которое рождается в стенах их компании.
Почему
Лента или блог, являющийся местом, куда всегда интересно зайти, привлекает читателей. Последователи обращают внимание на ваш логотип или имя каждый раз, когда
перенесенное вами из других источников содержимое появляется в их лентах.
Если вы хотите показать своим читателям нечто интересное, не нужно каждый раз
придумывать что-то уникальное. Написать свежий, оригинальный материал непросто,
а еще сложнее делать это регулярно (что необходимо для поддержания актуальности).
Потратив время на поиск элементов, достойных быть перенесенными в ваш блог, вы
получаете стабильный поток публикаций, интересных вашим читателям.
В ситуации, когда большая часть ваших уникальных материалов принадлежит
одному типу, например это статьи или фотографии, добавление ссылок на творчество
других людей приближает вас к редакторскому миксу (см. одноименный шаблон).
Перенос публикаций и ссылки на чужие публикации перенаправляют внимание
пользователей на другие сайты и других авторов. В сети ни одна организация не может
оставаться изолированной; всегда найдутся другие блоггеры, авторы обзоров, форумы
и компании, связанные с той же темой. Перенося их работы к себе с указанием авторства, вы дарите им часть внимания своей читательской аудитории, подкрепляете их
авторитет и помогаете увеличить число последователей. А социальное взаимодействие — штука двухсторонняя: они могут сделать то же самое для вас!
Вы становитесь участником обширного обсуждения определенных событий или
тем. Предлагая интересную новость или видеоролик своим читателям, вы приглашаете
их поддержать беседу — либо в вашем блоге, либо на сайте первоначальных владельцев
материала. (Ваши читатели, в свою очередь, могут переносить эти записи в собственные блоги и ленты, знакомя с ними своих последователей.)
Как
Ищите материалы, которые будут интересны вашим последователям. Критически
оценивайте их: соответствует ли информация высоким стандартам, которые вы
предъявляете к собственным творениям? Понравится ли она вашим последователям
настолько, чтобы они перенесли ее в свой блог? Не распространилась ли она по сети
настолько широко, что очередная ссылка будет выглядеть устаревшей? (А вдруг это
какое-то мошенничество или городская легенда? Обязательно проверьте!)
Удостоверьтесь, что вашим последователям понятно, чему посвящена перенесенная
публикация. Достаточно ли хорошо тема публикации описывается в заголовке или
анонсе, чтобы привлечь читателей? Если нет, то вы должны сами придумать хорошее
краткое описание или название для публикации.
Объясните своим читателям, почему вы посчитали эту публикацию достойной.
Если вы ведете блог, то у вас достаточно экранного пространства, чтобы процитировать
отрывки исходного текста и добавить комментарий. Также обязательно указывайте
полный URL-адрес исходного материала (в Twitter используйте механизм сокращения
URL-адресов).
Шаблоны 411
В Facebook есть встроенный механизм публикации ссылок, умеющий находить
заголовок, анонс и эскиз для соответствующего материала. Включайте в свое сообщение только самое необходимое, чтобы привлечь внимание читателей, либо напишите
комментарий длиной один–два предложения.
Если вы используете Twitter, то знакомы с функцией retweet. До того как в системе появился официальный механизм для этого, пользователи Twitter сформировали
собственные привычки и традиции переноса записей и указания авторства. Если
записи были намного короче максимальной допустимой длины, это оставляло место
для собственных коротких комментариев, таких как «Впечатляет!», или «Как думаете, сработает?», или «Вам нравится?», или «Какая ирония». Встроенный механизм
переноса записей, к сожалению, так делать не разрешает. С другой стороны, большая
часть записей в этом и не нуждается, так как носит информационный характер или,
например, сообщает о ближайших событиях. Это не требует комментариев.
Наконец, дайте своим последователям возможность комментировать переносимые
вами публикации. Место для комментария на странице Facebook найти очень легко,
но в блогах это не всегда очевидно. Если пользователи все же оставляют комментарии,
подталкивайте их к продолжению разговора. Возможно, на сайте, где этот материал
был впервые опубликован, уже развивается какая-то беседа, однако ваши последователи — это уникальная группа людей! Их разговоры могут быть совсем о другом.
Примеры
Многие компании публикуют на своих страницах в Facebook�����������������������
�������������������������������
материалы других авторов, чтобы последователи могли познакомиться с информацией, которую в противном
случае они бы не увидели. В примерах на рис. 9.9 ���������������������������������
REI������������������������������
дает ссылки на записи, пропогандирующие активный образ жизни и продажу инвентаря для отдыха на природе
(также обратите внимание на вопросы, играющие роль приглашений к разговору).
Рис. 9.9. Перенос публикаций и комментарии на странице REI
Рисунок 9.10 демонстрирует два способа, с помощью которых автор блога ������
American Red Cross переносит записи и комментирует содержимое других сайтов. Блоггер
вежливо благодарит человека, который показал ему этот график землетрясений.
Перенос записей в Twitter может осуществляться либо вручную, либо с помощью
встроенного механизма. На рис. 9.11 Тим О’Рейлли использует оба.
412 Глава 9 • Использование социальных сетей
Рис. 9.10. Перенос публикаций и комментарии на сайте American Red Cross
Рис. 9.11. Два способа переноса записей в Twitter
Conversation Starters (Приглашения к разговору)
Рис. 9.12. Тим Ганн задает вопрос поклонникам
Что
Ставьте вопросы, загадывайте загадки, предлагайте темы для обсуждения. Пусть ваши
последователи публикуют ответы, вступают в разговор — вы должны стараться поддерживать с ними беседу.
Шаблоны 413
Использовать, когда...
Вы хотите вовлечь читателей в диалог, добиться от них реакции на ваши записи.
Ваша аудитория в социальной сети способна поддерживать содержательную беседу
в используемом вами интерфейсе, а вы готовы при необходимости управлять такими
разговорами.
Почему
Если пригласить читателей к диалогу, особенно на интересующую их тему, они в большинстве случаев с готовностью пойдут на это!
Если человек отреагирует на ваше приглашение к разговору, возможно, он захочет
вернуться позже и прочитать ответы других людей (или даже подписаться на получение
ответов по электронной почте — такая функция поддерживается в некоторых системах).
Если публиковать забавные и привлекательные приглашения к диалогу, ваша читательская аудитория или количество последователей может существенно вырасти.
Помимо прочего, это увеличит ваш вес в социальной сети.
При наилучшем развитии событий читательские комментарии сами по себе превращаются в интересное содержимое. Люди разговаривают друг с другом, спорят или
соглашаются, меняют тему и, таким образом, создают нечто, стоящее прочтения.
Концептуально этот шаблон пересекается с идеей поиска решений путем «прочесывания». Например, блоггер может спросить читателей о некой насущной проблеме
и попросить их рассказать о своем опыте выхода из схожих затруднительных ситуаций.
Как
Подумайте, какие темы способны сильнее всего заинтересовать вашу аудиторию.
Поставив вопрос, попросите читателей поделиться мнением, догадками, историями
из жизни. Ответы на одни вопросы будут простыми, их пользователь сможет быстро
ввести; другие вопросы потребуют продуманных и содержательных ответов. Выберите
темы, которые заставят читателей говорить друг с другом — однако остерегайтесь тем,
которые могут привести к нежелательным спорам или плохо отразиться на вашем
сайте или торговой марке.
На момент написания этой главы Facebook������������������������������������
��������������������������������������������
представляется мне местом, где приглашения к разговору работают лучше всего. Короткие вопросы, зачастую сопровождаемые ссылкой или фотографией, привлекают внимание последователей, которые
видят их в своих новостных лентах. �������������������������������������������
Facebook�����������������������������������
отлично подходит для получения быстрых и коротких ответов (так же, как и Twitter).
Некоторые блоги располагают к тому, чтобы в комментариях завязывались продолжительные беседы, другие нет — возможно, потому, что среди их читателей не
укоренилась традиция давать развернутые комментарии. Но даже в тех блогах, читательская аудитория которых не так активна, в конце публикаций можно специально
задавать вопросы читателям — они обязательно отреагируют.
Примеры
Whole��������������������������������������������������������������������������
�������������������������������������������������������������������������
Foods��������������������������������������������������������������������
и REI��������������������������������������������������������������
�����������������������������������������������������������������
— это две торговые марки, любящие беседовать со своими последователями в Facebook. Темы питания и отдыха на природе вдохновляют множество
людей; участников дискуссий, показанных на рис. 9.13 и 9.14, вероятно, привлекли
сами темы, а не торговая марка. В примере со страницы ���������������������������
Whole����������������������
���������������������
Foods����������������
люди с удовольствием делятся информацией, которая может оказаться полезной многим читателям.
414 Глава 9 • Использование социальных сетей
Рис. 9.13. Приглашение к разговору на странице Whole Foods
Рис. 9.14. Приглашения к разговору на странице REI
Шаблоны 415
Читатели блогов, таких как Boing Boing, любят поговорить. На рис. 9.15 один из
блоггеров задает читателям вопрос, допускающий бесконечное множество ответов.
Рис. 9.15. Приглашение к разговору в блоге Boing Boing
Inverted Nano-pyramid (Инвертированная нанопирамида)
Рис. 9.16. Короткая, но информативная запись в Twitter
Что
Создавайте короткие, насыщенные информацией обновления статуса и заголовки.
Первые несколько слов — наиболее важные, они должны привлекать внимание нужных читателей и передавать основной смысл.
Использовать, когда...
Вы публикуете обновления в Twitter����������������������������������������������
�����������������������������������������������������
, Facebook������������������������������������
��������������������������������������������
и в других микроблогах либо составляете заголовки для публикаций в блоге или заголовки других статей.
Почему
Человек быстро пробегает взглядом по обновлениям и заголовкам, выбирая вещи,
стоящие внимания. Выжмите все возможное из предоставленного вам небольшого
пространства и временного промежутка.
Длинные записи в Twitter, обновления статуса и подобные материалы нельзя так
же эффективно перенести к себе в блог или процитировать, как короткие. Вы хотите,
чтобы ваши последователи переносили к себе написанные вами обновления и знакомили с вами своих читателей.
Как
Журналисты печатных изданий традиционно используют «инвертированную пирамиду» для оформления новостных статей. Самая важная информация концентри-
416 Глава 9 • Использование социальных сетей
руется в первом предложении первого абзаца истории. За ним следуют чуть менее
важные сведения, потом еще менее важные и т. д. Самая маловажная информация
оказы­вается в конце. Так как большинство читателей никогда не заглядывают дальше
первых ­нескольких предложений, суть истории необходимо изложить для них в самом
начале.
Неприлично низкий лимит количества символов в Twitter заставил нас научиться
выражать мысли кратко. На счету каждое слово, каждый символ. Используйте форму пирамиды — помещайте самое важное в начало — и при этом сжимайте фразы до
размера записи в Twitter или сообщения обновления статуса. Вот несколько советов,
которые помогут вам правильно представлять информацию:
‰‰тщательно выбирайте слова, наилучшим образом представляющие тему и контекст.
Используйте точные термины, не общие описания: каждое слово должно иметь
вес. Поймут ли люди вашу запись или заголовок, если прочитают ее вне контекста, например в списке результатов поиска? Такая оценка поможет вам подобрать
правильную формулировку;
‰‰избавляйтесь от «мусорных» слов, таких как соединительные конструкции и ввод­
ные слова, но не делайте предложения слишком загадочными и трудными для
понимания;
‰‰с толком используйте аббревиатуры; ваше предложение не должно звучать как
SMS-сообщение десятилетнего ребенка;
‰‰в каждой фразе должен быть один акцент. Если вам нужно рассказать о двух идеях
или описать две ссылки, создайте две записи или два обновления статуса;
‰‰если в предложении встретилось длинное слово, постарайтесь заменить его коротким синонимом. Однако если это длинное слово обладает особенной метафоричностью или спецификой, его стоит оставить для привлечения внимания и создания
акцента;
‰‰для формулировки предложений используйте один из восьми типов заголовков,
описанных Робертом Блайем в книге «The Copywriter’s Handbook» (издательство
Holt Paperbacks). Он определяет следующие типы заголовков: прямой, косвенный,
новость, практическая инструкция, вопрос, команда, причина, характеристика.
Хорошее описание этих типов, а также множество примеров вы найдете в статье
Copyblogger по адресу http://www.copyblogger.com/how-to-write-headlines-that-work/;
‰‰будьте терпеливы. Для написания емких коротких фраз вам потребуется задуматься
куда серьезнее и сделать намного больше попыток, чем может показаться с первого
взгляда.
Примеры
Записи в Twitter на рис. 9.17 рассказывают ультракороткие истории. Их невозможно
не прочитать целиком.
Заголовки на рис. 9.18 специально написаны так, чтобы читателю захотелось щелк­
нуть на них и прочитать новость полностью.
Как видно на рис. 9.19, организация American����������������������������������
������������������������������������������
Red������������������������������
���������������������������������
Cross������������������������
�����������������������������
использует статус �����
Facebook для того, чтобы рассказать о чем-то и убедить читателей ознакомиться с полной
версией материала (ссылки не показаны).
Шаблоны 417
Рис. 9.17. Ультракороткие истории
Рис. 9.18. Заголовки новостей приглашают щелкнуть на них
Рис. 9.19. Сообщения и ссылки в статусе American Red Cross на Facebook
Timing Strategy (График публикации)
Рис. 9.20. Возможный план публикации информации в социальных сетях
418 Глава 9 • Использование социальных сетей
Что
Размещайте публикации в социальных сетях в соответствии с принятыми там условностями: одни каналы требуют частого обновления, другие можно обновлять достаточно
редко. Лучшие публикации должны появляться сразу в нескольких источниках. Также
подумайте, какой день недели и какое время суток лучше всего подходят для публикации.
Использовать, когда...
Любой человек или организация, активно использующие социальные сети, должны
разработать стратегии публикации и следовать ей.
Почему
Слишком активно используя канал в социальной сети, вы перегружаете своих последователей информацией. В результате они либо отказываются от подписки на ваш канал,
либо составляют о вашей организации негативное мнение. Не раздражайте людей.
С другой стороны, недостаточно частое обновление канала — это утерянные возможности. Последователи видят ваше имя или название вашей организации не так
часто, как вам хотелось бы.
Пользователи Twitter и Facebook имеют свои особые представления относительно
того, как часто в их персональной ленте новостей должны появляться записи не от
друзей (а, например, от коммерческих организаций). Некоторые представления диктуются особенностями механизмов публикации: записи в Twitter короче и быстрее
читаются, чем обновления в Facebook��������������������������������������������
����������������������������������������������������
. Однако помните, что по мере развития и изменения технологий эти представления могут меняться.
Как
Важнее всего понимать, чего ожидают пользователи социальных каналов. Если вы
публикуете записи слишком часто, они забивают ленты ваших последователей, люди
начинают раздражаться и могут отказаться от подписки на ваши публикации.
Тем не менее любой совет, который я могла бы вам дать, следует рассматривать как
точку отсчета, не более. Публикуя записи в социальной сети, наблюдайте за изменением количества подписчиков, прислушивайтесь к отзывам последователей и оперативно
меняйте расписание публикаций, если заметите, что люди от вас уходят.
На момент написания этой главы наблюдаются следующие закономерности при
публикации содержимого в различных социальных сетях.
Страницы Facebook обновляются раз в день, иногда реже. На большинстве изученных мной успешных страниц частота обновления составляла раз в два дня, но при этом
некоторые пользователи публиковали по два обновления в день (например, Wired), а
другие обновляли каналы намного реже среднего. Исключения иногда делаются для
содержимого, зависящего от времени публикации, для кампаний большого диапазона
охвата и для чрезвычайных ситуаций, когда происходит, например, крупное землетрясение — потребители контента спокойно отнесутся к краткому всплеску активности,
если дело того стоит. Вы можете выбрать для себя подходящий вариант.
Записи в Twitter публикуются намного чаще, чем обновления Facebook. Изученные
мной организации публиковали в среднем от 3 до 15 записей в день, и происходило
это между полуднем и 8 часами вечера по североамериканскому восточному времени;
в выходные активность снижалась. Это важно, так как записи должны выходить в эфир
в то время суток, когда большинство людей находятся рядом с компьютером и могут
Шаблоны 419
оперативно проверять обновления в Интернете. Пользователи Twitter (в отличие от
пользователей Facebook) обычно не прокручивают ленту новостей назад в поисках
интересного материала. Обратите внимание, что многие записи, публикуемые организациями, — это прямые ответы отдельным людям; они могут очень существенно
увеличить среднее число ежедневных публикаций.
Для организаций, использующих несколько социальных каналов, количество публикаций в блоге варьируется между 0,5 и 2,5 в день. Здесь речь идет о более крупной
форме: очерки, истории, интервью и другие материалы, включающие более одного–
двух предложений. Иногда блоги «подкармливают» также ленты в ����������������
Facebook��������
и Twit�����
ter — ссылки на публикации (обычно не все), дополненные краткими описаниями,
публикуются в лентах социальных служб. Живое обсуждение публикации с большей
вероятностью произойдет в Facebook или Twitter, а не на самой странице блога.
Электронные сообщения должны рассылаться редко. Если пользователи будут
получать сообщения от вашей организации слишком часто (чаще раза в три–четыре
дня), они могут поставить на вас клеймо «спамер».
Мне не удалось обнаружить никаких закономерностей в публикации содержимого
в Flickr, YouTube и других хранилищах мультимедиа-контента. Вероятно, причина
этого заключается в том, что они не «выталкивают» материалы в личные новостные
ленты последователей, как происходит в других социальных службах.
Примеры
Диаграммы на рис. 9.21 демонстрируют расписания публикации нескольких компаний и организаций, широко представленных в социальных сетях. Данные собирались
в течение двух месяцев в начале 2010 года — в январе и феврале. Цифры представляют
среднее число публикаций в день в каждом из трех социальных каналов: ��������������
Twitter�������
, �����
Facebook и основной блог организации (не у каждой из них имеется свой блог). Очевидно,
что активность в Twitter выше, чем в других сетях, что отражает его эфемерную природу.
Последние две организации, American��������������������������������������������
����������������������������������������������������
Red����������������������������������������
�������������������������������������������
Cross����������������������������������
���������������������������������������
и Partners�����������������������
�������������������������������
in��������������������
����������������������
Health�������������
�������������������
, благотворительные. Пока я собирала данные, эти две компании проводили активные кампании
по оповещению и сбору средств, связанные с землетрясением на Гаити. Активность на
Facebook существенно возросла в январе, а затем снова упала до нормального уровня
в феврале; это видно по чуть более высоким январским показателям.
Рис. 9.21. Фактическая частота публикации в социальных сетях для девяти организаций
420 Глава 9 • Использование социальных сетей
Specialized Streams (Специализированные потоки)
Рис. 9.22. Блоги Wired, посвященные разным темам
Что
Разделите поток материалов на несколько каналов, у каждого из которых будет своя
аудитория и свое «ощущение». Используйте несколько учетных записей в Twitter,
разные страницы в Facebook��������������������������������������������������
����������������������������������������������������������
, разные блоги — это поможет донести нужную информацию до нужной аудитории.
Использовать, когда...
Ваша организация генерирует много обновлений статуса, новостных статей, публикаций в блоге и других элементов, распространяемых в социальных сетях. Эти элементы
легко разбить на категории по теме или основываясь на каких-то других факторах (таких как частота и автор). У вас большая читательская аудитория, но многие читатели
заинтересованы в одной–двух из этих категорий, но не во всех сразу.
Почему
Если попытаться поместить все обновления вашей организации в один огромный
поток, пользователям будет сложно воспринять его. Например, страницу Facebook
не рекомендуется пополнять записями многократно в течение дня. Это перегружает
ленту читателей, и они просто отписываются от таких потоков.
Шаблоны 421
Когда на выбор предоставляется несколько отдельных потоков или страниц,
человек сам определяет, какие темы ему интересны, и, таким образом, формирует
собственное впечатление от участия в социальных сетях.
Как
Разбивайте обновления на категории согласно требованиям ваших последователей.
Попробуйте следующие способы сегментации и посмотрите, подходит ли для вас
такой вариант (разумеется, не все из предложенного может оказаться полезным для
вашей организации).
По продуктам
Вы продаете разные продукты разным типам покупателей? Каковы их общие
требования? Что их объединяет? Например, у пользователей смартфонов может
быть один набор предпочтений, а у пользователей настольных систем совсем другой.
По теме
Если вы публикуете много новостных статей или статей-мнений, подумайте,
можно ли разделить рынок согласно темам?
По профессиональной роли
См. пример из Google�������������������������������������������������������
�������������������������������������������������������������
на рис. 9.25; некоторые блоги этой компании предназначены для широкой аудитории, другие интересны руководителям, третьи — разработчикам.
По стилю использования социальной службы
Как часто ваши последователи читают поток новостей? Некоторые практически
живут в Twitter; их не раздражает большое количество пустой болтовни. Другим
интересны редкие, но более стоящие внимания обновления. У �����������������
CNN��������������
несколько потоков новостей, для каждого из которых используется свой график публикации.
Это помогает удовлетворить потребности разных аудиторий (рис. 9.23).
В выбранных вами социальных службах создайте разные каналы или потоки.
Каждому из них необходимо дать описательное название, содержащее имя и логотип
компании, а также оформить в соответствии с корпоративным стилем. Не должно возникать вопросов, является данный поток частью официальной социальной стратегии
или нет.
Подталкивайте людей по направлению к этим потокам в правильных точках.
Поместите ссылки на главной странице или в главном потоке вашей социальной
сети. Например, если у вашей организации есть официальная страница в Facebook,
­перечислите на ней ссылки на специализированные потоки. Раз уж вы потратили
силы на создание разных потоков, вы просто обязаны сообщить людям об их существовании!
Подумайте, можно ли использовать часть содержимого специализированных потоков — не все, разумеется, — в основном блоге, на официальной странице Facebook
или в потоке Twitter. В таких публикациях снова ссылайтесь на специализированные
потоки, чтобы заинтересованные читатели могли найти и подписаться на них.
Примеры
Новости — это основа бизнеса CNN, и компания генерирует множество новостей. У нее
есть главный поток Twitter, который каждые несколько часов пополняется новостями
422 Глава 9 • Использование социальных сетей
общего характера, однако у потока cnnbrk (экстренные сообщения) почти в три раза
больше последователей. cnnireport — это третий из основных потоков CNN в Twitter,
и на главном веб-сайте �����������������������������������������������������������
CNN��������������������������������������������������������
есть ссылки на все три. Однако опытные и заинтересованные пользователи Twitter могут найти еще больше! Развлечения, погода, технология,
финансы, международные новости и другие темы освещаются в собственных потоках
Twitter, хотя их и не так просто обнаружить. Несколько потоков CNN показаны на
рис. 9.23.
Рис. 9.23. Некоторые потоки CNN в Twitter
Аналогичным образом ���������������������������������������������������
Wired����������������������������������������������
распределяет многочисленные обновления по потокам Twitter, каждый из которых специализируется на определенной теме. Многие
из этих записей дополняются ссылками на соответствующие публикации в блоге
Wired — см. рис. 9.22, который иллюстрирует один из блогов. Очень удобно, что на
фоновом изображении страницы Wired имеется длинный список специализированных
потоков этой организации в Twitter (рис. 9.24). Хоть это и не ссылки, они все равно
передают важную информацию.
Компания �������������������������������������������������������������������
Google�������������������������������������������������������������
создала множество продуктов, у каждого из которых своя аудитория (простые пользователи, разработчики, эксперты в данной сфере и т. д.). Кроме
того, компания работает во всех уголках мира, и в разных регионах внимание людей
Шаблоны 423
привлекают разные аспекты ее деятельности. Именно поэтому у ���������������������
Google���������������
так много корпоративных блогов (рис. 9.25), через которые компания распространяет обновления
и полезную информацию. В главном блоге публикуются истории общего направления,
но иногда также появляются записи из специализированных блогов.
Рис. 9.24. Главный поток Wired в Twitter; специализированные потоки
перечислены в левом поле
Рис. 9.25. Некоторые блоги Google
Microsoft создала множество своих потоков в Facebook, Twitter, YouTube, Flickr,
MySpace, Delicious, на форумах и в блогах. Некоторые из них перечислены на рис. 9.26.
Они предназначены для пользователей определенных продуктов и исполняют определенные функции; некоторые очень узкоспециализированные, а другие охватывают огромные аудитории. (Благодарю за эти таблицы EngagementDB, http://www.
engagementdb.com/Company/77.)
424 Глава 9 • Использование социальных сетей
Рис. 9.26. Компания Microsoft широко представлена в социальных сетях
Social Links (Социальные ссылки)
Рис. 9.27. Десять способов стать последователем Huffington Post
Что
На главной странице веб-сайта разместите группу ссылок на страницы в социальных
сетях.
Шаблоны 425
Использовать, когда...
Вы поддерживаете один или несколько каналов в социальных сетях: блогах, Face�����
book, Twitter, Delicious и т. д., и вам хотелось бы увеличить читательскую аудиторию.
Если речь идет о самодостаточных службах, таких как Facebook, то посетители могут
с одинаковым успехом заходить как на ваш главный веб-сайт, так и на страницу в социальной службе.
Почему
Если вы уже занимаетесь инвестициями в различные социальные сети, то почему бы
не рассказать об этом людям? Посетителям вашей домашней страницы эти ссылки
будут полезны, особенно если они специально искали возможность подписаться на
ваш канал в социальной службе.
Подобные виджеты для подключения к социальной сети представляют собой
удобный способ вставить публикации компании или организации в личный новостной
поток. Они удобны как для читателей, так и для компаний; кроме того, они демонстрируют, что компания не отстает от современных тенденций в сфере социальных
технологий.
Как
Создайте небольшую область, содержащую хорошо обозначенные ссылки на социальные сайты и публичные хранилища: Facebook, Twitter, YouTube, Flickr, Delicious,
официальный блог и т. д. Также отсюда зачастую можно выйти на RSS-потоки. На
некоторых сайтах в эту область также помещается поле для подписки на рассылку
обновлений по электронной почте.
Узнаваемые значки работают лучше, чем обычные ссылки — для простоты их поиска на странице лучше использовать логотипы. Однако в некоторых дизайнах они
смотрятся чужеродно, а простые текстовые ссылки с «письменным приглашением»,
наоборот, освежают страницу. См. примеры с веб-сайтов ��������������������������
Slate���������������������
, Whole��������������
�������������������
Foods��������
�������������
и �����
Copyblogger в следующем разделе.
Недостаток социальных ссылок заключается в том, что они перенаправляют ваших
посетителей на другой сайт, где те могут остаться, вместо того чтобы продолжать изучать ваш главный веб-сайт. Социальные сети способны особенно сильно притягивать
пользователей: заходя туда, человек остается там надолго и на предыдущий сайт уже
не возвращается. (У многих новостных сайтов с сильным представительством в социальных сетях, таких как CNN и Wired, социальных ссылок на домашней странице нет.)
Один из способов избежать этой проблемы — поменять ссылки на кнопки. Кнопка
Facebook�����������������������������������������������������������������������
, к примеру, открывает виджет, с помощью которого можно стать поклонником определенной страницы. Таким образом, пользователь делает нечто, связанное
с социальной сетью, но не уходит на ее сайт.
У некоторых сайтов есть несколько потоков в �����������������������������������
Twitter����������������������������
или страниц в �������������
Facebook�����
, отражающих разные аспекты деятельности организации (см. шаблон Specialized Streams
(Специализированные потоки)). Эти потоки также можно перечислить в списке социальных ссылок. Один из вариантов показан в примере с Vancouver Olympics на рис. 9.28.
Можно также добавить «крючки», цепляющие интерес пользователей. Например, виджет социальных ссылок на сайте Copyblogger сообщает, что у потока этой
организации в Twitter уже 48 206 последователей. Это блестящий ход! Предоставляя
426 Глава 9 • Использование социальных сетей
конкретную информацию, виджет оказывает мягкое давление, заставляя и вас тоже
стать последователем — и вы при этом получаете удовольствие! Точно так же Mashable
сообщает общее число последователей во всех социальных службах (Twitter, Facebook,
RSS и т. д.).
Рис. 9.28. Виджеты социальных ссылок на домашних страницах
(против часовой стрелки, начиная с верхнего левого угла):
Mashable, American Red Cross, Vancouver Olympics, Levi’s, Whole Foods, Copyblogger и Slate
Рис. 9.29. Страница продуктов, связанных с Microsoft Windows,
и одна из страниц пресс-релиза Ford
Шаблоны 427
Примеры
На рис. 9.28 показаны виджеты социальных ссылок на различных сайтах.
В примерах на рис. 9.29 Microsoft и Ford используют более обширное пространство
на внутренних страницах веб-сайтов. Здесь показаны примеры последних записей
в каждом из перечисленных социальных сервисов, причем на всех картинках можно
щелкнуть для перехода на соответствующий сайт. Живые примеры делают пред­
ставительство в социальной сети более привлекательным для людей, интересующихся
данной темой. (Очевидный недостаток такого подхода — количество занимаемого
места.)
Sharing Widget (Виджет для рассылки)
Рис. 9.30. Виджет для рассылки в конце статьи на веб-сайте Slate
Что
Рядом со статьями, видео и другими материалами размещайте набор элементов управления, с помощью которого посетитель сможет с легкостью поделиться прочитанным
или просмотренным со своими друзьями и последователями в социальных сетях. Сюда
часто входят ссылки на такие сайты, как Facebook и Twitter.
Использовать, когда...
Виджеты для рассылки сегодня можно встретить повсеместно. Если вы публикуете
оригинальные материалы любого типа, то только выиграете от наличия подобных
инструментов на веб-сайте, даже если это будут простейшие кнопки.
Почему
Это удобно для пользователей, которые хотят поделиться с другими вашей оригинальной статьей или записью. Это помогает переносить публикации и комментировать,
а значит, поддерживать свою репутацию в социальной среде.
Читатели распространят созданное вами содержимое среди своих контактов в социальных сетях. Человек с большей вероятностью прочитает статью, которую ему
порекомендовал знакомый, а еще лучше друг или член семьи, чем случайно найденную
в сети. См. шаблон Personal Recommendations (Личные рекомендации) в главе 1.
Некоторые инструменты рассылки позволяют отслеживать, какие именно элементы пользуются наибольшей популярностью. Таким образом, вы получаете данные для
анализа и для составления «доски почета» наиболее часто рассылаемых элементов.
Как
Можно создать собственный виджет для рассылки или воспользоваться конструктором на стороннем сайте, таком как ShareThis�������������������������������������
����������������������������������������������
. Перечислите в виджете каналы, кото-
428 Глава 9 • Использование социальных сетей
рые ваши посетители используют наиболее часто, но не загромождайте его слишком
большим числом элементов. (В крайнем случае, найдите статистику по относительной
популярности социальных сетей и сайтов для хранения закладок и всегда указывайте
лучшие. На момент написания этой главы наибольшей популярностью пользуются
Facebook и рассылка по электронной почте, однако Twitter быстро набирает обороты.)
Можно включить в виджет для рассылки следующие службы:
‰‰социальные сети, такие как Facebook и MySpace;
‰‰микроблоги, такие как Twitter;
‰‰публичные сайты для хранения закладок, такие как Digg и Delicious;
‰‰инструмент для отправки электронной почты — этот способ остается самым популярным среди очень большого числа пользователей Интернета;
‰‰инструмент для отправки SMS-сообщений;
‰‰другие инструменты, не относящиеся к рассылке: печать, комментирование, кнопка
«нравится/не нравится».
Если на странице достаточно пространства, можно также для каждой из служб
рассылки добавить счетчики: сколько человек поделилось этой статьей со своими
друзьями через данный социальный канал. Это дает читателю мгновенное понимание
актуальности и свежести материала. (Если показатели счетчика получаются стабильно
низкими, возможно, их показывать не стоит.)
Помещайте виджет для рассылки вплотную к материалу, с которым он связан. Чаще
всего его можно увидеть сверху или снизу статьи, хотя на некоторых сайтах для него
выделяется специальная врезка (окруженная текстом). В любом случае, виджет всегда должен оставаться в поле зрения читателя. Кроме того, прежде чем поместить его
в раскрывающееся меню или на панель инструментов, подумайте о программах чтения
экрана — увидят ли его читатели? А смогут ли им воспользоваться люди, не имеющие
возможности хорошо управлять мышкой? Возможно, лучше всего остановиться на
самом простом варианте и оставить виджет на странице рядом с текстом.
Если вы используете инструмент для переноса публикации в �����������������
Facebook���������
, удостоверьтесь, что HTML-код вашей страницы правильно структурирован. Проверьте, что
Facebook успешно распознает заголовок, анонс и эскиз. (Также обязательно проверьте
инструменты рассылки других сайтов и служб.)
Примеры
На многих сайтах разные виджеты для рассылки используются в разных контекстах
(рис. 9.31). Например, виджет, включающий три наиболее популярные службы, может
находиться в начале статьи, а более сложный, объединяющий все остальное, — в конце.
Это утяжеляет дизайн, но может помочь, если вам необходимо дать пользователям
доступ к большому числу служб, но наверху экрана для этого места недостаточно.
Всплывающие окна и раскрывающиеся меню, включающие «длинный хвост»
ссылок на социальные службы, — один из наиболее распространенных вариантов
реализации прогрессивного обнаружения. Пользователь не видит обширный список
ссылок до тех пор, пока не нажимает кнопку. Но снова повторюсь: вспомогательным
технологиям, таким как программы чтения экрана, не так просто добраться до скрытой
функциональности.
Шаблоны 429
Рис. 9.31. Виджеты для рассылки с веб-сайтов Wired, Boing Boing, Technorati, Pandora
На веб-сайте Mashable (рис. 9.32) реализованы три стратегии: небольшой виджет
для рассылки рядом с отрывком из новостной статьи на главной странице, расширенный виджет на странице, содержащей статью целиком (добавилась возможность
отправки по электронной почте и кнопка Share (Поделиться)), а также всплывающее
окно, появляющееся после щелчка на кнопке Share.
Рис. 9.32. Виджеты для рассылки на веб-сайте Mashable
В других библиотеках
http://www.designingsocialinterfaces.com/patterns/Share_This
430 Глава 9 • Использование социальных сетей
News Box (Поле новостей)
Рис. 9.33. Поле новостей на сайте American Red Cross
Что
На заглавной странице сайта показывайте последние новости, публикации в блоге,
видео и другое содержимое, имеющее сильную привязку ко времени публикации.
Каждый элемент должен привлекать внимание читателей броскими, хорошо читаемыми заголовками, анонсами, ссылками на полный материал и, возможно, эскизами.
Использовать, когда...
Ваша организация регулярно публикует новости, оригинальные материалы на тему,
интересующую посетителей вашего сайта, или «социальные объекты», которые пользователи комментируют и обсуждают. Вы хотите пригласить посетителей прочитать
эти элементы.
Почему
Поле новостей содержит материал, который может надолго завладеть вниманием посетителей. Открыв сайт без такого раздела, человек быстро просматривает содержимое, не находит ничего интересного и закрывает страницу. Благодаря полю новостей
он, однако, может задержаться надолго и узнать что-то новое о вашей организации.
Помимо этого, поле новостей весьма информативно. Пользователи могут заходить
на сайт с целью прочитать новости или узнать о последних событиях — так предоставьте им эту информацию!
Сайт будет регулярно пополняться новым содержимым. Хорошей практикой считается регулярное обновление материала на заглавной странице. Посетители видят,
Шаблоны 431
что здесь что-то происходит — что это не сайт-призрак, — и планируют вернуться
в будущем, посмотреть, что новенького.
После того как посетитель щелкает по ссылке в поле новостей, он попадает на новую
страницу, которая может быть оснащена всем необходимым: ссылками на похожие истории и другие публикации в блоге, виджетом для рассылки (см. одноименный шаблон),
комментариями читателей и прочими вещами, для которых нет места на заглавной
странице. Все это привлекает внимание и помогает удержать посетителя на веб-сайте.
Темы, слова и изображения в поле новостей вносят большой вклад в первое впечатление посетителей о вашей организации. Пользователи косвенным образом узнают
что-то о вас, ориентируясь лишь на освещенные в поле новостей темы, интонации
текста и другие сигналы.
Как
Поместите поле новостей на домашнюю страницу; оно не обязательно должно отображаться целиком, без прокрутки экрана (хотя на многих сайтах сделано именно так,
вероятно, владельцам сайта не требуется большая площадь для вывода другой информации об организации или сайте). Поле новостей должно быть достаточно большим,
чтобы вмещать несколько публикаций, каждая из которых занимает, как минимум,
несколько строк текста. Кроме того, его можно поделить на разделы в зависимости от
источника или типа содержимого (фотографии или видео). На некоторых веб-сайтах
в дополнительных подразделах отображаются менее значительные элементы (обычно
в форме заголовков со ссылками на полный материал), поддерживающие крупные
ссылки на главные статьи.
Каждый элемент должен включать следующее:
‰‰заголовок, содержащий ссылку на основную статью;
‰‰краткое описание, «продающее» статью читателю;
‰‰ссылку «больше», также ведущую на основную статью. Она должна выглядеть как
настоящая ссылка: соответствующего цвета, с подчеркиванием, кавычками-елочками и другими визуальными подсказками.
Кроме того, при необходимости можно добавить следующее:
‰‰эскиз. В наиболее удачных полях новостей обычно используются небольшие изображения;
‰‰дату публикации содержимого;
‰‰указание источника: блога, новостного сайта, пресс-релиза, страницы YouTube и т. д.
Если щелчок на ссылке переносит посетителя на другой сайт, то следует сообщить
об этом — это правила вежливости;
‰‰виджет для рассылки и ссылку на комментарии читателей. Эти элементы чаще
всего добавляются на страницу, где статья или материал отображаются полностью.
В таких заголовках и анонсах важно каждое слово. При написании заголовков
учитывайте рекомендации шаблона Inverted nano-pyramid (Инвертированная нанопирамида); избавляйтесь от ненужной информации в анонсе (подпись автора, указание на местоположение). Если возможно, привлекайте сотрудников к написанию
собственных анонсов; не выводите в качестве анонса первое предложение статьи. Тон
и слова даже в таком коротком тексте дают вашей организации некую характеристику, поэтому удостоверьтесь, что они правильно отражают ваши ценности. Выбирайте
432 Глава 9 • Использование социальных сетей
стиль ананса, он может быть легкомысленным, внушающим доверие, юмористическим,
задорным, простоватым, ироничным и т. д.
Если вы берете содержимое из хранилищ мультимедиа-контента, таких как Flickr,
то проверьте, не предлагают ли такие системы виджеты, которые можно установить
на своей странице. Однако убедитесь, что подобные вещи не ломают и не замедляют
загрузку сайта.
Примеры
Red Bull спонсирует представителей различных видов спорта. Хотя эта компания
выпускает только напиток, поле новостей на ее веб-сайте рассказывает о спортсменах
и спортивных событиях (рис. 9.34). Изображения и текст создают впечатление движения и скорости. Обратите внимание на ритм макета, короткие, но сильные фразы,
на четкость ссылок на статьи и видео.
Рис. 9.34. Поле новостей на веб-сайте Red Bull
Шаблоны 433
Целевая аудитория Whole Foods совершенно другая, поэтому у веб-сайта этой
компании иное «ощущение». Однако поле новостей похоже на аналогичный элемент
на сайте Red Bull благодаря четкости и ритму (рис. 9.35).
Рис. 9.35. Поле новостей на веб-сайте Whole Foods
Поле новостей на сайте Ford включает элементы разного размера и значимости
(рис. 9.36). Визуальная иерархия ясно сообщает о том, какие статьи ���������������
Ford�����������
хочет преподнести читателям в первую очередь. Большие графические фрагменты и крупный
текст фокусируют взгляд в верхнем левом углу, а мелкий размер шрифта «последних
заголовков» (раздел Latest Headlines) позволяет разместить их на доступном небольшом
пространстве.
Рис. 9.36. Поле новостей на веб-сайте Ford
434 Глава 9 • Использование социальных сетей
Однако удостоверьтесь, что заголовки и анонсы не слишком короткие и понятны
читателям. Элементы поля новостей на веб-сайте Sierra Club слишком сложны для
восприятия, поэтому у читателя не возникает желания щелкнуть на них (рис. 9.37).
Рис. 9.37. Поле новостей на веб-сайте Sierra Club
Content Leaderboard (Доска почета)
Рис. 9.38. С веб-сайта Wall Street Journal
Что
Показывайте список наиболее популярных статей, публикаций в блоге, видео и других
материалов. Используйте «социальные показатели»: сколько раз на эту статью сослались в социальных сетях, сколько раз ее отправили по электронной почте, сколько раз
упомянули в блоге.
Использовать, когда...
На вашем сайте генерируется большое количество содержимого, автором которого
выступает ваша компания или другие участники. Возможно, у вас действуют опреде-
Шаблоны 435
ленные принципы организации материалов на странице (например, поток новостей,
как описано в одноименном шаблоне в главе 2), но вы хотите, чтобы все посетители
знали, какие материалы показались другим читателям наиболее интересными. У вас
достаточно читателей, в том числе тех, которые переносят ваши публикации на другие
сайты, поэтому среди опубликованных статей быстро появляются лидеры.
Почему
Это способ составления «списка лидеров» вашего сайта. Количество рассылок и пе­
реносов в другие блоги демонстрирует предпочтения посетителей — или, по крайней
мере, показывает, что ваши читатели считают интересным для своих последователей.
Если у читателей хороший вкус, то они разрекламируют лучшие материалы вашего сайта, если же нет — то укажут вам на самые странные или будоражащие. (Ваш
вкус может не совпадать со вкусом ваших посетителей!) В любом случае, остальных
­пользователей также может заинтересовать содержимое, получившее наивысшие
оценки.
Как
Собирайте данные о том, какие материалы рассылаются по электронной почте, переносятся на другие сайты и т. д. Если у вас это еще не сделано, поместите рядом с каждой
статьей виджет для рассылки, чтобы читателям не приходилось прилагать особых
усилий для отправки и переноса заинтересовавшего их содержимого.
Показывайте список наиболее популярных статей дня (или недели, если ваш сайт
обновляется не очень часто). Элементы списка должны включать ссылки на исходные
публикации. На сайтах, где ведется несколько списков (рассылка по электронной почте, перенос в блог и т. д.), для удобного вывода на экран часто применяются модульные вкладки (см. одноименный шаблон в главе 4).
«Доски почета» часто оформляют как небольшие боковые панели на заглавной
странице или внутренних страницах сайта; на центральную сцену (см. главу 4) их не
помещают. Содержимое обычно сортируется по определенным показателям, таким
как время публикации или оценка редактора.
Примеры
На сайте New York Times можно увидеть знакомую всем архетипическую доску почета
(рис. 9.39). Она состоит из четырех вкладок, на каждой из которых находится список
наиболее популярных элементов в категории (обратите внимание, что одна из категорий — не статьи, а поисковые запросы). Если открыть статью в определенном разделе,
например Business (Бизнес), то вид доски почета немного изменится: вы увидите наиболее популярные статьи в данном разделе.
На веб-сайте Engadget используется красочная, привлекающая внимания доска
почета (рис. 9.40), на которой собраны публикации с наибольшим числом комментариев. Сравните это яркое представление с нейтральным оформлением досок почета на
рис. 9.41. Также обратите внимание на разные названия вкладок, отражающие разные
критерии выбора лидеров на этих сайтах (правда, невозможно сказать, по какому критерию осуществляется отбор на сайте Mashable (верхний правый угол)).
436 Глава 9 • Использование социальных сетей
Рис. 9.39. Доски почета на веб-сайте New York Times
Рис. 9.40. Веб-сайт Engadget
Шаблоны 437
Рис. 9.41. Доски почета на веб-сайтах Technology Review,
Mashable (верхний правый угол) и Wired (внизу)
438 Глава 9 • Использование социальных сетей
Recent Chatter (Последние комментарии)
Рис. 9.42. Последние комментарии в двух блогах: Boing Boing и Kitchen Table Math
Что
Показывайте на боковой панели сайта последние комментарии читателей, записи
в микроблогах, пользовательские статьи и прочую информацию, говорящую об активности сообщества.
Использовать, когда...
Вы хотите подтолкнуть посетителей вашего сайта к активному участию в жизни сообщества: прекрасно, что люди приходят и читают ваши статьи или становятся последователями в социальных сетях, но было бы лучше, если бы они сделали еще один
шаг вперед и внесли свой вклад в развитие интересующего их ресурса.
Вокруг публикуемых вами материалов происходит большая социальная активность, и комментарии достаточно грамотные и содержательные, чтобы можно было
показывать их фрагменты на заглавной странице.
Почему
Читатели понимают, что ваш сайт — не «город-призрак». Они видят других людей,
активно принимающих участие в разговорах. Это привлекает новых участников, приглашает их поделиться своими мыслями.
Шаблоны 439
Читателей можно привлечь к диалогу, показывая отрывки бесед других людей —
у них может появиться желание ответить на определенный комментарий.
Как
Создайте виджет, в котором список последних комментариев на сайте будет выводиться в обратном хронологическом порядке. Этот виджет не обязательно должен
располагаться в верхней части экрана, которая видна без прокрутки; очень часто подобные элементы помещают в неприметное место на главной странице или даже на
внутренней странице сайта.
Выберите типы социальной активности, о которых вы будете сообщать. Наиболее часто показывают комментарии, поскольку они могут быть интересны другим
читателям; также можно публиковать записи из микроблогов на определенную тему.
Можно иллюстрировать процесс голосования или выставления оценок (как, например, в функции Vote to Promote (Голосуйте для продвижения) в библиотеке шаблонов
Yahoo!), а также указывать количество рассылок и переносов определенного материала
в другие блоги. Однако удостоверьтесь, что подобные данные не скроют основную
активность пользователей — текстовые комментарии вызывают у посетителей наибольший интерес.
В списке последних комментариев показывайте следующее:
‰‰тип пользовательской активности, если возможно, то с фрагментом комментария;
‰‰имя читателя, который инициировал эту активность;
‰‰заголовок исходного материала и ссылку на него;
‰‰возможно, временную отметку или относительное время создания (например,
«10 минут назад»).
Иногда соответствующие функции встроены в программное обеспечение для создания блогов. Они почти не требуют затрат — разве что экранное место, которое будет
занимать поле последних комментариев.
Примеры
На некоторых сайтах демонстрируются разные типы пользовательских отзывов
(рис. 9.43). Yelp показывает обзоры (Fresh Lists (Списки свеженького)) и непринужденные замечания посетителей в двух разных разделах. На веб-сайте MyStarbucksIdea
можно увидеть последние идеи, опубликованные пользователями (отображаются
только заголовки). Technology Review относится к традиционным новостным сайтам,
раздел последних комментариев на котором выполнен более изящно, чем в блогах на
рис. 9.42. Обратите внимание, что за счет отсутствия прямых цитат MyStarbucksIdea
и Technology������������������������������������������������������������������
����������������������������������������������������������������������������
Review�����������������������������������������������������������
�����������������������������������������������������������������
выглядят более отстраненными, чем неформальный Yelp�������
�����������
и примеры блогов на рис. 9.42 (иногда именно это и бывает нужно).
На веб-сайте Yahoo! News (рис. 9.44) виджет последних комментариев обновляется
каждый раз, когда кто-то «прожужжит» что-то о любой статье (а это происходит очень,
очень часто). Определенно, активность демонстрируется очень хорошо, но поскольку
сам текст пользовательских комментариев не отображается, виджет получился не
слишком интересным.
440 Глава 9 • Использование социальных сетей
Рис. 9.43. Последние комментарии на веб-сайтах Yelp, MyStarbucksIdea и Technology Review
Рис. 9.44. «Жужжание» на веб-сайте Yahoo! News
Будем
мобильными!
10
Если вам когда-либо доводилось создавать дизайн для веб-сайта или веб-приложения,
поздравляю — вы мобильный дизайнер!
Реальность нашего мира такова, что он наполнен Айфонами, другими типами
смартфонов, электронными книгами, планшетными компьютерами, а кроме того, в некоторых странах люди выходят в Интернет по большей части с помощью мобильных
телефонов. Все эти пользователи видят ваши сайты на маленьких экранах в браузерах,
которые работают медленно и причудливо, с которыми к тому же практически невозможно нормально взаимодействовать. Люди открывают веб-страницы, находясь
в определенных географических местах и в определенном настроении — совсем не
таком, какое обычно бывает за удобным столом перед большим экраном.
Даже если мобильный дизайн — не ваша специализация, все равно подходить
к нему следует сознательно и продуманно. Относительно небольшое увеличение затрат на обучение, чуть больше усилий и потраченного времени позволят вам значительно улучшить дизайн сайтов для мобильных устройств.
Во многих случаях разумно создавать отдельные версии веб-сайта для настольных
компьютеров и мобильных устройств (или, по крайней мере, устройств с маленьким
экраном). Необходимо представить уменьшенную, сконцентрированную версию сайта, отвечающую требованиям людей, которые не сидят дома или в офисе, а находятся
в движении. В этой главе мы не будем обсуждать технические детали распознавания
платформы и представления правильного варианта дизайна (например, различные
таблицы стилей CSS�������������������������������������������������������������
����������������������������������������������������������������
), однако эту информацию легко найти в Интернете или в печатных изданиях.
Некоторые сайты пытаются предоставить в мобильной версии всю функциональность версии для большого экрана, но в формате, подогнанном под ограничения
небольших устройств. Это и понятно — многие люди выходят в Интернет только
с мобильных устройств, но они хотят пользоваться всеми возможностями «больших»
сайтов. Вы можете создать два разных параллельных дизайна: один для мобильной,
второй для настольной версии.
Если вы работаете над инструментами и приложениями для больших экранов и не
занимаетесь веб-сайтами, возможно, эта глава вам не нужна. Однако ваша организация может захотеть оценить применимость подобных инструментов (или некоторого
их подмножества) для создания мобильных приложений. Вам следует лучше знать
вашу пользовательскую аудиторию, понимать их требования, задачи, контексты
442 Глава 10 • Будем мобильными!
­ спользования инструментов и приложений. Разработка мобильных приложений —
и
дело непростое, однако оно способно принести значительные выгоды.
Сложности мобильного дизайна
При разработке дизайна для мобильных платформ вы сталкиваетесь с определенными сложностями, вытекающими из того, что пользователь не сидит спокойно перед
большим экраном и полноразмерной клавиатурой.
Крошечный экран
Мобильные устройства не могут предложить достаточного пространства для
вывода всей имеющейся информации. К сожалению, вы лишаетесь таких элементов
роскоши, как боковые панели, длинные меню в заголовке, большие (красивые, но
бесполезные) иллюстрации, а также длинные списки ссылок. Дизайн приходится
«раздевать» до абсолютного минимума — только самое необходимое, никаких излишеств. На главной странице оставляйте только важнейшие функции. От остального
придется либо отказаться, либо спрятать на внутренних страницах сайта.
Разная ширина экрана
Сложно создать дизайн, который будет хорошо смотреться на экранах любой
ширины: 128 пикселов, 320 пикселов, 600 пикселов или больше (не говоря уж о нестандартных экранах). Прокрутить содержимое страницы на мобильном веб-сайте
несложно (именно поэтому я делаю акцент на ширине, а не на высоте), однако
доступное пространство экрана необходимо использовать с умом. Некоторые вебсайты создаются сразу во множестве вариантов — с разными логотипами, навигационными элементами и т. д. — для самых маленьких устройств с клавиатурой, для
устройств размера iPhone, для коммуникаторов с сенсорным экраном.
Превосходное обсуждение дизайна и технических вопросов, связанных с шириной экрана, можно найти в следующей статье mobiForge, также будет полезно
поискать новейшие статьи по этой теме:
http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes
Сенсорные экраны
На момент написания этой главы большинство мобильных устройств, с помощью которых люди выходят в Интернет, уже оборудовано сенсорными экранами. Разумеется, об устройствах с клавиатурой забывать не следует, однако при
разработке дизайна мобильного веб-сайта имеет смысл делать основной упор на
особенности устройств с сенсорным экраном. Если устройство имеет клавиатуру,
то перемещаться по ссылкам довольно просто, разумеется, при условии, что сайт
отвечает общим принципам качественного дизайна (ограниченное содержимое,
линеаризованный макет и т. п.).
Но если мы имеем дело с сенсорным экраном, все гораздо сложнее: пальцем
нелегко точно попасть по маленькой цели. Удостоверьтесь, что ссылки и кнопки
достаточно большие, чтобы у пользователей не возникало сложностей. В любом
случае, размер наиболее важных элементов должен составлять не менее 1 см2,
и между ними должно оставаться достаточно пустого пространства. Как можно
Сложности мобильного дизайна 443
догадаться, при этом площадь пространства, доступного для другого содержимого,
уменьшается.
Сложности при вводе текста
Никому не нравится вводить текст с помощью экранной клавиатуры или кнопок
мобильного устройства. Продумайте пути взаимодействия с вашим веб-сайтом
или приложением так, чтобы ввод текста либо не требовался, либо ограничивался
необходимым минимумом. Когда возможно, используйте в текстовых полях автозаполнение (см. одноименный шаблон в главе 8) и заранее подставляйте нужные
значения. Помните, однако, что в некоторых контекстах с числами работать намного проще, чем с текстом.
Сложные условия окружающей среды
Люди используют телефоны и другие мобильные устройства в разнообразнейших условиях: на улице в солнечный день, в темных театрах, в конференц-залах,
в автомобилях, автобусах, поездах, самолетах, магазинах, ванных комнатах и в постели. Для начала, представьте, насколько может отличаться внешнее освещение —
изящный серый текст на сером фоне станет неразличимым под прямым солнечным
светом. Также примите во внимание окружающий шум: одни люди вообще не
услышат звуки, издаваемые устройством, а другим неожиданные звуки покажутся
либо неприятными, либо неуместными.
Наконец, подумайте о движении. Крошечный текст сложно читать, когда
устройство (или сам пользователь) находится в движении. А в крохотную цель
на сенсорном экране трудно попасть даже при самых благоприятных условиях —
в раскачивающемся и подпрыгивающем автобусе это почти невозможно! И снова,
создавайте дизайн для «толстых пальцев» и не забывайте позаботиться о том, чтобы
любые ошибки можно было с легкостью исправить.
Социальное влияние и ограниченное внимание
Редко бывает так, что мобильные пользователи проводят на веб-сайте или в приложении много времени, уделяя этому достаточно внимания. Они увидят ваши
дизайнерские изыски, одновременно занимаясь чем-то другим: гуляя, катаясь на
велосипеде, разговаривая с друзьями, слушая доклад или (упаси боже) управляя автомобилем. Иногда мобильный пользователь полностью сосредоточивает внимание
на устройстве, например во время игры, однако это происходит намного реже, чем
при работе с настольным компьютером. Таким образом, ваш дизайн должен быть
ориентирован на человека с рассеянным вниманием: делайте последовательности
задач простыми и быстрыми, чтобы их можно было в любой момент начать заново.
Кроме того, всегда следует учитывать, что многие мобильные пользователи будут принимать участие в беседе или оказываться в других ситуациях социального
взаимодействия. Они могут передавать устройство другим людям, чтобы показать
что-то на экране. Кто-то будет заглядывать в экран через плечо владельца. Иногда
пользователям нужно моментально отключать звук — в некоторых ситуациях громкая музыка или сигналы недопустимы, — а иногда, наоборот, включать на полную
мощность, чтобы окружающие смогли хорошо расслышать речь или музыку. Ваше
приложение хорошо работает во всех описанных условиях? Поддерживает ли он
успешное социальное взаимодействие?
444 Глава 10 • Будем мобильными!
С чего начать разработку мобильного дизайна
В своей книге «Mobile Design and Development» (издательство O’Reilly, http://oreilly.
com/catalog/9780596155452/) Брайан Флинг высказывает горькую правду: «Отличные
мобильные продукты создаются с нуля, а не переносятся с больших платформ. Начните с изучения своих пользователей и поймите, какие преимущества им может дать
конкретное устройство».
Если вы пытаетесь обычное содержимое «большого» сайта упаковать в окно размером 320 × 480 пикселов, остановитесь. Сделайте большой шаг назад и взгляните на
происходящее с другой точки зрения.
1. Что действительно необходимо пользователям в мобильном контексте?
Находящемуся вне дома или офиса человеку от вашего веб-сайта (или приложения)
может понадобиться всего лишь одна какая-то функция. У него не такой широкий
диапазон требований, как у пользователя полноэкранной версии сайта. Разработайте
дизайн для разных контекстов использования, например:
‰‰«мне нужно узнать определенный факт прямо сейчас, и побыстрее»;
‰‰«у меня есть несколько свободных минут, развлеките меня» (см. шаблон Micro­
breaks (Микроперерывы) в главе 1);
‰‰«свяжите меня с другими людьми, например, в социальной сети»;
‰‰«если мне что-то нужно знать в данный момент, сообщите об этом»;
‰‰«что еще есть похожего на то место, где я сейчас нахожусь?»
2. Освободите сайт или приложение от всего лишнего
Не бойтесь избавляться от ненужного: лишних материалов, привлекательных экранных элементов, боковых панелей, врезок с броскими цитатами, объявлений, изображений, карты сайта, социальных ссылок
и т. д. Сфокусируйтесь на небольшом числе задач,
которые на вашем сайте будет выполнять мобильный
пользователь, не отдавайте слишком много экранного
пространства логотипу и другим элементам фирменного стиля и компактно расположите остальное.
Удостоверьтесь, что даже на заглавной странице
веб-сайта или первой рабочей странице приложения
нужное содержимое находится наверху экрана и не
требует прокрутки. Это означает, что придется распрощаться со «слоеным пирогом» из логотипов, рекламы, вкладок и заголовков, захламляющих экран. На
рис. 10.1 показан очень плохой пример: единственная
информация, которая действительно интересует польРис. 10.1. Веб-сайт NBA.com,
зователя, это результат матча внизу экрана! (А если
где нужные пользователю
пользователь повернет телефон горизонтально, то
сведения занимают лишь
эта ценная информация исчезнет под нижним краем
небольшое пространство
экрана.)
внизу экрана
Сложности мобильного дизайна 445
Уменьшив сайт до минимального размера, все же проверьте, что при необходимости пользователь сможет перейти на его полноразмерную версию. Поместите ссылку
на полный вариант сайта на заметном месте. Помните, что у многих людей доступ
в Интернет есть только с мобильного устройства, поэтому не рассчитывайте, что они
смогут открыть «большой» сайт на большом экране — возможно, у них такая возможность попросту отсутствует.
Как уже говорилось выше, можно создать два «раздельных, но параллельных» дизайна, когда все функции и информация главного сайта представлены и в мобильном
варианте (что вовсе избавляет пользователя от необходимости открывать «большой»
сайт). Заглавную страницу или главный экран все же придется «оголить». Возможно,
вместо плоской и широкой навигационной иерархии, в которой с домашней страницы
можно напрямую перейти на миллион внутренних страниц, вам потребуется создать
нечто более узкое и глубокое. Тогда на домашней странице можно будет оставить только несколько наиболее важных ссылок, сделав ее понятнее и освободив пространство
для другого важного содержимого. (Разумеется, вам придется идти на определенные
компромиссы, чтобы переход с одной внутренней страницы на другую не занимал
слишком много времени.)
3. Если возможно, используйте аппаратные возможности устройства
Мобильные устройства обладают замечательными возможностями, которые отсутствуют у настольных компьютеров. На мобильном устройстве могут быть доступны:
определение местоположения, голосовая интеграция, ввод с помощью жестов, тактильная отдача (тряска и вибрация) и другие полезные функции. Некоторые устройства
поддерживают многозадачность: ваше приложение может выполняться в фоновом
режиме, пока пользователь занят чем-то еще. Нельзя ли извлечь из этого выгоду?
4. Линеариализуйте содержимое
Мы снова возвращаемся к проблеме ширины экрана. На многих устройствах ширина
экрана слишком мала для реализации интересных макетов с расположением материалов
бок о бок. Вместо того чтобы придумывать множество сложных выходов из ситуации, просто смиритесь с тем, что содержимое придется компоновать вертикально. Упорядочьте
материалы мобильного веб-сайта так, чтобы они хорошо читались именно в таком варианте. Подробнее об этом рассказывается в шаблоне Vertical Stack (Вертикальный стек).
(Некоторые авторы отмечают также, что линеаризация содержимого делает мобильный сайт более доступным для технологий чтения экрана. Это поднимает интересный вопрос. Можно ли аналогичным образом линеаризовать главный веб-сайт?
Сможет ли человек понять его, если содержимое будет читаться в порядке следования
тегов HTML, без стилей и макетов CSS?)
5. Оптимизируйте наиболее часто используемые последовательности
взаимодействия
Приняв решение относительно того, какие задачи типичный мобильный пользователь
будет выполнять чаще всего, и избавив сайт от ненужного содержимого, попытайтесь
сделать эти задачи максимально простыми. Следуйте эвристическим правилам:
‰‰устраняйте необходимость вводить текст либо сокращайте число вводимых
символов до минимума;
446 Глава 10 • Будем мобильными!
‰‰уменьшайте количество обновлений страницы и не заполняйте страницы ненуж-
ными байтами. Время загрузки данных может оказаться очень большим, а в большинстве регионов мира скоростной беспроводной доступ к Интернету все еще
недоступен;
‰‰избавляйте пользователя от необходимости прокручивать страницу по вертикали
и горизонтали, за исключением случаев, когда это помогает избежать обновления
страницы и ввода текста. Другими словами, если вам необходимо показать большое количество содержимого, лучше сделайте это на одной длинной вертикальной
странице, а не на множестве маленьких;
‰‰уменьшайте количество касаний, которые пользователю необходимо делать для
получения нужной информации или выполнения задачи. В целом, прикосновение
к большой цели (или использование аппаратных кнопок) лучше, чем ввод текста,
но все же старайтесь избавляться и от этого.
Подробные рекомендации относительно мобильного дизайна, а также анализ удобства использования различных веб-сайтов вы найдете в исследовании Nielsen Norman
Group «Usability of Mobile Websites» (http://www.nngroup.com/reports/mobile/).
В книге Дэна Саффера «Designing Gestural Interfaces» (издательство O’Reilly,
http://oreilly.com/catalog/9780596518394/) среди прочих тем, связанных с мобильными
устройствами, обсуждаются жесты для управления содержимым с помощью сенсорного экрана.
Наконец, библиотека шаблонов Design For Mobile (http://www.design4mobile.com/)
предлагает множество хороших шаблонов, которые дополнят представленные в данной книге.
Несколько стоящих примеров
Далее представлены мобильные версии домашних страниц, отвечающие ограничениям
дизайна, о которых говорилось в предыдущем разделе. В то же время они сохраняют
фирменный стиль и индивидуальность «больших братьев» (рис. 10.2).
JetBlue.com
Если человек заходит на веб-сайт JetBlue�������������������������������������
��������������������������������������������
с мобильного устройства, велики шансы, что он путешествует рейсом этой авиакомпании прямо сегодня. Возможно, он
хочет получить сведения о своем полете. Именно это предлагает мобильный сайт
JetBlue. Путешественник сразу видит всю самую важную информацию: данные
о полете, о регистрации на рейс, а также важные объявления. Чуть ниже находятся
элементы управления, позволяющие забронировать билеты и развлечься во время полета. Страница простая и линейная, любой элемент можно без труда найти
и коснуться его.
RuthsChris.com
Собираясь посетить ресторан, мобильный пользователь, вероятно, хочет уточнить адрес, изучить меню или забронировать столик. Этот простой сайт предлагает
изящные решения для всех перечисленных задач (было бы еще лучше, если бы
браузер устройства умел определять текущее местоположение — это позволило
бы добавить функцию «найти ближайший ресторан»).
Сложности мобильного дизайна 447
Рис. 10.2. Хорошие примеры мобильных сайтов: JetBlue, Ruth’s Chris, Boston.com, Fidelity
448 Глава 10 • Будем мобильными!
Boston.com
Дизайн этого новостного сайта очень прост, и в небольшом пространстве сосредоточена масса полезной информации: погода, счет баскетбольных матчей, важнейшие заголовки и около 20 слов из начала каждой статьи. Веб-сайт удовлетворяет
требованиям большинства мобильных пользователей, предоставляя интересную
и востребованную информацию в редкие минуты свободного времени. Область
каждого анонса статьи содержит под собой ссылку; если коснуться ее, вы перейдете к полной версии. Таким образом, навигация также не представляет проблемы.
Fidelity.com
Люди, чья работа подразумевает отслеживание финансовых рынков, видят
текущие данные по трем крупнейшим биржевым индексам США прямо наверху
мобильной страницы. При необходимости они могут поискать определенные курсы
или перейти по навигационным ссылкам на связанные тематические страницы (новости, списки наблюдения, личные портфели). Полезная информация находится на
заглавном экране, но и более глубокие наборы данных несложно найти с помощью
имеющихся элементов управления.
Шаблоны
Во введении мы упоминали о необходимости структурировать материалы вертикально, для того чтобы обеспечить максимальную гибкость. Подробнее об этом рассказывается в шаблоне Vertical Stack (Вертикальный стек).
1. Vertical Stack (Вертикальный стек).
В мобильном приложении необходимо каким-то образом показывать навигационную структуру верхнего уровня. Постоянная панель инструментов наверху каждой
страницы приложения — один из стандартных способов организации мобильного
интерфейса; также распространены интерфейсы на основе вкладок и полностраничных
меню. Менее очевидны шаблоны Filmstrip (Фотопленка) и Touch Tools (Инструменты,
реагирующие на касание), однако они также заслуживают рассмотрения.
2. Filmstrip (Фотопленка).
3. Touch Tools (Инструменты, реагирующие на касание).
На мобильных веб-страницах глобальные меню часто оформляются с использованием шаблона Bottom Navigation (Нижняя навигация), для того чтобы освободить
ценное пространство наверху страницы для более важного содержимого.
4. Bottom Navigation (Нижняя навигация).
Списки повсеместно встречаются в мобильном мире: списки приложений, изображений, сообщений, контактов, действий, настроек, чего угодно! Как на веб-страницах,
так и в приложениях списки должны быть хорошо продуманными, привлекательно
выглядящими и удобными в использовании. Обычных текстовых списков чаще всего
достаточно, но и карусели с сетками эскизов отлично подходят для мобильного дизайна (в главе 5 вы найдете описания соответствующих шаблонов и подробное обсуждение дизайна списков). Подумайте, можно ли создать список эскизов и текста: такой
Шаблоны 449
вариант более прост для пользователя, чем карусель или сетка эскизов. В некоторых
случаях требованиям мобильного дизайна отвечают бесконечные списки.
5. Thumbnail-and-Text List (Список эскизов и текста).
6. Infinite List (Бесконечный список).
Остальные шаблоны — это сборная солянка различных техник, связанных с мобильным дизайном.
7. Generous Borders (Щедрое окаймление).
8. Text Clear Button (Кнопка стирания текста).
9. Loading Indicators (Индикаторы загрузки).
10. Richly Connected Apps (Тесно связанные приложения).
11. Streamlined Branding (Общий фирменный стиль).
Vertical Stack (Вертикальный стек)
Рис. 10.3. Вертикальный макет мобильного веб-сайта Google News
Что
Поместите содержимое мобильной страницы в вертикальный столбец, по возможности
не размещая элементы бок о бок. Длинный текст должен занимать несколько строк,
а не исчезать за краем экрана. Содержимое может уходить за нижний край экрана на
большинстве устройств, поэтому реализуйте возможность прокрутки.
450 Глава 10 • Будем мобильными!
Использовать, когда...
Этот шаблон рекомендуется применять на большинстве веб-страниц, которые люди
будут просматривать на устройствах разного размера, особенно если страницы содержат текстовые материалы и формы. (Нет необходимости использовать данный шаблон
для иммерсивного контента, такого как полноэкранное видео или игра, так как обычно
оно не выходит за пределы экрана, и прокручивать его не требуется.)
Если переход с одной страницы на другую занимают длительное время — вебстраницы, например, подолгу загружаются, — то имеет смысл применить этот шаблон.
С другой стороны, в приложении, установленном на устройстве, переход между страницами осуществляется почти мгновенно, так как их содержимое не нужно загружать
из сети. В таком случае логичнее разбить содержимое на несколько экранов, не требующих прокрутки, для того чтобы пользователь мог только касаться или перелистывать
их. Не забудьте, что вертикальная прокрутка длинной страницы предпочтительнее
бесконечного ожидания загрузки очередной порции содержимого.
Почему
Устройства оснащаются экранами разной ширины. Невозможно предугадать, какого
размера устройство окажется у конкретного пользователя, если только не распознавать его программными методами или не создавать приложения исключительно для
определенной модели устройства. (Можно также сконструировать оптимизированные
варианты дизайна для уникальных устройств или стандартных размеров экрана, но не
у каждой организации есть для этого достаточное количество ресурсов.)
Слишком широкий дизайн понадобится прокручивать вбок или масштабировать,
и он никогда не будет настолько же удобным в использовании, как тот, где прокрутка
осуществляется только вверх–вниз.
Размер шрифта также может меняться без вашего ведома, но, как и «резиновый»
макет (см. одноименный шаблон), вертикальный стек с переносом текстовых строк
изящно корректируется, сохраняя заданную ширину.
Как
Поместите содержимое страницы в вертикальный столбец с возможностью прокрутки.
Самые важные элементы должны располагаться наверху, менее важные — ниже. Все
пользователи должны сразу же видеть наиболее значимые материалы.
Полезное содержимое — с точки зрения пользователя, разумеется — необходимо
поместить в пределах первых 100 (или меньше) пикселов вертикального стека. Верхняя часть экрана считается самой ценной. Не захламляйте ее «слоеным пирогом»
из длинных логотипов, объявлений и бесконечных панелей инструментов, которые
выталкивают полезную информацию в самый низ страницы. Это крайне раздражает
пользователей.
Для экономии горизонтального пространства помещайте метки форм над соответствующими элементами управления, а не рядом с ними. Вам потребуется вся
имеющаяся ширина экрана, чтобы сделать текстовые поля и элементы управления
выбором достаточно широкими.
Кнопки можно помещать рядом друг с другом только в том случае, если вы абсолютно уверены, что их общая ширина не превысит ширину экрана. Если на кнопках
находится длинный текст, который, возможно, понадобится перевести на другой язык
или увеличить, лучше сразу забудьте о таком варианте.
Шаблоны 451
Эскизы изображений довольно легко разместить рядом с текстом, и так часто делается в списках статей, контактов, книг и т. п. — см. шаблон Thumbnail-and-Text List
(Список эскизов и текста). Удостоверьтесь, что дизайн хорошо умещается на экране
шириной всего лишь 128 пикселов (оцените, каков минимальный размер устройств,
для которых вы создаете свой дизайн).
Примеры
Сайты ESPN, Washington Post и REI (рис. 10.4) иллюстрируют три стиля реализации
шаблона Vertical Stack (Вертикальный стек). На сайте ESPN только самое важное
содержимое выводится на заглавную страницу, а остальное прячется за элементами
меню или за нижним краем экрана. Washington Post показывает все, что только может
захотеть увидеть пользователь; стек на рис. 10.4 — это всего лишь небольшой фрагмент
очень длинной страницы! Сайт REI содержит меню всех доступных мест и способов
совершения покупки; на заглавной странице нет ни объявлений, ни завлекательных
анонсов.
Рис. 10.4. Вертикальный стек на мобильных сайтах ESPN, Washington Post и REI
452 Глава 10 • Будем мобильными!
Filmstrip (Фотопленка)
Рис. 10.5. Приложение iPhone Weather
Что
Разместите страницы верхнего уровня бок о бок, чтобы пользователи могли перелистывать их, просматривая по одной за раз.
Использовать, когда...
Содержимое нескольких страниц концептуально очень похоже — как прогноз погоды
для разных городов или результаты матчей в разных видах спорта. Пользователям
несложно перелистать несколько страниц, прежде чем они доберутся до нужной, так
как на каждой из них может оказаться что-то интересное.
Данный шаблон может стать удобной альтернативой другим навигационным
схемам для мобильных приложений, таким как панели инструментов, вкладки или
полноразмерные меню.
Почему
Каждый из элементов, которые вам необходимо отобразить, может занимать целый
экран. Нет необходимости расходовать экранное пространство на заголовки вкладок
и другие инструменты навигации.
Поскольку пользователь не сможет сразу же попасть на нужный экран — ему необходимо каждый раз пролистывать все предыдущие — данный шаблон поощряет
проведение пользовательских изысканий и помогает находить что-то новое.
Многим пользователям просто нравится перелистывать страницы на сенсорном
экране — это выглядит довольно забавно.
Недостаток данного шаблона заключается в том, что он плохо масштабируется;
если страниц верхнего уровня будет слишком много, то необходимость перелистывать
их, чтобы добраться до нужной, начнет раздражать. Кроме того, он не понятен интуитивно. Новый пользователь, впервые столкнувшийся с вашим приложением, не сможет сразу догадаться, что для перехода между страницами их требуется перелистывать.
Как
Фактически, «фотопленка» — это вариант реализации шаблона Carousel (Карусель,
глава 5) для мобильных приложений. Различие состоит в том, что в «карусели» обычно отображаются метаданные (информация об элементе или странице) и контекст,
Шаблоны 453
­ апример фрагменты предыдущей и следующей страниц. В мобильных приложениях
н
так делается редко; чаще всего фотопленка используется в качестве навигационной
структуры верхнего уровня.
Для того чтобы намекнуть пользователю о существовании других страниц верхнего
уровня, которые можно перелистывать, используйте индикатор в виде точек внизу
экрана, как в приложении Weather.
Примеры
Во встроенном приложении iPhone Weather (см. рис. 10.5) страницы с прогнозом
погоды в выбранных пользователем географических точках выводятся в формате
«кадров фотопленки».
Аналогичным образом организованы главные страницы приложения ESPN для
iPhone. Пользователь перелистывает «кадры» с результатами футбольных, бейсбольных, баскетбольных и других игр (рис. 10.6).
Рис. 10.6. Приложение ESPN
Touch Tools (Инструменты, реагирующие на касание)
Рис. 10.7. Инструменты, реагирующие на касание, в каталоге фотографий на iPhone
Что
Показывайте инструменты только в ответ на прикосновение или нажатие кнопки;
размещайте их на неширокой динамической полосе поверх содержимого.
454 Глава 10 • Будем мобильными!
Использовать, когда...
Вы разрабатываете иммерсивное или полноэкранное приложение, например, для
просмотра видео, фотографий, карт, книг. Это также могут быть игры. Пользователю
иногда будут требоваться элементы управления навигацией или воспроизведением,
информация о содержимом и т. п. Подобные инструменты занимают много места, но
необходимость в них возникает редко.
Почему
Большую часть времени на экране доминирует содержимое. Пользователя не отвлекают элементы управления, занимающие место на экране и конкурирующие с содержимым приложения. Помните, что в мобильном контексте экранное пространство и внимание человека становятся намного более ценными ресурсами, чем принято считать.
Пользователь сам выбирает, когда включать отображение элементов управления
и использовать их.
Как
Выводите содержимое на полный экран безо всяких дополнительных элементов. Когда
пользователь касается экрана устройства или нажимает определенную аппаратную
или экранную клавишу, показывайте инструменты.
Во многих приложениях инструменты, реагирующие на прикосновение, появляются только при касании определенной области экрана. Таким образом, пользователь не
может случайно включить их отображение, используя устройство привычным образом.
Кроме того, при прикосновении к разным частям экрана можно показывать разные
инструменты — например, так делается в программе для чтения книг Stanza (рис. 10.9).
Помещайте элементы управления на полупрозрачную подложку небольшого размера, которая будет выводиться поверх содержимого. Благодаря полупрозрачности
создается впечатление, что инструменты появились временно и скоро снова пропадут
(а так обычно и случается).
Если пользователь не прикасался к элементам управления в течение нескольких
секунд, убирайте их с экрана. Также они должны мгновенно исчезать при прикосновении к экрану за пределами подложки инструментов. Пользователей часто раздражает
необходимость дожидаться исчезновения инструментов.
Примеры
В видеопроигрывателе на iPhone инструменты, реагирующие на касание, появляются,
когда пользователь притрагивается к указанной области экрана (рис. 10.8). Приблизительно через пять секунд они исчезают, если не использовать ни один из них.
Stanza, одна из множества программ для чтения книг на смартфонах и других
устройствах с сенсорными экранами, также содержит инструменты, реагирующие
на касание. Большую часть времени на экране отображается только текст книги. Но
если коснуться центра экрана, то появится дополнительная информация и элементы
управления: название книги, автор, глава и страница, настройки, поле поиска, режим
просмотра, а также меню дополнительных инструментов. Для того чтобы пользователь
мог понять все это, а также познакомиться с жестами для перелистывания страниц,
при первом запуске программы отображается диалоговое окно с подробными инструкциями (см. рис. 10.9).
Шаблоны 455
Рис. 10.8. Инструменты, реагирующие на касание, в приложении YouTube для iPhone
Рис. 10.9. Приложение для чтения книг Stanza: страница по умолчанию; инструменты,
реагирующие на касание; обучающее диалоговое окно
Bottom Navigation (Нижняя навигация)
Что
Поместите инструменты глобальной навигации на
самую нижнюю часть экрана, которая не видна без
прокрутки.
Использовать, когда
На мобильном веб-сайте необходимы некоторые глобальные навигационные ссылки, которые, однако, для
большинства пользователей представляют низкоприоритетные пути использования интерфейса.
Важнейшая задача для вас — показать на заглавной
странице сайта свежие, интересные материалы.
Почему
Верхняя часть страницы мобильного сайта — наиболее
ценная. Туда следует помещать не более двух–трех
Рис. 10.10. Нижняя
навигация на сайте Amazon
456 Глава 10 • Будем мобильными!
самых важных навигационных ссылок (если такая необходимость вообще существует), а остальное пространство отводить под материалы, способные заинтересовать
большинство пользователей.
В поисках навигационных ссылок пользователь с легкостью прокрутит страницу вниз; ему несложно будет
добраться до них, даже если они спрятаны глубоко под
краем экрана.
Как
Создайте набор элементов меню, выстройте их в столбец
и поместите внизу экрана. У пользователя не должно
быть сложностей с прикосновением к ним на сенсорном
экране — растягивайте элементы на весь экран и делайте
текст большим и хорошо читаемым.
Этот шаблон тесно связан с шаблоном Sitemap Footer
(Карта сайта внизу страницы), который обсуждался в главе 3. В мобильном приложении вы вряд ли будете помещать на нижнюю часть экрана полную карту сайта: здесь
есть место лишь для нескольких тщательно выбранных
ссылок. Но идея аналогична: чтобы не отводить под навигационные элементы слишком много пространства
наверху страницы, их можно переместить в самый низ,
где пространство наименее ценно.
Рис. 10.11. Нижняя
навигация на сайте NPR
Рис. 10.12. Нижняя полоса
на сайте Google Images
Примеры
На сайте NPR насыщенная информацией и ссылками
полоса есть внизу каждой страницы (рис. 10.11). Она
­включает стандартные навигационные ссылки, поле поиска, полноразмерный сайт, ссылку на загрузку приложения, а также элемент управления для выбора размера
шрифта.
На сайте Amazon используется более простая и короткая система (см. рис. 10.10).
В противоположность первым двум примерам, на многих мобильных сайтах Google нижняя полоса напоминает аналогичный элемент полноразмерных веб-страниц
(рис. 10.12). Текст ссылок меньше, они лучше соответствуют фирменному стилю, но при этом по ним сложнее
попасть неловкими пальцами.
Шаблоны 457
Thumbnail-and-Text List (Список эскизов и текста)
Что
Создайте список элементов с возможностью выбора.
Каждый элемент должен содержать эскиз изображения,
основной текст и, возможно, вспомогательный текст небольшого размера. Постарайтесь использовать яркие
­цвета, значки и другие способы цветовой дифференциации.
Использовать, когда...
Необходимо представить список статей, записей в блоге,
видео, приложений и других сложных материалов. Со
многими из них связаны изображения. Вы приглашаете
пользователя коснуться любого из элементов и просмотреть материал полностью.
Рис. 10.13. ИнтернетПочему
магазин приложений
Эскизы делают текстовые списки более привлекательiPhone App Store
ными, помогают идентифицировать соответствующие
материалы и определяют высоту элементов списка.
Условия использования мобильных устройств редко бывают идеальными. ­Добавляя
яркие изображения, вы улучшаете визуальную дифференциацию элементов списка,
что помогает людям быстрее просматривать их и воспринимать их содержимое.
На многих новостных сайтах и в блогах к этому шаблону прибегают для вывода списков статей и публикаций. Благодаря этому подобные сайты выглядят более
привлекательными и «завершенными», чем аналогичные, на которых списки статей
содержат только заголовки или небольшие текстовые анонсы.
Как
Поместите эскиз рядом с текстом элемента списка. Чаще всего на сайтах и в приложениях эскиз располагается слева.
Помимо эскиза, можно добавлять другие визуальные маркеры, такие как рейтинговые системы, обозначенные звездочками, а также значки, представляющие разно­
образные социальные связи.
Не бойтесь насыщенных и ярких цветов. Вероятно, в настольном приложении
подобная визуальная стимуляция не требуется, однако в мобильном контексте она
работает превосходно. Даже если краски кажутся слишком броскими и кричащими,
не пугайтесь — на небольших экранах яркие цвета выглядят гораздо лучше, чем на
полноразмерных!
Примеры
На многих новостных сайтах данный шаблон применяется для вывода списков статей.
Хорошие примеры демонстрируют сайты Yahoo! News и Boston.com. Специализированный сайт Mashable только выигрывает за счет представления наиболее значимых
статей в форме списка с эскизами и текстом (рис. 10.14).
458 Глава 10 • Будем мобильными!
Рис. 10.14. Веб-сайты Yahoo! News, Boston.com и Mashable
Видео и другие мультимедийные материалы идеально подходят для реализации
этого шаблона. Как видно на рис. 10.15, в приложениях YouTube, IMDb и Kobo эскизы
представляют видеоклипы, фильмы и книги. Обратите внимание на звездочки рейтинговых систем в списках YouTube и Kobo (а также в магазине приложений iPhone на
рис. 10.13). Пользователь просматривает список и выбирает элементы с наибольшим
числом звездочек.
В приложении IMDb также можно узнать пользовательский рейтинг фильмов,
однако его создатели отказались от звездочек в пользу простого текста, который не
так сильно притягивает взгляд, поскольку сливается с окружающими символами.
Обратите внимание, что приглушенные изысканные оттенки на экране библиотеки
Kobo не помогают взгляду дифференцировать элементы столь же успешно, как яркие
и насыщенные цвета YouTube и магазина приложений.
Рис. 10.15. Приложения YouTube, IMDb и Kobo
Наконец, во многих приложениях списки с эскизами и текстом применяются для
отображения многих других типов элементов: птиц (в iBird Explorer), продуктов
(в приложении Google для iPhone) и элементов меню сложной информационной
архитектуры (портал Базза Олдрина, посвященный исследованию космоса) — см.
рис. 10.16.
Шаблоны 459
Рис. 10.16. Приложения iBird, Google и Buzz Aldrin
Infinite List (Бесконечный список)
Рис. 10.17. Почтовое приложение iPhone Mail
Что
Внизу длинного списка добавьте кнопку, с помощью которой можно будет загрузить
и присоединить к списку дополнительные элементы.
Использовать, когда...
Необходимо показать длинный список сообщений электронной почты, результатов
поиска, статей или публикаций из архива или любых других элементов. По сути,
список получается «бездонным».
Пользователи с большой вероятностью найдут нужные элементы близко к верхушке списка, но в некоторых случаях им потребуется просматривать его довольно
глубоко.
Почему
Загрузка первых одного–двух экранов данных происходит довольно быстро, и пользователю не приходится долго ждать появления полезной информации.
Загрузка каждой последующей порции элементов списка не занимает много времени и при этом находится под контролем пользователя: он сам решает, нужно ли
загружать дополнительную информацию и когда это делать.
Так как новые элементы просто присоединяются к уже имеющейся на странице
информации, смещения контекста не происходит — пользователь не переходит на
новую страницу с незнакомыми элементами, как при постраничном просмотре результатов поиска.
460 Глава 10 • Будем мобильными!
Как
При первоначальной отправке страницы или списка на мобильное устройство обрезайте его до разумной длины. Длина может варьироваться в зависимости от размера
элементов, времени загрузки и цели пользователя — он планирует прочитать все
содержимое (как в Facebook) или лишь просмотреть большое число элементов для
поиска желаемого (как в результатах поиска)?
Внизу списка с возможностью прокрутки поместите кнопку, нажав на которую
пользователь сможет загрузить и просмотреть дополнительные элементы. Укажите,
какое количество элементов будет загружено.
Как вариант, можно обойтись и без кнопки. После того как завершится загрузка
первой порции данных и пользователь приступит к их изучению, сразу начинайте загрузку очередного фрагмента, не выводя никаких сообщений об этом. Когда загрузка
завершится, а пользователь прокрутит имеющийся список до конца, присоедините
полученную информацию к видимым на экране элементам (если же пользователь не
будет прокручивать список, то можно не загружать дополнительные элементы — скорее всего, они ему не нужны).
В сфере разработки программного обеспечения этот хорошо известный подход
к управлению списками неопределенной длины часто называют «ленивой загрузкой».
Примеры
Бесконечные списки используются в нескольких приложениях iPhone, включая Mail
(рис. 10.17), iTunes и приложения сторонних производителей, такие как Facebook
(рис. 10.18). Кнопка в приложении iTunes загружает только 10 дополнительных
элементов — маловато для любителя музыки, а приложение Mail добавляет сразу
несколько экранов новых сообщений, что кажется хорошим компромиссом между
временем загрузки и количеством. Приложение Facebook, как и полноразмерный
веб-сайт, загружает несколько первых страниц обновлений; затем пользователь при
необходимости запрашивает дополнительные элементы.
Рис. 10.18. Приложения Facebook и iTunes
Шаблоны 461
То же самое можно реализовать и на веб-странице. На сайте Gmail���������������
��������������������
��������������
Buzz����������
после нескольких экранов обновлений выводится кнопка Load more (Загрузить больше), как
и на сайте Mashable (рис. 10.19).
Рис. 10.19. Веб-сайты Buzz и Mashable
Generous Borders (Щедрое окаймление)
Что
Если вы разрабатываете приложение или сайт для
устройства с сенсорным экраном, добавьте вокруг кнопок, ссылок и других элементов управления, которых
пользователь будет касаться, толстые поля или большое
количество пустого пространства.
Использовать, когда...
На экране есть кнопки с текстовыми метками, списки
элементов, обычные текстовые ссылки — в общем, любая
цель небольшого размера, к которой пользователь прикасается.
Почему
Цели для прикосновения должны быть достаточно большими, чтобы даже неловкому человеку не составляло
труда попасть по ним. В частности, они должны быть
высокими, что бывает сложно реализовать для кнопок
и ссылок, состоящих только из текста.
Рис. 10.20. Мобильный
сайт Best Western
Как
Окружите каждую цель прикосновения большим внутренним полем, границей и окружающим пустым пространством, чтобы сделать ее достаточно большой для точного
попадания по ней.
Одна из хитростей, позволяющая добиться этого, — сделать активным (реагирующим на касание) пустое пространство, окружающее цель прикосновения. Размер
самой кнопки останется неизменным, и она не будет нарушать стройность дизайна,
однако вы получите несколько дополнительных чувствительных пикселов вокруг.
Дэн Саффер в своей книге «Designing Gestural Interfaces» использует для описания
462 Глава 10 • Будем мобильными!
подобных элементов управления термин «верхушка айсберга». И действительно, они
больше, чем кажутся!
Насколько больше? Хороший вопрос. В идеальном случае элемент управления должен быть достаточно большим, чтобы им без труда могли манипулировать все люди.
У многих из них крупные пальцы, у других случаются нарушения координации — это
добавляет сложности. Кроме того, мобильными устройствами часто пользуются в неидеальных условиях: при плохом освещении, в движущемся транспорте, при необходимости уделять внимание чему-то еще.
Итак, что же получилось в результате? Каков искомый размер цели? Это зависит
от того, кого вы спросите. К общему мнению разработчики еще не пришли, но в различных источниках можно найти такие точки отсчета:
yy 3/4 × 3/4 дюйма на расстоянии 1/8 дюйма друг от друга ( http://www.
sapdesignguild.org/resources/TSDesignGL/Index.htm);
yy 9,6 мм (http://portal.acm.org/citation.cfm?id=1152260);
yy 1 × 1 см (среди прочих, версия 2.1 библиотеки разработчика на С++ для Nokia
S60, пятое издание);
yy 44 × 44 пиксела на iPhone (рекомендации iPhone Human Interface Guidelines).
И это еще не все. За дополнительной информацией обратитесь к обсуждению на
веб-сайте Люка Вроблевски по адресу http://www.lukew.com/ff/entry.asp?1085.
Примеры
В приложении IMDb для iPhone вокруг целей прикосновения достаточно много
пустого пространства. В целом приложение производит свободное, расслабляющее
впечатление, как видно на рис. 10.21.
Рис. 10.21. Экраны приложения IMDb
Приложение Epicurious обладает многими схожими чертами, хотя стилистически
довольно сильно отличается. Кнопки ключевых действий — find a recipe (найти рецепт),
view recipe (просмотреть рецепт) — большие и заметные, как видно на рис. 10.22.
Шаблоны 463
Рис. 10.22. Экраны приложения Epicurious
Text Clear Button (Кнопка стирания текста)
Рис. 10.23. Поле ввода URL-адреса в браузере Safari
Что
Очищайте текстовое поле одним нажатием кнопки.
Использовать, когда...
Если в мобильном интерфейсе есть хотя бы одно текстовое поле, этот шаблон стоит
использовать. Функция очистки текстового поля особенно полезна для полей, содержащих длинные строки текста, такие как поисковые запросы, �������������������
URL����������������
-адреса и многострочный текст.
Почему
Посимвольное стирание длинной текстовой строки — процесс длительный и не защищенный от ошибок. Не заставляйте своих пользователей делать это.
Некоторые мобильные платформы не предлагают возможностей вырезания, копирования и вставки. Для очистки текстового поля могло бы быть достаточно операции
вырезания или выделения всего содержимого, но даже если они входят в состав мобильной платформы, пользователю все же намного проще коснуться одной кнопки.
Как
Поместите внутрь текстового поля кнопку с изображением крестика или надписью
Clear (Очистить). Кнопка рядом с текстовым полем — также неплохой, но требующий
464 Глава 10 • Будем мобильными!
проверки на пользователях вариант: заметят ли они ее? не примут ли за кнопку Go
(Вперед) или Search (Поиск)?
Если платформа предлагает кнопку очистки в качестве встроенного механизма
текстовых полей, используйте ее. Мне приходилось видеть пользователей, пытающихся посимвольно очищать текстовые поля на ранних версиях платформы Android,
где встроенный механизм отсутствовал — на это больно смотреть! Также я видела
приложения iPhone, в которых стандартная кнопка очистки почему-то отсутствовала.
Люди ожидали увидеть ее в текстовых полях и их очень огорчала невозможность воспользоваться этой удобной функцией.
Примеры
Мне не удалось найти большого количества примеров использования данного шаблона. На момент написания этой главы он не слишком распространен. На рис. 10.24
показаны веб-сайты двух крупных поисковых систем. Кнопки стирания текста расположены внутри полей поиска.
Рис. 10.24. Кнопки очистки текстовых полей на сайтах Google и Bing
Loading Indicators (Индикаторы загрузки)
Что
Пока содержимое страницы или какого-либо ее
раздела загружается, показывайте индикатор хода
процесса в том месте, где он хорошо заметен (либо
там, где пользователь щелкнул мышкой или коснулся экрана).
Использовать, когда...
Пользователю приходится дожидаться загрузки
содержимого, особенно на странице, которая динамически меняется в ответ на его действия.
Почему
В беспроводных сетях загрузка нового содержимого может быть медленной и подверженной сбоям.
Рис. 10.25. Приложение
iPhone Stocks ожидает данные
для диаграммы
Шаблоны 465
Показывайте все содержимое, которое уже удалось загрузить, для того чтобы пользователь мог сделать с ним что-то полезное.
В целом, индикаторы хода процесса создают впечатление, что время загрузки сокращается. Они демонстрируют, что в ответ на жест пользователя действительного
что-то происходит. Особенно удобно, когда индикаторы появляются точно в тех местах, которых пользователь только что-то коснулся.
Как
Если фрагмент страницы удалось загрузить быстро, покажите его без задержки, однако если какой-то элемент загружается медленно (например, это может быть большое
изображение или видео), то показывайте ненавязчивый анимированный индикатор
хода процесса. Он должен находиться в том месте, где в результате появится загружаемый элемент. (Мобильная платформа может также предоставлять стандартную
реализацию индикатора.)
Если действие пользователя приводит к обновлению части страницы или загрузке новой страницы, располагайте индикатор хода процесса непосредственно поверх
старого содержимого.
Примеры
На мобильном веб-сайте Flickr индикаторы загрузки реализованы очень умело. Когда
пользователь касается эскиза изображения, чтобы увидеть его полную версию, поверх
эскиза выводится анимированный логотип Flickr; он отображается до тех пор, пока
новое изображение не будет полностью загружено (рис. 10.26).
Рис. 10.26. Анимированный индикатор загрузки на сайте Flickr
Когда на устройстве iPhone происходит установка
нового приложения, поверх его значка выводится миниатюрная полоса индикатора, указывающая, сколько
еще остается ждать до завершения загрузки (рис. 10.27).
Смотрится очень мило, а значение такой полосы понятно
любому пользователю с первого взгляда.
Рис. 10.27. Полоса
индикатора установки
приложения на iPhone
466 Глава 10 • Будем мобильными!
Richly Connected Apps (Тесно связанные приложения)
Что
Помещайте внутрь своего мобильного приложения
прямые ссылки на другие приложения, такие как телефон, географические карты, браузер. Заранее заполняйте их данными, взятыми из текущего пользовательского контекста.
Использовать, когда...
Данные в разных мобильных приложениях можно
«связать» очевидными способами: через телефонные
номера и гиперссылки.
В качестве менее очевидной альтернативы ваше
приложение может захватывать изображения (через камеру устройства), звук или видео или хранить
«социальные» данные, например имя пользователя
в �������������������������������������������������
Facebook�����������������������������������������
или ������������������������������������
Twitter�����������������������������
. В любом случае, ваше приложение способно перенаправить пользователя в другое
приложение для выполнения каких-то действий, связанных с данным устройством.
Рис. 10.28. Приложение
Freedom Trail для iPhone
Почему
У пользователя есть возможность работать только с одним мобильным приложением
за раз, даже когда одновременно запущенно несколько. Его раздражает необходимость
вручную переключаться между ними.
Мобильные устройства зачастую обладают достаточным контекстом и функциональностью, чтобы предложить интеллектуальные пути перехода от одного приложения к другому.
На момент написания этой главы на мобильных устройствах невозможно с легкостью переносить небольшие объемы информации из одного приложения в другое.
На настольном компьютере данные не сложно ввести с клавиатуры, скопировать
и вставить или даже выбрать из файловой системы. Мобильная платформа этого не
поддерживает. Таким образом, возникает необходимость в автоматическом перемещении данных.
Как
Внутри приложения отслеживайте данные, которые могут быть тесно связаны с другими приложениями или службами. Когда пользователь касается элемента управления,
или выделяет данные, или использует специальные возможности вашего приложения,
открывайте другое приложение и передавайте в него соответствующую информацию.
Вот несколько примеров. Принимайте во внимание все пути, по которым ваше
приложение можно было бы соединить с прочими мобильными функциями.
yy телефонные номера → программа для набора номера;
yy адреса → карта или список контактов;
yy даты → календарь;
Шаблоны 467
yy адреса электронной почты → почтовое приложение;
yy гиперссылки → браузер;
yy музыка и видео → мультимедийный проигрыватель.
Помимо этого, пользователь мог бы делать снимки или, например, просматривать
географическую карту, не выходя за пределы контекста вашего приложения.
Подобную функциональность можно было бы реализовать на настольном компьютере, однако природа мобильных устройств упрощает выбор и запуск «правильного» приложения для данных определенного типа. Не приходится выбирать, какую
именно использовать почтовую программу, адресную книгу и т. п. К тому же, многие
мобильные устройства оснащены телефонными функциями, камерой, системой распознавания географического местоположения.
Примеры
В приложении Freedom Trail для iPhone, показанном на рис. 10.28, связи с другими
приложениями показаны очень доходчиво. У пользователя есть выбор — перейти туда
для получения дополнительной информации или остаться в текущем приложении.
Такая прозрачность крайне удобна.
Приложение Facebook для iPhone умеет подключаться к камере мобильного
устройства (рис. 10.29). Интеграция очень тесная: пользователь может сделать снимок
и тут же опубликовать его в Facebook, не покидая приложение. Кроме того, в Facebook
можно загружать фотографии, хранящиеся в памяти iPhone.
Рис. 10.29. Интеграция Facebook с камерой мобильного устройства
Географические карты на ������������������������������������������������������
iPhone������������������������������������������������
(рис. 10.30) связаны со списком контактов. Найденный на карте адрес человека можно сразу же добавить в его контактную информацию. Также описание местоположения, обнаруженного в картах, можно отправить
по электронной почте или в форме сообщения MMS. (Разумеется, функции отправки
по электронной почте и рассылки другими способами присутствуют и в прочих приложениях. Подробнее об этом рассказывается в шаблоне Sharing Widget (Виджет для
рассылки) в главе 9.)
468 Глава 10 • Будем мобильными!
Рис. 10.30. Географическое приложение на iPhone связано со списком контактов,
электронной почтой и функцией отправки MMS
Streamlined Branding (Общий фирменный стиль)
Рис. 10.31. Мобильный сайт и полноразмерный сайт Walmart
Что
Используйте логотип, цвета и другие элементы фирменного стиля вашей организации
в дизайне мобильного сайта или приложения, однако делайте их достаточно маленькими, чтобы они не занимали слишком много места и не тормозили загрузку.
Использовать, когда...
На всех мобильных сайтах и в приложениях, связанных с компаниями или организациями, необходимо учитывать фирменный стиль.
Шаблоны 469
Почему
У пользователя не должно возникать вопросов по поводу идентификация вашего сайта
или приложения. При проведении тестов пользователи демонстрировали положительную реакцию на надежные, узнаваемые бренды, особенно если они уже были знакомы
с ними за пределами мобильного контекста.
На экранах мобильных устройств слишком мало места, чтобы тратить его на элементы, не относящиеся к фактическому содержимому.
В медленной беспроводной или мобильной сети большое изображение будет загружаться слишком долго.
Как
Создайте уменьшенную версию логотипа вашей организации — высотой около 50 пикселов. Он должен быть достаточно маленьким, чтобы вам не приходилось жертвовать
ценным экранным пространством. При разработке разных дизайнов для устройств
и платформ с разными размерами экрана подумайте, можно ли также создать разные
версии логотипа.
Используйте в мобильном дизайне цвета и семейства шрифтов, определенные
в фирменном стиле. Простейший текстовый интерфейс может обладать необходимой
функциональностью, но при этом он будет выглядеть непрофессиональным, неотшлифованным.
Избегайте очень крупных и сложных изображений в качестве стилистических элементов. В мобильном контексте время загрузки — не менее ценный ресурс, чем для настольных устройств (а иногда и более). Если вы используете HTML, то по возможности
прибегайте к помощи таблиц стилей, а не вставляйте созданные вручную изображения.
Контрастный, крупный и хорошо читаемый текст помогут пользователям при работе с вашим мобильным сайтом в неблагоприятных условиях (яркий свет, движение,
отвлекающие факторы). Даже если ваш фирменный стиль отличается визуальной
утонченностью и небольшими, изящными шрифтами, в первую очередь учитывайте
удобство в использовании. Если фирменный стиль требуется изменить, пойдите на
это и адаптируйте его для мобильной платформы.
Примеры
Хорошие примеры реализации данного шаблона можно встретить в мобильной сети
повсеместно. Возвращаясь к первому примеру в этой главе, обратите внимание, как
JetBlue�������������������������������������������������������������������������
«урезает» фирменный стиль. Элементы стиля все так же выглядят профессионально проработанными, но хорошо подходят даже для небольших экранов мобильных
устройств (рис. 10.32).
Мобильный сайт Fandango также выполнен в минималистском стиле (рис. 10.33).
Как и JetBlue, Fandango использует качественно выполненный логотип и элементы
фирменного стиля, однако сайт загружается быстро и с ним удобно работать на крошечном экране. Никаких пожирающих пропускную способность изображений, объявлений, видео в мобильной версии сайта нет.
Whole Foods поддерживает единый стиль полноразмерного и мобильного сайтов.
Однако в мобильной версии слишком много ценного пространства наверху страницы
отводится под ненужные элементы навигации. Кроме того, сайт включает несколько
больших изображений, из-за чего загрузка сильно замедляется (рис. 10.34).
470 Глава 10 • Будем мобильными!
Рис. 10.32. Фирменный стиль мобильного сайта JetBlue
Рис. 10.33. Фирменный стиль мобильного сайта Fandango
Рис. 10.34. Фирменный стиль мобильного сайта Whole Foods
Шаблоны 471
Мобильный веб-сайт Chipotle демонстрирует, каким не должен быть мобильный
вариант фирменного стиля (рис. 10.35). На полноразмерном сайте бренд представлен очень хорошо, но основные его элементы, за исключением слишком маленького
фрагмента логотипа, в мобильную версию не перенесены! На сайте используются
нейтральный шрифт и цвета. (Честно говоря, у этой компании есть приложение для
iPhone, оформленное в соответствии с фирменным стилем, но маловероятно, что
случайный посетитель станет усложнять себе жизнь загрузкой приложения, если все
необходимое есть на веб-сайте.)
Рис. 10.35. Фирменный стиль мобильного сайта Chipotle (или его отсутствие)
Полезные источники
Веб-сайты
Далее перечислены сетевые библиотеки и коллекции шаблонов, послужившие основой для материалов этой книги. Некоторые хорошо известные шаблоны дублируются
в разных источниках, но все авторы описывают и иллюстрируют их по-своему. Возможно, вам удастся лучше понять некоторые шаблоны в моей книге, познакомившись
с аналогами в других коллекциях.
Библиотека шаблонов для дизайна Yahoo!:
http://developer.yahoo.com/ypatterns/
Дизайнерские шаблоны для пользовательских интерфейсов:
http://ui-patterns.com/
Patternry:
http://patternry.com/
Шаблоны для дизайна взаимодействия Мартийна ван Велие:
http://welie.com/patterns/
Quince:
http://quince.infragistics.com
Сайт книги «The Design of Sites»:
http://www.designofsites.com/design-patterns/
Сайт книги «Designing Web Interfaces»:
http://designingwebinterfaces.com/explore
Сайт книги «Designing Social Interfaces»:
http://www.designingsocialinterfaces.com/patterns/Main_Page
Шаблоны для дизайна интерфейса (акцент на информационную графику):
http://patternbrowser.org/code/pattern/pattern.php?4,1,0,1,0,6.php
Design4Mobile:
http://www.design4mobile.com/
Библиотека шаблонов для дизайна пользовательских интерфейсов Endeca (акцент
на поиск):
http://patterns.endeca.com/content/library/en/home.html
Книги 473
Шаблоны, связанные с поиском, авторства Питера Морвилля:
http://www.flickr.com/photos/morville/collections/72157603785835882/
На веб-сайте Usability��������������������������������������������������������
�����������������������������������������������������������������
.�������������������������������������������������������
gov����������������������������������������������������
вы найдете уникальную практическую библиотеку принципов и рекомендаций по дизайну интерфейса. Хотя это и не библиотека шаблонов
как таковая, это очень ценный ресурс:
http://usability.gov/guidelines/index.html
Следующие веб-сайты не относятся к библиотекам шаблонов. Они предлагают
отличные коллекции примеров дизайна. Я использую их, когда мне необходимо вдохновение или хорошая иллюстрация.
Галерея GUIdebook:
http://www.guidebookgallery.org/
Pattern Tap:
http://patterntap.com/
Веб-сайт Vandelay Design включает множество страниц прекрасных примеров вебдизайна. Вы сможете познакомиться с сайтами интернет-магазинов, некоммерческих
организаций, церквей, журналов, увидите дизайнерские портфолио, интересную
навигацию и корпоративные страницы. Я даю ссылку лишь на один набор, но вы без
труда найдете остальные:
http://vandelaydesign.com/blog/galleries/corporate-websites/
Книги
Если вы ищете более подробное руководство, чем может предоставить данная книга,
то следующий список станет для вас хорошей точкой отсчета. Разумеется, я не могу
перечислить все существующие великолепные книги, посвященные дизайну, но вы
найдете множество полезных источников, начав с этого «списка лучших». Сначала
я перечислю книги, посвященные дизайну пользовательских интерфейсов в целом,
а затем укажу специализированные издания, связанные с графическим дизайном,
дизайном форм, информационной графики, социальных сетей и поиска:
«Designing Web Interfaces: Principles and Patterns for Rich Interaction», авторы Bill
Scott и Theresa Neil (издательство O’Reilly, 2009 год).
«The Design of Sites: Patterns for Creating Winning Web Sites», второе издание,
авторы Douglas K. van Duyne, James A. Landay и Jason I. Hong (издательство Prentice
Hall, 2006 год).
«Designing for Interaction: Creating Innovative Applications and Devices», второе
издание, автор Dan Saffer (издательство New Riders Press, 2009 год).
«Don’t Make Me Think�������������������������������������������������������
:A
�����������������������������������������������������
Common Sense Approach to Web Usability»������������
, второе����
���
издание, автор Steve Krug (издательство New Riders Press, 2005 год).
«About Face 3: The Essentials of Interaction Design», авторы Alan Cooper, Robert
Reimann и David Cronin (издательство Wiley, 2007 год).
«The Design of Everyday Things», автор Donald Norman (издательство Basic Books,
1998 год).
«Information Architecture for the World Wide Web: Designing Large-Scale Web Sites»,
авторы Peter Morville и Louis Rosenfeld (издательство O’Reilly, 2006 год).
474 Полезные источники
«Universal Principles of Design��������������������������������������������������
: ������������������������������������������������
125 Ways to Enhance Usability�������������������
, �����������������
Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design», второе
издание, авторы William Lidwell, Kritina Holden и Jill Butler (издательство Rockport
Publishers, 2010 год).
«The Non-Designer’s Design Book»�������������������������������������������������
, третье�����������������������������������������
����������������������������������������
издание, автор��������������������������
Robin Williams (���������
издательство Peachpit Press, 2008 год).
«Emotional Design: Why We Love (or Hate) Everyday Things», автор Donald Norman
(издательство Basic Books, 2005 год).
«Web Form Design: Filling in the Blanks», автор Luke Wroblewski (издательство
Rosenfeld Media, 2008 год).
«Forms that Work�����������������������������������������������������������������
: ���������������������������������������������������������������
Designing Web Forms for Usability»�����������������������������
, автор����������������������
Caroline Jarrett (���
издательство Morgan Kaufmann, 2008 год).
«Defensive Design for the Web: How to improve error messages, help, forms, and other
crisis points», авторы Matthew Linderman и Jason Fried (издательство New Riders Press,
2004 год).
«The Visual Display of Quantitative Information», второе издание, автор Edward
R. Tufte (издательство Graphics Press, 2001 год).
«Envisioning Information», автор Edward R. Tufte (издательство Graphics Press,
1990 год).
«Visual Explanations: Images and Quantities, Evidence and Narrative», автор Edward
R. Tufte (издательство Graphics Press, 1997 год).
«Information Dashboard Design: The Effective Visual Communication of Data», автор
Stephen Few (издательство O’Reilly, 2006 год).
«Now You See It: Simple Visualization Techniques for Quantitative Analysis», автор
Stephen Few (издательство Analytics Press, 2009 год).
«Designing Social Interfaces: Principles, Patterns, and Practices for Improving the User
Experience», авторы Christian Crumlish и Erin Malone (издательства O’Reilly и Yahoo!
Press, 2009 год).
«Designing for the Social Web», автор Joshua Porter (издательство New Riders Press,
2008 год).
«Search Patterns: Design for Discovery», авторы Peter Morville и Jeffery Callender
(издательство O’Reilly, 2010 год).
И наконец, классические книги о дизайнерских шаблонах, с которых все началось:
«The Timeless Way of Building», автор Christopher Alexander (издательство Oxford
University Press, 1979 год).
«A Pattern Language»����������������������������������������������������������
, авторы��������������������������������������������������
Christopher Alexander����������������������������
, ��������������������������
Sara Ishikawa�������������
, �����������
Murray Silverstein, Max Jacobson, Ingrid Fiksdahl-King и Shlomo Angel (издательство Oxford
University Press, 1977 год).
«Design Patterns: Elements of Reusable Object-Oriented Software», авторы Erich
Gamma, Richard Helm, Ralph Johnson и John M. Vlissides (издательство Addison-Wesley
Professional, 1994 год).
Об авторе
Дженифер Тидвелл ( ��������������������������������������������������������������
Jenifer�������������������������������������������������������
������������������������������������������������������
Tidwell�����������������������������������������������
) — автор книг и консультант по дизайну взаимодействия, информационной архитектуре и предпроектному анализу. Вот уже почти
два десятилетия она разрабатывает дизайны и создает сложные приложения и вебинтерфейсы. Ее клиенты и работодатели — это Google��������������������������
��������������������������������
, ������������������������
The���������������������
MathWorks�����������
��������������������
, некоммерческие организации и начинающие фирмы. Она была одним из первых дизайнеров,
которые еще в конце 1990-х годов, когда эту концепцию впервые применили к программному обеспечению, начали описывать шаблоны для дизайна пользовательских
интерфейсов. Дженифер живет в штате Массачусетс, недалеко от Бостона, с мужем,
сыном и маленьким попугаем.
Дженифер Тидвелл
Разработка пользовательских интерфейсов. 2-е изд.
Перевела с английского Е. Шикарева
Заведующий редакцией
Руководитель проекта
Ведущий редактор
Литературный редактор
Художественный редактор
Корректор
Верстка
А. Кривцов
А. Юрченко
Ю. Сергиенко
Е. Пасечник
Л. Адуевская
В. Листова
Е. Егорова
ООО «Мир книг», 198206, Санкт-Петербург, Петергофское шоссе, 73, лит. А29.
Налоговая льгота — общероссийский классификатор продукции ОК 005-93, том 2; 95 3005 — литература учебная.
Подписано в печать 10.06.11. Формат 70х100/16. Усл. п. л. 38,700. Тираж 2000. Заказ 0000.
Отпечатано по технологии CtP в ОАО «Печатный двор» им. А. М. Горького.
197110, Санкт-Петербург, Чкаловский пр., 15.
ВАМ НРАВЯТСЯ НАШИ КНИГИ?
ЗАРАБАТЫВАЙТЕ ВМЕСТЕ С НАМИ!
У Вас есть свой сайт?
Вы ведете блог?
Регулярно общаетесь на форумах? Интересуетесь литературой,
любите рекомендовать хорошие книги и хотели бы стать нашим
партнером?
ЭТО ВПОЛНЕ РЕАЛЬНО!
СТАНЬТЕ УЧАСТНИКОМ
ПАРТНЕРСКОЙ ПРОГРАММЫ ИЗДАТЕЛЬСТВА «ПИТЕР»!
Зарегистрируйтесь на нашем сайте в качестве партнера
по адресу www.piter.com/ePartners
Получите свой персональный уникальный номер партнера
Выбирайте книги на сайте www.piter.com, размещайте
информацию о них на своем сайте, в блоге или на форуме
и добавляйте в текст ссылки на эти книги
(на сайт www.piter.com)
ВНИМАНИЕ! В каждую ссылку необходимо добавить свой персональный
уникальный номер партнера.
С этого момента получайте 10% от стоимости каждой покупки, которую
совершит клиент, придя в интернет-магазин «Питер» по ссылке c Вашим
партнерским номером. А если покупатель приобрел не только эту книгу, но
и другие издания, Вы получаете дополнительно по 5% от стоимости каждой
книги.
Деньги с виртуального счета Вы можете потратить на покупку книг в интернетмагазине издательства «Питер», а также, если сумма будет больше 500 рублей,
перевести их на кошелек в системе Яндекс.Деньги или Web.Money.
Пример партнерской ссылки:
http://www.piter.com/book.phtml?978538800282 – обычная ссылка
http://www.piter.com/book.phtml?978538800282&refer=0000 – партнерская
ссылка, где 0000 – это ваш уникальный партнерский номер
Подробно о Партнерской программе
ИД «Питер» читайте на сайте
WWW.PITER.COM
ПРЕДСТАВИТЕЛЬСТВА ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР»
предлагают эксклюзивный ассортимент компьютерной, медицинской,
психологической, экономической и популярной литературы
РОССИЯ
Санкт/Петербург м. «Выборгская», Б. Сампсониевский пр., д. 29а
тел./факс: (812) 7037373, 7037372; email: sales@piter.com
Москва м. «Электрозаводская», Семеновская наб., д. 2/1, корп. 1, 6й этаж
тел./факс: (495) 23438-15, 97434-50; e-mail: sales@msk.piter.com
Воронеж
Екатеринбург
Ленинский пр., д. 169; тел./факс: (4732) 396170
email: piterctr@сomch.ru
ул. Бебеля, д. 11а; тел./факс: (343) 3789841, 3789842
еmail: office@ekat.piter.com
Нижний Новгород ул. Совхозная, д. 13; тел.: (8312) 412731
email: office@nnov.piter.com
Новосибирск ул. Станционная, д. 36; тел.: (383) 363-01-14
факс: (383) 3501979; email: sib@nsk.piter.com
Ростов/на/Дону
Самара
ул. Ульяновская, д. 26; тел.: (863) 2699122, 2699130
еmail: piterug@rostov.piter.com
ул. Молодогвардейская, д. 33а; офис 223; тел.: (846) 2778979
e-mail: pitvolga@samtel.ru
УКРАИНА
Харьков ул. Суздальские ряды, д. 12, офис 10; тел.: (1038057) 751-10-02
758-41-45; факс: (1038057) 712-27-05; е-mail: piter@kharkov.piter.com
Киев
Минск
Московский пр., д. 6, корп. 1, офис 33; тел.: (1038044) 4903569
факс: (1038044) 4903568; еmail: office@kiev.piter.com
БЕЛАРУСЬ
ул. Притыцкого, д. 34, офис 2; тел./факс: (1037517) 201-48-79, 201-48-81
еmail: gv@minsk.piter.com
Ищем зарубежных партнеров или посредников, имеющих выход на зарубежный рынок.
Телефон для связи: (812) 703/73/73. E/mail: fuganov@piter.com
Издательский дом «Питер» приглашает к сотрудничеству авторов. Обращайтесь
по телефонам: Санкт/Петербург — (812) 703/73/72, Москва — (495) 974/34/50
Заказ книг для вузов и библиотек по тел.: (812) 7037373.
Специальное предложение — еmail: kozin@piter.com
Заказ книг по почте: на сайте www.piter.com; по тел.: (812) 703-73-74
по ICQ 413763617
УВАЖАЕМЫЕ ГОСПОДА!
КНИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР»
ВЫ МОЖЕТЕ ПРИОБРЕСТИ
ОПТОМ И В РОЗНИЦУ У НАШИХ
РЕГИОНАЛЬНЫХ ПАРТНЕРОВ.
ДАЛЬНИЙ ВОСТОК
Владивосток
«Приморский торговый дом книги»
тел./факс: (4232) 238212
email: bookbase@mail.primorye.ru
СИБИРЬ
Иркутск, «ПродаЛитЪ»
тел.: (3952) 200917, 241777
email: prodalit@irk.ru
http://www.prodalit.irk.ru
Хабаровск, «Деловая книга», ул. Путевая, д. 1а
тел.: (4212) 360665, 339531
email: dkniga@mail.kht.ru
Иркутск, «Светлана»
тел./факс: (3952) 252590
email: kkcbooks@bk.ru
http://www.kkcbooks.ru
Хабаровск, «Книжный мир»
тел.: (4212) 328551, факс: (4212) 328250
email: postmaster@worldbooks.kht.ru
Хабаровск, «Мирс»
тел.: (4212) 394960
email: zakaz@booksmirs.ru
ЕВРОПЕЙСКИЕ РЕГИОНЫ РОССИИ
Архангельск, «Дом книги», пл. Ленина, д. 3
тел.: (8182) 654134, 653879
email: marketing@avfkniga.ru
Воронеж, «Амиталь», пл. Ленина, д. 4
тел.: (4732) 267777
http://www.amital.ru
Калининград, «Вестер»,
сеть магазинов «Книги и книжечки»
тел./факс: (4012) 215628, 6 56568
email: nshibkova@vester.ru
http://www.vester.ru
Самара, «Чакона», ТЦ «Фрегат»
Московское шоссе, д.15
тел.: (846) 3312233
email: chaconne@chaccone.ru
Саратов, «Читающий Саратов»
пр. Революции, д. 58
тел.: (4732) 512893, 470081
email: manager@kmsvrn.ru
СЕВЕРНЫЙ КАВКАЗ
Ессентуки, «Россы», ул. Октябрьская, 424
тел./факс: (87934) 69309
email: rossy@kmw.ru
Красноярск, «Книжный мир»
пр. Мира, д. 86
тел./факс: (3912) 273971
email: bookworld@public.krasnet.ru
Новосибирск, «Топкнига»
тел.: (383) 3361026
факс: (383) 3361027
email: office@topkniga.ru
http://www.topkniga.ru
ТАТАРСТАН
Казань, «Таис»,
сеть магазинов «Дом книги»
тел.: (843) 2723455
email: tais@bancorp.ru
УРАЛ
Екатеринбург, ООО «Дом книги»
ул. Антона Валека, д. 12
тел./факс: (343) 3581898, 3581484
email: domknigi@k66.ru
Екатеринбург, ТЦ «Люмна»
ул. Студенческая, д. 1в
тел./факс: (343) 228-10-70
e-mail: igm@lumna.ru
http://www.lumna.ru
Челябинск, ООО «ИнтерСервис ЛТД»
ул. Артиллерийская, д. 124
тел.: (351) 2477403, 2477409,
2477416
email: zakup@intser.ru
http://www.fkniga.ru, www.intser.ru
ЗАКАЗАТЬ КНИГИ ИЗДАТЕЛЬСКОГО ДОМА «ПИТЕР» МОЖНО ЛЮБЫМ
УДОБНЫМ ДЛЯ ВАС СПОСОБОМ:
на нашем сайте: www.piter.com
по электронной почте: postbook@piter.com
по телефону: (812) 703/73/74
по почте: 197198, Санкт/Петербург, а/я 127, ООО «Питер Мейл»
по ICQ: 413763617
ВЫ МОЖЕТЕ ВЫБРАТЬ ЛЮБОЙ УДОБНЫЙ ДЛЯ ВАС СПОСОБ ОПЛАТЫ:
Наложенным платежом с оплатой при получении в ближайшем почтовом
отделении.
С помощью банковской карты. Во время заказа Вы будете перенаправлены
на защищенный сервер нашего оператора, где сможете ввести свои данные
для оплаты.
Электронными деньгами. Мы принимаем к оплате все виды электронных денег: от традиционных Яндекс.Деньги и Web-money до USD
E-Gold, MoneyMail, INOCard, RBK Money (RuPay), USD Bets, Mobile Wallet
и др.
В любом банке, распечатав квитанцию, которая формируется автоматически
после совершения Вами заказа.
Все посылки отправляются через «Почту России». Отработанная
система позволяет нам организовывать доставку Ваших покупок максимально быстро. Дату отправления Вашей покупки и предполагаемую дату
доставки Вам сообщат по e-mail.
ПРИ ОФОРМЛЕНИИ ЗАКАЗА УКАЖИТЕ:
фамилию, имя, отчество, телефон, факс, email;
почтовый индекс, регион, район, населенный пункт, улицу, дом,
корпус, квартиру;
название книги, автора, количество заказываемых экземпляров.
Related documents
ШАБЛОН ПЕРСОНАЛЬНОЙ СТРАНИЦЫ ЧЛЕНА МАЭХИР
ШАБЛОН ПЕРСОНАЛЬНОЙ СТРАНИЦЫ ЧЛЕНА МАЭХИР
Создание и форматирование документов Word
Создание и форматирование документов Word
автор и пользователь в системе медиа
автор и пользователь в системе медиа
Правила предоставления доступа к Интернет
Правила предоставления доступа к Интернет
Инструкция по работе с шаблоном ф.62
Инструкция по работе с шаблоном ф.62
Основные функциональные подсистемы компьютера
Основные функциональные подсистемы компьютера
ОСНОВЫ ЧЕЛОВЕКО- МАШИННОГО ВЗАИМОДЕЙСТВИЯ
ОСНОВЫ ЧЕЛОВЕКО- МАШИННОГО ВЗАИМОДЕЙСТВИЯ
Специальная версия сайта для людей с ограниченными возможностями
Специальная версия сайта для людей с ограниченными возможностями
Лекция: Процедурные человеко
Лекция: Процедурные человеко
3. Редактирование профиля пользователя
3. Редактирование профиля пользователя
Download
advertisement
Study collections