Композиційні засоби зручності в інтерфейсах

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

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

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

А наразі — зосередимось лише на деяких важливих аспектах роботи з композицією.

Закони композиції у дизайні інтерфейсів

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

  • закон цілісності,
  • закон рівноваги,
  • закон ієрархії (супідрядності).

Розгляньмо, як ці закони діють в межах інтерфейсів!

Закон цілісності

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

З точки зору стилістики, для цього необхідні:

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

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

Закон рівноваги

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

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

Спробуємо пояснити на прикладі:

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

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

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

Закон ієрархії (супідрядності)

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

Докладніше про ієрархію змісту в графічному дизайні ми розповідали в цій статті.

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

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

Закони гештальт-групування в інтерфейсах

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

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

А ще є загальний закон — простоти. Він стосується не лише груп, а загального композиційного підходу.

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

Закон замкнутості

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

Наслідків у цього закону для дизайнерів декілька:

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

Закон близькості

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

Наслідків у цього закону декілька:

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

Закон схожості

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

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

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

Закон симетричності

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

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

Закон безперервності

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

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

Закон спільної долі

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

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

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

Закон попереднього досвіду

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

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

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

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

Закон простоти

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

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

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

Намагайтесь оптимізувати кількість елементів в одному рядку до 3–5. Часто замовники, описуючи якості свого продукту, складають списки з 10 і навіть 15 якостей. Але людське сприйняття так влаштоване, що більшість із нас просто не здатна тримати в голові подібні масиви. Відверто, не всі якості є однаково важливими. Тож краще перелічити лише ті, які дійсно є перевагами, а решту — приховати.

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

Спрощуйте все, що можна спростити.

Навігацію:

Форми:

Відповідно до закону простоти, 3 краще, ніж 4. 4 ліпше, ніж 5. І в контексті змісту, і в контексті оформлення.

·
3782
·
5
·
goodsuper 44
Головна