Чем докажешь

Горизонтальные меню на английском языке дают более высокую производительность, чем вертикальные меню на английском. Однако вертикальные китайские меню работают лучше, чем горизонтальные китайские. (Dong, J., & Salvendy, G. Designing menus for the Chinese population: Horizontal or vertical? 1999)
Люди работают с меню, как с чтением, поэтому европейцам искать в горизонтальном меню должно быть проще, чем в вертикальном.

В другой статье, довольно новой, время выполнения задач в горизонтальном и вертикальном меню не различается, но люди предпочитают горизонтальное. (Magnussen K. Investigating the Impact of Website Menu Presentation Style on User Performance, 2024)

В еще одном исследовании, с крохотным количеством участников, зато с айтрекером, горизонтальные меню были более эффективны, чем вертикальные с точки зрения выбора пунктов подменю, а общее время выполнения задачи не зависило от дизайна меню.
Kara, A., & Cagiltay, K. A Comparison of Cascading Horizontal and Vertical Menus with Overlapping and Traditional Designs in Terms of Effectiveness, Error Rate and user Satisfaction. 2007)

С какой стороны расположить вертикальное меню?
Если меню вертикальное, то пользователи скорее предпочитают, чтобы оно стояло в начале строки. Для арабских пользователей это будет справа, для европейцев слева (Deng, X., Kahn, B., Unnava, H., & Lee, H. (2016). A “Wide” Variety: Effects of Horizontal versus Vertical Display on Assortment Processing, Perceived Variety, and Choice)

Виды меню. Какое выбрать

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

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

* на вопрос @alexnikulina «Лучше sidebarы или горизонтальные менюшки?»

То есть, когда вы по шагам ведете пользователя по вашему продукту
— они меньше будут исследовать его сами
— не будут ловить ощущение «ого, ничего себе я тут штуку нашел»
— будут испытывать меньшее удовлетворение.

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

https://journals.sagepub.com/doi/10.1509/jm.10.0348

по запросу @andekhtyar насчет онбордингов

Онбординг VS самостоятельное исследование продукта

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

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

В эксперименте Лакшманана и Кришмана 153 пользователя должны были выполнять задания в новом для них аудиоредакторе.

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

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

Когда одной группе вручили инструкцию, исследовательское поведение значительно уменьшилось.

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

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

Пишите в комменты к этому посту

Как лучше писать — «бесплатно» или «за 0 руб.»

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

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

В конце статьи есть интересная гипотеза для следующего исследования — как лучше GMO Free или GMO 0%, без сахара или 0г. сахара?

https://www.sciencedirect.com/science/article/abs/pii/S0022435919300831

Онлайн
Исследование проводилось в интернет-магазине и включало 384 респондента. В первом варианте чаи были расставлены по составу (мята, ромашка и т.д), во втором так же по составу, но был добавлен заголовок, в третьем — по эффекту (снимает стресс, улучшает иммунитет).
Первая группа накупила 3.89, вторая 4.18, третья — 4.91 чаев.

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

https://www.sciencedirect.com/science/article/pii/S0022435924000010?via%3Dihub

Как группировать продукты в магазине

Оффлайн
В первом исследовании в двух похожих магазинах расставили йогурты по 1.ингридиентам (с клубникой, с малиной) 2.выгодам для покупателя (для здоровья, для семьи, для мозга).
Всего проследили за 168 покупателями. В первом магазине покупатели взяли в среднем 1.94 йогурта. А во втором 2.89. Почти на треть больше!

Второе исследование проводилось в одном и том же магазине, с промежутком несколько недель. В этот раз проверяли на полке с вареньем на 474 покупателях.
Люди, которые видели полку, расставленную по составу, покупали в среднем 0.4 банки варенья. А по выгодам — 0.6 банки варенья.
141 из них так же ответили на вопрос об их удовлетворенности, в котором расстановка по преимуществам тоже везде обгоняла обычную.

Ученые из Нячанга попросили группу из 34 человек, половина из которых молодого (≈24 года) и половина старшего (≈63 лет) возраста нажимать в определенном порядке на кнопки в прототипе умного дома.
Кнопки отличались размерами (от 10 до 25 мм), стилем иконок и соотношением размера текста и иконки.

Количество ошибок
Влияет размер кнопки для всех групп и стиль иконки для возрастных пользователей (3д лучше)

Время выполнения
Соотношение текста и иконки оказало воздействие на молодых пользователей (текст крупнее → меньше время), стиль иконки и размер кнопки (!) не оказывают влияния.
Пожилые пользователи быстрее выполняли задание с более большими кнопками, 3д иконками и кнопками с крупным текстом и мелкими иконками

Выводы
Текст на кнопке важнее иконки, он более однозначный и информативный, поэтому желательно сохранять пропорции как на втором или третьем варианте (1:1 или 1:3) в зависимости от размера кнопки. Если значимая часть пользователей возрастная → то лучше использовать 3д иконки.

Статья

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

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

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

Но! Ребята ссылаются на коллег Park and Kim, 2017, у которых прямоугольный прогресс-бар выиграл. У Li et al. (2021) люди предпочитали круглый прогресс бар.

У Harrison et al, (2010) ребристый паттерн оказывал значимое влияние. А у Kurusathianpong and Tangmanee (2018) не оказывал. У Shakir, 2017 людей бесил паттерн.

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

https://www.researchgate.net/publication/380458347_Investigating_the_Impact_of_Progress_Indicator_Design_on_User_Perception_of_Delay

В следующей статье проверяли то, как влияет форма прогресс-бара (круг и линия) и наличие паттерна.
240 участников, половина с мобилки, половина с десктопа. Индикатор показывался как бы перед загрузкой ютуб-клипа в течение 10 секунд.

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

Прогресс бар
Исследователи проверяли как меняется ощущение ожидания в зависимости от вида прогресс бара и от того, на какой отметке он зависает — 20 или 80% прогресса. Ожидание длилось либо 3, либо 15 секунд.

В эксперименте участвовали 42 студента из Пекина.
Для ожидания 3с. форма прогресс-бара вообще не влияла, а вот для 15с. время воспринимается немного короче, когда человек смотрит на прямоугольный прогресс бар. Это исследование странное, потому что именно прогресс-бары круглыми никто обычно не делает.

Разница в зависимости от того, на какой отметке зависает прогресс, видна тоже только на 15 секундах. Время воспринимается короче, когда прогресс стоит на 20% (странно).

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

https://www.researchgate.net/publication/375152676_Time_represented_in_space_Bar_better_than_ring_while_waiting

Фигма vs Адоб ХД vs Скетч — исследование
17 студентов попросили выполнить 9 простых тасков (выгрузить картинки, создать текст с заданными параметрами, нарисовать прямоугольник нужного цвета и т.д.) в фигме, эдоб хд и скетче. На всех навесили ай-трекинг, замеряли время выполнения и заставляли отвечать на вопросы.
Фигма по итогу выиграла (мы не сомневались!).

Я была бы в восторге, если бы обзоры на софт выглядели именно так, как в этой статье — в нашей софтине вот эти базовые функции пользователь в среднем выполняет на N быстрее, чем конкуренты, а вот результаты опроса с 16 вопросами, включая чему проще обучиться с нуля, информационная ясность, толерантность к ошибкам пользователя и т.д. Кажется, если провести анализ своего продукта и конкурентов по сценарию, как в статье, можно найти много инсайтов для задач в UX-очереди, как минимум.

P.S. померьте, за сколько выполняете первый таск с картинки — сверимся)

На основе этого исследования можно предположить, что
👌Если на мобилке и десктопе меню построено по-разному это ок, пользователям это не особо мешает ориентироваться
👌Иконки помогают, но совсем слегка, особенно в несогласованных меню. Но в целом их можно выпилить.
☝️Очень важно, чтобы в меню была какая-то внутренняя логика, это сильно облегчает навигацию
Про размер меню и так очевидно, наверное.

Но! Я проверила, на озоне, вайлдберрисе, амазоне меню в порядке (вероятно) популярности у пользователей, а не алфавитном. Так что, возможно, они что-то знают. Хотя вот на ламоде в алфавитном и как будто легче искать.

https://www.sciencedirect.com/science/article/abs/pii/S1071581918304762

Как влияет порядок элементов и наличие иконок в меню на скорость поиска

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

В эксперименте участвовали 72 человека, исследование проходило в Саудовской Аравии.
Каждой группе студентов выдавали по 4 меню в десктопной и мобильной версии, в которых они должны были найти указанные пункты меню.

Быстрее всего пользователи справлялись в коротких меню без иконок, где пункты меню не изменялись от мобилки к десктопу.
Порядок пунктов меню помогал пользователям довольно сильно: они быстрее находили нужные пункты в алфавитном, но длинном меню, чем в коротком, но беспорядочном.
В целом упорядочивание меню ускоряло выбор нужного пункта на 0.28 секунды (из 2.5 всего)

Немусорные графики с ярким месседжем участники запоминали лучше всего: их в 2,96 (!) раза чаще вспоминали и рисовали ключевые элементы по сравнению с загроможденными графиками, и в 2,49 раза чаще по сравнению с упрощенными графиками без фокусировки.
Они же казались респондентам наиболее эстетически привлекательными и ясными, а так же профессиональными и надежными. Хотя для последних двух величин разница просто с тафтианскими статистически незначимая.

Загроможденные графики получили наименьшие оценки по всем критериям.

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

https://par.nsf.gov/servlets/purl/10350268

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

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

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

https://www.researchgate.net/publication/304189384_The_Effects_of_Background_Color_Shape_and_Dimensionality_on_Purchase_Intentions_in_a_Digital_Product_Presentation

Какие типы графиков лучше запоминаются?
Ученые отобрали 410 иллюстраций и разбили на категории. Участникам эксперимента, нанятым на Амазон Терк, по очереди показывали картинки. Если они понимали, что какую-то картинку показывают во второй раз, нужно было нажать на кнопку. На каждом уровне игры было около 120 изображений, пройти его надо было за 4.8 минут.
Каждую картинку увидело около 87 человек.
Лучше всего пользователи запоминали графики-матрицы. Если честно, может быть это потому, что их просто было мало и их легко было узнать (там в целом дизайн эксперимента странный). Но может и нет, может пользователям реально они больше запоминались. Я тоже матрицы люблю, так что болею за этот вариант.
Другие факторы, которые положительно влияли: побольше цветов и наличие пиктограмм.

На последней картинке — топ 10 по запоминаемости изображений из каждой категории.

https://vcg.seas.harvard.edu/publications/what-makes-a-visualization-memorable/paper

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

При оценке простоты использования и полезности женщины лучше оценивали списки, а мужчины — плиточки.

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

Я, кстати, замечала, что темную тему и правда чаще используют мужчины. Интересно почему.

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

Выдача инернет-магазина и гендер

40 человек в макетах интернет магазина выполняли задачи. Макеты отличались темой: темной и светлой и видом выдачи: плиткой и списком.

1 задача: Найти товар с конкретной ценой. Женщины лучше справлялись в светлой теме, а мужчины в темной. Вид списка не влиял.

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

3 задача: Найти самый дешевый товар. Мужчины справились быстрее женщин, а светлая-темная темы и дизайн списка влияния не оказали.

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

https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=10121686