5 способов улучшить UX с помощью GIF и CSS

Дата публикации: 2017-01-20

От автора: пользовательский опыт заключается не только в хорошем юзабилити, но и в том, как сделать так, чтобы ваш товар или веб-сайт было приятно использовать, чтобы это приводило в восторг. Для создания положительного опыта от работы с вашим сайтом можно прибегнуть к созданию осмысленных переходов, интерактивных и визуальных элементов, подходящих к вашему сайту. Один из способов добиться этого – сочетание GIF-изображений и CSS.

Множество примеров ниже помогут вам решить, как стильно и современно использовать GIF и CSS не для того, чтобы отвлечь внимание или даже впечатлить, а чтобы просто улучшить опыт от работы с вашим сайтом. GIF-изображения выросли из просто котиков и спама коллег по работе, которые ничего не делают.

Ниже представлено 5 примеров использования GIF и CSS в веб-дизайне, которые могут привести в восторг посетителей сайтов, которые вы проектируете и разрабатываете:

Проигрывайте GIF по наведению курсора мыши

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

<div class="play-GIF-on-hover"></div>

1	<div class="play-GIF-on-hover"></div>

.play-GIF-on-hover {
    width: 200px;
    height: 200px;
    background-image: url('path-to-your-folder/this-is-the-static-version.GIF');
    background-size: 100%;
    background-position: center center;
}
.play-GIF-on-hover:hover {
    background-image: url('path-to-your-folder/this-is-the-animated-version.GIF');
}

.play-GIF-on-hover {

width: 200px;

height: 200px;

background-image: url('path-to-your-folder/this-is-the-static-version.GIF');

background-size: 100%;

background-position: center center;

}

.play-GIF-on-hover:hover {

background-image: url('path-to-your-folder/this-is-the-animated-version.GIF');

}

Используйте GIF в качестве загрузчика

Если вы раньше не писали CSS для слоя с загрузчиком, то вам нужно будет создать HTML разметку и стили, которые будут первым делом создавать перекрывающий слой. Далее поверх этого слоя можно спозиционировать GIF для загрузчика. Если у вас нет GIF-изображений для загрузчика, можете зайти на Codrops, там очень много хороших примеров (пример ниже).

5 способов улучшить UX с помощью GIF и CSS

Хотите научиться создавать крутые GIF-изображения? Прочитайте статью 7 советов по дизайну удивительных GIF.

Создайте анимированное меню

5 способов улучшить UX с помощью GIF и CSS

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

Используйте GIF в качестве фонового рисунка, как на HeadScape

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

Фоновое изображение на их сайте – это GIF синемаграф, и весит он приличных 1 Мб. Если хотите пойти еще дальше, можно на фон поставить зацикленное видео (30-40 секунд).

5 способов улучшить UX с помощью GIF и CSS

Вот так это изображение выглядит в контексте фона – как билборд/баннер. CSS помогает держать его в определенных рамках.

5 способов улучшить UX с помощью GIF и CSS

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

Состояния hover на кнопках

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

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

5 способов улучшить UX с помощью GIF и CSS

Код можно посмотреть по ссылке.

GIF-изображения это не просто украшение

Как и с любой деталью в дизайне, очень важно с ней не переборщить. Если я использую GIF и CSS, я хочу быть уверенным, что это улучшает коммуникацию. У состояния hover выше есть свое значение, оно помогает пользователям понять, что они действительно навели курсор мыши на кнопку. А это уже может заинтересовать их, а что же их ждет на следующем этапе.

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

Заключительные мысли

У GIF-изображений наступила эпоха ренессанса. Я думаю, что благодаря простоте в использовании и уровню детализации они заняли место среди SVG анимации и CSS постпроцессоров. GIF можно делать даже из коротких видео. Держите GIF-изображения в своем арсенале для создания крутых мелких деталей, как в примерах выше.

Автор: Tim Brown

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Метки: ui, ux