Как я делал продукт ТРДЗ: плакат «законы юзабилити и психологии в дизайне». От идеи до реализации

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

Тут будет вся внутренняя кухня проекта, включая макеты, прототипы, источники, ссылки и ресурсы – все как вы любите

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

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

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

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

Идея ведь могла бы быть вполне работоспособной, поскольку физические карточки – это вполне практично и юзабельно в обычной жизни. В процессе работы я частенько сталкивался со следующей проблемой: проектируешь вот ты новый интерфейс, потом показываешь команде и тебе говорят — «уважаемый, а почему именно так?». Это может касаться твоих решений во многом: начиная с самого начала проектирования интерфейсов и расположения лэйаутов, заканчивая расположением/группировкой конкретных кнопок и порядком и количеством размещения информации на странице.

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

После многочисленных просьб коллег скинуть им мои я наработки, я понял что дело набирает серьезные обороты и решил прибегнуть к помощи своего друга – воспитанника Британской Высшей Школы Дизайна. Сергей Жигарев, с которым мы знакомы уже достаточно давно с ходу предложил поменять формат и сделать вместо отдельных карточек целый плакат с законами.

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

Идея плаката была тоже интересной, потому как в совокупности это было похоже на MVP таблицы Менделеева. Если что, я ни в коем случае не претендую на гениальность и незаурядность ученых, лишь сравниваю создаваемую прдуктом атмосферу. Так вот, висевший в комнате/офисе плакат, над рабочим местом, мог бы создавать рабочую атмосферу и придавать дизайнеру чувство причастности к сфере, а окружающим зевакам – состояние недоумения и восхищения...мол «Фига себе, да она действительно сечет в дизайне, вон у нее даже законы какие-то непонятные висят».

Тогда и появились первые макеты будущего плаката и важно было определиться с размером. Слишком большой плакат сложно бы воспринимался вблиз, а слишком маленький тяжело было читать издалека. В итоге наш первый прототип имел размеры 70*100 см и на практике оказался прям космическим огромным.

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

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

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

Выбор цвета стал следующим шагом наших поисков. Было предложение сделать плакат в черном и монохромном цвете, при том монохром мог бы печататься на кальке. Мы протестили эту идею и она оказалась достаточно работоспособной, ведь калька имела супер способность – подстраиваться под среду, потому как имеет мутно-прозрачную структуру. Этот вариант мы временно отложили в сторону, поскольку калька быстро рвалась и могла вовсе не доехать до своего покупателя

Было рассмотрено несколько вариантов темной тематики, и мы остановились на одном, набравшем наибольшее количество голосов в Instagram проекта, ставшей таковой по совместительству с моей личной страничкой.

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

Необходимо было оживить каждую из 18 карточек и я решил, что лучшим выходом будет показать раскадровку и подробное описание каждой карточки, чтобы убрать лишние разногласия между мной и реализатором данной идеи. Кстати, им стал дизайнер Денис Спильный, который был найден благодаря моему Facebook в день публикации запроса.

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

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

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

План был элементарно простой:

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

Как работает AR можно посмотреть тут

Вы наверняка слышали про сервисный дизайн. Говоря о CX и нашем продукте путь пользователя начинается задолго до того, как человек повесит плакат на стену и начнем им пользоваться. В качестве примера приведу Apple. Ощущения при покупке / просмотр новой рекламы / ожидание очередной презентации / распаковка продукта и отмирание пленочки / запах новой коробочки / первый запуск устройства… увлекся, простите.

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

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

К тому же я не хотел работать с курьерами лично, заполнять накладные, ходить на почту, созваниваться с клиентами и курьерами и менеджерить весь этот процесс вручную, времени нет. Решением для меня стал – маркетплейс OZON, потому что они, в отличие от Wildberries, больше специализируются на печатной и типографической продукции.

Процесс выпуска продукта, заключения договора, оформления ЭДО, ИП и взаимодействия с OZON я подробно опишу в другой статье при необходимости, просто попросите об этом в комментариях. Кстати, вот этот мужик очень хорошо помог на этапах оформления документов на поставку, у него грамотный YouTube контент, спасибо ему

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

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

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

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

Делать сайт для проекта я не захотел, ибо долго, дорого и зачем, хотя если сделать на Tilda… в общем, решено было эксплуатировать мой любимый Notion на полную катушку. А что надо-то? Контакты указать, способы связи, инструкцию по AR…кажется что-то еще забыл, ах да, было бы неплохо расшифровать все законы, указав детали и процесс их открытия.

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

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

Сейчас я получаю первые отзывы в социальные сети о своем продукте и это очень увлекательный процесс. Сообщество дизайнеров достаточно тесное, потому люди, увидевшие мой плакат где-то в социальных сетях, с восторгом пишут в Direct «ВАУ, видела твой плакат в офисе зеленого банка».

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

Так же есть теория, что, когда продукт наберёт свою популярность и плакаты станут узнаваемы, есть возможность выйти на NFT c отдельными анимациями и иллюстрациями на каждую карточку. При том эти карточки, а их ровно 18 шт. будут иметь ограниченную эмиссию, т.е карточка №18 будет иметь тираж 18 невзаимозаменяемых токенов, №17 — 17 токенов, карточка №1 – всего один токен и при том самый дорогой. Если у вас есть экспертиза в данном направлении, прошу связаться со мной.

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

Кстати, вот ссылка на сам плакат, пока не забыл

https://www.ozon.ru/context/detail/id/264731476/

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