Версия для печати Поиск
Главная Для начинающих разработчиков Учимся программировать

Как проектировать форму в новом интерфейсе?

Мы считаем, что использование варианта 2 при проектировании форм даст возможность получить результат с бОльшим юзабилити, чем в варианте 1.

Вариант 1 (плохой):

  • Разместим на форме без прокрутки все поля под разрешение 1024х768;
  • Часть полей придется сделать узкими, так, чтобы было видно хотя бы несколько первых символов;
  • Максимально уменьшим отступы между полями;
  • Будем использовать сокращения для наименований полей. Где-то даже придется от них отказаться;
  • И так далее...

Результат: нечитаемая форма. Большинство пользователей не смогут с ней работать без обучения. При увеличении количества атрибутов (если пользователи просят добавить другие поля) работоспособность формы становится всё хуже и хуже.

Вариант 2 (хороший). Определяем сценарий использования формы:

1. Форма используется для массового ввода данных:

    • Используем вертикальную прокрутку формы (свойство ВертикальнаяПрокрутка);
    • Размещаем поля в логическом порядке или в порядке, соответствующем оригиналу информации.

Результат: форма, хорошо приспособленная для ввода с клавиатуры большого объёма данных. Вертикальная прокрутка в данном случае не вредит.

2. Форма используется для анализа данных. Основные подходы:

    • Большинство полей ввода заменяем на надписи или гиперссылки;
    • Ключевую информацию отображаем вверху формы;
    • Для дополнительной информации используем свертываемые группы. Также можем в заголовке свертываемой группы выводить "выжимку" из дополнительной информации;
    • Используем вертикальную прокрутку формы для доступа к второстепенной информации.

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

3. Форма используется и для анализа, и для немассового ввода. Для данного случая универсального рецепта нет:

    • Можно попробовать совместить подходы из обоих предыдущих сценариев;
    • Можно разделить на две формы. Одна для анализа, другая для ввода.

 

Последнее обновление: 06.06.2013

Обсудить статью на форуме

Задать другой вопрос / Закрыть