На подкасте ДизайнПрост рассказала про то, как начала делать дизайн под арабскую аудиторию, какие особенности, кроме очевидных, есть в дизайне справа-налево, как избегаем харама и пытаемся быть актуальными для локальной подростковой аудитории
YouTube
Юля Кондратьева (UULA). Особенности дизайна UI для арабских стран
Мы созвонились с дизайнером интерфейсов и автором телеграм-канала о дизайне «chem_dokazhesh» Юлией Кондратьевой. Юля работает над обучающим продуктом для рынка Кувейта. Поговорили о том, почему локализация интерфейса это не просто про корректный перевод на…
Для тех, кому удобнее читать, добавила текстовую расшифровку лекции про дизайн для арабоговорящих пользователей
Хабр
С какими проблемами сталкиваются дизайнеры, делая сервис для арабских пользователей
Я дизайнер в UULA, это Кувейтская компания, которая делает образовательную платформу для школьников, помогает им готовиться к экзаменам и даже выпускает собственные учебники. 99% наших пользователей —...
Написала немного шуточную статью про государственный веб-дизайн, как его видят мошенники, которые под него маскируются, и как я отличаю мошеннические сайты от настоящих.
За идею статьи спасибо миллиону сомнительных контор, из которых я так и не смогла выбрать одну, которая протравит клещей на даче (
За идею статьи спасибо миллиону сомнительных контор, из которых я так и не смогла выбрать одну, которая протравит клещей на даче (
vc.ru
Государственный веб-дизайн и его подражатели — Дизайн на vc.ru
Yulya Kondratyeva Дизайн3м
Ученые из Нячанга попросили группу из 34 человек, половина из которых молодого (≈24 года) и половина старшего (≈63 лет) возраста нажимать в определенном порядке на кнопки в прототипе умного дома.
Кнопки отличались размерами (от 10 до 25 мм), стилем иконок и соотношением размера текста и иконки.
Количество ошибок
Влияет размер кнопки для всех групп и стиль иконки для возрастных пользователей (3д лучше)
Время выполнения
Соотношение текста и иконки оказало воздействие на молодых пользователей (текст крупнее → меньше время), стиль иконки и размер кнопки (!) не оказывают влияния.
Пожилые пользователи быстрее выполняли задание с более большими кнопками, 3д иконками и кнопками с крупным текстом и мелкими иконками
Выводы
Текст на кнопке важнее иконки, он более однозначный и информативный, поэтому желательно сохранять пропорции как на втором или третьем варианте (1:1 или 1:3) в зависимости от размера кнопки. Если значимая часть пользователей возрастная → то лучше использовать 3д иконки.
Статья
Кнопки отличались размерами (от 10 до 25 мм), стилем иконок и соотношением размера текста и иконки.
Количество ошибок
Влияет размер кнопки для всех групп и стиль иконки для возрастных пользователей (3д лучше)
Время выполнения
Соотношение текста и иконки оказало воздействие на молодых пользователей (текст крупнее → меньше время), стиль иконки и размер кнопки (!) не оказывают влияния.
Пожилые пользователи быстрее выполняли задание с более большими кнопками, 3д иконками и кнопками с крупным текстом и мелкими иконками
Выводы
Текст на кнопке важнее иконки, он более однозначный и информативный, поэтому желательно сохранять пропорции как на втором или третьем варианте (1:1 или 1:3) в зависимости от размера кнопки. Если значимая часть пользователей возрастная → то лучше использовать 3д иконки.
Статья
Как группировать продукты в магазине
Оффлайн
В первом исследовании в двух похожих магазинах расставили йогурты по 1.ингридиентам (с клубникой, с малиной) 2.выгодам для покупателя (для здоровья, для семьи, для мозга).
Всего проследили за 168 покупателями. В первом магазине покупатели взяли в среднем 1.94 йогурта. А во втором 2.89. Почти на треть больше!
Второе исследование проводилось в одном и том же магазине, с промежутком несколько недель. В этот раз проверяли на полке с вареньем на 474 покупателях.
Люди, которые видели полку, расставленную по составу, покупали в среднем 0.4 банки варенья. А по выгодам — 0.6 банки варенья.
141 из них так же ответили на вопрос об их удовлетворенности, в котором расстановка по преимуществам тоже везде обгоняла обычную.
Оффлайн
В первом исследовании в двух похожих магазинах расставили йогурты по 1.ингридиентам (с клубникой, с малиной) 2.выгодам для покупателя (для здоровья, для семьи, для мозга).
Всего проследили за 168 покупателями. В первом магазине покупатели взяли в среднем 1.94 йогурта. А во втором 2.89. Почти на треть больше!
Второе исследование проводилось в одном и том же магазине, с промежутком несколько недель. В этот раз проверяли на полке с вареньем на 474 покупателях.
Люди, которые видели полку, расставленную по составу, покупали в среднем 0.4 банки варенья. А по выгодам — 0.6 банки варенья.
141 из них так же ответили на вопрос об их удовлетворенности, в котором расстановка по преимуществам тоже везде обгоняла обычную.
Онлайн
Исследование проводилось в интернет-магазине и включало 384 респондента. В первом варианте чаи были расставлены по составу (мята, ромашка и т.д), во втором так же по составу, но был добавлен заголовок, в третьем — по эффекту (снимает стресс, улучшает иммунитет).
Первая группа накупила 3.89, вторая 4.18, третья — 4.91 чаев.
Выводы
Не знаю, реально ли это реализовать в маркетплейсе, но, если вы дизайните небольшой интернет-магазин, то определенно стоит предложить группировку по преимуществам. Наверное не стоит делать ее единственной, потому что, кажется, это может усложнить поиск. Но 20% конверсии на дороге не валяются.
https://www.sciencedirect.com/science/article/pii/S0022435924000010?via%3Dihub
Исследование проводилось в интернет-магазине и включало 384 респондента. В первом варианте чаи были расставлены по составу (мята, ромашка и т.д), во втором так же по составу, но был добавлен заголовок, в третьем — по эффекту (снимает стресс, улучшает иммунитет).
Первая группа накупила 3.89, вторая 4.18, третья — 4.91 чаев.
Выводы
Не знаю, реально ли это реализовать в маркетплейсе, но, если вы дизайните небольшой интернет-магазин, то определенно стоит предложить группировку по преимуществам. Наверное не стоит делать ее единственной, потому что, кажется, это может усложнить поиск. Но 20% конверсии на дороге не валяются.
https://www.sciencedirect.com/science/article/pii/S0022435924000010?via%3Dihub
Как лучше писать — «бесплатно» или «за 0 руб.»
Группа корейских ученых проверяла какую формулировку лучше воспринимают покупатели — бесплатно или за 0 долларов.
Во всех экспериментах выигрывает число.
Эффект сильнее, если люди выбирают продукт скорее рационально и с оглядкой на цену, а не покупают на эмоциях. Ученые объясняют тем, что люди сильнее акцентируют внимание на снижении затрат в этот момент, а я думаю просто не надо совершать лишнее когнитивное действие по переводу термина.
В конце статьи есть интересная гипотеза для следующего исследования — как лучше GMO Free или GMO 0%, без сахара или 0г. сахара?
https://www.sciencedirect.com/science/article/abs/pii/S0022435919300831
Группа корейских ученых проверяла какую формулировку лучше воспринимают покупатели — бесплатно или за 0 долларов.
Во всех экспериментах выигрывает число.
Эффект сильнее, если люди выбирают продукт скорее рационально и с оглядкой на цену, а не покупают на эмоциях. Ученые объясняют тем, что люди сильнее акцентируют внимание на снижении затрат в этот момент, а я думаю просто не надо совершать лишнее когнитивное действие по переводу термина.
В конце статьи есть интересная гипотеза для следующего исследования — как лучше GMO Free или GMO 0%, без сахара или 0г. сахара?
https://www.sciencedirect.com/science/article/abs/pii/S0022435919300831
Хочу попробовать искать статьи под запрос. Если у вас есть какие-то варианты продуктовых дизайн-решений из которых вы сейчас выбираете, я попробую найти подходящие исследования и выложу постом.
Лучше, если вопрос будет конкретный «блок с горизонтальной прокруткой карточек или обычная выдача», «лучше писать старую зачеркнутую цену, размер скидки или и то, и другое».
Пишите в комменты к этому посту
Лучше, если вопрос будет конкретный «блок с горизонтальной прокруткой карточек или обычная выдача», «лучше писать старую зачеркнутую цену, размер скидки или и то, и другое».
Пишите в комменты к этому посту
Онбординг VS самостоятельное исследование продукта
Продакт менеджеры часто недооценивают исследовательское поведение пользователей, поэтому продукты зарастают тултипами, турами и всплывающими окнами о новых фичах.
Часто это работает, но я нашла исследование, которое смотрит на обучение пользователей с другой стороны.
В эксперименте Лакшманана и Кришмана 153 пользователя должны были выполнять задания в новом для них аудиоредакторе.
Оказалось, что примерно половина людей становится эффективнее скачками, когда их осеняет, как лучше что-то делать, а не становится эффективнее постепенно, как считалось раньше.
Ощущение «я сам понял что как устроено» — приятное. И у тех студентов, кто его испытывал, повышалось намерение к использованию продукта в будущем. К тому же те, кто исследовал продукт сам, лучше знали его функционал и могли использовать его более гибко.
Когда одной группе вручили инструкцию, исследовательское поведение значительно уменьшилось.
Продакт менеджеры часто недооценивают исследовательское поведение пользователей, поэтому продукты зарастают тултипами, турами и всплывающими окнами о новых фичах.
Часто это работает, но я нашла исследование, которое смотрит на обучение пользователей с другой стороны.
В эксперименте Лакшманана и Кришмана 153 пользователя должны были выполнять задания в новом для них аудиоредакторе.
Оказалось, что примерно половина людей становится эффективнее скачками, когда их осеняет, как лучше что-то делать, а не становится эффективнее постепенно, как считалось раньше.
Ощущение «я сам понял что как устроено» — приятное. И у тех студентов, кто его испытывал, повышалось намерение к использованию продукта в будущем. К тому же те, кто исследовал продукт сам, лучше знали его функционал и могли использовать его более гибко.
Когда одной группе вручили инструкцию, исследовательское поведение значительно уменьшилось.
То есть, когда вы по шагам ведете пользователя по вашему продукту
— они меньше будут исследовать его сами
— не будут ловить ощущение «ого, ничего себе я тут штуку нашел»
— будут испытывать меньшее удовлетворение.
Что делать?
Вряд ли бизнес будет готов полностью отказаться от рассказов про новые фичи и онбордингов.
Но возможно в каких-то случаях стоит не тыкать человека носом в нужную кнопку, а позволить ему самому её найти и порадоваться.
Мне нравится вариант с чекбоксами-тасками: он позволяет пользователю узнать про функционал, но не глушит исследовательское поведение
https://journals.sagepub.com/doi/10.1509/jm.10.0348
по запросу @andekhtyar насчет онбордингов
— они меньше будут исследовать его сами
— не будут ловить ощущение «ого, ничего себе я тут штуку нашел»
— будут испытывать меньшее удовлетворение.
Что делать?
Вряд ли бизнес будет готов полностью отказаться от рассказов про новые фичи и онбордингов.
Но возможно в каких-то случаях стоит не тыкать человека носом в нужную кнопку, а позволить ему самому её найти и порадоваться.
Мне нравится вариант с чекбоксами-тасками: он позволяет пользователю узнать про функционал, но не глушит исследовательское поведение
https://journals.sagepub.com/doi/10.1509/jm.10.0348
по запросу @andekhtyar насчет онбордингов
Виды меню. Какое выбрать
Про расположение меню научных статей очень много, большая часть — в районе 90-х и начала нулевых. Видимо тогда вопрос стоял на повестке. В любом случае, большинство механизмов, которые влияли на выбор людей тогда, кажется, не должны были поменяться.
В начале статей ниже есть обзор литературы по теме, и многие из них друг другу противоречат. Я для себя сделала такой вывод: меню — это текст. Когда люди ищут в нем что-то — они читают. Поэтому лучше, насколько это возможно, располагать подразделы горизонтально.
* на вопрос @alexnikulina «Лучше sidebarы или горизонтальные менюшки?»
Про расположение меню научных статей очень много, большая часть — в районе 90-х и начала нулевых. Видимо тогда вопрос стоял на повестке. В любом случае, большинство механизмов, которые влияли на выбор людей тогда, кажется, не должны были поменяться.
В начале статей ниже есть обзор литературы по теме, и многие из них друг другу противоречат. Я для себя сделала такой вывод: меню — это текст. Когда люди ищут в нем что-то — они читают. Поэтому лучше, насколько это возможно, располагать подразделы горизонтально.
* на вопрос @alexnikulina «Лучше sidebarы или горизонтальные менюшки?»
Горизонтальные меню на английском языке дают более высокую производительность, чем вертикальные меню на английском. Однако вертикальные китайские меню работают лучше, чем горизонтальные китайские. (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)
Люди работают с меню, как с чтением, поэтому европейцам искать в горизонтальном меню должно быть проще, чем в вертикальном.
В другой статье, довольно новой, время выполнения задач в горизонтальном и вертикальном меню не различается, но люди предпочитают горизонтальное. (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)
Если хочется разобраться поподробнее, то советую посмотреть большой обзор 112 исследований, удобно использовать как путеводитель, там очень хорошо кратенько описано про что каждое из них.
Заглавная картинка тоже оттуда — она показывает какие косяки в доступности особенно портят жизнь.
https://www.sciencedirect.com/science/article/pii/S0920548924000928
по вопросу @Mansureon «Как accessibility влияет на продуктовые метрики?»
P.S. Нашла еще в процессе дурацкое исследование про то, помогает ли упрощение языка (частоупотребительные слова вместо сложных, без аббревиатур, больше глаголов и т.д.). С контринтуитивным выводом, где от этого текста снижалась удовлетворенность и намерение использовать сайт. В комментах напишу, как они добились такого уникального результата.
Заглавная картинка тоже оттуда — она показывает какие косяки в доступности особенно портят жизнь.
https://www.sciencedirect.com/science/article/pii/S0920548924000928
по вопросу @Mansureon «Как accessibility влияет на продуктовые метрики?»
P.S. Нашла еще в процессе дурацкое исследование про то, помогает ли упрощение языка (частоупотребительные слова вместо сложных, без аббревиатур, больше глаголов и т.д.). С контринтуитивным выводом, где от этого текста снижалась удовлетворенность и намерение использовать сайт. В комментах напишу, как они добились такого уникального результата.
Доступность сайта помогает только людям с ограниченными возможностями или обычным пользователям тоже?
Короче, это довольно очевидно, но когда вы повышаете доступность сайта\приложения, это положительно влияет на лояльность, удовлетворенность и доверие (исследование румынских ученых 2020 года).
Но надо учитывать, что в этом исследовании выводы сделаны на основании опросника.
А в другом исследовании, швейцарском, на 131 человека, проверили количественные метрики (время выполнения задачи и процент выполнения). И различий в них не было, вне зависимости от соответствия сайтов стандартам веб-доступности, в том числе для тех пользователей, которые пользовались экранными лупами и программами чтения с экрана. Но предпочтения в опроснике люди тоже отдавали доступному сайту.
Звучит как будто пользователи приспособились к печальной реальности и, если надо что-то сделать, то сделают, даже если на сайте доступность хромает. Но получат чуть меньше удовольствия и доверять этому сайту будут меньше.
Короче, это довольно очевидно, но когда вы повышаете доступность сайта\приложения, это положительно влияет на лояльность, удовлетворенность и доверие (исследование румынских ученых 2020 года).
Но надо учитывать, что в этом исследовании выводы сделаны на основании опросника.
А в другом исследовании, швейцарском, на 131 человека, проверили количественные метрики (время выполнения задачи и процент выполнения). И различий в них не было, вне зависимости от соответствия сайтов стандартам веб-доступности, в том числе для тех пользователей, которые пользовались экранными лупами и программами чтения с экрана. Но предпочтения в опроснике люди тоже отдавали доступному сайту.
Звучит как будто пользователи приспособились к печальной реальности и, если надо что-то сделать, то сделают, даже если на сайте доступность хромает. Но получат чуть меньше удовольствия и доверять этому сайту будут меньше.
Вежливые попапы против обычных
Ученые сравнивали блокирующие и неблокирующие попапы, они их называют вежливые и традиционные (прикольная терминология, кстати. Подход с вежливыми попапами авторы еще называют демократическим).
Они собрали два флоу и попросили 88 человек, часть на мобильных устройствах, а часть на десктопах, выполнить задания.
Заметность в традиционных попапах была выше — хотя бы один или несколько попапов заметили все 100% участников, в то время как вежливые только 77%.
Вторая гипотеза была в том, что пользователи будут чувствовать большую безопасность в приложении с вежливыми всплывающими окнами. Но численно эта гипотеза не подтвердилась. Хотя в комментариях многие пользователи отмечали, что обычные попапы нарушают их границы.
С другой стороны среднее время проведенное в вежливом всплывающем окне составляло 6,4 секунды, а традиционные всплывающие окна закрывали через 1,1 секунды.
Ученые сравнивали блокирующие и неблокирующие попапы, они их называют вежливые и традиционные (прикольная терминология, кстати. Подход с вежливыми попапами авторы еще называют демократическим).
Они собрали два флоу и попросили 88 человек, часть на мобильных устройствах, а часть на десктопах, выполнить задания.
Заметность в традиционных попапах была выше — хотя бы один или несколько попапов заметили все 100% участников, в то время как вежливые только 77%.
Вторая гипотеза была в том, что пользователи будут чувствовать большую безопасность в приложении с вежливыми всплывающими окнами. Но численно эта гипотеза не подтвердилась. Хотя в комментариях многие пользователи отмечали, что обычные попапы нарушают их границы.
С другой стороны среднее время проведенное в вежливом всплывающем окне составляло 6,4 секунды, а традиционные всплывающие окна закрывали через 1,1 секунды.
Исследователи призывают, несмотря ни на что, использовать свой демократический и вежливый подход, в противовес традиционному. Скорее всего, он должен давать выгоды при более длительном использовании, попробую поискать исследования, которые замеряют эффект на более длинной дистанции.
по вопросу @mirge «Попапы в нативных мобильных приложениях»
https://www.researchgate.net/publication/360796163_Polite_Interaction_Design_Capturing_the_Users_Attention_Without_Compromising_their_Experienced_Trust
по вопросу @mirge «Попапы в нативных мобильных приложениях»
https://www.researchgate.net/publication/360796163_Polite_Interaction_Design_Capturing_the_Users_Attention_Without_Compromising_their_Experienced_Trust
ResearchGate
(PDF) Polite Interaction Design: Capturing the Users Attention Without Compromising their Experienced Trust
PDF | Pop-ups have been widely used to control users’ attention, causing a high degree of irritation and dissatisfaction. We explore so-called ‘polite’... | Find, read and cite all the research you need on ResearchGate
Боль расставания с деньгами и шрифт
Мне очень нравится термин Pain of Payment. Когда человек решается на покупку, то на него действуют эти две силы — «жаба» и желание купить.
На «жабу» действует много факторов, например, платить карточкой менее больно, чем наличкой, и вообще есть довольно много исследований про это.
Нашла одно интересное про боль оплаты и ее зависимость от шрифта.
Угловатый шрифт усиливает осознание расходов по сравнению с округлым шрифтом.
Ученые считают, что это связано с восприятием «резкости» углового шрифта, что усиливает боль расставания с деньгами. То есть цены, показанные угловым шрифтом, увеличивают колебания перед нажатием кнопки «Оплатить».
Мне очень нравится термин Pain of Payment. Когда человек решается на покупку, то на него действуют эти две силы — «жаба» и желание купить.
На «жабу» действует много факторов, например, платить карточкой менее больно, чем наличкой, и вообще есть довольно много исследований про это.
Нашла одно интересное про боль оплаты и ее зависимость от шрифта.
Угловатый шрифт усиливает осознание расходов по сравнению с округлым шрифтом.
Ученые считают, что это связано с восприятием «резкости» углового шрифта, что усиливает боль расставания с деньгами. То есть цены, показанные угловым шрифтом, увеличивают колебания перед нажатием кнопки «Оплатить».
Доводы «Против»
Эффект подтвердился у японцев, а у североамериканцев был гораздо меньше (кстати, это объясняется индивидуализмом, и это общий тренд, что индивидуалистам нравятся угловатое, а коллективистам — кругленькое).
Шрифт, использованный для примера — странненький. Было бы нагляднее, если бы использовался круглый в сравнении со стандартной Гельветикой.
Доводы «За»
В целом по другим статьям видно, что лучший способ сделать оплату менее болезненной — это сделать ее незаметной.
Поэтому необычный шрифт, привлекая внимание к цене, заставляет задержать на ней внимание, что переносит фокус с товара на его цену.
https://ora.ox.ac.uk/objects/uuid:e9d6c67f-f55f-4905-bbf5-85c268e705f4/files/s6969z171s
Эффект подтвердился у японцев, а у североамериканцев был гораздо меньше (кстати, это объясняется индивидуализмом, и это общий тренд, что индивидуалистам нравятся угловатое, а коллективистам — кругленькое).
Шрифт, использованный для примера — странненький. Было бы нагляднее, если бы использовался круглый в сравнении со стандартной Гельветикой.
Доводы «За»
В целом по другим статьям видно, что лучший способ сделать оплату менее болезненной — это сделать ее незаметной.
Поэтому необычный шрифт, привлекая внимание к цене, заставляет задержать на ней внимание, что переносит фокус с товара на его цену.
https://ora.ox.ac.uk/objects/uuid:e9d6c67f-f55f-4905-bbf5-85c268e705f4/files/s6969z171s