Если вы владелец интернет магазина, или планируете в скором времени его запустить?
Если вы юзабилити эксперт, проектировщик или как-то связаны оценкой и проектированием интерфейсов – это для Вас!
Я расскажу о роли количественной оценки в анализе сайтов, методе KPI, и о том как эффективно использовать аналитику юзабилити-эксперту.

«Деньги любят счет»
Введение:
Сегодня в этом докладе речь пойдет о том как количественно оценить успешность сайтов, и особенно сайтов e-commerce сайтов: интернет-магазинов, площадок.
Существует несколько вариантов оценки:
1) Юзабилити тестирование
Юзабилити-тестирование заключается в том, что пользователи работают с вашим продуктом (программой или веб-сайтом), а специалисты наблюдают за их поведением и идентифицируют возникающие проблемы.

2) Экспертная оценка
Экспертная оценка – это аналитическое выявление проблем пользовательского интерфейса, основанное на опыте экспертов, сравнительном анализе интерфейсов конкурирующих систем, сборе и обработке мнений пользователей.

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

Метод анализа задач основано на том, что эксперт будет выполнять реальные задачи пользователей, попутно задавая себе и отвечая на вопросы типа: как здесь ускорить работу пользователя, как здесь повысить удовлетворенность пользователя, и т.д.

3) Веб-аналитика
Веб-аналитика- это количественная оценка вашего проекта. Веб-аналитика позволяет нам ответить на вопрос: ЧТО не работает на сайте.
Преимущества:
1) Охват всех посетителей сайта
2) Охват всей функциональности сайта
3) Статистика повременная, по месяцам
4) Возможность отслеживать самому динамику посещения
Отслеживать сколько пользователей достигают целей: например заказ товара, покупка
Конечно лучше, получить комплексную оценку своего сайта: и пользователей потестировать, и узнать мнение эксперта и что самое важное уже сейчас самому оценить насколько ваш сайт успешен и требует нововведений, а также эффективность этих новшеств.

Цифры не врут, как говорится.
1. Метод KPI
Key performance indicaors, ключевые показатели производительности, -иными словами это ключевые метрики успешности вашего сайта.
Основная идея KPI- это взять техническую информацию, обработать ее и представить в простом понятном бизнес формате.
Следующие характеристики KPI:
1) Значение показателей всегда пролонгировано во времени
2) Цветовые индикаторы изменения показателей
3) Установка порогов и предупреждений
4) Советы по улучшений показателей

Ключевые индикаторы для e-commerce:

Уровень конверсии для заказов (Order Conversion Rate)
Формула = число заказов / число посещений

Средний доход с уникального посетителя (Average Revenue per Visitor)
Формула = общий доход сайта / число уникальных посетителей

Уровень конверсии в заказы для новых посетителей (New Visitor Conversion Rate)
Формула = число новых посетителей, сделавших заказ / число всех посетителей

Уровень конверсии в заказы для вернувшихся посетителей (Returning Visitor Conversion Rate)
Формула = число вернувшихся посетителей, сделавших заказ / число всех посетителей

Процент дохода сайт от клиентов, делающих заказ в первый раз
Формула = общий доход от новых посетителей / общий доход

Средняя стоимость посещения
Формула = сумма на маркетинговые затраты/ число посещений

И многие другие метрики, их порядка 100.

2. Детализированный анализ поведения пользователя
Интернет магазинов с каждым годом становится все больше и больше, ассортимент товаров на интернет площадках также становится шире. Поскольку интернет покупки в Беларуси еще слабо развиты, и на сайте зачастую размещаются телефоны и форма обратной связи, то возможность отследить сколько посетителей реально покупает товар слабее.
Возьмем, к примеру, интернет площадку migom.by.
Типовая интернет площадка, продающая в основном технику. На сайте есть регистрация, каталог товаров, телефоны продавцов.

Типичные задачи пользователя на таком сайте:
A. пользователь ищет товар
B. пользователь просматривает результаты поиска (каталог товаров)
C. пользователь просматривает детальное описание товара
D. пользователь оформляет заказ

Юзабилити– эксперт анализирует поведение пользователя и делает выводы о работе сайта.

Задачах юзабилити- эксперта. Требуется узнать:
1. как работает главная страница, куда с нее пользователь уходит
2. Как часто поиск товара оказывается успешным (как быстро человек находит искомый товар, и заказывает его)
3. Какие действия пользуются наибольшой популярностью на странице с каталогом товаров, а на странице с детальным описанием товара?
4. Сколько людей переходит к процессу оформления покупки, сколько отменяет заказ.
5. Как пользователи оформляют заказ, сколько доходит до последнего шага
6. Сколько пользователей оставляет отзывов о товаре, курьере
7. Как часто пользователи регистрируются на сайте, возвращаются на сайт.

Теперь о задачах владельца сайта. Требуется узнать:
1. Какие товары из каталога приносят больший доход, наиболее популярны
2. Общий доход от новых посетителей (Total Revenue from New Visitors)
3. Общий доход от возвращения посетителей (Total Revenue from Returning Visitors)
4. Уровень конверсии пользователя в покупателя(Buyer Conversion Rate)
5. Checkout Completion Rate (число реально совершенных заказов / число посетителей, которые начали оформление заказа)
6. Average Cost per Visit (средняя стоимость посещения)
7. Average Visits Prior to Conversion (среднее число посещений посетителем сайта до заказа)
8. И многие другие

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

Выводы для владельца сайтом.

Показатели с Jan 6, 2008 – Feb 5, 2008 по Dec 6, 2007 – Jan 5, 2008

Уровень конверсии для заказов 1,31% -> 1,57%

Это число находится в диапазоне от 2% до 5% для магазинов. Для migom.by мы наблюдаем очень низкий показатель, несмотря на то, что многие покупатели сразу звонят продавцу и не переходят к форме офомрления заказа. Его реально увеличить в 2-3 раза до 3-5% (при помощи редизайна интерфейса), что соответственно увеличит доход продавцов (и migom.by) в 2-3 раза.

«Cила», с которой первая для посетителя главная страница сайта заставляет людей оставаться на сайте и продолжить его просмотр 77,21%->76,64%
Виден некоторый рост по сравнению с новогодними праздниками. Вероятно, это связано с некоторыми изменениями на главной странице. Однако показатель по-прежнему остается низким – главная страница не «завлекает» людей на сайт. Низкий показатель связан не только с отсутствием привлекательного и доверительного дизайна, но и, возможно, с нецелевым трафиком.
Как видно, сейчас наблюдается спад из-за окончания новогодних праздников.

Cредний доход с уникального посетителя 0,09 -> 0,11
Как видно, сейчас наблюдается спад из-за окончания новогодних праздников.
Уровень конверсии в заказы для новых посетителей 0,76%->0,83%
Как видно чаще заказывают вернувшиеся посетители.
Отношение новых посетителей к вернувшимся 1,62->1,64
Для магазинов это число обычно находится в диапазоне от 2.00 до 3.00 (то есть новых посетителей в 2-3 раза больше чем вернувшихся). Для контент-сайтов – меньше 1.00. На migom.by отсутствует UGC (user generated content), поэтому число больше единицы (мало возвращающихся посетителей). На сайте, где пользователи генерят контент, это число буде на уровне 0.5 – 0.6 и меньше.

Среднее число посещений сайта одним посетителем 1,38 -> 1,39
Основная товарная группа migom.by – электроника, которая стоит недешево. Такие товары «сходу» не покупаются – требуется тщательный выбор. То есть посетитель, прежде чем заказать товар на сайте, должен просмотреть несколько продуктов, определиться с выбором. По этому показателю видно, что посетители так себя не ведут, так как заинтересованный в покупке товара посетитель будет приходить на сайт не один раз (процедура выбора – достаточно длительна по времени и чем дороже товар, тем она длительнее).

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

Рекомендации:
В целом можно констатировать, что сайт имеет проблемы, основные причины которых: «невкусный» и не вызывающий доверия дизайн, низкий уровень юзабилити.
Особо следует отметить низкий уровень лояльности (в среднем 1 пользователь посещает сайт 1,38 раз в месяц). Это связано с отстуствием сильных якорей на сайте, которые бы заставляли пользователя периодически заходить на сайт. Рекомендуется рассмотреть возможности для увеличения UGC (user generated content).
Для решения этих проблем рекомендуется:
1. Провести редизайн интерфейса сайта;
2. Создать эстетичный, аккуратный и, след-но, убеждающий дизайн;
3. Провести анализ рекламных кампаний сайта (выбрать наиболее целевые и сделать на них упор).

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

Нам в HumanoIT Group (в Минске) нужен специалист в области юзабилити.

Требования:
• навыки прототипирования (Axure или MS Visio или Adobe InDesign)
• умение проектировать визуально привлекательные прототипы
• понимание веб-технологий (их возможностей и ограничений)
• умение разговаривать с людьми и работать в команде
• системное мышление
• внимание к мелочам

Обязанности:
• Разработка прототипов пользовательского интерфейса
• Разработка документации на интерфейс

График работы свободный, З.П. по результатам собеседования. Подробная информация о компании HumanoIT Group – на сайте humanoit.ru

Ждем ваших резюме по адресу: a.sergeev<собака>humanoit<точка>ru

HTMLayout это единственный в своем роде (на сегодняшний день) встраиваемый (embeddable) HTML/CSS engine.

Вот парочка интерфейсов, сделанных на базе движка HTMLayout:

Никто не расскажет про HTMLayout лучше, чем сам автор. Поэтому предлагаю вам интервью с Андреем Федонюком, автором этого замечательного графического движка.

Часть 1: Размышлизмы о Web 2.0

Расскажи немного о себе: чем занимаешься, где работаешь?
Terra Informatica. Вот этим и занимаюсь, там и работаю. Есть еще несколько контрактов долгоиграющих с основными клиентами.

Terra Informatica – это твоя компания?
Да.

Что ты думаешь о Web 2.0: что для тебя Web 2.0 как для пользователя? Как для программиста?
Ну во-первых, никто толком не знает, что такое Web 2.0 :) Набор технологий и решений на уровне “хака” – это да. Для себя я классифициурую Web 2.0 как набор технологий, поддерживающих Occasionally Connected Web Applications.

Поясни пожалуйста термин Occasionally Connected Web Applications?
Это приложение, в которое заложена возможность работать offline. Т.е. Web 2.0 – это больше про десктоп приложения, чем про web собственно. Т.е. про использование web на desktop и наоборот – привнесение черт десктоп приложений на web приложения

Назови пожалуйста основные различия между сегодняшними desktop-приложениями и Web 2.0-приложениями?
Храненние данных. В принципе – это старая как мир разница между client-server и desktop приложениями. Web 2.0 пытается привнести “комфортность” desktop на web.

А если с точки зрения UI, какова на твой взгляд разница? (если пока не брать в расчет HTMLAyout)
Inductive UI versus Productive UI. Традиционно Web application это occasionally used application. Т.е. UI web application должен быть self descriptive – пользователь с улицы должен мочь сделать то, что ему нужно без всяких доков.

Например Norton Antivirus или Norton Intenet Security – это приложения “одной большой красной кнопки” – используются редко и их UI должен быть понятен интуитивно. Поэтому (в том числе) Symantec используют HTMLayout в своих продуктах.

Что ты понимаешь под inductive ui? Это визарды, ориентация на пользовательские задачи?
Да, inductive ui – это парадигма “шагов” (визард) – введи данные, нажми submit, перейди к следующему шагу.

AC (Александр Сергеев): Кстати, Дон Норман ввел такое понятие, как affordance – аналог self descriptive, например, ножницы – понятно, что пальцы просунуть надо в дырки :)

АФ (Андрей Федонюк): Да.

А под productive UI ты что имеешь в виду?
Inductive UI это web 1.0. Web 2.0 – это (в том числе) попытка сделать возможным productive UI в web. Productive UI – это приложения, которые используются каждый день. Для такого типа приложений характерны приемы минимизации затрат на достижение результата пользователем. Shortcuts, например, явный атрибут productive UI – toolbars и прочее там же.

Но это разделение Inductive/Productive все более размытее становится. Сложность приложений растет, поэтому даже такие приложения как MS Word используют wizards и ribbon.

А если мы спустимся ниже, на уровень контролов/виджетов – в чем ты видишь разницу между Web 2.0 и десктоп-приложениями?
Собственно widgets тоже стремятся к общему знаменателю. Web2 наборы widgets стремятся воспроизвести desktop и desktop наборы расширяются в сторону compоund web alike widgets.

Назови пожалуйста три основные технологии, на которых, на твой взгляд, основаны интерфейсы Web 2.0 приложений? Desktop-приложений?
Три основные технологии, на которых основаны интерфейсы Web 2.0 приложений:
1) AJAX (как lightweight способ посылки сообщений UI <-> модель данных – классическая фича десктоп приложений)

2) HTML/CSS как технология – склейка финального UI из компонент в единое целое. За этим много стоит на самом деле. Технология PHP/ASP и пр. как способ сборки UI. Это то, чего в desktop не было.

3) Ну и script и HTML event propagation schema, как способ функциональной связки разнородных элементов между собой. На самом деле такого в desktop UI (типизированные языки) не было.

АС: DOM еще забыли.
АФ: Да, DOM – это отдельная песня тоже.
АС: Мы с тобой одинаково смотрим на Web 2.0 с технической точки зрения, для меня Web 2.0 это – get, parse & display: получили данные (с сервера), распарсили/обработали их и отобразили.
Get – это ajax, parse – DHTML (HTML + DOM + Javascript), display – это CSS. На мой взгляд, благодаря этим вещам, мы можем теперь создавать rich user experience в Web 2.0-приложениях.
АФ: Технически и если копать до самых основ то это все как бы укладывается в парадигму CGI. Это основа образования UI в системах terminal-server. Терминалы просто становятся побогаче.
АС: Да, вот как раз в этом “просто” и заключено юзабилити и ориентация на пользователя :)

Чего не хватает на твой взгляд веб-приложениям, даже несмотря на веб-дванольность?
Немного издалека. Есть два типа пользователей в Интернет: “читатели” и “писатели”. Для читателей web 1.0 вполне себе достаточно и тех браузеров, что мы имеем – тоже. Вторая группа – “писатели” – (как role) – это те люди, которым нужна:

1. иная модель security,
2. иная модель использования (occasionally connected)
3. другие возможности взаимодействия объекты десктоп – объекты в браузере.

Например, Gmail хорош всем, за исключением того, что это – не desktop приложение :) – я хочу скачать письма и почитать их на досуге (when disconnected). Это как пример №2.

Элементарное действо: “save as” в любом word processor или e-mail клиенте. Броузер, в принципе, не позволяет ничего писать на клиенте. По соображениям security. И это – правильно для use case “читатель”.

По поводу №3: Clipboard как пример. Я хочу в свой блог вставить картинку, которую я только что нарисовал в Xara – не могу. Нужен другой клиент (UA – user agent).

Часть 2: Движок HTMLayout

Расскажи пожалуйста о библиотеке HTMLayout. Для чего она предназначена?
HTMLayout – это единственный в своем роде (на сегодняшний день) встраиваемый (embeddable) html/css engine. Встраиваемость – это принципиальный вопрос здесь:

1. Все операции, которые могут затронуть security, например, load remote resource, проходят через хост (нотификации и callback) т.е. host application управляет security policy. Это основная проблема при встраивании Gecko и Trident (IE).
2. Набор фич CSS расширен для поддержки двухмерных layout – модель html/css в web это бесконечная лента, имеющая фиксированной только ширину. В html и css 2.1 отсутствуют механизмы выравнивания содержимого по вертикали.
3. Все widgets сделаны из DOM-элементов – т.е. их компоненты стилируемы через CSS. Например, combobox это DOM-элемент и кнопка в нем (show popup) – это тоже DOM-элемент, у которого можно описать свой стиль (think of UI themes) и “повесить” некий дополнительный behavior.
4. Behaviors – как способ задания поведения конгломератов DOM элементов (a.k.a. controls). Behavior изменяет состояние DOM-элементов, а CSS это все отображает.
5. Sinking/bubbling event propagation схема, как простой и эффективный способ обработки событий.
6. Поддержка OS-themes как способ уважать предпочтения пользователя.

HTMLayout – это, грубо говоря, веб-браузер, который Windows-программист может встроить в свою программу и, таким образом, построить интерфейс программы на базе DHTML?

Можно сказать и так. Если грубо :)

Насколько я знаю, Motorolla использет его именно так. Они сделали специализированный intranet-browser на основе HTMLayout.

При этом вместо javascript для вывода и обработки виджетов (ака контролов) используется С++/C#?
Да, как способ описания действий используется язык, на котором написано host application. Есть имплементации на C++, C# , Ruby, Lua. Представь себе, что у тебя есть способ, скажем, расширять Mozilla различными UI элементами, нужными твоему приложению (<input> <widget> и т.д.).

Я подозреваю, что JS тебе не нужен будет в 95% случаев. Если у тебя есть нужный тебе набор компонент.

В windows-приложения, построенных на основе MFC/WTL, всегда были проблемы с ресайзингом – вручную приходилось масштабировать размеры контролов.

В Вебе я ни разу не видел резинового приложения, у которого бы автоматически, при ресайзе, окна браузера изменялся размер контролов (инпутов, комбобоксов и т.д.).

Решена ли эта проблема в HTMLayout? Какие средства есть в библиотеке для упрощения процедуры ресайза?
По поводу resize. Есть две проблемы: имплементация резинового layout – это да, решено и я думаю, такой гибкости нет ни в одном UI toolkit.

По поводу “конгруэнтого масштабирования UI” – потребность в этом, я думаю, не сильно велика.

“При ресайзе окна браузера изменялся размер контролов” – это можно сделать в HTMLayout, если нужно. Но, как правило, люди распахивают окно для увеличения рабочей области, а не для увеличения, скажем, размера шрифта.

Пример из немного другой оперы. В Symantec NIS (Norton Internet Security) есть поддержка high contrast mode. C помощью сугубо CSS:

@media scrren
{

и

@media high-contrast {
… css declarations…
}

Т.е. для поддержки accessibility не требуется перепрограммировать host application.

По поводу компонент в HTMLayout. Насколько я понимаю, в отличие от веба, где я работаю не с контролом, а с html-сниппетом контрола, в HTMLayout я заранее могу создать контрол, как-то его назвать и далее на этапе выполнения моего приложения – менять его состояние в зависимости от текущего события и данных?
Ты можешь написать в CSS:
input[ type="something" ] { behavior: some-behavior; }
а в HTML использовать
<input type=”something” />

Host application (твое приложение) должно предоставить имплементацию behavior, которая может делать что угодно – например создать вложенное DOM-tree и обрабатывать события от него. Один и тот же behavior может использоваться с разными стилевыми схемами образуя “визуально”-разные элементы контроля.

Собственно все input elements в HTMLayout так и сделаны – это просто набор behaviors, которые назначаются через master CSS разным DOM элементам.

Встроенные behaviors можно reuse:
<span class=myradio name=n1 /> <span class=myradio name=n1 /> <span class=myradio name=n1 />
+ css
{
span.myradio {
behavior: radio;
}
span.myradio:checked
{
background-image:….;
}

}
Соответственно, можно склеивать из простых кубиков сложные конструкции.

АС: То есть в данном случае, когда пользователь кликнет по радио-буттону, появиться фоновая картинка.
АФ: Да.
АС: И кроме того, вместо вывода простой радиокнопки, я могу вывести что-угодно? (не могу придумать пример что я могу там вывести :) )
АФ: Tabs как элемент контроля – это фактически набор radio buttons (закладки) плюс механизм binding этой группы на visibility набора панелей. Т.е. достаточно написать behavior, который, получив извещение BUTTON_CLICK от такой radio кнопки, поставит, скажем, атрибут current у соответствующей div-панели.

В CSS останется написать:

div.tab-panel { display:none; }
div.tab-panel[current] { display:block; }

Таких behavior patterns не так уж и много в живом приложении. Т.е. из простого образуется сложное. При этом CSS используется как клей, соединяющий состяние и представление в одно целое.
АС: Спасибо за детальный пример! Я-то изначально подумал ошибочно, что вместо behavior: radio; можно написать behavior: “что-то” и вместо радиокнопки в спане мы получим “что-то”, а тут скорее речь идет об изменении свойств объектов.
АФ: Да, основная задача behavior – это изменение атрибутов и состояния DOM-элементов в ответ на действия пользователя. В событии attach behavior может создать/изменить структуру DOM элемента (или его окружения), если это нужно конечно.
АС: То есть behavior позволяет

1. Сформировать код для контрола.
2. Управлять состоянием контрола.

АФ: Можно и так, и так. Иногда, например, требуется написать так:
input[type=radio] { behavior: radio my-something; }
т.е. каскад behaviors.

Приведи, пожалуйста, примеры приложений, которые используют HTMLayout?
Из тех, что на слуху – Symantec (Norton Antivirus, Norton NIS, Norton 360).

Все игрушки Alawar – там у них консоль есть, в которой используется HTMLayout:



Часть 3: Тенденции развития UI

Каковы сейчас, на твой взгляд, тенденции развития UI в десктопных приложениях?
Software vendors стремятся перейти на модель сервисов – т.е. пользователь платит за сервис регулярно, а не один раз. А вообще UI UIю рознь. Есть типичные desktop productive utilities, а есть, как я уже говорил, приложения большой красной кнопки.

Я бы не стал выделять здесь mainstream. Это вредно, к тому же как там у Кузьмы Пруткова: “Не всякому человеку даже гусарский мундир к лицу”.

А если посмотреть на прогресс в области контролов и средств разработки интерфейса? Он есть на твой взлгяд? Видишь ли ты какие-либо тенденции?
Есть тенденции стилистические и есть технологические.

Стилистические – “пиктографичность UI” и “гиперлинковость”.
Технологические – declarative UI – неизбывная мечта человечества.

Раньше, когда я занимался программированием, я разрабатывал интерфейсы при помощи редактора ресурсов Visual Studio. На разработку интерфейса у меня уходило очень много времени. Однаком и сейчас проектировщик интерфейса для UI должен учитывать сложность разработки UI программистом.
С точки зрения разработки я думаю, что ни одна из технологий не представляет какого-либо значительного преимущества в скорости создания “морды лица баз данных”. У VB можно быстро “накидать” форму в редакторе. Но дальше уже начинаются пляски с бубном. Как вклеивать формы одну в другую, как обрабатывать события в сложных конструкциях и т.д.

Веб, имхо, ушел здесь вперед – интерфейс удалось практически полностью отделить от бизнес-логики при помощи шаблонов и шаблонизаторов. В десктопе, насколько я знаю, дела обстоит намного хуже.
Да, и это тоже тендениция – шаблоны, генерация UI, CSS как сущность (стилирование существующего DOM). VB и MFC не расчитаны на стилирование элементов и сборку сложных конструкций из простых.

АС: Да, чтобы изменить стиль интерфейса и в VB и в MFC придется попотеть, чтобы обойти все properties и изменить свойства стиля. А в MFC еще и перекомпилировать придется проект. Чтобы разработать свой контрол, так вообще придется изучать ActiveX/COM технологии.

На мой взгляд, HTMLayout – это значительный шаг вперед в разделении внешнего вида приложения от его бизнес-логики. Дизайнер интерфейса (проектировщик) может разработать прототип в той же Axure (которая изначально заточена под web-приложения) и далее реализовать HTML-код, оформив его в виде шаблона, с которым уже дальше может работать программист (добавляя behaviors, переменные и прочее в шаблон).

HTMLayout, на мой взгляд, интегрирует преимущества “настольности” и веб-технологий.

АФ: В принципе да. К тому же какие-то свойства в VB и в MFC изменить в принципе невозможно. HTMLayout-интерфейс – это другой уровень возможностей.

Резиновость layout, например. Жесткий layout форм это то, что мешает масштабируемости UI. Controls в Windows диалогах, как правило, жестко приколочены к подложке. Ставим скажем 120dpi на экране и все – UI не читаем.

За резиновостью стоит еще accessibility – не все пользователи могут использовать UI на стандартных 96dpi.

HTMLayout способствует промышленной разработке софта – UI и логика становятся “слабо связанными”, т.е. возможно разделение на команды – UI дизайнеры и стилисты и люди backend, делающие логику.

Части 4 и 5
Мне кажется разумным оставить эти части для следующей статьи – уж слишком много букв получается, даже для блога Guicci :)

Что будет в следующей статье:

• Эстетика ПО и веб-приложений.
• MS Expression, XAML, Aurora.
• Анимация в HTMLayout.

Полезные ссылки

• Сайт компании Terra Informatica
• Библиотека HTMLayout
• Демонстрация возможностей библиотеки (demo applications). Инструкция:
  1. Скачайте архив.
  2. Распакуйте.
  3. Запустите bin/browse.exe.
  4. Кликните меню File/Open… и загружайте HTML-файлы из каталога html_samples/.
  5. Изучайте возможности движка на примерах.
• Форум на RSDN, посвященный обсуждению движка HTMLayout (автор библиотеки лично отвечает на вопросы пользователей в форуме, кроме этого там обитает множество энтузиастов, которые занимаются портированием HTMLayout’а под другие языки – Python, C#).
• Основы работы с HTMLayout (start-up guide на русском языке).
]]> http://guicci.ru/2007/10/28/htmlayout-web-20-prishel-na-desktop/feed/ 19 http://guicci.ru/2007/07/09/web-20-glazami-yuzabiliti-spetsialista-chast-2-atomarnyiy-kontrol/ http://guicci.ru/2007/07/09/web-20-glazami-yuzabiliti-spetsialista-chast-2-atomarnyiy-kontrol/#comments Mon, 09 Jul 2007 07:56:43 +0000 Александр Сергеев http://guicci.ru/2007/07/09/web-20-glazami-yuzabiliti-spetsialista-chast-2-atomarnyiy-kontrol/ прошлой статье я рассказал о технологии, на которой зиждется Web 2.0. Сегодня я хочу подняться на более высокий уровень абстракции и поговорить об интерфейсе, а точнее о контролах, из которых он состоит. Читать далее]]> В прошлой статье я рассказал о технологии, на которой зиждется 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 – приложения с богатым интерактивом, сочными цветами, но с нулевым юзабилити.

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

]]> http://guicci.ru/2007/07/09/web-20-glazami-yuzabiliti-spetsialista-chast-2-atomarnyiy-kontrol/feed/ 16 http://guicci.ru/2007/07/04/web-20-glazami-yuzabiliti-spetsialista-chast-1-tehnologiya/ http://guicci.ru/2007/07/04/web-20-glazami-yuzabiliti-spetsialista-chast-1-tehnologiya/#comments Wed, 04 Jul 2007 11:55:57 +0000 Александр Сергеев http://guicci.ru/2007/07/04/web-20-glazami-yuzabiliti-spetsialista-chast-1-tehnologiya/ Байнет 2.0, посвященная Web 2.0. Уже прошло 2 недели и я решил, что пора брать в руки перо и смотреть на Web 2.0 более конкретно и пристально - глазами юзабилити - специалиста, а не глазищами фаната научно-технической Интернет-революции. Читать далее]]> 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-приложения, которые я не упомянул в заметке? Тогда поделитесь информацией с другими, в комментариях. Спасибо!

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



]]> http://guicci.ru/2007/07/04/web-20-glazami-yuzabiliti-spetsialista-chast-1-tehnologiya/feed/ 3 http://guicci.ru/2007/05/30/multi-trogatelnyiy-interfeys-ot-microsoft-video/ http://guicci.ru/2007/05/30/multi-trogatelnyiy-interfeys-ot-microsoft-video/#comments Wed, 30 May 2007 19:26:32 +0000 Александр Сергеев http://guicci.ru/2007/05/30/multi-trogatelnyiy-interfeys-ot-microsoft-video/ Читать далее]]> После выхода Apple iPhone о multi-touch заговорили все и даже копи-пастеры из Microsoft.

“Софтверный гигант анонсировал сегодня на конференции D5 о создании нового multi-touch компьютера – кофейного столика, который изменит мир. Узнайте о секретной разработке вместе с PopularMechanics.com и забудьте о клавиатуре и мышке. Следующее поколение компьютеров будет ручным” – Microsoft Surface: Behind-the-Scenes First Look (with Video).

Вот это видео:


Судя по всему ребята из M$ прочитали дискуссию вокруг статьи Платона Днепровского о вертикальном multi-touch экране, в которой один из читателей (Туговиков Станислав) написал “руки не будут так сильно уставать если экран будет не вертикальным, а расположенным под углом 20-40 градусов – как чертежная доска например”, купили патент у автора технологии multi-touch и основателя Perceptive Pixel Джефферсона Хана и решили слегка видоизменить идею, наклонив экран. Так родился “кофейный столик”…

…И я сразу же представил как лет через 30 два русских мужыка из забытого богом русского селения после баньки, распаренные, садятся за “кофейный столик” и начинают играть… в домино :)

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

1. Perceptive Pixel (компания Джефферсона Хана, автора идеи multi-touch)
2. Интерфейсы будущего (статья на ленте gui.ru)
3. http://www.microsoft.com/surface/

ps. Спасибо за ссылку Диме Павлову.

]]> http://guicci.ru/2007/05/30/multi-trogatelnyiy-interfeys-ot-microsoft-video/feed/ 1 http://guicci.ru/2007/04/20/rapidshare-flickr-youtube-slideshare/ http://guicci.ru/2007/04/20/rapidshare-flickr-youtube-slideshare/#comments Fri, 20 Apr 2007 11:08:34 +0000 Александр Сергеев http://guicci.ru/2007/04/20/rapidshare-flickr-youtube-slideshare/ RapidShare), потом картинки (например, Flickr), потом видео (например, YouTube) и вот теперь - презентации... Читать далее]]> Краткая история веб2.0-приложений
Вначале были файлы (например, RapidShare), потом картинки (например, Flickr), потом видео (например, YouTube) и вот теперь – презентации.

Пример презентации


Функции и преимущества
Функции, которые я успел рассмотреть на SlideShare:

1. Поддержка PPT и PDF
2. Возможность запретить скачивание оригинального файла
3. Возможность комментировать каждый слайд
4. Ссылки в презентации – кликабельные
5. Удобная навигация по слайдам (поставьте мышку к правому краю, появиться курсор в форме руки)
6. Транскрипт презентации – собирается весь текст со всех слайдов
7. Максимальный объем одной презентации – 30 MB
8. Есть полноэкранный режим просмотра
9. А также все функции web2.0 приложения – тэги, коммьюнити (группы), поощрения авторам (добавить в избранное, дать “конфетку” и поднять рейтинг презентации), а также встраивание в блоги и любые другие сайты.

Все эти функции имхо дают такие возможности:

1. Экономия дискового пространства
2. Организация и поиск презентаций по заголовкам и по транскрипту
3. Обсуждение презентации
4. Реклама (за счет текста транскрипта, который может быть индексирован поисковыми роботами)
5. Защита авторских прав
6. Сопровождение видео-ролика с конференции или семинара презентацией (ну и ждем, конечно, интеграции :)

Для кого
На мой взгляд, SlideShare – просто идеальное решение для учебных организаций, профессиональных сообществ (например, для RusCHI) и евангелистов (см. пример того, как евангелист Иформационной Архитектуры Луиз Розенфельд использует SlideShare).

ps. Google объявила о начале работ по созданию аналогичного веб-приложения. И это будет логичным продолжением (завершением) а-ля офисных Google Docs & Spreadsheets.

]]> http://guicci.ru/2007/04/20/rapidshare-flickr-youtube-slideshare/feed/ 5 http://guicci.ru/2007/02/16/enso-mechta-dzhefa-raskina-voploschennaya-ego-syinom-nakonets-uvidela-svet/ http://guicci.ru/2007/02/16/enso-mechta-dzhefa-raskina-voploschennaya-ego-syinom-nakonets-uvidela-svet/#comments Fri, 16 Feb 2007 10:01:29 +0000 Александр Сергеев http://guicci.ru/2007/02/16/enso-mechta-dzhefa-raskina-voploschennaya-ego-syinom-nakonets-uvidela-svet/ Андрей Седельников сделал пост в ru_ucdesign коммьюнити под названием Enso. Первое коммерческое детище Раскина. В нем речь шла о программе Enso, которая должна была выйти в ближайшее время и сотрясти основы нашего общения с компьютером. И вот, это время пришло... Читать далее]]> Что такое Enso?
20 января Андрей Седельников сделал пост в ru_ucdesign коммьюнити под названием Enso. Первое коммерческое детище Раскина. В нем речь шла о программе Enso, которая должна была выйти в ближайшее время.

Что такое Enso? Это две программы, упрощающие жизнь пользователям PC: Enso Launcher & Enso Words. Enso Launcher – системная утилита, которая дает пользователю мгновенный доступ к программам, веб-сайтам, окнам, папкам и документам. Enso Words – утилита для проверки правописания и для работы с толковым словарем и словарем синонимов. Особенность Enso Words в том, что вы можете проверять текст или получать определение/синонимы слова в любом месте, где эти текст или слово можно выделить (в браузере, MS Word, MS Outlook, GMail).

Enso вышел в свет
Итак… барабанная дрожь сотрясает вашу клавиатуру… на днях компания сына Джефа Раскина Азы Раскина Humanized выпустила Enso Launcher и Enso Words в свет.

Я незамедлительно скачал и установил free trial (на 30 дней) Enso Launcher (программа стоит 19.95$):





Ну что тут можно сказать? В принципе я уже поделился своими мыслями по поводу этой эволюционной утилиты (там меня зовут humanoit). Однако то были мои предположения, ведь в руках этот продукт я еще не подержал. Тем не менее отказываться от своих предположений или делать поспешные выводы о программе я пока не собираюсь – всего один день опыта. Как говорится, поживем-увидим :)

Обрести привычку – значит перестать быть
Благодаря Enso Launcher я обнаружил у себя ужасную привычку и, надеюсь, избавлюсь от нее в скором будущем.

Суть в том, что я “повесил” вызов Enso Launcher на кнопку “Start”, которая находится справа от левой кнопки Ctrl (помните: где находится лево? там где большой палец ноги справа). Так вот, чтобы работать с утилитой, нужно нажать и удерживать нажатой эту ланч-кнопку (и при этом набирать команду – такой режим работы называется квази-режимом). НО, я работаю и за ноутом и за настольным PC. В ноуте у меня вторая кнопка справа от левого Ctrl – “Fn” и я использую этот Fn для выделения текста от текущего положения курсора и до начала/конца строки (Ctrl + Fn + Home/End). А в настольном PC, чтобы выделить текст, нужно нажать Ctrl + Home/End. Так вот, оказалось, что за PC (где я и поставил Enso Launcher) я делаю одно лишнее нажатие для выделения текста, а именно – я вхолостую жму на “Start”, который у меня второй справа от левого “Ctrl”, как раз на месте ноутбучного Fn (Ctrl + Start + Home/End). Как мне помог Enso Launcher? Очень просто: когда я выделяю текст, я по ошибке нажимаю на “Start” и ошибочно запускаю Enso Launcher. Вот такой вот диагност, этот чертов красавчик Enso Launcher :)

Текст: Александр Сергеев

]]> http://guicci.ru/2007/02/16/enso-mechta-dzhefa-raskina-voploschennaya-ego-syinom-nakonets-uvidela-svet/feed/ 16 http://guicci.ru/2007/01/29/yuzabiliti-i-borba-s-globalnyim-potepleniem/ http://guicci.ru/2007/01/29/yuzabiliti-i-borba-s-globalnyim-potepleniem/#comments Mon, 29 Jan 2007 09:02:50 +0000 Александр Сергеев http://guicci.ru/2007/01/29/yuzabiliti-i-borba-s-globalnyim-potepleniem/ Читать далее]]> В конце сентября 2006 года Toyota Motor Corporation анонсировала выпуск нового устройства – ECO Drive Indicator, призванного сократить выбросы CO2 в атмосферу. Эта новинка устанавливается на все машины, собираемые Тойотой для местного японского рынка и оборудованные автоматической коробкой передач.

Суть устройства – в более эффективном расходовании горючего и, следовательно, в сокращении вредных выбросов. Сверх-задача этого устройства, по мнению пиарщиков Тойоты, заключается в борьбе с глобальным потеплением :)

Интересно то, как работает это устройство: когда машина движется в оптимальном, с точки зрения экономии бензина, режиме, на приборной панели непрерывно горит зеленый индикатор. Тем самым автомобиль как бы дает водителю обратную связь и говорит – “спасибо, друг, за экономную езду”, поощряя его экономный стиль езды. Банан в чистом виде :) Кроме того, семантика зеленого света – “правильно, верно” – работает в данном случае на поощрение водителя.



Принцип обратной связи – один из основных принципов в юзабилити. Обратная связь дает пользователю очень важное чувство контроля над ситуацией. Например, во времена Internet Explorer 3/4 я пользовался медленным модемным соединением и в среднем я около минуты ждал пока страница полностью загрузиться. В браузере IE в статусной строке во время загрузки выводилось: “Loading page…”, а в браузере Opera выводился размер страницы в килобайтах, какой файл сейчас загружается, сколько уже картинок загружено и другая полезная информация. То есть браузер давал мне обратную связь и я был в курсе происходящего и, как следствие, контролировал ситуацию – я, например, видел, что страница загрузилась на 10% и у меня есть немного времени, чтобы почитать какую-нибудь уже открытую страницу или просмотреть почту. Кроме того, благодаря постоянной смене статусного текста, ожиданиt загрузки в Opera протекало намного быстрее, нежели в IE. Вот, кстати, истинная причина, почему я работал в Opere – совсем не потому, что я ненавидел компанию M$ :) Просто Opera обладал более человечным и юзабельным интерфейсом.

ps. Напоминаю, что обратная связь с блогом Guicci осуществляется через комментарии. Причем в связи с массовым нашествием роботов-спамеров, включена функция модерирования: прежде чем комментарий будет опубликован, мне нужно его просмотреть и убедиться в том, что его автор – homo sapiens, а не похотливый робот, рекламирующий сами знаете что :)

Текст: Александр Сергеев, HumanoIT Group
Анонс устройства: http://www.toyota.co.jp/en/news/06/0929.html

]]> http://guicci.ru/2007/01/29/yuzabiliti-i-borba-s-globalnyim-potepleniem/feed/ 7 http://guicci.ru/2007/01/05/photoshop-cs3-beta-novyiy-interfeys/ http://guicci.ru/2007/01/05/photoshop-cs3-beta-novyiy-interfeys/#comments Fri, 05 Jan 2007 09:50:14 +0000 Александр Сергеев http://guicci.ru/2007/01/05/photoshop-cs3-beta-novyiy-interfeys/ lynda.com (on-line библиотека учебных курсов) создал первый обучающий видео-курс по Photoshop CS3. В нем он на реальных примерах рассказывает о новых ключевых функциях и улучшениях в Photoshop. Меня заинтересовал ролик, в котором Deke показывает новые фишки в пользовательском интерфейсе Photoshop. Вот этот ролик...Читать далее]]> 14 декабря Adobe выпустил бета-версию Photoshop CS3.

Deke McClelland совместно с lynda.com (on-line библиотека учебных курсов) создал первый обучающий видео-курс по Photoshop CS3. В нем он на реальных примерах рассказывает о новых ключевых функциях и улучшениях в Photoshop.

Меня заинтересовал ролик, в котором Deke показывает новые фишки в пользовательском интерфейсе Photoshop. Вот этот ролик в сжатом виде:

А здесь этот же ролик, но в оригинальном разрешении.

Текст: Александр Сергеев

]]> http://guicci.ru/2007/01/05/photoshop-cs3-beta-novyiy-interfeys/feed/ 1