Дизайн-ремонт №2: чиним UI, не ломая UX
Мы в Purrweb продолжаем «ремонтировать» сайты. Расклад такой: берем 5 работающих дизайнов и думаем, что можно улучшить в визуальной части. UX не трогаем — мы тратим на макет 1 час, а для качественных изменений пользовательского опыта нужно больше времени. Сегодня экспериментируем с сайтом телеканала, замахиваемся на Xbox и улучшаем сервис для отправки открыток.
Мы попросили наших дизайнеров за 1 час улучшить UI главных страниц 5 реальных сайтов. Они не переделывали логику и не трогали пользовательский опыт. Цель Дизайн-ремонта — обновить пользовательский интерфейс и сделать его визуально интереснее. Погнали!
SkySports
Что хорошо: разнообразная верстка за счет карточек статей разного размера.
Что не так: проблема в акцентах — большой и яркий хедер берет на себя слишком много внимания, а карточки статей, наоборот, недостаточно его притягивают.
Что улучшить: добавить акцент на контент, ради которого пользователи и заходят на сайт — на статьи. Для этого поработать с типографикой, сильнее выделить заголовки, чтобы они сразу заинтересовали пользователя. Разгрузить и визуально облегчить хедер. Красный цвет можно заменить на менее агрессивный, чтобы он не перетягивал слишком много внимания на себя. Использовать меньше эффектов — вместо теней выделить карточки статей цветом и обводкой.
Что изменили: уменьшили хедер, сделали акцент на контенте.
XBox
Что хорошо: первое, что видим на главной, — баннер с актуальным предложением и заметным СТА.
Что не так: не хватает контраста. Категории посередине практически дублируют контент хедера и кажутся очень крупными, спорят с текстом в верхней части страницы.
Что улучшить: выделить текст и добавить контраста между элементами, чтобы привлечь больше внимания к главному баннеру. Так как это сайт игровой консоли, можно сделать все более ярким — использовать декоративные элементы, сделать интересный СТА.
Что изменили: увеличили кнопку СТА и расставили акценты в банере, сделали визуал последовательным.
Positive Psychology
Что хорошо: за счет темного фона хорошо выделятся заголовок. Заметная кнопка СТА, указаны важные детали.
Что не так: сайт выглядит достаточно скучно из-за превалирующего серого цвета и отсутствия контрастов. В элементах не хватает выстроенной иерархии. В качестве основного цвета подобран грязный оттенок. Логотипы компаний искажены, сильно вытянуты.
Что улучшить: поработать с версткой — добавить иерархию в текст и создать более интересную, цепляющую внимание композицию. Подобрать чистый и более насыщенный праймари цвет. Не растягивать и не искажать логотипы компаний, сделать дизайн более чистым.
Что изменили: расставили акценты с помощью иерархии контента, заменили основной цвет.
WithPostCard
Что хорошо: есть крупная иллюстрация — карточка-открытка, сразу становится понятно, что можно сделать на этом сайте.
Что не так: несмотря на яркий желтый цвет, интерфейс не цепляет глаз и выглядит скучно. В тексте и элементах слева не хватает четко выстроенной иерархии в отступах.
Что улучшить: добавить интерактивности и яркости, обыграть стандартный формат «текст + изображение + СТА». Чтобы больше мотивировать пользователя использовать сервис, можно сделать больший акцент на открытку. Например, перенести интерфейс прямо в карточку, подчеркнуть легкость использования и то, что сделать все можно буквально в один клик.
Что изменили: поместили контент в иллюстрацию, сделали типографику легче.
SoundTrap
Что хорошо: крупное изображение притягивает внимание и сразу знакомит с интерфейсом приложения. Заметный блок с СТА.
Что не так: текст слева не выровнен с изображением. Градиент на фоне выглядит тускло и темно. Так как контента в целом мало, хочется сделать его крупнее и ярче, привлечь больше внимания, чтобы пользователь сразу заинтересовался.
Что улучшить: поработать с фоном, добавить контраста в цвета. Сделать кнопку СТА еще заметнее, так как это главное целевое действие на этой странице. Небольшое количество контента можно сбалансировать, добавив яркие декоративные элементы, в идеале – анимированные, чтобы страница произвела впечатление и вызвала интерес пользователя.
Что изменили: заменили иллюстрацию на декоративные элементы и выделили главное предложение.
Нет гарантии, что наш редизайн понравился бы владельцам сайтов, которые мы разобрали. Их продукты работают и привлекают пользователей, а это — главное. Но всегда можно что-то улучшить.
Очень и очень спорно, честно говоря. У вас новый артдир, что ли? Как-то менее осознанно, чем обычно, сделан этот материал.
Как будто сделан дизайн ради дизайна. Я потерялась в новых версиях. С точки зрения информативность сайты даже потеряли. Например, последний сайт. В исходнике я сразу понимаю, что речь о каком то приложении, позволяющем создавать музыку онлайн командой. В новом варианте не ясно про что сайт. Ещё и типографика путает: вместе и онлайн это разделы какие-то? начать не выглядит уже как CTA элемент.
На странице с редизайном Xbox из-за этого гигантского, да ещё и нарастающего в размере шрифта я три минуты искала кнопку 😂
На спортивном сайте пропорции самой большой картинки очень спорные — чаще всего под такие пропорции придётся специально «готовить» каждый раз изображение, убивая на это драгоценное время.
Че то вы везде айдентику потеряли
Да, айдентику не сохраняли — по нашему опыту, не все клиенты хотят ее сохранять на этапе редизайна, так что позволили себе и с ней поэкспериментировать)
Где цифры, факты? В чём смысл такой работы, если мы не можем посчитать деньги в разрезе "до/после"?
Все эти гипотезы в "что улучшить" - это всего лишь "яскозал" вашего дизайнера против аналитики Иксбокса.
В SEO разделе VC за статьи такого уровня уничтожают в комментах:)
Перекрестное нахваливание.
Редизайны странные. Есть общие нотки в их исполнении. Сайты теряют индивидуальность.
Понравились сайт с открытками и сайт для создания музыки. На спортивном сайте людей нужно было оставить. Люди это живая энергия. Для спорта, например, это очень важно. Нужно задуматься, почему люди идут на футбол. Не просто посмотреть как мяч летит от ворот к воротам. Важны эмоции, улыбки выигравших и печаль проигравших.
Спасибо за ваше мнение! Со спортивным сайтом согласимся, надо было на статьях оставить фото людей)
Сайт для создания музыки лучшая работа
"Что хорошо: крупное изображение притягивает внимание и сразу знакомит с интерфейсом приложения. Заметный блок с СТА."
И убрали и то и это в своем редизайне. Ну такое.
больше всего понравился сайт SkySports и XBox
💜
Обратите внимание, что ваш редизайн может спорить с kpi компаний. Тем более, с теми моментами, которые компания хочет донести через свой дизайн. Как по мне, все редизайны достаточно однообразные (гигантизм заголовков, неочевидные call-to-action, как отметили выше, местами потеряна связь с брендом, ключевым посылом, узнаваемостью). Так обычно не делается. Редизайн, как правило, преемственный, чтобы вчерашний пользователь сайта узнал его сегодня. Сейчас выглядит слишком дрибблово. Однако, стоит отдать должное навыкам в UI. Спасибо за статью.
CTA были слишком заметны, поэтому вы их решили сделать максимально несчитываемыми
Про CTA и айдентику вам уже "напихали" и я согласен с людьми, но попробую вам дать обратную связь с точки зрения человека, который пользовался этими сайтами.
Погнали:
1. Зарегистрирован на многих спортивных сайтах, читаю Sky, Espn, Marca и т.д. Изучите другие знаменитые спортивные сайты(на VC есть перечисление топ-50 спортивных сайтов). Если в оригинале сайта вы отметили "хедер берёт много внимания", то в своей вёрстке вообще сделали акценты исключительно на дизайне, убрав футбольные кадры и акцент с разделов. Не оценили целевую аудиторию посетителей данных сайтов. "Мимо...мимее не бывает" сказал бы один известный комментатор.
2. Сайт Xbox. Я сайтом пользуюсь и всё крайне понятно. Геймеру не нужна красота - ему нужны "кнопки" с инфой "что да как". У вас же ооочень красиво, но так спрятать нужную кнопку. Это сильно.
3. Прекрасный исходный дизайн. Лаконично и понятно. Что сделали вы - жутчайшим образом извратили ссылки на скачивание приложения, а общий дизайн напоминает результат первого знакомства с Canva, а то и с PowerPoint.
4. Про Positive Psychology, с точки зрения опыта, сказать нечего, поэтому пропустим.
5. Тренд лаконичности обошёл вас стороной. В оригинале сразу понятно с чем имеется дело, в вашем же варианте абстракция, которая никакой информации не несёт. Кнопка "Начать" практически не выделяется в общем дизайне.
Конструктив и рекомендации:
Освежите понимание того, что UI и UX всегда должны идти рука об руку. В погоне за прекрасным вы теряете функциональность. Ну и ваше прекрасное ваше... оно субъективное. Желание везде влепить абстрактные сущности и огромный текст не всегда хорошо, ведь нужно понимать ЦА посетителей того или иного сайта, изучать конкурентов, проводить a\b-тестирование.
Работы будто делались наспех.
Как хорошо, что СкайСпорт делали не вы 🤦😁
Информативности 0. Такое ощущение, что это не спортивный сайт, а сайт по интересам
Сайт с открытками стал такой нежный)
💜
Очень странно конечно, но для меня самый первый пример с трансформацией вашего сайта из простого html в страничку с красивыми стилями кажется менее выигрышным. Немного устал уже от всех этих "легких" современных дизайнов. Думаю как и в моде, дизайн сайтов скоро сделает оборот по спирали и вернется к своеобразной эстетике сайтов нулевых)
Отметили, что хорошо и убрали это у себя. В оригинале с первого взгляда видно — открытка, есть в аппстор и гуглостор, стоит столько-то. В новой — не сразу читается, что это открытка даже. Не думаю, что новый дизайн даст выше конверсию.
Когда редизайн получился хуже, чем было изначально.
Ощущение, что шаблоны сайтов бездумно прогнали через Canva. Сайт Postcard смотрится в оригинале отлично, спортивные каналы вообще имеют свою «особую» специфику, убив которую у вас получился журнальчик для зумеров, а желание везде лепить огромные шрифты с тонкими засечками — это прям боль.
Любите вы звездочки :)
Экспертно прошли, понятно, молодцы, а что по пользователям?
Комментарий недоступен
Очень!)
А у вас есть проект?