UX В РАЗРАБОТКЕ ПРОТОТИПА ВЕБ-ДИЗАЙНА ИНФОРМАЦИОННОЙ СИСТЕМЫ ИДЕНТИФИКАЦИИ И РАСПОЗНАВАНИЯ ИЗОБРАЖЕНИЙ

UX IN THE DEVELOPMENT OF A PROTOTYPE OF A WEB-DESIGN OF THE INFORMATION SYSTEM OF IDENTIFICATION AND RECOGNITION OF IMAGES

Evgeniy Ilyin

student, Department of Economic Mathematics, Informatics and Statistics, Tomsk State University of Control Systems and Radioelectronics,

Russia, Tomsk

АННОТАЦИЯ

Цель данной статьи – выделение и анализ требований к UX дизайну на примере информационной системы идентификации и распознавания изображений. Актуальность темы обусловлена востребованностью интернет-сервисов, разработанных с учетом требований UX дизайна на рынке. Методы – анализ и синтез. Результаты – выявлены и проанализированы требования к UX дизайну, позволяющие наиболее эффективно реализовать работу информационной системы идентификации и распознавания изображений.

ABSTRACT

The purpose of this article is to highlight and analyze the requirements for UX design using the example of an information system for identification and image recognition. The relevance of the topic is due to the demand for Internet services developed taking into account the requirements of UX design in market. Methods - analysis and synthesis. Results - the requirements for UX design were identified and analyzed, which make it possible to most effectively implement the work of the information identification and image recognition system.

Ключевые слова: UX, дизайн, веб-сайт, информационная система.

Keywords: UX, design, website, information system.

До конца 2000-х годов большинство российских разработчиков программного обеспечения делали значительный уклон на функционализм. Но эта тенденция постепенно угасала с осознанием того, что для успеха на рынке мало производить работающий продукт – нужно сделать его красивым и удобным для пользователя [1]. На этом этапе пришло осознание того, что создание красивого дизайна какой-либо системы не гарантирует её удобства использования, а соответственно и успеха. Следовательно, появилась необходимость в специалистах, занимающихся проектированием логики работы интерфейсов на основе пользовательского опыта. Таких специалистов называют UX дизайнерами.

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

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

На основании этой цели и анализа потребностей целевой аудитории были выявлены следующие требования к UX дизайну веб-сайта:

1. Интуитивность – как компоновку объектов в логических блоках, привычное расположение и функционал основных активностей, четко определенную и простую для понимания структуру сайта;
2. Наглядность – как полноту получаемой информации и удобство поиска, анализа и взаимодействия с ней;
3. Скорость – как такую организацию логики интерфейсов, при которой скорость получения доступа к механизмам системы, решающим какие-либо задачи и взаимодействие с ними происходит за минимальное количество действий со стороны пользователя;
4. Адаптивность – как способность веб-сайта подстраиваться под разные размеры экранов.

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

За основу были взяты три основных размера экрана, а именно:

• 320 на 568 пикселей – для смартфонов;
• 768 на 1024 пикселей – для планшетов;
• 1440 на 1024 пикселей – для персональных компьютеров.

Выбор основан на максимальной ширине контейнера с контентом в фреймворке Bootstrap [2]. На рисунке 1 представлена таблица со значениями ширины контейнера для разных размеров экрана в данном фреймворке.

Рисунок 1. Таблица ширин контейнеров для разных размеров экранов в фреймворке Bootstrap

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

Рисунок 2. Прототип веб-дизайна страницы с результатами поиска для планшета

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

1. «шапка сайта» содержит основную навигацию;
2. оранжевая полоса с кнопкой для поиска новых изображений;
3. место, где находится изображение, по которому производится поиск;
4. место, содержащее результаты поиска;
5.  «подвал сайта», содержащий в данном случае информацию о месте и времени создания сервиса.

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

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

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

Однако для полного обоснования критерия скорости и интуитивности стоит рассмотреть общую структуру веб-сайта, представленную на рисунке 3.

Рисунок 3. Схема общей структуры веб-сайта

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

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

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

1. Калинина, А. Р. UX и UI. Различия / А. Р. Калинина // Интеллектуальные информационные технологии: Труды международной научно-практической молодёжной конференции, Пенза, 31 мая 2016 года. – Пенза: Пензенский государственный технологический университет, 2016. – С. 162-168.
2. Bootstrap – The most popular HTML, CSS and JS library in the world [Электронный ресурс]. – Режим доступа: https://getbootstrap.com/, свободный (дата обращения: 28.09.2021).