SlideShare uma empresa Scribd logo
1 de 26
Princípios Gerais para o Design de Interfaces
INTRODUÇÃO ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres
INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres INTERFACE A forma como a informação é organizada e como o utilizador interage com essa informação
INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres INTERACTIVIDADE Possíbilidade de navegar e jogar com a informação disponível  (Hipertexto; Zonas Sensíveis; Links)
INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Marlene de Oliveira Peres USABILIDADE “ Facilidade de uso” de um interface quanto mais elevada for a facilidade de uso, tanto melhor, permitindo assim diminuir os tempos de aprendizagem associados a esse interface.   ? ?
INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres UTILIZADORES Pensar como  o utilizador Todas as pessoas são  diferentes Devemos perder todo o tempo procurando  facilitar  as coisas ao utilizador.  Procurar a  melhor,  a mais  simples  e a mais  fácil  forma de entender e retirar a informação.
INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres UTILIZADORES 2 Erros Comuns: - Todos os utilizadores são iguais - Todos os utilizadores agem como    quem desenvolveu o programa Se um interface é fácil de utilizar para um programador não significa que o seja para o utilizador  Se um interface resulta com meia dúzia de utilizadores não significa que resulta com os restantes
INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres INTERACÇÃO HOMEM-COMPUTADOR O número de utilizadores  sem conhecimentos especiais de informática tem vindo a  aumentar Os computadores devem estar ao serviço do homem e não o homem ao serviço do computador   Todo o sucesso da interacção está  centrada no utilizador
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces COMPATIBILIDADE DE TAREFAS - As tarefas devem estar  organizadas  em função das tarefas dos utilizadores -  Linguagem  deve ser a  mesma das pessoas que  a estão a utilizar Ex: As funções parecidas devem ocupar a mesma área
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces MULTITAREFA - Os sistema e as aplicações devem suportar o conceito de  interromper, voltar atrás, depois continuar .  (Gestão do Caos) - Tem que se deixar uma certa mobilidade às pessoas –  não se pode obrigar o utilizador a ver tudo até ao fim . O utilizador não pode ficar sem alternativa. Ele tem que ter a liberdade de controlar a máquina e não a máquina controlá-lo a ele. Ex: Barras e menus de navegação
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces CONSISTÊNCIA - As pessoas pensam por  analogia - Tarefas semelhantes devem ter  procedimentos semelhantes - Consistência implica  coerência  e que o  utilizador deve intuir o modo de funcionamento de certas funções, face ao que já experimentou - Cuidado com a consistência nas acções  perigosas -> para não “baralhar” o utilizador Ex: utilizar a mesma estrura de menus, nas mesmas posições ao longo de toda a navegação
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FAMILIARIDADE - Familiaridade com os  temas, as imagens, as metáforas, a sinalética  que consta no reportório cultural do utilizador - Ícones que as pessoas conhecem (cores, símbolos,... ) Ex: vermelho “parar” ou “perigo”  verde “avançar”   Ambiente windows - escritório
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces SIMPLICIDADE - Os sistemas devem ser  simples e fáceis de usar - Só se deve dar ao utilizador o que ele precisa no momento Ex: Motores de busca
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces MANIPULAÇÃO DIRECTA - É mais do que uma metáfora, é o utilizador poder  visualizar, modificar, alterar directamente os elementos . Ex: edição de palavras nos modernos  processadores de texto ou editar linhas  com posição nos antigos
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces CONTROLO - O utilizador gosta de tomar as rédeas das operações. É frustrante ser controlado por uma máquina - O utilizador gosta de definir por  onde quer ir ,  quando quer , e  quanto tempo  lá vai ficar.
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces WYSIWYG  (What You See Is What You Get) - Geralmente refere-se a uma relação directa entre o que se vê representado num ecrã e um impressora. Ex: Os displays antigos não tinham essa capacidade e não permitiam visualizar os bolds, itálicos, etc. que depois saiam na impressora
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FEEDBACK - Dar ao utilizador  sinais claros de resposta da máquina , informar o utilizador do que é que está a acontecer (botões, mensagens;…) - O tempo de resposta deve ser o  mais curto possível Ex:  Barras de tempo  dão ao utilizador  uma melhor ideia do que apenas uma  ampulheta do tempo que vai demorar  uma tarefa A expressão “Está a carregar” ou “faltam…”
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FLEXIBILIDADE - Permitir ao utilizador definir uma série de parâmetros relativos à interface:  estilos de diálogo, cores, background , etc. - Também ao nível do tipo de  inputs  deve haver flexibilidade:  Ex: rato e teclado;    ambiente windows   msn messenger
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces TECNOLOGIA INVISÍVEL - O utilizador  deve saber o mínimo possível de detalhes técnicos , de como o sistema está tecnicamente implementado - o utilizador  não deve confrontado com técnicas ou palavras   que desconhece  em absoluto e que lhe dão uma sensação de desconforto. Ex: quando se estala um programa, o tipo de  linguagem tem que ser acessível para o  utilizador compreender
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces ROBUSTEZ - O sistema deve  tolerar o erro do utilizador  e saber lidar com ele - O utilizador não deve ter a sensação de que aquilo que ele fizer pode destruir ou danificar qualquer coisa. Isso irá inibi-lo fortemente. Ex:Os  craches  do sistema  devem ser mínimos
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces PROTECÇÃO - Os sistemas devem estar  protegidos  contra as possíveis más acções do utilizador Ex: Devem aparecer uma série de  confirmações  antes de o utilizador puder apagar todos os ficheiros
PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FÁCIL DE USAR E FÁCIL DE APRENDER - Os sistemas devem ser  simples  para quem os utiliza pela primeira vez e ao mesmo tempo para os utilizadores avançados Ex: Internet Explorer Sistema Operativo Windows Multibancos
CONCLUSÃO Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces Este conjunto de princípios entram às vezes em conflito. Em cada situação há que ter bom senso para poder escolher qual o peso que deve ser dado a cada princípio. A Interface é um dos factores críticos para o sucesso de um sistema.  A Interface deve ser fácil de usar -  não existem métodos universalmente aceites para realizar tal propósito.
EXERCÍCIO DA AULA ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces

Mais conteúdo relacionado

Mais procurados

Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de softwareMarcio Costa
 
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2Carlos Eugenio Torres
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Renato Melo
 
Tipos de Sistemas Operacionais
Tipos de Sistemas OperacionaisTipos de Sistemas Operacionais
Tipos de Sistemas OperacionaisLuciano Crecente
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosAlan Vasconcelos
 
Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & UsabilidadeLuiz China
 
Projeto Informática na Escola
Projeto Informática na EscolaProjeto Informática na Escola
Projeto Informática na EscolaDaiana de Ávila
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuárioBruno Biagioni Neto
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Dra. Camila Hamdan
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?Sidney Roberto
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeNécio de Lima Veras
 
O papel do e-formador
O papel do e-formadorO papel do e-formador
O papel do e-formadorHelena Freixo
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?Marconi Pacheco
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores Monica Mesquita
 
design patterns - introdução
design patterns - introduçãodesign patterns - introdução
design patterns - introduçãoelliando dias
 
Aula Teste sobre IHC, usabilidade e affordance
Aula Teste sobre IHC, usabilidade e affordanceAula Teste sobre IHC, usabilidade e affordance
Aula Teste sobre IHC, usabilidade e affordanceChristopher Cerqueira
 

Mais procurados (20)

Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2Desenvolvimento de aplicações para dispositivos móveis   módulo i - aula 2
Desenvolvimento de aplicações para dispositivos móveis módulo i - aula 2
 
Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07Apresentação UX e UI - Webdesign - Aula 07
Apresentação UX e UI - Webdesign - Aula 07
 
Modelos de processos de software
Modelos de processos de softwareModelos de processos de software
Modelos de processos de software
 
Tipos de Sistemas Operacionais
Tipos de Sistemas OperacionaisTipos de Sistemas Operacionais
Tipos de Sistemas Operacionais
 
Usabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípiosUsabilidade aula-02. Metas e princípios
Usabilidade aula-02. Metas e princípios
 
Ergonomia & Usabilidade
Ergonomia & UsabilidadeErgonomia & Usabilidade
Ergonomia & Usabilidade
 
Apresentação do MS-DOS
Apresentação do MS-DOSApresentação do MS-DOS
Apresentação do MS-DOS
 
Projeto Informática na Escola
Projeto Informática na EscolaProjeto Informática na Escola
Projeto Informática na Escola
 
Introdução a experiência do usuário
Introdução a experiência do usuárioIntrodução a experiência do usuário
Introdução a experiência do usuário
 
Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:Ergonomia e Usabilidade AULA 3:
Ergonomia e Usabilidade AULA 3:
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 
Conceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidadeConceitos básicos de usabilidade e acessibilidade
Conceitos básicos de usabilidade e acessibilidade
 
O papel do e-formador
O papel do e-formadorO papel do e-formador
O papel do e-formador
 
UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?UX e UI Design - O que é? Quais as diferenças?
UX e UI Design - O que é? Quais as diferenças?
 
Introdução ao Teste de Software
Introdução ao Teste de SoftwareIntrodução ao Teste de Software
Introdução ao Teste de Software
 
Design de interfaces para internet
Design de interfaces para internetDesign de interfaces para internet
Design de interfaces para internet
 
UX UI para Programadores
UX UI para Programadores UX UI para Programadores
UX UI para Programadores
 
design patterns - introdução
design patterns - introduçãodesign patterns - introdução
design patterns - introdução
 
Aula Teste sobre IHC, usabilidade e affordance
Aula Teste sobre IHC, usabilidade e affordanceAula Teste sobre IHC, usabilidade e affordance
Aula Teste sobre IHC, usabilidade e affordance
 

Destaque

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 InterfacesFelipe Almeida
 
Aula: Princípios de design de interfaces
Aula: Princípios de design de interfacesAula: Princípios de design de interfaces
Aula: Princípios de design de interfacesJanynne Gomes
 
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
 
Introdução ao Design de interface para dispositivos móveis
Introdução ao Design de interface para dispositivos móveisIntrodução ao Design de interface para dispositivos móveis
Introdução ao Design de interface para dispositivos móveisEdson Luiz
 
Aula: Tipos de Interface
Aula: Tipos de InterfaceAula: Tipos de Interface
Aula: Tipos de InterfaceJanynne Gomes
 
Interfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveisInterfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveisJuliana Lemos
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisInstituto Faber-Ludens
 
Apresentação Final do meu TCC: Adaptintranet
Apresentação Final do meu TCC: AdaptintranetApresentação Final do meu TCC: Adaptintranet
Apresentação Final do meu TCC: AdaptintranetTalita Pagani
 
Principios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a BuscaPrincipios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a BuscaAnna Raquel Serra
 
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óveisJane Vita
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informaçãoAna Luisa Vieira
 
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINAIHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINADiego BBahia
 
Aula - Gerenciadores de layout
Aula - Gerenciadores de layoutAula - Gerenciadores de layout
Aula - Gerenciadores de layoutJanynne Gomes
 
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcuUsabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcuMarcello Cardoso
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web designCarla Suelen
 

Destaque (20)

Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 
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
 
Aula: Princípios de design de interfaces
Aula: Princípios de design de interfacesAula: Princípios de design de interfaces
Aula: Princípios de design de interfaces
 
Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)Design de interface (trabalho acadêmico)
Design de interface (trabalho acadêmico)
 
Introdução ao Design de interface para dispositivos móveis
Introdução ao Design de interface para dispositivos móveisIntrodução ao Design de interface para dispositivos móveis
Introdução ao Design de interface para dispositivos móveis
 
Aula: Tipos de Interface
Aula: Tipos de InterfaceAula: Tipos de Interface
Aula: Tipos de Interface
 
Interfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveisInterfaces inteligentes para dispositivos móveis
Interfaces inteligentes para dispositivos móveis
 
Design de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos MóveisDesign de Interfaces para Dispositivos Móveis
Design de Interfaces para Dispositivos Móveis
 
Apresentação Final do meu TCC: Adaptintranet
Apresentação Final do meu TCC: AdaptintranetApresentação Final do meu TCC: Adaptintranet
Apresentação Final do meu TCC: Adaptintranet
 
Conceitos interfaces modernas
Conceitos interfaces modernasConceitos interfaces modernas
Conceitos interfaces modernas
 
Principios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a BuscaPrincipios do Design de Interfaces aplicados a Busca
Principios do Design de Interfaces aplicados a Busca
 
Design Promocional
Design PromocionalDesign Promocional
Design Promocional
 
Ihc Aula7
Ihc Aula7Ihc Aula7
Ihc Aula7
 
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
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINAIHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
IHM x IHM – INTERFACE x INTERAçÃO HOMEM-MÁQUINA
 
Aula - Gerenciadores de layout
Aula - Gerenciadores de layoutAula - Gerenciadores de layout
Aula - Gerenciadores de layout
 
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcuUsabilidade 2 - Metas, princípios e leis do design, agile vs dcu
Usabilidade 2 - Metas, princípios e leis do design, agile vs dcu
 
Introdução ao web design
Introdução ao web designIntrodução ao web design
Introdução ao web design
 
Placa mãe (motherboard)
Placa mãe (motherboard)Placa mãe (motherboard)
Placa mãe (motherboard)
 

Semelhante a Princípios Gerais para o Design de Interfaces

Aula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrõesAula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrõesSilvia Dotta
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquinakenethyf
 
Análise de usabilidade do Facebook com base na heurística de Jakob Nielsen
Análise de usabilidade do Facebook com base na heurística de Jakob NielsenAnálise de usabilidade do Facebook com base na heurística de Jakob Nielsen
Análise de usabilidade do Facebook com base na heurística de Jakob NielsenWagner Souza Silva
 
Um pouco de engenharia de software
Um pouco de engenharia de softwareUm pouco de engenharia de software
Um pouco de engenharia de softwareAlexsandro Pereira
 
Usabilidade de aplicações
Usabilidade de aplicaçõesUsabilidade de aplicações
Usabilidade de aplicaçõesVitor Julião
 
Interface com o usuário
Interface com o usuárioInterface com o usuário
Interface com o usuárioirlss
 
3 critérios ergonômicos
3  critérios ergonômicos3  critérios ergonômicos
3 critérios ergonômicosEdson Soares
 
ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte AFabiano Damiati
 
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 webDaniel Brandão
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfJulioCesar371362
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces NaturaisEdu Agni
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototypeeudisnet
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para DesenvolvedoresRian Dutra, MSc.
 

Semelhante a Princípios Gerais para o Design de Interfaces (20)

Aula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrõesAula6 - Estilos, guias, padrões
Aula6 - Estilos, guias, padrões
 
9 regras usabilidade
9 regras usabilidade9 regras usabilidade
9 regras usabilidade
 
Curso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem MáquinaCurso/Aula de Interface Homem Máquina
Curso/Aula de Interface Homem Máquina
 
Análise de usabilidade do Facebook com base na heurística de Jakob Nielsen
Análise de usabilidade do Facebook com base na heurística de Jakob NielsenAnálise de usabilidade do Facebook com base na heurística de Jakob Nielsen
Análise de usabilidade do Facebook com base na heurística de Jakob Nielsen
 
Um pouco de engenharia de software
Um pouco de engenharia de softwareUm pouco de engenharia de software
Um pouco de engenharia de software
 
Usabilidade de aplicações
Usabilidade de aplicaçõesUsabilidade de aplicações
Usabilidade de aplicações
 
Interface com o usuário
Interface com o usuárioInterface com o usuário
Interface com o usuário
 
3 critérios ergonômicos
3  critérios ergonômicos3  critérios ergonômicos
3 critérios ergonômicos
 
ErgoDesign e Arquitetura da Informação - Parte A
ErgoDesign e Arquitetura da  Informação - Parte AErgoDesign e Arquitetura da  Informação - Parte A
ErgoDesign e Arquitetura da Informação - Parte A
 
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
 
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdfdesigner grafico Aula 05 - Heurísticas de Nielsen.pdf
designer grafico Aula 05 - Heurísticas de Nielsen.pdf
 
Design de interação
Design de interaçãoDesign de interação
Design de interação
 
Regras de Design
Regras de DesignRegras de Design
Regras de Design
 
Usabilidade
UsabilidadeUsabilidade
Usabilidade
 
Interfaces Naturais
Interfaces NaturaisInterfaces Naturais
Interfaces Naturais
 
Usabilidade
UsabilidadeUsabilidade
Usabilidade
 
Usabilidade com Paper Prototype
Usabilidade com Paper PrototypeUsabilidade com Paper Prototype
Usabilidade com Paper Prototype
 
User experiense
User experienseUser experiense
User experiense
 
Ihm07
Ihm07Ihm07
Ihm07
 
UX Design para Desenvolvedores
UX Design para DesenvolvedoresUX Design para Desenvolvedores
UX Design para Desenvolvedores
 

Último

DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...IsabelPereira2010
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfprofesfrancleite
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfCamillaBrito19
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Ilda Bicacro
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...azulassessoria9
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médiorosenilrucks
 
CRUZADINHA - Leitura e escrita dos números
CRUZADINHA   -   Leitura e escrita dos números CRUZADINHA   -   Leitura e escrita dos números
CRUZADINHA - Leitura e escrita dos números Mary Alvarenga
 
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdfLeloIurk1
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfHELENO FAVACHO
 
A QUATRO MÃOS - MARILDA CASTANHA . pdf
A QUATRO MÃOS  -  MARILDA CASTANHA . pdfA QUATRO MÃOS  -  MARILDA CASTANHA . pdf
A QUATRO MÃOS - MARILDA CASTANHA . pdfAna Lemos
 
Discurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxDiscurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxferreirapriscilla84
 
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....LuizHenriquedeAlmeid6
 
About Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de HotéisAbout Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de Hotéisines09cachapa
 
Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?AnabelaGuerreiro7
 
Historia da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdfHistoria da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdfEmanuel Pio
 
Bloco de português com artigo de opinião 8º A, B 3.docx
Bloco de português com artigo de opinião 8º A, B 3.docxBloco de português com artigo de opinião 8º A, B 3.docx
Bloco de português com artigo de opinião 8º A, B 3.docxkellyneamaral
 
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdfApresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdfcomercial400681
 
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTailsonSantos1
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Ilda Bicacro
 

Último (20)

DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
DeClara n.º 75 Abril 2024 - O Jornal digital do Agrupamento de Escolas Clara ...
 
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdfPRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
PRÉDIOS HISTÓRICOS DE ASSARÉ Prof. Francisco Leite.pdf
 
o ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdfo ciclo do contato Jorge Ponciano Ribeiro.pdf
o ciclo do contato Jorge Ponciano Ribeiro.pdf
 
Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!Rota das Ribeiras Camp, Projeto Nós Propomos!
Rota das Ribeiras Camp, Projeto Nós Propomos!
 
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...Considere a seguinte situação fictícia:  Durante uma reunião de equipe em uma...
Considere a seguinte situação fictícia: Durante uma reunião de equipe em uma...
 
apostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médioapostila projeto de vida 2 ano ensino médio
apostila projeto de vida 2 ano ensino médio
 
CRUZADINHA - Leitura e escrita dos números
CRUZADINHA   -   Leitura e escrita dos números CRUZADINHA   -   Leitura e escrita dos números
CRUZADINHA - Leitura e escrita dos números
 
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
421243121-Apostila-Ensino-Religioso-Do-1-ao-5-ano.pdf
 
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdfPROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
PROJETO DE EXTENSÃO I - TERAPIAS INTEGRATIVAS E COMPLEMENTARES.pdf
 
A QUATRO MÃOS - MARILDA CASTANHA . pdf
A QUATRO MÃOS  -  MARILDA CASTANHA . pdfA QUATRO MÃOS  -  MARILDA CASTANHA . pdf
A QUATRO MÃOS - MARILDA CASTANHA . pdf
 
Discurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptxDiscurso Direto, Indireto e Indireto Livre.pptx
Discurso Direto, Indireto e Indireto Livre.pptx
 
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
Slides Lição 5, Betel, Ordenança para uma vida de vigilância e oração, 2Tr24....
 
About Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de HotéisAbout Vila Galé- Cadeia Empresarial de Hotéis
About Vila Galé- Cadeia Empresarial de Hotéis
 
Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?Urso Castanho, Urso Castanho, o que vês aqui?
Urso Castanho, Urso Castanho, o que vês aqui?
 
Historia da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdfHistoria da Arte europeia e não só. .pdf
Historia da Arte europeia e não só. .pdf
 
Bloco de português com artigo de opinião 8º A, B 3.docx
Bloco de português com artigo de opinião 8º A, B 3.docxBloco de português com artigo de opinião 8º A, B 3.docx
Bloco de português com artigo de opinião 8º A, B 3.docx
 
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdfApresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
Apresentação ISBET Jovem Aprendiz e Estágio 2023.pdf
 
Aula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIXAula sobre o Imperialismo Europeu no século XIX
Aula sobre o Imperialismo Europeu no século XIX
 
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptxTeoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
Teoria heterotrófica e autotrófica dos primeiros seres vivos..pptx
 
Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"Nós Propomos! " Pinhais limpos, mundo saudável"
Nós Propomos! " Pinhais limpos, mundo saudável"
 

Princípios Gerais para o Design de Interfaces

  • 1. Princípios Gerais para o Design de Interfaces
  • 2.
  • 3. INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres INTERFACE A forma como a informação é organizada e como o utilizador interage com essa informação
  • 4. INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres INTERACTIVIDADE Possíbilidade de navegar e jogar com a informação disponível (Hipertexto; Zonas Sensíveis; Links)
  • 5. INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Marlene de Oliveira Peres USABILIDADE “ Facilidade de uso” de um interface quanto mais elevada for a facilidade de uso, tanto melhor, permitindo assim diminuir os tempos de aprendizagem associados a esse interface. ? ?
  • 6. INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres UTILIZADORES Pensar como o utilizador Todas as pessoas são diferentes Devemos perder todo o tempo procurando facilitar as coisas ao utilizador. Procurar a melhor, a mais simples e a mais fácil forma de entender e retirar a informação.
  • 7. INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres UTILIZADORES 2 Erros Comuns: - Todos os utilizadores são iguais - Todos os utilizadores agem como quem desenvolveu o programa Se um interface é fácil de utilizar para um programador não significa que o seja para o utilizador Se um interface resulta com meia dúzia de utilizadores não significa que resulta com os restantes
  • 8. INTRODUÇÃO Princípios Gerais para o Desenho de Interfaces Professora: Marlene de Oliveira Peres INTERACÇÃO HOMEM-COMPUTADOR O número de utilizadores sem conhecimentos especiais de informática tem vindo a aumentar Os computadores devem estar ao serviço do homem e não o homem ao serviço do computador Todo o sucesso da interacção está centrada no utilizador
  • 9.
  • 10.
  • 11. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces COMPATIBILIDADE DE TAREFAS - As tarefas devem estar organizadas em função das tarefas dos utilizadores - Linguagem deve ser a mesma das pessoas que a estão a utilizar Ex: As funções parecidas devem ocupar a mesma área
  • 12. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces MULTITAREFA - Os sistema e as aplicações devem suportar o conceito de interromper, voltar atrás, depois continuar . (Gestão do Caos) - Tem que se deixar uma certa mobilidade às pessoas – não se pode obrigar o utilizador a ver tudo até ao fim . O utilizador não pode ficar sem alternativa. Ele tem que ter a liberdade de controlar a máquina e não a máquina controlá-lo a ele. Ex: Barras e menus de navegação
  • 13. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces CONSISTÊNCIA - As pessoas pensam por analogia - Tarefas semelhantes devem ter procedimentos semelhantes - Consistência implica coerência e que o utilizador deve intuir o modo de funcionamento de certas funções, face ao que já experimentou - Cuidado com a consistência nas acções perigosas -> para não “baralhar” o utilizador Ex: utilizar a mesma estrura de menus, nas mesmas posições ao longo de toda a navegação
  • 14. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FAMILIARIDADE - Familiaridade com os temas, as imagens, as metáforas, a sinalética que consta no reportório cultural do utilizador - Ícones que as pessoas conhecem (cores, símbolos,... ) Ex: vermelho “parar” ou “perigo” verde “avançar” Ambiente windows - escritório
  • 15. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces SIMPLICIDADE - Os sistemas devem ser simples e fáceis de usar - Só se deve dar ao utilizador o que ele precisa no momento Ex: Motores de busca
  • 16. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces MANIPULAÇÃO DIRECTA - É mais do que uma metáfora, é o utilizador poder visualizar, modificar, alterar directamente os elementos . Ex: edição de palavras nos modernos processadores de texto ou editar linhas com posição nos antigos
  • 17. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces CONTROLO - O utilizador gosta de tomar as rédeas das operações. É frustrante ser controlado por uma máquina - O utilizador gosta de definir por onde quer ir , quando quer , e quanto tempo lá vai ficar.
  • 18. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces WYSIWYG (What You See Is What You Get) - Geralmente refere-se a uma relação directa entre o que se vê representado num ecrã e um impressora. Ex: Os displays antigos não tinham essa capacidade e não permitiam visualizar os bolds, itálicos, etc. que depois saiam na impressora
  • 19. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FEEDBACK - Dar ao utilizador sinais claros de resposta da máquina , informar o utilizador do que é que está a acontecer (botões, mensagens;…) - O tempo de resposta deve ser o mais curto possível Ex: Barras de tempo dão ao utilizador uma melhor ideia do que apenas uma ampulheta do tempo que vai demorar uma tarefa A expressão “Está a carregar” ou “faltam…”
  • 20. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FLEXIBILIDADE - Permitir ao utilizador definir uma série de parâmetros relativos à interface: estilos de diálogo, cores, background , etc. - Também ao nível do tipo de inputs deve haver flexibilidade: Ex: rato e teclado; ambiente windows msn messenger
  • 21. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces TECNOLOGIA INVISÍVEL - O utilizador deve saber o mínimo possível de detalhes técnicos , de como o sistema está tecnicamente implementado - o utilizador não deve confrontado com técnicas ou palavras que desconhece em absoluto e que lhe dão uma sensação de desconforto. Ex: quando se estala um programa, o tipo de linguagem tem que ser acessível para o utilizador compreender
  • 22. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces ROBUSTEZ - O sistema deve tolerar o erro do utilizador e saber lidar com ele - O utilizador não deve ter a sensação de que aquilo que ele fizer pode destruir ou danificar qualquer coisa. Isso irá inibi-lo fortemente. Ex:Os craches do sistema devem ser mínimos
  • 23. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces PROTECÇÃO - Os sistemas devem estar protegidos contra as possíveis más acções do utilizador Ex: Devem aparecer uma série de confirmações antes de o utilizador puder apagar todos os ficheiros
  • 24. PRINCÍPIOS GERAIS PARA O DESENHO DE INTERFACES Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces FÁCIL DE USAR E FÁCIL DE APRENDER - Os sistemas devem ser simples para quem os utiliza pela primeira vez e ao mesmo tempo para os utilizadores avançados Ex: Internet Explorer Sistema Operativo Windows Multibancos
  • 25. CONCLUSÃO Professora: Marlene de Oliveira Peres Princípios Gerais para o Desenho de Interfaces Este conjunto de princípios entram às vezes em conflito. Em cada situação há que ter bom senso para poder escolher qual o peso que deve ser dado a cada princípio. A Interface é um dos factores críticos para o sucesso de um sistema. A Interface deve ser fácil de usar - não existem métodos universalmente aceites para realizar tal propósito.
  • 26.