- PVSM.RU - https://www.pvsm.ru -
Как в условиях дизайн-тирании Гугла и лояльных ему разработчиков обходить правила во благо пользователей.
В HeadHunter дизайн, прежде чем уйти в инпрогресс, проходит множество инстанций. Для начала необходимо доказать команде разработки, что решения взяты не с потолка, а ты не «художник, я так вижу». И иногда пользоваться защитой Рексоны 24/7 приходится в самом неожиданном месте.
Разработчики Android-версии приложения HeadHunter [1] обожают Material Design и ревностно стерегут его гайды. Material должен быть лабораторным, без примесей, и вставлять с первого пикселя.
Мне он тоже по вкусу. Но его избыточная доскональность заставляет пользоваться им с осторожностью при решении задач, отличных от проектирования калькуляторов, музыкальных плееров, социальных сетей, почтовых клиентов и прочих мессенджеров.
Гугл пишет: “Отступ от краёв — 16px”. Это впитывают разработчики. Одиночные пикеты начинаются, когда мне нужен отступ в 20px, а при упоминании 15-го кегля люди хватаются за вилы.
В iOS 10 официально дали понять, что гайды — это подсказки, и приложение может обладать своим характером.
iOS предоставляет камеру, объективы, даёт рекомендации по их использованию, но, по факту, ни на чём не настаивает. Android предлагает готовый сценарий фильма. В придачу идут раскадровка, локации съёмок, режиссёр и ведущий актёрский состав.
Начали с экрана вакансии. Так он выглядит сейчас:
Я разобрал экран на блоки и полез в гайды [3], чтобы вдохновиться и найти наиболее подходящие решения для нашей задачи.
За допингом я ходил в Нарнию [4]. Нарния — это царство фривольности в отношении любых гайдлайнов. Это вселенная в миллиарде световых лет от повседневной реальности и серых будней. Здесь пони едят радугу и какают бабочками.
Вернёмся к реалиям. По итогам рисёча, композиционно и логически подходил один единственный пример. От него я и оттолкнулся.
Пиканул цвет, разверстал инфу. На свет появились 2 варианта:
В первом больше гайдов, но смущала вертикаль чтения. И глаз напрягается при переходе от цветного блока к описанию вакансии, и отступ какой-то неуверенный. Плюс с таким объёмом текста я испугался использовать рекомендуемые отступы — полезное пространство надо беречь.
Во втором варианте всё на одной вертикали, гайды призрачно виднелись на горизонте, и преследовало странное ощущение пустоты. В довесок я опомнился, что все данные фейковые и надо бы посмотреть всё это на реальном контенте.
Ну чё-то как-то так.
Отступ стал уверенным и подозрений не вызывал, чувство пустоты пропало, гайды, фаршированные гайдами, — вроде всё ок. Решил остановиться на этом варианте и утрясти цвета по внутренним стандартам компании.
Показал концепт команде и арт-директору — команда довольна, от худрука — апрув.
Начался поиск оттенка синего. Используемый в приложении хорошо подходил для кнопок и цветовых выделений, но категорически не устраивал в качестве бэкграунда. Задача: получить правильный контраст и не убежать от визуального характера продуктов HeadHunter, гайдлайнов Material Design и здравого смысла.
Варианты с градиентами команде даже не показывал, чтобы
избежать физической расправы за гаражами.
За этим делом я просидел не один час, и тут накрыло.
Понял, что хочу взять глаза, положить на полку и какое-то время ими не пользоваться. Они болели, и это было странно. Не устали, а именно болели. Why?!
В поисках ответов решил ещё раз проанализировать макет и приложить его к реальной среде, а к глазам — подорожник.
Из внутренней статистики вспомнил, что за одну сессию в среднем человек просматривает 20 вакансий. В среднем на просмотр одной вакансии — 2 минуты, за это время принимается решение: откликаться или двигаться дальше. В среднем.
При таком сценарии в нашем случае на восприятие больше всего влияют 2 фактора: вертикаль и выворотка [5].
Скачущая вертикаль восприятие ухудшает, но терпимо. 50% информации верхнего блока человек видит ещё в выдаче. Он либо сразу переходит к описанию, либо откликается/добавляет в избранное.
Выворотка — это модно, это жирный акцент, она хороша в малых объёмах и в статике. Об этом говорят исследования физиологии восприятия выворотки и инверсного чтения. Но при частом инверсном чтении она не совместима со зрительным органом. Это означает, что где-то уже на третьей вакансии появятся первые признаки атеросклероза. Для глаза пользователя каждый переход взгляда от цветного блока к описанию будет словно 150 кг от груди.
Так себе UX.
Стало определённо аскетичнее, гайды “тут где-то лежали, не могу найти”, зато никакой боли, комфортное чтение, всё просто и прозрачно.
Обсудили с ребятами: жаль, что не Material. Но с доводами все согласились и результатом довольны.
Иконку шары поставить последней, так как она реже всего используется.
Я отвечаю: “Она поэтому там и стоит”.
В крайние иконки попасть легче. Меньше концентрации, чтобы прицелиться: с одной стороны пустое пространство, с другой — край экрана.
Со мной согласились, лишь бы отстал. Но я твёрдо решил визуально подкрепить свой аргумент и прислал им такой скрин:
Вот так я доказываю команде, что занимаюсь UX, а не хрен пойми чем.
Вывод: #думай_как_дизайнер_действуй_как_изобретатель. Морали нет.
Так как не важно, большие у тебя или маленькие. Главное, чтоб не маленькие.
Простите за внимание.
Автор: HeadHunter
Источник [6]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/interfejsy/165845
Ссылки в тексте:
[1] приложения HeadHunter: https://play.google.com/store/apps/details?id=ru.hh.android&hl=ru
[2] вакцины против Android KitKat: https://www.xfive.co/blog/why-even-google-sometimes-makes-bad-ui/
[3] гайды: https://material.google.com/style/color.html#color-color-schemes
[4] Нарнию: http://www.materialup.com/
[5] выворотка: https://ru.wikipedia.org/wiki/Выворотка
[6] Источник: https://habrahabr.ru/post/306908/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.