Словник основних UI/UX елементів

Ми користуємось більше застосунками та сайтами із зручним, зрозумілим та водночас інтерактивно цікавим дизайном. У цьому заслуга розробників сайту та веб-дизайнерів, які використовують UI/UX елементи. Не дивно, що UI/UX елементи вже давно стали  ключовим інструментом у бізнес політиці побудови сайтів або магазинів – адже хто захоче користуватись сайтом із незрозумілим та складним дизайном? 

Знання UI/UX елементів є важливим для веб-дизайнера, проте є ще більш важливим для розуміння тестувальником, який першим перевірятиме розроблений сайт на наявність помилок та багів у верстці. Адже якщо тестувальник не знатиме природу роботи та особливості UI/UX елементів, він може пропускати очевидні баги або навпаки визначити багом правильну поведінку елемента.

Ми зібрали список-глосарій найпоширеніших UI/UX елементів, котрі має знати як веб-дизайнер або розробник, так і тестувальник.

Перед тим як розглянути наш глосарій необхідно ознайомитись з категоріями UI елементів.

UI елементи мають кілька категорій: 

1. Input Controls (Контролери вводу) – елементи, за допомогою яких здійснюється введення інформації до системи. Якщо ви хочете, щоб користувачі вказували, наприклад, у якому місті вони знаходяться, то вам знадобиться елемент такого типу. 
2. Navigation Components (Навігаційні компоненти) – компоненти, які  дозволяють користувачам переміщатись по застосунку або веб-сайту. До спільних навігаційних компонентів належать панелі вкладок на пристроях iOS та меню-гамбургери на Android.
3. Informational Components (Інформаційні компоненти) – це компоненти, які вміщують у собі інформацію про продукт. 
4. Containers  (Контейнери) – компоненти, які вміщують у собі пов’язаний контент. 

Короткий глосарій UI елементів:

Чекбокс (Checkbox) – це один із найпоширеніших елементів, що дозволяє обрати елемент або декілька, наприклад при виборі параметрів товару. Зазвичай чекбокси відображаються у вертикальній колонці, проте іноді використовуються дві колонки для порівняння або якщо перелік опцій дуже довгий.

Радіокнопка (Radio Button) – елемент дуже схожий на чекбокси, але відрізняється тим, що можна  вибрати тільки один з декількох варіантів і зазвичай позначається кружечком.

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

Також існує варіація List boxes, яка дозволяє вибрати декілька варіантів із випадаючого списку.

Кнопка (Button) – найпростіший елемент, що дозволяє користувачу взаємодіяти з формами на сайті.

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

У широкому сенсі, кнопкою називають будь-який екранний елемент з окресленою межею, натискання на який призводить до якоїсь дії.

Кнопка має два стани – «натиснуто» і «відпущено», також може бути зафіксований стан (зберігається поточний стан після завершення натискання). Для керування з клавіатури, кнопка може бути забезпечена керованим фокусом вводу: при отриманні фокусу, клавіатурний ввід (зазвичай – «Enter») ініціює натискання на кнопку.

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

Курсор миші змінює свою форму на руку після наведення на кнопку. 

Однією із різновидностей кнопок також є така, що випадає та анімована кнопки.

Перемикач (Toggle) – прапорець, який дозволяє вибрати між «Так» або «Ні», або позначає, що якийсь функціонал вимкнено або ввімкнено.

Поле вводу (Input Field) – елементи, які дозволяють користувачу вводити текстову інформацію в один або більше рядків.

Типове текстове поле являє собою прямокутник будь-якого розміру, можливо з рамками, які відділяють його від іншого інтерфейсу. Текстові поля можуть містити також одну або дві прокрутки. У активованому полі зазвичай відображається текстовий курсор (блимає вертикальна лінія), що вказує на поточну область редагованого тексту. Курсор миші змінює свою форму на текстовий після наведення на поле.

Селектор (Picker) – елемент, який дозволяє обрати одразу декілька пов’язаних між собою значень одним вибором. Зазвичай він використовується в календарях для вибору дати чи періоду дат, в годинниках, а також для вибору валют/країн.

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

Поле пошуку (Search Field) – це пошукове поле, яке дозволяє користувачу здійснити пошук за допомогою введення ключового слова. Після його заповнення відбувається відображення результатів. Зазвичай біля такого поля завжди знаходиться кнопка пошуку із символом лупи в центрі.

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

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

Тег (Tag) – це по суті, мітка, яка допомагає маркувати і класифікувати контент. Зазвичай теги складаються з релевантних та ключових слів, які  полегшують пошук і перегляд відповідного фрагмента контенту.

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

Степпер (Stepper) – це елемент керування, який дозволяє користувачам регулювати значення. Проте на відміну від повзунка, він дає можливість  користувачам змінювати значення тільки в наперед визначених діапазонах у  налаштованому  кроці.

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

Bento Menu, Döner Menu, Hamburger Menu, Kebab Menu, Alt-burger, meatball – типи іконок  для меню на різних пристроях або платформах, названі в честь страв.

Проте, крім вищезгаданих смачних назв іконок, існують ще іконки подібних видів, але з іншими назвами. Їх також можна використовувати, описуючи інтерфейс застосунка:

Карусель (Carousel) – елемент, який надає змогу користувачам переглядати  контент, а саме зображення або картки, часто також гіперпосилання на велику кількість контенту або джерела. Карусель може прогортуватися як автоматично, так і примусово за допомогою стрілок. Найбільшою перевагою використання таких елементів у дизайні UI є те що, вони дозволяють декільком фрагментам займати одну й ту саму область на сторінці або екрані.

Сповіщення (Notification) – елемент, появу якого користувач може налаштувати самостійно. Зазвичай сповіщення відображаються користувачу, інформуючи про оновлення застосунка, статусу чи надходження повідомлення.

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

Прогрес бар (Progress Bar) – елемент, який  допомагає у візуалізації того, на якому кроці знаходиться користувач. Зазвичай вони відображаються під час завантаження контенту, оформлення замовлення, завантаження застосунків, ігор тощо.

Підказка (Tooltip) – це невелике інформаційне повідомлення, яке допомагає користувачам зрозуміти елемент або процесс в інтерфейсі.

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

Коментар (Comment) – текстове повідомлення, яке можна залишити під певним контентом. Зазвичай коментарі направлені на обговорення чи оцінку чого-небудь. Зазвичай коментарі можуть залишати авторизовані на сайті або в застосунку користувачі.

Стрічка/Фід (Feed) – елемент без якого складно уявити такі соцмережі як Facebook, Twitter, Instagram тощо. Зміст стрічки варіюється від простого тексту до зображень та відео.

Форма (Form) – елемент, що використовується для заповнення користувачем інформації про себе, яка в подальшому буде використана в його акаунті, наприклад в онлайн-магазині. Форми можуть складатися з полів вводу, перемикачів, радіокнопок, чекбоксів, випадаючих списків тощо. Зазвичай заповнена форма надсилається за допомогою підтверджуючої кнопки.

Лоудер (Loader) – елемент основна ціль якого – це відобразити індикатор завантаження, поки на фоні відбувається певна дія.

Бокова панель (Sidebar) – елемент для відображення додаткового контенту, меню чи налаштувань, які не призначені для основного блоку.

Панелі вкладок (Tab Bar) – відображаються у нижній частині мобільного застосунка і дозволяють користувачам швидко переміщатись між основними розділами  застосунка.

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

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