Грамотный интерфейс: поля ввода
Очень часто в программах данные вводятся в формах, содержащих множество полей: поле фамилии, имени, адреса, номера паспорта, размера обуви... Проблема состоит в том, что внешне эти поля очень похожи друг на друга и рано или поздно оператор (из-за усталости, по неопытности или по какой другой причине) вобьет фамилию в поле номера паспорта или адрес в поле отчества.
Отследить программно такого рода ошибки бывает довольно сложно: попробуйте написать модуль который бы смог отличить имя человека от названия населенного пункта или номер телефона от номера паспорта. Частично решить эту проблему позволяют контролы, принимающие ввод по маске (MaskEdit или MaskEditBox), но, честно говоря, им не хватает гибкости. Да и оператору с ними работать не очень удобно ибо капризны они.
Гораздо лучше изначально создать такие условия ввода данных, чтобы подобные ошибки просто не возникали.
Рассмотрим варианты.
Решений тут несколько. Наиболее популярное на данный момент - разбить форму с десятком полей ввода на несколько форм, по два-три поля в каждом. Такое решение можно часто встретить при регистрации на всяких интернет-сайтах. Для интернета это оказывается удобным, но в оффлайновых программах, где вводимых данных гораздо больше, возникает масса проблем:
- необходимо предусмотреть в каждой следующей форме отображение введенных данных из предыдущих форм, чтобы пользователь мог видеть, что он уже ввел ранее;
- для изменения ранее введенных данных (например неверно введенной фамилии) необходимо сделать в формах навигацию "вперед - назад";
- проблема "раздутия проекта" из-за создания множества по-сути бесполезных форм;
- достаточно сложно управлять таким интерфейсом, используя только клавиатуру - время от времени пользователю все же придется хватать в руки мышь, а это не есть хорошо;
- и т.д. и т.п.
Программировать такой интерфейс - сплошная морока, да и пользователи от него не в восторге. Значит будем искать другое решение.
Нам нужно, чтобы интерфейс каким-то образом подсказывал пользователю, что именно от него (пользователя) требуется в данный момент. И очень желательно, чтобы эти подсказки не отвлекали и в тоже время были достаточно заметными, чтоб пользователь не смог их проигнорировать.
Всплывающие подсказки (ToolTips) тут не годятся, т.к. после нескольких часов работы они начинают дико раздражать. Кроме того, чтоб понять что именно нужно программе, подсказку нужно прочесть - а это приводит к рассеиванию внимания. Сообщения в статус-строке (StatusBar) вещь вобщем-то не плохая, но не привлекают должного внимания, поэтому они могут использоваться лишь как вспомогательное средство. Я предлагаю другой вариант.
Раскрасим поля ввода.
На мой взгляд для решения вышеописанной проблемы необходимо разукрасить фон полей ввода. Но не стоит делать их яркими как новогодняя елка, а нужно просто слегка изменить цвет, чтобы каждое поле приобрело свой уникальный легкий цветовой оттенок. Поработав пару часов с таким интерфейсом, человек уже на уровне подсознания будет знать, что в розовое поле нужно вводить фамилию, а в голубое - адрес.
Наше сознание устроено таким образом, что даже малейшее несоответствие вызывает у нас в мозгу стоп-сигналы, заставляющие нас остановиться и проверить все ли верно мы делаем. Обратите внимание как просто мы находим нужную кнопку на пульте от телевизора (ориентируясь не на рисунок-пиктограмму, а только на цвет) и как сложно бывает воспользоваться пультом от другого телевизора, в котором кнопки расположены по-другому и имеют другую раскраску.
Окрашивание полей имеет и еще один плюс - если разработчики в будущем поменяют расположение полей, но при этом сохранят их цветовое соответствие (фамилия - розовый, адрес - голубой), то пользователям будет намного легче приспособиться новому виду, т.к. для поиска нужного поля они будут ориентироваться по цвету, а не читать все подряд надписи на форме.
Раскрасим формы
В продолжение идеи предлагаю раскрашивать и формы, в зависимости от выполняемых действий. Суть состоит в том, что для ввода новой записи в базу и для редактирования уже введенной записи как правило используется одна и та же форма. Так вот, если во время редактирования придать фону формы какой-нибудь оттенок (например сделать ее слегка красноватой), то пользователь, занимающийся только вводом новых данных, сразу же заметит это изменение цвета и не введет по ошибке новые данные поверх старых.
Ну и чтоб поставить жирную точку в вопросе путаницы при вводе и редактировании данных опишу еще одно простое, но очень полезное улучшение интерфейса.
Раскрасим текст.
Когда на форме расположено множество полей, то из-за усталости глаз, не очень хорошего зрения, слишком высокого разрешения монитора и многих других проблем возникает ситуация, когда пользователь не может сразу отпределить позицию коретки ввода - моргающая полоска может быть не заметна. Обычно в таких случаях пользователь хватает мышь и "тычет" ей в нужное поле.
Помочь пользователям в этом случае можно раскрасив текст в текущем поле ввода. Программируется такое поведение сверх-просто: как только фокус ввода передается какому-то контролу, значение его свойства "цвет текста" (ForeColor, TextColor) меняется на "красный" (Color.Red), а при потере фокуса контролом цвет текста восстанавливается на стандартный (SystemColors.WindowText). Это простое дополнение даст возможность пользователю всегда точно знать, где именно находится коретка ввода и что именно нужно сейчас вводить.