![image](https://habrastorage.org/getpro/habr/post_images/663/52a/266/66352a2660860e5f8bd937d1c604a5a4.png)
Как в условиях дизайн-тирании Гугла и лояльных ему разработчиков обходить правила во благо пользователей.
В HeadHunter дизайн, прежде чем уйти в инпрогресс, проходит множество инстанций. Для начала необходимо доказать команде разработки, что решения взяты не с потолка, а ты не «художник, я так вижу». И иногда пользоваться защитой Рексоны 24/7 приходится в самом неожиданном месте.
Разработчики Android-версии приложения HeadHunter обожают Material Design и ревностно стерегут его гайды. Material должен быть лабораторным, без примесей, и вставлять с первого пикселя.
Мне он тоже по вкусу. Но его избыточная доскональность заставляет пользоваться им с осторожностью при решении задач, отличных от проектирования калькуляторов, музыкальных плееров, социальных сетей, почтовых клиентов и прочих мессенджеров.
Гугл пишет: “Отступ от краёв — 16px”. Это впитывают разработчики. Одиночные пикеты начинаются, когда мне нужен отступ в 20px, а при упоминании 15-го кегля люди хватаются за вилы.
![image](https://habrastorage.org/getpro/habr/post_images/f92/937/c6d/f92937c6d1a912c8b1f3711150f4e883.png)
В iOS 10 официально дали понять, что гайды — это подсказки, и приложение может обладать своим характером.
![image](https://habrastorage.org/getpro/habr/post_images/a22/74b/7e9/a2274b7e9287adc51aa56dcd79269114.png)
iOS предоставляет камеру, объективы, даёт рекомендации по их использованию, но, по факту, ни на чём не настаивает. Android предлагает готовый сценарий фильма. В придачу идут раскадровка, локации съёмок, режиссёр и ведущий актёрский состав.
Заmateriть пару экранов мне было интересно. Ребята жаждали очередной вакцины против Android KitKat. Вперёд — навстречу приключениям, новой эстетике и удобному взаимодействию!
Начали с экрана вакансии. Так он выглядит сейчас:
![image](https://habrastorage.org/getpro/habr/post_images/5f1/d3f/958/5f1d3f95821a641de80571f57f4e8229.png)
Я разобрал экран на блоки и полез в гайды, чтобы вдохновиться и найти наиболее подходящие решения для нашей задачи.
За допингом я ходил в Нарнию. Нарния — это царство фривольности в отношении любых гайдлайнов. Это вселенная в миллиарде световых лет от повседневной реальности и серых будней. Здесь пони едят радугу и какают бабочками.
Вернёмся к реалиям. По итогам рисёча, композиционно и логически подходил один единственный пример. От него я и оттолкнулся.
![image](https://habrastorage.org/getpro/habr/post_images/d6c/963/452/d6c963452d379d9ae25aef4425d8c7c8.png)
Пиканул цвет, разверстал инфу. На свет появились 2 варианта:
![image](https://habrastorage.org/getpro/habr/post_images/1a7/d96/859/1a7d96859b6779b1e9465aefb5ba63df.png)
В первом больше гайдов, но смущала вертикаль чтения. И глаз напрягается при переходе от цветного блока к описанию вакансии, и отступ какой-то неуверенный. Плюс с таким объёмом текста я испугался использовать рекомендуемые отступы — полезное пространство надо беречь.
Во втором варианте всё на одной вертикали, гайды призрачно виднелись на горизонте, и преследовало странное ощущение пустоты. В довесок я опомнился, что все данные фейковые и надо бы посмотреть всё это на реальном контенте.
Ну чё-то как-то так.
Набрался мужества, сделал по гайдам отступы, наполнил скрины реальными данными и начал разглядывать:
![image](https://habrastorage.org/getpro/habr/post_images/6f5/c58/0c2/6f5c580c22422da3885016f9f6d16ce4.png)
Отступ стал уверенным и подозрений не вызывал, чувство пустоты пропало, гайды, фаршированные гайдами, — вроде всё ок. Решил остановиться на этом варианте и утрясти цвета по внутренним стандартам компании.
Показал концепт команде и арт-директору — команда довольна, от худрука — апрув.
Начался поиск оттенка синего. Используемый в приложении хорошо подходил для кнопок и цветовых выделений, но категорически не устраивал в качестве бэкграунда. Задача: получить правильный контраст и не убежать от визуального характера продуктов HeadHunter, гайдлайнов Material Design и здравого смысла.
![image](https://habrastorage.org/getpro/habr/post_images/9d0/8b3/d39/9d08b3d39c374315e9520ace5bd4b90f.png)
Варианты с градиентами команде даже не показывал, чтобы
избежать физической расправы за гаражами.
За этим делом я просидел не один час, и тут накрыло.
![image](https://habrastorage.org/getpro/habr/post_images/dae/743/510/dae743510a74430228454a2afb8bf7ca.gif)
Понял, что хочу взять глаза, положить на полку и какое-то время ими не пользоваться. Они болели, и это было странно. Не устали, а именно болели. Why?!
В поисках ответов решил ещё раз проанализировать макет и приложить его к реальной среде, а к глазам — подорожник.
Из внутренней статистики вспомнил, что за одну сессию в среднем человек просматривает 20 вакансий. В среднем на просмотр одной вакансии — 2 минуты, за это время принимается решение: откликаться или двигаться дальше. В среднем.
При таком сценарии в нашем случае на восприятие больше всего влияют 2 фактора: вертикаль и выворотка.
![image](https://habrastorage.org/getpro/habr/post_images/097/aee/38e/097aee38e28c10b6b1ba43d4e69dcb1a.png)
Скачущая вертикаль восприятие ухудшает, но терпимо. 50% информации верхнего блока человек видит ещё в выдаче. Он либо сразу переходит к описанию, либо откликается/добавляет в избранное.
Выворотка — это модно, это жирный акцент, она хороша в малых объёмах и в статике. Об этом говорят исследования физиологии восприятия выворотки и инверсного чтения. Но при частом инверсном чтении она не совместима со зрительным органом. Это означает, что где-то уже на третьей вакансии появятся первые признаки атеросклероза. Для глаза пользователя каждый переход взгляда от цветного блока к описанию будет словно 150 кг от груди.
Так себе UX.
![image](https://habrastorage.org/getpro/habr/post_images/b03/8c3/3db/b038c33db15a5e5a1a96b6ab57476fb7.jpg)
Прервался на сон.
Обновил экран с учётом новых вводных, забил десяток реальных вакансий и принялся листать/читать:
![image](https://habrastorage.org/getpro/habr/post_images/106/96d/3cc/10696d3cc50a868335676cec613c4d95.png)
Стало определённо аскетичнее, гайды “тут где-то лежали, не могу найти”, зато никакой боли, комфортное чтение, всё просто и прозрачно.
Обсудили с ребятами: жаль, что не Material. Но с доводами все согласились и результатом довольны.
Win-Win.
“Только,— говорят они, — есть небольшое замечание.”
Иконку шары поставить последней, так как она реже всего используется.
![image](https://habrastorage.org/getpro/habr/post_images/a61/8a2/e69/a618a2e696ef4511e0b37947658e342a.png)
Я отвечаю: “Она поэтому там и стоит”.
В крайние иконки попасть легче. Меньше концентрации, чтобы прицелиться: с одной стороны пустое пространство, с другой — край экрана.
Со мной согласились, лишь бы отстал. Но я твёрдо решил визуально подкрепить свой аргумент и прислал им такой скрин:
![image](https://habrastorage.org/getpro/habr/post_images/00f/96f/517/00f96f517b50be7a98a46225e75b12b8.png)
Вот так я доказываю команде, что занимаюсь UX, а не хрен пойми чем.
Вывод: #думай_как_дизайнер_действуй_как_изобретатель. Морали нет.
Так как не важно, большие у тебя или маленькие. Главное, чтоб не маленькие.
Простите за внимание.