Насыщенные интернет приложения (Rich Internet Applications — RIA) позволяют создавать функциональный, быстрый, удобный и красивый пользовательский интерфейс. Cложные интерфейсы требуют хорошего понимания нужд пользователей и особенностей взаимодействия человека и компьютера (Human-Computer Interaction — HCI).

Несмотря на то, что доступно множество материалов посвященных HCI, правильное применение их в каждом конкретном случае может быть сложной задачей. В этой статье я хочу, дать несколько советов разработчикам RIA, основанных на фундаментальных принципах HCI.

Что такое RIA?

Если верить Wikipedia, RIA это «веб приложения, которые имеют черты и функциональность традиционных десктопных приложений, обычно RIA переносят на сторону клиента работу с интерфейсом, при этом данные и логика работы с ними находятся на сервере».

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

Вот несколько моих любимых сайтов использующих RIA:

Многие их них используют Flash или Ajax.

Основные особенности этих приложений:

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

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

Вызов 1: Решить насколько широкая функциональность нужна.

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

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

Вызов 2: Интерактивные элементы

Один из способов расширить функциональность приложения, это дать пользователям возможность взаимодействовать с элементами страницы, редактировать текст, использовать drag&drop.

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

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

Слайдер

Один из способов создания удобных и понятных элементов управления это их заимствование из реального мира, например этот слайдер на сайте Fidelity Labs Mortgage Search.

Дополнительные возможности при наведении мышки

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

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

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

Вызов 3: Обновление части страницы

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

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

  • Движение и контрастные цвета привлекают к себе внимание (вот почему мы всегда замечаем яркие, анимированные банеры), мы можем использовать это чтобы обратить внимание пользователя на изменившиеся элементы страницы.
  • Когда мы совершаем действие, например, нажимаем на кнопку, наш взгляд остается направленным на нее еще мгновение, перед тем как перейдет на другие элементы страницы. Если внести изменения в страницу достаточно быстро и как можно ближе к точке, в которую направлен взгляд, можно быть уверенными, что пользователь их заметил.
  • Внимание пользователя в каждый момент времени может быть сфокусировано только на одном предмете. Делайте не больше одного обновления за раз, не используйте на странице несколько высококонтрастных, анимированных элементов. 37 Signals одними их первых начали следовать этому правилу, предложив очень популярную технику затухающей желтой подсветки.
Кнопка на odeo

Odeo очень эффективно информируют посетителей с помощью цвета, анимации и размещения информации именно там, куда направлен взгляд пользователя.

Вызов 4: Уход от постраничной модели

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

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

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

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

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

Google Reader

Совершенно другое дело Yahoo! Здесь используется традиционные табы, каждый из которых ведет на новую страницу, на самой странице используется частичное обновление при переключении источника новостей.

Основная навигация на Yahoo

Внутренняя навигация на Yahoo

Что еще?

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

Похожие статьи