Исследование главной страницы сайтов электронной коммерции. 8 распространенных UX-ошибок

Основные выводы:
Тест 60 веб-сайтов электронной коммерции, проведенный в конце 2020 года показывает, что в целом у домашних страниц неплохой UX.
Однако 32% сайтов предоставляют либо посредственный, либо плохой опыт.

Недопущение 8 распространенных ошибок, обсуждаемых в этой статье – первый шаг к улучшению UX домашней страницы.

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

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

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

Тест содержит 10 900+ элементов домашней страницы и категорий, которые были вручную проверены и оценены командой UX-исследователей Baymard, а также 3100 примера от 60 самых прибыльных сайтов электронной коммерции США и Европы.

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

Содержание:
Текущее состояние UX домашних страниц
8 распространенных UX-ошибок и стратегических упущений домашних страниц
1. На главной странице 6% сайтов представлен недостаточно широкий ассортимент товаров
2. 59% сайтов используют на главной странице чрезмерно агрессивную и отвлекающую рекламу
3. 75% сайтов, использующих карусели, используют их неправильно
4. 62% сайтов не помогают пользователям выбрать определенную область действия непосредственно с главной страницы
5. 19% сайтов не используют на главной странице персонализированные изображения и дизайн
6. 22% сайтов не отображают поле поиска на главной странице
7. 35% сайтов неправильно используют выбор страны и языка
8. 43% сайтов не используют эффективный стиль интерактивных элементов интерфейса
Качество UX домашней страницы снизилось

Читать: https://ux.pub/issledovanie-glavnoy-stranitsy-saytov-elektronnoy-kommertsii-8-rasprostranennyh-ux-oshibok/

6 важных обновлений Behance. Интеграция прототипов, 3D-объектов, NFT-токенов, стримы

Интеграция интерактивных прототипов
Раньше можно было встраивать прототипы из InVision или Marvel, в этой функции нет ничего инновационного, но после обновления функциональности прототипа в Figma кейсы можно украсить макетами с анимацией и эффектом наведения курсора. Это лучше, чем просто JPEG, не так ли?

Чтобы добавить в кейс прототип, вам необходимо связать макеты в Figma, нажать кнопку «Get embed code» в разделе просмотра прототипа и вставить код в кейс с помощью кнопки «Embed Media» или «Embed Prototype». Аналогичный алгоритм присутствует в Adobe XD, но лично я больше привык работать с сервисом Figma. Если вы хотите использовать прототипы из Figma, будьте осторожны, так как к исходному коду можно получить доступ через инспектор кода. Чтобы этого избежать, вы можете перенести макеты в новый документ, запретить копирование объектов или растрировать все элементы в прототипе. А для особо любопытных можно оставить пасхалку в исходном файле.


Добавление 3D-объектов
Эта функция поможет дизайнерам интерьеров показать комнату изнутри, позволяя наблюдателю совершить прогулку с помощью 3D-тура. Кроме того, эта функция подходит, если вам нужно вставить 3D-объект. Например, если вы хотите показать дизайн созданного вами предмета. Чтобы добавить объект, просто скопируйте ссылку из Sketchfab, ArtStation или Autodesk.

Алгоритм действий такой же, как и у прототипов. Кроме того, список источников для импорта довольно обширен: Adobe XD, Adobe Spark, Adobe Voice, Amazon Widget, Appointy, Artstation, Bandcamp и др.

Несмотря на то, что Figma является прямым конкурентом Adobe XD, захватившим значительную часть рынка Adobe, было приятно увидеть ее в этом списке.
Возможность прикрепить файл к кейсу
При создании кейса вы можете указать ссылку на скачивание файла. У вас есть возможность предоставить ссылку на покупку шрифта, который использовался в кейсе или ui-kit, который вы не прочь подарить Junior-дизайнерам для экспериментов. Это было возможно и раньше, но Adobe решила избавиться от этого костыля.

Creative Challenges
Это раздел с небольшими мастер-классами по продуктам Adobe: Photoshop, Illustrator, XD. Здесь вы найдете ежедневные задания для практического изучения функциональности графических редакторов. Задачи короткие и простые, идеально подходят для начинающих. По завершении результат можно отобразить в виде кейса, а лучшие работы получат достижения. Приятным бонусом станет дополнительная ачивка для коллекции.
Проведение собственных стримов

Теперь вы можете не только смотреть прямые трансляции и вебинары, но и записывать свои собственные. Теперь Behance предоставляет возможность проведения вебинаров на собственной платформе. Стримы можно записывать, демонстрируя работу на iPad или ПК. Если у вас есть что рассказать о работе с Fresco, Illustrator или Photoshop на iPad, сделайте это на Behance. Раздел Live был создан именно для этого. Завершенные трансляции будут сохранены в разделе Live Streams.

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

Маркетплейс NFT-объектов
Нет, это не шутка. Теперь вы можете разместить в портфолио свои NFT-токены.
Behance позволяет размещать работы в своем профиле на вкладке NFT, если вы продаете свои работы через торговые площадки. Для этого вам необходимо добавить кошелек и привязать учетную запись платформы к своему портфолио с помощью MetaMask, Phantom или Temple. Тип фреймворка, на котором хранится ваш NFT-токен, не имеет значения; главное, чтобы через MetaMask можно было сделать ссылку.


Источник

Типографика данных в интерфейсах

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

Обзор
В нашей дизайн-системе есть 4 основных стиля типографики, которые помогают потребительским товарам оставаться простыми (принцип K.I.S.S.): стили Headline, Title, Subtitle, и Body.

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

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

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

Наши основные стили и рекомендации не учитывали все сценарии использования оперативной типографики. Так появился TVA (Type Variance Authority), задача которого не только устранять наиболее серьезные нарушения, но и находить варианты, необходимые для поддержки типографики данных.

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

Как дизайнер, размещающий этот кусок текста в интерфейсе, скажите, какую цель или функциональную роль он играет в опыте?

Источник

Доступность: искусство дизайна для всех

7 рекомендаций по созданию более инклюзивного интерфейса.

Одно из самых распространенных модных словечек в дизайн-сообществе – доступность. Но действительно ли мы знаем, что это значит? Доступность – это не только о возможности считывания с экрана, контрасте или больших шрифтах. На фундаментальном уровне доступность – это право каждого человека на доступ к информации. Мы живем в разнообразном мире, и просто неправильно предполагать, что люди получают доступ к цифровым продуктам и воспринимают их одинаково. То, что на самом деле означает доступность, – это проверка, доступен ли ваш контент для всех людей в равной степени.

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

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

Читать статью: https://design-glory.com/?p=9322

Дизайн-система: синдром LEGO-наборов

Обеспечение баланса между согласованностью и вкладом в развитие дизайн-систем должно быть первоочередной задачей дизайнера.

Что произойдет, если 5 дизайнеров будут одновременно создавать текстовое поле?

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

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

Библиотека паттернов может породить синдром наборов LEGO

Без сомнения, собранные наборы конструктора LEGO выглядят великолепно.
Однако, как отмечает доктор философии Дерек Кабрера, взрослые, производящие наборы LEGO, мыслят творчески. Но в итоге дети учатся следовать инструкциям.

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

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

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

Я подозреваю, что синдром наборов LEGO – один из факторов, которые не дают нам возможности внести свой вклад.

Проблема этого явления заключается в том, что система устаревает. Без какого-либо участия и вклада со стороны сообщества это просто библиотека паттернов, а не дизайн-система.

Поиск баланса
Если вы хотите использовать библиотеку паттернов для устранения непреднамеренной несогласованности, подумайте, какую культуру в компании вы хотите сформировать.
Участие и вклад сообщества – вот что отличает дизайн-системы от библиотек паттернов. Я узнал это на собственном горьком опыте в предыдущей компании, и потратил более 3 месяцев, чтобы решить проблему отсутствия вклада в развитие дизайн-системы.

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

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

Источник

Скрытое vs Неактивное состояние

Когда следует использовать скрытые/неактивное состояние?

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

Неактивное состояние

Преимущества отображения кнопки в неактивном состоянии:

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

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

Недостатки отображения кнопки в неактивном состоянии:

Это увеличивает когнитивную нагрузку: оставленные неактивные кнопки заставляют пользователей лишний раз думать. Вид неактивной кнопки вызывает у них замешательство: почему она недоступна и как ее активировать? Согласно «Не заставляйте меня думать» Стива Круга, мы должны удалить элементы, которые заставляют пользователя думать.

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

Доступность: их трудно увидеть – Руководство по обеспечению доступности веб-контента не требует достаточных коэффициентов контрастности для неактивных кнопок. Они также не дают никакого фидбека пользователям.

Скрытое состояние

Преимущества скрытия кнопки:

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

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

Недостатки скрытия кнопки:

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

Плохая обнаруживаемость: пользователи могут искать скрытый вариант.

Какой способ использовать?

Прежде чем решить, какое состояние использовать, попытайтесь ответить на следующие вопросы: Что нужно знать пользователю на этом этапе? Что пользователю нужно сделать на этом этапе? Узнает ли пользователь об этой функции? Будет ли пользователь тратить много времени на ее поиски?

Ответы на вышеуказанные вопросы могут помочь нам выяснить, какое состояния использовать.

Выбирайте неактивное состояние, когда:

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

Если вы хотите, чтобы пользователь знал, что элемент управления существует, но сейчас неактивен.

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

Выбирайте скрытое состояние, когда:

Пользователь не имеет права использовать элемент управления, а ситуация, когда этот элемент будет ему доступен, не наступит никогда.

Если это элемент управления, который активен только в очень редких ситуациях. Не показывайте пользователю кнопку, которую нельзя использовать или которую нельзя активировать какими-то действиями.

Если на странице много отключенных функций. Например, целый дополнительный блок входных данных формы.

Источник