design de interação mobile

50
Técnicas e UI Guidelines para Mobile. Design de Interação Mobile Douglas Schmidt

Upload: douglas-schmidt

Post on 19-May-2015

595 views

Category:

Documents


4 download

DESCRIPTION

Palestra sobre conceitos básicos de Design de Interação com uma passada pelo mundo mobile, apresentada no evento Encarte da Unopar em Londrina (e um minicurso similar apresentado no evento Secomp da UEL também em Londrina).

TRANSCRIPT

Page 1: Design de Interação Mobile

Técnicas e UI Guidelines para Mobile.

Design de Interação Mobile

Douglas Schmidt

Page 2: Design de Interação Mobile

O que é Interação?

Page 3: Design de Interação Mobile

Na visão do Design

Ação mediada por artefatos

Controle da mediação pelo projeto do artefato

Interação pessoa-objeto, PESSOA-PESSOA e pessoa-mundo

Page 4: Design de Interação Mobile

O Design de Interação tem raízes na compreensão das pessoas e seus verdadeiros objetivos e necessidades. Através de práticas do Design Centrado no Usuário o Designer de Interação busca criar produtos e serviços que tragam uma experiência de uso melhor e mais agradável e que atenda da melhor forma os desejos dos usuários.

Page 5: Design de Interação Mobile

O Design de Interação tem raízes na compreensão das pessoas e seus verdadeiros objetivos e necessidades. Através de práticas do Design Centrado no Usuário o Designer de Interação busca criar produtos e serviços que tragam uma experiência de uso melhor e mais agradável e que atenda da melhor forma os desejos dos usuários.

Page 6: Design de Interação Mobile

Porque se preocupar com Design de Interação?

Page 7: Design de Interação Mobile

Modelo mental do desenvolvedor

Design Centrado no Sistema

Maximizar Eficiência

Demonstrar Habilidades Técnicas

Muita Exigência do Usuário

Jargões

Page 8: Design de Interação Mobile
Page 9: Design de Interação Mobile
Page 10: Design de Interação Mobile

Design Centrado no Designer

Depende de Inspiração

Expressão Pessoal

Preferências Pessoais

Perfeccionismo e Egocentrismo

Page 11: Design de Interação Mobile

http://kalendiar.lenm.cz/

Page 12: Design de Interação Mobile

Design Centrado no Usuário

Entender a característica irracional humana

A participação do Usuário no processo

Usuário como Objeto de Pesquisa

Page 13: Design de Interação Mobile

Design Emocional

Não se esqueça dos sentimentos

A Diversão como Método

Page 14: Design de Interação Mobile

http://thefuntheory.com/

Piano Stairs

Page 15: Design de Interação Mobile

http://thefuntheory.com/

Bottle Bank Arcade

Page 16: Design de Interação Mobile

Interfaces

Page 17: Design de Interação Mobile

Não são só as telas de um site ou aplicativo, Interface é toda camada que facilita uma interação, tanto entre Pessoa-Máquina, Pessoa-Pessoa e até Máquina-Máquina.

Page 18: Design de Interação Mobile

O Processo de Design

Page 19: Design de Interação Mobile

Levantamento de dados

Reconhecimento do problema

Estudo de similares

Definição de conceito

Geração de alternativas

Definição de solução

Adequação da alternativa

Teste com usuários

Apresentação ao cliente

Aprovação Não aprovação

Produção

Briefing

Adequação

Senso Comum

Page 20: Design de Interação Mobile

Geração de Ideias

Requisitos

Protótipos

+ Protótipos

Solução

Page 21: Design de Interação Mobile

Processo de Ideação

Page 22: Design de Interação Mobile

CASES

Page 23: Design de Interação Mobile

http://bit.ly/oQlTNO

A low-cost PC for PositivoIDEO

Page 24: Design de Interação Mobile

Digital RetailFrog

http://bit.ly/olZu6g

Page 25: Design de Interação Mobile

litl webbookCooper

http://bit.ly/nfwn4l

Page 26: Design de Interação Mobile

Little WorldKevin Cannon

http://bit.ly/n5hRpT

Page 27: Design de Interação Mobile

Os porquês e os métodos.Pesquisa

Page 28: Design de Interação Mobile

Porque vivemos em um mundo diverso.

Page 29: Design de Interação Mobile

Porque nossos contextos de vida são diferentes.

Page 30: Design de Interação Mobile

Para criarmos soluções mais Humanas.

Page 31: Design de Interação Mobile

MétodosQuestionários e entrevistas.

Page 32: Design de Interação Mobile

Pesquisas Quantitativas precisam de uma amostra considerável e homogênea. Mostram melhor as tendências.

As Qualitativas buscam um entendimento maior do comportamento humano e não precisam de amostras estatísticas.

Page 33: Design de Interação Mobile

Etnografia Visual

Page 34: Design de Interação Mobile

Observação

Page 35: Design de Interação Mobile

A Observação é uma imersão em uma cultura alienígena. Podemos usar de fotografias, videos e anotações para depois tirar ideias interessantes para o projeto.

Page 36: Design de Interação Mobile

Frog

http://bit.ly/pWLKNM

Mobile Computing

Page 37: Design de Interação Mobile

Ideação

Page 38: Design de Interação Mobile

brainstorm Personas divergir para convergir construir ideias em cima das ideias anteriores evitar advogados do diabo

Page 39: Design de Interação Mobile

Prototipação

Page 40: Design de Interação Mobile

Prototipação em Papel

Page 41: Design de Interação Mobile

Wireframes

Page 42: Design de Interação Mobile

Protótipos Funcionais

Importantes para validar os conceitos Economiza tempo e $$ Devem ser produzidos rapidamente Faça fake, faça em Flash

Page 43: Design de Interação Mobile

Testes

Page 44: Design de Interação Mobile

Usabilidade e as Heurísticas

Feedback Falar a linguagem do usuário Saídas claramente demarcadas Consistência Prevenir erros

Page 45: Design de Interação Mobile

Usabilidade e as Heurísticas

Minimizar a sobrecarga de memória do usuário Atalhos Diálogos simples e naturais Boas mensagens de erro Ajuda e documentação

Page 46: Design de Interação Mobile

Usabilidade e as Heurísticas

Page 47: Design de Interação Mobile

iOS Guidelines http://bit.ly/ogBZvm

Page 48: Design de Interação Mobile

Android Guidelines http://bit.ly/pLBjPK

Page 49: Design de Interação Mobile

Comparação

Page 50: Design de Interação Mobile

Contato

Douglas [email protected] www.magtab.com