Полный список статей / Юзабилити при проектировании / Версия для печати / translit / абракадабра :-)

Некоторыми измоих любимых сайтов синтерфейсами встиле расширенных веб-приложений являются:

• Flickr
• Google Maps
• Basecamp
• Backpack
• Odeo
• Gap

Многие изних построены наFlash или сиспользованием Ajax технологий.

Ключевыми отличительными признаками этих приложений являются:

• Пользователь прямо взаимодействует сэлементами страницы (редактирование наместе, drag-and-drop (захват исдвиг географической карты).
• Обновляется часть страницы (вместо перезагрузки целиком).
• Уточняющая информация доступна натойже самой странице (вместо ееразмещения нановой странице).
• Общение спользователями, сообщения для подтверждений иошибок, предоставляются всамой странице.

Эти признаки богатого набора свойств также являются теми признаками, которые представляют изсебя самую большую трудность для проектировщиков, которые желают обеспечить высокое удобство использования приложений.

Во премя проектирования расширенных веб-приложений, появляется искушение «нашпиговать» проект излишней «расширенностью». Неподдавайтесь этому искушению! Обычные люди, которые уже использовали Интернет несколько лет, чувствуют себя уютно при существующей модели, которая основана напереходах поотдельным страницам, иограниченном взаимодействии, хотя это может казаться неуклюжим дизайнерам иразработчикам. Людям нужно время, чтобы приспособиться кновым условиям. Пройдет некоторое время, прежде чем будет достигнуто согласие, ипользователи будут чувствовать себя уютно ыновой среде. Двигайтесь медленно, добавляя новое лишь там, где оно значительно улучшает удобство использования, ирасчитывая натрадиционные модели там, где они лучше подходят больше.

Хорошее изучение пользователя (ифокусировка внимания напользователях вовремя всего процесса проектирования) ирегулярное испытание удобства использования помогут Вам определить уместность интерактивных элементов.

Чтобы добавить элементы интерактивности приложению, можно например позволить пользователям прямо взаимодействовать сэлементами страницы: редактирование текста наместе, перетаскивание ивставка графических элементов, захват исдвиг географической карты.

Основная трудность втом, чтобы объяснить, что можно делать сэлементами страниц, икак использовать новые элементы управления. Люди должны быть способны узнать, что элемент управления существует, илегко определить, как его использовать.

В книгеПроектирование ежедневных вещей (The Design ofEveryday Things), Дон Норман (Don Norman) популяризовал идеючувствуемого назначения (perceived affordance)(чувствуемые идействительные свойства вещи, которые определяют, как вещь можно использовать). Например, уобычной трехмерной кнопки хорошее чувствуемое назначение. Если выделять светом верх изатенять низ, толюди чувствуют, что кнопка как будто выступает изэкрана, илегко понимают, что она может быть нажата щелчком мыши.

Одним изспособов является использование элементов управления, которые похожи навещи, знакомые людям по настоящему миру, такие как ползунок насайтеFidelity Labs Ипотечный Поиск (Fidelity Labs Mortgage Search).

years = годы
How long you will live there = Как долго Вы там будете жить
Down payment = Оплата сразу

Другим способом является изменение вида элемента, или показ его элементов управления, когда указатель мыши нависает над ним, указывая, что можно делать без захламления интерфейса. Сайт Backpack использует это, чтобы выделять элементы, которые можно редактировать или уничтожить.

Lists = Списки
start to prepare bed for beside the house = начать подготовку грядки рядом с домом
Plant shrubs bought last weekend = Посадить кусты, которые куплены в прошлые выходные
Plant next set of seeds = Посадить следующую порцию семян
Get straw = Получить солому
Edit = Редактировать
Add item = Добавить элемент
Reorder = Переупорядочить

В дополнение кобеспечиванию того, что уВаших элементов управления должно быть хорошее чувствуемое назначение, Вам былобы полезно:

• Помнить, как важно бывает показать. При внедрении нового интерфейса, используйте маленькое обучающее видео встраницах, чтобы показать взаимодействие.
• Обеспечить, чтобы элементы управления имодели взаимодействия использовались одинаково вовсем интерфейсе, ибыли похожи надругие сайты, которые посещают Ваши пользователи. Это помогает людям легко понять, что делать, ирасти наоснове существующего опыта.

Есть значительное преимущество вобновлении части страницы вместо ееперезагрузки или открытия новой страницы. Это позволяетнам создавать более быстрые приложения, улучшать общение спользователем, илучше обрабатывать ошибки. Обработка ошибок иобщение очень важны для улучшения удобства использования, ноэто особенно трудно делать смоделью, которая основана напереходах постраницам. Пользователи привыкли ктому, что нужно сначала предпринять действие (такое как щелкание полинку), подождать выполнения действия, ипроверить результат действия.

Ключевая трудность впроектировании бесперезагрузочных обновлений страниц— это обеспечивание того, что люди ихвидят. Мыможем использовать то,что знаем озрительном внимании изрительной обработке, чтобы обеспечить то,что люди будут видеть, что часть страницы обновили:

• Зрительное внимание притягивается движением ивысоким цветовым контрастом (поэтому яркие анимированные рекламные картинки так отвлекают— наши глаза постоянно кним притягиваются). Мыможем использовать это длясебя, ипривлечь глаз кобновленной части страницы.
• Когда мыпредпринимаем действие, такое как щелчок покнопке, наши глаза короткое время продолжают смотреть наэту точку, потом освобождаются, чтобы посмотреть куда-либо вдругое место. Стараясь выполнить изменения быстро, итак близко как возможно кместу, куда они смотрят, мыможем привелечение внимания кжелаемому месту.
• Зрительное внимание может быть одновременно сосредоточено только наодной вещи. Делайте одно обновление заодин раз, инеиспользуйте движущиеся картинки высокого контраста вдругих местах настранице. Сайт 37Signals был одним изпервых, которые это сделали, популяризовавтехнологию yellow fade technique. Сайт Odeo предоставляет эффективное общение, используя цвет идвижение, ипомещая его точно туда, куда смотрит пользователь:

ABOUT THIS CHANNEL = ОБ ЭТОМ КАНАЛЕ
QUEUE = ОЧЕРЕДЬ

You have added this audio to your inbox. =
Вы добавили эту звуковую запись к Вашему ящику для получаемых писем.

Subscribers = Подписчики

В товремя как мывзаимодействуем смиром, мысоздаем всознании модель того, как работают вещи. Большинство пользователей создали всознании модель Паутины, которая основана настраницах ипостраничных переходах: каждый щелчок мыши перемещает Вас нановую страницу. Щелчок накнопку для перемещения назад перемещает Вас напрошлую страницу. Эта модель всознании сильна, иразумно точна для большинства сайтов. Пользователи будут продолжать применять эту модель всвоем сознании икрасширенным веб-приложениям, дотех пор, пока они ясно неосоззнают, что здесь используется другая модель.

Первая часть этой проблемы втом, чтобы очень хорошо подумать отом, где использовать отдельные страницы, игде использовать новую интерактивность внутри страницы. Подумайте ополном взаимодействии Вашего приложения, иразделите его подходящим способом. Непробуйте поместить все водну «страницу» только потому, что Выможете это сделать.

Одним изфакторов является возможное использование кнопки для перемещения назад. Подумайте, где людям может понадобиться вернуться назад— это даст Вам намек нато,где использовать страницы. Неотключайте кнопку для перемещения назад, уменьшая возможности пользователей для управления своим положением.

Другая трудность втом, чтобы зрительно выразить разницу между страницами иизменениями встраницах. Вам может понадобиться спроектировать разные модели зрительной навигации, чтобы люди могли узнать, когда они получают новую страницу. Похоже, что современем появятся какие-либо новые способы навигации.

Google Readerочень плохо обращается состраницами. Кнопки втрадиционной верхней панели навигации (Домой (Home), Ваши подписки (Your Subscriptions), идругие) подразумевают перемещение котдельным страницам, нонасамом деле меняют содержимое втеле этой страницы. Когда япервый раз использовала Google Reader, ячасто пробовала использовать кнопку для перемещения назад, чтобы вернуться наначальную страницу, новыбрасывалась прямо напоследнюю страницу, которую япосещала перед переходом наGoogle Reader. Это было так обидно, что яперестала ееиспользовать.

Reader = Читалка
Search for new content = Искать новое содержимое
Search the Web = Искать в Паутине
Home = Домой = Начальная страница
Your subscriptions = Ваши подписки
Read items = Читать элементы
Starred = Звездные
top = верх
up = выше
down = ниже
refresh = обновить
page up = листать на страницу вверх
Show original item = Показать первоисточник

В отличии отэтого, Yahoo! Новости (Yahoo! News) хорошо обращаются состраницами иобновлениями внутри страниц. Уних есть традиционная навигация сверхними закладками для отдельных страниц, ипанели внутри страницы, которые обновляются, основываясь наисточнике новостей:

NEWS = НОВОСТИ
Sign In = Войти
New User = Новый Пользователь
Sign Up = Зарегистрироваться
News Home = Начальная Страница
U.S. = США
Business = Бизнес
World = Мир
Entertainment = Развлечения
Sports = Спорт
Tech = Техника
Politics = Политика
Photos = Фотографии
Opinion = Мнение
Local News = Местные Новости
Odd News = Странные Новости
Comics = Комиксы
Weather = Погода
Full Coverage = Полные Известия

Top Stories = Лучшие Истории
AP = Агентство Ассошиэйтед Пресс
Reuters = Агентство Рейтерс
AFP = Агентство Франс-Пресс
USATODAY.com = США СЕГОДНЯ . com
CSMonitor.com = Кристен Сайенс Монитор
NPR = ?
My Sources = Мои Источники
hour = час
minutes = минуты
ago = тому назад
All Top Stories from Reuters = Все Лучшие Истории от Рейтерс
MORE TOP NEWS = БОЛЬШЕ ЛУЧШИХ ИСТОРИЙ
U.S. News & World Report = Новости США и Мировой Отчет (репортаж о событиях в мире)
Photos and Slideshows = Фотографии и Наборы Слайдов

• Удобство Использования (Usability)
• Дизайн, Создаваемый вокруг Пользователя (User-Centered Design (UCD))
• Программирование
• Написание Скриптов
• Объектная Модель Документа (Document Object Model (DOM))
• Взаимодействие Человека иКомпьютера (Human-Computer Interaction (HCI))