Функционал сайта описание пример: Как разработать функционал сайта | SendPulse Blog

Содержание

Как разработать функционал сайта | SendPulse Blog

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

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

Почему важно продумать функционал сайта до разработки дизайна

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

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

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

Разработав сразу функционал сайта, вы и ваша команда не потратите время на работу, которая окажется не нужной. Например, вы «задизайнили» кабинет пользователя, но потом решили использовать просто кнопку «Купить в один клик».

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

Этапы разработки функционала сайта

В создании функционала сайта советуем опираться на принцип разработки сайта, предложенный UX экспертом Джессом Гарреттом.

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

Джесс Гарретт предлагает разделить работу над функциональным наполнением сайта на пять уровней:

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

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

Что нужно сделать перед разработкой функционала сайта

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

Какие задачи будет решать сайт

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

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

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

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

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

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

Анализ посетителей сайта

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

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

Понять и отсегментировать целевую аудиторию перед разработкой функционала сайта помогает метод 5W. Его придумал и детально описал в своей книге «Добавленная ценность: алхимия роста с помощью бренда» Марк Шеррингтон. Для сегментации целевой аудитории он предлагает ответить на пять вопросов:

  • Что (What) вы предлагаете на сайте? Это ваши товары или услуги.
  • Кто (Who)
    покупает товар или услугу? Важен пол, возраст, геоположение, доход, интересы.
  • Почему (Why) эти люди совершат покупку, что ими движет? Их потребности, ожидания и задачи, которые они хотят решить с вашей помощью.
  • Когда (When) и при каких обстоятельствах эти люди совершают покупку? Реальные ситуации и условия, при которых они решают воспользоваться вашими услугами.
  • Где (Where) и в какой точке взаимодействия с сайтом люди принимают окончательное решение о покупке или другом целевом действии?

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

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

Посмотрим на пример описания нескольких портретов целевой аудитории для сайта косметического салона:

Пример описание портретов целевой аудитории

Что можно использовать для сбора информации, которая поможет составить портреты ЦА:

  • Сервисы «Яндекс.Метрика» и Google Analytics. Они помогают собирать сведения о посетителях сайта: что они ищут, какой их возраст, пол, местоположение и так далее.
  • Опросы в социальных сетях. Помогают понять, какие товары более интересны вашим потенциальным клиентам, как они отреагируют на нововведения.
  • Email рассылки. В письме вы можете обратиться к тем, кто уже заказывал, и попросить их рассказать о своем опыте. Также в рассылку можно добавить приглашение пройти опрос, который поможет понять особенности ЦА: ее сферу занятости, предпочтения по способу оформления или доставки заказов.
  • Отзывы на сайте конкурентов. За этими отзывами стоят люди, которые уже купили товар или собирались, но по каким-то причине не сделали это: с ними не связались вовремя, товара не было в наличии, не понравился стиль общения менеджеров. Анализируя эти отзывы, особенно негативные, вы можете лучше понимать потребности и ожидания вашей ЦА, а также не совершать ошибки конкурентов.

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

  • Что клиент ищет на сайте? Возможно, он хочет посмотреть на товар со всех сторон, для этого пригодилась бы функция 360°.
  • На что обращает внимание, выбирая между вами и конкурентами? Допустим, у конкурента нет формы обратной связи, а из-за перегруженных линий невозможно дозвониться менеджеру. Тогда наличие функции call back будет дополнительным аргументом в вашу пользу. Другими аргументами могут стать детальные описания товаров в интернет-магазине, видеодемонстрация гаджета или детальная карта проезда.
  • В какой последовательности посетитель выполняет действия? Многое зависит от того, как потенциальный клиент оказался на сайте и с какой страницы начал знакомство с вашей компанией. Если он увидел рекламу в поисковой выдаче и пришел на целевую страницу, вначале он изучит предложение, а затем захочет убедиться в том, что вы порядочный и ответственный продавец. Если посетитель уже знает вас с положительной стороны из других источников, его будут больше интересовать детали — он заглянет на страницу доставки узнать, подходят ли ему ваши варианты, и только затем приступит к заказу товара или услуги. А на всем этом пути может стоять множество функций сайта, которые будут помогать или наоборот препятствовать целевому действию.

Какие проблемы вашего бизнеса решит сайт

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

На сайте официального дилера KIA можно заказать обратный звонок и заранее выбрать тему обращения

А ответы на самые частые вопросы разместить в блоке FAQ.

В сервисе SmartAvia подготовили ответы на вопросы, которые интересуют потенциальных клиентов

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

Панорама ЖК «Крылья» помогает оценить расположение дома, не выезжая на объект

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

На главной странице производителя кухонной бытовой техники Ariete есть детальные видеообзоры новинок

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

Что заставит пользователей посещать ваш сайт

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

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

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

«Галерея улыбок» на сайте St. Paul Dental Center наглядно показывает результаты работы стоматологов

Анализ функционала сайта конкурентов

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

Но сначала конкурентов нужно найти:

  • опросите ваших сотрудников, особенно менеджеров по продажам;
  • изучите каталоги и рейтинги по вашей теме;
  • найдите через поиск в Google и «Яндекс»;
  • проанализируйте с помощью SEО сервисов;
  • воспользуйтесь специализированными онлайн-сервисами для поиска конкурентов: Serpstat, SimilarWeb, Google Alerts.

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

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

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

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

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

На главной и некоторых других целевых страницах магазина «Мистер Дом» используется не привычная кнопка «Купить», а кнопка «Подробнее». В результате посетитель вынужден выполнять лишнее действие. Вначале ему нужно перейти на страницу товара по кнопке «Подробнее», и только потом он может добавить его в «Корзину».

Пример неудачной реализации функционала покупки

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

Разработка функционала сайта

Приступаем к разработке функционала сайта на основе информации, которую собрали на предыдущем этапе. У вас уже есть цели и задачи сайта, портреты ЦА, то, что вы узнали о функционале конкурентных сайтов и так далее.

Продумайте структуру

Представьте структуру сайта в виде дерева. Основные страницы — крупные ветки, дополнительные — ответвления от них. «Главная» будет стволом дерева, а крупными ветками — разделы «О компании», «Услуги», «Контакты», «Блог». Разделы внутри основных страниц изображаются ответвлениями.

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

Пример древовидной структуры сайта

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

Если делаете структуру интернет-магазина, проработайте каталог:

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

«М.Видео» объединила в одну категорию всю теле- и аудиотехнику. Телевизоры разбиты на несколько категорий, отдельно выделены новинки. Основные фильтры — по диагонали и бренду, ведь это главные критерии, на которые обращают внимание покупатели.

Фрагмент каталога из интернет-магазина «М.Видео»

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

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

Хлебные крошки на сайте «Ростехнадзора»: «Главная» > «Деятельность» > «Госзакупки»

HTML карта — каталог основных разделов сайта, размещенных по иерархии, то есть это оглавления сайта. HTML карта помогает пользователю найти нужную страницу, раздел, категорию товара.

Фрагмент карты сайта на торговой площадке ebay.com

XML карта содержит информацию для поисковых систем. Это перечень всех страниц сайта, которые необходимо проиндексировать поисковым роботам. Одни CMS по умолчанию генерируют, а затем автоматически обновляют XML карту без участия человека, другие делают это только после установки специального плагина. Также вы можете воспользоваться сторонними сервисами. Например, Screaming Frog просканирует страницы сайта и сгенерирует XML карту бесплатно, если на сайте менее 300 страниц.

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

Поисковые роботы будут дольше индексировать сайт и дадут страницам с большим уровнем вложенности низкий приоритет. А это повлияет на выдачу. Три — оптимальное количество уровней вложенности.

Пример интернет-магазина с четырьмя уровнями вложенности

Подберите компоненты для каждой страницы

Зайдите на все основные ветки воображаемого дерева и продумайте их наполнение. То же самое сделайте для каждой группы страниц. Начните с «Главной»: вынесите на страницу все самое важное и интересное потенциальным клиентам. Дальше двигайтесь к меньшим «веткам».

На сайте компании, которая доставляет питьевую воду, часто есть страница «Кулеры для воды». Все страницы, которые принадлежат этой ветке — «Кулеры настольные», «Кулеры напольные» и «Держатели для стаканов», — оформляют в едином стиле. Например, можно сделать так: перечислить представленные в продаже модели, добавить кнопку сортировки, в текстовом блоке описать особенности выбора или преимущества товаров этой категории.

Далее подготовьте эскиз с функциональными блоками целевых страниц сайта. Используйте сервисы для разработки интерфейсов и прототипирования, например, Axure или Figma. В интернет-магазине на странице раздела-категории могут располагаться такие элементы:

  • Верхняя часть страницы: блок авторизации, заказ обратного звонка, выбор города, доступ к «Корзине».
  • Левая колонка: фильтр по бренду, типу товара, цене, другим характеристикам.
  • Основная область: блок с новинками, блок с товарами с возможностью сортировки, рекомендуемые товары в этой же категории, последние отзывы о товарах, описание особенностей и преимуществ продукции.
  • Нижняя часть страницы: форма подписки на рассылку о новинках и акционных товарах, контакты, ссылки на страницы в социальных сетях.

Чем важнее информация, тем выше ее размещают. В основном пользователи любят скроллить ниже пары окон.

Думайте о владельцах смартфонов и планшетов: им тоже должно быть удобно и они сразу должны увидеть то, за чем пришли пришли на сайт. По подсчетам Blue Corona, 40 % пользователей закроют сайт, если он не адаптирован под их мобильное устройство.

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

Показатель отказов в «Яндекс.Метрика» демонстрирует, сколько процентов пользователей провели на сайте менее 15 секунд. Хотя у этой метрики нет универсального порогового значения, большое количество отказов говорит о том, что ваш сайт не соответствует ожиданиям посетителей. Причиной может быть неудобная навигация, отсутствие нужной информации или тех функций, ради которых пользователь зашел на сайт. Эксперты по цифровому маркетингу из агентства Blue Corona утверждают, что у вас есть всего 10 секунд, чтобы задержать внимание посетителя и показать, что вы решите его проблему.

Пример хорошо продуманного функционала сайта

HeadHunter (HH) — крупнейший в России сайт для размещения вакансий и поиска работы. Сюда приходят, чтобы найти подходящие вакансии, разместить резюме или предложения о работе. Посмотрим, реализован функционал этого сайта.

Ключевым элементом на главной странице стало поле для поиска работы — то, зачем пользователи приходят на HH. Если они настроены искать работу, собирая отклики на резюме, то могут воспользоваться кнопкой «Создать резюме».

А те, кому удобнее посещать сайт с мобильного устройства, могут сразу скачать приложение на свои смартфоны под iOS и Android. Разработчики не перегружали интерфейс лишними деталями, а использовали лишь те элементы, которые действительно полезны соискателям.

Главная страница HH

Форма входа в личный кабинет позволяет авторизоваться новым пользователям с помощью любой из семи популярных в России социальных сетей.

Вход в личный кабинет на сайте HH

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

Форма регистрации нового соискателя на сайте HH

Если пользователю удобнее работать с сайтом на мобильном устройстве, можно запросить ссылку на скачивание приложения из Google Play и App Store. Владельцы сайта попутно решают еще одну задачу — получают соглашение на отправку SMS оповещений. Соответствующий блок можно увидеть, прокрутив главную страницу на несколько окон вниз.

Форма отправки ссылки на мобильное приложение для HH

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

Форма связи с онлайн-консультантом на сайте HH

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

Блок с новейшими вакансиями на сайте HH

Для тех, кто хочет делегировать составление резюме специалистам, есть платная услуга — «Готовое резюме», ссылка на которую доступна в нижней части главной страницы HH. Здесь пользователю предлагают три варианта взаимодействия, которые отличаются перечнем услуг и стоимостью. Можно увидеть, что входит в тарифный план, и сразу оформить заказ.

Форма заказа резюме от экспертов на сайте HH

Что стоит запомнить

  • Принимайтесь за разработку функционала до того, как начнете составлять техническое задание специалисту и продумывать дизайн. Это сэкономит время и убережет от ошибок.
  • Следуйте стратегии, когда будете продумывать функциональные блоки.
  • Определитесь с бизнес-задачами, которые будет решать сайт. От этого зависит его структура и наполнение.
  • Опишите портрет вашей целевой аудитории. Используйте метод 5W, предложенный Марком Шеррингтоном, чтобы узнать, кто ваши потенциальные клиенты, сколько им лет, где живут, чем интересуются, сколько зарабатывают. В этом помогут сервисы «Яндекс.Метрика» и Google Analytics, опросы в соцсетях, email рассылки.
  • Постоянно держите в поле зрения проблемы, которые вы и ваши потенциальные клиенты будете решать с помощью сайта.
  • «Подсмотрите» сайты у конкурентов. Возьмите самое лучшее и постарайтесь не повторить их ошибки.
  • Представьте структуру будущего сайта в виде дерева. Продумайте размещение целевых страниц так, чтобы не нарушить логику «от общего к частному». Опишите, какие функциональные элементы будут на каждой странице.

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

[Всего: 3   Средний:  5/5]

Дизайн и функциональность веб-сайта & новости по созданию сайтов от ABCname

Дизайн и функциональность веб-сайта

Функциональность веб-сайта очень важна на ранних этапах процесса веб-дизайна.

Люди часто начинают разговор с «Я хочу новый сайт. Сколько вы берёте за работу?» Ответ всегда один и тот же: «Зависит от того, что вы ищете».

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

Наиболее эффективный способ подойти к теме функциональности сайта — с нуля. Подумайте об основной цели сайта. Продать? Довести до сведения? Завоевать доверие? Всего понемногу? Но должна быть одна главная цель, и это должно обеспечить необходимую функциональность веб-сайта. Эта основная цель будет зависеть от того, кто посещает ваш сайт и как они его находят. У вас может быть веб-сайт, который использует SEO и онлайн-маркетинг для привлечения трафика и является первой точкой контакта между потенциальным клиентом и вашей компанией. Или у вас может быть веб-сайт, куда вы отправляете людей, с которыми вы уже связаны, чтобы они могли найти больше информации и настроить свой заказ. Или у вас может быть веб-сайт, который в первую очередь предназначен для поддержки ваших постоянных клиентов.

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

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

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

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

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

  • Форма обратной связи
  • Форма оценки
  • Подписаться на новости
  • Интеграция с социальными сетями
  • Онлайн магазин
  • Обработка кредитной карты
  • Скачать файл
  • Форма авторизации
  • Календарь событий

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

Помогла ли вам статья?

348 раз уже помогла

Комментарии: (0) Написать комментарий

что пригодится, а что нет :: Shopolog.ru

Сегодня речь пойдет о таком полезном слове как «стоп». Обычно это слово воспринимается негативно, но зачастую оно обладает прямо-таки волшебными свойствами. Для того, чтобы уберечь себя от организационных проблем или ненужных расходов, достаточно просто его вовремя сказать или услышать. А когда речь заходит о проектировании и разработке интернет-магазинов – ценность слова «стоп» повышается в разы.

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

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

Итак, передаем им слово.

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

Не самые экзотические, но интересные примеры в практике: 

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

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

— Интересный пример экзотического функционала — создание интерфейса «активации товаров». После выгрузки товаров, пользователь с правами модератора через данный интерфейс проверяет выгруженные товары, на месте редактируя, активируя на сайте, либо возвращая на доработку. Оригинальное решение, которое было бы полезно и в других e-commerce проектах.

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

Роман Горевой, исполнительный директор компании ЕВРОСАЙТЫ: «Экзотический функционал — это как креатив в дизайне, он может быть полезным, а может быть и вредным. По опыту могу сказать, что нестандартные желания клиента в 80% случаев выливаются в лучшем случае в бесполезный функционал, а в худшем вызывает негативный опыт у их клиентов. Мы часто предлагаем клиентам интересный завязанный на особенностях их бизнеса функционал. Для этого проводятся и тематические опросы всей нашей команды и потенциальных аудитории заказчика, и мозговые штурмы, и просто сбор интересных идей для последующего их обсуждения. Только получив вразумительные данные по целесообразность какого-либо нестандартного функционала принимается решения по его внедрению.

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

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

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

Алена Пугачева, руководитель проектов Intaro: «Пример экзотического функционала, достойный внимания, был реализован на одном из мебельных магазинов. По заданию заказчика мы разрабатывали возможность проведения аукционов — классического (с повышением ставки), и голландского, когда в начале аукциона объявляется самая высокая цена на товар, а затем ставки автоматически снижаются до той, на которую согласится первый покупатель, либо до минимально возможной.

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

Мурад Эфендиев, менеджер проектов веб-студии itsoft: «Наш проект, который нельзя назвать интернет-магазином в прямом смысле слова, но функционал из которого может быть использован в e-commerce: взаимодействие по типу b2b, одна сторона — назовем ее дистрибьюторами, другая — производители.

Мы разработали платформу, которая позволила связать дистрибьюторов с производителями и дала возможность вести общение и документооборот в рамках данной платформы. Автоматическая проверка данных в документообороте (договора, приложения) существенно облегчила время взаимодействия сторон».

Инга Таирова, заместитель директора по развитию интернет-агентства Bquadro: «Нашему агентству регулярно приходится сталкиваться с нестандартными задачами. Мы много работаем с сайтами промышленной тематики, на которых порой приходится разрабатывать новые решения для каталогов оборудования. Из-за специфики отрасли стандартный функционал CMS не всегда может выполнить все поставленные задачи.

Интересный модуль мы разработали на сайте интегратора решений для инжиниринга и автоматизации компании ITC-Electronics. В разделе «Склад-online» реализован удобный поиск по производителю и артикулу. Пользователь также может искать нужные позиции в найденном. Система поиска работает и при частичном задании запроса. При этом вместе с заказом генерируется Excel-файл с историей поиска на сайте, которая отправляется менеджеру. Это позволяет более предметно общаться с клиентом, а также собирать статистику о наиболее запрашиваемых позициях.

Другой пример — система автоматической генерации партномера на сайте поставщика и интегратора лазерно- и волоконно-оптических компонентов и оборудования «Специальные Системы» (http://sphotonics.ru/). Сложное техническое оборудование имеет множество характеристик и порой отличается незначительными модификациями. Зная систему формирования партномера производителя, пользователь может самостоятельно указать требуемые параметры и сгенерировать уникальный партномер. Нажав кнопку «Сформировать», система подбирает артикул по введённым характеристикам. После этого пользователь может легко сделать заказ буквально в один клик».

Алексей Сосновский, директор DIAFAN.AGENCY:  «Если разобраться, то «экзотическое» или «ненормальное» для магазинов — это просто всё то, что делается редко. Ведь определение слова «норма» — правила, принятые абсолютным большинством. Соответственно, всё то, что большинство не использует, оно «не нормально» и экзотично.

Но это не значит, что «червяки из экрана должны вылезать». 🙂 Относительно недавно, например, мы делали интернет-магазин, где можно заказать эксклюзивный товар. Сайт http://exobutiq.ru/, ничего особенного, обычный магазин, но покупатель может заказать эксклюзивный товар на основе любого типового товара из представленных на сайте. То есть, в каталоге есть перчатки из кожи питона, но, если нужно вместо кожи питона, кожу крокодила, обитающего в русле реки Нил, причем кожа нужна именно с левого бока, который он прятал при жизни от солнца, — пожалуйста. Заполняем анкету и ждем звонка менеджера.

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

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

Еще интересную нестандартную идею из области юзабилити в одном интернет-магазине мы разрабатываем сейчас. В нем в карточке товара наряду с блоком похожих товаров и товаров, которые недавно смотрели, есть «связанные объекты», на которых использовался данный товар. Компания занимается продажей строительных материалов, а также занимается непосредственно строительством, используя свои же товары. Выбирая, например, краску в каталоге, можно сразу посмотреть её «в деле» на объекте, в оформлении которого данная краска была использована.

На самом деле, технических сложностей сегодня нет ни с чем, функциональность сайта практически не имеет ограничений. Реализовать можно абсолютно всё, тем более на DIAFAN.CMS, которую мы используем в работе. Однако делать что-то для «фишки, прикола или красоты» мы не рекомендуем. Каждый винтик и гаечка сайта должны преследовать одну цель – продавать, а не отвлекать или отпугивать».

Алексей Божин, руководитель агентства Интермонте: «Понравилось, как на одном англоязычном сайте было сделано, адреса не помню уже. Они продают детские коляски, надо сказать, недешевые. И чтобы максимально побудить к покупке — предлагают загрузить фото своего малыша, чтобы посмотреть сразу, как малыш будет выглядеть в детской коляске. Там типа конструктора: мальчик/девочка, несколько цветов одежды, плюс фото малыша загружается. Выглядело очень симпатично, думаю, там и конверсия в продажи была хорошая.

В Aliexpress мне понравился один функционал, который я пока еще не встречал нигде. Товар можно положить в корзину или добавить в «Мои желания». И тут самое интересное — в «Мои желания» можно делать списки. И добавлять электронику в один список, товары для спорта — в другой, товары для детей — в третий. Очень удобно.

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

Николай Чуков, основатель и креативный директор студии Nikoland: «Могу привести такой пример как предзаказ товара на сайте по продаже ключей для игр. На проекте https://gabestore.ru/ мы реализовали интересную механику покупки товара, который поступит в продажу через некоторое время. Все аналогичные проекты позволяют лишь подписаться на появление товара, но товар раскупают в считанные минуты после релиза, в итоге пользователь знает, что игра поступила в продажу, но ее нет в наличии – печаль. А ведь так хотелось получить игру раньше друзей!
Мы позволяем оплатить предзаказ сразу, а как только администратор сайта пополнит игру ключами (обычно до релиза в соцсетях и емейл рассылках), пользователь моментально получает ключ на емейл.

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

Плюсы для клиентов: гарантия получения игры в числе первых без лишних заходов на сайт и напоминаний.  
Что касается чужих проектов… Я довольно редко встречаю магазины с какими-то интересным и необычным функционалом, все-таки это магазин, его задача продавать, а не удивлять. Но есть функционал, который я очень жду и который должен сделать переворот в области e-commerce — виртуальная примерочная. Допустим я ищу одежду, делаю свое фото в формате 360 градусов, движок магазина преобразует его в 3d модель, учитывающую все особенности моей фигуры, а потом я просто беру одежду из каталога и примеряю на себе, смотря как оно сидит. Или выбираю кухню, делаю фотку квартиры, загружаю, а система выдает мне хороший рендер и сама рассчитывает нужные размеры. И все это в онлайн-режиме через сайт.

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

Алексей Шишкин, генеральный директор Redsoft: «Я бы хотел обсудить негативные стороны «прикольных фишек» в разработке интернет-магазинов. Самая частая ошибка студий (реже самих клиентов) — придумать экзотические решения в дизайне или логике работы, в надежде выделиться из числа конкурентов.

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

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

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

  1. Одним из определяющих понятие «экзотический функционал интернет-магазина» является факт отсутствия соответствующего модуля в коробочных CMS. А это значит, что его разработка потребует отдельного времени и денег. Соответственно, в случае ограниченного бюджета или сроков, заказчикам стоит заранее разобраться, не выльются ли в итоге «небольшие эксклюзивные хотелки» в неподъемную сумму и не отодвинут ли они запуск проекта относительно запланированного.
  2. Как мы уже писали ранее, «красивости» и «дизайн-креативы» в интернет-магазинах – дело десятое. На первом месте – реализация бизнес-задач заказчика, технологические решения и юзабилити. Принимая решения о заказе необычного функционала, стоит задать себе простые, но важные вопросы: «Поможет ли это решение повысить конверсии?», «Является ли оно необходимым или привлекательным не для вас лично, а для ваших клиентов?», «Не будет ли это техническое решение отвлекать покупателей от основной цели ресурса – совершения покупок?» и т.д.
  3. В большинстве случаев необходимость экзотического функционала исходит от специфики бизнеса. Торговля живыми существами или точечные продажи дорогого промышленного оборудования почти наверняка будут сопряжены с функционалом, не присущим 95% интернет-магазинов.
  4. Инициатива о внедрении необычного функционала обычно исходит от самих заказчиков. Разработчики предпочитают советовать клиентам лишь неоднократно проверенные на собственном опыте варианты. Однако это не значит, что сотрудники веб-студий не обладают компетенциями одобрить или отговорить клиента от реализации его пожеланий при работе над интернет-магазином.
  5. При заказе интернет-магазина (как и любого другого сайта), заказчикам следует предварительно самостоятельно изучить отрасль и интернет-площадки конкурентов. Это позволит не только подчерпнуть полезные идеи для собственного бизнеса, но и уберечь себя от необдуманных решений.

На сегодня всё. До новых встреч!

Бриф на разработку сайта – готовый бриф для разработки сайтов

Шаблон включает в себя вопросы о структуре и функционале сайта, его целевой аудитории, бюджете, сроках и конкурентной среде. Подходит для любых типов сайтов.

Как и зачем заполнять бриф на разработку сайта

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

Что такое бриф

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

Документ выполняет следующие задачи:

  • дает понимание проекта обеим сторонам;

  • позволяет заказчику оценить, соответствуют ли его компетенции и ресурсы будущему проекту;

  • дает возможность определить время создания сайта и его примерную стоимость;

  • помогает заказчику разобраться в специфике деятельности заказчика.

Это инструмент, с помощью которого заказчик формулирует свои пожелания, а исполнитель может понять, что от него хотят.

Отличия брифа от ТЗ

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

Бриф на разработку сайта

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

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

Простыми словами: бриф — это описание вашей «мечты», а техническое задание — описание того, как ее реализовать.

Читайте также: Договор на разработку сайта: инструкция по составлению и готовый шаблон Читайте также: Коммерческое предложение на разработку сайта: инструкция по составлению + шаблон

Почему так важно тщательно заполнять бриф?

От того, насколько тщательно заполнен бриф, многое зависит. Например, если заказчик забудет в нем указать необходимость интеграции сайта с облачными сервисами типа 1С:Предприятие или Мой Склад, через некоторое время он будет неприятно удивлен закономерным переносом сроков запуска проекта и увеличением бюджета на разработку. А если он сразу не обозначит, что желает видеть сайт на конкретной CMS, то впоследствии может столкнуться с тем, что ведет переговоры со студией, в которой нет соответствующих разработчиков.

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

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

Что важно учесть при заполнении брифа на разработку сайта?

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

Примерное содержание брифа:

  1. Цель создания сайта. Для чего он именно нужен, какие бизнес-задачи планируется закрыть с его помощью.

  2. Информация о вашей компании. Желательно не просто рассказать, чем вы занимаетесь и описать ваши товары/услуги, но еще и описать ваши основные преимущества перед конкурентами.

  3. Информация о конкурентах. Выделить несколько ключевых конкурентов и обязательно указать ссылки на их сайты.

  4. Информация о целевой аудитории. Опишите, как выглядит ваш покупатель: его возраст, доход, образование и другие характеристики.

  5. Информация о будущем сайте. Расскажите, как вы видите будущий сайт, его структуру и функционал.

  6. Информация о дизайне. Расскажите, каким вы видите дизайн своего сайта, также укажите, есть ли у вас уже готовые элементы фирменного стиля, которые нужно использовать. Хорошим решением будет добавить несколько ссылок на сайты, дизайн которых вам нравится (это не обязательно должны быть сайты в вашей сфере работы). Это называется референсы.

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

Не стоит расписывать все очень подробно и писать огромную «простыню» текста. Желательно, чтобы в итоговом брифе на разработку сайта было не более 3-5 страниц. Подробности оставьте для ТЗ (которое может быть и на 20-30 страниц).

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

Где взять бриф для сайта и как его оформлять?

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

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

10 типичных ошибок коммерческих сайтов с точки зрения юзабилити. Читайте на Cossa.ru

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

Проанализировав 80 роликов, мы составили список типичных ошибок коммерческих сайтов.

Логотипы, названия, описания

Ошибка #1: есть только название компании или ее логотип, но нет описания — чем занимается компания.

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

Видео.

Неудачный пример логотипа #1

Неудачный пример логотипа #2

Ошибка #2: описание специализации компании слишком общее: например, «креативное агентство» — это недостаточное описание, потому что креативное агентство может и разрабатывать сайты, и делать ролики, и проводить мероприятия.

Видео.

Пример слишком общего описания специализации

Ошибка #3: для объяснения сути компании используется слоган. Да, слоганы хороши, если у вашего бренда практически 100% узнаваемость и в головах потребителей уже выстроилась устойчивая цепочка вроде: Just do it — это Nike. Если это пока не так, то рядом с логотипом напишите, что вы предлагаете.

На приведенном ниже примере пользователю было сложно понять, на какой сайт он попал: интернет-магазина или типографии. И слоган «Успех в Кубе» ясности не добавил.

Видео.

Неудачный пример слогана #1

А вот другая — более удачная версия этого же сайта: тут у пользователя проблем с определением тематики сайта не возникло, потому что создатели сайта добавили описание «Московская типография».

Удачный пример: есть и слоган, и описание

Ошибка #4: в описании компании используются специальные термины, которые знакомы продвинутым пользователям, но для широкой аудитории назначение сайта остается загадкой.

Например, если в описании сайта написано «Консалтинг», этого не достаточно, чтобы понять, какие услуги предоставляет данная компания:

  • человек может нуждаться в консультации, но не знать слова «консалтинг»;
  • консалтингом можно заниматься в любой сфере.

Видео.

Неудачный пример использования терминов #1

Еще один пример: не все знают, что такое vape, лучше дополнительно объяснить. Человек, который пользуется электронными сигаретами, вас поймёт, а обычный курильщик этот термин может и не знать. Такие вещи лучше предусмотреть заранее, потому что вейперы когда-то в прошлом тоже курили обычные сигареты и про vape никогда не слышали.

Неудачный пример использования терминов #2

Ошибка #5: описание сферы деятельности сайта написано не очень заметно.

На приведенном ниже примере слоган написан крупно и «перетягивает» на себя внимание, а описание компании на его фоне теряется.

Видео.

Неудачный пример описания сферы деятельности сайта

А вот пример хорошей первой страницы:

Функционал

Ошибка #6: на первой странице пользователю показываются сразу ВСЕ возможности сайта.

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

Видео.

Неудачный пример функционала

Назойливые Pop-up и электронные помощники

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

Видео.

Неудачный пример Pop-up

При этом Pop-up, конечно, могут быть весьма эффективны, если их грамотно использовать.

На сайте booking.com всплывающее сообщение появляется на странице бронирования и только в том случае, если пользователь нажимает кнопку «Закрыть окно», не заполнив форму бронирования до конца. Цель — мотивировать пользователей забронировать номер.

Хороший пример Pop-up

Почему это всплывающее окно эффективно?

  • дизайн всплывающего окна выполнен в стиле основного сайта;
  • pop-up содержит ясное и привлекательное предложение;
  • pop-up стимулирует только конкретных пользователей, а не всех подряд;
  • во всплывающем сообщении убедительно объясняется, почему бронирование необходимо завершить именно сейчас.

Целевые действия. Типичные ошибки

Ошибка #8: целевое действие на первой странице не сформулировано. Например, пользователи прочитали об услугах компании, им всё понравилось, а как заказать услугу — непонятно.

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

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

Видео.


Пример отсутствия призыва к целевому действию

Ошибка #9: пользователи не совершают целевых действий, потому что не понимают, что им предлагает данный сайт.

Это следствие ошибки с формулировкой тематики и пользы сайта: в этом случае вместо того, чтобы выбирать товар в каталоге или регистрироваться, пользователи ищут информацию о компании (чаще всего в разделе «О компании), тратя время и совершая лишние клики.

Видео.

Ошибка #10: целевое действие предлагают совершить слишком рано. Например, пользователь заходит на сайт и сразу же видит кнопку «Записаться на процедуру».

Он ещё не готов это сделать, так как ещё ничего про процедуру не знает. Логичнее показать ему, например, две кнопки: «Узнать подробнее» и «Записаться»: одну для новых пользователей, другую — для более опытных, которые о процедуре уже прочитали.

Видео.

Неудачный пример призыва к действию #1

Неудачный пример призыва к действию #2

Хороший пример: новым пользователям на первой странице предлагают только одно действие — «Купить». При клике по этой кнопке пользователи попадают не в форму заказа, а в каталог товаров. Сначала они могут выбрать, что именно хотят приобрести, и только после этого перейти к заказу.

Мнение редакции может не совпадать с мнением автора. Если у вас есть, что дополнить — будем рады вашим комментариям. Если вы хотите написать статью с вашей точкой зрения — прочитайте правила публикации на Cossa.

Разработка корпоративного сайта на основе маркетинга

Digital-стратегия

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

Digital-стратегии Контент 1

Ретаргетинг Ремаркетинг E-mail рассылка Группы соц. сетей и другие

A/Б тест

Прогрев клиента

A/Б тест Контент 2

Ретаргетинг Ремаркетинг E-mail рассылка Группы соц. сетей и другие

Холодный клиент

Теплый клиент

Горячий клиент

Для того, чтобы сайт был качественно работающим инструментом, при его разработке мы закладываем в него следующие пропорции:

70%
стратегия digital-инструментов

20%
маркетинг

10%
исследования

Структуру сайта

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

Пример структуры сайта:

Структура сайта

  • Об онлайн консультации
  • Консультация по почте
  • Консультация по телефону
  • Личные данные
  • Заказанные услуги
  • Результаты онлайн-консультаций
  • О товарах
  • Список товаров
    • Детальная страница товара
  • Список комплексов
    • Детальная страница комплекса
  • О компании
  • Нормативные документы
  • Часто задаваемые вопросы
  • Контроль качества
  • Статьи
    • Детальная страница статьи
  • Новости
    • Детальная страница новости
  • Акции
    • Детальная страница акции
  • Вакансии
    • Детальная страница вакансии
  • Об услугах
  • Список услуг
    • Детальная страница услуги
  • Контакты
  • Адреса офисов
Для того, чтобы сайт был качественно работающим инструментом, при его разработке мы закладываем в него следующие пропорции:

70%
стратегия digital-инструментов

20%
маркетинг

10%
исследования

Контент-план страниц

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

Пример контент-плана страниц:

Контент-план страниц

  • Общее описание
  • УТП и преимущества
  • География поставок
  • Лицензии и сертификаты
  • Партнеры
  • Форма обратной связи
  • Общее описание
  • Общее описание
  • Преимущества
  • Процесс работ
  • Портфолио по услуге
  • Связанная продукция
  • Отзывы
  • Форма запроса услуги
  • Общее описание
  • Галерея (фото-видео)
  • Технические харакетеристики
  • Техническая документация (для скачивания)
  • Портфолио по продукции
  • Связанные услуги
  • Отзывы
  • Форма заказа продукции
  • Контакты головного офиса
  • Адрес, телефон, почта, отметка на карте по каждому филиалу
  • Контактные лица
  • Форма обратной связи

Очень важно правильно выстроить свое позиционирование в интернете, так как клиенты могут видеть вас по-другому, не так как есть на самом деле.

Контентный прототип страницы

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

Пример контентного прототипа страницы:

Очень важно правильно выстроить свое позиционирование в интернете, так как клиенты могут видеть вас по-другому, не так как есть на самом деле.

Редизайн и модернизация сайта: примеры, как сделать и с чего начать

Редизайн сайта. Одностраничной Landing Page и крупного интернет-магазина. Зачем он нужен и нужен ли вообще? Что входит в редизайн веб-сайта? Какая стоимость такой услуги? На эти и другие вопросы мы ответим в статье. Также мы рассмотрим реальные примеры редизайна различных сайтов. Мы расскажем о своем опыте в деле модернизации веб-сайтов и затронем кейсы зарубежных коллег.

К каким результатам приводит редизайн/модернизация/доработка сайта?

Американская компания WallMonkeys занимается изготовлением и продажей наклеек и постеров для стен. Они предлагают (и всегда предлагали) уникальный и качественный продукт. Тем не менее, у них тысячи конкурентов. Жесткая конкуренция мотивирует ребят постоянно работать над главным источником заказов – сайтом www.wallmonkeys.com.

Даже когда у них было достаточно заказов, WallMonkeys хотели стать лучше. Они подключили сервис для увеличения конверсии Crazy Egg, провели A/B тестирование, сделали небольшой редизайн и увеличили конверсию wallmonkeys.com на 550%. То есть количество заявок выросло более чем в 5 раз!

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

А теперь внимание!

Ниже 2 варианта веб-сайта WallMonkeys. Один приносил N заказов, другой после внесения относительно несложных изменений в дизайн: N * 5,5. Как вы думаете, какой из этих вариантов ДО, какой – ПОСЛЕ? Какие именно доработки увеличили конверсию в несколько раз? Ответы найдете ближе к концу статьи.



Зачем нужен редизайн сайта именно вашей компании?

С примером выше понятно.

Это известная успешная компания. У нее много денег и много конкурентов. Значит достаточно причин и поводов заниматься доработкой своего продающего сайта.

А если у меня другая ситуация? Дела идут неплохо (хотя лишних денег на модернизацию сайта нет), конкуренты есть, но пока не слишком обгоняют. Может мне не требуется редизайн?

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

  • Дизайн веб-сайта «живет» максимум 5-7 лет. Сколько лет вашему интернет-проекту? Если больше 7, существует крайне высокая вероятность, что дизайн (да и функционал) устарел. Это объективные данные, которые справедливы практически для любой ниши. Тут есть несколько важных нюансов! Первый: ваш сайт мог быть разработан 4 или 3 года назад, хотя все равно сейчас он уже устаревший. Все зависит от того, был ли его дизайн современным на момент создания. Невероятно часто разработчики используют устаревшие шаблоны. Второй: правильный редизайн занимает время (подробнее об этом расскажем ниже). Сроки у каждого проекта, конечно, разные, но в любом случае это минимум несколько месяцев.

  • Согласно публикациям Университета Суррея (получившего международное признание благодаря своим научным исследованиям) мнение о надежности вашего бизнеса на 75% состоит из мнения о вашем сайте. О чем это говорит? Как минимум о том, что не стоит забывать об интернет-площадке, даже когда офлайн дела у бизнеса идут неплохо. Если к прекрасно выстроенному офлайн-бизнесу добавить сайт с современным продуманным дизайном, прибыль может увеличиться в 4 раза.

  • Дизайн играет важную роль при SEO-оптимизации сайта. Заметили плавное, но уверенное снижение посещаемости интернет-магазина? Вполне возможно, дело в устаревшем дизайне. Часто посещаемость начинают спасать с помощью SEO-текстов и ссылок, хотя надо стартовать именно с модернизации дизайна.

  • Часто понять, нужен ли редизайн, можно после банального исследования ТОПа выдачи Яндекса или Гугла. Есть главный запрос, по которому ранжируется ваш сайт (например, «установка окон»), вбиваете его в поиск и смотрите на сайты конкурентов. Если заметных различий между вашим сайтом и ресурсами из поиска не много, возможно с редизайном можно повременить. Когда все или почти все существенно отличаются в лучшую сторону, нужно действовать. При этом желательно исследовать ТОП не в одиночку, а с привлечением сотрудников и клиентов (потенциальных клиентов). Смотреть надо не только с компьютера, а и с мобильных девайсов. Проверять не только внешний вид, но и удобство, скорость и т.д.

Кстати! Согласно Нилу Пателу (больше известному на Западе, хотя и у нас тоже, маркетологу и предпринимателю) решение купить тот или иной продукт на 85% зависит от цвета. Не нужно объяснять, что в веб-дизайне правильно подобранные цвета играют огромную роль. Хотя далеко не все дизайнеры знают о реальных возможностях того или иного цвета. Простой пример. Было проведено серьезное исследование цветовых предпочтений женщин (информация с блога все того же Нила Патела). Как думаете, какой цвет выбрали большинство девушек в качестве любимого? Мы даже предоставим варианты: розовый, голубой, зеленый. Ответ чуть ниже (не в самом конце статьи – не переживайте). Уверены, он вас удивит.

С чего начать и как сделать редизайн сайта: опыт B1Team Software

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

Итак, как делает редизайн компания B1Team software

1. Вначале нужно составить бюджет редизайна и определить сроки. Для этого мы подсчитываем количество элементов на странице, которые нужно заменить/улучшить/модернизировать. Отдельно нужно считать время и бюджет на дизайн, отдельно – на верстку и программирование. Когда бюджет и сроки утверждены, переходим к дизайну.

2. На этапе разработки дизайна огромное внимание мы уделяем User Expirience и User Interface (иными словами делаем все, чтобы сайт был понятным и удобным). Например, мы всегда создаем UI Kit – набор элементов пользовательского интерфейса. В него входит цветовая палитра, которую мы прорабатываем на основе фирменного брендбука компании, если таковой имеется, а также основываясь на тематике проекта. В набор также входят такие элементы, как шрифты, кнопки, поля ввода, формы, таблицы, стрелки, иконки, отображение заголовков и текста и т.д. Все то, что может быть использовано в контенте сайта. В процессе создания набора мы опираемся на текущие тренды веб-дизайна или используем современные стили и тенденции в веб-дизайне. Иногда на этом этапе работа заканчивается. Когда клиент доверяет нам не только дизайн, но и полную модернизацию сайта, начинается третий этап.

3. Верстка и программинг. Мы работаем только с 1С-Битрикс, поэтому если сайт создан на другой CMS (или на чистом HTML) при редизайне мы всегда переносим контент на платформу Bitrix. При этом делаем это максимально аккуратно, так как часто нужно сохранить позиции сайта в поиске. Если внести слишком кардинальные изменения, можно не только потерять позиции, но и полностью вылететь из индекса. Почти всегда во время редизайна мы полностью модернизируем программную часть сайта (включая случаи, когда старый сайт был разработан на 1С-Битрикс). Отметим, что современный дизайн не может сочетаться с устаревшим кодом. Мы переносим сайт на Битрикс и меняем «программную начинку» не потому, что так хочется, а потому что это необходимо. В работы по модернизации входят:

  • Минимизация JS/CSS (PHP Minify)

  • Отложенная загрузка картинок (lazyload)

  • Отложенная загрузка JS (requireJS)

  • Подключение BIGDATA для анализа покупателей

  • Внедрение технологии Композитный сайт

  • Интеграция с соцсетями

  • Многие другие фишки (зависит от задач целей проекта)

Если коротко: главная цель редизайна

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

  • Анимация

  • Динамический поиск

  • Персональные рекомендации

  • Популярные разделы на главной странице

  • Скидки

  • Акции

  • Калькуляторы

  • Отзывы из соцсетей

Сколько времени занимает редизайн?

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

Давайте рассмотрим конкретные цифры.

Редизайн сайта Комитета по развитию информационных технологий и связи Мурманской области занял у нас 4,5 месяца.

Мы провели огромную работу, которая включала:

  • Разработку документации (анализ требований, техническая спецификация, методика испытаний)

  • Разработку дизайна, который состоял из 41 макета и соответствовал требованиям к дизайну государственных систем России

  • Верстку и программирование с полным сохранением контента старого сайта

  • Внедрение поисково-навигационной системы «Госбар», которую крайне сложно настроить без серьезного опыта в разработке

  • Внедрение версии для слабовидящих

  • Ускорение загрузки до 100 из 100 по Google Page Speed Insights для компьютеров и до 92 из 100 для мобильных устройств

В результате…

До редизайна сайт выглядел вот так:


После редизайна так:


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

Как вы понимаете, редизайн сайта государственной организации – относительно сложный и долгий процесс. Поэтому нам потребовалось более 4 месяцев. Обычно редизайн занимает существенно меньше времени. Все равно нужно не менее 1-2 месяцев. Часто модернизация требует не меньше, а то и больше времени, чем разработка сайта с нуля.

Кстати! Согласно исследованиям, о которых мы упоминали чуть выше, большинство женщин (а именно 35% опрошенных) считают своим любимым цветом голубой. Розовый цвет, который так ассоциируется с женским полом, выбирают менее 5%, а коричневый вообще один из самых неприятных цветов (наряду с оранжевым – главным «античемпионом» среди женщин).

Редизайн сайта: примеры ДО и После + важные нюансы, на которые надо обратить внимание

Пример редизайна сайта мясных изделий

В 2017 году у компании «Альмак», которая занимается производством и продажей мясоколбасной продукции, был сайт. Это был максимально стандартный сайт начала 2000-х со словами про экологически чистую продукцию и фотографиями с фотостока с пластмассовыми человечками без лиц.


В 2017 году представители «Альмак» заказали у нас редизайн. После нашей работы сайт стал выглядеть совершенно по-другому:


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

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

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

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

3. Оригинальная рисованная картинка на заднем фоне первого слайдера + «косой эффект перехода». Это сделать не так просто, зато выглядит замечательно и небанально.

4. На скриншотах этого не видно, но после модернизации мы интегрировали сайт с системой «1С:Предприятие».

Пример редизайна интернет-магазина мебели

Так интернет-магазин «Отличная мебель» выглядел до редизайна:


Так он выглядит сейчас на компьютере:


Так на мобильных девайсах:


Обратите внимание на:

1. Расположение и оформление главных преимуществ магазина в хэдере сайта (бесплатная доставка, кредит без переплаты, большой ассортимент): с одной стороны ненавязчиво, с другой – невозможно пропустить.

2. Заметную красную кнопку с призывом узнать больше о кредите без переплат.

3. Расположение и оформление слогана «Мебель по выгодным ценам!». Он хорошо заметен и на мобильных версиях.

4. На скриншотах не видно (хотя вы можете убедиться посетив сайт om51.ru), но после редизайна у сайта полная адаптивность под мобильные устройства. Если изучить Яндекс.Метрику, становится понятно, что редизайн был выполнен как раз вовремя. Количество мобильного трафика стремительно растет, а процент отказов не меняется, потому что с 2016 года на сайт удобно заходить со всех популярных мобильных устройств.

Столько людей посещали сайт с мобильных устройств в 2015 году (ДО редизайна):


Вот как изменился процент посетителей сайта, которые используют смартфон в 2016 году (после редизайна, который мы внедрили в конце 2015-го):


Мобильный трафик в 2019 году (процент отказов не менялся с 2016-го, потому что у нашего редизайна «запас» минимум 6-7 лет).


Редизайн сайта WallMonkeys

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

Отвечаем на первый вопрос. Вот как выглядел сайт ДО редизайна:


Вот как выглядел сайт ПОСЛЕ редизайна (когда начал собирать на 550% больше заявок):


Изменения очень незначительные, главное из которых – перенесения строки поиска с верха на середину страницы (также добавлена кнопка Create Your Own или Создай Свою Собственную).

Да, именно перенос поиска на десяток сантиметров и удаление кнопки «Покупайте сейчас» так СУЩЕСТВЕННО повлияли на конверсию. При этом дело не в чудесах, а в использовании правильных инструментов. Поменять расположение поиска решили после изучения тепловой карты сайта, которая выглядела вот так:


Редизайн сайта: подводим итоги и делаем выводы

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

42 обязательных элемента для вашего бизнеса Веб-сайт

Вы когда-нибудь собирали пазл?

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

5 самых важных функций веб-сайта

  1. Дизайн домашней страницы
  2. Нижний колонтитул веб-сайта
  3. О странице
  4. Внутренние веб-страницы
  5. Серверный администратор

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

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

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

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

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

Функции домашней страницы вашего веб-сайта

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

1. Доменное имя

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

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

2. Название компании

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

3. Панель поиска

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

4. Логотип

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

5. Описание

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

6. Панель навигации

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

7. CTA

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

8. Изображения

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

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

9. Внутренние ссылки

Цель веб-сайта — не только привлечь людей на вашу домашнюю страницу. Лучше используйте свою домашнюю страницу, чтобы побудить посетителей перейти на другие части сайта.Рекламируйте релевантные весенние стили или дайте ссылки на недавние сообщения в блоге. Внутренние ссылки позволяют пользователям дольше оставаться на вашей странице, что увеличивает вероятность того, что они станут вашими клиентами.

10. Отзывы

Подумайте о том, чтобы включить некоторые замечательные вещи, которые пользователи и / или предыдущие клиенты говорили о вас на вашей домашней странице. На таких сайтах обзоров, как Yelp или G2 Crowd, есть множество данных, из которых можно извлечь. Если у вас недостаточно данных, обратитесь за правами администратора к профилю вашей компании и попросите пользователей писать отзывы клиентов.А пока подумайте о том, чтобы связаться с людьми лично и спросить, не возражают ли они, чтобы они сказали какие-нибудь добрые слова, которые будут включены в ваш раздел с отзывами.

11. Онлайн-чат

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

12. Регистрация абонента

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

Функции нижнего колонтитула веб-сайта

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

13. Вкладки и параметры

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

14. Иконки социальных сетей

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

Веб-сайт О странице Возможности

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

Совет: «Есть интересный анекдот о том, как начинался бизнес? Поделитесь.Хорошая история придает человеческое лицо тому, что в противном случае могло бы быть коммерческим предложением или обезличенной страницей «О нас», — советует Сьюзан Грин, копирайтер, помогающий компаниям создавать более качественные веб-страницы. «Факты важны, но истории запоминаются и помогают общаться с клиентами . «

15. Карта вашего предприятия

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

16. Часы работы

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

17. Контактная информация

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

18. Контактная форма

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

19. Биография

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

Другие функции внутренней страницы вашего бизнес-сайта

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

20. Команда / Карьера

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

21. Команды и сотрудники

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

22. Биография сотрудника

Биографии команд

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

23. Медиа

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

24. Страница характеристик

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

25. Функциональность

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

26. Интеграции

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

27. Примеры из практики

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

28. Блог

Блоги

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

29. Организация

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

30. Функция поиска по блогам

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

31. Страницы автора

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

32. Комментарии

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

33. Блог Внутренние ссылки

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

34. База знаний или FAQ

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

35. Вопросы и ответы

Вопросы — это строительные блоки форума. После того, как вопросы будут заданы, другие люди могут начать предлагать свои ответы и по-настоящему создать сообщество, в котором делятся знаниями. Организуйте вопросы и ответы на своем форуме или в FAQ по темам так же, как вы организовали свой блог. Как и в случае с блогом, сделайте эти вопросы доступными для поиска.

36. Документы и руководства

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

37. Инфографика

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

Серверные функции бизнес-сайта

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

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

38. Инструмент CMS

Система управления контентом (CMS) помогает организовать и сохранить весь контент, который есть на вашем веб-сайте. Даже если вы удалите публикацию после связанного с ней события или праздника, вы можете сохранить ее в CMS, если она понадобится позже.

Многие платформы CMS имеют сотни настраиваемых надстроек для любого случая использования. Например, существует бесчисленное множество популярных плагинов WordPress для интернет-магазинов.

39. SEO / Инструмент оптимизации

Программные инструменты

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

40. Аналитика сайта

Инструменты

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

41. Хостинг веб-сайтов

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

42. Описание содержимого

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

Избегайте этих функций на веб-сайте вашей компании

Среди множества источников ясно несколько вещей:

  • Не загружайте видеоконтент прямо на свой сайт, так как это увеличивает вероятность ошибки. Вместо этого используйте веб-сайты видеохостинга, такие как YouTube, и вставьте видео на свой сайт. Некоторых надоедает и автоматическое воспроизведение видео.
  • Избегайте использования элементов, для которых требуется Adobe Flash Player, поскольку не каждый посетитель может или хочет загрузить соответствующее программное обеспечение.
  • Держитесь подальше от фоновой музыки. Многие считают утомительным насильно слушать музыку, которую они не выбрали.
Следующие шаги для вашего бизнес-сайта

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

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

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

Руководство по написанию документов спецификации веб-сайтов (обновлено для 2019 г.)

Структура контента или информационная архитектура (IA) состоит из различных частей и будет зависеть от сложности и размера контента вашего веб-сайта.

Карта сайта

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

Пример базовой карты сайта

Существуют отличные инструменты для создания карты сайта. Мы любим Gloomaps.

Типы контента

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

Некоторые другие распространенные примеры типов контента:

  • Люди
  • Продукты
  • Отзывы
Данные типа контента

Для каждого типа контента должны быть перечислены данные, связанные с этим типом контента.Например, если существовал тип контента «Человек», им могут потребоваться следующие данные:

  • Имя
  • Фамилия
  • Должность
  • Bio
  • Адрес электронной почты
  • Номер телефона

Таксономия

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

Например, если у вас есть веб-сайт с рецептами, вам может потребоваться таксономия «блюд», в которой термины таксономии будут «завтрак», «обед», «ужин», «закуски», «десерт» и т. Д.Вы также можете создать таксономию «кухни» с такими терминами, как «индийская», «британская», «французская» и т. Д.

В блогах наиболее распространенными двумя таксономиями являются «Категории» и «Теги».

Существует два основных типа таксономии:

  1. Иерархическая — например, «Категории»
  2. Неиерархический — например, «Теги»

Другим примером может быть таксономия «Отрасль», которую вы можете назначить своим типам контента «Блог», «Клиент», «Пример использования» и «Услуга».

Шаблоны страниц

Шаблон страницы — это определенный формат информации. Например, ваша «Домашняя страница», вероятно, будет отличаться от страницы «Контакты».

Ниже приведены некоторые примеры общих шаблонов страниц:

  • На главную
  • Сообщение в блоге
  • «Наша команда»
  • Архив новостей — список всех новостных сообщений сайтов в обратном хронологическом порядке
  • Контакт — может иметь карту и form

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

10 основных функций веб-сайта, которые должны отслеживать все фирмы

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

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

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

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

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

1. Перенаправления

Регулярно проверяйте свой сайт на наличие битых ссылок. Ссылки станут неработающими, если содержимое за пределами сайта перемещается или удаляется, или если вы редактируете или удаляете URL-адреса на своем собственном сайте. Это естественная часть веб-экосистемы; страницы приходят и уходят. Однако битые ссылки подрывают доверие пользователей и заставляют посетителей сомневаться в вашем профессионализме. Как эта фирма может помочь структурировать мой бизнес, если она не может поддерживать работу ссылок?

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

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

2. Метаописание

Метаописание — это фрагмент текста, обычно около 160 символов, который появляется под URL-адресом в списке вашей поисковой системы.Мета-описание — это бесплатная реклама. Это ваш шанс представить резюме, которое побуждает пользователей нажимать на ваше объявление, а не на другие.

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

3. Рабочая навигация

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

4. Оптимизация изображения

Изображения следует оптимизировать как минимум двумя способами.Проверьте наличие:

a) Сжатие изображений: все изображения следует экспортировать для Интернета и сжать до минимально допустимого размера. Большие изображения могут негативно повлиять на время загрузки страницы, что неудовлетворительно как для Google, так и для ваших посетителей.

b) Альтернативный текст: Альтернативный текст предоставляет браузеру описательную (альтернативную) информацию об изображении. Альтернативный текст должен объяснять изображение и его функции на странице. Например, если вы используете изображение в качестве ссылки, ваш замещающий текст должен сообщать посетителям, что изображение является ссылкой и куда.Людям с нарушением зрения, использующим программы чтения с экрана, будет прочитан замещающий текст, что повысит доступность вашего сайта.

5. Призывы к действию

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

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

6. Актуальные контактные данные

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

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

Используйте разметку схемы в своей контактной информации. Разметка схемы описывает ваш контент для поисковых систем.Google ищет эту разметку при создании местных списков.

7. Рабочие формы

Могут ли посетители действительно отправлять формы на вашем веб-сайте? Иногда ошибки, особенно ошибки капчи, могут помешать отправке формы. Отправляются ли материалы на правильные адреса электронной почты?

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

8. Аналитика

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

9. Читаемый контент

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

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

Пример из: https: // www.saxoprint.co.uk

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

10. Информация о вас

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

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


Кристен Френд — выпускница Университета Индианы 1999 года со степенью бакалавра журналистики и религиоведения.В 2003 году окончила Международную академию дизайна. Она является автором журнала Bigger Law Firm и арт-директором Adviatech (материнская компания Custom Legal Marketing). Когда она не заставляет юридические фирмы выглядеть на все сто, Кристен можно найти в походах на гору Тамалпаис или изобретении рецептов выпечки без глютена.

Шесть лучших функций веб-сайта Ценность людей

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

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

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

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

Наши результаты

  1. Треть людей (33%) проводят в Интернете всего 1-3 часа каждый день.
  2. Почти все (94%) считают удобную навигацию самой важной функцией веб-сайта.
  3. Большинство людей (83%) ценят, когда веб-сайт выглядит привлекательно и актуально.
  4. Половина пользователей веб-сайта (50%) навсегда покинут веб-сайт, если содержание неактуально.
  5. Люди одинаково ценят описания продуктов и визуальные эффекты. Почти все (91%) считают обе функции полезными.
  6. Две трети людей (67%) считают веб-сайты со ссылками на аккаунт компании в социальных сетях чрезвычайно или в некоторой степени полезными.
  7. Половина людей (50%) считает, что корпоративные блоги полезны.

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

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

Каждый третий человек (33%) будет проводить 1-3 часа в Интернете каждый день для досуга.

Почти две трети людей (63%) проводят в Интернете 4 и более часов в день для досуга. По верхней части шкалы, примерно каждый пятый человек (18%) проводит в Интернете 10 часов или больше. Что касается нижнего предела, 4% людей тратят менее одного часа своего свободного времени на просмотр веб-сайтов каждый день.

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

Чтобы предупредить волну антиэкранных настроений среди потребителей, такие компании, как Apple, Facebook и Instagram, упрощают пользователям возможность разорвать цикл привыкания своих приложений и устройств.

Например, последнее обновление iOS

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

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

Джордан ДеВрис — UX-директор BraveUX, компании, занимающейся UX-дизайном, в Вашингтоне, округ Колумбия. Он считает, что цифровое благополучие может привести к снижению посещаемости веб-сайтов.

«Клиенты, которые могли случайно натолкнуться на ваш веб-сайт, возможно, больше не будут там», — сказал ДеВриз.

Тем не менее, он видит потенциал цифрового благополучия в интересах бизнеса.

«С другой стороны, клиенты, ограничивающие свое время, скажем, на Facebook, могут быть голодны, чтобы заполнить этот пробел, ведущий их на сайты, которые они, возможно, не посещали в противном случае», — сказал ДеВриз.

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

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

Шесть лучших функций веб-сайта

  • Простая навигация
  • Модный, интуитивно понятный дизайн и удобство использования
  • Актуальное и авторитетное содержание веб-сайта
  • Изображение и описание продукта
  • Социальные сети как расширение бизнес-сайта
  • Блог компании

1. Удобная навигация — самая полезная функция веб-сайта

Люди предпочитают веб-сайты, которые просты в использовании и навигации.

Почти все (94%) считают, что удобная навигация — самая полезная функция веб-сайта.

Чтобы определить, какие функции веб-сайта люди считают полезными, мы объединили ответы респондентов, которые выбрали «чрезвычайно» или «в некоторой степени» полезные. Если респонденты оценили функцию как «немного» или «совсем не» полезной, мы не учитывали их ответы в нашем подсчете.

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

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

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

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

2. Веб-сайты должны иметь модный вид

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

Большинство людей (83%) считают, что красивый и обновленный внешний вид веб-сайта полезен.

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

Три самых популярных стиля веб-дизайна:

  • Плоский дизайн : Удаление падающих теней, градиентов и других текстур, чтобы объекты выглядели двухмерными
  • Скевморфный дизайн : Создание цифровых элементов, похожих на их аналоги в физическом мире, чтобы они выглядели более знакомыми
  • Rich Design : Делаем элементы более осязательными, трехмерными и удобными для людей, просматривающих веб-сайт

Вездесущие платформы, такие как Windows и Google, заставляют пользователей ожидать обновленных и интересных дизайнов, которые не будут подавляющими.Windows внесла свой вклад в минималистские, «плоские» тенденции цифрового дизайна, которые были популярны в последнее десятилетие.

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

Apple выпустила обновление программного обеспечения iOS 7 в 2013 году, изменив внешний вид значков и приложений Apple. Обновление удалило скосы и тени от значков на главном экране, оставив плоские кнопки позади.

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

Некоторые эксперты считают, что плоский дизайн уходит. Адам Конрад — основатель и руководитель компании Anon Consulting, которая работает с рынками и предприятиями электронной коммерции.

«Я думаю, мы немного переборщили с очень плоским дизайном», — сказал Конрад. «Первоначально он был популяризирован обновлениями Windows 8 в 2012 году, но пользователей определенно смутил резкий контраст со скосами, изогнутыми краями и падающими тенями».

Windows 7, показанная ниже, имела закругленные углы и скошенные кнопки на панели инструментов, включая круглую кнопку запуска вокруг логотипа Windows.

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

Элементы дизайна в Windows 8 отзывчивы, но выглядят более современно, чем в предыдущих версиях. «Плитки» заменили традиционные значки и пункты меню на панели инструментов. Даже культовый логотип стал плоским.

Однако резкий отход от прежнего дизайна вызвал замешательство у некоторых пользователей.

«Вы не можете точно сказать, являются ли элементы интерактивными, потому что у них нет скоса или тени», — сказал Конрад.

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

Дэн Берк (Dan Burke) — менеджер по UX и продукту в Getfused, агентстве цифрового маркетинга с полным спектром услуг в Бостоне. Он согласен с тем, что скоро мы увидим конец по-настоящему плоского дизайна.

«Плоскому дизайну не хватало устоявшихся визуальных возможностей для интерактивности», — сказал Берк. «Жертвовать доступностью ради привлекательности никогда не бывает хорошим компромиссом».

Burke предлагает альтернативу — представляет собой сочетание плоского дизайна и более традиционного, богатого дизайна , где элементы цифрового дизайна более тактильны и интуитивно понятны для пользователей.Он называет это сочетание «плоским» дизайном.

«Плоский дизайн» использует тонкие тени, градиенты и анимацию, чтобы придать экрану глубину, — сказал Берк.

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

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

3. Контент веб-сайта, подтверждающий авторитет бренда

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

Половина людей (50%) навсегда покинет веб-сайт, если его содержание неактуально.

Больше пользователей веб-сайта навсегда покинут сайт из-за нерелевантного контента, чем из-за элементов, прерывающих контент, таких как реклама (35%) или неинтуитивный дизайн (28%).

Существует три основных типа контента:

  • Основная информация о компании: Страница компании «О нас» или внешние ссылки на профили компании в социальных сетях
  • Описание продукта и изображения: Текст или изображения, демонстрирующие основные предложения компании
  • Блоги: Подробный письменный или видеоконтент, в котором обсуждаются текущие бизнес-тенденции, новости компании или другие идеи

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

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

«Часто компании создают дизайн без содержания», — сказал Рахул Конди, старший дизайнер UX в Lollypop Design Studio, дизайнерской фирме из Бангалора, Индия. Он видит, как дизайнеры создают каркасы или макеты веб-дизайна, не понимая, какой контент пользователь будет искать на этой странице.

«Например, они выделяют место для сообщений в блогах, но дизайнеры делают это, не понимая природу этого контента», — сказал Конди.

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

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

4. Внешний вид и описание продукта не менее важны

Люди думают, что изображения и описания продуктов / услуг одинаково полезны, когда они посещают веб-сайт компании.

Почти все (91%) считают, что и описания, и изображения полезны при просмотре веб-сайтов.

Стив Вест — старший дизайнер пользовательского интерфейса Small Footprint, компании по разработке программного обеспечения из Уинстон-Салема, Северная Каролина. Он говорит, что использование немаркированного пространства дизайна или «белого пространства» может помочь компаниям эффективно представлять как письменный, так и визуальный контент.

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

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

«На мобильном телефоне мы стараемся использовать одно изображение в столбце», — сказал Вест. «На больших экранах мы можем расширить это до трех или четырех строк и столбцов.Мы стараемся не перегружать чувства пользователя ».

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

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

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

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

5. Социальные сети как расширение веб-сайта компании

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

Более двух третей людей (67%) считают ссылки на аккаунты в социальных сетях чрезвычайно или в некоторой степени полезными

Почти 40% пользователей веб-сайтов (37%) считают, что ссылки на профили в социальных сетях чрезвычайно полезны.Только 13% считают, что они вообще бесполезны.

Ссылки на учетные записи в социальных сетях располагаются под описаниями и визуальными элементами любимых пользователями функций веб-сайтов, но над страницами «О нас» и блогами компании.

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

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

«Пользователям удобнее узнавать о компаниях и продуктах в социальных сетях», — сказал Конрад. «Компании будут использовать платформу социальных сетей только в том случае, если это поможет их бизнесу расти. Их присутствие в социальных сетях зависит от отрасли и от того, преобразуется ли платформа ».

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

Интеграция

с социальными сетями также предоставляет ценное социальное доказательство, позволяя пользователям проверять легитимность компании на разных платформах.Иконки для Facebook, LinkedIn, Twitter или Instagram сообщают людям, где они могут найти компанию в социальных сетях.

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

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

Например,

Facebook включает красочный текст, показывающий, как быстро компания реагирует на сообщения на своей странице.

Социальные сети также привлекают потенциальных клиентов из уст в уста. Почти три четверти людей (72%) порекомендовали бы компанию, если у них есть положительный опыт работы с этой компанией в социальных сетях.

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

6. Корпоративные блоги по-прежнему ценны

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

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

Почти четверть людей (23%) находят корпоративные блоги чрезвычайно полезными, но 21% людей вообще не находят корпоративные блоги полезными.

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

«Facebook, LinkedIn и Twitter теперь являются основными агрегаторами длинного контента компаний», — сказал Лейси. «Редко вы заходите на сайт и получаете их материалы напрямую. Вы просто переходите к одному источнику, например Facebook, и он собирает для вас всю эту информацию.”

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

Хотя Medium — это простой способ представить контент большему количеству людей, это переполненное поле с конкурентным алгоритмом, который определяет приоритеты статей на основе качества, актуальности темы и взаимодействия с пользователем.

Компании, которые размещают свои блоги на Medium, упускают важные преимущества SEO.Корпоративные блоги, размещенные на веб-сайте компании, помогают SEO, ориентируясь на длинные ключевые слова и предоставляя возможности как для внешних, так и для внутренних ссылок. Обратные ссылки повышают рейтинг сайта в результатах поиска Google.

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

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

Компаниям следует отдавать предпочтение предпочтительным функциям веб-сайтов для пользователей

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

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

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

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

7 качеств отличного веб-сайта

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

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

Итак, что же делает веб-сайт отличным?

1.Хорошо спроектированный и функциональный

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

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

2. Простота использования

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

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

3. Оптимизировано для мобильных устройств

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

4. Свежее, качественное содержание

Будьте лаконичны, интересны и новы. Используйте язык, который понятен вашей аудитории — избегайте жаргона, корпоративной лексики и сокращений. Объясните свое «почему». У посетителей короткий интервал внимания: пишите правильно, будьте точны, актуальны и регулярно обновляйте. (Здесь есть несколько советов.) Блоги и обновления в социальных сетях — отличные способы добавить свежий контент, который заставляет посетителей возвращаться и помогает стратегии SEO.Да, для того, чтобы сохранять свежесть, нужны небольшие инвестиции. Нет, без этого не обойтись.

5. Легкодоступный контакт и местонахождение

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

6. Ясный призыв к действию

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

7. Оптимизирован для поиска и социальных сетей

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

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

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

Это общий обзор семи глубоких тем! Эти основные принципы помогут вам начать получать больше пользы от своего присутствия в Интернете по мере продвижения к нужному вам отличному веб-сайту. Свяжитесь с нами для более глубокого погружения. Ideas On Purpose готов помочь.

12 Особенности отличного поиска по сайту

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

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

Что делает поисковую систему отличной?

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

1. Окно поиска

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

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

Веб-сайт Misco предлагает вам предложения по мере ввода в поле поиска, показывая вам список продуктов, которые, по вашему мнению, могут иметь в виду, категории, в которых они появляются, в которых вы, возможно, захотите просмотреть, и соответствующие названия брендов, чтобы вы могли видеть все, что указано в этот бренд. Однако, если я выберу категорию «Клавиатуры» ниже, я надеюсь, что это приведет меня на страницу результатов поиска «Клавиатуры», где будут перечислены все продукты в этой категории с Logitech в названии.Вместо этого я попадаю на страницу общей категории «Клавиатуры» без каких-либо признаков моего поискового запроса, что не так уж и полезно.

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

2. Категории

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

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

3. Фильтры

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

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

4. Функция сортировки

Помимо фильтров, у вас также должна быть функция сортировки. Пользователи могут захотеть отфильтровать по ценовому диапазону 10-20 фунтов стерлингов, но также просмотреть результаты, перечисленные с ценами, отсортированными от низкой к высокой. Другие способы сортировки могут включать в себя сортировку по алфавиту и от самых новых до самых старых продуктов.Если у некоторых товаров разные почтовые расходы, пользователи могут также захотеть отсортировать их по цене с почтовыми расходами или без них — это делает eBay, и это очень полезно для сравнения общей стоимости товаров.

5. Breadcrumb Trail

Как я попал на эту страницу результатов? Конечно, я искал «веб-сайты» в книгах, затем отфильтровал до «Компьютеры и Интернет», затем «Веб-разработка», затем «Веб-дизайн» и, наконец, «Веб-дизайн». Что ж, то, что я ищу, здесь нет.К счастью, я могу использовать эту удобную навигационную цепочку, чтобы снова щелкнуть категорию «Веб-разработка» и выбрать другой раздел. Где бы я был без следа из хлебных крошек? Застрял в категории «Дизайн веб-сайтов» и думаю, нужно ли мне начинать поиск с нуля, вот где.

6. Информация о продукте

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

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

7. Товары, которых нет в наличии

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

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

8. Количество продуктов на странице

Сколько продуктов отображается на страницах результатов поиска? Пользователи не хотят нажимать кнопку «Далее», чтобы увидеть сразу пять товаров. Они могут даже захотеть выбрать, сколько они могут видеть на странице. Позволь им.

9. Вводный текст

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

10.Ничего не найдено.

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

11. Хорошая уборка

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

12. Журналы поиска

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

Если вам нужна помощь в разработке вашего веб-сайта и вы бы предпочли, чтобы наша команда опытных веб-разработчиков занималась всем этим за вас, свяжитесь с нами!

Как уточнить объем вашего веб-сайта | Мичиганский веб-дизайн

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

Scope основан на целях вашего веб-сайта и потребностях ваших пользователей. В частности: как вы достигнете целей своего веб-сайта и удовлетворите потребности своих пользователей?

Давайте определим объем проекта вашего веб-сайта, разделив его на две части: функциональность и содержание. Функциональность относится к тому, что вы хотите, чтобы ваш веб-сайт выполнял (другими словами, как функции на вашем веб-сайте будут функционировать). Контент — это единиц информации, которые ваши пользователи могут использовать (т.е. текст, видео, аудио и т. д.).

Функциональность

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

Требования к данным

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

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

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

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

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

Требования к удобству использования

Юзабилити в веб-дизайне можно резюмировать как:

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

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

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

На веб-сайте DIY Pole Barns легко увидеть всю информацию, которую посетитель получит в своем предложении: цены разбиты, указаны общие инвестиции и включены затраты на рабочую силу. Заказчик может «обеспечить» ценовое предложение на 30 дней. Также есть удобная кнопка «Распечатать цитату» для пользователей, которым нужны печатные копии своих цитат.

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

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

Содержимое

Еще одна часть объема веб-сайта — это контент.Контент бывает самых разных форм и размеров — от больших фотографий до PDF-файлов и видеогалереи. Чтобы уточнить объем вашего веб-сайта, вы должны указать контент, необходимый для вашего веб-сайта.

Помните, ваш контент должен выполнять две задачи: (1) помогать в достижении целей веб-сайта и (2) давать пользователям информацию, которую они ищут.

При определении требований к содержанию вашего веб-сайта ответьте на следующие вопросы:

  1. Какой контент ищут посетители веб-сайта? Какого контента они ожидают?
  2. Как контент улучшает пользовательский опыт?
  3. Как контент будет использоваться для достижения целей веб-сайта?
  4. Кто отвечает за создание каждой части контента?
  5. Кто будет обновлять контент? Как часто будет обновляться контент?
  6. Какие типы контента будут на вашем сайте? (Текст, видео, аудио)
  7. Каков приблизительный размер каждого фрагмента контента? (Количество слов, размеры файлов, размеры в пикселях)

Не знаете, с чего начать? Возможно, вас заинтересуют статьи «Найти в Интернете», «Получить больше потенциальных клиентов» и «Увеличить объем продаж с контентом» для более глубокого изучения того, как контент на вашем веб-сайте помогает вам достичь целей вашего веб-сайта.

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

«Создание сайта, обеспечивающего доступ к маленьким эскизам, отличается от дизайна сайта, обеспечивающего доступ к полноэкранным фотографиям; заранее зная размер элементов контента, которые мы должны разместить, позволяет нам принимать разумные, обоснованные решения на этом пути.”Джесси Джеймс Гарретт, Элементы взаимодействия с пользователем: Область действия: Функциональные спецификации и требования к контенту

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

Рассылка опросов: Рассылка опросов существующим и потенциальным клиентам по почте, электронной почте или через веб-службу, такую ​​как SurveyMonkey.

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

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

(Подробнее см. Анализ целевого рынка от BigCommerce.)

Реалистичный охват веб-сайта

Вы можете обнаружить, что у вас много идей по функциональности и содержанию. Сохраняйте реалистичность объема, определяя (1) уровень приоритета; (2) создание, доработка, утверждение; и (3) текущее обслуживание.

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

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

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

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

Предотвращение ползучести прицела

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

Стоимость вашего сайта

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

Если вам нужна дополнительная информация о ценах на веб-сайтах, посетите эти ресурсы:

Почему дизайн веб-сайта так дорого стоит?

Сколько стоит веб-сайт (подкаст)

Цена против стоимости: история двух идей

Что такое индивидуальный дизайн веб-сайта?

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *