Войти под своими руками

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

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

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

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

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

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

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

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

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

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

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

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

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

• Плагин jQuery для скрытия/открытия пароля

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

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

• Использование AJAX для получения данных о городе и области из почтового индекса

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

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

• AJAX Auto-Complete под jQuery

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

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

• Копирование адреса оплаты и адреса доставки при помощи jQuery
• Копирование введенных данных в другое поле ввода при помощи jQuery

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

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

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

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

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

• Влияние капчи на уровень конверсии
• На**й капчу

Простой способ побороть спам, при этом не теряя в конверсии — использование скрытого обязательного поля ввода, создаваемого JavaScript на стороне клиента. Спамботы не могут взаимодействовать с объектами Javascript на стороне клиента, это может сделать только пользователь. Такой способ достаточно прост и эффективен, и при этом он не раздражает пользователя. Единственный его недостаток в том, что использование JS в некоторых случаях может быть проблемным.

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

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

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

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

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

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

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

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

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

• Простая и эффективная выпадающая форма авторизации для jQuery
• Выпадающая AJAX форма авторизации для jQuery

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

• Как внедрить AJAX форму авторизации для jQuery в модальное всплывающее окно
• Туториал по созданию простого модального окна для jQuery

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

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

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

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

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

• Перестаньте скрывать пароли

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

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

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

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

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

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

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

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

Заключение

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

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

Источник

Построил баню под землёй своими руками и заснял на видео. Весь путь к мечте по шагам с нуля до парений

Перед Вами 22-минутное видео всего строительства бани под землёй своими руками — от раскопки котлована лопатой до парений с семьёй.

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

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

Я рассказывал о каждом своём шаге подробно в отдельном видео на протяжении всего строительства. В этих видео Вы можете найти ответы на все вопросы о стройке бани-землянки.

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

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

3. Спрофилировал доску для обшивки бани. Из простой доски 150*50 мм в сечении сделал профилированную (типа «планкен»). Работал дисковой пилой «Макита» с наклоном диска.

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

5. Отшлифовал все заготовки с лицевой стороны и получил красивую поверхность. Делал с помощью «болгарки» (УШМ), получилось классно.

6. Из подготовленных деталей собрал каркас моей бани-землянки. Перед этим утеплил баню снизу ЭППС-ом.

7. Обшил каркас бани скошенной доской. Получилась красивая и мощная обшивка внутри — то, что нужно для хорошей бани.

8. Сделал пароизоляцию бани — обернул всю деревянную конструкцию снаружи в несколько слоёв фольги на крафт-бумаге.

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

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

11. Установил дымоходы для будущих печей. Установка дымохода экспериментальная, не по нормам.

12. Чтобы не носить воду внутрь бани-землянки, установил бочку снаружи и смонтировал простейший водопровод. Работает, кстати, исправно!

13. Сделал красивый вход в подземную баню.

14. Засыпал баню-землянку с применением гидроизоляции и геотекстиля.

15. Подготовил слив для воды из бани (из парной/мойки) — чтобы вода от помывки быстро уходила за пределы землянки.

16. Сделал 2 простейших подиума под будущие печи под их форму. Нужен только отрезок линолеума.

17. Сделал электрику — собрал все провода, необходимые для освещения, розеток и нагрева воды, в электро-щиток. Теперь в бане есть свет!

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

19. Из простого осинового сучка сделал хорошую ручку для двери в парную. Просто, но что ещё надо! Да ещё и бесплатно!

20. Установил входную дверь в баню-землянку и окно в парной. Врезал замок, добавил ручку и повесил дверь на законное место. Окно, конечно, тоже есть!

21. Установил первую печь в подземную баню и организовал вентиляцию бани. Позже будет ещё одна печь в этой бане (основная), а пока буду пользоваться этой.

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

23. В ноябре месяце (спустя 4,5 месяца с начала стройки) мы провели первое тестирование этой необычной бани с друзьями. Проект удался!

24. Сделал простое, но полезное приспособление для прогрева ног. Пользуемся постоянно!

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

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

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

Источник