Ресурс для веб-разработчиков и CSS-галерея

CSS, веб-стандарты, javascript

CSS, веб-стандарты, javascript

Юзабилити при проектировании расширенных веб-приложений (Rich Internet Applications) Автор: Донна Маурер

тэги Ajax Юзабилити Web 2.0
Довольно старая, но от этого не менее актуальная статья по юзабилити для т.н. «вебдванольных» приложений

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

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

Расширенные веб-приложения (RIA, rich Internet applications) могут производить значительно более приятные впечатления напользователей. Они могут быть быстрее, заманчивее, и намного удобнее. Однако, у этого улучшения есть свой недостаток — расширенные веб-приложения намного труднее проектировать, чем старое поколение приложений, которое ориентировано на работу с отдельными страницами и скриптами. Бесперезагруочность и интерактивность требует лучшего понимания пользователей, взаимодействия между человеком и компьютером (HCI, human-computer interaction). Хотя сейчас доступно множество материалов и результатов изучения такого взаимодействия, подчас бывает сложно определить, как применить эти знания к новому окружению.

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

Что такое расширенные веб-приложения?

Согласно Wikipedia сайту энциклопедии, расширенные веб-приложения это «гибрид между веб-приложениями и обычными десктоп-приложениями, переносящие некоторый объем обработки данных на сторону клиента».

Ключевым отличием между расширенными веб-приложениями и обычными веб-приложениями является объем взаимодействия на уровне интерфейса. В традиционном веб-приложении, которое сделано для работы со страницами, взаимодействие ограничено малым набором управляющих элементов, таких как чекбоксы, радио-кнопки, текстовые поля форм, и кнопки сабмита. Это жестко ограничивало наши возможности, и большинство веб-приложений были более неуклюжими и более трудными в использовании, чем их настольные аналоги. Расширенное веб-приложение может использовать большее (и, надеюсь, лучшее) количество управляющих элементов, чтобы улучшить взаимодействие пользователей с интерфейсом, позволяя прилагать меньше усилий, улучшать обработку ошибок, взаимодействие с пользователем, и оставлять более приятное общее впечатление.

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

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

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

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

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

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

Трудность #1: Выбор количества «расширенных» свойств, которое надо добавить

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

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

Трудность #2: Элементы страницы для взаимодействия

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

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

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

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

ползунок

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

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

проявления нависания на 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 = Переупорядочить

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

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

Трудность #3: Обновление части страницы

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

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

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

кнопка в odeo сайте

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

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

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

Трудность #4: Ломка страничной модели

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

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

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

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

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

google читалка

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) хорошо обращаются со страницами и обновлениями внутри страниц. У них есть традиционная навигация с верхними закладками для отдельных страниц, и панели внутри страницы, которые обновляются, основываясь на источнике новостей:

yahoo верхняя навигация

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 = Полные Известия

yahoo навигация в странице

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))
Оригинал статьи → http://www.digital-web.com/

Написать комментарий




Ввод HTML запрещен!!Введите текст с изображения:* проверка на работа
* — поля обязательные к заполнению!

Комментарии (0)



Сделано в 127.ru