princ­pios de design de intera§£o

Download Princ­pios de Design de Intera§£o

Post on 19-May-2015

5.076 views

Category:

Design

4 download

Embed Size (px)

DESCRIPTION

Apresentação de alguns conceitos do primeiro capítulo do livro "Design de interação: além da interação homem-computador". Uma introdução aos fundamentos do design de interface, exposta na aula de Projeto de Interfaces Multimídia, no curso de Desenho Industrial da Universidade Federal de Santa Maria.

TRANSCRIPT

  • 1. O que Design de Interao? lipedal@gmail.com Felipe Estvo Dal Molinamariliadeabreu@gmail.comMarlia Nascimento de Abreu Acadmicos do curso de Desenho Industrial - Programao Visual Projeto de Interfaces Multimdia Professor Marcos Brod Jr.

2. O que Design de Interao?PREECE, Jennifer et al.Design de interao:Alm da interao homem-computador. Porto Alegre : Bookman, 2005. 3. O que Design de Interao? Design de produtos interativos que fornecem suporte s atividades cotidianas das pessoas, seja no lar ou no trabalho. 3/43 4. O que Design de Interao? Winograd (1997) descreve o design de interao como o projeto de espaos para a comunicao e interao humana. 4/43 5. O que Design de Interao? Para Gitta Salomon: o design de interao o design de produtos que se revelam com o tempo.5/43 6. O que Design de Interao? Objetivo do Design de Interao: trazer a usabilidade para dentro do processo de Design.6/43 7. Sobre a Usabilidade 8. Sobre a UsabilidadeProdutos interativos e cazes, agradveis ao usurio, de fcilutilizao, fceis de aprender.Ter o usurio em mente.Considerar onde e por quem o produto ser utilizado.Atividade que esto realizando ao utilizar o produto.Considerar no que as pessoas so boas ou no.8/43 9. Sobre a UsabilidadeConsiderar o que pode auxiliar as pessoas na sua atual maneirade fazer as coisas.Pensar no que pode proporcionar experincias de qualidadeao usurio.Ouvir o que as pessoas querem e envolv-las no design.Utilizar tcnicas baseadas no usurio, testadas e aprovadasdurante o processo de design.9/43 10. Uma breve histria 11. Uma breve histria No princpio os engenheiros projetavam sistemas de hardware para eles prprios. Fim dos anos 70 e incio dos anos 80, monitores de estaes de trabalho pessoais. 11/43 12. Uma breve histria Nos anos 80 surgiram novas tecnologias de computao. Educao e treinamento. 12/43 13. Uma breve histria Anos 90 nova onda de desenvolvimento tecnolgico. Nos anos 2000, capacidades emergentes de hardware, software e eletrnica middleware. 13/43 14. A equipemultidisciplinar 15. A equipe multidisciplinarPsiclogosDesigners industriaisAnimadoresSocilogosEspecialistas em treinamentoFotgrafosDesigners gr cos AntroplogosEspecialistas de cinema ArtistasDramaturgosDesigners de produtoEngenheiros de software Pro ssionais de mdiaPsiclogos do desenvolvimento Cientistas da computaoEspecialistas em educao15/43 16. A equipemultidisciplinar Vantagens: maior nmero de idias, novos mtodos e designs mais criativos e originais. Desvantagens: custo, comunicao, diferenas de pensamento, linguagem e percepo do mundo. 16/43 17. O processo de Designde Interao 18. O processo de Designde InteraoAtividades bsicas Identi car necessidades e estabelecer requisitos; Desenvolver designs alternativos que preencham esses requisitos; Construir verses interativas dos designs, de maneira que possam ser comunicados e analisados; Avaliar o que est sendo construdo durante o processo. 18/43 19. O processo de Designde InteraoCaractersticas-chave Os usurios devem estar envolvidos no desenvolvimento do projeto; A usabilidade espec ca e as metas decorrentes da experincia do usurio devem ser identi cadas, claramente documentadas e acordadas no incio do projeto; A iterao em todas as quatro atividades inevitvel. 19/43 20. O mundo dos negcios 21. O mundo dos negcios Grande negcio. Deve-se dizer que seu produto e caz e fcil de utilizar. Presena ou a ausncia de um bom design de interao = sucesso ou no da companhia. Crescente demanda por design de interao. Empresas de consultoria, como IDEO (http://www.ideo.com/) e Swim Studio (http://www.swimstudio.com/)21/43 22. As metas do Designde Interao 23. As metas do Design de InteraoMetas de usabilidade E cciaE cinciaSeguranaUtilidadeAprendibilidadeCapacidade de memorizao23/43 24. As metas do Designde InteraoMetas de usabilidade E ccia O sistema bom em fazer o que se espera dele? Exemplos: site de vendas em que no se compra, telefone que ruim para chamadas.24/43 25. As metas do Designde InteraoMetas de usabilidade E cincia O sistema facilita a produtividade na realizao das tarefas? Exemplos: 1-Click Order da Amazon, busca no Google Chrome.25/43 26. As metas do Designde InteraoMetas de usabilidade Segurana O sistema previne o usurio de cometer erros? Ele fornece formas de recuperao, caso erros sejam cometidos? Exemplos: voc deseja mesmo sair?, opo de desfazer do GMail. 26/43 27. As metas do Designde InteraoMetas de usabilidade Utilidade O sistema proporciona as funcionalidades adequadas aos seus usurios? Exemplos: calculadora do Windows, Wolfram Alpha.27/43 28. As metas do Designde InteraoMetas de usabilidade Aprendibilidade fcil aprender a usar as funes bsicas do sistema? H a possibilidade de, querendo o usurio, passar para funes avanadas? Exemplos: atalhos do sistema, Dwarf Fortress.28/43 29. As metas do Designde InteraoMetas de usabilidade Capacidade de memorizao O sistema facilita que o usurio lembre de como us-lo? Exemplos: reconhecimento vs lembrana, linha de comando vs cones.30/43 30. 31/43 31. As metas do Design de InteraoMetas na experincia SatisfatrioEsteticamente apreciveldo usurioAgradvelIncentivador de criatividadeDivertidoCompensadorInteressante Emocionalmente adequadotilMotivador32/43 32. Princpios deUsabilidade e Design 33. Princpios deUsabilidade e DesignPrincpios comuns Visibilidade de designFeedbackRestriesMapeamentoConsistnciaA ordance 34/43 34. Princpios deUsabilidade e DesignPrincpios comuns Visibilidade As funes importantes devem estar visveis, de design ao alcance do usurio.Exemplos: operaes bsicas em um carro,Microsoft Word 200735/43 35. Princpios deUsabilidade e DesignPrincpios comuns Feedback Para cada ao do usurio, deve haver uma resposta de design de forma a con rm-la.Exemplos: telefone, controlador de volume, haptics.36/43 36. Princpios deUsabilidade e DesignPrincpios comuns Restries (fsica, lgica e cultural) Restringir as opes do de design usurio de acordo com o contexto reduz a possibilidade de erro.Exemplo: sombreamento dos menus.37/43 37. Princpios deUsabilidade e DesignPrincpios comuns Mapeamento Deve haver uma relao lgica entre a de design disposio dos controles, e seus efeitos no sistema.Exemplos: controle remoto de DVD, WASD em jogos.38/43 38. Princpios deUsabilidade e DesignPrincpios comuns Consistncia O sistema deve seguir padres, e usar elementos de design semelhantes para tarefas semelhantes.Exemplos: convenes de interface,disposio dos menus em processadores de texto.39/43 39. Princpios deUsabilidade e DesignPrincpios comuns A ordance Os elementos da interface devem ser desenhados de design de forma a deixar claro como interagir com eles.Exemplos: scroll do mouse, cones no Photoshop...e o efeito 3D nos botes?40/43 40. Princpios deUsabilidade e Design 10 heursticas 1. Visibilidade do status do sistema O sistema mantm osde usabilidade usurios informados sobre o que est acontecendo.de Nielsen 2. Compatibilidade com o mundo real A linguagem utilizadana relao entre usurio e sistema deve ser a do usurio.3. Controle do usurio e liberdade O usurio deve poder sairde onde est, ou voltar para onde deseja, com facilidade.4. Consistncia e padres No utilize palavras diferentes sevoc quer dizer a mesma coisa.5. O sistema ajuda os usurios a reconhecer, diagnosticar erecuperar-se de erros A linguagem nestes casos deve sersimples e o sistema deve orientar o usurio a resolver o erro. 41/43 41. Princpios deUsabilidade e Design 10 heursticas 6. Preveno de erros Prevenir os erros ainda melhorde usabilidade do que orientar o usurio corretamente quando eles surgirem.de Nielsen 7. Reconhecimento em vez de memorizao Reconhecerelementos mais fcil do que memorizar comandos.8. Flexibilidade e e cincia de uso O uso da interface feitoem camadas, permitindo que se possa aprofundar.9. Esttica e design minimalista Evita o uso de informaesirrelevantes (alta relao sinal/rudo).10. Ajuda e documentao Caso se faa necessria, a ajudaexiste e clara. 42/43 42. Obrigado!Felipe Estvo Dal MolinMarlia Nascimento de Abreu