Lecture 3.1: Paper Prototypes and Mockups (12:47)

Привет! Добро пожаловать!

Ранее, я рассказал о процессе проектирования на ранней стадии

Сейчас мы узнам как это делается

В этом видео рассмотрим три техники создания быстрых прототипов

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

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

не используя слишком детализированные и требующие много времени инструменты

Например, вы можете начать с раскадровок - техники, которую мы изучим первой сегодня

Это даст вам представление о задачах и сценариях, которые вы хотели бы реализовать

Затем вы можете перейти к бумажным прототипам, а от них к цифровым каркасным макетам

Затем, к статическому HTML

И только потом добавить динамику - подключить базу данных и другие модные детали

Выбор правильного инструмента для работы позволит вам сосредоточиться на вопросах

именно той стадии проектирования, на которой вы сейчас находитесь

Итак, в этом видео мы поговорим о раскадровках

создании и тестировании прототипов

и переходу к цифровым каркасным макетам

Одна из распространенных ошибок в проектировании интерфейсов -

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

Поймите одну вещь про раскадровки,

раскадровки - это про задачи.

Вот пример от проектной команды “Lifealyfics” из моего курса, проходившего осенью 2011 года

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

и вот несколько ранних раскадровок, которые они сделали

Что хорошо в раскадровках, так это то,

что в нескольких кадрах можно передать ту цель, которую пользовательский интерфейс помогает человеку достичь

И в хороших раскадровках почти всегда присутствует реальный человек

Следующий момент который можно увидеть в раскадровках - процесс коммуникации

Как в комиксах, они показывают, что происходит в ключевых моментах

Больше всего забот мне доставляет фраза: Нуу, я не умею рисовать...

Но раскадровки - это не про прекрасные рисунки, это про идеи коммуникации

и я думаю, что кто угодно может научиться визуализировать идеи

В некотором смысле, плохая графика является активом, потому что тогда все, что вы можете сделать - сосредоточиться на содержании

Я сказал, что хорошая раскадровка почти всегда включает персону, которая реально использует интерфейса

и поэтому, чтобы начать, я хотел бы научить вас моему любимому трюку с раскадровками

Я научился этому у Билла Верпланка (Bill Verplank). Мы вместе преподавали в Стэнфорде в течение нескольких лет.

И Билл несколько поколений студентов учил как рисовать "звездных людей", выглядит это так:

Мы называем это "звездный человек" потому что тело персоны напоминает звезду

и вы можете делать с ними разные вещи, типа кто-то держит что-то

или они могут показывать что-то на большом экране

Вы можете добавить любые действия, какие захотите

Если нужно, вы можете показать куда персоны смотрят

Если хотите, вы можете различать персоны в сценах -

покрасить немного или добавить звездочку шерифа.

И когда вы соберете все вместе, вы получите что-то вроде этого.

Эти несколько изображений из гида по раскадровкам, ссылка на который есть в вашем задании.

Одна из первых задач в раскадровке - иллюстрация цели

В этой раскадровке цель - "Посмотрим что интересного в Сан-Франциско!"

Вы видите как задача раскрывается и вы видите несколько "звездных людей",

которые объясняют что они делают, они говорят "Мы здесь, в Сан-Франциско."

и в конце раскадровки вы хотите показать, как они достигли того, что было их целью.

или каким-либо другим способом получили удовлетворяющие их результаты в конце истории.

И как мы видим

даже простого визуального языка достаточно, чтобы показать свою точку зрения

Итак, раскадровки должны делать три вещи:

Во-первых нужно задать установки: кто наши участники?

что их окружает и какие задачи они пытаются решить?

Далее, должна быть показана последовательность: какие шаги они должны сделать чтобы выполнить задачу

Не обязательно показывать интерфейсы с точным расположением кнопок и виджетов

но нужно показать ту роль, которую играет интерфейс в достижении целей.

И одним из первых шагов будет вопрос: что побуждает человека использовать наше приложение?

В нашем примере, это началось когда кто-то сказал: "Посмотрим что интересного в Сан-Франциско!"

Это трамплин, который четко мотивирует людей попробовать приложение

И тогда ваше приложение легко и четко показывает какую задачу вы хотите помочь выполнить

и тогда в конце вы получаете удовлетворение

Как мотивировать пользователей использовать приложение в первом месте

Вопросы, которые могут помочь вам в этом

Мне нравятся раскадровки из-за их целостного подхода

это побуждает вас думать как вы можете помочь выполнить задачу

без привязки к конкретным пользовательским интерфейсам

это магия и это особенно важно, если вы работаете в команде

потому чтобы идея в вашей голове может совпадать, а может и не совпадать с идеей в чужой голове

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

Как только она появлется на бумаге, это позволяет найти точки соприкосновения

и найти вместе способ как продвинуться вперед

Когда вы создаете раскадровки я предлагаю, ввести суровые сроки для себя

например, 10 минут на раскадровку.

Это позволит легко достичь результата, даже если у вас нет под рукой ручки и бумаги,

не дело не в этом!

Как только у вас возникает грубое представление о том, что ваше приложение позволяет достичь

вы можете начинать думать о том, как вы реализуете это

под реализацией я имею ввиду "Как это будет выглядеть для пользователя?

Каким будет пользовательский интерфейс?"

И для определения интерфейса на ранней стадии

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