Применение принципов UI/UX-дизайна для онлайн-платформы бронирования ж/д билетов: оптимизация пользовательского опыта и безопасности

УДК 004.428.4:004.512/514

DOI: 10.20295/2413-2527-2024-137-78-83

Применение принципов Ш/иХ-дизайна для онлайн-платформы бронирования ж/д билетов: оптимизация пользовательского

опыта и безопасности

Е. Г. Баландин, канд. ист. наук А. В. Забродин

Петербургский государственный университет путей сообщения Императора Александра I

Санкт-Петербург, Россия

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

Ключевые слова: веб-сервис, железнодорожные билеты, user interface, user experience, дизайн, безопасность, архитектура, аутентификация, база данных, UI/UX.

Для цитирования: Баландин Е. Г., Забродин А. В. Применение принципов UI/UX-дизайна для онлайн-платформы бронирования ж/д билетов: оптимизация пользовательского опыта и безопасности // Интеллектуальные технологии на транспорте. 2024. № 1 (37). С. 78-83. DOI: 10.20295/2413-2527-2024-137-78-83

Введение

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

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

удобные интерфейсы и полезные функции. Рассмотрим преимущества подробнее.

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

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

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

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

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

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

1) Определенные веб-сервисы взимают высокие комиссии за использование своей платформы или применяют скрытые платежи, что в итоге значительно увеличивает окончательную стоимость билетов. Эта практика может вызвать неудовлетворенность у клиентов, ценящих ясность и прозрачность в финансовых вопросах.

2) Некоторые веб-сервисы сталкиваются с трудностями в точном отображении информации о наличии билетов, расписаниях и ценах. Это может привести к недопониманию

и разочарованию у пользователей, особенно если они полагались на точность предоставленной информации.

3) Сложные процессы бронирования и оплаты могут стать причиной отказа от использования сервиса. Проблемы с вводом данных, выбором опций или оплатой могут снизить удобство использования и повлиять на общее восприятие сервиса.

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

5) Недоработки в обеспечении безопасности данных, такие как утечки личной информации или применение небезопасных методов оплаты, могут значительно подорвать доверие пользователей к веб-сервису.

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

Андлиз РЫНКА

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

Рассмотрим три различных рынка: североамериканский, европейский и российский.

1) Американский рынок веб-сервисов для продажи ж/д билетов в настоящий момент в упадке. В основном это связано со старением инфраструктуры железной дороги и проигрыванием в конкуренции авиасообщению. На август 2023 года услугами авиаперевозок воспользовалось 77,4 млн пассажиров, что на 8 % больше, чем в прошлом году [1]. При этом монополист рынка в США Ат^ак перевозит в среднем 23 млн пассажиров в месяц [2]. Среди решений по поиску билетов мы имеем два самых популярных сервиса: сайт Атйак и Wandem. Первый вариант не обладает выдающимися характеристиками, за исключением отсутствия дополнительных комиссий за билет, так как покупка осуществляется непосредственно у перевозчика. Wanderu является одним из лучших решений на рынке, обладая большим функционалом и удобным интерфейсом.

2) Европейский рынок развит намного лучше американского. Количество удобных решений для поиска ж/д билетов

больше, а качество лучше. Рассмотрим пару удачных примеров: Deutsche Bahn и Omio. DB (Deutsche Bahn) является монополистом внутри Германии. Веб-сервис немецкой компании можно считать примером интегрированного и современного подхода к пассажирским перевозкам: он предоставляет широкий выбор опций и удобств для своих клиентов. Однако есть и минусы, например малая география маршрутов. Omio, в свою очередь, распространен в 37 странах мира [3], но больше всего популярен в Европе.

3) В российском сегменте рынка транспортных веб-сервисов наблюдается отсутствие активного развития. Три основных игрока—сайт РЖД, Tutu.ru и «Яндекс.Расписание»—не являются идеальными, они требуют определенного развития. Сайт РЖД сталкивается с проблемами автоматизации поиска и сложным интерфейсом. Tutu.ru испытывает ограниченное использование из-за популярности РЖД, а «Яндекс.Расписание» сталкивается с ограничениями из-за неудовлетворительного интерфейса при широком функционале.

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

Обоснование создания веб-сервиса

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

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

Определим ключевые требования, необходимые для достижения конкурентных преимуществ предлагаемого проекта. Во-первых, приоритет разработки будет направлен на user interface и user experience, проще говоря, UI/UX [4]. Вместе UI и UX способствуют созданию продуктов, которые не только хорошо выглядят (UI), но и предоставляют интуитивно понятный функционал (UX). Оба аспекта тесно взаимосвязаны и важны для достижения успеха в веб-дизайне и разработке приложений.

Эффективная реализация требований Ш/иХ играет сегодня ключевую роль в достижении конкурентных преимуществ на рынке веб-сервисов. Высокое качество пользовательского интерфейса и опыта считается неотъемлемым для успешного продвижения услуги. Этот процесс включает в себя создание привлекательного дизайна, обеспечение легкости использования, установление доверия и обеспечение безопасности, а также поддержание конкурентоспособности в области дизайна и интерактивности. Все эти аспекты направлены на повышение эффективности пользовательских действий и конверсии, что в итоге является ключевым элементом успешной реализации веб-сервиса.

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

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

Архитектура веб-сервиса

Создание архитектуры веб-сервиса представляет собой критически важный этап в разработке по ряду ключевых причин.

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

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

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

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

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

Рис. 1. Диаграмма вариантов использования

С учетом выявленных особенностей диаграммы вариантов использования переходим к созданию диаграммы компонентов (рис. 2). На упрощенном примере диаграммы отображены ключевые элементы веб-сервиса, такие как клиентский интерфейс, серверное приложение, база данных и др.

Рассмотрим архитектурный пример нашего веб-сервиса и обобщим ключевые аспекты, которые мы намерены воплотить в жизнь:

1. Клиентский интерфейс (Frontend):

2. Бэкенд (Backend):

— управление пользователями;

— подбор маршрутов.

Инструмент: Django (Python) — свободный фреймворк для веб-приложений на языке Python, использующий шаблон проектирования MVC.

3. Железнодорожные службы.

4. Сервер приложений:

— обработка бизнес-логики;

— кэширование.

5. База данных:

— хранение данных о пользователях;

ь ] Клиент

>

Е 1 еб-саи (User iterface 1 —со— Веб-сер вер^~| —со- Бизнес-логика а

Билеть а Базы данных а _____ ---гъ Маршруты $ |

____ N

V

Кл ие нты $ |

Рис. 2. Диаграмма компонентов

— хранение данных о билетах;

— хранение данных о маршрутах.

Инструмент: PostgreSQL. Это быстро набирающая популярность система управления базами данных [9]. Об этом говорят не только результаты опросов разработчиков и предпринимателей, но и количество вакансий, в которых владение ею указывается среди необходимых навыков.

6. Система безопасности:

— шифрование данных;

— механизм аутентификации и авторизации.

7. Мониторинг и аналитика:

— система мониторинга производительности;

— аналитика использования.

По описанным ранее диаграммам и предполагаемой реализации можем представить алгоритм работы сервиса. При входе на веб-сайт пользователь регистрируется/аутентифи-цируется в системе. Это может включать в себя ввод личной информации, создание учетной записи и т.д. Далее пользователь взаимодействует с UI и выбирает маршрут (отправление и прибытие) и дату поездки (UX). Затем система осуществляет поиск доступных билетов для выбранного маршрута и даты. После нахождения возможных вариантов пользователь просматривает список доступных билетов, может отфильтровать результаты и выбрать подходящий билет. После выбора билета пользователь оформляет заказ, вводит необходимую информацию (пассажирские данные, контактная информация и т.д.). Однако данная реализация будет сложна в контексте реализации сервиса (нам могут потребоваться различные API от самого РЖД), так что данный процесс мы заменим на выдачу гиперссылок на сайт «Российских железных дорог», где будут представлены предложенные системой маршруты.

Оптимизация user interface / user experience

в ВЕБ-СЕРВИСЕ ПО ПОИСКУ ж/д БИЛЕТОВ

Дизайн интерфейса пользователя (user interface) и пользовательский опыт (user experience) стали ключевыми факторами для успешного взаимодействия с веб-приложениями.

Рис. 3. Сфера иХ/Ш

В и1 важными являются все элементы, с которыми пользователь взаимодействует (кнопки, дизайн и т. д.), в то время как иХ представляет собой общее восприятие и удовлетворение пользователя от использования продукта (удобство навигации, интуитивность, простота и т. д.) [7].

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

Чтобы привлечь внимание пользователя, используются различные дизайн-приемы. Элементы, выделенные яркими цветами, могут привлечь внимание к ключевым частям интерфейса. Контраст и правильный выбор шрифтов также играют решающую роль в создании визуально привлекательного дизайна. Применение этих приемов поможет нам акцентировать внимание потенциальных гостей веб-сервиса на важных частях интерфейса и делает процесс взаимодействия более удобным для пользователя. Создание интуитивно понятного интерфейса становится все более критичным для успешного веб-дизайна. Интуитивный интерфейс — это тот, который работает так, как ожидает пользователь [4]. Оптимальная навигация и правильное распределение элементов значительно повышают уровень комфорта пользователя при взаимодействии с продуктом. Этот аспект дизайна не только улучшает общий пользовательский опыт, но также повышает эффективность использования интерфейса.

Учтем вышесказанное и поясним, какие приоритеты будут расставлены в процессе разработки:

— интуитивность (удобная навигация по сайту, которая основана на ощущениях пользователей);

— привлекательность (привлечение внимания с помощью современных приемов веб-дизайна);

— адаптивность (один из методов обеспечения функциональности веб-страниц на устройствах разных размеров) [4];

— информативность (вся возможная информация будет доступна пользователю);

— простота и эффективность (легкие реализации, ускоряющие различные процессы функционирования сайта, а также время взаимодействия с ним пользователей);

— тестирования с пользователями.

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

Заключение

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

ЛиТЕРАТУРА

1. August 2023 U.S. Airline Traffic Data Up 8.4% from the Same Month Last Year // Bureau of Transportation Statistics. — 2023. — 13 November. URL: http://www.bts.gov/newsroom/ august-2023-us-airline-traffic-data-84-same-month-last-year (дата обращения 15.11.2023).

2. Number of passengers traveling aboard Amtrak's railcars from FY 2013 to FY 2022 // Statista. URL: http://www.statista. com/statistics/553288/ridership-north-america-amtrak (дата обращения 15.11.2023).

3. The Omio Story // Omio Group. URL: http://www.omio. com/corporate (дата обращения 15.11.2023).

4. IxDF Design Compendium: The world's biggest collection of design knowledge // Interaction Design Foundation. URL: http://www.interaction-design.org/literature/topics (дата обращения 16.12.2023).

5. Wathan, A. Refactoring UI / A. Wathan, S. Sch-oger. — 2018. — 218 p. URL: http://www.refactoringui.com (дата обращения 16.12.2023).

7. What's the difference between UX and UI design? // freeCodeCamp. — 2018. — 03 February. URL: http://www.free-codecamp.org/news/whats-the-difference-between-ux-and-ui-design-2ca8d107de14 (дата обращения 24.12.2023).

8. Deep Dive into Modern Web Development // FullStack open. URL: http://fullstackopen.com/en (дата обращения: 17.12.2023).

9. Narizhnykh, D. MySQL vs PostgreSQL in 2023 // DBCon-vert. — 2023. — 01 February. URL: https://dbconvert.com/blog/ mysql-vs-postgresql (дата обращения 03.12.2023).

10. Идентификация, Аутентификация, Авторизация. В чем же разница? // Хабр. — 2023. — 07 марта. URL: http://habr.com/ru/articles/720842 (дата обращения 08.12.2023).

11. Figma: The Collaborative Interface Design Tool. URL: http://www.figma.com (дата обращения 23.12.2023).

12. Хеширование: разбираемся в деталях // GeekBrains. — 2022. — 15 декабря (дата обращения 15.11.2023).

13. Tutu.ru: Авиа, ЖД, билеты на автобус и туры онлайн. URL: http://www.tutu.ru (дата обращения 15.11.2023).

14. Официальный сайт ОАО «РЖД». URL: http://www. rzd.ru (дата обращения 15.11.2023).

15. Deutsche Bahn — Train Tickets. URL: http://www.bahn. de (дата обращения 15.11.2023).

16. Wanderu: Search and Compare Bus and Train Ticket. URL: http://www.wanderu.com (дата обращения 15.11.2023).

Информация об авторах

Баландин Евгений Геннадьевич — студент 4 курса направления подготовки бакалавриата 09.03.01 Информатика и вычислительная техника, Петербургский государственный университет путей сообщения Императора Александра I. E-mail: baltatvik3@mail.ru

Забродин Андрей Владимирович — канд. ист. наук, доцент кафедры «Информационные и вычислительные системы», Петербургский государственный университет путей сообщения Императора Александра I. E-mail: zabrodin@ pgups.ru

Статья поступила в редакцию 29.01.2024; одобрена после рецензирования 17.03.2024.

УДК 004.428.4:004.512/514

DOI: 10.20295/2413-2527-2024-137-78-83

Applying UI/UX Design Principles for an Online Railway Ticket Booking Platform: Preparing for Web Service Deployment

E. G. Balandin, PhD A. V. Zabrodin

Emperor Alexander I St. Petersburg State Transport University Saint Petersburg, Russia

Abstract. A comprehensive overview of the development process of a web service for searching train tickets. Covers the key stages of design, from user mapping and analysis to the use of basic UI/UX design. Brief conclusions and justification for the need to create a web service.

Keywords: web service, railway tickets, User Interface, User Experience, design, architecture, authorization, framework, database, tools, security.

For citation: Balandin E. G., Zabrodin A. V. Applying UI/UX design principles for an online railway ticket booking platform: preparing for web service deployment // Intellectual Technologies on Transport. 2024. No 1 (37). P. 78-83. (In Russian). DOI: 10.20295/2413-2527-2024-137-78-83

References

1. Bureau of Transportation Statistics. URL: https://www. bts.gov/newsroom/august-2023-us-airline-traffic-data-84-same-month-last-year/ (data obrashcheniya: 15.11.2023).

2. Number of passengers traveling aboard Amtrak's railcars from FY 2013 to FY 2022. URL: https://www.statista.com/statis-tics/553288/ridership-north-america-amtrak/ (data obrashcheniya: 15.11.2023).

3. The Omio Story. URL: https://www.omio.com/corporate/ (data obrashcheniya: 15.11.2023).

4. Top UX / UI Design Topics. URL: https://www.interaction-design.org/literature/topics/ (data obrashcheniya: 16.12.2023).

5. Wathan A., Schoger S. Refactoring UI. 2018.

6. Resources for Developers, by Developers. URL: https:// developer.mozilla.org/ru/ (data obrashcheniya: 16.12.2023).

7. What's the difference between UX and UI design? / URL: htt-ps://www.freecodecamp.org/news/whats-the-difference-between-ux-and-ui-design-2ca8d107de14/ (data obrashcheniya: 24.12.2023).

8. Deep Dive Into Modern Web Development. URL: https:// fullstackopen.com/en/ (data obrashcheniya: 17.12.2023).

9. Sravnenie MySQL i PostgreSQL v 2023 godu. URL: htt-ps://habr.com/ru/companies/otus/articles/722304/

10. Identifikaciya, Autentifikaciya, Avtorizaciya. V chem zhe raznica? / ProQualityCommunity // Habr. 2023.

11. Figma: The Collaborative Interface Design Tool. URL: https://www.figma.com/ (data obrashcheniya: 23.12.2023).

12. Heshirovanie: razbiraemsya v detalyah / Redakciya sajta // GeekBrains. 2022.

13. Tutu.ru: Avia, ZHD, bilety na avtobus i tury onlajn. URL: https://www.tutu.ru

14. Passazhiram. URL: https://www.rzd.ru

15. Deutsche Bahn. URL: https://www.bahn.de (data obrashcheniya: 15.11.2023).

16. The simplest way to book bus and train travel. URL: htt-ps://www.wanderu.com (data obrashcheniya: 15.11.2023).

Information about Authors

Balandin Evgeny Gennadievich — Bachelor's degree student, Emperor Alexander I St. Petersburg State Transport University. E-mail: baltatvik3@mail.ru

Zabrodin Andrey Vladimirovich — PhD in History. Associate Professor of the Department of Information and Computing Systems, Emperor Alexander I St. Petersburg State Transport University. E-mail: zabrodin@pgups.ru

The article was submitted 29.01.2024; approved after reviewing 17.03.2024.