Применение User Experience/User Interface моделирования для разработки мобильного приложения | IT-GRANDS
закрыть

Применение User Experience/User Interface моделирования для разработки мобильного приложения

Евгения Домбровская, UX/UI дизайнер
Евгения Домбровская, UХ/UI дизайнер (эксперт компании IT-GRANDS).

Согласно отчёту comScore [1] число мобильных пользователей превзошло число ПК еще в 2011 году. Сегодня мобильные приложения создаются не только для смартфонов, они нужны для носимых устройств, «умных домов», смарт-автомобилей и многих других устройств.

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

1. Различие в том, что нативные (1) и гибридные (2) мобильные приложения разрабатываются под мобильную платформу (iPhone iOS, iPad iOS, Android Phone, Android Tablet, Windows Phone), в то время как мобильный веб-сервис под браузер.



2. Данные в мобильном веб-сервисе возвращаются с серверов, на которых он расположен, в то время как мобильное приложение, после его скачивания с сервисов мобильных платформ (App Store, Google Play, Windows Phone, Ovi Store), располагается на телефоне пользователя и может не взаимодействовать с другими серверами. Данное отличие очень важно при построении информационной архитектуры, размера передачи данных и времени получения информации пользователем.

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

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

  1. Загрузка данных с телефона в мобильное приложение. Если в мобильном веб-сервисе при прикреплении файла необходимо вызвать стороннее приложение «проводник», то в мобильном приложении загрузка идет напрямую.
  2. Возможность использовать камеру телефона, тем самым делать снимки, не выходя из приложения, а также добавлять ей дополнительные возможности.
  3. Использование мобильным приложением геолокации позволяет в реальном времени отслеживать ваше местоположение, строить маршрут и прочее.
  4. Одно из немаловажных преимуществ мобильного приложения в том, что оно может вызывать push-уведомления (4), которые сигнализируют пользователю о каком-либо событии.
  5. Управление мобильным приложением жестами является еще молодой, но стремительно развивающейся технологией.


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

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

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

Решением проблемы отсутствия универсального подхода для проектирования индивидуального мобильного приложения может послужить User Experience (5) (далее UX) и User Interface (6) (далее UI) моделирование для разработки мобильного приложения. Данный подход подходит для любого размера студии, а также оптимизирует ресурсы на проектирование так, что качество проектирования мобильного приложения будет выше среднего или высоким, а затраты останутся прежними.

UX и UI моделирование проходит на этапе проектирования. Цель UX/UI моделирования – довести пользователя до какой-то логической точки в интерфейсе, а именно, чтобы он достиг своей цели. Не следует объединять UI дизайн и UX моделирование, пусть они и похожи, и их часто выполняет один человек [4].

UX есть то, какой опыт/впечатление получает пользователь от работы с интерфейсом. UX моделирование включает в себя следующие области: информационная архитектура, что занимается организацией данных в приложении; проектирование взаимодействия, сосредотачивающееся на средствах управления, механизмах и процессах, наличие которых необходимо пользователям для выполнения их задач; визуальный дизайн, фокусирующийся на эстетике пользовательского интерфейса; исследование юзабилити (7), которое оценивает эффективность работы пользователей с интерфейсом и на основе оценки предлагает рекомендации по его исправлению [5]. Конечно, часто визуальный дизайн и исследование юзабилити выносят за рамки UX моделирования, так как они являются основными компетенциями UI дизайнера, но и они должны быть учтены при UX моделировании, хотя и в меньшей степени. В отличие от UI, UX моделирование является более комплексным подходом к взаимодействию пользователя с интерфейсом. В России, человека, занимающегося UX моделированием, называют UX-дизайнером. Этот человек должен учесть при проектировании все мелочи, начиная от среды пользователя и типа электронного устройства и заканчивая способами ввода и отображения информации.



Как уже было упомянуто выше, UI дизайн отвечает за визуальное представление пользовательского интерфейса и является более узким понятием. Визуальное представление представляет собой определенный набор графически оформленных элементов, а именно кнопки, флажки, выбирающееся меню и другие поля. UI дизайнеру необходимо добиться общего позитивного расположения пользователя к сервису через эстетически направленный дизайн. Помимо того, что каждый элемент должен быть эстетически приятным и должен красиво сочетаться с другими элементами, UI дизайнер должен учесть гайдлайны, брендбуки проекта. При разработке дизайна для мобильного приложения дополнительно необходимо учесть UI Kit (8), Mockup (9) и др. для каждой операционной системы телефона и размера экрана. Как уже отмечалось ранее, UX/UI моделирование часто объединяют и возлагают на плечи одного специалиста – UX/UI дизайнера.



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

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

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

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

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

Завершающим этапом UX моделирования является создание прототипа приложения. Данный этап содержит в себе расстановку функциональных элементов на экранах будущего мобильного приложения. Обычно, данный этап моделирования интересен заказчику, и UX-специалист вместе с ним от руки заполняет шаблоны экранов телефонов разных мобильных платформ. Набор таких шаблонов называют App Sketchbook (10). Расстановка элементов на экранах осуществляется для каждого размера экрана в вертикальном и горизонтальном расположении. Далее шаблоны переносятся в электронный вид, после чего накладывается анимация перехода, устанавливаются зависимости между элементами. После утверждения заказчиком прототипа мобильного приложения UI-дизайнер отрисовывает каждый элемент интерфейса так, как он будет выглядеть после верстки.



UI-дизайнер руководствуется гайдлайнами мобильной платформы, под которую разрабатывается мобильное приложение, а также фирменным стилем заказчика, где это возможно. Разработка дизайна делится на 5 этапов:

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

После того, как макет дизайна был передан разработчикам, активная часть UX/UI моделирования завершается и переходит в пассивное наблюдение за работой программистов, где UX/UI специалист следит за соответствием макета реальному приложению. После выхода бета-версии мобильного приложения для ограниченного круга пользователей, UX/UI специалистом оценивается уровень удовлетворенности пользователей данной версией и вносятся коррективы.

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

Литература:

  1. comScore, Inc. «Российская Digital индустрия в 2015 году», 2015г. [Электронный ресурс] – Режим доступа: https://www.comscore.com/rus/Insights/Press-Releases/2015/11/comScore-releases-its-2015-Russia-Digital-Future-in-Focus-Report
  2. А. Семенов «Мобильный рынок России: обзор, прогнозы, рекомендации», 2015г. [Электронный ресурс] – Режим доступа: http://app2top.ru/industry/mobil-ny-j-ry-nok-rossii-obzor-prognozy-i-rekomendatsii-53438.html
  3. И. Сидоров, Google «Покупки с мобильных устройств» 2014г. [Электронный ресурс] – Режим доступа: https://www.slideshare.net/CPAex/google-russia-55962910
  4. А. Сегодин «Что такое UX/UI дизайн на самом деле?», 2017г. [Электронный ресурс] – Режим доступа: https://habrahabr.ru/post/321312/
  5. R. Macefield «Что такое UX дизайн?» Перевод: Т. Кудреватых, 2012г. [Электронный ресурс] – Режим доступа: http://www.cmsmagazine.ru/library/items/usability/ux-design-defined/
  6. А. Савина «10 брендбуков и гайдлайнов известных компаний», 2013г. [Электронный ресурс] – Режим доступа: http://www.lookatme.ru/mag/live/inspiration-lists/196757-brandbooks
  7. Павел Ш. «Этапы разработки мобильного приложения в Magora Systems», 2016г. [Электронный ресурс] – Режим доступа: https://magora-systems.ru/etapy-razabotki-prilojeniy/
  8. Лебедев А. «§ 117. Гайдлайны», 2005г. [Электронный ресурс] – Режим доступа: https://www.artlebedev.ru/kovodstvo/sections/117/
  9. WINFOX – студия разработок, «Создание дизайна приложений для iPhone и iPad (iOS)», 2016г. [Электронный ресурс] – Режим доступа: http://wnfx.ru/sozdanie-dizayna-prilozheniy-dlya-iphone-i-ipad/
  10. Ким В. Ю. Особенности разработки дизайна пользовательского интерфейса для мобильного приложения // Новые информационные технологии в автоматизированных системах. 2015. №18. [Электронный ресурс] – Режим доступа: http://cyberleninka.ru/article/n/osobennosti-razrabotki-dizayna-polzovatelskogo-interfeysa-dlya-mobilnogo-prilozheniya
  11. К. Панфилов «Кроссплатформенные приложения против нативных: сравнение и выбор подходов», 2015г. [Электронный ресурс] – Режим доступа: http://wnfx.ru/sozdanie-dizayna-prilozheniy-dlya-iphone-i-ipad/

Хотите тоже заказать у нас разработку ПО?

Краткое описание проекта:
1. Интересующий функционал
2. Ограничения по бюджету
3. Пожелания по срокам
Бесплатно оценить проект

Нажимая на кнопку, вы соглашаетесь с Политикой конфиденциальности