Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company

Категория: Дизайн


500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500500

Вы можете ознакомиться и скачать Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company. Презентация содержит 52 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.


Слайды и текст этой презентации

Слайд 1
Описание слайда:
Контроль качества интерфейсных решений на всех этапах проектирования и разработки Юрий Ветров. UI Modeling Company

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

Слайд 3
Описание слайда:
Обзор процесса проектирования из чего складывается User Experience, как можно влиять на него, метрики юзабилити, путаница в терминах, продукт и этапы проектирования Обзор процесса проектирования из чего складывается User Experience, как можно влиять на него, метрики юзабилити, путаница в терминах, продукт и этапы проектирования Встраивание проектирования в общий процесс Разбор кейса Выводы и наблюдения

Слайд 4
Описание слайда:
Из чего складывается User Experience Взаимодействие пользователя с продуктом происходит на разных «слоях»: Возможность выполнения задач с помощью продукта. Эффективность выполнения задач. Скорость и качество решения возникающих проблем. Внешняя эстетика продукта. Встроенность в экосистему – взаимодействие с другими продуктами и сервисами.

Слайд 5
Описание слайда:
Как можно влиять на User Experience Воспринимая продукт шире чем просто программу, можно улучшить впечатление от работы с продуктом на всех этапах работы пользователя с ним: Качество исполнения самого продукта – функциональность, интерфейс, дизайн. Сопутствующие процессы – покупка, поддержка, модернизация. Интеграция с другими продуктами – возможность импорта/экспорта данных, подключения надстроек.

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

Слайд 7
Описание слайда:
Как побороть путаницу в терминах За последние несколько лет в обиход вошла целая серия терминов, касающихся процесса проектирования: юзабилити, информационная архитектура, user experience, interaction design, accessibility и т.п.. Все они имеют право на жизнь, но обозначают разные вещи – подходы, методики, процессы, наборы качеств. Главное понимать, каков конечный результат – названия вторичны, хотя и облегчают общение.

Слайд 8
Описание слайда:
Конечный продукт проектирования Улучшение качества продукта – достижение определенных показателей метрик. Документация на интерфейс – набор wireframes, дизайн-макетов и сопроводительных документов, интерактивный прототип. Важны также полнота, понятность, читабельность, непротиворечивость документации, ее своевременная поставка и корректировка Ранняя проверка концепции продукта, создание материалов для презентаций инвесторам и другим заинтересованным лицам.

Слайд 9
Описание слайда:
Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс этапы, форматы работы, команда проектирования, методы проверки качества интерфейса Разбор кейса Выводы и наблюдения

Слайд 10
Описание слайда:
Этапы проектирования Можно проверять соответствие концепции, качество документации и самого продукта на каждом из них: Исследование предметной области и рынка. Сбор и формирование требований. Концепция интерфейса и дизайна. Детализация концепции интерфейса. Поддержка процесса разработки.

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

Слайд 12
Описание слайда:
Команда проектирования Роли могут совмещаться в одном специалисте или распределены, в зависимости от наличия ресурсов: Аналитик – исследование предметной области, сбор и формирование требований. Проектировщик – отрисовка wireframes, проверка и тестирование решений. Дизайнер – создание дизайн-макетов и сопроводительной графики. HTML-разработчик – верстка и интеграция дизайна.

Слайд 13
Описание слайда:
Методы проверки качества интерфейса На каждом из этапов проектирования можно применять серию методов: Юзабилити-тестирование – наблюдение за пользователями, работающими с продуктом. Бета-тестирование – запуск предварительной версии и сбор обратной связи от пользователей. Экспертная оценка – юзабилити-специалист или тестировщик оценивают продукт по чек-листу. Peer reviews – рекомендации и замечания коллег. Предварительные исследования.

Слайд 14
Описание слайда:
Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс Разбор кейса изучение задачи и аудитории, выбор и проработка концепции, проектирование страниц, дизайн и интерактивный прототип, поддержка разработки Выводы и наблюдения

Слайд 15
Описание слайда:
Кейс Сайт компании – производителя компьютерной техники с интернет-магазином и службой поддержки: Простой, зато понятный и наглядный пример. Каждый сталкивался с аналогичным и: понимает, что обычно требуется от них; помнит, что в них неудобно и чего не хватает; возможно, участвовал в разработке.

Слайд 16
Описание слайда:
Как будет разбираться кейс? Проводим этап проектирования. Проверяем, насколько правильно он прошел. Вносим изменения в результаты этапа.

Слайд 17
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

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

Слайд 19
Описание слайда:
Показатели эффективности по каждой задаче Чтобы оценивать эффективность выполнения задач, нужно задать им целевые показатели. Например, к концу года: Объем продаж через сайт – $7млн в месяц. Количество нерешенных и просроченных обращений в службу поддержки снизить на 20%. Не менее 5 000 посещений в день с глубиной просмотра страниц не менее 2,5.

Слайд 20
Описание слайда:
Целевая аудитория Нужно понимать, для каких задач каких людей в первую очередь используется сайт: Владелец продукции. Обращается в поддержку несколько раз в год – починить [принтер], найти аксессуар или понять, почему не работает функция. Покупатель. Подбирает подходящий [сканер] для работы с фотографиями. Важно понимать, как обстоит дело с дилерскими и сервисными центрами. Просто интересующийся. Ищет информацию о компании – общие сведения, структуру или новости.

Слайд 21
Описание слайда:
Ограничения проекта Ограничения проекта необходимо учитывать при проектировании и выборе подходящего процесса работы: Бюджет и сроки выполнения проекта. На какое участие проектировщика хватает ресурсов. Back-Office сайта. Какие ресурсы может выделить клиент для его поддержки и сопровождения. Технологические решения. Есть ли какие-то ограничения – у команды разработки, клиента, будущих пользователей сайта.

Слайд 22
Описание слайда:
Итоговые документы этапа Модель предметной области. Видение проекта. Описание целевой аудитории (персонажи). Отчет о конкурентном анализе.

Слайд 23
Описание слайда:
Проверка решений этапа Консультации и предварительное общение: представители клиента; эксперты в предметной области; потенциальные пользователи. Предварительные исследования: маркетинговые исследования; конкурентный анализ; проведение фокус-групп с пользователями. Утверждение собранной информации клиентом.

Слайд 24
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 25
Описание слайда:
Общая концепция интерфейса Необходимо определить основные принципы, по которым будет строиться интерфейс: Какая группа пользователей будет ключевой – чьи задачи должны решаться в первую очередь? Будет ли это единый сайт или группа сайтов, каждый из которых решает свою задачу? Используем ли мы технологическое решение с ограниченными интерфейсными возможностями? Какие задачи будет решать пользователь, а какие – система?

Слайд 26
Описание слайда:
Функциональность Требуется описать всю функциональность, которая будет доступна пользователю: Что пользователь может делать на сайте – какими функциями он может пользоваться для решения своих задач? По каким сценариям проходит работа с функциональностью и каковы их особенности?

Слайд 27
Описание слайда:
Структура и навигация Необходимо описать структуру сайта и то, как пользователь перемещается по нему: Какие страницы будут на сайте и какова их иерархия? Какие из них нужно будет подготовить в процессе проектирования, дизайна и создания интерактивного прототипа? Какие типы навигации будут использоваться для переходов между страницами сайта – меню, «хлебные крошки», теги, еще что-то?

Слайд 28
Описание слайда:
Первые наброски интерфейса Нужно показать общий вид важнейших страниц сайта: Какова общая сетка страницы? Где будут располагаться общие для всех страниц элементы? Где будут расположены навигационные блоки? Какие элементы и в каком порядке будут присутствовать на «сайтообразующих» страницах?

Слайд 29
Описание слайда:
Пример чернового wireframe

Слайд 30
Описание слайда:
Итоговые документы этапа Описание функциональности: Формализованные или неформализованные Use Cases. User Stories. Структура страниц. Схемы навигации. Черновые wireframes (структурные схемы страниц). Перечень создаваемых wireframes, дизайн-макетов и страниц интерактивного прототипа.

Слайд 31
Описание слайда:
Проверка решений этапа Исследования с привлечением пользователей: карточная сортировка при проектировании структуры сайта и навигации. Консультации с коллегами и другими специалистами: peer reviews; технические консультации по поводу реализуемости функций; юзабилити-экспертиза набросков интерфейса. Утверждение концепции и спецификаций клиентом.

Слайд 32
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 33
Описание слайда:
Отрисовка структурных схем страниц Ключевой этап работ, определяющий состав и структуру конкретных страниц сайта: Какие интерактивные элементы содержит страница? Какая информация будет содержаться на ней? Как работают конкретные элементы страницы? Что на странице является наиболее важным, а что – второстепенным?

Слайд 34
Описание слайда:
Итоговые документы этапа Детальные структурные схемы страниц (wireframes).

Слайд 35
Описание слайда:
Пример детального wireframe

Слайд 36
Описание слайда:
Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование бумажных или электронных версий wireframes; экспертная оценка интерфейса; peer reviews. Консультации: технические консультации по поводу реализуемости элементов интерфейса. Утверждение структурных схем интерфейса клиентом.

Слайд 37
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

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

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

Слайд 40
Описание слайда:
Создание интерактивного прототипа Интерактивный прототип (в соответствии с дизайном или схематичный) позволяет «вживую» опробовать работу интерфейса: Как происходят переходы между страницами? Как работают интерактивные элементы? Какой контент находится на страницах сайта? Насколько различается удобство работы в различных средах: разрешения, браузеры, платформы.

Слайд 41
Описание слайда:
Итоговые документы этапа Дизайн-макеты страниц. Руководство по оформлению интерфейса. Набор сопроводительной графики: иконки, иллюстрации. Интерактивный прототип.

Слайд 42
Описание слайда:
Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование интерактивного прототипа и дизайн-макетов; экспертная оценка дизайн-макетов и прототипа; peer reviews. Консультации: технические консультации по поводу реализуемости элементов интерфейса. Утверждение концепции дизайна и дизайн-макетов клиентом.

Слайд 43
Описание слайда:
Изучение задачи и аудитории Изучение задачи и аудитории Выбор концепции и ее проработка Проектирование страниц Дизайн и интерактивный прототип Поддержка разработки

Слайд 44
Описание слайда:
Решение возникающих несоответствий В ходе реализации задуманного могут требоваться корректировки интерфейса по разным причинам: В ходе работы были найдены более оптимальные решения или появилась возможность унификации разных решений. Техническая реализация отдельных решений невозможна или слишком затратна. Оказалось, что данные из стороннего источника получить нельзя или их формат отличается от плана.

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

Слайд 46
Описание слайда:
Консультации по внедрению Необходимо тесное взаимодействие проектировщиков с командой разработки: Комментарии и объяснения по поводу подготовленной документации. Оперативные ответы на возникающие у разработчиков вопросы. Регулярные проверки качества реализации интерфейса и его соответствия задуманному. Объяснение решений – почему сделано так, а не иначе.

Слайд 47
Описание слайда:
Итоговые документы этапа Поддержка и обновление ранее созданных документов. Новые wireframes (структурные схемы страниц). Новые дизайн-макеты и сопутствующие иллюстрации. Новые страницы интерактивного прототипа.

Слайд 48
Описание слайда:
Проверка решений этапа Тестирование и экспертиза: юзабилити-тестирование работающего сайта; бета-тестирование: сбор и изучение мнений пользователей; сбор и анализ статистики; тестирование QA-специалистами; экспертная оценка работающего сайта.

Слайд 49
Описание слайда:
Обзор процесса проектирования Обзор процесса проектирования Встраивание проектирования в общий процесс Разбор кейса Выводы и наблюдения чем полезен кейс, выводы

Слайд 50
Описание слайда:
Чем полезен кейс Кейс достаточно простой, но: Позволяет примерно показать, на каких точках и как можно влиять на качество принимаемых при проектировании решений. Хоть он и описывает веб-проект, процесс в целом похож на те что используются для десктопных и мобильных приложений.

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

Слайд 52
Описание слайда:



Похожие презентации

Mypresentation.ru

Загрузить презентацию