Разработка лучших интерфейсов для разработчика

Каждый разработчик в мире хотел бы разрабатывать более эффективно. Но что это значит?

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

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

В этой статье я хотел бы поделиться информацией, полученной при разработке интерфейсов для разработчиков для Velo, платформы разработки Wix.

Что такое интерфейс разработчика (developer interface)?

Интерфейс разработчика — это эквивалент пользовательского интерфейса, в котором основным пользователем продукта или услуги является разработчик.

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

Интерфейс разработчика в Wix

В рамках своей роли я разрабатываю интерфейсы для разработчиков Wix, которые предоставляют различные готовые решения, такие как drag-and-drop компоненты, бизнес-приложения, встроенная безопасность, инструменты SEO и многое другое. Однако часто пользователи хотят настроить или расширить встроенные решения. Для этих случаев мы предоставляем широкий спектр возможностей разработки, таких как:

• API, которые позволяют пользователям взаимодействовать со встроенными компонентами и расширяют возможности всей платформы.
• Полноценная IDE, интегрированная с визуальным редактором, где пользователь может писать frontend код на Javascript и backend код на Node.js.
• Интеграция с GitHub.
• Встроенная база данных и возможность подключения к внешним базам данных.
• Инструменты мониторинга и ведения логов.

Интерфейсы «коробочной» и заказной разработки тесно переплетены. Это создает для наших пользователей бизнес-возможности в создании веб-сайтов и веб-приложений, которые быстро выходят на рынок.

Советы по проектированию интерфейсов для разработчиков

Вот пять рекомендаций, основанных на опросе разработчиков.

1. Сократите время до первого «Hello World»

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

Пользователи начинают свое путешествие с намерением и мотивированы немедленно испытать свой «первый успех».

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

Я слышу и забываю. Я вижу и запоминаю. Я делаю и понимаю.

Вместо того, чтобы перебрасывать пользователей в новое пространство без каких-либо ссылок на документацию или справочник по API, мы должны обеспечить управляемое взаимодействие до тех пор, пока они не достигнут своего «первого успеха» и не наберут обороты для самостоятельной работы. Книга Кристал Хиггинс “Лучший онбординг” стала для нас отличным источником вдохновения. В следующей статье мой коллега Якир Мордехай подробно расскажет о своей впечатляющей работе по изменению процесса онбординга.

Пример стартового опыта

2. Предоставьте разработчикам возможность выполнять повторяющиеся задачи разработки

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

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

Помимо просмотра схемы коллекции в базе данных, мы позволяем пользователям просматривать ее на боковой панели IDE.

3. Всегда отображайте текущее состояние системы

Как написала Джин Янг в своей замечательной статье «Дело об Опыте разработчиков«:

Разработчики работают в джунглях, а не в размеченных садах.

Разработчики используют сложные приложения для выполнения операций в нелинейных рабочих процессах.

Некоторые действия, происходящие «за кулисами», могут иметь серьезные последствия. Чтобы пользователи знали о последствиях своих действий, мы должны постоянно сообщать о текущем состоянии системы.

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

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

4. Обеспечьте легкий доступ к соответствующей документации

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

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

Поэтому помимо поиска по документации мы добавляем навигацию по документации внутри продукта.

Использование навигации из определенного контекста позволяет пользователям изучать новую информацию и быстро получать нужную информацию.

Когда пользователь выбирает элемент в визуальном редакторе, мы отображаем ссылку на документацию по API выбранного элемента.

5. Быстрая петля обратной связи

Мы хотим, чтобы разработчики могли быстро понять, каковы результаты того или иного действия.

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

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

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

Мы обеспечиваем быстрое тестирование внутренних функций прямо в панели кода.

Резюме

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

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

Я согласен с тем, что написал Кристоф Наказава (создавший одни из самых популярных инструментов для разработчиков, такие как Jest и Yarn) в своей статье «Принципы опыта разработчиков»:

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

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

Источник