Processos para o Design da Interface de Usuário

26
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 – [email protected]

Transcript of Processos para o Design da Interface de Usuário

Page 1: Processos para o Design da Interface de Usuário

PROJETO DE INTERFACE DE USUÁRIO[princípios de projeto]

[boas práticas]

[modelos de processo]

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 2: Processos para o Design da Interface de Usuário

Princípios de projeto

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 3: Processos para o Design da Interface de Usuário

• 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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Princípios de Projeto

Page 4: Processos para o Design da Interface de Usuário

• Exemplo: Facilidade de Recuperação• Mecanismos:

• Confirmação de Ações Destrutivas

• Disponibilidade de Recursos do tipo Desfazer

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Princípios de Projeto

Page 5: Processos para o Design da Interface de Usuário

• 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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Princípios de Projeto – Apresentação da Informação

Page 6: Processos para o Design da Interface de Usuário

• 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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Princípios de Projeto – Apresentação da Informação

[Horário das Partidas] [Velocidade dos Jogadores]

Page 7: Processos para o Design da Interface de Usuário

• 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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Princípios de Projeto – Apresentação da Informação

Page 8: Processos para o Design da Interface de Usuário

Boas práticas

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 9: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 10: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 11: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 12: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 13: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 14: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 15: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 16: Processos para o Design da Interface de Usuário

Diretrizes de Shneiderman• Reverter ações

• O deve ter a possibilidade de reverter uma ação garatinda pelo sistema.

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 17: Processos para o Design da Interface de Usuário

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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 18: Processos para o Design da Interface de Usuário

Diretrizes de Shneiderman• Redução da necessidade de memorização

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 19: Processos para o Design da Interface de Usuário

processoComo desenvolver a interface?

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Page 20: Processos para o Design da Interface de Usuário

• 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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Definindo um Processo

Page 21: Processos para o Design da Interface de Usuário

• 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 ComputadorProfa Tatiana Aires Tavares – [email protected]

Definindo um Processo

Page 22: Processos para o Design da Interface de Usuário

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Definindo um Processo

Análise de Usuário

Análise de Domínio

Protótipos

Avaliação

Page 23: Processos para o Design da Interface de Usuário

ProtótipoExecutável

ProtótipoDe Projeto

Produzir um Protótipo de Projeto em papel

Produzir umProtótipo dinâmicoDe projeto

Avaliar o projetoCom usuários

Implementação

Avaliar projetoCom usuários

Analisar e compreender as Atividades dousuário

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Definindo um Processo

(Sommerville, 2003)

Page 24: Processos para o Design da Interface de Usuário

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Definindo um Processo

Page 25: Processos para o Design da Interface de Usuário

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

Definindo um Processo

(Processo do CESAR: http://design.cesar.org.br/blog/?p=1)

Page 26: Processos para o Design da Interface de Usuário

Disciplina de Interação Humano ComputadorProfa Tatiana Aires Tavares – [email protected]

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.