Как изображения помогают покупателям ориентироваться на сайтах

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

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

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

1. Исследование эффективности изображений на примере сайтов  Индии 

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

К сожалению, большинство индийцев не говорят по-английски. Согласно переписи населения Индии 2011 года, лишь 10% населения владеют английским языком. Даже если многие люди плохо понимают английский или совсем не понимают его, им все равно приходится использовать английский язык в Интернете.

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

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

• рост использования мобильных устройств;
• увеличение безналичной экономики Индии;
• пандемия 2020 года.

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

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

2. Об исследовании

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

3. Использование изображений для людей, которые не являются носителями языка

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

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

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

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

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

4. Визуальные элементы обеспечивают более комфортное взаимодействие с сайтом

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

Firstcry,  коммерческий сайт, который продает товары для младенцев и детей, активно использует изображения в своих элементах навигации на сайте. Одна участница, говорящая на хинди, которая не читала по-английски, смогла оформить покупку на сайте, полагаясь на эти изображения. Участница покупала подарок для трехлетней дочери подруги. На странице "Магазин по категориям" Firstcry она увидела фотографию девочки с рюкзаком (с надписью "ШКОЛЬНЫЕ ПРИНАДЛЕЖНОСТИ"). Судя по скриншоту, она решила купить рюкзак для дочери своей подруги или же для своей дочери.

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

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

После того, как участница выбрала категорию “школьные принадлежности”, она увидела изображения пяти разных рюкзаков, на каждом из которых был указан размер: 10, 12, 14, 16 и 18 дюймов. Для участницы было не очевидно, что эти изображения предлагают ей выбрать подходящий размер, чтобы сузить область поиска рюкзаков.

Она выбрала категорию “18 дюймов” (самый большой размер), основываясь на том, что ей больше всего понравился дизайн рюкзака на данном изображении (принцессы Диснея). Когда ей доставили выбранный рюкзак, он оказался слишком большим для трехлетней девочки, поэтому данная покупка ее очень разочаровала. Она высказала свое недовольство на хинди: «Я не могу найти хорошие рюкзаки для маленьких детей, все эти рюкзаки большие».

Самый лучший подход к навигации с помощью визуальных элементов продемонстрировал индийский мебельный сайт Urbanladder.com. Категории на сайте представлены в виде плоских контурных иконок.

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

Рассмотрим фото ниже с сайта  Pepperfry, другого индийского мебельного сайта.

Если бы вы увидели только это фото, не имея возможности прочитать текст, поняли бы вы, какую категорию продукта оно представляет? Вы могли догадаться, что оно обозначает обеденные гарнитуры, но оно также может означать:

• Обеденные стулья;
• Декор обеденной кухни;
• Современные обеденные гарнитуры;
• Обеденные гарнитуры из дерева.

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

5. Проверьте ваши изображения на наличие информационного запаха

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

Чтобы это выяснить, предоставьте пользователям изображения без каких-либо текстовых пометок и задайте им следующий вопрос: «Какие типы продуктов, основываясь на изображении, вы ожидаете здесь увидеть?». Если информационный запах присутствует в достаточной мере, участники должны легко назвать категорию продуктов, которую описывает изображение.

6. Визуальные элементы на странице товара

Страницы товаров часто включают такую важную информацию как:

• Описание характеристик;
• Цена;
• Технические характеристики;
• Размер или цвет;
• Инструкции по стирке и уходу;
• Гарантии;
• Комплектация.

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

7. Фото и видео товаров

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

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

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

8. Иконки для указания важной информации

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

Заключение

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