PUC/PFC - Prototipação

Embed Size (px)

DESCRIPTION

Aula para a disciplina Produção e Ferramentas Colaborativas Pós-Graduação em Produção em Mídias Digitais Prof. Marcello de Campos Cardoso www.mcardoso.com.br 2o semestre de 2011

Text of PUC/PFC - Prototipação

  • IEC - INSTITUTO DEEDUCAO CONTINUADA

    aula 05/08

    Projetando a interfacePrototipao rpida

    Produo e Ferramentas ColaborativasPs-Graduao em Produo em Mdias DigitaisMarcello de Campos Cardoso | www.mcardoso.com.br | mcardoso@gmail.com

    Monday, October 24, 2011

  • 1

    2

    3

    4

    5

    6

    7

    8

    -

    10pts

    15pts

    15pts

    20pts

    -

    15pts

    25pts

    Plano de cursoApresentao do curso, aquecimento e posicionamento terico

    CMS + Social Media

    Conversando com usurios: Questionrios e entrevistas

    Tcnica de Modelagem: Personas geis

    Projetando a interface: Prototipao rpida em papel

    Criando seu blog no Wordpress

    Implantao do blog

    Apresentao final

    Monday, October 24, 2011

  • recapitulando...

    Monday, October 24, 2011

  • Personas geisTcnica para a definio de

    modelos de usurios do sistema, no intuito de melhorar a visibilidade, compreenso e comunicao sobre seu comportamento de uso.

    Auxilia no levantamento de user stories.

    Nome, Idade Papel

    descrio, frase emblemtica

    Tarefas no sistema para necessidades

    Necessidades no mundo real

    Monday, October 24, 2011

  • 1o passo: Determinar tipos de usurios

    2o passo: Listar caractersticas de cada tipo

    3o passo: Determinar usurios focais

    Personas geis

    Monday, October 24, 2011

  • Ciclo de vida do produto

    personas

    pesquisa

    planejam

    ento

    desenvolvimento

    validao

    Questionrios e entrevistasBenc

    hmarking

    Story mapping prototipa

    o

    Monday, October 24, 2011

  • Prototipaoquebrando ovos para fazer omeletes

    Monday, October 24, 2011

  • Prottipo = modelo~

    Monday, October 24, 2011

  • So ferramentas simples e poderosas para melhorar a visibilidade, compreenso e a

    comunicao de informaes.

    lembrando...

    Modelos

    Monday, October 24, 2011

  • Podem ser de baixa ou alta resoluoBaixa: Para explorar ideias, conceitos, fluxos

    Alta: para validar decises pontuais

    Monday, October 24, 2011

  • Devemos criar exatamente quanta documentao necessitamos para

    executar bem um projeto, e no mais.-Dan Saffer

    Monday, October 24, 2011

  • Ns
  • Cenrio Os protagonistas so as PERSONAS Devem refletir comportamento no sistema Uma boa prtica passar diferentes personas pelo mesmo cenrio Um bom cenrio imaginar o primeiro uso

    So prottipos feitos de palavras

    Monday, October 24, 2011

  • CenrioUma imagem vale mil palavras.Mas as palavras certas podem valer algumas boas imagens.

    Lcia Maria loga em sua conta Sacolao.com. V seu pedido da semana passada e decide us-lo de novo para esta semana. Remove alguns itens arrastando-os de sua Cestinha, e o valor ajusta automaticamente. Satisfeita com a compra, clica no boto Entrega rpida e confirma o dbito em seu carto de crdito previamente salvo. A tela de confirmao informa para esperar a entrega nas prximas 2 horas.

    Monday, October 24, 2011

  • TO DO DONE

    EM GRUPO!Criar um cenrio (primeiro uso ou tarefa chave) e aplic-lo em sua

    Persona Focal.

    ANOTAR PARA MANDAR POR EMAIL.

    tempo: 15

    Monday, October 24, 2011

  • Rascunhos

    Monday, October 24, 2011

  • Rascunhos Ideias primrias, generalistas, fluxos. So feios! estimulam a discusso sobre funo e uso

    Monday, October 24, 2011

  • Storyboards

    Monday, October 24, 2011

  • StoryboardsTcnica da publicidade, HQs e cinema, que ilustra

    interaes complexas

    Monday, October 24, 2011

  • Storyboards Imagens + legendas Ilustram fluxos, momentos chave Casos de uso Mostram ambientes e contextos Complementam wireframes

    Monday, October 24, 2011

  • WireframesMonday, October 24, 2011

  • Wireframesprottipos estruturais do sistema

    Monday, October 24, 2011

  • Registram as funcionalidades do produto, seus aspectos tcnicos e sua lgica de negcios, sem a influncia do design visual (branding, layout)

    Wireframesprottipos estruturais do sistema

    Monday, October 24, 2011

  • Registram as funcionalidades do produto, seus aspectos tcnicos e sua lgica de negcios, sem a influncia do design visual (branding, layout)

    Wireframesprottipos estruturais do sistema

    Podem ser usados para validar ideias

    Monday, October 24, 2011

  • Registram as funcionalidades do produto, seus aspectos tcnicos e sua lgica de negcios, sem a influncia do design visual (branding, layout)

    Wireframesprottipos estruturais do sistema

    Podem ser usados para validar ideiasPodem ser usados para testes com usurios

    Monday, October 24, 2011

  • Wireframes Estrutura Arquitetura da informao Controles (padres de interao) Contedo

    Substituem documentos mais burocrticos, so especificaes visuais comprometidas com:

    Monday, October 24, 2011

  • Monday, October 24, 2011

  • Monday, October 24, 2011

  • Monday, October 24, 2011

  • Monday, October 24, 2011

  • Monday, October 24, 2011

  • Monday, October 24, 2011

  • papel=desapegoMonday, October 24, 2011

  • Monday, October 24, 2011

  • Monday, October 24, 2011

  • http://www.youtube.com/watch?v=k9mTvt0LXgkPrototipando e testando lo fi

    Monday, October 24, 2011

  • wireouts

    Monday, October 24, 2011

  • layouts

    Monday, October 24, 2011

  • Lembrem que isso gil, podemos

    mudar o que foi decidido.

    IDEAO = CAOS!

    EM GRUPO!Prototipar em cima dos

    rascunhos, ou refin-lostempo: resto da aula

    Monday, October 24, 2011

  • Este arquivo contm a apresentao realizada por Marcello de Campos Cardoso, em Outubro de 2011, para a disciplina Produo e Ferramentas Colaborativas, ministrada no curso de especializao em Mdias Digitais Internet na PUC Minas.

    obrigado!

    Monday, October 24, 2011