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

Плоский дизайн існує ще з 1950-х років, коли був розроблений Міжнародний типографічний стиль. Останнім часом вона набула широкої популярності з моменту запуску нового Microsoft Дизайн геометрії та типографіки мовою, спочатку в новому Windows Phone в 2010 році, потім у Windows 8 в 2012 році.

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

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

Проблеми юзабіліті з плоским дизайном

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

Відсутні візуальні ознаки клацабельності

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

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

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

Чому це це проблема? Давайте спробуємо експеримент.

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

Зниження відкритості через відсутність Z-осі

Люди в реальному житті знаходять об'єкти і рухаються в трьох вимірах: осі x, y, z. Коли вони стикаються з мінімалістично розробленим, рівним веб-сайтом без 3D-ефектів, вони отримують досвід, який відрізняється від того, до чого вони звикли, що вони в основному знайомі з.

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

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

Низька щільність інформації

Плоский дизайн також був підданий критиці за ризик низького рівня густини інформації експертом UX Nielsen-Norman Group.

У своїй критиці щодо зручності у Windows 8 вони використовували приклади додатків магазину Windows, а також веб-сайт Los Angeles Times, щоб показати проблеми, які низька щільність інформації (маючи кілька історій на початковому екрані, заголовки без резюме, ледь впізнавані групи тощо) можуть викликати з точки зору зручності.

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

Підйом плоскої 2.0

Оскільки все більше й більше дизайнерів визнають недоліки у використанні плоского дизайну, з'явилася нова, більш зріла версія, яка називається “Flat 2.0” або “Майже Flat” дизайн. Хоча перехід від скевоморфизма до плоского був радикальним, еволюція плоского дизайну є набагато більш невловимим.

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

Дизайн матеріалу

Нова мова дизайну Google, яка називається Material Design, є, мабуть, найбільш помітним прикладом стилю Flat 2.0. Google випустив Material Design з Android L у 2014 році. Хоча Material Design зберігає основні характеристики плоского дизайну, він використовує певні метафори з фізики, щоб допомогти користувачам швидко знайти аналогії між реальним світом і цифровим світом.

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

Висновок

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

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