Динамічні та інтерактивні елементи й об’єкти у вебсайтах

Всі елементи, з яких створюються вебсайти, можна поділити на три типи: статичні, динамічні та інтерактивні.

  • Статичними є нерухомі елементи, з якими не передбачена взаємодія користувача. До них відносять, зокрема, тексти, зображення, декоративні елементи.
  • Динамічними є рухомі чи анімовані елементи. Це можуть бути, наприклад, хмари, що рухаються на тлі сайту чи інші анімовані елементи, мета яких, як правило, декоративна. Самі собою вони не становлять значного інтересу, тож в цьому матеріалі ми більшою мірою зосередимось на третьому типі елементів — інтерактивних.
  • Інтерактивними називають елементи, що так чи інакше реагують на дії користувача. Власне, слово «інтерактивні» буквально означає «взаємодіючі» (від англ. interactive). Базовими інтерактивними об’єктами є посилання, кнопки та елементи форм.

Окремі інтерактивні елементи можуть об’єднуватись у складніші інтерактивні об’єкти. Наприклад, поля вводу та кнопка — це елементи. 

А форма — об’єкт.

Форма — це, певно, один з найтиповіших інтерактивних об’єктів на сайті. Але насправді різновидів і способів втілення інтерактивних об’єктів в сучасному вебдизайні безліч і обмежені вони лише вашою уявою. І ще, звісно, бюджетом проєкту. Наприклад, гра з динозавриком в Chrome, яка стає доступною, коли зникає інтернет — це теж інтерактивний об’єкт. Тривимірне обертання товарів в інтернет-магазинах — також. Відеоплеєри — аналогічно.

Враховуючи таке розмаїття, ми вирішили в цьому матеріалі розглянути типові засоби й можливості взаємодії сайтів, які лежать в основі більшості інтерактивних об’єктів, якими б вони не були. А деякі найбільш популярні інтерактивні об’єкти ми розглянемо докладніше.

Почнемо з того, що лежить в основі будь-яких взаємодій на сайті — сценаріїв взаємодії.

Сценарії взаємодії

В кіно сценарій — це документ, що описує послідовність подій, ракурси знімання, діалоги персонажів. Він пов’язує між собою численні сцени фільму і може займати сотні сторінок. Часто просто читаючи сценарій, ви можете уявити собі, що відбуватиметься в кадрі та з якою інтонацією мають говорити герої.

У вебсайтах сценарії працюють схожим чином. Вони описують, що і за яких умов робитимуть ті чи інші елементи сайту. Як правило, сценарії сайтів дуже прості. Настільки, що для їх опису може бути цілком достатньо одного речення. Наприклад, такого:

Через 10 секунд перебування користувача на сайті в нижній частині екрана з ефектом висування з’являється блок оформлення передплати, що перекриває зміст сторінки.

Насправді навіть цей простий сценарій містить кілька базових складових вебсценаріїв:

  • Учасники сценарію (блок оформлення передплати та зміст сторінки)
  • Місце дії (нижня частина екрана)
  • Умова (почекати 10 секунд)
  • Дія (поява з ефектом висування)

Одна вебсторінка може містити десятки окремих сценаріїв.

Учасником сценарію може бути будь-який елемент чи об’єкт на вебсайті.

А от умовам взаємодії ми пропонуємо приділити трохи більше уваги.

Умови взаємодії

Умови взаємодії — це фактори, що спричиняють пов’язану з елементом подію.

Найбільш типовими умовами настання події сценарію є такі:

  • Наведення
  • Натискання
  • Прокручування
  • Натискання клавіш
  • Введення та відправлення інформації
  • Отримання інформації
  • Прив’язка до часу

Ці умови можуть ускладнюватись чи комбінуватись між собою. Так, до сценарію з прикладу можна додати ще одну умову:

Через 10 секунд перебування користувача на сайті, якщо користувач не виконує жодної дії, в нижній частині екрана з ефектом висування з’являється блок оформлення передплати, що перекриває зміст сторінки.

Розгляньмо детальніше описані умови взаємодії та контексти їх використання.

Наведення курсора

Наведення часто використовують для візуальної підказки стосовно інтерактивності елементу. Інтуїтивно ми очікуємо, що якщо елемент є інтерактивним, то наведення на нього призведе до зміни кольору або масштабу елементу. Також воно може бути й самостійною дією. Наприклад, через наведення можна викликати спливаюче меню.

Натискання

Натискання — більш універсальна дія, адже працює і на смартфонах, і на комп’ютерах. При цьому наслідок натискання залежить від форми елементу, на який ви, власне, натискаєте. Натискання на гіперпосилання призводить до переходу на іншу сторінку. Натискання на кнопку — до певної дії в межах поточного екрана. До речі, часто на смартфонах натискання спричиняє ті ж події, що й наведення на комп’ютерній версії сайту.

Прокручування

Деякі дії на сайті прив’язують до прокручування сторінки. Наприклад, можна зробити так, щоб певні елементи з’являлись за умови досягнення певної відмітки на сторінці. Також до прокручування прив’язують тривимірне обертання об’єкта.

Натискання клавіш

З самого початку натискання певних клавіш призводили до взаємодії з сайтом. Наприклад, клавіша «вниз» прокручувала сторінку вниз на певний крок, а клавіша «вгору» — відповідно, вгору. 

Але це так звані нативні взаємодії. А з часом сайти ставали функціональнішими, і в деяких вебзастосунках вже є доступними комбінації клавіш. Зокрема у вебверсії редактору Figma. В CASES, до речі, це теж працює.

Введення та відправлення інформації

Для введення та відправлення інформації ми використовуємо форми. Їх анатомію досить докладно розібрали в одному з попередніх матеріалів. В цьому випадку ми передаємо певну інформацію через сайт.

Події за графіком

Вкрай поширеною умовою для сайтів є подія, що прив’язана до певного графіка. Наприклад, поява елементу через певний час. А ще часто на сайтах використовують таймери зворотного відліку, які, навпаки, блокують певну дію через заданий проміжок часу.

Отримання інформації

Сайт також може передавати інформацію нам. І отримання нами інформації — це ще один спосіб взаємодії сайту із користувачем. Наприклад, чат складається водночас з двох окремих способів обміну інформацією: поля вводу, що найчастіше знаходиться в нижній частині, та області спілкування, яку ми звикли бачити у верхній частині.

До речі, чат — це приклад того, як декілька інтерактивних елементів утворюють інтерактивний об’єкт. Більш докладно про них розповімо у наступному блоці!

Типові інтерактивні та динамічні об’єкти

Форми

Певно, найбільш типовим інтерактивним об’єктом на сайті є форми. Про елементи, які їх утворюють, ми докладно розповіли в одному з попередніх матеріалів.

Ну а найбільш типовими випадками використання форм є: спілкування (чати), реєстрація та авторизація, оформлення замовлення, зворотний зв'язок. З деякими з них у цьому курсі ми познайомимось ближче.

Прелоадери

Поширеним динамічним елементом для сайтів є так званий прелоадер. Це як правило анімований елемент, що може відповідати всій сторінці (глобальний прелоадер) чи її окремим елементам (локальний прелоадер), і з’являється він за умови, що запитуваний зміст ще не підвантажився.

Таймери

Таймери — це динамічні елементи, що відповідають за виконання певної дії у прив’язці до часу. Вони можуть бути очевидними чи прихованими. Приховані таймери непомітні для користувача. А очевидні можуть мати різні рівні деталізації. Вони можуть бути більш абстрактними — оформленими як лінія чи коло. Або ж виглядати як елемент, що чітко відлічує час до події (подібні таймери часто використовуються як складові рекламних банерів).

Слайдери та галереї

Слайдери дають змогу великий обсяг змісту розмістити в межах стандартного контейнера. В ньому в один момент часу знаходиться один активний об’єкт (для зручності, будемо називати його «слайдом», а за виконання певної умови (натиску клавіші або з плином певного часу) він може змінюватись на наступний. Своєю назвою вони завдячують англійському слову slide, тобто «сковзати». Дійсно, досить часто саме цей ефект ми бачимо при перемиканні слайдів. Але насправді анімація перемикання окремих слайдів не обов’язково повинна містити цей конкретний ефект.

Слайдери можуть бути досить складними й містити: таймер, текстову частину, графічну частину, індикатор слайдів (показує, скільки всього слайдів і яким є поточний слайд), таймер відліку, кнопки навігації (вперед-назад).

Втім, слайдер може бути дуже простим і містити лише кнопки взад-вперед, або ж взагалі не містити жодних елементів управління та автоматично перемикати слайди.

Окремим випадком слайдерів можна вважати кільцеві галереї.

Модальні та діалогові об’єкти

Модальні та діалогові вікна перемістились до вебдизайну з інших графічних інтерфейсів.

Модальними називають елементи, що блокують будь-які інші дії. Це може бути зроблено, щоб сприяти завершенню користувачем запланованої дії. Наприклад, щоб він, почавши оформлювати замовлення на сайті, і поклавши товари у цифровий кошик, не відволікся на щось інше. Також це може бути зроблено для того, щоб зосередити увагу користувача на важливому повідомленні. Наприклад, «після цієї дії ви незворотно видалите обліковий запис і його зміст з нашого сайту». Як правило, щоб рухатись далі користувач має виконати якусь дію. Наприклад, натиснути одну з кнопок: «Все одно видалити» чи «Скасувати видалення».

Вікна, що пропонують користувачу вибір, часто називають діалоговими. Втім, не всі вони є при цьому модальними. Та й не всі діалогові об’єкти дійсно є вікнами в канонічному інтерфейсному розумінні. Наприклад, спливаючий елемент знизу, що запитує стосовно вашого ставлення до збереження кукі, також є діалоговим.

Банери

Банери — це інтерактивні об’єкти для внутрішньої або зовнішньої реклами. І вони бувають дуже різноманітними — статичними, анімованими, інтерактивними.

Попри те, що існують десятки типів і розмірів банерів, останнім часом стають дедалі популярнішими адаптивні банери, що змінюються відповідно до розмірів вікна браузера.

Часто вони мають кричущий, невідповідний поточному сайту дизайн. І як би нам, користувачам, це було б неприємно, задача вебдизайнерів полягає саме в тому, щоб зробити банери помітними. Тому їх часто розміщують в таких областях, де банер важко ігнорувати: понад шапкою, в колонці, що займає третину головної сторінки, прямо під головною новиною тощо.

Бувають також спеціальні додаткові механіки, що допомагають робити банери помітнішими. Наприклад: закріплення їх у нижній частині вікна браузера, анімована поява чи зміщення змісту вниз сторінки, тоді як банер з’являється вгорі.

На завершення

Звісно, в цьому матеріалі ми зібрали лише найбільш загальну інформацію про інтерактивність вебсайтів. В практичних модулях курсу «Основи вебдизайну» ви матимете нагоду дослідити її докладніше, а надалі ми сподіваємось підготувати цілу серію матеріалів, присвячену темі інтерактивності в інтерфейсах та вебсайтах.

Частково ми торкнемось цієї теми й в модулі, присвяченому зручності вебсайтів.

·
7398
·
3
·
goodsuper 150
Головна