​​Баннераная слепота

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

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

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

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

Как решить задачу? Требуется сократить количество рекламной информации, чтобы пользователь не воспринимал баннеры, как белый шум. Оставить один или два баннера.

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

Хочу поделиться с вами необычными дизайнерскими решениями. В статье  подборка интересных 404 страниц https://tproger.ru/digest/cool-404-pages/

​​Контраст

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

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

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

Хочу поделиться с вами нашим новым проектом "Недвижимость Онлайн"
Пока готов только дизайн, но скоро вы сможете воспользоваться сервисом и обнаружить на нем аналитику всех застройщиков Москвы! Кроме этого на портале присутствует аналитика регионов по экологии, безопасности и многим другим параметрам.
А еще если вдруг хозяин квартиры нарушил договор аренды, вы теперь можете пожаловаться на него и отзыв будет храниться в базе данных. Так вы сможете узнать заранее отзывы о квартире в которой хотите проживать или отзывы о будущих соседях!

https://www.behance.net/gallery/63258541/nedvizhimost-onlajn

Осталось несколько часов до блокировки, так что если вы ещё это не прочитали, самое время 👉 https://snob.ru/selected/entry/136310

​​ Путь взаимодействия пользователей для среды смешанной реальности: эпизод, а не экран

Дизайнеры, работающие в среде смешанной реальности, не создают экранный опыт — они создают сценарный опыт.

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

https://userhouse.ru/statyi/puti-vzaimodeystviya-polzovateley-dlya-smeshannoy-realnosti-novyy-tip-shablona

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

Использование искусственного интеллекта:

Старбакс и Тако уже запустили AI в массы!
Компании создали ботов которые берут заказ у пользователя, как обычные продавцы. Кроме вопросов о меню вы можете спросить какой у бота любимый фильм или другие вопросы на отстраненные темы

Можете оценить крутецкий дизайн, нажмите на "Подробнее" 👇

Что может испортить ваш дизайн?

1. Значки соцсетей в шапке – указатели на выход
Трафик соцсетей великая вещь, но только в том случае, когда он течет по направлению к вам. А когда посетители покидают ваш сайт и переходят в соцсети, это не способствует достижению ваших целей. Люди вряд ли вернутся. Пока посетитель на вашем сайте, есть надежда, что он подпишется или добавит сайт в избранное. А как только он окажется на YouTube, то, с большей долей вероятности, примется за просмотр видео собак-улыбак», — рассуждает Энди Крестодин, специалист в области контент-маркетинга.

Рекомендации:
Разместить мелкие значки соцсетей в футере (подвале), вместо крупных в шапке. Если пользователи захотят зайти на профили компании в соцсетях, то будут искать их там же, где контактную информацию — внизу.
Изменить цвет значков, чтобы они не слишком визуально выделялись на странице.
Оставить ссылки только на те социальные сети, где вы действительно активно размещаете контент и взаимодействуете с подписчиками.


2.  Клишированные, стоковые и непрофессиональные фотографии
«Избегайте использования клишированых фото снимков, которые можно часто видеть в индустрии (и на сайтах конкурентов), — советует Тим Асимос, вице-президент и директор веб-студии Digital Innovation. — Стоковые фотографии могут быть ценным ресурсом для восполнения потребностей в фотографиях, но важно выбрать такие изображения, которые не покажутся знакомыми посетителям сайта. Что касается любительских фото, снятых на мобильный телефон, такие снимки могут прекрасно подойти для блогов или постов в Facebook, но вряд ли подойдут по качеству для рекламы ваших продуктов или для иллюстрирования серьезных проектов».


3.  Слайдеры в хедере
Карусели картинок в верхней части страницы были модным явлением пять лет назад. В теории, слайдеры могут быть эффективным инструментом воздействия, так как позволяют отображать множественные месседжи, изображения и призывы к действию на одном месте. Но на практике большинство пользователей, зашедших на страницу, сразу же прокручивают ее вниз, и вся информация со слайдов №2, №3, №4 проходит мимо их глаз.

Рекомендация:
Заменить слайдер одним hero-изображением (постоянным или рандомизированным) и одним ключевым сообщением о том, кто вы, и в чем ваше уникальное ценностное предложение.

Для дизайнера упаковка не менее важна, чем содержимое. Часто она бывает лучше самого продукта. Думаю, этим следует воспользоваться, поэтому выросла статья о оформлении вашего портфолио. Как сделать его лучше и достойно представить ваши проекты 👉  http://telegra.ph/Oformlenie-portfolio-05-28

Как избавить себя от рутины и придать символизма своей работе 👉
http://telegra.ph/Pashalki-v-dizajne-06-04

Потеря внимания пользователя

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

Есть объяснение подобным случаям - мозг отключается в моменты, которые считает недостаточно важными и включается снова, когда распознает важную для себя информацию. Это значит, что мозг воспринял контент, как белый шум. Такое восприятие информации, позволяет нам выделить главное, самую суть, а не уходить в корни деталей. В  Web-e это распространено как нигде. Чем больше текстов вы размещаете на странице, тем больше пользователь пропустит мимо глаз. Но при правильном размещении текстов - они наоборот усилят восприятие ключевых моментов.  
Чтобы подчеркнуть важный контент - сделайте акцентный заголовок.
Разместите информацию по центру экрана или слева в верхней части.
Сделайте элемент, на который хотите обратить внимание самым ярким по цвету и не размещайте слишком много информации вокруг.
Блоки с второстепенной информацией разместите ниже.
Мы супер-заряжаем нашу память, когда её визуализируем.
Мы лучше запоминаем смешные картинки, а схемы воспринимаются хорошо, когда уже поняли суть темы.  

Когда мы сталкиваемся с нечеткими воспоминаниями, наш мозг стремится «заполнить пробелы» — тем, что он «думает», могло быть. Поэтому технически мы помним информацию так, как вспоминали её последний раз. Это важно для визуализации. Например: если показать красный шарик и подписать "зеленый шарик", то в последствии пользователь вспомнить надпись "красный шарик", потому что картинка фиксируется в памяти лучше текста.
Пользователь лучше запомнит первый экран, последний (если доскролит), то что повторяется и то что  его притягивает. Поэтому важно отразить основную мысль на первом экране четко и одарить визуализацией

"Дизайн-систематизация в Рамблере"
Александра Ермоленко, Елена Лисеева, Евгений Новажеев, Ольга Пиголицына (brand.rambler.ru)

Текст: t.me/meetup2018/109

Видео: youtu.be/dhHlaiD0NZc?t=2h21m14s

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

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

Из зала задавали вопросы про продуктовую команду. 10 дизайнеров в опенспейсе, которые ведут по несколько проектов.

Небольшое развлечение, в этот очередной рабочий день. Создание 3d модели движения человека. Есть вариант свершения в реальном времени, утеха дня. Интерфейс прост и тем прекрасен.

https://getrad.co/scan/6268/

​​Психология восприятия формы

При восприятии трехмерного дома основу объемной фигуры может составлять видимый прямоугольник дома.
Роль глубинных ощущений в восприятии формы трехмерного тела объясняет ряд закономерно наблюдающихся своеобразных зависимостей между формой предметов, отдаленностью, в которой они воспринимаются, и их видимой величиной. Так, вследствие того, что восприятие предметов находящихся вблизи от зрителя, насыщено глубинными ощущениями. Восприятие объектов, находящихся вдали, более плоскостно. И поэтому объекты, находящиеся вдали, кажутся бледнее чем они есть на самом деле. Более бледные объекты - менее детализированы, за счет этого кажутся крупнее, чем есть. Такой парадокс. Объект с небольшим количеством деталей выглядит крупнее, чем объект насыщенный деталями.
В искусстве это обстоятельство известно довольно давно. Если на картине изображено много рельефных объектов, то это изображение кажется меньше. Чем рельефнее барельеф, тем он так же кажется меньше и, следовательно, дальше; если наоборот, то увеличение плоскостности влечет за собою увеличение кажущейся величины барельефа. Более крупные объекты создают иллюзию, что они находятся к нам ближе, чем мелкие объекты.
Следовательно объекты с небольшим количеством деталей буду казаться к нам ближе и крупнее, чем объект с высокой детализацией таких же размеров.

Как мы используем это в web-е?

В своей графике нам приходится учитывать эти правила. Если мы хотим выделить какой-то объект, то делаем его более детализированным и крупным, что позволяет визуально выдвинуть его на первый план. Это придает картинке объем.

Простой пример с тенью👇

Возможно, вы слышали эту историю о слоне🐘:

Король привел шесть человек в темное помещение. Они ничего не видят. Царь говорит им: «Я привез это животное из диких земель на востоке, его называют Слон».
«Что такое слон?» - спрашивают мужчины.
Царь говорит: «Потрогайте слона и опишите его мне».
Человек, который начал трогать ногу, говорит, что слон похож на столп, тот, кто чувствует хвост говорит, что слон похож на веревку, тот, кто чувствует ухо, говорит слон похож на ручного вентилятора, тот, кто чувствует живот говорит, что слон похож на стену, а тот, кто чувствует бивни, говорит, что слон похож на сплошную трубу.
«Вы все правы», - говорит король, - «Вы все чувствуете себя частью слона».
Визуальный дизайнер подходит к  UX дизайну с одной точки зрения, программист с другой. Может быть полезно понять и даже испытать ту часть слона, которую испытывают другие.

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

http://telegra.ph/Vzglyad-psihologa-na-slona-1-chast-06-27

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

http://telegra.ph/Vzglyad-psihologa-na-slona-2-chast-06-28