EPAM Systems: проектирование пользовательских интерфейсов Геннадий Драгун. EPAM Systems

Об отделе проектирования пользовательских интерфейсов

Факты Специализация Проектирование и разработка прототипов сложных web- и desktop- приложений Цифры 36 специалистов Более 200 проектов, более 500 продуктов Отдел основан в 2003 году Более 150 человеко-лет совокупного опыта

Некоторые заказчики

Направления деятельности Проектирование Проектирование интерфейса Графический дизайн Контроль качества интерфейса (usability) Разработка прототипов HTML / JS Frameworks Flash

Инструменты и технологии Проектирование Microsoft Visio Adobe Adobe Photoshop / Fireworks / Illustrator Axure RP Pro Sparx Enterprise Architect Разработка прототипов Cross-browser HTML / XHTML / DHTML / CSS JavaScript / JS Frameworks ASP, ASP.NET, Perl, PHP, Ruby on Rails WPF, Silverlight Adobe Flash / Flex / Action Script

Подход к проектированию интерфейсов

Методология проектирования

Проектирование интерфейса Разработка прототипа Оценка качества Дизайн интерфейса Графический дизайн Исследования Анализ Разработка приложения Процесс Аналитик / Исследователь Дизайнер Специалист по юзабилити Разработчик серверной части Проектировщик Заказчик / Пользователь HTML / Flash разработчик Спецификации Диаграммы Структурные схемы Дизайн страниц Гид по стилю Прототипы Отчет по оценке

Исследования и анализ Входная информация Выходная документация Интервью с заинтересованными в проекте лицами Контекстные исследования Этнография (наблюдения и эксперимент) Работа с представителями пользователей (user champions) Спецификации Аналитик / Исследователь Заказчик / Пользователь

Спецификация Общее описание проектируемой системы. Основа для общего понимания продукта командой. Содержание: Видение продукта Бизнес цели заказчика Описание пользователей (роли или персонажи) Сценарии использования (use cases) Методы контроля качества: Аудит (коллегами, заказчиком, проектной командой)

Проектирование интерфейса Структурные схемы Спецификации Аналитик / Исследователь Проектировщик Заказчик / Пользователь Входная информация Выходная документация

Структурная схема (Wireframe) Схематичное изображение содержания экранов. Может иметь различные уровни детализации от схемы разбиения страницы на смысловые блоки до изображения приближенного к виду реальной системы, с включением элементов графического дизайна. Основное требование: Быстрота создания и редактирования. Инструменты: Обычно создаются в MS Visio, Adobe Fireworks, Axure RP Методы контроля качества: Стандарты проектирования Шаблоны интерфейса Различные виды аудита

Дизайн интерфейса Структурные схемы Спецификации Дизайн страниц Диаграммы Гид по стилю Аналитик / Исследователь Дизайнер Проектировщик Заказчик / Пользователь Входная информация Выходная документация

Макет страницы Детальное представление максимально приближенное желаемому к внешнему виду готового приложения. Цель: Основа для создания интерактивного прототипа и гида по стилю. Инструменты: Обычно создается в Adobe Photoshop. Требует больших затрат на проработку, поэтому создается только для наиболее важных или типичных страниц. Методы контроля качества: Экспертный аудит.

Гид по стилю (Style Guide) Описание стандартов дизайна интерфейса, присущих определенному приложению (приложениям для определенной организации). Содержание: Описание стандартов визуального дизайна (фирменный стиль) Описание рекомендуемых подходов к проектированию взаимодействия

Разработка прототипа Структурные схемы Спецификации Дизайн страниц Диаграммы Гид по стилю Прототипы Аналитик / Исследователь Дизайнер Проектировщик Заказчик / Пользователь HTML / Flash разработчик Входная информация Выходная документация

Интерактивный прототип Цели: Демонстрация интерфейса заказчику Оценка качества Основа для клиентской части приложения Инструменты: HTML/ JavaScript Средства быстрого прототипирования (Axure, Fireworks) Методы контроля качества: Аудит Пользовательское тестирование

Оценка качества интерфейса (usability) Структурные схемы Спецификации Дизайн страниц Диаграммы Гид по стилю Отчет по оценке Аналитик / Исследователь Дизайнер Специалист по юзабилити Проектировщик Заказчик / Пользователь HTML / Flash разработчик Входная информация Выходная документация Прототипы

Отчет по удобству использования (документ) Цели: Обнаружение проблем пользовательского интерфейса Разработка предложений по устранению обнаруженных проблем Методики: Аудит по контрольным спискам Экспертный аудит Плюралистический аудит Тестирование удобства использования

Отчет по удобству использования (презентация) Основные проблемы: Недостаточное визуальное выделение выбранного элемента в основном меню Не правильное использование набора вкладок в мастере Дизайн кнопки Next отличен от стиля приложения Отсутствует заголовок страницы Проблемы с выравниваем, группировкой, различная длина элементов управления формы

Примеры работ

Налоговый портал, Казахстан Цели: Предоставление набора интерактивных сервисов налогоплательщикам Объединение информационных ресурсов 20 территориальных налоговых органов в единый сайт Технологии: MS Windows Server 2003 MS Office SharePoint Server 2007 MS Internet Security and Acceleration Server 2006 MS SQL Server 2005, MS Virtual Server 2005, MS BizTalk Server 2006 Результаты: Налоговый комитет получил мощный и удобный инструмент для работы с налогоплательщиками республики. Налогоплательщики получили возможность пользоваться различными on-line сервисами (расчет налогов через интернет, конференции и др.)

Тройка Диалог Проекты: Ребр е ндинг основного информационного ресурса компании «Тройка Диалог» сайта Разработка интранет портала компании Технологии: CMS Actis WebBuilder, СУБД Sybase ASE , сервер приложений Caucho Resin (Java 5), веб- сервер Apache, поисковый движок htdig (сайт) MS SharePoint, MS ASP.NET, MS Silverlight. Ajax (портал) Результаты: Укоренение нового бренда компании Соответствие сайта современным требованиям веб-дизайна Заложены предпосылки внедрения новой CMS

Авиакомпания S7 Проект: Портал для S7 Airlines, продажа авиабилетов, программа лояльности, интеграция с внешними сервисами и платёжными системами - ru Технологии: J2EE, Web services, EPAM CMS, EPAM MKE Интеграция с внешними web системами Результаты: Первый российский сайт авиакомпании с возможностью бронирования билетов через интернет Рост продаж авиа билетов через интернет с 0.5 до 12% (декабрь 2008)

Вопросы