Дизайн-ремонт: чиним UI, не ломая UX

Мы в Purrweb любим UI дизайн. Нет, про UX не забываем. Если продуктом неудобно пользоваться, то клиентов одной «оберткой» не удержишь. Но первое впечатление о сайте складывается из того, что пользователь увидит на главной в первые несколько секунд. Сегодня попробуем «докрутить» 5 сайтов за пару изменений.

В этой статье мы попросили наших дизайнеров улучшить UI главных страниц за 1 час. Они не переделывали логику и не трогали пользовательский опыт. Цель UI-ремонта — обновить пользовательский интерфейс и сделать его интереснее. Погнали!

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

Что не так: общее впечатление довольно скучное. Правая часть пустует, много белого фона.

Что улучшить: здесь можно поработать над типографикой. Например, нарочно взять большой кегль и шрифт с интересной геометрией. Главная страница сайта должна цеплять пользователя, особенно когда речь идет о рекламе товара.

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

Что хорошо: прослеживается структурность контента.

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

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

Что поменяли: выделили главное, добавили разнообразия однотипным элементам, увеличили заголовок.

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

Что не так: проблема в том, что страница не вызывает ощущение эксклюзивности. Здесь продается привилегия. Когда речь идет о VIP-статусе, сайт должен этому соответствовать.

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

Что поменяли: сделали цветной фон, добавили карточки с иконками.

Что хорошо: у страницы просматривается структура и иерархия, нет больших полотен текста, которые вряд ли кто-то захочет читать.

Что не так: не хватает акцентов.

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

Что поменяли: убрали картинку, перенесли контент из текстового блока.

Что хорошо: страница начинается с крупного фото и нескольких текстовых блоков.

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

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

Что поменяли: задали визуальную иерархию, разграничили смысловые блоки, добавили карточки.

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