Человеко-машинное взаимодействие 01 03 2014 О надписях

Человеко-машинное взаимодействие 01. 03. 2014

О надписях

Трудный выбор

Отменить или отменить?

Найдите отличия

Составные части пользовательского интерфейса Элементы управления

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

Ввод и отображение текста надпись Label текстовое поле Text. Field, Text текстовое в несколько строк Textarea поле для ввода пароля Password

Отображение текста: пример

Элементы выбора радиокнопки radiobutton флажки checkbox Основное правило • Радиокнопки используются, когда варианты взаимоисключают друга, возможен только один выбор • Группа флажков предоставляет возможность выбора нескольких элементов из списка • Один флажок используется при выражении согласия / несогласия (или включить/выключить)

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

Списки Выпадающие / не выпадающие С единственным выбором / с множественным выбором С фиксированным списком элементов / с возможностью добавления новых элементов

Гиперссылки Обеспечивают интерактивность Нужно визуально различать разные состояния Должны быть заметны, отличимы от основного текста ! Не должно быть элементов, выглядящих как ссылки, но ими не являющихся. Например, как эта

Кнопки Выполнение действий ! От элемента в виде кнопки действие ожидается всегда

Меню Средство навигации

Полоса прокрутки Scrollbar (1) лучше использовать стандартный прямоугольник цвета контрастного фону http: //dotroe. com/subpage. html

Полоса прокрутки Scrollbar (2) слайдер должен быть и быть заметен

Полоса прокрутки Scrollbar (3) показывать стрелки внизу и наверху разрешить разные формы действия нажатие на стрелки нажатие на полосу колесо мыши слайдер

Организация пространства Вкладки Рамки Линии Таблицы Диаграммы Изображения Всплывающие окна Группирующие блоки …

А также… календари для выбора дат Date загрузка файла File Upload …

Полезные ресурсы Сайт авторитетного дизайнера и специалиста по созданию интерфейсов Якоба Нильсена http: //www. nngroup. com/ Инструменты создания веб-сайтов http: //www. top 10 bestwebsitebuilders. com/ http: //ru. wix. com/ Дональд Норман «Дизайн привычных вещей» …

Задание Создание формы-анкеты

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

Фамилия, имя Логин, пароль Фотография Пол Образование Родной город Телефон Любимый праздник Согласие на обработку данных E-mail Возраст Дополнительный e-mail Сколько времени Вы потратили на заполнение анкеты А. Книги Б. Родственники жанр степень родства название имя автор возраст читаю сейчас / прочитал пол рисунок-ассоциация с книгой фотография краткое содержание самое яркое воспоминание советую / не советую прочитать встречался / не встречался в течение последнего месяца кнопка формирования профиля кнопка формирования дерева