Если вы владелец интернет магазина, или планируете в скором времени его запустить?
Если вы юзабилити эксперт, проектировщик или как-то связаны оценкой и проектированием интерфейсов – это для Вас!
Я расскажу о роли количественной оценки в анализе сайтов, методе 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. Провести анализ рекламных кампаний сайта (выбрать наиболее целевые и сделать на них упор).

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

Текст доклада (без привязки к слайдам)
На графике вы видите число уникальных посетителей фото-сайтов. Журналист, который опубликовал этот график, задается вопросом: что произошло в сентябре 2008 года, что привело к резкому росту числа посетителей фото-приложения на facebook. А произошел редизайн. На главной странице профиля (куда вы попадаете при клике на профиль пользователя) появился тулбар с навигацией: стена (feed), информация (info), фото (photos).

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

Этот «гладкий» опыт взаимодействия является результатом множества крупных и мелких проектных решений о том, как сайт выглядит, как расположены элементы на странице, какие пункты находятся в глобальном меню, как он себе ведет, какие действия позволяет вам совершать. Вот эти решения как раз и формируют опыт взаимодействия.

Постепенно снимая слои этого опыта, мы сможем понять механику принятия таких решений.

Итак, слои, которые выделяет Джесс Гаррет.

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

Уровень компоновки
Компоновка находится под поверхностью страниц – это расположение меню, вкладок, блоков и прочих элементов сайта. Чтобы компоновка эффективно работала, она должна быть фиксированной. Благодаря правильной компоновке вы можете быстро найти нужную вам ссылку, например на корзину в интернет-магазине.

Уровень структуры
Структура задает направления движения пользователя по сайту. Например, глобальное меню может перенести вас в любой раздел сайта. Или контекстное меню страницы. Эти элементы являются частью структуры сайта.

Уровень набора возможностей
Структура позволяет организовать различные функции сайта в единое целое, а список функций как раз и образует уровень набора возможностей сайта.

Уровень стратегии
Стратегия целиком определяет набор возможностей сайта.
Стратегия включает в себя цели владельцев сайта, а также потребности пользователей.
В примере с онлайнером некоторые стратегические цели легко определить: продавцы хотят продать свой товар, а мы с вами хотим купить товар. А какие цели у онлайнера?

Правильно, онлайнер хочет заработать денег на аренде «площади».

Теперь я хочу перейти к определенному типу сайтов, а именно к социальным сетям.

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

Как и обычные сообщества, интернет-сообщества создаются с определенной целью.

Примеры таких целей:
1) Убить время (неосознаваемая цель)
2) Сформировать бренд компании или продукта (http://mobilkinofest.ru/)
3) Развитие лояльности к компании путем формирования клуба клиентов
4) Продвижение FCMG-продуктов (http://life-hak.ru)
5) Распространение и получение знаний, информации (habrahabr.ru)
6) Объединение людей для коллективного творчества (translated.by)
7) Помощь в поиске исполнителей/заказчиков (free-lance.ru, moikrug.ru)
8) Предоставить людям всю правду о компаниях (i-worker.ru)
9) Сделать музыку доступной всем, без посредников (last.fm)
10) Etc.

Итак, вы захотели разработать свою социальную сеть (или к вам обратились за помощью в разработке социальной сети). Как ее разрабатывать? С чего начинать?

А начинать разработку нужно с определения СТРАТЕГИИ. Без четкой стратегии вы рискуете сделать 101ую социальную сеть одновременно для всех и ни для кого, как, например, face.by, ludi.by, belorusy.by, parta.by, vseti.by, etc.

В первую очередь нужно ответить на два принципиальных вопроса:
1) Что хотим получить от нашего сайта мы
2) Что хотят получить от него наши пользователи

Ответ на первый вопрос позволит вам сформулировать цели сайта, а на второй – потребности пользователей.

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

Примеры более конкретных целей были описаны выше, например: Продвижение FCMG-продукта или формирование бренда компании.

Кстати, не будем забывать про пользу для владельцев сайта, то есть для бизнеса, про бизнес-модель. Каким образом сайт будет приносить доход: благодаря медийной или контекстной рекламе (habr.ru, koolinar.ru, etc.), на платных сервисах (linkedin.com, free-lance.ru) или за счет роста доходов компании, производящей FMCG-продукцию.

Далее, сайт мы делаем не для себя, а для пользователей. Поэтому, чтобы сайт понравился людям, необходимо детально выяснить кто наши пользователи и что им нужно. Я не буду здесь повторяться, мои коллеги уже рассказали о методах анализах. Приведу лишь список юзабилити-методов, которые как раз и нужны для исследования пользовательской аудитории:

1) Интервью
2) Опросы
3) Полевые исследования
4) Анализ деятельности
5) Юзабилити-тестирование
6) Персонажи
7) Маркетинговые исследования
8) Фокус-группы
9) Etc.

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

Подробнее см. книгу «Разработка требований к ПО. Практические приемы сбора требований и управления ими при разработке программного продукта» Карла И. Вигерса.

Пример реального положения об образе проекта: Для людей, которые хотят узнать все о компании, в которую они хотят устроиться, сайт «Работа!» станет единым источником информации в Рунете, где будут аккумулироваться как официальные сведения о компаниях и сотрудниках, так и неофициальные мнения, отзывы и слухи от людей, которые работали или продолжают работать в обсуждаемых компаниях и с обсуждаемыми людьми. Сайт «Работа!» станет местом встречи и общения профессионалов из различных отраслей и средством для профессионального, карьерного и личностного роста. В отличие от существующих социальных сетей (moikrug.ru, webby.ru), которые нужны для хранения контактной информации и поиска специалистов, сайт «Работа!» станет активным и динамичным сообществом благодаря активности своих пользователей, стремящихся к «утолению информационной жажды» (хочу знать все о компании) и желающих восстановить справедливость в отношениях между коллегами и компаниями.

Перед тем как перейти на следующий уровень, уровень набора возможностей, приведу типологию социальных сетей с точки зрения функциональности (автор: Ярослав Грешилов, lj user: yagr), а не стратегии.

1. Самопрезентация и общение
“Презентационно-коммуникационные” сайты. Классические блогохостинги и их различные вариации (livejournal, twitter, tumblr), целые личные «мини-сайты» (myspace, рамблер.планета). Реализуемая потребность: рассказывать о себе, находить новых знакомых и поддерживать общение с ними.

Потребности могут быть совершенно разными. Вряд ли dolboeb ищет новых знакомых или рассказывает о себе, а tema поддерживает общение со своими знакомыми.

2. Социальные сети
Проекты, основанные на принципе «Каждый человек знаком с любым другим через 6 рукопожатий». Ярчайшими примерами таких сетей являются facebook (клон — vkontakte), linkedin (клон — мойкруг) и classmates (клон — odnoklassniki). Реализуемая потребность: поддерживать связь с людьми.

Потребности могут быть опять же разными: найти музыку, посмотреть ню-фотки, etc.

3. Cоциальные контейнеры
Хранение различных данных и их презентация друг другу и интернету вообще. Это может быть видео (youtube, rutube), фотографии (flickr, photosight, яндекс.фотки), закладки (del.icio.us, memori), музыка (imeem) и любой другой тип контента. Реализуемая потребность: делиться с людьми фотографиями, находками, видео, музыкой, рисунками.

Опять же, потребности могут быть более конкретными: презентовать свое портфолио, найти фотографа на свадьбу и пр.

4. Социальные медиа
Возможность стать журналистом или источником новостей. Примеры: digg, newsland, smi2. Реализуемая потребность: делиться с людьми новостями и их осмыслением.

Потребности могут быть совершенно другими: пустить слух, пропиарить сайт, изменить восприятие бренда, «прокачать» профиль и др.

5. Рекомендательные сервисы
Рекомендации, выдаваемые на основе поиска людей со схожими вкусами (netflix, trustedopinion, imhonet). Реализуемая потребность: советовать, рекомендовать стоящие вещи и получать рекомендации.

6. Социальные базы данных
Это наполняемые «всем миром» различные хранилища информации. Wikipedia как хрестоматийный пример народной энциклопедии. Реализуемая потребность: совместно накапливать и создавать знания.

7. Социальные навигаторы
Это проекты, дающие возможность ориентирования в сфере за счет взаимодействия с другими людьми. Примерами являются киношный spout, книжный shelfari и музыкальный last.fm. Реализуемая потребность: помогать друг другу ориентироваться в мире идей, контента и вещей.

Это по сути те же рекомендательные сервисы.

И напоследок еще одна схема, в которой представлены основные функциональные элементы социальной сети (автор: Gene Smith):

1) Identity (идентичность) – требования для представления пользователя личности и индивидуальности (например, профиль, число связей с другими людьми, etc.)
2) Presence – требования для предоставления информации о том, находится ли пользователь в онлайне (статус пользователя в окне чата)
3) Отношения – требования, которые позволяют людям заводить контакты (например, френдование, поиск людей, приглашение друзей в сеть, etc.)
4) Общение – требования для общения пользователей на сайте (чат, форум, стена. etc.)
5) Сообщества – требования, которые позволяют людям объединяться в сообщества (создание сообщества, вступление в сообщество, фото/видео сообщества, etc.)
6) Репутация – требования, которые позволяют оценивать ценность пользователей согласно нормам, принятым в социальной сети
7) Совместный доступ – требования, позволяющие давать совместный доступ к некоторым данным (например, хостинг фото, видео, музыки, etc.)

Итак, пришла пора перейти от абстрактного вопроса: «Зачем мы делаем социальную сеть» к конкретному вопросу: «Что мы собираемся создать».

Все требования к социальной сети разбиты на группы (см. отчет “Social Networks Research Report” – http://tidbit.wildbit.com):

1) Привлечение новых пользователей на сайт
2) Установление взаимоотношений пользователей друг с другом
3) Генерация контента пользователями
4) Увеличение числа социальных контактов

1) Привлечение новых пользователей на сайт
a. Показываем пользователю его личную выгоду от регистрации на сайте (скриншот главной xing.com или moikrug.ru)
b. Даем возможность заглянуть «внутрь» социальной сети (скриншот списка пользователей в moikrug.ru, снять на видео moikrug.ru)
c. Тур по сайту (снять на видео xing.com)
d. Приглашаем и ищем знакомых и друзей (дать скриншот блока в профиле на facebook.com):
i. Возможность послать ссылку на контент другу
ii. Возможность послать прямую ссылку для регистрации на сайте (по icq, skype, etc.)
iii. Поиск тех, кто уже зарегистрирован в социальной сети, по контактам почты (снять на видео xing или facebook)
e. Показываем пользователю людей с похожими параметрами (скриншот главной моего профиля на moikrug.ru)

2) Установление взаимоотношений пользователей друг с другом
a. Профиль – основа социальной сети, позволяет человеку рассказать о себе
b. Не требуем заполнять все поля при регистрации (скриншот регистрации на moikrug.ru или xing.com или facebook.com)
c. Постоянно «просим» пользователя заполнить профиль (facebook: «заполните информацию о себе и загрузите фотографию, чтобы вашим друзьям было проще вас найти» или xing: «дополните свой профиль, и вас легче будет найти»).
d. Периодически (например, раз в год) просим пользователя проверять актуальность своего профиля
e. Чем более неформальна ваша социальная сеть, тем проще должна быть процедура добавления пользователя в друзья (например, в i-worker.ru, чтобы добавить пользователя в друзья, нужно совершить всего один клик). В более формальных сетях, например, в moikrug.ru нужно подтверждение пользователя.
f. Показываем число связей пользователя, чтобы другие могли оценить статус пользователя и решить, стоит ли связывать с участником сообщества.

3) Генерация контента пользователями
Без контента в сообществе будет нечего обсуждать, люди не смогут найти общие интересы, и отношения между людьми не будет развиваться. Поэтому нужно делать все, чтобы мотивировать пользователей на генерацию контента.
a. Нужно поощрять пользователей, которые пишут отзывы или мнения о, например, малоизвестных компаниях (например, на i-worker.ru, малоизвестная компания – та компания, которая имеет мало или ни одного отзыва). В качестве поощрения можно посылать e-mail с благодарностью
b. Дать возможность пользователю «заказать» или «попросить» отзыв о компании. Если другой пользователь увидит эту просьбу, он с большей вероятностью напишет свой отзыв (привести пример с moikrug.ru)
c. Стимулируйте флейм, так как люди любят поспорить (например, на i-worker.ru, каждый рейтинг топика зависит от числа комментариев)
d. Давайте пользователям обратную связь от его сообществ в виде рейтинга и числа просмотров его контента
e. Приводите в пример лидеров сообщества и показывайте их вклад в сообщества (число опубликованных топиков, etc.)
f. Показывайте число просмотров профиля другими пользователя
g. Модерируйте контент, дабы отбить охоту у спаммеров и троллей постить свои никчемные сообщения, а также, чтобы повысить качество контента
h. Посылайте уведомления на e-mail об ответе на комментарий пользователя, о комментариях к топику пользователя или на комментарии к топикам, на которые пользователь подписался

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

Этимология слова community – происходит от common (общее). Группа людей называется сообществом, если они имеют что-нибудь общее.

a. Общие интересы для неформальных сетей (разбивайте на секции, поиск людей со схожими интересами, группами интересов)
b. Совместный опыт (после события люди хотят обсудить его, обменяться мнениями, фотографиями, видеороликами). Исследования показывают, что жизнь воспоминаний длится от нескольких дней до недели.
c. Общее образование (садик, школа, вуз)
d. Фото, видео альбомы
e. Мои гости (вуаеризм)
f. Новые коллеги
g. Сообщества
h. Ссылки на объекты из топиков и комментов

В моём личном рейтинге книг по графическому дизайну далеко впереди находится великолепная книга американки Робин Уильямс под легкомысленным названием «Недизайнерская книга о дизайне» (вот положенная ссылка на Озон, но там её нет в продаже :( – впрочем, Яндекс выдаёт кучу ссылок на оцифрованную версию). В ней автор даёт понимание основных правил визуального дизайна, даёт практически полезные указания для дизайнера, да и любого человека, участвующего в создании визуальных коммуникаций.

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

В первой части книги автор на убедительных примерах показывает важность соблюдения четырёх золотых правил дизайна:

• приближённости;
• контраста;
• грамотного выравнивания;
• повторяемости.

Видеть, как плохие объекты в примерах превращаются автором в хорошие – уже удовольствие. Но главное – это умение передаётся читателю, а в дальнейшем только усиливается по мере перечитывания книги.

Вторая часть полностью посвящена основам шрифтовой композиции. То же самое, только для шрифтов. Надо сказать, что в том же издательстве вышла книжка того же автора под названием «Недизайнерская книга о шрифтах», где эта тема повторена и раскрыта более детально.

Что вы приобретаете? Даже не имея выраженных художественных способностей вы сможете создавать сносные информационные макеты. Для меня лично знакомство с простыми правилами книги означает то, что если раньше я мог оценить визуальный дизайн макета страницы или объявления на уровне «хорошо» или «худо», то теперь я с уверенностью могу рассказать почему «худо», и что и где нужно поправить, чтобы стало «хорошо». Само собой, это сделало процесс общения с дизайнерами-графиками намного более эффективным, повысив качество и убедительность моих замечаний. Если такой выигрыш не показался вам весомым, значит вам в самом деле незачем читать «Недизайнерскую книгу». Остальным весьма рекомендую, кто ещё не.

Мой экземпляр книги напечатан на неважной бумаге, зато книга отлично свёрстана и неплохо переведена – что сегодня, увы, не правило.

Пожалуйста, расскажите о своих любимых книгах по графическому дизайну в комментариях.

Веб-страница, которая имеет четкую визуальную иерархию (пример иерархии: заголовок страницы -> блок с главной новостью -> блок с другими новостями и т.д.), ускоряет работу пользователя, делает ее более комфортной, приятной и спокойной (порядок – синоним спокойствия – “все в порядке” :).

Сетка – это кости визуальной иерархии, а цвета, размер, контраст (см. статью Pro контраст), форма элементов и пр. – это ее плоть.

Далее я рассказываю о различных функциях сетки и делюсь с вами очень познавательной презентацией, которую я раскопал в Сети пару дней назад.

Сетка для гармонии
Я уже рассказывал про презентацию Влада Головача Из грязи в князи: Три правила дизайна элегантных интерфейсов, в которой он показывает как выполнение всего-лишь трех простых правил может сделать из г… интерфейса элегантную и аккуратную конфетку. Вот эти три правила:

1. Все размеры и все пропорции должны быть взаимосвязаны (благодаря сетке – см. презентацию ниже).
2. Заголовок экрана/страницы должен быть: а) визуально значимым и разборчивым; б) кратким и информативным.
3. Фон должен быть или белым или черным.

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

Сетка для порядка
На днях я нашел очень интересную презентацию Khoi Vinh (Subtraction.com) & Mark Boulton (MarkBoulton.co.uk), которую они представляли на конференции SXSW Interactive’2007.

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

Также вы можете послушать аудио-подкаст доклада.

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

Khoi Vinh & Mark Boulton рассмотрели в своем докладе основную функцию сетки:

The grid is the most vivid manifestation of the will to order in graphic design.

Сетка – наиболее наглядное проявление порядка в графическом дизайне.

Сетка нужна в первую очередь для того, чтобы создать порядок на странице и сформировать основу для построения визуальной иерархии, которая позволит пользователю “считывать” дизайн так же ясно и быстро, как мы почти инстинктивно считываем буквы в словах – слева-направо.

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

Порядок на странице – это основа для создания четкой визуальной иерархии, которая позволяет управлять вниманием пользователя и “вести” его по странице и сайту. Такое ненавязчивое содействие не только ускоряет работу пользователя, но и делает ее более комофортной и приятной.

См. также:

1. Pro контраст
2. GUI, изящным можешь ты не б., но аккуратным б. обязан
3. Подпороговое внимание

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

К сожалению, во многих случаях важность веб-дизайна недооценивается. Основной аргумент: на вкус и цвет товарищей нет. Однако тем не менее, мы можем легко определить откровенно некачественный дизайн. Критериев здесь множество: цветовая схема “фонит”, громоздкая композиция (layout), отсутствует четкая визуальная иерархия (много элементов на странице, но порядок просмотра не задан), элементы не выравнены, не используется группировка для сокращения числа воспринимаемых объектов и т.д.

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

Клуб любителей животных

Но если я вижу г… дизайн на сайте, продающем, например, софт, то я сразу же понимаю, что я напишу в первом абзаце экспертной оценки: дм/кг (но при этом я обязательно аргументирую свою критику дизайна, без эпитетов и на основе законов восприятия). И сделаю я это не потому, что дизайн мне “не нравится”, а потому, что дизайн может повлиять на уровень продаж. Почему “может” ? Просто потому, что дизайн – это один из множества факторов, наряду с удобством, контентом и пр.

Сайт российской shareware-компании

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

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

Дизайн как фактор доверия
В 2002 году группа специалистов (Sliced Bread Design, B.J. Fogg, Ph.D. (глава Стэнфордской лаборатории по каптологии) провели исследование под названием Experts vs. Online Consumers: A Comparative Credibility Study of Health and Finance Web Sites (Эксперты и потребители в on-line: сравнительное исследование вопросов доверия к веб-сайтам, предлагающим финансовые и медицинские услуги).

15 экспертов по медицине и финансам оценивали уровень доверия (по шкале от 1 до 10), который они испытывают по отношению к сайтам, связанным с их специализацией.

2,684 человека (потребители aka обыватели) оценивали уровень доверия к сайтам, которые выбирались случайным образом из пула сайтов (e-commerce, развлечение, финансы, медицина, новости, поисковые системы, спорт, путешествия, etc.). В общей сложности оценки получили 100 сайтов.

Участники эксперимента также давали текстовые комментарии, в которых описывали, что именно повлияло на уровень доверия к тому или иному сайту.

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

Для сравнения, лишь 16.4% комментария финансовых экспертов (и 7.6% экспертов по медицине) относились к дизайну сайтов.

Эксперты по медицине обращали внимание на имя компаниия (43.9%), источники информации, приводимой на сайта (25.8%) и на миссию компании (22.7%).

Финансовые эксперты чаще всего полагались при оценке доверия на объем представленной информации и ширину охвата предметной области (40.3%), миссию компании (35.8%) и на ошибки и неточности в контенте (29.9%).

Еще больше выводов вы можете найти в отчете о проведенном исследовании.

Выводы
Любой коммерческий сайт, также как и профессиональный продавец, должен начинать с установления доверительных отношений с потенциальным покупателем.

Благодаря приятному, симпатичному, аккуратному и элегантному дизайну, вы можете получить от посетителя кредит доверия, который, возможно, как раз и будет той последней каплей при принятии посетителем решения о покупке ваших товаров.

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

Ссылки по теме
Возможно вас также заинтересует:

• Исследование о доверии посетителей к сайтам (на котором основана эта статья)
• Статья о каптологии
• 10 рекомендаций о том, как поднять доверие посетителей к сайту

Задачи графического дизайна
У графического дизайна (веб-дизайна, дизайна приложений) есть две основные задачи:

1. Передача некой информации (желательно со смыслом) тому, кто этот дизайн воспринимает.
2. Эстетическое удовлетворение того, кто этот дизайн воспринимает.

Я утверждаю, что профессиональный юзабилити-специалист может и должен решать первую задачу и поэтому рассмотрю ее детально (aka напишу несколько заметок) на страницах блога Guicci.

Итак, прежде чем говорить про передачу информации, нужно разобраться с тем как мы ее воспринимаем и понимаем.

Далее, 3 факта (от общего к частному):

1. Все познается в сравнении.
2. Каждый человек воспринимает мир своеобразно, причем контрастно (”добрый”, потому что не “злой”, “злой”, потому что не “добрый”).
3. Контраст в графическом дизайне полезен не только для привлечения внимания, но и для передачи посетителю мета-информации о том, что является важным на данной странице или в данном окне (а это позволяет быстрее вопринимать основную информацию).

Факт 1. Pro Все познается в сравнении
Встречаются два мужика.
- Я машину купил.
- А какого цвета?
- Ну представь себе цвет красивого заходящего солнца. Представил?
- Представил.
- Вот и она такая, только зеленая.

Нет ничего абсолютного: нет абсолютного вакуума, нет абсолютно черного цвета, нет абсолютно безгрешного (пусть тот, кто безгрешен первым не ставит ссылку на блог guicci), нет абсолютно идеального юзабилити. Но: юзабилити Windows лучше, чем юзабилити KDE (в контексте), юзабилити moikrug.ru лучше, чем юзабилити odnoklassniki.ru (для некоторых задач), сайт президента России выше в выдаче результатов поиска по запросу “президент”, чем сайт президента Беларуси (на yandex.ru, но не на tut.by) – “Все познается в сравнении” (c) Козьма Прутков.

Факт 2. Pro Контраст в восприятии мира
Допустим, что двум компьютерщикам показали Microsoft Surface. Один воскликнул: “круто”, а другой “какой удобный, красивый и стильный дизайн”. Второй юзверь воспринял сразу 3 аспекта нового интерфейса, а первый? :)

В психологии существует мощная теория на этот счет, называется она – теория персональных конструктов и ее автором является Джорж Келли. Есть замечательное введение в эту теорию ( с картинками).

В двух словах ее суть в том, что у каждого из нас есть набор конструктов (конструкт, это пара антонимов или противополжных, для личности, понятий, например: “белый-черный”, “теплый-холодный”, “windows-linux”, “FAR-explorer”, “командная строка – GUI”), который формирует, образно говоря, “решетку” восприятия. Например я не противопоставляю Windows & Mac OS, а кто-то противопоставляет и это сильно сказывается на действительности, например, появляются такие статьи. То есть через эти конструкты мы не только воспринимаем мир, но и “создаем” окружающую нас действительность.

Факт 3. Pro Контраст в восприятии графического дизайна
Прежде чем включать свой мозг и обрабатывать информацию, наполняя ее смыслом согласно нашим персональным конструктам, мы сначала должны куда-то посмотреть и что-то там увидеть.

Возьмем для примера веб-страницу. Куда мы будем смотреть в первую очередь сразу после ее загрузки в браузер? На что-то большое (заголовок), что-то яркое (красный цвет), что-то необычное по форме. Но что значит “большой” заголовок? Сам по себе он конечно не является большим, он большой по сравнению с чем-то, с основным текстом, например. Красный цвет – привлекает внимание здесь, но вряд ли он будет привлекать внимание посетителя здесь. Курсив привлекает внимание, но если его очень много, то вряд ли вы привлечете внимание посетителя.

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

.

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

По поводу последнего – весьма показательный пример: Visual Studio, а именно – подсветка синтаксиса программы.

Давайте проследим эволюцию редактора Visual Studio IDE.

1. Visual Studio 6.0 (год выпуска – 1998)

Синим выделены new, void, if и else, то есть ключевые слова C++ и операторы.

2. Visual Studio 2005 (год выпуска – 2005)

Добавился коричневый цвет, которым отмечены строковые литералы (константы) – вот такой вот прогресс за 7 лет :) Хотя с другой стороны, надо же и плагинщикам дать подзаработать.

3. Visual Studio 6.0/2005 с плагином Visual Assist

Синим выделены не только ключевые слова C++ и операторы, но и типы. Коричневым цветом выделены функции и методы классов, а красным – макросы и значения перечислений.

Я думаю (и программисты наверняка подтвердят): редактор без подсветки синтаксиса, что программирование без хэлпа или браузер без кнопки “back” :) Убиццо…

И в заключение, сравните пожалуйста эти два сайта (попробуйте проследить, куда вы будете смотреть на страницах, в какой последовательности и какую при этом информацию вам будут сообщать; и кстати можете их не открывать, просто наведите вашу мышку на ссылки):

1) Сайт российской хостинг-компании Masterhost.
2) Сайт американской компании IXWebHosting.

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

После многочисленных теоритических дискуссий на тему удовлетворенности пользователя, инициированных Дмитрием Павловым в статье Миф о юзабилити (продолжение здесь), было очень приятно увидеть сугубо практическое руководство Владислава Головача под названием Из грязи в князи. Три правила дизайна элегантных интерфейсов, которое как раз и позволяет увеличить эту самую удовлетворенность на практике.

Три правила
В этой презентации Владислав рассказывает о трех правилах, применяя которые можно сделать элегантным любой интерфейс:
1) Все размеры и все пропорции должны быть взаимосвязаны.
2) Заголовок экрана/страницы должен быть: а) визуально значимым и разборчивым; б) кратким и информативным.
3) Фон должен быть или белым или черным (исключение – для книг или блога Guicci, ориентированных на продолжительное чтение :)

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

Элегантность + Аккуратность
Практически каждая экспертная оценка, которую я делаю, начинается со скриншота главного экрана программы или страницы сайта, где я при помощи красных, жирных линий отмечаю неточности с выравниванием и паузами. Далее я вставляю скриншот или ссылку на прототип, в котором тот же самый интерфейс перерисован с учетом Правила 1. В сопроводительный текст я обязательно включаю, причем несколько раз, слово неаккуратно, потому что считаю интерфейс, в котором нарушено Правило 1 неаккуратным и небрежным (а 2 правило, на мой взгляд, лежит в плоскости контента, а не визуального восприятия). Неэлегантно – это очень мягко сказано, куда как эффективнее по степени воздействия на заказчиков или на их программистов звучат слова неаккуратно или небрежно.

Давайте сравним:

АККУРАТНЫЙ лат. точный, верный; – вещь, тщательно, искусно и чисто обделанная;

Элегантный (франц. élégant), изящный, изысканный.

Элегантность для интерфейса, на мой взгляд, штука опциональная, необязательная, а вот аккуратность – must have. “Изящным можешь ты не быть, но аккуратным быть обязан”. И еще, когда я говорю или пишу “элегантно”, я обращаюсь к правому полушарию заказчика, к его чувствам, а когда я употребляю “аккуратно”, я бью по левому полушарию, по рассудку. А достучаться очень хочется, потому что нужно сделать продукт клиента чуточку более выгодным, за счет таких вот “мелочей”. И теперь, после презентации Владислава, я начну использовать “элегантность” вкупе с “аккуратностью”!

Почему интерфейсы получаются неаккуратными?
Владислав приводит следующие причины:

• При разработке интерфейсной графики думают прежде всего о красоте. Как уже упоминалось, красота редко является абсолютной (так, представления о красоте у увлеченных читателей альманаха Товары и цены редко соответствуют представлениям тех же дизайнеров). В результате, в погоне за выполнением призрачной программы-максимум, забывают о программе-минимум.
• Большинство интерфейсов все-таки разрабатываются вообще без участия дизайнера. Способность же программиста делать привлекательные интерфейсы сильно базируется на его культурном уровне, а этот уровень очень разный (я исхожу из предположения, возможно, неверному, что хорошему программисту не обязательно иметь высокий культурный уровень, но дизайнеру, чтобы стать таковым, его таки приходится набирать). Кроме того, программист не обязан думать о эстетике, ему бы баги выловить; т.е. спрашивать с них лишнего мне кажется непродуктивным.
• Существует устойчивое мнение, что интерфейсу вообще привлекательность не нужна, она, де, лишняя. Соответственно, о ней и не думают.

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

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

Вот и приходится начинать экспертную оценку со слов “неаккуратно” и “неэлегатно”.

Выводы
Презентация Владислава Головача содержит банальные, для грамотных дизайнеров, вещи. Но нацелена она не них, а на технарей (к коим отношу себя и я), чей глаз откалиброван по другой шкале :)

ps. Приношу извинения за сокращения, которые я сделал в заголовке заметки: это как раз тот случай, когда красота (заголовок в одну строку) берет верх над удобством.

Читайте в этой заметке о том, как можно избежать конфликтов, которые иногда возникают между юзабилистом и дизайнером.

Эстетика вещей
Потребность в эстетике одна из основных потребностей современного человека. Общество потребления, которое уже сформировалось на Западе и которое недавно начало зарождаться в России (но бурными темпами), способствует увеличению роли эстетики и красоты в нашей жизни.

Например, у меня есть телефон (Nokia 3111), меня он вполне устраивает: я могу позвонить/принять звонок и послать/принять SMS. Но вот на позапрошлой неделе Apple выпустил iPhone и я…захотел его – он стильный, красивый, функциональный. Мы предпочитаем покупать новые вещи, вместо того, чтобы пользоваться старыми, даже если последние имеют все необходимые нам функции.

Эстетика программ
Пользователь компьютера – член общества и его потребность в красивых и эстетичных вещах переносится и на программы, с которыми он работает. В Microsoft хорошо это чувствуют и поэтому продолжают выпускать новые версии ОС Windows, в которых основным новшеством обычно является дизайн, обложка, форма, а не функциональность. Однако, в конце прошлого года Microsoft приятно удивила весь мир открытием дизайн-центра. Microsoft, ни много ни мало, собирается “changing culture”, то есть изменить культуру пользователя, его опыт, который складывается из многих факторов: полезности (функциональности) и удобства (юзабилити) программы, ее эстетичности, привлекательности. Кстати, на Западе уже давно говорят о “user experience”, опыте пользователя, ведь это понятие шире, полнее и точнее, нежели слово “юзабилити” отражает суть взаимодействия человека и компьютера. И в центре этого подхода – пользователь, а не программа (вспомните определение юзабилити – это качество программы…).

Эстетика vs. логика
Как организован UCD (user centered design, дизайн, ориентированный на пользователя) процесс создания удобного интерфейса? Сначала юзабилист (аналитик) опрашивает пользователей будущей программы, узнает их потребности, их задачи, которые нужно и можно автоматизировать. После этого проектировщик взаимодействия создает прототип, на котором схематично изображает будущий интерфейс (на основе требований к интерфейсу, собранных аналитиком). Далее юзабилист пишет спецификацию (ТЗ) на интерфейс и вручает ее дизайнеру, который “одевает” прототип: создает графическую идею и композицию, подбирает цветовое решение. И вот после того, как дизайнер заканчивает свою работу и представляет ее на обозрение коллегам, юзабилист обычно оказывается в положении “ребенка, который нифига не понимает в великом творческом замысле дизайнера”, а дизайнер соответственно предстает в глазах юзабилиста “ребенком, который нифига не понимает в психологии пользователя”. Вот такой вот конфликт, причины которого кроются в разных картах реальности: у одного на карте нарисован “удобный” домик, а у другого “красивый” замок :)

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

Язык дизайна
Почему юзабилисту нужно учить язык дизайна?

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

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

Очень кстати на днях ко мне в руки попала замечательная книга “Дизайн и время” (Лакшми Бхаскаран), посвященная основным стилям и направлениям в искусстве XX-го века. В этой книжке подробно описаны все стили прошедшего века. Каждый стиль сопровождается подробным описанием его основных характеристик, что дает возможность неискушенным в дизайне людям (например, мне) различать эти стили между собой и находить их в окружающем мире. Кроме того, каждый стиль богато проиллюстрирован работами всемирно известных дизайнеров и архитекторов. В общем книга – просто блеск, ее просто приятно держать в руках :)

В принципе на этом можно было бы и поставить точку. Но если честно, так хочется, чтобы блог Guicci был стильным не только по форме, но и по содержанию… Поэтому я решил слегка наполнить его стильным контентом :)

Дверные ручки, краны… стулья!
В последнее время многие юзабилисты просто-таки свихнулись: все стали писать про юзабилити дверных ручек и кранов (например, здесь или здесь или вот тут) :))) Наверное это массовое заражение светлых умов произошло по вине одного из гуру юзабилити Дона Нормана, чью книжку “Дизайн повседневных вещей” недавно перевели на русский язык. Именно поэтому из всего многообразия предметов, чьи фотографии приводятся в книге “Дизайн и время”, я выбрал стулья. Заодно немного отвлечемся от ручек да краников, против которых я, конечно, ничего не имею :)

Итак, в ближайшее время выйдет заметка про первый стиль, коим у нас будет…щаз посмотрю… ага – Движение “Искусств и ремесел”.

Если вам нетерпиться посмотреть эти стулья все сразу, они здесь :) Правда вы не узнаете какой стул к какому стилю относиться :)

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

1. эффективность – пользователь может эффективно решать свои задачи
2. продуктивность – тратить на это минимум свои ресурсов
3. удовлетворенность – а вот здесь все очень нечетко и об этом собственно моя заметка

Первые два свойства вполне осязаемы, их можно достаточно просто измерить – для этого есть количественные методы и инструменты. А вот третье свойство, ложка дегтя в бочку меда, просто-таки снесло точку сборки многих юзабилистов и сподвигло их на бурные дискуссии здесь и здесь (большое спасибо Диме Павлову за разжигание этой темы!). Я, конечно, не мог пройти мимо и не вставить свои 5 копеек про удовлетворенность, а точнее про удовлетворенность пользователя от эстетики и красоты.

Satisfaction guaranteed
Есть такой анекдот у психологов:

Приходит как-то к психоаналитику клиент, снимает обувь, ложится на кушетку и замирает в нетерпеливом ожидании.
Доктор: Ну что ж, прошу Вас. Начнем с самого начала.
Клиент: Хорошо… В-н-а-ч-а-л-е я с-о-з-д-а-л З-е-м-л-ю

Мы конечно не на терапии, но я начну с основ.

Понятие удовлетворенности достаточно молодое, ведь до середины 20-го века в фокусе психологии были больные люди, отягченные каким-либо психологическим/психическим недугом. Лишь с приходом на сцену гуманистов (Фромм, Франкл, Перлз, Маслоу) психология стала пристально изучать здоровых людей. Зачем? Ну чтобы сделать нас более счастливыми :) А что такое счастливый человек? Этот тот, у которого есть все, что ему нужно (NB: здесь имеется в виду не только вещи!). А что нужно человеку? По версии мэтра позитивной психологии Абрахама Маслоу у человека есть следующие потребности (комплекс этих потребностей называется “пирамида Маслоу”):

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

В предыдущей заметке я пришел к выводу о том, что пользователь Сети уже стал человеком. Поэтому вполне логично, что и у него, как у любого нормального человека, иногда возникают некоторые потребности из списка.

Потребности пользователя deconstructed
Физиологическую потребность я политкорректно пропущу и пойду дальше, к безопасности. Пользователи, особенно программисты, частенько ассоциируют себя со своим компьютером (об этом кажется написано у Купера) и это видно, например, по следующим фразам: “пи-пи-пи, опять _у_меня_ синий экран” или “_меня_ опять завирусовали”. Поэтому безопасность пользователя – это по сути безопасность компьютера (вирусы, spyware, спам и т.д.). Идем дальше.

Принадлежность к группе. Ну, эту потребность сейчас легко удовлетворить – ЖЖ, LiveInternet, MoiKrug, форумы и т.д. Дальше.

Потребность в уважении. Очень интересно сделали на habrahabr.ru – там у каждого пользователя есть “карма”, которая имеет численное выражение. При этом любой пользователь может влиять на карму других членов сообщества (голосованием). По-большому счету, это тоже самое, что и рейтингование статьи, например, на форумах rsdn.ru. Так что потребность в уважении тоже уже можно удовлетворить в Интернет, написав интересную статью и получив за нее много очков в рейтинге или в “карме”. Далее.

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

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

Ну вот, как видно и в Интернет можно обрести счастье :)

Эстетика
Ни для кого не секрет, что Запад – это общество потребления. Причины? Развитая экономика, высокий уровень жизни и…потребность в красивых, эстетичных вещах. В России, и уж тем более в Беларуси, уровень жизни намного ниже, но потреблятством занимаются почти все, кроме разве что людей религиозных. Мы предпочитаем покупать новые вещи, вместо того чтобы потреблять и чинить старые. Эстетика продуктов ценится не меньше, чем их функциональность. Визуальные искусства играют все более главенствующие роли в нашей жизни: видео вместо книги, телевизор вместо радио, открытка с готовым текстом вместо письма, флеш вместо текста. Чем больше средств отображения, тем чаще мы видим картинку и тем сильнее на нас влияет визуальный код. Дизайн сейчас – это не только средство для придания объекту формы или описания его функций. Дизайн – это новый, самостоятельный язык. И его нужно хорошенько выучить, чтобы использовать с максимальной эффективностью. Причем я считаю, что сделать это нужно не только дизайнерам (они просто обязаны), но и юзабилистам, чей “язык” имеет много общего с языком дизайна. В словарь проектировщика интерфейсов наряду с традиционными понятиями юзабилити, должны попасть законы человеческого восприятия, колористики, композиции, в общем все то, что знает (или интуитивно чувствует) любой дизайнер.

Опыт пользователя
Говорим – юзабельная программа, подразумеваем – интерфейс продукта не мешает, а помогает пользователям решать свои задачи. Однако у любого интерфейса есть “лицо” или дизайн, который вносит свою ощутимую лепту в опыт пользователя. Так, например, существует весьма распространенное мнение о том, что чем лучше дизайн, тем он менее заметен, так как пользователь больше внимания уделяет своим задачам, не отвлекаясь на эстетику. Но дизайн, как и интерфейс, делается под задачу: где-то нужен “Девятый вал” Айвазовского, который трудно не заметить, а где-то нужен “Квадрат” Малевича, к которому мы уже давно привыкли из-за его простоты и распространности в городской архитектуре. Боюсь представить, что будет с программистом, который каждый день работает в Visual Studio 2003, интерфейс которой разукрашен в красный цвет, а в качестве фона редактора выбрана картина Сальвадора Дали Предчуствие Гражданской войны

Резюме
Юзабельная программа не только помогает пользователю эффективно решать задачи, но и удовлетворяет его потребность в красоте, гармонии и эстетике. Для того, чтобы создать такую программу, юзабилисту нужно владеть, хотя бы на теоретическом уровне, языком дизайна.

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