Редизайн DTF. Опять

Смотрим почему всех так бесят кнопки, что не так с шапкой и как можно убрать пустоту по бокам.

Привет, DTF! Помните парня, который год назад делал редизайн мобильной версии стим? Так вот это я. После кучи комментариев и советов я отправился проходить круги дизайнерского ада во всякие веб студии и не только, набрался опыта и теперь сам буду всех обсирать (нет).
На волне очередного редизайна решил разобраться, что же именно не нравится пользователям в дизайне и как это можно исправить. Я всё ещё не стал Джони Айвом мира ui-ux дизайна, но теперь могу более уверенно посылать тех самых латентных дизайнеров и логически объяснять свои решения.

Проблема 1. Размер карточек постов

Во время последнего редизайна посты бахнули пельменей и решили вырасти ещё сильнее, при этом перемещая кнопки и добавляя плашки по непонятной мне логике. В итоге максимально загруженный пост теперь состоит из 6 «этажей» которые занимают весь монитор.

Не хватает только плашки joyreactor'а
Не хватает только плашки joyreactor'а

Большая ли это проблема? Вообще нет, но по какой логике кнопка «Добавить в избранное» переехала вверх, а дата и кол-во просмотров вниз — я не пойму. В идеале карточка должна отвечать на вопросы «Кто? Где? Когда?» В одном месте.

Давайте попробуем вернуть наши кнопки и собрать в кучу дополнительную информацию.

Редизайн DTF. Опять

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

Редизайн DTF. Опять

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

Проблема 2. Стиль кнопок

Почему все кнопки в разном стиле? Я могу объяснить, почему в разных разделах сайта могут отличаться кусочки дизайна, но на данный момент только на главной 5 кнопок с абсолютно разными стилями. Даже если обе кнопки с тенями, то стиль теней у них абсолютно разный, а про обводку и закругления я вообще молчу.

И это я ещё похожие искал.
И это я ещё похожие искал.

Как такое происходит я не знаю. Обычно во время работы над одним проектом создается ui-kit и по всему сайту\платформе используются одни и теже компоненты. Либо у Комитета для каждой кнопки свой дизайнер, либо их это просто никак не смущает. Ещё вариант, что это всё следствие затянувшихся обновлений и редизайнов как у той же винды, что в итоге приводит к вот такому разнообразию стилей.

Пример elevation вариантов в готовой дизайн-системе. 
Пример elevation вариантов в готовой дизайн-системе. 

Для исправления достаточно собрать все кнопки в кучу и вернуть им одинаковую обводку, форму и стиль теней (при условии, что это кнопки, а не вкладки и т.д.)

Редизайн DTF. Опять

Проблема 3. Пустота и вёрстка

Тут всё просто и это даже не проблема, поэтому и решать её я не буду. Сайты узкие из-за ограничение ширнины текста, широкие строки читать тупо неудобно, поэтому карточки с постами ограничивают по размерам и в итоге по бокам от контента остается много свободного пространства.
У этой проблемы есть 2 способа решения — пустить карточки несколькими колонками или забить боковые поля какой-то инфой, перенести туда навигацию и разгрузить основную ленту от всякого мусора.

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

Если очень внимательно посмотреть на фото, то можно найти мемы.
Если очень внимательно посмотреть на фото, то можно найти мемы.

Вывод

А я не знаю какой здесь можно сделать вывод. У платформы Комитета на самом деле хороший дизайн, но по какой-то причине в интерфейсе очень сильно намешаны стили с разных обновлений. Остается открытым только один вопрос, Ширяев, вам дизайнер не нужон? ( ° ʖ °)

2626 показов
2.1K2.1K открытий
33 репоста
98 комментариев

Комментарий недоступен

Ответить

Ты че сюда с адекватными мыслями по поводу дизайна пришел? 
Тебя щас Ширяев забанит

Ответить

Хрен с Ширяевым.
Скажите мне как закладку сделать на статью?
Или только репост в какой-то там мой блог теперь?

Ответить

Три всадника этого редизайна:

1. Кнопки лайков, зачем-то ставшие объемными и устроившиеся на подработку светофорами.
2. Перенос информации о посте с верхней строки в нижнюю, из-за чего она теперь выглядит как подпись к фотографии и совершенно нечитабельна.
3. Увеличенный шрифт у сообщение о репосте, как будто знание о том, что это репост, является самым главным и его обязательно нужно донести до читателя во что бы то ни стало.

А самое главное, все эти изменения не имеют никакого практического смысла.

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

Ответить

Комментарий недоступен

Ответить

Комментарий недоступен

Ответить