Задача
Увидев сайт в первый раз первым моим желанием было либо отказаться от заказа, либо предложить переделать всё. Это непрофессионально и грубо. Как впоследствии оказалось, не так страшен чёрт, как его малюют.
Всё тот же заказчик, что в предыдущей статье - tealab. Стоит заметить, что с этим брендом мы работаем стабильно, постоянно и отношения у нас достаточно доверительные, чтобы исключить в разговоре всевозможные политесы и этапы “продажи” себя любимых. Однако это не повод говорить, что ваш дизай “ужасен” и впаривать новый. Давайте послушаем, что сказал tealab.
Что есть: дизайн, уже свёрстанный и даже частично натянутый на cms. Макеты упакованы в figma. Есть контакт с верстальщиком и программистом со стороны заказчика. Но пока сайт не на бою.
Задача: с минимальными изменениями придать сайту более продающий вид, сделать его внешне привлекательным. Исправить дизайн мобильной версии.
Вызов принят!
Анализ
Есть много приятных интернет магазинов на просторе рунета - от маленьких до крупных маркетплейсов.
Перед нами небольшой сайт чая, кофе и посуды для розницы. Исходя из практики, он должен быть в меру креативным, но не слишком, поскольку когда мы говорим про интернет магазин, в котором товарных позиций больше сотни, но не больше тысячи имеем в виду интерфейс.
В интернет-магазине именно функциональность стоит во главе угла, а потом уже красота и креатив.
Прежде чем приступать к поиску референсов и говорить за красивости, мы обсудили с заказчиком именно проблемы функционала и зафиксировали те работы, которые нужно сделать:
1. Шапка сайта. Она большая, как на десктопе, так и в адаптиве. Если перейти в каталог, то она занимает больше 35% на экране телефона, а на небольших девайсах и вовсе это значение угрожающе подступает к 50%.
2. Карточки товара. Они чересчур длинные, с мелким интерфейсом.
3. Сквозной блок Преимущества. Стандартная плашки с иконками, несмотря на наличие фирменного элемента, выглядит тяжело и уже приелось пользователям.
4. Сквозной блок с рассылкой и о нас. Тоже стандартно
5. Футер. Такие футеры пришли прямиком из начала десятилетия. Не очень функционально и занимает очень много места.
6. Шрифты. В некоторых местах очень большое межстрочное расстояние.
Шапка сайта
Первое что бросилось в глаза - это большое количество цветовых полос на фоне. Почти пятьдесят оттенков серого, если брать в расчёт и баннер. Ну вы поняли)
Второе - это пункты меню. То, что нужно практически в последний момент выведено в центре (я про “о нас” “доставка “возврат” и т.д.). Это всё нужное, но как ни странно второстепенное.
Третье - скорее придирка. Кнопка каталога и поле меню сливаются и выглядят единым целом.
Пользовательский сценарий - облегчает дальнейшую работу с интерфейсом. Перед тем как приступить к работе, продумайте как взгляд пользователя будет двигаться по экрану. Что нужно поставить в-первую очередь, а что во-вторую?
В нашем случае ключевыми функциями будет Каталог, поиск, корзина, профиль, а потом всё остальное. Вооружившись таким порядком мы немного причесали шапку. На десктопе шапка немного подобралась и сала компактной, а на телефоне вместо 35-40%, уже прия\тные 15-20%.
Карточка товара
Здесь задача стояла облегчить карточку, а также добавить свойство товара. По высоте карточка стала значительно меньше, а за счёт скругления углов получилось добиться так называемого юзерфрендли.
На мобильном к сожалению такого чуда не произошло и по высоте карточка такая же, но стала аккуратнее.
Юзер френдли дизайн всегда приятен и хорошо воспринимается пользователями. Однако если переборщить со скруглениями, да и вообще заиграться с такой геометрией можем получить детский сад и непонимание пользователя куда он попал.
Преимущества
Блок преимуществ пока выглядит стандартно. Обычно он играет роль скорее справочной информации о том, что доставка дешёвая, по всей стране, а теперь ещё и бесконтактная.
На самом деле стандартные фразы типа “Компания №1 в самой лучшей стране мира”, “Высококвалифицированные сотрудники”, “Индивидуальный подход” и так далее ушли в закат, помахав ручкой. Но иногда возвращаются и просят, чтобы они были. Несмотря на то, что клиенты компаний уже не верят в такие призывы, а хотят реальные преимущества.
В данном случае скучные иконки с подписями мы заменили на красивые фотографии и попросили чуть лучше продумать текст.
Футер
Футер выглядел как что-то не очень вразумительное - большой и малофункциональный.
Футер может быть большим. Это даже круто, когда футер самостоятельный блок, но вместе с тем является продолжением сайта.
Мы добавили большой призыв к сотрудничеству, как хорошее троеточие, вместо жирной точки.
В самом низу дублируем основные разделы сайта и каталога. Ну и контакты, конечно. Тут всё стандартно и не надо выдумывать велосипед и ехать на нём открывать Америку.
На мой взгляд самый лучший футер - это маленькая полоска с копирайтом, политикой конфиденциальности и ссылкой на разработчика. А всё потому, что меню чаще всего закреплено в верхней части экрана и ездит вместе со страницей. Минимализм в действии, что тут ещё сказать.
Шрифты
Зачастую хорошие шрифты решают всё. По крайней мере многое.
В нашем случае расстояние между буквами везде было разное и везде необоснованное. Лучше всего разницу видно в шапке: кнопка каталога, корзины и профиля
Выбор товара на мобиле
Здесь мы вдохновились всем известным сайтом синего маркетплейса. Вниз поместили основные функции. А на построение выбора товара нас вдохновил другой, уже розовый, всем известный магазин.
Проблемы и ошибки
Основной ошибкой оказалась самонадеянность. Мы хотели добавить красивую анимацию для блока “о компании”. Но не вышло. Ошибка заключалась в том, что с самого начала мы не посоветовались с верстальщиком по поводу этой самой анимации.
Поэтому не посвятили блоку отдельный раздел, ибо там нет ничего интересного.
Над сайтом редко работает один человек. Создание сайта - это всегда взаимодействие. Но работая не в одной команде легко об этом забыть. Если есть контакт с верстальщиком проекта, скиньте ему концепт, пусть он посмотрит и скажет, что можно сделать, а что вызовет затруднение. Потому что если такая проблема возникнет где нибудь на середине вёрстки, виноват окажется дизайнер.
Выводы и итоги
Я не умею писать выводы. Вы знаете :Р
Задачка с виду не очень сложная, всё требует усилий. В первую очередь анализа. Основная проблема таких проектов, где есть не только готовый дизайн, но и вёрстка, не сломать вёрстку и не заставить заказчика заплатить дважды. Никто не любит платить дважды.
Если же что-то меняется кардинально - обосновывать это. Доносить и убеждать - так удобнее пользователю. Так пользователь сможет быстрее найти нужный товар и так далее.
Итоги… Больно осознавать, что наткнулась на грабли, на который натыкалась уже не раз. Учли, утёрли нос и пошли дальше)
Всем бобра!
P.S. Следующий пост будет либо о работе с заказчиками, либо о способах проверить свой дизайн. Что было бы интереснее почитать?