Faculdade de Tecnologia SENAC Pelotas Interface Homem Computador 3º Semestre

Transcrição

1 Faculdade de Tecnologia SENAC Pelotas Interface Homem Computador 3º Semestre Material 5 Metodologias de Desenvolvimento de Interfaces Prof. Luthiano Venecian

2 Introdução o Como conceber e implementar a interface de usuário em sistemas computacionais? 2

3 Introdução o Como conceber e implementar a interface de usuário em sistemas computacionais? o Atividade Multidisciplinar o Várias Competências (design gráfico, programação visual, marketing, programação,...) o Várias abordagens (processos) 3

4 Objetivo o Entender o que é projeto de interface de usuário o Conhecer boas práticas para o desenvolvimento de interfaces o Conhecer o processo de desenvolvimento de interface de usuário o Estabelecer metas de usabilidade o Facilidade de aprendizado, eficiência de uso, facilidade de recordação, segurança no uso, satisfação do usuário. 4

5 Projeto de Interface de Usuário 5

6 Projeto de Interface de Usuário o Como fazer? o Quando fazer? o Quem envolver? o O que produzir? o Como avaliar o que foi feito? 6

7 Projeto de Interface de Usuário o Alguns conceitos o Processo o Etapas o Atividades o Envolvidos o Artefatos 7

8 Projeto de Interface de Usuário o Como fazer? Através de um processo o Quando fazer? Etapas de execução o Quem envolver? Pessoas envolvidas o O que produzir? Artefatos o Como avaliar o que foi feito? Satisfação 8

9 Projeto de Interface de Usuário o Como fazer? Através de um processo o Definindo uma receita de bolo o Empregando dicas, diretrizes (guidelines), boas práticas ou recomendações o Identificando etapas e atividades (integradas ao processo de software) o Realizando as atividades pré-definidas o Avaliando o que foi feito! 9

10 Boas práticas para o design de interfaces 10

11 Boas práticas para o design de interfaces 1. Dicas 2. Diretrizes (guidelines) o Guidelines não deve ser entendido como receita de design, mas sim como um conjunto de princípios norteadores do design. o Preece et al.(1994) argumenta que o verdadeiro sentido das guidelines é o de princípios em alto nível, largamente aplicáveis. A seguir segue algumas. 11

12 Boas práticas para o design de interfaces Diretrizes (guidelines) cont. o Falar a língua do usuário Língua deve ser entendida de forma ampla, no contexto sócio-cultural estabelecido da população de usuários. o Reduzir a carga cognitiva Isso significa que o usuário não deve ter que se lembrar de grande quantidade de informação para usar bem o sistema.

13 Boas práticas para o design de interfaces Diretrizes (guidelines) cont. o Criar para o erro Pressupõe a observação geral sobre design de que mesmo que se tenha feito o melhor sistema possível, usuários tanto os novatos quanto os experientes cometerão erros ao usá-lo. o Manter consistência o Os principais objetos de interesse do usuário devem estar presentes na tela e seus atributos mais importantes visíveis.

14 Boas práticas para o design de interfaces 3. Recomendações o Uso de cores o Fornecem dimensão extra em termos de representatividade em interfaces o Podem destacar informações ou funções o Erros comuns: uso demasiado em uma única tela, uso de cores para comunicar uma função. 14 o Apoio ao usuário o Mensagens produzidas pelo sistema (diálogo) o Sistema de Ajuda (suporte) o Documentação (informação)

15 Metodologia de Desenvolvimento de Interfaces de Usuário 15

16 Definindo um processo o Atividades necessárias: o Quem? o O que? o Como? o Quando? 16

17 Definindo um processo o Deve ser interativo e participativo. o Atividades: o Perfil de Usuário: Entender quem é o usuário do sistema (capacidade/limitações) o Análise de Tarefas: Qual permissões o usuário terá no sistema o Prototipação: Desenvolver protótipos experimentais 17 o Avaliação: Testar protótipos com usuários.

18 Projeto de Desenvolvimento de Interface de Usuário 18

19 Analisar o Perfil do Usuário (1/2) o Identificar e caracterizar os usuários o Papel: funções que executam; o Familiaridade com o computador: suportar curva de aprendizagem (iniciante/experiente) o Nível de conhecimento no domínio da aplicação (novato/especialista) o Freqüência no uso da aplicação (ocasional/frequente) o Contexto sócio-cultural (idiomas, metáforas) 19

20 Analisar o Perfil do Usuário (2/2) o Técnicas para observar usuários: 20 o Entrevistas o Identificar público alvo o Preparar a entrevista: agendar e elaborar questões o Conduzir entrevista o Finalizar o Analisar resultados o Questionários o Entrevistas em massa o Formulários de questões (papel ou on-line) o Observação direta o Observar usuário na realização de tarefas o Auxiliar no modelo de tarefas o Validação de protótipos

21 Analisar e modelar tarefas do usuário o Atividade em grupo o Definir um sistema-alvo o Elaborar um questionário de levantamento inicial de informações sobre os usuários o Para analise de usuário envolva os seguintes fatores: 21 o Nível de familiaridade com computadores (iniciante, intermediário ou experiente) o Nível de familiaridade com o domínio da aplicação (novato, intermediário ou especialista) o Freqüência de Uso (ocasional ou freqüente) o Plataforma Operacional Preferida

22 Descrevendo as tarefas o Foco central nas tarefas executadas pelo usuário o Objetivo: Fornecer ao designer a visão dos usuários das tarefas que eles precisam realizar no sistema. o Técnicas: o Cenários de Uso o Storyboards o Diagrama de Casos de Uso o Diagrama de Atividades 22

23 Cenários de Uso (1/2) o Técnica proposta por Caroll (1995) que usa descrições em forma de narrativa do que as pessoas fazem e podem/devem fazer ao utilizar o sistema interativo. o Pode ser utilizado para representar situações desejadas (sistema em desenvolvimento) ou reais (sistema em uso) o Elementos 23 o Cena o Agente (ou ator) o Tarefa o Contexto o Ações

24 Cenários de Uso (2/2) Exemplo 24

25 Storyboards o São desenhos das telas que representam estados da interface, já com a especificação de seus elementos (textos, gráficos, widgets). o Eles podem só conter os esboços das telas individuais, mas também podem mostram a seqüência (ou parte dela) da interação entre as telas (modelo de tarefas) 25

26 Diagrama de Caso de Uso UML Exemplo 26

27 Diagrama de Atividades UML Exemplo 27

28 28 Prototipação

29 Prototipação o É fazer uma maquete do produto do design. o As maquetes servem para representar as características centrais do design e estimular respostas e reações dos usuários à proposta do designer. o Todos os interessados devem avaliar as maquetes (usuários, clientes, etc). 29 o Depois de usada a maquete deve ser descartada. Não façam dela o sistema.

30 Tipos de Prototipação o Uma série de desenhos ( considere os feito a mão) que caracterizem a interação com a interface do sistema. o Uma casca caracterizando a interação com a interface do sistema. A intensão é exibir as características críticas que se quer discutir. o Ferramentas de prototipação o Páginas em HTML Demonstração: 30 pe.htm

31 Etapas para criação de um Protótipo o Crie um cenário o Identifique os elementos e tarefas o Crie um fluxo consecutivo da sequência de interação o Inclua textos, questões ou comentários se necessário o Faça iterações para incluir alterações, se as houver 31

32 Exemplo de Prototipação o Prototipação em papel: o k 32

33 Atividade Avaliativa IV o Pesquise ferramentas: o Wireframe o Prototipação o Exemplos: o o o o o o Faça um protótipo de uma aplicação com 2 telas que empregue os conceitos de usabilidade estudados (aborde pelo menos 2 33 dos aspectos justifique).