Web 2.0 глазами юзабилити – специалиста. Часть 2: Атомарный контрол-ь

В прошлой статье я рассказал о технологии, на которой зиждется Web 2.0. Сегодня я хочу подняться на более высокий уровень абстракции и поговорить об интерфейсе, а точнее о контролах, из которых он состоит. Я сравню контролы Web 1.0, Web 2.0 и контролы настольных приложений под Windows и тем самым продемонстрирую богаство Web 2.0 с точки зрения интерактива. Это богаство может стать очень опасным мечом в руках человека, несведущего в юзабилити, так же как и книга может стать смертельным оружием в руках ребенка.

Контролы
Контрол (или виджет) – это элемент интерфейса, благодаря которому пользователь может взаимодействовать с программой или сайтом.

Рис 1. Примеры контролов (из Web 2.0 – приложения Wordpress).

В этом примере мы видим как простые контролы (текстовое поле, текстовая область, кнопка, так и композитные, то есть состоящие из нескольких контролов: контрол для загрузки файлов, вкладка).

Контролы в Web 1.0
Все контролы старого Web 1.0 умещаются на картинку размером 448×174 пикселей:

Рис 2. Контролы старого Web 1.0.

MDI vs. SDI в Вебе
MDI (Multiple Document Interface) – это когда все окна приложения располагаются “под” одним родительским окном.

Рис 3. Пример MDI-приложения (Adobe Photoshop CS2).

SDI (Single Document Interface) – когда каждое окно приложения “гуляет” само по себе. Пример – Internet Explorer 6.0.

Ведуться ожесточенные споры – что лучше с точки зрения юзабилити: MDI или SDI. Конечно все зависит от самого приложения и от пользовательских задач. Главное здесь то, что у разработчиков интерфейсов для настольных приложений – есть выбор между MDI, SDI (и TDI).

В вебе картинка несколько иная. В Web 1.0 из-за отсутствия технологии AJAX (или get, parse & display, как я ее обозвал в прошлой статье про Web 2.0) и слабой модальности (alert, input value, аторизация) MDI был невозможен: если вы хотели открыть модальный диалог – вам приходилось открывать новое SDI-окно браузера, которое конечно не было модальным. В Web 2.0 ситуация кардинально изменилась!!! Теперь в вебе стало возможным создавать MDI-окна.

Рис 4. Пример модального MDI-окна (из Web 2.0 – приложения Google Analytics).

Возможность показывать такие окна в Web 2.0 – приложениях на мой взгляд – революция в интерфейсах. MDI в Web 2.0 – визуальный рай (в котором без юзабилити можно легко съесть яблоко)!

Атомарность DHTML
DHTML – это динамический язык разметки, который состоит из следующих “атомов”: текст, таблицы, картинки – HTML; размер, цвет, позиционирование, отступы – CSS; onclick, onmouseover, onmouseout, etc. – события. Эти “атомы” – строительный материал, из которых в Web 2.0 конструируют контролы.

Кстати, если мы сравним интерфейс настольного приложения (сделанного например в Visual Studio 2005) и Web 2.0 – приложения (например от Google, которые делает не самые красивые, но зато удобные интерфейсы), то какое приложение нам больше понравится? :)

И еще, интересно, сколько времени понадобится Windows-программисту, чтобы нарисовать вот такое простецкое окошко в VS 2005:

Рис 5. Пример окна в Web 2.0 – приложении.

В Microsoft уже поняли, что Windows API устарело и очень сильно проигрывает DHTML. На мой взгляд именно по этой причине свет увидел Microsoft Expression Studio, где можно нарисовать любой контрол, никаких window classes, оконных процедур и т.д.: дизайнер рисует контрол в векторе/растре, программист получает контрол в виде дерева элементов и событий (чувствуете как похоже на DHTML) и пишет бизнес-логику. Но пора вернуться к Web 2.0.

Контролы в Web 2.0
Из-за простоты (по сравнению с настольными приложениями) создания контролов в Web, мы имеем на данный момент сотни разных контролов на любой вкус и цвет. Вот лишь некоторые примеры.

Рис 6. Пример Auto-completion контрола.

Рис 7. Пример контрола для редактирования “по месту” (кликнул на текст, в том же месте открылся редактор текста).

Рис 8. Пример контрола с вкладками.

Рис 9. Пример контрола с “плавающими” окнами (floating windows).

Рис 10. Пример контрола для вывода прозрачных окон.

Все эти примеры я нашел в статье 80+ AJAX-Solutions For Professional Coding с отличной подборкой контролов для Web 2.0 – приложений.

Юзабилити и прототипирование в Web 2.0
Сейчас сложилась такая ситуация, что программисты в Вебе, владеющиие технологией AJAX, уже создают и используют новые Web 2.0 – контролы, в то время как юзабилити – специалисты, слышали о них краем уха, а если и слышали – то не используют в прототипах. И проблема кроется не в том, что это что-то сложное и непонятное, а в том, что нет нормальных средств для создания интерактивных прототипов Web 2.0 – приложений.

Я использую Axure Pro 4.2, в котором есть так называемые Dynamic Panels (динамические панели). По сути – это эмуляция DHTML – то есть вы можете менять содержимое окна по какому-либо событию, плюс вы можете эмулировать модальные окна, пряча или показывая dynamic panel. Однако мне многого не хватает: редактирования по месту, виджетов для меню, скриптинга.

К счастью, в Axure Pro уловили тренд и сделали многое, из-то что нужно для прототипирования Web 2.0 – приложений, в версии 4.6. Можете посмотреть на пример прототипа, сделанного в этой версии. В ближайшее время я собираюсь попробовать эту версию на деле, а пока руки не дошли.

Выводы
Некоторые веб-разработчики уже используют “плавающие” окна, редактирование по месту и др., но для большинства такие контролы – это “фан”. Для профессионального веб-программиста подключить javascript-библиотеку, реализующую какой-либо контрол – как занавески раздвинуть. В этом таится большая опасность: использование “фишек” Web 2.0 “по приколу”, а не по делу, может навредить конечным пользователям Web 2.0 – приложения.

Написать RIA (Rich Internet Application – интерактивное интернет-приложение) может любой программист, владеющий неким javascript-фреймворком и библиотеками контролов, но будет ли такое Web 2.0 – приложение давать пользователям Rich User Experience (позитивный опыт использования)?

Юзабилити, которое к сожалению у многих еще ассоциируется исключительно с цветом ссылок и Якобом Нильсоном, стало как никогда актуальным в мире web 2.0 – интерфейсов. Причина кроется в том, что мы, юзабилити – специалисты, получили в свое распоряжение контролы, о которых раньше, в эпоху настольных приложений Windows, не могли даже и мечтать.

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

Радует лишь то, что у всех нас перед глазами (для примера) есть веб-приложения, которые прошли проверку временем и пользователями. Их юзабилити часто не вызывает практически никаких нареканий, а их полезность сравнима с полезностью свежего воздуха, которым нам иногда нужно дышать вдали от компьютера :)

 Понравилась заметка? Подписывайся на обновления блога!
           

      ЖЖ  E-mail  RSS