Конспект ‘Умного дизайна’ Джеффа Джонсона

1005463068

             В книге приведены интереснейшие особенности нашего мозга, из которых сделаны выводы для психологичного ux-дизайна. Некоторые выводы известны еще с 76 года от отцов-основателей юзабилити, но Джонсон подвел под ними физиологическую доказательную базу, которую я как обычно выжал и замешал со своими мыслями и примерами. Спасибо школе http://uxcool.ru за предоставленную книгу.

На поведение влияют опыт, контекст и цели

— Опыт (прошлое). Здесь Вы, допустим, увидите девушку, а когда Вам скажут про старуху, начнете видеть старуху. На одну статью про вакцины будут либо уповать, либо плеваться — в зависимости от того, пострадал или вылечился кто-то из знакомых.  Если в магазине разместить в правом верхнем углу не привычную корзину, а, скажем, пустое место с надписью «пустое место», то туда все равно будут кликать, чтобы попасть в корзину.

— Контекст (настоящее). Одна и та же голая девушка на обложке журнала и на улице вызовет у нас совершенно разные ощущения.

— Цели (будущее). Если на сайт пришли купить чугунный казан, все остальное на сайте просто Не заметят. Вот почему баннеры нужно таргетировать, иначе это просто разноцветный шум. Это как на шумной вечеринке — говорят все одновременно, но слышим мы только кого-то одного. Правда, дети способны легко переключаться со своей цели на другую, поэтому детский магазин для них такая проблема. Раскин писал об этом как «локусе внимания».

Мы воспринимаем только фигуры

Наше зрение воспринимает не отдельные линии, а готовые формы (Gestalt по-немецки), поэтому следующие принципы можно назвать гештальт-принципами:

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

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

— Если мы видим что-то сложнее, чем квадратик или кружок, наш великий мозг не может этого пережить и все равно разбивает изображение на простые фигуры.

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

Чтение вообще противоестественно

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

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

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

По той же причине не изголяйтесь в тексте с креативными шрифтами. Вам хватит лучших — Verdana, Arial или Tahomа 10-12 пт., или покрасивее, но все еще читаемый — Open Sans. Не пишите капсом. Мельчите только в информации, которую Вы обязаны разместить, но не хотите утруждать ей посетителей — так они ее не заметят. Про шрифты у меня есть пара советов.

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

Текст: вырезаем лобзиком

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

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

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

Объединяйте повторяющиеся фразы в одну группу. Например, «человек-паук, человек-амфибия и человек-сосед» представьте так:
Человеки:
— паук
— амфибия
сосед.

Числа нужно всегда логически разбивать на мелкие кусочки типа 8 (495) 235-23-12 или 4276 3800 1221 3412. Поля для их введения — тоже.

В каких цветах лучше выполнять элементы на сайте

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

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

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

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

Помним, что на разных мониторах и в случае ЖК, под разным углом цвета выглядят по-разному — тестируйте на нескольких.

В идеале нужно отличать элементы не только цветом, а, например, их формой или некой иконкой на них.

Что и чем видит пользователь?

В центре нашего обзора на сетчатке находится «ямка» — (кружок примерно 1-2 см на экране монитора). Этот 1% сетчатки задействует 50% зрительной зоны в мозгу и по разрешению точек на дюйм (несколько тысяч) с ней не может сравниться ни одна видеокамера. По бокам от ямки, то есть, при боковом зрении разрешение падает до десятков точек. А совсем на периферии различить какую-нибудь букву мы сможем, только если она будет размером с арбуз. При этом, нам кажется, что мы видим одновременно много больше, чем точку, да? Это потому, что мы двигаем зрачками 3 раза в секунду, а остальную картину, на которую мы не смотрим, мозг дорисовывает по памяти, хотя и очень грубо, ведь детали всегда можно быстро снова оглядеть глазами.

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

Кстати, зачем нам вообще периферическое зрение? А оно сигнализирует ямке, на что посмотреть. Она увидит красное пятно и через полсекунды ямка уже будет на нужном нам красном седане на auto.ru. Узнаваемые формы также пригождаются на сайте — например, красный знак STOP мы и периферическим зрением узреем.

Особенно хорошо это зрение ловит движение (ведь это может быть еда или то, что считает едой нас), так что товар, анимированно летящий в корзину, на которую еще и опускается яркий тултип «1 товар добавлен в корзину» – это то, что надо, чтобы клиент эту корзину никогда не потерял (плюс еще можно «потрясти» ей через 30 секунд, и еще через 3 минуты). Но если мы точно не ожидаем ничего интересного в данной точке, например, в баннерной зоне, то там хоть Лавров обтанцуйся, смотреть не будут.

Чтобы поймать верную зону для выведения некоего сообщения, следует помнить, что в западном обществе люди идут по сайту с левого верхнего угла по диагонали, смотрят в точку курсора (либо сразу туда, куда ведут его), а когда нажали некую кнопку или ссылку, довольно долго смотрят на нее («ух ты, нажалось!..»). Например, если при нажатии на кнопку «Зарегистрироваться» нужно вывести важное сообщение типа «Вы не ввели отчество бабушки», то оно должно выйти либо рядом с этой кнопкой, либо появиться ну очень заметно – анимированно и ярко. Но лучше выводить ошибку сразу при окончании заполнения конкретного поля, не дожидаясь, пока он уведет взгляд.

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

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

Что и чем помнит пользователь?

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

Так вот память – это когда при повторном появлении в нашей жизни раздражителя (снова собака в шкафу ночью) активизируется группа тех самых нейронов, которые тогда бегали по мозгу в панике. Они уже шуганые, ждали повторения всю жизнь и с истерическим криком — «мы же всем говорили, а мне никто не верил! Эй, народ, кто помнит ту ночь, все сюда!» выстраиваются в тот же самый шаблон, и мы узнаем ситуацию. И чем чаще у Вас в шкафу лаёт собака (даже если вы его выкинули из окна), тем быстрее дерганые нейроны будут узнавать ситуацию.

Также мы можем не узнать, а именно вспомнить, когда видим лишь часть характеристик той ночи:  просто лай, просто видим похожий шкаф, чуем запах жареного лука из квартиры соседа, как в Тот момент). Шаблон при этом тоже старается собраться в том же составе: «- Эй, нейрон, помнишь, я к тебе про собаку подходил? Так вот, что-то там опять неладно — очень подозрительный набор сигналов пришёл…».

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

А вот краткосрочная память, когда мы помним что-то в течение нескольких секунд — по сути, не память. Это просто отзвук от только что произошедших событий и, главное — фокус внимания, то есть, о чем мы сейчас думаем. Это понятие также называют «рабочая память», а кому-то понравится «оперативная». В краткосрочной памяти по исследованиям 52 года мы можем держать 7 несвязанных образов +/- 2. Это подходит к любым элементам, хоть к запахам. Почему несвязанных — потому что связанные образы мы воспринимаем как один. Например, чай с плюшками (уже 2 элемента) на кофебрейке на конференции включает в себя еще и пластиковые стаканчики, но необходимости держать каждый элемент в голове отдельно нет – элементы связаны. Или товары на странице раздела связаны некой характеристикой, например, типом. Так вот в 75 году опровергли это правило 7 +-2, так как в экспериментах 52 года все же часть образов были связаны, и ограничили количество до 4 +/-1. А в 2004-2008 вообще усомнились, что можно считать краткосрочную память в образах, и вывели, что оценивать лучше в количестве характеристик элементов, а то слишком многое от контекста зависит. Возвращаясь к сути краткосрочной памяти: когда при повреждении мозга человек начинает забывать, что он только что делал — это повредилось не некое хранилище, а обычная способность мозга фокусировать внимание.

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

Пользователь не помнит ни-че-го

Есть понятие «слепота к изменениям». Если нам не важен объект сравнения, мы вообще его не запоминаем. Допустим, если нам последовательно показать картинки с различиями, то мы заметим хорошо, если одно отличие. Был интересный эксперимент: турист спрашивал дорогу у местного, тот его вел куда-то, потом туриста хитро подменяли на другого, порой даже вообще непохожего, и вопросов у провожатого это не вызывало, даже когда как-то заменили мужчину на женщину. Так что не надейтесь, что несущественные изменения дизайна Вашего сайта что-то изменят. Скорее всего, ничего, даже если у Вас большой процент повторных посетителей.

То, что мы всегда ищем глазами только то, что нам нужно, а всего остального напросвет не видим, называется “идти к цели по информационному следу”. Если кто-то ищет “Что делать, если я шампунь” (да, это реальный запрос), то его внимание будет цеплять только слово “шампунь”. Если Ваш сайт заточен под гуглящих шампуней, то на посадочной странице необходимо хорошо выделить это ключевое слово в заголовке страницы с четким указанием, куда и что: “Шампуни — слушайте сюда!”, иначе уйдет, и узнает всю правду на другом сайте.

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

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

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

Объем нашей оперативки (внимания, краткосрочной памяти) крайне ограничен. Поэтому нельзя переключать пользователя от его цели на инструменты, которые этой цели помогают. Они не должны на себя отвлекать ни процента внимания, даже если вам кажется, что пользователь оценит Вашу неоновую кнопку с танцующей собачкой. Оценит, только про конверсию забудьте, как и он забудет, что делал. Как говаривал Стив Круг «Если Ваш сайт заставляет меня думать о нем, а не о том, что я пытаюсь сделать, то я не ваш клиент». Делаю вывод, что красота интерфейса и креатив с одной стороны, и UX с другой — понятия полярные, лишь иногда пересекающиеся своими окружностями.

Помогайте понять, на какой стадии на пути к цели пользователь находится, и сколько их всего. Держите перед его глазами этот путь, чтобы не заблудился. Обычно это визуализируют горизонтально — некий индикатор прогресса с контрольными точками, помеченные цветом или значками как «умничка-выполненные» или «ай-ай-ай-еще-невыполненные»). Например, на gosuslugi я, делая загран и постоянно закрывая с ужасом табличку заполнения мест моей работы, через пару дней открывая снова, всегда точно знал, где нахожусь, и что все, что я ввел в предыдущих шагах, сохранено. Ну, и “хлебные крошки”, само собой, должны быть очень понятными.

Самая короткая дорога – знакомая дорога. Если Вы знаете, что Ваш пользователь привык для достижения цели нажимать 7 кнопок, а Вы придумали, как жать всего 2, НО ему будет нужно 1 раз подумать… То подумайте 10 раз и не переучивайте никого. Уйдут ведь. Просто аккуратно намекните, что есть и умный вариант. Кстати, у меня знакомая рисовала неплохие баннеры в… Power Point.

Все, что мы делаем, проходит по циклу «цель-выполнение-оценка». Допустим, клиент хочет купить ванну (цель), платит клиент картой на сайте (выполнение), смотрит на странице подтверждения (оценка) — а там на него смотрит ошибка. Так вот у нас клиент 15 раз пытался оплатить, каждый раз проходя по этому циклу, как заведенный. В общем, первое, что должен на сайте увидеть клиент — “а тут можно вот эту мою цель осуществить?”, второе — “какой мой первый шаг к вот этой моей цели? а второй?”, третье — “У меня получилось? Я молодец?». Только после выполнения его цели приберитесь за него. Знаете, когда забывают выключать поворотник или утюг, забрать карту в банкомате после завершения основной цели? Все это нужно за ним выключать, напоминать и верещать, зная, что он будет так рад, что выполнил основную цель, что о попутных просто снова забудет.

Мы очень быстро узнаем лица или сложные узоры (вроде карты Европы). Мгновенно. Подозрительно быстро для “роющегося в памяти” человека. Это потому, что мы в ней не роемся. Напоминаю, что лицо человека, если мы его видели ранее, мгновенно активирует шаблон нейронной активности, который больше ничем не занимался с тех пор, как сложился при виде этого лица. Он не погружался в долгосрочное хранение, он не завален под грудой других шаблонов. Он ждал каждую миллисекунду, что увидит снова это лицо, чтобы вскинуться и заорать — “я знал, что этот день придет! Это — мой однокурсник!”. А вот имя Вы можете и не вспомнить, разве только если его звали Рулоном Обоевым. В общем, вспоминать с нуля мы умеем Плохо, поэтому подсовывайте пользователю знакомые образы, чтобы он просто их узнавал и тыкал пальчиком. Ставьте известные или очень говорящие иконки рядом с текстами / вместо текстов. Для фото и видео допустимы эскизы – узнать по ним смогут.

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

У нас 3 мозга

— Старый мозг (я чаще слышал “древний мозг”). Он находится в месте соединения спинного с головным, унаследован еще от первых рыб, то есть, это самый первый мозг на Земле. Умеет реагировать на 3 вещи: “можно есть”, “опасно” и “сексуально привлекательно” + руководит органами и рефлексами. В чистом виде остался у рыб, рептилий. А у остальных сосуществует со …

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

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

Мы хорошо учимся, но плохо

Всю нашу жизнь мы обобщаем — учимся на опыте. Например, что пятна леопарда — это плохо, или что на взбесившее письмо лучше ответить завтра. На опыте учится и червяк, а на чужом опыте — только мы и наш клуб млеко-интеллектуалов. А осознать, чему научились — только мы. Но вот пошли наши иррациональности:

— Опыт нам важен именно наш (или нашего круга общения). Хоть стопицот тысяч человек по статистике высоко оценят Субару, но если друг скажет, что не очень… 🙂

— Мы не всегда извлекаем верный урок — мы забываем, как попали в ситуацию, и неверно трактуем причину ситуации. Например, что все бабы дуры, а мужики козлы. Какой опыт искали, такой нашли, и на нем прилежно научились. Часто мы не думаем, как тупанули изначально, и виним невинные факторы.

— Или еще веселее — выводим правило на основании одного-двух примеров, зачастую нетипичных, подтасовывая подсознательно факты, формируя удобную нам картину мира («жизнь — г****» или «жизнь прекрасна и удивительна»).

Не заставляйте думать, выводите на автопилот

Для привычных автоматических действий у нас ни один нейрон не поднимется подумать, вспомнить… Мы можем так делать много всего одновременно. Теперь я понимаю, как можно одной рукой стучать, другой пилить — просто довести эти движения до автоматизма, чтобы не обращать внимания, как их выполнять. Знаете — если сороконожка подумает, какую ногу за какой переставлять, она не сможет сделать ни шагу. А вы на эскалаторе попробуйте думать, как передвигаете ноги, и Вам придется замедлиться. И хорошо, что у нас есть этот удобный механизм — иначе бы ездить на машине запрещалось законом — ведь в фокусе внимания можно удержать только 4 элемента +/-1, а этого маловато для выживания.

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

И, конечно, не заставляйте ничего считать — кора наша развилась 200 или 50 тысяч лет назад, а считать мы начали 4-5 тысяч лет назад — наш мозг для вычислений не оптимизирован. Разве что что-то из автоматических вычислений — таблицу умножения какбэ можно, но, честно говоря, я уже не все помню. В идеале, люди вычислять не должны вообще ничего — рассчитывайте все за них из минимума данных, который они ввели. Тупой пример, но пример — при вводе года рождения не просите вводить возраст.

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

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

Как отключить им всем мозг?

Как помочь пользователю быстро привыкнуть к интерфейсу, чтобы он почти сразу мог отключить кору и весело летать на автопилоте?

Для этого должно быть:

— просто, как пареная репа,
— однообразно, как 4 пареные репы,
— знакомо, как 5-я пареная репа,
— безопасно, как репа на пару.

Просто:

Пользуясь инструментом, не должно быть необходимости сначала научиться им пользоваться. Это называется «ущельем исполнения». С этой точки зрения самокат лучше скейта — прост, удобен, безопасен. Встал и поехал – так должны работать все инструменты, слышите?

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

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

Однообразно:

У вас не должно быть похожих концепций, которые ведут себя по-разному, например, кнопки «в корзину», которая где-то переводит в корзину, где-то кладет товар, а где-то выводит попап » товар положен в корзину». А похожие понятия (членство, подписка, доступ, права — даже если они реально у вас означают разные вещи) следует переименовывать или объяснять.

Если Вы боитесь, что у Вас сложный сайт — постройте матрицу объектов/действий. Объекты слева, действия вверху (то есть то, что придется запомнить Вашему посетителю). Чем плотнее и компактнее матрица, тем лучше Ваш интерфейс. Объектов должно быть немного, и все они должны работать по одному принципу. Допустим, если 3 разных действия (клик по кнопкам «личный кабинет», «заказать» и «сравнить») выводят похожие попапы в одном месте), то запоминать ничего не придется — в любой непонятной ситуации выходит привычный попап с информацией и разъяснениями.

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

Если во всем мире принято копировать через ctrl + c, в Вашей программе это тоже должно работать только так.

Одно и то же на сайте не может называться по-разному. У нас, вот, на одну страницу разные анкоры вели — «варианты оплаты» и «способы оплаты». Ну, это пустячок, но бывают случаи и посерьезнее — доставка 2 категории и доставка за 700 р. Это у нас одно и то же, но зачем писать это по-разному? Лишнее напряжение для и так предельно напряженного Петра Александровича.

Знакомо:

Делайте только то, что ожидает клиент. Допустим, он хочет перевести средства на счет. Он не должен вводить свой телефон, даже если вам это по каким-то причинам нужно. Тема ожиданий напомнила аббревиатуру WYSIWYG — What You See Is What You Get. Видите кнопку «Подбор брендов», значит, она именно на подбор и должна вести, а не на простой их список.

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

И, уж конечно, не выводите ошибки на компьютерном языке. Перефразируйте, как я перефразирую всякую умную скукотень, да еще картинку милую поставьте, как это делает di.fm — «извините, мол, щас все поправим, а пока вот вам щеночка». Красавцы, из ошибки выкрутили позитив. Ну, а mailchimp вообще можно считать виртуальным другом — он всегда говорил со мной на одном языке.

Безопасно:

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

Ау! Отзовитесь!

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

Пока подгружаются какие-то необязательные крутости на яваскрипт, дайте пока смотреть основной контент, пусть даже суровую текстовую его часть. Еще один лайфхак псевдобыстродействия — если вы точно знаете (или просто вангуете), какую информацию захочет следующей увидеть пользователь, подгрузите ее заранее. Он то-олько притронется к переключению страницы, А НА ТЕБЕ! (и взгляд Дэвида Блейна).

Незамедлительно маячьте, что все от пользователя получили и сохранили, на носу зарубили, а его Действие увенчалось таким успехом, что будет показано в вечерних новостях.

Оk, сколько у меня есть миллисекунд?

За 140 мс мы ощущаем причину и следствие. Например, если появление букв на экране будут отставать от наших нажатий более, чем на 140 мс, то будет ощущение, что мы плохо нажали кнопку. Так что, реакция должна быть мгновенной. Полагаю, поэтому хорошо, когда у кнопки есть вид при нажатии — так хотя бы видно, что действие нажатия совершено, пока страница еще грузится. Либо индикатор некий – действие принято, щас, только чутка потупим. Если тупеж продолжается больше секунды, это крах. Вариант – выводить неактивную версию, которую потом доделать в процессе – главное, чтобы посетитель уже что-то увидел. В случае фоток – лучше выдать в плохом разрешении, но всю – мы хотя бы увидим суть.

Итого, если у Вас за 0,1 секунды ничего не произошло, то вам двойка, и до отчисления у вас есть 1 секунда на то, чтобы выдать либо результат, либо индикатор прогресса или занятости. Ну, 10 секунд пользователи готовы ждать выдачу результатов поиска или загрузку файла, но больше и без индикатора – уже пытка.

Индикаторы должны соответствовать реальности. В случае индикатора прогресса следует показывать реальное оставшееся время, а в случае индикатора загрузки хотя бы не шевелиться, когда процесс реально встал. Например, у Apple он крутится медленнее при медленном соединении. Индикаторы должны показывать, сколько сделано из общего количества. Плюс, именно сделано, а не осталось – какой-никакой, а позитив (кроме времени, понятно – там нужно понять именно оставшееся его количество). С 0% не начинайте – растревожите пользователей, если надолго застрянет на нуле. Анимация должна быть плавной, даже если загрузка прошла в 2 или в 1 приход – в этом случае дорисуйте быстренько его путь (кстати, плавной мы считаем анимацию от 10 до 20 кадров в секунду). И пишите для людей – не 240 секунд, а 4 минуты.

За 200 мс можно узреть сразу 4-5 элементов по 50 на элемент. Если больше 4-х, уходит уже по 300 на элемент для их подсчета.

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

И напоследок еще несколько цифр, вдруг кому пригодятся:

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

За 100 мс мы полностью воспринимаем событие, за 150 можем понять прочитанное слово, за 250 идентифицируем объект и 500 мс мы радуемся тому, что узнали что-то, не воспринимая в этот момент больше ничего.

Непроизвольная реакция – 80 мс, произвольная – 700, принятие решения в критической ситуации – 1-5 минут, принятие решения о важной покупке – 1-10 дней, принятие решения о деле жизни – 20 лет.

1 комментарий для “Конспект ‘Умного дизайна’ Джеффа Джонсона”

  1. Уведомление: Дайджест продуктового дизайна, декабрь 2014 | Юрий Ветров об интерфейсах

Добавить комментарий