Сайт Елены Корниловой — легкий обзор новой версии сайта

Это не сравнительный обзор старой версии сайта и новой. Это легкий обзор нового сайта, сайт я буду рассматривать относительно главной страницы по большей части десктопную версию.

Вот здесь уже готовы:

Относительно общего впечатления от сайта — в целом сайт очень приятный, чистенький, выполнен в угоду всем современным трендам: крупная типографика, модный шрифт montserrat, стрелки, тоже крупные, студийные фото, отлично подобранные изображения к статьям, любовь к деталям (не ко всем правда), много воздуха. Кстати, отдельным пунктом прямо понравился логотип, но что означает #SDR, я пока не понял.

Допилив все обзоры, таки понял, точнее мне подсказали — это аббревиатура SX…и рокн-ролл, ну вы поняли, свобода, все дела.

Вобщем соблюдена вся атрибутика нынешней моды. К визуальной составляющей нет почти никаких претензий, есть к функционально-юзабительной.

Начну с главной страницы сверху вниз:

Блок автора

Хороший блок, креативненький с большой красивой студийной фотографией, большой стрелкой, все супер! Но есть одно но. На высоту фотографии приходится ~ 765px, а на кликабельную часть для просмотра информации всего 80px. То есть вероятность 1 к 10 что человек попадет куда нужно, новый пользователь точно. Размер контентной области Наглядное обозначение кликабельной области

По идее сделать весь блок кликабельным — это очень изящное и правильное решение, и не нужно будет заставлять людей целиться в стрелку, не все такие снайперы.

Если есть сомнения

Проверить будет очень просто кстати, посмотрите карту кликов в аналитике и все встанет на свои места.

Блок рассылки

Да, все в тренде, все дела, стильненький плейсхолдер (плейсхолдер — это текст внутри поля, который поясняет что нужно там набирать, в нашем случае это email). Проблема в том что поле email очень маленькое и имеет большие внутренние отступы. Это мешает полноценно набрать и проверить правильность написания. Да и в целом зажато. Блок рассылки

Почему бы не сделать вот так: Блок рассылки — мой вариант

Про мелкую кривую стрелку в кнопке я промолчу.

Блок отзывов и сообщества

Отзывы

Отзывы выполнены в виде слайдера, и каждый отзыв искусственно ограничен высотой в 6rem (это единица измерения, что-то между px и em, px — это абсолютная единица измерения, em — относительная, все это создано для лучшего масштабирования и еще для того чтобы при изменении не были затронуты другие элементы, вобщем тема сложная, объемная, не для сноски) Блок отзывов — обозначение проблемы

Вернемся к высоте текстового блока отзыва, высота ограничена 6rem это примерно 90px, для понимания. Но этого разработчикам показалось мало и они логично решив что если отзыв будет объемным то нужно же будет его как-то прочитать весь, а не только ограниченный кусок и не долго думая вкорячили свойство owerflow-y: scroll; это свойство разрешает скроллирование по оси y, как итог получили вертикальный скрол и головняк для пользователей. Блок отзывов

Блок отзывов — детальное обозначение проблемы

Все бы нечего, но есть три проблемы:

Скролл своим стандартным видом никак не вписывается в концепцию дизайна сайта.
Текст внизу обрывается на полубукве, что тоже выглядит довольно криво и видно что решение было принято от безысходности по принципу “И так сойдет”.
Очень неудобно читать текст при скроллировании, видимая текстовая область крайне мала и вызывает недоуменное раздражение когда пытаешься что-то прочитать

Легкий лайфхак

Чтобы избежать подобных проблем, делается ограничение по символам и в конце ставится троеточие, а на сам отзыв вешается ссылка на детальную страницу или профиль пользователя.

Сообщество

В процессе написания обзора я не сразу уловил что серый блог сообщества завязан на слайдере отзывов, и все эти серые квадратики с людьми это отзывы, которые можно перещелкивать в слайдере стрелками, либо рандомно в самом блоке. Блок отзывов

Наглядная демонстрация работы блока отзывов

Интересное решение конечно, но не считывается слету, ощущение такое что блок отзывов отдельно, а серая стена отдельно. Перещелкивается надо сказать с запозданием. Не думаю что это на лету парсится с профиля пользователя, тогда не понятно почему запаздывание. Ладно не будем купаться в догадках, поехали дальше.

Блог

В целом норм решение, но есть пару моментов:

Несчитывается дополнительное меню, и это я считаю довольно досадно.

Нет, конечно если не принимать во внимание всю главную страницу, а рассматривать меню относительно блога, то все норм, но относительно страницы все печально.

Возьмем вот эти два заголовка. Заголовки на главной странице Обозначение заголовков на главной странице

А теперь возьмем вот это меню. Чувствуете разницу? Я нет. Меню на главной странице Неявное меню

Ах ну да стрелка, и при наведении справа что-то начинает мелькать. Наглядная работа меню

Делать ссылки как заголовки, а заголовки как ссылки — это уже неуважение к пользователям в чистом виде. Одинаковая гарнитура, одинаковый цвет, но ведут себя по разному, это разрыв поведенческих шаблонов.

Конечно если задача поставлена так чтобы пользователь гадал где есть что, то вполне норм, а так покрасьте ссылки в другой цвет и всем будет хорошо. Вот хотя бы так: Мой вариант меню

И стрелка сразу считывается и концепция сайта не нарушена.

Теперь то что касается самих ссылок — почему то не меняется курсор при наведении со стрелки на палец (pointer), и это непривычно и не понятно, хотя бы потому что на ссылку меню можно нажать и как это ни странно, но довольно неожиданно, откроется страница с нужным контентом.

Даже с такими минимальными правками сайт будет выглядеть куда юзабельней и вопросов будет на порядок меньше. Как говорится дьявол кроется в деталях. Мой вариант главной страницы