[Из песочницы] Учимся логично делать прототипы
Зачем вам это? Если вы знаете как делать сайт, этот метод поможет вам убедить заказчика, почему вы предлагаете ему именно этот вариант. Если вы заказываете сайт, то сэкономите от 2 до 10 часов объяснений что вам нужно и зачем. Если вы стартапер, то вся ваша команда сможет участвовать в создании нового сайта или лэндинга. Тот самый случай, когда одна голова хорошо, а команда лучше. Если вы учите стартаперов, то сможете помочь им выглянуть из позиции «я знаю как надо» и без сопротивления подвести их к началам CusDev-a. Почему я всё это пишу? (При дефиците времени переходите сразу к пункту «Методика») Мне довелось последние три года активно и много общаться с веб-студиями, стартап-акселераторами, самими стартаперами, дизайнерами, программистами и владельцами бизнеса.Кроме наличия рук и ног общее у них одно — рано или поздно всем им нужно заказать или сделать сайт.Главная проблема при этом заключается в том, что представления о его внешнем виде у заказчика и исполнителя всегда сильно отличаются. Даже если функционал они представляют себе относительно одинаково.Методика, данная ниже, не принадлежит мне. Я услышал о ней на семинаре Ольги Павловой из Питерской sobakapavlova, которая в свою очередь скомпилировала её из собственного опыта и книги Алана Купера «Психбольница в руках пациентов».Моих заслуг здесь лишь переупаковывание семинара в более короткий и плотный формат, для чего я его провёл раз двадцать перед реальными слушателями.Поводом же к написанию этой статьи послужило то, что за последний месяц после семинара четыре человека попросили меня подробно и точно описать последовательность данной методологии и взялись проводить аналогичные семинары ещё до того, как я раскачался на написание статьи. Предполагая всё больше вопросов в будущем, я решил что проще будет давать ссылку на Хабр.
Методика «Логичный прототип» Минимально необходимое число участников двое. Самые лучшие результаты показывали группы из четырёх человек.Идеальное количество групп две-три. Ни в коем случае не более четырёх групп.Если вам «повезло» учить человек 60, разбейте их на 4 группы по 15 человек. Негативным следствием будет то, что минимум половина участников не будет участвовать непосредственно в работе.Этап 1. Идея Дайте задание участникам групп придумать любую идею бизнеса, для которого нужен сайт. Идея должна касаться массового b2c-рынка и быть хоть сколько-то интересной участникам группы.Имейте наготове 3–4 идеи для групп, которые вообще не готовы включать воображение (из моей практики это чаще всего студенты). Обычные варианты «Турфирма», «Заказ Деда Мороза», «Уборка помещений», «Магазин гаджетов». Лучше не принимать особенно оригинальные идеи, иначе оригинальность затмит сам процесс обучения. (В качестве примера, на одном из семинаров идею сайта для онлайн-экзорцизма я попросил перевести в сайт для заказа молитв онлайн. Делайте первую идею бизнеса проще, понятней и для более массовых рынков.)Время этапа пять минут.После создания идеи пусть каждая группа в двух-трёх предложениях опишет её, а вы запишете их все на флипчарте.Этап 2. Персонаж Попросите группы придумать персонажа, который может стать потенциальным покупателем на придуманном ими сайте.Персонаж не должен быть alter ego одного из участников группы и не должен быть списан с какого-то знакомого. Также это не обязан быть «идеальный средний клиент». Просто кто-то, кому может понадобиться ваш товар или услуга.В каждой группе один человек должен взять бумагу и ручку и, обсудив с коллегами, записать о персонаже следующие данные:
1. Имя.2. Возраст (точный, не от 30 до 35, а, например, 32 года).3. Место работы (включая город и сферу деятельности компании, в идеале — название компании).4. Должность персонажа и зарплату, получаемую им на руки.5. Семейное положение (жена/муж — имя, возраст, зарплата, дети — пол/возраст).6. Место проживания. Квартира/дом. Количество комнат/метраж. Конкретный город, район, идеально — точный адрес. Примерная стоимость. В собственности или в аренде. Если в аренде, то сколько стоит в месяц. Если в собственности, то выкуплена полностью или в ипотеке. Если в ипотеке, сколько платит в месяц и сколько лет осталось платить.7. Автомобиль. Точная марка, цвет и год выпуска. Купил новым или подержанным. Если в кредит, то выплатил полностью или еще выплачивает кредит. Если кредит, то сколько платит за него в месяц и сколько ещё осталось платить.То же самое про автомобиль супруга, если есть.8. Когда, где и с кем был последний раз в отпуске. Сколько денег потратил. Что понравилось/не понравилось в отпуске больше всего.9. Как проводит выходные. Как хотел бы их проводить.10. Как проводит вечера. Если регулярно смотрит телевизор, то какие каналы и программы предпочитает.11. Любимый алкоголь.12. Любимое блюдо.13. Занимается ли спортом. Если да, то каким и как часто.14. Играет ли в компьютерные игры, если да, то в какие и по сколько в неделю.
Вопросы можно дополнить, желательно чтобы их было не меньше 10 и не больше 20. После ответов на эти вопросы персонаж должен представляться зримо и выпукло. Например, студенты обожают придумать сверстника-мажора, обладателя ночного клуба с доходом от 500 000 рублей, выездом на работу 2–3 раза в неделю и беспорядочными половыми связями. Особенно занятно, когда они до этого решили, что будут делать сайт про эконом-туры по Золотому кольцу.
Этап занимает пятнадцать минут, но может растянуться до двадцати, если в группе много людей и они не могут договориться по какому-нибудь пункту. В таком случае предложите им создать два персонажа.В конце этапа каждая группа зачитывает описание персонажа.Попросите другие группы находить противоречия в описании и делайте это сами. Например, очень дорогой автомобиль в собственности у клерка средней руки должен съедать изрядную долю его доходов, которых в таком случае не останется на дорогие туры.
Этап 3. Интернет Дайте группам пять минут на описание того с каких устройств в какое время и на каких сайтах их персонаж бывает регулярно. Должны быть описаны конкретные устройства (если iPhone, то 4S или 5S, если Android, то Samsung Galaxy S5 mini или Nexus 4, то же про планшеты и ноутбуки). Сайты, посещаемые на работе и из дома должны хоть сколько-то различаться. Чтение почты и общение в мессенджерах тоже относится к использованию интернета. Уточните в какой соцсети он проводит больше всего времени и сколько у него в ней друзей.Группы читают вслух друг другу результаты третьего этапа.Этап 4. Ситуация За следующие пять минут группы должны придумать две ситуации в офлайне, при которых у персонажа возникнет в потребность в товаре или услуге, предлагаемой вашим сайтом. Важно, что в результате этой ситуации он ещё не должен узнать адрес вашего сайта и желательно вообще ещё не выйти в интернет.Ситуации зачитываются группами друг другу.Этап 5. Поисковый запрос и заголовок сайта Группа должна придумать поисковый запрос, который персонаж использует в поисковой системе в двух своих ситуациях. Поисковик пусть выбирают сами.После этого предложите группе ввести в выбранной поисковой системе придуманные запросы и посмотреть на результат выдачи.После этого группа должна придумать заголовок сниппета, который для их сайта будет показывать поисковик после поискового запроса. Предложите им придумать заголовок лучше тех, которые они увидели при вводе придуманного запроса в реальной выдаче поисковика.Бывает что для обеих ситуаций запрос и заголовок одинаковы. Это нормально.Запросы и заголовки зачитываются группами друг другу.Время на придумывание пять минут.Этап 6. Вопросы Это самый важный этап. Ради него всё и затевалось.При нажатии на ссылку персонаж попадает на выдуманный сайт команды.Спросите слушателей, какой вопрос возникает первым у человека, оказавшегося на любом новом сайте. Пусть дадут 3–5 ответов.Верным вопросом будет любой из вариантов «Что это? «Это и будет первым вопросом.Далее персонаж будет кликать по сайту или уйдёт с него.Объясните аудитории, что всё поведение человека на сайте может быть интерпретировано как вопросы «Что это?», «Сколько стоит?», «Есть ли доставка?», «Какие гарантии?» и т.д. Предложите группе описать последовательность вопросов (не давая на них пока ответов), в соответствии с которой персонаж будет пользоваться сайтом.Вопросов должно быть от 8 до 15.Займёт это пятнадцать-двадцать минут.Группа должна записать вопросы по порядку.После этого этапа попросите группы зачитать вопросы.Следите, чтобы первым вопросом был «Что это? «Если в дальнейшей последовательности вопросов вы видите нелогичность, не надо её исправлять. Время для этого ещё не пришло.После того как группы закончат зачитывать список вопросов, отметьте что среди них также обязательно должны быть вопросы «Сколько стоит?», «Почему я должен вам доверять?» и после отправки заказа или совершения покупки «Что делать дальше? «Если в списке нет этих вопросов, попросите группу добавить их.Объясните что недовольство ответами сайта на вопросы «Что это?», «Сколько стоит?» и «Почему я должен вам доверять?» чаще всего является причиной ухода с сайта. Пусть группа обратит на эти вопросы на следующем этапе особое внимание.
Следите за тем, чтобы вопросы были полностью сформулированы именно в виде вопросов.«Цена» — это вообще не вопрос. «Сколько?» — неполный вопрос. Верный вариант вопроса здесь «Сколько стоит ваш товар? «Отзывы клиентов» — это тоже не вопрос. Должен быть вопрос «Почему я могу вам доверять?» или «Кто ещё пользовался вашими услугами?»
Этап 7. Прототип После уточнения списка вопросов раздайте группам по 2 листа от флипчарта и по два маркера разных цветов.Предложите группе набросать на бумаге прототип сайта, где каждый элемент сайта должен отвечать на вопрос из предыдущего этапа. Элементами сайта считаются текст, кнопка, форма для ввода информации, картинка, видео, слайдер, etc.Это должен быть сайт-одностраничник, даже если он будет перегружен информацией и логичней было бы разбить его на 5–7 страниц. Элементы сайта нужно нарисовать схематично.Важно чтобы элементы сайта располагались на нём сверху вниз именно в той последовательности, в которой составлены вопросы этапа 6. Наверняка часть команд будет менять элементы местами, обращайте их внимание на это на этапе демонстрации прототипа. Чаще всего это означает, что последовательность вопросов была составлена неверно. Настаивайте на том, чтобы группы расположили элементы в соответствии с последовательностью вопросов. Если они сделали ошибку, пусть это будет наглядно.Этап 7 оканчивается демонстрацией прототипа.Элементы, которые не отвечают ни на один из перечисленных вопросов этапа 6, безжалостно вымарываются из прототипа.
Лист с прототипом вешается на флипчарт, к нему выходит один из участников команды.Второй участник команды кратко напоминает о том для какого бизнеса они делали сайт, описывает персонажа и ситуацию, в которой он очутился.После чего он зачитывает вопросы по порядку, после каждого вопроса второй участник команды молча указывает на элемент сайта, который является ответом на вопрос.Если кто-то из команды пытается голосом добавить описание пункта-ответа (элемента сайта), обрывайте его объяснения, пояснив что обычному посетителю сайта никто голосом ничего рассказать сверх изображённого на сайте не сможет.Остальные команды ловят нестыковки между персонажем, ситуацией и прототипом.Этап занимает пятнадцать минут.
Причина почему не должно быть больше 4 команд. Три чужих прототипа команды посмотреть могут, начиная с 4-го гарантированно перестанут слушать. Потому же 2–3 команды являются куда более эффективным вариантом обучения.
Этап 8. Новая угроза Это были только азы логичного прототипирования.Теперь следует сделать одно из двух.Либо дать всем командам одну и ту же задачу (если у них нет своих).Либо дать командам прототипировать реальный проект соседей (хорошо работает у стартаперов). В таком случае нужно добавить 5 минут на объяснение сути проекта.До третьего прогона команды не должны делать прототип собственного проекта.Вы даёте двадцать минут на то, чтобы группы прошли для нового проекта все этапы: идея—персонаж — где и сколько бывает в интернете — оффлайн-ситуация — поисковый запрос и заголовок сниппета — последовательность вопросов — нарисовать прототип.Проекты представляют нарисованные прототипы друг другу.Этап 9. Домашнее задание Предложите проектам набросать по предложенной выше схеме прототип своего проекта. Даже в случае, если у них уже есть готовый и работающий сайт, прототип зачастую будет весьма сильно отличаться от действующего сайта.Конечно, на этом этапе нужно нарисовать несколько страниц своего сайта, не пытаясь запихнуть их все в одну.Можно продолжить семинар и разобрать прототипы собственных проектов очно.Но я не рекомендую это делать. Собственный проект вызывает гораздо больше споров и увязания в деталях и занимает гораздо больше времени. А к этому моменту команды уже 2–2,5 часа делали примерно одно и то же и устали.Время, указанное для каждого этапа, — это время самостоятельной работы команды с заданием. Время на презентацию результатов этапа и исправления сюда не включено.
Выводы Нужно объяснить командам, что полноценная методика предполагает создание 2–3 персонажей и от 3 до 10 ситуаций для каждого.Для каждой ситуации отдельного персонажа нужно составить свою последовательность вопросов. Вопросы в разных ситуациях могут быть одинаковые, разные или составлены в другой последовательности.Если вопрос встречается более чем в 50% ситуаций, то ответ на него обязательно должен присутствовать на страницах сайта.Если от 20 до 40% последовательностей содержат вопрос, то рекомендую сделать для включающей его последовательности отдельный лэндинг.Если вопрос встречается менее чем в 10% последовательностей, то чаще всего его можно игнорировать, если вы не сайт Сбербанка, конечно.Несмотря на то, что работа выглядит как кропотливая и довольно занудная, эффект от результата до сих пор меня впечатляет.Команда внезапно начинает понимать, почему тот или иной элемент должен быть на сайте или что можно безболезненно с сайта убрать, хотя казалось, что элемент здесь на своём месте.Создание прототипа и структура сайта перестаёт быть rocket science для бухгалтера, программиста или продажника. Насчёт управления государством я всё ещё сомневаюсь, но уж прототип сайта кухарка точно может сделать, зная эту методику, причём не особенно отрываясь от готовки.А первые четыре этапа мягко вынуждают команду влезть в чужую шкуру и из неё посмотреть на окружающий мир.Вам нужны будут и интуиция, и чувство прекрасного, и АВ-тесты, и многое другое, чтобы сделать качественный сайт. Но для понимания его структуры вам достаточно логики и здравого смысла.Если же это вообще первая версия вашего сайта, то обычно хватает последовательности вопросов, структуры и подходящего Wordpress-шаблона для запуска.Хорошее обучение по моему мнению должно снимать барьеры. Эта методика снимает барьер непонимания как должен выглядеть сайт и почему.
