Дизайн мобильных приложений «и с чем его едят». База

mobile_design_appart_pro

В хорошо продуманный мобильный интерфейс приятно возвращаться.

Приветствую MoneyMaker, в этой статье я хочу поделится с тобой принципами разработки дизайна мобильного приложения. Твоя цель – лояльность к бренду или новый канал коммуникации с потребителем, а может ты посягнул на самое святое потребителя? Его ограниченное количество денег в кошельке. Конечно же тебе хочется, чтобы часть денег потребителя была потрачена на твой товар или услугу и выбор «кровных» пал в твою пользу. Давай смотреть на мобильное приложение через призму маркетинга. Именно в этой колыбели «разврата» мы и будем вести монолог. Хотя, комментарии открыты и у тебя мой дорогой читатель есть право, да что там право, долг я бы сказал, выразить свою эмоцию в них.

По прогнозам в 2017 году будет скачано 200 млд. мобильных приложений

Люди все чаще предпочитают смартфоны нежели обычные ПК. Мы не будем трогать цифры по миру и посмотрим только украинскую тенденцию. 2016 год – 35% (для сравнения U. K. 74%, Россия 71%) со смартфонами и 53% с ПК (для сравнения  U. K. 73%, Россия 80%) жителей Украины. Сейчас за окном середина 2017 года и я уверен что со смартфонами и как следствие высоко поднятыми носами вверх ходят уже около 45% жителей. Есть куда расти, есть куда расправлять плечи и грудь.

smartphonevspcinukraine

Процент людей в Украине которые пользуются смартфонами и ПК.

Уверен что ты уже догадался что это означает и потеряешь свои рученки друг о дружку. Тем временем я продолжу и поделюсь своими мыслями.

Забегая вперед, скажу что уже сейчас трафик с мобильных устройств иногда превышает трафик с обычных персональных компьютеров. Кстати, о том что лучше, адаптивный сайт или мобильное приложение, мы поговорим позже.  Сейчас мы поговорим о нескольких принципах оформления мобильного приложения чтобы тот трафик, который вы уже конвертировали в пользователей приложения или только собираетесь преподнести такой «сюрприз» своим «преданным» клиентам, не был отвергнут вашим мобильным приложением и оно вызвало чувство легкости работы с ним и уважение у вашей целевой аудитории. В конце концов мы стараемся именно для них. Хочу сразу предупредить, картинки которые я буду использовать для примера, были позаимствованы мной с ресурса «ДумайВместеСГугл» во благо знаниям которыми хочу поделится с тобой. Я хочу чтобы между нами не было лжи и хочу быть честным перед тобой.

Основной задачей мобильного приложения является возможность решить какую либо задачу которую пользователь хочет решить здесь и сейчас и сделать это быстро, особенно если пользователь болен синдромом дефицита внимания и гиперактивностью. Одна из причин почему в юзабилити используют предыдущий опыт пользователя, и делают «типичные» интерфейсы, так это именно то что пользователь импульсивен и не желает обучаться, у него есть накопленный предыдущий опыт где «знак» «<» меньше в левом верхнем углу – означает, назад, на предыдущий шаг. И я и ты это прекрасно знаем. Если я начну описывать различные элементы интерфейса, ты практически безошибочно скажешь мне где они находятся и даже что произойдет при нажатии на них – это и называется UX, это наш накопленный предыдущий опыт. По этому сейчас мы рассмотрим наиболее удачные примеры реализации мобильных интерфейсов.

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

Функциональные возможности

bestpractice

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

Меню

menu

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

Шаг назад

back

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

back2

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

Предоставьте возможность выбора

geolocation

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

Схожий интерфейс

mobsite

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

mobsite2

Поиск в мобильном приложении

mobile_search

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

Индексирование поиска

search_index

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

Фильтр

mobile_filtr

Если товара очень много, и при этом нет возможности его отфильтровать – можешь быть уверенным, ты потерял клиента. Никто не станет «рыться» в большой куче, когда ищет всего лишь «иголку».

filtr

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

Сохраняйте историю покупателя

savesearch

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

Фильтр по отзывам

otzivi

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

Возможность сравнения

sravnenie

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

sravnit

Варианты оплаты

mobile_payment

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

Регистрация

mobile_registration

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

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

Разделяйте сценарии авторизации

scen

Юзеры бегло просматривают экраны из-за СДВГ и считают первый попавшийся призыв к действию – единственным возможным вариантом развития событий. Сделайте разные призывы к действию чтобы сразу направить пользователя по одному пути.

Проверка пароля

mobile_password

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

Удобные формы для вода данных

mobile_form

Нужно учитывать, как удобно вводить данные в форму. Обязательно следите за тем чтобы клавиатура не закрывала то поле с которым юзер работает сейчас, поля должны двигаться по экрану в зависимости от того, какое поле активно. По нажатию на «ввод/next» на клавиатуре, курсор должен перемещаться на следующее после, и только после того как будет заполнено последнее поле, кнопка «ввод/next» должна сменится кнопкой «готово/done». Можно добавить автозаполнение. Автоматическую заглавную букву в начало слова. Сканирование кредитных карт – если того требует интерфейс. Текстовые поля должны быть запрещены на ввод цифр и символов. А поля предназначенные для ввода цифр, не должны принимать символы и буквы. Обязательно должна быть проверка символа «@» который можно ввести всего один раз в поле почты. Что касается номера телефона – вы должны позаботится о том, чтобы пользователь вводил только цифры, а приложение само подставляло скобки, черточки и плюсик если он нужен в требуемых местах, а также ограничить например 11 цифрами ввод номера.

Обработка ошибок «на лету»

mobile_form_error

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

Клавиатура

mobile_kayboard

Каждому полю – своя клавиатура. Для текстовых полей, текстовая клавиатура, для полей с цифрами – клавиатура с цифрами. Обязательно совместите это совет с советом «Удобные формы для вода данных» чтобы пользователь не допустил ошибку и к вам в БД попали корректные данные. Потому что кроме нативных клавиатур, есть еще подключаемые к устройству клавиатуры или буфер обмена.

Подсказки и полезная информация

mobile_tips

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

Терминология

terminologia

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

Подписи к графике

podpisi

В меню к графике обязательно добавьте подписи. Это облегчит взаимопонимание юзеров с приложением. Обычно юзеру нужно какое-то время чтобы привыкнуть к приложению. Подписи ускоряют привыкание и уменьшают время привыкания. Через 2-3 раза использования приложения, подписи уже читать не будут, будут ориентироваться исключительно по значкам. Но чтобы это выработать, необходимо изначально подписывать графику. Что характерно, если клиент какое-то время не пользовался приложением, он забудет графические элементы, которые отвечают за определенные действия. Тут снова на помощь ему придут подписи:).

Реакция интерфейса

noreaction

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

reaction

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

Масштабирование

noscale

Не удобная реализация масштабирования.

scale

Фото должно быть качественное и следует разрешить пользователям самостоятельно выбирать масштаб изображения чтобы ознакомится с ним по подробнее. Мы все уже давно привыкли что фото можно масштабировать.

Время запроса разрешений

noallow

allow

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

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