Как тестирование бумажной инструкции привело к изменению части устройства. Разработка “Лайтпак 2”
Лайтпак 2 — это устройство для подсветки стены за телевизором во время его просмотра. Цвета подсветки при этом соответствуют цветам на экране. Похоже на технологию Philips Ambilight, но Лайтпак можно установить на любой телевизор.
Проект разрабатывается компанией Вуденшарк.
Я работал над проектом около двух лет назад. Когда я присоединился к команде, он был в виде работающего, почти финального, железа и предстоящей объемной работы по софту. Весь user experience был в виде концепта. Проект собрал полмиллиона $ на Кикстартере и находился в разработке около года.
Релиз долго откладывался из-за сложностей в разработке и многие начальные решения не удалось реализовать или пришлось идти на компромисс. Но в итоге на момент написания статьи (Октябрь 2019) проект вышел небольшой партией для бейкеров с Кикстартера и в производстве находится партия для всех желающих.
Не пора ли сделать инструкцию?
Где-то в середине разработки, когда еще не все железные компоненты были финализированы и окончательный UX по этой причине тоже оставался под вопросом, мы решили прикинуть на будущее, как будет выглядеть инструкция. Почему бы нет.
Лайтпак не самый простой продукт в своей сути, но при этом целью своей ставил уровень понятности “для домохозяек”. Инструкция должна была помочь в этом. Мы хотели сделать ее как у Икея — без текстовых надписей. Так как Лайтпак должен теоретически поставляться в разные страны, это позволяло не делать поддержки множества языков.
В принципе Лайтпак работает в автоматическом режиме большую часть времени. Но установка его — процесс нетривиальный. Начинается он с крепления LED-ленты на заднюю стенку телевизора и подключения ленты к самому Лайтпаку — это, пожалуй, самая сложная часть.
Что такого сложного с лентой
Лайтпак должен уметь работать с телевизорами разных размеров. При этом цвет, которым загорается каждый отдельный кусочек ленты, зависит от цвета изображения на экране в том же месте.
Для этого Лайтпак должен знать длину каждой из четырех сторон наклеенной LED-ленты. Тогда он сможет четко соотносить цвета пикселей на телевизоре с нужными светодиодами на ленте.
Когда задумывался Лайтпак, для этой цели были придуманы небольшие устройства Smart Corners. Они крепились на углы телевизора. Ленту при установке нужно было разрезать на 4 части и вставить в эти “умные уголки”. А они в свою очередь делали всю работу по определению длины каждого куска ленты. Получалась примерно такая схема:
Первые изменения концепции
1. На момент, когда мы решили тестировать инструкцию, Smart Corners еще не были до конца разработаны, также возникли сложности с креплением ленты в этих “умных уголках”. Чтобы исправить это мы планировали использовать готовые коннекторы для лент.
2. Лента поставляется в защитном силиконовом чехле. Чехол нужен, чтобы защитить ленту во время использования — вдруг кто-то захочет протереть телевизор влажной тряпкой. Но силикон плохо клеится на двусторонний скотч. Поэтому для установки ленты мы решили использовать клипсы. Клипсы крепятся на скотч к телевизору, а в них уже вставляется лента.
По плану вся система установки выглядела вот так:
Разработка инструкции
Я понимал, что, несмотря на кажущуюся простоту, инструкция Икея это результат кропотливой работы дизайнеров и десятков тестов. Я не ждал, что будет легко, но когда перешел к деталям, вопросов оказалось больше, чем хотелось бы.
Во-первых, у нас в продукте было очень много технических ограничений, и, как следствие, требований к пользователю, которые он должен соблюсти, например:
- Лента должна идти в определенном направлении по телевизору, по часовой стрелке,
- Ленту нужно разрезать, а разрезать ее можно только в определенных местах, где есть контакты. Соответственно, человек может ошибиться, тогда придется выкинуть целый кусок ленты
- В некоторых местах на контактах есть пайка. Ее надо отдельно обрезать (это особенности технологии производства ленты, мы не можем ничего с этим сделать)
- У нас был особый вид “уголка”. От него провод идет к основному устройству и его этот “уголок” нужно расположить строго в определенном углу
- У нас было по два дополнительных коннектора на каждый “уголок” для крепления ленты
- Лента состоит из кусочков по 10 см длиной. Именно через такое расстояние ее можно разрезать. Это приводило к тому, что прежде чем резать, ленту нужно примерить к телевизору
Это все нужно отразить в инструкции и добиться того, чтобы было понятно.
Вторым сложным моментом при проектировании инструкции было, то что мы сами до конца не понимали, какой порядок действий при установке ленты будет самым удобным для наших пользователей. Фактически порядок действий может быть разным. Отчасти тест и был для этого предназначен — понять, как будет удобнее людям, но отталкиваться все равно нужно было от какого-то одного решения.
В процессе дизайна родились две принципиально разные схемы инструкции:
- Концепция №1: мы досконально шаг за шагом говорим человеку что делать. Каждое измерение, каждый надрез ленты, как крепить, куда крепить.
- Концепция №2: мы говорим, что нужно получить в итоге и какие важные требования соблюсти. Как достигать цели, т.е. последовательность шагов и методы человек выбирает сам.
Концепт №1
Здесь было много-много итераций. В тест пошел примерно такой вариант (все еще очень сырой, но уже то, что можно использовать):
В такой концепции оказалось очень сложно показывать действия требующие измерений и примерки, потому что это означает работу с потенциальной ситуацией и возможное возвращение обратно, к предыдущим действиям, что выбивается из стройной последовательной логики шагов.
Концепт №2
Эта версия получилась более лаконичной, однако мы не справились без текста. Но мы ведь пока проверяем концепт, так что оставляем так.
Не только инструкция
В дополнение к инструкции была промаркирована лента. На ней нанесены стрелки для определения правильного направления, а места, где ленту надо резать, обозначены пунктиром с ножницами.
Тест
Мы решил протестировать обе концепции инструкции. Респондентов было не очень много и на каждый концепт пришлось по 4 человека, однако результат был довольно стабильный для каждой группы.
Тестирование мы проводили на прототипах; вернее это были картонные и пластиковые муляжи будущих Smart Corners. На сам процесс установки это не должно было повлиять, но респондент после установки не мог понять, заработала ли система (так как уголки ничего не соединяли на самом деле). Лента и сам Лайтпак были настоящими.
Результаты
Тесты всегда приносят много неожиданностей (их иногда называют инсайтами:). У нас с установкой с первого раза справилось 50% респондентов. Проблем хватало и в самой инструкции и в том, как мы спроектировали и реализовали систему подключения.
Вот некоторые впечатления респондентов:
- “Слишком много работы”
- “Страшно резать ленту”. Кстати, двое человек полностью срезали защитный силиконовый чехол с ленты, хотя надо было только очистить кончики
- “Напоминает советский конструктор, где надо постоянно что-то подкручивать”
- “Хочется эти штуки запаять, кажется что они не будут работать”
Если проанализировать качество дизайн-решений самого устройства, то вот что у нас получилось
Плохо:
- Система крепления, качество коннекторов, количество контактов
- Способ установки, подразумевающий предварительные измерения и резки ленты на 4 куска. Можно легко ошибиться
- Много действий по очистке контактов от силиконового чехла
Хорошо:
- Клипсы, на которые мы крепили ленту, оказались удачным решением в виду того, что они предоставляли больше свободы по тонкой настройке, перемещению ленты (а это важно)
- Людям понятно, что лента условно поделена на сегменты длинной 10 см, и понятно, где можно и где нельзя резать ленту
А что с самой инструкцией?
Несмотря на то, что мы тестировали инструкцию и респондентам об этом сообщали, людей так захватывал процесс, что в инструкцию они почти не смотрели (кто бы сомневался).
Основной и немного неожиданный вывод касаемо инструкции:
Концепция инструкции №2, где мы говорим в общих чертах, что должно получиться, работал гораздо лучше, чем тот, что был пошаговым.
Но нас беспокоило уже не это. Было понятно, что можно улучшить в инструкции, но было очевидно, что это не поможет. Решение с “умными уголками”, которое должно было упростить процесс, в текущей реализации, наоборот, все сильно усложняло.
Что же нам делать?
Новые решения
Заявленные на Кикстартере дедлайны уже прошли, время поджимало. Менять что-то и уходить на еще одну итерацию дизайна— это подписывать себе приговор. Однако, пофантазировать никто не запрещает. Итак.
“Уголки” нам нужны для определения, где заканчивается одна сторона, и начинается другая сторона телевизора. А что, если мы найдем другой способ определить это? Т.е. поставим задачу иначе, а по сути вернемся к изначальной задаче.
Зачем мы вообще режем ленту? Что если просто протянуть ее по периметру, никак не разрезая?
Я взял кусок ленты и приладил ее к телевизору на наши клипсы, соединив в одном месте с Лайтпаком. На углах лента предсказуемо некрасиво выворачивалась так, что светила не в стену, а параллельно ей.
Казалось, что эта особенность убьет на корню новое решение, но когда мы включили ленту, то результат был почти такой же, как если бы лента была направлена ровно в стену, особенно если сделать радиус загиба минимальным.
Другая важная задача, с которой нужно разобраться, прежде, чем сказать, что у нас есть новое решение — это найти способ указать Лайтпаку длину каждой стороны приклеенной ленты.
Как определять длину сторон
Радостная новость: на уровне софта мы могли автоматически определять длину всей установленной ленты. И если принять во внимание что большинство телевизоров имеет соотношение сторон 16:9 или 16:10, то мы могли автоматически рассчитывать длины сторон. Т.е. чаще всего людям вообще не надо будет настраивать углы. Это уже очень и очень хорошо, но что делать, когда ситуация не стандартная? Мы решили настраивать “углы” с помощью пульта, хотя изначально он для этого не предназначался. Таким образом задачка опускалась на чисто интерфейсный уровень.
Ручная настройка с помощью пульта
Мы рассматривали две принципиальных версии установки углов: полный ручной контроль или полуавтоматический. Не буду утомлять деталями — победил полуавтоматический, с использованием одной кнопки пульта (все как мы любим).
Здесь на видео видно как это работает
Результат
Прошла пара дней с момента, как мы тестировали инструкцию. У нас на руках было новое решение, которое сильно отличалось от начальной концепции. Оно было проще и дешевле, а главное, сокращало время на разработку (мы избавились от “уголков”), а в итоге должно было оказаться проще для пользователей. Также это решение уводило нас от идеальной и красивой картинки, что была в роликах на Кикстартере.
Мы посчитали, что это компромисс, с которым можно двигаться дальше и внесли изменения в план проекта.
В видео ниже можно посмотреть весь процесс установки, который у нас получился в итоге. По сути это видеоинструкция, которая довольно понятно объясняет процесс.
Стоит заметить, что процесс установки — это лишь короткое приключение перед использованием, в остальное время Лайтпак просто работает в автоматическом режиме, его даже не нужно включать.
Бумажную инструкцию мы конечно же тоже обновили. Установка ленты теперь занимает в ней 2 разворота.
На этом всё. Ниже слово передаю тем людям, которые уже получили свои устройства и делятся впечатлениями от установки и просмотра.
Я проектирую интерфейсы и продукты. Могу спроектировать ваш. Мой сайт http://alexandrov-design.ru
Бонус: видео процесса установки от пользователей
1. Здесь короткий обзор и у человека будто бы нет совсем проблем. Однако половину процесса установки он сделал за кадром.
2. Самый большой и подробный обзор который бьет по всем нашим проблемам, но в итоге автор остается доволен экспириенсом:
3. А здесь уже не установка, а основной экспириенс, получаемый с Лайтпаком:
Спасибо за внимание.
