Улучшаем опыт взаимодействия с формами

Часто меня спрашивают студенты: «Какой элемент сайта самый важный?», на что я им отвечаю — формы. Ведь с помощью форм пользователи совершают почти все конверсионные действия. Именно с этим элементом связано больше всего проблем. В этой статье я постараюсь рассказать, что можно улучшить при взаимодействии с формами. А заодно описать новые возможности работы с ними в браузерах.

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

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

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

Браузерная статистика рунета

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

Все приёмы в этой статье оценят 56,8% пользователей. В этой статистике присутствуют браузеры: IE 10, Firefox 11-17, Chrome 4-24, Safari 6, Opera 12.

Часть приёмов оценят 80,1% пользователей. Сюда дополнительно включил поддержку: IE 8-9, Safari 4-5, Opera 10-11.

Мобильные браузеры в статистику не включал, хотя они бы дали ещё больший процент поддержки. Информацию брал из LiveInternet со срезом по России. В расчёт попал средний трафик за 3 месяца (октябрь-декабрь) 2012 года.

Новые атрибуты форм в HTML5

Для начала, напомню о новых атрибутах у полей формы, которые буду использовать: required, autofocus, placeholder.

• required — обязательное поле для заполнения;
• autofocus — установка фокуса на поле при загрузке страницы;
• placeholder — описание поля.

Вместе с этим появилось много новых типов полей: date, email, number, range и другие. Однако, самое безобидное из них (email), до сих пор используется с опаской. А ведь для того, чтобы оно заработало специальных действий не нужно. Браузеры, которые не знают этот тип полей, будут считать его текстовым.

Также появились дополнительные селекторы в CSS: E:valid, E:invalid, E:required — с помощью которых можно описывать стилевое оформление полей в разных ситуациях.

Демонстрация работы новых атрибутов полей и их оформления.

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

Запись данных формы по мере ввода

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

1. if (window.localStorage) {
2.   var elements = document.querySelectorAll(‘[name]’);
3.  
4.   for (var i = 0, length = elements.length; i < length; i++) {
5.     (function(element) {
6.       var name = element.getAttribute(‘name’);
7.  
8.       element.value = localStorage.getItem(name) || »;
9.  
10.       element.onkeyup = function() {
11.         localStorage.setItem(name, element.value);
12.       };
13.     })(elements[i]);
14.   }
15. }

Валидация формы и отправка данных аяксом

Раз уж мы используем атрибуты required, то можно и валидацию сделать по-новому. В спецификации HTML5 для элемента формы добавлен метод checkValidity(). Он возвращает true или false. Стратегия работы формы будет очень простой: если проверка валидации даёт отрицательный результат — мы блокируем отправку формы, в обратном случае — разрешаем отправку.

1. submit.disabled = !form.checkValidity();

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

1. form.onsubmit = function(event) {
2.   if (window.FormData) {
3.     event.preventDefault();
4.  
5.     var data = new FormData(form);
6.     var xhr = new XMLHttpRequest();
7.     var url = form.getAttribute(‘action’) + ‘?time=’ + (new Date()).getTime();
8.  
9.     xhr.open(‘post’, url);
10.     xhr.onreadystatechange = function() {
11.       if (xhr.readyState == 4 && xhr.status == 200) {
12.         // server response: xhr.responseText
13.       }
14.     };
15.     xhr.send(data);
16.   }
17. };

При работе с асинхронными запросами следует помнить, что некоторые браузеры кэшируют результат. Например, это делает Internet Explorer, Mobile Safari (iOS 6) и другие. Чтобы избежать эту проблему, можно добавлять к адресу запроса текущее время.

Сейчас ответ от сервера мы получаем в текстовом виде (xhr.responseText), но со временем это изменится. Например, если мы точно знаем, что ответом будет JSON, мы можем получить JavaScript объект сразу.

1. var xhr = new XMLHttpRequest();
2.  
3. xhr.open(method, url);
4. xhr.responseType = ‘json’;
5.  
6. xhr.onreadystatechange = function() {
7.   if (xhr.readyState == 4 && xhr.status == 200) {
8.     // server response: xhr.response
9.   }
10. };
11.  
12. xhr.send();

Обратите внимание, что ответ сервера будет в свойстве xhr.response. А свойство xhr.responseType может принимать и другие значения, например: arraybuffer, blob, document.

Демонстрация сохранения данных формы и отправки их с помощью XMLHttpRequest.

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

Предварительный просмотр закачиваемых фотографий

Плавно переходим на работу с файлами в формах. До недавнего времени почти никаких средств для работы с файлами не было. Но всё меняется. Начнём с простого — новые атрибуты для полей загрузки файлов.

• multiple — позволяет выбирать несколько файлов;
• accept — даёт возможность указывать, какие файлы выбирать.

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

1. <input type="file" name="image" accept="image/*" multiple>

Хочу напомнить: поле с такими атрибутами будет работать в старых браузерах. Ограничением будет:

1. Только один файл;
2. Валидация файлов производится на серверной стороне.

Попробуем улучшить опыт взаимодействия с файлами. Раз мы ожидаем от пользователей добавления фотографий, логично сделать возможным предварительный просмотр. Для этого мы будем использовать объект FileReader из спецификации File API.

1. document.querySelector(‘[type=file]’).addEventListener(‘change’, function() {
2.   [].forEach.call(this.files, function(file) {
3.     if (file.type.match(/image.*/)) {
4.       var reader = new FileReader();
5.  
6.       reader.onload = function(event) {
7.         var img = document.createElement(‘img’);
8.         img.src = event.target.result;
9.  
10.         div.appendChild(img);
11.  
12.         queue.push({file: file, element: img});
13.       };
14.  
15.       reader.readAsDataURL(file);
16.     }
17.   });
18. }, false);

Таким образом, все выбранные фотографии мы сразу же отображаем на сайте.

А для того, чтобы отправить их с помощью аякса, мы собираем их в массиве queue. Ранее в статье мы использовали объект FormData, сейчас мы просто добавим к нему список файлов.

1. var data = new FormData(form);
2.  
3. queue.forEach(function(element) {
4.   data.append(‘image’, element.file);
5. });

Только и всего, остальное остаётся таким же. Форма будет отправлена с файлами без перезагрузки.

Демонстрация предварительного просмотра фотографий и отправки их с помощью аякс.

Drag and drop файлов

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

1. function previewImages(files) {
2.   [].forEach.call(files, function(file) {
3.     if (file.type.match(/image.*/)) {
4.       var reader = new FileReader();
5.  
6.       reader.onload = function(event) {
7.         var img = document.createElement(‘img’);
8.         img.src = event.target.result;
9.  
10.         div.appendChild(img);
11.  
12.         queue.push({file: file, element: img});
13.       };
14.  
15.       reader.readAsDataURL(file);
16.     }
17.   });
18. }

Допустим, зоной для перемещения файлов будет блок с классом wrapper. Добавим события для него.

1. var file = document.querySelector(‘[type=file]’);
2. var dropzone = document.querySelector(‘.wrapper’);
3.  
4. file.addEventListener(‘change’, function() {
5.   previewImages(this.files);
6.   this.value = »;
7. }, false);
8.  
9. dropzone.addEventListener(‘dragover’, function(event) {
10.   event.preventDefault();
11.   dropzone.classList.add(‘active’);
12.   event.dataTransfer.dropEffect = ‘copy’;
13. }, false);
14.  
15. dropzone.addEventListener(‘drop’, function(event) {
16.   event.preventDefault();
17.   dropzone.classList.remove(‘active’);
18.   previewImages(event.dataTransfer.files);
19. }, false);

Как видите, мы добавили события начала (dragover) и конца (drop) перемещения файлов. Все перемещённые файлы мы передаём функции previewImages. Таким образом, наша форма работает одинаково с файлами выбранными через сайт и перемещёнными с компьютера.

Процесс загрузки файлов (progress bar)

Фотографии бывают очень большими, поэтому попробуем отобразить процесс загрузки. Для визуализации этого процесса я возьму элемент progress, а вы можете взять div с двигающимся фоном. Сам процесс будет происходить в событии progress из спецификации XMLHttpRequest.

1. var xhr = new XMLHttpRequest();
2.  
3. xhr.upload.addEventListener(‘progress’, function(event) {
4.   if (event.lengthComputable) {
5.     progress.value = Math.round((event.loaded * 100) / event.total);
6.   }
7. }, false);

Демонстрация drag & drop и прогресса загрузки файлов.

В итоге

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

1. Валидация происходит в момент ввода;
2. Введённые данные запоминаются пока не будут отправлены;
3. Контактные данные сохраняются для повторной работы;
4. Предварительный просмотр фотографий;
5. Процесс загрузки файлов.

При этом, так как мы действовали в соответствии с прогрессивным улучшением, наша форма работает везде:

• в IE 6-7 и других старых браузерах,
• с отключённым JavaScript,
• на мобильных устройствах.

Работа FileReader на iOS 6.

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