войти зарегистрироваться

Эти пользовательские интерфейсы whois

индекс
153,03

Отличная идея: цветовая индикация ввода пароля

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


Более подробно о идее в блоге автора. Попробовать идею на живом примере можно здесь.
Плагин для jQuery с реализацией идеи github.com/mattt/Chroma-Hash/ доступен по лицензии MIT.

PS: НЛО! Введи такую фичу на Хабре, поддержи оригинальную идею!
+115
30 июля 2009, 11:56
59
XaocCPS

комментарии (101)

  • Стоящая идея.
    • 3ds
    • 3ds
    • 30 июля 2009, 12:18
    • #
      • –10
    Непонятна закономерность появления цветов.
    • Для введенного пароля считается хэш который представляется в виде трех цветных полосок рядом с полем ввода пароля.
      • Может он имел ввиду, что неочевидно когда ты ввел правильный пароль а когда нет? )
        • Для тех, кто нормально различает цвета, все должно быть очевидно
          К тому же я уверен, что валидация формы там все равно есть
        • Все, понял для чего эта штука. Полезно только посмотреть правильно ли ввел подтверждение, вот если бы еще криптостойкость показывала!
          Например:
          на слабом пароле — полоски красного оттенка, на среднем — желтого, на сильном — полоски зеленого, тогда было б полезней ИМХО :)
          • А если не правильно ввели? сможете определить на каком символе ошиблись?

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

            По-моему эти танцы с бубном для создания подобного приема лишние.
          • Идея, мягко говоря, не новая и нужная лишь при смене пароля.
            • Ммм :-) Очевидно новая, а то чот у тебя каждый раз горит зелененьким это пенис энладжмент такой что ли? О, какой крепкий у тебя пароль! Вроде и день не зря прошел, угу?
        • Наверно, имелось в виду, что непонятно, цвета резко сменяются при вводе каждой новой буквы или они постепенно приближаются к вашему цветовому коду.
  • При вводе текста моргает и тем самым отвлекает. Очередная поделка.
    • Никто не мешает с помощью например scriptaculous сделать плавное изменение цветов.
      • Цвета и так изменяются плавно, само изменение немного отвлекает, а «поделка» стоящая, можно взять на вооружение, но дорабатывать идею нужно.
    • Отвлекает от ввода пассворда? ггг
      • В целом неприятно, когда что-то «сбоку» двигается
    • Возможно с первого взгляда, или даже со второго, это покажется непонятной и неудобной штукой. Однако, работая в Lotus Notes, где реализована подобная смена картинок при вводе пароля, я заметил, что это очень здорово помогает определить правильно ли ты набрал пароль. Даже при начале набора, по очередности смены картинок, можно определить правильный язык ввода включен или нет.
      Но, на мой взгляд, полезность данной фишки можно ощутить лишь в том случае, где вводить пароль приходится достаточно часто. В остальных случаях, эффективность этого решения не велика.
      • опа…
        вы имеете ввиду каритнку постоянно дребезжащей связки ключей?
        я был уверен что они хаотически мигают — именно для отвлечения внимания :)
        • Там здорово отвлекает внимание появление сразу двух символов X при нажатии на одну клавишу. Эта фишка неподготовленным людям способна вынести мозг. :)
  • Интересно, но не каждому юзеру будет очевидно для чего полоски нужны, и что они означают.
  • Это не очень хорошая идея. Во-первых, цветовосприятие у всех разное, а цвета не всегда яркие и контрастные. Во-вторых, хеш подразумевает огромное количество уникальных вариантов, а сможет ли человек разглядеть столько цветов? В-третьих, сама по себе идея не несет ничего полезного, а напротив — отвлекает человека: заставляя обращать внимание еще и на меняющиеся цвета.

    Лучше галочки справа от поля повторного ввода, которая появляется после правильного пароля, пока еще ничего не придумали.

    Я понимаю, что вышеописанным страшно оскорбил чьи-то чувства, но эффективность, скорость и доступность в интерфейсах гораздо важнее прикольных фич.
    • вам нужно запомнить и разглядеть только один цвет.
      из-за алгоритма, ошибка в один символ кардинально меняет палитру и ошибиться с проверкой будет трудно
      • * только один набор цветов
        • Ну вот смотрите. Для разных ресурсов я использую разные пароли. Соответственно, их у меня больше трех (в зависимости от доверия к ресурсу и способу использования). Это значит, что если внедрить этот способ на большинстве сайтов, я буду должен запоминать не двойную цепочку: ресурс -> пароль, а тройную: ресурс -> пароль -> цвет.
          • я согласен
            но в качестве оригинальной идеи на ограниченном количестве ресурсов я бы хотел видеть подобную вещь
          • Нет, цвет тебе не нужно запоминать.
            он сохраняется на подсознательном уровне.

            Ведь ты когда постоянно ходишь в душ, ты не задумываешься какой краник открывать. Ты уже заранее знаешь что, допустим, в правом горячая, а в левом холодная.
            А тут вдруг сделали приблуду, когда открываешь краник цвет в комнате начинает меняться. Чем больше открываешь горячую, тем больше комната становиться красной, ну а холодную – синей. И Какой-то умник взял и переставил краники, ты начинаешь открывать горячую, а цвет в комнате синий, … думаю дальше не стоит продолжать.

            Да и к тому же, как это тебя может отвлекать. Я свой пароль (из 14 символов) набираю за 2-3 секунды хоть закрытыми глазами.
            • Но конкретно в этом случае ваш пример не показателен. Дело в том, что человек подсознательно упрощает задачу, чтобы она отнимала как можно меньше ресурсов: умственных, физических — не важно каких. Но при этом он готов принять изменение, если оно улучшает решение той же самой задачи — сокращает время на ее выполнение или вносит какие-то другие бенефиты, перекрывающие неудовольствие от рутины.

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

              Давным-давно, в одной компании такие случаи называли «ползучий наворотизм» =)
      • Тем не менее, это усложнение интерфейса без ярко выраженной полезности.
    • Один хеш — один человек, в идеале. Разное цветовосприятие вообще ни при чём.
    • Согласен. Для тех, у кого все пароли разные, это бесполезное усложнение других способов индикации (зеленая рамка, галочка, плюсик и т.п.).
    • И ко всему — разные мониторы по-разному отображают цвета. Далеко не у всех стоят качественные матрицы.
  • Идея стоящая, но возникает вопрос, как часто вы набираете пароль и повтор больше 1 секунды… тогда генерация немного начинает тормозить! Первые пару раз может люди и посмотрят, а потом обращать внимание не будут… так что фича будет «не в коня корм»… боле простой вариант красный и зеленый будет смотреться более адекватно…

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

    Применительно к этой конкретной идее хотелось бы во-первых предостеречь:

    выдавать цвета не после каждой буквы, а после 2-3 секунд idle-таймаута, иначе при их очень большой информационной емкости можно вычислить пароль «из-за плеча» побуквенно без проблем (либо снизить инф.емкость);

    А во-вторых, пофантазировать о дальнейшем развитии:

    а) выдавать 1 цветовой тон (RGB), а не три полоски
    б) заполнять этим тоном всё поле ввода пароля.
    • я вот, глядя на эту картинку, ни подсознательно, ни сознательно не понял, что она означает.
      хотя ошибался паролем часто (рус/лат), особенно на чужих компах (ctrl-shift vs alt-shift)
  • Главное чтобы не две полоски :), а по делу мне кажется это излишне, быстрее нажать интер и понять что не тот пароль чем тратить время на сравнение полосок :)
  • По-моему идея так себе.
    Если вы ошибетесь на символ, то вы все равно не узнаете где именно ошибка и будете вводить заново.
    Эффектно — да.
    Но пользы не больше чем от стандартных средств, которые просто подсвечивают неверно заполненное поле.
  • Теперь увидев «цвет» пароля можно будет по пытаться подобрать его :)
  • Не нравится.

    Во-первых, забыть десять различных комбинаций оттенков на десяти сайтах еще проще, чем сами пароли.
    Во-первых, сама идея об индикации корректности ввода пароля довольно небезопасна (ИМХО). Необходимо предусматривать новые механизмы защиты от перебора паролей (теперь уже сама форма не сабмитится!).
    В-третьих, надо переходить на какие-то единые системы аутентификации (тот же OpenID), а не выдумывать новые проблемы.
    • Поддерживаю. Единая аутентификация с помощью OpenID или Google акаунтов поможет избежать от массовой генерации лишних паролей для разных ресурсов.

      Сколько времени можно было бы сэкономить, если не заниматься выдумыванием колеса или оптимизацией/автоматизацией ненужных процессов.
  • я думаю пользователь будет пролетать это сравнивание, хотя идея претендует на повышение юзабилити.
  • Картинки не грузятся — ошибка 504
  • «00000» — пароль России :)
    • к ядерному чемодану наверное…
    • выцвел :(
    • а «1» для Украины
      • блин «мамой клянусь» там зеленого цвета не было, а был светло серый, сливался с фоном…
    • 00000b — ближе )
    • Уж «w» больше похож на российский. Ваш вариант имеет скорее оранжевую полоску, чем красную.
  • Идея не особо свежа: в Lotus Notes давно реализован подобный механизм.
    Там по хэшу выбирается картинка из набора.
    Удобно кстати
    • Можно скрин? Вот я думаю в этом же направлении надо развивать идею. Не 3 полоски, а картинка-иконка из большой библиотеки
      • Вот примерно так выглядит. Картинка меняется с вводом каждого символа.
        На скрине картинка-мнемоник правильного моего пароля.

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

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

    А в данном виде пока не введешь весь пароль, не поймешь ошибся ты в начале или в конце.
    • Тогда же подберут пароль то. К тому же такая проверка возможна только если пароль хранится в открытом виде. В общем в твоем варианте тогда уж лучше совсем без пароля
      • Как Вы подберете, если третье поле сравнивается со вторым? С логином-то ничего не сравнивается. Это надо чтобы человек ввел логин, пассворд и ушел куда-нить, так все и оставив.
        • Ну так и буду подбирать. Количество вариантов из-за подсказки зеленым подсвечиванием уменьшает на несколько порядко и будет равно в худшем случае 10^количество_символов_в_пароле, ну среднее я думаю гораздо меньше
      • Не много не понял, каким образом его подберут?
        Ведь в 99% случаев поле confirm password есть только при регистрации.
        • Извини, я просто немного отвлекся и гвоорил о случае ввода пароля не при регистрации, а при авторизации.
    • А еще чтобы под звездочками было видно, что ты набираешь. А в идеале — чтобы пока набираешь, появлялся выпадающий список, этакий suggest list. Правильно, нечего прятать пароли!
      • кстати, не такая и бредовая идея
        сами-знаете-кто предложил (можно я не буду цитировать нецензурщину:)), что рядом с полем ввода пароля должен быть чекбокс «я сижу в пустой комнате один, и за мной никто не следит», который станет отображать вводимые символы
    • Это нереально с точки зрения безопасности. Так получается нужно всего несколько тысяч комбинаций, а то и того меньше.
    • ага, сидишь, и подбираешь пароли чела…
  • Реализация подкачала, но давайте об идее. Пользователь будет видеть, что цветовая гамма какая-то не такая и повторит ввод. Да? Должно работать. Но, значительно полезнее было бы сделать индикатор языка и Caps Locka. Не говоря уже о том, что большинство паролей сохраняют в браузер и это правильно и удобно.

    Кстати, про снижения безопасность — бред, кто об этом пишет ничего не понимает.
    • И ещё индикатор раскладки.
  • Идея хороша! Беру на вооружение.
  • блиииин =))))
    если ввести слово «зло» в поле пароля — видим флаг Украины.
    Ну за что вы так? =(

    «йцукенгшщз» дает французский флаг, повернутый на 180 ;)

    «фывапролджэ\» — опять Украина, только с зеленой полоской…
    • лол) ну, так так оно и есть
      пс
      я сам из киева
  • а помоему лучше нахер звездочки убрать. очень удобно будет.
  • Я заметил, что на изображение не влияет ник. Вот можно удивится, когда у знакомого такие же цвета обнаружишь :).

    Идея понравилась, своей необычностью и оригинальностью. Теперь подбирать пароли стало нагляднее…
    • сделайте, чтобы влиял. это только идея, развить ее можно в любом направлении :-)
  • Как то тема интересно развивается :) к тому что «да ну их эти пароли» :)
  • интересно…
  • А не лучше-ли сделать галку «У меня за спиной никого нет»? И два раза вводить не надо. Я считаю, что с этой паранойей давно пора покончить.
    • согласен на все 100%. вообще бред — как часто у нас действительно кто-то стоит за спиной? редко. очень редко. но из-за этих редких моментов мы мудохаемся с этими звездочками.
      • Система двойного ввода пароля при регистрации сделана для того чтобы уменьшить возможность ошибки при вводе пароля.
        • Тогда чем логин провинился? его тоже можно неверно ввести.
        • Угу. А так поставил галку — и сразу видишь, что вводишь. По сути, эта система не спасёт от сценария, когда ты в другой раскладке два раза по клавишам одинаково попал.
          • Ну так сложилось традиция разработки ui, заметь например при обновлении страницы, те поля что password обнуляются, когда как другие сохраняются. Вообщем так все привыкли, и большинство чуствует себя неуются когда пароль идет в откртом поле.
            • Это вопрос привычки, не более. Нудисты, например, отлично себя без одежды чувствуют. :) Значит, чувство стыда, возникающее при публичной неге, искусственно. Так и тут.
    • Если кто не помнит — напомню (на всякий случай), что именно так сделано в WinRAR: И правильно сделано.
      • Уж не потому-ли, что написан русскими? :)
    • в уже трижды упомянутом выше лотусе при регистрации пользователя пароль вводится в открытую.
      администратором, что, видимо, подразумевает, что админ не сидит на проходной.
  • Привязка цвета к паролю поможет вспомнить пароль на нечасто посещаемый сайт, т.к. на странице с напоминанием пароля можно этот самый цвет показывать. При условии использования нескольких одинаковых паролей для сайтов, человек скорее всего вспомнит свой забытый пароль. Только для запоминания лучше один цвет а не 3 полоски.

    Если дальше развивать идею то можно давать пользователю самому устанавливать цвет для своих паролей, или загружать мелодию, или видео… А то контрольные вопросы иногда очень сложно вспомнить. А цвет (мелодия, видео...) запустит мыслительный процесс.
  • какая-то дизайнерская игрушка, не более
    вот если бы пароль цветами вводить вот это было бы круче!
  • Рассмотрим категории юзеров:

    1. пофигисты — используют простейший пароль-сочетание рядом стоящих клавиш — 12345, qwerty и т. д.

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

    3. умники-параноики — генерят нечеловеческие последовательности символов которые воспроизвести удается только методом копипасты из спецальной программы хранения паролей

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

    Я в качестве прикола предлагаю ставить пиктограмму животного. Ввел первый пароль, тебе показал маленького серенького суслика. Смотришь — ага суслик, мне нравится! И радуешься. В повторе пароля ошибся, он тебе белочку показывает. Думаешь, нет мой пароль маленький серенький суслик, значит я ошибся с повтором. :-)

    Можно даже овощи-фрукты использовать (морковки, сливки всякие).

    И еще вопрос: а что означает «вы сможете сразу узнать ошиблись вы или нет при первом вводе пароля»? Давайт логически порассуждаем когда мы вводим два пароля? При регистрации или изменении! При регистрации мы указываем два НОВЫХ пароля, т.е. ошибиться в принципе нельзя! При изменении, указываем старый, это правда, но тут то в примере только новый пароль и подтверждение…
    • Идея в том, что после регистрации необходимо будет неоднократно вводить этот пароль (при каждом логине). Предлагается при вводе пароля показывать картинку, а пользователь будет сравнивать ее с той, которую получал при регистрации.
  • Лотус Нотус с картинками вместо цветов поэффектнее смотрится.

    А вот ещё идея: картинка, полученная на основе пароля, выносится в шапку сайта (так чтобы была не очень заметна, но тем не менее была всегда на виду). При многократном взгляде на картинку, она отложится в подсознании, поэтому если пользователь забудет пароль, ему будет легче вспомнить его по генерируемой картинке, не отправляя каждый раз реквест на сервер.
  • изменение цветов при наборе пароля можно будет снимать на видео и подбирать по хешам нажимаемые клавиши
    • Да, хорошо бы делать задержку отображения квадратиков. Но будет падать удобство пользования.

      Хотя тогда уж лучше снимать клавиатуру и, соответственно, нажатия кнопок. А ещё можно перехватить пакет (если он не по https) — и никаких камер не понадобится.
  • а мне просто нравится :)
  • Каких только извращений не придумают вместо того чтобы наконец показывать явно паролей без звёздочек, а на случай поставить галку «за моей спиной кто-то есть, не показывайте пароль явно». Закапывать однозначно, да ну и так очевидно, что никому это не нужно.
  • чем это лучше надписи «пароли не совпадают»?
  • Я когда ввожу пароль не смотрю правильно ли он введен, уже ввожу по привычке и очень редко ошибаюсь.
  • Мне нравится такая идея.

    Как вариант можно раскрашивать каждый символ * после ввода.
  • Цветовая дифферинцация паролей:
    Желтый пароль — два раза «ку».
    • d_a
    • d_a
    • 31 июля 2009, 01:43
    • #
      • –1
    Ага. Ввести ее повсеместно, и вместо хитрых кейлогеров надо будет просто написать обертку для ГетПиксельКолор.

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

    Думаю полезнее и намного проще не скрывать пароль, как предложил Нильсен.
Только авторизованные пользователи могут оставлять комментарии. Авторизуйтесь, пожалуйста.