На днях был введен новый дизайн блог-платформы Yvision. Хорошего в нем много — особенно отмечу то, что наконец-то сделан нормальный редактор постов, прошлый был совсем неудобен. Внешний вид стал современным и легким. Но вместе с тем есть множество минусов, которые существенно ухудшают восприятие сайта и затрудняют работу с ним. Рассмотрим их по-порядку.
Слабая контрастность
Общемировой тренд последних времен — снижение контрастности сайтов — не обошел и YVI стороной. Не просто не обошел, а основательно оставил след, да так, что различить отдельные элементы стало возможно только при выкручивании настройки контрастности монитора в максимум.
Говорят, на этом скрине есть поле для ввода комментария. Еще бы увидеть его. Уровень контраста поля ввода и окружающего блока составляет 1:1, что означает то, что эти элементы практически сливаются друг с другом. Нет даже курсора, который бы приглашал к вводу комментария, или замещающего текста «Введите комментарий».
Предложение: сделать рамку или тень вокруг поля ввода комментария, либо сделать темнее задний фон, а также замещающий текст или курсор.
Теперь рассмотрим контрастность текста. По стандарту WCAG 2.0 контрастность должна быть не менее 4.5:1, а рекомендованное значение — не менее 7:1
Элементы управления имеют контрастность, которая не соответствует минимальным требованиям. Та же ситуация с разделами в верхней части и текстом на фоне обложки поста, с пунктами в настройках.
Предложение: увеличить контраст элементов.
Типографика
При первом посещении нового сайта Юви я сразу обратил внимание на шрифты, а точнее, на диссонанс их размеров. Размер шрифта комментариев и управляющих элементов слишком мелкий, терпимо смотрится только на телефоне.
Типографика — одна из важнейших составляющих качества взаимодействия человека с сайтом. Когда гарнитура, размеры, интерлиньяж подобраны хорошо — это создает впечатление качественного, профессионально сделанного сайта, с которым хочется работать. Но сейчас это не так.
Идеального размера шрифта, который бы подходил во всех случаях и хорошо смотрелся бы на любом экране, не существует, но эксперты в веб-типографике советуют задавать базовый размер шрифта около 16 пикселей. WCAG 2.0 рекомендует использовать не более 80 знаков в одной строке, интерлиньяж не менее 1.5 интервалов, а отступ между абзацами — в 1.5 раза больше интерлиньяжа.
Рассмотрим нынешнюю ситуацию.
- Размер шрифта постов — 16px
- Интерлиньяж — 30px (1.875)
- Отступ между абзацами — 30px
- Символов в строке — 50−80
В целом, терпимо. В комментариях все хуже.
- Размер шрифта — 13px
- Интерлиньяж — 18.57px (1.43)
- Отступ между абзацами — 10px
- Символов в строке — 80−100
Размер шрифта управляющих элементов близок по размеру шрифту контента.
Предложение: унифицировать интервалы в постах и комментариях и увеличить шрифты. Здесь можно оттолкнуться от следующего: для постов размер 18px, для комментариев 16px, или 16px и 14px соответственно. Не стоит бояться увеличивать шрифт.
Текст на кнопках мелкий. К тому же, в одних случаях текст на них сделан полностью заглавными буквами, а в других — только начинается с них.
Предложение: сделать все управляющие элементы единообразными — текст либо везде начинать с заглавной, либо выполнить везде только заглавными буквами, также увеличить размер шрифта.
Основной текст выполнен шрифтом Merriweather, а заголовки, подзаголовки и управляющие элементы — шрифтом Proxima Nova. В заголовках и подзаголовках использовано начертание Black, размер шрифта 42px и 30px соответственно. Такие заголовки выглядят слишком насыщенными относительно текста, нарушают его восприятие.
Предложение: использовать в заголовках и подзаголовках начертание Bold или даже Semibold.
Фэйспалмный недочет — в использованной версии шрифта Proxima Nova нет всех казахских букв. Понимаю, латиница на дворе, но кириллицу рано отправлять на покой.
Однако, полноценная версия шрифта в природе существует.
Цвета
Основной контент находится на белом фоне, задний фон сайта — светло-серый. Фон комментариев тоже светло-серый, что создает ощущение того, что они не являются полноценной частью контента, а лишь что-то вспомогательное, вроде реквизитов сайта в футере.
Предложение: сделать комментарии на белом фоне.
При нажатии на + и − в рейтинге комментариев и постов, кнопки становятся оранжевыми, но знаки остаются серыми, что выглядит грязновато.
Предложение: сделать знаки белым цветом.
Про недостаток контраста в элементах возле заголовка поста я уже говорил, но есть еще кое-что — если на посте поставлен лайк, пиктограмма сердечка из серой становится оранжевой. Остальные пиктограммы остаются серыми, оранжевая выбивается из общего ряда.
Предложение: не выделять оранжевым лайкнутый пост, либо переместить эту пиктограмму на первое (или последнее) место.
Прочие недочеты
Лид практически неотличим от основного текста. К тому же, его расположение спорное — логичнее было бы его видеть не в начале текста, а относящимся к заголовку.
Предложение: сделать его курсивом либо шрифтом заголовка.
Все посты на странице обзора и в профиле безвременные — дата не отображается. Это негативно влияет на желание человека читать материал.
Отступы между блоками несоразмерны мелкому тексту, пример можно наблюдать на предыдущем скриншоте.
Предложение: увеличить текст и уменьшить отступы.
Блок отправки комментария находится над всеми комментариями, поэтому когда человек прочитал всю дискуссию под постом, ему придется возвращаться на самый верх, чтобы оставить свою реплику.
Предложение: сделать форму отправки комментария динамической, чтобы отображалась как сразу под постом, так и под лентой комментариев.
Кнопка «Показать комментарии» вынуждает сделать лишнее действие для открытия комментариев, поэтому не нужна. Подгрузка ленты комментариев должна быть автоматической при пролистывании страницы в конец.
Сохранение черновика должно быть автоматическим, не требующим специальных действий от человека.
Предложение: сделать автоматическое сохранение черновика, убрать кнопку «Сохранить в черновики», вместо нее лучше отображать статус поста: черновик, сохранен, идет сохранение.
Лента свежих постов от пользователей запрятана в раскрывающееся меню («Прямой эфир»).
Предложение: вынести «прямой эфир» наверх.
И еще немного
- Нельзя сделать разрыв строки, нажатие Shift+Enter создает новый абзац
- Боковое меню редактора текста должно раскрываться по наведению курсора, а не только по нажатию на него.
- Нет возможности выбора в настройках того, что открывать сразу при входе на сайт: ленту или обзор.
- На кнопке «Репостнуть» изображена неуместная пиктограмма 🔄, которая обычно обозначает обновление, загрузку контента.
- Нельзя корректно выделить текст, содержащий ссылку, выделяется текст, находящийся ниже курсора.
- Ошибки в верстке аватарок, в некоторых случаях они выглядят обрезанными вместо ровного круга.
- Отображаются не все уведомления, без нажатия на пиктограмму колокольчика нельзя узнать, есть ли они вообще.
- Датой поста почему-то является дата создания черновика, а не дата первой публикации.
- Страница дергается по горизонтали при обновлении из-за полосы прокрутки.
- Пиктограмма скрытия постов, удаления и редактирования находится выше, чем нужно.
Предложения по функционалу
В завершение скажу о том, что хотелось бы видеть на новой платформе Юви.
- Поддержка разметки Markdown — которая уже является де-факто стандартом современных редакторов текстов
- Возможность прикреплять видео к комментариям
- В редакторе постов добавить drag'n'drop для изображений — помещение из буфера обмена и перетаскивание в текст файла, легкое перемещение изображения между абзацами. Также сделать возможность добавления подписей к изображениям.
- Общий рейтинг пользователя, зависящий от рейтинга постов и комментариев, с прозрачной методикой расчета, потому как принципы формирования нынешнего топа пользователей абсолютно непонятны.
- Сделать историю редактирования поста
Итак, пока это все, что я обнаружил за первый день использования обновленного сайта Yvision. В дальнейшем если найду что-то еще, то пост будет дополнен, а если находок будет много, выпущу отдельным постом.
Современный сайт без хорошего дизайна нежизнеспособен. Такие сайты как Medium привлекают людей писать, комментировать именно из-за профессионально проработанного внешнего вида и хорошего функционала. Надеюсь, что специалисты Yvision задумаются и доведут новую платформу до совершенства.