Делаем интерфейс сайта удобным для людей и эффективным для бизнеса
Карточки — символ современного веба. Небольшой блок с самой важной информацией, который работает как ссылка на страницу с продуктом или постом. Оформление ссылок на сайте в виде карточек позволяет быстро просматривать и фильтровать информацию. Написали руководство, как эффективно использовать карточки в интерфейсе. Статья будет полезна всем, кто работает с контентом на сайте.
Карточка — инфоблок, элемент интерфейса, который работает как превью более подробного контента. Она содержит ключевую информацию и служит ссылкой на страницу с более подробной информацией.
Карточки сейчас используют везде — когда мы выбираем авиабилеты, листаем посты в ленте соцсетей, когда заказываем обед на сайте доставки еды, скроллим сайт с новостями. Обычно их располагают на экране в группе — плиткой или списком равнозначных единиц контента.
Зачем использовать карточки при создании сайта?
Главное достоинство карточки — универсальность. Она подходит для любой темы и случая, для разных платформ и устройств. Правильно спроектированная карточка (в которой прослеживается логика контента) улучшает UX сайта или приложения.
Преимущества карточек:
1. Интуитивность. Они понятны пользователю. Как в жизни, карточки — это визуальная подсказка для нашего мозга, которая воспринимает этот элемент как цельную единицу информации.
2. Информация легко усваивается. Карточки — это информация, разбитая на небольшие кусочки. Такая подача ценится людьми, так как экономит их время, помогая быстрее понять суть. Слона проще есть по частям.
3. Привлекательность. Такой дизайн часто насыщен видео, картинками. Это привлекает пользователей, которые охотнее воспринимают изображения, чем текст, и таких большинство.
4. Подходят для отзывчивого дизайна. Карточки можно как угодно крутить: прямоугольная форма вписывается в разные ориентации и в любые размеры экранов (можно масштабировать во все стороны). Это значит, что у пользователей остается один опыт на всех устройствах.
Делаем: когда нужны карточки
Тематические блоки. Оформление ссылок на сайте в виде карточек хорошо подходит, если на вашей странице много равнозначных элементов. На сайте интернет-магазина удобно группировать тематические блоки — рубрики — по карточкам: верхняя одежда, обувь, сумки, юбки.
Интерактивный контент
. Карточки удобно использовать для коротких действий с одной кнопкой. Это может быть кнопка «купить», «узнать подробнее» и другие.
Когда люди просматривают, а не ищут.
Оформление ссылок на сайте в виде карточек удобно для просмотра информации. Например, когда будущий заказчик просматривает портфолио, у него нет задачи найти какой-то конкретный проект. Он сканирует все работы, чтобы получить представление об уровне исполнителя.
Идеи для использования карточек
Общий принцип: то, что можно представить в виде списка, легко перевести в формат карточек.
Что можно показать карточками:
- Серия статей на главной странице блога
- Список вакансий
- Работы в портфолио
- Вопросы и ответы (FAQ)
- Услуги агентства
- Направления для туристического агентства
- Объекты недвижимости на сайте девелопера
- Оглавление для рецептов
- Номера мини-отеля или хостела
- Стили в школе танцев
- Навигация по лонгриду
Карточки среди нас.
Человек всегда был окружен карточками как физическими носителями данных. Открытка на день рождения, обмен визитками на деловой встрече, водительские права и игра в дурака — все эти карточки объединяет одно: мы быстро считываем с них определенное сообщение.
Веб-карточка, как и ее материальный аналог, сообщает пользователю самую необходимую информацию. Она хорошо воспринимается на интуитивном уровне, потому что этот формат нам давно и хорошо знаком.
Не делаем: когда карточки не к месту
Строгий порядок. Когда нужно расположить контент по порядку, карточки не подойдут — они, наоборот, подчеркивают равнозначность контента и делают объекты похожими друг на друга.
Галерея изображений.
Картинки активно используют в карточках, но когда вы приводите человека на страницу с галереей фотографий — например, с прошедшей вечеринки, карточки затруднят восприятие информации. Лучше просто расставить картинки по сетке, чтобы глазу было легче усваивать контент.
Источник выше изложенного материала, а так же его более полная версия находится на: https://tilda.education/articles-how-to-use-cards-on-a-website