Pull to refresh

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

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


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



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

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

Читать дальше →
Total votes 247: ↑237 and ↓10 +227
Views 31K
Comments 175

Вход на сайт с помощью авторизационного файла

Website development *
ИллюстрацияРанее я уже рассказывал о том, как можно добавить авторизационные QR-коды, чтобы пользователи, которые уже вошли на сайт на компьютере, могли сразу же также авторизоваться на мобильных устройствах (например, на планшете или мобильном телефоне), и при этом не вводить ни адрес сайта, ни логин, ни пароль. Справа изображён ещё один вариант авторизации — с помощью файла.

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

Исходный код (Python/Django) простого варианта реализации можно посмотреть здесь. В каждом авторизационном файле хранится некоторая сгенерированная случайным образом строка символов, для которой в базе данных на сервере есть хэш, привязанный к определённому идентификатору пользователя. Таким образом, время, необходимое на вход, минимально: после того, как пользователь перетаскивает авторизационный файл на страницу, JS проверяет размер файла, вставляет содержимое в специальное текстовое поле и тут же отправляет форму — никаких дополнительных действий для входа не требуется, даже кнопку «Войти» нажимать не нужно.
Читать дальше →
Total votes 34: ↑25 and ↓9 +16
Views 13K
Comments 42

Авторизация с помощью QR

Usability *
Recovery mode
Приветствую тебя, уважаемый читатель.

Пришла ко мне как-то идея — сделать вход на сайт с помощью QR-кода. Поиск в сети дал несколько результатов:

  1. SQRL
  2. и другие — здесь уже провели поиск, поэтому не буду переписывать)


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



Всё это сложные хитрые клиент-серверные реализации и они, конечно, очень крутые. А вот ключевой момент моей yet another genius идеи:
Пользователь заходит на сайт в современном браузере (где поддерживаться камера и камера есть) и подносит QR-код к камере устройства. А в коде закодированы… правильно! — данные для входа (пара логин-пароль)… просто так, в незашифрованном виде, обычным текстом. Код считывается на стороне клиента javascript'ом, данные вставляются в форму тем же javascript'ом, форма авторизации отправляется javascript'ом. По большому счёту можно использовать и другие виды штрихкодов, но QR, как мне кажется, наиболее популярен (широко распространён) для подобных задач.

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

Наверное идея звучит глупо. Она слишком проста. Но позвольте мне рассказать почему она имеет право на жизнь.
Читать дальше →
Total votes 19: ↑5 and ↓14 -9
Views 20K
Comments 13

Заменит ли вход через аккаунт в социальных сетях привычную форму входа?

PAYSTO corporate blog Usability *
Вход на сайт через учетную запись всегда был проблемой для большинства пользователей. Создавая очередную учетку, юзер всегда сталкивается с кучей препятствий, которые часто становятся непреодолимыми. Стоит ли указывать свою основную почту или использовать почту для спама, достаточно ли здесь простого пароля или необходим пароль отвечающий специфическим требованиям, как при следующем посещении вспомнить какие именно данные были указаны на этом конкретном сайте?

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

Но давайте обратимся к статистике из зарубежных интернетов (данные от http://janrain.com/):
Читать дальше →
Total votes 24: ↑21 and ↓3 +18
Views 12K
Comments 10

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

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



У вас всегда получалось войти на сайт с помощью такой формы с первого раза? Не было никаких проблем? Лично для меня эти формы — боль и страдания. Я пользуюсь огромным количеством разных сервисов, поэтому далеко не всегда помню, на каких уже регистрировался и как именно. А еще у меня 5 адресов почты и минимум 6 соц. сетей. Вы знаете, я даже иногда удивляюсь, когда получается авторизоваться с первого раза. Знакомо? Под катом альтернативный подход к интерфейсу входа на сайт, частично облегчающий жизнь.
Читать дальше →
Total votes 25: ↑18 and ↓7 +11
Views 34K
Comments 60