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