Новейшие технологии пользовательского интерфейса для поддержки программирования

Я посетил 34-й Симпозиум ACM по программному обеспечению и технологиям пользовательского интерфейса (UIST 2021), главный форум по инновациям в интерфейсах человек-компьютер, на неделе 11 октября. , 2021. Это была полностью виртуальная конференция из-за COVID. UIST охватывает множество тем, но этот отчет о поездке сосредоточен на последних исследованиях, связанных с компьютерным программированием, которые я видел и читал на конференции.

Общие впечатления

Прежде чем я углублюсь в конкретные статьи, я хотел бы поделиться своими общими впечатлениями от UIST этого года.

Опыт виртуальной конференции

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

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

Кофе-брейки и социальные часы проводились на другой платформе под названием Ohyay, которая позволяет сесть в виртуальном лаундже (см. Рисунок ниже). Мне было немного неловко, но, вероятно, не более неловко, чем подойти к группе незнакомцев на физическом совещании. Так что в целом это победа. Последней социальной технологией, которую использовала конференция, была программа who2chat, которая подбирает участников на основе ключевых слов, взятых из их исследовательских профилей. Это помогло мне установить чат 1: 1 с кем-то, кто разделял мои исследовательские интересы.

Большие идеи, которые возвращаются

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

Затем я кратко расскажу о документах, связанных с программированием, которые я видел на UIST 2021. Скриншоты и все в кавычках ниже взяты из описываемой статьи, если не указано иное.

Статьи о поддержке программирования и прототипирования

reCode: легкое взаимодействие поиска и замены в среде IDE для преобразования кода на примере

📺 Презентация | 📄 Бумага

Проблема: «Разработчики программного обеспечения часто сталкиваются с повторяющейся проблемой преобразования кода - схожих, но не полностью идентичных изменений кода во многих местах - в своих интегрированных средах разработки».

Решение. Авторы «создали расширение для Visual Studio Code, названное reCode. reCode улучшает знакомый опыт поиска и замены, позволяя разработчику указать простой поисковый запрос для определения соответствующих местоположений, а затем продемонстрировать предполагаемые изменения, просто введя изменение непосредственно в редакторе. Используя программирование на примере, reCode автоматически изучает более общее преобразование кода и отображает эти преобразования в виде различий до и после, с интерактивными действиями для интерактивного принятия, отклонения или уточнения предложенных изменений ».

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

Мои мысли:

  • Можем ли мы использовать reCode и Refazer для переноса критических изменений API и языка?
  • Можем ли мы использовать эти методы для расширения помощи при редактировании, предлагаемой IDE?

Unravel: свободный обозреватель кода для обработки данных

📺 Презентация | 📄 Бумага

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

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

Ключевые идеи:

  • Цветовое кодирование различных типов изменений, к которым приводит каждая строка: Легко определить влияние каждого метода на конечные результаты.
  • Описание промежуточных результатов. Есть много разных способов описания промежуточного результата, которым в данном случае является фрейм данных. Авторы использовали знания предметной области, чтобы сосредоточиться на трех вещах: 1) размерные изменения, 2) важные переменные столбца и 3) тонкие изменения, внесенные функцией.
  • Переоценка кода в реальном времени после включения / выключения определенных строк: технически пользователь может сделать это вручную, но Unravel сделал это и более удобным, и быстрым. За кулисами система разбила код на несколько фрагментов кода, которые представляют каждую из цепочек, и заранее перебрала различные комбинации.

Мои мысли:

  • Свободный интерфейс, используемый в науке о данных, имеет много общего с кодом пользовательского интерфейса, написанным с помощью Flutter или Jetpack Compose. Как мы можем применить эту технику для отладки кода пользовательского интерфейса? Одна из возможностей - использовать что-то подобное для отладки макета. Инструмент может отображать, как каждый виджет в дереве изменяет ограничения макета, и позволяет пользователю исследовать эффект отключения виджетов, которые могут вызывать проблемы, и предварительной вставки виджетов, которые потенциально могут решить проблему макета (например, расширенный виджет во Flutter).
  • Другая возможность - использовать этот метод для отладки производительности. Мы видели, как опытные разработчики использовали аналогичный, но ручной процесс устранения, чтобы найти основную причину проблемы с производительностью.

Схема и код плетения: интерактивное визуальное редактирование для языков описания оборудования

📺 Презентация | 📄 Бумага

Проблема. Язык описания оборудования (HDL) обеспечивает такие преимущества, как абстракция и автоматизация, но он не подходит для разработчиков оборудования, которые привыкли к графическим рабочим процессам.

Решение: в этой работе авторы «исследуют подход IDE для предоставления графического редактора для HDL схемотехники на уровне платы».

Ключевые идеи:

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

Мое мнение: Для всех, кто следит за эволюцией наборов инструментов с графическим интерфейсом пользователя, неудивительно, что инструменты проектирования схем и микросхем движутся в сторону подхода, ориентированного на код. Это произошло с появлением декларативных фреймворков пользовательского интерфейса, таких как Flutter, SwiftUI и Jetpack Compose. Тем не менее, чего часто не хватает, так это дополнительного рабочего процесса визуального программирования, к которому больше привыкла аудитория, ориентированная на дизайн.

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

📺 Презентация | 📄 Бумага

Проблема: «Хорошие художники копируют, великие воруют». Однако сложно понять, как конкретное поведение пользовательского интерфейса реализовано в Интернете, и адаптировать его для другого веб-сайта.

Решение: авторы предложили «Umitation, систему, которая помогает дизайнерам извлекать, редактировать и адаптировать примеры поведения внешнего интерфейса пользователя к целевым веб-сайтам». На мой взгляд, это что-то вроде кнопки «формат рисования» для перенацеливания поведения пользовательского интерфейса.

Ключевые идеи:

  • Извлечение поведения пользовательского интерфейса путем демонстрации: Umitation предоставляет визуальный рабочий процесс для определения интересующего поведения и предоставляет полезные абстракции, помогающие пользователю в процессе выбора и перенацеливания. Под капотом он использует веб-API, такие как MutationObservers, для фиксации результирующих изменений пользовательского интерфейса.
  • Визуализация поведения пользовательского интерфейса: Umitation представляет собой минималистичную, но полезную визуализацию захваченного поведения пользовательского интерфейса. Он использует квадрат для представления объекта ответа и визуализирует изменения его атрибутов на двухмерной диаграмме (см. Рисунок сбоку).

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

Десять миллионов пользователей и десять лет спустя: Руководство по проектированию преподавателя Python для создания масштабируемого и устойчивого исследовательского программного обеспечения в академических кругах

📺 Презентация | 📄 Бумага

Проблема: Python Tutor был создан и поддерживался одним ученым в течение последних 10 лет. В этой статье рассматривается проблема создания устойчивого исследовательского программного обеспечения, широко используемого в академических кругах. Хотя уроки, извлеченные из Python Tutor, не имеют прямого отношения к людям, работающим над продуктами в отрасли, они помогают ответить на аналогичный вопрос, с которым сталкиваются многие из нас: как поддерживать крупномасштабный, но недостаточно финансируемый и неукомплектованный персоналом программный проект?

Решение: автор предложил 10 рекомендаций по дизайну в качестве ответа на поставленный выше вопрос. Несколько рекомендаций относятся к предотвращению появления нестандартных функций, в том числе противоречивое заявление: «Игнорируйте большинство пользователей, чтобы поддерживать ваш проект в долгосрочной перспективе». Есть также некоторые технические советы, такие как «Будьте без гражданства» и избегайте хостинга и модерирования пользовательского контента.

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

Sporq: интерактивная среда для изучения кода с помощью запроса на примере

📺 Презентация | 📄 Бумага

Проблема: «Программистам по-прежнему сложно анализировать свой код на предмет нестандартных шаблонов».

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

Ключевые идеи:

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

GenLine и GenForm: два инструмента для взаимодействия с генеративными языковыми моделями в редакторе кода

📺 Презентация | 📄 Бумага

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

Решение. Авторы предложили два инструмента с графическим интерфейсом для этой задачи: 1) GenLine, который «позволяет пользователям передавать встроенные запросы в генмакрос, используя понятие двойных скобок (например,« [[html: Make an Кнопка ОК]] »); и 2) GenForm: пользовательский интерфейс на основе форм.

Мои мысли:

  • Что мне показалось действительно крутым, так это то, что GenLine позволяет пользователю заключать обычный исходный код в макросы естественного языка (см. Изображение выше). Затем система заменяет макрос сгенерированным исходным кодом, но с сохранением отношения упаковки.
  • Макрос в GenLine кажется недолговечным. Пользователь не может повторно посетить макрос после того, как он был заменен исходным кодом, который он сгенерировал. Этот рабочий процесс сильно отличается от макросов в статическом метапрограммировании, где макросы часто являются постоянными и проверяются системой контроля версий. Сгенерированный код чаще бывает эфемерным.

Idyll Studio: структурированный редактор для создания интерактивных статей и статей на основе данных

📺 Презентация | 📄 Бумага

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

Решение: авторы «представляют Idyll Studio, структурированный редактор для создания и публикации интерактивных статей, основанных на данных».

Ключевые идеи:

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

Мои мысли:

  • Интерактивные документы представляют собой все более стирающиеся границы между документами, приложениями и наборами данных. Как разработчики UI-инструментария должны подготовиться к подобному смешанному опыту?
  • Этот инструмент напоминает мне Webstrates, более общий инструмент для объединения различных типов носителей в интерактивные документы.

Rapido: прототипирование интерактивного опыта AR посредством демонстрационного программирования

📺 Презентация | 📄 Бумага

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

Решение: авторы представляют «Rapido, новый инструмент для ранней стадии прототипирования, позволяющий создавать полностью интерактивные мобильные прототипы дополненной реальности из неинтерактивных видеопрототипов с использованием демонстрационного программирования (PoD)».

Ключевая идея. Rapido определяет начальный конечный автомат на основе метаданных, полученных в процессе создания прототипа видео. Затем он позволяет дизайнеру тестировать, уточнять и настраивать правила взаимодействия.

Мои мысли:

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

Прочие документы, связанные с программированием

На UIST 2021 есть еще несколько статей о программировании, но я сделал для них меньше заметок. Тем не менее, я перечисляю их ниже для полноты:

Последние мысли

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