форма входа для входа на сайт

Юзабилити форм авторизации

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

У вас всегда получалось войти на сайт с помощью такой формы с первого раза? Не было никаких проблем? Лично для меня эти формы — боль и страдания. Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо? Под катом альтернативный подход к интерфейсу входа на сайт, частично облегчающий жизнь.

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

Фейл-сценарий №1. Случайная повторная регистрация

Фейл-сценарий №2. Повторный вход через другую соц. сеть

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

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

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

Более дружественный подход

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

Дальше самое интересное. Просим ввести эл. почту. Это ровно одно поле, не больше:

Жмем «Ввод» или иконку продолжения. Если в базе находится пользователь с такой эл. почтой, просим ввести пароль:

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

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

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

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

Источник

Упрощаем регистрацию и вход на сайт

Представляю вашему вниманию перевод статьи под названием «Innovative Techniques To Simplify Sign-Ups and Log-Ins» от Anthony T. Перевели в компании UXDepot специально для пользователей Хабрахабра с одобрением издания Smashing Magazine.

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

Форма авторизации на сайте Basecamp

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

Упрощаем форму регистрации

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

Спрашивайте имя пользователя уже после регистрации

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

Спрашивайте пароль только один раз

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

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

Автозаполнение поля «город» на основе почтового индекса

Автоподстановка в поле «страна»

Позволяйте пользователям скопировать платежный адрес из адреса доставки

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

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

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

Боритесь со спамом, пряча при помощи JavaScript текстовое поле, вместо использования капчи

Также вы можете использовать подход Honeypot Captcha — в форме создается поле, которое следует оставить пустым, а затем в CSS оно скрывается от пользователя (но не от ботов). И если при отправке данных в поле появляется какой-то текст, вы можете игнорировать этот случай заполнения формы, т.к. перед вами спам бот.

Упрощаем формы входа на сайт

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

Дайте возможность использовать адреса электронной почты в качестве логина

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

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

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

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

Автоматически устанавливайте курсор в первое поле формы

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

Позвольте пользователям видеть их пароли

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

Используйте иконку вопроса в качестве ссылки для восстановления пароля

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

Делайте кнопку «Подтвердить» такой же ширины, что и поля ввода

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

Широкая кнопка придает уверенности, и её трудно не заметить. Название кнопки также становится заметнее, поэтому пользователь лучше понимает действие, которое собирается совершить.

Разрешите пользователям логиниться с аккаунтов в Facebook, Twitter или с помощью OpenID

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

Разумеется, вы можете пойти дальше и использовать Facebook Connect для автоматического сбора и сохранения необходимых данных. Например, на сервисе Friend.ly — приложении для Facebook — в процессе регистрации пользователям достаточно просто нажать на кнопку «Регистрация» — вся информация о пользователе собирается автоматически. Такой подход сразу рождает много беспокойств по поводу приватности, поэтому, пожалуй, его использовать не стоит.

Заключение

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

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

Источник

Создаем всплывающее окно при входе на сайт на HTML и jQuery

Начало

Импорт шрифтов Google

Сброс CSS и стилей сайта по умолчанию

Ссылка на jQuery v1.10

Создание CSS-наложения

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

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

Сначала рассмотрим установку позиции и добавление цвета

Перед тем, как перейти к popup окну для сайта, пояснение Flexbox :

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

Стили панели входа на HTML и CSS

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

Большинство CSS-свойств очевидны. С помощью значения rgba мы еще раз установили цвет фона, что дает красивый непрозрачный эффект. border-radius задает закругленные углы контейнера формы входа.

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

Теперь нужно оформить внутри панели входа заголовок ( h3 ):

Создание кнопки закрытия

Перед тем, как сделать popup окно, нужно создать кнопку закрытия формы входа. Это делается следующим образом:

Вот объяснение кода:

Создание формы входа

Скоро перейдем к HTML popup окну. А пока CSS-код формы входа:

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

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

Стили кнопки входа

Стили кнопки не содержат ничего нового:

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

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

HTML-код формы входа

Полный HTML-код формы входа:

jQuery / Javascript

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

Мы используем fadeToggle при нажатии ссылки входа в систему. Для этого нам потребуется событие jQuery click :

Использование jQuery-функции preventDefault() позволяет остановить связь с перенаправлением пользователя. Это обеспечивает функционал для разработчиков, которые могут ссылаться на страницу входа:

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

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

Вот все весь код jQuery :

AJAX и HTML 5

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

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

Источник

Страница входа

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

Что такое страница входа на сайт

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

В социальных сетях

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

В веб-аналитике

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

Зачем нужны отчеты о страницах входа на сайт

сборе сведений о демографических, географических характеристиках пользователей, их интересах;

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

определении источника трафика (поисковик, социальные сети);

оценке отказов и анализе, направленном на выявление проблем в работе сайта;

устранении нерелевантных страниц, на которых происходит больше всего отказов.

Как составить отчет

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

В Яндекс.Метрике

Чтобы получить данные в Яндекс.Метрике, выберите сайт, по которому нужно получить отчет и перейдите в раздел статистики. Далее укажите: Отчеты — Стандартные отчеты — Содержание — Страницы входа. Здесь будет информация о действиях пользователей, совершенных с помощью этих страниц.

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

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

В Google Analytics

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

Как использовать полученную статистику на практике

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

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

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

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

Заключение

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

Источник

Узнать, как создать адаптивную форму входа с помощью CSS.

Форма входа

Нажмите на кнопку, чтобы открыть форму входа:

Создать форму входа

Шаг 1) Добавить HTML:

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

Шаг 2) Добавить CSS:

Пример

/* Окаймленная форма */
form <
border: 3px solid #f1f1f1;
>

/* Входы полной ширины */
input[type=text], input[type=password] <
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
>

/* Установите стиль для всех кнопок */
button <
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
>

/* Добавить эффект наведения для кнопок */
button:hover <
opacity: 0.8;
>

/* Дополнительный стиль для кнопки отмены (красный) */
.cancelbtn <
width: auto;
padding: 10px 18px;
background-color: #f44336;
>

/* Центрируйте изображение Аватара внутри этого контейнера */
.imgcontainer <
text-align: center;
margin: 24px 0 12px 0;
>

/* Аватар изображение */
img.avatar <
width: 40%;
border-radius: 50%;
>

/* Добавить отступы для контейнеров */
.container <
padding: 16px;
>

/* Текст «Забыли пароль» */
span.psw <
float: right;
padding-top: 16px;
>

/* Измените стили для кнопки span и cancel на очень маленьких экранах */
@media screen and (max-width: 300px) <
span.psw <
display: block;
float: none;
>
.cancelbtn <
width: 100%;
>
>

Создать модальную форму входа

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Пример

/* Модальный (фон) */
.modal <
display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полный рост */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
padding-top: 60px;
>

/* Модальное Содержание/коробка */
.modal-content <
background-color: #fefefe;
margin: 5px auto; /* 15% сверху и по центру */
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>

/* Кнопка закрытия */
.close <
/* Расположите его в правом верхнем углу за пределами модели */
position: absolute;
right: 25px;
top: 0;
color: #000;
font-size: 35px;
font-weight: bold;
>

/* Кнопка закрытия при наведении курсора мыши */
.close:hover,
.close:focus <
color: red;
cursor: pointer;
>

/* Добавить анимация масштабирования */
.animate <
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
>

Совет: Вы также можете использовать следующий javascript для закрытия модального, щелкнув за пределами модального содержимого (а не только с помощью кнопки «x» или «отмена», чтобы закрыть его):

Пример

Совет: Зайдите на наш учебник HTML Форма, чтобы узнать больше о формах HTML.

Совет: Зайдите на наш учебник CSSL Форма, чтобы узнать больше о том, как стилизовать элементы формы.

Источник