UDC
004.738.5, 004.9, 378.147.39:004
CSCSTI
05.11 06.51 10.01 11.01 11.25
6 more Collapse
78.01 81.92 81.93 82.01 82.33 11.15

THE ANALYSIS OF METHODS OF VISUALIZATION OF PROTOTYPES IN DESIGN OF WEB INTERFACES OF INFORMATION AND EDUCATION INTERNET RESOURCES The analysis of methods of visualization of prototypes in design of web interfaces of information and education internet resources

Published in National Security and Strategic Planning · Pages 105–109 · Rubric: SCIENCE, INNOVATION AND EDUCATION
Received: 11.06.2019 Accepted: 30.06.2019 Published: 30.06.2019 Language of publication: RUS
The general statistics of a usability in the context of design of the optimum web interface is analysed. Methods of prototyping of interfaces of information and education Internet resources are considered.
web-design, interactive prototype, prototyping, development of websites, web interface
Text References
Ускоряющаяся разработка веб-технологий (от англ. web - «паутина», интернет-пространство) и средств компьютерной графики способна демотивировать потенциальных пользователей изучать и использовать усложненные веб-инструменты, что может привести к технологической десинхронизации, которой возможно избежать, следуя так называемому «принципу выравнивания», то есть своевременной и максимальной модернизации обучения и информирования, сообразуясь со скоростью развития веб-инструментов информационно-образовательных интернет-ресурсов. На сегодняшний день существует большое количество разнообразных веб-интерфейсов (от англ. interface - совокупность средств взаимодействия между элементами системы) [1]: интерфейс «машина-машина», служащий для взаимодействия машин с машинами; интерфейс «машина-инфраструктура», служащий для взаимодействия машин с инфраструктурой внешней среды (пример реализации - интеллектуальные транспортные сети); интерфейс «машина-природа», служащий для взаимодействия машин с природой (пример реализации - «умный дом»); интерфейс «человек-я», служащий для взаимодействия человека с самим собой (пример реализации - умные часы, мобильные гаджеты); интерфейс «человек-тело», служащий для взаимодействия человека с собственным телом (пример реализации - удаленный мониторинг и контроль здоровья через интернет); интерфейс человек-человек», служащий для взаимодействия человека с человеком (пример реализации - мобильные гаджеты как средство мгновенного удаленного соединения между людьми, реализация «коллективного разума»); интерфейс «человек-машина», служащий для взаимодействия человека с машинами. Понятие веб-интерфейса, в части, касающейся взаимодействия человека и машины-компьютера, тесно связано с понятием юзабилити (от англ. usability - удобство и простота использования), то есть простотой, удобством, интуитивным пониманием. Проанализировать юзабилити интернет-сайта для общей оценки поведения пользователей и для эффективной разработки/усовершенствования веб-интерфейса можно с помощью сервисов системной веб-аналитики, в России крупнейшим интернет-сервисом в данной области является «Яндекс.Метрика» [2]. В рамках анализа юзабилити рассматривается: статистика посещений пользователей с периодами прироста новых посетителей, целевой аудитории; отказы, непродолжительные просмотры или визиты; время и глубина просмотров веб-страниц, кликабельность активных веб-ссылок и элементов веб-интерфейса. Так называемая термическая карта интернетсайта, карта ссылок и кликов, иллюстрирует ссылки и элементы веб-интерфейса, которые оказываются в зоне наибольшего внимания пользователей. Эти данные помогают понять веб-разработчикам, насколько удобен интернет-сайт для посетителей, и используются для дальнейшего совершенствования веб-интерфейса. К примеру, согласно данным сервиса «Яндекс- Метрика» у посетителей официального интернетсайта Санкт-Петербургского университета ГПС МЧС России 5 приоритетных целей посещения (рис. 1, 2): вход в личный кабинет; просмотр контактов университета; информация о бюджетной форме обучения; чтение новостей университета; информация об обучении на договорной основе. В общем случае проектирование пользовательского веб-интерфейса может быть представлено в виде условного алгоритма (рис. 3). С точки зрения веб-дизайна протипами являются эскизы веб-страниц или документы с HTML/XHTML-разметкой (от англ. HyperText Markup Language - «язык гипертекстовой разметки», стандартизированный язык разметки документов в интернет) интернет-сайта с рядом структурных элементов, к примеру различных форм отправки информации, меню etc. Целесообразность использования как статичного, так и динамичного прототипирования при реализации рабочего проекта определяется на стадии создания предварительного проекта. На этапе структурирования схем веб-страниц применяется статичное прототипирование. На этапе разработки веб-дизайна применяется интерактивное прототипирование, которое позволяет при помощи встраиваемого языка программирования для доступа к объектам веб-приложений JavaScript имитировать работу модели пользовательского интерфейса при отсутствии сохранения данных на веб-сервере (от англ. server - специализированное оборудование для выполнения на нём сервисного программного обеспечения) [3]. В случае наличия в предварительном или рабочем проекте решений по цветовой гамме интернет-сайта, возможно использование не черно-белого, а цветного прототипирования. Стоит отметить, что стадия тестирования юзабилити проходит успешнее на цветных прототипах в силу более толерантного восприятия пользователями-тестерами [4]. В качестве примера успешного гибкого подхода к использованию прототипирования при создании официальных информационных и информационно-образовательных интернет-сайтов можно привести Санкт-Петербургский университет Государственной противопожарной службы МЧС России, в доменной зоне которого на доменах 3-го уровня функционируют официальные информационные и информационно-образовательные интернет-сайты (рис. 4, 5, 6) [5, 6]. Ряд основных критериев для условного принятия решения об использовании прототипирования при проектировании веб-интерфейсов представлен в таблице 1. Также стоит отметить, что прототипирование используется не только в проектировании вебинтерфейсов интернет-сайтов, но и для отладки интерактивного пользовательского интерфейса реляционных баз данных с точки зрения удобства загрузки взаимосвязанных данных [7]. Представляется целесообразным использовать многообразие веб-технологий и для современного подхода к профессиональной деятельности специалистов Федеральной противопожарной службы, и для эффективного освоения стандартизированного содержания образования, поскольку и знания, и информация являются не только источниками прибыли, но и стратегическим ресурсом нашего государства с точки зрения суверенитета и национальной безопасности. Рисунок 1 - Термическая карта блока в верхней части страницы официального интернет-сайта Санкт-Петербургского университета ГПС МЧС России за период с 3 октября 2017 года по 2 октября 2018 года Рисунок 2 - Термическая карта блока в нижней части страницы официального интернет-сайта Санкт-Петербургского университета ГПС МЧС России за период с 3 октября 2017 года по 2 октября 2018 года Рисунок 4 - Информационно-обучающий портал «Арктика без опасности» Рисунок 3 -Условный алгоритм поэтапного проектирования пользовательского веб-интерфейса Рисунок 5 - Обучающий портал «Основы радиационной безопасности» Рисунок 6 - «Система дистанционной поддержки сотрудников судебно-экспертных учреждений» Таблица 1 Критерии при проектировании веб-интерфейсов Критерий Решение Тестирование будущего проекта на начальных этапах создания проекта Использовать прототип Упрощение формулировки требований и внесения корректировок Снижение стоимости проекта путем устранения ошибок до ввода в эксплуатацию Возможность отрабатывать на серверной части усложненное взаимодействие с пользователем путем имитации Быстрое согласование разрабатываемого проекта или отказ из-за нереализуемости на начальном этапе Демонстрация будущего проекта на начальных этапах создания Упрощение процесса отрисовки макета на стадии веб-дизайна Простой проект, состоящий из нескольких однотипных шаблонов. Не использовать прототип. Проект, создающийся на готовой технологической платформе с ограниченным определенным функционалом. Сложные креативные визуальные решения. Редизайн с сохранение прежнего функционала.

1. Nikiforov O.Yu. Interfeysy Interneta veschey // Nauchnyy al'manah. - 2015. № 9(11). - S. 1344-1347

2. O servise - Metrika. Pomosch' [Elektronnyy resurs]. - Rezhim dostupa: https://yandex.ru/support/metrika/ (data obrascheniya: 20.04.2019)

3. Proektirovanie pol'zovatel'skih interfeysov. Kratkiy obzor processa [Elektronnyy resurs]. - Rezhim dostupa: http://web.archive.org/web/20080112171847/http://www.jvetrau.com/2007/12/18/proektirovanie-polzovatelskih-interfeysov-kratkiy-obzor-protsessa/ (data obrascheniya: 20.04.2019)

4. Prototipirovanie i ego rol' v razrabotke sayta [Elektronnyy resurs]. - Rezhim dostupa: https://depix.ru/articles/prototipirovanie_i_ego_rol_v_razrabotke_sayta (data obrascheniya: 20.04.2019)

5. Kuz'mina T.A., Stepanov I.M. Sistema distancionnogo obucheniya dlya podgotovki spasateley k deystviyam v usloviyah Arkticheskoy zony // Podgotovka kadrov v sisteme preduprezhdeniya i likvidacii posledstviy chrezvychaynyh situaciy: materialy Mezhdunar. nauch.-prakt. konf. 1 iyunya 2017 goda. Sankt-Peterburgskiy universitet GPS MChS Rossii. - SPb.: SPb un-t GPS MChS Rossii, 2017. - S. 61-63

6. Sharapov S.V., Kuz'mina T.A. Perspektivy ispol'zovaniya ob'ektno-orientirovannoy sistemy podgotovki pozharno-tehnicheskih ekspertov // Nauch.-analit. zhurn. «Vestnik S.-Peterb. un-ta GPS MChS Rossii». - 2017. - № 3. - S. 183-188

7. Bobrov A.I., Chuykov A.M., Kuz'mina T.A. Informatizaciya processov nadzornoy deyatel'nosti v MChS Rossii // Sovremennye tehnologii obespecheniya grazhdanskoy oborony i likvidacii posledstviy chrezvychaynyh situaciy: sb. st. po materialam X Vseros. nauch.-prakt. konf. kursantov, slushateley, studentov i molodyh uchenyh s mezhdunar. uch. 18 aprelya 2019 goda. Voronezhskiy institut - filial FGBOU VO Ivanovskoy pozharnospasatel'noy akademii GPS MChS Rossii. - Voronezh: Voronezhskiy in-t - filial Ivanovskoy pozharno-spasatel'noy akademii GPS MChS Rossii, 2019. - S. 43-45