UX дизайн: Закон Якоба, эксперимент Бен-Барака, аттракцион «Пьяный велосипед» и цена отказа от привычных UX-паттернов
Данная статья предназначена для начинающих UX/UI дизайнеров, аналитиков и исследователей. В статье показано как отказ от привычных UX-паттернов приводит к росту количества ошибок и затраченного времени.
В 2015 году, UX-эксперт при лаборатории взаимодействия и визуализации человека и компьютера Хайфского университета (Human-Computer Interaction at the University of Haifa) Шей Бен-Барак (Shay Ben-Barak) провел эксперимент в котором попросил 130 человек выполнить два простых задания:
1. Набрать номер телефона из 10 цифр используя стандартную раскладку смартфона, в которой цифры расположены по строкам, как на большинстве смартфонов (по центру, на изображении ниже);
2. Набрать этот же номер телефона на измененной раскладке смартфона, цифры расположены по столбцам, как не делает никто из производителей смартфонов (справа, на изображении ниже).
При этом, фиксировалось время набора между кликом по первой клавише и кликом по клавише вызов. А также фиксировалось количество нажатий на клавишу «backspace» (удалить) в случае неправильно набранных цифр. Эксперимент показал, что набор номера на нестандартной клавиатуре занимал, в среднем, на 46% больше времени, чем набор того же номера на стандартной клавиатуре (10,94 секунды против 7,47 секунды). Более того, при использовании нестандартной клавиатуры, вместе с временем возросло и количество кликов по кнопке «backspace», что говорит о возросшем числе ошибок. Но что ещё хуже, 22% (28 человек) набрали номера с ошибкой, то есть пользователи не заметили ошибку и кликали по кнопке «вызов», хотя номер отличался от заданного.
В результате, небольшое и логичное изменение привычных паттернов (стандартной раскладки клавиатуры) увеличили время выполнения простой задачи почти в два раза. При этом также увеличилось количество ошибок (как исправленных, так и неисправленных). Эти результаты говорят о том, что оперируя привычными элементами интерфейса, пользователи делают это быстро и эффективно, интуитивно предугадывая последующие шаги. Но если изменить привычный интерфейс, то могут возникать серьезные проблемы.
Аттракцион «Пьяный велосипед»
Другой пример возникающих проблем при изменении привычных паттернов наблюдается на уличном аттракцион «пьяный велосипед» (или испорченный велосипед), который устраивают в многолюдных местах туристических городов. Человеку дается велосипед, на котором необходимо проехать всего 3 метра. Доехавшему достается денежный приз и респект зрителей. Но есть одна деталь, руль у велосипеда работает наоборот, то есть при повороте руля в левую сторону, колесо поворачивается в правую сторону и наоборот. Эти правила объясняются перед началом поездки. Другими словами, люди мысленно понимают, что необходимо поворачивать руль в противоположную сторону. Более того, дается несколько попыток, а значит можно понять принцип действия, но это не помогает. Люди используют разные подходы, кто-то пытается просто катиться не задействуя педали, а кто-то меняет руки местами, но также безрезультатно. Я привел данный пример для того, чтобы показать как выработанные годами привычные паттерны поведения за рулем велосипеда очень сложно изменить, даже при достаточной мотивации.
К слову, проехать на таком велосипеде вполне реально и организаторы аттракциона («зазывалы») это демонстрируют. Но для изменения привычных паттернов необходимо заново научиться ездить на велосипеде, что отнимает много времени. Большинство пользователей бросают попытки и не достигают цели.
Закон Якоба и привычные UX-паттерны на сайтах
Привычные паттерны существуют во многих продуктах, в том числе и на веб-сайтах. То есть пользователи получают совокупный опыт использования веб-сайтов на множестве посещенных ранее страниц. Схожие элементы на популярных веб-сайтах формируют у пользователей понимание о том, как должен работать веб-сайт, какие решения в области дизайна общеприняты в Интернете. Отсюда вытекает закон Якоба:
Закон Якоба: Пользователи проводят большую часть своего времени на других веб-сайтах, а не на вашем.
Другими словами, если на вашем сайте используются привычные дизайн-решения, что и на большинстве других популярных веб-сайтов, то когда пользователи попадают на ваш сайт (даже впервые), они будут знать как им пользоваться. И вместо того, чтобы разбираться в сложных и креативных нововведениях, пользователи смогут сосредоточиться непосредственно на товарах, услугах, предложениях, сообщениях или любом другом контенте. Ведь цель большинства сайтов (особенно коммерческих) – это получение прибыли (заявок, лидов, подписок), а не попадание в музей современного искусства за нестандартный подход в дизайне сайтов.
Некоторые дизайнеры, в желании проявить себя, рисуют нестандартные и креативные интерфейсы сайтов, переделывая или перемещая привычные элементы. В результате такой дизайн нарушает стандартные UX-паттерны из-за чего пользователи, пришедшие на данный сайт, не сразу понимают как данным сайтом пользоваться, действия замедляются, а количество ошибок возрастает. Такие пользователи сбиты с толку. А когда пользователи в интернете сбиты с толку, они часто покидают сайты, считая их сложными и непонятными.
Вывод:
Помните о законе Якоба и эксперименте Бен-Барака при проектировании и дизайне страниц сайтов. По возможности, используйте привычные UX-паттерны, которые применяются на большинстве популярных сайтов. Постарайтесь избегать излишнего «креатива», так как он может негативно сказаться пользовательском опыте в целом, а также на времени отклика и количестве ошибок в частности.
В данной статье очень кратко разобран лишь один закон для улучшения пользовательского опыта. Если вы хотите узнать больше о UX дизайне на основе инженерной психологии и UX исследований, то специально для вас мы составили электронный учебник Конверсия на стероидах, в котором собрано множество подобных точек роста конверсии.
Сразу видно - автор знает о чем говорит.
А вот и скептики подоспели. Подскажите, пожалуйста, как ваш комментарий относится к теме данной статьи? Как незначительные недочёты нашего сайта (на одной из платформ) относятся к тем экспериментам, которые описаны в этой статье? Результаты экспериментов вдруг стали хуже от этого? Или вы просто так написали, чтобы показать свою токсичность? Возможно, лучше направить энергию и время на что-то более полезное? Например дополнить статью своими размышлениями и опытом по теме. От этого всем будет лучше (автору, комментатору, читателям). Хорошего вам дня ✌🏼
Данная тема напрямую связана с пользовательским опытом на сайтах. Раз Вы учите других, как правильно должен выглядеть интерфейс, то позаботьтесь сначала о том, чтобы Ваш собственный сайт соответствовал нормам, а не выглядел, как дешёвая платформа, сделанная на коленке, которая не может адаптироваться под мобильные устройства)
Вы разбираете сайты, но свой собственный пилите на Тильде - смешно)
Вы чертовски наблюдательны! :) Данная тема, заголовок которой начинается со слов «UX дизайн…» действительно связана с пользовательским опытом. В статье приведены результаты экспериментов и мнения авторитетных экспертов, доказывающих работающий способ улучшения пользовательского опыта на сайте. А вот небольшой отступ текста на нашем сайте с данной статьей никак не связан. Но при этом, вы заминусовали данную статью, из-за нашего сайта. Вот что действительно смешно.
Идём дальше, вы говорите про какие-то «нормы» и «дешевую платформу». Но это абсолютно ничем не обоснованное заявление. Чьи нормы? Чья оценка? Приведите ссылки на доказательства в виде экспериментов или тестов (как я сделал это в данной статье), которые покажут, что пара букв на изображение нарушают какие-то нормы и существенно сказываются на конверсии сайта. Или приведите ваши доказательства того, что Тильда плохо доносит информацию и потому все сайты на Тильде хуже читаются пользователями и хуже конвертят, чем сайты на других платформах. А иначе обвинения пользователя, с пустым аккаунтом зарегистрированным 5 дней назад ничем не подкреплены и выглядят неубедительно.
Вам уже в предыдущем комментарии сказали, что Вы не вызываете доверия, как эксперт. А я - второй человек, который Вам это говорит. В любом случае, рассматривайте нас, как обычных пользователей, а не как оппонентов в споре. Мнение пользователя важно. Вы говорите, что "тем более в десктопной версии недоработок вовсе нет", но не учитываете, что большинство людей читают статьи тут с мобильных устройств - эта тенденция растет уже довольно давно.
Дело не в самой Тильде, а в вашем сайте. На скрине выше видно, что текст плохо читается в местах перехода серого бэкграунда в тень от книги. Это происходит из-за плохого контраста фона и текста. Вам необходимо либо размыть фон, либо установить некоторые другие цвета для бэкграунда (см. рис. 1).
Заключение: мой пользовательский опыт оказался плачевным для Вас - увидев, неаккуратный интерфейс, я покинул сайт, а ведь желание получить продукт было (вопреки тому, что статья явно написана для рекламы и не содержит ничего полезного).
P. S. Аккаунт зарегистрирован недавно, но мой опыт разработки веб-приложений позволяет мне проводить хороший анализ юзабилити сайтов.
P. P. S. Просто поправьте мобильную версию. Всё, что Вы здесь читаете - конструктивная критика, которая позволит Вам сделать свой продукт лучше.
Не так важно, что написали в предыдущем комментарии, потому что там также голословные заявления, без доказательств. Как говорит моя бабушка: «на заборе тоже много разных слов написано, а за забором ничего нет». Я бы прислушался к комментарию, если бы он указывал на серьезный недостаток, например, невозможность оплаты на сайте. Но вы придираетесь к мелочам и высасываете из пальца раздутые причины.
Поясню для понимания: представьте, что человек пришёл в офлайн-магазин покупать электрический чайник. Посмотрел, выбрал и попросил упаковывать. В этот момент к нему подошел другой человек и заявляет: вы видели, на этой картонной коробке от упаковки чайника принт съехал на 2 миллиметра - это грубейшая ошибка завода Tefal! Это значит, что чайник ужасного качества! Тогда покупатель чайника спрашивает человека: «Ну это лишь коробка и принт съехал всего 2 мм, всё видно и понятно, с чего вы взяли, что чайник плохой?». Посторонний человек отвечает: Ой я знаю типографию на которой печатали эту картонную коробку, она дешевая - это смешно! Тогда покупатель спрашивает: «Непонятно при чем здесь типография и чайник, но почему сам чайник плохой? У вас есть доказательства?». На что человек отвечает: Да типография тут не при чем, просто верьте мне, я эксперт без доказательств. А завод Tefal шарлатаны. После этого покупатель оплачивает покупку, забирает свой чайник и довольный им пользуется. Вот примерно также выглядят ваши комментарии. Предыдущий комментатор назвал бы завод Tefal ещё и инфоциганами, потому что принт на коробке съехал на 2 мм. Также без доказательств, естественно.
Поймите меня правильно, я без негатива. Я к тому, что возможно ваш комментарий и конструктивен, но тема за которую вы зацепились несущественна. Плюс она не относится к данной статье.
Про Тильду, сначала вы пишете «дешевая платформа», «пилить сайт на Тильде смешно». Когда я попросил доказательств, что сайты на Тильде хуже читаются, то вы включили заднюю и написали «Дело не в Тильде». Ну а зачем тогда писать вообще про Тильду и голословно обвинять? Или это как в том анекдоте: «Если закончились аргументы в споре, то докопайся до орфографии»? 😁
Итог: наши статьи и наш учебник не про аккуратные интерфейсы, а про эффективные интерфейсы. И результат есть, в виде подписчиков и покупок. А если вы из-за такой мелочи готовы отказаться от полезного контента - то тяжело вам, наверное жить с таким перфекционизм в этом неидеальном мире. Но большинство здравомыслящих людей - такие мелочи не смущают и они покупают подписку.
P.S. Спасибо за ваше предложение по улучшению в дизайне, но мы уже всё исправили, разделив изображение и текст на разные блоки.
Незначительные?) Вы на 1 экране своего сайта сделали кучу ошибок. Причем на важном экране, который должен убедить меня дать вам денег. Как вы можете учить других, если сами не используете свой опыт? А если используете, то возникает вопрос - опыта хватило только на "это"?
При чем здесь токсичность? Вы не вызываете доверия как эксперт. Похожи на инфоцыгана.
Именно незначительные, потому что несколько букв, которые попали на изображение на экране одного из смартфонов - это не критичная ошибка, тем более текст по прежнему читабелен. А на декстопе и вовсе ошибки нет. А в остальном поправим, не проблема.
Эта статья, как и другие статьи на нашем сайте не про UI дизайн, не про красоту или ровную верстку текста. Они про UX-дизайн (пользовательский опыт), про поведение человека на сайте. И пара зашедших букв на изображение никак на эти показатели не влияют. Поэтому никакой кучи ошибок нет, а есть лишь незначительные недочеты. Которые мы поправим, спасибо за неравнодушие к нашему сайту.
Токсичность при том, что вы пишете в негативном ключе: «сразу видно», необоснованные обвинения вроде «инфоцыган» и так далее.
Про инфоцыган: на примере данной статьи указаны эксперименты со всеми доказательными ссылками, примеры из реальной жизни и мнение стороннего авторитетного эксперта. А значит это уже не инфоцыганство, а разносторонний и объективный взгляд. Аналогичным образом построены и другие наши статьи. Никто не обещает вам взлет за 1 день. Никто не гарантирует успешный успех. Статьи построены на исследованиях, экспериментах, тестах и наблюдениях с разных сторон.
Поэтому предлагаю не разводить флуд, а вернуться к теме статьи и дополнить её полезными комментариями. Если есть что добавить по теме.
Вы не правы, как раз подобная небрежность может сильно повлиять на опыт пользователя, в частности как выше уже сказали на доверие к вам и вашему сайту - это негативный опыт, я например, едва ли вернусь...
И да, статья конечно имеет косвенную связь с вами, но это из той же оперы как если бы "дрыщ" пришел в качалку и начал рассказывать и показывать как надо и как правильно - абсолютно не важно правду бы он говорил или нет, его бы в лучшем случае проигнорировали :)
p.s. А статья интересная :)
Нет, это вы не правы. Объясню почему:
1. У нас регулярно меняется дизайн посадочной страницы, и были версии без наезда нескольких букв на изображение. Так вот по данным веб-аналитики, среднее количество подписок не изменилось с учетом смены дизайна. Поэтому я так уверенно об этом говорю. Другими словами, возможно наш сайт не идеален, но если и есть проблемы на странице, то они не связаны с тем, что пара букв наехала на изображение.
2. Пример про дрыща из качалки не корректный. Данная статья, как и статьи в электронном учебнике про UX-дизайн, на основе исследований и экспериментов. Обратите внимание, что статьи не про UI дизайн. То есть, если бы наши статьи были про UI дизайн, в которых мы рассказывали про верстку, то тогда уместен был бы пример с дрыщем (и нападки на сайт). А так, это скорее похоже на то, как у большого и раскаченного тренера по фитнесу, с многолетним опытом не покупают тренировки лишь потому, что у него дома сломана стиральная машина. То есть связи никакой. Поэтому, давайте разделять: мухи отдельно, котлеты отдельно.
P.S. Я без негатива, спасибо за ваш ответ :)
Если результата не было, значит дизайн был одинаково плох.
Или дизайн был одинаково хорош, тут как посмотреть :) Там были незначительные изменения в фотографиях. А вообще, это абсолютно естественно, что не все эксперименты над сайтами приносят сиюминутный и существенный прирост. Бывают и неудачные эксперименты. Это нормально, мы получаем опыт, копим знания и двигаемся дальше. А статьи подобные этой помогают принимать более взвешенные решения.
Вы бы ещё написали на кнопке : «Спешите купить прямо сейчас выгодную подписку на целых 3 месяца всего за 999 рублей!!!», а то как-то пустовато получилось, не хватает месседжа.
Не помню, чтобы спрашивал совет. Но раз уж вы его написали, то я отвечу: когда вы проведете свой эксперимент и докажите, что ваш вариант надписи на кнопке менее "пустоват" и увеличивает конверсию в продажи, вот тогда я обязательно прислушаюсь к вашему совету. А до тех пор - ваш совет ничем не подкреплен и не доказан. Не говоря уже о том, что совет этот не по теме данной статьи и его никто не спрашивал.
прикольно, я бы название статей переимонавал бы в "подтверждение очевидных идей" и цены бы не было, потому что и вправду, такие вещи кажутся очень очевидными - при изменении известного паттерна, взаимодействие с новым паттерном будет сложнее, но подкрепленное данными оно обрастает логикой а не просто "чуйкой"
было бы интересно наверное почитать такие штуки и о не очень очевидных вещах, скажем о том, что влияет на внимание пользователя / откуда растут существующие паттерны UX / юзабилити vs эстетика / ну и тому подобные вещи )
Спасибо за обратную связь! Я подготовил серию статей, с постепенным усложнением, чтобы немного уравнять знания читателей, в том числе начинающих. А чтобы опытные читатели не тратили своё время, в самом первом абзаце я пишу «статья для начинающих».
Но данные статьи будут полезны и опытным дизайнерам, для которых подобные вещи кажутся очевидными. Потому что очень часто заказчик хочет внести правки на свой вкус (во вред UX) и в этом случае простой чуйки дизайнера недостаточно. Но можно отправить ссылку на подобную статью и это поможет убедить заказчика согласовать версию предложенную дизайнером. Возможно не на 100% убедит, но поможет в убеждении точно.
Ну и наконец больше статей, в том числе на сложные темы расположены в нашем электронном учебнике, ссылка в конце статьи.
Кстати, статья про «юзабилити vs эстетика» есть на VC, я публиковал её недавно здесь.
Как хорошо, что люди создавшие графический интерфейс не следовали этому правилу, а то мы бы так и пользовались командной строкой, а не мышью)