Все мы знаем, что “простота” — это золотое правило дизайна.
Но что это на самом деле такое для продуктовых дизайнеров? Как мы применяем этот принцип в своих проектах?
Во-первых, почему дизайн должен быть простым? Основа продуктового дизайна — форма и функция, а простота позитивно влияет на оба этих аспекта.
- Простые интерфейсы выглядят привлекательно, а значит, вашим продуктом будет приятнее пользоваться.
- Когда интерфейс простой, люди без труда могут справиться с той или иной задачей (когнитивная нагрузка снижена). Концентрация внимания повышается. Пользователи быстро находят нужную информацию и добиваются результата.
Как же разработать простой интерфейс? Что это на самом деле означает?
В продуктовом дизайне мы можем достигнуть простоты за счет визуальных элементов либо представленной информации. Работая над проектом, следуйте этим правилам:
- Количество визуальных стилей и элементов должно быть минимальным.
- Объем информации, необходимой для разъяснения сути стоящей перед пользователем задачи, должен быть минимальным.
Рассмотрим несколько примеров.
1. Минимизируйте количество визуальных стилей
На экране слева используется шрифт всего 2 размеров (для заголовка и основного текста) и 3 цветов (основной, дополнительный и акцентный).
На экране справа можно увидеть шрифт как минимум 8 разных размеров (2 гарнитуры, буквы разного регистра) и 6 цветов (основной темно-серый, дополнительный светло-серый, дополнительный коричневый, фиолетовый, оранжевый, бежевый).
Оба экрана можно назвать достаточно сложными, однако легко догадаться, какой из них выглядит проще и эстетичнее.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649581385a143d5e3854a4be_64958100c577f9fcdc01a602_1%20(1).webp)
2. Упростите контент
На первый взгляд этот экран кажется достаточно простым. Но давайте подробнее рассмотрим, какой ценностью обладает каждый элемент интерфейса.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/6495815c46f7093e523995c3_64958101cb95688383eda28e_1%20(5).webp)
Хедер
- Приветствие “Доброе утро” занимает драгоценное место, но не приносит людям никакой пользы.
- Линия-разделитель также не добавляет ценности — она просто создает дополнительный визуальный шум.
Карточки
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/6495817aeee7f7bb37d9c6e7_64958100935b7fb6aa8e54b1_1%20(3).webp)
Текстовый контент
- Название штата можно сократить и использовать аббревиатуру.
- Название страны необязательно — все предложения соответствуют местоположению пользователя в данный момент. Люди наверняка знают, в какой стране они сейчас находятся.
- Надпись “6.4 mi” (мили) сама по себе понятна. Слово “length” (расстояние) перед ней не добавляет ясности.
Визуальный контент
- Две иконки (закладка и загрузка) различаются по стилю и размещены в противоположных углах карточки. Возможно, интерфейс станет проще, если сгруппировать их и расположить рядом, а также выбрать иконки в одном стиле.
- Действительно ли людям необходимо загружать карту при просмотре предложений? Скорее, загрузка будет актуальна, когда пользователь перешел в раздел с подробной информацией о конкретном маршруте.
- Плашка с уровнем сложности маршрута и рейтинг разрывают текстовый контент, что нарушает визуальный баланс. По возможности группируйте визуальные элементы вместе.
До и после упрощения
Я упростила интерфейс — карточки стали визуально сбалансированными, теперь их гораздо проще изучать. Кроме того, клиенты получат больше пользы, поскольку в приложении появилось больше пространства для контента.
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649581cc9d92f49a72712a4e_6495810112b4a5998b36b616_1%20(4).webp)
![](https://cdn.prod.website-files.com/60a35497ea15cf45782248b1/649581e38f373d0cf2c43df1_6495810166e3dd98f0e73766_1%20(2).webp)
Как говорится: “Лучше меньше, да лучше”.