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

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

23

Однако существуют и более интересные способы того, как использовать маленький кусочек свободного пространства внутри всплывающего окошка на карте!

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

24

На сайте «Лето Банка» во всплывающем окошке на карте можно оценить работу отделения по 5-балльной шкале.

25

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

26

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

27

Выложите фотографию входа в офис компании

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

На фото показано, что вход в офис компании «БТИ про» находится под вывеской «Экспобанка».

28

На странице с контактной информацией «Центра медицинской косметологии» есть фотография входной двери.

29

Напишите, как добраться в офис

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

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

30

В «Газпром» можно не только прийти пешком, но и приехать на троллейбусе или автомобиле. Описание прогулок и поездок до офиса выложено на странице с контактами.

31

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

32

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

33

Уделите внимание текстам

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

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

34

Бренд вязаных шапок «Handy Hat» хочет быть ближе к своим клиентам. Заходите, говорит, к нам во Вконтактик.

35

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

36

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

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

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

На каждой странице сайта цветочной базы «Всё пучком» хорошо заметна ссылка на адреса складов.

37

В новостях о мероприятиях в ресторанном холдинге «Ginza Project» есть ссылки на контакты соответствующего ресторана.

38

Ссылка на адреса отделений «Лето Банка» оформлена картинкой и стоит обособленно от прочих ссылок.

39

На всех страницах сайта «Центра Международного Обмена» слева есть плашка с контактами. Она привлекает внимание и ведёт на страницу представительства компании в том или ином городе.

40

Разместите форму обратной связи

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

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

41

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

42

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

43

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

44

Дайте ссылки на социальные сети

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

Подготовьте версию для печати

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

48

49

Напомните о преимуществах компании

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

50

51

Продавайте

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

52

goodsite.cmsmagazine.ru

“Блог”, “Статьи” или “Новости”? Решаем в 3 шагах

Вы создаёте сайт, разрабатываете его структуру. Хотите подготовить один раздел для публикаций (новостей, обзоров и т.д.). И тут возникает вопрос: а как назвать раздел с публикациями: “Блог”, “Новости” или “Статьи”?

Первое, что надо сделать, чтобы ответить на вопрос, — разобраться в понятиях.

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

Пример: авторский блог о туризме есть на сайте SPATRAVEL.

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

Пример: на сайте travelsoft.by мы публикуем много новостей. Последняя — TravelSoft и «Белнефтестрах» разработали автоматический страховой модуль.

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

Пример: много статей публикуют на сайте tio.by. Из последних — Страхование туристов и что о нем нужно знать: объясняем на примерах.

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

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

Есть три популярные причины:

1. Вы хотите только рассказывать о внутренней “кухне” компании. Публиковать записи и фотографии о праздниках, турслётах и т.д.
2. Вы хотите только информировать клиента-читателя о чём-либо, помогать с выбором каких-либо услуг и т.д.
3. Вы хотите и то, и другое.

Если вы выбрали вариант №1, называйте раздел “Блог”.

Если вам больше понравился вариант №2, называйте раздел “Новости” и Статьи” в зависимости от того, чего вы планируете публиковать больше: новостей о произошедшем в мире или статьей.

А если вас привлекает вариант №3, и вы планируете публиковать и новости, и статьи, и репортажи, и посты о внутренней “кухне” компании — выбирайте “Блог”. К тому же, это слово короткое и не займет много места в меню.

Третий шаг — учтите нюансы и свои силы.

Если на сайте есть описание продуктов, а в нём — свои разделы и подразделы, то статьи надо публиковать с привязкой к этим продуктам, внутри сайта. Он может быть отдельным разделом, но не в главном меню, а, например, в разделе “Продукты”. И тогда раздел будет называться “Статьи о продуктах”. Вкладка “Статьи” будет находиться в разделе “Продукты”, а сами тексты будут “привязываться” к описанию конкретного товара или услуги.

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

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

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

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

Поделиться

travelsoft.by

Элементы интерфейса сайта и их названия

1. Главная
/
2. Блог
/
3. Элементы интерфейса сайта

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

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

Radiobutton — позволяет пользователю выбрать одну опцию

Checkbox — позволяет выбрать несколько опций

Select — позволяет пользователю выбрать одну опцию из выпадающего списка

Accordeon — элемент интерфейса состоящий из заголовков и скрываемого и открываемого контента. 

Слайдер — переключатель изображений (или другого контента) работающий автоматически или вручную

Контент — текст, изображения, видео, то есть наполнение сайта.

Popup — небольшое всплывающее окно в углу экрана.

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

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

Раздел — страница сайта. Тут все просто.

Шапка (хеддер / header) — самая верхняя часть сайта. Обычно в ней расположены логотип, меню и контактная информация. Шапка чаще всего бывает закрепленной, т.е она перемещается вместе с перемещением пользователя по странице.

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

Галерея — набор из нескольких изображений

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

Бордер — обводка элемента. Бывает solid (цельной), dashed (линиями) и dotted (точками)

Тултип (tooltip) — подсказка, всплывающая при наведении на элемент

Курсор Поинтер (Pointer) — тип курсора в виде руки с вытянутым указательным пальцем. Обычно появляется при наведении на ссылку

Курсор Текст (Text) — тип курсора, стандартный для редактирования текста

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

Пагинация — нумерация страниц, обычно отображенная как навигация в конце страницы

Списки — в веб интерфейсах присутствуют нумерованные списки (цифрами) , маркированные списки (точки, квадратики, кружки, черточки) и списки определений

Стрелочки — вид навигации.

Поисковая строка — строка для ввода поискового запроса

Плеер — элемент воспроизводящий аудио и видеофайлы

Ползунок — предназначен для ввода чисел в указанном диапазоне

Текстовое поле — поле для ввода текстовых значений

Поле пароля — поле для ввода пароля. Автоматически скрывает символы, заменяя их на точки.

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

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

Якорь — элемент интерфейса перенаправляющий вас по адресу и к конкретному элементу, указанному в нем

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

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

Переключатель (switch) — элемент интерфейса, который позволяет выбрать одно из состояний, чаще всего вкл/выкл

Алерт окно — всплывающее окно, блокирующее взаимодействие пользователя не только с элементами на данной страницы, но и в целом со всем браузером

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

Рейтинг (Rating bar) — элемент интерфейса показывающий среднюю оценку

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

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

borodaboroda.com

Обязательные разделы сайта

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

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

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

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

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

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

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

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

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

FAQ или ЧАВО (Часто Задаваемые Вопросы)

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

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

Контакты и Обратная связь

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

Плюсов данного решения несколько:

1. Во первых, на отдельной странице можно выводить контактные данные в определённом, структурированном виде, что в значительной степени повысить уровень их восприятия пользователем.
2. Во вторых данные на странице контактов можно будет оформить в специальном формате именуемом “vCard”. vCard это международный Интернет-стандарт, описывающий правила оформления контактных данных, с целью улучшить их индексацию поисковыми системами и привести их к единой, утвержденной форме, максимально понятной пользователю.
3. В третьих, на отдельной странице контактов вы сможете разместить статичную или интерактивную карту проезда к вашему офису или магазину. Интерактивные карты от известных поисковых систем google и yandex в значительной степени превосходят простое упоминание о физическом адресе владельца ресурса, и предоставляют информацию о его местоположение в более наглядном виде.
4. И в четвертых, в разделе контактов вы можете расположить форму обратной связи или форму онлайн заказа с индивидуальным набором полей. Форма обратной связи даст вашим посетителям возможность отправлять вам сообщения не прибегая к использованию сторонних ресурсов или специальных программ.

Карта сайта

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

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

hinex.ru