{"id":13466,"url":"\/distributions\/13466\/click?bit=1&hash=891d339b00b86120568ea8e4296ded112a42876a976e2fd335004400f35cbd30","title":"\u0427\u0442\u043e \u0441\u043c\u043e\u0442\u0440\u044f\u0442, \u0447\u0438\u0442\u0430\u044e\u0442 \u0438 \u043a\u0443\u0434\u0430 \u0445\u043e\u0434\u044f\u0442 \u0432\u0430\u0448\u0438 \u043a\u043b\u0438\u0435\u043d\u0442\u044b?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"24bb823c-c595-5fc8-be0f-fba9e89237c2","isPaidAndBannersEnabled":false}
Дизайн
Heads and Hands

Как применять закон Парето в дизайне мобильных интерфейсов

5 способов, чтобы сфокусировать внимание на нужных функциях

🖐🏻 Это блог студии Heads and Hands

Мы разрабатываем цифровые экосистемы и супераппы. Рассказываем про пользовательский опыт и помогаем бизнесу стать лидером рынка.

👉🏻 Вступайте, чтобы быть в курсе

👉🏻 Заглядывайте к нам в Telegram

Закон Парето гласит: 20% усилий создают 80% результата.

Например:

  • в саду Вильфредо Парето 20% стручков гороха давали 80% плодов;
  • в 19 веке 20% итальянцев владели 80% богатства страны;
  • в бизнесе 20% ключевых продуктов приносят 80% выручки.

Закон Парето работает в дизайне. Пользователи уделяют 80% внимания 20% интерфейса — данные Laws of UX. А 20% функций в приложении закрывают 80% потребностей пользователей.

Избыток разделов в интерфейсе может сыграть против пользователя. Закон Парето помогает сфокусировать внимание на нужных функциях и быстрее их находить. В этой статье покажем 5 способов, как можно это сделать.

Способ 1. Опустить основные функции приложения в нижнюю часть экрана

По данным Стивена Хубера, 49% пользователей держат смартфоны одной рукой. И управляют экраном с помощью большого пальца. Иллюстрация показывает, с какими зонами пользователь взаимодействует легко. А какие зоны вызывают затруднения.

В «зеленой» зоне пользователь работает без затруднений. В «желтой» зоне прикладывает усилия. Чтобы достать до «красной», пользователь меняет положение телефона в руке и тянется пальцем.

В мобильном приложении «Ситилинка» мы использовали этот подход. Опустили популярные категории товаров в «зеленую зону». А в «желтой» и «красной» зонах разместили крупный кликабельный баннер.

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

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

Способ 2. Сгруппировать часто используемые функции в панели навигации

70% пользователей ищут нужную функцию приложения в панели навигации — данные RescueTime. Панель должна соответствовать трем правилам: включать важные функции, быть интуитивно понятной и показывать раздел, в котором находится пользователь.

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

Например, разработчики «Додо Пиццы» выделили популярные среди пользователей категории и поместили их в тапбар. А разработчики VK сделали минималистичные иконки для основных разделов супераппа.

Способ 3. Убрать редко используемые функции в меню «гамбургера»

«Гамбургер» — это иконка из трех горизонтальных линий. Она вызывает список меню.

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

Скрытое меню можно расположить в «красной» зоне экрана и освободить пространство для частотных функций. Так сделали UX-дизайнеры Heads and Hands, когда работали над интерфейсом приложения «Петрович».

Также «гамбургер» можно расположить внизу экрана. Например, как в «Яндекс Навигаторе». Иконка напоминает конструктор, а не классический «гамбургер». Но выполняет такую же функцию — вызывает малочастотные сервисы на главный экран.

Способ 4. Сделать автозаполнение данных

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

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

При первом заказе пользователь оставляет свои данные. При следующих покупках можно подтягивать указанные адрес доставки, реквизиты оплаты и контакты. Это упростит путь пользователя.

Приложение Lamoda заполняет форму заказа автоматически. Пользователь оформит заказ за 30 секунд, если он не менял адрес и номер телефона.

Приложение «ВкусВилл» запоминает не только адрес и контакты пользователя, но и настройки заказа. Например, клиент может отказаться от упаковки продуктов по фасовочным пакетам. И эта настройка по умолчанию будет работать при заказе через приложение.

Способ 5. Выделить главные 20% контента в приложении

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

Например, как это сделал «Яндекс Go». Суперапп показывает на шторке основные услуги: такси, каршеринг, доставку еды, продуктов и товаров. На фоновом экране располагается интерактивная карта. Она показывает местоположение пользователя, время до подачи машины и наличие такси поблизости.

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

Спасибо за ваше время

0
12 комментариев
Написать комментарий...
Аккаунт заморожен

Комментарий недоступен

Ответить
Развернуть ветку
Специфический щит

Все приложения яндекс — монструозное перегруженное говно

Ответить
Развернуть ветку
Специфический щит

Кстати, если вы хотите вернуть мобильное меню на VC к прежнему состоянию, то вам сюда
https://vc.ru/services/332649

Ответить
Развернуть ветку
Игорь Васильев

По мне так супераппы это не про удобство. Я такие приложения стараюсь обходить стороной. Надеюсь мода на них вскоре закончится.

Ответить
Развернуть ветку
Константин

Конечно не про удобство. Они про аналитику.

Ответить
Развернуть ветку
Сергей Гольцов

Не закончится. Суперапп - это способ объединения продуктов в экосистему, любая it-компания будет применять этот подход при наличии множества продуктов.

На счёт удобства. Как может быть не удобно в одном приложении иметь возможность воспользоваться услугами доставки (такси, еда, курьеры и прочее) вместо 3-5 отдельных приложений?

Ответить
Развернуть ветку
Специфический щит

Вот так, по отдельности гораздо удобнее!

Ответить
Развернуть ветку
Игорь Васильев

Экосимстема и супер апп, это разные вещи. Экосистема это про синергию всех продуктов, а супер апп это про перегруженное приложение.

Ответить
Развернуть ветку
Иван Дэвидсон

Самое ужасное - когда приложение думает за пользователя - какие для него функции важнее сегодня (какие он чаще использует) и перестраивает положение иконок. В результате каждый раз ищещь, где в этот раз окажется та или иная кнопочка-иконочка.

Ответить
Развернуть ветку
Елена Ковалевская

Прикольно так получается

Ответить
Развернуть ветку
Александр Безносенко

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

Ответить
Развернуть ветку
Billy Jean

Где-то заплакало одно золотое сечение

Ответить
Развернуть ветку
Читать все 12 комментариев
null