{"id":5194,"title":"7 \u043b\u0435\u0433\u0430\u043b\u044c\u043d\u044b\u0445 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0440\u043e\u043a\u0441\u0438 \u0432 \u0431\u0438\u0437\u043d\u0435\u0441\u0435","url":"\/redirect?component=advertising&id=5194&url=http:\/\/vc.ru\/promo\/274263&hash=ce0253d261c6d315cebe8391d8d29b344b211b21bbc10cef577f9fef17b02f3c","isPaidAndBannersEnabled":false}
Дизайн
Евгений Егоров

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

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

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

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

Как пришла идея создания плаката юзабилити

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

  • Закон Фиттса
  • Закон Хика
  • Закон Якоба Нильсена

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

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

Тогда я подумал, хм…может сделать карточки и напечатать их для себя

От формата карточек к плакату

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

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

Первые прототипы проекта ТРДЗ

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

Первоначально я был против плаката и пытался настоять все-таки на карточках, ибо они более применимы

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

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

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

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

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

Это название было придумано путем совместных с Сергеем потугов на основе практического применения принципа синтетического воображения

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

Поиск структуры и цветового решения

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

Мы начали тестировать темную тему, ставшей модной примерно 10 лет назад…зачем отставать от тренда – подумали мы

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

AR в проекте или как внести в продукт чуточку магии

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

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

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

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

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

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

  • Человек купил плакат
  • Навел на QR код
  • Запустил маску
  • Получил оргазм от шевеления иллюстраций на стене
  • Снял сторис и отметил аккаунт создателя

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

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

Клиентский опыт начинается до покупки. Почему я выбрал OZON (не реклама)

Вы наверняка слышали про сервисный дизайн. Говоря о 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, ибо высокий рейтинг и ваши отзывы сильно влияют на репутацию меня, как продавца, соответственно и на отображение товара в поисковой выдаче. Спасибо

{ "author_name": "Евгений Егоров", "author_type": "self", "tags": [], "comments": 22, "likes": 52, "favorites": 139, "is_advertisement": false, "subsite_label": "design", "id": 253144, "is_wide": true, "is_ugc": true, "date": "Thu, 03 Jun 2021 18:18:56 +0300", "is_special": false }
0
22 комментария
Популярные
По порядку
Написать комментарий...
0

Нужны купоны для читателей VC

Ответить
2

Хорошая идея) Даю 10% скидку. На скрине обозначил, как пользоваться 😎
https://www.ozon.ru/product/plakat-zakony-yuzabiliti-i-psihologii-v-dizayne-264736666/

Ответить
0

Даже не знаю кто кого из нас больше забайтил =D

Ответить
0

Не знаю, слишком стар я, иль молод чересчур, а что значит «забайтил»? 😀

Ответить
0

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

Ответить
0

Не заставляю) но на всякий случай скажу, что лимит на покупку с 10% скидкой, 5 плакатов в день)

Кажется, теперь я достиг мастерства в забайчивании) Спасибо за урок 😎

Ответить
–1

развел, значит )))
а почему закон прегнантности называется именно так, а не иначе?

Ответить
0

@Инспектор приструните пожалуйста сей бешенный аккаунт. А то вы ему под 300 минусов, честно заслуженных в теме про альфа банк списали и немало людей во временный бан отправили, а он теперь бегает и развлекается:

Ответить
1

Приятненько, что автор этого продукта коллега🥳 рад за тебя очень)

Ответить
1

Спасибо) благодарю за обратную связь

Ответить
1

Прикольно)

Ответить
1

Очень даже симпатично) 

Ответить
1

Женя, молодец)

Ответить
1

Фон Ресторф — женщина, поэтому «Закон фон Ресторф». «Фон» тут со строчной, но если не хочется начинать имя закона не с заглавной, можно полное имя указать, Хедвиг.
В 4 принципе лишняя запятая.
А так весьма симпатично :)

Ответить
0

Благодарю, от этого ценность первого издания должна только возрасти) во втором обязательно внесу правки, спасибо

Ответить
–2

фигня какая то

Ответить
0

Очень уж похоже на плакат ребят из Mish,  который они раздавали на ДВ в Суздале.

Ответить
0

Здорово, только наши первые прототипы были уже в феврале) а дизайн выходные состоялись в апреле)

Ответить
Читать все 22 комментария
Каршеринги, Avito и другие не смогут использовать сканы документов клиентов по новым требованиям к сбору биометрии — «Ъ» Статьи редакции

Новые правила запретят сбор биометрии компаниям с иностранной долей больше 49% и капиталом менее 500 млн рублей.

Из офиса к гончарному кругу: как уволиться из IT-компании и стать кумиром гончаров со всего мира

Многое в жизни Александра Бердин-Лазурского произошло по воле случая: преподаватель сопромата решил быть дизайнером и за один вечер под пиво изготовил себе портфолио. Потом за годы приятной работы вырос до арт-директора и... выгорел. Тогда он понял, чем на самом деле хочет заниматься и как на этом зарабатывать.

Старая добрая дискета: так могли выглядеть популярные соцсети и сервисы в девяностых Статьи редакции

Чего только стоит Spotify с интерфейсом Winamp.

На рынке — бум семейного банкинга. Как дети учатся копить и инвестировать и какие инструменты им помогают

За один только 2020 год на Западе запустились сразу несколько ярких банковских продуктов для детей. Например, британский Starling объявил о выпуске детского счета Kite, JPMorgan Chase представил продукт для финансовой грамотности детей Chase First Banking, а Apple запустил Cash Family.

Отдам читателям VC.RU бесплатно SaaS и другие сервисы с исходниками

Друзья привет! В своё время покупал для личного использования разные сервисы. Теперь решил раздать, может кому-нибудь будут полезны.

Android или iOS: рейтинг популярных смартфонов у клиентов Yota

Huawei и Xiaomi потеснили Apple в пятерке популярных смартфонов у пользователей Yota, который занял четвертое место, не удержав “бронзу” прошлого года.

«Яндекс.Маркет» начал продавать товары в кредит Статьи редакции

Первым партнёром сервиса стал «Тинькофф».

Коллекция впечатлений: маршруты для наблюдения за дикой природой
фотоархив Департамента природопользования и охраны окружающей среды города Москвы/Сергей Беляев. Материал: Ольга Кувыкина

Трели соловьев и певчих дроздов можно послушать в лесопарковой зоне Кузьминки-Люблино. Здесь же недавно в кадр фотолюбителей попала желтая трясогузка, которая включена в Красную книгу Москвы. Среди обитателей – лазоревки, зяблики, зарянки и большие синицы. Из хищных птиц гнездятся перепелятники, пустельги, ушастые совы и неясыти.

Эксперимент: выбрать квартиру в другом городе с помощью 3D-тура

«Ирония судьбы» научила нас: все новые дома похожи друг на друга — а значит, имея представление о новостройках в одном городе, можно сделать вывод и о домах в другом. Для этого теперь даже не нужен билет на поезд или самолёт: прогуляться по квартирам в новостройках можно с 3D-туром на сайте «Циан».

Автор книги «Стив Джобс» напишет биографию Илона Маска Статьи редакции

Дата выхода книги пока неизвестна.

ИП на упрощенке 6%: кому доверить расчет налога?

Cравним и оценим, кому стоит доверить расчет УСН

null