Веб-дизайн + Сайт

🎨 День веб-дизайнера — праздник всех, кто делает интернет красивым, удобным и визуально понятным. От кнопок до цветовых схем, от шрифтов до анимаций — именно веб-дизайнеры превращают сухой код в живую цифровую среду.

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

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

👩‍💻 Поздравляем всех причастных! Пусть ваши творчества всегда будут не только красивыми, но и удобными)

👇👇Наш канал на других площадках👇👇
YouTube | RuTube | Telegram | Pikabu
=====================================

🔍Это неофициальный профессиональный праздник всех, кто помогает сайтам быть замеченными в поиске.

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

📜 Почему 28 мая? Считается, что в этот день в 2001 году началась активная фаза развития поискового продвижения в Рунете, а сама дата закрепилась в профессиональной среде как символ зарождения отечественного SEO.

👏 Поздравляем всех, кто «ведёт в топ» — вы делаете интернет чище, быстрее и доступнее!

📼 А знаете ли вы, кто придумал этот ваш интернет?)
Кто придумал ИНТЕРНЕТ?
YouTube | RuTube

👇👇Наш канал на других площадках👇👇
YouTube | RuTube | Telegram | Pikabu
=====================================

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

Привет! Я Артур Ткаченко, основатель и арт-директор веб-студии Alt Design. Мы дизайним бренды и создаем впечатляющие сайты основанные на маркетинговой аналитике. Наши проекты получают награды, а клиенты бизнес-результаты. Очень сильны в недвижке, eCommerce, производстве, сфере услуг. Умеем работать с большим бизнесом и госсектором.

А еще я веду свойTelegram канал — пишу много полезного: про бизнес, дизайн и маркетинг, развитие своей веб-студии и личный бренд. Подписывайтесь, буду рад вас видеть!

Так о чем пойдет речь

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

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

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

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

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

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

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

Непривлекательный дизайн может отталкивать посетителей, так как он не соответствует их ожиданиям и предпочтениям. Элементы интерфейса (кнопки, меню, формы и т.п.) путают, из-за чего посетитель просто не может понять куда смотреть и куда нажимать, чтобы уже наконец-то связаться с компанией.

2. Смазанное УТП: сложность в понимании преимуществ продукта или услуги.

Если вы не смогли четко сформулировать свое УТП (уникальное торговое предложение), потенциальные клиенты с высокой вероятности испытывают сложности в понимании, самого продукта или услуги и его преимуществ.

Это может произойти по нескольким причинам:

• Непонимание потребностей клиентов: компании часто сосредотачиваются на своих продуктах, забывая о потребностях клиентов. Важно делать то, что действительно нужно людям, и учитывать их путь клиента.

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

• Игнорирование барьеров решения: каждый продукт или услуга имеют реальные или предполагаемые барьеры, которые могут волновать клиентов и стать преградой при выборе продукта. Игнорирование этих препятствий может привести к ценностному предложению, которое не найдёт отклика у потенциальных клиентов.

• Неэффективная коммуникация: когда компания транслирует своё УТП через различные каналы маркетинга совершенно по разному и при переходе на сайт у пользователя возникает резонанс из-за неоправданного ожидания, негатив и следовательно выход без достижения целевого действия.

3. Проблемы с доверием, отсутствие отзывов покупателей и обзоров.

Когда пользователь переходит к вам на сайт, он всегда имеет определенный лимит недоверия, с которым мы должны грамотно поработать, например через отзывы.

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

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

• Видео-отзывы или обзоры, тут же видно живых людей и с этим не поспоришь.

• Отсылка к рейтингу вашей компании в картах: Яндекс/Google/2gis. В них есть независимая модерация и это вызывает реальное доверие.

• Скан-отзыв от компании клиента на фирменном бланке. Классно работает в b2b сегменте.

• Скриншоты с перепиской от клиентов в мессенджерах.

• Отзыв в профильных площадках - такой формат подойдет, если вы работаете как самозанятый специалист или в качестве лидогенерации применяете лишь один сервис (Avito, Профи, Маркетплейсы и т.п.).

Если не знаете как собирать отзывы, рассказывал про это в статьей

4. Неэффективный призыв к действию (CTA): использование слабых или неясных формулировок.

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

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

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

5. Плохая навигация или структура сайта: запутанная иерархия меню и категорий.

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

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

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

Искусство упрощения и сокращения вам в помощь.

6. Ошибки при компоновке контента: плохо структурированный и сложный для чтения текст.

Также часто компании размещают на сайтах огромные плотна текста о своих продуктах, которые люди просто не будут читать.

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

7. Неправильные и сложные формы: большое количество полей в формах регистрации или заказа.

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

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

Например если вы в ЦД предлагаете получить "Расчет стоимости проектирования дома", не нужно требовать ответить на 100 вопросов, которые реально важно для точного расчёта. Укажите 5-7 самых ключевых вопросов, а далее вы сможете уточнить недостающие после получения контактов.

8. Некачественная адаптация под смартфоны

Мобильней трафик наше все - во многих нишах он варьируется в диапазоне 60-95%. Учитывайте это, т.к. если что-то в ПК версии смотрится круто, а в мобилке неудобно, значит акценты расставлены неправильно.

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

9. Неправильно выбранная аудитория: несоответствие сайта интересам целевой аудитории.

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

О том как правильно и легко проанализировать целевую аудиторию , отвечаю здесь - "Анализируем целевую аудиторию бизнеса: Таблица-шаблон для анализа ваших клиентов".

10. Недостатки продукта или сервиса: отсутствие конкурентных преимуществ или важных опций.

Иногда проблема бывает даже не в самом сайте, а в том, что компании не готовы предложить выгодных и удобных условий для покупки своего продукта или сам по себе продукт никому не нужен.

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

Спасибо за внимание, если статья оказалась для вас полезна:

• Подписывайтесь на мой авторский Telegram-канал, там море полезностей о бизнесе, дизайне, маркетинге и личном бренде.

• Примеры наших работ смотрите на нашем сайте Alt Design.

🖐Привет, это Денис из NIXELE™! И сегодня вы узнаете

🔥Почему «красиво» — не значит «удобно», а также почему это можно опровергнуть...

📱Насколько в создании веб-дизайна не важен макет и почему на самом деле инструкцию придумали дебилы (или нет)?

🌭Из-за чего бутылка кетчупа это самый главный феил в дизайне, почему красивая картинка решает, а удобство и визуал – вообще не первое о чем стоит думать в веб-дизайне и наконец таки узнаем ответ на вопрос:

💯Кто он, этот ваш идеальный дизайн сайта?

Я решил начать с прогулки: свежий воздух и окружающая атмосфера натолкнули на одну интересную мысль когда я проходил мимо нового жилищного комплекса…

Смотрите, это логотип «Пятерочки» в одном из современных жк в Москве. Вроде бы обычная картина, но посмотрите внимательнее, можете открыть панораму и оглянуться вокруг🧐

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

В вывеске этой «Пятерочки» есть очень важный смысл - она не выбивается из общего стиля жк, в котором находится. При этом не теряет своей узнаваемости. Это довольно простой, но емкий смысл, который мы сегодня попробуем на вкус⬇

📌Что же получается, «Пятерочка» осознает важность визуальной эстетики?

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

А это визуализация различия вывески на разном фоне(фасаде).

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

Тогда я осознал, что проектирование не всегда самое важное и тратить на дизайн 16,5 дней точно не стоит. Визуальная составляющая зачастую имеет куда более важное значение перед планом. Получается все мои эти наброски не нужны были?

🔹Эстетика как никогда важна, она приоритетнее макета, НО ключевое — смог ли пользователь выполнить нужное ему действие. Разберемся подробнее.

🤷‍♂Создание макета сайта это действительно бесполезное занятие?

Я сразу побежал домой изучать взаимосвязь макета и эстетики в веб-дизайне и вот что нашел:

Японские эксперты Масааки Куросу и Каори Кашимура в дизайн-центре компании Hitachi попросили оценить 26 сайтов 292-ух студентов факультета дизайна и психологии. Pезультаты показали положительные результаты в сторону эстетики дизайна: визуально более стильные и красивые сайты выбирали чаще, даже когда навигация ставила в тупик.

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

Об Этом уже говорит работа Флориана Гейгля и Кристины Лерман под названием «Оценка влияния смещения кликов и вставки ссылок в Интернете на навигацию».

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

Они пришли к выводу, что такие изменения могут существенно изменить маршруты пользователей, что подчеркивает важность продуманной навигационной структуры для эффективного взаимодействия с сайтом

🔹Нужна успешная комбинация - эстетическое впечатление + легко совершенное плановое действие(визуал UI + макет UX). Вместе они подталкивают пользователя на следующий шаг и приводят к целевому действию, а также мотивируют к повторному посещению сайта.

👟Простыми словами - кроссовки должны быть стильными и соответствовать трендам, но самое главное — они должны быть удобными!

Кажется, что каким бы дискофмортым ни был макет(UX), всегда будет важна эстетика(UI) - тяга человека к идеальному невероятно велика!

🔑От сложного к простому - что такое UI/UX дизайн. Аналогия.

Представьте: вы собираете конструктор «Лего-техник», то есть механизм, из подвижных деталей(UX) и обычных блоков, создающих визуальную часть(UI).

Поворотные механизмы в виде шестеренок, троса и колес консруктора(UX) дополняет стильное сочетание желтого и черного(UI)

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

Происходит наращивание новых нейронных связей и мы пониманием, что важно правильно сочетать UI и UX составляющие дизайна.

🎏Визуал по-разному привлекает разные категории людей

Все не так однозначно, нельзя сделать «супер» и «мега» и для всех сразу «в одном флаконе».

Посмотрите, главное, что мы должны осознать из исследования Hitachi – это не то, что планирование элементов взаимодействия придумали дебилы и вообще, они тратят много времени на дизайн-макеты сайтов зря — нет! Эстетика может улучшить восприятие эргономичности даже если функциональность остается неизменной.

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

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

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

🔹Ключевое на чем нужно сосредоточиться при разработке дизайна сайта – не UI и не UX составляющие, даже не их сочетание. Самое важное – понять что именно ожидает увидеть пользователь. Потому что от его потребностей и зависит правильное сочетание UI/UX.

«Если между ожиданиями клиентов от продуктов или услуг и их реальным дизайном существует большая разница, то мы вынуждены вступать в неравный бой, пытаясь заставить клиентов пересмотреть их устоявшиеся представления»
Из книги Джона Уэлена «Дизайн пользовательского опыта»

Тесты, тестирование, тестики🔥
— Знаете почему программирование и веб-дизайн одно и то же?
— Потому что это все IT? — спросите вы
— Да, скорее всего вы правы! — Но почему?

Potomu chto никогда не знаешь кто он, этот твой пользователь))

Поэтому необходимо знать погоду сайта, дизайн которого создаешь. А осадки на ней - это user flow. Смотите, так выглядит погодный циклон на сайте:

Подобная функция в «Яндекс метрике» называется «Вебвизор». Она помогает понять куда чаще нажимают пользователи и как работает визуальная часть сайта

Именно такую карту наша команда использовала при запуске тестовой версии сайта хоккейной лиги чемпионата кхл 3на3. На тепловой карте мы с командой отчетливо видели какие элементы привлекают пользователя и работают так, как и было задумано, а какие остаются без внимания и требуют UI/UX доработки.

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

📌Как повлияло на разработку веб-дизайна

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

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

🔹Но работа над анализом аудитории это не только тестирование после создания дизайна, но и аналитика потребностей ца перед началом работы - фундамент и неотъемлемая часть создания любого продукта.

Ведь цель дизайна сайта, не только замотивировать потенциального покупателя купить авто именно здесь, но и привести к целевому действию юзера, «случайно» попавшего на ваш сайт.

📌Как вы думаете, что вам может рассказать одна бутылка кетчупа?

Вроде бы ничего особенного, только если это не бутылка Heinz. Знакомтесь — мем, посвященный именно ей:

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

Эталона идеального дизайна сайта не существует, но существует план, который может помочь.

⚡8 советов от NIXELE™ по созданию идельного дизайна сайта

• Чаще соприкасайтесь с прекрасным но не утопайте в нем - выделите на подбор примеров только час, разбейте их по группам и оттолкнитесь от чего-то одного

• Стройте здание, начиная с фундамента, но не израсходуйте весь материал — сравнивайте макет со схемой построения успешных сайтов, но не крутите один элемент сликом долго

• Проверенные решения на то и провренные, они работают — изучайте теорию и психологию, используйте нейросети и выбирайте с умом то, на чем будет посторен UI/UX дизайн

• Нет ничего страшного в том, чтобы спросить у девушки или мамы какие цветы она любит - общайтесь с целевой аудиторией напрямую, чтобы узнавать предпочтения и ожидания своих «любимчиков»

• Будьте открытее к общению — опрашивайте не только ца, но и своих друзей и знакомых. Порой люди, совсем далекие от темы, могут натолкнуть на интересные мысли

• Не бойтесь сносить здание под корень — не бойтесь начать все с начала, даже если работу полностью придется стереть

• Ставьте широкие видовые окна — делайте дизайн «прозрачным» в первую очередь понятным и доступным, и только потом красивым

• Любите себя — прощайте себе даже крупномасштабные косяки и умейте найти силы на то, чтобы вернуться к работе, даже когда много правок

  Теперь есть понимание того, что сначала необходимо проводить качественный обзор того, над чем планируешь «взять высоту».

🔹Визуал и практичность работают вместе, полагаясь на потребности пользователя. Знакомтесь: формула которую мы вывели

UI - визуал; UX - пользовательский опыт; TA - целевая аудитория; DS - дизайн

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

🙌Спасибо за прочтение данной статьи, ваша активность помогает скорейшему выходу нового материала
👉Всегда рад обратной связи — не забывайте про чек-поинты в виде опросов выше и по ссылке) Увидимся в следующей статье😉

4 апреля отмечается День веб-мастера (World Webmasters Day) – праздник всех, кто разрабатывает, поддерживает и совершенствует сайты. Веб-мастера — это программисты, дизайнеры, SEO-специалисты, администраторы и многие другие профессионалы.

Выбор даты не случаен: 4.04 ассоциируется с известной ошибкой 404 «Страница не найдена». Это своеобразный символ работы веб-мастеров, ведь их задача — следить, чтобы сайты всегда работали гладко и без сбоев, но не всегда получается)

С момента появления первых веб-страниц интернет сильно изменился. Если раньше веб-разработчик отвечал за всё — от написания кода до оформления, то сегодня сфера веб-разработки включает UX/UI-дизайн, поисковую оптимизацию, маркетинг и кибербезопасность.

🩵 Поздравляю всех веб-разработчиков. Пусть ваши сайты падают реже)

YouTube | RuTube | Telegram | Pikabu