Tags: Юзабилити

Итак, юзабилити-аудит

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

Началось всё с того, что некто хабра-пользователь webprojects провел юзабилити-аудит сайта Хабрахабр.ру. В результате у него получился отчёт, вот пара фрагментов:









Прежде чем я начну делать разные общие выводы хочу сказать, что решение вебпроджектса дисэйблить кнопки, а при клике на них показывать плашку с объяснением причины дисэйбла — критинское, потому что многие на дисэйбленную кнопку вообще никогда не нажмут, потому что, вы не поверите, она, блять, ЗАДИСЭЙБЛЕННА. Чё на неё жать-то? Как бараны будут смотреть на неё и тупить, не зная что делать и кто виноват. Если не верите — вспомните случай, когда вы стояли перед открытой дверью, открытость которой не видна. Наверняка усердно звонили в звонок, ждали, а потом выходил хозяин двери и говорил: «Хули ты звонишь, дверь открыта.» Дык вот та дверь — это кнопка дисэйбленная.

Теперь к отчёту. Ой, то есть, простите, к юзабилити-аудиту (меня точно вырвет в конце от этого слова). Проглядев Хабр юзабилити-глазом автор нашел прилично говна. Правда можно было обойтись и без спец. глаза, все ребята и так знают, что сокрытие контролов весьма подозрительное решение. Ну тем не менее — нашел и хорошо. Нас в основном интересуют результаты.

Для того, чтобы двигаться далее нам еще надо вспомнить ТРИЗ. А именно ИКР и многоэкранную систему.
1. ИКР — это идиальное конечное решение. Для интерфейсов звучит так: интерфейса нет, его функция выполняется и все это нахаляву.

2. Описание многоэкранной системы пусть озвучит лично Генрих Саулович:

Задача 33
Есть катер, на котором поставлен абсолютный рекорд скорости. Он имеет идеальную форму, лучшие двигатели. Как установить новый рекорд, намного (на 100-200 км/ч) превысив имеющиеся
показатели?

Воображение обычного изобретателя послушно рисует существующий рекордный катер. Включается мысленный экран, на нем возникает четкое изображение. В этот исходный образ воображение начинает вносить различные изменения. Слабый изобретатель подолгу рассматривает каждый вариант, дело идет медленно. Варианты (даже десятый, пятнадцатый) лишь немногим отличаются от исходного образа. "Может быть, удлинить корпус? Придать корпусу более обтекаемую форму Поставить более мощный двигатель?..." Сильный изобретатель смелее перебирает варианты: на мысленном экране быстро сменяются рисунки, появляются необычные картинки. Вариант шестьдесят седьмой: "А если покрыть корабль чем-то вроде гепардовой шкуры: ведь не случайно же гепард бегает быстрее других сухопутных животных. Может быть, мех помогает сохранять плавность обтекания, не дает образоваться вихрям?" (Кстати, недавно советскому изобретателю Г.Н. Сутягину было выдано авторское свидетельство № 464716 на "поверхность, обтекаемую жидкостью или газом". В описании изобретения сказано: "... с целью снижения сопротивления трения... облицовка ее (поверхности) выполнена из искусственного меха, ворсистых тканей и т.п. материалов").

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


Иными словами, когда речь идет о дереве (системе), надо видеть лес (надсистему) и отдельные части дерева (корни, ствол, ветки, листья - подсистемы). Впрочем, этого мало - на каждом этапе необходимо видеть линию развития: прошлое, настоящее и будущее (рис. 8.). Что значит "видеть линию развития"? Вот одна из подсистем скоростного катера - корпус. Чем выше скорость, тем больше сопротивление внешней среды. И потому корпус стремится сжаться, уменьшиться. Идеальный корпус - когда корпуса вовсе нет... А двигатель, другая подсистема катера, наоборот, стремиться стать больше, мощнее. Дай ему волю, он заполнит весь корпус, а потом перерастет его, вырвется наружу. Борьба этих двух взаимопротиворечивых тенденций и определяет линию развития подсистем катера: корпус сжимается, суживается, становится все более "поджарым", а двигатели увеличиваются, растут, заполняя пустоту внутри корпуса.


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

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

Антикорабль не обязан держаться на воде. Следовательно, его можно до отказа заполнить "железом" - двигателями. Чем больше мощность двигателей, тем выше скорость. Но антикорабль с его прекрасными сверхмощными двигателями камнем пойдет на дно... Впрочем, при движении он будет держаться за счет подъемной силы, создаваемой подводными крыльями. А на стоянке можно использовать "поплавки" - дополнительные надувные емкости. На стоянке наш антикорабль подобно обычному кораблю (и дирижаблю) будет держаться на плаву по закону Архимеда. А разогнавшись и подняв корпус над водой, антикорабль "сожмется" - уберет ненужные теперь дополнительные емкости (дирижабль станет самолетом).

Идея антикорабля уже не кажется такой дикой. Наоборот, странной представляется обычная конструкция, у которой поднятый над водой корпус сохраняет большой объем, нужный лишь в воде...

В 1911 г. была создана камера Вильсона - один из основных инструментов ядерной физики. Заряженные частицы, двигаясь в перенасыщенном водяном паре, заполняющем камеру, становились видимыми, образовывали след из капелек жидкости. Были предложены тысячи усовершенствований камеры Вильсона. Но почти полвека никому не приходила в голову идея "антикамеры", в которой след образовывался бы пузырьками газа в жидкой среде. В 1960 г. Д. Глезер получил Нобелевскую премию за создание пузырьковой камеры...

Вернемся к экранам талантливого мышления. Три этажа, девять экранов, изображения и антиизображения - это все-таки предельно упрощенная схема. Настоящее талантливое мышление имеет много этажей вверх от системы (надсистема - наднадсистема - ...) и много этажей вниз системы (подсистема - подподсистема - ...). За деревом надо видеть не только лес, но и биосферу вообще, и не только лист, но и клетку листа. Много экранов должно быть влево от системы (недавнее прошлое, далекое прошлое...) и вправо от нее (близкое будущее, далекое будущее...). Изображение на экранах становится то большим, то маленьким, действие то замедляется, то ускоряется...

Сложно? Да, сложно. Мир, в котором мы живем, устроен сложно. И если мы хотим его познавать и преобразовывать, наше мышление должно правильно отражать этот мир. Сложному, динамическому, диалектически развивающемуся миру должна соответствовать в нашем сознании его полная модель - сложная, динамичная, диалектически развивающаяся.

Зеркало, отражающее образ мира, должно быть большим и многогранным. Как на картинах Чюрлёниса.

Пожалуй, ни у какого другого художника нет столь сильного "системного видения" мира. Во многих картинах Чюрлёниса на одном полотне даны не только "изображаемая система", но и ее "подсистемы" и "надсистема", в которую входит "система". В "Сонате моря" (аллегро) одновременно три разных масштаба. С высоты птичьего полета изображены прибрежные холмы. Но волны нарисованы в ином масштабе; они показаны глазами человека, стоящего на мелководье: сквозь воду видна игра света и теней на песчаном дне, видны силуэты рыб. И тут же еще один масштаб, совсем крупный - для "подсистем": капли и пузырьки воздуха увидены почти вплотную...

Читатель вправе спросить: речь, следовательно, идет уже не о талантливом, а о гениальном мышлении? Да, это так. Более того, даже у гениев такое мышление бывает далеко не каждый день. В сущности, "полная экранная схема" показывает мышление гения в его звездные часы, весьма нечастые и в жизни великих мыслителей и художников. " Полная схема" - это ИКР, а приближение к этому идеалу - АРИЗ. Нетрудно заметить, что АРИЗ представляет собой линейную развертку "полной схемы" плюс информационное обеспечение, позволяющее "рисовать" требуемые схемой "изображения"".

 
Альтшуллер Г. С., Творчество как точная наука, М., "Советское радио", 1979 г., с. 66-70.

То есть хорошее решение может быть найдено не только в текущей системе, но и в надсистеме и в подсистеме. Но юзабилити-аудитор не знает об ИКР и многоэкранной системы. Он нашел проблемы и пытается сделать, чтобы их не было. Но ищет ответы только в одном «экране» — в текущей системе. Он не понимает, куда надо двигаться: Не понятно где кнопка? Вот вам кнопка. Не понятно, чего это она задисэйблена — покажем нашу стандартную красную плашку. Типа стало понятно и хорошо. Но ведь это не ИКР. Наоборот, все стало хуже, добавилась кнопка, добавилось сообщение. Интерфейс стал сложнее.

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

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

Халявные решения всегда находятся подрукой. Если решения нет в системе, значит есть в над- или подсистеме. Кнопка «Откликнуться на вакансию» и красное сообщение являются частью системы ответа на вакансию. Ну уже понятно, да?

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

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

Вот быстрая нарезка из скриншотов:




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

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

Аудит юзабилити

Всем нужно очень внимательно ознакомится с юзабилити-аудитом (такого юзабилити-чего-то я еще не слышал, кстати)  сайта Хабрахабр, опубликованным на сайте Хабрахабр.
habrahabr.ru/company/webprojects/blog/123351/

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







Завтра расскажу подробнее почему он важен.

Где что должно быть на вебсайте

Ооо,  прислали ссылку на супер пост про супер исследование.

http://community.livejournal.com/ru_ucdesign/485774.html

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

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


Разберемся поподробнее.

Пост называется «Где что должно быть на вебсайте».

Бубух. Название говорит о том, что ниже нам предложат решение вопроса размещения элементов для всех веб-сайтов («веб-сайты» пишутся через дефис) в мире. Понятно, что дальше можно не читать, так как решение по своей сути не может существовать до задачи, а задач никаких не предлагается.

Но я почитал.


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

Ну бывает.


Переубедить оппонентов-ламеров разумными словами обычно бывает невозможно, поэтому юзабилити-специалисты время от времени проводят экспериментальные исследования на тему «Где юзеры ожидают увидеть те или иные вещи на вебстраницах?». Результаты таких исследований помогают юзабилити-специалистам аргументировать свои правильные решения.

Во, вся правда раскрыта. То есть все вокруг ламеры (я лично считаю, что ламер — это человек, который называет так других) и ничего не понимают. И бедным «юзабилити-специалистам» приходится придумывать исследования, чтобы уболтать этих идиотов.

Это же как нужно объяснять и какой уровень недоверия должен быть по отношению к «юзабилити-специалистам», что для убеждения нужно проводить целое исследование?



Существует достаточно много работ подобного рода (из того, что лежит в свободном доступе: например, Bernard 2001, Shaikh & Lenz 2006). Проблема тут однако в том, что ожидания юзеров изменяются с течением времени и соответственно текущим тенденциям и веяниям в дизайне сайтов. Поэтому было отрадно увидеть совершенно свежую (март 2010) статью уже знакомой нам группы швейцарских психологов: Roth S. P., Schmutz P., Pauwels S. L., Bargas-Avila J. A., Opwis K. (2010) Mental models for web objects: Where do users expect to find the most frequent objects in online shops, news portals, and company web pages?, Interacting with Computers 22 (2), 140-152 @ ScienceDirect
Жирное выделение — моё.

Хочется только материться. Ничего себе, то есть существуют некие веяния, которые «дуют» то и дело на пользователей и те изменяют свои ожидания. Это же надо такое в голове держать.

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

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

Так что, если все вдруг станут делать логин в подвале, то очень скоро именно там его и станут ожидать увидеть пользователи.


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

Это, а кто определяет что модно, а что нет?



В исследовании приняли участие 516 юзеров (334 женщины и 179 мужчин), которые с помощью специального приложения вручную (мышью) конструировали прототипы предложенных им трёх сайтов: магазина, новостного портала и корпоративного сайта. Результаты можно посмотреть на картинках.

Завершается пост ссылкой на оригинал, что похвально.

http://www.sciencedirect.com/science/article/B6V0D-4XP37S2-1/2/220d3dbd5d8a79efbebd2f28d11025eb

Вот только оригинал стоит 30 долларов, так что прочесть его, вот отличие от этой «чудной» выжимки смогут единицы.


Само исследование, нужно сказать, наверняка очень грамотное и полезное, так как авторы четко понимают что: This knowledge could be used to improve the perception and usability of websites.


Итого
Не существует и не может существовать никаких правил, говорящих о том, что где должно стоять.

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

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

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

Юзабилити — это способ

«Юзабилити — это способ сделать сложные и запутанные вещи простыми и понятными.»

http://pajasu.com/lj/webster/

---
Представляю диалог:

— Папа, моя работа для детской выставки слишком сложная и запутанная :'(
— Это не беда, сынок, просто используй немного юзабилити!