Лого vc.ru

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

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

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

Поделиться

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Статьи по теме
Настоящая причина редизайна Facebook — он был слишком хорошим28 марта 2014, 14:08
Почему пользователи вводят меньше данных, если в форме есть обязательные поля30 апреля 2014, 13:56
Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

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

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

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

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

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

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

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

0

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

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

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

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

0

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

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

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

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

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

0

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

0

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

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

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

0

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

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Константин Фанки

Что за Codewise? Кто нибудь слышал про них до этого рейтинга?

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
0
Den Neustroev

Складывается впечатление, что вы из Avito.

Avito оказалась единственным российским представителем в рейтинге Deloitte Technology Fast 500
1
Gregory Golovanov

У нимакс вполне себе московский ценник

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
GaLL

Подскажите где и как лучше искать стажировку начинающему веб дизайнеру (без опыта работы) в Казани? Готов ухватиться за любую возможность.

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Владимир Федеральный

Так Инесса об этом, собственно, и пишет - "Крутые дизайнеры уезжают в Москву или заграницу на большие зарплаты и проекты"

Она просто почему-то не хочет артикулировать, что если в Питере платить дизайнеру 150 тыр - то и себестоимость проектов станет как в Москве, и соответственно зачем тогда вообще нужны питерские студии, если у них не дешевле? Я не говорю, что это правильно - но заказчики-то думают вот так, и с этим ничего не поделать.

Почему в Санкт-Петербурге сложно найти дизайнера интерфейсов
0
Показать еще