------- Паван Вора Посвящается Моей маленькой принцессе Суми Благодарность Выражаю искреннюю благодарность следующим людям: Об авторе Паван Вора – основатель и президент компании Alpha Cube, Inc., которая занимается консультированием в области проектирования взаимодействия программы с пользователем. Основные направления деятельности компании – проектирование, анализ и оценка пользовательских интерфейсов программного обеспечения и веб-приложений. Глава 1 Введение Все чаще компьютерные приложения разрабатываются на основе веб-технологий, и к ним можно получить доступ с помощью веббраузеров (например, Internet Explorer, Firefox, Safari и Opera). Обычно такие приложения называются веб-приложениями, или размещаемыми приложениями (hosted applications) – приложениями, в основе которых лежит модель программного обеспечения как услуги (SaaS) [1 - SaaS – это модель продажи программного обеспечения, при котором поставщик разрабатывает веб-приложение, занимается его хостингом и управляет им (либо самостоятельно, либо через посредника), предоставляя клиентам возможность пользоваться им через Интернет. Клиенты не платят за право собственности на это программное обеспечение; они оформляют на него платную подписку.] или облачные вычисления (cloud computing) [2 - Веб-приложения считаются одним из видов «облачных вычислений», поскольку приложениями и файлами управляют в пределах «вычислительного облака», состоящего из тысяч компьютеров и серверов, соединенных друг с другом и доступных через Интернет.]. Эти веб-приложения отличаются от более традиционных веб-сайтов в том смысле, что их предназначение – помочь пользователям в выполнении таких задач, как отправка электронных писем, бронирование авиабилетов, поиск домов, оплата счетов, перевод денег, покупка продуктов, рассылка приглашений и т. п. (рис. 1.1–1.4). Веб-сайты, напротив, ориентированы на контент и разрабатываются для поиска и ознакомления с достаточно статической информацией (рис. 1.5). Достоинства веб-приложений Популярность веб-приложений объясняется тем, что они обладают рядом достоинств. Эти достоинства описаны в данном разделе (Baxley, 2003; Turnbull, 2006). Трудности в разработке интерфейсов для веб-приложений Несмотря на все эти достоинства и возрастающую пользу, разработка интерфейсов для веб-приложений остается проблематичной. Сложности при создании удобных в применении способов взаимодействия в основном обусловлены тем, что лежащая в основе веб-архитектура «слабо связана», а также с тем, что веб-браузеры поддерживают ограниченный набор интерактивных средств управления, и с нехваткой руководств по разработке таких аспектов, как например, каким образом осуществлять взаимодействие пользователей с системой. для создания комбинированных окон и элемент для того, чтобы показывать значения, производные от других элементов управления), а также в ней появятся расширения для существующих элементов управления (например, Шаблоны проектирования Упоминание о шаблонах впервые появилось применительно к архитектуре в работах Кристофера Александра и его коллег: «Язык шаблонов» (Alexander et al., 1977) и «Извечный путь строительства» (Alexander, 1979). Они объясняют суть шаблонов следующим образом: Документирование шаблонов Важно, чтобы шаблоны были документально оформлены, чтобы из этой документации можно было понять, что они собой представляют, почему они работают и как они должны применяться для решения проблемы проектирования, чтобы получить вышеупомянутые преимущества. Однако интересен тот факт, что не существует какого-либо «шаблона» для документирования шаблонов (см. главу 13). Авторы шаблонов применяют различные подходы, начиная с тех, кто основывается на более описательном повествовании в духе Кристофера Александра (Borchers, 2001; Graham, 2003; van Duyne et al., 2002, 2006), заканчивая теми, кто следует более структурированному, хотя и минималистическому, подходу (Laasko, 2003); Тидвелл, 2008; www.welie.com) [4 - Чтобы упорядочить разнообразие и несогласованность форм используемых шаблонов и чтобы найти способ объединения шаблонов и их языков от разных авторов в особые тематические коллекции шаблонов, участники конференции CHI 2003 предложили язык разметки на основе XML под названием Pattern Language Markup Language (PLML; произносится как «пэл-мэл»). Чтобы получить больше информации, см. работу Финчера (Fincher, 2003).]. Структурирование шаблонов в этой книге Шаблоны в этой книге структурированы по главам следующим образом. Применение шаблонов в этой книге В этой книге предоставлено практическое руководство по проектированию пользовательских интерфейсов для разработки веб-приложений, предлагающее «работающую» отправную точку, с которой проектировщики могут начать внедрение и оптимизацию творческих решений. Глава 2 Введение Формы являются отличительной чертой веб-приложений. С помощью элементов формы (например, текстовые поля, раскрывающиеся и прокручиваемые списки, переключатели, флажки и управляющие кнопки) веб-приложения позволяют пользователям выполнять такие задачи, как покупка товаров и услуг, бронирование авиабилетов, поиск местоположения, загрузка и выкладывание фотографий и т. д. Чтобы пользователи могли успешно выполнить свои задачи, важно, чтобы формы не были сложными и были спроектированы так, чтобы: CLEAR BENEFITS (ЧЕТКИЕ ПРЕИМУЩЕСТВА) //-- Проблема --// SHORT FORMS (КОРОТКИЕ ФОРМЫ) //-- Проблема --// LOGICAL GROUPING (ЛОГИЧЕСКОЕ ГРУППИРОВАНИЕ) //-- Проблема --// LABEL ALIGNMENT (ВЫРАВНИЕ МЕТОК) //-- Проблема --// REQUIRED FIELD INDICATORS (ИНДИКАТОРЫ ОБЯЗАТЕЛЬНЫХ ПОЛЕЙ) //-- Проблема --// SMART DEFAULTS («УМНЫЕ» ЗНАЧЕНИЯ ПО УМОЛЧАНИЮ) //-- Проблема --// FORGIVING FORMAT (ВЕЛИКОДУШНЫЙ ФОРМАТ) //-- Проблема --// KEYBOARD NAVIGATION (УПРАВЛЕНИЕ КЛАВИАТУРОЙ) //-- Проблема --// K ey Button INPUT HINTS/PROMPTS (ПОДСКАЗКИ ПРИ ВВОДЕ/ПРИГЛАШЕНИЕ К ВВОДУ) //-- Проблема --// ACTION BUTTONS (КНОПКИ ДЕЙСТВИЙ) //-- Проблема --// ERROR MESSAGES (СООБЩЕНИЯ ОБ ОШИБКАХ) //-- Проблема --// Глава 3 Введение Когда веб-приложение предполагает взаимно однозначное взаимодействие с пользователем и сохранение персональных данных о пользователе, возникает необходимость, чтобы пользователи создавали учетную запись (REGISTRATION) и выбирали уникальные учетные данные для доступа к веб-приложению. При регистрации пользователи в некоторых случаях должны ввести набор буквенно-цифровых символов с искаженного изображения, чтобы предотвратить рассылку спама, а также подтвердить, что они являются людьми, а не компьютерными программами (CAPTCHA, Completely Automated Public Turing test to tell Computers and Humans Apart, – Полностью автоматизированный публичный тест Тьюринга для различения компьютеров и людей). REGISTRATION (РЕГИСТРАЦИЯ) //-- Проблема --// CAPTCHA (ПОЛНОСТЬЮ АВТОМАТИЗИРОВАННЫЙ ПУБЛИЧНЫЙ ТЕСТ) //-- Проблема --// LOG IN (ВХОД В СИСТЕМУ) //-- Проблема --// LOG OUT (ВЫХОД ИЗ СИСТЕМЫ) //-- Проблема --// AUTOMATIC LOGOUT (АВТОМАТИЧЕСКИЙ ВЫХОД) //-- Проблема --// FORGOT USERNAME/PASSWORD (ЗАБЫТЫ ИМЯ ПОЛЬЗОВАТЕЛЯ/ПАРОЛЬ) //-- Проблема --// Глава 4 Введение Важно, чтобы проектировщик принял правильное решение по поводу того, что пользователи увидят, или на какую страницу будут перенаправлены после входа в приложение под своими логинами. INBOX (ВХОДЯЩИЕ) //-- Проблема --// CONTROL PANEL (ПАНЕЛЬ УПРАВЛЕНИЯ) //-- Проблема --// DASHBOARD (ИНФОРМАЦИОННАЯ ПАНЕЛЬ) //-- Проблема --// PORTAL (ПОРТАЛ) //-- Проблема --// PERSONALIZATION (ПЕРСОНАЛИЗАЦИЯ) //-- Проблема --// CUSTOMIZATION (КАСТОМИЗАЦИЯ) //-- Проблема --// BLANK SLATE (ЧИСТЫЙ ЛИСТ) //-- Проблема --// Глава 5 Введение Процесс проектирования навигации заключается в создании связей между различными частями приложения (т. е. контентом и функционалом) и применение их иерархической структуры для эффективного и результативного выполнения пользовательских задач. Сюда относится структурирование, маркирование и презентация контента и функционала. Данная глава посвящена шаблонам, имеющим отношение к типам навигационных систем и их презентации; чтобы узнать о структурировании и маркировании навигационных систем, см. работы Морвиля и Розенфельда (Morville and Rosenfeld, 2006), Кальбаха (Kalbach, 2007) и Флеминга (Fleming, 1998). PRIMARY NAVIGATION (ОСНОВНАЯ НАВИГАЦИЯ) //-- Проблема --// SECONDARY NAVIGATION (ВСПОМОГАТЕЛЬНАЯ НАВИГАЦИЯ) //-- Проблема --// UTILITY NAVIGATION (СЛУЖЕБНАЯ НАВИГАЦИЯ) //-- Проблема --// FACETED NAVIGATION (МНОГОАСПЕКТНАЯ НАВИГАЦИЯ) //-- Проблема --// SUPPLEMENTARY NAVIGATION (ДОПОЛНИТЕЛЬНАЯ НАВИГАЦИЯ) //-- Проблема --// TAG CLOUDS (ОБЛАКА ТЕГОВ) //-- Проблема --// BREADCRUMBS (НАВИГАЦИОННАЯ ЦЕПОЧКА) //-- Проблема --// WIZARDS (МАСТЕРА) //-- Проблема --// Глава 6 Введение Для веб-приложений надлежащего размера доступ к информации путем навигации по иерархии приложения может стать обременительным и компрометировать удобство использования. По этой причине важно сделать информацию внутри приложения удобной для поиска, чтобы пользователи могли быстро и эффективно получить нужные данные. SIMPLE SEARCH (ПРОСТОЙ ПОИСК) //-- Проблема --// PARAMETRIC SEARCH (ПОИСК ПО ПАРАМЕТРАМ) //-- Проблема --// ADVANCED SEARCH (РАСШИРЕННЫЙ ПОИСК) //-- Проблема --// SEARCH TIPS (СОВЕТЫ ПО ПОИСКУ) //-- Проблема --// SEARCH RESULTS (РЕЗУЛЬТАТЫ ПОИСКА) //-- Проблема --// 
Рис. 1.1. Пользователи могут настроить свою электронную почту как в этом примере с Yahoo! Mail, и то же самое можно сделать и в таких клиентских приложениях, как Microsoft Outlook, Mozilla Thunderbird и Eudora
Рис. 1.2. Пользователи могут искать варианты туристических путевок и осуществлять бронирование билетов с помощью веб-приложений, таких как Expedia
Рис. 1.3. Пользователи могут найти продающийся дом, узнать его стоимость и увидеть, какие еще дома выставлены на продажу в этом районе. Все это можно сделать на таких сайтах, как Zillow.com
Рис. 1.4. Пользователи могут совершать покупки на таких сайтах, как Buy.com
Рис. 1.5. Ознакомиться со статической информацией о компании Ultragrain и ее товарах можно на сайте этой компании (www.ultragram.com)
(а)
(б)
(a)
(б)