Разработка лендинга с помощью ChatGPT | Ник Бабич | Январь 2023 г.
Изображение создано с использованием midjourney.Ранее мы обсуждали, как использовать ChatGPT для создания мобильного приложения. В этой статье мы будем использовать инструмент для разработки веб-страницы. Разработаем лендинг для умных часов для спортсменов. Это руководство направлено на то, чтобы выяснить, может ли ChatGPT помочь нам с идеями для макета веб-страницы и написания UX (написание контента для отдельных разделов).
Часть 1. Определение структуры страницы с помощью ChatGPT
Часть 2. Разработка макета страницы на основе описания ChatGPT
Часть 3. Заполнение макета реальным содержимым с помощью ChatGPT
Эта статья также доступна в видеоформате:
Структура будет установить основу для содержимого и функциональности страницы. При написании подсказки мы должны сформулировать, чего мы хотим достичь, и указать всю соответствующую контекстуальную информацию, чтобы помочь ChatGPT лучше понять наши намерения.
В данном случае мы хотим заявить, что наш продукт предназначен именно для спортсменов.
На основе информации, предоставленной ChatGPT, нам необходимо спроектировать следующие разделы:
- Раздел Hero. В разделе героя будет заголовок, краткое описание, красивые изображения и кнопки призыва к действию.
- Основные характеристики. Раздел, в котором будут выделены ключевые особенности продукта.
- Технические характеристики. Потенциальным покупателям будет интересно узнать технические характеристики устройства, такие как время автономной работы, встроенные датчики и т. д.
- Отзывы. Чтобы сделать продукт более надежным, нам нужно добавить раздел с цитатами реальных клиентов.
- Поддержка и гарантия. Информация о гарантии и о том, как связаться со службой поддержки клиентов. Я думаю, что стоит включить эту информацию в раздел часто задаваемых вопросов.
В структуре, предложенной ChatGPT, отсутствуют две вещи:
- Раздел действий в конце страницы.
Как только посетитель дойдет до конца страницы, он должен увидеть раздел, который предложит ему действовать. В этот момент они будут иметь всю необходимую информацию и смогут принимать более обоснованные решения. - Нижний колонтитул. Нижний колонтитул страницы в этом случае должен быть довольно минималистичным и содержать минимум информации. Стоит добавить сообщение об авторских правах (обратите внимание, что это должен быть текущий год) и ссылки на учетные записи в социальных сетях.
Теперь давайте воспользуемся описанием структуры, сгенерированной ChatGPT, и превратим каждый блок в дизайн. Мы создадим очень обычную страницу, которая некоторым из вас может показаться скучной, но у таких страниц есть существенное преимущество — они знакомы большинству пользователей.
Чтобы ускорить процесс проектирования, я буду использовать библиотеку Relume, которая доступна как для Figma, так и для Webflow:
Раздел Hero
Раздел Hero — это первое, что видят посетители, когда попадают на страницу.
Эта страница должна создавать контекст для пользователя. Пользователи должны иметь возможность рассказать, о чем этот веб-сайт, посмотрев на главный раздел. В нашем случае главный раздел содержит заголовок и описание продукта, а также две кнопки призыва к действию и изображения.
Ключевые характеристики
Для этого раздела мы будем использовать зигзагообразную компоновку. Зигзагообразная компоновка состоит из пар изображений и текстовых блоков. Когда посетители просматривают этот раздел, они видят либо блок изображения-текста, либо блок текста-изображения. Это простой, но очень эффективный макет, потому что он создает визуальный интерес и удерживает пользователей от прокрутки.
Раздел основных возможностей.Технические характеристики
В технической спецификации должны быть указаны 3 или 4 основные характеристики, которыми должна обладать данная конструкция. Обратите внимание, что когда мы описываем технические характеристики, мы должны говорить на одном языке с нашей целевой аудиторией, поэтому, когда мы говорим о времени автономной работы, мы не должны говорить «емкость: 29».
6 мАч», потому что большинству пользователей это ничего не говорит, а лучше сказать «2 дня без подзарядки».
Отзывы
Отзывы должны быть цитатами реальных клиентов. На этапе проектирования мы можем использовать примеры отзывов.
Раздел отзывов.Раздел часто задаваемых вопросов
В разделе часто задаваемых вопросов вы найдете ответы на наиболее распространенные вопросы потенциальных клиентов об этом продукте.
Раздел часто задаваемых вопросов.Раздел действий
Раздел действий должен содержать текст, который будет мотивировать посетителей к действию, и предоставить соответствующие кнопки призыва к действию.
Секция действия.Нижний колонтитул
Нижний колонтитул будет содержать относительно минимальное количество деталей.
Нижний колонтитул.Вот как будет выглядеть наша веб-страница в динамике:
Пролистывание веб-страницы. Как видите, мы используем текст-заполнитель для страницы.
Текст-заполнитель полезен на ранних этапах процесса разработки продукта, поскольку он позволяет оценить визуальную иерархию контента и функциональных элементов. Но теперь, когда у нас есть четкая структура, пришло время добавить реальный контент.
Раздел героя
Поскольку наш раздел героя имеет заголовок и описание, нам нужно попросить ChatGPT написать его для нас.
Попросите ChatGPT написать заголовок и краткое изложение основных преимуществ умных часов.ChatGPT создал очень хороший заголовок, но резюме слишком длинное. Помните, что:
Пользователи не читают; они сканируют. Нам нужно оптимизировать наш дизайн для быстрого сканирования.
В описании лучше указать максимум пару предложений, чтобы мы использовали только первое предложение из вывода, сгенерированного ChatGPT. Кроме того, мы также изменим метки по умолчанию для кнопок призыва к действию на «Купить сейчас» и «Посетить магазины».
Обратите внимание, что ChatGPT — это инструмент для преобразования текста в текст, поэтому он не может генерировать изображения за вас.
Если вы хотите создавать изображения ИИ, вам следует использовать такие инструменты, как Dalle-2 или midjourney.
Основные функции
Ключевые функции влияют на решения о покупке. Очень важно определить набор критических функций и предоставить краткое и точное описание каждой функции. Давайте посмотрим, как ChatGPT может нам в этом помочь.
Просьба ChatGPT описать каждую функцию.Как видите, ChatGPT определяет три ключевые функции и описывает каждую из них. Хотя описания в порядке, они немного длинны, так похожи на раздел героев; нам нужно оставить только одно предложение для каждого описания.
Раздел ключевых характеристик заполнен актуальными данными.Технические характеристики
Технический раздел должен содержать краткую информацию об оборудовании, которое может предложить это устройство. Язык, который мы используем для этого раздела, должен быть доступен для различных групп пользователей, в том числе для тех, кто технически не подкован.
Давайте посмотрим, что ChatGPT может сделать для нас.
Как видите, ChatGPT не только создал солидный список технических деталей, но и описал каждую деталь простым языком, понятным каждому.
Раздел технических деталей заполнен актуальными данными.Отзывы
Отзывы всегда должны собираться у реальных пользователей. Вы всегда должны включать цитаты ваших реальных клиентов. На этапе проектирования вы можете использовать такие инструменты, как ChatGPT, для создания отзывов, но не забудьте заменить их реальными цитатами.
Попросите ChatGPT написать отзывы.ChatGPT имеет тенденцию писать длинные тексты, но вы можете использовать простой трюк для оптимизации вывода, генерируемого ChatGPT. Просто задайте ChatGPT дополнительный вопрос «сделайте отзывы короче».
Просьба ChatGPT оптимизировать отзывы.Как видите, ChatGPT оптимизирует вывод.
Раздел отзывов.Раздел FAQ (Гарантийный пункт)
Пришло время заполнить раздел FAQ.
Для нашего примера мы рассмотрим только первый пункт из раздела часто задаваемых вопросов: обслуживание и гарантия.
ChatGPT сгенерировал очень ценный текст, который можно использовать для раздела часто задаваемых вопросов.
Наполнение раздела FAQ (первый пункт) актуальным текстом.Раздел Act-on
Мы почти закончили создание нашей веб-страницы. Последнее, что нам нужно сделать, это заполнить раздел действия. Мы можем повторно использовать часть текста, который у нас был в разделе героя (это поможет нам создать ощущение непрерывности). Но для этого раздела я хочу использовать очень действенные метки для кнопок призыва к действию.
Просьба ChatGPT предложить текстовые метки для кнопок призыва к действию. Ярлыки «Получите свое сейчас» и «Раскройте свой потенциал» очень важны для основной кнопки призыва к действию. Что касается дополнительной кнопки, я думаю, что «Присоединиться к сообществу» — очень интересный вариант, потому что он заставляет нас задуматься о создании сообщества для наших пользователей.
Пришло время проверить, как все блоки будут работать вместе на этой странице.
Окончательный дизайн лендинга.Как видите, ChatGPT удалось ускорить наш процесс проектирования. Он не только разделяет структуру страницы, но и помогает нам наполнить ее актуальным содержанием. Инструмент имеет тенденцию писать более длинный текст, который часто требует оптимизации. Но в целом ChatGPT может значительно повысить эффективность процесса веб-дизайна.
Первоначально опубликовано на babich.biz
Следуйте за мной на Twitter | Инстаграм | YouTube
Как создавать конвертируемые страницы (с примерами)
Дизайн веб-сайта — это мощный инструмент для привлечения потенциальных клиентов и повышения коэффициента конверсии. В то время как домашняя страница веб-сайта в первую очередь предназначена для представления компании и ее продуктов или услуг, целевая страница создается с единственной целью: конверсия.
Что такое целевая страница?
Целевая страница похожа на веб-сайт — это веб-страница с собственным URL-адресом, на который могут попасть посетители. Но в то время как цель веб-сайта — предоставить общую информацию и побудить посетителей изучить остальную часть сайта, целевая страница имеет только одну цель: превратить посетителей в потенциальных клиентов или клиентов.
Например, если вы проводите кампанию по электронной почте, продвигающую новую электронную книгу, вы должны отправить своих подписчиков на целевую страницу с формой, где они могут ввести свою информацию в обмен на электронную книгу.
Или, если вы проводите кампанию Google Ads по продаже футболок, вы должны отправлять клики на целевую страницу с фотографиями товаров, описаниями и возможностью купить футболку.
В то время как веб-сайт предназначен для предоставления широкого обзора того, чем занимается компания, дизайн целевой страницы сфокусирован на одном явном преимуществе. Вот почему так важно оптимизировать дизайн вашего веб-сайта для повышения конверсии — от этого зависит успех ваших маркетинговых кампаний.
Целевая страница может принимать разные формы:
- Прокручиваемая страница продаж, которая знакомит посетителей с конкретным вариантом использования вашего продукта
- Форма генерации потенциальных клиентов, которая собирает информацию в обмен на предложение
- Страница перехода по клику, которая побуждает посетителей изучить больше вашего веб-сайта
- Страница продукта, предлагающая пользователю совершить покупку
Тип дизайна веб-сайта, который вы создадите, будет зависеть от ваших целей. Но независимо от того, какой тип страницы вы создаете, есть определенные визуальные элементы, общие для эффективного дизайна веб-сайта.
Как создать идеальную целевую страницу
Существует несколько способов создать профессиональный дизайн целевой страницы. Хорошей новостью является то, что вам не нужен опыт программирования или степень в области веб-дизайна, чтобы создать его.
- Шаблоны веб-дизайна: Шаблоны веб-дизайна позволяют дизайнерам легко создавать целевые страницы с предварительно разработанными основами.
Все, что вам нужно сделать, это добавить свой собственный текст, изображения и брендинг. - Бесплатные конструкторы целевых страниц: Бесплатный конструктор веб-сайтов, такой как Webflow или Carrd, помогает веб-дизайнерам создавать оптимизированный для SEO веб-дизайн с помощью интерфейса перетаскивания.
- Платные конструкторы веб-сайтов: Платный конструктор целевых страниц, такой как Shopify или Unbounce, предлагает больше функций и гибкость дизайна, чем бесплатный конструктор. Кроме того, вы получите доступ к профессиональным шаблонам целевых страниц, предназначенным для конвертации.
- Индивидуальный веб-дизайн: Используя такие инструменты, как Figma, вы можете управлять типографскими деталями, пустым пространством и общей композицией ваших целевых страниц.
- Кодирование: Если вы знакомы с основами дизайна, вы можете создать целевую страницу, написав код самостоятельно или обратившись к веб-разработчику.
Эта опция дает вам полный контроль над функциональностью вашего UX и веб-дизайна.
Примеры целевых страниц
Давайте рассмотрим несколько примеров целевых страниц и выясним, почему каждая целевая страница работает.
1. Verkada: прокручиваемая страница продукта
Verkada — компания по производству камер видеонаблюдения, которая продает их предприятиям. Их основное внимание уделяется корпоративным компаниям, поэтому их дизайн отражает это.
Эта страница эффективна, потому что она ориентирована на конкретный вариант использования и помогает пользователю ознакомиться со всеми функциями продукта. В данном случае он демонстрирует, как системы Verkada можно использовать для мониторинга и управления объектами.
За заголовком и подзаголовком целевой страницы зацикленный видеомонтаж показывает продукт в действии. Когда пользователь прокручивает, появляется хронологический список функций с соответствующими изображениями и описаниями.
Каждая функция не сразу отображается. Пользователь может щелкнуть по каждому из них, чтобы узнать больше.
В веб-дизайне Verkada достаточное пустое пространство не позволяет тексту казаться перегруженным, а использование видео и изображений разбивает текст.
Адаптивный дизайн позволяет пользователям узнавать о продуктах в удобном для них темпе. Для такого надежного продукта минимализм является ключом к тому, чтобы зрители поняли все на странице.
Что еще интересно в дизайне этой веб-страницы, так это то, что она выглядит как демонстрация продукта, что вызывает срочность у посетителей сайта. Давая им представление о том, что делает продукт, Verkada побуждает посетителей действовать и узнавать больше о своей системе безопасности.
Чему нас учит Verkada:
Динамические видео и изображения могут продемонстрировать ваш продукт. Графический дизайн — это больше, чем использование стоковых фотографий и шаблонов целевых страниц.
Показывая свой продукт в действии, вы можете дать зрителям представление о том, как он работает и что он может для них сделать.
Используйте хронологию, чтобы рассказать историю. Хорошая целевая страница знакомит пользователей с конкретным вариантом использования таким образом, который имеет смысл. Verkada начинает с обзора продукта, а затем подробно изучает каждую функцию.
Пробелы упрощают сложное. При представлении большого количества информации пустое пространство может разбить ее и помочь пользователям увидеть иерархию.
2. Нил Патель: форма привлечения потенциальных клиентов
Нил Патель — маркетолог мирового класса и основатель нескольких успешных компаний, включая Crazy Egg, KISSmetrics и Hello Bar. Он также востребованный спикер, консультант и педагог.
Этот лид-магнит для его блога (NeilPatel.com) удивительно прост — он состоит из нескольких слов, окна электронной почты и кнопки CTA. И тем не менее, это одна из самых эффективных страниц для лидогенерации в Интернете.
Когда пользователи посещают блог Нила Пателя, им может быть интересно прочитать его последние статьи. Но с этой целевой страницей им также предоставляется возможность узнать больше о своем собственном веб-сайте и о том, как они могут его улучшить.
После нажатия пользователям предлагается обменяться адресами электронной почты и заказать звонок. В обмен на их время Нил обещает бесплатный анализ сайта.
Перед этим ориентированным на выгоду призывом к действию невозможно устоять, потому что обычно он стоит сотни долларов.
Одно из ключевых отличий, которое делает дизайн веб-сайта Нила Пателя оптимизированным для конверсии, — это его сообщения — они персонализированы и соответствуют бренду. Его веб-сайт учитывает местоположение пользователя, и каждый выделенный элемент соответствует оранжево-белой цветовой палитре.
Чему учит нас Нил Патель:
Основы дизайна. Для целевой страницы лидогенерации подойдут основы.
На базовом уровне все, что ему нужно, — это заголовок, форма и кнопки CTA.
Подчеркните ваше ценностное предложение. Будь то бесплатная пробная версия, экономия средств или добавленная стоимость, которая обычно стоит денег, веб-дизайнеры могут повысить шансы на подписку, сделав предложение в центре внимания.
Персонализируйте свою страницу. Вы можете вывести основы дизайна на новый уровень, создав веб-дизайн, который понравится вашим клиентам.
3. Zillow: страница по клику
Zillow — один из самых популярных веб-сайтов по недвижимости, и его платформа отражает это. Когда посетители попадают на главную целевую страницу Zillow, они не видят подробного контента, объясняющего услуги компании.
Вместо этого они видят один простой призыв к действию внутри окна поиска: «Введите адрес, район, город или почтовый индекс».
Это страница перехода по клику. Ее единственная цель — побудить посетителей ответить на призыв к действию и пройти через воронку конверсии.
А в случае с Zillow следующая страница — это страница результатов поиска, где пользователи могут найти дома для продажи или аренды в нужном им месте.
Под строкой поиска есть еще три опции, на которые пользователи могут нажать: «Купить дом», «Финансировать дом» или «Снять дом».
Каждая кнопка CTA перенаправляет посетителей на соответствующую веб-страницу. Например, нажав «Купить дом», пользователи перейдут на страницу результатов поиска, где они смогут увидеть только дома, выставленные на продажу.
Чему нас учит Zillow:
Целевые страницы с переходом по клику не требуют сложного дизайна веб-сайта. Все, что им нужно, — это кнопка CTA и способ сегментировать ваших потенциальных клиентов.
Дайте продукт в руки пользователю. Этот дизайн целевой страницы работает, потому что его функция поиска дает пользователю всю мощь. Они могут решить, что они хотят видеть и куда они хотят пойти дальше.
Сделайте свой дизайн ориентированным на действие.
Панель навигации Zillow хорошо видна и проста в использовании. Кнопки призыва к действию понятны и лаконичны. Нет никакой путаницы в том, что произойдет, когда вы нажмете на CTA.
4. BOOM: интернет-магазин
BOOM by Cindy Joseph — магазин товаров для здоровья и хорошего самочувствия. Дизайн целевой страницы органического увлажняющего крема для лица и глаз бренда является одним из самых эффективных.
Как и большинство страниц продуктов, дизайн целевой страницы BOOM включает фотографию продукта слева, кликабельные фотографии под ним, заголовок, копию и призыв к действию. Но что делает эту страницу эффективной, так это использование социального доказательства.
«Единственное увлажняющее средство, которое я когда-либо пробовала, действует весь день! Любить это!» читает отзыв крупным, жирным шрифтом. В некоторых случаях социальное доказательство размещается по гиперссылке или размещается внизу страницы. Но в дизайне веб-сайта BOOM привлекающий внимание отзыв находится прямо вверху страницы.
BOOM использует пространство под коробкой продукта для отображения функций в традиционном формате дизайна целевой страницы. Небольшие фрагменты текста, ориентированные на пользу, чередуются с соответствующими отзывами.
Чему нас учит BOOM:
Социальное доказательство продает. Выделите положительный опыт клиентов на видном месте в своем веб-дизайне.
Используйте фото и видео клиентов. Фотографии реальных людей, использующих ваш продукт, добавляют уровень достоверности, который редко встречается в мире электронной коммерции.
Особенности продукта имеют значение. А превращение их в преимущества повысит коэффициент конверсии.
5. Wag!: Регистрационная форма
Wag! — это приложение для выгула собак и ухода за домашними животными, которое позволяет владельцам собак планировать прогулки, отслеживать активность своей собаки и находить сиделок, пока они отсутствуют.
Форма регистрации компании не может быть более простой.
Введите свое имя, отчество и фамилию, адрес электронной почты и номер телефона, чтобы начать.
Сине-зеленая цветовая схема фона прямо контрастирует с белыми полями формы и текстовым содержимым, что позволяет ему выделяться на экране.
И QR-код в правом верхнем углу — приятный штрих. Это позволяет потенциальным опекунам сканировать код и загружать приложение без помощи рук.
Что за виляние! учит нас:
Упростите регистрацию в вашем сервисе. Чем проще процесс регистрации, тем больше у вас шансов достичь цели конверсии.
Приоритет контрастности. Баланс между полями формы и текстом облегчает чтение для тех, кто их заполняет.
Сделайте работу пользователя максимально удобной. UX-дизайнеры должны включать QR-коды, кнопки и визуальные подсказки, чтобы пользователям было легко перемещаться по сайту.
6. ClickUp: простая страница продукта
Из всех примеров дизайна целевой страницы ClickUp занимает первое место.
ClickUp — это программное обеспечение для управления проектами, которое помогает командам повысить свою производительность. Это ни в коем случае не «простой» продукт, но дизайн его домашней страницы должен стать путеводной звездой для дизайна взаимодействия с пользователем.
Перед прокруткой пользователи видят главное изображение продукта. Рядом с ним есть заголовок, подзаголовок, адрес электронной почты и напоминание о том, что это бесплатно навсегда. Копия короткая и точная, оставляя достаточно места для графического дизайна и призыва к действию.
Особенности не только выделяются как преимущества — они демонстрируются. Вместо простого графического дизайна ClickUp демонстрирует собственный продукт. В мире, где у пользователей есть ограниченное время для бронирования звонков и использования бесплатных пробных версий, ключевую роль играет прозрачность домашних страниц веб-сайтов.
После демонстрации посетителям веб-сайта десятков надежных функций ClickUp отображает отзыв и логотип в удобном для сканирования формате.
Большинство продуктов и услуг менее сложны, чем ClickUp, но макет веб-сайта компании, визуальная иерархия, достаточно пустого пространства и полезная анимация — это то, к чему должны стремиться все дизайнеры. И с этими основами дизайнеры могут легко увеличивать или уменьшать масштаб.
Чему нас учит ClickUp:
Переходим к делу. У вас есть около восьми секунд, чтобы привлечь и удержать внимание посетителя. ClickUp знает об этом, поэтому они размещают все, что нужно их аудитории, в верхней части целевой страницы веб-сайта.
Покажите свой продукт в действии. Простая анимация и дизайн визуально привлекательны, но они не являются сильной поддержкой вашего CTA.
Используйте пробелы. Слишком много беспорядка ошеломляет пользователей и мешает им найти то, что они ищут.
Организуйте иерархию дизайна в соответствии с функциями. Таким образом, пользователи могут легко найти нужную им информацию.
Основы дизайна целевой страницы
Теперь, когда мы рассмотрели несколько примеров целевой страницы, давайте рассмотрим некоторые основы дизайна веб-сайта:
- Привлекательная эстетика: Макет, цветовая схема и веб-дизайн должны вызывать положительные эмоции у ваших посетителей.
Для этого выберите простой шрифт и приятные для глаз цвета. Избегайте узоров, занятого фона и всего, что визуально выглядит «шумным». - Чем меньше, тем лучше: В процессе проектирования UX важен каждый элемент. Избегайте чрезмерных ссылок, полей формы или изображений. Цель состоит в том, чтобы сделать пользовательский опыт максимально плавным и беспроблемным.
- Направлять пользователей с намерением выхода: Применяйте кликабельные активы и элементы дизайна, чтобы направлять пользователей в процессе преобразования. Например, вы можете использовать индикатор выполнения, чтобы показать пользователям, сколько шагов осталось до завершения покупки.
- Перемещение пользователей между устройствами: Если пользователи начинают свое путешествие на одном устройстве, сделайте так, чтобы им было легко продолжить на другом. Прекрасными примерами являются добавление социальных кнопок для подключения к социальным сетям или QR-кодов для загрузки мобильного приложения.
- Визуальная иерархия: Для веб-дизайнеров наиболее важные элементы дизайна должны быть в верхней части страницы. Пользователи должны иметь возможность видеть их без прокрутки.
- Призыв к действию: Независимо от цели конверсии любой веб-дизайн нуждается в сильном призыве к действию. Проявите творческий подход и избегайте общей кнопки «Отправить».
- A/B-тестирование: Всегда тестируйте различные версии вашей целевой страницы, используя такую платформу, как Hotjar. Попробуйте разные заголовки, изображения, призывы к действию и макеты, чтобы увидеть, что дает наилучшие результаты.
Используя эти советы по дизайну целевой страницы, вы сможете оптимизировать визуальный дизайн, чтобы создать идеальную целевую страницу.
Научитесь создавать привлекательные целевые страницы с помощью Skillcrush
Все примеры целевых страниц, которые мы вам показали, основаны на одних и тех же основах дизайна. Но разработка удобной целевой страницы веб-сайта — сложный навык.
