ГлавнаяБлог13 советов от UX/UI-дизайнера, как сделать любой интернет-магазин лучше
13 советов от UX/UI-дизайнера, как сделать любой интернет-магазин лучше
Раньше дизайн интернет-магазинов сводился только к тому, чтобы сделать сайт внешне привлекательным и продемонстрировать через него ценности компании-заказчика. Но часто, несмотря на всю эстетику интерфейса, посетитель интернет-магазина сталкивался с неудобными настройками фильтров, совершал десятки безрезультатных кликов, нервничал из-за запутанной формы оформления заказа и т.п. В итоге интернет-магазин оставлял у него негативные впечатления, и посетитель зарекался посещать его вновь.
При разработке дизайна надо помнить, что по ту сторону интернет-магазина находится потенциальный клиент. И ему может быть все равно, как красиво подобрана цветовая схема или стильно разработан логотип бренда. Важнее, чтобы интернет-магазин решил его задачу — легко и быстро приобрести нужный товар. То, как покупатель почувствует себя при взаимодействии с сайтом, во многом определит его отношение к бренду, к продукту и напрямую повлияет на продажи.
Сделать покупки в интернет-магазине или маркетплейсе приятным занятием и не упустить потенциальных покупателей поможет UX/UI-дизайнер.
Для начала разберемся в терминах.
UX-дизайн (User Experience, пользовательский опыт) — создание архитектуры сайта, который будет удобен для пользователя. Элементы расположены интуитивно понятно, пользователь совершает целевое действие за минимум времени и усилий.
UI-дизайн (User Interface, пользовательский интерфейс) — создание визуального облика сайта (цвета, шрифты, отступы, блоки с информацией). Внешний вид сайта отзывается у целевой аудитории, на нем хочется задержаться подольше.
Вместе UX- и UI-дизайн отвечают за то, чтобы интернет-магазин был приятен глазу и удобен для покупок.
UX/UI-дизайнер Cart-Power Сергей Рогов написал подробный гайд для нашей внутренней работы о том, как сделать дизайн любого проекта лучше. Мы решили поделиться с вами самыми полезными его советами: они подходят как для интернет-магазинов на стадии разработки, так и для редизайна существующих. Следуя им, можно добиться улучшения пользовательского опыта и роста конверсии.
Сергей Рогов работает в IT уже более 8 лет, а с 2018 года занимается UX/UI-дизайном. Он был в команде по запуску таких проектов как: интернет-магазин «Сотовик-М», сервис по подбору и резервированию вин «Красностоп» (этот проект завоевал премию Tagline Awards), белорусский маркетплейс «Авокадо», РАД (российский аукционный дом), разрабатывал премиальные шаблоны для CS-Cart.
1. Экспериментируйте с цветом и толщиной шрифта
Когда нужно выделить важную информацию, часто ограничиваются только изменением размера шрифта. Но выстраивать иерархию в тексте можно также с помощью цвета или толщины.
2. Не используйте серый текст на цветном фоне
Светло-серый текст на белом фоне выглядит хорошо. Так можно «ослабить» его и сделать более приятным глазу. Серый на цветном фоне — неудачное решение, текст теряется.
3. Не используйте много границ
Границы — это очевидный вариант, как отделить два элемента друг от друга. Но когда границ слишком много, дизайн выглядит перегруженным. Как вариант, можно использовать выделение цветом.
4. Оставьте маленькие изображения маленькими
Векторные изображения не ухудшаются по качеству, когда вы увеличиваете их размер, но могут потерять или приобрести лишние акценты.
5. Используйте контраст
Контраст помогает подчеркнуть иерархию текста и обратить внимание на важные элементы. Он может быть по размеру или цвету, а также между объектами или наборами объектов.
6. Используйте минимальное количество шрифтов
Использование более трех шрифтов одновременно перегружает интерфейс. Лучше всего ограничить их до 1-2 вариантов, но при этом можно «поиграть» с разными начертаниями одного шрифта.
7. Ограничьте длину строк
Пользователь легко фокусируется в начале строки, но к концу его внимание постепенно рассеивается. Чтобы не дать посетителю заскучать и удержать его внимание на информации, придерживайтесь оптимальной длины строки. Для устройств с диагональю более 10 дюймов — это 50-75 символов; для телефонов — 30-45 символов.
8. Используйте правильное выравнивание
Выравнивание по ширине создает много пустого пространства. Из-за этого снижается читабельность контента, так как нарушает ритм чтения и пользователи вынуждены пристально вглядываться в абзац. Такое выравнивание хорошо для документов, но не для текстов в интерфейсе.
Выравнивание по центру больше подходит для заголовков или небольших текстов, чтобы выделить определенные аспекты и создать визуальную иерархию.
Для текстов в интерфейсе лучше всего подходит выравнивание по левому краю. Оно выглядит естественно, не затрудняет восприятие и не нагружает глаза.
9. Применяйте правило семи
В 1956 году когнитивный психолог Принстонского университета Джордж А. Миллер вывел теорию о том, что среднестатистический человек может удерживать в кратковременной памяти только 7 плюс-минус 2 элементов. Этот закон стал применяться в UX/UI-дизайне.
Пользователю надо заскочить на сайт и быстро купить нужный товар. То есть обычно у него нет времени разбираться, что где находится в интерфейсе интернет-магазина. Чтобы облегчить путь пользователя к покупке, информацию в интернет-магазине лучше всего организовывать небольшими порциями по 5-9 пунктов в каждом.
10. Применяйте правило трех кликов
У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это правило работает даже для сложных каталогов типа интернет-магазина Wildberries: главная страница — каталог — подкаталог — товар.
Особенно стоит следить за количеством кликов в корзине: каждый лишний шаг при оформлении заказа увеличивает риск, что пользователь откажется от покупки.
В каталоге может использоваться много фильтров, которые вроде бы увеличивают число кликов. Но это идет интернет-магазину на пользу и помогает пользователям находить нужные товары.
11. Не противоречьте тому, что написали
UX — это об удобстве пользователя. Не вводите его в заблуждение двойными смыслами. Если кнопка называется «удалить 2 товара из корзины», то она должна действительно удалять оба товара.
12. Следите за композицией
Старайтесь, чтобы композиция вашего проекта была сбалансирована. То есть даже если на первый взгляд она выглядит хаотичной, элементы должны располагаться равномерно в соответствии со своей значимостью. Если интерфейс сбалансирован, посетители подсознательно чувствуют себя комфортно.
13. Не допускайте информационной перегрузки
В мире дефицита времени пользователи давно перестали читать текст. Обычно они просматривают экран крупными блоками, выхватывая значимую информацию. Чтобы обратить внимание пользователя на важные элементы и помочь ему «пробежать» страницу глазами, разбавляйте информацию белым пространством.
Белое пространство — это пустая область между элементами дизайна или внутри элементов. Несмотря на название, белое пространство не обязательно белое. Это может быть любой цвет, текстура, паттерн и даже фоновое изображение. Главное, чтобы на этом фоне хорошо считывался контент.
Эти советы универсальны. Они подойдут любым интернет-магазинам или сервисам на любой стадии разработки. Но для наиболее эффективных результатов UX/UI-дизайн должен быть заложен в основу разработки интернет-магазинов.
Тогда он будет состоять из семи этапов:
Понимание бизнеса и задачи. Нужно выяснить каким образом будет зарабатывать интернет-магазин. Какие цели и задачи будут перед пользователями.
Анализ информации. Дизайнер изучает информацию от клиента, а также смотрит в открытых источниках, как работают конкуренты.
Генерация идей. Идеи, которые возникли на прошлых этапах, фиксируются в виде текста или зарисовок, выбираются самые подходящие.
Описание сценариев. Это важный этап, который делает UX/UI-дизайн по-настоящему ориентированным на пользователя. Здесь определяются ключевые и второстепенные сценарии взаимодействия пользователя с сайтом. Сценарии подробно описываются и фиксируются.
Разработка прототипов (фреймворков). Все сценарии собираются в единую структуру проекта (фреймворк-структуру).
Подбор визуального стиля. Определяется, какой образ должен транслироваться брендом. Исходя из этого, выбирается цветовая схема сайта, шрифты и стили элементов.
Дизайн макетов. Это окончательная отрисовка всех макетов и возможных сценариев. Макеты согласовываются с клиентом и уходят разработчикам.
Дальнейшие доработки дизайна должны исходить из особенностей продукта и целевой аудитории. Нужно проводить исследования, А/В-тестирования и отслеживать изменения. Только так можно будет подобрать эффективно работающие решения.
UX/UI-дизайн от Cart-Power — это не просто про красивый внешний вид сайта. Привлечение специалиста по UX/UI в команду позволяет нам сразу разрабатывать такие интернет-магазины и маркетплейсы, которые решают проблемы пользователей при любом сценарии взаимодействия, а значит больше продают. Хороший дизайн помогает выгодно отстроиться от конкурентов и передать характер бренда. Он вызывает эмоциональный отклик у целевой аудитории и становится залогом ее лояльности.
Получите консультацию специалиста по вашему проекту
Содержание
Получите консультацию специалиста по вашему проекту
Как сделать мобильную версию сайта правильно: лучшие… Мобильные устройства меняют бизнес. Они постоянно эволюционируют, и требования к дизайну и разработке сайта постоянно обновляются. Как адаптировать элементы дизайна…
Как улучшить пользовательский опыт в… Расспросили нашего UX/UI-дизайнера Сергея Рогова о том, как сделать интернет-магазин детских товаров более удобным и привлекательным для клиентов.
Как повысить продажи в интернет-магазине детских… Расскажем, как провести правильную SEO-оптимизацию и улучшить видимость сайта в поисковых системах. Много практических советов и комментариев эксперта.
13 советов от UX/UI-дизайнера, как сделать любой интернет-магазин лучше
Раньше дизайн интернет-магазинов сводился только к тому, чтобы сделать сайт внешне привлекательным и продемонстрировать через него ценности компании-заказчика. Но часто, несмотря на всю эстетику интерфейса, посетитель интернет-магазина сталкивался с неудобными настройками фильтров, совершал десятки безрезультатных кликов, нервничал из-за запутанной формы оформления заказа и т.п. В итоге интернет-магазин оставлял у него негативные впечатления, и посетитель зарекался посещать его вновь.
При разработке дизайна надо помнить, что по ту сторону интернет-магазина находится потенциальный клиент. И ему может быть все равно, как красиво подобрана цветовая схема или стильно разработан логотип бренда. Важнее, чтобы интернет-магазин решил его задачу — легко и быстро приобрести нужный товар. То, как покупатель почувствует себя при взаимодействии с сайтом, во многом определит его отношение к бренду, к продукту и напрямую повлияет на продажи.
Сделать покупки в интернет-магазине или маркетплейсе приятным занятием и не упустить потенциальных покупателей поможет UX/UI-дизайнер.
Для начала разберемся в терминах.
Вместе UX- и UI-дизайн отвечают за то, чтобы интернет-магазин был приятен глазу и удобен для покупок.
UX/UI-дизайнер Cart-Power Сергей Рогов написал подробный гайд для нашей внутренней работы о том, как сделать дизайн любого проекта лучше. Мы решили поделиться с вами самыми полезными его советами: они подходят как для интернет-магазинов на стадии разработки, так и для редизайна существующих. Следуя им, можно добиться улучшения пользовательского опыта и роста конверсии.
Сергей Рогов работает в IT уже более 8 лет, а с 2018 года занимается UX/UI-дизайном. Он был в команде по запуску таких проектов как: интернет-магазин «Сотовик-М», сервис по подбору и резервированию вин «Красностоп» (этот проект завоевал премию Tagline Awards), белорусский маркетплейс «Авокадо», РАД (российский аукционный дом), разрабатывал премиальные шаблоны для CS-Cart.
1. Экспериментируйте с цветом и толщиной шрифта
Когда нужно выделить важную информацию, часто ограничиваются только изменением размера шрифта. Но выстраивать иерархию в тексте можно также с помощью цвета или толщины.
2. Не используйте серый текст на цветном фоне
Светло-серый текст на белом фоне выглядит хорошо. Так можно «ослабить» его и сделать более приятным глазу. Серый на цветном фоне — неудачное решение, текст теряется.
3. Не используйте много границ
Границы — это очевидный вариант, как отделить два элемента друг от друга. Но когда границ слишком много, дизайн выглядит перегруженным. Как вариант, можно использовать выделение цветом.
4. Оставьте маленькие изображения маленькими
Векторные изображения не ухудшаются по качеству, когда вы увеличиваете их размер, но могут потерять или приобрести лишние акценты.
5. Используйте контраст
Контраст помогает подчеркнуть иерархию текста и обратить внимание на важные элементы. Он может быть по размеру или цвету, а также между объектами или наборами объектов.
6. Используйте минимальное количество шрифтов
Использование более трех шрифтов одновременно перегружает интерфейс. Лучше всего ограничить их до 1-2 вариантов, но при этом можно «поиграть» с разными начертаниями одного шрифта.
7. Ограничьте длину строк
Пользователь легко фокусируется в начале строки, но к концу его внимание постепенно рассеивается. Чтобы не дать посетителю заскучать и удержать его внимание на информации, придерживайтесь оптимальной длины строки. Для устройств с диагональю более 10 дюймов — это 50-75 символов; для телефонов — 30-45 символов.
8. Используйте правильное выравнивание
Выравнивание по ширине создает много пустого пространства. Из-за этого снижается читабельность контента, так как нарушает ритм чтения и пользователи вынуждены пристально вглядываться в абзац. Такое выравнивание хорошо для документов, но не для текстов в интерфейсе.
Выравнивание по центру больше подходит для заголовков или небольших текстов, чтобы выделить определенные аспекты и создать визуальную иерархию.
Для текстов в интерфейсе лучше всего подходит выравнивание по левому краю. Оно выглядит естественно, не затрудняет восприятие и не нагружает глаза.
9. Применяйте правило семи
В 1956 году когнитивный психолог Принстонского университета Джордж А. Миллер вывел теорию о том, что среднестатистический человек может удерживать в кратковременной памяти только 7 плюс-минус 2 элементов. Этот закон стал применяться в UX/UI-дизайне.
Пользователю надо заскочить на сайт и быстро купить нужный товар. То есть обычно у него нет времени разбираться, что где находится в интерфейсе интернет-магазина. Чтобы облегчить путь пользователя к покупке, информацию в интернет-магазине лучше всего организовывать небольшими порциями по 5-9 пунктов в каждом.
10. Применяйте правило трех кликов
У посетителя должна быть возможность попасть с главной страницы на любую другую страницу сайта, сделав не более 3-х кликов. Это правило работает даже для сложных каталогов типа интернет-магазина Wildberries: главная страница — каталог — подкаталог — товар.
Особенно стоит следить за количеством кликов в корзине: каждый лишний шаг при оформлении заказа увеличивает риск, что пользователь откажется от покупки.
В каталоге может использоваться много фильтров, которые вроде бы увеличивают число кликов. Но это идет интернет-магазину на пользу и помогает пользователям находить нужные товары.
11. Не противоречьте тому, что написали
UX — это об удобстве пользователя. Не вводите его в заблуждение двойными смыслами. Если кнопка называется «удалить 2 товара из корзины», то она должна действительно удалять оба товара.
12. Следите за композицией
Старайтесь, чтобы композиция вашего проекта была сбалансирована. То есть даже если на первый взгляд она выглядит хаотичной, элементы должны располагаться равномерно в соответствии со своей значимостью. Если интерфейс сбалансирован, посетители подсознательно чувствуют себя комфортно.
13. Не допускайте информационной перегрузки
В мире дефицита времени пользователи давно перестали читать текст. Обычно они просматривают экран крупными блоками, выхватывая значимую информацию. Чтобы обратить внимание пользователя на важные элементы и помочь ему «пробежать» страницу глазами, разбавляйте информацию белым пространством.
Белое пространство — это пустая область между элементами дизайна или внутри элементов. Несмотря на название, белое пространство не обязательно белое. Это может быть любой цвет, текстура, паттерн и даже фоновое изображение. Главное, чтобы на этом фоне хорошо считывался контент.
Эти советы универсальны. Они подойдут любым интернет-магазинам или сервисам на любой стадии разработки. Но для наиболее эффективных результатов UX/UI-дизайн должен быть заложен в основу разработки интернет-магазинов.
Тогда он будет состоять из семи этапов:
Дальнейшие доработки дизайна должны исходить из особенностей продукта и целевой аудитории. Нужно проводить исследования, А/В-тестирования и отслеживать изменения. Только так можно будет подобрать эффективно работающие решения.
UX/UI-дизайн от Cart-Power — это не просто про красивый внешний вид сайта. Привлечение специалиста по UX/UI в команду позволяет нам сразу разрабатывать такие интернет-магазины и маркетплейсы, которые решают проблемы пользователей при любом сценарии взаимодействия, а значит больше продают. Хороший дизайн помогает выгодно отстроиться от конкурентов и передать характер бренда. Он вызывает эмоциональный отклик у целевой аудитории и становится залогом ее лояльности.
Получите консультацию специалиста по вашему проекту
Получите консультацию специалиста по вашему проекту
Другие статьи этой категории