SlideShare uma empresa Scribd logo
Universidade Federal de Minas Gerais Escola de Ciência da Informação Interfaces Hipertextuais para Visualização da Informação Biblioteconomia – 7º período Prof.: Marcel Ferrante Bruno Henrique Brant Juliana Aiala Mendes Maristela Reis Ferreira Roseane Netto Vinte Belo Horizonte 2009
Design de Interfaces: Prototipação e Construção
Agenda Prototipação;  Recomendações (guidelines) e regras disponíveis para auxiliar os designers de interação; Ferramentas de suporte disponíveis para o design de interação.
Prototipação e construção O que é um protótipo? Protótipo é uma representação limitada de um design que permite aos usuários interagir com ele e explorar a sua conveniência.
Por que fazer protótipos? Protótipos são dispositivos que facilitam a comunicação entre os membros das equipes; Servem para testar a viabilidade técnica de uma idéia ou verificar se um certo rumo que se tomou no design é compatível com o resto do desenvolvimento do sistema.
Prototipação de baixa-fidelidade Não se assemelha muito ao produto final; Feitos de materiais como papel e cartolina; Simples, baratos e de rápida produção; Rapidamente modificáveis, oferecendo idéias alternativas; Quase sempre se baseia na realização de esboços (sketchs).
Prototipação de alta-fidelidade Utiliza materiais que se espera que estejam no produto final; Realiza um protótipo que se parece muito com algo acabado; É útil para vender idéias a pessoas e para testar questões técnicas.
Concessões na prototipação Os protótipos devem ter concessões (principalmente os de baixa-fidelidade). Testar um aspecto específico do produto. Os tipos de concessão na prototipação são: - Horizontal, que fornece uma ampla gama de funções, mas com poucos detalhes - Vertical, que fornece bastante detalhes para poucas funções.
Construção: do design à implementação Todos os pontos do design levantados nos protótipos devem ser inseridos no produto final. Avaliar para se ter certeza que todos os requisitos foram atendidos.
Design conceitual: dos requisitos ao primeiro design Preocupa-se com transformar os requisitos e as necessidades do usuário em um modelo conceitual. É uma descrição do sistema proposto que seria compreensível pelos usuários da maneira pretendida.
Princípios-chave norteadores do design conceitual Manter a mente aberta, mas nunca esquecer os usuários em seu contexto; Discutir idéias com outros  stakeholders  o máximo possível; Utilizar prototipação de baixa-fidelidade para obter rápido  feedback; Iterar. “Para ter uma boa idéia, tenha muitas idéias” (Retting, 1994).
Três perspectivas para o desenvolvimento de um modelo conceitual Nesta parte discutiremos três formas de pensar sobre o modelo conceitual: Que modo de interação? Existe uma metáfora de interface adequada? Que paradigma de interação usar?
Modo de Interação Modo de interação refere-se a como o usuário invoca ações quando interage com o aparelho. Aibo, o cão interativo Ananova, a apresentadora virtual
Metáforas de interface Constituem uma outra forma de pensar sobre os modelos conceituais. São destinadas a combinar conhecimento familiar em conhecimento novo, de uma maneira que ajude o usuário a entender o sistema.
Paradigmas de interação São filosofias de  design  que ajudam a pensar sobre o produto que está sendo desenvolvido.
Protótipos no design conceitual O objetivo de se fazer protótipos é permitir alguma avaliação das idéias que vão surgindo. A prototipação é utilizada para se ter  feedback  dos  designs  emergentes.
Design físico: tornando-o concreto O  design  físico envolve considerar questões mais concretas e detalhadas acerca do projeto de uma interface, como  design  de tela, quais ícones utilizar, como estruturar menus etc.
Recomendações (guidelines) para o design físico Esforce-se pela consistência : Previna a perda de dados; Possibilite que usuários frequentes utilizem atalhos : opções para usuários avançados (teclas de atalho); Ofereça feedback informativo : informe o que está acontecendo de forma clara para leigos; Projete diálogos para encerrar as ações : “impressão finalizada”, “e-mail enviado”;
Recomendações (guidelines) para o design físico Ofereça prevenção contra erros e manuseio fácil dos mesmos : a interface deve ajudar a evitar erros e a consertá-los. Permita uma revisão fácil das ações : tecla de “desfazer”. Forneça suporte para um local interno de controle : os usuários se sentem mais confortáveis no controle da interação. Reduza a carga de memória de curto prazo:  oferecer opções em vez de exigir que o usuário lembre das informações.
Aspectos principais do  design  da interface Existem aspectos principais da interface que são aplicáveis a uma ampla variedade de produtos interativos:  WIDGETS
“ Widgets” São elementos que fazem parte da interface, como: - caixas de diálogo; - menus; - ícones; - barras de ferramentas, etc.
Design do menu Os menus proporcionam escolhas que podem ser de comandos ou de opções relacionadas a um comando. Eles fornecem os meios pelos quais o usuário pode realizar ações relacionadas à tarefas em questão.
Design de ícones Um bom ícone leva muito tempo para se fazer. Ícones devem atender a diversos grupos de usuários. Normalmente acontece que alguns ícones fazem sentido só a um grupo restrito de usuários. Ícones são culturais .
Design da tela Traduzir a análise de tarefas nas telas. Informações pertinentes devem estar disponíveis nos momentos relevantes.
Exibição de Informação As informações relevantes devem sempre estar disponíveis. É importante o formato em que elas serão exibidas. Diferentes tipos de informação requerem diferentes tipos de exibição.
Conclusão Existem diversos aspectos do design de interfaces que devem ser levados em consideração O designer deve estar preparado para mudanças bruscas em seu ambiente de trabalho, atento a novas tecnologias que podem auxiliar em sua função e ser politizado para ser capaz de “se dar bem” no momento da sugestão do design.
Referências: PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen.  Design de Interação : Além da Interação Homem – Computador. Rio de Janeiro: Bookman, 2005. p. 259-297. Shneiderman, Ben --  Designing the user interface : strategies for effective human-computer interaction.  

Mais conteúdo relacionado

Mais procurados

Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papel
Robson Santos
 
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Talita Pagani
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
Know Solutions
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
Robson Santos
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
André Constantino da Silva
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
André Constantino da Silva
 
Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Design de Interação - Capítulo 8 - Design, Prototipação e Construção - Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Pedro de Vasconcellos
 
Design Thinking - Prototipação
Design Thinking  - PrototipaçãoDesign Thinking  - Prototipação
Design Thinking - Prototipação
UFPA
 
Prototipagem em Papel - Oficina
Prototipagem em Papel - OficinaPrototipagem em Papel - Oficina
Prototipagem em Papel - Oficina
Ltia Unesp
 
Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interação
Luiz Agner
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
Fabiano Damiati
 
Aula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação IAula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação I
Paolo Passeri
 
Aula 3
Aula 3Aula 3
Aula Interface Gráfica do Usuário
Aula Interface Gráfica do UsuárioAula Interface Gráfica do Usuário
Aula Interface Gráfica do Usuário
Fabio Moura Pereira
 
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Natanael Simões
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
DesignCarminatti
 
Prototipação
PrototipaçãoPrototipação
Prototipação
Koji Pereira
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de Interação
Fabio Moura Pereira
 
Trabalho es prototipagem
Trabalho es   prototipagemTrabalho es   prototipagem
Trabalho es prototipagem
Dionei Jr Mariño
 
O uso da prototipagem e fabricação digital no ambiente fab lab
O uso da prototipagem e fabricação digital no ambiente fab labO uso da prototipagem e fabricação digital no ambiente fab lab
O uso da prototipagem e fabricação digital no ambiente fab lab
Diego Jucá
 

Mais procurados (20)

Protótipos de papel
Protótipos de papelProtótipos de papel
Protótipos de papel
 
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
Técnicas de Prototipação para Smartphones no Apoio à Avaliação de Interfaces ...
 
Prototipagem
PrototipagemPrototipagem
Prototipagem
 
O processo de design de interação
O processo de design de interaçãoO processo de design de interação
O processo de design de interação
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Design de Interação - Capítulo 8 - Design, Prototipação e Construção - Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
Design de Interação - Capítulo 8 - Design, Prototipação e Construção -
 
Design Thinking - Prototipação
Design Thinking  - PrototipaçãoDesign Thinking  - Prototipação
Design Thinking - Prototipação
 
Prototipagem em Papel - Oficina
Prototipagem em Papel - OficinaPrototipagem em Papel - Oficina
Prototipagem em Papel - Oficina
 
Palestra - Design de interação
Palestra - Design de interaçãoPalestra - Design de interação
Palestra - Design de interação
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
 
Aula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação IAula 2 - Técnicas de Prototipação I
Aula 2 - Técnicas de Prototipação I
 
Aula 3
Aula 3Aula 3
Aula 3
 
Aula Interface Gráfica do Usuário
Aula Interface Gráfica do UsuárioAula Interface Gráfica do Usuário
Aula Interface Gráfica do Usuário
 
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
Processo de Desenvolvimento de Software - Design de Software, Interface, Arqu...
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Prototipação
PrototipaçãoPrototipação
Prototipação
 
Aula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de InteraçãoAula - Interfaces e Estilos de Interação
Aula - Interfaces e Estilos de Interação
 
Trabalho es prototipagem
Trabalho es   prototipagemTrabalho es   prototipagem
Trabalho es prototipagem
 
O uso da prototipagem e fabricação digital no ambiente fab lab
O uso da prototipagem e fabricação digital no ambiente fab labO uso da prototipagem e fabricação digital no ambiente fab lab
O uso da prototipagem e fabricação digital no ambiente fab lab
 

Destaque

IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
Eduardo Bertolucci
 
Fatenp ihc-aula2
Fatenp ihc-aula2Fatenp ihc-aula2
Fatenp ihc-aula2
Daniel Boppré
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
Wellington Oliveira
 
Social Game
Social GameSocial Game
Social Game
Eduardo Ponce
 
Análise de Projeto de Sistemas - Projeto Fazendola
Análise de Projeto de Sistemas - Projeto FazendolaAnálise de Projeto de Sistemas - Projeto Fazendola
Análise de Projeto de Sistemas - Projeto Fazendola
Juliano Padilha
 
Design de Interação (se é que existe outro)
Design de Interação (se é que existe outro)Design de Interação (se é que existe outro)
Design de Interação (se é que existe outro)
Hugo Cristo
 
Seminário em grupo 3º periodo
Seminário em grupo 3º periodoSeminário em grupo 3º periodo
Seminário em grupo 3º periodo
Renata Cavalcante
 
proposta
propostaproposta
proposta
laerciomv
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
Juliana Padron
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
duradez
 
Boas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesBoas Práticas em Design de Interfaces
Boas Práticas em Design de Interfaces
Felipe Almeida
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
Jane Vita
 
Design
Design Design
Design
Piedade Alves
 
Modelo capa
Modelo capaModelo capa
Modelo capa
guestf155a16b
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
igoroliveiracosta
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
Wellington Oliveira
 
Modelo portfólio unopar
Modelo portfólio unoparModelo portfólio unopar
Modelo portfólio unopar
Rogerio Sena
 

Destaque (17)

IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
IHC - Trabalho de Prototipação - Eduardo Bertolucci e Colegas e Classe - UNOP...
 
Fatenp ihc-aula2
Fatenp ihc-aula2Fatenp ihc-aula2
Fatenp ihc-aula2
 
Interação Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - AntecipaçãoInteração Humano Computador Capítulo 8 - Antecipação
Interação Humano Computador Capítulo 8 - Antecipação
 
Social Game
Social GameSocial Game
Social Game
 
Análise de Projeto de Sistemas - Projeto Fazendola
Análise de Projeto de Sistemas - Projeto FazendolaAnálise de Projeto de Sistemas - Projeto Fazendola
Análise de Projeto de Sistemas - Projeto Fazendola
 
Design de Interação (se é que existe outro)
Design de Interação (se é que existe outro)Design de Interação (se é que existe outro)
Design de Interação (se é que existe outro)
 
Seminário em grupo 3º periodo
Seminário em grupo 3º periodoSeminário em grupo 3º periodo
Seminário em grupo 3º periodo
 
proposta
propostaproposta
proposta
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
Boas Práticas em Design de Interfaces
Boas Práticas em Design de InterfacesBoas Práticas em Design de Interfaces
Boas Práticas em Design de Interfaces
 
Mini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos MóveisMini Curso - Design de Interface para Dispositivos Móveis
Mini Curso - Design de Interface para Dispositivos Móveis
 
Design
Design Design
Design
 
Modelo capa
Modelo capaModelo capa
Modelo capa
 
Interação Homem Computador Aula 02
Interação Homem Computador Aula 02Interação Homem Computador Aula 02
Interação Homem Computador Aula 02
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Modelo portfólio unopar
Modelo portfólio unoparModelo portfólio unopar
Modelo portfólio unopar
 

Semelhante a Design De Interfaces

Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
Guilherme Marques
 
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadasDesign System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
MJV Technology & Innovation Brasil
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
Wellington Marion
 
Design de interação aula 2
Design de interação aula 2Design de interação aula 2
Design de interação aula 2
Itaú Soluções Previdenciáriais
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Cris Fidelix
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
Davi Busanello
 
Aula 1
Aula 1Aula 1
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
Marconi Pacheco
 
ads pra os nigers.pptx
ads pra os nigers.pptxads pra os nigers.pptx
ads pra os nigers.pptx
AmorimRazo
 
Design de Interação 2008
Design de Interação 2008Design de Interação 2008
Design de Interação 2008
Wellington Vieira
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
Luanna Eroles
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
wudrs
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
Lógica Digital
 
Técnicas de Concepção - Livro de Walter Cybis
Técnicas de Concepção - Livro de Walter CybisTécnicas de Concepção - Livro de Walter Cybis
Técnicas de Concepção - Livro de Walter Cybis
Luiz Agner
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
M. Torres
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
Vinícius Silva de Andrade
 
Seminario
SeminarioSeminario
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
Daniel Brandão
 
Apostial i.h.c - apostila oficial
Apostial   i.h.c - apostila oficialApostial   i.h.c - apostila oficial
Apostial i.h.c - apostila oficial
Daniel Nunes
 
Aula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrõesAula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrões
Silvia Dotta
 

Semelhante a Design De Interfaces (20)

Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadasDesign System: Criando padrões de design para tomadas de decisões mais alinhadas
Design System: Criando padrões de design para tomadas de decisões mais alinhadas
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
Design de interação aula 2
Design de interação aula 2Design de interação aula 2
Design de interação aula 2
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Aula 1
Aula 1Aula 1
Aula 1
 
Design Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface DigitalDesign Centrado no Usuário para Interface Digital
Design Centrado no Usuário para Interface Digital
 
ads pra os nigers.pptx
ads pra os nigers.pptxads pra os nigers.pptx
ads pra os nigers.pptx
 
Design de Interação 2008
Design de Interação 2008Design de Interação 2008
Design de Interação 2008
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Agile User Experience
Agile User ExperienceAgile User Experience
Agile User Experience
 
Técnicas de Concepção - Livro de Walter Cybis
Técnicas de Concepção - Livro de Walter CybisTécnicas de Concepção - Livro de Walter Cybis
Técnicas de Concepção - Livro de Walter Cybis
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
 
Design de Interface - Diretrizes
Design de Interface - DiretrizesDesign de Interface - Diretrizes
Design de Interface - Diretrizes
 
Seminario
SeminarioSeminario
Seminario
 
Heurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na webHeurística, Principios e Usabilidade na web
Heurística, Principios e Usabilidade na web
 
Apostial i.h.c - apostila oficial
Apostial   i.h.c - apostila oficialApostial   i.h.c - apostila oficial
Apostial i.h.c - apostila oficial
 
Aula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrõesAula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrões
 

Último

PERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdf
PERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdfPERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdf
PERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdf
EsterGabriiela1
 
A Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdf
A Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdfA Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdf
A Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdf
Falcão Brasil
 
Guerra de reconquista da Península ibérica
Guerra de reconquista da Península ibéricaGuerra de reconquista da Península ibérica
Guerra de reconquista da Península ibérica
felipescherner
 
Caça-palavras - multiplicação
Caça-palavras  -  multiplicaçãoCaça-palavras  -  multiplicação
Caça-palavras - multiplicação
Mary Alvarenga
 
Matemática para Concursos - Teoria dos Conjuntos
Matemática para Concursos - Teoria dos ConjuntosMatemática para Concursos - Teoria dos Conjuntos
Matemática para Concursos - Teoria dos Conjuntos
Instituto Walter Alencar
 
Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...
Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...
Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...
Falcão Brasil
 
Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...
Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...
Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...
Falcão Brasil
 
Atividade Dias dos Pais - Meu Pai, Razão da Minha História.
Atividade Dias dos Pais -  Meu Pai, Razão da Minha História.Atividade Dias dos Pais -  Meu Pai, Razão da Minha História.
Atividade Dias dos Pais - Meu Pai, Razão da Minha História.
Mary Alvarenga
 
Slide para aplicação da AVAL. FLUÊNCIA.pptx
Slide para aplicação  da AVAL. FLUÊNCIA.pptxSlide para aplicação  da AVAL. FLUÊNCIA.pptx
Slide para aplicação da AVAL. FLUÊNCIA.pptx
LeilaVilasboas
 
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
Sandra Pratas
 
escrita criativa utilizada na arteterapia
escrita criativa   utilizada na arteterapiaescrita criativa   utilizada na arteterapia
escrita criativa utilizada na arteterapia
shirleisousa9166
 
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23
Sandra Pratas
 
Conhecimento sobre Vestimenta Anti chamas
Conhecimento sobre Vestimenta Anti chamasConhecimento sobre Vestimenta Anti chamas
Conhecimento sobre Vestimenta Anti chamas
edusegtrab
 
Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...
Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...
Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...
Falcão Brasil
 
Oceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsx
Oceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsxOceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsx
Oceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsx
Luzia Gabriele
 
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdfHistória das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
LeideLauraCenturionL
 
Noite Alva! José Ernesto Ferraresso.ppsx
Noite Alva! José Ernesto Ferraresso.ppsxNoite Alva! José Ernesto Ferraresso.ppsx
Noite Alva! José Ernesto Ferraresso.ppsx
Luzia Gabriele
 
UFCD_5673_Segurança nos transportes_índice.pdf
UFCD_5673_Segurança nos transportes_índice.pdfUFCD_5673_Segurança nos transportes_índice.pdf
UFCD_5673_Segurança nos transportes_índice.pdf
Manuais Formação
 

Último (20)

PERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdf
PERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdfPERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdf
PERÍODO COMPOSTO POR COORDENAÇÃO PDF.pdf
 
A Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdf
A Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdfA Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdf
A Industria Brasileira de Defesa - Situação Atual e Perspectivas de Evolução.pdf
 
Guerra de reconquista da Península ibérica
Guerra de reconquista da Península ibéricaGuerra de reconquista da Península ibérica
Guerra de reconquista da Península ibérica
 
Caça-palavras - multiplicação
Caça-palavras  -  multiplicaçãoCaça-palavras  -  multiplicação
Caça-palavras - multiplicação
 
Matemática para Concursos - Teoria dos Conjuntos
Matemática para Concursos - Teoria dos ConjuntosMatemática para Concursos - Teoria dos Conjuntos
Matemática para Concursos - Teoria dos Conjuntos
 
Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...
Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...
Organograma do Centro Gestor e Operacional do Sistema de Proteção da Amazônia...
 
Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...
Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...
Apresentação Institucional do Centro Gestor e Operacional do Sistema de Prote...
 
Atividade Dias dos Pais - Meu Pai, Razão da Minha História.
Atividade Dias dos Pais -  Meu Pai, Razão da Minha História.Atividade Dias dos Pais -  Meu Pai, Razão da Minha História.
Atividade Dias dos Pais - Meu Pai, Razão da Minha História.
 
TALENTOS DA NOSSA ESCOLA .
TALENTOS DA NOSSA ESCOLA                .TALENTOS DA NOSSA ESCOLA                .
TALENTOS DA NOSSA ESCOLA .
 
Slide para aplicação da AVAL. FLUÊNCIA.pptx
Slide para aplicação  da AVAL. FLUÊNCIA.pptxSlide para aplicação  da AVAL. FLUÊNCIA.pptx
Slide para aplicação da AVAL. FLUÊNCIA.pptx
 
FOTOS_AS CIÊNCIAS EM AÇÃO .
FOTOS_AS CIÊNCIAS EM AÇÃO                .FOTOS_AS CIÊNCIAS EM AÇÃO                .
FOTOS_AS CIÊNCIAS EM AÇÃO .
 
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
 
escrita criativa utilizada na arteterapia
escrita criativa   utilizada na arteterapiaescrita criativa   utilizada na arteterapia
escrita criativa utilizada na arteterapia
 
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_CARLA MORAIS_22_23
 
Conhecimento sobre Vestimenta Anti chamas
Conhecimento sobre Vestimenta Anti chamasConhecimento sobre Vestimenta Anti chamas
Conhecimento sobre Vestimenta Anti chamas
 
Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...
Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...
Manual de Identidade Visual do Centro Gestor e Operacional do Sistema de Prot...
 
Oceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsx
Oceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsxOceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsx
Oceano, Fonte de Vida e Beleza Maria Inês Aroeira Braga.ppsx
 
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdfHistória das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
 
Noite Alva! José Ernesto Ferraresso.ppsx
Noite Alva! José Ernesto Ferraresso.ppsxNoite Alva! José Ernesto Ferraresso.ppsx
Noite Alva! José Ernesto Ferraresso.ppsx
 
UFCD_5673_Segurança nos transportes_índice.pdf
UFCD_5673_Segurança nos transportes_índice.pdfUFCD_5673_Segurança nos transportes_índice.pdf
UFCD_5673_Segurança nos transportes_índice.pdf
 

Design De Interfaces

  • 1. Universidade Federal de Minas Gerais Escola de Ciência da Informação Interfaces Hipertextuais para Visualização da Informação Biblioteconomia – 7º período Prof.: Marcel Ferrante Bruno Henrique Brant Juliana Aiala Mendes Maristela Reis Ferreira Roseane Netto Vinte Belo Horizonte 2009
  • 2. Design de Interfaces: Prototipação e Construção
  • 3. Agenda Prototipação; Recomendações (guidelines) e regras disponíveis para auxiliar os designers de interação; Ferramentas de suporte disponíveis para o design de interação.
  • 4. Prototipação e construção O que é um protótipo? Protótipo é uma representação limitada de um design que permite aos usuários interagir com ele e explorar a sua conveniência.
  • 5. Por que fazer protótipos? Protótipos são dispositivos que facilitam a comunicação entre os membros das equipes; Servem para testar a viabilidade técnica de uma idéia ou verificar se um certo rumo que se tomou no design é compatível com o resto do desenvolvimento do sistema.
  • 6. Prototipação de baixa-fidelidade Não se assemelha muito ao produto final; Feitos de materiais como papel e cartolina; Simples, baratos e de rápida produção; Rapidamente modificáveis, oferecendo idéias alternativas; Quase sempre se baseia na realização de esboços (sketchs).
  • 7. Prototipação de alta-fidelidade Utiliza materiais que se espera que estejam no produto final; Realiza um protótipo que se parece muito com algo acabado; É útil para vender idéias a pessoas e para testar questões técnicas.
  • 8. Concessões na prototipação Os protótipos devem ter concessões (principalmente os de baixa-fidelidade). Testar um aspecto específico do produto. Os tipos de concessão na prototipação são: - Horizontal, que fornece uma ampla gama de funções, mas com poucos detalhes - Vertical, que fornece bastante detalhes para poucas funções.
  • 9. Construção: do design à implementação Todos os pontos do design levantados nos protótipos devem ser inseridos no produto final. Avaliar para se ter certeza que todos os requisitos foram atendidos.
  • 10. Design conceitual: dos requisitos ao primeiro design Preocupa-se com transformar os requisitos e as necessidades do usuário em um modelo conceitual. É uma descrição do sistema proposto que seria compreensível pelos usuários da maneira pretendida.
  • 11. Princípios-chave norteadores do design conceitual Manter a mente aberta, mas nunca esquecer os usuários em seu contexto; Discutir idéias com outros stakeholders o máximo possível; Utilizar prototipação de baixa-fidelidade para obter rápido feedback; Iterar. “Para ter uma boa idéia, tenha muitas idéias” (Retting, 1994).
  • 12. Três perspectivas para o desenvolvimento de um modelo conceitual Nesta parte discutiremos três formas de pensar sobre o modelo conceitual: Que modo de interação? Existe uma metáfora de interface adequada? Que paradigma de interação usar?
  • 13. Modo de Interação Modo de interação refere-se a como o usuário invoca ações quando interage com o aparelho. Aibo, o cão interativo Ananova, a apresentadora virtual
  • 14. Metáforas de interface Constituem uma outra forma de pensar sobre os modelos conceituais. São destinadas a combinar conhecimento familiar em conhecimento novo, de uma maneira que ajude o usuário a entender o sistema.
  • 15. Paradigmas de interação São filosofias de design que ajudam a pensar sobre o produto que está sendo desenvolvido.
  • 16. Protótipos no design conceitual O objetivo de se fazer protótipos é permitir alguma avaliação das idéias que vão surgindo. A prototipação é utilizada para se ter feedback dos designs emergentes.
  • 17. Design físico: tornando-o concreto O design físico envolve considerar questões mais concretas e detalhadas acerca do projeto de uma interface, como design de tela, quais ícones utilizar, como estruturar menus etc.
  • 18. Recomendações (guidelines) para o design físico Esforce-se pela consistência : Previna a perda de dados; Possibilite que usuários frequentes utilizem atalhos : opções para usuários avançados (teclas de atalho); Ofereça feedback informativo : informe o que está acontecendo de forma clara para leigos; Projete diálogos para encerrar as ações : “impressão finalizada”, “e-mail enviado”;
  • 19. Recomendações (guidelines) para o design físico Ofereça prevenção contra erros e manuseio fácil dos mesmos : a interface deve ajudar a evitar erros e a consertá-los. Permita uma revisão fácil das ações : tecla de “desfazer”. Forneça suporte para um local interno de controle : os usuários se sentem mais confortáveis no controle da interação. Reduza a carga de memória de curto prazo: oferecer opções em vez de exigir que o usuário lembre das informações.
  • 20. Aspectos principais do design da interface Existem aspectos principais da interface que são aplicáveis a uma ampla variedade de produtos interativos: WIDGETS
  • 21. “ Widgets” São elementos que fazem parte da interface, como: - caixas de diálogo; - menus; - ícones; - barras de ferramentas, etc.
  • 22. Design do menu Os menus proporcionam escolhas que podem ser de comandos ou de opções relacionadas a um comando. Eles fornecem os meios pelos quais o usuário pode realizar ações relacionadas à tarefas em questão.
  • 23. Design de ícones Um bom ícone leva muito tempo para se fazer. Ícones devem atender a diversos grupos de usuários. Normalmente acontece que alguns ícones fazem sentido só a um grupo restrito de usuários. Ícones são culturais .
  • 24. Design da tela Traduzir a análise de tarefas nas telas. Informações pertinentes devem estar disponíveis nos momentos relevantes.
  • 25. Exibição de Informação As informações relevantes devem sempre estar disponíveis. É importante o formato em que elas serão exibidas. Diferentes tipos de informação requerem diferentes tipos de exibição.
  • 26. Conclusão Existem diversos aspectos do design de interfaces que devem ser levados em consideração O designer deve estar preparado para mudanças bruscas em seu ambiente de trabalho, atento a novas tecnologias que podem auxiliar em sua função e ser politizado para ser capaz de “se dar bem” no momento da sugestão do design.
  • 27. Referências: PREECE, Jennifer; ROGERS, Yvonne; SHARP, Helen. Design de Interação : Além da Interação Homem – Computador. Rio de Janeiro: Bookman, 2005. p. 259-297. Shneiderman, Ben --  Designing the user interface : strategies for effective human-computer interaction.  

Notas do Editor

  1. <number>
  2. <number>
  3. <number>
  4. <number>
  5. <number>
  6. <number>
  7. <number>
  8. <number>
  9. <number>
  10. <number>
  11. <number>
  12. <number>
  13. <number>
  14. <number>
  15. <number>
  16. <number>
  17. <number>
  18. <number>
  19. <number>
  20. <number>
  21. <number>
  22. <number>
  23. <number>
  24. <number>
  25. <number>
  26. <number>
  27. <number>