MatchDog Создайте свой портфельный проект: визуализация экрана и контент

Поздравляем! Вы завершили самую длинную главу в книге, в которой описывается полная иерархия слоев шаблона проектирования, от простых компонентов до основных диаграмм. UX-архитектура альтернативы.

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

Краткое описание проекта

Просмотрите полное описание проекта для MatchDog еще раз — всегда держите это в фокусе.

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

Цель этого упражнения

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

Оборудование, которое вам понадобится в этом упражнении

• Ручка и бумага или доска

Нарисуйте полную визуализацию вашей концепции

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

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

Таблица 19 из UX Magic: Форма и характеристики распространенных UX-архитектур.

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

1. Выберите одну или несколько UX-архитектур и назначьте им объекты.
   1. В практике UX принято использовать разные архитектуры в одной и той же системе для администрирования и для потребителя. Поддержание согласованности концептуальной модели для различных комбинаций UX-архитектуры и персонажей. имеет решающее значение к успеху всего решения.
2. Создайте карту сайта для MatchDog для каждой комбинации архитектуры/персонажа.
3. Уточните семантические сетки для каждого типа страниц. и постарайтесь сделать их максимально последовательными.
   1. Убедитесь, что вы знаете, как будет выглядеть заголовок вашего экрана и какие глобальные действия необходимо разместить в нем на постоянной основе.
   1. Помните: административный UX содержит больше функциональность.
4. Выберите наиболее подходящий архетип для каждой главной страницы.
   1. Постарайтесь использовать как можно меньшее количество архетипов.
   1. Отложите второстепенные страницы и диалоговые окна на потом.
   1. Прежде чем тратить время на дополнительные элементы, вы должны убедиться, что ядро надежно.
5. Далее заполните информацию о важных виджетах в каждом архетипе.
   1. Обычно это переносит большинство элементов управления на каждый экран.
   1. Есть ли фильтры и сортировка варианты, необходимые в списки и столы?
   1. Где и как будет Поиск быть представлены?
   1. Будут ли доступны избранное и рейтинги для собак и публикаций?
6. Добавьте любые необходимые отдельные элементы управления для сохранения контента или наоборот навигация (например, отмена и отмена) в одинаковых местах на всех страницах и в виджетах, где это необходимо.

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

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

Повторяйте свою визуализацию, чтобы усовершенствовать грамматику CM

Вернитесь и еще раз обратитесь к грамматике CM. Идеально ли оно соответствует вашим решениям по визуализации или было бы полезно немного повернуть объекты и атрибуты?

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

Завершите это упражнение

Используя уровни визуализации UX Magic для выбора способа представления основных объектов на этом этапе упражнения, вы стали свидетелями и практиковали модульность деконструкции семантических методов IxD уровней шаблонов проектирования. Вы смогли быстро определить, какие архетипы лучше всего подходят для каждого из 3 UX-дизайн варианты (потребительские веб-версии и мобильные устройства, а также административные), которые составят комплексное решение в вашей портфель. Вы также получили возможность быстро выбирать шаблоны дизайна для виджетов и элементов управления, необходимые для отображения всех атрибутов объекта. Наконец, вы можете использовать таблицу атрибутов и действия в качестве контрольного списка, чтобы убедиться, что вы охватили функциональную область, требуемую в краткое описание дизайна. Мало того, что у вас есть свой проектное предложениено у вас также есть подтверждение того, что вы не упустили ничего важного.

На этом этапе у вас должен быть UX-дизайн, в котором вы уверены. Вы использовали сборку деталей, подобных Lego (уровень шаблонов), чтобы получить первый набор UX-экранов, которые эффективно поддерживают грамматику вашей концептуальной модели. Ваш проект опирается на научную основу, что приводит к низкой когнитивной нагрузке, и вы можете легко объяснить и защитить его на этой основе. заинтересованная сторона встречи. Несмотря на то, что семантический IxD для вас нов, вы должны были прийти к этому моменту начальных экранов быстрее, чем предыдущие подходы, которые вы использовали. Если нет, не волнуйтесь — со временем и практикой вы станете быстрее, поскольку ваш уровень навыков работы с семантическим IxD увеличится.

Автор/Владелец авторских прав: Тео Ю Сианг и Интерактивный дизайн Фундамент. Условия авторских прав и лицензия: CC BY-NC-SA 3.0.