Маючи 42% голосів у Twitter,
наша тема місяця зосереджена на Логін.
Вхід — це англійський термін, що позначає дію, яку користувач повинен виконати на початку сеансу, щоб отримати авторизований доступ.
Частіше вхід включає в себе дії як реєстрації, так і входу.
1- КЛАСИКА
Ось кілька дуже поширених прикладів сторінок входу. Користувачеві не залишається нічого іншого, як зареєструватися та ввійти. Часто при першому запуску програми вибір вже зроблений за ним, і він приходить безпосередньо під час входу для реєстрації. У цьому випадку доступне невелике посилання для реєстрації:
Дуже швидко сторінка входу була визначена як справжня болюча точка з кількох причин:
– Запитувана інформація часто не пов’язана з використанням програми.
– Постійно надавати одну й ту саму інформацію (прізвище, ім’я, електронну пошту тощо) під час реєстрації – це довго і нудно.
– Користувачу дуже часто здається надто захоплюючим / болючим давати багато інформації під час реєстрації, коли він ще не знає програми.
Ось чому ці тунелі входу вдосконалилися з часом. Рекламодавці виключили якомога більше полів, щоб встановити першу точку хліба. Сьогодні, за винятком особливих випадків, для реєстрації потрібні лише електронна пошта та пароль.
У другій частині ми побачимо рішення, передбачене для хліба другого пункту, а в частині третій — для третього.
2- ПІДВ'ЯЗНЕНИЙ
Як ми щойно сказали, більшість логінів вимагає лише електронної пошти та пароля. Якщо вона стала набагато простішою з точки зору запитуваної інформації, вона також стала зайвою; на жаль, користувачі мало цінують надмірність. Звідси необхідно «автоматизувати» цей процес.
Тому логічно, що Facebook і Google цілком законно нав’язали себе надавати свою інформацію замість користувача, а також бути гарантом для рекламодавця. Останнім часом кнопки Facebook Connect, Google Connect, Linkedin Connect, підключення пошти та інші кнопки дуже швидко зросли. Деякі навіть пропонують соціальний вхід перед класичною формою:
3- РЕЖИМ ГОСТЯ
Третій хлібний пункт є найскладнішим для вирішення. Це також досить класичний «конфлікт» між UX та бізнес-експертами. Якщо перші вважають користувачів пріоритетом, другі думають про дані. Конкретно, UX погоджується дозволити користувачеві орієнтуватися та спокушатися перед потенційною реєстрацією, в той час як бізнес-експерти хочуть за будь-яку ціну збирати інформацію та залучати користувача, навіть збираючись «примусово» реєструватись у програмі.
Хорошим прикладом є Candy Crush. Вони одними з перших дозволили користувачам грати, не змушуючи його реєструватися. Правда, вони часто рейзують, але ви можете грати роками, не реєструючись і не даючи жодної інформації. Іншим прикладом є банківські програми. Більшість 18-35 років обирають свій банк на основі заявки. Декілька візуальних зображень на жалюзі недостатньо, демо-режим є найкращим інструментом для найму.
Деякі програми пропонують демонстраційний / гостьовий / анонімний режим, але це концепція, яка надзвичайно добре відповідає потребам користувача: спробуйте перед реєстрацією.
4- ВІДЕО
З пам’яті UX мені здається, що це був ініціатором Airbnb. Вони запропонували відео на домашній сторінці, яке почалося не відразу. Вау-ефект був гарантований. Ці відео з’явилися на багатьох сторінках входу. Але анімувати сторінку недостатньо, щоб здивувати користувача. Існують правила, яких слід дотримуватися, головним чином, щоб не заважати користувачеві. Не заважайте, тобто відео чи анімація повинні бути м’якими, щоб не стати основним елементом; крім того, поля повинні бути чітко ідентифіковані. Ось два поганих приклади, перший тому, що відео бере на себе дії, які потрібно виконати, а другий тому, що поля стало важко ідентифікувати:
Ми могли б згадати Invision, який також пропонує занадто напружене відео, яке заважає користувачам, які хочуть ідентифікувати себе.
На щастя, є багато хороших прикладів, ось їх невеликий огляд:
Ось приклади відео. Як ви зрозуміли, відео на сторінці входу є дуже цінним елементом, з іншого боку, дотримуйтесь певних принципів.
МЕНШ ДОБРІ ПРИКЛАДИ:
Важко зрозуміти, що вам потрібно натиснути на сову (або сову, ми не знаємо), щоб відкрити сторінку входу:
Ось два приклади з того самого конструктора, де навігація між входом і реєстрацією виконана особливо погано. Текст вертикальний, анімація ускладнена, а дизайн застарілий. Можна навіть подумати, що соціальні логіни неактивні:
Ось приклад, коли поля важко знайти, оскільки кольори занадто яскраві, елементи занадто тонкі, а контраст занадто низький:
Нарешті ми станемо перфекціоністами. У наведеному нижче прикладі ми втрачаємо клік, щоб вибрати дію. Було б розумніше змусити користувача прийти на створення облікового запису, якщо це перше відкриття, або під час входу, якщо він не перший. Крім того, кольори занадто близькі. Соціальні логіни ще менш помітні:
НАШ УЛЮБЛЕНИЙ
Ось наш фаворит місяця щодо входу. Ідеальне володіння інтеграцією відео з гарантованим ефектом сюрпризу. Невелика затримка, щоб дозволити користувачеві стати власником сторінки, потім легкий рух, щоб викликати сумніви та привернути увагу.
Ось і все на березень цього місяця!
До зустрічі наступного місяця у новому випуску UX ANIMATIONS!
(не забудьте проголосувати, натиснувши ICI для теми наступного місяця).
Стефан Чілтон, UX-євангеліст @UX-республіка
ДИЗАЙН СПРИНТ: ІНІЦІАЦІЯ І СПОСІБНЕННЯ # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine
UX-ДИЗАЙН: ОСНОВИ # Бельгія
UX-RESPUBLIC Бельгія
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre
МЕНЕДЖЕР ТЕГІВ GOOGLE # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine
GOOGLE ANALYTICS 4 # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine
ДОСТУПНИЙ ДИЗАЙН UX/UI # Бельгія
UX-RESPUBLIC Бельгія
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre
ДОСВІД МАПІРОВАННЯ # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine
ДОСЛІДЖЕННЯ КОРИСТУВАЧІВ: НАВЧАННЯ ВІД КОРИСТУВАЧІВ # Бельгія
UX-RESPUBLIC Бельгія
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre
ТЕСТУВАННЯ КОРИСТУВАЧАМИ: ДІЗНАЙТЕСЯ ТА ПОКРАЩУЙТЕ # Бельгія
UX-RESPUBLIC Бельгія
12 avenue de Broqueville - 1150 Woluwe-Saint-Pierre
ФАСИЛІТАЦІЯ СЕМІНАРУ # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine
LEAN UX: ПРОЕКТУВАННЯ ПРАВИЛЬНОГО РІШЕННЯ # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine
ПОЛЬОВЕ ДОСЛІДЖЕННЯ: БЛИЖЧЕ ДО РЕАЛІЙ ВАШИХ КЛІЄНТІВ # Париж
УСМІШКИ Париж
163 quay of Doctor Dervaux 92600 Asnières-sur-Seine