Вільний переклад статті Якуба Ліновскі - «A Good User Interface».
Хороший користувальницький інтерфейс має високі показники конверсії і простий у використанні. Іншими словами, він хороший як для бізнесу, а так і для людей, які ним користуються. Нижче вашій увазі пропонується ряд практичних ідей, які ви можете спробувати застосувати.
Ідея 1: Намагайтеся використовувати макет з однією колонкою замість многоколоночной
Макет з одного колонкою дозволяє краще контролювати оповідання. Він зможе направити ваших користувачів найбільш передбачуваним шляхом - зверху вниз. Багатоколоночних підхід допускає ризик того, що користувач може відволіктися від основної мети сторінки. Надсилайте людей за допомогою розповіді з обов'язковим закликом до дії в кінці.
Ідея 2: Намагайтеся зробити подарунок, чи не завершуйте продаж відразу
Дружній жест, такий як зробити подарунок покупцеві, саме те, що потрібно. Якщо дивитися глибше, то подарунки - це ще й ефективна тактика переконання, заснована на принципі взаємності. Як би очевидно це не звучало, але невеликі знаки вдячності окупляться сторицею.
Ідея 3: Намагайтеся об'єднувати схожі функції і не дробити інтерфейс
В ході роботи можна ненавмисно створити кілька розділів і елементів, які виконують одну й ту ж функцію. Це звичайна ентропія, коли система стає безладною з плином часу. Не використовуйте різні назви для однакових функцій, щоб не збільшувати інформаційну навантаження на ваших клієнтів. Чим більше фрагментований призначений для користувача інтерфейс, тим крутіший стає крива навчання і тим складніше клієнту вникнути в суть того, що від нього вимагається. Проведіть рефакторинг призначеного для користувача інтерфейсу і об'єднайте подібні функції разом.
Ідея 4: Намагайтеся використовувати соціальне доказ замість того, щоб розповідати про себе самого
Соціальне доказ є ще однією тактикою переконання, яка дозволяє збільшити конверсію.
Рекомендації про вас і вашу пропозицію можуть спонукати користувача до дії, Переконайтеся, що дані рекомендації або думки присутні.
Ідея 5: Намагайтеся повторити головний заклик до дії, замість того, щоб показувати його один раз
Повторення призову до дії більше застосовно до більш довгим сторінок або ж використовується повторення через кілька сторінок. Звичайно, ви не хочете, щоб пропозиція показувалося 10 разів на одній сторінці і дратувало людей. Довгі статті стали нормою і спроба вмістити все в перший екран вже не є гарною ідеєю. Немає нічого страшного в тому, щоб зробити один заклик вгорі сторінки, ненав'язливо нагадати в середині і закріпити в кінці. Коли люди досягають кінця сторінки, вони зупиняються подумати, що зробити далі, і тут саме час зробити пропозицію або завершити угоду.
Ідея 6: Намагайтеся посилювати відмінності в стилі між розмітки і вибраними елементами, а не розмивати їх
Виразні засоби, такі як колір, глибина і контрастність, можуть бути використані в якості надійних маркерів, що відображають фундаментальний мову навігації по інтерфейсу: де я, і куди я можу перейти. Щоб чітко донести цю ідею до користувачів, потрібно використовувати різну візуальне оформлення для елементів різного призначення (посилань, кнопок, обраних елементів і контенту), ці відмінності повинні бути явно виражені, і слід використовувати їх однаковим чином у всьому інтерфейсі.
На зображенні наведено приклад, де синій колір обраний, щоб відзначити все, що може у скрутному становищі, а чорний для всього, що було вибрано або вказує на те, де ми. При правильному застосуванні, людям буде набагато легше орієнтуватися серед таких підказок. Чи не ускладнюйте життя користувачам - не порушуйте смислове кодування.
У випадках, коли показується кілька пропозицій, виділена рекомендація продукту може бути гарною ідеєю, тому що деяких людей потрібно трохи підштовхнути. Є деякі психологічні дослідження, які припускають, що чим ширше вибір, тим менше шансів, що рішення взагалі буде прийнято і реалізовано. Щоб не допустити такої аналітичний параліч, намагайтеся підкреслювати і виділяти одні варіанти на тлі інших.
Ідея 8: Спробуйте скасування дії замість запитів на підтвердження
Уявіть, що ви тільки що натиснули на діючу кнопку або посилання. Скасування дії поважає початкове призначене для користувача намір, дозволяючи дії статися відразу, з можливістю скасування. Запити на вирішення дії, навпаки, вселяють користувачеві, що він або вона не знають, що вони роблять, піддаючи сумніву їх наміри. Дії людини найчастіше відображають його справжні наміри, і тільки в рідкісних ситуаціях вони випадкові. Неефективність і убозтво підказок особливо очевидні, коли користувачі повинні виконувати дії повторно, і підказки будуть з'являтися багато разів, знову і знову: це поганий досвід. Спробуйте дати вашим користувачам більше можливостей контролю: скасувати дію і не питати підтвердження там, де це можливо.
Ідея 9: Поясніть, для кого призначений продукт. Не намагайтеся адресувати повідомлення всім підряд
Ви чітко виділяєте свою аудиторію, або звертаєтеся до всіх відразу? Ця ідея підвищення конверсії полягає в тому, щоб ясно пояснити, для кого саме призначений ваш продукт або сервіс. Коли ви звертаєтеся до аудиторії, виділіть певні ознаки ваших покупців. Це виведе спілкування з ними на новий рівень і додасть якийсь відтінок ексклюзиву і елітарності. Можливий ризик такої стратегії полягає в тому, що при оголошенні будь-яких обмежень ви можете відсікти частину потенційної аудиторії. В цьому випадку виручить прозорість пропозиції: чесність викликає довіру.
Ідея 10: Говоріть прямо замість припущень
Ви можете звернутися до людей з невпевненою тремтінням в голосі або можете сказати те ж саме впевнено. Якщо ви закінчуєте кожне речення питальними знаками, використовуєте слова на кшталт «можливо», «було б здорово», «вам цікаво?» або «не хочете спробувати?», тоді у вас є всі можливості додати вашого повідомлення переконання. Хто знає, можливо, іноді варто підказати людям наступний крок на шляху оптимізації конверсії?
Ідея 11: Більше контрасту замість однорідності
Чим більше явно і різко виділяються заклики до дії серед інших елементів сторінки, тим краще буде працювати ваш інтерфейс, тим він сильніший. Контраст основних цільових дій можна підсилити за допомогою безлічі способів. Використовуючи насиченість, ви можете робити деякі елементи темніше на тлі світлих, за допомогою глибини ви змушуєте предмети здаватися ближче на тлі решти контенту, який виглядає більш віддаленим (використовуйте тіні і градієнти). Нарешті, ви можете підібрати доповнюють кольору з колірного кола (наприклад, жовтий і фіолетовий) для ще більшого посилення. Однак не варто надмірно захоплюватися: контраст між контентом і основною дією повинен бути збалансований.
Ідея 12: Покажіть місце походження продукту замість узагальнень
Інформація про вас, ваш продукт або послугу дозволяє вийти на більш особистий рівень в спілкуванні з клієнтом. Хороший спосіб розповісти про себе - згадати країну, штати або місто походження. Якщо ви зможете практично застосувати цю раду, то ставлення до вас стане більш доброзичливим. Часто, згадка про те, де був зроблений продукт, є хорошим способом створити відчуття більш високої якості продукту.
Ідея 13: Скорочуйте кількість полів, не питайте занадто багато
Люди за своєю природою не люблять трудомісткі завдання, і це повною мірою відноситься до заповнення полів форми. Кожне поле, яке вимагає відповіді від користувача, може спровокувати його до відходу зі сторінки. До того ж, не всі пристрої дозволяють швидко набирати текст, особливо важко це робити на мобільних пристроївах. Постарайтеся залишити тільки необхідні поля, і видалити стільки полів, скільки можливо. Якщо необхідних полів дійсно багато, то заповнити їх буде краще після відправки основної форми на окремій сторінці або за допомогою додаткової форми. Розширити форму нескладно, але меншу кількість полів дозволяють збільшити конверсію.
Ідея 14: Розкрийте всі опції відразу
Кожне меню, що випадає, що використовується вами, приховує набір дій, на пошук яких потрібне додаткове зусилля. Якщо ці приховані опції є центральними для того, щоб користувач здійснив необхідну дію, то, можливо, варто збільшити їх пріоритет на сторінці. Спробуйте зробити меню, що випадає для тих опцій, які очевидні і не вимагають нових знань від користувача: у виборі дати і часу (наприклад, календарі) або географічного розташування. Іноді пункти меню, що випадає можуть працювати в тих інтерфейси, дії яких користувач повинен здійснювати час від часу. Будьте обережні, використовуючи списки, що випадають для елементів на шляху основного розповіді.
Ідея 15: Пропонуйте послідовність замість сторінок з подвійним дном
Сторінки з подвійним дном - вбивці конверсії. Так, все вже звикли скролл довгі сторінки, але важливо не створити у відвідувачів помилкове відчуття того, що сторінка закінчилася раніше, ніж це відбудеться насправді. Якщо сторінка передбачає прокрутку, задайте візуальний або смисловий ритм, який явно вкаже користувачеві, що далі є продовження. Будьте обережні з великими розривами на місцях «згину», де може з'явитися межа екрану (звичайно, я маю на увазі умовні зони, оскільки складно передбачити всі варіанти для різноманітних пристроїв).
Ідея 16: Зберігайте фокус, не зловживайте посиланнями
Немає нічого складного в тому, щоб розставити побільше посилань в різних місцях сторінки в надії задовольнити якомога більше потреб потенційних клієнтів. Однак, коли ви створюєте оповідальну сторінку, призначення якої в тому, щоб підвести користувача до певного цільовим дії, подумайте двічі. Не забувайте, що будь-яке посилання перед основним цільовим дією збільшує ризик відходу користувача зі сторінки і відволікає від того, що ви від нього чекаєте. Слідкуйте за кількістю посилань і по можливості дотримуйтесь баланс між розвідних сторінками (з трохи більшою кількістю посилань) з «тунельними» сторінками з меншою кількістю посилань і більшою конверсією. Чистка від непотрібних посилань напевно збільшить шанси дістатися до важливої \u200b\u200bкнопки.
Сили, вкладені в розробку моделі поведінки програмного продукту, будуть витрачені даремно, якщо ви не зумієте належним чином донести до користувачів принципи цієї поведінки. У разі мобільних продуктів це робиться візуальними засобами - шляхом відображення об'єктів на дисплеї (в деяких випадках доцільно використовувати тактильні відчуття від натискання).
Мета художника - створити об'єкт, погляд на який викликає естетичний відгук.
Дизайнери створюють об'єкти, якими будуть користуватися інші люди. Якщо говорити про дизайнерів візуальних інтерфейсів, то вони шукають найкраще уявлення, доносячи інформацію про поведінку програми, в проектуванні якої вони беруть участь. Дотримуючись целеоріентірованного підходу, вони повинні прагнути представляти поведінку і інформацію в зрозумілій і корисному вигляді, який підтримує маркетингові цілі організації і емоційні мети персонажів. Зрозуміло, візуальний дизайн користувальницьких інтерфейсів не виключає естетичних міркувань, але такі міркування не повинні виходити за рамки функціонального каркаса.
Графічні дизайнери зазвичай дуже добре розбираються в візуальних аспектах і гірше уявляють собі поняття, що лежать в основі поведінки програмного продукту і взаємодії з ним. Вони здатні створювати красиву і адекватну зовнішність інтерфейсів, а крім того - привносити фірмовий стиль у зовнішній вигляд і поведінку програмного продукту. Для таких фахівців дизайн або проектування інтерфейсу є в першу чергу тон, стиль, композиція, які є атрибутами бренду, в другу чергу - прозорість і зрозумілість інформації і лише потім - передача інформації про поведінку за допомогою очікуваного призначення.
Дизайнерам візуальної частини інтерфейсу необхідні деякі навички, які притаманні графічним дизайнерам, але вони повинні ще мати глибоким розумінням і правильним сприйняттям ролі поведінки. Їх зусилля в значній мірі зосереджені на організаційних аспектах проектування. У центрі їх уваги знаходиться відповідність між візуальної структурою інтерфейсу з одного боку і логічною структурою користувальницької ментальної моделі та поведінки програми - з іншого. Крім того, їх турбує питання про те, як повідомляти користувачеві про станах програми і що робити з когнітивними аспектами призначеного для користувача сприйняття функцій.
Інформаційні дизайнери працюють над візуалізацією даних, вмісту і засобів навігації. Зусилля інформаційного дизайнера спрямовані на те, щоб представити дані в формі, що сприяє їх вірному тлумаченню. Результат досягається через управління візуальної ієрархією за допомогою таких засобів, як колір, форма, розташування і масштаб. Поширеними об'єктами інформаційного дизайну є всілякі графіки, діаграми та інші способи відображення кількісної інформації.
Щоб створювати привабливі і зручні інтерфейси, дизайнер інтерфейсів повинен володіти базовими візуальними навичками - розумінням кольору, типографіки, форми і композиції - і знати, як їх можна ефективно застосовувати для передачі поведінки та подання інформації, для створення настрою і стимулювання фізіологічних реакцій. Дизайнеру інтерфейсу також потрібне глибоке розуміння принципів взаємодії і ідіом інтерфейсу, що визначають поведінку продукту.
Вірите чи ні, але статичні макети і прототипи виходять з моди, стаючи старомодними, а грань між дизайнером і розробником стирається. Так як ми все більше працюємо у співпраці з іншими дизайнерами або розробниками, інструменти, якими ми користуємося, також змінюються.
Настає ера екранів з великою роздільною здатністю і дизайнери повинні шукати все нові методики і інструменти, які допомогли б їм створити більш чуйні і гнучкі дизайн макети для різних пристроїв.
Інструменти для макетування (wireframing)
Wireframe інструменти роблять процес створення веб-сайту або програми істотно простіше, визуализируя продукт і звертаючи увагу всіх учасників безпосередньо на функціональність, і інтерактивність макета.
Клієнти повинні розуміти, як приблизно буде працювати ваше майбутнє додаток або сайт. Але просте пояснення "на пальцях" або кілька повідомлень по поштою залишить більшу частину функцій на відкуп їх уяві. Wireframe інструменти частіше застосовуються щоб спростити комунікацію між замовником і виконавцем.
Є безліч різних Wireframe інструментів, які пропонують різноманітний функціонал: деякі програми можуть використовуватися лише для простих wireframe-ів, інші ж - для створення більш складних і деталізований прототипів прототипів.
Balsamiq Mockups
Простий, але відмінний онлайнwireframe інструмент, що включає в себе бібліотеку drag-and-drop елементів, списки і кнопки, стилізовані під малюнок від руки. Основна фіча цієї програми в тому, щоб наблизити мокап до ступеня "навмисно грубого виду і низькою точності", щоб отримати настільки багато фідбека, наскільки це можливо. "Призначений для спільної роботи" - ці слова, що описують продукт на офіційному сайті, означають, що всі члени команди і клієнти можуть брати участь в процесі створення прототипу.
платформа:Win, Mac, Linux і веб версія
Ціна: $ 89 ($ 12 \\ місяць за повнофункціональний тріал)
Sketch
Sketch: Гнучкий і функціональний wireframe інструмент зі стильний інтерфейсом, який змусить Вас проектувати казкові речі, тому що створення дизайну повинно бути веселощами, а не рутиною. Цей продукт простий у використанні, отримав інтуїтивно зрозумілий графічний інтерфейс а так само безліч зовнішніх інтеграцій.
платформа: Mac
Ціна:$ 99 (доступний безкоштовний тріал)
Adobe Illustrator
Adobe Illustrator є потужним інструментом для роботи з векторною графікою (Це означає, що ви можете створювати арти будь-якого розміру, масштабуючи як необхідно, при цьому не втрачаючи якості зображення). Це чудова програма для прототипування різного рівня деталізації, створення складних векторних ілюстрацій і роботи з типографікою, а також для створення відмінного UX. Чудовий інструмент для створення UI мокап.
платформа:Win & Mac
Ціна:$ 9-$ 49 в місяць
Adobe InDesign
Цей дизайн інструментарій включає в себе можливість роботи з різним типом контенту і файлів, хоча спочатку призначався для верстки багатосторінкових друкованих документів. Створення прототипу сайту або програми у форматі інтерактивного PDF-документа ще ніколи не було настільки простим! Цей продукт дає Вам можливість створювати бібліотеки компонентів сторінки, так що ви можете зробити численні колекції різних UI-елементів, які ви зможете використовувати повторно.
платформа: Win & Mac
Ціна: $ 9-$ 49 в місяць
OmniGraffle
OmniGraffle - продукт для OS X і iOS, який плавно переходить до спрощення роботи, перебираючись на iPad. Це ефективний інструмент для створення макетів екранів, який дозволяє блискавично об'єднувати каркаси веб-сайтів, обробляти графіки, діаграми або контури сторінки. Ви вибираєте тип проекту, і OmniGraffle будує зв'язки і залежності між різними елементами, автоматично з'єднуючи лінії у вигляді графіків і вирівнює фігури і елементи в макетах або сторінки.
платформа:Mac & iOS
Ціна:$50
UXPin
UXPin відмінна онлайн платформа для дизайну користувальницького взаємодії і інтерфейсів, прототипів десктопних, веб і мобільних додатків, які повинні бути швидкими і простими в роботі. Прототипи можуть бути створені з вбудованих пресетів і бібліотек, файлів Photoshop, імпортованих файлів Sketch або з використанням великих бібліотек призначених для користувача інтерфейсів UXPin.
Платформа: веб версія
Ціна: $ 15- $ 40 в місяць
Інструменти прототипирования
Прототипи допомагають взаємодії команди розробки, а так само з спрощують демонстрацію клієнту його майбутнього продукту. У ваших клієнтів може бути попередній макет майбутнього інтерфейсу, за допомогою інструментів по створенню прототипів, ви зможете оперативно отримати зворотній зв'язок від клієнта, пропозиції щодо зміни або поліпшення різних UX / UI питань, без залучення дорогих розробників, влаштовувати демонстрацію або тестування майбутнього продукту.
Кілька слів про вибір інструментів для створення інтерактивних прототипів: на сьогоднішній день великий вибір програм для UI прототипирования може збити з пантелику. Звичайно, постійне використання однихі тих же інструментів практично з точки зору малих витрат за часом на освоєння однакових прийомів, але наявність новіших і просунутих інструментів повинно стимулювати дизайнерів до розвитку та оптимізації дизайн процесів. Деякі додатки, дозволяють створювати прототипи з низьким рівнем інтерактивної взаємодії, таким як облінкований екрани або сторінки, анімувати переходи між ними, інші - створювати більш складні прототипи з підтримкою нативних мобільних жестів і анімацій. Найбільш просунуті рішення, мають і візуальний редактор і редактор коду, що дозволяє програмувати прототипи.
Pixate
Pixate - це онлайн інструмент для створення інтерактивних прототипів, який ідеально підходить для роботи з мобільними додатками. Прототипи створюються за допомогою графічних макетів імпортованих в програму, тому що в ній немає готових бібліотек елементів і потрібно працювати з графічними файлами створеними в сторонніх програмах. У ній немає готових бібліотек елементів, потрібно працювати з графічними файлами створеними в сторонніх программах.Полезная функція Pixate - це можливість тестування прототипу в реальному часі на смартфоні або планшеті
платформа: веб
Ціна: $ 0- $ 50 за користувача на місяць
Axure
Крім створення динамічних прототипів, Axure надасть можливість створити інтерактивний wireframe і збільшити складність і деталізацію вашого макета. Цей генератор включає в себе сайтмепи, віджети, підтримку математичних Функ і інструментарій для автоматичного створення документації а також побудови HTML-макетів додатків і веб-сайтів. Крім того, ви зможете подивитися на прототип вашої програми прямо на смартфоні з допомогою вбудованої функції шаринга.
платформа: Win & Mac
Ціна: $289-$589
Origami
Origami - безкоштовний інструмент, Який дозволяє створювати інтерактивні прототипи. Які можна запускати на айфоне або Айпад, взаємодіяти з ними, і експортувати код, придатний для використання розробниками. так само дозволяє створювати зв'язку між шарами в прототипі і вашому графічному редакторі (Sketch або Photoshop), після чого будь-які зміни на рівні графічних макетів оновлюються і в самому прототипі.
платформа: Mac
Ціна: безкоштовно
Form
Form - ідеальна для створення нативних інтерактивних прототипів мобільних додатків, точно імітують анімацію і взаємодія для iOS додатків. Макети створюються за допомогою бібліотек компонентів, розбитих за різними категоріями, а за оновленнями можна спостерігати за допомогою смартфона. Підтримується функція drag-and-drop.
платформа:Mac
Ціна: безкоштовно
InVision
Invision - це платформа, яка об'єднує в собі безліч корисних функцій для сучасної роботою над веб або мобільним інтерфейсом. Система працює з зовнішніми графічними файлами, які можна довантажувати в систему, або пов'язувати з прототипом для автоматизованого оновлення графічних елементів без постійного завантаження нових версій (тобто Мнговенние поновлення мобільної версії прямо на девайсі). Платформа має свою систему контролю версій, корисний функціонал для командної роботи і коментування прототипу, багато іншого.
платформа: веб
Ціна:$ 15- $ 99 (1 прототип безкоштовно)
Marvel
Marvel є відмінним веб-інструментом для прототипування, що виділяється своїм потенціалом, який спрощує процес створення прототипів. Інструмент дозволяє працювати з найпростішим дизайном інтерфейсу, створенням інтерактивних прототипів, а так само дозволяє коментувати макети в реальному часі всім учасникам проекту. Платформа працює з великою кількістю підтримуваних типів файлів, а так само дозволяє імпортувати Sketch і Photoshop файли.. Доступно 17 вбудованих вибраних станцій мобільних пристроїв, саме тому ви можете бути впевнені, що ваші прототипи будуть оптимізовані для того пристрою, який ви вибрали. Найвидатнішою особливістю цього ПО є мобільний додаток-компаньйон. Якщо ви хочете працювати з ескізами на папері, мобільний додаток дозволяє швидко перенести ваші начерки і працювати з ними вже всередині платформи.
Marvel простий у використанні і навчанні, у вільному доступі Ви зможете знайти велику кількість FAQ і навчальних програм, а так же відеоуроки. Крім того, програма має величезне співтовариство дизайнерів, які регулярно діляться своїми проектами і допомагають у підтримці інших.
Flinto For Mac
Flinto ідеально підходить для створення прототипів анімації або комбінування взаємодії мобільних і веб додатків. Прототипи можуть бути побудовані з вбудованих пресетів, які імпортуються в програму для початку роботи. Якщо ви використовуєте Sketch, в програмі доступний плагін, який дозволяє імпортувати робочі файли за допомогою одного кліка миші.
платформа: Mac
Ціна: $99
Інструменти для візуального дизайну інтерфейсу
Коли прототип готовий, наступний крок полягає в створенні візуального дизайну інтерфейсу майбутнього продукту. У кожного дизайнера є свої улюблені інструменти, які, здається, неможливо замінити. Деякі з них вже добре відомі (їх ви швидко знайдете в арсеналі будь-якого дизайнера), в той час як деякі не настільки популярні. Отже, зверніть Вашу увагу на 5 головних інструментів для створення візуального дизайну, які ми вважаємо, зможуть потрапити і в ваш арсенал.
Adobe Photoshop
Хоча ця програма не потребує описі, кілька слів сказати, все ж варто. Хоча раніше Photoshop не включав в себе будь-які бібліотеки компонентів інтерфейсу, але вже у версії CC з'явилася можливість працювати з бібліотеками елементів, були додані артборди і багато іншого. Навіть якщо ви не використали продукти Adobe, накидати загальні ідеї, групуючи декілька шарів і компонентів буде не довгим процесом. Ви можете создатвать не тільки UI і UX, але також розкадровки та будь-які ескізи, які ви зможете придумати.
платформа:Win & Mac
Ціна: $ 9-$ 49 в місяць
Adobe InDesign
Цей дизайн-нструмент включає в себе можливість роботи з різним типом контенту і файлів, хоча спочатку призначався для верстки багатосторінкових друкованих документів. Багато хто використовує його лише для створення прототипу, інші ще й для дизайну самого інтерфейсу Створення прототипу сайту або програми у форматі інтерактивного PDF-документа ще ніколи не було настільки простим! Цей продукт дає Вам можливість створювати бібліотеки компонентів сторінки, так що ви можете зробити численні колекції різних UI-елементів, які ви зможете використовувати повторно.
платформа: Win & Mac
Ціна: $ 9-$ 49 в місяць
Adobe Illustrator
Adobe Illustrator є потужним інструментом для роботи з векторною графікою (це означає, що ви можете створювати арти будь-якого розміру, масштабуючи як необхідно, при цьому не втрачаючи якості зображення). Це чудова програма для прототипування різного рівня деталізації, створення складних векторних ілюстрацій і роботи з типографікою, а також для створення відмінного візуального дизайну інтерфейсу для різного типу продуктів.
платформа: Win & Mac
Ціна: $ 9-$ 49 в місяць
Adobe Fireworks
Adobe Fireworks дозволяють розробляти макети для мобільних і веб додатків. У програмі є підтримка стилів CSS, різних шрифтів, а фішки по типу "corner radius" можуть бути експортовані як окремий стиль. Є так само набір встановлених пресетів.
На жаль, проект більше не підтримується і незабаром буде замінений на Adobe Experience Design.
Adobe XD задумана як повне (комплексне) рішення для проектування інтерфейсу, і роботи над цією програмою були проведені спільно з спільнотою професійних дизайнерів. Розробники думали про оптимізацію і поліпшення взаємодії користувача з продуктом, шляхом розширення GUI додатків і сайтів. В даний час програма доступна на офіційному сайті Adobe безкоштовно (тільки для Mac OS X).
Platform: Win & Mac
Ціна: немає \\ тимчасово безкоштовно
Sketch
Sketch: Гнучкий і функціональний інструмент зі зручним і інтуїтивно зрозумілим інтерфейсом, Який змусить Вас створювати казкові речі, тому що створення дизайну повинно бути веселощами, а не рутиною. Цей продукт простий у використанні, багато дизайнерів використовують його для вирішення відразу двох завдань - як інструмент низкоуровневого макетування, створення wireframes, так і для фінального візуального дизайну інтерфейсу.
платформа:Mac
Ціна: $ 99 (доступний безкоштовний тріал).
На закінчення
Тепер вибір за Вами - робіть лише зважені рішення! Які інструменти більше підходять особисто вам?
Художники і візуальні дизайнери працюють з одними і тими ж образотворчими засобами. І ті, і інші повинні бути майстерні і досвідчені в усьому, що стосується цих коштів, але їх діяльність служить різним цілям. Мета художника - створити об'єкт, погляд на який викликає естетичний відгук. Таким чином, образотворче мистецтво - спосіб самовираження художника на тему, яка у нього (а іноді і у суспільства в цілому) викликає емоційний або інтелектуальний інтерес. Художник не пов'язаний майже ніякими обмеженнями. Чим незвичніше і своеобразнее продукт його зусиль, тим вище він цінується.
Дизайнери, навпаки, створюють об'єкти для інших людей.У той час як сучасні художники стурбовані в основному самовираженням,дизайнери, як відзначають Кевін Маллет і Даррел Сано в своїй чудовій книзі «Designing Visual Interfaces» (Mullet and Sano, 1995), «зайняті пошуками найбільш підходящого уявленнядля передачі деякої специфічної інформації », тобто комунікацією.Якщо говорити про дизайнерів візуальних інтерфейсів, то вони шукають найкраще уявлення, доносячи інформацію про поведінціпрограми, в проектуванні якої вони беруть участь. Дотримуючись целеоріентірованного підходу, вони повинні прагнути представляти поведінку і інформацію в зрозумілій і корисному вигляді, який підтримує маркетингові цілі організації і емоційні мети персонажів.
Скажімо прямо, що візуальний дизайн користувальницьких інтерфейсів не виключає естетичних міркувань, але такі міркування не повинні виходити за рамки функціонального каркаса. І хоча в візуальних комунікаціях завжди присутній суб'єктивізм, ми над зменшенням шкідливого впливу смаку.Ми прийшли до висновку, що чітке вираження емоційних цілей користувача і бізнес-цілей неоціненні, навіть коли мова йде про дизайн тих аспектів візуального інтерфейсу, які працюють на благо бренду, відповідають за досвід користувачів і забезпечують фізіологічні реакції. Більш докладно про фізіологічному рівні когнітивної обробки ми писали в розділі 5.
Образотворче мистецтво, візуальний дизайн інтерфейсів і ін. Дисципліни 335
Графічний дизайн і призначені для користувача інтерфейси
Графічний дизайн - це дисципліна, над якою довгі роки (приблизно до другої половини 80-х років минулого століття) тяжіла поліграфія, оскільки дизайн в основному зводився до створення упаковок, рекламі, форматування документів і облаштування середовища існування. Графічні дизайнери старої школи незатишно почуваються, стикаючись з цифровими носіями інформації, оскільки не звикли створювати графіку на рівні пікселів. Молоде ж покоління графічних дизайнерів навчено поводженню з «новим» форматом і цілком успішно застосовує концепції традиційного графічного дизайну до цифрової графіку.
Графічні дизайнери зазвичай дуже добре розбираються в візуальних аспектах і гірше уявляють собі поняття, що лежать в основі поведінки програмного продукту і взаємодії з ним. Талановиті графічні дизайнери, підковані і в цифрових аспектах, досягають успіху в створенні інформаційно насичених, естетично приємних, вражаючих інтерфейсів, які ми бачимо в Windows XP і Mac OS X, а також візуально насичених інтерфейсів для комп'ютерних ігор і додатків, орієнтованих на пересічного споживача. Вони здатні створювати красиву і адекватну зовнішністьінтерфейсів, а крім того - привносити фірмовий стиль в зовнішній вигляд і поведінку програмного продукту. Для таких фахівців дизайн або проектування інтерфейсу є в першу чергу тон, стиль, композиція, які є атрибутами бренду, в другу чергу -Прозорість і зрозумілість інформації і лише потім (якщо до цього взагалі доходить справа) - передача інформації про поведінку за допомогою очікуваного призначення ( см. главу 13).
Дизайнерам візуальної частини інтерфейсу необхідні деякі навички, які притаманні графічним дизайнерам, які працюють в цифровому форматі, але вони повинні крім цього мати також глибоким розумінням і правильним сприйняттям ролі поведінки. Їх зусилля в значній мірі зосереджені на організаційних аспектах проектування і на те, як донести до користувача особливості поведінки продукту, використовуючи візуальні якоря і очікувані призначення. У центрі їх уваги знаходиться відповідність між візуальної структурою інтерфейсу з одного боку і логічною структурою користувальницької ментальної моделі та поведінки програми - з іншого. Крім того, їх турбує питання про те, як повідомляти користувачеві про станах програми (скажімо, як зробити стан «є для зміни» відмінним від стану «тільки для читання») і що робити з когнітивними аспектами призначеного для користувача сприйняття функцій (композиція елементів, візуальна ієрархія , співвідношення фігури і фону і т. п.).
336 Глава 14. Візуальний дизайн інтерфейсів
Візуальний інформаційний дизайн
Інформаційні дизайнерипрацюють не над інтерактивними функціями, а над візуалізацією даних, вмісту і засобів навігації. У візуальному дизайні інтерфейсів їх наЕикі надзвичайно важливі, особливо коли мова йде про додатки, які працювали з даними, і деяких веб-сайтах, де вміст переважує функціональність. Зусилля інформаційного дизайнера спрямовані на те, щоб представити дані в формі, що сприяє їх вірному тлумаченню. Результат тут досягається через управління візуальної ієрархією за допомогою таких засобів, як колір, форма, розташування і масштаб.
Поширеними об'єктами інформаційного дизайну є всілякі графіки, діаграми та інші способи відображення кількісної інформації. Едвард Тафті написав кілька новаторських книг, докладно розкривають цю тему, включаючи «The Visual Display of Quantitative Information» (Tufte, 1983).
Промисловий дизайн
Будь-яке обговорення питань промдизайна виходить за рамки цієї книги, проте широке поширення інтерактивних приладів і портативних пристроїв привело до того, що роль промислового дизайну в створенні інтерактивних продуктів зростає прямо на очах. Як і у випадку з різницею в професійних навичках у графічних дизайнерів, дизайнерів інтерфейсів і інформаційних дизайнерів, існує поділ промдізайнеров на дві категорії: одні спеціалізуються на створенні гарних і корисних форм, в той час як таланти інших відносяться до сфери логічного і ергономічного уявлення фізичних елементів управління способом, який відповідає поведінці користувача і відображає поведінку пристрою. У міру того як все більше число пристроїв обзаводяться повнофункціональними дисплеями, зростає важливість співпраці проектувальників взаємодії, дизайнерів інтерфейсів і промдізайнеров в питаннях створення повноцінних і ефективних рішень.
Будівельні блоки візуального дизайну інтерфейсів
По суті дизайн інтерфейсів зводиться до питання про те, як офор мить і розташувати візуальні елементи таким чином, щоб чітко відобразити поведінку і представити інформацію. Кожен елемент візуальної композиції має ряд властивостей, таких як форма і колір, і поєднання цих властивостей надає елементу сенс. Кожне окреме властивість саме по собі рідко володіє природним змістом. Швидше можна сказати, що користувач отримує можливість розібратися
Будівельні блоки візуального дизайну інтерфейсів 337
в інтерфейсі завдяки різних способів додатки цих властивостей до кожного з елементів інтерфейсу. У тих випадках, коли два об'єкти мають загальні властивості, користувач припустить, що ці об'єкти пов'язані або схожі. Коли користувачі бачать, що властивості відрізняються, вони припускають, що об'єкти не пов'язані. Найбільш контрастні об'єкти сильніше привертають нашу увагу. Задовго до того, як дитина починає розуміти мову і говорити, він виявляє здатність розрізняти об'єкти, що контрастують візуально. Дитяча передача «Вулиця Сезам» покладається на цю людську здатність, пропонуючи дітям вибирати об'єкт, не схожий на інші або що не входить в групу. Візуальний дизайн інтерфейсів створює смисли схожим чином, що на практиці дає набагато кращий результат, ніж просто слова.
Створюючи призначений для користувача інтерфейс, проаналізуйте перераховані нижче візуальні властивості кожного елемента або групи елементів. Щоб створити корисний і привабливий користувальницький інтерфейс, слід ретельно попрацювати з кожним з цих властивостей.
Яку форму має об'єкт? Він круглий, квадратний чи схожий на амебу? Форма - головна ознака сутності об'єкта для людини. Ми дізнаємося об'єкти по контурах; силует ананаса, текстурованого синім хутром, все одно дозволяє нам зрозуміти, що це ананас. При цьому розрізнення форм вимагає більшої концентрації уваги, ніж аналіз кольору або розміру. Тому форма - не найкращий властивість для створення контрасту, якщо потрібно привернути увагу користувача. Слабкість форми як фактора в розпізнаванні об'єктів стає очевидна, якщо поглянути на Dock 1 операційної системи Mac OS X-тут можна помилково викликати iTunes замість iDVD або iWeb замість iPhoto. Піктограми мають різну форму, але мають подібні розмірами, кольорами і текстурою.
Наскільки великий чи малий об'єкт щодо інших об'єктів на екрані? Більші елементи привертають більше уваги, Особливо якщо вони значно перевершують розмірами навколишні елементи. Розмір є змінною впорядкованоїі піддається кількісному визначенню,тобто люди автоматично впорядковують об'єкти за розміром і схильні оцінювати їх за розміром; якщо у нас є текст в чотирьох розмірах, передбачається, що відносна
Спеціальний інтерфейсний елемент операційної системи Mac OS X, який дозволяє запускати програми і перемикатися між ними. - Прим. науч. ред.
333 Глава 14. Візуальний дизайн інтерфейсів
важливість тексту зростає разом з розміром і що напівжирний текст важливіший, ніж текст з нормальним шрифтом.
Таким чином, розмір - корисна властивість для позначення інформаційних ієрархій. Достатня розбіжність в розмірах зазвичай швидко привертає увагу людини. Жак Бертен (Jacques Bertin) в своїй класичній праці «The Semiology of Graphics» (Bertin, 1983) описує розмір як дисоціативневластивість. Це означає, що якщо об'єкт дуже малий або дуже великий, стає складно інтерпретувати інші змінні, наприклад форму.
яскравість
Наскільки темним або світлим є об'єкт? Зрозуміло, поняття темного і світлого знаходять сенс переважно в контексті яскравості фону. На темному тлі темний текст майже не видно, тоді як на світлому він буде різко виділятися. Як і у випадку з розміром, значення яскравості може бути діссоціатівним; скажімо, якщо фотографія дуже темна або занадто світла, стає неможливо розібрати, що на ній. Контрастність люди сприймають легко і швидко, так що значення яскравості може стати хорошим інструментом залучення уваги до тих елементів, які потрібно підкреслити. Значення яскравості - також упорядкованазмінна, наприклад, більш темні (з більш низькою яскравістю) кольору на карті легко інтерпретуються: вони позначають великі глибини або велику щільність населення.
колір
Жовтий, червоний або помаранчевий? Кольорові відмінності швидко привертають увагу. У деяких професійних областях кольору мають конкретні значення, і цим можна користуватися. Так, для бухгалтера червоний колір - негативні результати, а чорний - позитивні; для трейдера, який працює з цінними паперами, синій - сигнал купувати, а червоний - сигнал продавати (щонайменше, в США це так). Кольори набувають смисли і завдяки соціальним контекстами, в яких проходить наше дорослішання. Для людини з Заходу, що виріс серед світлофорів, червоний означає «стоп», а іноді навіть «небезпека», тоді як в Китаї червоний - це колір удачі. Білий колір на Заході асоціюється з чистотою і світом, а в Азії - з похоронами і смертю. При цьому на відміну від розміру або яскравості колір з самого початку не має властивість впорядкованості і не виражається кількісно, \u200b\u200bтому далеко не ідеальний для передачі інформації такого роду. Крім того, не слід робити колір єдиним способом передачі інформації, оскільки дальтонізм зустрічається досить часто.
Застосовуйте колір з розумом. Щоб створити ефективну візуальну систему, що дозволяє користувачеві виявляти подібності та відмінності
об'єктів, використовуйте обмежений набір кольорів - ефект веселки перевантажує сприйняття користувача і обмежує можливості по передачі йому інформації. Крім того, в питаннях, що стосуються кольору, можуть виникнути конфлікти між потребами маркетингу і завданням відображення інтерфейсних ідей. Щоб знайти компроміс в такій ситуації, вам може знадобитися талановитий візуальний дизайнер (і за сумісництвом дипломат).
напрямок
Куди вказує об'єкт - вгору, вниз, або вбік? Напрямок корисно, коли потрібно передавати інформацію про орієнтацію (вгору або вниз, вперед або назад). Пам'ятайте, що сприйняття напряму може бути складно в разі деяких форм і при малих розмірах об'єктів, тому її краще використовувати в якості вторинного ознаки. Так, якщо потрібно показати, що ринок акцій пішов вниз, можна використовувати спрямовану вниз стрілку червоного кольору.
текстура
Груба або гладка, одноманітна або нерівна? Зрозуміло, зображені на екрані елементи не володіють справжньою текстурою, але здатні створювати її видимість. Текстура рідко буває корисна для передачі відмінностей або залучення уваги, оскільки вимагає значної концентрації на деталях. Крім того, для передачі текстури потрібні значні витрати пікселів. І тим не менше текстура може бути важливою підказкою: коли ми бачимо область, текстуровану гумою, то припускаємо, що слід схопити пристрій за цю область. Зарубки і опуклості на елементах користувальницького інтерфейсу зазвичай вказують, що елемент можна перетягувати, а фаски або тіні у кнопки підсилюють відчуття, що її можна натиснути.
Розташування
Як розташовується елемент щодо інших елементів? Подібно розміром розташування - це змінна упорядкованаі виражається кількісно,а значить, корисна для передачі ієрархії. Розташувавши найбільш важливі або користуються найбільшим попитом елементи зліва вгорі, ми скористаємося порядком сприйняття елементів на екрані на благо продукту. Розташування також може служити засобом створення просторових відносин між об'єктами на екрані і об'єктами реального світу.
Принципи візуального дизайну інтерфейсу
Людський мозок-чудове пристрій розпізнавання образів. Воно витягує сенс з щільних потоків зорової інформа-
340 Глава 14. Візуальний дизайн інтерфейсів
ції, що обрушуються на нас буквально звідусіль. Наш мозок справляється з цим шквалом вхідних даних, виявляючи візуальні закономірності і створюючи для спостережуваних нами об'єктів систему пріоритетів. В кінцевому підсумку це дозволяє нам свідомо сприймати видимий світ. Саме здатність зорової системи людського мозку до збірки частин візуального поля в образи на підставі візуальних якорів (підказок) дозволяє нам обробляти зорову інформацію настільки швидко і ефективно. Уявіть, що вам раптом довелося б вручну обчислювати траєкторію польоту бейсбольного м'яча, щоб передбачити, де він впаде. Наші очі і мозок разом роблять це за частки секунди, не вимагаючи від нас свідомих зусиль. Процес створення візуального дизайну інтерфейсу повинен спиратися на наші природні здібності до обробки візуальної інформації, Щоб забезпечити передачу користувачам інформації і відображення можливостей і функцій програми.
Однією глави абсолютно недостатньо для повного розкриття теми візуального дизайну інтерфейсів. Однак існує ряд важливих принципів, які допоможуть вам створювати інтерфейси, максимально прості в сприйнятті і приємні для ока. Як вже говорилося, Кевін Маллет і Даррел Сано дають чудовий і детальний аналіз цих базових принципів; ми лише коротко обговоримо деякі з найбільш важливих принципів візуального дизайну інтерфейсу.
При створенні графічних інтерфейсів слід:
Використовувати візуальні властивості для угруповання елементів і ство
дання чіткої ієрархії;
Створювати візуальну структуру і прокладати логічний березня
Шруті на кожному рівні організації;
Використовувати цілісні, несуперечливі і відповідні
контексту образи;
Інтегрувати візуальний стиль з функціональністю осмислений
але і послідовно;
Уникати візуального «шуму» і безладу.
Ці принципи і деякі інші загальні закономірності, що стосуються роботи з текстом і кольором в графічних призначених для користувача інтерфейсів, детально обговорюються в наступних розділах.
Використовуйте візуальні властивості для угруповання елементів і створення чіткої ієрархії
Як правило, має сенс групувати логічні набори функціональних або інформаційних елементів за допомогою візуальних властивостей, наприклад кольору або просторових характеристик. Послідовно застосовуючи ці візуальні властивості в інтерфейсі, ви можете створювати шаблонні образи, які ваші користувачі швидко навчаться розпізнавати. Наприклад, в Windows XP все кнопки ви-
Принципи візуального дизайну інтерфейсу 341
пукли, які можуть мати закруглені, а текстові поля прямокутні, злегка вдавлені, з білим фоном і синім оздобленням. Завдяки систематичному застосуванню цього способу неможливо переплутати кнопку і поле введення, незважаючи на деяку схожість.
Основою візуального інтерфейсу є візуальні
принцип шаблони.
проектування
Дивлячись на будь-який набір візуальних елементів, користувач несвідомо задається питанням: «Що тут становить інтерес?» - і майже відразу ж: «Який зв'язок між цими об'єктами?» Ми повинні прагнути до того, щоб інтерфейс містив в собі відповідь на обидва питання.
створення ієрархії
Виходячи із сценаріїв визначте, які функціональні і інформаційні елементи повинні сприйматися користувачами відразу, які є вторинними, а які потрібні лише у виняткових ситуаціях. Таке ранжування і служить основою для візуальної ієрархії.
Використовуйте колір, насиченість, контрастність, розмір і положення, щоб створити видимі відмінності між рівнями ієрархії. Найважливіші елементи повинні бути більшими, більш яскравих кольорів, більш насиченими і більш контрастними. Їх слід розташовувати над іншими елементами або робити виступаючими. Кошти, виділені елементи найкраще фарбувати в насичені кольори. Менш важливі елементи повинні бути менш насиченими, менш контрастними, більш дрібними і плоскими. Нейтральні світлі кольори відводять їх на другий план.
Зрозуміло, настройку цих властивостей слід виконувати обережно. Не слід робити найважливіший елемент величезним, червоним і опуклим. Часто буває достатньо змінити лише одне з властивостей. Якщо виявиться, що два елементи різної важливості змагаються за увагу користувача, «прикрутити гніт» менш важливого буде кращим рішенням, ніж намагатися «розпалити» важливіший. Так у вас залишиться більше простору для створення акценту на найважливіших елементах. (Ось хороша аналогія: якщо все слова на сторінці набрані жирним червоним шрифтом, чи виділяється хоч одне зі слів?)
Створення чіткої візуальної ієрархії - одна з найскладніших завдань в візуальному дизайні інтерфейсів, її рішення вимагає навичок і таланту. Якісну візуальну ієрархію користувачі практично не помічають - а ось її відсутність і що випливає з цього плутанина відразу кидаються в очі.
342 Глава 14. Візуальний дизайн інтерфейсів
візуалізація зв'язків
Щоб передати зв'язок елементів, знову зверніться до сценаріїв. Необхідно визначити не тільки елементи з подібними функціями, але і елементи, найбільш часто використовувані спільно. Спільно використовувані елементи звичайно треба згрупувати в просторі, щоб мінімізувати переміщення миші, тоді як елементи, які можуть не використовуватися разом, але мають подібними функціями, можна групувати візуально, навіть якщо вони не групуються в просторі.
Просторова угруповання пояснює користувачам, яким чином одні завдання, дані і інструменти пов'язані з іншими, і може натякати на правильну послідовність дій. Хороша угруповання за допомогою розташуваннябере до уваги порядок завдань і підзадач і рух погляду по екрану: зліва направо для західних мов і, як правило, зверху вниз. (Більш докладно цей момент ми обговоримо трохи пізніше.)
Елементи, розташовані поруч, як правило, пов'язані один з одним. У багатьох інтерфейсах таке угрупування реалізована занадто ваговито: Хоч куди взглянешь- рамки, причому іноді рамка містить в собі всього один або два елементи. Часто того ж ефекту більш грамотно можна досягти за допомогою відстаней.Наприклад, на панелі інструментів кнопки можуть відділятися один від одного чотирма пікселями. Щоб виокремити файлові команди ( «відкрити», «новий файл», «зберегти») в окрему групу, досить збільшити відстань між кнопками файлових команд і сусідній групою кнопок до восьми пікселів.
Елементи, розділені великими відстанями, можна групувати за допомогою загальних візуальних властивостей, створюючи шаблон, який в кінцевому підсумку придбає самостійний сенс для користувачів. Так, використання обсягу для створення відчуття фізичного очікуваного призначення - ймовірно, самий ефективний спосіб відокремлювати елементи управління від даних і фонових елементів (більш докладно про очікувані призначення читайте в главі 13). Ця стратегія часто застосовується в малюванні піктограм. В операційній системі Mac OS X застосовуються яскраві кольори для піктограм додатків і тьмяні - для рідко використовуваних допоміжних програм. Зелена кнопка запуску пристрою може перегукуватися з схожою анимированной зеленої піктограмою, що вказує, що пристрій функціонує нормально.
Визначившись з групами і візуальними особливостями цих груп, починайте підлаштовувати контраст між групами - підкреслюючи або, навпаки, затінюючи групи згідно їх важливості в поточному контексті. Підкреслюйте відмінності між групами, але мінімізуйте відмінності між елементами однієї групи.
Принципи візуального дизайну інтерфейсу 343
Тест з прищуриванием
Є хороший спосіб переконатися, що візуальний дизайн ефективно задіює ієрархію і відносини, - дизайнери називають цей прийом тестом з прищуриванием (squint test). Закрийте одне око і подивіться на екран прищуленим другим оком. Зверніть увагу на те, які елементи занадто випирають, які стали нечіткими, а які об'єдналися в групи. Ця процедура часто розкриває не помічені раніше проблеми в композиції інтерфейсу.
Створюйте візуальну структуру і прокладайте логічний маршрут на кожному рівні організації
Інтерфейси зручно уявляти собі що складаються з візуальних та інтерактивних елементів, що об'єднуються в групи за допомогою панелей, які, в свою чергу, можна групувати в екрани, уявлення або сторінки. Таке групування, як було сказано вище, може проводитися за допомогою розподілу в просторі або за допомогою загальних візуальних властивостей. У монопольному додатку може бути кілька рівнів таких структур, так що вкрай важливо зберігати прозору візуальну структуру, щоб користувач міг легко переходити від однієї частини інтерфейсу до іншого відповідно до свого робочим процесом.
У решти цього розділу ми опишемо ряд важливих властивостей, які допомагають поставити чітку візуальну структуру.
Вирівнювання і сітка
Вирівнювання візуальних елементів - один з головних прийомів, що дозволяють дизайнеру уявити продукт користувачам в систематизованому і упорядкованому вигляді. Згруповані елементи слід вирівнювати як по горизонталі, так і по вертикалі (рис. 14.1). У загальному випадку кожен елемент на екрані слід вирівняти по максимально можливого числа інших елементів. Відмова від вирівнювання двох елементів або двох груп елементів повинен бути усвідомленим: це допустимо тільки для досягнення конкретного розділяє ефекту. У числі іншого дизайнерам слід звертати увагу на:
Вирівнювання підписів. Підписи для елементів управління, рас
покладені один над одним, повинні бути вирівняні по загальній
кордоні. Якщо все підписи мають приблизно однакову довжину, ви
прирівнюються їх по лівій стороні - так користувачам буде легше їх
читати, ніж при вирівнюванні вправо.
Вирівнювання всередині групи функціональних елементів. Груп
па пов'язаних прапорців, варіантів вибору або текстових полів
повинна підкорятися вирівнюванню стандартної сітки.
Глава 14. Візуальний дизайн інтерфейсів
Мал. 14.I.Adobe Lightroom вельми ефективно використовує вирівнювання по композиційної сітці. Текст, функціональні елементи і групи елементів управління дуже чітко вирівнюються по сітці з фіксованим кроком. Слід зазначити, що відбиття елементів управління і підписів елементів групи вправо може заважати швидкому їх прочитання
Вирівнювання елементів, рознесених по групах і панелям.
Групи елементів керування та інші об'єкти на екрані всюди, де це можливо, повинні бути прив'язані все до тієї ж сітці.
Сітка - один з найпотужніших інструментів візуального дизайнера, стрімко набрав популярність в роки після Другої світової війни завдяки швейцарським друкарям. Сітка забезпечує однорідність і послідовність структури композиції, що особливо важливо при проектуванні інтерфейсу здекількома рівнями візуальної або функціональної складності. Після того як проектувальники взаємодії визначили загальну інфраструктуру додатки і елементів його призначеного для користувача інтерфейсу (див. Розділ 7), дизайнери інтерфейсу повинні організувати композицію в структуру в вигляді сітки, яка буде належним чином підкреслювати важливі елементи і структури і залишати життєвий простір для менш важливих елементів і елементів нижчого рівня.
Як правило, сітка ділить екран на кілька великих горизонтальних і вертикальних областей (рис. 14.2). якісно спроектіро-
Принципи візуального дизайну інтерфейсу
Мал. 14.2. У цьому прикладі композиційна сітка регламентує розмір і положення різних областей екрану веб-сайту. Вона забезпечує узгодженість різних екранів, Скорочуючи як роботу дизайнера по створенню композиції, так і зусилля, які повинен докласти користувач, щоб прочитати і зрозуміти вміст екрану
ванна сітка задіє поняття кроку,тобто мінімальної відстані між елементами. Наприклад, якщо крок сітки становить чотири пікселя, всі відстані між елементами і групами повинні бути кратні чотирьом.
В ідеальному випадку сітка повинна задавати і пропорції різних областей екрану. Такі відносини зазвичай виражаються дробом. Серед поширених дробів - прославлене «золотий перетин» (позначається грецькою буквою «фе» і рівне приблизно 1,62), яке часто зустрічається в природі і вважається особливо приємним для людського ока; величина, зворотна квадратному кореню з двох (приблизно 1: 1,41), яка є основою міжнародного стандарту розміру паперу (наприклад, аркуша А4); і ставлення 4: 3 - пропорція сторін більшості комп'ютерних дисплеїв.
Зрозуміло, слід прагнути до балансу між ідеалізованими геометричними відносинами і конкретними просторовими потребами функцій та інформації, представлених на екрані. Ідеальна реалізація золотого перетину ніяк не поліпшить читаність екрану, на якому об'єкти звалені в купу. Хороша композиційна сітка модульна,тобто є досить гнучкою, щоб врахувати всі необхідні варіації, при цьому зберігши узгодженість структури всюди, де це можливо. Як і у мно-
Людський мозок - чудове пристрій розпізнавання образів. Він справляється зі шквалом вхідних даних, виявляючи візуальні закономірності і створюючи для спостережуваних нами об'єктів систему пріоритетів. Саме здатність зорової системи людського мозку до збірки частин візуального поля в образи на підставі візуальних якорів (підказок) дозволяє нам обробляти зорову інформацію настільки швидко і ефективно. Процес створення візуального дизайну інтерфейсу повинен спиратися на наші природні здібності до обробки візуальної інформації, щоб забезпечити передачу користувачам інформації і відображення можливостей і функцій програми.
При створенні графічних інтерфейсів слід:
- Використовувати візуальні властивості для угруповання елементів і створення чіткої ієрархії.
- Створювати візуальну структуру і прокладати логічний маршрут на кожному рівні організації.
- Використовувати цілісні, несуперечливі і відповідні контексту образи.
- Інтегрувати візуальний стиль з функціональністю осмислено і послідовно.
- Уникати візуального "шуму" і безладу.
Розглянемо їх докладніше.
Використання візуальних властивостей для угруповання елементів і створення чіткої ієрархії
Як правило, має сенс групувати логічні набори функціональних або інформаційних елементів за допомогою візуальних властивостей, наприклад кольору або просторових характеристик. Послідовно застосовуючи ці візуальні властивості в інтерфейсі, ви можете створювати шаблонні образи, які ваші користувачі швидко навчаться розпізнавати. Згідно з інструкціями з проектування дизайну андроїд-додатків, звичайні кнопки повинні бути опуклими, з округленими кутами, а текстові поля прямокутні, зазвичай підкреслені і плоскі, при цьому активні елементи виділяються кольором (див. Рис. 3.4). Завдяки систематичному застосуванню цього способу неможливо переплутати кнопку і поле введення, незважаючи на деяку схожість.
Дивлячись на будь-який набір візуальних елементів, користувач несвідомо задається питанням: "Що тут становить інтерес?" - і майже відразу ж: "Який зв'язок між цими об'єктами?" Ми повинні прагнути до того, щоб інтерфейс містив в собі відповідь на обидва питання.
Мал. 3.4.
При створенні ієрархії необхідно визначити, виходячи зі сценаріїв, які функціональні і інформаційні елементи повинні сприйматися користувачами відразу, які є вторинними, а які потрібні лише у виняткових ситуаціях. Таке ранжування і служить основою для візуальної ієрархії.
Щоб створити видимі відмінності між рівнями ієрархії, використовуйте колір, насиченість, контрастність, розмір і положення. Найважливіші елементи повинні бути більшими, більш яскравих кольорів, більш насиченими і більш контрастними. Їх слід розташовувати над іншими елементами або робити виступаючими. Менш важливі елементи повинні бути менш насиченими, менш контрастні ми, більш дрібними і плоскими. Нейтральні світлі кольори відводять їх на другий план.
Зрозуміло, настройку цих властивостей слід виконувати обережно. Не слід робити найважливіший елемент величезним, червоним і опуклим. Часто буває достатньо змінити лише одне з властивостей. Якщо виявиться, що два елементи різної важливості змагаються за увагу користувача, зробити менш важливий менш помітним буде кращим рішенням.
Створення чіткої візуальної ієрархії - одна з найскладніших завдань в візуальному дизайні інтерфейсів, її рішення вимагає навичок і таланту. Якісну візуальну ієрархію користувачі практично не помічають - а ось її відсутність і що випливає з цього плутанина відразу кидаються в очі.
Щоб передати зв'язок елементів, знову зверніться до сценаріїв. Необхідно визначити не тільки елементи з подібними функціями, але і елементи, найбільш часто використовувані спільно. Спільно використовувані елементи звичайно треба згрупувати в просторі (помістити на окремий екран), щоб мінімізувати переміщення між ними.
Просторова угруповання пояснює користувачам, яким чином одні завдання, дані і інструменти пов'язані з іншими, і може натякати на правильну послідовність дій. Хороша угруповання за допомогою розташування бере до уваги порядок завдань і підзадач і рух погляду по екрану.
Елементи, розташовані поруч, як правило, пов'язані один з одним. Якщо необхідно створити угруповання, зручно реалізовувати її за допомогою відстаней. Елементи, розділені більшими відстанями, можна групувати за допомогою загальних візуальних властивостей.
Визначившись з групами і візуальними особливостями цих груп, починайте підлаштовувати контраст між групами - підкреслюючи або, навпаки, затінюючи групи згідно їх важливості в поточному контексті.
Є хороший спосіб переконатися, що візуальний дизайн ефективно задіює ієрархію і відносини, - дизайнери називають цей прийом тестом з прищуриванием (squint test). Закрийте одне око і подивіться на екран прищуленим другим оком. Зверніть увагу на те, які елементи занадто випирають, які стали нечіткими, а які об'єдналися в групи. Ця процедура часто розкриває не помічені раніше проблеми в композиції інтерфейсу.
Візуальна структура і логічні маршрути
Інтерфейси зручно уявляти собі що складаються з візуальних та інтерактивних елементів, що об'єднуються в групи за допомогою панелей, які, в свою чергу, можна групувати в екрани. Таке групування може проводитися за допомогою розподілу в просторі або за допомогою загальних візуальних властивостей. Вкрай важливо зберігати прозору візуальну структуру, щоб користувач міг легко переходити від однієї частини інтерфейсу до іншого відповідно до свого робочим процесом.
Наведемо ряд важливих властивостей, які допомагають поставити чітку візуальну структуру.
вирівнювання
Вирівнювання візуальних елементів - один з головних прийомів, що дозволяють дизайнеру уявити продукт користувачам в систематизованому і упорядкованому вигляді. Згруповані елементи слід вирівнювати як по горизонталі, так і по вертикалі (рис. 3.5).
У загальному випадку кожен елемент на екрані слід вирівняти по максимально можливого числа інших елементів. Відмова від вирівнювання двох елементів або двох груп елементів повинен бути усвідомленим: це допустимо тільки для досягнення конкретного розділяє ефекту. У числі іншого дизайнерам слід звертати увагу на:
- Вирівнювання підписів. Підписи для елементів управління, розташовані один над одним, повинні бути вирівняні по спільному кордоні.
- Вирівнювання всередині групи функціональних елементів. Група пов'язаних прапорців, варіантів вибору або текстових полів повинна підкорятися вирівнюванню стандартної сітки.
- Вирівнювання елементів, рознесених по групах і панелям. Групи елементів керування та інші об'єкти на екрані всюди, де це можливо, повинні бути прив'язані все до тієї ж сітці.
Мал. 3.5.
Сітка
Сітка - один з найпотужніших інструментів візуального дизайнера. Сітка забезпечує однорідність і послідовність структури композиції. Після того як проектувальники взаємодії визначили загальну інфраструктуру додатки і елементів його призначеного для користувача інтерфейсу, дизайнери інтерфейсу повинні організувати композицію в структуру в вигляді сітки, яка буде належним чином підкреслювати важливі елементи і структури і залишати життєвий простір для менш важливих елементів і елементів більш низького рівня.
Як правило, сітка ділить екран на кілька великих горизонтальних і вертикальних областей. Якісно спроектована сітка задіє поняття кроку, тобто мінімальної відстані між елементами. Наприклад, якщо крок сітки становить чотири пікселя, всі відстані між елементами і групами повинні бути кратні чотирьом.
В ідеальному випадку сітка повинна задавати і пропорції різних областей екрану. Такі відносини зазвичай виражаються дробом. Серед поширених дробів - прославлене "золотий перетин" (рівне приблизно 1,62), яке часто зустрічається в природі і вважається особливо приємним для людського ока; величина, зворотна квадратному кореню з двох (приблизно 1: 1,41), яка є основою міжнародного стандарту розміру паперу (наприклад, листа A4). У програмуванні для мобільних пристроїв не слід покладатися на співвідношення сторін дисплеїв, так як для пристроїв на Android не існує єдиного стандарту розміру екранів.
Використання сітки в візуальному дизайні інтерфейсів дає ряд переваг:
- Зручність застосування. Оскільки сітка робить розташування елементів однаковим, користувачі швидко набувають навички пошуку потрібних елементів в інтерфейсі. Послідовність в розташуванні елементів і виборі відстаней між ними полегшує роботу механізмів візуальної обробки в мозку людини. Якісно спроектована сітка спрощує сприйняття екрану.
- Естетична привабливість. Акуратно застосовуючи сітку і вибираючи відповідні співвідношення між різними областями екрану, дизайнер може створити відчуття порядку, який зручний користувачам і стимулює їх роботу з продуктом.
- Ефективність. Створення сітки і включення її в процес на ранніх етапах деталізації проектних рішень скорочує число ітерацій і дій по "доведенню" інтерфейсу. Якісна і явно позначена сітка закладає основу для легко модифікується і розширюється дизайну, дозволяючи розробникам знаходити хороші композиційні рішення.
У інтерфейсах найчастіше застосовують два типи симетрії: вертикальна осьова симетрія (симетрія відносно вертикальної лінії, проведеної через центр групи елементів) і діагональна осьова симетрія (симетрія відносно діагоналі). У більшості додатків присутній симетрія одного з цих типів.
