Разбор редизайна экспертного центра

Разбор работ в DL PRO состоит из двух частей: статьи с анализом, который вы видите ниже и файла в Figma Jam, который передается автору работы с большими подробностями и точечными указаниям на то, что следует исправить.

Автор Михайлова Юлия. Работа подана на разбор во время DL INTENSIVE 2021.

Ссылка на сайт

экспец.рф

Привет, Юля! Во время интенсива тайминг мероприятия не позволил разобрать в деталях эту работу, поэтому мы решили подробно всё расписать по этому проекту и показать типовые ошибки. Мы будем оценивать работу по четырём критериям для полной объективности: Логика, Визуал, Бизнес и Команда как мы это делаем для рейтинга, только без привязки к вашему текущему уровню. Но для начала общее впечатление:

Что понравилось в работе

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

Логика

Основной вопрос, который возникает при первичном просмотре сайта: какую проблему клиента он решает? С какими вопросами приходит клиент? Сейчас на первом экране до фолда невозможно сказать, какой запрос закрывает этот экспертно-консультационный центр, как именно мне он поможет?

Как посетитель, я еще не знаю, что у вас есть, а вы мне уже предлагаете бесплатную консультацию. Нужно оркестрировать пользовательский опыт, находить подходящих респондентов и проявить к ним эмпатию, чтобы понять потребности и боли клиента. А потом полученный опыт формализировать в виде user story, use cases, JTBD, или CJM, чтобы с этими данными дальше работать.

Визуал

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

Мудборд или «Доска настроения»

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

Пример мудборда с разделением по группам

Типографика

Ты используешь в большинстве случаев жирное начертание, обычного текста лучше использовать normal. Для расстановки правильных типографских символов(тире, кавычки) пользуйся сервисом Типограф или аналогичными плагинами для фигмы.

По поводу курсива. Ты хотела зарифмовать курсив из логотипа в заголовках, меню и в шапке. Это понятно, но ухудшает считываемость информации. Лучше с этим не заигрывать. Помни о пользователях. На этом сайте это будут серьезные мужчины, поэтому визуал вторичен. Главное правильно и аккуратно подать информацию.
Предлагаю применить принцип Бритвы оккама — убираем сущности до тех пор, пока мы можем понять смысл. Убрать картинки, если без них можно обойтись. Упростить блоки.

Композиция

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

Цвет

Цвету текста не хватает контрастности. Можно делать темнее.
Почитай про контрастность текста. И как разработчику тебе может быть интересна эта статья https://ux.pub/cvetovoj-kontrast-v-dizajne-interfejsov-p-ostandartam/

Бизнес

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

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

Команда

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

Не надо бояться залезать в контент, если ты видишь, что это может улучшить как пользовательский, так и клиентский опыт. Если не получается договориться об этом с стейкхолдерами, учись лучше аргументировать свои решения. Об этом можно больше почитать в книге Тома Гривера Articulating Design Decisions.

Пример подхода работы с контентом

Сначала работаешь только в чб и со смыслом, потом добавляешь цвет и изображения

Что посмотреть

Ещё раз соберём все ссылки в одном месте:
Статья про контраст текста: https://ux.pub/cvetovoj-kontrast-v-dizajne-interfejsov-p-ostandartam/

Сервис Типограф для аккуратных типографических знаков и сервис Главред для копирайтинга и улучшения смысла текста.

Правило внутреннего и внешнего

Удачи!

Наш бот Прошка оценил работу так

Эй, читатель! Хочешь такой разбор? Подписывайся на сервис обучения и поддержки дизайнеров

https://pro.dsgnline.ru/