Закон Парето гласит: 20% усилий создают 80% результата. Например:
- В саду Вильфредо Парето 20% стручков гороха давали 80% плодов.
- В 19 веке 20% итальянцев владели 80% богатства страны.
- В бизнесе 20% ключевых продуктов приносят 80% выручки.
Закон Парето работает и в дизайне. Пользователи уделяют 80% внимания 20% интерфейса — данные Laws of UX. А 20% функций в приложении закрывают 80% потребностей пользователей.
Избыток разделов в интерфейсе может сыграть против пользователя. Закон Парето помогает сфокусировать внимание на нужных функциях и быстрее их находить. В этой статье покажем 5 способов, как можно это сделать.
Способ 1. Опустить основные функции приложения в нижнюю часть экрана
49% пользователей держат смартфоны одной рукой и управляют экраном с помощью большого пальца. Иллюстрация показывает, с какими зонами пользователь взаимодействует легко, а какие зоны вызывают затруднения.
![Как пользователь взаимодействует с экраном Зоны экрана по степени удобства взаимодействия](https://handh.ru/wp-content/uploads/2022/09/Блог-1-1024x646.png)
В «зеленой» зоне пользователь работает без затруднений, в «желтой» зоне прикладывает усилия. Чтобы достать до «красной», пользователь меняет положение телефона в руке и тянется пальцем.
В мобильном приложении Ситилинка мы использовали этот подход: опустили популярные категории товаров в «зеленую зону», а в «желтой» и «красной» зонах разместили крупный кликабельный баннер. В итоге нижняя часть экрана отвечает за основные функции, а верхняя — привлекает внимание к специальным предложениям.
![Основные функции приложения располагаются в нижней части экрана Ситилинк и Яндекс Почта располагают основные элементы в нижней части экрана](https://handh.ru/wp-content/uploads/2022/09/Основные-функции-приложения-
располагаются-в-нижней-части-экрана-1024x646.png)
Суперапп Яндекс Почта также собрал все функции в «зеленой» зоне, чтобы пользователь мог работать с приложением на ходу: отвечать на письма, редактировать документы, оставлять заметки.
Способ 2. Сгруппировать часто используемые функции в панели навигации
70% пользователей ищут нужную функцию приложения в панели навигации. Панель должна соответствовать трем правилам: включать важные функции, быть интуитивно понятной и показывать раздел, в котором находится пользователь.
![Важные функции нужно выделить в панель навигации Основные функции нужно сгруппировать в панели навигации](https://handh.ru/wp-content/uploads/2022/09/Блог-5-1024x646.png)
Чтобы сделать панель навигации интуитивно понятной, нужно дать разделам простые названия и дополнить их иконками. Важно, чтобы иконка передавала назначение раздела. Тогда и текст можно убрать совсем.
Например, разработчики Додо Пиццы выделили популярные среди пользователей категории и поместили их в тапбар. А в Якитории мы сделали минималистичные иконки для основных разделов приложения.
![Как сделать интуитивно понятную панель навигации Панель навигации в Якитории и Додо Пицце](https://handh.ru/wp-content/uploads/2022/09/Как-сделать-интуитивно-понятную-панель-навигации-1024x646.png)
Способ 3. Убрать редко используемые функции в меню «гамбургера»
«Гамбургер» — это иконка из трех горизонтальных линий. Она вызывает список меню.
![Ux-дизайнеры используют в интерфейсах «гамбургер» — иконку из трех линий, которая открывает полное меню «Гамбургер» — иконка, которая вызывает список меню](https://handh.ru/wp-content/uploads/2022/09/Блог-4-1024x646.png)
«Гамбургер» скрывает малочастотные функции и фокусирует внимание пользователя на основных. Он помогает, когда функций много, а экранного пространства недостаточно.
Скрытое меню можно расположить в «красной» зоне экрана и освободить пространство для частотных функций. Так сделали UX-дизайнеры Heads and Hands, когда работали над интерфейсом приложения «Петрович».
![«Петрович» убрал ряд функций в скрытое меню, чтобы сфокусировать внимание на основных Скрытое меню помогает «Петровичу» сфокусировать внимание на основных функциях](https://handh.ru/wp-content/uploads/2022/09/Блог-2-1024x646.png)
Также «гамбургер» можно расположить внизу экрана. Например, как в Яндекс Навигаторе. Иконка напоминает конструктор, а не классический «гамбургер», но выполняет такую же функцию — вызывает малочастотные сервисы на главный экран.
![Яндекс Навигатор скрывает дополнительные сервисы в «гамбургере» Яндекс Навигатор убрал малочастотные сервисы в скрытое меню](https://handh.ru/wp-content/uploads/2022/09/Блог-6-1024x646.png)
Способ 4. Сделать автозаполнение данных
Пользователям приложения приходится тратить время, чтобы заполнять данные при регистрации и оформлении заказа.
20% пользователей отказываются от регистрации при первом запуске приложения. Поэтому нужно сокращать количество информации, которое оно запрашивает.
При первом заказе пользователь оставляет свои данные. При следующих покупках можно подтягивать указанные адрес доставки, реквизиты оплаты и контакты. Это упростит путь пользователя.
![Автозаполнение данных экономит время пользователя Как работает автозаполнение данных после регистрации](https://handh.ru/wp-content/uploads/2022/09/Блог-11-1024x646.png)
Приложение Lamoda заполняет форму заказа автоматически. Пользователь оформит заказ за 30 секунд, если он не менял адрес и номер телефона.
![Lamoda автоматически подтягивает адрес доставки и контактные данные пользователя Опыт Lamoda: автозаполнение данных](https://handh.ru/wp-content/uploads/2022/09/Блог-8-1024x646.png)
Приложение ВкусВилл запоминает не только адрес и контакты пользователя, но и настройки заказа. Например, клиент может отказаться от упаковки продуктов по фасовочным пакетам. И эта настройка по умолчанию будет работать при заказе через приложение.
![ВкусВилл применяет выбранные настройки по умолчанию к каждому заказу Опыт ВкусВилл: автозаполнение настроек заказа](https://handh.ru/wp-content/uploads/2022/09/ВкусВилл-применяет-выбранные-настройки-по-умолчанию-к-каждому-заказу-1024x646.png)
Способ 5. Выделить главные 20% контента в приложении
Во время проектирования UX-дизайнер должен понять, какие функции будут самыми частотными в приложении. После этого он направит на них основное внимание пользователя: выделит главные разделы с помощью шрифта, акцентного цвета или анимации. А еще может вынести на шторку.
![Как направить внимание пользователя на частотные функции 20% контента занимают 80% внимания пользователя](https://handh.ru/wp-content/uploads/2022/09/Блог-10-1024x646.png)
Например, как это сделал Яндекс Go. Суперапп показывает на шторке основные услуги: такси, каршеринг, доставку еды, продуктов и товаров. На фоновом экране располагается интерактивная карта, которая показывает местоположение пользователя, время до подачи машины и наличие такси поблизости.
![Как Яндекс Go выделяет главные 20% контента Яндекс Go вынес главные функции приложения на шторку](https://handh.ru/wp-content/uploads/2022/09/Блог-7-1024x646.png)
Мы разобрали, как упростить приложения для восприятия с помощью закона Парето. А как делать кнопки и иконки, по которым легко попадать — рассказываем в статье «Как применять закон Фиттса в дизайне веб- и мобильных интерфейсов».