Это не сравнительный обзор старой версии сайта и новой. Это легкий обзор нового сайта, сайт я буду рассматривать относительно главной страницы по большей части десктопную версию.
Вот здесь уже готовы:
Относительно общего впечатления от сайта — в целом сайт очень приятный, чистенький, выполнен в угоду всем современным трендам: крупная типографика, модный шрифт montserrat, стрелки, тоже крупные, студийные фото, отлично подобранные изображения к статьям, любовь к деталям (не ко всем правда), много воздуха. Кстати, отдельным пунктом прямо понравился логотип, но что означает #SDR, я пока не понял.
Допилив все обзоры, таки понял, точнее мне подсказали — это аббревиатура SX…и рокн-ролл, ну вы поняли, свобода, все дела.
Вобщем соблюдена вся атрибутика нынешней моды. К визуальной составляющей нет почти никаких претензий, есть к функционально-юзабительной.
Начну с главной страницы сверху вниз:
Блок автора
Хороший блок, креативненький с большой красивой студийной фотографией, большой стрелкой, все супер! Но есть одно но. На высоту фотографии приходится ~ 765px, а на кликабельную часть для просмотра информации всего 80px. То есть вероятность 1 к 10 что человек попадет куда нужно, новый пользователь точно.
Наглядное обозначение кликабельной области
По идее сделать весь блок кликабельным — это очень изящное и правильное решение, и не нужно будет заставлять людей целиться в стрелку, не все такие снайперы.
Если есть сомнения
Проверить будет очень просто кстати, посмотрите карту кликов в аналитике и все встанет на свои места.
Блок рассылки
Да, все в тренде, все дела, стильненький плейсхолдер (плейсхолдер — это текст внутри поля, который поясняет что нужно там набирать, в нашем случае это email).
Проблема в том что поле email очень маленькое и имеет большие внутренние отступы. Это мешает полноценно набрать и проверить правильность написания. Да и в целом зажато.
Блок рассылки
Почему бы не сделать вот так:
Блок рассылки — мой вариант
Про мелкую кривую стрелку в кнопке я промолчу.
Блок отзывов и сообщества
Отзывы
Отзывы выполнены в виде слайдера, и каждый отзыв искусственно ограничен высотой в 6rem (это единица измерения, что-то между px и em, px — это абсолютная единица измерения, em — относительная, все это создано для лучшего масштабирования и еще для того чтобы при изменении не были затронуты другие элементы, вобщем тема сложная, объемная, не для сноски)
Блок отзывов — обозначение проблемы
Вернемся к высоте текстового блока отзыва, высота ограничена 6rem это примерно 90px, для понимания. Но этого разработчикам показалось мало и они логично решив что если отзыв будет объемным то нужно же будет его как-то прочитать весь, а не только ограниченный кусок и не долго думая вкорячили свойство owerflow-y: scroll; это свойство разрешает скроллирование по оси y, как итог получили вертикальный скрол и головняк для пользователей.
Блок отзывов — детальное обозначение проблемы
Все бы нечего, но есть три проблемы:
- Скролл своим стандартным видом никак не вписывается в концепцию дизайна сайта.
- Текст внизу обрывается на полубукве, что тоже выглядит довольно криво и видно что решение было принято от безысходности по принципу “И так сойдет”.
- Очень неудобно читать текст при скроллировании, видимая текстовая область крайне мала и вызывает недоуменное раздражение когда пытаешься что-то прочитать
Легкий лайфхак
Чтобы избежать подобных проблем, делается ограничение по символам и в конце ставится троеточие, а на сам отзыв вешается ссылка на детальную страницу или профиль пользователя.
Сообщество
В процессе написания обзора я не сразу уловил что серый блог сообщества завязан на слайдере отзывов, и все эти серые квадратики с людьми это отзывы, которые можно перещелкивать в слайдере стрелками, либо рандомно в самом блоке.
Наглядная демонстрация работы блока отзывов
Интересное решение конечно, но не считывается слету, ощущение такое что блок отзывов отдельно, а серая стена отдельно. Перещелкивается надо сказать с запозданием. Не думаю что это на лету парсится с профиля пользователя, тогда не понятно почему запаздывание. Ладно не будем купаться в догадках, поехали дальше.
Блог
В целом норм решение, но есть пару моментов:
- Несчитывается дополнительное меню, и это я считаю довольно досадно.
Нет, конечно если не принимать во внимание всю главную страницу, а рассматривать меню относительно блога, то все норм, но относительно страницы все печально.
Возьмем вот эти два заголовка.
Обозначение заголовков на главной странице
А теперь возьмем вот это меню. Чувствуете разницу? Я нет.
Неявное меню
Ах ну да стрелка, и при наведении справа что-то начинает мелькать.
Наглядная работа меню
Делать ссылки как заголовки, а заголовки как ссылки — это уже неуважение к пользователям в чистом виде. Одинаковая гарнитура, одинаковый цвет, но ведут себя по разному, это разрыв поведенческих шаблонов.
Конечно если задача поставлена так чтобы пользователь гадал где есть что, то вполне норм, а так покрасьте ссылки в другой цвет и всем будет хорошо. Вот хотя бы так:
Мой вариант меню
И стрелка сразу считывается и концепция сайта не нарушена.
Теперь то что касается самих ссылок — почему то не меняется курсор при наведении со стрелки на палец (pointer), и это непривычно и не понятно, хотя бы потому что на ссылку меню можно нажать и как это ни странно, но довольно неожиданно, откроется страница с нужным контентом.
Даже с такими минимальными правками сайт будет выглядеть куда юзабельней и вопросов будет на порядок меньше. Как говорится дьявол кроется в деталях.
Мой вариант главной страницы
Читайте также:
Всем лайта! Оставляйте свои комментарии и предлагайте сайты для обзора, на самые интересные я сделаю Light Review.
P/S/ Для обзора я использовал win 7x64 с браузером Google Chrome Версия 83.0.4103.116