Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

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

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

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

NEW YORK TIMES 1960

Этот макет карточки (реклама или новости) в газете располагается в прямоугольном контейнере и содержит заголовок, подзаголовок, резюме, изображение и так далее. В цифровом мире компонент карточки включает в себя почти такую же компоновку, но свои элементы. Кроме того, если мы добавим стили CSS к компоненту карточки, мы можем сделать его волшебным, как в Daily Prophet, газете в «Гарри Поттере».

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Давайте подробнее рассмотрим стили состояния компонента карточки.

1. Исследования дизайна

Прежде чем я приступаю к разработке дизайна, я следую этим 4 шагам:

Сбор информации → Анализ данных → Поиск закономерностей → Организация идей

В результате этого исследования я обнаружила 4 различных стиля состояния для компонента карточки:

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Стили состояния карточки:

по умолчанию: состояние без взаимодействия с пользователем

наведение курсора: обычно срабатывает, когда пользователь наводит на элемент курсор (указатель мыши)

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

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

Я исследовала более 20 различных карточных компонентов из реальных продуктов. Удивительно, но было трудно найти сайты, на которых реализованы все / любые три из этих стилей состояния.

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

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

Шаблоны: сгруппированные элементы и отдельные элементы

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

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

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

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

Примеры шаблонов

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

2. Wireframing

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

Подумайте о структуре элементов и их особенностях

Подумайте о пользовательском потоке и взаимодействиях с пользователем

В последнем проекте у меня была задача перепроектировать компонент карточки. Мне нужно было… добавить две функции в компонент карточки:

Открытие модального компонента, чтобы показать конкретную информацию о товаре, когда пользователи нажимают на компонент карточки

Добавление товара в корзину, когда пользователи нажимают кнопку «Добавить в корзину» (CTA)

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

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

После обсуждения с клиентом мы решили выбрать третий вариант.

3. Прототипирование

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

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

Совет 1. Каждое действие имеет отдельный стиль состояния.

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

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

Совет 2. Повышение

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Светлая тема повышения Material design

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Темная тема повышения Material design

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

Повышение Material design

Пример кода — Светлая и темная темы — повышение

Совет 3. Измените цвета

Измените цвета для каждого состояния элементов.

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Совет 4. Добавьте микро-взаимодействия к медиа (изображениям)

Применяйте различные анимации, такие как масштабирование, фильтр, эффект ряби или преобразования.

Совет 5. Добавьте функцию продолжительности и времени перехода

Это делает переход более плавным для смены состояния.

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Совет 6. Оставьте синий цвет для стиля выделения фокусом

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

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

Давайте перейдем к этапу разработки.

4. Разработка

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

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Как я упоминала выше, я разделила в HTML компоненты карточки на две группы.

CSS: 4 проблемы и решения

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

1. Проблема специфичности CSS для состояний

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Проблема порядка состояний

Если вы в CSS опишите состояния в таком порядке, наведение → активное → фокус, стили активного состояния будут переписаны стилями фокуса. Это означает, что активное состояние также будет отображать стилями состояния фокуса из-за специфичности.

Решение

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Решение порядка состояний

Активное состояние будет содержать стили фокуса. Поэтому нам нужно сбросить стили фокуса в активном состоянии.

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Решение порядка состояний

Если вы используете SASS, вы можете создать заполнитель для стилей сброса и применить его там, где это требуется. Вы можете использовать @extend для ссылки на сброс заполнителя.

2. Проблема ширины границы

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Можете ли вы определить, в чем проблема с компонентом карточки выше?

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

Решение

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

border-width: такой же, как стиль состояния фокуса

border-color: transparent

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

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Посмотрите на это!!! Все так аккуратно сейчас.

3. Проблема стиля фокуса после события клика

Возможно, вы уже столкнулись с этой проблемой. После того, как пользователь нажмет кнопку или ссылку, будут отображены стили состояния фокуса. Кроме того, браузеры ведут себя по-разному с проблемой состояния фокуса. Например, Chrome по-прежнему отображает стиль состояния фокуса, когда вы нажимаете и ссылку, и кнопку, тогда как Safari сбрасывает стиль состояния фокуса.

Рассмотрение кейса пользовательского интерфейса: стили компонентов карточки

Браузеры ведут себя по-разному относительно проблемы состояния фокуса

Не делайте ту же ошибку, что и я

Чтобы избежать этого, мы могли бы использовать метод JavaScript blur.

Однако использовать его не рекомендуется, поскольку .blur() теряет выделение фокусом для ссылки <a>. В то же время, кажется, что элемент <button> сохраняет выделение фокусом.

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

Соображения

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

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

выполняется переход на другую страницу (ссылка): фокус перемещается на другую страницу

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

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

6. Заключение

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

Автор: nana Jeon

Источник: https://blog.prototypr.io

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Фреймворк Bootstrap 4. Руководство по адаптивной верстке

Овладейте версткой с Bootstrap и созданием тем для WordPress!

Подробнее

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий