Принципы дизайна мобильных приложений от google

Posted on by riasevastopol

Борьба на рынке мобильных приложений поразительно высока. Как же полностью новому приложению привлечь пользователей, завоевать их лояльность и принести прибыль собственному обладателю? В данной статье будут обрисованы 25 правил разработки приложений, каковые оказывают помощь пользователям достигать собственных целей, а вам — получать на этом.

Введение

По некоторым объективным данным, предполагается, что в 2017 году пользователи скачают около 200 миллиардов приложений, тогда как маркетологи экспериментируют с пользовательскими интерфейсами. В 2015 году компании израсходовали около 3 млрд. долларов на рекламу разных приложений, что на 80% больше, чем в 2014 году.

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

Согласно данным статистики 25% людей открывают скачанное приложение только один раз.

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

Следуя нескольким несложным и действенным правилам, возможно создать продукт, что будет вправду нужен для пользователей. Качественное приложение оказывает помощь скоро решить какую-либо проблему. Исходя из этого, были выделены наиболее значимые компоненты успешного приложения.

Эксперты Гугл совместно и компанией AnswerLab совершили изучение на базе 100 разных приложений в совсем различных сферах: электронная коммерция, туризм, страхование, доставка еды, бронирование разного вида и билетов услуги (в изучение не были включены игровые и музыкальные приложения, и соцсети).

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

  • Мобильные приложения приходят на смену интернет-магазинам

Часть 1: Навигация по разделам приложения

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

1. Покажите сокровище вашего приложения с самого начала

Дабы увлечь пользователей, предоставьте нужную им данные прямо на первой странице и сопроводите это четкими призывами к действию. Четко обозначьте ваше главное преимущество и расположите текст на известный месте — это приведёт к интересу пользователей.

На скриншоте ниже изображены интерфейсы двух приложений. На скриншоте слева призыв к действию «Try it now» (попытайтесь прямо на данный момент) звучит неубедительно и неточно. Призыв к действию «Отыскать совершенный дом» на правом скриншоте, наоборот, сопровождается ясными и понятными пользователю кнопками: «Rent» (снять в аренду), «Buy» (приобрести), «Sell» (реализовать):

2. Меню приложения должно быть несложным и эргономичным

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

На скриншоте слева представлено меню, кое-какие разделы которого имеют частично совпадающий контент: это относится к пунктам «Походы» (hiking) и «Мужская обувь» (men s footwear). На скриншоте справа возможно заметить пример хорошего меню, которое не будет сбивать пользователей с толку. Оно имеет следующие разделы: кемпинг, бег, походы, велосипедный спорт, скалолазание, лыжный спорт, сноубординг, рыбалка.

3. Пользователь неизменно должен иметь возможность перейти на прошлую страницу

В ходе сотрудничества с приложением пользователю может потребоваться возвратиться на один ход назад. Вследствие этого, кнопка «Назад» должна быть размещена на каждой странице, дабы человеку не было нужно затевать все заново, перейдя на основную страницу и утратив все введенные эти. Детальный контроль за навигацией оказывает помощь конверсии. На скриншоте ниже мы видим, что кнопка «Назад» имеется только на самом первой стадии работы с приложением:

А в примере ниже кнопка «Назад» содержится на каждой странице:

4. Добавьте функцию ручного определения расположения

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

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

5. Сделайте так, дабы переход из приложения в браузер был эргономичным

Пользователей возможно легко запутать, в то время, когда приложение неожиданно «перебрасывает» их в браузер. Но еще хуже, в случае если расположение и дизайн элементов на сайте и в приложении резко отличаются друг от друга — это может оттолкнуть. Кроме этого неприятности смогут появиться, в то время, когда переход занимает через чур много времени.

Исходя из этого в случае если для ответа задач пользователя требуется переход от приложения к браузеру, сделайте так, дабы расположение и дизайн элементов на странице были схожими, и дабы это происходило максимально скоро. К примеру, ниже представлен пример приложения, чей интерфейс резко отличается от дизайна сайта (это может смутить пользователей):

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

  • Уроки айтрекинга: как клиенты применяют мобильные приложения?

Часть 2: Поиск информации в приложения

Действенный и эргономичный поиск информации — это очень серьёзная функция любого приложения, разрешающая пользователю скоро и легко отыскать то, что его интересует. Сделайте функцию поиска максимально нужной, применяя рекомендации, представленные в следующем разделе.

6. Окно поиска должно быть расположено на известный месте

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

На скриншоте справа окно поиска запрятано за разделом меню «Поиск» (Search). Тогда как на правом скриншоте окно поиска расположено на известный месте:

7. Применяйте действенное индексирование поиска

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

8. Применяйте сортировки и функцию фильтрации

Время от времени пользователи «перегружены» информацией, взятой в следствии поиска. Дабы отыскать необходимый товар, им приходится просматривать множество ненужных им вещей. Функция фильтрации окажет помощь организовать взятую данные и существенно сузить круг поиска. На скриншоте ниже функция поиска отсутствует либо скрыта, исходя из этого пользователю нужно будет просмотреть множество товаров, дабы отыскать необходимый:

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

  • Секреты юзабилити: поисковые фильтры и намерение пользователя

Часть 3: совершение и Конверсия приобретения

Люди все чаще и чаще совершают приобретения при помощи мобильных устройств и ожидают, что процесс поиска товара, описания и изучение отзывов продуктов, и конкретно сама приобретение будут стремительными и эргономичными. Ниже вы сможете отыскать пара советов, касающихся создания продуманного опыта, что направит пользователей к конверсии.

9. Показ сведений о прошлых и предыдущих результатах поиска приобретениях

Дабы сэкономить время пользователя, применяйте функцию показа прошлых прошлых покупок и результатов поиска. Это будет особенно полезно для приложений, каковые довольно часто употребляются для совершения одних и тех же приобретений.

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

10. Предоставьте людям возможность фильтровать и сортировать отзывы

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

Разрешите потенциальным клиентам сортировать отзывы по дате, выбирать лишь хорошие либо отрицательные отзывы. Особенную сокровище воображают подтвержденные отзывы тех, кто уже купил этот продукт.

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

11. Сделайте эргономичным сравнение различных товаров между собой

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

В приложении, представленном на скриншоте ниже, пользователю приходится запоминать понравившиеся товары, дабы после этого сравнить их:

В приложении, изображенном ниже, имеется особая функция сравнения, разрешающая пользователю сопоставить характеристики нескольких домов:

12. Предоставьте пользователям пара вариантов оплаты

Люди ожидают заметить привычный выбор из нескольких способов оплаты на экране мобильного приложения. В случае если ваше приложение будет предоставлять возможность оплаты через PayPal, Apple Pay, и AndroidPay, это избавит пользователей от необходимости заполнять дополнительные формы.

На скриншоте слева представлено приложение, предоставляющее пользователям один вариант оплаты, тогда как справа возможно заметить приложение, где доступно сходу пара способов оплатить заказ:

13. Нужно упростить управление и добавление методами оплаты

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

В приложении, изображенном слева, нет никаких возможностей руководить методами оплаты, тогда как приложение справа предоставляет клиентам возможность редактировать существующие методы оплаты и додавать новые:

Ниже возможно детально разглядеть функцию добавление редактирования способов и новых оплаты существующих:

  • Как повысить «мобильную конверсию»?

Часть 4: Регистрация

Регистрация — это метод поддерживать контакт с пользователем, содействовать осуществлению конверсии и улучшать взаимоотношения с клиентами. Однако, не редки случаи, в то время, когда регистрация поднимается на пути к совершению приобретения. Ниже представлены методы сделать процесс регистрации максимально комфортным.

14. Покажите сокровище вашего приложения перед тем, как просить пройти регистрацию

Пользователи избегают приложений, каковые требуют немедленной регистрации. Если вы воображаете неизвестный бренд, то не следует потребовать регистрации сразу же по окончании скачивания приложения. Успешное ответ разрешённой проблемы — попросить пройти регистрацию перед оформлением заказа.

Приложение на скриншоте слева требует незамедлительной регистрации, тогда как приложение справа увлекает пользователя полезным контентом и не принуждает сразу же вводить персональную данные:

15. Поделите функции входа в совокупность (sign in) и регистрации (sign up)

Обычно пользователи путают эти два призыва к действию, исходя из этого вам нужно четко поделить их, как продемонстрировано на скриншоте справа. Скриншот слева демонстрирует нам пример приложения, где эти два понятия возможно легко спутать:

16. Упростите процесс аутентификации в совокупности

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

  • Не принуждайте пользователей к регистрации до завершения сделки

Часть 5: Заполнение форм

Заполнение формы — это решающий момент процесса оформления заказа. Следуйте представленным ниже рекомендациям, дабы сделать заполнение формы несложным и приятным процессом.

17. Создавайте эргономичные и простые формы

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

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

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

18. Информируйте об неточностях ввода данных в реальном времени

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

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

19. Тип клавиатуры обязан соответствовать типу вводимых данных

К примеру, в случае если пользователю требуется ввести номер телефона, то перед ним обязана появиться цифровая клавиатура, а не буквенная. На скриншоте справа возможно заметить форму, где воплощена эта функция для удобства пользователя. Дабы заполнить поле формы, представленной слева, человеку придется вручную переключиться с буквенной клавиатуры на цифровую:

20. Сопровождайте поля формы нужной информацией, соответствующей контексту

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

  • Валидация лид-форм — полное управление

Часть 6: Юзабилити

Воспользуйтесь следующими рекомендациями, дабы создать приложение, которое наилучшим образом приспособлено под потребности пользователя.

21. Нужно сказать с пользователями на одном языке

Наличие незнакомых терминов либо фраз может привести к. Применение в качестве призывов к действию непонятных слов, пускай кроме того характерных для данного бренда, может смутить. К примеру, призывы к действию «Приобрести», «Снять в аренду», «Реализовать» (Buy, Rent, Sell) привычны и легки для понимания (см. скриншот справа). Тогда как такие словосочетания как «Устроиться на ночлег», «Переселиться» и «Переехать» (Roost, Migrate, Fly) смогут сбить пользователя с толку (см. скриншот слева):

22. Иконки интерфейса нужно сопровождать автографами

Дабы верить втом, что пользователь верно осознает обозначение иконки, нужно сопроводить ее подписью. Изучения продемонстрировали, что множество иконок имеют различные обозначения в разных приложениях, исходя из этого смогут быть по-различному трактованы пользователем. Обратите внимание на скриншот слева: иконки внизу экрана не завизированы, исходя из этого человеку сложно додуматься, что они обозначают. На скриншоте справа любая иконка имеет подпись, дабы избежать неправильной интерпретации:

23. Каждое воздействие в приложении должно сопровождаться визуальным откликом

В то время, когда пользователь додаёт товар в корзину либо оформляет заказ, ему нужно взять подтверждение того, что воздействие выполнено удачно. Дабы человек не мучился предположениями, сопровождайте каждое успешное воздействие анимацией либо каким-либо вторым визуальным откликом.

Приложение, представленное ниже, не дает пользователю никакого визуального отклика, исходя из этого человеку стоит лишь догадываться, добавлен ли товар в корзину либо нет:

Приложение на скриншоте ниже сопровождает добавление в корзину особым уведомлением, исходя из этого пользователь возможно совершенно верно не сомневается в том, что воздействие осуществлено удачно:

24. Разрешите пользователю увеличивать изображение так, как он рекомендует

Люди желают сами осуществлять контроль степень повышения изображения. Ниже мы видим пример приложения, где степень приближения изображения заблаговременно предусмотрена:

В приложении, представленном ниже, человек может самостоятельно приблизить изображение так, как он посчитает нужным:

25. Любой вопрос обязан соответствовать контексту

Пользователя возможно легко запутать, в случае если, к примеру, прямо на основной странице запросить у него подтверждение текущего расположения, как продемонстрировано на скриншоте ниже:

Приложение, изображенное ниже, запрашивает у пользователя подтверждение расположения лишь тогда, в то время, когда он нажимает на кнопку «Отыскать ближайший магазин»:

Заключение

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

Высоких вам конверсий!

По данным: thinkwithgoogle.com, image source Kerstin Leishman

Случайные статьи:

Сергей Подшивалин. Дизайн мобильных приложений


Подборка похожих статей:

riasevastopol

More Posts