В поисках умных веб-форм

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

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

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

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

Инструменты построения веб-форм

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

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

В дополнение к этим стандартным элементам ввода для HTML5 также созданы специальные новые. За исключением случаев, когда документ готовится исключительно для внутреннего использования и где среда браузера известна, следует использовать только компоненты, которые работают как в Firefox, так и в Chrome. Хорошо, если компонент также работает в других браузерах, но не должен только работать в других браузерах. Вот компоненты HTML5, как они появляются в Firefox:

И их слегка отличающийся внешний вид в Chrome:

Теперь, очевидно, очень важно знать, что ваши входы HTML5 будут выглядеть и работать по-разному в Chrome и Firefox, но они все равно будут работать. Стандартные элементы управления вводом также выглядят немного лучше в Chrome, чем в Firefox. Обратите внимание, что Chrome устанавливает североамериканский стандарт дат, который пользователи могут не оценить. Кроме того, версия элемента управления датой в Chrome делает его непригодным для отображения и должен использоваться только для ввода. Добавление средства выбора даты является основным улучшением в Chrome, но мы, вероятно, ожидаем увидеть это в будущих версиях Firefox.

Поскольку Firefox является открытым исходным кодом, вы можете на самом деле сделать свою собственную версию Firefox отображать входные данные точно так же, как это делает Chrome, загрузив исходный код браузера Chromium с открытым исходным кодом, на котором основан Chrome, и перенеся соответствующий раздел кода в исходный код Firefox. код (но тогда вам придется делать это каждый раз, когда вы обновляете Firefox до новой версии).

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

Ответ Bootstrap (почти адекватный)

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

Bootstrap расширяет элементы управления, чтобы заполнить горизонтальную ширину их контейнера, а это означает, что все элементы управления будут иметь одинаковую ширину, нравится вам это или нет (если вы не переопределяете это поведение вручную), и позволяет вам одеть некоторые типы элементов управления с дополнительным bling. Решение Bootstrap элегантно и преодолевает некоторые проблемы элементов управления, которые по-разному выглядят в разных браузерах, но работает только со стандартными элементами управления. Элементы управления HTML5 не реализованы в текущих версиях Bootstrap, поэтому вам придется их стилизовать самостоятельно.

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

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

Интеллектуальное Формирование Здания 101

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

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

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

1. Нужна ли нам форма?

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

Форма необходима, если:

  • Мы собираем информацию от пользователя
  • У нас есть много данных для отображения
  • Данные должны быть четко сегментированы
  • Пользователь может получить доступ к данным с мобильного устройства.

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

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

2. Разработка макета рабочего стола

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

Самый быстрый способ макетировать дизайн формы - это InkScape. В этом примере мы создадим систему для управления кадровыми записями. Вот макет для настольного прототипа:

Внешний прямоугольник представляет все пространство дисплея 1024 x 768 px. В любом настольном браузере у нас нет доступа к такому количеству пикселей, если пользователь не находится в полноэкранном режиме (что редко бывает). Так что наши

Дизайн 900 x 600px, который должен вписываться в доступную область большинства экранов рабочего стола.

Если доступная область меньше ширины 900px, наши столбцы 2 x 450px будут разбиваться и отображаться как один непрерывный столбец 450px. Это решает проблему мобильной совместимости, по крайней мере до тех пор, пока Google не потребует, чтобы все наши сайты могли умещаться на экране наручных часов.

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

Наши столбцы на самом деле будут немного больше, чем 450px, больше похоже на 600px каждый, но если мы хотим, чтобы ширина столбца была около 450px, мы просто уменьшаем размер столбца с 6 до 5. Но столбец 600px должен помещаться на экране мобильного устройства в портретном режиме без переноса, так или иначе.

Мы протестируем наш макет с этим кодом:

И мы видим, что все выглядит хорошо (потому что мы временно добавили границы, чтобы показать нам).

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

3. Создание пользовательских размеров ввода и положения метки

Если мы просто оставим все по умолчанию, без добавления какого-либо пользовательского CSS, это то, что произойдет, когда мы добавим наш первый ряд элементов управления вводом:

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

Теперь мы просто устанавливаем свойство display элементов label на «block», устанавливаем поля «First» и «Last» для класса «in40w», а для поля MI - «in10w», и все должно выглядеть намного лучше.

Как вы можете видеть, это выглядит лучше, но расположение больше не является правильным. Теперь ящики сложены. Итак, как мы можем это исправить, избавившись от идеи использовать элемент label вообще, потому что нам это не нужно. Мы просто применим наши in40w in10w классы, плюс сделать новый класс под названием inLeftOf.

Который после применения устраняет проблему, которую мы видели ранее, например:

Но это не оставляет достаточно места для поля SSN. Это связано с тем, что левый столбец больше ожидаемого, поэтому 40% на самом деле занимает больше места, чем нужно для этих полей, поэтому мы можем сократить их до in30wи среднее поле больше, чем нужно, чтобы мы могли сделать это in5w, Вот что происходит:

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

Несколько вещей произошло на этом этапе. Первой была простая часть установки цвета фона для столбца (rgb (235,235,246)), и хотя вы не можете видеть его здесь, цвет текста для всех входных данных был установлен на #427DB4, а font-weight был установлен жирным шрифтом, чтобы уменьшить нагрузку на глаза. Текст был настроен на автоматическое преобразование в верхний регистр с помощью свойства CSS text-transform, чтобы ускорить ввод данных и уменьшить количество ошибок.

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

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

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

Более легкие панели вокруг специальных секций - просто обычные колодцы Bootstrap. Для ввода данных о религии необходимо выбрать один из заранее определенных официальных религий (включая «другие»). Разработка правых столбцов была еще проще, и в ней использовались те же приемы, что и в первом наборе элементов управления в левом столбце, для организации элементов управления в формате таблицы, но без использования таблицы.

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

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

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

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

Сделайте это правильно, и ваши формы данных могут выглядеть так:

Вместо этого:

изображение заголовка любезно предоставлено

Богдан Рэнца

Богдан является одним из основателей Inspired Mag, накопив за этот период почти 6-летний опыт. В свободное время он любит изучать классическую музыку и изучать изобразительное искусство. Он тоже одержим исправлениями. У него уже есть 5.