CC BY
18
Применение методологии Agile при совместной работе над UI/UX-проектами в специализированном редакторе верстки
О.С. Кононова, А.В.Фирсов Российский государственный университет имени А.Н. Косыгина (Технологии. Дизайн. Искусство), Москва
Аннотация: Для прототипирования виртуальных ресурсов существуют современные приложения UI/UX-разработки, обладающие средствами для выстраивания высокопродуктивных алгоритмов взаимодействия, например, Figma или его новый многообещающий конкурент - Pixso. Эти программы поддерживают совместное редатирование проектов, а также позволяют проводить планирование и обсуждение идей и этапов работы здесь же, в среде. Верно выбранный метод взаимодействия приводит к многократному росту производительности. Одним из признанных подходов к планированию и управлению проектами является методология гибкого проектирования Agile.
Ключевые слова: команда, верстка, прототип, сайт, методология, формальный язык, мозговой штурм, фрейм, проект, интерфейс, плагин, редактор.
Сегодня выбор средств для разработки интерфейсов взаимодействия с пользователем или UI/UX-дизайна широк и разнообразен. В большей степени окончательное предпочтение обусловлено навыками разработчика и требованиями заказчика, так как далеко не все приложения позволяют по выгруженной ссылке наблюдать за ходом работы в режиме реального времени. У неспециализированных программ, например, необходимо делать превью экранов в универсальных читабельных форматах, группировать и отправлять заказчику, что не очень современно и довольно затратно по времени.
Специализированное программное обеспеспечение, как правило, обладает и средствами UI/UX-прототипирования и дизайн-макетирования, и возможностями для мозгового штурма, комментирования этапов и даже общения посредством звука и видео между членами команды разработчиков. Например, в приложении Figma [1,2] с профессиональной лицензией доступна возможность разговора во время обсуждения проектов в файлах Design и FigJam при условии их размещения в папке Team project. В
М Инженерный вестник Дона, №1 (2023) ivdon.ru/ru/magazine/arcliive/nly2023/8164
программе Pixso прямо из файла для мозгового штурма Whiteboard можно запускать видеоконференции на базе ряда популярных ресурсов, причем бесплатно и без ограничений по количеству таких «досок».
Ниже в таблице №1 представлен список наиболее популярных приложений. Всего несколько из них имеют бесплатную лицензию, остальные предлагают услуги на коммерческой основе.
Таблица № 1
Популярные программы для UI/UX-разработки
Универсальное ПО Специализированное ПО
Inkscape Figma
CorelDraw Pixso
Adobe Illustrator Adobe XD
Adobe Photoshop Scetch (для МАС)
Affinity Designer InVishion
Framer
Moqups
Бесплатная лицензия (со своими особенностями, но вполне рабочая), а не ограниченный во времени бесплатный доступ, реализована в таких специализированных программах, как Figma, Pixso, InVision.
Рассмотрим наиболее эффективный метод организации работы над совместным проектом в условиях бесплатной лицензии в программе Figma.
В соответствии с методологией гибкого проектирования Agile [3], при разработке масштабных виртуальных ресурсов, например, сайтов, с массой функциональных элементов и контента рекомендуется пройти следующие итерации: определить и зафиксировать основные идеи проекта и следовать им (корректируя при изменении условий, пожеланий заказчика и по результатам тестирований), определить промежуточные и финальные сроки,
распределить выполнение, визуализировать дорожную карту, предоставить к ней доступ всем участникам и обновлять при изменении параметров.
Разработчики Figma заранее подготовили шаблон условной дорожной карты [4] по методолгии Agile - Agile Roadmap (рис.1). Для последователей данного подхода это экономия времени и удобство на этапе мозгового штурма на специализированной «доске» под названием FigJam.
Рис. 1. - Рабочий шаблон Agile Roadmap, доступный в свободных примерах для FigJam в галерее шаблонов Figma Технически данная схема представляет собой набор готовых элементов - цветных прямоугольников, линий, стрелок, стикеров, текста, виджетов -вынесенных в виде кнопок на нехитрую панель инструментов FigJam (рис.2). Все легко добавляется, форматируется и переносится по «доске». То есть дорожную карту несложно создать «с нуля», однако использование шаблонов существенно экономит время.
Рис. 2. - Панель инструментов FigJam-файла с открытыми стикерами
После переноса черновика «доски» Figma в папку Team project и расшаривания ссылки на него с правом редактирования, можно приступать к активной фазе обсуждений. В любом случае, все обладатели ссылки всегда смогут посмотреть последний вариант инфографики.
Важным звеном модели Agile при разработке виртуальных ресурсов является создание интерактивного прототипа низкой детализации, а также тщательное тестирование данного прототипа на предмет ошибок и удобства использования. Все необходимые инструменты для чернового прототипирования в Figma присутствуют. Это автофигуры и примитивы на панели инструментов design-файла, а также сама панель прототипирования с функционалом для налаживания связей между структурными элементами проекта.
Рис. 3. - Фрагмент интерактивного прототипа приложения-ежедневника с установленными связями между экранами и элементами Такой прототип, как на рис.3, удобно тестировать на предмет достижения пользовательских целей [5]. В режиме демонстрации можно имитировать взаимодействие с активными элементами, следовать по маршрутам к страницам/блокам с ответами на пользовательские запросы, оценивать удобство расположения панелей, кнопок, всплывающих окон и т.д. Так как модель Agile гибкая, при обнаружении ошибки легко вернуться к
предыдущей итерации и внести необходимые исправления, а затем снова провести тестирование.
Далее следует этап пилотной версии виртуального ресурса. Создается дизайн-макет [6]. При необходимости, над проектом могут трудиться сразу несколько дизайнеров и верстальщиков. Достаточно добавить еще редакторов, соответствующим образом расшарив файл. При совместной работе над проектом в окне программы перемещается несколько курсоров одновременно.
Инструментарий design-файлов ориентирован в первую очередь на сборку интерфейса. Доступно разбиение материала в пределах одного файла. Это деление на фреймы (аналоги артбордов и холстов в других программах), группы, слои. Но если все эти объекты расположены в пределах одной страницы, мелькание курсоров соразработчиков может отвлекать от своих обязанностей. Для того, чтобы разнести части громоздкого проекта, но остаться в одном документе, были предложены страницы. Деление на страницы при совместной работе над крупным проектом имеет фундаментальное значение, как с точки зрения удобства, так и с позиции организации данных. В бесплатном тарифном плане Figma и Pixso действует ограничение в 3 страницы для командных файлов.
Еще одним важным условием при запуске пилотного проекта является возможность получения и переноса в среду разработки описаний элементов интерфейса или всего интерфейса целиком на формальном языке CSS (Android, iOS). По умолчанию Figma позволяет копировать описания стилей поэлементно из панели Inspect, представленной на рис.4.
Чтобы перенести весь дизайн целиком придется обратиться к плагинам, преобразующим в HTML или CSS [7,8]. Например, Figma to HTML, HtmlGenerator, Structure, Figma to Code и другие. Диалог HtmlGenerator представлен на рис.5.
G> Целя из месяц О
16 задач
Ô Бедный баланс г
Напоминание каждые 2 49«
s Фильмы
99 задач
Code
V CSS
TOS
Android
il: 37px H: 36.94px
К constraint: Scale ¥ constraint: Scale
Fill: Solid
Рис. 4. - Описание выбранного элемента интерфейса на формальном языке
CSS в панели Inspect редактора Figma
5 HtmlGenerator
Extra Options
Export all code into a single zip
£ Download Zip
Preview (New)
<div class=e2_3>
<div class="e24_2"x/div> <div class="e8_14"></div> <div class=eS_125> <div class=e8_91> <div class=e8_121>
<div class="e8_9B"x/div> </divXspan class="e8_120">сегодня</5рап> </div>
<div class=e8_97> <div class=e8_58>
<div class="e8_59"x/div> <diw class="e8_60"X/div>
Рис. 5. - Сгенерированный с помощью плагина HtmlGenerator НТМЬ-код фрейма с экраном прототипа мобильного приложения Этап системного тестирования начинается после внедрения виртуального ресурса. Как только ресурс начинает самостоятельно функционировать, появляется необходимость систематической проверки его основных Ш/иХ-показателей [9,10]: функциональность, пользовательский опыт и юзабилити. Как правило, данные о качестве интерфейса на этапе системного тестирования стараются получить от реальных пользователей с помощью опросов, оценки посещаемости страниц и анализа переходов.
Таким образом, подход Agile прекрасно реализуется в рамках одной среды разработки интерфейсов, поддерживающей совместное проектирование. Для небольших команд разработчиков возможность такого совмещения является удобным и наглядным способом ведения проектов.
Литература
1. Руководство по Figma // URL: figma.com/ community/ file / 813826100927416632 (дата обращения 26.10.2022).
2. Guide to team management (Руководство по управлению командой) // URL: figma.com/hc/en-us/articles/360039480614-Guide-to-team-management (дата обращения: 29.12.2022).
3. Кон Майк Agile: оценка и планирование проектов. - М.: Альпина Паблишер, 2018. - 418 с.
4. How to use FigJam to make diagrams (Как использовать FigJam-файлы для создания диаграмм) // URL: figma.com/figjam/how-to-use-figjam-to-make-diagrams (дата обращения: 10.01.2023).
5. Леви Джеймс UX-стратегия. Чего хотят пользователи и как им это дать. - СПб.: Питер, 2017. - 304 с.
6. Золала К., Кононова О.С., Фирсов А.В. Построение эффективного баннерного представления рекламной информации в сети интернет для туристического бизнеса // Инженерный вестник Дона. - 2019. - №2. URL: ivdon. ru/ru/magazine/archive/n2y2019/5775.
7. Комолова Н.В., Яковлева Е.С. HTML, XHTML и CSS. - СПб.: Питер, 2012. - 304 с.
8. Макфарланд Дэвид Новая большая книга CSS. - СПб.: Питер, 2021. -720 с.
9. Зубанков А.С., Барышев Д.А., Тараканова Е.Ю., Розалиев В.Л. Разработка решения для сбора данных активности пользователя веб-сайта //
Инженерный вестник Дона. - 2022. - №5. URL: ivdon.ru/ru/ magazine/archive/n5y2022/7655.
10. Ткаченко О.Н. Взаимодействие пользователя с интерфейсами информационных систем для мобильных устройств: исследование опыта. -М.: Магистр, 2021. - 152 с.
References
1. Rukovodstvo po Figma [Figma Guide]. URL: figma.com/ community/ file / 813826100927416632 (date accessed 26.10.2022).
2. Guide to team management URL: help.figma.com/hc/en-us/articles/360039480614-Guide-to-team-management (date accessed: 29.12.2022).
3. Kon Mayk Agile: otsenka i planirovanie proektov [Agile: project evaluation and planning]. M.: Al'pina Pablisher, 2018. 418 p.
4. How to use FigJam to make diagrams. URL: figma.com/figjam/how-to-use-figjam-to-make-diagrams (date accessed: 10.01.2023).
5. Levi Dzheyms UX-strategiya. Chego khotyat pol'zovateli i kak im eto dat'
[UX strategy. What users want and how to give it to them]. SPb.: Piter, 2017. 304 p.
6. Zolala K., Kononova O.S., Firsov A.V. Inzhenernyj vestnik Dona, 2019, №2. URL: ivdon.ru/ru/ magazine/archive/n2y2019/5775.
7. Komolova N.V., Yakovleva E.S. HTML, XHTML i CSS [HTML, XHTML and CSS]. SPb.: Piter, 2012. 304 p.
8. Makfarland Devid Novaya bol'shaya kniga CSS [The new big CSS book]. SPb.: Piter, 2021. 720 p.
9. Zubankov A.S., Baryshev D.A., Tarakanova E.Yu., Rozaliev V.L. Inzhenernyj vestnik Dona, 2022, №5. URL: ivdon.ru/ru/ magazine/archive/n5y2022/7655.
10. Tkachenko O.N. Vzaimodeystvie pol'zovatelya s interfeysami informatsionnykh sistem dlya mobil'nykh ustroystv: issledovanie opyta [User interaction with interfaces of information systems for mobile devices: a study of experienc]. M.: Magistr, 2021. 152 p.
