Офтоп
Alexander Lashkov

Аналитика дизайна: слабые места нового интерфейса Livejournal

В рамках рубрики «Интерфейсы» профессионалы по аналитике дизайна из компании Design Critique, которые базируются в Лондоне и Нью-Йорке, будут исследовать внешний вид популярных сайтов и сервисов, предлагая возможные улучшения. В первом выпуске — линч блог-платформы Livejournal, которая недавно представила обновленный дизайн.

Среди положительных тенденций нового дизайна прежде всего следует назвать его упрощение и «зачистку» от визуального мусора, а также частичную оптимизацию для отображения на планшетах и смартфонах (её не назвать хорошей, но это лучше, чем ничего). Кроме того, появился новый раздел — «Журнал ЖЖ», где собраны самые интересные публикации. Хотя само это название вызывает некоторые вопросы: «Журнал Живого Журнала» — звучит странновато.

 А теперь самое интересное — критика и советы по возможным улучшениям.

Что можно улучшить

В целом дизайн кажется недоработанным. Возникает впечатление, что разработчики очень спешили представить его пользователям, что оставило простор для недоработок различного масштаба. Прежде всего стоит рассмотреть критические проблемы нового интерфейса.

Одна из главнейших проблем ЖЖ — это типографика. Несмотря на то, что проведена очевидная работа по улучшению читабельности текстов, ошибок остается немало:

  • Недостаточная контрастность текстов (особенно заголовков);
  • Выбран модный шрифт (Proxima Nova), однако он не является универсальным и его нельзя использовать одновременно и для текстов, и для заголовков, кнопок и элементов интерфейса;
  • Неоправданно много текстовых элементов набраны прописными буквами;
  • Формат даты неудобен для восприятия. 

Чтение главной страницы не доставляет удовольствия:

Не очень хорошо дела обстоят и с шириной дизайна, модульной сеткой и отступами:

  • Многие элементы «пляшут» — иконки ЖЖ-пользователей, кнопки интерфейса и т.д. 
  • Ширина блока комментариев составляет 100%. На больших мониторах читать такой текст очень сложно; 
  • Сделаны отступы там, где не нужно, и не сделаны там, где они были бы кстати. 

Все это затрудняет чтение поста и ухудшает общее восприятия дизайна.

Есть и не такие масштабные, но все же довольно серьезные недочеты:

  • Плохая реализация адаптивного дизайна. Это выражается в наличии только «резиновой» ширины и появляющегося бокового меню с рубриками. При этом не учтены такие важные аспекты, как изменения размера шрифта и отступов на различных устройствах. Очевидно, что разработчики «по старинке» делали обычный резиновый сайт с претензией на Responsive Design; 
  • Отображение комментариев оставили без изменений. При этом предыдущий вариант нельзя назвать удобным: слишком большие аватары (хотя, юзерпики,  можно считать и «фишкой» ЖЖ), огромные пространства для даты и ника, информационный мусор (отображение «без темы» в свернутых комментариях) и т.д. Здесь необходимо делать все с нуля — проектировать, учитывая привычки пользователей и особенности самого ЖЖ;
  • Хорошая идея — появление возможности при наведении отмечать материал, как прочитанный, однако необходимо корректно реализовать данную функцию на устройствах с тач-скрином; 
  • Боковое меню выглядит тяжеловатым и перетягивает на себя внимание пользователя; 
  • Поиск запрятан слишком далеко.

К числу неприятных мелочей относится и тот факт, что привычная ЖЖ-иконка рядом с именем пользователя в многих местах нового интерфейса отсутствует. Это решение выглядит странно, ведь эта иконка является одной из главных узнаваемых графических элементов платформы, некоторых пользователей можно узнать только взглянув на нее. 

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

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

Странно реализован и выбор языка интерфейса — украинский обозначен как UK, а белорусский — BE, что не соответствует общепринятым сокращениям.

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

Как можно улучшить

Учитывая описанные выше недостатки нового дизайна «Живого Журнала», специалисты Design Critique разработали так называемый "facelift", который мог бы помочь пользователям во взаимодействии с контентом платформы. Вот как выглядела страница поста (для примера взята очень короткая запись):

Всего несколько полезных строк, а пост занимает весь экран монитора. Не видно даже первого комментария! Но если уменьшить отступы и убрать всё лишнее, то ситуация станет куда лучше (картинка в полном размере): 

Точно так же можно улучшить главную страницу. Так она выглядит сейчас:

После изменений главная страница обновленного «Живого Журнала» может выглядеть так (картинка в полном размере):

В заключение стоит отметить, что 90% дизайна «Живого Журнала» — это работа с контентом. Главная сложность при этом заключается в том, что этот контент создают авторы блогов, большинство из которых слабо представляют, что такое типографика, форматирование текста или оптимизиция изображений. Поэтому интерфейс, как бэк-энд, так и фронт-энд, должен учитывать все возможные состояния контента в блогах, а также уметь автоматически приводить посты в приемлемый для чтения вид. 

Самое простое и возможно правильное решение проблемы — наложение ограничений на возможность форматирования текстов пользователями. Например, оставить им возможность загружать картинки при добавлении записи, отключив загрузку изображений с других серверов. Параллельно с введением подобных ограничений стоит также разработать новые стили для самих блогов, потому что сейчас почти все ЖЖ-блоги выглядят устаревшими как минимум на десять лет. 

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

0
11 комментариев
Популярные
По порядку
Написать комментарий...

Не вижу ничего плохого в использовании ни Proxima Nova, ни PT Sans, ни даже шарпа в макетах.

Плохо - это следовать в дизайне кем-то выдуманным законам.

4

Вижу плохое в противоречиях:

"однако он не является универсальным и его нельзя использовать одновременно и для текстов, и для заголовков"

и тут же макет с одним и тем же шрифтом и для заголовков и для параграфов и вообще везде.

0

Противоречия нет - это пример того, как можно использовать один и тот же шрифт сразу для всего на сайте.

Если разрабатывать дизайн ЖЖ с нуля, то переделывать можно почти все, в том числе принципы использования шрифтов. Однако в данном случае дизайн есть, и он совсем новый. Давайте реально смотреть на вещи: переделывать его никто не будет.

Например на Dribbble или Behance вы можете найти десятки редизайнов Фейсбука, Твиттера, Википедии и т.д. Но они лишь тешат самолюбие дизайнеров-авторов и никогда не будут применены на практике.

Мы старались исходить из того что есть. А есть новый дизайн, со своим UX, цветовой схемой, layout'ом, шрифтами и т.д. И отталкивались от этого.

0

Черви всегда против воскресения их еды. Оставьте уже в покое... покойничка. Мир праху его.

3
Удивленный звук

О, диванные критики. Ничего кроме раздражения подобные оценки чужой работы не вызывают. Учитывая, что на вашем сайте нет ни одного кейса.

Фу такими быть.

2
Удивленный звук

И да, потратьте на свой собственный сайт 6900 рублей и сделайте его лучше. Начните, например, с фавиконки.

1

У них есть фавикон.
Другое дело, что нет ни портфолио, ни внятного описания оказываемых услуг.

0

Это настолько смешно, что даже не смешно.
Пишут про использование Proxima Nova везде, а сами берут и меняют ее на PT Sans – ВЕЗДЕ.

Вы про шрифтовые пары слышали?

Посмотрел на фуллсайз, а там еще и сглаживание sharp.

2

Про фавиконку - резонно )

0

Странно реализован и выбор языка интерфейса — украинский обозначен как UK, а белорусский — BE, что не соответствует общепринятым сокращениям

O rly? Общепринятой у кого? UA — украина, а UK — таки да, украинский (ISO 639-1: uk).

А если ближе к теме, то куда они запрятали ответы на комментарии в других блогах, я так и не нашёл.

0

Возможность писать посты, используя все возможности html, как и полностью менять вид своего блога через html + css основное преимущество жж, а вы предлагаете это порезать? Как-то совсем кардинально... Единственное, что в жж хорошего и осталось по сути.

0
Читать все 11 комментариев
Pinterest купила белорусский сервис для редактирования видео Vochi Статьи редакции

Покупка поможет Pinterest развивать видеонаправление.

9 декабря банк «Открытие» и Яндекс.Бизнес проводят очередное бизнес-шоу «Цифровая эволюция бизнеса»

Тема шоу — как компаниям малого и среднего бизнеса продвигать продажи и завоевывать новую аудиторию покупателей через онлайн-каналы

«СберПрайм» ввёл лимит на бесплатную доставку продуктов из «СберМаркета» — её называли выгодой для подписчиков Статьи редакции

Сервис сделал платным то, что обещал сохранить бесплатным: на сайте было указано, что подписка для пользователей «всегда бесплатная».

«У одного человека — половина спутников в мире»: Европейское космическое агенство обвинило SpaceX в монополии в космосе Статьи редакции

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

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

Webmoney на полгода приостановила переводы по рублёвым кошелькам Статьи редакции

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

Глава СберМаркета Асан Курмангужин запустил подкаст Asan Talks в YouTube

В выпусках Асан берет интервью у топ-менеджеров крупных компаний и обсуждает вопросы саморазвития и лидерства

«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

Взломан аккаунт VK и вместо помощи поддержки, получаешь от них блокировку

У меня нет аккаунта в VK, а у моей жены есть, точнее был. Обычный такой аккаунт , мамашки, где она админ 2 групп родкома в школе детей ( причем единственный админ и сейчас в эти группы никого не добавить и себя с нового аккаунта) и доступ в группы совместных закупок, аккаунт старый, причем аккаунт открыт только для друзей.

Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

null