Ця стаття - список важливих порад для 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. Зосередьте увагу на тому, як це виглядає, а не як це працює
Протестуйте дизайн і зробіть крок назад, щоб переконатися, що інтерфейс може відповідати широкому спектру варіантів використання, а не тільки ідеальним.
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
Топ коментарі (0)