Основные пункты usability-тестирования.

Групповые установка и снятие checkbox’ов

Если на странице есть группа однотипных по смыслу checkbox’ов, то необходимо реализовать групповую установку иснятие «галочек» дополнительным checkbox’ом выделить все

Групповые операции.

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

Подсказка к ссылкам и графическим кнопкам.

К сылкам и особенно к графическим кнопкам обязательно должны идти всплывающие подсказки, кратко (не более 5 слов) объясняющие её назначение. Для этого следует использовать стендартный аттрибут тегов title

Значение по умолчанию «не выбрано» у select’ов.

За исключением случаев, когда один из элементов выпадающего списка <select> выбран сознательно, или особо оговорённых случаев, первым элементом списка (при этом выбранным по умолчанию) должен быть —не выбрано—, означающий, что пользователь не совершал сознательного выбора в этом поле. При отправке формы должна производиться проверка этого поля на отсутствие значения —не выбрано—.

Расположение кнопок «Ok» и «Отмена».

Если форма содержит кнопки ОК/Отмена (Выполнить/Отмена), их расположение должно быть стандартным: в самом низу формы, обе кнопки на одном уровне, выравнивание по правому краю и слева «ОК», а справа «Отмена»

Отправка формы по Ctrl+Enter

Любая форма должна отправляться по Ctrl+Enter, то есть обязательна должна содержать поле типа submit. Совершенно недопустима отправка формы с помощью javascript. С помощью javascript должна проводиться только её проверка.

Нумерация строк таблицы и списков.

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

Отступы от краёв ячеек в таблицах.

Данные в таблице, особенно если четко очерчены границы ячеек, не должды прилипать вплотную к левому и правому краю ячейки. Необхоимо использовать отступы, задаваемые стилями CSS. Рекомендуется отступ по 5px слева и справа. Выравнивание текста в ячейках таблицы, за исключением особых случаем, должно быть по левому краю.

Черезцветица строк.

Для таблицы ширина которой составляет более половины окна, цвет фона соседних строк должен чередоваться (чет/нечет). В то же время не стоит выбирать слишком яркие цвета, рекомендуется сочетание #EFEFEF и #F8F8F8.

Заголовки столбцов.

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

<table>
    <tr>
        <th>
            № П/П
        </th>
        <th>
            Ф.И.О.
        </th>
    </tr>
    <tr>
        <td>
            1
        </td>
        <td>
            Иванов Иван Иваныч
        </td>
    </tr>
</table>

Повторение заголовков у длинных таблиц.

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

Предупреждение перед удалением.

Перед операциями удаления необходимо выводить предупреждающее сообщение, в котором пользователь должен подтвердить своё намерение (защита от случайных удалений). Рекомендуется реализовывать это с помощью стандартной функции javascript confirm, помещённой в качестве обработчика для элемента управления

<input type="submit" name="delete" onclick="return confirm('Вы уверены');">

Проверка данных формы с помощью Javascript.

Кроме проверки данных на стороне сервера необходимо организовать (по возможности полную) проверку на стороне браузера с помощью javascript. Вот пример проверки заполнения формы регистрации

  /* ***********************************
  *   Функция проверки данных формы
  *************************************/
  function check_form_master_reg(){

      // Проверка корректности имени пользователя
      var reg1=/[\d\w\_\-]+/i;
      if(!reg1.test(document.getElementById('form_username').value)){
          alert("Неверно задано имя пользователя. "+
          "Допускаются только символы латиницы, цифры тире и подчеркивание");
          return false;
      }

      // Проверка корректности e-mail
      var reg2=/[\d\w\-\.]+\@[\d\w\-\.]+/i;
      if(!reg2.test(document.getElementById('form_email').value)){
          alert("Неверно задан email");
          return false;
      }

      // Проверка непустоты пароля
      if(!document.getElementById('form_password').value){
          alert('Не введён пароль');
          return false;
      }
      // Проверка непустоты подтверждения пароля
      if(!document.getElementById('form_repassword').value){
          alert('Не введёно подтверждение пароля');
          return false;
      }

      // Проверка на совпадение пароля и подтверждения
      if(document.getElementById('form_password').value!=
          document.getElementById('form_repassword').value){
          alert('Пароль и подтверждение не совпадают');
          return false;
      }
      return true;
  }

Сохранение данных формы при распозновании сервером ошибочных входных данных.

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

Сообщения об успехе/неудаче проделанной операции.

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

Не допускать повторную отработку формы при перезагрузке страницы

Совершенно недопустима многократная успешная отправка формы простым нажатием F5 или Ctrl+R (негативный пример — добавление записи в гостевую книгу простым нажатием F5)

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


Добавить комментарий