АНАЛИЗ UI/UX ДИЗАЙНОВ МОБИЛЬНЫХ ПРИЛОЖЕНИЙ В СФЕРЕ МОСКОВСКОГО ТРАНСПОРТА

ANALYSIS OF UI/UX DESIGN OF MOBILE APPLICATIONS IN THE FIELD OF MOSCOW TRANSPORT

Andrey Rusinovich

master's degree, Department of Information Technology and Computer Systems, Moscow State Technological University "STANKIN",

Russia, Moscow

Oksana Rozhkova

senior lecturer, Department of Information Technology and Computer Systems, Moscow State Technological University "STANKIN",

Russia, Moscow

АННОТАЦИЯ

В статье приведен процесс разработки мобильных приложений, начиная с проектирования и заканчивая его дальнейшей поддержкой. Приведены основные аспекты оценки приложений: эмоциональные (определяют отношение пользователей к приложению) и функциональные (определяют удобство и эффективность использования приложения). На основе данных аспектов был проведен анализ мобильных приложений, функционал которых схож с приложением «Метро Москвы».

ABSTRACT

The article describes the process of developing mobile applications, starting with design and ending with its further support. The main aspects of application evaluation are presented: emotional (determine the attitude of users to the application) and functional (determine the convenience and effectiveness of using the application). Based on these aspects, an analysis of mobile applications was carried out, the functionality of which is similar to the Moscow Metro application.

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

Keywords: mobile applications, analysis, design, development, design.

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

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

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

После этапа реализации переходят к этапу тестирования. Здесь выявляют ошибки приложения, которые далее передают разработчикам для исправления.

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

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

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

Эмоциональные определяют отношение пользователя к приложению. К ним относятся:

• Визуальный дизайн
• Удобство использования
• Отзывчивость

Функциональные определяют удобство и эффективность использования приложения. К ним относятся:

• Надежность
• Функционал
• Соответствие ожиданиям

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

На основе функциональных и эмоциональных критериев будет проводиться анализ приложений, которые имеют схожий функционал с приложением «Метро Москвы». Были выбраны следующие приложения:

• Московский транспорт
• Моя тройка

На главном экране располагается карта, на которой в реальном времени отображаются маршруты автобусов. Можно сразу заметить, что используются шрифты различных семейств — это нарушает единый стиль приложения и создает визуальный шум для пользователя (см. рис. 1(А)). После того, как пользователь начинает взаимодействовать с картой, перемещать положение камеры, сразу начинает уменьшаться частота кадров почти до минимального количества (см. рис. 1(Б)). При переходе на экран, по нажатии на кнопку «Куда поедем?», открывается следующий экран. Задается конечная точка маршрута и ожидается построение маршрута. Спустя длительное время приложение возвращает ошибку (см. рис. 1(В - Г)).

Рисунок 1. Главный экран и построение маршрутов

Основной функционал приложения оказался крайне нестабильным, невозможность построить маршрут и медленный отклик карты вызывает только негативный опыт использования. При нажатии на кнопку в верхнем левом углу, открывается дополнительное меню. Единый стиль здесь также не соблюдается, иконки имеют разную толщину и цвет. Это можно увидеть по иконке «Специальные маршруты» и остальным – они имеют разные оттенки красного (см. рис. 2(А)). При переходе на вкладку «Пополнить карту «Тройка»». Далее необходимо выбрать пункт «Добавить карту «Тройка»». После пользователю предлагается привязать номер телефона к аккаунту для дальнейшего пользования картами. Это происходит посредством отправки СМС и ввода кода из него в приложении. После проделанных процедур появляется сообщение об ошибке и кнопка «Понятно». Данная ситуация вводит пользователя в заблуждение, так как неизвестно по какой причине вызвана данная ошибка и есть ли какой-то способ ее исправить (см. рис. 2(Б-Г)). Далее необходимо перейти к разделу «Пополнить без привязки», указанному на рисунке 2(Б). После этого необходимо нажать кнопку «Продолжить», открывается экран с вводом номера карты. Здесь не соблюдается единый стиль приложения за счет использования различных шрифтов. После ввода номера транспортной карты, кнопка «Продолжить» перемещается в самый низ экрана, без наличия отступов, что создает крайнее неудобство для нажатия и непривлекательный вид (см. рис. 2(Д-Е)). Далее пользователю предлагается выбрать один из типов пополнения – покупка билета или пополнение билета «Кошелек» (см. рис. 2(Ж)). Теперь необходимо ввести все данные для пополнения. После чего необходимо нажать кнопку «Продолжить». Далее вводится CVC банковской карты и необходимо подтвердить пополнение (см. рис. 2(З)). Данный функционал в приложении «Московский транспорт» работает нестабильно. Это вызывает крайне негативный опыт использования. Единственная стабильно работающая функция – это пополнение транспортной карты. В текущей реализации пользователю приходится все время вводить номер своей карты, что вызывает увеличение времени для достижения нужного результата. Кроме того, можно легко ошибиться в постоянном заполнении данных, и средства пользователя могут уйти другому человеку.

Рисунок 2. Дополнительное меню, руководство и пополнение

Далее рассмотрим функционал приложения Моя тройка. При первом запуске открывается экран с авторизацией по номеру телефона. Соблюдены единый дизайн цветовой гаммы и шрифтов. При нажатии на кнопку «Получить код по SMS» открывается экран с вводом кода из СМС (см. рис. 3(А-В)). После создания пароля открывается главный экран приложения. Дизайн максимально минималистичный, используется преимущественно системные компоненты без какой-либо кастомизации. Сверху находится слишком много пустого пространства, что создает негармоничный вид и не соответствует привычному паттерну поведения пользователя (см. рис. 3(Г)).

При нажатии на кнопку «+» появляется модальное окно с выбором транспортных карт, доступных для привязки. Все выглядит довольно привлекательно с соблюдением единого дизайна и используемых иллюстраций (см. рис. 3(Д)). При выборе карты «Тройка» открывается экран с предзаполненным названием для карты и полем для ввода номера карты. Все также выполнено максимально минималистично без каких-либо лишних элементов и с соблюдением единого дизайна (см. рис. 3(Е)). После ввода номера появляется экран и сообщение об успешной привязке карты (см. рис. 3(Ж)). Сразу можно заметить, как картинка теряет качество из-за сильного расширения. Кроме того, в логике привязки карты допущена очень грубая ошибка - приложение не потребовало какой-либо проверки принадлежности карты пользователю, что позволяет любому человеку ее привязать к своему аккаунту. После нажатия на кнопку «Готово», пользователя возвращает на главный экран, где уже отображается привязанная карта. После привязки карты пользователю недоступна кнопка «Купить абонемент». Также на данной карте имеется некоторая сумма, но приложение отображает 0 рублей. Кроме того, отсутствует функция пополнить карту на указанную сумму, если нет необходимости покупать билет.

Рисунок 3. Авторизация, главный экран и привязка

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

В ходе данного анализа были рассмотрены одни из самых популярных приложений для пользователей московского транспорта. У каждого из представителей есть свои преимущества и недостатки, которые необходимо принять во внимание при разработке собственного продукта. Итоговое сравнение приведено в таблице 1.

Таблица 1.

Анализ мобильных приложений

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

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

1. Эмоциональный дизайн. [Электронный ресурс]. URL: https://lpgenerator.ru/blog/2014/03/31/3-urovnya-vizualnogo-i-emocionalnogo-dizajna-posadochnyh-stranic/ (Дата обращения: 15.12.2023)