В прошлую среду мы рассказывали о том, как правильное выравнивание влияет на эргономику и удобство. И предложили вам на ревью портал Работа в России
Сегодня рассказываем, какие проблемы с выравниванием мы нашли на trudvsem.ru и как их можно исправить.
Обзор получился таким огромным, что мы решили перенести нашу плановую статью о принципах проектирования интерфейсов на четверг.
Ну а сейчас - много-много картинок и немного пояснений к ним!
Пролог
Портал работа в Росии необычайно прекрасен. Там непаханое поле работы для проектировщика интерфейсов. Было очень трудно ограничить себя только темой выравнивания. :-)
Мы приведём здесь длинный скриншот. Но, вообще-то, эту страницу лучше наблюдать вживую.
Вот её-то нам и предстоит улучшить.
Будем действовать, как обычно: разобъём нашу страницу на части, опишем проблемы, исправим их и посмотрим, что получится.
Шапка и поиск.
Проблемы
1. Герб и меню находятся левее, чем все остальные элементы. Из-за этого строгая вертикаль ломается. Шапка закреплена при прокрутке. Поэтому мы видим неряшливое выравнивание всегда, в какой бы части страницы мы не находились. Самый треш - когда шапка и подвал видны на странице одновременно. Смотрите в галерее.
2. "Подать заявление" и встать на учёт в качестве безработного - это важная функция. Кнопка стоит в самом верху, на красном фоне. Кнопка всегда видна при прокрутке. Но стоило ли так стараться, если к кнопке надо тянуться взглядом через пол-экрана.
На рисунке показано, как двигается взгляд, и как внимание зрителя размазывается по всей шапке.
3. В белой зоне слева находится логотип, а справа - кнопки-переключатели "Соискатель/Работодатель". В этой белой зоне нечисто.
Логотип и кнопки очень массивные, мозг пытается выстроить между ними связь. Но тщетно, и вот почему.
4. Кнопка "Войти" попадает в слепую зону. На неё просто не успеваешь посмотреть. К тому же, при прокрутке кнопка скроется. А авторизация может понадобиться в любой момент.
5. Те же претензии к ссылке "Версия для слабовидящих". Бедные слабовидящие. На свете мало сайтов, где эта ссылка по-настоящему хорошо видна.
Попробуем отремонтировать
1. Подвинем герб и меню, выровняем по левому краю с логотипом.
2. Кнопку "Подать заявление" переименуем. Теперь она будет называться "Встать на учёт". Рядом с кнопкой оставим пояснение "в качестве безработного". Так у нас будет больше места на красной линии
3. Саму кнопку сделаем пошире: пусть будет такой же, как логотип. Ну и, передвинем её влево тоже.
Вот что получится:
Теперь займёмся правой частью шапки.
4. Кнопку авторизации отправим наверх, на синюю полосу. Там она будет всегда видна пользователю. Кнопку выравниваем по правому краю с переключателем "Соискатель/работодатель".
5. Версию для слабовидящих переносим на красную полосу. И тоже выравниваем.
6. Адрес (в данном случае, г. Москва) переносим и ставим над переключателем. И выравниваем по правому краю.
7. Логотип и кнопку-переключатель выравниваем по нижнему краю.
Вот что получается. В галерее - было / стало
Поиск и фильтр.
Проблемы поиска
Поиск, сам по себе, выглядит сносно. Но в интерфейсе ничто не может существовать в отрыве от окружения. Поэтому присмотримся к тому, как поиск встроен в страницу. Листайте галерею:
1. Зона вокруг поиска очень сильно нагружена: здесь много мелких подписей, много мелких интервалов.
2. Поле поиска сделано, как белый инпут внутри серого прямоугольника. И блок с фильтами - это тоже белые поля на серой подложке.
И вот, края серых подложек поиска и фильтра стоят ровненько. Края белых элементов - на разных линиях. Там счёт идёт на пикесли, но это всё равно заметно. Даже если вы это не осознаёте. А текст внутри белых элементов вообще расставлен абы как.
3. Взгляд то и дело спотыкается.
Проблемы фильтра
В фильтре, в основном, элементы двух видов:
- Спадающие списки, в которых надо выбирать один или несколько вариантов. Например, такое поле используется для выбора региона.
- Кнопки-перелючатели. Например, можно нажать кнопку "Вакансии с поддержкой при переезде" и получить соответствующий список вакансий.
1. Кнопки-переключатели мало похожи на кнопки. Визуально они ближе к обычному текстовому полю. Подпись кнопки напоминает плейсхолдер. Поэтому возникает обманчивое впечатление, что текст на кнопке должен быть слева. Но он - по центру. И это сбивает с толку.
2. Даже когда осознаешь, что перед тобой - кнопки, выравнивание по центру всё равно мешает. Беда в том, что кнопки и спадающие списки перемешаны друг с другом. И "лесенка" из подписей напрягает.
3. Некоторые кнопки сгруппированы. И подпись группы находится слева. Но подписи у спадающих списков - по центру. Это никак не объяснить.
Всё вместе это выглядит, как изощрённое издевательство.
Надо сделать оговорку, что сам по себе фильтр не очень удобен. Его можно было бы спроектировать более лаконично и не потерять в информативности. Но это выходит за рамки нашей темы, поэтому постараемся "резать" поменьше.
Исправляем шероховатости
Просто выровняем элементы. Вот что получилось:
Важно отметить!
В этом конкретном кейсе мы только "пригладили", приаккуратили взъерошенную форму. При этом, важные проблемы остались нерешёнными!
- Элементы-переключатели нельзя распознать до тех пор, пока на них не нажмёшь. Их поведение на первый взгляд не очевидно.
- Многовато лишнего. По-хорошему, надо визуально "разгрузить" фильтр.
К тому, как решать такие проблемы, мы ещё придём в наших будущих постах.
Тем не менее, давайте посмотрим, чего удалось добиться на этом этапе:
Список вакансий
Посмотрим, как выглядит, фрагмент списка.
Что с ним не так? Ох.
Начнём с шапки списка.
1. Количество найденных вакансий и рабочих мест - выровнены по какому-то странному принципу.
2. Временной фильтр, в котором мы выбираем, за какой период показывать вакансии, нарушает сразу несколько базовых принципов (два из них мы разбирали ранее).
- Во-первых, великоват интервал. Из-за конских расстояний теряется ощущение, что это один элемент.
- Во-вторых, надо поэкспериментировать с выравниванием.
- В-третьих, выбранный пользователем способ фильтрации плохо заметен, надо делать его контрастнее.
- В четвёртых, надо подумать о том, чтобы использовать другой набор элементов. Например, расположить рядом спадающий список с часто используемыми вариантами и календарь, на котором можно выбрать произвольный период.
3. К сортировке примерно те же замечания.
А вот и сам список.
1. Зарплата гуляет. По правому краю она не такая кривая, как по левому. Но всё равно кривая.
2. Галочка, свидетельствующая, что "Организация подтверждена на портале Госуслуги"выглядит нормально. Но только если у организации короткое название. У организаций с длинным названием всё печально: галочка съезжает.
3. Нет висячего выравнивания.
Давайте исправлять
1. Количество вакансий и рабочих мест отобразили по-другому.
2. Уложили временной фильтр в одну строку.
3. Увеличили интервал между "Показывать" и "Сортировать". А интервал между вариантами в фильтрах (за сутки, за 3 дня, ... и т.д.) наоборот уменьшили. Теперь границы каждого элемента считываются быстрее.
4. Изменили цвет выбранного элемента.
5. Добавили индикатор способа сортировки: по убыванию / по возрастанию.
Теперь причешем список вакансий, а для этого приведём в порядок плашки.
1. Выровняем всё.
2. Галочку "Организация подтверждена на портале Госуслуги" поставим влево. И воспользуемся правилом висячего выравнивания.
3. Метки "Карьерный рост" и "Опытные кадры" выровняем по левому краю основного контента. И тоже используем висячее выравнивание.
Вот что получится:
На первый взгляд, висячее выравнивание выглядит как-то не очень. Но есть несколько факторов в его пользу:
- На экране редко будет одна плашка. Чаще всего, пользователь будет видеть перед собой много всяких вакансий.
- Бывают очень длинные, многострочные названия организаций. И тогда маленькая иконка будет ломать линию.
- Бывают организации совсем без подтверждения на госуслугах, а значит и без иконки. Они будут смотреться инородно.
Вот пример:
Посмотрим, что у нас получилось на этом этапе
Пагинация и футер
Проблемы пагинации
Вообще-то, пагинация выровнена по центру списка вакансий. Но несколько факторов сводят все старания к нулю.
1. Блоки с вакансиями не имеют чётких границ. Зато они содержат яркие крупные элементы. И мозг невольно пытается найти связи с ними. И не находит.
2. Прямо под пагинацией - яркий крупный футер. А в футере множество мелких контрастных надписей. И с ними тоже никакой связи.
3. Опять та же самая проблема: нет сильной линии, связывающей элементы страницы
Проблемы футера
1. Выравнивание в подвале оставляет желать лучшего. Чтобы увидеть это, достаточно расставить направляющие.
2. Присмотритесь к интервалам. Горизонтальные отступы вокруг ссылок на скачивание мобильных приложений немного разные. А интервалы между группами ссылок отличаются очень сильно. Мы показали это на втором скрине в галерее:
Исправляем
1. Переставляем элементы в подвале так, чтобы создать две сильные линии слева и справа:
- Герб остаётся на своём месте.
- Столбцы сдвигаются влево.
- Появляется четвёртый столбцец. Теперь техническую поддержку лучше видно.
- Кнопки для скачивания мобильного приложения ставим справа
2. Выравниваем элементы так, чтобы они не выезжали за пределы горизнтальных серых линий в верхней и нижней части подвала
3. Пагинацию переносим вправо. Вот что получается
Мы прошли всю страницу блок за блоком
Посмотрим, что у нас получилось в итоге?
Уф.. Это было долго! Но оно того стоило.
Мы всего лишь поправили выравнивание, но получили гораздо более чистый, аккуратный, целостный и связный интерфейс.
Кто дочитал до конца - тот круче Чака Норриса.
Автор: Светлана Хомякова.