UXPUB 🇺🇦 Дизайн-спільнота: Редакція

Пагінація, нескінченний скрол або кнопка "Завантажити ще"

Редакція — Tue, 05 Sep 2023 15:35:20 +0000

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

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

Вступ

Уявіть, що ви щасливий маленький сервер у великій серверній кімнаті. Ви можете впоратися з кількома завданнями одночасно, здебільшого, просто надсилаючи контент людям, коли вони про це просять. Життя прекрасне. І ось одного разу вас просять відправити 926 трильйонів елементів 4 мільйонам різних людей. Ви, ймовірно, збожеволієте і помрете*, а люди, які надіслали вам запит, теж помруть (але від нудьги, в очікуванні, поки завантажаться дані). І саме тому в нас є пагінація, нескінченний скрол і кнопка "Завантажити ще".

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

У двох словах:

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

Нескінченний скрол (нескінченна прокрутка, англ. - Infinite scroll) змушує вас думати, що весь контент уже було завантажено, але насправді він завантажується під час прокручування сторінки. Наприклад, Instagram.

Кнопка "Завантажити ще" (Load more button) - це кнопка внизу сторінки, яка дає змогу завантажувати більше результатів. Наприклад, кнопка "Ще результати" в Google Images.

Приклад пагінації, нескінченного скролу і кнопки "Завантажити ще"

*Я поняття не маю, як помирають сервери. Я уявляю, що при цьому вони співають "Не плач за мною, Аргентино". Але це не точно.

2. Пагінація

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

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

2.1. Довідка

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

Плюси:

Популярний на сайтах електронної комерції.
Дозволяє користувачам досліджувати сторінки та посилатися на них ("Сережки, що мені сподобалися, були на сторінці 3").
Підходить для сайтів, де важливе замовлення товарів.

Мінуси:

Людям здається, що контент завантажується повільно і довго. (посилання)
Може статися так, що доведеться перевіряти кожну сторінку, а потрібного товару там не виявиться.
Оскільки це досить "старий" патерн, я підозрюю, що більшість людей вважають його старомодним порівняно з нескінченним скролом.
Навігаційні елементи на мобільному пристрої мають бути простішими через товсті пальці (чи це тільки моя проблема? *Швидко ховає руки *).

Інтересно:

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

Часто використовується:

На сайтах електронної комерції
У результатах пошуку
У довідкових каталогах

2.2. Скільки елементів слід розташовувати на сторінці

Отже, скільки елементів слід розташовувати на сторінці? Це залежатиме від кількох факторів: а) Чи використовуєте ви сітку або список, б) Чи є у вас компонент "n елементів на сторінці"? в) Наскільки великі елементи?

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

Вид сітки
Sears: 50
Toy's R Us: 100
Shutterstock: 27
Amazon: 48

Вид списку
Udemy: 20
Alibaba: 48
CNN: 10
Пошук Google: +/- 10 елементів (залежно від того, чи вважаєте ви рекламу)
Amazon: 16

Вид сітки з компонентом "n"
Macy's: 60 (за замовчуванням) або 120
Superbalist: 24 (4 в ряд) (за замовчуванням), або 72 (6 в ряд), або 72 (8 в ряд)
Newegg: 36 (за замовчуванням) або 60, або 90
Currys PC World: 20 (за замовчуванням) або 30, або всі
Wondery: 10 або 20 (за замовчуванням), або 50, або 100
Foyles: 10 or 20 (за замовчуванням), або 50, або 100, або 200
Barns & Noble: 20 (за замовчуванням) або 40

Список із компоненом "n елементів на сторінці"
eBay: 25 або 50 (за замовчуванням), або 100, або 200

Дані щодо компонента "n елементів на сторінці" було зібрано 14 травня 2020 року.

Питання: Отже, яка ідеальна кількість елементів на сторінці?

Відповідь:Не знаю. Якщо ви подивитеся на всі перераховані вище значення, то побачите, що кількість на різних сайтах сильно відрізняється (за винятком сайтів із сіткою і компонентом "n елементів на сторінці").

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

2.3. Компонент: Навігація

Кнопки "Next/Previous" - це основний спосіб навігації по сторінках, тому має сенс зробити їх досить помітними. Оскільки користувачі з більшою ймовірністю шукатимуть кнопку "Next", переконайтеся, що вона має домінуючий стиль (або є "кнопкою основної дії", якщо ви читали мою статтю про кнопки).

Приклад посторінкової навігації

У зв'язку з обмеженістю простору на мобільному телефоні краще використовувати номери сторінок не тільки як індикатори, а й як кнопки для навігації.

Приклад навігації по сторінках на мобільному телефоні

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

Приклад компонентів навігації по сторінках на першій сторінці: на верхній сторінці кнопка "Previous" відключена, на нижній - кнопка прихована

ВАМ потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Так. Без нього ви не зможете переміщатися по сторінках.

2.4. Компонент: Фільтри

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

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

Фільтрація вгорі сторінки

Другий стиль фільтрації вирівнюється по лівому краю. Я б запропонувала використовувати цей стиль, якщо у вас багато категорій, а вашому списку / сітці не потрібна ширина всієї сторінки.

Приклад бічних фільтрів

Вам потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Це очікуваний елемент, але не обов'язковий.

2.5. Компонент: сортування

Сортування дає змогу користувачеві впорядкувати контент за бажанням. У той час як більшість з міленіалів, сортують замовлення за "найнижчою ціною" - це не найголовніше для всіх. За замовчуванням слід обирати сортування "most relevant", якщо ви потрапили на цю сторінку за допомогою пошукового запиту. Якщо користувач просто клацає по каталогу без додавання умов пошуку, ви також можете вибрати за замовчуванням "most relevant", але, розгляньте можливість вибору за критеріями "most rated" або "newest".

Приклад сортування

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

Найбільш релевантне
Часто переглядається
Найбільше число оцінок
Найпопулярніше
Новинки
Найнижча ціна
Найвища ціна
В алфавітному порядку: А-Я
В алфавітному порядку за ім'ям: А-Я
В алфавітному порядку за прізвищем: А-Я
Вищий бал
Найнижчий бал

І т.д.

Вам потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Це очікуваний елемент, але не обов'язковий.

2.6. Компонент: n елементів на сторінці

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

Приклад компонента "n елементів на сторінці"

ВАМ потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Непогано його додати.

2.7. Компонент: відображення результатів

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

Приклад компонента відображення результатів

Зазвичай цей компонент не показується без компонента "n елементів на сторінці". Іноді вони можуть розташовуватися поруч.

Приклад комбінації компонентів "відображення результатів" і "n елементів на сторінці"

ВАМ потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Це очікуваний елемент, але не обов'язковий.

2.8. Компонент: Перемикання виду з сітки на список

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

Приклад компонента перемикача сітки або списку

Ви також можете перемикати ширину сітки, використовуючи цей компонент. Це дуже корисно при здійсненні покупок онлайн.

Приклад компонента "ширина сітки"

Вам потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Непогано його мати, але не обов'язково.

2.9 Компонент: Алфавітний покажчик

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

Приклад компонента Алфавітний покажчик

Вам потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Ймовірніше за все, ні, якщо ви не розробляєте глосарій або щось подібне. Використовуйте замість цього пошук.

2.10. Компонент: Перейти до

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

Приклад компонента "Перейти до"

ВАМ потрібен ЦЕЙ КОМПОНЕНТ ДЛЯ ПАГІНАЦІЇ? Непогано його мати, але не обов'язково.

3. Нескінченний скрол

Пам'ятаєте, як усі (наприклад, мій старий бос) говорили "скрол мертвий", "користувачам не подобається скролити", і, якщо розташувати на сайті щось "нижче згину", то ніхто ніколи не побачить це? Що ж, запрошую вас разом посміятися над ними.

Поїхали далі.

Нескінченний скрол - це квінтесенція "поведінки користувача під час перегляду" (перепрошую за використання слова "квінтесенція", я нещодавно дивилася фільм "Таємне життя Волтера Мітті", і тепер це моє улюблене розумне слово). Найкраще підходить для розважальних сайтів, ви просто скролите, скролите і скролите, і, коли ви це робите, час (і ваше життя) починає зникати. Однак, цей патерн жахливий для електронної комерції. Уявіть, що ви намагаєтеся знайти те, що ви бачили 30 скролів тому? Отже, він здебільшого використовується у сфері розваг.

"Скрол - це продовження; клік - це рішення"

- Джошуа Портер

3.1. Довідка

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

Плюси:

Безкінечний скрол може викликати звикання.
Має швидкий час завантаження.
Це "модно".
Має тривалі періоди взаємодії з користувачем.
Прокрутка - це очікувана поведінка, особливо на сенсорних екранах.
Це добре для зображень.

Мінуси:

Безкінечний скрол може викликати звикання.
Це справді погано для пошуку контенту. Адже важко знайти те, що ви бачили раніше.
Користувачі менше фокусуються на контенті. (посилання)
Ваш користувач майже ніколи не побачить футер (якщо він у вас є).
Не підходить для результатів текстового пошуку.
Навігація може стати складною, і користувачам, можливо, доведеться прокрутити весь шлях догори, щоб дістатися до навігаційної панелі (якщо вона не липка).
Існують непевні чутки про заборону нескінченного скролу. (посилання)
Складніше відстежувати аналітику (у designshack.com є пропозиція, що з цим робити).
У вас можуть бути проблеми з продуктивністю, якщо у користувача поганий сигнал.

Цікаво:

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

Приклади:

Я ще не стикалася з сайтом електронної комерції, що використовує нескінченний скрол*, і, наскільки можу судити, його використовують в основному сайти розваг і соціальних мереж, наприклад:

Instagram
Twitter
Pinterest
Facebook
YouTube
Google play

* Доповнення після публікації статті: Saurav Pandey нагадав мені, що деякі мобільні версії (m.) сайтів електронної комерції використовують нескінченний скрол, наприклад: _https://m.snapdeal.com/.

Дякую!

3.2. Компонент: Липка панель навігації

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

Приклади липкої навігації на мобільному телефоні

ВАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ БЕЗКІНЧАЛЬНОГО СКРОЛЛА? Так, він необхідний.

3.3. Компонент Instagram "Ви подивилися всі новини"

Пам'ятаєте, як лежачи на дивані ми годинами гортали Instagram? І ось одного разу ми побачили повідомлення "Ви подивилися всі новини". Додаток буквально закричав: "Встань з дивана, ти витрачаєш своє життя!" Так, це був важкий день і для мене.

У минулому Instagram зазнавав сильної критики, тому що люди не могли відстежувати, що вже бачили, тому Instagram і представили цей компонент. Спочатку він мені не подобався, але він поліпшив мій досвід, і особисто я дуже ціную свої 10-хвилинні сеанси скролу (особливо в період карантину).

Приклад компонента "Ви подивилися всі новини", натхненного Instagram

ВАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ БЕЗЛІМІТНОГО СКРОЛЛУ? Залежно від вашої платформи.

3.4. Компонент: Індикатор завантаження

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

Якщо у вас погане підключення до інтернету або сервер працює повільно, вам доведеться дивитися на індикатор завантаження. Це здаватиметься вічністю. Індикатор завантаження дає змогу зрозуміти, що платформа обробляє запит. Це свого роду пульс - він дає вам знати, що тіло живе, навіть якщо ви почуваєтеся мертвим після мільйонного скролу в Instagram.

МАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ БЕЗКІНЧАСНОГО Скроллу? Так, обов'язково.

4. Кнопка "Завантажити ще"

Кнопка "Завантажити ще" - це третя дитина, про яку ніхто не говорить, а коли про неї згадують, то порівнюють її з братами і сестрами. Дивно, що цьому патерну не приділяють уваги, оскільки він використовується однією з найбільших пошукових систем у світі - Google. Вони використовують його на мобільних пристроях і в Google Images (і, можливо, в інших місцях, але, гадаю, цього достатньо).

4.1. Довідка

Плюси:

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

Мінуси:

Як і з нескінченним скролом, важко знову знайти переглянутий раніше результат.

Інтересно:

У цього патерну є "кінець", і він не буде продовжувати нескінченно довантажувати контент, як Pinterest.

Приклади:

Google (на мобільних пристроях)
Google Images
Harvard Business Review (у пошуку)
Stitcher
Marks and Spencer

4.2. Компонент: Кнопка "Завантажити / Показати більше результатів"

Це кнопка, без якої цей патерн не працюватиме. Щойно ви досягнете нижньої частини сторінки, вона з'явиться, сигналізуючи про те, що ви можете завантажити більше контенту.

Приклад кнопки "Завантажити / Показати більше результатів"

Одна з речей, з якою вам доведеться визначитися - це мітка кнопки. "Load more", "Show more results" and "More results" - найпоширеніші варіанти.

ВАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ КНОПКИ "ЗАВАНТАЖИТИ ЩЕ"? Так, обов'язково.

4.3. Компонент: Індикатор завантаження

Як і з нескінченним скролом, вам, імовірно, знадобиться індикатор завантаження. Він буде запускатися тільки при натисканні кнопки "Завантажити ще".

Приклад індикатора завантаження

ВАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ КНОПКИ "ЗАВАНТАЖИТИ ЩЕ"? Так, обов'язково

4.4. Компонент: Рекомендовані теги пошуку

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

Приклад рекомендованих тегів пошуку

ВАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ КНОПКИ "ЗАВАНТАЖИТИ ЩЕ"? Це необов'язковий елемент.

4.5. Компонент: Кнопка "Скрол до початку сторінки"

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

Приклад кнопки "Скрол до початку сторінки"

ВАМ ПОТРІБЕН ЦЕЙ КОМПОНЕНТ ДЛЯ КНОПКИ "ЗАВАНТАЖИТИ ЩЕ"? Це необов'язковий елемент.

5. Думки на закінчення

Запитання: Отже, пагінація, нескінченний скрол або кнопка "Завантажити ще" - що ви маєте використовувати?

Відповідь: все залежить від того, який продукт ви намагаєтеся створити.

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

Вдалого проектування!

6. Посилання та статті за темою

Плюси та мінуси нескінченного скролінгу: https://www.webdevelopmentgroup.com/2017/06/the-pros-and-cons-of-infinite-scroll/
Прокрутка простіше, ніж клацання: http://bokardo.com/archives/scrolling-easier-clicking/
Нескінченна прокрутка: За і проти: https://designshack.net/articles/layouts/infinite-scrolling-pros-and-cons/
Нескінченна прокрутка, пагінація або кнопки "Завантажити більше"? Юзабіліті висновки в електронній комерції https://www.smashingmagazine.com/2016/03/pagination-infinite-scrolling-load-more-buttons/

Переклад статті uxdesign.cc

Що таке дизайн-токени? Давайте розбиратися разом

Редакція — Tue, 05 Sep 2023 15:23:14 +0000

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

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

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

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

Концепція токенів дизайну була спочатку представлена Джиною Болтон і Джоном Левіном у їхньому виступі "Використання токенів дизайну з дизайн-системою Lightning" .

Відмінності між звичайними змінними і токенами

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

$blue-400 = #2680EB;

Змінна $blue-400 може використовуватися в препроцесорі CSS, такому як SASS. Хоча цей підхід допоможе вам структурувати варіанти дизайну, у нього є один важливий недолік: змінні не обов'язково усувають розрив між іменуванням і використанням. Дизайнерам потрібно знати, які параметри вони мають застосовувати в конкретному контексті, і саме тут у гру вступають токени:

$button-cta-background-color = $blue-400;

Назва цього токена - $button-cta-background-color - дає зрозуміти, що колір $blue-400 слугує кольором фону для кнопки заклику до дії.

Ілюстрація різниці між змінною (blue-400) і токеном (button-cta-background-color). Зображення Adobe.

Як токени допомагають процесу проєктування

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

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

Токени допускають гнучкий дизайн

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

Токени створюють єдиний вигляд

Можливість створення єдиного зовнішнього вигляду на різних платформах - ще одна перевага токенів. Вони допомагають синхронізувати значення вашої дизайн-системи в усіх проєктах, і ви можете відформатувати їх відповідно до потреб будь-якої платформи. Наприклад, проєктуючи веб-версію свого продукту, ви можете використовувати HEX-значення кольору з CSS, але під час проєктування iOS-додатків ви можете використовувати колірний формат RGBA.

Токени спрощують процес розробки

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

Як використовувати токени в коді. Зображення Designtokens.

Поради з управління токенами

Тепер, коли у вас є відповіді на запитання "Що таке токен дизайну?" і "Як вони використовуються?" настав час вивчити методи, які допоможуть вам спростити процес створення токенів. Поради, згадані в цьому розділі, ґрунтуються на рекомендаціях провідних прихильників дизайн-систем, таких як Бред Фрост і Натан Кертіс.

Проведіть інвентаризацію інтерфейсу

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

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

Безліч унікальних кольорів, які є у Google.com. Зображення CSS Stats.

Визначте критерії для створення токенів

Коли варіант стилю стає токеном? Корисно мати чіткі критерії того, коли створювати токени. Критерій "Х разів використано" - це простий, але ефективний спосіб вирішити, які варіанти слід токенізувати. Якщо стиль використовується тільки в одному місці, ймовірно, вам не потрібно створювати токен.

Визначтеся з іменами

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

Ось рекомендований підхід для іменування: [Category]-[Type]-[Item]-[State]. Якщо ви будете дотримуватися цього підходу, ви отримаєте приблизно такий результат: color-background-ctabutton-active

Коли дизайнеру потрібен колір для активної кнопки із закликом до дії, він має мати змогу переглянути колекцію токенів і вибрати той, який відповідає його потребам.

Застосовуйте шкали

Шкали, наприклад, розмірів футболок (XS, S, M, L, XL, XXL) або прогресії (2, 4, 8, 16, 32), можуть бути дуже корисними в різних сценаріях застосування токенів. Наприклад, у вас може бути розмір шрифту за замовчуванням для основного тексту і використовуйте шкалу розмірів футболок, коли вам потрібно налаштувати його для різних розмірів екрана.

Використовуйте формат JSON для повторного використання даних токена

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

JSON створює міст для різних платформ. Зображення Nathan Curtis.

Призначте відповідального за токени

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

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

Забезпечте доступність

Створювані вами дизайни мають бути доступні для всіх користувачів. Коли ви працюєте з токенами, не забувайте тестувати їх на доступність. Контраст - один з основоположних принципів дизайну. Коли ви вибираєте кольори, вам необхідно перевірити контраст відповідно до рекомендацій WCAG 2.0. WCAG рекомендує порогове співвідношення 4:5:1 для стандартного або дрібного тексту і 3:1 для більшого тексту.

Продуктові команди повинні регулярно проводити автоматичні тести доступності. У цьому вам допоможе a11y - чудовий інструмент для проведення аудиту доступності, інтегрований у вашу дизайн-систему.

Приклад аудиту доступності за допомогою a11y. Зображення Github

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

Значення колірного контрасту в дизайн-системі Duet. Зображення Duet.

Створюйте найкращі дизайн-системи за допомогою токенів

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

Переклад статті xd.adobe.com

Оновлена модель Double Diamond

Редакція — Mon, 28 Aug 2023 10:24:37 +0000

Моделі Double Diamond (подвійний алмаз, подвійний ромб) уже недостатньо. Протягом останніх 15 років модель проектування Double Diamond була найбільш використовуваною моделлю організації дизайн-проектів. Її активно використовували для пояснення принципів роботи процесу проєктування. А ще, її часто неправильно використовували, щоб видавати дизайн за структурований процес. Ви можете знайти варіанти цієї моделі на сайті кожної другої дизайн-агенції або в кожній другій презентації дизайну. Своїм корінням вона сягає методу дивергенції-конвергенції, запропонованого 1996 року Белою Банаті. За останні роки світ дизайну зазнав низки серйозних змін. Оскільки все більше людей цікавляться тим, як дизайнери працюють і думають, творці моделі Double Diamond вирішили, що настав час її оновити.

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

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

Вони додали до цього ідею дивергенції-конвергенції Бели Банаті, і народилася модель Double Diamond.

Оригінальна модель Double Diamond

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

Це класика. Але, можливо, настав час для оновлення. Принаймні, так подумали в Design Council. Нещодавно вони оприлюднили нову модель. Вони більше не називають її Double Diamond, тепер це Framework For Innovation (Фреймворк для інновацій):

Framework For Innovation - нова версія моделі Double Diamond

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

Дизайн дедалі більше використовується для інновацій. Тому модель називається Framework For Innovation. Уже одне це говорить нам про те, що дизайн допомагає у створенні інновацій. Це саме те, що ми бачимо на ринку: компанії, яким необхідно впроваджувати інновації, звертаються по допомогу до дизайну.
Процес проектування сам по собі не врятує вас. Вони додали до моделі чотири інші аспекти, щоб перетворити її на інноваційний фреймворк. Для інновацій вам потрібен не тільки процес, а й принципи та методи дизайну, залучення та лідерство.
Дизайн - це не лінійний процес. Один із найбільших недоліків оригінальної моделі полягав у тому, що, по суті, це була лінійна модель. Ви просто проходили з точки А в точку Б через два "алмази". Однак, гнучка методологія розробки та концепція "ощадливого стартапу" показали, що дизайн - це не лінійний процес. Він ітеративний. Дизайнери повторюють свій шлях уперед. У новій моделі вони додали кілька синіх кружечків, щоб показати людям ітеративну природу дизайну.

Думаю, що Design Council ухвалили правильне рішення. Оскільки дедалі більше і більше людей починають звертатися до дизайну за допомогою у творчості та інноваціях, важливо показати світу більш зрілу модель дизайну. Початкова модель була проста для розуміння, але рівень зрілості в розумінні дизайну був не дуже високим. Це було нормально протягом останніх 15 років, тому що рівень дизайн-зрілості людей не давав змоги сприймати складніші ідеї. Простота моделі Double Diamond і п'ятиступеневої моделі IDEO сприяли поширенню дизайну у світі. Але ризик подібної простоти полягає в тому, що люди неправильно розуміють дизайн, і надалі будуть розчаровані. Якщо люди справді вірять, що чотири простих кроки - це все, що потрібно для проєктування, на них чекає позбавлення від ілюзій. Вони будуть сильно розчаровані в дизайні, і це не добре для самого дизайну. Думаю, настав час трохи ускладнити обговорення дизайну. І ця модель може в цьому допомогти.

У розділ "принципи дизайну" нової моделі додано інші ментальні моделі, які будуть корисні в інноваційних проєктах:

Дизайн орієнтований на користувача (User Centered Design): "орієнтуйтеся на людей"
Візуальне мислення (Visual Thinking): "обмінюйтеся інформацією візуально"
Співтворчість (Co-creation): "Співпраця та спільна творчість"
Гнучка методологія розробки / концепція "ощадливого стартапу" (Agile / Lean Startup): "проводьте ітерацію за ітерацією"

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

Це додає хороший рівень складності.

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

Я в захваті від цієї нової версії класичної моделі процесу проєктування.

Переклад статті Dennis Hambeukers

47 важливих порад для UI та UX дизайнерів

Редакція — Thu, 24 Aug 2023 09:57:29 +0000

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

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

Це колекція основоположних принципів, якими я поділився в своєму блозі на Medium за минулий рік. Я висвітлював такі теми, як розвиток навичок, правила і принципи дизайну, креативність, поради щодо кар'єри і все, що пов'язано з цими темами.

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

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

4 золотих правила UI дизайну

Список надійних правил проектування, яких потрібно дотримуватися, якщо є сумніви.

Оригінальна стаття - 10 золотих правил UI дизайну.

1. Проектуйте для щільності, а не для пікселів

Піксельне значення в 3 або 4 рази більше значення dp

Що таке щільність? Щільність - це кількість пікселів на дюйм екрана, також відома як PPI. Одиниця виміру "dp" - це скорочення від виразу "незалежний від щільності екрана піксель", іноді можна зустріти скорочення "dip".

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

Ми робимо це, тому що, якщо ми, наприклад, створимо актив кнопки з роздільною здатністю 200 x 50 dp, його відображатимуть із роздільною здатністю 200 x 50 px на екрані зі щільністю 160 ppi та 400 x 100 px на екрані зі щільністю 320 ppi (удвічі більшим за початковий розмір активу).

Оскільки деякі екрани мають більше пікселів на дюйм, ніж інші, активи не відображаються в меншому розмірі на екранах із високою щільністю пікселів, вони просто відображаються у 2x, 3x, 4x кратному масштабі від їхнього початкового розміру. Це гарантує, що всі активи збережуть свої розміри на пристроях з різною щільністю дисплея.

Як щільність перекладається на розмір екрана? Наприклад, розміри екрана iPhone XS Max становлять 414 x 896. Але це не пікселі, а кількість точок. У пікселях це 1242 x 2688 px. З огляду на це, під час проєктування для iPhone XS Max я б обрав розмір 414 x 896 точок, а потім масштабував активи в @3x.

2. Використовуйте крок 8dp

{Навіщо проєктувати з кроком 8? Цьому є просте пояснення. Причина, через яку ми використовуємо магічне число 8, а не 5, полягає в тому, що, якщо пристрій має роздільну здатність 1,5x, він не зможе правильно відобразити непарне число.

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

Ваші дизайни виглядатимуть узгодженими, якщо ви проектуватимете з кроком 8 на сітці 8-pt. Більше не доведеться вгадувати інтервал, і все ідеально узгоджується з обраними вами інтервалами.

Хочете дізнатися більше? Прочитайте цю статтю.

3. Використовуйте колірну вагу, щоб встановити ієрархію

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

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

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

Якщо ви хочете за допомогою відтінків швидко створити вагу, спробуйте Shaderade.

4. Не сповільнюйте мене

Повний посібник з правильного використання анімації в UX

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

"Я хочу рухатися швидко"

Рікі Боббі

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

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

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

Приклад поганої для UX анімації

{Яка оптимальна швидкість анімації? "Численні дослідження показали, що оптимальна швидкість анімації інтерфейсу становить від 200 до 500 мс. Ці цифри засновані на певних властивостях людського мозку. Будь-яка анімація коротша за 100 мс є миттєвою і не розпізнається взагалі. Тим часом, анімація тривалістю понад 1 секунду викличе відчуття затримки і, отже, буде нудною для користувача" - Посібник із правильного використання анімації в UX

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

5 принципів етичного UX дизайну

Використання чесного UX дизайну для створення авторитетного досвіду, що заслуговує на довіру.

Оригінальна стаття - 10 принципів етичного UX-дизайну

5. Повідомте мене

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

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

Або, ще краще, якщо ви пропонуєте безкоштовну пробну версію, узагалі не просіть користувача вказати номер кредитної картки, тому що це безкоштовно - вірно?

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

6. Виділяйте негативну інформацію

Airbnb

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

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

7. Припиніть спамити

Ніщо не змусить мене видаляти додаток швидше, ніж спам повідомленнями.

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

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

8. Прозора політика конфіденційності

Досить приховувати все за політикою конфіденційності.

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

9. Зробіть відписку максимально простою

Пастка для тарганів (roach motel) - це темний патерн UX, коли дуже легко увійти в ситуацію, а потім дратівливо важко вибратися з неї.

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

Я не повинен дзвонити в службу підтримки, надсилати лист, читати поширені запитання або спілкуватися з агентом. Просто дайте мені довбану кнопку з написом "Скасування" і дозвольте мені продовжити жити своїм життям.

4 способи надати родзинку вашому дизайну

Способи поліпшення дизайну вашого інтерфейсу.

Оригінальна стаття - 10 способів поліпшити дизайн інтерфейсу.

10. Вдихніть життя у свій текст

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

Ааррон Волтер, директор з UX у MailChimp, каже: "Ми виявили, що гумор, переплетений із текстом, мавпочка Фредді MailChimp, і безліч пасхалок, захованих у робочому процесі, можуть перетворити звичайне завдання на досвід, на який люди чекають із нетерпінням, і за яким іноді навіть нудьгують".

Текст, у який вдихнули життя - це різниця між словами "завантаження..." і "наша команда висококваліфікованих мавп працює над цим". Це несподівано і веселить вашого користувача.

Хороший текст не обов'язково має бути смішним. Це означає написання привабливого і корисного тексту.

Гумор також може бути надмірним, і він просто не підходить для деяких додатків або галузей. Як пише Lianna на своєму веб-сайті punchlinecopy: "Морги, лікарі та атомні електростанції повинні триматися подалі від гумористичного тексту".

MailChimp такий крутий

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

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

11. Додайте функцію темної теми

Автор ProCreator - Dribbble.

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

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

12. Зробіть не відстійний стан помилки

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

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

Мій улюблений приклад - екран помилки Google Chrome "No Internet". Вони надають користувачеві всю необхідну інформацію, як виправити помилку, але також пропонують нескінченну гру з динозавром, що біжить, T-Rex. Геніально!

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

"Люди все ще пишуть у Twitter про повідомлення про помилку на сайті Hipmunk. Чому вони це роблять? Тому що це був веселий момент, хоча вони займалися досить нудною справою, наприклад, шукали рейс", - зазначив Алексіс Оганян, який допомагав із запуском Hipmunk.

13. Додайте кілька патернів і градієнтів

Екран реєстрації Whimsical

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

З цільової сторінки UserTesting.com

З патернами ви можете бути настільки креативними або мінімалістичними, наскільки хочете. Однак вони не повинні відволікати від основного контенту.

5 заповідей UI дизайну

Принципи дизайну, які часто не беруть до уваги.

Оригінальна стаття - 10 заповідей UI дизайну

14. Порожні стани

}

Порожні стани не повинні бути просто порожнім дисплеєм

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

Це може бути список книг, проектів, завдань, клієнтів або пісень - але оскільки користувач ще нічого не додав, він порожній.

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

Ви повинні використовувати порожній стан, щоб зорієнтувати користувачів.

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

Що б ви не вирішили зробити, переконайтеся, що не кажете: "Тут ще нічого немає..."

15. Цілі

Ви маєте зробити елементи керування достатньо великими для пальця людини

Якщо у вас сенсорний інтерфейс, тоді зробіть клікабельні елементи адекватного розміру.

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

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

Посібник Apple "iPhone Human Interface Guidelines" рекомендує мінімальний розмір цілі - 44 пікселі завширшки та 44 пікселі заввишки.

У керівництві Microsoft "Windows Phone UI Design and Interaction Guide" пропонується розмір сенсорного об'єкта 34px за мінімального розміру 26px.

16. Нескінченний скрол

Ви повинні використовувати нескінченний скрол тільки для контенту в стилі фіда

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

Це чудово підходить для новинної стрічки, але, якщо застосувати нескінченний скрол до повідомлень, електронних листів, завдань, пошуку тощо, користувач не зможе визначити, де знаходиться початок, середина і кінець.

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

17. Показуйте, а не розповідайте

Не потрібно читати інструкції, щоб зрозуміти, як працює програма

Вираз "не кажи мені, покажи" часто приписують драматургу Антону Чехову. Це техніка, що дає змогу читачеві відчути історію не через опис автора, а через настрій і почуття.

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

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

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

18. Нативні компоненти

За можливості використовуйте нативні компоненти інтерфейсу пристрою.

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

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

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

5 способів покращити списки, що розкриваються

При правильному використанні розкривні списки не повинні бути жахливими.

Оригінальна стаття - Все що потрібно знати про списки, що розкриваються (dropdown)

19. Розумні значення за замовчуванням

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

Якщо 80% користувачів вибирають конкретний варіант, ми можемо дозволити 80% користувачів пропустити цей крок, зробивши його варіантом за замовчуванням.

Наприклад, якщо ви оплачуєте штраф за перевищення швидкості на веб-сайті в штаті Колорадо, має сенс вибрати Колорадо як штат за замовчуванням.

20. Спрощуйте

Ми можемо використовувати аналітику, щоб дізнатися, які варіанти зі списку, що розкривається, можуть бути непотрібними.

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

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

21. Індивідуальні патерни використання

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

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

Що розумніші патерни введення, то краще для наших користувачів.

Це також підходить для авіакомпаній або додатків для подорожей. Щойно веб-сайт бронювання дізнається, звідки і куди ви часто літаєте, ці параметри можуть бути встановлені за замовчуванням.

22. Використовуйте візуальні елементи

Іноді параметри в спадному списку є візуальними елементами. Замість того, щоб поміщати їх у розкривний список, ми повинні спроектувати інтерфейс так, щоб він краще представив їх.

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

23. Використовуйте вікна списку

За списком, що розкривається, необхідно клацнути, щоб побачити варіанти. Вікно списку (Listbox), навпаки, дає змогу користувачеві відразу бачити всі доступні варіанти.

Вікно списку може містити прапорці, радіокнопки або тумблери.

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

6 навичок комунікації для UI/UX дизайнерів

Розвиток комунікабельності життєво важливий для створення успішної кар'єри в UI і UX дизайні.

Оригінальна стаття - _ 10 соціальних навичок для UI і UX дизайнерів.

24. Фідбек

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

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

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

Коли справа доходить до отримання зворотного зв'язку, важливо точно визначити, на що ми хочемо отримати фідбек. Ми також повинні бути неупередженими до одержуваних відгуків і просити роз'яснити або уточнити розпливчасті зауваження.

25. Слухайте активно

Активне слухання - фокусування уваги на співрозмовнику, а не на думках, думках чи ідеях, які виникають у нашій голові.

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

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

Стаття "10 кроків до ефективного слухання", опублікована в журналі Forbes, чудово підходить для тих, хто сподівається поліпшити навички активного слухання. Ось мої улюблені поради з цієї статті:

Поверніться обличчям до мовця і підтримуйте зоровий контакт
Прислухайтеся до слів співрозмовника і спробуйте уявити, що він говорить. 3) Не перебивайте і не нав'язуйте свої "рішення".
Зачекайте, поки оратор зробить паузу, щоб поставити уточнювальні запитання.
Ставте запитання тільки для забезпечення розуміння
Дайте доповідачеві регулярний зворотний зв'язок (вербальний або невербальний)

26. Кожне повідомлення - це UX-проект

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

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

Замість того, щоб надсилати повідомлення, які вимагають виконання роботи від іншої людини, наприклад, "Я впевнений, що є продукт, який ми можемо використати", ми маємо спростити їй завдання та сказати щось на кшталт: "Я провів невеличке дослідження та знайшов продукти _ _x, _ _ _y, та _ _ z, які можуть розв'язати нашу проблему".

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

27. Позбавтеся свого его

Ми любимо, коли люди хвалять нас, це людська природа. Але важливо вміти відокремити себе (і наше его) від своєї роботи.

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

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

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

28. Автодидактизм

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

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

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

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

29. Адаптація

Ні для кого не секрет, що цифровий і фізичний світи постійно розвиваються.

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

Ми не тільки ризикуємо бути заміщеними іншими дизайнерами, але також ризикуємо втратити можливості поліпшити досвід нашого продукту.

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

4 поширені помилки UI дизайнерів

Пам'ятайте про ці помилки під час проектування вашого наступного інтерфейсу.

Оригінальна стаття - 10 поширених помилок UI дизайнерів

30. Ігнорування масштабу

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

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

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

31. Враховуйте контекст користувача

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

Прекрасним прикладом цього є додаток Sleep cycle. Додаток оснащений заспокійливим темним дисплеєм, і ідеально підходить для тих, хто встановлює будильник перед сном.

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

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

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

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

32. Зосередьте увагу на тому, як це виглядає, а не як це працює

schlegelseinhausenbrgerdrff Sr. спробує використати додаток?

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

33. Пропущені стани дизайну

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

Нам потрібно враховувати всі можливі стани, такі як error, success, active, disabled, hover, empty, filled, loading - і це лише частина з них.

Будь-який UI дизайнер ненавидить одну річ - ламати свої дизайни. Контент може зіпсувати макет або естетичну привабливість інтерфейсу.

Це може бути незручно для дизайнера, але це важливий компонент для розробки гнучкого, масштабованого і зручного для користувача продукту. Коли макет, який я відправив у виробництво, містить ім'я з шести літер, він, імовірно, має чудовий вигляд, але що станеться, коли Hubert Blaine Wolfe
Наприклад, якби я проєктував список бажань, мені потрібно було б розглянути стан, перш ніж користувач додав що-небудь до свого списку побажань - порожній стан. Без цього стану буде прогалина в досвіді.

5 ідей з керівництва Apple "Human Interface Design"

Заслуговують на увагу рекомендації з проектування для IOS.

Оригінальна стаття - 10 ідей з Human Interface Design Guidelines від Apple

34. Відкладіть реєстрацію якомога довше

"Люди часто відмовляються від додатків, коли їм доводиться реєструватися, перш ніж зробити щось корисне. Дайте їм шанс закохатися у ваш застосунок, перш ніж брати на себе зобов'язання. У застосунку для покупок люди можуть переглядати ваші товари одразу після запуску і реєструватися тільки тоді, коли вони готові зробити покупку. У стримінговому застосунку люди можуть вивчити ваш контент і подивитися, що ви можете запропонувати, перш ніж зареєструватися, щоб щось подивитися". - Apple Authentication Guidelines

Apple закликає нас переоцінити досвід реєстрації в застосунку. Якщо можливо, видаліть реєстрацію та підписку взагалі.

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

Також гарною ідеєю буде ввести різні варіанти реєстрації, щоб зробити підписку зручною. Додаток, над яким я зараз працюю, підтримує автозаповнення паролів, вхід через облікові записи Facebook, Google, Apple та реєстрацію електронною поштою.

35. Показуйте контент якомога швидше

Не плутайте екран запуску з екраном-заставкою. Екран запуску вводить елементи на сторінку. Спроектуйте екран запуску, який буде практично ідентичний першому екрану вашого додатка.

"Якщо ви додасте на екран завантаження елементи з різним виглядом, то після завершення завантаження люди можуть відчувати неприємний спалах між екраном запуску і першим екраном програми. Також переконайтеся, що екран запуску відповідає поточному режиму відображення пристрою, див. Темна тема". - Launch Screen Guidelines

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

36. Передбачайте, коли може знадобитися допомога

"Визначте заздалегідь, коли люди можуть застрягти. Гра, наприклад, може показати корисні поради, на паузі або, коли персонаж не рухається. Дозвольте людям повторно переглянути навчальні посібники на випадок, якщо вони щось проґавлять уперше".Apple App Architecture Guidelines

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

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

37. За необхідності допоможіть людям уникнути втрати інформації

"Незалежно від того, чи використовують люди жест відхилення або кнопку для закриття подання, якщо дія може призвести до втрати контенту, створеного користувачем, надайте action sheet, що пояснює ситуацію та надає людям способи її вирішення".- Apple Modality Guidelines

"Вселіть упевненість, що результат роботи завжди зберігається, якщо його не скасували або видалили. Загалом, не змушуйте людей явно зберігати файли. Натомість зберігайте зміни автоматично через рівні проміжки часу, під час відкриття та закриття файлів і під час перемикання на інший застосунок. У деяких випадках, наприклад, при редагуванні наявного файлу, параметри збереження і скасування можуть як і раніше мати сенс для підтвердження фактичного збереження змін".- Apple File Handling Guidelines

38. Не включайте в повідомлення конфіденційну або особисту інформацію

"Ви не можете передбачити, що люди будуть робити, коли отримають сповіщення, тому важливо намагатися не включати в сповіщення конфіденційну інформацію, яка може відображатися на екрані пристрою". - Apple Notification Guidelines

6 патернів поведінки в UX дизайні

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

Оригінальна стаття - 10 патернів поведінки в UX дизайні

39. Безпечне дослідження

"Дозвольте мені досліджувати, не гублячись і не потрапляючи в неприємності".

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

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

Приклади:

Кнопки назад, що дозволяють легко повернутися туди, де я почав
Застосування фотофільтрів, які можна легко скасувати, якщо мені не сподобається результат
Збереження історії
Кнопка "Скасувати" для документів

40. Миттєве задоволення

"Я хочу зробити щось зараз, а не пізніше".

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

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

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

Приклади:

Підбір пари в додатку знайомств
Вибух конфетті, коли ви формуєте звичку
Виклик Uber

41. Звикання

"Цей жест працює скрізь; чому тут він не працює?"

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

Як людина, яка щодня використовує Figma, XD і Sketch, я вражений тим, наскільки уніфіковано більшість елементів управління, але все ж дратуюся через відмінності.

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

Приклади:

CTRL + S, CTRL + Z
Змахування вліво або вправо, щоб перейти до наступного або попереднього екрана
Натискання X, щоб вийти з діалогового вікна
Змахування вниз, щоб оновити екран на мобільному телефоні

42. Відкладений вибір

"Я не хочу відповідати на це зараз; просто дайте мені закінчити!"

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

"Чому б не дозволити йому пропустити більшу частину запитань, відповісти на самий мінімум і повернутися пізніше (якщо взагалі повернутися), щоб заповнити решту? В іншому разі він може витратити півгодини, відповідаючи на запитання і вибираючи ідеальне зображення для аватара".

Ми, UX-дизайнери, повинні подумати, де можна скоротити форму. Не запитуйте непотрібну інформацію, але, що важливіше, дозвольте введення інформації пізніше або зробіть її необов'язковою.

Усе, що не обов'язково, має бути пропущено.

Ключові моменти:

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

43. Організоване повторення

"Скільки разів я повинен це повторити?"

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

У своїй першій компанії я багато займався обслуговуванням клієнтів і постійно копіював із документа одні й ті самі загальні відповіді. Зрештою я вирішив, що має бути кращий спосіб. Він був - я знайшов розширення Chrome, яке використовувало text shortcut для автозаповнення відповідей. Якби я набрав "greet%", він автоматично вставив би моє вітальне повідомлення (greeting message).

Це заощадило мені величезну кількість часу і допомогло усвідомити важливість оптимізації користувацького досвіду для часто повторюваних дій.

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

{Приклади:

Автозаповнення, коли ви починаєте друкувати текст
Google Chrome автоматично виконує запит "yo" для youtube.com
Автоматизація рутинних процесів у Slack за допомогою Workflow Builder
Кнопки "Видалити все" або "Вибрати все"

4 поради та вправи для розвитку креативності

Ви креативні - дозвольте мені довести вам це.

Оригінальна стаття - 10 порад і вправ для розвитку вашої креативності.

44. Не судіть

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

Террі Крюс

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

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

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

"Якщо ви чуєте голос усередині, який говорить вам: "Ти не можеш малювати", тоді неодмінно малюйте, і цей голос замовкне".

Вінсент Ван Гог

Ми дотримуємося таких високих стандартів, що це обмежує нашу здатність створювати що-небудь взагалі.

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

45. Кількість понад якість

Моя спроба

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

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

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

Одна з моїх улюблених вправ на кількість - це челендж на 30 кіл. У цьому завданні ви прагнете заповнити якомога більше кіл за 5 хвилин. Спробуйте самі і подивіться, скільки ви можете виконати - ось чистий аркуш.

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

46. Відключіться

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

} - Махершала Алі

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

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

Настільна гра Scrabble була винайдена нудьгуючим безробітним Альфредом Мошером Батсом. Нудьга безробіття допомогла Баттсу. "Ну, я нічого не робив", - згадує він. "Це була проблема. Мені не було чим зайнятися. У мене не було роботи. Тому я подумав, що винайду гру".

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

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

Для більшості людей ці роки мого життя можуть здатися нудними. Але це було зовсім не так. Це призвело до найбільш творчих років у моєму житті. Я знайшов способи розважити себе, розбираючи іграшки, будуючи за допомогою Lego і Lincoln Logs, малюючи і "винаходячи речі".

Шукайте моменти умиротворення і нудьги, і ви зможете розпалити творчу іскру.

47. Спробуйте нові речі

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

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

Я не очікував, що стану майстром паркуру або художником - я просто хотів дізнатися про щось нове і незнайоме.

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

Переклад статті uxdesign.cc

16 ігор для нудьгуючих і допитливих дизайнерів

Редакція — Sun, 20 Aug 2023 07:56:25 +0000

Працюючи в індустрії дизайну з 2011 року (я почуваюся старим), я багато разів почувався спустошеним, коли мій розум був надто стомленим, щоб почати нове завдання, прочитати книжку або просто поговорити з кимось. Що мені справді потрібно, так це хороша гра, щоб поповнити запас внутрішніх сил. За роки досліджень в Інтернеті я зібрав безліч веб-сайтів, що пропонують ігри та розваги для UX- і UI-дизайнерів. Тепер настав час ними поділитися!

1. Can't Unsee

Якщо ви небайдужі до деталей, Can't Unsee стане вашим улюбленим способом убити час. Вам потрібно обирати між двома інтерфейсами, які виглядають дуже схожими, але з невеликими (а іноді й значними) відмінностями. Чи зможете ви знайти ідеальний до пікселя дизайн?

Грайте в Can't Unsee: https://cantunsee.space/

Це виглядає лякаюче схоже на панель управління Linkedin, але це і справді гра!

2. Color

Color зводиться до того, наскільки точно ваші очі розпізнають кольори. Ви гратимете з відтінками, насиченістю, додатковими кольорами, аналоговими, а також із тріадними і тетрадними колірними схемами. Досить розслаблююча гра!

Грайте в Color: https://color.method.ac/

Рівень відтінку в Color відносно простий, але дочекайтеся тріадної колірної схеми

3. Designercize

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

Грайте в Designercize: https://designercize.com/

Ось що я називаю челендж! Браво, Designercize!

4. Figma Ninja

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

Грайте в Figma Ninja: https://www.figma.com/community/file/769694576496801916

Вступ до Figma Ninja

5. Flexbox Froggy

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

Play Flexbox Froggy: https://flexboxfroggy.com/

Так, я зробив це! Flexbox Froggy може змусити повірити, що я чудовий у кодингу

6. Hex Invaders

Ваші друзі думають, що це дивно, що ви знаєте шістнадцяткові колірні коди напам'ять? Що ж, тепер ви можете показати їм, чому вам просто грати в Hex Invaders! Ваша унікальна мета - знищити армію інопланетян, які прийшли завоювати нашу планету... вдаривши по них кольоровими ракетами. Новий погляд на класику відеоігор.

Грайте в Hex Invaders: http://www.hexinvaders.com/

Мені дуже подобається вінтажна атмосфера Hex Invaders

7. It's Centred That

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

Грайте в It's Centred That: https://www.supremo.co.uk/designers-eye/?playagain

Анімація помилки кумедна: D

8. Kern Type

Kern Type - розслаблююча гра з повільним темпом. Переміщайте букви, щоб домогтися ідеального міжбуквеного інтервалу і набрати більше очок. Ніяких таймерів!

Грайте в Kern Type: https://type.method.ac/

Непоганий результат у Kerntype

9. Pixactly

Скільки разів ви малювали прямокутник потрібного вам розміру від руки і вважали, що він вийшов ідеально? Тепер ви можете перевірити це своєрідне вміння, граючи в Pixactly. Вам потрібно намалювати прямокутник, який відповідає зазначеним розмірам, і отримати оцінку залежно від того, наскільки ви близькі до заданих вимог. Що нижча оцінка, то краще ви впоралися. Звучить легко, але це безумовно не так, особливо після деяких перших рівнів.

Грайте в Pixactly: https://www.pixact.ly/

Ой, не найкраща моя спроба в Pixactly

10. Shape Type

Коли я був молодим і вільним графічним дизайнером, я мав складнощі з малюванням фігур олівцем. Shape Type дає змогу показати, як працюють векторні фігури кумедним і доступним способом. Якщо ви новачок у цій сфері, я настійно рекомендую вам спробувати цю гру!

Грайте в Shape Type: https://shape.method.ac/

Є куди покращувати результати в Shape Type

11. Shot the Serif

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

Грайте в Shot the Serif: https://www.tothepoint.co.uk/us/fun/i-shot-the-serif/

На цьому веб-сайті немає місця нам двом...

12. The Bézier Game

Ще одна гра, яка допоможе вам поліпшити (або розвинути) навички роботи з пером. Ви можете пройти дуже доброзичливу і розслаблюючу інструкцію або пропустити її та одразу приступити до випробування. Вам потрібно буде завершити різні фігури в задану кількість вузлів... звучить легко, чи не так?

Грайте в The Bézier Game: https://bezier.method.ac/

Не всі фігури The Bézier Game так легко намалювати!

13. The Font Game

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

Грайте в The Font Game: https://ilovetypography.com/2020/05/31/the-font-game

Ганебний Comic Sans наважився показатися в The Font Game

14. The Boolean Game

На даний момент одна з моїх улюблених ігор! Якщо ви любите використовувати фігури для створення інтелектуальної і красивої графіки та іконок, вона створена для вас. У логічній грі ви можете обирати між різними модальностями (Union, Subtract, Intersect і Difference) і грати, створюючи різні типи фігур. На кожному етапі гра стає трохи складнішою, але темп чудовий, і вам не доведеться сильно потіти.

Грайте в The Boolean Game: https://boolean.method.ac/

15. Typewar

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

Грайте в Typewar: https://typewar.com/

Прикро, шрифт Helvetica Neue перервав мою найдовшу серію

16. User Inyerface

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

Грайте в User Inyerface: https://userinyerface.com/

Головна сторінка User Inyerface вже говорить сама за себе

Сподіваюся ви спробуєте ці ігри. Не соромтеся ділитися результатами і... насолоджуйтеся!

Переклад статті uxdesign.cc

Організація простору в дизайні. Відступи, сітки та лейаути

Редакція — Fri, 18 Aug 2023 08:25:13 +0000

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

Що таке просторова система?

Дизайнери приймають просторові рішення щодня: від визначення висоти кнопки до простору навколо іконки. Просторова система - це набір правил для вимірювання розміру і простору елементів інтерфейсу. Однаковість на просторовому рівні дає змогу вашому продукту бути більш послідовним, покращує спілкування вашої команди та скорочує кількість рішень, які дизайнери мають ухвалювати протягом дня. Одним із прикладів просторової системи є "сітка 8pt". Однак є багато варіантів і конфігурацій на вибір.

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

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

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

Як закласти основу просторової системи?

Визначення базового блоку дасть вам змогу створити шкалу розмірів, підтримуваних вашою просторовою системою. Переглядаючи різні продукти в Інтернеті, ви побачите кілька різних підходів. Ви зустрінете системи 4pt, 5pt, 6pt, 8pt, 10pt. Немає універсальної системи, але важливо знати плюси і мінуси кожного варіанта.

Мій улюблений метод - лінійна шкала 8pt для елементів із напівкроком 4pt для інтервалів іконок або невеликих текстових блоків. Я віддаю перевагу базовій сітці 4pt для типографіки, тому висота рядка обраного шрифту завжди буде кратна 4. Ця система не тільки зменшує плутанину, але також проста в реалізації.

Будьте помірковані у своїх потребах, створюючи свою власну просторову систему. Ось деякі моменти, які слід врахувати:

Потреби користувачів

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

Кількість змінних

Вибір меншого базового блоку, такого як 4pt, 5pt або 6pt, може додати занадто багато змінних у вашу систему. Досить важко помітити різницю відступу між 12pt і 16pt, що може ускладнити узгодженість у роботі вашої команди. Я вважаю, що крок у 8pt забезпечує правильний баланс візуального віддалення за наявності розумної кількості змінних. Я також використовую півкроку 4pt для відступів іконок або налаштування невеликих блоків тексту.

Непарні числа

Введення в просторові правила непарних чисел, таких як крок у 5pt, може ускладнити центрування елементів без поділу пікселів. Наприклад, центрування тексту та іконок у кнопці висотою 25px може створити розмиті пікселі для деяких користувачів. Аналогічним чином, масштабування інтерфейсу під різні мобільні та десктопні екрани, для яких потрібен 1,5-кратний масштаб, призведе до розмитості з поділом пікселів.

Як застосувати просторову систему?

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

У цьому прикладі ви можете бачити, що висота рядка тексту становить 20px, але, якщо я використовував відступи 8px зверху і знизу, висота кнопки буде 36px. Якому виміру я повинен віддавати пріоритет? Є два способи вирішення цієї проблеми:

Спочатку елемент (суворе визначення розміру елемента)

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

Спочатку контент (суворі внутрішні відступи)

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

Розміщення кордону всередині або зовні

Елементи з контуром, такі як кнопки або картки, можуть порушувати порядок. Як рахувати ці 2px межі? Вони рахуються в коді не так, як у Figma. На що орієнтуватися?

Figma вимірює елемент, а не його межу. В Інтернеті це обробляється двома різними способами. Властивість box-sizing може бути border-box або content-box. Щоб побачити це в дії, ознайомтеся з цим кодом і прочитайте цю статтю, щоб дізнатися більше. Якщо коротко, то більша частина сучасної мережі працює з властивістю border-box.

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

Що таке сітка?

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

Column grid

Column grid допомагає організувати контент у рівномірно розташовані вертикальні стовпці. Простір між стовпцями називається жолобом (gutter). Застосування правил просторової системи до жолобів допоможе надати вашому проєкту узгодженого ритму. Типовим прикладом є сітка з 12 стовпців, оскільки вона дає змогу розділити обрану область на половину, третини, чверті, шості частини.

Модульна сітка

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

Базова сітка

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

Складання макета

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

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

Адаптивний макет

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

Чуйний макет

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

Фіксований макет

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

Як реалізувати просторову систему в наявному наборі дизайнів?

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

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

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

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

Переклад статті Elliot Dahl

Поради щодо дизайну селекторів (checkboxes, radio buttons, switches і тд.)

Редакція — Sun, 13 Aug 2023 09:59:23 +0000

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

Читайте також: Radio buttons, checkboxes та інші види селекторів

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

Що стосується "радіокнопок" (Radio Buttons), то це слово походить від автомобільних радіоприймачів, які зазвичай мають набір кнопок під циферблатом. Він може механічно зберігати попередні налаштування станцій, тому користувач швидше перемикається між ними. Натискання однієї з цих кнопок призведе до того, що вона залишиться внизу, поки не буде натиснута інша.

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

Радіо buttons (Радіокнопки) - використовуються, коли існує список із двох або більше взаємовиключних варіантів, і користувачі повинні вибрати тільки один із них.

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

Choice chips - це компактна альтернатива радіокнопкам. Вони містять щонайменше два варіанти, але користувач може вибрати тільки один.

Multi-select chips - це компактна альтернатива прапорцям. Дозволяють користувачам обирати кілька варіантів і здебільшого використовуються на мобільних пристроях для фільтрації.

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

Натхненням послужила стаття NNG "Checkboxes vs. Radio Buttons"

Стани

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

Не забувайте про невизначений стан

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

Припиніть неправильно використовувати перемикачі

Не створюйте ієрархічні структури з перемикачами (toggles). Це візуально відволікає і може створити хибне враження, що всі дочірні варіанти ввімкнені / вимкнені.

Коли вибір негайно набуває чинності, використовуйте перемикачі

Перемикач є цифровим вимикачем. Будь-який ефект, викликаний ним, має негайно набути чинності. Якщо це не так, краще замінити перемикач на прапорець.

Незвичайний стиль може збити користувачів з пантелику

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

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

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

Використовуйте chips, якщо вертикальний простір є проблемою

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

Якщо можливо, використовуйте радіокнопки замість списків, що розкриваються

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

Використовуйте розкривні списки для численних або схожих варіантів

Якщо кількість варіантів більша за 6-7, вам слід розглянути можливість їхнього включення до розкривного списку, оскільки користувачі в будь-якому разі не зможуть запам'ятати всі варіанти. Те ж саме застосовуватиметься до передбачуваних, аналогічних або інкрементних варіантів. Наприклад, збільшення - 10%, 20%, 30%.

Краще мати обрану радіокнопку за замовчуванням

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

Пишіть зрозумілі мітки, уникайте заперечень

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

Виділіть вибрані параметри, щоб привернути увагу користувачів

Візуально відокремте вибрані варіанти від решти, що особливо важливо при виборі рядків у таблицях даних.

Підтримка групового вибору та очищення

Вибір або очищення декількох елементів одночасно має бути легким для користувачів.

Для надійної взаємодії зробіть клікабельні області досить великими

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

Переклад статті uxdesign.cc

Ефективна робота з типографікою в Figma

Редакція — Sat, 12 Aug 2023 14:01:00 +0000

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

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

Основи стилю тексту

У Figma функціональність стилів тексту дозволяє легко застосовувати до текстових об'єктів набір властивостей (наприклад, інтерліньяж і розмір). Ви можете помістити ці стилі в бібліотеку, а потім легко ділитися ними зі своєю командою або компанією.

Стилі тексту вносять ясність у процес проектування. Якщо під час поліпшення або редизайну, один із текстових параметрів необхідно змінити, ви можете надіслати поновлення цих стилів у всі файли, де їх було використано (просто опублікувавши оновлення у вихідній бібліотеці Figma).

Перш ніж ми продовжимо, я коротко опишу, які властивості є частиною текстових стилів Figma, а які ні.

Властивості, що визначаються стилем тексту Figma:

Сімейство шрифтів, вага, розмір
Інтерліньяж
Міжбуквений інтервал, інтерліньяж абзаців і структурування тексту
Прикраса (закреслений і підкреслений текст)
Перетворення (великі, малі літери та капіталізація)
Інші функції Open Type (табличні дані, капітелі тощо)

Властивості, що не входять до стилю тексту Figma

Колір
Вимикання (вліво, вправо, по центру, або за форматом)
Вирівнювання текстового поля (по верху, по центру або по низу)
Зміна розміру текстового поля (горизонтально, вертикально або фіксовано)

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

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

Встановлення шрифтів, розмірів та найменування

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

Специфікації шрифтів

Безліч факторів впливає на те, які шрифти використовувати у вашій системі. Ви повинні враховувати таке:

Продуктивність додатка: чи є у вас бюджет продуктивності? Скільки шрифтів вам потрібно завантажити? Чи будете ви використовувати шрифти, які вже встановлені на різних платформах?
Індивідуальність: Чи маєте ви фірмові шрифти, як частину візуальної ідентичності компанії, які має сенс використовувати?
Декілька систем: вирішіть, чи потрібна одна загальна система шрифтів або різні стратегії для різних варіантів використання: наприклад, продукт або маркетинговий веб-сайт (де індивідуальність бренду може мати більшу вагу).
Поєднання пар шрифтів: Чи можете ви отримати потрібний типографічний діапазон від одного сімейства шрифтів? Розглянемо поєднання пар шрифтів. Ви можете зарезервувати декоративні шрифти для тексту великого розміру, які ви використовуєте економно, а розбірливі шрифти залишити для основного тексту. Якщо ви використовуєте безкоштовні шрифти Google, ми також створили ресурс, який допоможе вам легко вивчити різноманітні можливості за допомогою цих палітр поєднання.

Масштабування

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

Основний текст

Щоб зробити типографіку основного тексту читабельною, ви можете дозволити собі трохи більше простору між рядками. Основний текст щільний, і іноді користувачі витрачають багато часу на його прочитання. Як відправну точку для визначення правильного інтерліньяжу, я рекомендую помножити розмір шрифту основного тексту на 1,5. Потім оцініть, чи достатньо розбірливий отриманий результат.

Оптичні ефекти

Під час визначення інтерліньяжу основного тексту ви також маєте враховувати колірну схему тексту та його фону. У вас у застосунку позитивний текст (темний текст на світлому тлі) чи негативний (світлий текст на темному тлі)? Стиль з однаковими властивостями може виглядати по-різному залежно від контексту та оптичних ефектів.

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

Заголовки

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

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

Типографічні шкали

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

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

Система сітки 8-pt з базовою лінією 4-pt

У системі сітки 8-pt усі інтервали та розміри кратні 8. Дизайнери часто використовують сітку 8-pt для визначення розмірів та інтервалів з базовою сіткою 4-pt для типографіки. Базові лінії шрифту лежатимуть на сітці 4-pt. Щоб домогтися цього, потрібно приділяти більше уваги інтерліньяжу, а не точним розмірам шрифтів.

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

Плюси: Це один із моїх улюблених підходів визначення типографічної шкали. Проста математика шляхом додавання, віднімання, ділення та множення значень. Переміщення об'єктів по полотну під час процесу проєктування можна значно спростити, налаштувавши параметр "Big nudge" на 8px у Figma.

Порада: Хоча цей підхід може здатися недостатньо гнучким, я рекомендую використовувати 8-pt сітки як орієнтир у процесі проектування, але не обов'язково посилювати їх до n-ї ступені при перевірці якості ваших дизайнів під час розроблення. У коді немає базової сітки, до якої прив'язуються об'єкти. Це, у поєднанні з великою різноманітністю роздільних здатностей пристроїв (які не завжди діляться на 8), безсумнівно, порушить ваші вимірювання!

Модульна шкала

У цьому підході обирається базовий розмір шрифту (зазвичай розмір, який ви будете використовувати для основного тексту). Як відправну точку багато хто буде використовувати налаштування браузера за замовчуванням і починати з 16px (або 1 rem). Звідси розміри шрифту розраховуються на основі певного множника.

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

Поради: під час використання модульної шкали з деякими множниками (наприклад, з використанням золотого правила, як показано нижче) ви отримаєте розміри шрифту та інтерліньяж, які не є цілими числами. Як ви з цим розберетеся, залежить від вас: один із варіантів - округлити до найближчого цілого числа. У Figma, якщо у вас увімкнено прив'язку до пікселів, висота текстових полів (на основі інтерліньяжу) буде округлена до найближчого цілого числа. Якщо ви не хочете цього, переконайтеся, що ви вимкнули прив'язку до пікселів.

Передача розробникам: у розробці ці нюанси не матимуть великого значення, однак, якщо всі розміри текстових полів у Figma не є цілими числами, це може стати серйозною проблемою для розробників, які перевіряють ваші дизайни (тому що вони не побачать цілих чисел під час вимірювання відстаней до текстових об'єктів і від них). Я рекомендую вивчити такі інструменти, як modular scale або type scale. Вони чудово підходять для швидкої візуалізації діапазону розмірів і можуть допомогти вам визначити, наскільки вони читабельні.

Увага: ви виявите, що зі збільшенням множника, особливо понад 1,4 або 1,5, великі розміри стануть справді великими, часто занадто великими! (як показано нижче). Інтерліньяж, розрахований інструментами, відповідатиме цьому прикладу, тому ви можете вибрати інше співвідношення розмірів екрана та інтерліньяжу окремо від менших розмірів шрифту.

Відсоткова система

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

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

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

Порада: у цьому випадку ви можете вирішити використовувати 2 (або навіть 3) різних відсотки для розмірів основного тексту і заголовків. Наведений нижче приклад було змодельовано після того, як досвідчений користувач Figma Jonathan Simcoe використовував відсотковий підхід, про який ви можете дізнатися докладніше тут. Ви побачите зсув у значенні інтерліньяжу зі 150% до 110% при великих розмірах тексту, які використовуються для заголовків і підзаголовків.

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

Далі ми розглянемо деякі пропозиції щодо іменування та організації ваших стилів тексту.

Найменування та організація стилів тексту

Найменування стилів тексту

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

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

Ви можете використовувати кілька різних підходів до іменування стилів тексту:

Система іменування на основі розмірів (XS, S, M, L, XL)
Система семантичних імен, що відповідає HTML-тегам у розробці (заголовок, абзац, h1, h2)
Описова або функціональна система іменування, яка пояснює передбачуване використання стилів (alert, modal-header, button-label)

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

Організація стилів тексту

Сила префіксів

Щоб полегшити перегляд своїх стилів, ви можете додати префікс, відокремлений від імені стилю слешем (префікс/ім'я-стилю), який згрупує стилі за підзаголовками в палітрі стилів.

Окремі бібліотеки

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

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

Поєднання стилів кольору та стилів тексту

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

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

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

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

Зміна розміру текстового поля в Figma

Ви ще читаєте? Ми вже багато чого розглянули. Оскільки ваші текстові стилі готові, у мене є остання порада.

Під час створення текстових полів у Figma, до них можна застосувати три основні режими зміни розміру:

Збільшення по горизонталі (за замовчуванням при натисканні один раз, щоб створити нове текстове поле)
Збільшення по вертикалі
Фіксована зміна розміру (за замовчуванням при натисканні та перетягуванні для створення нового текстового поля)

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

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

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

Наприклад, у відео нижче у нас є заголовок із розміром шрифту 48px і висотою рядка 64px. У наведеному вище прикладі розмір текстового поля було змінено вручну (що змінило його поведінку при зміні розміру на фіксоване). Замість висоти 64px (визначається висотою рядка), висота була встановлена на 74px шляхом зміни розміру.

Коли розробник перевіряє файл, щоб зрозуміти, як далеко один від одного розташовані два текстових об'єкти, відстань розраховується від нижньої частини текстового поля, що містить заголовок, і становить 6px. У коді висота заголовка буде розраховуватися на основі висоти рядка (яка в даному випадку становить 64px). Таким чином, насправді, у виробничому процесі елементи будуть на 10px ближче один до одного і будуть візуально несумісні з тим, що задумав дизайнер.

У другому прикладі, встановивши поведінку зміни розміру на збільшення по вертикалі, ми побачимо, що висота регулюється відповідно до значення висоти рядка текстового стилю. Тепер, коли розробник перевіряє відстані між двома об'єктами, він бачить, що відстань становить 16px - більш точне значення відносин між цими елементами, як це було б у коді.

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

У гонитві за мрією ?

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

Переклад статті Thomas Lowry

Radio buttons, checkboxes та інші види селекторів

Редакція — Sat, 12 Aug 2023 13:43:31 +0000

Обери мене! Обери мене! Ні, обери мене! У сьогоднішній статті ми розглянемо селектори і чим вони відрізняються. На відміну від більшості інших моїх статей, основна увага буде приділена двом компонентам (радіокнопкам (radio buttons) і прапорцям (checkboxes), а також їхньому порівнянню з парою інших селекторів.

Читайте також: Поради щодо дизайну селекторів (checkboxes, radio buttons, switches і тд.)

1. Що таке селектори

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

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

2. Анатомія прапорців і радіокнопок

Хоча, у цій статті ми розглянемо різні типи селекторів, ми зосередимося на радіокнопках (radio buttons) і прапорцях (checkboxes). Нижче їхня анатомія.

Анатомія радіокнопок і прапорців

Примітка: Іноді люди кажуть "radio button"/"checkbox", коли мають на увазі мітку і селектор разом, в той час, як в інших випадках вони мають на увазі тільки селектор. Я віддаю перевагу останньому варіанту.

3. У чому різниця між радіокнопками і прапорцями

Радіокнопки і прапорці дуже схожі, за винятком кількох ключових відмінностей. Основна відмінність полягає в тому, що за допомогою радіокнопок ви можете вибрати тільки один елемент, а за допомогою прапорців - будь-яку кількість. Я збиралася скласти таблицю, щоб пояснити це, але не стала. Не тому, що а) це звучало нудно, б) Medium не дає змоги вставляти таблиці, а тому що в мене була краща ідея:

Вікторина! Ура! Давайте подивимося, хто дасть 100% правильних відповідей.

1) Скільки елементів можна вибрати в стандартному компоненті прапорців (якщо не вказано інше)?

1
3
необмежену кількість
0

2) Яка форма селектора радіокнопки?

Квадрат
Коло
шестикутник
трикутник

3) Якщо ви хочете створити інтерфейс, у якому користувач зможе вибрати кілька начинок для морозива, ви повинні використовувати:

Радіокнопки
Прапорці

4) Якщо ви хочете створити інтерфейс, у якому користувач може вибрати тип банківського рахунку, який він може відкрити, ви маєте використовувати:

Радіокнопки
Прапорці

5) Якби ви хотіли створити селектор "Підписатися на розсилку", який тип ви б використовували?

Радіокнопка
Прапорець

6) Виберіть на зображенні нижче варіант із радіокнопкою.

ВІДПОВІДІ:
1): 3. Необмежена кількість

2): 2. Коло

3): 2. Прапорці

4): 1. Радіокнопки

5): 2. Прапорець

6): 1. A

Ви впоралися! (Сподіваюся).

4. Поширені стилі селекторів

Нижче представлено низку поширених стилів прапорців і радіокнопок, з якими ви можете зіткнутися в Інтернеті.

Стандартний стиль (радіокнопки / прапорці)

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

Стандартний стиль з галочками

Стандартний стиль без галочок

Стиль кнопки в тестах (радіокнопки / прапорці)

Коли користувач відповідає на запитання тесту або вікторини, ми повинні переконатися у двох речах: 1) що він може чітко бачити, які відповіді вибирає, 2) що він не заплутається, коли отримає фідбек на свою відповідь.

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

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

Основний стиль із зображенням (радіокнопки/прапорці)

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

Зображення в стилі сітки (одне / кілька)

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

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

Приклад одиночного селектора в стилі сітки. Скріншот: https://www.buzzfeed.com/jessicamisener/which-sandwich-are-you

Багаторівневі прапорці

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

Багаторівневі прапорці

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

Примусовий вибір

Іноді вам потрібно дозволити користувачам вибирати тільки певну кількість елементів. Якщо користувач вибере на одне значення більше дозволеної кількості, найперший обраний варіант буде замінено ("витіснено") останнім обраним варіантом.

Прапорці з примусовим вибором

Стиль кнопки (одиночний / множинний вибір)

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

Селектор у стилі кнопки

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

Вибір жанру Apple Music під час реєстрації. Зображення: https://www.businessinsider.com/apple-will-shut-down-beats-music-on-november-30-2015-11?IR=T

Перемикач (одиночний вибір)

Перемикач (toggle) найчастіше використовується для налаштувань і дає змогу користувачеві обирати між варіантами так / ні.

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

Приклад перемикача

5. Стани

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

За замовчуванням / активно (Default/active)

Це початковий стан селекторів. Цей стан вказує користувачеві, що він може натискати на пункти в запитаннях.

Приклад радіокнопок і прапорців у їхньому стандартному / активному стані

Неактивно (Inactive)

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

Приклад радіокнопок і прапорців у їхньому неактивному стані

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

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

Приклад радіокнопок і прапорців у стані наведення курсору

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

Фокус / виділення (Focus/highlighted)

Фокус або виділений стан зазвичай позначається синім ореолом навколо елемента, що активується кліком. Ви можете переконатися в цьому самі, клацнувши по інтерфейсу. Користувач рідко стикається з цим станом, якщо тільки не натисне "Enter", щоб вибрати елемент.

Приклад радіокнопок і прапорців у їхньому стані фокусу / виділення

Натиснуто (Pressed)

Це стан, коли користувач утримує свою мишу / палець, і елемент вказує користувачеві, що на нього натискають.

Приклад радіокнопок і прапорців у їхньому натиснутому стані

Обрано (Selected)

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

Приклад радіокнопок і прапорців у їхньому вибраному стані

Помилка зворотного зв'язку (Fail feedback)

Під час вільного введення тексту користувач може зробити друкарську помилку тощо. Однак, оскільки параметри в селекторі зумовлені наперед, має бути тільки один тип зворотного зв'язку в разі помилки: "incomplete", який користувач отримає тільки, якщо натисне кнопку "відправити" до того, як закінчать заповнення форми. Для прапорців це буде необхідно, тільки якщо питання змусить їх вибрати один або кілька елементів.

Приклад радіокнопок і прапорців у стані помилки

6. Правила для тексту мітки

Існує тільки одне жорстке правило для міток селектора: бути послідовним.

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

Приклад міток елементів

7. Коли ви повинні їх використовувати

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

Коли використовувати радіокнопки

У мене є чотири правила, коли використовувати радіокнопки. Ось вони:

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

Порівняння списку, що розкривається, і радіокнопок

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

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

Ви хочете примусити вибрати один варіант відповіді

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

Якщо у запитання є тільки два варіанти: так / ні

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

Порівняння радіокнопок і перемикача

Доповнення до статті після її публікації:

5. Якщо хочете, щоб користувачі натискали "Зберегти" для застосування обраного варіанту

Якщо ви перебуваєте на сторінці налаштувань або в місці, де ви хочете, щоб користувач міг експериментувати з параметрами, перш ніж він натисне велику зелену кнопку "Зберегти"- краще використовувати радіокнопки (або прапорці). Однак, якщо ви хочете, щоб ваші налаштування були застосовані негайно (увімкнення / вимкнення Wi-Fi), краще використовуйте перемикач.

Цей варіант запропонував Thomas Veit_, дякую йому:)

_6. Якщо мітки варіанта відповіді короткі, розгляньте можливість використання перемикача з множинним вибором.

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

Приклад перемикача з множинним вибором

Цей варіант запропонував Thomas Weitz, спасибі йому.

Коли використовувати прапорці

У мене є два правила, коли використовувати прапорці, і ось вони:

Якщо ви хочете, щоб користувач міг вибрати кілька варіантів або взагалі не вибирати

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

Один елемент.

Тест: чому пункт "Я прочитав умови" завжди у вигляді прапорця, а не радіокнопки? Адже є сенс використовувати радіокнопку, оскільки це найкращий тип селектора для запитань "так / ні"?

Відповідь: тому що ви можете скасувати його вибір. На відміну від радіокнопок лише з одним елементом, де ви не можете скасувати його. Якщо ви натиснете на нього, він буде обраний НАЗАВЖДИ.

8. Перевірка доступності

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

Чи відповідає ваш селектор стандартам колірного контрасту WCAG AAA? Замість цього деякі дизайнери використовують стандарти ААА. Моя улюблена програма перевірки контрастності - WebAIM.
Варіанти відповіді / елементи більше, ніж 44px для сенсорних екранів? (Іноді використовують 36px.)
Відстань між кожним варіантом відповіді / елементом більше 8px?
Чи завжди видно мітку / запитання?
Чи є у відповідних полях корисний текст зворотного зв'язку? (Наприклад, "Будь ласка, заповніть це питання").

Детальніше: https://webaim.org/techniques/forms/controls

9. Думки на закінчення

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

Бережіть себе, бо зараз світ зовсім збожеволів.

Переклад статті uxdesign.cc

10 уроків з UX дизайну, які я хотів би засвоїти раніше

Редакція — Thu, 10 Aug 2023 19:49:43 +0000

Кажуть, що "заднім розумом усі міцні". Це правда. 10 років тому я переключився з графічного дизайну на UX-дизайн, до цього пропрацювавши 10 років у друкарнях і на виробництві. Це була неймовірна подорож, але є багато речей, які я хотів би дізнатися раніше. Я вибрав 30 найважливіших і ділюся ними з вами, сподіваючись, що ви зможете уникнути багатьох підводних каменів, з якими я зіткнувся, і станете ще ефективнішими в поліпшенні життя користувачів, ніж я. Бо ми всі виграємо, коли хтось із нас стає кращим.

Я розбив ці уроки на 3 категорії: ремесло, пошук роботи та робота із зацікавленими сторонами. У кожній категорії по 10 уроків. У цій статті я зупинюся на ремеслі.

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

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

— Kala Alaeye Danae Ellis

UX-дизайнери теж застосовують "ремесло" у своїй роботі. Ми витрачаємо багато годин (іноді сотні), намагаючись зрозуміти користувачів і поліпшити їхнє життя певними способами, які збільшать дохід, утримання, прибутковість або прилипливість. Для цього ми співпрацюємо з безліччю інших людей. Ми працюємо в умовах безлічі обмежень. Кожен дизайнер унікальний і вносить неповторний відбиток у свою роботу.

Нижче представлено 10 найкращих уроків, що стосуються UX ремесла, які я отримав за останні 2 десятиліття.

УРОК №1: Немає єдиного процесу проектування, лише набір UX-інструментів

Кожен має з чогось починати, тому, коли ми навчаємо студентів UX дизайну, ми багато говоримо про "процес проектування". У багатьох книжках описуються кроки, наче при проєктуванні в реальному світі все ще використовується каскадна модель розробки (Waterfall). Це змушує багатьох дизайнерів зіткнутися з труднощами, коли вони потрапляють у реальний світ, і в них немає часу на техніку, яку вони вивчили в школі дизайну або використовували на попередньому місці роботи.

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

Природно, цього важче навчити, тому такий підхід рідко викладають у школах. Щоб зрозуміти, в якій ситуації який інструмент витягнути (а який не слід), потрібен час, але ви можете почати вчитися просто зараз. Знайдіть новий метод, з яким ви не знайомі, і поекспериментуйте з ним. Потім наприкінці проєкту знайдіть іншого дизайнера, зацікавлену або довірену особу і проведіть "розтин" або ретроспективу виконаної роботи. Визначте, що спрацювало, що ні і що ви б змінили наступного разу. Подумайте, чи була проблема в інструменті або в СПОСІБІ його використання. (Молоток був би не дуже ефективним, якби ви не тримали його за ручку - те ж саме стосується і UX-інструментів).

Можливо, ви не часто використовуєте кожен інструмент, який ви вивчаєте. Проте, БУВАЮТЬ ситуації, коли одні інструменти корисні, а інші ні. Навмисні експерименти допоможуть вам зрозуміти різницю. Якщо вам потрібна порада з підбору інструментів, для початку подивіться ці чудові списки UX методів , методів дослідження користувачів та ефективних технік мозкового штурму.

УРОК №2: Дослідження важливі, але не мають великого значення

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

Просто потрібен значний зсув у ментальній моделі. Якщо ви нервуєте під час дослідницьких сесій, просто уявіть, що ви розмовляєте зі старим другом або колегою за обідом. Готуйтеся, але не заглиблюйтеся занадто глибоко. Це просто розмова друзів. Це проста концепція, але її вплив не можна недооцінювати. Вона може вплинути на те, наскільки ефективно і як часто ви проводите дослідження. Цей урок особливо актуальний, якщо ви, як і я, вважаєте себе інтровертом. (Існує багато інтровертів серед UX-дизайнерів і дослідників).

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

УРОК № 3: Дослідження користувачів - це радше знайомство з користувачами, ніж тестування дизайну.

Коли я тільки починав займатися UX (як і більшість дизайнерів того часу), я думав, що дослідження користувачів пов'язані з "тестуванням" дизайнів перед їх запуском у виробництво. Я розглядав юзабіліті-тестування як свого роду гарантію якості, щоб переконатися, що ми вирішуємо потреби користувачів. У такого підходу є кілька проблем:

Ви ніколи не зможете протестувати статистично значущу частину своїх користувачів. (Тож це не може слугувати ефективним "тестом").
Незважаючи на те, що ми намагаємося проводити дослідження "рано і часто", якщо ми розглядаємо дослідження як "тестування", воно за своєю природою є реактивним. 3) Справжня цінність дослідження користувачів полягає в навчанні, а не в тестуванні.

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

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

Розглянемо цитату Джареда М. Спула з його статті "Фундаментальний зсув у юзабіліті-тестуванні":

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

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

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

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

Джаред Спул, засновник школи дизайну User Interface Engineering & Center Center

Я переконався, що це правда. Що більше ви розумієте користувачів, то правильніші дизайн-рішення ви можете приймати, і то менше вам потрібно "тестувати". Це тому, що ви більше не робите припущень, а приймаєте рішення, ґрунтуючись на знаннях. Це не означає, що ви коли-небудь зможете припинити дослідження користувачів, тому що завжди є чому вчитися, але ви можете зосередити свої дослідження на тому, щоб бути більш проактивними. Це також значнополіпшує міжфункціональні відносини, оскільки більшість проблем юзабіліті вирішуються на ранньому етапі та завдяки більшій єдності між міжфункціональними членами команди.

УРОК №4: Ви не можете (і не повинні) досліджувати все

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

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

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

Розставте пріоритети у своїх дослідженнях

Оцініть кожну мету дослідження за тим, наскільки ви впевнені / не впевнені у своїх припущеннях І / АБО наскільки великим буде вплив, якщо ви виявитеся неправі. Змініть порядок у списку і вирішіть, на що у вас є час, а на що немає. Якщо у вас немає часу на щось важливе, у вас є вагомі аргументи, чому вам потрібно більше часу. З мого досвіду можу сказати, якщо потрібен компроміс, найчастіше це оцінювальне "тестування", яке в кінцевому підсумку поступається місцем відкриттю або "генеративному" дослідженню для формування ваших проєктів.

Складіть план дослідження як перший крок будь-якого дослідницького проєкту

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

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

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

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

УРОК № 5: Забезпечте баланс між потребами бізнесу та результатами користувачів

Можливо, одна з найбільших проблем, з якими стикаються дизайнери - це очевидний конфлікт між бізнес-потребами та результатами користувачів. З одного боку, зацікавлені сторони (часто керівники відділів продажів, фінансів або продуктів) висловлюють думку, що ми повинні зосередитися на задоволенні потреб тих, хто оплачує рахунки - наших "клієнтів". Проблема в тому, що підхід, який вони часто застосовують, полягає в тому, щоб просто прийняти запити функцій і підписати технічне завдання (Statement Of Work), перш ніж з ким-небудь проконсультуються. Часто вони більше орієнтовані на функції, а не на проблеми.

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

Отже, яка точка зору найбільш ефективна? Одним словом: обидві.

Можливо використовувати потреби клієнтів для визначення проблем, які необхідно розв'язати, але робити це таким чином, щоб поліпшити життя користувачів. Це вимагає, щоб керівники бізнесу визначали проблеми, які необхідно розв'язати (результати) для команди, що виконує роботу, а не конкретні функції. І, щоб UX-фахівці зосередилися на поліпшенні життя користувачів тільки тією мірою, якою це допоможе досягти бажаного результату. (Все інше може почекати).

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

УРОК № 6: Уміння стисло подати і "продати" продукт - критично важливі навички ДИЗАЙНУ

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

Коли ви розглядаєте свою роботу як доставку, весь ваш світогляд змінюється. Ви розумієте, що кожна взаємодія з членом команди, кожен огляд дизайну, кожна демонстрація - це шанс продати цінність того, що ви намагаєтеся зробити. Шляхом ВЕЛИКОГО числа спроб і помилок я виявив, що найвигідніше продавати мету, яку я намагався досягти в конкретній ітерації дизайну, тож якщо в когось є інша ідея, як я можу досягти тієї самої мети, про яку я, можливо, не подумав, вони можуть поділитися нею.

Ще один спосіб навчитися "продавати" і доставляти чудовий досвід - це навчитися розповідати історії. Люди зазвичай не запам'ятовують факти і цифри, але пам'ятають історії. Особливо, якщо їх уміло розповіли. Використовуйте розповідну структуру з сюжетною аркою, і зробіть презентацію такою, що запам'ятовується. Якщо ви презентуєте дизайн групі зацікавлених осіб, за можливості використовуйте історії реальних людей з вашого дослідження, їхні обличчя, відео та цитати.

У коледжі в мене був професор, яка викладала після дуже успішної кар'єри у світі бізнесу. Одного разу вона сказала мені, що письмове або усне спілкування, або і те, і інше відігравали важливу роль майже в кожному підвищенні, яке вона отримувала. Це одна з причин, чому я намагаюся писати якомога більше на професійні теми. Щоб відточити будь-яку навичку, потрібна практика. Продаж і спілкування нічим не відрізняються.

УРОК № 7: Зосередьтеся на методах, а не на софті

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

Хороший дизайнер може розв'язувати завдання дизайну на серветці так само добре, як і в новітній програмі. Думаю, що дізнавався про новий програмний пакет (або кілька) у кожній компанії, в якій коли-небудь працював. Це дуже мало вплинуло на мій підхід до дизайну. Усе тому, що проблеми вирішує мислення, а не інструмент, який ви використовуєте для створення макетів.

Пам'ятаю, як був здивований на початку своєї кар'єри, коли дізнався, що приблизно 80% зусиль із розроблення було "проектуванням" коду - або, іншими словами, з'ясуванням того, як підійти до реалізації конкретної проблеми. Щойно вони це зрозуміють, написання коду стане простим для всіх, окрім розробників-початківців junior розробників.

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

Просто пам'ятайте, успіх = результат, а НЕ мокапи.

УРОК №8: Не існує єдино правильного способу щось зробити

Я витратив так багато часу, намагаючись докорінно змінити спосіб ведення бізнесу в компаніях. Ви чуєте на конференціях кейс-стаді або презентації про Scrum, або Kanban, або Lean UX, або дизайн-мислення, або дизайн-спринти, або Jobs To Be Done, або модель Spotify, або SAFe, або OKR, тощо, тощо. І ви негайно спробуєте змусити свою команду або організацію змінити підходи, що використовувалися протягом багатьох років. Коли ваш досвід у реальному світі не відповідає грандіозному баченню, яке намалював доповідач на конференції (або автор статті), ви надзвичайно засмучуєтеся і переконуєте себе, що ваша компанія просто не "розуміє" цього. Потім ви переходите в іншу компанію, і цикл повторюється.

Чому? По суті, це та ж сама причина, через яку ви не можете просто сліпо застосовувати патерн дизайну, який вам подобається в Apple, Google, Microsoft або Facebook. Це була їхня відповідь на їх проблеми, а не ваша.

Джо Натоли однажды сказал:

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

Візьміть частини з кількох підходів, які працюють для ВАШОЇ ситуації, ВАШИХ користувачів, ВАШОГО клієнта, ВАШОЇ організації, і відмовтеся від усього іншого.

Не існує єдино правильного способу зробити ЩОСЬ-ЯКЕСЬ".

Джо Натолі, Give Good UX

УРОК № 9: Дизайн-системи мають підтримувати, а не примушувати

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

Суперечка, який підхід обрати для дизайн-систем, триває, але врахуйте таке: я сам створив 3 дизайн-системи, і розмовляв із розробниками дизайн-систем у 10 із 50 компаній зі списку Fortune - і усі вони дали мені однакову відповідь на запитання "Що б ви зробили інакше, якби ви могли створити її заново?" Безсумнівно, ця відповідь була: "Я б більше зосередився на можливості, а не на узгодженості".

Дизайн-система - це продукт для створення інших продуктів, і, як і будь-який продукт, вона має працювати для своїх користувачів і потребує досліджень. Багато дизайн-систем нагадують мені старі пакети для редагування фотографій, випущені Microsoft у 1990-х роках, у спробах конкурувати з Adobe Photoshop, який багатьом здався занадто складним для вивчення. Так чому ж усі ці програми застаріли і забуті, тоді як Photoshop процвітає? Тому що вони були занадто жорсткими. В ім'я простоти вони забрали всю ефективність з рук користувачів. Багато сучасних дизайн-систем роблять теж саме.

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

УРОК №10: Завжди ставте під сумнів усе і дійте навмисно

Цей урок, мабуть, найважливіший з усіх. Найпотужніший інструмент в арсеналі UX-дизайнера - це запитання "чому"? Це те, що багато хто з нас дізнається надто пізно, коли в розпачі висмикує волосся. Той факт, що той, хто перевершує вас на кілька рівнів, просить вас зробити щось, не означає, що у вас немає повноважень ставити йому запитання.

Основне завдання UX-дизайнера або лідера - втішати тих, хто страждає, і виводити із зони комфорту. Одна з моїх улюблених фраз, які я використовую, щоб пом'якшити удар: "Я тут, щоб ставити запитання". Ви не можете вирішувати проблеми, яких не розумієте.

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

Одне з моїх улюблених занять із керівниками вищої ланки - (чемно) попросити їх сісти і сформулювати своє прохання у форматі "Як ми можемо...". Це робить кілька речей. По-перше, це змушує їх замислитися над проблемою, яку потрібно розв'язати, а по-друге, вона несе в собі конотацію, що є кілька рішень. Я також люблю використовувати такі фрази, як "ми знайдемо рішення, але я просто намагаюся зрозуміти проблему, щоб розв'язати її найефективнішим способом".

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

Ненаситна цікавість - одна з відмінних рис великих дизайнерів. Один із моїх найулюбленіших методів роботи із зацікавленими сторонами і критики роботи дизайнера - "5 чому". По суті, ідея полягає в тому, щоб сформулювати проблему або ідею, а потім запитати "чому?" Стільки разів, скільки буде потрібно, щоб зрозуміти, що, на вашу думку, є основною причиною проблеми. Ви можете звучати як 5-річна дитина, але це дуже ефективно.

Є що додати? Ви можете зв'язатися з автором у LinkedIn або Twitter. Потрібен UX-лідер, який допоможе вашій компанії досягти UX-зрілості? Потрібен спікер для заходу? Подивіться портфоліо автора і зв'яжіться з ним.

Переклад статті uxdesign.cc

Вимірювання якості дизайну за допомогою евристики

Редакція — Tue, 08 Aug 2023 20:29:34 +0000

Як ми вимірюємо якість дизайну? Це запитання я чув у всіх компаніях, де працював. Його ставили не тільки дизайнери. Відповіді варіюються від "ми дізнаємося, коли побачимо", до рішень, що ґрунтуються на аналізі, виходячи з принципів дизайну або докладних і ретельних оглядах продукту і дизайну. Серед інших пропонованих рішень - опитування, такі як NPS (Net Promoter Score), CSAT (Customer Satisfaction Score), або індивідуальні опитування користувачів, наприклад, "Наскільки вам подобається наш продукт?"

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

Кілька років тому я очолював команду дизайнерів і дослідників у компанії, яка тільки-но захопилася філософією Джона Дорра і застосуванням OKR. Ми заміряли все, зокрема якість дизайну.

Механізм оцінювання, на якому ми зупинилися, був розширеним набором евристик юзабіліті та продуктів, що ґрунтується на 10 евристиках юзабіліті дизайну інтерфейсу Якоба Нільсена. Ми дійшли висновку, що, хоча команда дизайнерів може бути упередженою під час оцінювання власної роботи, цілком очевидно, що дизайнери мають знати, що таке "хороший дизайн", оскільки критика є важливою частиною нашої практики.

Я і кілька колег розробляли набір евристик, що відповідають нашій загальній структурі дизайну продукту: дизайн-мислення, UX і UI дизайн. Додатковою перевагою було те, що ми дивилися на кваліфікацію та навички дизайнерів в аналогічних командах, тож під час оцінювання якості, ми могли легко відповісти на запитання "де в цьому проєкті дизайнер продемонстрував сильні сторони чи можливості?"

Щоб оцінити якість дизайну, ми збиралися невеликою групою після запуску нового продукту і проводили короткий огляд виконаної роботи. Ми просто відповідали "так" або "ні" на кожне запитання, і застосовували формулу для визначення процентної оцінки якості (100 - так, 0 - ні).

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

Це і є евристика.

Дизайн-мислення

Проблема користувача

Чи зрозуміла проблема користувача?
Чи підтримує дане дослідження запропоноване рішення проблеми?
Чи підтримують наявні дані пропонований напрямок розв'язання проблеми?
Чи вирішує продукт або функція проблему користувача, зазначену в описі продукту?

Аудиторія

Чи вирішує продукт або функція проблему цільової аудиторії?
Чи уникає продукт або функція негативних компромісів для цільової аудиторії?
Чи чинить продукт або функція мінімальний негативний вплив на глобальну аудиторію / інші аудиторії?

Цінність

Чи приносить продукт або функція додаткову цінність для користувацького досвіду?
Чи уникає продукт або функція зниження цінності в інших сферах?

Принципи дизайну

Чи не перевантажує користувача продукт або функція?
Чи тестувалися продукт або функція під тиском?
Продукт або функція покращують якість?

UX дизайн

Стан системи

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

Зрозуміле завдання

Чи можуть користувачі легко знайти те, що від них очікують?
Чи знають користувачі, як від них очікується виконання завдання (завдань)?

Простота використання

Чи потрібні мінімальні зусилля для вивчення поставленого завдання?
Чи йдуть поточні завдання в логічному порядку?
Чи уникає поточне завдання(и) непотрібної складності?

Очікування користувачів

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

Обробка помилок

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

UI дизайн

Єдині стандарти

Дизайн функції або продукту відповідає стандартам доступності?
Чи використовує дизайн функції або продукту дану дизайн-систему?
Чи відповідає UX-копірайтинг стандартам контент-стратегії (відповідний голос, тон, стиль)?

Впізнавати, а не згадувати

Чи робить дизайн функції або продукту видимими об'єкти, дії та параметри?
Чи легко отримати інструкції або інформацію?

Знайомі елементи

Макет сторінки, ієрархія тощо функції або продукту схожі на інші часто використовувані функції або продукти?
Чи відповідає дизайн функції або продукту стандартам інтерфейсу для відповідних платформ?

Ремесло

Чи відповідає дизайн функції або продукту стандартам галузі?
Чи є дизайн функції або продукту найкращим у своєму класі?
Чи є дизайн функції або продукту зрозумілим і мінімалістичним, коли це можливо?
Чи викликає захоплення дизайн функції або продукту, коли це необхідно?

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

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

Дякуємо jennie § yip та Casey_ Callow за допомогу!

Переклад статті uxdesign.cc

10 найкращих практик Figma, які поліпшать ваш робочий процес у 10 разів

Редакція — Fri, 04 Aug 2023 11:48:30 +0000

Найкращі приклади галузі, які дають змогу проєктувати в Figma як senior-дизайнер.

1. Використовуйте базові компоненти для наборів варіантів

Якщо у нас є великий набір варіантівдля кнопок, полів введення тощо, це коштуватиме нам купу дорогоцінного часу, якщо ми пізніше вирішимо, що радіус 8px виглядає краще, ніж 12px, або якщо нам треба внести будь-які інші коригування.

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

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

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

Подяка: David Shackelford

2. Додайте обкладинку до файлу Figma

При управлінні різними проектами і файлами Figma може бути складно відразу знайти потрібний проект.

Створення обкладинки - це просте й елегантне рішення, що дозволяє зробити проекти впізнаваними з першого погляду.

{Щоб додати обкладинку, вам потрібно:

Створіть сторінку в документі та назвіть її "cover" (необов'язково).
Намалюйте фрейм для зображення обкладинки (найкраще підходить розмір 1920 x 960) 3 Наповніть його зображеннями, наприклад, логотипом або чимось іще, що допоможе вам і вашим товаришам по команді впізнати проєкт.
{Клацніть правою кнопкою миші по фрейму і виберіть "set as thumbnail".

3. Використовуйте стилі для всього

Подумайте про стилі, як про компоненти кольору, тексту, ефектів і обведення.

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

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

Крім того, якщо ви захочете організувати свої компоненти в папки, такі як "Brand Colors", використовуйте в іменах слеш: Brand Colors / Primary.

4. Організуйте набори варіантів за допомогою функції auto-layout

Чи знаєте ви, що можна організувати варіанти за допомогою auto-layout? Виділіть фрейм набору варіантів і натисніть SHIFT + A. З auto-layout дуже просто впорядкувати та переупорядкувати компоненти.

Це підводить нас до наступного пункту ...

5. Використовуйте auto-layout з розумом

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

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

Якщо ви ще не освоїли auto-layout, я можу порекомендувати безкоштовний прискорений курс Пабло Стенлі.

Дотримуючись передової практики проектування за допомогою auto-layout, ми можемо значно заощадити час при видаленні або додаванні контенту, створенні рядків зі схожим контентом, створенні адаптивних компонентів і багато іншого.

Я проєктую кожну сторінку, використовуючи auto-layout, тому я можу швидко регулювати інтервали або додавати і видаляти контент без необхідності вирівнювати пікселі для повторного вирівнювання елементів.

6. Створюйте схеми юзерфлоу зі своїх екранів

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

Щоб допомогти зробити юзерфлоу, я використовував не дуже відомий прийом - просто скопіюйте і вставте конектор (або інший елемент юзерфлоу) з FigJam у файл Figma, і він збереже всю свою функціональність.

Подяка: Mike Rogers // dribbble.com/mikewrogers

7. Використовуйте обмеження

Щоб фрейм залишався організованим і адаптованим, використовуйте обмеження, тоді Figma знатиме, як об'єкти мають реагувати на зміну розміру своїх фреймів. Обмеження допомагають контролювати зовнішній вигляд дизайну на екранах різних розмірів і на різних пристроях, і позбавляють нас від необхідності вносити корективи щоразу, коли потрібно змінити розмір фрейма.

Якщо ви захочете проігнорувати обмеження для об'єктів на фреймі, все, що потрібно зробити, це утримувати клавіші CMD або CTRL під час зміни розміру фрейму.

8. Створюйте шаблони для компонентів

Створення компонента для картки профілю - це чудово, але що робити, коли у нас є список профілів? Саме тут шаблони заощадять багато часу і зроблять наше життя в 10 разів простішим.

Ідею шаблонів популяризував Бред Фрост у книзі "Atomic Design Methodology", і це доволі проста концепція.

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

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

9. Організуйте компоненти

Немає нічого гіршого, ніж відкрити чийсь файл дизайну і зрозуміти, що в мене немає можливості внести зміни в основні компоненти, не клацнувши правою кнопкою миші і не вибравши пункт "go to the main component", тому що вони не організовані.

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

Що кращий вигляд матиме файл дизайну, то кращий вигляд матимуть самі дизайни.

10. Використовуйте Loom

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

Якщо члени вашої команди працюють у різних часових поясах або бракує вільного часу - спробуйте використати Loom для критики асинхронного дизайну та обміну проєктами.

Підписуйтесь на автора в Twitter, Dribbble і Medium, ви також можете зв'язатися з ним у LinkedIn.

Переклад статті uxdesign.cc