Форма php: PHP: Работа с формами — Manual

Форма отправки данных в PHP (POST, GET)

Чтобы организовать передачу данных на сервер с помощью формы, потребуется реализовать HTML форму, в которую посетители сайта будут вводить свою информацию и PHP код, назначение которого в принятии и обработке полученных данных на сервере.

HTML форма отправки данных

Форма на странице формируется тегами <form>…</form>, внутри которых помещаются теги полей для ввода текстовой информации, теги специальных компонентов (например, поле со списком), теги для поля выбора и загрузки файла.

Для HTML5 так же существует возможность размещать теги полей формы не внутри тегов формы, а в любом месте на странице. При этом для каждого такого поля нужно указывать атрибут «form», чтобы определить с какой формой отправки он должен взаимодействовать.

Итак, простейшая форма отправки может содержать следующий код:

<form action="myform.php" method="post">
Значение А: <input type="text" name="data1">
Значение Б: <input type="text" name="data2">
<input type="submit" value="Отправить">
</form>

Элементы формы и их параметры:

action=»myform. php» – атрибут «action» определяет, какой php-файл будет обрабатывать отправляемые данные. В этом примере, данные будут отправлены в файл «myform.php», находящийся в той же директории что и страница с формой. Если этот атрибут не указать явно, данные формы будут отправлены по адресу страницы самой формы.

method=»post» – параметр method определяет метод передачи данных POST или GET. Более подробно об этом в статье «Отличия методов POST или GET». Если не указывать атрибут явно, по умолчанию будет использоваться метод GET.

Текст «Значение А:» и «Значение Б:» добавлен только с целью оформления и понятности формы для пользователя. Добавлять это для передачи данных не обязательно, но для того, чтобы пользователю стало понятно, что вводить, стоит указывать.

Теги <input> используются для формирования различных управляющих элементов формы.

type=»text» – атрибут «type» определяет вид поля.

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

name=»data1″ – атрибут «name», указывает имя, вернее индекс данных в массиве, полученных сервером. Это обязательный параметр, по которому в php-обработчике можно будет затем получить доступ переданному значению. Имя может быть выбрано произвольно, однако, удобнее когда это значение имеет какой-то понятный смысл.

type=»submit» – тег <input> с таким значением параметра «type» будет отображаться на странице как кнопка. На самом деле на форме можно обойтись и без кнопки. Если, например, в форме есть текстовые поля, то отправку можно осуществить, просто нажав «Ввод» на клавиатуре. Но наличие кнопки делает форму более понятной.

value=»Отправить» – в данном случае (для type=»submit») определяет только надпись на кнопке. Для type=»text», например, это будет текст, который будет выведен в текстовом поле.

В итоге, на странице этот код будет выглядеть приблизительно так:

 

Обработка отправленных HTML формой данных в PHP

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

$_POST, $_GET и $_REQUEST – это ассоциативные массивы, поля-индексы которых совпадают с атрибутами «name» тегов <input>. Соответственно, для работы с данными в файле myform.php можно присвоить переменным значения элементов такого массива указав в качестве индекса имя поля:

// для метода GET
$a = $_GET['data1'];
$b = $_GET['data2'];
// для метода POST
$a = $_POST['data1'];
$b = $_POST['data2'];
// при любом методе
$a = $_REQUEST['data1'];
$b = $_REQUEST['data2'];

Проверка заполнения полей формы

Иногда при получении данных нужно проверить, не отправил ли пользователь пустую форму. Для этого можно использовать функцию empty.

if (empty($_REQUEST['data1'])) {
echo 'Поле не заполнено';
} else {
echo 'Поле было заполнено';
$a = $_REQUEST['data1'];
}

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

if (isset($_REQUEST['data1'])) {
echo 'Поле было заполнено';
$a = $_REQUEST['data1'];
} else {
echo 'Поле не заполнено';
}

PHP и загрузка файлов OTUS

Загрузка документов и файлов на сайт для рядового пользователя – весьма распространенная задача. С ней сталкивался чуть ли не каждый. Реализуется через специальную форму. Подобные операции преследуют юзера повсеместно: в социальных сетях, на видео-хостингах, а также в виде файлообменников. Но для разработчика подобные манипуляции выглядят несколько иначе.

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

Элементарное решение

PHP скрипт для заливания файла на сервер создать способен каждый. Справиться с поставленной задачей удается несколькими способами. Форма может быть «простой» или «сложной».

Первый вариант предусматривает создание такого «окна»:

<html>
<head>
<title>Basic File Upload</title>
</head>
<body>
<h2>Basic File Upload</h2>
<form method = "post" action="basic.php" enctype="multipart/form-data">
<label for = "inputfile">Upload File</label>
<input type = "file" name="inputfile"></br>
<input type = "submit" value="Click To Upload">
</form>
</body>
</html>

Это – HTML, в котором находится поле file input. Для того, чтобы файл можно было загрузить на сервер через PHP, потребуется выполнить такие действия:

• Создать форму «заливания». Код можно скопировать выше.
• Разместить полученный HTML в basic.php.
• Добавить строчку в тег <from> «enctype=”multipart/form-data».
• Создать скрипт формы загрузки. Речь идет о PHP Script. Для этого потребуется $_FILES. Начать с формы, которая будет проверять, загрузил ли юзер документ.

• Создать полный скрипт для заливания документации на сервер, используя PHP move uploaded file.

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

В чем заключается проблема

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

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

О глобальной переменной

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

$_FILES – глобальная переменная PHP, которая напоминает $_POST и $_GET. Это – ассоциативный массив, в котором располагается информация о загруженном документе. Для этого применяется method HTTP POST.

Если в процессе выполнить print_r($_FILES), в ходе обработки ранее предложенного шаблона будет выведена следующая информация:

Array
(
    [inputfile] => Array
        (
            [name] => upload-file-php. jpg
            [type] => image/jpeg
            [tmp_name] => /Applications/XAMPP/xamppfiles/temp/phpcQiYhh
            [error] => 0
            [size] => 6887
        )
)

Для каждого input_type=”file” name=’inputfile’ в массиве будет создаваться элемент. При создании <…… name=’test’>, имя компонента будет скорректировано на «тест» на английском. Вот пример кода:

А для того, чтобы полноценно применять input file, система создаст для перемещаемых через move uploaded file PHP несколько элементов. Их стоит рассмотреть поближе.

Элементы для input files

Когда на сервер загружаются файлы, для них создаются несколько файлов:

• name;
• type;
• tmp_name;
• error;
• size.

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

1. Name отвечает за название загруженного юзером файла. Включает в себя также формат документации.
2. Type – тип загруженного файла или mime-type. При загрузке текста получается значение text/plain, картинки – image/jpeg или /png. Каждый тип файла имеет собственный mime-тип.
3. Tmp_name – место временного хранения загруженного документа. Пусть подлежит возможности корректировки. Делается это путем изменения в переменной upload_tmp_dir. Обнаружить ее можно в файле php. Ini.
4. Error. Отвечает за информацию об ошибке. Указывает на ее тип. Отображает сбои, возникающие при попытке загрузки документации. Пример – размер файла превышает максимально допустимый. Каждая error имеет собственный код – числовое значение и константу.

В случае с size все просто – это размер документа, который нужно залить на сервер PHP. Параметр указывается в байтах.

А что там про ошибки

Проверка на errors – важный момент всей операции. Если в процессе заливания файла на server возникли неполадки, документ может вовсе не появиться на сайте. Вот несколько самых распространенных «сбоев», которые могут быть выведены на экран:

1. Upload_err_form_size (значение 2) – размер документа превышает установленное в переменной формы max_file_size значение.
2. Ini_size (значение 1) – размер больше, чем предусматривает переменная upload_max_filesize в php.imi.
3. Err_ok (значение 0) – успешная загрузка файла. Ошибок в процессе не обнаружено.
4. _partial (значение 3) – неполная загрузка файла.
5. No_file (значение 4) – документ для скачивания на сервер отсутствует.
6. No_tmp_dir (значение 6) – указанной директории для временного хранения файла не обнаружено.
7. Cant_write (значение 7) – записать файл на диск невозможно.

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

Функция перемещения – кратко о главном

Move_uploaded_file – это функция, которая отвечает за перемещение загруженного файла из временной директории в ту или иную папку. Перед этим PHP будет проверять, был ли загружен документ в HTTP-методе post.

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

Ее можно представить более красиво:

if(move_uploaded_file($_FILES['inputfile']['tmp_name'], $destiation_dir )){
echo "File Uploaded"
}
else{
echo "File Not uploaded"
}

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

Корректировка лимитов размеров

Размер загружаемого файла – параметр, который можно менять. Без него обойтись проблематично. Он обязателен для того, чтобы форма загрузки файла в PHP работала корректно и ограничивала юзеров. Иначе можно столкнуться с быстрой перегрузкой сервера – посетители будут заливать весьма увесистые документы.

Ограничения могут быть выставлены несколькими способами:

1. В файле php.ini хранится переменная uload_max_filesize. Она отвечает за предельный размер заливаемых документов. Через знак равенства в соответствующем файле требуется указать интересующую характеристику.
2. Ограничение устанавливается за счет помещения скрытого элемента ввода под названием upload_err_ini_size в форму загрузки. Пример – прописать <input type=”hidden” name= “ Max_file_size” value = “50000”>.
3. Если загружаемый файл больше, пользователь увидит «значение «2» в переменной $_FILES. Стоит обратить внимание на то, что upload_max_filesize не должен быть больше переменной post_max_size в php.ini.

Для того, чтобы откорректировать filesize в большую сторону на значимое значение, нужно просто изменить время исполнения php-скрипта.

Вопрос безопасности

Ранее было сказано о том, что предложенный пример кода на PHP не соответствует параметрам безопасности. Защищать загрузчик нужно каждому разработчику.

Далее для работы используем jpeg-документы размером более 1 МБ. Скачать их на сервер не получится, если выставить соответствующие ограничения. Они прописываются в переменной upload_max_filesize документа php.ini.

Выше представленный код form action предусматривает упомянутое ранее ограничение. За счет него получится настраивать принципы работы загрузчика.

Мультизагрузка

PHP-скрипты позволяют осуществлять мультизагрузку. Ее можно реализовать несколькими способами:

1. Через имя файла input. Соответствующие «названия» должны быть разными.
2. Привлекая массив. В этой ситуации input могут иметь одни и те же имена.

Все зависит от личных предпочтений разработчика. Первый вариант позволяет загружать несколько документов через элементы ввода. Если создается то или иное количество элементов input, в $_FILES создаются определенные «ключевые» компоненты. Вот наглядный пример:

$_FILES будет выглядеть массивом:

А вот PHP move uploaded file, при помощи которого файл загрузится на сервер. Здесь нужно учитывать, что один элемент предназначается для авы (картинка), другой – для резюме (файл в формате .doc).

А теперь стоит рассмотреть второй вариант – с одним полем input, но с массивами. Для uploaded file PHP можно задействовать массив с input type, прописанным в php:

Для ранее рассмотренного HTML $_Files будет обладать такую структуру:

Готов к работе или требует доработки

Коды, рассмотренные в примере – это шаблоны. Они готовы к работе, хоть и примитивны. Для нормального функционирования оные требуют расширения:

• удаления символов и пробелов из названия;
• занесения информации в БД для дальнейшей обработки;
• проверки размера файлов;
• сжатия изображений и картинок.

Теперь понятно, что собой представляет php _files tmp_name и как создавать формы для загрузки документации на серверы. А чтобы такие слова как server, value и submit не вызывали лишних вопросов, рекомендуется пройти курсы по PHP и серверной работы. Дистанционные занятия с выдачей сертификата в конце обучения – лучший способ быстро освоиться в любой сфере разработки программного обеспечения.

HTML Form Builder Online, PHP Form Creator

Кто уже использует MachForm?

Нам доверяют такие компании и профессионалы, как вы.

Мгновенное создание форм и опросов

Перетаскивание. Никаких технических навыков не требуется.

Зачем использовать MachForm?

Подходит для любых нужд

Создайте форму заказа, форму бронирования, форму опроса, контактную форму, регистрационную форму и многое другое. MachForm строит их все.

Продать больше. Развивайте свой бизнес

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

Создание PDF-документов

Данные формы доставляются вам или вашим клиентам в виде PDF-документа или стандартной электронной почты. Немедленно.

Анализ результатов

Лучшее понимание, лучшие результаты. Быстро оптимизируйте свои формы, чтобы они работали лучше, используя мощную функцию создания отчетов.

Рабочий процесс утверждения

Утверждение или отклонение отправки. Легко создавайте онлайн-процесс утверждения с несколькими утверждающими.

Интеграция с Google Sheets & Calendar

Автоматически сохранять записи форм в Google Sheets. Добавьте событие Календаря Google из ваших форм.

От наших любимых пользователей

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

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

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

Мы используем разнообразное программное обеспечение для ведения нашего бизнеса, который полностью осуществляется онлайн. Нашими ключевыми критериями являются программное обеспечение, обеспечивающее:

1) безопасная работа в Linux
2) профессиональный опыт для наших клиентов
3) интеграция с другим нашим ПО
4) интеграция с нашим дизайном
5) простое администрирование
6) отзывчивая поддержка
7) бизнес-показатели и отчетность

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

Вариант развертывания на ваш выбор

Доступная цена

MachForm Cloud

15 долларов США в месяц

• Ежемесячная подписка
• Полностью управляемый, размещен у нас
• Мгновенная установка
• Работает со всеми веб-сайтами
• Автоматические обновления
• Автоматическое резервное копирование
• Безопасные формы (SSL)
• Шифрование базы данных
• Шифрование электронной почты при передаче (TLS)
• Посмотреть планы

MachForm Self-Hosting

Единовременный лицензионный сбор в размере 99 долларов США

• Платите один раз и используйте MachForm навсегда
• Размещено на вашем сервере
• Бесплатная услуга по установке
• Работает с веб-сайтами, поддерживающими PHP и MySQL
• Вы управляете обновлениями
• Вы управляете резервными копиями
• —
• —
• —
• Посмотреть цены

Бесплатная демо-версия

Попробовать MachForm в действии

Начать демо-версию

Размещение ярлыков в формах :: UXmatters

Верх

Дизайн

12 июля 2006 г.

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

При использовании отслеживания взгляда для оценки удобства использования форм поиска в моей предыдущей статье для UXmatters «Оценка удобства использования форм поиска с использованием отслеживания взгляда: практический подход» мы обнаружили много интересных данных. Здесь я приведу подробный анализ этих данных.

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

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

Спасибо, Люк! Таким образом, мы смогли подвергнуть теории Люка проверке удобства использования и обогатить их силой числовых данных.

Реклама Чемпиона

Продолжить чтение…

В процессе создания форм, которые мы собирались протестировать, мы старались учитывать предложения Люка относительно взаимосвязи между размещением и форматированием меток и типом содержимого формы — общеизвестные данные и незнакомые данные, требующие размышлений. Таким образом, вы найдете оба типа данных на каждой из протестированных нами страниц. Чтобы добавить немного реального колорита, мы объединили поля ввода для хорошо известных данных с другими чуть более сложными элементами формы, такими как раскрывающиеся списки. Более того, это помогло нам подтвердить наши предыдущие выводы о формах.

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

Тест 1: Выровненные по левому краю метки слева от полей ввода

Чрезмерное расстояние между некоторыми метками и их полями ввода вынуждало пользователей тратить больше времени на визуальное взаимодействие с формой.

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

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

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

Рисунок 1—Тестирование выровненных по левому краю меток слева от полей ввода

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

Тест 2: Выровненные по правому краю метки слева от полей ввода

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

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

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

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

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

Рисунок 2—Проверка выровненных по правому краю меток слева от полей ввода

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

Тест 3: Выровненные по левому краю метки над полями ввода

Размещение метки прямо над полем ввода позволяло пользователям захватывать оба элемента одним движением глаза.

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

Рисунок 3—Тестирование меток, выровненных по левому краю над полями ввода

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

Примечание. Краткое введение в работу человеческого глаза можно найти в моей статье «Введение в отслеживание взгляда».

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

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

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

Тест 4: выделенные жирным шрифтом метки над полями ввода

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

«В этом макете [с метками над полями ввода] рекомендуется использовать жирный шрифт для меток полей ввода. Это увеличивает их визуальный вес и выводит их на передний план макета». — Люк Вроблевски

Жирный шрифт привел к почти 60-процентному увеличению времени саккады для перехода от метки к полю ввода.

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

Рисунок 4. Тестирование выделений жирным шрифтом над полями ввода

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

Выводы

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

• Позиция метки. В большинстве случаев размещение метки над полем ввода работает лучше, поскольку пользователям не нужно отдельно смотреть на метку и на поле ввода. Будьте осторожны, чтобы визуально отделить метку для следующего поля ввода от предыдущего поля ввода.
• Выравнивание меток — в большинстве случаев при размещении меток слева от полей ввода использование меток, выровненных по левому краю, накладывает на пользователей большую когнитивную нагрузку. Размещение меток над полями ввода предпочтительнее, но если вы решите разместить их слева от полей ввода, по крайней мере, выровняйте их по правому краю.
• Полужирные метки — чтение жирных меток немного сложнее для пользователей, поэтому предпочтительнее использовать метки с обычным текстом. Однако при использовании полужирных меток вы можете захотеть стилизовать поля ввода, чтобы они не имели толстых границ.
• Раскрывающиеся списки — используйте их с осторожностью, потому что они привлекают внимание. Либо используйте их для важных данных, либо, при использовании их для менее важных данных, поместите их значительно ниже более важных полей ввода.
• Размещение метки для раскрывающихся списков. Чтобы пользователи сразу знали, о чем вы просите, вместо использования отдельной метки сделайте значение по умолчанию для раскрывающегося списка меткой. Это будет работать для очень длинных списков элементов, потому что пользователь уже имеет в виду назначение поля ввода, прежде чем значение по умолчанию исчезнет.

Благодарность. Я хотел бы поблагодарить Магду Джачинтуччи из Consultechnology IMR за ее помощь как в подготовке лабораторной установки, так и в проведении испытаний.

Информационный дизайн | Дизайн веб-приложений | Дизайн веб-форм

В Consultechnology, ITC-компании с офисами в Милане и Ламеции-Терме, Италия, Маттео проводил исследовательские проекты, посвященные естественному взаимодействию между людьми и компьютерами, автомобильным приложениям и универсальному дизайну — специально для пожилых людей и инвалидов. Маттео начал свою карьеру в области информационных технологий, работая в офисах Anixter International в Милане и Лондоне, руководя командой разработчиков и программистов внутренней сети. Затем он работал менеджером проектов в ведущем итальянском веб-агентстве в Милане, где руководил интернет-проектами для международных компаний из списка Fortune 500. Маттео является востребованным докладчиком на национальных и международных семинарах, включая CHI2005, Macromedia и VNU, и это лишь некоторые из них, а также является профессором курса интерактивного дизайна в магистерской программе гуманитарных компьютерных исследований в Университете Бикокка в Милане.