Серж Лукьянов

UI/UX

закрыть

Полный цикл дизайн-производства приложения CodeCamp

CodeCamp — это лёгкое, игровое мобильное приложение для изучения основ программирования и принципов написания кода. Один из проектов во время моей работы в Purrweb. Планируемая ЦА — подростки средней и старшей школы в США.

Роль

Продуктовый дизанер

Ответственность

UI/UX

Период

2023

Самый сложный вызов

Как создать песочницу для программирования в ограничениях мобильного экрана

Подборка экранов

Вызов

Как создать песочницу для программирования в ограничениях мобильного экрана

Одна из самых сложных задач в работе над проектом — создать среду для обучения Python с интерпетатором кода внутри. Пользователь должен понимать, что он пишет, видеть структуру и получать обратную связь от приложения.

Требования

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

— соблюдение вложенности и отступов;

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

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

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

— соблюдение вложенности и отступов;

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

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

Решения

— Песочница выведена в отдельную вкладку в приложении с списком текущих проектов;

— рабочая область в контрастирующем цвете, чтобы явно отделить её от элементов интерфейса;

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

— управление элементами выполнено через тап по нужному блоку;

— быстрый запуск кода с выведением обратной связи и указанием на ошибки.

— Песочница выведена в отдельную вкладку в приложении с списком текущих проектов;

— рабочая область в контрастирующем цвете, чтобы явно отделить её от элементов интерфейса;

— управление элементами выполнено через тап по нужному блоку;

— быстрый запуск кода с выведением обратной связи и указанием на ошибки.

Трудности

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

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

Подборка экранов