Дизайн Редакция vc.ru
3 641

Проектирование и эмоции — опыт создания сайтов на примере дизайн-студии SOIKA

Студия дизайна SOIKA при помощи платформы Spark поделилась собственным опытом реализации проектов. С разрешения авторов ЦП публикует полный текст статьи. 

Проектирование — основа основ

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

Зачем создавать прототип? Мы уже 200-й интернет-магазин делаем. Они все похожи

Лендинг — он и есть лендинг. Шапка, преимущества, скачать и все.

Стандартный корпоративный сайт. О компании, проекты, и т.д. Главную сделаем как у большинства, такова специфика.

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

Проектирование необходимо и является основой, каркасом последующей разработки продукта. Оно будет железобетонным обоснованием вашей работы и видения для вашего клиента. На прототипе проходит тестирование поведения пользователя на вашем продукте, проверяется сценарий повествования (особенно это важно для landing page), оттачивается общая теория и концепция. Если игнорировать этот этап, работа будет безосновательной и с вероятными ошибками.

Еще одна проблема, с которой сталкиваются при проектировании, — отсутствие понимания своего пользователя как эмоционального субъекта. Сейчас объясним, почему.

Для чего нужны эмоции

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

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

  • грязные и непривлекательные виды улиц города;
  • толкучка и давка в метро;
  • проблемы на работе, начальник — сволота; проблемы дома;
  • новости, политика, спорт;
  • и многое другое. 

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

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

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

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

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

Все это прекрасно позволяет донести до вашего клиента смысл вашего продукта, вызвать обратную реакцию, ту самую, которую вы задумали. Отличный пример такого подхода — сайт Warsaw Rising 1944.

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

Как мы это делаем в нашей студии

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

1. Мы не используем бумажное проектирование. Оно больше не работает.

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

2. Мы думаем о среде и средствах использования.

Каждый сайт или продукт живет и используется человеком в какой то среде. Это значит, что не все сайты и приложения люди смотрят дома, сидя за компьютером в теплых тапочках и с кружкой чая. Рассмотрим пару примеров:

  • Сайт с вечерним или ночным трафиком посещаемости. Если мы знаем, что основной поток пользователей на сайт приходится на вечернее или на ночное время суток — мы стараемся в дизайне избегать светлых и ярких тонов, так как это будет раздражать людей и их зрение при прочтении контента сайта в комнате с приглушенным светом. Или даже с выключенном светом. 
  • Новостной блог для студентов. Мы рассчитываем, что основной трафик посещаемости попадает на то время, когда студенты свободны, и скорее всего находятся в транспорте по пути в учебное заведение или домой. Они устали или не выспались. Для этого мы рассчитываем управление на мобильной версии сайта так, чтобы им было удобно управлять одной рукой, и контент имел хорошую читабельность. Ведь зачастую в общественном транспорте одной рукой люди держатся за что-то, а другой листают новостную ленту. 

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

3. Микротесты.

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

4. Портреты пользователей (ЦА).

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

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

#Дизайн #проекты #эмоциональный_дизайн #проектирование

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Редакция vc.ru", "author_type": "self", "tags": ["\u044d\u043c\u043e\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0439_\u0434\u0438\u0437\u0430\u0439\u043d","\u043f\u0440\u043e\u0435\u043a\u0442\u044b","\u043f\u0440\u043e\u0435\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 18, "likes": 12, "favorites": 1, "is_advertisement": false, "subsite_label": "design", "id": 5693, "is_wide": true, "is_ugc": true, "date": "Thu, 13 Nov 2014 13:32:00 +0300" }
{ "id": 5693, "author_id": 2, "diff_limit": 1000, "urls": {"diff":"\/comments\/5693\/get","add":"\/comments\/5693\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/5693"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

18 комментариев 18 комм.

Популярные

По порядку

Написать комментарий...

–1

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

Ручка по бумаге рисует и будет рисовать. От этого никуда не денешься. Это быстрее и нагляднее. Но в момент набрасывание эскиза. К прототипу и тестированию мы такие эскизы в бумажном варианте переводим в нужный формат )

Ответить
2

Андрей, что за бред? бумажное прототипирование делается для отработки UX, а не для клиента. Это ваш внутренний продукт.

Ответить
1

Читайте внимательно. Бумажное проектирование не допускается к тестированию на пользователях

Ответить
3

В плеере играет музыка. Открыл сайт Warsaw Rising 1944. Услышал какие-то звуки, мешающие слушать музыку. Закрыл сайт.

Это к слову о музыке на сайте. 90% людей сделают так же. Если делать музыкальное сопровождение на сайте, то хотя бы дать пользователю право выбора: не выключить, если раздражает, а включить, если нужно. Да и представьте музыкальное сопровождение на корпоративном сайте, например. Считаю пример неудачным, т.к. сайт относится к очень узкой специфике.

Ответить
1

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

P.S. В правом углу звук можно отключить)

Ответить
0

похож*

Люди, тут нельзя удалять/редактировать свои комментарии?

Ответить

0

P.S. В правом углу звук можно отключить)

именно к этому я и писал: не выключить, если раздражает, а включить, если нужно

Ответить
0

100% истиная правда! Пример не в кассу.

Ответить
0

Речь и идет об инструментах, которые влияют на подачу. Мы нигде не писали, что их надо использовать в каждом сайте как 100% табу. К каждому проекту свой подход

Ответить
1

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

Ответить
1

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

Ответить

0

Примеров из личного опыта будем добавлять обязательно. Спасибо за пожелания!

Ответить
0

Вы две трети этой статьи можете разместить у себя на сайте, и назвать это "Как мы работаем". Ну то-есть вы классные, это понятно, но вместо этого лучше бы вы больше полезной информации доносили, а не о себе рассказывали.

Ответить
0

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

Ответить
0

Высасонное из пальца обоснование лишней соточки в проекте, только для того, чтобы выстроить якобы "взрослую" работу.

В большинстве случаев это лишь элемент показушности. Для того, чтобы сделать крепкий рабочий интерфейс, надо просто не допускать ошибок, а для этого достаточно быть специалистом, а не рисовальщиком, коими являются 80% людей, называющих себя дизайнерами. Именно они и придумали новый вид полЛюдей - проектировщиков.

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

Эмоции. Ну да. Интересно, как все вышеописанное регулируется, если к монитору подошел не выспавшийся чувак с огурцом в руках, дерьмом в голове после вчерашней попойки и куском чего-то на ноге, случайно пойманого 10 секунд назад? Опять какой-то пук в пространство и ничего по существу.

"Если мы знаем, что основной поток пользователей на сайт приходится на вечернее или на ночное время суток" это как так, если он еще не создан?

"... мы стараемся в дизайне избегать светлых и ярких тонов" - по таким размышлениям, читать siliconrus.com в вечернее время не реально ... Все быстро раздражаемся и расходимся!!! У меня так вообще света нет, кроме мониторного.

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

Короче какая-то невнятная тягомотина высосанная. Да еще и не раскрытая толком.

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

Ну да, а использование интерактивных программных продуктов прям в 1000 раз больше смысла и эффекта доносят при тестировании на потенциальных пользователях... Вы сами то читайте что пишите. Клиенты давно взрослее, чем вам кажеться. Слава яйцам прошло то время непонятных словечков, которые завораживали клиента и повышали лояльность. Какие потенциальные пользователи? Клиент в купе с проектировщиком? Они чтоли потенциальные клиенты? Или вы вместо сайта сначала прототипы вешаете, а потом динамику отслеживаете?

Что за ужас? Ну да прототип и другие интерактивные программы могут помочь не сбиться при проектировки и более понятно донести мысль того самого проектировщика до клиента. Но не более! Не надо выдумывать панацею и выдавать ее за свое УТП!

Ответить
0

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

Клиент - не клиент своего бизнеса, считывать его реакцию и замечания нужно только для обоснования более правильного решения! Клиент не специалист и знает своих клиентов только по косвенным признакам, которые да нужно вытащить и переработать, но никак не ориентироваться на его реакцию!

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

Ответить

0

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

> кабельному заводу нужна понятная навигация и удобный каталог...

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }