Поліпшення досвіду взаємодії за рахунок використання карток в дизайні

image

Талановитий Нік Бабич розробник, UX/UI фахівець поділився своїм досвідом у блозі UX Planet про Поліпшення досвіду взаємодії за рахунок використання карток в дизайні. Наша команда виконала переклад цієї статті

Веб — і мобільних пристроїв вже далеко пішли від звичайних інтернет-сторінок і перетворилися в повноцінні персоналізовані системи. Ці системи побудовані на безлічі окремих фрагментів контенту. Картки –ось новий креативний концепт.

Незалежно від того, як ви ставитеся до цієї концепції, картки тепер з нами надовго.

Що таке картки?

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

image

Приклад картки.

Відмінні метафори

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

Картки – це відмінний спосіб розповісти коротку історію. Тут гарним прикладом з реального життя можуть служити бейсбольні картки. На обох сторонах такої картки міститься основна інформація про гравця.

image

Кожна картка присвячена одному гравцеві.

Організація контенту

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

image

Приклад серії карток.

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

Візуальний комфорт

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

Погляньте на Dribble, відомий сайт, який являє собою онлайн-спільнота, в якому демонструються дизайнерські роботи. У разі подання контенту даного типу картки є дійсно кращим варіантом.

image

Сайт Dribbble.

Як зробити картку

Картки для одного макета повинні бути однаковими по ширині, але можуть відрізнятися по висоті. Максимальна висота обмежена розмірами вільного простору, але воно може бути тимчасово розширене (наприклад, для відображення поля «коментарі»).

image

Картки можуть бути фіксованої або змінної висоти.

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

image

Округлені кути і короткі тіні.

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

Крім того, можна використовувати анімацію і рух.

image

Переваги карток

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

зрозуміліша форма

Ви вже знаєте, що контент – завжди в пріоритеті. Картки в дизайні – це контейнери для інформації, які можуть вмістити практично все що завгодно. Розміщення контенту у картках робить його більш помітним і зрозумілим для користувача. У зв'язку з цим користувачам простіше отримати доступ саме до того контенту, який потрібен їм. Це дає можливість користувачеві отримувати тільки ту інформацію, яку він хоче отримувати.

image

У даному прикладі подано картки з різним типом контенту

Джерело: Material Design.

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

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

image

Дизайн для сенсорних екранів

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

image

Гортання.

Де?

Потік
З'являються в потоці картки створюють природну хронологію подій. Подумайте про те, як Facebook використовує картки, щоб надати короткий огляд останніх подій в Новинній стрічці. Новинні стрічки Facebook – це нескінченний потік, а картки ділять його на індивідуальні повідомлення. Функція карток – поділ контенту. Вони витягують окремі частини контенту з нескінченного потоку і упаковують його, так що контент стає більш простим для сприйняття.

image

Поглиблення в тему

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

image

Джерело: Tinder.

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

image

Що спільного у цих двох сервісів? Вони виокремлює з сервісу тільки ту інформацію, яка актуальна в даний момент.

Діалоги

Оскільки картки – це контейнери для контенту, вони ідеально підходять для надання списку дій на вибір. Розглянемо для прикладу сервіс AirDrop на пристроях Apple. Коли у вас є вхідний запит на передачу даних, спливає картка з повідомленням і питанням: прийняти або відхилити передачу?

image

У даному випадку є тільки один варіант дій, вам не потрібно нічого вибирати. Джерело: Apple

Робочий процес

З допомогою карток легко класифікувати різні завдання. Відмінний приклад такого використання карток – Trello. Запозичена у Kanban система управління заснована виключно на картках. Робочий простір Trello – це дошка, заповнена картками, кожна з яких представляє свою окрему задачу.

image

Не використовуйте картки

Однорідний вміст
У тому випадку, якщо ваш контент представлений у вигляді швидко перегляду списку або таблиці, замість карток краще використовувати однорідне вміст, щоб не додавати безліч зайвих дій.

image

Зліва: В даному випадку використання карток заважає користувачеві швидко переглядати контент…

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

image

Зліва: Дизайн з використанням карток для зображень. Праворуч: Простий дизайн списком.

Великий розмір екрану

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

image

Редизайн існуючого програми

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

Висновок

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

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.