ПРИМЕНЕНИЕ USER EXPERIENCE/USER INTERFACE МОДЕЛИРОВАНИЯ ДЛЯ РАЗРАБОТКИ МОБИЛЬНОГО ПРИЛОЖЕНИЯ

Стерлягов С.П.¹, Селютина Е.П.²

¹ORCID: 0000-0002-2334-1559, кандидат технических наук, доцент, ²ORCID: 0000-0001-6374-4670, магистрант, Алтайский государственный университет

ПРИМЕНЕНИЕ USER EXPERIENCE/USER INTERFACE МОДЕЛИРОВАНИЯ ДЛЯ РАЗРАБОТКИ МОБИЛЬНОГО ПРИЛОЖЕНИЯ

Аннотация

В статье рассматривается проблема отсутствия единого подхода к проектированию мобильных приложений. Приведены статистические данные динамики развития рынка мобильных приложений. Выявлены различия мобильных веб-сервисов и мобильных приложений, в том числе на этапе проектирования. Рассмотрены особенности применения технологии User Experience/User Interface (UX/UI) в разработке мобильных приложений. Выделены основные этапы и систематизированы основные виды работ для основных категорий специалистов, реализующих UX/UI-технологию.

Ключевые слова: мобильные приложения, user experience, user interface, информационная архитектура, проектирование ПО.

 Sterlyagov S.P.¹, Selyutina E.P.²

¹ORCID: 0000-0002-2334-1559, PhD in Engineering, Associate Professor, ²ORCID: 0000-0001-6374-4670, Graduate Student, Altai State University

APPLICATION OF USER EXPERIENCE/USER INTERFACE MODELING FOR MOBILE APPLICATION DEVELOPMENT

Abstract

The article describes the problem of no unified approach of mobile application development. The statistical data on the development dynamics of the mobile application market are given as well. The differences between mobile web services and mobile applications, including those at the design stage, are revealed. Features of the User Experience/User Interface (UX/UI) technology in mobile application development are also considered. The main stages have been identified and the main types of works for the main categories of specialists implementing the UX/UI technology have been systematized.

Keywords: mobile applications, user experience, user interface, information architecture, software design.

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

Для малого и среднего бизнеса создание мобильного приложения было слабо распространено еще 2-3 года назад, так как еще в 2014 году количество смартфонов не превышало в России 25,9 млн. устройств [2]. Динамику продаж смартфонов за период с 2012-2016 гг. смотрите на рис. 1.

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

Рис. 1 – Количество проданных смартфонов в России (в млн.шт.) [2]

 

Сейчас, с развитием программного обеспечения, большинство студий разработок готовы предложить свои услуги по приемлемой цене. Более половины желающих создать мобильное приложение для своего бизнеса разработают его уже в 2017 году [1]. По данным Google 39% пользователей мобильных устройств совершают с них покупку, 55% ищут товары или услуги с помощью своих смартфонов с целью совершения дальнейшей покупки [3].

В связи с тем, что бум разработок мобильных приложений начался с 2016 года и продолжается по сегодняшний день, необходимо выявить различия проектирования мобильных версий веб-сервисов и мобильных приложений:

1. Первое существенное различие — нативные (нативное мобильное приложение (анг. native mobile application) – мобильное приложение, разработанное под конкретную мобильную платформу и требующее от разработчика специальных знаний и умений для работы в конкретной среде разработки (xCode для iPhone, eclipse для устройств на Android и др.)) [11] и гибридные (гибридное или кроссплатформенное мобильное приложение – мобильное приложение, разработанное под несколько мобильных платформ при помощи одной среды разработки) [11] мобильные приложения разрабатываются под мобильную платформу (iPhone iOS, iPad iOS, Android Phone, Android Tablet, Windows Phone), в то время как мобильный веб-сервис под браузер.
2. Данные в мобильном веб-сервисе возвращаются с серверов, на котором расположен веб-сервис, в то время как мобильное приложение, после его скачивания, с сервисов мобильных платформ (App Store, Google Play, Windows Phone, Ovi Store), располагается на телефоне пользователя и может не взаимодействовать с другими серверами. Данное отличие очень важно при построении информационной архитектуры, размера передачи данных и времени получения информации пользователем.
3. У каждой мобильной платформы под каждую версию операционной системы есть свои гайдлайны (гайдлайн (анг. guideline) – это руководство, описывающее основные принципы грамотного применения визуальных идентификаторов бренда на различных носителях в различных коммуникациях) [8], которые описывают принципы построения элементов в мобильном приложении, начиная от отступов между элементами и заканчивая названием и цветом шрифтов. Мобильный веб-сервис же работает на всех устройствах и платформах одинаково, так как прописал в них разработчик по макету дизайнера.
4. Еще одним отличием является специальные функциональные возможности мобильного приложения:

1) Загрузка данных с телефона в мобильное приложение. Если в мобильном веб-сервисе при прикреплении файла необходимо вызвать стороннее приложение «проводник», то в мобильном приложении загрузка идет напрямую.

2) Возможность использовать камеру телефона, тем самым делать снимки, не выходя из приложения, а также добавлять ей дополнительные возможности.

3) Использование мобильным приложением геолокации позволяет в реальном времени отслеживать ваше местоположение, строить маршрут и прочее.

4) Одно из немаловажных преимуществ мобильного приложения в том, что оно может вызывать push-уведомления (push-уведомления – это краткие всплывающие уведомления, которые появляются на экране мобильного телефона или обычного компьютера и сообщают о важных событиях и обновлениях) [11], которые сигнализируют пользователю о каком-либо событии.

5) Управление мобильным приложением жестами является еще молодой, но стремительно развивающейся технологией.

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

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

Решением проблемы отсутствия универсального подхода для проектирования индивидуального мобильного приложения может послужить User Experience (далее UX) (User Experience, UX (рус. опыт пользователя, опыт взаимодействия) — это восприятие и ответные действия пользователя, возникающие в результате использования и/или предстоящего использования продукции, системы или услуги) и User Interface (далее UI) (User Interface, UI (рус. интерфе́йс по́льзователя, пользовательский интерфейс) — интерфейс, обеспечивающий передачу информации между пользователем-человеком и программно-аппаратными компонентами компьютерной системы) моделирование для разработки мобильного приложения [9], [10]. Данный подход подходит для любого размера студии, а также оптимизирует ресурсы на проектирование так, что качество проектирования мобильного приложения будет выше среднего или высоким, а затраты останутся прежними.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Список литературы / References

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

Список литературы на английском языке / References in English

1. comScore, Inc. «Rossiyskaya Digital industriya v 2015 godu» [Russian Digital Industry in 2015], 2015г. [Electronic resource] – URL: https://www.comscore.com/rus/Insights/Press-Releases/2015/11/comScore-releases-its-2015-Russia-Digital-Future-in-Focus-Report (accessed: 18.04.2017). [in Russian]
2. Semenov A. «Mobil'nyy rynok Rossii: obzor, prognozy, rekomendatsii» [Mobile market in Russia: overview, forecasts, recommendations], 2015г. [Electronic resource] – URL: http://app2top.ru/industry/mobil-ny-j-ry-nok-rossii-obzor-prognozy-i-rekomendatsii-53438.html (accessed: 25.04.2017). [in Russian]
3. Sidorov I. Google «Pokupki s mobil'nykh ustroystv» [Purchases from mobile devices], 2014г. [Electronic resource] – URL: https://www.slideshare.net/CPAex/google-russia-55962910 (accessed: 28.05.2017). [in Russian]
4. Segodin A. «Chto takoye UX/UI dizayn na samom dele?» [What is UX / UI design really?], 2017г. [Electronic resource] – URL: https://habrahabr.ru/post/321312/ (accessed: 12.06.2017). [in Russian]
5. Macefield R. «Chto takoye UX dizayn?» Perevod: T. Kudrevatykh [What is UX design?], 2012г. [Electronic resource] – URL: http://www.cmsmagazine.ru/library/items/usability/ux-design-defined/ (accessed: 19.04.2017). [in Russian]
6. Savina A. «10 brendbukov i gaydlaynov izvestnykh kompaniy» [10 brandbooks and guidebooks of famous companies], 2013г. [Electronic resource] – URL: http://www.lookatme.ru/mag/live/inspiration-lists/196757-brandbooks (accessed: 04.06.2017). [in Russian]
7. Pavel SH. «Etapy razrabotki mobil'nogo prilozheniya v Magora Systems» [Stages of developing a mobile application in Magora Systems], 2016г. [Electronic resource] – URL: https://magora-systems.ru/etapy-razabotki-prilojeniy/ (accessed: 19.04.2017). [in Russian]
8. Lebedev A. «§117. Gaydlayny» [117. Guide Line], 2005г. [Electronic resource] – URL: https://www.artlebedev.ru/kovodstvo/sections/117/ (accessed: 25.05.2017). [in Russian]
9. WINFOX – studiya razrabotok, «Sozdaniye dizayna prilozheniy dlya iPhone i iPad (iOS)» [Creating the design of applications for the iPhone and iPad (iOS)], 2016г. [Electronic resource] – URL: http://wnfx.ru/sozdanie-dizayna-prilozheniy-dlya-iphone-i-ipad/ (accessed: 19.04.2017). [in Russian]
10. Kim V.YU. Osobennosti razrabotki dizayna pol'zovatel'skogo interfeysa dlya mobil'nogo prilozheniya [Features of the design of the user interface for the mobile application] // Novyye informatsionnyye tekhnologii v avtomatizirovannykh sistemakh [New information technologies in automated systems]. 2015. №18. [Electronic resource] – URL: http://cyberleninka.ru/article/n/osobennosti-razrabotki-dizayna-polzovatelskogo-interfeysa-dlya-mobilnogo-prilozheniya (accessed: 16.06.2017). [in Russian]
11. Panfilov K. «Krossplatformennyye prilozheniya protiv nativnykh: sravneniye i vybor podkhodov» [Cross-platform applications against native: comparison and choice of approaches], 2015г. [Electronic resource] – URL: http://wnfx.ru/sozdanie-dizayna-prilozheniy-dlya-iphone-i-ipad/ (accessed: 13.04.2017). [in Russian]