Шпаргалка з UI-елементів на різних платформах
Всім привіт, мене звати Аня, я — Middle QA в BookBoost. Раніше ви могли читати мою статтю про техніки тест-дизайну. Сьогодні хочу трішки більше розповісти про UI-елементи та їх використання.
Часто, описуючи баг-репорти, тест-кейси, чи тестуючи дизайн, я стикалась з тим, що деякі UI-елементи по-різному називаються на різних платформах. Або мають аналоги зі схожою функціональністю. Використання правильних UI-елементів важливе для створення якісного продукту, яким будуть задоволені користувачі.
Тому я вирішила створити гайд за основними елементами UI для швидкого та практичнішого розуміння дизайну.
Ця шпаргалка буде корисна не тільки досвідченим тестувальникам, але й новачкам, оскільки деколи й на співбесідах чи технічних рев’ю часто питають за різні UI-елементи. Сподіваюсь, вона буде корисною і цікавою для вас.
Шпаргалка UI-елементів
Трішки теорії... UI-елементи — це компоненти, які складають візуальну мову програми або сайту. Вони забезпечують інтерактивність, дозволяючи користувачам вводити інформацію, переміщатися системою та отримувати доступ до відповідного вмісту. Роль дизайнерів є життєво важливою у створенні плавного та зручного досвіду шляхом стратегічного використання цих елементів.
Існують чотири основні категорії елементів дизайну інтерфейсу користувача:
- Input Controls — дозволяють користувачам вводити інформацію в систему. Вони необхідні для збору даних і взаємодії користувачів. Деякі типові приклади елементів керування введенням містять текстові поля, спадні меню, світчери і так далі.
- Navigation components — допомагають користувачам пересуватися програмою чи сайтом. Вони надають чіткий та інтуїтивно зрозумілий спосіб навігації різними розділами й сторінками. Деякі типові приклади навігаційних компонентів: меню, вкладки та навігаційні шляхи.
- Information components — це елементи інтерфейсу користувача, які надають йому інформацію. Вони передають важливі повідомлення, оновлення чи інструкції. Деякі типові приклади інформаційних компонентів: сповіщення, спливаючі підказки та індикатори виконання.
- Containers — групують схожий вміст, полегшуючи користувачам навігацію та сканування в інтерфейсі. Приклади звичайних контейнерів: картки, каруселі та акордіони, які забезпечують структуру та організацію вмісту.
iOS, Android і Web (web browsers) вважаються різними платформами, і кожна з них має власні унікальні рекомендації щодо дизайну, інтерфейс користувача та рамки розробки.
Apple має свої Human Interface Guidelines (HIG), які допомагають розробникам створювати інтуїтивно зрозумілі та гармонійні інтерфейси для iOS, MacOS, tvOS. Вони містять інструкції щодо використання навігації, кнопок, анімацій, іконок та кольорів, щоб забезпечити чіткий і зручний досвід користувача.
Google пропонує Material Design, який встановлює чіткі принципи щодо компонування, анімацій, кольорів і текстур для створення приємного й узгодженого досвіду користувача. Material Design робить акцент на використанні глибини, тіней і яскравих кольорів для покращення інтуїтивного розуміння інтерфейсу.
У веброзробці дизайнери орієнтуються на Web Content Accessibility Guidelines (WCAG) для забезпечення доступності, а також на принципи Responsive Web Design для адаптації контенту під різні розміри екранів. У веброзробці також застосовуються індивідуальні стилістичні фреймворки, такі як Material Design для веб-застосунків.
|
№ |
Name |
UI element view |
WEB |
IOS |
ANDROID |
Links |
|
Input Controls | ||||||
|
1 |
Text field — текстові поля використовуються для збору текстової інформації від користувачів. Часто — для введення імен, адрес або коментарів. |
|
Text field |
Text field |
Text field | |
|
2 |
Buttons — інтерактивні елементи, які користувачі можуть натиснути, щоб ініціювати дію або надіслати форму. Вони часто мають мітки, що вказують на дію. |
|
Buttons |
Buttons |
Buttons | |
|
3 |
Dropdown menu — випадаючі меню надають користувачам список параметрів, з яких вони можуть вибрати один. Зазвичай використовуються для вибору країни, мови або категорії. |
|
Dropdown menu |
В HIG немає такого елементу, як drop-down menus, проте Apple пропонує альтернативи із подібною функціональністю, як-то pull-down button’s menu чи action sheets |
Dropdown menu | |
|
4 |
Checkboxes* — дають користувачам змогу вибрати одну або кілька опцій зі списку. Часто використовуються у формах або налаштуваннях, щоб дозволити користувачам вибрати свої переваги. |
|
Checkbox |
Офіційно в HIG немає такого компонента, радять використовувати аналог Toggles |
Checkbox | |
|
5 |
Radio Buttons* — є типом інструменту вибору, який дозволяє користувачам вибрати лише один варіант зі списку вибору. |
|
Radio Buttons |
Альтернативою є Segmented controls чи Pickers |
Radio Buttons | |
|
6 |
Combo boxes — вони поєднують у собі функції текстового поля та випадаючого списку. Користувачі можуть ввести відповідь або вибрати з попередньо визначеного списку, натиснувши стрілку спадного меню. Це забезпечує гнучкість як для ручного введення, так і для вибору з набору параметрів. |
|
Combo boxes |
Combo boxes |
Combobox як елемент не прописаний в Material Design. Радять називати й використовувати Text field with dropdowns, | |
|
7 |
Toggles — елементи інтерфейсу, які дозволяють користувачам перемикатися між двома станами, зазвичай «увімкнено» та «вимкнено». |
|
Toggle Switches |
Toggle |
Switch | |
|
8 |
Date pickers — Елементи інтерфейсу, які полегшують вибір дат із календаря. Зазвичай користувачі можуть вибрати дату, клацнувши певний день, місяць і рік у наданому інтерфейсі. |
|
Date pickers |
Pickers |
Date pickers | |
|
9 |
Sliders — це елементи дизайну інтерфейсу, які дозволяють користувачам вибирати значення або діапазон значень, перетягуючи повзунок пальцем чи мишею. Зазвичай вони використовуються для налаштування параметрів, як-то гучність, яскравість або бажаний діапазон цін. |
|
Sliders |
Sliders |
Sliders | |
|
10 |
Search bar — UI-елемент, який дозволяє користувачам вводити пошукові запити або ключові слова, щоб знайти певну інформацію в програмі або на вебсайті. Зазвичай вони відображаються як поля введення з іконкою пошуку |
|
Search bar |
Search field |
Search bar | |
|
11 |
Steppers — це двосегментний елемент керування, який люди використовують для збільшення або зменшення додаткового значення. |
|
Steppers |
Steppers |
На Андроїді використовують Number pickers, який дозволяє користувачам вибрати число з визначеного діапазону. |
Material Design: |
|
* Попри те, що Apple в HIG не прописали про чекбокси та радіобатони, а радять використовувати аналоги, багато застосунків на IOS (наприклад, той самий Bolt food, Glovo) — мають такі опції для користувачів. | ||||||
Navigational Components | ||||||
|
12 |
Navigation bar (navbar) — це звичайний елемент інтерфейсу користувача, який знаходиться у верхній частині вебсторінки чи програми. Зазвичай він містить посилання або кнопки на основні розділи сайту чи програми, що дозволяє легко переміщатися та отримувати доступ до різних сторінок. |
|
Navigation bar / Navigationpanel |
Navigation bar |
Navigation bar | |
|
13 |
Tabs — вкладки надають користувачам можливість переміщатися між різними розділами або переглядами в програмі чи на сайті. |
|
Tabs |
Tabs |
Tab bar | |
|
14 |
Breadcrumbs — показують користувачам поточне розташування в програмі чи на сайті та надають посилання на попередні сторінки. |
|
Breadcrumbs |
Не типовий елемент для мобільних застосунків, зазвичай використовуються back buttons |
Не типовий елемент для мобільних застосунків, зазвичай використовуються back buttons | |
|
15 |
Pagination — це елемент інтерфейсу користувача, який організовує вміст на сторінці, дозволяючи переходити між різними розділами інформації. |
|
Pagination |
Page Controls |
Material Design не має спеціального компоненту пагінації, але він пропонує альтернативи. Однією із поширених альтернатив є використання infinite scrolling або завантаження додаткових кнопок по типу «Load more» buttons |
Material Design: - |
|
Menus — більшість загальновідомих меню названі на честь їжі, тут є класна стаття про ці всі види: Why are UX & UI people so obsessed with naming components and icons after food. Загалом я надавала посилання на Menus по Material Design / HIG. Окремих секцій по кожній назві цих меню немає в гайдлайнах, в основному назви залишаються такі самі, але є пару винятків. | ||||||
|
16 |
Burger menu (Hamburger menu) — це елемент інтерфейсу, який складається з трьох горизонтальних ліній, розташованих одна на одній, що нагадує гамбургер. Він являє собою меню зі списком і зазвичай використовується в мобільних застосунках і адаптивному вебдизайні. Мабуть, найпопулярніший з усіх меню. |
|
Burger menu |
Burger menu Хоча Apple підтримує використання burger menu, Apple HIG надає перевагу більш видимій навігації, як-от tab bars, і часто не рекомендує використовувати burger menu як основний метод навігації |
Burger menu | |
|
17 |
Kebab menu — це елемент дизайну інтерфейсу користувача, який складається з трьох вертикальних крапок, розташованих одна на одній, що нагадує шашлик. Він представляє набір згрупованих параметрів і зазвичай використовується в мобільних застосунках і адаптивному вебдизайні. |
|
Kebab menu |
iOS зазвичай використовує горизонтальні крапки (...) ellipsis для додаткових параметрів, але іноді ви можете бачити вертикальні крапки в деяких програмах |
Kebab menu | |
|
18 |
Meatballs — це елемент інтерфейсу користувача, який складається з трьох горизонтальних крапок, розташованих одна на одній, що нагадує стопку фрикадельок. Являє собою набір додаткових параметрів, які відкриваються, коли користувачі натискають на точки меню. |
|
Meatballs menu |
Meatballs/ ellipsis Apple спеціально не називає це meatballs menu, подібне меню може бути представлено крапками (...), або вертикальними крапками (kebab menu). Програми для iOS частіше використовують горизонтальні три крапки (...) |
Meatballs menu | |
|
19 |
Alt — Burger (or veggie burger) — це елемент, який складається з двох горизонтальних ліній, розташованих одна на одній, що нагадує бургер без м’ясної котлети. |
|
Alt-Burger menu / veggie burger / burger menu |
Burger menu Хоча Apple підтримує використання різних видів burger menu, Apple HIG надає перевагу більш видимій навігації, як-от tab bars, і часто не рекомендує використовувати burger menu як основний метод навігації |
Burger menu | |
|
20 |
Fries — це елемент інтерфейсу користувача, який складається з трьох горизонтальних ліній. Посередині лінія трішки коротша, що нагадує перевернуту картоплю фрі. |
|
Fries |
Fries |
Fries | |
Information componentsДля кращого розуміння, ми можемо поділити деякі інформаційні компоненти на категорії. Popups — це ширший термін, який охоплює різні типи тимчасових елементів інтерфейсу користувача, включно з модалками. В деяких джерелах поп-апи ділять на чотири категорії: modals та nonmodals (взаємодія залишається доступною або недоступною для користувачів); lightboxes та nonlightboxes (вплив на фоновий бекграунд). Modals — це певний тип спливаючих вікон, які вимагають взаємодії з користувачем і блокують доступ до іншого вмісту. Nonmodals — поп-ап, при якому взаємодія з користувачем продовжується. Lightboxes — це поп-ап, фон якого затемнений. Частіше modals роблять з затемненим фоном, проте lightboxes не завжди є модалками. Nonlightboxes — якщо поп-ап немає затемненого фону. Згідно з статтею 10 Problematic Trends and Aternatives, modals вимикають весь фоновий вміст, nonmodal зберігають можливість користувачів взаємодіяти з фоновим вмістом, а lightboxes затемнюють фоновий вміст. | ||||||
|
21 |
Tooltips — підказки надають додаткову інформацію або контекст, коли користувачі наводять курсор на певні елементи, або клацають їх. Можна використовувати для пояснення призначення, або як функціональні кнопки, піктограми, чи посилання. |
|
Tooltips |
Popovers |
Tooltips | |
|
22 |
Toast notifications — повідомлення, які в основному з’являються після успішної/неуспішної дії від юзера («The email is sent»/ «Success»/ «The item is not found») |
|
Toasts, toast messages |
Notifications |
Toasts / Snackbars | |
|
23 |
Contextual Menus — пропонування додаткових дій або параметрів, пов’язаних із певним елементом, або областю при клацанні правою кнопкою миші чи наведенні мишею. Часто зустрічається як опція редагування, видалення, чи створення нового параметру. |
|
Context menu |
Context menu |
В Material Design contextual menus підтримуються як floating menus and action bars. | |
|
24 |
Confirmation dialogs — модальні вікна,в яких юзер повинен спростувати чи підтвердити дію. |
|
Modal confirmations / Alert dialogs |
Action Sheets |
Dialogs | |
|
25 |
Alert messages — сповіщення зазвичай використовуються для передачі важливої інформації, попередження, або для підказки користувачам щодо введення чи прийняття рішень. |
|
Alert messages |
Alerts |
Dialogs | |
|
26 |
Image / video viewers — відображення збільшених зображень, або відео з одночасним затемненням фонового вмісту |
|
Image or video viewers / |
Full Screen View |
Full-screen dialogs | |
|
Other information components | ||||||
|
27 |
Progress bars — — це елементи інтерфейсу користувача, які використовуються для візуальної індикації прогресу виконання завдання або операції. |
|
Progress bar |
Progress indicators |
Progress indicators | |
|
28 |
Badges — це певні значення, що перекриваються або відображаються на різних компонентах інтерфейсу, наприклад на аватарках, кнопках, іконках тощо. |
|
Badges |
Badges |
Badges | |
|
29 |
Icons — графічні символи або маленькі зображення, що використовуються для представлення дій, об’єктів, або понять. Вони служать візуальними підказками, які допомагають користувачам швидко зрозуміти інтерфейси та орієнтуватися в них. |
|
Icons |
Icons |
Icons | |
Containers | ||||||
|
30 |
Cards — це компонент дизайну інтерфейсу, який зберігає вміст. Іншими словами, ці картки є контейнерами вмісту. Зазвичай дизайн інтерфейсу користувача зі списком карток складається з медіачастини, заголовка, підтримуваного тексту та дії, яку може викликати дизайн картки. |
|
Cards |
HIG не містить cards як UI-елемент, радить використовувати аналоги як Widgets |
Cards | |
|
31 |
Accordion — акордіони допомагають користувачам швидко орієнтуватися в матеріалі та дозволяють дизайнеру вміщати великі обсяги інформації в обмеженому просторі. |
|
Accordion |
Disclosure Controls як альтернатива |
Зараз цей елемент (колись був в M1 Expansion panel) знаходиться під List Component | |
|
32 |
Lists — списки складаються з елементів, які містять основні та додаткові дії, що представлені значками та текстом. |
|
Lists |
Lists |
Lists | |
|
33 |
Grids — забезпечують систематичну структуру, яка допомагає організувати та вирівняти елементи в межах layout. Розуміючи структуру grids, ви можете досягти гармонійних композицій, які покращують візуальну ієрархію, покращують читабельність і створюють цілісну взаємодію з користувачем. |
|
Grids |
HIG використовують safe areas, layout margins, and spacing guides, які слідують grid системі |
Layouts В Material Design M2 є стаття про grids | |
|
34 |
Carousel — часто використовуються для демонстрації кількох частин вмісту в обмеженому просторі, дозволяючи користувачам гортати або клацати елементи. Залежно від конструкції каруселі можуть бути автоматичними або ручними. |
|
Carousel |
HIG прямо не посилаються на компонент каруселі за назвою, але цю концепцію можна реалізувати за допомогою інших компонентів, таких як page controls, scroll views, або collection views |
Carousel | |
|
35 |
Sidebar — це елементи дизайну інтерфейсу користувача, які відображають групу навігаційних дій або вмісту поряд з основним інтерфейсом. Зазвичай вони розташовані збоку від екрана та можуть бути видимими чи прихованими. |
|
Sidebar |
Sidebar |
Navigation Drawers | |
Висновок
Розуміння елементів дизайну інтерфейсу є фундаментальним аспектом, що може значно вплинути на загальний досвід користувачів. Чітке уявлення про функції та варіації різних вебелементів дозволяє значно покращити якість тестування, забезпечуючи відповідність дизайну їхнім вимогам.
Це, своєю чергою, допомагає виявляти потенційні проблеми з юзабіліті, оптимізувати взаємодію користувачів з інтерфейсом та підвищити загальну ефективність продукту. Завдяки всебічному тестуванню, яке охоплює як функціональні, так і візуальні аспекти елементів, ви можете гарантувати високий рівень якості вебзастосунків і забезпечити позитивний користувацький досвід.
Цей підхід також сприяє швидкому виявленню можливих помилок у верстці, неправильному розташуванню або стилізації компонентів, що є ключовими для успіху будь-якого проєкту.
Nikolay Aliferov
Pashnyuk Denys
Ivan Peron
Alona Kostemska
Roman T
Marharita Ilinova
Roman T
Yevhen Boiko
SerJey Purkar
Veronika Liashenko
Артур Лозовий
Andrii Zatullo
Taras Gaw
18 коментарів
Додати коментар Підписатись на коментаріВідписатись від коментарів