UIDesign Group. Описание пользовательского интерфейса приложения КАЛЕНДАРЬ
Подождите немного. Документ загружается.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
41
10.9. Диалог удаления
Файл с изображением экранной формы: 03_profiles_delete.png.
Вызывается при выборе пункта «Удалить…» контекстного меню профиля на
закладке «Время и профили».
Рисунок 16. Диалог удаления профиля
Зеленые сноски обозначают индекс табуляции элементов. По умолчанию
фокус ввода находится на кнопке «Не удалять». Действие кнопки
дублируется клавишей ESC клавиатуры. Клавиша ENTER дублирует ту
кнопку, на которой в данный момент времени находится фокус ввода.
Диалог состоит из следующих элементов:
• Текст предупреждения с указанием названия удаляемого профиля;
• Кнопка «Удалить». При нажатии происходит удаление выбранного
профиля из списка;
• Кнопка «Не удалять». При нажатии происходит закрытие диалога
удаления без удаления выбранного профиля.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
42
10.10. Интеграция в панель задач
Файл с изображением экранной формы: 05_alert.png.
10.10.1 Индикатор времени
В правой части панели задач располагается миниатюрный индикатор
времени, внешне полностью аналогичный стандартному индикатору
Windows и заменяющий его.
В зависимости от состояния таймера он может иметь различный внешний
вид.
В случае включенного напоминания индикатор времени окрашивается в
красный цвет. При наступлении запланированного события этот индикатор
мигает в течение 30 секунд с частотой ~1Гц, затем на экране появляется
напоминание (см. раздел 10.10.2).
Одиночный клик на индикаторе в течение 30 секунд с момента
наступления времени напоминания (пока индикатор мигает) вызывает
появление окна напоминания (см. раздел 10.10.2).
При двойном клике на индикаторе времени происходит открытие основного
окна программы. При этом на экране доступна та закладка приложения, с
которой пользователь взаимодействовал в прошлый раз – то есть
программа запоминает свое состояние на момент закрытия.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
43
10.10.2 Всплывающее окно напоминания
Рисунок 16. Окно напоминания и всплывающая подсказка
Окно напоминания состоит из области самого напоминания, окрашенной в
яркий контрастный цвет (предпочтительно красный), а также следующих
элементов-ссылок для совершения типовых сценариев:
• «Напомнить через 5 минут». Закрывает окно напоминания. Создает
повторное напоминание через 5 минут после нажатия на ссылку;
• «Напомнить через 15 минут». Закрывает окно напоминания. Создает
повторное напоминание через 15 минут после нажатия на ссылку;
• «Напомнить через 30 минут». Закрывает окно напоминания. Создает
повторное напоминание через 30 минут после нажатия на ссылку;
• «Перейти к таймеру». Закрывает окно напоминания. Открывает
главное окно программы на закладке «Таймер»;
• «Отложить до завтра». Закрывает окно напоминания, оставляя
таймер включенным – таким образом он сработает через сутки;
• «Отключить напоминание». Закрывает окно напоминания. Отключает
таймер.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
44
Окно напоминания изначально является полупрозрачным (прозрачность
30-40%), и становится полностью непрозрачным при наведении на него
курсора мыши.
При появлении окно напоминания не перехватывает фокус ввода, ссылки
становятся доступными лишь при непосредственном перемещении курсора
мыши в область окна напоминания.
Ключевая
идея
Предложенная функциональность всплывающего напоминания
позволяет отработать базовые пользовательские сценарии без
совершения лишних действий (открытия программы) и с
минимальной нагрузкой на внимание пользователя.
10.10.3 Контекстное меню
Рисунок 17. Контекстное меню в панели задач
Контекстное меню программы может быть вызвано при нажатии правой
кнопки мыши на индикаторе времени в панели задач.
Контекстное меню содержит следующие элементы:
• «Отключить напоминание». Отключает активный таймер. Если таймер
отключен, то элемент меню меняется на «Включить напоминание»;
• «Таймер». Открывает главное окно программы на закладке
«Таймер»;
• «Календарь». Открывает главное окно программы на закладке
«Календарь»;
• «Время и профили». Открывает главное окно программы на закладке
«Время и профили»;
• «Синхронизация». Открывает главное окно программы на закладке
«Синхронизация».
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
45
10.10.4 Клавиатурные сокращения
Интегрированное в панель задач приложение поддерживает следующие
клавиатурные сокращения («быстрые клавиши»):
Клавиша/комбинация Контекст Действие
SHIFT + ENTER Момент 30-секундного мигания
индикатора времени при
наступлении напоминания
Вызов всплывающего окна напоминания,
то же самое, что и одиночный клик на
индикаторе времени
SHIFT + PAUSE Окно напоминания находится на
экране
Откладывание напоминания на 5 минут,
то же самое, что и клик на ссылке
«Напомнить через 5 минут»
SHIFT + ESC Окно напоминания находится на
экране
Отключение напоминания, то же самое,
что и клик на ссылке «Отключить
напоминание»
Ключевая
идея
Использование «быстрых клавиш» дает возможность пользователю
при наступлении момента напоминания закончить или продолжить
свою текущую задачу с минимальными потерями собственных
ресурсов (времени, внимания), инициировав один из базовых
сценариев взаимодействия с приложением, практически не
отвлекаясь.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
46
Поведенческие свойства
пользовательского интерфейса
Во избежание конфликта с привычками пользователей, работающих с
офисными пакетами Microsoft, необходимо придерживаться стандарта
Microsoft в области использования клавиатуры.
10.11. Стандартные клавиатурные сокращения,
используемые в программе
Клавиша/комбинация Контекст Действие
CTRL + C Любой текстовый элемент ввода. Копирование выбранного элемента ПИ в
буфер обмена Windows.
CTRL + INSERT Любой текстовый элемент ввода. То же самое, что и CTRL-C
CTRL + X Любой текстовый элемент ввода. Копирование выбранного элемента ПИ в
буфер обмена Windows с одновременным
удалением его.
CTRL + V Любой текстовый элемент ввода. Вставка элемента ПИ из буфера обмена в
текущую точку ввода.
SHIFT + INSERT Любой текстовый элемент ввода То же самое, что и CTRL-V
CTRL + Z Любой текстовый элемент ввода. Отменить последнюю операцию.
CTRL + Y Любой текстовый элемент ввода. Выполнить отмененную операцию.
ESC Модальное диалоговое окно,
Активный процесс с возможность
отмены выполнения.
Прервать выполняемую задачу.
DELETE Любой текстовый элемент ввода. Удалить символ, находящийся после
символа курсора
INSERT Любой текстовый элемент ввода. Изменение режима ввода текста
(вставка/замена).
CTRL + F4 Модальное либо немодальное
дочернее окно.
Закрытие модального окна, либо
подчиненного окна.
ALT + F4 Любое окно. Закрытие программы либо независимого
окна.
CTRL + TAB Любое окно с панелями или
закладками.
Перемещение к следующему панели либо к
следующей закладке.
CTRL + SHIFT + TAB Любое окно с панелями или
закладками.
Перемещение к предыдущей панели либо к
предыдущей закладке.
CTRL + PAGE DOWN Окно с закладками Перемещение к следующей закладке
внутри окна (как CTRL+TAB).
CTRL + PAGE UP Окно с закладками Перемещение к предыдущей закладке
внутри окна (как CTRL+SHIFT+TAB).
F1 Любое место Вызов контекстной cправки по системе.
SHIFT + F1 Любое место Вызов оглавления справочной системы.
TAB Окно приложения,
Модальное окно.
Перейти на следующий элемент окна.
SHIFT + TAB Окно приложения,
Модальное окно.
Перейти на предыдущий элемент окна.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
47
ALT + буква Диалоговое окно,
Меню приложения первого уровня
Выбор параметра или изменение состояния
флажка, в названии которого подчеркнута
указанная буква
ENTER Модальное диалоговое окно Выполнить команду по умолчанию,
присвоенную диалоговому окну.
ENTER Окно приложения Выполнение операции, назначенной кнопке
в диалоговом окне по умолчанию
ПРОБЕЛ Радиокнопка,
Флажок
Выполнение операции, назначенной
выбранной кнопке; установка или снятие
флажка
Клавиши стрелки Внутри окна Перенести фокус ввода и выбор на другой
элемент ПИ внутри группы связанных
элементов.
CTRL + N Список, допускающий операцию
добавления
Создать новый элемент в списке.
CTRL + A В полях ввода текста. Выбирает весь текст в элементе
10.12. Валидация вводимых данных
Валидация данных должна осуществляться, избегая (по возможности)
необходимости в сообщениях об ошибках. Для этого рекомендуется
использовать маски ввода, не позволяющие пользователю вводить
заведомо ошибочные и неподходящие значения.
Пользовательский интерфейс программы КАЛЕНДАРЬ UIDesign Group | http://uidesign.ru
48
UIDesign Group: проектирование
пользовательских интерфейсов
Компания UIDesign Group предоставляет консультационные услуги в области
проектирования пользовательских интерфейсов информационных систем, включая
сложные веб-сайты.
Нами выработана собственная гибкая методика разработки ПИ, основанная на бизнес-
целях заказчика, а также на глубоком анализе целей и задач, решаемых пользователями
при работе с проектируемой информационной системой.
Видимым результатом нашей деятельности является, как правило, резкое увеличение
эффективности проектируемых информационных систем, значительное уменьшение
затрат на их внедрение, использование и поддержку, а также снижение рисков
планирования и выпуска продукта.
Мы предлагаем следующий набор услуг:
• Аудит эргономических качеств систем;
• Проектирование ПИ;
• Графическое оформление ПИ, разработка информационной графики;
• Сопровождение имплементации разработанных решений;
• Поддержка разработки, абонентское обслуживание;
• Консалтинг и ведение проектов;
• Разработка стандартов;
• Обучение.
Нашими клиентами и партнерами являются крупнейшие российские и зарубежные
компании: Росгосстрах, Euro RCSG Circle, TopsBI, Aplana Software, Intel.
Мы проводим самостоятельные исследования в различных областях и изучаем наиболее
востребованные на рынке системы: страхования, банковские, документооборота,
хранения и доступа к данным и т.д.
Мы готовы делиться нашими знаниями и повышать эффективность вашего
бизнеса вместе с вами.
Качественный интерфейс – это:
• Гарантия успешности планирования продукта;
• Снижение финансовых и временных затрат на разработку;
• Значительное уменьшение затрат на поддержку продукта;
• Увеличение конкурентных преимуществ;
• Повышение лояльности пользователей;
• Увеличение экономического эффекта от использования продукта;
• Снижение вероятности критических ситуаций.
http://uidesign.ru | mail@uidesign.ru