Правильная клавиатура для информационных терминалов

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

Я занимаюсь приложениями исключительно для информационных терминалов и постоянно наблюдаю взаимодействие людей с разными приложениями в разных ситуациях. Я выделяю 5 важных отличий таких устройств от компьютеров и мобильных устройств:

1. Публичность (вы пользуетесь терминалом вне зоны личного комфорта);
2. Краткосрочность использования (вы пользуетесь терминалом несколько минут);
3. Четкая специализация (вам доступен ограниченный набор функций);
4. Привязка к физическим особенностям корпуса (сравните стол и вертикальную панель);
5. Бесполезность (вы не получаете ощутимой пользы (в отличие от банкомата или билетного терминала)).

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

Добиться правильного результата просто – убрать всё лишнее. Самый общий пример – экранная клавиатура. На информационном терминале она, как правило, выполняет очень узкую функцию: заполнение короткой анкеты, ввод e-mail, поиск по базе данных. Около года назад, мы совместно с архитектором Эдуардом Хайманом, разработали «правильную» клавиатуру для своих информационных терминалов. Позвольте использовать её для иллюстрации заявленных тезисов.

Стандартная клавиатура Windows 7. Это универсальная клавиатура.
image

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

Для адреса почты вам нужны только латинские буквы, цифры и 4 символа: дефис, подчеркивание, точка и @. Зачем держать отдельный модальный режим shift для подчеркивания и @? Кому нужны заглавные буквы в адресе? Кто пользуется табуляцией?

Обратите внимание на блок из трёх кнопок: delete и стрелки влево-вправо. Это подвижный блок – он всегда находится под курсором.
image
В теории, название клавиши delete здесь ошибочно (правильно – backspace). На практике – никто не ошибается в функционале, потому что кнопка всегда находится слева от курсора, а delete более ясное название, чем backspace. Курсор перемещается нажатием на нужную букву в строке, а стрелки работают как вспомогательный элемент: так быстрее подвинуть курсор на один-два символа.

Цифры расположены справа, как на расширенных клавиатурах. Когда цифры расположены в верхнем ряду, ноль оказывается над буквой «o». Это приводит к колоссальному количеству опечаток 0-о. А если используется русская раскладка (например, для ввода имени), цифры 7, 8 и 4 заменяются на Х, Ъ и Э соответственно.

И наконец, «одноразовая» и контекстные кнопки. @ используется в адресе один раз. Как только вы нажали кнопку, @ появилась в строке, а кнопка исчезла. Справа появляются контекстные кнопки с адресами почтовых сервисов gmail.com, mail.ru и т.д. Как только вы начали вводить имя сервера, контекстные кнопки меняются на зоны .com .ru .org и т.д.
image

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

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 60

    +22
    1. на вашем варианте я очень очень доолго искал, как же мне ввести собаку

    2. а почту в домене.рф мне вводить через xn--plai…?
      +15
      Зачем вообще заводить почту в домене.РФ?
        +12
        понятно что незачем. но чисто теоретически?
          –1
          Можно и зайца научить курить (: ага
        +1
        спасибо. да мы тоже долго думали по поводу собаки, но это общая проблема для любой непривычной клавиатуры. на практике это положение оказалось удобнее, чем, например, слева. утверждение основано исключительно на наблюдении за пользователями.
        контекстные кнопки у нас настраиваемые. если терминал будет установлен на корпоративной вечеринке, то там будет кнопка korporativniy-email.com, как только почта.РФ перестанет быть экзотикой, появится и эта кнопка
          +1
          я бы не искал «лучшего» решения, а сделал бы её и тут и там.
            0
            делали — только путает у людей возникает вопрос «а какая правильная?» лично я не понимаю этого вопроса, но факт есть))
        +16
        Почему-то мало кто любит плюсики в почтовых адресах, вы в их числе. иногда за это хочется убивать
          +1
          «ногда» лишнее в зачеркнутом.
            0
            спасибо, но ни разу за год не сталкивался с проблемой + в адресе. были всякие вопросы по валидации адресов, но + ни разу, честно.
              +4
              Ну у меня вот регулярно возникает желание выдавать всем уникальные образования от адреса (через RFC 5233), а потом эти все ругаются, что у меня адрес, видите-ли, невалидный :(
                0
                Вопросы по валидации адресов нужно собирать не от юзеров, а от нормативной документации, то бишь из RFC. Неприятие плюса (или, скажем, апострофа) снижает респект к сайту (терминалу и т.п.) на стопицот учётных пунктов.
                  0
                  Ну да. Можно ещё вспомнить известный регексп :) Но мнение «пользователей» по идее разработчиков смотивирует IRL сильнее, чем абстрактный далекий rfc
          +2
          Вот нигде в терминалах не видел кнопки что-то вроде «back». Ну т.е. отменить последнее действие. Допустим, я несколько раз (по ошибке) нажал «delete», и, чтобы не набирать заново три ошибочно удаленные буквы, достаточно было бы вернуть строку в состояние до нажатия «delete». Мне кажется это логичным.
            0
            согласен, что это общая проблема. но большинство приложений пишутся-делаются специально (тут не важно на чём именно пишутся), и отдельно отрабатывать буфер отмены не всегда возможно.
            +4
            А вот я бы с delete'ом точно бы ошибся. По крайней мере, если бы мне нужно было поменять букву в середине уже набранного текста. Уж лучше erase в стрелке влево написать. Или что-нибудь подобное. Но никак не delete, который у многих ассоциируется с удалением следующего символа.
              +2
              Мне тоже кажется, что «delete» не лучший вариант. А не кошерней ли убрать стрелки вообще (тачскрин же ведь), а delete переделать на пиктограмму (в виде стрелки влево, например, как на клавиатуре)?
                +3
                delete переделать на пиктограмму поддерживаю, а вот стрелки убирать не надо, на тачскрине достаточно сложно попасть в нужное место в тексте.
                  0
                  спасибо, люди используют стрелки именно как подвинуть на символ влево-вправо при ошибке. это удобней, чем нажимать в соседнюю букву, а при перебросе курсора в середину слова, конечно же нажимают на текст
                +4
                И еще один неприятный момент — если пользователь захочет переместить курсор на три позиции влево, то вполне очевидное действие «тапнуть трижды по стрелке влево» приведет к тапу в лево, тапу вправо и опять влево. я бы не делал стрелки подвижными.
                  0
                  логично, но на практике нет такой ошибки. это у меня нет под рукой видео, акцентированного на клавиатуре — сделаю, выложу обязательно, ведь тема еще не раскрыта
                  0
                  Я бы вместо delete предложил поставить backspace, а саму delete перебросить после >
                  По привычке, нажимая delete я ожидаю, что пропадёт символ, стоящий за курсором, а нажимая backspace, я жду, что исчезнет символ перед курсором, да и сам курсор сдвинется.
                  И чтобы @ был более очевидным, я бы поставил его между < и >. Для увеличения заметности предлагаю выделять цветом @ по мере ввода пользователем текста: при нуле введенных символов в адресе — символ почты почти прозрачен, при пяти символах увеличен и выделен цветом.
                  В итоге получилось бы что-то типа:
                  backspace | < | @ | > | delete

                  А так, хорошая, годная разработка.
                    0
                    Спасибо, очень детально. Мы ушли от предложенной вами схемы backspace | < | @ | > | delete постараюсь объяснить почему.
                    @ это часть адреса, то есть смысловая кнопка
                    <>, delete, backspace — сервисные кнопки, поэтому они выделены в отдельный блок

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

                      +2
                      А всё-таки почему, если @ это смысловая кнопка, не поставить её рядом с другими кнопками?

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

                        И еще одно по поводу ненужности заглавный букв в email — многие «тетушки», которые с компьютером на «Вы», твердо убеждены (по аналогии с регистрозависимым паролем), что елси написано на бумажке Kamo.Nebilucci, то должно быть именно так, а не kamo.nebilucci — «иначе письмо не дойдет». Т.е. реализовать оба варианта — комк как удобнее, пусть так и пользуются.
                    0
                    А нельзя, к стати, придумать к автомату какой-то сканер штрих-кодов, чтобы я себе один раз распечатал\нарисовал на телефоне бумажку со своей почтой\именем\паролем и просто «показывал» её автомату. Заполнение поля займет пол секунды при этом. Все остальные варианты (ручной ввод, и даже блютус\вайфай) серьёзно дольше.
                      0
                      QR-code? можно
                      +7
                      "@" я нашёл где-то за 2 минуты, ведь она:
                      1. не там, где все остальные кнопки
                      2. другого цвета
                      3. наезжает на другой контрол


                      Кнопка «delete» — откровенно сбивает с толку.

                      Стрелки вправо-влево будут раздражать тем, что будут уезжать из-под пальца при нажатии.
                        +2
                        +1
                        с ума же сойти будет пальцем догонять стрелки
                          0
                          для этого достаточно стрелки вправо-влево поместить в фиксированное место (к примеру, под оранжевой стрелочкой), а поязицию курсора обозначать как сейчас.
                          +1
                          По поводу удаления символа слева от курсора.
                          Идеальный вариант в коммуникации — это сделать ее понятной для пользователя.
                          Делаем кнопку, на которой одновременно со стрелкой влево пишем «удалить символ слева от курсора».
                          Да, это будет большая кнопка, но места на терминале явно хватит, и люди поймут.
                            +1
                            Подвижный блок на клавиатуре? А теперь представьте, что у вас на клавиатуре кнопки влево и вправо двигаются за курсором, как ей пользоваться?
                              –2
                              да мы тоже боялись это делать. в теории звучало именно так.
                              на практике всё ок, потому что: это сервисные кнопки, при той же функции, что на обычной клавиатуре их применение значительно отличается от того, что вы делаете на обычных клавишах. никто не удерживает кнопку нажатой долго.
                              ах да, и у нас же есть блокиратор по первому нажатию. то есть если вы нажали delete и блок пополз, то кнопка влево и затем вправо не сработают. забыл уточнить это раньше. спасибо.
                              +2
                              @ не производит впечатление нажимаемой кнопки — уж больно она отдельно и другого цвета и вообще.

                              Насчёт @yahoo.com, @mail.ru — прикольно, но очень не хватает кнопки OTHER. У меня выбор, в котором нет моего сервера, вызывает панику.
                                0
                                было и так @mail.ru
                                Люди не понимают. отдельно жмут @, а потом @mail.ru и мы ставили автокоррекцию @@.
                                а в случае ввода корпоративной почты? всех имен не укажешь — только топовые, но вообще замечание правильное — оставить несколько кнопок и менять их по контекстному вводу (как сделана подсказка в гугле например). спасибо
                                  +1
                                  В случае ввода корпоративной почты хотелось бы иметь возможность вообще отмахнуться от этой подсказки. Я например, захочу написать @cs.msu.su, а оно настойчиво будет предлагать @chat.ru и другие топовые сервисы на @c*.

                                  Кстати, бесплатная идея насчёт топа доменов — можно накапливать его локально, тогда он быстро станет актуальным, куда бы вы не поставили терминал.
                                0
                                Вам не кажется, что логичнее было бы сделать стрелки по разным сторонам курсора? То есть, вместо
                                delete | <>
                                сделать
                                delete < | >

                                По поводу самой кнопки delete, мне кажется, достаточно нарисовать на ней стрелку влево, чтобы разрешить возможную путаницу. Ну или, может быть, изменить ее текст на «Удалить» или «Удалить символ» (если, конечно, для вас не принципиально использование английского).

                                По поводу собаки. Она действительно не выглядит как кнопка. Как вам такой вариант: делаем кнопку с собакой непосредственно в поле ввода, так, чтобы она двигалась вместе с вводимым текстом, оставаясь всегда справа от последнего символа. При этом после нажатия, она бы фиксировалась, а курсор прыгал бы на позицию справа от нее.
                                Правда в таком случае нужно сделать ее больше похожей на «классическую» кнопку.
                                  0
                                  в целом согласен, надо попробовать. с собакой справа от курсора думали: наберем комментариев, реализуем, отчитаюсь. спасибо.
                                  +4
                                  Я вам скажу, что мои тетеньки из бухгалтерии впадут в информационную кому. Они таки привыкли, что в адресе есть заглавные буквы, например Ruslan.Fedotov@TheBest.ru

                                  Они даже по телефону диктуют с капитализацией, чем умиляют меня до слёз.
                                    +1
                                    А им небось когда-то давно админ сказал, что а и А разные буквы в пароле. Вот они с тех пор так и ставят. А вот объяснить приниципиальное различие разных полей ввода уже никто не удосужился. Взяли бы тетенкам из бухгалтерии и рассказали, что заглавная буква в адресе не нужна.
                                      +1
                                      Может так оно и есть. Но я сторонник призыва: «Не засирайте мне мозги!» И мне искренне жаль тетенек, которым приходиться наравне с молодыми пользоваться этим обилием девайсов, протоколов и терминов. А потому, пущай диктуют. У собеседника от такой надиктовки все равно читабельность адреса повышается, так что вреда нет.
                                        +4
                                        Не все знают, что регистр букв в почтовой системе может быть смыслоразличительным, так что на тётенек не гоните зря. Доменная часть (после @) подчиняется RFC-1035, и в ней действительно регистр неважен, а вот именная часть подчиняется RFC-822, и теоретически, John@ и john@ могут различаться. Популярные сервисы такого различия не делают, но некий другой корректно настроенный сервис может работать иначе, так что регистр в именной части емайлов надо сохранять.
                                          0
                                          Спасибо. Не знал
                                    +1
                                    Еще полезно дать юзеру возможность выбрать раскладку. Я крепко зависаю, сталкиваясь с qwerty.
                                      0
                                      йцукен/qwerty не самый лучший вариант для терминала, особенно если им пользуются не самые близкие к компьютеру люди. Алфавитный порядок является вполне разумным вариантом.
                                        +3
                                        Зато у близких к компьютеру людей встречается на такой клавиатуре глобальный затуп =)
                                          +1
                                          Да нормально всё, я со сберовского терминала оплачивал, выжил. Зато всяким другим людям на такой клавиатура печатается гораздо быстрее.
                                          –1
                                          Я как-то игрался с РЖД-шным терминалом, там кнопки были как раз в алфавитном порядке. Искал нужные буквы медленно-медленно.
                                            0
                                            а всего-то нужно добавить кнопку смены раскладки, как раньше было в навигаторах.
                                            +3
                                            Символ + тоже допустим для email -адресов
                                              +4
                                              Всегда было любопытно, почему не сделать дваокна ввода?

                                              [первое]@[второе.окно]

                                              Зачем вы заставляете меня набивать то, что 100% должно быть в тексте? =( Устал тыкать эту кнопку.
                                                +1
                                                +1 супер! спасибо!
                                                0
                                                За что вы "-" и "_" с их стандартных мест убрали, да еще и поменяли местами "." и "-"?

                                                P.S. При таком начертании отличить «минус» от «подчеркивания» будет непросто.
                                                  0
                                                  Я бы добавил облачко с «продолжайте вводить адрес», а то сейчас получается, что терминал позволяет ввести мыло лишь от определенных почтовых сервисов.

                                                  И насчет стрелочек — если я хочу передвинуть курсор на 10 позиций вправо, то мне и пальцем тоже придется двигать вправо, т.к. стерелочки будут перемещаться? Если да, то я лично нахожу это неудобным.
                                                    0
                                                    Чтобы переместиться на 10 символов — легче ткнуть в строку (как обычно на планшетах и телефонах), а стрелки на тот случай когда курсор попал не туда, куда вы хотели (как обычно на планшетах и телефонах).

                                                    А насчет почтовых сервисов, видимо это я не правильно описал процесс. Вы можете ввести любой сервис, из любой последовательности букв — кнопки только для самых популярных. когда вы вводите любой символ после @, например aaaa@a, кнопки меняются на зоны (.com, .ru, .org, .net) если вы вводите адрес только с клавиатуры (например aaaa@aaaa.ru) — кнопки исчезают.
                                                    Спасибо.
                                                    0
                                                    Многие мои знакомые не верят мне, что нет разницы между маленькими и большими буквами в почте. Может и верят но «для надежности» вводят та как регистрировалась — первая большая. Они будут недовольны вашей клавиатурой.

                                                    Да и вообще — я планирую взаимодействовать с вашим устройством не более 2 минут. Зачем мне думать и понимать как пользоваться клавиатурой? Хочу чтобы была как дома и я об этом не думал. Чтоб стрелки были где всегда. Чтобы таб кидал меня на следующее поле (даже если тачскрин), чтобы собака не в углу а там где должна быть. И т.д. и т.п.

                                                    Если так хочется что-то улучшить — сделайте интерфейс терминала где не надо вводить вообще руками. Нормальное меню с иконками или хотябы голосовой ввод. А то в телефоне уже давно голосовой поиск, а автоматы по продаже билетов на электрички до сих пор простое «до новогиреево и обратно» не могут распознать. И приходится уныло тыкать в экран.
                                                      0
                                                      а ты попробуй в магазине или на вокзале что-нибудь надиктовать не в гарнитуру, а в заплеванный микрофон в полуметре от источника голоса. Внешние шумы сводят все к фарсу.
                                                        0
                                                        Вот вам другой вариант, который придумали в одной из платежных систем:
                                                        вводите номер, прикладываете к терминалу карту (любую например проездной на метро или на электричку, пропуск или что-то еще, я думаю они несколько стандартов карт поддерживают). Он ассоциирует карту с номером. В следующий раз вы просто подносите к терминалу туже самую карту и номер автоматически вводится. Не надо диктовать, искать в длиннющем списке, что-то еще
                                                      0
                                                      Про [раз]@[два.три] уже написали выше.

                                                      Может стоит вернуть делит и стрелки обратно на клавиатуру?
                                                      Пока не прочитала подписи, не поняла, что делают <> (то ли удаляют символы в указанном направлении, толи перемещают курсор).
                                                      Стандартное расположение контролов уменьшит вероятность разночтения.

                                                      ps А в терминалах тоже на клавиатуре заглавные буквы, а в строке ввода строчные?
                                                        0
                                                        Спасибо. Не стоит возвращать. Раньше мы пользовались обычной клавиатурой, потому что изобретать велосипед не нужно. Но так как обнаружились все те вещи, о которых написано в самом начале, мы стали упрощать и клавиатуру и вообще интерфейсы и пришли к тому, к чему пришли.
                                                        Это не теоретическая разработка — эта клавиатура активно работает около года, в основном для людей не слишком озадаченных компьютерами. Поэтому я и решил рассказать о ней, потому что достаточно спорные нововведения показали себя очень не плохо.

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

                                                      Only users with full accounts can post comments. Log in, please.