В хорошо продуманный мобильный интерфейс приятно возвращаться.
Приветствую MoneyMaker, в этой статье я хочу поделится с тобой принципами разработки дизайна мобильного приложения. Твоя цель – лояльность к бренду или новый канал коммуникации с потребителем, а может ты посягнул на самое святое потребителя? Его ограниченное количество денег в кошельке. Конечно же тебе хочется, чтобы часть денег потребителя была потрачена на твой товар или услугу и выбор «кровных» пал в твою пользу. Давай смотреть на мобильное приложение через призму маркетинга. Именно в этой колыбели «разврата» мы и будем вести монолог. Хотя, комментарии открыты и у тебя мой дорогой читатель есть право, да что там право, долг я бы сказал, выразить свою эмоцию в них.
По прогнозам в 2017 году будет скачано 200 млд. мобильных приложений
Люди все чаще предпочитают смартфоны нежели обычные ПК. Мы не будем трогать цифры по миру и посмотрим только украинскую тенденцию. 2016 год – 35% (для сравнения U. K. 74%, Россия 71%) со смартфонами и 53% с ПК (для сравнения U. K. 73%, Россия 80%) жителей Украины. Сейчас за окном середина 2017 года и я уверен что со смартфонами и как следствие высоко поднятыми носами вверх ходят уже около 45% жителей. Есть куда расти, есть куда расправлять плечи и грудь.
Процент людей в Украине которые пользуются смартфонами и ПК.
Уверен что ты уже догадался что это означает и потеряешь свои рученки друг о дружку. Тем временем я продолжу и поделюсь своими мыслями.
Забегая вперед, скажу что уже сейчас трафик с мобильных устройств иногда превышает трафик с обычных персональных компьютеров. Кстати, о том что лучше, адаптивный сайт или мобильное приложение, мы поговорим позже. Сейчас мы поговорим о нескольких принципах оформления мобильного приложения чтобы тот трафик, который вы уже конвертировали в пользователей приложения или только собираетесь преподнести такой «сюрприз» своим «преданным» клиентам, не был отвергнут вашим мобильным приложением и оно вызвало чувство легкости работы с ним и уважение у вашей целевой аудитории. В конце концов мы стараемся именно для них. Хочу сразу предупредить, картинки которые я буду использовать для примера, были позаимствованы мной с ресурса «ДумайВместеСГугл» во благо знаниям которыми хочу поделится с тобой. Я хочу чтобы между нами не было лжи и хочу быть честным перед тобой.
Основной задачей мобильного приложения является возможность решить какую либо задачу которую пользователь хочет решить здесь и сейчас и сделать это быстро, особенно если пользователь болен синдромом дефицита внимания и гиперактивностью. Одна из причин почему в юзабилити используют предыдущий опыт пользователя, и делают «типичные» интерфейсы, так это именно то что пользователь импульсивен и не желает обучаться, у него есть накопленный предыдущий опыт где «знак» «<» меньше в левом верхнем углу – означает, назад, на предыдущий шаг. И я и ты это прекрасно знаем. Если я начну описывать различные элементы интерфейса, ты практически безошибочно скажешь мне где они находятся и даже что произойдет при нажатии на них – это и называется UX, это наш накопленный предыдущий опыт. По этому сейчас мы рассмотрим наиболее удачные примеры реализации мобильных интерфейсов.
Врезка: 32% пользователей открывают приложения всего один раз и после этого либо удаляют его, либо никогда больше не возвращаются в него.
Функциональные возможности
Позитивный вариант выигрышнее тем, что приложение изначально уменьшает время на решение задачи, уменьшается количество шагов до выполнения цели. Еще одно преимущество в том что, не зная, что это за приложение (кто-то вообще читает описание в магазинах?) глядя на главный экран, я могу сразу сказать, что это приложение делает и чем может быть полезно мне. Такой функционал вполне ожидаем и понятен мне благодаря заголовку и трем вкладкам.
Меню
В меню необходимо использовать логику и стараться размещать рядом схожие по смыслу категории. Еще один вариант – делать меню в алфавитном порядке. Это навигация по приложению и она должна быть логична и продумана.
Шаг назад
На картинке ваше при нажатии на кнопку «<» вместо того чтобы попасть на экран с выбором комнаты освещение в которой мы хотим контролировать, мы попадаем на главный экран. Таким образом если я допустил ошибку, для того чтобы ее исправить, я должен потрать в 2 раза больше времени и сделать больше повторяющихся действий, доводящих меня до смертной скуки.
Одно из базовых правил юзабилити – я всегда должен понимать, где я был, где я нахожусь сейчас, и что будет дальше. Кнопка «<» всегда должна перемещать меня на один шаг назад. А все сделанные мной действия или введенные данные которые я сделал на следующем шаге, пока не понял что ошибся и не вернулся на шаг назад – должны быть сохранении до моего возвращения и продолжения редактирования шага. Ведь я уже ввел их однажды. Не нужно меня просить вводить их еще раз. Давайте договоримся, что это – не вежливо, в наше цифровое время.
Предоставьте возможность выбора
В приложении всегда должна быть возможность выбора местоположения вручную. Пользователь может выбирать. Экономить ему время и пользоваться автоматическим определением местоположения или ввести адрес друга.
Схожий интерфейс
Есть ситуации, когда по каким-то причинам продолжать выполнять целевое действие нужно уже не в приложении, а за его приделами, чаще всего в мобильной версии сайта. В этом случае ваша задача обеспечить пользователю комфортное продолжение движения к своей цели. Пользователь не должен сомневаться – все ли правильно он делает, особенно если речь идет об оплате какой-либо услуги, покупке товара или продлении подписки. Для того чтобы развеять сомнения, интерфейс у вашего сайта должен быть таким же как и у вашего приложения и в той же цветовой гамме. Таким образом, вы избавите пользователя от мысли: А там ли я вообще нахожусь? Или, а тому ли я сайту вообще плачу?
Поиск в мобильном приложении
Когда я ищу что-то конкретное, я сразу готов ввести свой поисковый запрос в поле для поиска чтобы сэкономить время. Полагаю, что и ты поступаешь соответственно. По этому, чтобы не раздражать пользователя – поле для поиска должно быть очевидным и на видном месте.
Индексирование поиска
Подсказки при наборе, иными словами поиск на лету – это то что ускоряет процесс поиска и делает его очень удобным.
Фильтр
Если товара очень много, и при этом нет возможности его отфильтровать – можешь быть уверенным, ты потерял клиента. Никто не станет «рыться» в большой куче, когда ищет всего лишь «иголку».
Возможность отфильтровать позволит пользователю сразу понять – есть ли в приложении запрашиваемый им товар или нет. Это сэкономит его время и добавит плюсики в вашу карму, потому что вы заботитесь о клиенте и даете ему инструменты для экономии его времени.
Сохраняйте историю покупателя
Экономия времени и сил для пользователя, возможно он всегда делает одно и тоже действие. Например, сильно пристально изучает товар перед покупкой, заходя на него по нескольку раз в день. Таким образом мы сохраняем ему импульсивность и убираем препятствия на пути к покупке.
Фильтр по отзывам
Отзывы сильно влияют на решение о покупке, особенно если человек сильно зависим от чужого мнения. Дайте возможность покупателю фильтровать отзывы по различным критериям. Это сделает принятие решения о покупке легким, если будет возможность отфильтровать, например, только положительные отзывы.
Возможность сравнения
Если есть различные варианты, то покупатель обычно хочет сравнить их и выбрать для себя наиболее приемлемый. Давая такую возможность, мы значительно облегчаем жизнь юзеру. Можно сразу сравнивать характеристики предложения или товара и опираясь на потребность, сразу выделить приемлемый для себя вариант.
Варианты оплаты
Выбор вариантов оплаты, признак безопасности, защищенности и заботы о клиентах. «Кровные» могут хранится в разных источниках. Предоставляя только один способ оплаты, вы заставляете пользователя делать лишние действия для перевода денег между счетами, а это лишний шаг на до нашей цели. Далеко не все клиенты готовы переводит свои «золотые» с одной системы в другую, это вызвано не только потерей времени, но еще и солидной комиссией при переводах через сторонние сервисы. Обязательно стоит позаботится о том, чтобы можно было добавлять различные способы оплаты и редактировать их.
Регистрация
Некто не станет пользоваться приложением, которое сразу предлагает зарегистрироваться. В наши дни это настораживает. Вызвано это все тем же предыдущим опытом, который нам подсказывает что, сделав это, наши контактные данные уйдут в плохие руки и будут заспамлены. Дав пользователю возможность опробовать приложение, понять его логику и выполнить целевое действие без регистрации – вот что ценится сейчас. Но если регистрация все таки нужна. То она должна быть запрошена в наиболее подходящий для этого момент. Например перед оплатой во время покупки. Или после заказа услуги. Хорошем тоном считается сообщение пользователю о том что не будет спама и передачи контактных данных 3м лицам – это повлияет на решение пользователя, более охотно пройти процесс регистрации.
Очень важно при этом дать пользователю выбор, зарегистрироваться с помощью соц. сетей или вводом своих регистрационных данных.
Разделяйте сценарии авторизации
Юзеры бегло просматривают экраны из-за СДВГ и считают первый попавшийся призыв к действию – единственным возможным вариантом развития событий. Сделайте разные призывы к действию чтобы сразу направить пользователя по одному пути.
Проверка пароля
В веб интерфейсах считается надежным, когда пароль очень сложный состоит минимум из 6ти символов, содержит большие и маленькие буквы, цифры, а если еще и символы содержит – это вообще верх мастерства, сенсей гордится таким паролем. Представь все это требуют от тебя ввести на мобильном устройстве. Мне кажется после нескольких раз – клавиатура устройства будет снится пользователю. В мобильных приложениях – чем проще, тем лучше. А возможности вводить простые пароли нет, потому что например, это не безопасно и у приложения с веб приложением, единая база данных. Для этих целей можно выбрать альтернативные способы защиты информации, например, вместо пароля использовать отпечаток пальца или социальные сети.
Удобные формы для вода данных
Нужно учитывать, как удобно вводить данные в форму. Обязательно следите за тем чтобы клавиатура не закрывала то поле с которым юзер работает сейчас, поля должны двигаться по экрану в зависимости от того, какое поле активно. По нажатию на «ввод/next» на клавиатуре, курсор должен перемещаться на следующее после, и только после того как будет заполнено последнее поле, кнопка «ввод/next» должна сменится кнопкой «готово/done». Можно добавить автозаполнение. Автоматическую заглавную букву в начало слова. Сканирование кредитных карт – если того требует интерфейс. Текстовые поля должны быть запрещены на ввод цифр и символов. А поля предназначенные для ввода цифр, не должны принимать символы и буквы. Обязательно должна быть проверка символа «@» который можно ввести всего один раз в поле почты. Что касается номера телефона – вы должны позаботится о том, чтобы пользователь вводил только цифры, а приложение само подставляло скобки, черточки и плюсик если он нужен в требуемых местах, а также ограничить например 11 цифрами ввод номера.
Обработка ошибок «на лету»
Приложение обязано сразу говорить об ошибках, которые были допущены во время заполнения поля. Это экономит время и дает понимания пользователю, где именно он допустил ошибку. Если в сообщение об ошибке удастся включить текст который будет говори что именно нужно исправить – это значительно ускорит процесс заполнения поля и не заставит пользователя анализировать где он ошибся. Как следствие – +1 лояльный, довольный пользователь вашего app.
Клавиатура
Каждому полю – своя клавиатура. Для текстовых полей, текстовая клавиатура, для полей с цифрами – клавиатура с цифрами. Обязательно совместите это совет с советом «Удобные формы для вода данных» чтобы пользователь не допустил ошибку и к вам в БД попали корректные данные. Потому что кроме нативных клавиатур, есть еще подключаемые к устройству клавиатуры или буфер обмена.
Подсказки и полезная информация
Вся нужная пользователю информация должна быть перед ним в удобной форме в конкретный момент времени. Например, при вводе дат пусть отображается календарь, не просите клиента вручную вводить цифры месяца, дня и года. Но при этом когда указываем количество чего-либо, должна сохранятся возможность ввести цифру в ручном режиме. Мелкие подписи под полями помогают лучше ориентироваться и охотнее оставлять данные, потому что дают понимание, ради чего запрошены конкретные данные.
Терминология
Используйте глаголы и понятные выражения для названия меню или кнопок. Иначе приложение рискует быть не понятым и отвергнутым.
Подписи к графике
В меню к графике обязательно добавьте подписи. Это облегчит взаимопонимание юзеров с приложением. Обычно юзеру нужно какое-то время чтобы привыкнуть к приложению. Подписи ускоряют привыкание и уменьшают время привыкания. Через 2-3 раза использования приложения, подписи уже читать не будут, будут ориентироваться исключительно по значкам. Но чтобы это выработать, необходимо изначально подписывать графику. Что характерно, если клиент какое-то время не пользовался приложением, он забудет графические элементы, которые отвечают за определенные действия. Тут снова на помощь ему придут подписи:).
Реакция интерфейса
Приложение должно реагировать на действия пользователя и показывать уведомления по важным действия в разрезе: успех/ошибка.
Если пользователь сделал важное для него действие, приложение обязательно должно дать понять успешно или нет закончилось это действие. Бывает часто что приходится ждать очень долго, например, из-за неполадок с сетью. В таком случае если пользователь сделал какое-то действие и ожидает подтверждения на это действие и интерфейс не реагирует более 2х секунд, следует показывать например, прогресс бар о том что что-то происходит и следует еще немного подождать.
Масштабирование
Не удобная реализация масштабирования.
Фото должно быть качественное и следует разрешить пользователям самостоятельно выбирать масштаб изображения чтобы ознакомится с ним по подробнее. Мы все уже давно привыкли что фото можно масштабировать.
Время запроса разрешений
Для успешной работы приложения иногда необходим доступ к геолокации, микрофону или фотопленке девайса. Для того чтобы юзеры успешно разрешали приложению доступ к этим данным, запрашивать разрешение стоит только в тот момент, когда требуется доступ к этим данным. Иначе пользователю будет не понятно, зачем при входе в галерею приложения, вы запрашиваете доступ к микрофону. Также не забывайте объяснят клиенту – зачем именно вы запрашиваете доступ. Примеры использования всплывающих окон тут.
Теперь MoneyMaker, ты вооружен базовой информацией об интерфейсах и сможешь требовать от своих разработчиков соблюдения этих простых истин. А твои клиенты будут довольны использованием твоего мобильно приложения. Да прибудет с тобой конверсия. Заходи еще на полезный чай.
