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

HCI Class

Oi lá, bem-vindo de volta!

Logo no início do curso, eu esbocei um processo de design que favorece a exploração rápida desde o início.

Agora vamos aprender como realmente fazer isso.

Neste vídeo, vamos mergulhar em três técnicas para rapidamente protótipos de produção.

Ao longo de seu projeto, a fidelidade dos protótipos que você criar vai aumentar,

e você vai querer escolher as ferramentas que refletem onde você está, em termos do processo de design,

não utilizar o material que é muito alta fidelidade e muito demorado no início.

Assim, por exemplo, você pode começar por storyboard, que é a primeira técnica que vamos aprender hoje.

Isso lhe dará um sentido de as tarefas e os cenários que você gostaria de apoiar.

Então você pode passar para protótipos de papel, e de lá maquetes digitais.

Então, se você está no domínio web, um pouco de HTML estático.

E, só então, obter dinâmico - adicionar no banco de dados e as outras peças extravagantes.

Escolher a ferramenta certa para o trabalho ajuda a se concentrar nas questões que você tem

nessa fase particular do processo de design.

Então, no vídeo, vamos falar sobre storyboards,

criar e testar protótipos de papel,

e passando para maquetes digitais.

Um dos mais fáceis de fazer erros no design da interface

é concentrar-se na interface do usuário antes focada nas tarefas que a interface vai apoiar.

E, se você tem uma coisa fora de storyboards,

a peça que entender é que é tudo encenação sobre as tarefas.

Aqui está um exemplo da equipe do projeto "Lifealyfics" da minha turma HCI Stanford, no outono de 2011.

Eles estavam interessados em interfaces de usuário para monitorar o comportamento,

e aqui estão alguns dos primeiros storyboards que eles produziram.

O que é agradável sobre um storyboard é

em apenas alguns painéis você pode transmitir o que a interface do usuário irá ajudar uma pessoa realizar.

E um bom storyboard é quase sempre vai ter uma pessoa real lá dentro.

Outra coisa que você pode ver nestas storyboards é que eles se comunicam de fluxo:

Muito parecido com uma tira de quadrinhos, ele está mostrando o que está acontecendo em pontos-chave no tempo.

Uma das maiores preocupações sobre a criação de storyboards é que eles me dizem "Ugh, eu não sei desenhar!"

Mas não é sobre storyboarding belo desenho, trata-se de comunicar idéias,

e eu acho que * todos * pode aprender a comunicar visualmente idéias.

De certa forma, desenho ruim é realmente uma vantagem, porque então tudo que você pode fazer é se concentrar no conteúdo.

Eu disse que storyboards bons quase sempre incluem uma pessoa que está realmente usando a interface,

e assim, para você começar, eu gostaria de ensinar-lhe o meu truque favorito para storyboarding.

Aprendi isso com Verplank Bill. Bill e eu ensinei juntos em Stanford há vários anos.

E Bill, [inaudível] para as gerações, ensinou às pessoas como desenhar "Povo das Estrelas", e vai como esta:

[Professor Klemmer começa a desenhar uma "pessoa estrela"]

Nós a chamamos de uma "pessoa estrela", porque o corpo da pessoa é como uma estrela,

e você pode tê-los fazendo todo tipo de coisas, então alguém pode estar segurando algo,

ou podem estar chegando até a tocar talvez algo em uma tela grande.

Você pode adicionar qualquer dinâmica que você deseja.

Se você precisar, você pode mostrar onde as pessoas estão procurando.

Se você quiser, você pode distinguir pessoas diferentes nas cenas -

assim você pode colori-los um pouco, ou você pode adicionar o emblema de um xerife.

E, quando você coloca tudo isso junto, você pode obter algo como isto.

Estas são algumas imagens do guia de storyboards que temos links a partir de sua atribuição.

Uma das primeiras coisas que um storyboard deve fazer é para ilustrar um objetivo.

Como neste storyboard, que é "Vamos verificar lugares em SF!"

Você pode mostrar como uma tarefa se desenrola, e aqui você pode ver algumas pessoas "Estrelas",

e eles estão explicando o que estão fazendo, então aqui que está dizendo "Aqui estamos em San Francisco."

E até o final do storyboard que você vai querer mostrar como eles conseguiram o seu objetivo era,

ou, de algum outro modo, têm um resultado satisfatório no final do storyboard.

E, como um shopping mostra,

mesmo com uma linguagem muito simples e visual, há um lote inteiro você pode fazer para obter o seu ponto de vista.

Então, storyboards deve realizar três coisas:

Primeiro, ele deve realizar a configuração: Quem são as pessoas envolvidas?

qual é o ambiente? e quais as tarefas que eles estão tentando fazer?

Em seguida, ele deve mostrar a seqüência: Quais são os passos que eles fazem para realizar a tarefa?

Não necessariamente o interface de usuário é exatamente onde os botões e widgets são,

mas o papel que a interface de usuário desempenha em ajudá-los a obter a sua meta alcançada.

E um dos passos dos primeiros vai ser: O que leva alguém a usar o aplicativo?

No exemplo do shopping, que começou com alguém dizendo: "Vamos verificar lugares em San Francisco!"

Isso é o trampolim que claramente motiva as pessoas a ir para o aplicativo.

E, em seguida, seu aplicativo pode facilmente e mostram claramente que é a tarefa que a idéia que você tem é de apoio.

E então, finalmente, no final, você tem a satisfação -

Como faz o que os motivou a usar o aplicativo em primeiro lugar,

como é que se conectam a sua realização que, no final da sequência?

Perguntas sua storyboard pode ajudá-lo a pensar são:

"O que é que permite às pessoas realizar, e que necessidade é que a sua aplicação encher?"

Eu realmente gosto de storyboards para o seu enfoque holístico;

ele permite que você pense em como você pode apoiar uma tarefa

sem se comprometer com uma interface de usuário em particular -

essa é a mágica, e isso é especialmente importante quando você está projetando como uma equipe,

porque a idéia de que está em sua cabeça pode ou não ser o mesmo que a idéia de que está na cabeça de outra pessoa.

Ou, você pode ter uma grande idéia, mas as pessoas não sabem o que você está falando ainda.

Uma vez que você pegou no papel e concreto, torna-se muito mais fácil para poeple ter um terreno comum,

e decidir como avançar.

Quando você está storyboard, sugiro a imposição de limites de tempo extremamente duras sobre si mesmo,

como 10 minutos para um storyboard.

Pode ser fácil tentar e começar tudo de lindo, mesmo se você está desenhando com caneta e papel,

mas isso não é o ponto!

Uma vez que você tem uma idéia aproximada do que sua aplicação vai realizar,

você pode começar a pensar em como você vai implementar isso,

e por implementar eu quero dizer "O que é que vai olhar e sentir como para o usuário?

O que é a interface do usuário real vai ser? "

E para descobrir a interface do usuário em um estágio inicial,

a técnica melhor que eu sei é usar protótipos de papel.

Prototipagem papel é exatamente o que parece:

Você vai fazer um mockup da interface do usuário e, em vez de fazê-lo no computador,

o que pode levar muito tempo e incentivá-lo a tentar obtê-lo bonito e exata,

você vai usar papel, post-it notas e marcadores, para esboçar as coisas muito rapidamente.

Aqui está um exemplo, é novamente a partir do "Lifealyfics" da equipe.

Estes são os protótipos de papel que eles fizeram:

(Lifealyfics / Descubra o que faz você feliz / (Comece)

Aqui está como funciona / 1. Enviaremos textos aleatórios ao longo do dia, com a frequência que você selecionar. / 2. Você entrada o seu [ilegível] e atividade / (E depois?)

3. No final da semana, vamos enviar-lhe os seus resultados, e você vai perceber o que te faz feliz e realizada! / (Start)

Passo 1 de 3 / Digite o número do telefone [campo texto] / (Next)

Os textos mais você responder, mais preciso gráfico seu pessoal será! / Quantos textos por dia que você quer receber? [Suspenso]

Etapa 2 de 3 / Quantas vezes por dia você quer começar um texto?

Etapa 2 de 3 / Quantas vezes por dia você quer começar um texto? / (Next)

Etapa 3 de 3 antigas texto /: texto [suspenso] / Últimas: [suspenso] / (Próximo))

Eis algumas dicas para fazer protótipos de papel eficazes:

Primeiro, armazenar todos os seus materiais em um só lugar.

Você vai querer começar um balde de marcadores, talvez algumas notas Post-it ou cartões de índice.

Se você tem um dispositivo móvel que você está simulando, você pode até mesmo fazer uma maquete de algo assim,

e você pode entrar e sair widgets de interface diferentes.

Assim como os storyboards, é importante trabalhar rapidamente.

E se você tivesse um widget que você vai usar um monte de -

como botões ou controles deslizantes ou algo assim -

às vezes pode ser mais rápido para fotocópia-los em uma fotocopiadora,

assim você pode fazer uma versão e, em seguida, fotocópia que ele tem um monte.

Às vezes, prototipagem bom papel é como jogar faz-de-como um miúdo.

Então, se você tem algo que é complicado ou altamente interativo,

você pode apenas imaginar o que seria,

e assim você pode role-play que com a pessoa que está tentando a sua aplicação.

Pode ser útil ter uma moldura para colocar widgets sua interface dentro

Aqui temos um quadro móvel.

Você pode também ficar as coisas direito no próprio dispositivo,

Então, se você quiser fazer uma captura de tela móvel aqui, ...

Interface com o usuário móvel!

Ou, se você tem uma interface de usuário de desktop, você pode tomar, como, uma folha de 11-por-14 de placa do poster

e colocar todos os seus elementos sobre isso.

Prototipagem bom papel também é como colagem - que você pode misturar e combinar fidelidades.

Então você pode usar impressões de telas reais; desenhar e fazer anotações em cima disso -

qualquer coisa que você quer que pode obter o seu ponto rapidamente.

E para ajudar a pessoa que está tentando o protótipo

dar o salto conceptual entre o esboço no papel e um sistema interativo,

você pode adicionar alguns widgets de pequenos e cromados da sua interface de usuário

para transmitir que é parte de um sistema operacional maior.

Prototipação em papel não é apenas rápido e eficiente;

também é muito divertido, e você pode começar realmente criativo para descobrir diferentes maneiras de transmitir interações.

Se você tem camadas em sua interface de usuário, você pode usar transparências como uma forma de mostrá-las.

Se você tem menus pop-up, você pode fazer parte de trás pegajoso,

de modo que pode ficar no lugar certo no topo da interface principal.

Você [pode] usar qualquer tipo de marcador ou a caneta que você quer;

você pode ter as coisas ser colorido, [ou] apenas preto-e-branco - Qualquer coisa que você pode pensar.

Você pode usar cartolina (como esta), ou papelão, cartões de índice, foamcore -

tudo o que quiser como um material de suporte.

Coisas como fita são úteis para ter ao redor.

Se você gostaria de ser capaz de ter a entrada do usuário repetitivo, você pode usar marcadores de quadro branco ou canetas de transparência,

e ter um quadro branco ou uma folha ou transparência que a entrada do usuário passa,

e então você pode tirá-lo quando estiver pronto.

Para ser capaz de adicionar estrutura à sua interface de usuário, você pode ter larguras de linha de diferentes espessuras.

Assim, você pode ter uma linha mais grossa que é para os elementos principais, e uma linha mais fina para os elementos menores.

E você pode ter uma pilha ou quer Post-it notas ou cartões de índice para mostrar os painéis guia de sua interface de usuário.

Assim, as diferentes camadas pode ser em folhas por baixo.

Aqui você pode ver um widget maravilhoso do "Lifealyfics" da equipe,

onde eles criaram uma janela de correr dentro de uma maquete telemóvel

como uma forma de transmitir como algo mudaria ao longo do tempo e em resposta à entrada de utilizador.

A outra coisa que eu vou mostrar aqui, e eu vou tocar em várias vezes neste curso,

é a importância de se experimentar vários protótipos alternativas diferentes

como uma forma de obter feedback mais valioso do usuário.

Então, aqui estão algumas maneiras diferentes que você pode apresentar os dados que um sistema de registro ao vivo está a ganhar.

Outra razão que eu realmente gosto de protótipos de papel é que * todos * podem estar envolvidos.

Então, se você experimentar projetos com os usuários, dar-lhes uma caneta e tê-los modificar a interface!

Ou se eles ficaram presos ou pensam que algo está estranho,

pegue uma folha de papel e fazer as modificações que você precisa.

Você pode trazer ferramentas de prototipagem em papel para a sala de reuniões, você pode trazer para os clientes -

qualquer das partes interessadas que estão envolvidos no design da interface do usuário,

você pode obtê-los envolvidos em protótipos de papel.

Isso ajuda a ter as suas ideias para o sistema

e capacita-los a desempenhar um papel mais ativo no processo de design.

Uma vez que você está pronto para passar de protótipos de papel, um passo seguinte pode ser útil para fazer uma maquete digital.

Aqui está um exemplo de algumas maquetes

que a minha equipe de pesquisa fez para uma colaboração com anestesiologistas na escola médica de Stanford.

A primeira coisa que eu gostaria de ressaltar sobre esse

é que você pode ver que muito mais tempo entrei neste mockup digitais

do que para os protótipos de papel que temos vindo a falar até agora.

E essa é uma das razões pelas quais eu acho prototipagem papel é tão importante.

Mas chega um momento onde você quiser obter mais específicas sobre pixels,

e é aí que maquetes digitais podem desempenhar um papel importante.

Como aumentar seus protótipos na fidelidade - a partir de storyboards, para protótipos de papel, de maquetes digitais -

os tipos de avaliação e feedback que você vai começar a partir de pessoas vão evoluir também.

Assim, no início, você pode estar falando de cenários com as pessoas.

E então, com o protótipo de papel,

você pode estar executando esses informais "Experimente-as, aqui é três alternativas" testes.

Esses protótipos também podem ser úteis para as críticas dentro de sua equipe de design.

E como você consegue maquetes mais elevadas e maior fidelidade,

você pode ter a oportunidade de experimentação de técnicas mais formais.

Técnicas de prototipagem rápida são provavelmente a arma mais valiosa que você terá

em um processo de design centrado no ser humano.

E se você estiver interessado em aprender mais, aqui estão alguns recursos que eu recomendo.

Vejo você na próxima vez.