Думайте менше. Дизайн краще.

Сприяння кращому робочому процесу в дизайні інтерфейсу через керований процес прийняття рішень і продуманий процес.

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

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

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

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

1. Обмеження змінних

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

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

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

Масштаб і пробіл

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

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

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

Сітки

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

Сітка система зменшить змінні в компонуванні

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

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

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

Типографія

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

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

Колір

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

Такі інструменти, як Adobe Color CC, полегшують попереднє визначення палітри

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

Зображення

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

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

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

2. Створення керівництва по стилю раніше

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

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

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

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

3. Модульний пріоритет та адаптація

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

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

Визначте ключові сфери

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

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

Зосередьтеся на ключових областях

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

4. Змусити це працювати для всіх

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

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

Доступність є благом у маскуванні

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

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

Це не лише інвалідність

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

5. Використання випробуваних та випробуваних моделей

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

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

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

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

Заключна примітка

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

Слідкуйте за мною у Twitter