5 способів поліпшити UX за допомогою GIF і CSS

37

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

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

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

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

Будь то іконки, що відображають різні функції, або іконка, за допомогою якої ви хочете спілкуватися з користувачами, зробити їх можна з допомогою GIF і CSS. Спочатку можна поставити статичну версію GIF на фон, а коли хто-небудь наводить курсор миші на неї, змінювати її на анімовану версію 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-зображення в своєму арсеналі для створення крутих дрібних деталей, як в прикладах вище.