PROJETO DE
INTERFACE DE
USUÁRIO
[princípios de projeto]
[boas práticas]
[modelos de processo]
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Princípios de projeto
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
• Os princípios de projeto auxiliam na construção de
interfaces de usuário (diretrizes, guias,
recomendações).
• Além de aspectos funcionais, o projetista (de
interface) deve considerar aspectos não-
funcionais, bem como, as capacidades dos
usuários.
• Os princípios de projeto devem guiar a construção
de interfaces através de um modelo de processo.
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Princípios de Projeto
• Exemplo: Facilidade de Recuperação
• Mecanismos:
• Confirmação de Ações Destrutivas
• Disponibilidade de Recursos do tipo Desfazer
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Princípios de Projeto
• Um das metas de qualquer sistema interativo é
fornecer algum meio de apresentar informações aos
usuários
• Apresentação Direta ou Bruta (Ex.: uma tabela no Excell)
• Modos de Apresentação (utilização de recursos gráficos)
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Princípios de Projeto – Apresentação
da Informação
• Informação Estática X Informação Dinâmica
• Informação Estática
• Inicializada no início da sessão e não sofre alterações.
• Informação Dinâmica
• Informações que podem ser alteradas ou atualizadas no decorrer da
interação.
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Princípios de Projeto – Apresentação
da Informação
[Horário das Partidas] [Velocidade dos Jogadores]
• O usuário está interessado em informações
precisas ou nas relações entre diferentes valores de
dados?
• Com que rapidez os valores das informações são
modificados? A mudança dessa ser informada
imediatamente aos usuários?
• As informações que devem ser exibidas são
textuais, numéricas ou gráficas?
• Os valores relativos são importantes para o
entendimento da informação?
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Princípios de Projeto – Apresentação
da Informação
Boas práticas
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Boas Práticas
• Dicas (experiência)
• Diretrizes (guidelines)
• W3C – acessibilidade
• TV Digital – BBC
• Recomendações
• Shneiderman (1988)
• Nielsen (1995)
• Norman (2008)
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
1. Manter a consistência
2. Usabilidade universal
3. Feedback
4. Projetar os diálogos
5. Prevenção de erros
6. Reverter ações
7. Usuário no controle
8. Redução da necessidade de memorização
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Mater a consistência
• Por exemplo, utilize a mudança de cores para mostrar uma
modificação no status do sistema.
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Usabilidade Universal (design universal)
• Lembrar que usuários com caracteríticas/limitações diferentes
podem ser “seus” usuários.
• Lembrar que aplicações podem viabilizar tarefas para pessoas
com alguma limitação (temporária/permanente)
• http://www.youtube.com/watch?v=NeB0BH8rAc8
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Feedback
• Usuários deve estar sempre informado sobre o status do sistema.
• Status de conexão
• Usuários
• Informação
• Funcionamento
• Execução de ações
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Projetar o Diálogo
• O sistema deve “falar” a língua do usuário, ou seja, utilizar
palavras, frases e conceitos familiares para ele. O sistema deve
utilizar diálogos completos [início-meio-fim].
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Prevenção de erros
• O sistema deve facilitar e controlar atividades dos usuários,
especialmente, entrada de dados.
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Reverter ações
• O deve ter a possibilidade de reverter uma ação garatinda pelo
sistema.
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Usuário no controle
• Lembrar que a interação com um sistema é uma atividade de
exploração e que os usuários devem se sentir seguros e no
comando dessa exploração.
• Mapas
• Localizador
• Ajuda
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Diretrizes de Shneiderman
• Redução da necessidade de memorização
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
processo
Como desenvolver a interface?
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
• Como conceber e implementar a interface de usuário
em sistemas computacionais?
• Atividade Multidisciplinar
• Várias Competências (design gráfico, programação visual,
marketing, programação,...)
• Várias abordagens
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Definindo um Processo
• O processo de projeto de IU é um processo interativo
e participativo.
• Atividades:
• Análise de Usuário. Entender quem é o usuário
(características/limitações)
• Análise de Domínio. . Entender o que o usuário vai fazer no
sistema (tarefas de usuário).
• Prototipação. Desenvolver protótipos experimentais.
• Avaliação. Testar protótipos com usuários (feedback de
usuário).
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Definindo um Processo
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Definindo um Processo
Análise de
Usuário
Análise de
Domínio
Protótipos
Avaliação
Protótipo
Executável
Protótipo
De Projeto
Produzir um
Protótipo de
Projeto em papel
Produzir um
Protótipo dinâmico
De projeto
Avaliar o projeto
Com usuários
Implementação
Avaliar projeto
Com usuários
Analisar e com
preender as
Atividades do
usuário
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Definindo um Processo
(Sommerville, 2003)
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Definindo um Processo
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Definindo um Processo
(Processo do CESAR: http://design.cesar.org.br/blog/?p=1)
Disciplina de Interação Humano Computador
Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
Referências:
CAP10: Interaction Design (STONE, JARRET, WOODROFE, MINOCHA:
User Interface Design and Evaluation. Ed. Elsevier, 2005 (704p).)
Design Centrado no Usuário. Disponível em:
http://design.cesar.org.br/blog/?p=1 Última atualização: 7 de novembro de
2007.

Processos para o Design da Interface de Usuário

  • 1.
    PROJETO DE INTERFACE DE USUÁRIO [princípiosde projeto] [boas práticas] [modelos de processo] Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 2.
    Princípios de projeto Disciplinade Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 3.
    • Os princípiosde projeto auxiliam na construção de interfaces de usuário (diretrizes, guias, recomendações). • Além de aspectos funcionais, o projetista (de interface) deve considerar aspectos não- funcionais, bem como, as capacidades dos usuários. • Os princípios de projeto devem guiar a construção de interfaces através de um modelo de processo. Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Princípios de Projeto
  • 4.
    • Exemplo: Facilidadede Recuperação • Mecanismos: • Confirmação de Ações Destrutivas • Disponibilidade de Recursos do tipo Desfazer Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Princípios de Projeto
  • 5.
    • Um dasmetas de qualquer sistema interativo é fornecer algum meio de apresentar informações aos usuários • Apresentação Direta ou Bruta (Ex.: uma tabela no Excell) • Modos de Apresentação (utilização de recursos gráficos) Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Princípios de Projeto – Apresentação da Informação
  • 6.
    • Informação EstáticaX Informação Dinâmica • Informação Estática • Inicializada no início da sessão e não sofre alterações. • Informação Dinâmica • Informações que podem ser alteradas ou atualizadas no decorrer da interação. Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Princípios de Projeto – Apresentação da Informação [Horário das Partidas] [Velocidade dos Jogadores]
  • 7.
    • O usuárioestá interessado em informações precisas ou nas relações entre diferentes valores de dados? • Com que rapidez os valores das informações são modificados? A mudança dessa ser informada imediatamente aos usuários? • As informações que devem ser exibidas são textuais, numéricas ou gráficas? • Os valores relativos são importantes para o entendimento da informação? Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Princípios de Projeto – Apresentação da Informação
  • 8.
    Boas práticas Disciplina deInteração Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 9.
    Boas Práticas • Dicas(experiência) • Diretrizes (guidelines) • W3C – acessibilidade • TV Digital – BBC • Recomendações • Shneiderman (1988) • Nielsen (1995) • Norman (2008) Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 10.
    Diretrizes de Shneiderman 1.Manter a consistência 2. Usabilidade universal 3. Feedback 4. Projetar os diálogos 5. Prevenção de erros 6. Reverter ações 7. Usuário no controle 8. Redução da necessidade de memorização Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 11.
    Diretrizes de Shneiderman •Mater a consistência • Por exemplo, utilize a mudança de cores para mostrar uma modificação no status do sistema. Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 12.
    Diretrizes de Shneiderman •Usabilidade Universal (design universal) • Lembrar que usuários com caracteríticas/limitações diferentes podem ser “seus” usuários. • Lembrar que aplicações podem viabilizar tarefas para pessoas com alguma limitação (temporária/permanente) • http://www.youtube.com/watch?v=NeB0BH8rAc8 Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 13.
    Diretrizes de Shneiderman •Feedback • Usuários deve estar sempre informado sobre o status do sistema. • Status de conexão • Usuários • Informação • Funcionamento • Execução de ações Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 14.
    Diretrizes de Shneiderman •Projetar o Diálogo • O sistema deve “falar” a língua do usuário, ou seja, utilizar palavras, frases e conceitos familiares para ele. O sistema deve utilizar diálogos completos [início-meio-fim]. Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 15.
    Diretrizes de Shneiderman •Prevenção de erros • O sistema deve facilitar e controlar atividades dos usuários, especialmente, entrada de dados. Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 16.
    Diretrizes de Shneiderman •Reverter ações • O deve ter a possibilidade de reverter uma ação garatinda pelo sistema. Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 17.
    Diretrizes de Shneiderman •Usuário no controle • Lembrar que a interação com um sistema é uma atividade de exploração e que os usuários devem se sentir seguros e no comando dessa exploração. • Mapas • Localizador • Ajuda Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 18.
    Diretrizes de Shneiderman •Redução da necessidade de memorização Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 19.
    processo Como desenvolver ainterface? Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br
  • 20.
    • Como concebere implementar a interface de usuário em sistemas computacionais? • Atividade Multidisciplinar • Várias Competências (design gráfico, programação visual, marketing, programação,...) • Várias abordagens Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Definindo um Processo
  • 21.
    • O processode projeto de IU é um processo interativo e participativo. • Atividades: • Análise de Usuário. Entender quem é o usuário (características/limitações) • Análise de Domínio. . Entender o que o usuário vai fazer no sistema (tarefas de usuário). • Prototipação. Desenvolver protótipos experimentais. • Avaliação. Testar protótipos com usuários (feedback de usuário). Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Definindo um Processo
  • 22.
    Disciplina de InteraçãoHumano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Definindo um Processo Análise de Usuário Análise de Domínio Protótipos Avaliação
  • 23.
    Protótipo Executável Protótipo De Projeto Produzir um Protótipode Projeto em papel Produzir um Protótipo dinâmico De projeto Avaliar o projeto Com usuários Implementação Avaliar projeto Com usuários Analisar e com preender as Atividades do usuário Disciplina de Interação Humano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Definindo um Processo (Sommerville, 2003)
  • 24.
    Disciplina de InteraçãoHumano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Definindo um Processo
  • 25.
    Disciplina de InteraçãoHumano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Definindo um Processo (Processo do CESAR: http://design.cesar.org.br/blog/?p=1)
  • 26.
    Disciplina de InteraçãoHumano Computador Profa Tatiana Aires Tavares – tatiana@lavid.ufpb.br Referências: CAP10: Interaction Design (STONE, JARRET, WOODROFE, MINOCHA: User Interface Design and Evaluation. Ed. Elsevier, 2005 (704p).) Design Centrado no Usuário. Disponível em: http://design.cesar.org.br/blog/?p=1 Última atualização: 7 de novembro de 2007.