Искусство и дизайн в мобильных приложениях реферат
Обновлено: 02.07.2024
Качпер Рудуха
(Kacper Ruducha)
об авторе
Графический дизайнер из Варшавы. Рисовал с детства, но не понимал, что делать со своими рисунками, — пока не пришёл в графдизайн. Мечтает о своей дизайн-студии. Ведёт блог на Medium.
Ссылки
Реферативный перевод
Михаил Горшков
Перевожу, пишу, редактирую. Люблю живую речь.
Уважаю букву Ё.
Формализм мастдай.
Мобильность победила. Сотовых телефонов в мире намного больше, чем ноутбуков и десктопов, и они создают больше интернет-трафика. Ниже, на сравнительной диаграмме, отчётливо виден переломный момент, когда наступила так называемая эпоха пост-ПК:
На рубеже 2016 и 2017 годов мобильные телефоны вырвались вперёд, и в ближайшее время эта тенденция вряд ли изменится. На графике представлен только интернет-трафик, но есть ещё и нативные приложения. Поэтому можно сказать, что мобильник — король цифрового мира.
Android против iOS
Пока две собаки грызутся за кость, третья с ней убегает, не так ли? Не в этом случае. Никогда ещё положение остальных игроков не было столь плачевным. Два процента рынка — вот всё, что им осталось, и заманить к себе разработчиков будет непросто.
О чём нужно помнить дизайнерам мобильных приложений — неважно, работаете вы с Android или же с iOS?
Опирайтесь на соглашения платформы
Работа с приложениями должна быть привычной и интуитивно понятной даже новым пользователям, поэтому Google и Apple призывают разработчиков унифицировать интерфейсы нативных приложений. И дают рекомендации, как это сделать.
Для Android написан Google Material Design, а для iOS — Human Interface Guidelines. Непременно добавьте эти странички в закладки, вы будете часто возвращаться к ним при работе. Проштудируйте их, познакомьтесь с образцами нейминга, дизайна и юзабилити. Не забывайте, что документы эти регулярно обновляются, поэтому пересматривайте их время от времени, чтобы быть в курсе изменений.
Не считайте эти документы чем-то непреложным. Это просто рекомендации, а не строгие инструкции. Они вам в помощь, но не обязательно следовать им всегда и во всём. Можете даже смешивать рекомендации и применять элементы, характерные для одной платформы, на другой.
Если вы хотите разрабатывать для iOS, а раньше пользовались только устройствами на Android, очень вам советую походить с айфоном. Вы переключитесь, познакомитесь с яблочным интерфейсом и лучше поймёте его пользователей.
Проектирование и инструментарий
Создание мобильного приложения мало чем отличается от разработки других цифровых продуктов. Обычно всё происходит так:
- Озарение, или просто отправная точка. Это может быть идея инновационного продукта (ещё один убийца Facebook!) или просто сбор требований клиента.
- Моделирование. На этом этапе пишутся пользовательские сценарии и истории, а затем их представляют в виде блок-схем и рисуют малодетализированные каркасы графического интерфейса (low-fidelity wireframes). Есть множество инструментов, позволяющих вместе создавать такие схемы онлайн. Очень популярен RealtimeBoard, теперь он называется MIRO. Если нужно что-то бесплатное — выручит Freehand от InVision. Когда дело доходит до рисования каркасов, на ум приходят бумага и карандаш. Нужно что-то ещё? В мобильном приложении Marvel легко фотографировать свои рисунки и создавать интерактивные схемы.
- Макеты (мокапы). Визуальное представление вашего приложения. В начале эры цифрового дизайна правил бал Adobe Photoshop. Но он не был заточен под проектирование интерфейсов и постепенно сдавал позиции. Согласно отчёту Avocode Design Trend, в 2016 году старый добрый PS потерял пальму первенства. Теперь отраслевой стандарт для создания макетов — приложение Sketch. Благодаря своему огромному сообществу он обзавёлся расширениями и плагинами, а также интеграцией с уймой сторонних программ. Sketch — простой, но мощный инструмент.
- Прототипирование. С интерактивным прототипом можно взаимодействовать как с интерфейсом уже готового приложения. Его демонстрируют инвесторам, клиентам и разработчикам. Наиболее популярный инструмент — программа InVision. Очень часто её дополняет Craft, это набор плагинов для Sketch и Photoshop. Стоит упомянуть, что и сам Sketch недавно обзавёлся инструментами для создания прототипов.
- Анимация и микровзаимодействия 1 . Этот этап иногда пропускают — по крайней мере по трём причинам. Прежде всего, для стандартных компонентов iOS и Android варианты взаимодействия с пользователем уже предопределены. Во-вторых, сложная анимация может значительно затянуть разработку. Наконец — и это тоже важно — для создания анимации и микровзаимодействий нужны навыки, которые есть не у каждого дизайнера. Но и тут на помощь приходят инструменты. Для простых шаблонов хватает Flinto и Principle. Если вы создаёте что-то сложное — выбирайте Framer.
- Передача разработчикам. Чтобы реализовать проект, нужно как-то переадресовать дизайн разработчикам. Этот процесс и называется передачей (handoff), и для этого тоже есть приложения. Если ваша компания ещё ничего не выбрала, можете поиграть с Avocode, Sympli или Zeplin. Все они позволяют экспортировать ресурсы, проверять свойства дизайна и многое другое. Кроме того, эти приложения часто используются для общения внутри команды.
1) микровзаимодействия
Части продукта, выполняющие небольшую конкретную задачу.
Что происходит с инструментами
для UX и UI-дизайна
С тех пор как цифра пришла на смену бумаге, инструменты для UX- и UI-дизайнеров развивались стремительнее всех прочих дизайнерских программ. И я вижу две основные тенденции.
Во-первых, пора монополий прошла: пока ещё легко выбрать предпочтительный инструмент для каждого этапа проектирования, но всё слишком быстро меняется. Например, дизайнеров всё больше привлекают приложения Figma и Adobe XD, бросившие вызов Sketch.
Во-вторых, инструменты становятся самодостаточными, а это значит, что вы можете охватить весь процесс разработки, используя только одно программное решение: просто взгляните на InVision Studio.
Особенности мобильного дизайна: помните об ограничениях.
Где-то я прочёл, что творчества без ограничений не бывает. Проектируя для мобильных телефонов, обратите внимание вот на что:
Меньший размер дисплея
На деле это означает, что на экране помещается меньше элементов. Привычная навигация по сайту тоже отменяется. Нужно иначе отображать содержимое и сократить путь пользователя.
Проектирование для сенсорного экрана
Забудьте про клавиатуру и мышку, теперь приложением управляют касания и жесты. Кликабельные элементы должны быть крупнее, чтобы в них легко было попасть пальцем.
Ограничения трафика и производительности
Остерегайтесь тяжёлых файлов и форматов мультимедиа, для которых нужно загружать много данных из интернета, — это может влететь пользователям в копеечку. Следите, чтобы количество обращений к API, отправляемых вашим приложением, не снижало общую производительность сервера.
…и не забывайте о возможностях
Мобильным приложениям доступно больше возможностей устройства, и они используют их лучше, чем традиционные настольные или веб-приложения. У вас есть прекрасный шанс погрузить пользователей в продукт, представляя программное и аппаратное обеспечение как единое целое.
- Подумайте о навигации жестами.
- Не забывайте, что почти у всех современных устройств есть камера и микрофон — это ваша альтернатива для ввода данных.
- Прикиньте, как перестраивать макет, когда меняется ориентация экрана: управлять приложением должно быть удобно в любом случае.
И ещё один общий совет. Если вы решили, что мобильное приложение станет частью вашей цифровой стратегии, сразу продумайте его роль в ней. От того, будет ли оно основной точкой входа для ваших пользователей или дополнением для другой площадки или сервиса, зависит общее направление проектирования.
150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.
Алексей Комаров
UX/UI-дизайнер в IBM
светлана третяк
Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).
Давайте разбираться с самого начала.
Что нужно знать мобильному дизайнеру
Колористика
— искусство сочетания цветов.
Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.
Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.
Типографика
— умение оформлять текст при помощи набора и вёрстки.
По сути дизайн — это оформление контента, 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
Коммуникационные навыки
Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.
Правильная реакция на критику
Дизайнеров постоянно критикуют, и многие на это обижаются.
Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.
Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.
Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение ?
Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.
Это способ изображения процесса общего системного мышления с помощью схем.
Что нужно учитывать при разработке интерфейса
Взаимодействие с пользователями
Создание мобильных приложений не сильно отличается от создания сайтов в плане процессов — и те, и другие относятся к цифровым продуктам.
Основное различие заключается во взаимодействии пользователя с продуктом. За компьютером мы сидим или стоим, а вот с телефоном мы можем оказаться в любой ситуации: на прогулке, занимаясь спортом, в магазине, автомобиле и так далее. Также различаются размеры устройств и период контакта.
Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.
Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.
Ведь чтобы зайти на сайт, нужно ввести его адрес в строку браузера, а приложение можно открыть и сразу им пользоваться.
Нюансы мобильных платформ
Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).
Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.
В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).
Интерфейс приложения лучше сразу адаптировать для двух платформ, а не делать что-то среднее — в будущем такая попытка сэкономить может дорого обойтись.
Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).
Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.
Адаптация контента
Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.
Длинные процессы
Если на сайте можно использовать длинные формы (опросники) в несколько шагов, то на телефоне это делать не рекомендуется. Пользователю будет неудобно их заполнять, и он может бросить это занятие в любой момент.
Профессия
Дизайнер
мобильных приложений
Узнать больше
- Сможете самостоятельно разрабатывать дизайн мобильных приложений и руководить созданием интерфейсов мобильных продуктов
- Работайте над своим проектом или выберите учебный
- Каждый выпускник получает помощь и поддержку Центра развития карьеры Нетологии
Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.
Этапы создания мобильного приложения
Исследование
Погружаемся в цели и задачи бизнеса.
Изучаем целевую аудиторию.
Исследования делятся на количественные и качественные.
Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.
Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.
Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.
Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.
На основе вышеуказанных артефактов дизайнер принимает решения.
Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.
Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.
Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.
Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:
- бизнес-аналитик погружается в бизнес-процессы и собирает требования от компании,
- UX-аналитик изучает проблемы пользователей, проводит качественные и количественные исследования,
- продуктовый аналитик обычно работает с метриками и показателями продукта.
Проектирование
По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.
Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.
Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.
Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.
Бумажные прототипы подходят для быстрого обсуждения идей, чтобы проверить себя и синхронизироваться с командой перед тем, как приступить к работе в графическом редакторе.
Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.
Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.
Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.
- База email адресов
- База push notifications устройств
- Новые пользователи продукта и пользователи текущий сессий — splash screens
Увеличение количества email подписчиков.
Email адреса пользователи оставляют крайне неохотно, особенно там, где в этом нет острой необходимости, например если не требуется регистрация. Мы нарисовали экран с милым iPhoneчеком, который предлагал подписаться на нашу email рассылку. В итоге всего 3% пользователей, видимо из сочувствия к нашему персонажу, оставляли свои email адреса. Остальные 97% бессердечно проходили мимо. Мы особенно не рассчитывали на большое количество подписчиков и не расстраивались, но процент конверсии, конечно, хотелось увеличить.
И мы нашли просто и бесплатный способ — заменили слово Subscribe на Register. Действительно, пользователь загрузил наше приложение, сделал это официально через AppStore и вполне понятное и привычное действие зарегистрировать приложение. Таким образом регистрации у нас как бы нет, а вроде как и есть. Процедура не обязательная, т.к. была бы обязательная регистрация, без понятных причин на это, мы получили бы стоп-экран, а нам на этом приложении ещё и деньги зарабатывать нужно. Итог: количество email подписчиков увеличилось в 3 раза и сейчас составляет порядка 9-11%.
Увеличение прибыли
Не смотря на то, что разными методами нам удалось поддерживать достаточно большое количество загрузок каждый день (подробнее об этом ТУТ, конверсия в платных пользователей была не очень высокой.
В данном случае мы не только переработали дизайн, но и обновили немного бизнес модель. В первой версии Image Transfer мы давали возможность пересылать бесплатно до 5 ФАЙЛОВ (фотографий и видео). Важный момент — показывайте окно покупки только тогда, когда потребность этой покупки у пользователя максимальная, так Evernote предлагает upgrade, когда у вас заканчивается бесплатный объём. В нашем случае таким моментом была пересылка более 5 файлов, при отправки меньшего количества экран in-app purchase даже не показывался. Как оказалось пользователи вполне успешно пересылали до 5 видео файлов (2-3) и не видели экран покупки, а 10 фотографий можно было переслать и за два раза.
Увеличение конверсии push notifications
При решении этой задачи мы столкнулись с двумя проблемами:
Должен признаться, что мы и сами грешим, не добавляя предварительный экран перед запросом, но только в тех приложениях, в которых уровень конверсии нас устраивает.
Немного о Rate This App
Тут вы прочитали о том, что рейтинги приложения крайне важны для продвижения, они влияют на принятие пользователями решений и позиции в поисковой выдаче.
Проблема была в том, что алгоритм работы Rate This App работал очень просто — после 5го запуска показать окно (а может ещё после 10го и 15го). Модель понятная, но не универсальная. Мы создали свой алгоритм Rate This App, который с высокой долей вероятности гарантирует получение высоких оценок от пользователей. Конечно недовольный пользователь с большей охотой поставит плохой отзыв, чем довольный хороший, но наш алгоритм ориентирован именно на то, чтобы восстановить баланс сил. Тут всё очень похоже с in-app покупками — просите написать отзыв, когда вероятность получить 5ть звёзд максимальна.
Кстати, делать персонифицированное окно Rate This App, как на картинке особой необходимости нет, на качесво оценок это влияет мало. Если, конечно, вы не решили воспользоваться нашей идеей.
Пустые экраны и уменьшение показателей отказов
Создание своей экосистемы
Мы пока используем это всего лишь информируя пользователя, запустившего бесплатную версию продукта, о том, что у него установлена платная и предлагаем открыть именно её. Не большой кусочек кода сильно увеличивает лояльность пользователей к нашем продуктам.
Эта функциональность открывает огромные возможности для маркетологов и разработчиков, но мы слишком мало ею пользуемся.
Про in-app покупки и игры.
O CapableBits
WebCamp: Mobile Day
22 июля в рамках Odessa Innovation Week пройдет конференция WebCamp: Mobile Day, которая будет посвящена вопросам разработки, дизайна и продвижения мобильных приложений.
Конференция будет состоять из двух потоков: “Разработка” и “Дизайн & Продвижение”. В потоке “Разработка” основной упор будет сделан на технические аспекты создания приложений под такие платформы, как: iOS, Android, WP8, Tizen и другие. В потоке “Дизайн & Продвижение” речь пойдет о дизайне мобильных приложений, а также об их продвижении в различных магазинах.
Вы сможете задать вопросы Евгению Плохому (plokhoj), автору данной статьи, а также послушать другие доклады на данную тему.
Согласно Statista, на сегодняшний день в мире 3,5 миллиарда мобильных пользователей и к 2021 году их будет почти 4 миллиарда. Поэтому мобильное приложение для e-commerce проектов уже больше, чем просто рекомендация. Как создается дизайн мобильных приложений? Что отличает мобильное приложение от других проектов? Какие существуют особенности и возможности мобильного приложения, которые стоит учитывать? В этой статье мы покажем процесс, результаты и реальные примеры.
Процесс создания дизайна мобильных приложений
Есть два основных вида работ с мобильными приложениями — редизайн уже существующего приложения и создание нового приложения с нуля.
Если речь идет о редизайне приложения, то тут есть от чего отталкиваться. Есть аналитика, отзывы пользователей и фидбек бизнеса. Есть возможность подключить инструменты для проведения юзабилити аудита и на основании полученных данных уже оптимизировать дизайн мобильного приложения для увеличения конверсии.
При проектировании приложения с нуля нужен совсем иной подход, который состоит из нескольких этапов.
Сбор информации и требований
Создание дизайна мобильных приложений начинается со сбора информации и требований. В свою очередь требования делятся на 2 типа:
1. Требования пользователя — для кого создается приложение, какие задачи оно должно решать, для чего нужен этот продукт с точки зрения целевой аудитории (ЦА) и т.д.
Например, мобильное приложение Spot Hunter ориентировано на профессиональных фотографов и клипмейкеров, помогает им найти красивые локации и места для проведения съемок, а также для получения прибыли при публикации новых локаций
2. Требования бизнеса — это то, как бизнес видит продукт, какие функции он должен выполнять и как, по его мнению, должны воспринимать приложение пользователи. В случае если это стартап, то требуется дополнительная информация, от которой будет отстраиваться мобильное приложение:
- Какую нишу будет занимать приложение?
- Какие задачи должен решать продукт?
- Как мобильное приложение будет монетизироваться?
- Как приложение будет себя позиционировать на рынке? В чем его уникальное торговое предложение (УТП)?
- Кто главные конкуренты?
- Какие есть примеры best practice на рынке?
NFM — приложение для пользователей, которые работают с сельскохозяйственным оборудованием. Приложение позволяет в любой момент ознакомиться с новой техникой, записаться на обучение, получить поддержку сервиса, заказать расходные материалы, найти инструкции по эксплуатации техники и прочее.
На этом этапе, основная цель команды — это определить задачу, которая стоит перед продуктом и пользователем, чтобы определить перечень сценариев использования приложения и на основании сценариев создать архитектуру и навигацию приложения.
Создание архитектуры и навигации
На данном этапе создания дизайна мобильных приложений основная задача — это продумать информационную и навигационную архитектуру, т.е. из каких элементов будет состоять продукт, какие функции должны быть заложены и как пользователь будет взаимодействовать с ними. Стоит уточнить сложности реализации и другие технические нюансы, связанные с дизайном и функционалом мобильного приложения.
Также на этом этапе пишутся пользовательские сценарии и истории от первого касания до совершения целевого действия, т.е. происходит моделирование приложения. Сценарии использования (use cases) определяют необходимый функционал и экраны для будущего приложения. Затем рисуют блок-схемы для визуализации этих историй и сценариев и создают малодетализированные макеты графического интерфейса мобильного приложения.
Создание прототипа
После утверждения идеи и обсуждения архитектуры мобильного приложения, создаются мокапы (макеты) — низко детализированный прототип, чтобы определить приоритет и расположение элементов интерфейса на экране, предусмотреть для них удобное для доступа местоположение.
После, создаются детализированные, кликабельные прототипы с необходимой динамикой, анимацией и микровзаимодействиями для пользовательского тестирования.
На этапе прототипирования стоит проконсультироваться с командой разработчиков, чтобы понять какие элементы дизайна могут негативно повлиять на стоимость и сроки реализации мобильного приложения, от чего стоит отказаться или чем более простым, но не менее эффективным можно заменить.
Тестирование прототипа мобильных приложений
Преимущество интерактивных прототипов в том, что с ними можно взаимодействовать как уже с готовым приложением. Таким образом, есть возможность протестировать интерфейс, пройдя путь пользователя, собрать детальную обратную связь и понять насколько продукт интересен для ЦА. На этом этапе разработки можно провести ряд тестов для выявления оптимального пути пользователя.
Пример такого тестирования читайте в этой статье.
Дизайн мобильных приложений и разработка
На этом этапе интерактивные прототипы отдаются дизайнерам, чтобы сделать продукт более вовлекающим, заложить стилистику и доработать микровзаимодействия с учетом дизайна продукта. После утверждения дизайна мобильного приложения, продукт отдают разработчикам.
Подготовка контента для сторов
На этом этапе создается описание для мобильного приложения и его основных функций, создаются картинки интерфейса, которые пользователь будет видеть в App Store или Google Play. Правильно подобранные скрины, которые раскрывают возможности и преимущества приложения, помогут повысить показатели установок приложения.
Доработка и анализ дизайна мобильных приложений
Когда уже есть готовый продукт, мы подключаем аналитику для проведения анализа дизайна мобильных приложений. Таким образом мы получаем сведения для оптимизации приложения в целом, собираем данные и представления, как приложение ведет себя в реальных условиях, находим зоны роста для дальнейшей доработки. На данном этапе можно проводить эксперименты для выявления наиболее эффективных решений.
Особенности и возможности дизайна мобильных приложений — основные рекомендации
Вот ряд особенностей дизайна мобильных приложений, которые стоит учитывать при проектировании:
Учитывайте, что мобильные устройства имеют ограниченный дисплей .
Экран мобильного телефона или планшета намного меньше, чем у десктопа или лэптопа. Поэтому стоит продумать навигацию, количество элементов на одном экране, по максимуму сокращать путь пользователя.
Используйте особенности управления и функционал мобильных устройств.
Стоит учесть, что управление на мобильном устройстве происходит с помощью жестов и касаний. Поэтому подумайте о навигации жестами, также используйте дополнительные возможности мобильных устройств. Например, камеру и микрофон можно использовать для ввода и верификации данных. Также сделайте все кликабельные элементы (кнопки, меню, навигация, фильтры, и прочее) крупнее и расположите их на достаточном расстоянии друг от друга, чтобы пользователь мог легко попасть по ним пальцем, по возможности не меняя хвата руки.
Помните об ориентации экрана мобильного устройства.
При проектировании дизайна мобильных приложений, стоит предусмотреть отображение экрана — портретное и горизонтальное. И в случае, если приложение будут использовать в обоих случаях, то создавать два варианта приложения. Взаимодействие с мобильным приложением не должно вызывать трудностей у пользователя. Независимо от ориентации, пользователю должно быть максимально удобно и комфортно.
Учитывайте мобильный трафик интернета.
Учитывая тот факт, что приложением чаще всего будут пользоваться на ходу, используя мобильный трафик, то стоит избегать тяжелых файлов и графических элементов, для которых необходимо загрузить большое количество данных из интернета, — это может повлечь дополнительные расходы, что вряд ли обрадует ваших пользователей.
Продумайте роль приложения в маркетинговой стратегии заранее.
Будет ли это просто дополнение или основная точка входа? При проектировании, можно будет сделать правильные акценты на маркетинге, связать онлайн и оффлайн или несколько продуктов в единую экосистему.
Дизайн мобильных приложений — это уже неотъемлемый шаг в развитии современного eCommerce. Поэтому совершенствуйте свой бизнес, создавайте интересные, качественные и полезные продукты. Надеемся, что наши советы вам в этом помогут.
Читайте также: