Wow дизайн что это
В этой статье попробую ответить на этот достаточно сложный вопрос. В качестве примеров будут использованы мои реальные работы на существующих сайтах. Те, что не являются моей разработкой, и позаимствованные с просторов сети интернет будут подписаны. Некоторые примеры будут слишком просты для “крутых” дизайнеров и могут показаться не эффектом WoW. Но для большинства посетителей они будут вызывать именно такой эффект, потому что среди конкурентов ничего не встречается подобного. На практике достигнуть эффекта wow достаточно просто - главное сделать так, чтобы пользователь обратил на это внимание или увидел что-то впервые. Многие веб-дизайнеры задаются вопросом как же добиться эффекта wow на сайте. Часто они пренебрегают пользовательским опытом и делают эти эффекты в угоду красоте, забывая про функциональность. Это главная ошибка, которую нельзя допускать.
Важно помнить, что на сайте главный посетитель, а не творческий порыв дизайнера.
Статичным сайтом уже никого не удивишь, поэтому эффект вау достигается с помощью анимации. Чаще всего достаточно небольших деталей чтобы вызвать приятное ощущение от использования сайта. Заставьте ваш сайт двигаться, быть живым от прикосновений и, наверняка, это будет позитивно воспринято пользователем. Добавьте анимацию при взаимодействии с вашим интерфейсом. Главное не переусердствуйте, чтобы ваш сайт не выглядел тормознутым или неудобным.
Размытие
Размытая фотография помогает быстрее и легче сконцентрироваться на том, что находится выше ее. В размытости есть некий элемент загадочности. Когда человек смотрит на размытый фон, он пытается догадаться о том, что же за ним скрыто. В случаях, когда пользователь уже видел контент сайта и фон разрывается непосредственно от взаимодействия, этот эффект помогает сконцентрироваться на том, что выглядит четко.
Размывание фона, как способ заставить прочитать скучную статью:
Форма обратной связи, которую приятно заполнять
Параллакс.
Самый простой способ вызвать эффект WoW - параллакс. Разбейте страницу на несколько слоев. Заставьте двигаться слои по разному. Например, один слой временно закрепите до нужного момента или анимируйте эти слои с разной скоростью в зависимости от взаимодействия пользователя. Можно один фон передвигать медленнее, чем основной. Таким образом достигается глубина сайта.
Пример как можно поиграть различными элементами на сайте при прокрутке:
Еще один пример как показать пользователю, что инструмент легок в работе
Куда же без моих любимых крестиков и ноликов, которые были сделаны для главной страницы этого сайта
Вот хороший пример из сети интернет. Очень приятная на мой взгляд анимация скроллинга.
Провал или точка роста?
Первая мысль после таких переговоров — «я не справился». Вы начинаете корить себя, анализируете, что именно сделали не так. И это правильно. Но важно не погрязнуть в подобных мыслях, иначе сформируется стойкая иллюзия: жизнь — постоянная борьба, всех надо постоянно удивлять. Ваша задача — выбраться из гонки «живым». Понять, что случаются ошибки, и это нормально.
Ещё одна мысль, возникающая при провале, как бы в защиту вашего профессионализма — «клиент неадекватный, а я молодец, он, конечно, ничего не понял, а проект был очень крутой». Гоните от себя эту «ещё одну мысль». Не бывает неадекватных клиентов. Это вы не можете найти к ним подход. Есть клиенты тяжёлые, но с ними тоже можно работать и вызвать WOW-эффект. Вопрос в том, готовы ли вы к такой работе. Нужна ли вам сейчас эта борьба, когда проект может зайти с пятого раза? Хватит ли у вас ресурсов? Или вы хотите делать то, к чему привыкли? Ответьте себе на все эти вопросы честно, а после — действуйте.
Если вы решили бросить вызов и продолжить работу, стоит поразмышлять над стратегией.
Вызовы развивают в личностном и профессиональном плане, плюс вы получите колоссальное удовольствие, достигнув результата, которого так жаждал клиент. Вы ощутите собственную значимость и крутость. Проверено.
Итак, вы проделали ряд работ, исправили недочёты, обсудили всё с аналитиком и командой. А дальше что?
Разбираемся, из чего состоит ВАУ-эффект
- Идея — та самая задумка, которая лежит в основе вашей концепции.
- Понимание ожиданий клиента — если вы их понимаете, то можете предвосхитить. Здесь вам помогут аналитики.
- Реализация — вашу идею необходимо синхронизировать с ожиданиями клиента и грамотно реализовать.
- Упаковка — обязательно расставьте акценты и расскажите о них во время презентации (интерактивные прототипы, демонстрация отдельных фич, презентация).
- Презентация. Подача обладает сильным влиянием — можно сделать качественный проект, но подать его неуверенно или, наоборот, слишком передавить. В обоих случаях клиент стушуется и примет решение не в вашу пользу. Если вы не уверены, что помните проект до мелочей, возьмите на защиту его участников (исполнителей), у них в голове, как на блюдечке с голубой каёмочкой, все детали разработки или дизайна.
Чтобы добиться WOW-эффекта, нельзя останавливаться в собственном развитии. Постоянно расширяйте кругозор, собирайте информацию, которая может повлиять на результат, удивить клиента. Такую информацию часто называют косвенной. Но она очень важна — это полигон для «бомбических» идей. Кроме того, надо попасть в ожидания клиента и поработать с эмоциями. Подумайте, какие фишки и куда можно добавить. Далее следуют структура, логика и обоснование. Очень значимый момент — выход за рамки, т. е. необычный подход. Поразмышляйте, что ещё можно сделать для этой концепции, устройте мозговой штурм с коллегами.
Представьте, вы показываете клиенту макет в светло-зелёных оттенках и макет в красных тонах. Какой выберет клиент? Почему? Как зелёный влияет на выбор? Об этом вы можете узнать из работ нобелевского лауреата по нейроэкономике Даниела Канемана. Именно он выдвинул следующую гипотезу: когда человек принимает решение, на самом деле выбор уже сделан, и в этот момент в его голове происходят совершенно другие процессы. Канеман разобрал некоторые психологические факторы, влияющие на наш выбор. В том числе и цвета. Например, исторически и эволюционно в человеке «накопилось» убеждение, что зелёный — это жизнь и безопасность, а красный — угроза и предупреждение. Понимаете?
Продолжаем добавлять важную информацию, которая поможет вам сделать крутой проект.
Клиент хочет WOW!
Откроем небольшой секрет: клиенты редко могут сказать, что для них «WOW!». Они просто ждут, что их удивят. Очень интересно посмотреть, как в таких случаях действуют менеджеры и дизайнеры. Мы определили три классических подхода к разработке дизайн-концепции. Почему классических? Они, как окна во время загрузки компьютера, автоматически всплывают в светлых головах креаторов.
«НУ, ПОЙДЁТ» — первый и самый простой подход. Общаемся с клиентами и прорабатываем их «боли». Однако будет ли WOW-эффект, если всего лишь закрывать какие-то потребности клиента?
Вы просто решили одну из проблем, глупо рассчитывать на реакцию выше «Ну, нормально» или «Ну, пойдёт». Тут настоящему «ВАУ!» нет места.
«Я ГДЕ-ТО ЭТО УЖЕ ВИДЕЛ» — второй подход. Просим клиента показать сайты или элементы, которые ему нравятся, и заодно проанализировать всё это. Не забывайте про обратную сторону такой медали: клиент изначально ожидает чего-то похожего и наверняка предвзято отнесётся к любой вашей работе.
«ЭТО, КОНЕЧНО, ЗДОРОВО… НО ЗАЧЕМ?» — третий подход. Удивляем клиента бессмысленным по функционалу, но красивым по дизайну концептом. Это, конечно, «ВАУ!», но не всегда удачное.
«WOW-эффект». Как вызвать его у клиента и не сойти с верного пути
За пять лет мы научились здорово работать с ожиданиями клиентов — и каждый раз добиваемся крутого результата. В этой статье поделимся всем, что знаем сами, и расскажем, как правильно подготовить себя и команду к разработке WOW-концепции. Поехали!
Как этого добиться? Милтон Глейзер дает ответы и на этот вопрос. Вот несколько его правил — советов для дизайнеров:
1. Работайте только с теми, кто вам нравится. Самый осмысленный и хороший дизайн был придуман для тех заказчиков, которые во время работы стали моими друзьями.
2. Хорошее — враг выдающегося. В сфере дизайна хорош тот, кто не повторяет за собой и за другими. Каждый раз создавайте что-то новое и не идите по проторенной дорожке.
3. Не доверяйте стилям. Каждые десять лет меняются стили, и вещи начинают выглядеть иначе. То же самое происходит со шрифтами и графикой. Если вы планируете просуществовать в профессии больше одного десятилетия, рекомендую быть готовым меняться.
4. Совершенство ― это бесконечное развитие. Помните, что у совершенства нет пределов, его невозможно достигнуть. Развиваясь, мы только движемся к совершенству, поэтому не останавливайтесь!
Анимация статичных элементов
Совершенство кроется в деталях. Сделайте необычными обычные вещи. Добавьте анимацию на привычные для пользователя элементы страницы и тем самым вызовите эффект WoW. Например, анимируйте кнопку или любой другой элемент, с которым взаимодействует пользователь. Добавьте максимум необычности в привычные вещи.
Простая анимация шестеренки на сайте заставляет пользователя внимательно прочитать текст
Зачем делать скучные кнопки в веб-формах, если можно сделать ее с приятной анимацией?
УТП, которое обязательно попадет в глаза каждому посетителю
Одна из моих любимых фишек - анимация во время скролинга. Кстати, на некоторых страницах этого сайта не всегда написаны приятные слова, зато правда=)
Типографика
Необычный шрифт может вызвать интересные чувства у посетителя. Поиграйте со шрифтом, сделайте что-то необычное из обычных слов. У вас на вооружении огромное количество шрифтовых параметров, которые можно менять. Так почему бы не пользоваться этим? Уменьшить межстрочное расстояние, увеличить расстояние между букв. Творите, делайте, создавайте!
Уровни создания WOW-эффекта
Информация. Найти то, на что будет сделан упор, т. е. расставить приоритеты. Очень часто специалистам не хватает информации. Чтобы расставить акценты, надо многое знать о клиенте. Изучите его бизнес, ожидания и личную жизнь: где живёт, на чём ездит, есть ли семья, дети, путешествует или нет. В итоге должен получиться симбиоз бизнеса и личных предпочтений — в первую очередь нужно думать не о том, что клиент хочет приобрести, а о том, как этот продукт будет интегрироваться в его жизнь.
Вспомните подход Apple . Когда к ним приходит клиент — это не о том, какой гаджет он хочет купить и как его применять, а о том, как он будет встраивать его в свою жизнь. Например, новый iPhone с улучшенной камерой не все берут ради понтов. Некоторым реально нужен гаджет, чтобы снимать качественные видео и создавать крутой контент для блога. Вот и в рекламной кампании Apple делает акцент на полезность смартфона и показывает, как просто использовать его в реальной жизни для тех же съёмок (вспомните конкурс «Снято на айфон», который устраивает Apple. А cовсем недавно компания выпустила большой ролик про Эрмитаж, и он тоже снят на айфон!
Композиция. Разработанная сетка должна выглядеть гармонично, но каждый элемент должен побуждать к какому-то действию и вызывать определённую реакцию. Например, презентации удобно показывать в прямоугольном формате. И лучше, если это будет 16 : 9.
В архитектуре, как и в дизайне сайтов, существует такое понятие, как «формы». Простые — квадрат, треугольник и круг. Каждая вызывает у нас разные эмоции. Если человека поместить в квадратную комнату, он обязательно найдёт место, чтобы присесть, находиться в статике, в комфортных условиях. В прямоугольной комнате хочется постоянно двигаться. Поэтому люди пытаются разделить её на квадраты. А в круглой появляется ощущение стресса и постоянного психологического давления — человек всё время в центре, будто на сцене. В таких комнатах настолько тяжело, что сначала впадаешь в состояние стресса, а потом накрывает депрессия.
Механика. Представление о том, как всё работает. Необходимо следить за трендами рынка. Когда мы строим концепцию, то зачастую рассуждаем состояниями. В статике может всё здорово работать, но собираешь интерактивный прототип, и ни один экран не стыкуется. Процесс не может быть статичным, нужно сразу обращать внимание на то, как работает вёрстка и какие есть возможности. Конечно, предусмотреть всё-всё практически невозможно, и наверняка будет затык, который не увидел клиент или вы. В таком случае вам, как экспертам, нужно безболезненно решить эту проблему — внести изменения либо предложить новую концепцию.
Интерактив. Обязательно показывайте клиенту, как работает сервис. Он должен быть вовлечён. Дайте ему самостоятельно пройти отлаженный вами путь. Особенно, если в проекте есть эмоциональный контекст. Например, концептуальное звуковое сопровождение при нажатии на кнопки. Возьмём, к примеру, кейс Noomera . Нужно было решение для внутреннего чата, и ребята придумали кнопку «бип-бип». То есть реально нажимаешь, сервис делает «бип-бип» другому пользователю, и, если он тоже «бибикнул», создается чат. Когда клиент в первый раз смотрел интерактивный прототип и попробовал эту фичу сам, то был в мегавосторге.
ЧТО ТАКОЕ WOW - ЭФФЕКТ И КАК ЕГО ДЕЛАТЬ🤩
Чтобы понять как создавать это, давайте разберемся, что же это такое.
💡Wow - эффект, простыми словами, это реакция вашего клиента на какой-то ваше действие с мыслью: “Вот это да”. По сути это то, что подталкивает к покупке или же улучшает процент возвращаемости. 99% что вы не одни на рынке с таким же товаром и вам надо выделиться и запомниться ( в хорошем плане слова ), чтобы в следующий раз при огромном выборе, клиент уже знал, что пойдет именно к вам.
📱К слову Вау - эффект компании Apple, помимо стильного удобного продукта, их упаковка. Вспомните себя, когда вы открываете новенький Iphone, достаете все из коробочки, и снимаете заветную пленочку. Ради одного это чувства уже хочеться отдать 100.000р.
❤️Вернемся к сути. Я приведу вам несколько примеров, когда это у меня возникал WOW-эффект. А потом расскажу в чем будет ключевая выгода для Вас, создать это у Вас.
- Как-то раз я повторно решил забронировать ресторан. Позвонив мне дружелюбно сказали: “Здравствуйте Лавр”, пустячок а приятно. Это круто так как меня не было в том месте более полугода. Я слегка офигел, но было приятно.
- Следующий случай произошел не со мной, а с моей хорошей знакомой. В компании в которой она регулярно заказывает спорттовары, на день рождения прислали ей букет цветов. (К слову она до сих пор там заказывает).
- Два случая про старбакс. Первый был связан с тем, что когда мне отдавали напиток, я подметил, что мое имя было написано с ошибкой. Сказав в шутку про это бариста, он извиняясь ответил, буквально минуту я переделаю. И он взял и переделал мой большой кофе, только из-за того, что неправильно написали имя.
- Также в старбакс, у меня не открывалось их приложение (у них бывает иногда такое, а я через него оплачиваю). Сказав об этом парню за кассой, он сказал: Да не переживайте, за счет нас будет напиток, в следующий раз откроется просканируем). Понятное дело, что пока я сидел, у меня все заработало я подошел и оплатил, но все же.
- Помню был еще один случай в Нью-йорке в ресторане. Вкратце, мне принесли Пересушенный/сгоревший стейк, в одном из лучших стейк хаусов NYC (косяк как вы понимаете капец какой, казалось бы все настроение потерянно, ресторан получает негативные отзывы и тд) Однако, я бы не вставлял бы это сюда, будь все потеряно. Подошел менеджер, красивая девушка, принесла извинение от лица ресторана за этот прокол, сказала, что любые десерты за счет заведения. То что стейк переделают и быстро принесут, заменив на более дорогой и вкусный сорт мяса. Я естественно согласился, но больше всего я удивился, когда мы попросили счет после вкуснейших десертов, которые вынес сам шеф, принеся извинения еще раз. Оказалось, что наш столик ПОЛНОСТЬЮ оплачен за счет ресторана. Тогда это было прям вау. К слову счет там бы долларов под 300.
✅Это только несколько из примеров. Смысл в чем, что когда вы делаете, что то запоминающейся для клиента, это выделяет Вас из серой массы схожих компаний и продуктов. В век насыщенности рынка, вам просто необходимо выделяться. А позитивная WOW эмоция всегда будет крутым триггером к покупке. Повышая вашу возвращаемость, мнение клиента о компании, который будет распространять эти истории своим друзьям.
Вместо выводов
Всегда помните, что главный на сайте пользователь, а не веб-дизайнер, который сотворил сие чудо. Не переусердствуйте с количеством анимации и количеством Java скрипта. Сделайте всё для того чтобы сайт быстро загружался. Сейчас интернет очень быстрый и не всякий пользователь захочет ждать пока прогрузиться ваша страница. Максимально оптимизируйте ваш код и не заставляйте вас ждать. По статистическим данным, если пользователь не увидел сайта в течении 5 секунд, навсегда покидает ресурс. Поэтому лучше статичный, но быстрый сайт, чем красивый, но без посетителей. Если у вас возникла необходимость в сайте с эффектом WOW, то смело оставляйте заявку - все будет в лучших традициях современного веб-дизайна.
Как разработать WOW-концепцию
Приступая к разработке WOW-концепции, прежде всего думайте о точках, на которые она сработает, иначе есть «отличный» шанс оказаться непонятым, это раз, и без клиента, это два. Самый главный вопрос, который надо задавать в отношении всех трёх подходов: А ГДЕ WOW? Этот вопрос будет и у клиентов, и у вас. И с нами случалось такое! И не раз! Мы уже всё подготовили и с боевым настроем презентовали дизайн-концепцию клиенту, а он говорил: «А где WOW? Это как у всех. Фрилансеры так тоже умеют. Пфф… Фигня какая-то. Так бы и я смог».
Видео в фоне.
Другой простой способ использовать видеофон. Простой и лаконичный видеоролик в фоне может легко донести информацию. Главное сделайте видеоряд максимально понятным с беглого взгляда, чтобы не отвлекать посетителя от главной информации.
Видео в фоне сайта очень быстро объясняет куда попал пользователь. Быстро покинувших сайт легко отфильтровать и убрать из аудиторий ремаркетинга.
Пример видео бекграунда для швейного производства.
Естественно примеры с моего сайта.
Не потеряйтесь на пути достижения WOW-эффекта!
В погоне за успехом и похвалой можно прийти к нулевому результату. Работая над одним проектом, мы принесли концепцию на встречу и услышали следующее: «Видно, что это делали непрофессионалы. Нам не нравится. Уже есть другая команда, которая предложила другой концепт. До свидания». Нас с ходу зарубили, не дав раскрыть идею. Мы приехали в офис, закрылись на неделю, чтобы погрузиться целиком и полностью в этот проект.
Через неделю показали клиенту навороченную версию. Он внимательно посмотрел и сказал: «Это настолько круто, что не подходит для моей задачи». И снова отверг нашу работу.
Да, мы доказали свою крутость… Но кому это оказалось нужно? В погоне за доказательством собственной компетентности можно уйти совсем в другую сторону.
Творчество — процесс, который необходимо отстраивать. Будьте внимательны и не хватайте идеи, лежащие на поверхности. Удачи!
WOW-эффект в дизайне
Милтон Глейзер — автор бессменного символа Нью-Йорка — логотипа «I love New York», журнала New York Magazine и множества других известных работ. Он считает, что хороший дизайн должен произвести wow-эффект и на заказчика, и, главное, на потребителя.
По-настоящему классная работа не пройдет незамеченной. Дизайн, при взгляде на который можно сказать: «Ничего себе!» «Вау!» производит именно тот желаемый эффект, ради которого он и создавался. Поэтому дизайнер не должен останавливаться на промежуточных вариантах и разработках. Он должен добиться именно такого впечатления, и только тогда задача может считаться выполненной.
Читайте также: