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

4 июля 2007 | Александр Сергеев | Инновации

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 это:

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

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

function loadHTML(sURL)
{
  var request=null;

  // пытаемся создать объект для MSXML 2 и старше
  if(!request) try {
    request=new ActiveXObject('Msxml2.XMLHTTP');
  } catch (e){}

  // не вышло... попробуем для MSXML 1
  if(!request) try {
    request=new ActiveXObject('Microsoft.XMLHTTP');
  } catch (e){}

  // не вышло... попробуем для Mozilla
  if(!request) try {
    request=new XMLHttpRequest();
  } catch (e){}

  if(!request)
    // ничего не получилось...
    return "";
 
  // делаем запрос
  request.open('GET', sURL, false);
  request.send(null);

  // возвращаем текст
  return request.responseText;
}

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-приложения, которые я не упомянул в заметке? Тогда поделитесь информацией с другими, в комментариях. Спасибо!

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