Web 2.0 глазами юзабилити – специалиста. Часть 1: Технология

19 июня в Минске прошла конференция Байнет 2.0, посвященная Web 2.0. На ней выступали специалисты по SEO, маркетологи, дизайнеры и разработчики. И каждый рассказывал о своем понимании Web 2.0. Для специалистов по SEO Web 2.0 – это индексация флешевых приложений, для маркетологов – вирусный маркетинг, а для разработчиков – javascript-фреймворки. Над общим знаменателем никто особо не спорил: Web 2.0 – это UGC (user generated content, контент, который пишут пользователи), социальные сети, новый дизайн (цвета, скругленные углы, упрощение лэйаута до 3/2 и даже 1 колонки) и юзабилити.

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

Итак, оставим в стороне всю лирику и метафизику и посмотрим на Web 2.0 в ракурсе юзабилити, но вначале – про технологию, благодаря которой Web 2.0 появился на свет.

Часть 1. Технология Web 2.0: get, parse & display
Три kit’a, на которых держится технология Web 2.0 это:

1. Kit №1 (get): технология для отправки запроса веб-серверу из браузера в произвольный момент времени и получения ответа от веб-сервера (или другими словами – технология удаленного вызова функций). Это стало возможным благодаря таким объектам как Msxml2.XMLHTTP, Microsoft.XMLHTTP для тех платформ, которые поддерживают COM и благодаря объекту XMLHttpRequest для Mozilla, который будет работать и там где поддержки COM нет, например, под Linux.

   Если перевести это на язык пользователя Web 2.0 сайта Работа.Ру, то получится: “мне теперь не нужно ждать, пока загрузиться вся страница, для того, чтобы посмотреть краткую информацию о работодателе”:

   

   И теперь опять вернемся к нечеловеческому языку (язык программирования JavaScript). Вот как выглядит универсальный код посылки запроса (вызова удаленной функции) на веб-сервер и получения ответа, то есть результата работы функции (спасибо тебе Ян за этот пример):

   1. function loadHTML(sURL)
   2. {
   3.   var request=null;
   4.  
   5.   // пытаемся создать объект для MSXML 2 и старше
   6.   if(!request) try {
   7.     request=new ActiveXObject(‘Msxml2.XMLHTTP’);
   8.   } catch (e){}
   9.  
   10.   // не вышло… попробуем для MSXML 1
   11.   if(!request) try {
   12.     request=new ActiveXObject(‘Microsoft.XMLHTTP’);
   13.   } catch (e){}
   14.  
   15.   // не вышло… попробуем для Mozilla
   16.   if(!request) try {
   17.     request=new XMLHttpRequest();
   18.   } catch (e){}
   19.  
   20.   if(!request)
   21.     // ничего не получилось…
   22.     return "";
   23.  
   24.   // делаем запрос
   25.   request.open(‘GET’, sURL, false);
   26.   request.send(null);
   27.  
   28.   // возвращаем текст
   29.   return request.responseText;
   30. }
   31.  

2. Kit №2 (parse): XML, который используется в данном случае для инкапсуляции и передачи параметров удаленной функции (например, имени компании как в предыдущем примере для функции получения краткой информации о компании) и передачи результата обратно на клиент (см. пред. картинку – там виден результат работы функции).
3. Kit №3 (display): DHTML, который позволяет менять html-страницу “на лету”, благодаря DOM и CSS. На человеческом языке это означает: взять данные, полученные от веб-сервера и, “раскрасив” их при помощи CSS, показать пользователю в браузере.

Странно, но почему-то ни один разработчик не рассказал об этом на конференции, наверное, из-за предположения – “они об этом итак знают” :)

Примеры Web 2.0-приложений
На конференции рассматривали только 3 вида Web 2.0-приложений – социальные сети, карты и youtoube-клон itv.by, но к сожалению никто не рассказал о действительно полезных штуках, появление которых сталов возможным благодаря распространению get, parse & display технологии. Вот лишь некоторые примеры (начну я с продукта компании-гуру в области юзабилити – 37signals):

BaseCamp – управление проектами:

ConceptShare – обсуждение макетов on-line (рекомендую всем, кто занимается юзабилити):

Google Analytics – веб-аналитика:

Google Documents – документы и таблицы on-line:

BlinkSale – работа с инвойсами и платежами:

ClickDensity – heat-map’ы (анализ кликов по страницам и оценка юзабилити веб-сайтов):

Wordpress – персональная издательская система:

Color Scheme 2 – сервис для подбора цветовой схемы

Ссылки по теме:

• BaseCamp – управление проектами (юзабилити – 10-ка по 10-бальной шкале)
• ConceptShare – обсуждение макетов on-line (для тех, кто занимается юзабилити).
• Google Analytics – веб-аналитика (средство для косвенной оценки юзабилити сайтов по статистическим данным посещаемости сайта).
• Google Documents – документы и таблицы on-line.
• BlinkSale – работа с инвойсами и платежами.
• ClickDensity – heat-map’ы (анализ кликов по страницам).
• Wordpress – персональная издательская система.
• Color Scheme 2 – сервис для подбора цветовой схемы.

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

PS. Может вы знаете какие-то другие полезные Web 2.0-приложения, которые я не упомянул в заметке? Тогда поделитесь информацией с другими, в комментариях. Спасибо!

Если вам пригодилась статья (да или просто понравилась), вы можете поощрить работу автора

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

      ЖЖ  E-mail  RSS