Инструментарный инвентарь разработчика интерактивных систем

РУДН

Кафедра Информационных технологий

 

 

 

 

Реферат

на тему

«Инструментарный инвентарь разработчика интерактивных систем»

(часть1)

 

 

 

Выполнила

Студентка НИ-501

Захарова Алёна

 

 

Москва 2012 

Введение.

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

Инвентарь разработчика интерактивного ПО включает в себя следующие группы компонентов:

• Элементы управления
• Меню
• Окна
• Остальное (пиктограммы, курсоры, цвет, звук…)

В рамках данного реферата будет  рассмотрена первая группа инструментов, а именно элементы управления.

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

 

Виды элементов управления

Элементы управления, которые использует разработчик интерактивного ПО подразделяются на следующие категории:

• Кнопки
• Списки
• Комбобоксы
• Поля ввода
• Ползунки

Давайте рассмотрим каждую категорию  по подробней.

 

Кнопки

Кнопкой называется элемент управления, всё взаимодействие пользователя с которым ограничивается одним действием – нажатием.

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

 

Командные кнопки.

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

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

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

 и как кнопка – если она запускает действие.

 

Размеры и поля.

Как вы уже знаете, чем  больше кнопка, тем легче попасть  в нее курсором. Это правило  по мере сил всеми соблюдается, во всяком случае, кнопок размером 5 на 5 пикселей уже практически не встретишь. Однако помимо простоты нажатия на кнопку есть другая составляющая проблемы: пользователю должно быть трудно нажать не на ту кнопку. Добиться этого можно либо изменением состояния кнопки при наведении на неё курсором, либо установлением пустого промежутка между кнопками. Первый способ пробрел существенную популярность в интернете, второй – в обычном ПО. Ни тот, ни другой способы не обеспечивают стопроцентной надежности, так что при прочих равных использовать стоит оба.

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

 

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

 

Объем.

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

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

Еще с одной стороны, зачастую возникает необходимость максимально  повышать шансы нажатия пользователем  какой-либо отдельной кнопки (например, «О компании»), в этих случаях псевдообъем этой кнопки (при прочих плоских) сильно повышает вероятность нажатия.

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

 

Состояния.

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

• Нейтральное
• Нажатое
• Нейтральное с установленным фокусом ввода
• Состояние кнопки по умолчанию
• Кнопка по умолчанию с установленным фокусом ввода
• Заблокированное состояние

В интернете обычно используют меньший набор состояний:

• нейтральное
• готовое к нажатию (onMouseOver)
• активное (в случаях, когда набор кнопокиспользуется для индикации навигации)

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

 

Обычно, чем больше набор  состояний, тем лучше. Но главное  не это, а отсутствие дублирования состояний: не должно быть разных состояний, выглядящих одинаково. Также очень важно делать

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

 

Текст и пиктограммы.

Все руководства по разработке интерфейса требуют снабжать командные  кнопки названиями, выраженными в  виде глаголов в форме инфинитива (Прийти, Увидеть, Победить). Кнопка, запускающая действие, недаром называется командной. С её помощью пользователи отдают системе команды. Команда же в русском языке формируется посредством глагола в повелительном наклонении.

 

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

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

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

 

 

Кнопки доступа к меню.

Также к группе командных кнопок относится кнопка доступа к меню. Она представляет собой комбинацию раскрывающегося списка и командной  кнопки.

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

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

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

 

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

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

 

Чекбоксы и радиокнопки.

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

 

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

 

Внешний вид.

Традиционно сложилось так, что чекбоксы выглядят как квадраты, а радиокнопки – как кружки. Нарушать это правило нельзя.

Желательно вертикально располагать  чекбоксы и радиокнопки в группе, поскольку это облегчает поиск конкретного элемента.

 

Текст подписей.

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

Подписи к стоящим параллельно  кнопкам лучше стараться делать примерно одинаковой длины. Если подпись не помещается в одну строку, выравнивайте индикатор кнопки по первой строке подписи.

 

Взаимодействие.

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

 

Списки.

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

Списки бывают пролистываемыми и раскрывающимися.

 

Раскрывающиеся списки

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

 

Пролистываемые списки

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

 

Списки единственного  выбора.

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

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

 

Списки множественного выбора.

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

 

Комбобоксы

 

Комбобоксами (combo box), называются гибриды списка c полем ввода пользователь может выбрать существующий элемент, либо ввести свой. Комбобоксы бывают двух видов: раскрывающиеся и расширенные. Оба типа имеют проблемы.

  

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

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

 

У расширенных комбобоксов противоположная проблема – их возможно реализовать в интернете, зато достаточно сложно в ПО.

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

 

 

Поля ввода

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

Размеры.

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

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

Менее очевидным является другое соображение:

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

 

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

 

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

 

Подписи.

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

 

 

Крутилки.

Крутилка (spinner, little arrow) есть поле ввода, которое позволяет ввести информацию в заданном формате, что уменьшает вероятность человеческой ошибки, и экономит время пользователя, так как ввести данные можно не отрывая руки от мыши.

 

Ползунки

Как и ранее описанные  элементы управления, ползунки позволяют  пользователям выбирать значение из списка, не позволяя вводить произвольное значение.

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

■ значений в ряду много

■ нужно передать пользователям ранжируемость значений

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

 

Заключение

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

Для более глубокого ознакомления с темой рекомендуется изучить книгу В. Головача «Дизайн пользовательского интерфейса V1.2».

 

Список использованной литературы

 

1. В. Головач «Дизайн пользовательского интерфейса V1.2»
2. В. Головач «Дизайн пользовательского интерфейса» - книга вторая
3. 20 заповедей дизайна пользовательского интерфейса http://habrahabr.ru/post/147003/
4. Из грязи в князи – Usethics http://usethics.ru/files/2009/02/beauty.pdf