Каким должно быть мобильное приложение
Одна из причин, по которой смартфоны заполучили огромные широкоформатные экраны, — это просмотр видео. Процессоры сегодня умеют почти не потреблять энергию, когда смартфон работает в режиме видеоплеера, а по количеству форматов, которые «тянет» типичный Android-смартфон, он даже круче компьютеров. В теории, он справится и с древними видеороликами начала 90-х, и с новым 4K-видео.
В теории, потому что стандартные видеоплееры в смартфонах сделаны по принципу «лишь бы что-нибудь как-нибудь воспроизводилось». Если вас угораздит записать пачку фильмов с компьютера на смартфон, чтобы просмотреть их в дороге, есть риск обнаружить, что половина видеозаписей либо не открываются, либо воспроизводятся без картинки и/или звука.
MX Player — отличный всеядный видеоплеер на Android
Всё это поправимо установкой по-настоящему всеядного плеера. Таких много, но MX — один из самых авторитетных и навороченных среди себе подобных. Он воспроизводит любое видео и музыку в очень экономном режиме даже на старых смартфонах, умеет делать громкость в видеозаписях в два раза выше, чем стандартный плеер (в фильмах с тихой звуковой дорожкой это очень кстати), переключаться между несколькими видами озвучки, масштабировать кадр «щипком», как в фотографиях, и открывать видео из сайтов в удобном Android-плеере.
Сам по себе MX Player бесплатен, но нафарширован рекламой. Версия без рекламы уже стоит денег. Немного хлопот доставляет только то, что из-за жадности держателей патентов поддержку формата AC3 (многоканальный звук в современных фильмах) нужно загружать и «прикручивать» отдельно. Но поверьте на слово — плеер очень хорош и заслуживает таких хлопот.
ES Проводник — очистка смартфона от мусора и передача файлов по Wi-Fi
Давным-давно, когда Android был «полуфабрикатом», в нём не было толковых файловых менеджеров. Для того, чтобы бравировать перед владельцами Айфонов фактом «смотрите, у меня всё по папочкам разложено, как на компьютере!», нужно было загружать отдельное приложение для управления файлами.
Те времена давно прошли, и теперь банальные программы для того, чтобы переименовать, переместить или копировать файлы, есть в каждом смартфоне. А вот качественных среди них нет.
ES Проводник поможет передать файлы по Wi-Fi и очистить систему от мусора
ES Проводник был одним из первых заслуживающих внимания файловых менеджеров на Android, сегодня он разросся вширь и умеет намного больше, чем нужно рядовому пользователю. Но активному пользователю андроидофона точно понадобятся следующие «вкусности»:
WPS Office — Word, Excel и все-все-все
WPS Office — Word, Excel и PowerPoint в кармане
WPS Office (бывший Kingsoft Office, если кому интересно) — не самый крутой офисный пакет из себе подобных, зато он бесплатный, безглючный, быстрый и не обделён возможностями даже в сравнении с дорогостоящими альтернативами. Рекомендуем.
Виджеты погоды/новостей — чтобы не включать телевизор
Как и в случае с файловыми менеджерами, смартфоны не обделены информаторами о температуре за окном и последних новостях, но качество стандартных виджетов почти всегда оставляет желать лучшего. Поэтому советуем разукрасить рабочий стол информационными деталями других разработчиков.
Внешний вид и функциональность виджетов — всегда вкусовщина, но на наш взгляд наименее броские и при этом функциональные варианты погоды и новостей сегодня предлагает Яндекс. Побочный эффект заключается в постоянном «впаривании» поиска, приложения «Такси» и других продуктов компании.
Сначала разглядывать на рабочем столе заголовки и прогноз погоды вместо «обоев» будет непривычно, но поверьте на слово — очень скоро вы начнёте получать удовольствие от того, что будете знать все главные события в мире раньше телезрителей и читателей новостей в интернете. Углубляться только в политические конфликты тоже не обязательно — любители автомобилей или электронных устройств могут получать информацию только по своим любимым темам.
Shazam — узнать, какая песня играет
Каждый день вы слышите музыку, среди которой есть песни, от которых вас будто бьёт током. Потому что вот под эту самую песню вы в детстве носились под ёлкой/собирались на первое свидание/устраивались на работу/ещё что-нибудь, но из текста на иностранном по-прежнему не понятно, о чём речь, а ещё вы не помните, кто вообще исполняет эту песню и как она называется.
С новыми смартфонами это больше не проблема — достаёте из широких штанин вашу «лопату» на Андроид, нажимаете клавишу. Смартфон слушает композицию и называет исполнителя и название песни спустя несколько секунд. Вот для чего нужно приложение под названием Shazam.
О дизайне мобильных приложений написано уже много всего. Тем не менее в этой сфере есть огромное количество нюансов. Некоторые известны не всем, другие быстро забываются. В этом посте мы постараемся описать несколько приемов работы с дизайном приложения, которые можно назвать эффективными и проверенными.
В идеале приложение для мобильного устройства должно работать со скоростью мысли. Более того, интерфейс приложения должен быть понятен даже новичку.
1. Правила, которые всегда работают
Стоит выделить пять основных факторов, имеющих важное значение при проектировании взаимодействия с приложением.
Целеориентированность. Вы создаете дизайн для конкретного пользователя. Сейчас в Сети большое количество данных о различных категориях пользователей, причем многие материалы — исследования, обзоры — доступны бесплатно. Изучение этой информации поможет вам создать приложение, которое полностью соответствует потребностям целевой аудитории.
Юзабилити. Ваше приложение должно быть удобным и интуитивно понятным. К примеру, если вы хотите указать ссылку для перехода на сторонний ресурс, то оформляйте ее привычным образом — с помощью подчеркнутого голубого текста. Удобство и практичность — это первый шаг на пути к тому, чтобы ваша программа стала желанной для пользователя.
Возможность (аффо́рданс) и символичность. Аффо́рданс — это функция. Для простоты снова воспользуемся приемом со ссылкой. Так, голубой подчеркнутый текст указывает на то, что клик по нему переведет пользователя по какому-то адресу. Подобные символы нужно использовать таким образом, чтобы пользователь не размышлял о том, что может означать тот или иной элемент интерфейса. Практичность и рациональность — наше все.
Обучаемость. В идеале пользователь должен без труда догадываться, как работать с программой. Здесь приходят на помощь знакомые и привычные схемы оформления приложения. Они должны помочь человеку без проблем привыкнуть к программе.
Фидбек и время ответа. Отклик приложения должен давать пользователю представление о том, выполнена задача или нет. Это может быть обычный звуковой сигнал или нечто более сложное — например, модальное окно. Убедитесь в том, что фидбек приложения соответствует положениям, установленным Nielsen Norman Group.
Как верно заметил Эндрю Майер (Andrew Maier) в своей статье, эти пять правил должны стать основой, определяющей проектирование любого типа взаимодействия.
2. Знать своих пользователей
Первым шагом при создании целеориентированного интерфейса является изучение своей аудитории. Размер дисплея — это не единственное ограничение при разработке мобильного приложения. Пользователи также формируют требования к интерфейсу и необходимо их учитывать.
В этом вопросе есть четкая тактика, состоящая из трех положений:
Personas: помогает понять, что будет побуждать пользователя выполнить то или иное действие внутри приложения. Это формальные, теоретические модели реальных пользователей.
User Scenarios: обеспечивает моделирование различных ситуаций, помогает предсказать действия пользователя. Благодаря этому можно разработать интерфейс, который оптимально подходит для смоделированных пользователей и задач, которые они хотят выполнить.
Experience maps: здесь изучаются все возможные условия отдельного взаимодействия. Схема поможет описать каждый шаг пользователя, который будет выполнен с высокой вероятностью на определенном этапе работы с приложением. Такая схема поможет понять эмоции и обстоятельства, которые приводят к выполнению каждого действия.
Самым простым способом выполнения этих пунктов может быть, например, удаленное тестирование юзабилити при помощи сервиса вроде UserTesting, что помогает изучить поведение пользователей в естественных условиях. Чтобы еще лучше изучить этот вопрос (например, учитывать жесты и даже положение тела), стоит провести работу с реальными пользователями (минимум — пять человек).
Отличные советы по этому вопросу дает Джефф Саурос (Jeff Sauros).
3. Контент и поведение пользователей
Этот пункт позволяет параллельно проводить разработку приложения и изучать возможное поведение пользователей. Идеальным вариантом является набросок, по которому изучается взаимодействие пользователей с контентом. И в этом нет ничего глупого — работу человека с содержимым программы можно проиллюстрировать на бумаге. Это поможет понять, как примерно будут вести себя пользователи внутри приложения.
К примеру, вы создаете банковское приложение. Предполагаемый сценарий: пользователь хочет включить функцию автоматического внесения средств на счет:
Автодепозит выкл.
Выбираем период
[Раз в месяц][Дважды в месяц]
[Через неделю][Каждую неделю]
[Выбрать календарный день]
Установка суммы
Прежде чем сделать прототип, рукописная схема поможет изучить наиболее важную часть приложения — контент. Понимание возможной схемы взаимодействия пользователя с контентом поможет дать более точную оценку числа страниц/экранов, необходимых в программе.
Следующий шаг — создание схемы для каждой страницы перехода (в нашем случае это четыре схемы). И здесь уже можно продолжать итерации, постепенно переходя от бумажных схем к цифровому прототипированию (в этом может помочь инструмент вроде UXPin).
Схема поможет быстро изучить возможные переходы на страницы / со страниц приложения. Скетчи позволят «оживить» приложение и понять большее количество деталей и структуры программы. А уже цифровой прототип поможет протестировать поведение реальных пользователей.
4. Улучшение юзабилити с использованием знакомых пользователю схем
Дизайн мобильного приложения стоит сделать «знакомым» для пользователя. К примеру, практически все картографические сервисы используют прием навигации slide-out. Это позволяет пользователю чувствовать себя «как дома». Приложение незнакомо, но схема работы с ним общеизвестна и понятна.
Стоит уточнить, что мы не предлагаем вам копировать дизайн приложений других разработчиков. Речь идет именно об использовании общедоступных элементов интерфейса. Если вы воспользуетесь этим советом, стоит убедиться, что дизайн вашего приложения соответствует ожиданиям пользователя.
Рекомендуем использовать две категории схемы взаимодействия пользователей с интерфейсом приложения:
Жесты: Тап, свайп, двойной тап, щипок, масштабирование — все это давно стало привычным для пользователя. Подробно о жестах можно узнать вот здесь.
Оживление: здесь имеется в виду анимация, которая сделает приложение более живым. Рекомендуем объединить анимацию с жестовым управлением.
Схемы взаимодействия пользователей с интерфейсом приложения предопределяют его структуру и отдельные элементы. К примеру, кнопки навигации в нижней части приложения более привычны для пользователей, чем кнопки, вынесенные в верхнюю часть программы.
Yelp — отличный пример приложения с интуитивно понятным интерфейсом.
5. Учитываем размер пальцев пользователя
Да, пальцы многих пользователей гораздо больше, чем могли бы представить любители утонченного дизайна. Поэтому обязательно нужно адаптировать свою программу к пальцам разного размера.
Им просто нужно оставлять достаточно места. Если ваши кнопки слишком малы или расположены слишком близко друг к другу, некоторые люди просто не смогут попадать по ним. Как следствие, пользователи будут раздражаться и, может быть, прекращать работу с такой программой.
Вот что стоит учитывать, проектируя кнопки и другие сенсорные элементы:
Все мы держим телефон или планшет по-разному. Даже один и тот же человек в различных ситуациях держит устройство разными способами.
Наши пальцы действительно большие. Их ширина составляет около 45–57 пикселей, что больше, чем рекомендует большинство руководств для тестовых устройств. Apple, например, рекомендует цель квадратной формы с размером стороны в 44 пикселя. А этого далеко не всегда достаточно.
6. Не отказывайтесь от градиента и теней
Да, плоский дизайн уже стал новым стандартом, но это вовсе не значит, что тени и градиент — далекое прошлое и от такого варианта оформления нужно отказаться. Вовсе нет, просто подход к дизайну несколько изменился.
Тень обычно очень актуальна при проектировании кнопок, переключателей и подобных элементов.
Тени и градиент отдельных элементов делают интерфейс более понятным пользователю. Эти приемы оформления можно использовать для создания объемных кнопок и полей ввода.
7. Убираем хаос
Правило трех кликов актуально и сейчас, и его стоит использовать при проектировании дизайна приложений. Почему? Да потому, что оно позволяет понять, что именно действительно необходимо для страниц приложения.
В идеале пользователь должен выполнить все задачи быстро и за как можно меньшее количество действий. СЕО Yahoo Марисса Майер даже предлагает использовать правило двух тапов. Если этот принцип не соблюдается, Марисса предлагает работать над приложением дальше, совершенствуя его дизайн.
Старайтесь сделать так, чтобы пользователю приходилось выполнять минимальное количество действий. Чем меньше пользователю придется прилагать усилий при взаимодействии с программой, тем выше вероятность того, что ваше приложение станет успешным.
150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.
О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».
Алексей Комаров
UX/UI-дизайнер в IBM
светлана третяк
Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).
Давайте разбираться с самого начала.
Что нужно знать мобильному дизайнеру
Колористика
— искусство сочетания цветов.
Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).
Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.
Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.
Сервис Coolors позволяет создавать цветовую палитру по фотоТипографика
— умение оформлять текст при помощи набора и вёрстки.
По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.
Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.
Выравнивание по левому краю придаёт тексту аккуратный вид — его легче воспринимать. Строки начинаются на одном уровне, и глаз быстро находит начало следующей строки — удобно и быстро привыкаешь.
Композиция
— умение грамотно управлять объектами в пространстве. Какие размеры объекта, отступы между объектами и краями экрана, расстояния и связи между объектами позволят создать гармоничную композицию для лучшего восприятия объектов.
Если говорить о том, как колористика, типографика и композиция влияют на поведение пользователя и эффективность интерфейса, то стоит упомянуть про четыре типа нагрузок.
Когнитивные нагрузки — усилия, которые прикладываем, чтобы распознать объект, логику его работы и принять решение о дальнейших действиях. Например, понимаем, что перед нами кнопка, а не округлый прямоугольник, и на эту кнопку можно нажать, чтобы попасть на нужный экран.
⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.
Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.
⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.
Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.
⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.
Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.
⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.
Все типы нагрузок идут в связке, влияя друг на друга.
К примеру, если приложение предназначено для пожарных, которые часто находятся в стрессовых ситуациях, нужен максимально понятный интерфейс — у них нет времени разбираться в чём-то сложном. А если пользователь — офисный сотрудник, который заходит в приложение, чтобы убить время по дороге на работу, то можно добавить больше контента или функций, чтобы пользователь увлёкся и провёл в приложении больше времени.
Инструменты
Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.
Figma
Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.
Sketch
Платный графический редактор для macOS. Плюс Sketch в том, что на рынке он дольше Figma, поэтому в некоторых случаях возможностей и интеграций для него находится больше. Но если вы фрилансер, работать с заказчиками будет непросто, поскольку это не кросс-платформенный инструмент. В Sketch можно работать в офлайне.
Adobe XD
Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.
Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.
Из других инструментов дизайнера можно отметить:
В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.
Сервисы для создания прототипов
Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.
Цели и задачи разработки
Дизайнер должен понимать, какие задачи у бизнеса и для кого предназначено приложение.
Приложение — это инструмент бизнеса со своими целями и задачами.
Для примера рассмотрим мобильное приложение банка.
снизить расходы на обслуживание клиентов в отделениях и повысить средний доход на одного клиента.
контролировать свои расходы.
создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.
При разработке приложения всегда учитывают требования бизнеса, задачи пользователей и возможности технологий.
Можно сделать великолепный дизайн, но он не будет решать задачи компании или разработчики не смогут его реализовать. Например, бывает, что бизнес выдвигает гипотезы, не проверяет их на этапе исследования и сразу отправляет в разработку. Получается функциональность, которая никому не нужна, при этом время и деньги потрачены впустую.
Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.
К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».
Soft skills
Коммуникационные навыки
Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.
Правильная реакция на критику
Дизайнеров постоянно критикуют, и многие на это обижаются.
Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.
Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.
Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение ?
К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯
Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.
Это способ изображения процесса общего системного мышления с помощью схем.
Что нужно учитывать при разработке интерфейса
Взаимодействие с пользователями
Создание мобильных приложений не сильно отличается от создания сайтов в плане процессов — и те, и другие относятся к цифровым продуктам.
Основное различие заключается во взаимодействии пользователя с продуктом. За компьютером мы сидим или стоим, а вот с телефоном мы можем оказаться в любой ситуации: на прогулке, занимаясь спортом, в магазине, автомобиле и так далее. Также различаются размеры устройств и период контакта.
Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.
Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.
Ведь чтобы зайти на сайт, нужно ввести его адрес в строку браузера, а приложение можно открыть и сразу им пользоваться.
Нюансы мобильных платформ
Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).
В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».
Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.
В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).
Интерфейс приложения лучше сразу адаптировать для двух платформ, а не делать что-то среднее — в будущем такая попытка сэкономить может дорого обойтись.
Стоимость «экономии» оценить в вакууме сложно — зависит от компании, бизнес-модели, рынка. Немаловажно и то, что для iOS характерна одна модель поведения пользователей, для Android — другая.
Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).
Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.
Адаптация контента
Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.
Длинные процессы
Если на сайте можно использовать длинные формы (опросники) в несколько шагов, то на телефоне это делать не рекомендуется. Пользователю будет неудобно их заполнять, и он может бросить это занятие в любой момент.
Профессия
Дизайнер
мобильных приложений
Узнать больше
- Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
- Работайте над своим проектом или выберите учебный
- Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии
Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.
Этапы создания мобильного приложения
Исследование
Погружаемся в цели и задачи бизнеса.
Изучаем целевую аудиторию.
Исследования делятся на количественные и качественные.
Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.
Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.
Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.
Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.
Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.
Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.
Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.
На основе вышеуказанных артефактов дизайнер принимает решения.
Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.
Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.
Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.
Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:
- бизнес-аналитик погружается в бизнес-процессы и собирает требования от компании,
- UX-аналитик изучает проблемы пользователей, проводит качественные и количественные исследования,
- продуктовый аналитик обычно работает с метриками и показателями продукта.
Проектирование
По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.
Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.
На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».
Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.
Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.
Бумажные прототипы подходят для быстрого обсуждения идей, чтобы проверить себя и синхронизироваться с командой перед тем, как приступить к работе в графическом редакторе.
Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.
Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.
Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.
Вспомните, когда вы в последний раз заказывали такси по номеру телефона? Когда оплачивали счета в отделении банка или заказывали суши на сайте ресторана?
С этими потребностями научились справляться мобильные приложения. Причем, 24% пользователей в России выходят в интернет только с мобильных устройств.
Данные говорят о том, что современный бизнес должен находиться не только в интернете, но и в смартфонах клиентов. Интернет-революция уже позади — наступила эра мобильных технологий.
Обычного сайта уже недостаточно. На сайте клиент находит услугу, совершает запись и уходит. А когда он установил приложение себе на телефон – считайте, ваш бизнес круглосуточно у него в руке.
При появлении потребности в услуге клиент не будет ничего искать, а сразу откроет приложение. В следующий раз выбор будет также очевиден. Логотип вашей компании на экране телефона будет о себе напоминать.
Так бизнес достигает самого близкого взаимодействия с клиентом.
Как понять, нужно ли клиентам мобильное приложение
Как владелец бизнеса решает, разрабатывать ли мобильное приложение, и будут ли им пользоваться? Зачастую, только основываясь на своих субъективных знаниях.
Но что вы на самом деле знаете о том, насколько активно они пользуются смартфонами?
Лучше использовать объективные данные.
Получить информацию можно с помощью инструментов аналитики поисковых систем Google и Яндекс, установленных на вашем сайте, или пикселей социальных сетей Вконтакте и Facebook. Все, что надо сделать — это оценить количество клиентов, которые заходят с мобильных устройств.
Это поможет ответить на вопрос, стоит ли вкладываться в разработку приложения, и каких результатов от этого можно ожидать.
Сколько денег приносит мобильное приложение
Самой переоцененной метрикой является количество скачиваний. Оно не влияет ни на что, кроме самомнения владельца бизнеса — ведь скачивание не означает запись.
Оценивать следует только активных пользователей и то, сколько денег это приносит.
Рассмотрим финансовую отдачу от разработки мобильного приложения.
Повышенная частота посещений
По данным YCLIENTS, через приложение клиенты записываются на 26% чаще, чем при оффлайн-записи.
Значит, в среднем, клиент совершает 1572/719/2 = 1,09 записей в месяц.
В соответствии со статистикой YCLIENTS, клиенты, пользующиеся приложением, будут совершать 1,09*126% = 1,37 записей в месяц.
При среднем чеке за услуги 1350 рублей один клиент, записываясь оффлайн, приносит выручку 1350*1,09 = 1471 рублей в месяц.
А клиент, использующий мобильное приложение, приносит 1350*1,37 = 1849 рублей в месяц.
Исходя из того, что доля валовой прибыли в чеке составляет 50%, дополнительная прибыль с одного клиента, начавшего пользоваться мобильным приложением, составит (1849-1471)/2 = 189 рублей в месяц.
Определив дополнительную прибыль от мобильного приложения, рассчитаем коэффициент окупаемости, исходя из стоимости приложения 40000 рублей в год:
ROI = 64260 *12/40000 = 1928%
Привлечение новых клиентов
Также стоит учитывать клиентов, которые впервые записались именно через мобильное приложение. Это дополнительные, бесплатные клиенты, так как приложения в магазинах AppStore и PlayMarket являются лидогенераторами и привлекают клиентов без дополнительных вложений в рекламу.
За 2018 год на услуги впервые через приложение записался 491 новый клиент. Используя средний чек за услуги, можно посчитать, сколько выручки принесли эти клиенты, которые пришли в салон через приложение: 1350*491 = 907859 рублей за год.
Но не стоит забывать, что само по себе приложение не сможет о себе рассказать. Хорошим инструментом в данном случае служит Instagram, посты о такой возможности для клиентов увеличивают вовлеченность и количество установок.
О возможности скачать приложение необходимо регулярно напоминать (фото @oii.vse)
При наличии сайта, обязательно размещайте информацию о мобильном приложении и активные кнопки на скачивания в магазины AppStore и PlayMarket.
В современных условиях конкуренции выигрывает тот, кто предоставляет клиенту все возможные варианты совершить запись, в том числе и через мобильное приложение.
Какие задачи решает современное мобильное приложение для бизнеса
Мобильное приложение решает целый ряд задач, стоящих перед бизнесом. Вот несколько примеров.
Создание конкурентного преимущества
Большинство бизнесов использует традиционные каналы взаимодействия с клиентами: форма обратного звонка на сайте, листовки, телефон. В лучшем случае, это онлайн-запись на сайте или в соц.сетях. Разработав мобильное приложение, можно выгодно отличаться от своих конкурентов, предоставив клиенту современный и удобный сервис коммуникации.
Наличие современного приложения улучшает вашу компанию в глазах клиента и демонстрирует, что вы идете в ногу со временем.
Напоминания и информирование об акциях
Люди устали от избытка бонусных карт. Через приложение удобнее вести программы лояльности, поощряя постоянных клиентов. Им легче следить за накоплением баллов и скидок. Программа лояльности в мобильном приложении заменяет бонусную карту и освобождает место в кошельке.
PUSH-уведомления в приложениях помогут клиентам быть в курсе всех новостей и акций компании, напомнят о запланированной записи или предложат прийти повторно, если клиент давно не приходил.
Увеличение прибыли и дополнительный источник клиентов
Мобильные приложения уже занимают большую долю в источниках записей клиентов, и начинают вытеснять другие источники.
Это не только инструмент повышения лояльности постоянных клиентов, но и возможность привлечения новых. Рекламные компании Facebook, Instagram и Яндекс уже давно позволяют запускать рекламу мобильных приложений.
Также через мобильные приложения клиенты записываются чаще, чем приносят компании больше дохода.
Мобильные приложения от YCLIENTS
С декабря 2016 года в YCLIENTS начал работу собственный отдел мобильной разработки. За 2 года было выпущено более 500 индивидуальных приложений для бизнесов из разных сфер.
Персональное мобильное приложение для онлайн-записи от YCLIENTS интегрировано с автоматизированной системой управления бизнесом и предлагает индивидуальный набор опций. Квалифицированная техническая поддержка YCLIENTS поможет чувствовать уверенность в стабильной работе приложения.
Одной из важнейших особенностей мобильного приложения от YCLIENTS является единый интерфейс записи, привычный для клиента. Раздел записи аналогичен виджету онлайн-записи на сайте, приложениях ВК и ОК, Яндекс.Картах, 2GIS, ZOON и на любых других источниках в интернете.
Приложение постоянно развивается, на сегодняшний день это уже 74-я версия с такими возможностями как геолокация, личный кабинет клиента, повторный визит, запоминание любимого филиала, многоязычность и программа лояльности.
Читайте также: