Даруємо!!!

Базові принципи хорошого UI дизайну


В дизайні, яким би він не був креативним, симпатичним і модним, існують свої правила, принципи, аксіоми. UI дизайн – не виняток. Щоб ознаймитись з його основними принципами, ми взяли уривок з Fundamental UI Design, електронного курсу Jane Portmann.


Jane Portmann – незалежний UI / UX консультант, який допомагає заробляти більше грошей комапніям, пов’язаним з програмним забезпеченням. Колишній креативний директор великого агентства, після народження двох малюків Джейн створила успішну консультаційну компанію. Зараз Джейн працює над третьою книгою – The UI Audit, любить виступати на заходах, але найбільше – вирішувати реальні проблеми бізнесу за рахунок продуманого дизайну UI.

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

Правова сфера ретельно задокументована – сильніше, ніж UI (user interface) дизайн, це точно. Але реальне життя може бути досить дивним, і існує безліч ситуацій, коли правові норми суперечать одна одній або взагалі відсутні.

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

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

Зрозумілість

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

У будь-якому місці вашого застосування кілька моментів завжди повинні бути зрозумілі користувачеві:

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

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

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

Гнучкість

Дизайн – це те, що виглядає добре в будь-якій ситуації.

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

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

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

Близькість

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

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

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

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

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

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

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

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

Послідовність і структура

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

Структура – то, що робить речі більш доступними.

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

Що ви можете для цього зробити:

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