зачем нужен дизайн контактных форм примеры

BYYD. Блог

Дизайн мобильных форм: руководство для начинающих

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

Почему и чем дизайн мобильных форм отличается от десктопных?

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

Почему нельзя воспользоваться тем же макетом, что и для десктопов? Подумайте о разнице в размере дисплея. Например, Apple iPhone с экраном 4,7 до 6,1 дюйма, и настольным компьютером iMac с от 21 до 27 дюйма. С уверенностью можно предположить, что форма с экрана Mac никак не поместится на iPhone.

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

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

Дизайн мобильных форм: 9 правил

1. Сделайте как можно меньше полей

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

2. Автоматизируйте процесс

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

3. Используйте макет с одной колонкой

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

4. Сделайте ограничители для полей формы

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

5. Добавьте функцию проверки

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

6. Сделайте функцию сканирования карты

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

7. Объясните потребность в конкретной информации

При заполнении простой регистрации через e-mail или обычной регистрационной формы вы просите пользователи предоставить личную информацию. Дайте простое объяснение, зачем она нужна вам. Это повысит доверие пользователей.

8. Укажите состояние успеха или завершения

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

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

9. Обратите внимание на внешний вид формы

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

Проверьте свой макет по этому чек-листу.

Источник

Зачем нужен дизайн контактных форм примеры

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

Важность дизайна контактных форм

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

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

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

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

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

Welikesmall

Combadi

Denise Chandler

Hello Creative Media

Grain and Mortar

Fhoke

Sweet Basil

Social House Design

Let’s Travel Somewhere

Ghost Games

Cobble Hill

Brown’s Court Bakery

Evoke

Production Locations

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!

Источник

27 марта 2012 | Опубликовано в Веб-дизайн | 5 Комментариев »

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

Почему бы не оставить свои контакты на бумаге, как в старые добрые времена? Лаконично и понятно.

Форма контактов в виде открытки — оригинально и броско.

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

Оригинально. Согласитесь — напоминает чем-то наш рабочий стол.

Приятный внешний вид формы контактов настраивает на семейно-дружную атмосферу. Почтовый красный ящик — аллюзия к переписке по почте.

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

Простой, несложный дизайн формы контактов, и к тому же — аллюзия к переписке с живым человеком (портрет)

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

Заполните форму контаков и ваши письма отправят на нужный почтовый ящик.

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

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

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

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

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

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

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

Этот контакт — простота в лучшем виде, легкость и свежесть.

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

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

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

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

Красивое сочитание цветов, предельная ясность и четкость. При этом — отсутствие навязчивости.

25. Rescueseo

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

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

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

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

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

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

Кажется форма контактов на этом сайте ничем не отличается от другихб но это не так. Присмотритесь внимательнее.

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

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

Отправка сообщений в облака. В стиле этого проекта, а, главное — непринужденно и со вкусом.

37. Bio-Bak

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

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

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

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

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

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

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

Источник

Дизайн контактных форм

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

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

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

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

Welikesmall

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

Noearaujo

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

Combadi

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

Denise Chandler

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

Hello Creative Media

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

Fior di Latte

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

Built by Buffalo

Buffalo проделал хорошую работу по созданию баланса и наличие нулевого беспорядка на контактной странице.

Grain and Mortar

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

Fhoke

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

Sweet Basil

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

Social House Design

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

Let’s Travel Somewhere

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

Ghost Games

Cobble Hill

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

Brown’s Court Bakery

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

Evoke

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

Evolve Artistic

Evolve Artistic известно, что люди захотят узнать о проектах, поэтому они включили специальные указатели в контактную форму. Это гарантирует, что не будет никаких сюрпризов, при контакте потенциальных клиентов и все 100% серьезно.

Bang & Olufsen

У некоторых компаний, таких как Bang & Olufsen, есть различные точки «соприкосновения» (контакта). Чрезвычайно эффективно, предлагать контактные формы для каждого контактного проспекта. Здесь всё достаточно ясно для посетителей, чтобы понять, как маневрировать своими запросами.

Production Locations

У Production Locations есть много разных причин, почему клиенты могут с ними связаться. Они довольно комплексное агентство с большим количеством предлагаемых услуг. Таким образом, эта форма еще один спин на предоставление многочисленных контактов, которая эффективно работает и имеет смысл.

AFOBI

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

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

Источник