En Ru
+375 (29) 692-02-78 +375 (17) 219-48-27
Отправить запрос

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

9 июля 2007 | Alexander Sergeev | Инновации

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

Контролы

Контрол (или виджет) - это элемент интерфейса, благодаря которому пользователь может взаимодействовать с программой или сайтом. Рис 1. Примеры контролов (из Web 2.0 - приложения Wordpress). demo.jpg

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

Контролы в Web 1.0

Все контролы старого Web 1.0 умещаются на картинку размером 448x174 пикселей: Рис 2. Контролы старого Web 1.0. web10.jpg

MDI vs. SDI в Вебе

MDI (Multiple Document Interface) - это когда все окна приложения располагаются "под" одним родительским окном.

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

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).

modal.jpg

Возможность показывать такие окна в 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 - приложении. window.jpg

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

Контролы в Web 2.0

Из-за простоты (по сравнению с настольными приложениями) создания контролов в Web, мы имеем на данный момент сотни разных контролов на любой вкус и цвет. Вот лишь некоторые примеры. Рис 6. Пример Auto-completion контрола. auto-completion.gif

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

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

tabs.gif

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

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

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

Понравилась статья?