Из многих факторов, которые необходимо учитывать в веб-дизайне, эмоциональное взаимодействие является наиболее важным. Однако зачастую этим фактором пренебрегают. В реальном мире мы все время испытываем влияние дизайна на наши чувства. Представьте на мгновение эмоциональное состояние человека, который находится за рулем роскошного, мощного автомобиля: полное удовлетворение от пребывания в комфортабельном водительском сидении, приятные тактильные ощущения от прикосновения к кожаному рулю, утонченный блеск приборной панели.
Единых технических требований для любого из этих элементов оформления и декора не существует: автомобиль будет одинаково хорошо работать и без них. Однако ориентация исключительно на чувственное и эмоциональное взаимодействие – это именно то, что отличает предметы роскоши от всех других, и то, что заставляет покупателя приобретать этот товар.
Этот двигатель для эмоционального дизайна может быть обнаружен в самых неожиданных местах. Возьмите, к примеру, питающий шнур на предпоследнем поколении Apple MacBook. Компания заслуживает благодарности за помощь тысячам пользователей в избегании путаницы с силовыми шнурами (хотя в этом продукте и использован достаточно распространенный разъем MagSafe). Более глубокая эмоциональная близость наблюдается в мельчайших деталях, например, это касается световой индикации состояния питания на передней панели ноутбука. Частота появления световых импульсов в спящем режиме выбрана не случайно: мерцание происходит 10 раз в минуту, именно такая частота дыхания у человека, находящегося в состоянии покоя.
Скорость мигания световой индикации в MacBook от Apple в режим сна находится в пределах средней скорости дыхания взрослого человека, находящегося в состоянии покоя. (Источник изображения: Майкл Стилвелл).
Возьмем другой пример: передняя часть автомобиля – это не просто две фары и решетка радиатора. Это своего рода лицо, с уникальным характером и связью. Посмотрите на легковые автомобили или фургоны для женщин, стоящие где-нибудь около пригородных домов. Линии корпуса у этих автомобилей, как правило, круглые, изогнутые, приветливые и дружественные.
Передняя часть транспортного средства часто передаёт неотенический эффект: мы рассматриваем «глаза» (фары), как аналогию с человеческими глазами, милыми и привлекательными. Проведите сравнение с визуальным оформлением транспортных средств на рынке для мужчин, особенно это касается спортивных автомобилей: линии угловаты и агрессивны, а фары сужены.
Обратите внимание, как переднее оформление спортивного автомобиля взаимодействует с вами на эмоциональном уровне. (Источник изображения: GabboT ).
Проектирование, которое вызывает эмоции.
Мы должны стремиться к достижению аналогичного эффекта эмоционального подъёма и для веб-сайтов. Веб-сайты должны радовать, удивлять и оказывать влияние на пользователей, не прибегая к манипуляциям или слишком сахарному оформлению. Если цифровой области не хватает каких-либо чувственных сигналов, для придания более устойчивого эмоционального переживания можно воспользоваться тщательным подбором цвета, декоративных элементов и типографики.
CSS переходы помогут сделать взаимодействие с сайтом более удобным для человека: вместо резкого перехода из одного состояния в другое, мы можем создать плавность движения элемента путем изменения значения на несколько сотых миллисекунд, что к тому же позволит сделать сайт более привлекательным. Парадоксально, но те же методы, можно использовать для придания сайту динамичности, особенно если мы используем возможность для предварительной загрузки контента.
При создании веб-сайтов подобного типа, мы должны избегать ошибок прошлого: структура взаимодействия должна быть построена таким образом, чтобы стимулировать посетителя изучать веб-сайт и никогда не должна скрывать важные компоненты, такие как навигация. Если вы заставили пользователя исследовать веб-сайт, то это нужно рассматривать в качестве бонуса, а не как должное взаимодействие. Возможность обмена любым типом информации также должна быть доступна для тех людей, кто не имеет времени или возможности использовать стандартный интерфейс.
Сюрприз в коробке.
(Пожалуйста, ознакомьтесь с демо о том, как “Эффект наведения влияет на изображения от различных источников при использовании Pure CSS”, на CodePen).
Одним из способов вызвать эмоциональное удивление и стимулировать пользователя дольше находиться на сайте может быть, например, отображение различных панелей информации в соответствии с тем, как пользователь наводит курсор на адаптивное изображение. В этом примере я буду использовать фотографию спиральной галактики NGC 1309, которая была добавлена к HTML5 странице:
<img src="ngc-1309.jpg" alt="">
(Обратите внимание, что я намеренно оставил значение атрибута изображения alt пустым. В ближайшее время мы ещё вернемся к этому атрибуту).
Информационные панели создаются из четырех span элементов; вся группа, помещается в div тег, который также включает в себя class :
<div class="multi-hover">
<span>Spiral Galaxy NGC 1309</span>
<span>Approximately 120 million light years from Earth</span>
<span>Home to several Cephid variable stars</span>
<span>Member of the Eridanus galactic cloud</span>
<img src="ngc-1309.jpg" alt="">
</div>
Мы напишем CSS код для перехода без использования префиксов: Internet Explorer 10 для анимации не требует наличия префиксов, аналогичная ситуация в Firefox и Chrome. По настоящему волшебные JavaScript скрипты, такие как, например, -prefix-free, созданный Леа Веру, позаботятся о тех браузерах, которые еще нуждаются в наличии префиксов.
.multi-hover {
position: relative;
font-family: Orbitron, sans-serif;
max-width: 500px;
line-height: 0;
}
.multi-hover img {
max-width: 100%;
}
.multi-hover span {
position: absolute;
width: 100%;
height: 100%;
line-height: 1.5;
font-weight: 100;
text-align: center;
box-sizing: border-box;
font-size: 3em;
transition: .3s linear;
color: white;
padding: 15%;
opacity: 0;
}
CSS использует правило, согласно которому абсолютное позиционирование элементов внутри контейнера будет выполняться в соответствии с положением родительских элементов. Поскольку изображение определяется высотой и шириной div, элемент span всегда будет иметь точно такой же размер, защищенный от дальнейшего изменения путем использования box-sizing , max-width и line-height: 0. В этом примере я использую Orbitron от The League of Moveable Type в качестве подходящего типа шрифта.
Затем расположите span элементы таким образом, чтобы каждый лежал строго по внутреннему краю изображения. Сделать это можно задав соответствующее смещение в процентах от контейнера div, что поможет поддерживать адаптивность:
.multi-hover span:nth-child(1) {
top: 0;
left: 90%;
background: hsla(0,70%,50%,0.6); } /* right panel */
.multi-hover span:nth-child(2) {
top: -90%;
left: 0;
background: hsla(90,70%,50%,0.6); } /* top panel */
.multi-hover span:nth-child(3) {
top: 0;
left: -90%;
background: ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров