Tag Archives: верстка

Веб-формы: понижаем когнитивную нагрузку

3 Сен

Дизайнов три, а форма одна
Сможете ли вы сходу сказать, которая из этих форм легче воспримится пользователем? В этом посте я приведу рекомендации по дизайну веб-форм, с целью облегчения когнитивной нагрузки
Рекомендаци основаны на результатах теста, который провели в 2006 году и отчето котором размещен на сайте uxmatters. Тест был построен на технологии считывания движений глаз пользователя (eyetracking). Авторы теста получили весьма полезные данные. Они признают, что немного слукавили, так как им пришлось предъявлять веб-формы пользователям не в реальном контексте веб-страницы, а изолированно, чтобы изучать фиксированние глаз именно на форме, а не на других элементах сайта. Синими окружностями показаны фиксирования глаз, линиями — передвижения взгляда.

Расположения названия текстового поля

Названия с выравниванием по левом краю расположенные над текстовыми полями Названия выровнены по левому краю и расположены слева от текстовых полей

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

Выравнивание названия

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

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

Начертание названий

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

Выпадающие меню

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

Заголовок выпадающего меню

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

=======

http://uxmatters.com/mt/archives/2006/07/label-placement-in-forms.php

Интерпретация Рехимкулова Рината

Реклама

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

17 Авг

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

В других направлениях, положительные эффекты от детализации, в лучшем случае, остаются под вопросом. Графические пользовательские интерфейсы (GUI) обычно полны символов. Большинство элементов, которые вы видите на мониторе, используются, чтобы донести до вас конкретные концепты. Маленький домик на рабочем столе означает не «жилище», а «Вернуться в начало». Глаз — не глаз, а «взгляните на выбранный элемент». Маленький треугольничек — не треугольничек, а «нажми на меня и увидишь допольнительные опции для использования». Иконки предназначены не для имитации реальных объектов, а для передачи обобщённого представления — концепта.

Графические детали и реализм могут отвлекать от истинной задачи иконки. Мне поможет вырезка из книги «Понимаем комиксы» Скотта Макклауда (Scott McCloud’s «Understanding Comics»), книга, которую должен прочитать каждый дизайнер.

Страница из книги «Понимаем комиксы»
«…Еще одна вещь — универсальность. Например, чем менее лицо походит на настоящее, тем больше типажей лиц им может описать.»

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

Настоящий фотоаппарат на кнопке вводит в заблуждение.

Читать далее

10 юзабилити-преступлений, которых вы не должны совершать

22 Июл

Юрий Пискун (yoyurec) перевел отличную статью Криса Спунера (Chris Spooner) «10 Usability Crimes You Really Shouldn’t Commit«. Эти 10 преступлений действительно частая ошибка веб-разработчиков, поэтому рекомендую почитать.

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

Преступление #1: В формах метки не связаны с полями ввода

crime1
Использование атрибута «for» позволит пользователям кликать по метке, для выбора соответствующего поля формы. Это особенно важно для чекбоксов и радиокнопок — увеличить область клика.

Преступление #2: Логотип не ведёт на главную страницу

crime2
Создание такой ссылки является хорошим тоном, ведь большинство пользователей ожидают перехода в корень сайта при клике на логотип.

Преступление #3: Не помечены посещённые ссылки

crime3
Об этом забывают очень часто, но посетителям нужно знать по каким ссылкам они уже кликали.

Читать далее