Лучший пользовательский интерфейс, позволяющий экспертным пользователям вводить IP-адрес? (IPv4)

Я работаю над веб-приложением, которое требует, чтобы пользователи вводили IPv4-адрес (в десятичной системе с десятичной точкой) для большинства основных задач, которые им нужно выполнить. Наш основной целевой пользователь - это ИТ-администратор малого бизнеса. Они хорошо знакомы с IP-адресами.

Мне интересно, какой стиль принятия ввода формы лучше? В настоящее время мы используем вариант 1 .

mockup

скачать источник bmml - каркасы созданный с помощью макетов Balsamiq

66 голосов | спросил jessegavin 26 Jam1000000amSat, 26 Jan 2013 01:30:04 +040013 2013, 01:30:04

13 ответов


68

Вариант 3 без интрузивной проверки.

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

  

1912

Когда я имел в виду

  

192

Мои пальцы почти мгновенно исправят это, но поле, которое заставляет меня до трех цифр, означает, что я надавливаю назад два раза, а затем набираю «2», чтобы исправить это, заканчивается «12» или заканчивается 191 в первом поле и ничто во втором. В любом случае я проклинаю дизайнера UX, который, пытаясь быть умным, сделал это хуже.

Вариант 2 действительно такой же, как вариант 1, просто визуально другой. Пространство, разделяющее или разделяющее период. Те же проблемы возникают. Возможно, больше, как сейчас, я печатаю периоды или нет? Если я сделаю то, что произойдет? Если тип периода I затем снова, с мышечной памятью, нажмите DEL, удалите мою ошибку, только чтобы стереть цифру, так как она не вставляла период. Тьфу!

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

Я бы набрал

  

19W

Когда я имел в виду

  

192

Потому что мои пальцы скользнули, но восприятие и моя мышечная память были достаточно быстрыми, и я немедленно попытаюсь исправить это. Если проверка прерывает мой ввод, я снова проклинаю дизайнера UX. Например, я использовал формы с проверкой того, что при вводе «w» появляется предупреждение или модальный диалог «Только числа!». который заканчивается тем, что меня отключает, так как я уже в процессе его исправления.

Пока они были на нем, а aaa.bbb.ccc.ddd является нормой для IP-адреса, почему не все равно, что такое разделитель? Если я напечатаю

  

1-2-3-4

или

  

1 2 3 4

Почему они не могут быть такими же приемлемыми? Это происходит потому, что это так раздражает, когда его просят номер телефона, и ему сказали, что он должен быть XXXYYYZZZZ вместо того, чтобы просто принимать XXX-YYY-ZZZZ или (XXX) YYY-ZZZZ и т. Д. И иметь компьютер. Аналогично номерам CC. Принять AAAABBBBCCCCDDDD и AAAA BBBB CCCC DDDD и AAAA-BBBB-CCCC-DDDD; на самом деле, как просто извлечь цифры, а затем выяснить, действительно ли цифры делают действительные номера СС. Аналогично для IP-адресов. Возможно, проанализируйте его, ища

  • ноль или более цифр.
  • одна или несколько цифр
  • одна или несколько цифр.
  • одна или несколько цифр
  • одна или несколько цифр.
  • одна или несколько цифр
  • одна или несколько цифр.
  • одна или несколько цифр
  • ноль или более цифр.

Таким образом

  

[пробел] 1.2.3.4 [пробел]

также будет работать и не раздражать пользователя глупыми сообщениями об исправлении их ввода, когда компьютер вполне способен справиться с ним.

ответил gman 26 Jam1000000amSat, 26 Jan 2013 03:56:25 +040013 2013, 03:56:25
14

В качестве краткого мозгового штурма о том, как лучше представлять IP-адреса экспертам, я бы выбрал сочетание вариантов 1 и 3.

То, как я буду реализовывать это, было бы очень похоже на собственную систему тегов StackExchange, за исключением того, что вместо использования пробела в качестве разделителя я использовал бы ., чтобы при вводе он может помещать ваш вход в отдельные поля:

Это проще объяснить на примере. Простите мою утилизацию элемента <kbd>:

1
19
192
192 .
192 0,1
192 +0,16
192 0,168
192 . 168 .
192 . 168 0,1
192 . 168 . 1 .
192 . 168 . 1 0,2
192 . 168 . 1 .20
[поле теряет фокус]
192 . 168 . 1 . 20

Есть, конечно, множество деталей реализации, которые необходимо будет разработать в этом методе. Как и в большинстве случаев, легче сделать это неправильно, чем правильно.

ответил zzzzBov 26 Jam1000000amSat, 26 Jan 2013 08:11:39 +040013 2013, 08:11:39
7

Не 1. В 90% случаев я копирую и вставляю IP-адреса из другого источника, и я готов поспорить, что эти опытные пользователи делают это тоже. Из-за этого я должен сказать, что вариант 3 - лучший выбор.

ответил drawtheweb 26 Jam1000000amSat, 26 Jan 2013 02:43:52 +040013 2013, 02:43:52
4

Вариант 2 или 3 скорее всего будет вероятнее всего - никто не может быть уверен, не проверив его. Вероятно, вариант 3, так как эксперты будут знать, что есть периоды в IP-адресе (нет необходимости в маске).

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

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

ответил Tim 26 Jam1000000amSat, 26 Jan 2013 02:16:01 +040013 2013, 02:16:01
3

Для опытных пользователей только вариант 3. Для непрофессионала любой из трех, хотя, вероятно, занимает порядок.

Адрес IPv4 представляет собой четыре двоичных октета, разделенных точками, записанными в десятичной системе обозначений. Силовой пользователь это знает и привык правильно вводить IP-адрес.

Часто лучшим пользовательским интерфейсом является пользовательский интерфейс, который остается в стороне.

Как и Тим, вариант 1 будет немного расстраивать для опытного пользователя, так как им не понадобится ручная работа. Интуиция говорит мне, что вариант 1 будет наиболее интуитивным для непрофессионала, однако, поскольку неопределенность между табуляцией или стрелкой клавиатуры между октетами в Варианте 2 будет путать.

Другим преимуществом использования поля с одним полем Option 3, кстати, является то, что он позволяет вам также поддерживать адреса IPv6 без изменения интерфейса (и на бэкэнде легко указать их, поскольку IPv4 - 32 бита и IPv6 - 128 бит).

ответил Matt 26 Jam1000000amSat, 26 Jan 2013 02:40:04 +040013 2013, 02:40:04
3

Я видел вариант 1 перед тем, как входить в поля социального обеспечения. Это может быть только я, но я всегда ошибочно нажимаю «вкладку», чтобы перейти к следующему полю ввода при их использовании. По какой-то причине я всегда предполагаю, что он не продвигается автоматически. Это может быть потому, что визуально это выглядит как два отдельных поля ввода вместо одного.

ответил Chris N. 26 Jam1000000amSat, 26 Jan 2013 02:19:09 +040013 2013, 02:19:09
3

Вариант 3! Используйте приятную мгновенную обратную связь справа от поля при размытии.

Я согласен, вы так часто будете копировать эту информацию, поскольку у вас нет запомненного IP-адреса, и люди не такие глупые. Особенно ИТ-администраторам малого бизнеса.

Другие формы попадают по-своему (как федеральное правительство)!

ответил Jeremy Gavin 26 Jam1000000amSat, 26 Jan 2013 10:07:22 +040013 2013, 10:07:22
2

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

ответил Keith 26 Jam1000000amSat, 26 Jan 2013 08:35:59 +040013 2013, 08:35:59
2

Вариант 3. Определенно.

Вы имеете дело с властными пользователями, по собственному краху, поэтому вариант 1 отсутствует.

Вариант 2 не требуется. Властные пользователи знают, что такое IP-адрес. Они просто хотят ввести его как можно быстрее. Они также могут печатать, поэтому вам просто нужно позволить им продолжить работу.

ответил Relaxing In Cyprus 26 Jpm1000000pmSat, 26 Jan 2013 14:39:15 +040013 2013, 14:39:15
1

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

Все 3 варианта могут работать хорошо в зависимости от деталей реализации - например, вы можете реализовать полную скопированную копию в опции # 1, разделив строку на точках и автоматически заполнив остальные поля, чтобы пользователь мог ввести /delete из одного поля в другое, перейдите к следующему полю с вкладкой или периодом ... но из-за того, что существует много неправильно реализованных IP-полей, опытный пользователь не ожидает, что ваш будет хорошо реализован.

ответил Sylverdrag 26 Jam1000000amSat, 26 Jan 2013 10:33:54 +040013 2013, 10:33:54
1

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

ответил seriousdev 26 Jpm1000000pmSat, 26 Jan 2013 22:34:52 +040013 2013, 22:34:52
1

Конечно, вариант 3. Но было бы целесообразно реализовать некоторую обратную связь для этого материала, чтобы пользователи увидели правильный формат IP-адреса в случае неправильного ввода.

ответил flavicius 27 Jam1000000amSun, 27 Jan 2013 02:37:13 +040013 2013, 02:37:13
1

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

Расширение: можно использовать опцию 3 и автоматически вводить период (.) после ввода трех цифр. Таким образом, пользователь может просто ввести 1921681001, что приведет к 192.168.100.1. Просто введите сноску на вкладке, чтобы предположить, что эта функция еще приведет к большому числу обратных шагов, чтобы удалить exstra 192..168, если пользователь быстро набирает период.

ответил hoektoe 13 FebruaryEurope/MoscowbWed, 13 Feb 2013 17:36:57 +0400000000pmWed, 13 Feb 2013 17:36:57 +040013 2013, 17:36:57

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132