У вас включен AdBlock или иной блокировщик рекламы.

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

Спасибо за понимание.

В другой раз
DevGang блог о програмировании
Авторизоваться

Прототипирование с Angular

С тех пор как я присоединился к Google год назад, я каждый день использую Angular для создания реалистичных передовых прототипов. Я использовал эти прототипы для быстрой проверки идей с реальными пользователями. Это помогло моей команде выполнить итерации дешево и минимизировать объем переделок. Я хотел поделиться своим опытом в надежде побудить больше дизайнеров и разработчиков принять Angular для своих нужд создания прототипов.

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

Поиск прототипа для Greentea CRM

Angular для прототипирования?

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

  1. Многоразовый код Greentea CRM был построен с использованием Angular в качестве базовой структуры. Использование Angular для прототипирования означало, что наши инженеры могли повторно использовать мой код в производственном приложении.
  2. Библиотека готовых компонентов С Angular Material я смог использовать готовые компоненты пользовательского интерфейса, такие как этот элемент управления автозаполнением формы, без необходимости писать их с нуля.
  3. Сообщество Я лично многому научился у сообщества Angular, посещая местные встречи и читая сообщения в блогах от разработчиков.

Поддельный поиск с реальными данными

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

Используйте Google Sheets в качестве базы данных

Я создал электронную таблицу и заполнил ее строками результатов поиска. Преимущество использования Sheets состояло в том, что он предоставил мне и моей команде удобный интерфейс для заполнения данных. Затем с помощью некоторого пользовательского скрипта приложений я перенес все изменения в базу данных Firebase Realtime (пошаговое руководство здесь) и наконец, я подключил компонент автозаполнения Material для чтения из базы данных с AngularFire.

Результаты поиска предоставлены Google Sheets

Размещенный прототип для пользовательского тестирования

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

Удаленное тестирование пользователей с использованием прототипа Firebase

Измерение взаимодействия

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

Визуализация поисковых запросов в Google Analytics

Заключение

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

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

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

Перевод статьи: Prototyping with Angular
Источник: medium.com

#Angular

Присоеденяйся в тусовку

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

Попробовать