← Назад | Продолжение (Глава 6) →
(Перед вами бесплатный курс от InVision Studio «Продуктовый дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)
Над переводом работали: Федор Фоминых и Ринат Шайхутдинов.
Вы когда-нибудь наблюдали за шеф-поваром? За всемирно признанным шеф-поваром уровня Мишленовской звезды. Где бы он ни работал, на кухне, на рынке, в поле — он всегда пробует то, что готовит. Такой подход помогает ему придавать блюду тот самый неповторимый вкус, аромат и внешний вид. Приготовление пищи превращается в магию, только если шеф-повар на каждом шаге получает быструю обратную связь.
Если продуктовая команда рвется разрабатывать продукты на высшем уровне, то следует взять пример с опытных шеф-поваров, а значит начать непрерывно тестировать проекты на каждом шаге. Перед тем как схватиться за код, создайте детальный прототип и затем протестируйте его хотя бы на группе лояльных клиентов и только потом передавайте в разработку. Команды которые смогут овладеть такой практикой получат огромное преимущество перед теми, кто получает обратную связь уже после выпуска продукта. Чем раньше протестируете, тем раньше обнаружите недоработки. Соответственно, раньше сможете исправить и быстрее сможете получить новые данные для корректировки. Чем раньше наладите контакт с покупателями, тем раньше сможете адаптировать продукт под потребности рынка.
Профессиональный совет: Развивайтесь быстрее
Быстрее развиваться — значит разрабатывать больше продуктов, которые быстрее привлекают больше клиентов.
Вообще, индустрия программного обеспечения не изобрела этот принцип. Он пришёл к нам из волшебного мира анимации, когда одна маленькая не особо удачливая студия из Лос-Анжелеса смогла перетряхнуть всю огромную отрасль. Гиганты из Нью-Йорка остались далеко позади просто потому что не умели быстро получать обратную связь.
Быстро учись и двигай вперед
В начале 20 века индустрия анимации довольно успешно развивалась внутри чётко сформированных устоявшихся границ. Всё было просто — плоские персонажи похожие друг на друга разыгрывали между собой незатейливые сценки. Схема была грубая, но вполне рабочая.
А потом пришла Студия Уолта Диснея и мир анимации изменился навсегда.
Восприятие пространства как формы искусства подтолкнуло студию к экспериментам с новыми идеями. В результате они пришли к невероятному техническому прорыву. В 1928 году ребята выпустили первый звуковой мультфильм «Пароходик Вилли». В 1932 показали миру первую в истории цветную картину «Цветы и деревья». Каждое из этих событий имело большой резонанс. Но всё это стало возможным благодаря работе всей студии заложившей тогда основы процесса, который определяет богатое пространство анимации по сей день.
В 1931 году ребята из Дисней внедрили в работу так называемые «карандашные тесты» — это позволило ускорить обратную связь по своим рисункам. Они делали черновые эскизы на недорогой негативной плёнке и потом загружали их в специальное устройство с небольшим экранчиком Moviola.
Эти нововведения позволили аниматорам Диснея тщательно прорисовывать свои рисунки сразу же, а не спустя несколько месяцев. Помимо этого они смогли изучать пространственное искусство гораздо быстрее, чем в любой другой студии. После этого они научились проводить карандашные тесты для просмотра больших сцен, взаимодействия персонажей и передачи основного сюжета.
В наших маленьких студиях на Гиперион-стрит, каждый фут черновой анимации проецировался на экранчик для анализа. Потом мы несколько раз перерисовывали всё до тех пор, пока не могли сказать: «Это лучшее, что можно сделать».
— Уолт Дисней, Disney Studios
Метод прототипирования студии Уолта Диснея вывел этот процесс на новые вершины. В то время как другие студии смешили людей плоскими шутками, Дисней выводил на сцену сильные произведения с эмоционально сложными персонажами. Он заставлял зрителя плакать.
Быстрая обратная связь по всему творческому процессу, помогла Walt Disney Studios совершить огромный шаг вперёд. Это сработало для Disney, и это может сработать и для вашей команды дизайнеров. Для этого не обязательно искать на eBay аппарат с экранчиком Moviola, достаточно лишь делать высококачественные прототипы.
Прототипирование и инструменты
Прототип помогает познакомить с концепцией продукта коллег и клиентов, не погружая при этом каждого в технические нюансы. Хороший прототип выглядит как настоящий продукт, но не требует много времени на разработку.
Раньше мы писали прототипы с помощью HTML, CSS и JavaScript. Это было очень долго, но при тестировании прототип менял наше мнение о продукте. Чтобы добиться необходимой для демонстрации реалистичности мы тратили на создание прототипа больше недели. Но после первой обратной связи, мы понимали, что все нужно выбросить и переделать. Слишком много времени сгорало вхолостую.
Конечно, сейчас, в золотой век инструментов для дизайна, все это звучит диковато. Теперь мы можем быстренько приблизиться к "живому" виду без единой строчки кода.
Рынок наполнен различными инструментами прототипирования. Мы не будем здесь рассказывать обо всех — вы сами можете провести небольшое исследование и подобрать то, что лучше подойдёт именно вам. Выбирая инструменты ставьте себе следующие вопросы:
- Насколько легко здесь сосредоточиться на проблемах дизайна продукта, или придётся возиться с настройками или кодом?
- Есть ли возможность посмотреть прототип на различных устройствах, чтобы получить реалистичный опыт тестирования?
- Легко ли поделиться прототипом и провести тест, особенно, если вы работаете удаленно?
Создание прототипов в InVision и Sketch
Как вы уже догадались, мы рекомендуем создавать прототипы с помощью InVision.
Раньше, в MailChimp, мы с продуктовой командой использовали InVision для прототипирования новых приложений и функций. Это помогло нам действовать быстро и получать всю необходимую обратную связь. Мы заранее делились прототипами в InVision с командой разработчиков, получали обратную связь и синхронизировали работу всех команд.
Многие продуктовые дизайнеры перешли тогда с Photoshop на Sketch, чтобы получить возможность вести работу в нескольких артбордах одновременно.
Сохраняя в виде компонентов кнопки и формы, мы могли потом быстро собирать из них экраны. Для комфортного перехода на Sketch существует довольно много учебных материалов. Для интеграции между Sketch и InVision есть набор бесплатных плагинов Craft by InVision — они существенно сокращают процесс разработки прототипа. Вы получаете доступ к данным через API, и можете извлекать с сайта любой контент или наоборот вставлять туда классные фотки для реалистичности вашего интерфейса. А ещё с помощью Craft можно создавать прототип прямо в Sketch.
По сути, современные инструменты дизайна делают то же самое, что и карандашные тесты Disney для анимации: они сокращают время витков развития и помогают двигать работу быстрее.
Создание прототипов в Keynote
Keynote программа для презентаций от Apple. Этот софт завоевал популярность среди дизайнеров как инструмент для создания прототипов. Keynote настолько прост, что любой может тут создать прототип. В то же время программа обладает достаточным количеством функций для создания мягких анимаций и способна превратить несколько картинок в почти настоящее приложение.
Установите Keynote на свой iPhone или iPad, чтобы была возможность тестировать прототип на подходящем для него устройстве. В Keynote можно быстро создавать прототипы с помощью шаблонов пользовательского интерфейса Keynotopia для iOS и Android.
Если вам приходится много заниматься прототипированием, вам лучше создать собственный UI Кит. Тогда вам не придётся каждый раз создавать элементы с нуля и раскрашивать их под ваш бренд.
Профессиональный совет: UI-кит
Воспользуйтесь бесплатными наборами пользовательского интерфейса от InVision, чтобы быстро и легко создать прототип с высокой точностью: NOW, Chat, Do, Relate, Tethr.
Как библиотека шаблонов для быстрого прототипирования
Прототипирование можно ускорить в разы если разработать библиотеку шаблонов. У вас будет набор стандартных элементов с которыми вы сможете создавать новые интерфейсы. Комбинируйте их как детальки из LEGO.
Создание библиотеки шаблонов очень трудоемкая работа, но она окупится при каждой последующей разработке продукта или его функции.
Команда разработчиков NASDAQ серьёзно пересмотрела свой рабочий график и выделила дополнительное время на создание собственной библиотеки шаблонов после того, как смогли критически посмотреть на излишнюю раздробленность интерфейсов во всех платформах и продуктах. Работа была адская, но в итоге они смогли привести все свои продукты к единому унифицированному стилю. Использование библиотеки шаблонов для прототипирования принесло им ускорение на которое они даже не рассчитывали. Если дизайнер тратит меньше времени на проработку интерфейса, то он может потратить силы на то, чтобы сделать продукт ближе к пользовательским ожиданиям.
Такие компании, как Salesforce, IBM, Atlassian, MailChimp, Spotify и Westpac разработали подробные дизайн-системы и научились с их помощью быстро разрабатывать новые продукты.
Применяем прототипы для сбора обратной связи
Внутреннее тестирование
Когда прототип готов, можно начать собирать отзывы. Прежде чем показать прототип клиентам, поговорите со своими коллегами дизайнерами и разработчиками. Они посмотрят на интерфейс свежим взглядом и проверят соответствие ключевым целям проекта. Это хорошая возможность провести обзор дизайна.
Разверните свой прототип на соответствующих устройствах, чтобы каждый мог испытать реальный опыт. Дизайнеры часто хватают людей по офисам для импровизированных испытаний своих прототипов. Хороший фидбэк можно получить не только от дизайнеров и разработчиков, поэтому старайтесь привлекать самых разных людей. Получив отзывы вносите необходимые изменения в прототип и начинайте готовиться к тестированию на реальных клиентах.
Тестирование с клиентами
Вы многое узнаете, когда покажете покупателям прототип продукта. Местами это будет вам неприятно — все ваши идеи и предположения будут подвергаться серьёзной критике. Возникнет ощущение, что пользователи ведут против вашего дизайна настоящую войну. Инстинктивно вам захочется помочь им, подсказать как правильно пользоваться приложением, но тогда вся обратная связь нарушится. Строго придерживайтесь сценария тестирования или пригласите беспристрастного модератора.
Майкл Марголис партнер по UX-исследованиям в GV, делает очень простую работу — тестирует клиентов. Приветствует, знакомится, представляет прототип, тестирует и подводит итоги. Его сценарий на удивление прост и легко запоминается. Подробнее о его процессе читайте в книге Sprint from GV.
Проводить чересчур сложные тесты на юзабилити — пустая затея. Лучший вариант — проводить много небольших тестов и задействовать не более 5 пользователей.
— Якоб Нильсен, Nielsen Norman Group
Исследование проведенное Nielsen Norman Group показало, что большинство проблем в прототипе можно выявить тестируя всего лишь 5 клиентов. Поэтому вместо того, чтобы набирать толпу клиентов, Якоб Нильсен рекомендует провести дополнительную серию тестов уже после внесения правок.
Поиск респондентов
На самом деле, запуск теста — это самый простой этап в получении обратной связи. Вот найти участников — задачка уже посложнее. Если у вас есть клиентская база, попробуйте поискать через неё достаточно опытных пользователей.
По-настоящему преданным клиентам будет интересно познакомиться с новыми концепциями дизайна и скорее всего, они смогут дать вам достаточно адекватные ответы. Ведь для них это редкий шанс по-настоящему повлиять на процесс проектирования!
Если вы тестируете прототип нового продукта, то постарайтесь применить фантазию при наборе испытуемых. Например так, как это сделала команда GV. Они предлагают клиентам простую форму в которой надо ответить на несколько тщательно подобранных вопросов. Это помогает компании подобрать действительно подходящих людей. Они размещают ссылки с формой на Craigslist, X/Twitter, Fb и рассылают по базе пользователей. Учитывая что нам надо набрать всего лишь 5 человек высокая скорость отклика здесь не требуется.
Приготовьтесь хорошо оплатить своим клиентам потраченное время — помните, они оказывают вам большую услугу, тестируя прототип.
Как вариант, можно привлечь профессионального рекрутера, но учтите, что это может обойтись вам дороже. И рекрутёр вряд ли будет использовать автоматизированный алгоритм поиска — его придётся снабдить ценной информацией для привлечения хороших клиентов.
Когда у нас нет работающего продукта, а обратная связь нужна срочно, мы можем просто переслать прототип исследователям для тестирования. Так мы можем добыть отзывы не только от водителей в Сан-Франциско, но и со всего мира.
— Молли Никс, Uber
Удаленное модерируемое тестирование
Не все клиенты, которых вы нанимаете, будут жить рядом с вами. Поэтому заранее приготовьтесь проводить тесты удаленно.
Грегг Бернштейн, старший научный сотрудник Vox Media, разработал удобную схему проведения удалённых тестов с пользователями при помощи недорогого, доступного программного обеспечения. Всего за 99 баксов вы получаете быструю обратную связь.
Вот как он это делает:
- Грегг кидает ссылку Calendly будущему участнику теста, позволяя ему выбрать удобное время тестирования. Там же, можно запросить согласие на видеосъёмку сеанса и передать всю необходимую для пользователя информацию.
- Далее, команда дизайнеров Vox размещает прототип в InVision.
- Грегг приглашает участника в Zoom, где покупатель тестирует прототип, а Грегг ему в это время задаёт вопросы, наблюдает и делает заметки.
- Сеанс записывается с помощью ScreenFlow.
- После завершения сеанса Грегг обязательно просматривает видео, чтобы упорядочить свои записи. Затем он делится своими заметками и мыслями со своей командой разработчиков через Slack.
Это простой и быстрый и очень эффективный процесс. Удаленная команда разработчиков Vox получает обратную связь от пользователей со всей планеты, не прибегая к услугам авиаперевозчиков.
Сервис Lookback.io также помогает получить быстрый фидбэк от коллег и клиентов удаленно. У Lookback есть интеграция с InVision так что, можете тестировать прототип мобильного приложения вместе с клиентами.
В сервисе можно записывать экран клиента и изучать его взаимодействие с прототипом. Одновременно с этим можно смотреть на лицо пользователя и следить за его эмоциональным состоянием. Когда приложение готово, можно интегрировать его с Lookback, и запускать тестирование в любое время. Чтобы запустить функцию записи достаточно лишь встряхнуть телефон. Записи сеансов хранятся на центральном дашборде, чтобы дизайнерам и разработчикам было удобно их просматривать и вносить правки.
Линдси Кэмпбелл, исследователь UX в InVision, использует свой уникальный подход к удаленному получению клиентских отзывов. Она открывает Slack и там делится с преданными клиентами своими прототипами. Так она получает от них обратную связь и заодно вовлекает в процесс проектирования. Команда дизайнеров постоянно мониторит отзывы и при необходимости вносит в продукт изменения.
Прототипируем и тестируем продукт ещё лучше, ещё быстрее
Как шеф-повар пробует своё блюдо во время готовки, так и дизайнер должен чувствовать своего пользователя во время проектирования, а не тогда когда продукт будет полностью готов. Сокращая время затраченное на фидбэк мы быстрее сможем разобраться какой продукт ждёт наша аудитория.
Вот несколько советов для успешного старта:
- Когда мне начинать работу над прототипом? После того, как провели первоначальное исследование и проработали множество идей на бумаге.
- Какую часть от общего объёма приложения прототипировать? Не заморачивайтесь на прототип всего приложения целиком. Лучше проработайте те экраны, по которым у вас больше всего вопросов.
- Насколько реалистичным должен быть мой прототип? Чтобы у клиентов не возникло ощущения что они работают с прототипом.
- Когда именно прототип уже можно показывать людям? Как можно раньше и почаще. Не уходите далеко в разработку пока не получили достаточно отзывов от коллег. Покажите свой прототип клиентам после того, как вы с командой внесёте правки.
- Кому мне его показать? Для начала покажите своим дизайнерам или продуктовой команде. Обязательно узнайте мнение разработчика — ваш проект должен быть технически осуществим.
- Как мне лучше показать прототип? Лучше всего показать прототип на целевом устройстве. Сформулируйте проблему которую вам надо решить, прежде чем спрашивать мнение других людей.
Нам несказанно повезло, что мы осознаём важность тестирования. Нам несказанно повезло, что мы имеем инструменты с которыми можно легко и недорого собирать отзывы.
Пусть ваша команда научится встраивать обратную связь в любой процесс (даже удалённо) чтобы вы могли ещё быстрее создавать самые крутые продукты.
← Назад | Продолжение (Глава 6) →