Не важливо, в тебе великі або маленькі. Головне, щоб не маленькі. Фаршируємо Material Design

image

Як в умовах дизайн-тиранії Гугла і лояльних йому розробників обходити правила в інтересах користувачів.

У HeadHunter дизайн, перш ніж піти в инпрогресс, проходить безліч інстанцій. Для початку необхідно довести команді розробки, що рішення взяті не зі стелі, а ти не художник, я так бачу». І іноді користуватися захистом Рексоны 24/7 доводиться в самому несподіваному місці.

Розробники Android-версії додатки HeadHunter обожнюють Material Design і ревно охороняють його гайди. Material повинен бути лабораторним, без домішок, і вставляти з першого пікселя.

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

Гугл пише: «Відступ від країв — 16px». Це вбирають розробники. Одиночні пікети починаються, коли мені потрібен відступ 20px, а при згадці 15-го кегля люди хапаються за вила.

image

У iOS 10 офіційно дали зрозуміти, що гайди — це підказки, і додаток може мати своїм характером.

image

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



Заmateriть пару екранів мені було цікаво. Хлопці жадали черговий вакцини проти Android KitKat. Вперед — назустріч пригодам, нової естетики і зручному взаємодії!

Почали з екрану вакансії. Так він виглядає зараз:

image

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

За допінгом я ходив в Нарнію. Нарнія — це царство фривольності щодо будь-яких гайдлайнов. Це всесвіт в мільярд світлових років від повсякденної реальності і сірих буднів. Тут поні їдять веселку і какають метеликами.

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

image

Пиканул колір, разверстал інфу. На світ з'явилися 2 варіанти:

image

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

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

Ну че-то якось так.



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

image

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

Показав концепт команді і арт-директор — команда задоволена, від художнього керівника — апрув.

Почався пошук синього відтінку. Використовуваний в додатку добре підходив для кнопок і колірних виділень, але категорично не влаштовував як бекграунду. Завдання: отримати правильний контраст і не втекти від візуального характеру продуктів HeadHunter, гайдлайнов Material Design і здорового глузду.

image

Варіанти з градієнтами команді навіть не показував, щоб
уникнути фізичної розправи за гаражами.


За цією справою я просидів не одну годину, і тут накрило.

image

Зрозумів, що хочу взяти очі, покласти на полицю і якийсь час ними не користуватися. Вони хворіли, і це було дивно. Не втомилися, а саме хворіли. Why?!

У пошуках відповідей вирішив ще раз проаналізувати макет і прикласти його до реальному середовищі, а до очей — подорожник.

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

При такому сценарії в нашому випадку на сприйняття найбільше впливають 2 фактори: вертикаль і виворотка.

image

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

Виворотка — це модно, це жирний акцент, вона хороша в малих обсягах і в статиці. Про це говорять дослідження фізіології сприйняття выворотки і інверсного читання. Але при частому інверсному читанні вона не сумісна з зоровим органом. Це означає, що де-то вже на третій вакансії з'являться перші ознаки атеросклерозу. Для ока користувача кожен перехід погляду від кольорового блоку до опису буде немов 150 кг від грудей.
Так собі UX.



image
Перервався на сон.


Оновив екран з урахуванням нових ввідних, забив десяток реальних вакансій і заходився гортати/читати:

image

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

Обговорили з хлопцями: шкода, що не Material. Але всі погодилися з доводами і результатом задоволені.

Win-Win.



«Тільки,— кажуть вони, — є невелике зауваження.»
Іконку кулі поставити останньої, так як вона рідше використовується.


image

Я відповідаю: «Вона тому там і стоїть».
крайні іконки потрапити легше. Менше концентрації, щоб прицілитися: з одного боку порожній простір, з іншого — край екрану.


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

image

Ось так я доводжу команді, що займаюся UX, а не хрін зрозумій чим.

Висновок: #думай_как_дизайнер_действуй_как_изобретатель. Моралі немає.
Так як не важливо, в тебе великі або маленькі. Головне, щоб не маленькі.

Вибачте за увагу.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.