#статья дня
В недавней заметке про кнопки и role="button" я упомянул, что переключатели и чекбоксы — вещи разные. Вот, прикладываю обещанное объяснение: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
Используйте переключатель:
1. Для вызова мгновенной реакции системы на включение опции.
2. Для выделения несвязанных элементов в группе.
Используйте чекбоксы:
1. Когда форму после пометок требуется отправить отдельным действием.
2. Если требуется множественный выбор.
3. Для выделения связанных элементов в группе.
#css #checkbox #switch #ux
В недавней заметке про кнопки и role="button" я упомянул, что переключатели и чекбоксы — вещи разные. Вот, прикладываю обещанное объяснение: https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8
Используйте переключатель:
1. Для вызова мгновенной реакции системы на включение опции.
2. Для выделения несвязанных элементов в группе.
Используйте чекбоксы:
1. Когда форму после пометок требуется отправить отдельным действием.
2. Если требуется множественный выбор.
3. Для выделения связанных элементов в группе.
#css #checkbox #switch #ux
#игра дня
Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/
Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.
Удачи!
#game #ux #ui
Такое развидеть нельзя. Нет, это не описание, это буквально — название игры: https://cantunsee.space/
Хорошая тренировка ваших UI/UX способностей. Но есть нюанс — она направлена сугубо на Material Design, потому некоторые моменты в целом могут быть спорные. Но впечатление не портится.
Удачи!
#game #ux #ui
👍15🔥5
#статья дня
Злые Марсиане выпускают крутейшие статьи с завидной регулярностью. Вот очередная: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
На сей раз — про ошибки при разработке форм. И их, согласно статье, 11. Давайте кратко пробежимся.
1. Ставь autocomplete в нужное положение (username, current-password etc.).
Мы тут, кстати, обсуждали возможные значения и даже проблемы.
2. type="email", тут всё ясно.
3. Интерактивные элементы должны быть кнопками или ссылками, а не дивами (и ведь находятся же).
4. Не забывай про существование тега form (и такие тоже существуют).
5. Не используй placeholder как label.
6. Помни о label, особенно для галочек.
7. Состояние :focus должно быть визуально подтверждено.
8. Маркируй невидимые поля для скринридеров.
9. Не прерывай ввод внезапной валидацией (бесит).
10. Исключи случайную повторную отправку формы.
11. Помни о сетевых задержках.
В статье полно примеров и объяснений. Проверяйте свои формы, котаны.
#form #ux
Злые Марсиане выпускают крутейшие статьи с завидной регулярностью. Вот очередная: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
На сей раз — про ошибки при разработке форм. И их, согласно статье, 11. Давайте кратко пробежимся.
1. Ставь autocomplete в нужное положение (username, current-password etc.).
Мы тут, кстати, обсуждали возможные значения и даже проблемы.
2. type="email", тут всё ясно.
3. Интерактивные элементы должны быть кнопками или ссылками, а не дивами (и ведь находятся же).
4. Не забывай про существование тега form (и такие тоже существуют).
5. Не используй placeholder как label.
6. Помни о label, особенно для галочек.
7. Состояние :focus должно быть визуально подтверждено.
8. Маркируй невидимые поля для скринридеров.
9. Не прерывай ввод внезапной валидацией (бесит).
10. Исключи случайную повторную отправку формы.
11. Помни о сетевых задержках.
В статье полно примеров и объяснений. Проверяйте свои формы, котаны.
#form #ux
❤13👍8🔥5❤🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
А знаете ли вы, котаны, что такое безопасный треугольникпечали? Aka safe triangle.
Этим термином обозначается виртуальная область в меню, внутри которой можно безопасно водить курсором мыши без риска затронуть элементы ниже или выше. Смотрим на иллюстрации.
Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.
Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".
Например, всем понятно, что на мобильных устройствах кнопки должны быть чуть побольше, потому что мы в них тыкаем пальцем. Но в то же время многие люди на десктопе заставляют нас тыкать курсором в чекбокс размером 12х12 пикселей, хотя рядом есть большой лейбл.
В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size
Огромное количество примеров, просто новый уровень для автора. Моё увожение.
#css #ui #ux #safe #target
А знаете ли вы, котаны, что такое безопасный треугольник
Этим термином обозначается виртуальная область в меню, внутри которой можно безопасно водить курсором мыши без риска затронуть элементы ниже или выше. Смотрим на иллюстрации.
Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.
Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".
Например, всем понятно, что на мобильных устройствах кнопки должны быть чуть побольше, потому что мы в них тыкаем пальцем. Но в то же время многие люди на десктопе заставляют нас тыкать курсором в чекбокс размером 12х12 пикселей, хотя рядом есть большой лейбл.
В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size
Огромное количество примеров, просто новый уровень для автора. Моё увожение.
#css #ui #ux #safe #target
👍42❤10🤩2
#статья дня
Злые Марсиане выпускают крутейшие статьи с завидной регулярностью. Вот очередная: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
На сей раз — про ошибки при разработке форм. И их, согласно статье, 11. Давайте кратко пробежимся.
1. Ставь autocomplete в нужное положение (username, current-password etc.).
Мы тут, кстати, обсуждали возможные значения и даже проблемы.
2. type="email", тут всё ясно.
3. Интерактивные элементы должны быть кнопками или ссылками, а не дивами (и ведь находятся же).
4. Не забывай про существование тега form (и такие тоже существуют).
5. Не используй placeholder как label.
6. Помни о label, особенно для галочек.
7. Состояние :focus должно быть визуально подтверждено.
8. Маркируй невидимые поля для скринридеров.
9. Не прерывай ввод внезапной валидацией (бесит).
10. Исключи случайную повторную отправку формы.
11. Помни о сетевых задержках.
В статье полно примеров и объяснений. Проверяйте свои формы, котаны.
#form #ux #бородач
Злые Марсиане выпускают крутейшие статьи с завидной регулярностью. Вот очередная: https://evilmartians.com/chronicles/html-best-practices-for-login-and-signup-forms
На сей раз — про ошибки при разработке форм. И их, согласно статье, 11. Давайте кратко пробежимся.
1. Ставь autocomplete в нужное положение (username, current-password etc.).
Мы тут, кстати, обсуждали возможные значения и даже проблемы.
2. type="email", тут всё ясно.
3. Интерактивные элементы должны быть кнопками или ссылками, а не дивами (и ведь находятся же).
4. Не забывай про существование тега form (и такие тоже существуют).
5. Не используй placeholder как label.
6. Помни о label, особенно для галочек.
7. Состояние :focus должно быть визуально подтверждено.
8. Маркируй невидимые поля для скринридеров.
9. Не прерывай ввод внезапной валидацией (бесит).
10. Исключи случайную повторную отправку формы.
11. Помни о сетевых задержках.
В статье полно примеров и объяснений. Проверяйте свои формы, котаны.
#form #ux #бородач
❤20
#такое дня
Вы знали, что в macOS можно склеивать вместе PDF?
Всё, казалось бы, довольно логично и просто:
1. Открываешь файл в Preview
2. Выбираешь страницу после которой нужно вставить что-то
3. Кликаешь на пункт меню Edit → Insert → Pages from file, выбираешь файл
4. Сохраняешь
5. Ты великолепен
И всё? Да, но есть нюанс.
Я склеил 6 файлов по 180 Кб. Какого веса получился объединённый PDF?
Даю вам время подумать.
Кто там ответил "чуть больше мегабайта"? Ты считать не умеешь?
9. Девять мегабайт. Математика от Apple. После прогона через т. н. Quartz-фильтры в экспорте получилось пять.
В итоге я психанул и воспользовался официальным сервисом от Adobe, который тут же денег попросил.
Но мы же все знаем, что Apple славится подходом Think different. Иногда слишком different, правда (например, они внедрили сканер PDF в приложение для заметок, Notes).
И да, как оказалось, функция склеивания PDF встроена в Finder — аналог Проводника в Windows!
Открываем панель Preview (View → Show preview), выделяем наши PDF и просто нажимаем Create PDF. Результат — 700 Кб. Пушка.
К слову, если выделить, например, картинки — там появятся поворот, удаление фона (!), редактирование. Если видео — появятся Ножницы, чтобы это самое видео порезать. И, как оказалось, это можно добавить в т. н. Quick Actions и оно станет доступно в контекстном меню.
Я искренне не понимаю, почему это просто было не добавить в контекстное меню по-умолчанию, как поступает Windows. С другой стороны, в WIndows для множества плюшек нужны PowerToys.
Возможно, часть этого — следствие нынче популярного вирального маркетинга. Если бы это всё было интуитивно и просто — я бы не написал пост, правда, котаны?
P. S. А чтобы разделить PDF, нужно использовать интерфейс печати.
#macos #ui #ux #pdf
Вы знали, что в macOS можно склеивать вместе PDF?
Всё, казалось бы, довольно логично и просто:
1. Открываешь файл в Preview
2. Выбираешь страницу после которой нужно вставить что-то
3. Кликаешь на пункт меню Edit → Insert → Pages from file, выбираешь файл
4. Сохраняешь
5. Ты великолепен
И всё? Да, но есть нюанс.
Я склеил 6 файлов по 180 Кб. Какого веса получился объединённый PDF?
Даю вам время подумать.
Кто там ответил "чуть больше мегабайта"? Ты считать не умеешь?
9. Девять мегабайт. Математика от Apple. После прогона через т. н. Quartz-фильтры в экспорте получилось пять.
В итоге я психанул и воспользовался официальным сервисом от Adobe, который тут же денег попросил.
Но мы же все знаем, что Apple славится подходом Think different. Иногда слишком different, правда (например, они внедрили сканер PDF в приложение для заметок, Notes).
И да, как оказалось, функция склеивания PDF встроена в Finder — аналог Проводника в Windows!
Открываем панель Preview (View → Show preview), выделяем наши PDF и просто нажимаем Create PDF. Результат — 700 Кб. Пушка.
К слову, если выделить, например, картинки — там появятся поворот, удаление фона (!), редактирование. Если видео — появятся Ножницы, чтобы это самое видео порезать. И, как оказалось, это можно добавить в т. н. Quick Actions и оно станет доступно в контекстном меню.
Я искренне не понимаю, почему это просто было не добавить в контекстное меню по-умолчанию, как поступает Windows. С другой стороны, в WIndows для множества плюшек нужны PowerToys.
Возможно, часть этого — следствие нынче популярного вирального маркетинга. Если бы это всё было интуитивно и просто — я бы не написал пост, правда, котаны?
P. S. А чтобы разделить PDF, нужно использовать интерфейс печати.
#macos #ui #ux #pdf
❤16👍6🤩1
#библиотека дня
Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.
Если вы не знаете, что это — это комбинация клавиш, которая вызывает некое поле ввода, куда можно вводить названия пунктов меню, расширений, каких-то скрытых действий или настроек.
Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.
Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk
Буду у себя внедрять, задолбало мышевозить и придумывать на каждый чих по горячей клавише.
#command #lib #ui #ux #бородач
Мне очень нравится концепция командного интерфейса. Я даже не говорю сейчас о консоли (командной строке), я говорю о панели команд Sublime Text, VS Code и macOS Spotlight.
Если вы не знаете, что это — это комбинация клавиш, которая вызывает некое поле ввода, куда можно вводить названия пунктов меню, расширений, каких-то скрытых действий или настроек.
Почему нравится? Потому что поиск происходит в fuzzy-манере, мне не нужно помнить точное название пункта меню и/или команды. Я просто ввожу что примерно хочу сделать. Очень уютно.
Так вот, некоторые веб-приложения становятся настолько огромны, что было бы неплохо иметь подобный командный интерфейс. И вот сегодняшняя библиотека предназначена как раз для этого: https://github.com/albingroen/react-cmdk
Буду у себя внедрять, задолбало мышевозить и придумывать на каждый чих по горячей клавише.
#command #lib #ui #ux #бородач
👍10👎1
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
А знаете ли вы, котаны, что такое безопасный треугольникпечали? Aka safe triangle.
Этим термином обозначается виртуальная область в меню, внутри которой можно безопасно водить курсором мыши без риска затронуть элементы ниже или выше. Смотрим на иллюстрации.
Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.
Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".
Например, всем понятно, что на мобильных устройствах кнопки должны быть чуть побольше, потому что мы в них тыкаем пальцем. Но в то же время многие люди на десктопе заставляют нас тыкать курсором в чекбокс размером 12х12 пикселей, хотя рядом есть большой лейбл.
В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size
Огромное количество примеров, просто новый уровень для автора. Моё увожение.
#css #ui #ux #safe #target #бородач
А знаете ли вы, котаны, что такое безопасный треугольник
Этим термином обозначается виртуальная область в меню, внутри которой можно безопасно водить курсором мыши без риска затронуть элементы ниже или выше. Смотрим на иллюстрации.
Да-да, в вашей Windows или MacOS такое тоже есть. Проверьте сами.
Собственно, почему я о нём заговорил? А тут вышла новая статья Ахмада Шадида и посвящена она такой важной вещи как "область взаимодействия".
Например, всем понятно, что на мобильных устройствах кнопки должны быть чуть побольше, потому что мы в них тыкаем пальцем. Но в то же время многие люди на десктопе заставляют нас тыкать курсором в чекбокс размером 12х12 пикселей, хотя рядом есть большой лейбл.
В общем, с чего всё началось, зачем это нужно и как сделать сайты удобными — в первой интерактивной статье Шадида: https://ishadeed.com/article/target-size
Огромное количество примеров, просто новый уровень для автора. Моё увожение.
#css #ui #ux #safe #target #бородач
👍24❤7
#заметка дня
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!
Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.
Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?
А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...
А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.
Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.
Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.
А какой у вас опыт, котаны?
#sso #saml #signin #ux
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!
Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.
Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?
А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...
А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.
Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.
Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.
А какой у вас опыт, котаны?
#sso #saml #signin #ux
👍13❤2
#ссылка дня
Сегодня на повестке довольно упоротый проект. И упоротый он не только из-за названия — Modalzmodalzmodalz. Впрочем, сейчас сами поймёте. Ссылка: https://modalzmodalzmodalz.com/
Да-да, более дикого оформления я давно не встречал. Ну, разве что на сайтах с восьмибитными иконками.
Итак, чем же сайт заслужил попасть в рубрику? А тем, что он весьма оригинально напоминает нам: хватит лепить везде чёртовы модалки!
Модальные окна мешают читать контент. Модальные окна редко поддерживают правила доступности. Они буквально заставляют сделать какое-то действие, что нужно-то вообще не всегда. Они редко поддерживают браузерную навигацию, и то не всегда очевидно.
Что предлагают авторы?
Сайдбары, тосты, врезки, новые страницы в конце-концов и старый добрый Undo вместо подтверждения действия.
Ну и, конечно, дают советы о правильных модалках.
Хороший проект. Ещё бы чуть менее с дизайном упоролись... виральность зашла слишком далеко.
#ui #ux #modal
Сегодня на повестке довольно упоротый проект. И упоротый он не только из-за названия — Modalzmodalzmodalz. Впрочем, сейчас сами поймёте. Ссылка: https://modalzmodalzmodalz.com/
Да-да, более дикого оформления я давно не встречал. Ну, разве что на сайтах с восьмибитными иконками.
Итак, чем же сайт заслужил попасть в рубрику? А тем, что он весьма оригинально напоминает нам: хватит лепить везде чёртовы модалки!
Модальные окна мешают читать контент. Модальные окна редко поддерживают правила доступности. Они буквально заставляют сделать какое-то действие, что нужно-то вообще не всегда. Они редко поддерживают браузерную навигацию, и то не всегда очевидно.
Что предлагают авторы?
Сайдбары, тосты, врезки, новые страницы в конце-концов и старый добрый Undo вместо подтверждения действия.
Ну и, конечно, дают советы о правильных модалках.
Хороший проект. Ещё бы чуть менее с дизайном упоролись... виральность зашла слишком далеко.
#ui #ux #modal
👍12❤4
#такое дня
Есть две вещи, которые я очень не люблю в веб-приложениях.
Первая — однокнопочные шорткаты. Например, в Jiira — нажатие на W добавляет тебя в список следящих за таской людей. Зачем? Почему? Непонятно.
Возможно, кому-то и удобно, но моя природная неусидчивость заставляет меня иногда нажимать кнопки на клавиатуре просто так. Ну нравится.
Хабр тоже этим страдает. А в Твиттере — вообще аккордные сочетания клавиш (типа G-T), как будто я в каком-то сраном Emacs.
Не, есть, конечно, приложения, где это возведено в абсолют — вроде Vim. Но это прям идеология. От веб-страниц я такого не жду.
А вторая категория приложений — те, кто перехватывает стандартные шорткаты. Например, ConfigCat — менеджер фича-флагов — делает неудобоваримое с шорткатом поиска.
Зачем? Почему? У меня всего 3-5 флагов на экране, имейте совесть. А может, я ищу UI-элемент какой-то. Ведь всё, что есть на экране — это текст.
А самое смешное, что они записывают факт предупреждения в LocalStorage, и больше такое не показывают. Я прям не могу представить себе этот диалог между продактом и лидом разработки. Надеюсь, была немая сцена.
А что раздражает вас в UX известных приложений и сайтов?
#ux
Есть две вещи, которые я очень не люблю в веб-приложениях.
Первая — однокнопочные шорткаты. Например, в Jiira — нажатие на W добавляет тебя в список следящих за таской людей. Зачем? Почему? Непонятно.
Возможно, кому-то и удобно, но моя природная неусидчивость заставляет меня иногда нажимать кнопки на клавиатуре просто так. Ну нравится.
Хабр тоже этим страдает. А в Твиттере — вообще аккордные сочетания клавиш (типа G-T), как будто я в каком-то сраном Emacs.
Не, есть, конечно, приложения, где это возведено в абсолют — вроде Vim. Но это прям идеология. От веб-страниц я такого не жду.
А вторая категория приложений — те, кто перехватывает стандартные шорткаты. Например, ConfigCat — менеджер фича-флагов — делает неудобоваримое с шорткатом поиска.
Зачем? Почему? У меня всего 3-5 флагов на экране, имейте совесть. А может, я ищу UI-элемент какой-то. Ведь всё, что есть на экране — это текст.
А самое смешное, что они записывают факт предупреждения в LocalStorage, и больше такое не показывают. Я прям не могу представить себе этот диалог между продактом и лидом разработки. Надеюсь, была немая сцена.
А что раздражает вас в UX известных приложений и сайтов?
#ux
👍9❤4
#заметка дня
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!
Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.
Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?
А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...
А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.
Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.
Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.
А какой у вас опыт, котаны?
#sso #saml #signin #ux #бородач
А вы заметили, что всё больше и больше веб-сайтов и приложений предлагают ввести сначала почту, а уже потом, на отдельной странице — пароль?
Ведь это должно раздражать посетителей, мешает менеджерам паролей, как встроенным в браузер, так и системным и сторонним.
Задумывались ли вы вообще, зачем это надо?
Есть, очевидно, простой ответ: для защиты от тупого перебора паролей. Но так ли уж сложнее добавить обработку ещё одной страницы? Если уж я прошёл тест на робота, я и на второй странице его пройду. А вот посетители будут ныть!
И тут возникает логичный вопрос: «А будут ли они ныть»? И вот на него ответ не настолько очевиден.
Какова цель любого проекта? Набрать пользовательскую базу. Ну и удержать её. В итоге нам нужно, как минимум, увести посетителя на регистрацию. И тут начинается веселье...
Огромное число пользователей не видят разницы между Sign In и Sign Up. Ещё больше — боятся слова регистрация, Register here и так далее. А кто-то — просто забывает, что у них уже есть аккаунт!
Ситуация:
1. Перейти к созданию аккаунта
2. Введите адрес электронной почты
3. Ошибка: у вас уже есть аккаунт.
4. Перейти на страницу входа.
5. Снова введите адрес электронной почты.
6. Возможно, вы забыли пароль?
...и так далее.
Кстати, это Цукерберг описывал несколько лет назад. Забавно, что нынче у них снова и почта и пароль вместе. Рост прекратился?
А если вы строите веб-приложение для корпоративных клиентов — возможно, у вас SAML/SSO через одного из провайдеров. И в простейшем случае это Google, Facebook, VK, Microsoft, Apple — далее везде. Ну и вы начинаете ставить кнопки. Итого, поле и 4-5 кнопок. И в какой-то момент пользователь забудет, через что он вообще входил. Что-то опять ну такое...
А если показать и почту, и пароль — то SSO-пользователи просто введут свой пароль от корпоративного аккаунта. Знаем, проходили.
Вот и получается, что многие растущие (помним про Facebook?) сервисы предпочитают предложить посетителю ввести свою почту, а уже потом — разные ветки процесса входа. Либо SSO, либо пароль, либо — код на почту, либо Passkey.
Нормальным менеджерам паролей, кстати, всё равно. Тот же 1Password отлично справляется.
А какой у вас опыт, котаны?
#sso #saml #signin #ux #бородач
1👍9❤4🫡4