Лекция 10 Создание качественного интерфейса принципы и шаблоны

Лекция 10 Создание качественного интерфейса: принципы и шаблоны

Успешное проектирование Общие решения для сходных проблем? Принципы проектирования рекомендации по проектированию полезных продуктов, систем и услуг, рекомендации по успешному и этичному проектированию Шаблоны проектирования типовые обобщенные решения конкретных классов проблем проектирования

Уровни принципов Ценности проектирования Концептуальные принципы Поведенческие принципы общие принципы эффективного и этичного проектирования сущность продукта и его место как продукт должен себя вести Интерфейсные принципы эффективные стратегии визуальной коммуникации

Ценности проектирования Создавать такие проектные решения которые: Этичны Прагматичны [тактичны, заботливы] [жизнеспособны, осуществимы] Элегантны Целенаправленны [полезны, применимы] [эффективны, искусны, вызывают эмоции]

Минимизация трудозатрат Когнитивная работа понимание поведения продукта Работа зрения поиск старта, поиск объекта, расшифровка визуальной планировки, выявление различий Мнемоническая работа запоминание поведения продукта Физическая работа нажатия на клавиши, перемещение мыши, переключения между режимами

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

Шаблон Некоторый контекст, типичная ситуация - ситуация, когда применимо данное решение - один или несколько конкретных примеров - абстрактные признаки для всех примеров ОПИСАНИЕ ШАБЛОНА - объяснение, почему решение хорошее Библиотека, каталог е е о р ое в р Не е , епт ц н от ег ени ш

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

Структурный шаблон MS Outlook Органайзер указатель объектов Обзор манипуляция с объектами Подробности

Люди и их профессии солдат сборщик налогов актер поведение уместно профессии

Интерфейс программы Смелая / скромная Красочная / тусклая Не зависит от предпочтений проектировщика Техническая платформа Тип интерфейса

Настольные приложения Desktop ТИП ИНТЕРФЕЙСА монопольный временный фоновый

Монопольный тип - Полностью завладевает вниманием пользователя на длительное время Большой набор функций / возможностей Развернуто на весь экран Текстовые процессоры Электронные таблицы Пользователи - середняки Электронная почта

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

Монопольный тип Обогащенная обратная связь индикаторы состояния, состояние обрабатываемых данных, состояние системы, подсказки Новичок Опытный пользователь

Монопольный тип Обогащенные средства ввода - манипулирование, - диалоговые окна, - клавиатурные сокращения Чувствительные области Элементы управления в нижней части экрана пользователь удобно устроился

Временный тип одна функция + ограниченный набор элементов делает свою работу и быстро исчезает НЕТ ВОЗМОЖНОСТИ ПРИВЫКНУТЬ Кнопки - большие Надписи- ясные Указания - четкие Интерфейс должен сообщать о своих функциях

Временный тип Забирает место у монопольной: - не требовать большого пространства, - не занимать много времени НО: Мониторы слежения Цифровые видеосистемы яркие, на весь экран

Временный тип Инструкция встроена в интерфейс: Настройки пользовательских предпочтений Одно окно. Одно представление Служебные и диалоговые окна

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

Фоновый тип - В нормальном состоянии не взаимодействуют с пользователем Драйвер принтера Подключение к сети Невидимые и неслышные

Фоновый тип Все правила как для временных приложений Но критичнее! Никаких таинственных сообщений Не подскажешь, что значит: «Недоступен концентратор соединений» ?

Фоновый тип Как вызвать невидимую программу? Пиктограммы в системной области уведомлений Панели управления

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

Информационная архитектура проблемы логической структуры и связей внутри информационного наполнения Web 2. 0: Настольные приложения = Веб-приложения

Виды Web продуктов и услуг Веб-приложения Информационные веб -сайты Сервисные веб-сайты

Информационные веб-сайты Коллекции документов (страниц) Функции взаимодействия: - поиск информации - переход по гиперссылкам Основные вопросы проектирования: - дизайн - визуальная композиция - элементы навигации - структура

Типы информационных сайтов Временный Монопольный << Целевые персонажи сайта >> << Шаблоны поведения персонажей >> Информация постоянно обновляется Источники справочного материала Минимальное разрешение, Закладки, cookies Адаптивная( «резиновая» ) верстка. Предельно ясная система навигации

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

Сервисные веб-сайты Монопольное >> Удерживать равновесие << - Простота навигации - Доступ к информации - Эффективность транзакций Временное

Пример сайта Ищем зимнюю обувь

Пример сайта

Веб-приложения Насыщены взаимодействием, демонстрируют сложность поведения - постраничный доступ - асинхронный обмен данными с сервером Google Docs ВКонтакте Настольные приложения, работающие внутри браузера

+итехнические ограничения поддержка совместной работы не требует установки (можно дорабатывать на лету) работа в любом месте, где есть интернет Мобильность сотрудников Удаленная работа

Типы веб-приложений Монопольные веб-приложения = Монопольные настольные приложения Забыть о постраничной навигации! Монопольное веб-приложение Карла Временное веб-приложение Сары