Projeto de Interface de Sistemas

Interativos

Professor: Ademar Virgolino da Silva Netto

ademar@cear.ufpb.br
Disciplina: Informática Industrial
Design da Interação - Ciclo de Vida

MÉTODOS E TÉCNICAS

2
 Design da Interação
Ciclo de Vida
Início do
processo
Identificar necessidades/
estabelecer requisitos

(Re) Design Avaliar

Produto
Construir versão interativa

3
Design da Interação – Ciclo de Vida

IDENTIFICAR NECESSIDADES E
ESTABELECER REQUISITOS

4
Identificar necessidades e estabelecer
requisitos
• Atividade Iterativa (Engenharia de Requisitos)
 Verificações constantes
 Refinamentos sucessivos
 Requisitos claros e detalhadas

• Uso de diferentes técnicas

• Requisitos funcionais e não funcionais
 Metas de Usabilidade
 Metas e Experiência do Usuário
5
6
7
 Design da Interação
Ciclo de Vida
Identificar necessidades/
estabelecer requisitos

Coletar dados

Analisar dados

Documentar
Interpretar dados
requisitos
8
Coleta de Dados
• Reunir informações
– Relevante, Apropriada e Suficiente

• Uso de técnicas variadas (Combinação)

– Abordagem
• Quantitativa ou Qualitativa
– Baseada no que o usuário diz ou faz
– Sem ou com o uso do produto (similar)

9
Coleta de Dados

10
O que é melhor?

COLETA DE DADOS

11
Interpretar e Analisar de Dados
• Atividades simultâneas
• Iniciar o quanto antes
– Logo após a coleta

• Discutir resultados
– Variedade de perspectivas
– Conflitos (identificar e resolver)

12
 Documentar Requisitos

• Documentação diversificada
– Requisitos diferentes  Documentos diferentes
• Assim como na Engenharia de Software

• Informações especificas da interação

– Usuário (Perfil): Personas
– Tarefa: Modelo da Tarefa

13
Perfil dos Usuários
Personas

• Personagem fictício
• Arquétipo hipotético
– Representa um grupo de usuários
• Descreve um usuário (real) típico
• Criação
– Baseada na análise dos questionários e entrevistas
junto ao público alvo

14
Perfil dos Usuários
Personas

• Como criar personas?

Esqueleto das
Coleta de Dados Organização Personas Personas
dados dos dados

15
Perfil dos Usuários
Personas
• Informações relevantes
– Identidade
– Objetivos
– Habilidades
– Tarefas
– Requisitos
– Expectativas
– Status (tipo de usuário/stakeholder)
– Relacionamentos (com outras personas)
16
 17
Mais exemplos em: http://chocoladesign.com/criando-personas-no-design-de-produto
18
 Exemplo de questionário
• Informações Gerais
– Idade;
– Gênero:
• ( )Masculino ( )Feminino
– Estado civil;
– Você usa lentes corretivas?
• ( ) Sim ( ) Não

19
• Competências e Conhecimentos
– Você possui perfil no Facebook?
• ( ) Sim ( ) Não
– Com qual frequência você utiliza o Facebook?
• ( ) Diariamente ( ) Semanalmente
• ( ) Quinzenalmente ( ) Mensalmente
– Você utiliza o Facebook a partir de quais
dispositivos?
• ( ) Computador ( ) Celular ( ) Tablet ( ) Outro
________
– Você participa de grupos no Facebook?
• ( ) Sim ( ) Não
– Você já criou grupos no Facebook?
• ( ) Sim ( ) Não
20
• Personalidade
– Como você classificaria seu nível de curiosidade?
• ( ) Baixo
• ( ) Médio
• ( ) Alto
– Como você classifica seu nível de motivação para
experimentar novas tecnologias?
• ( ) Baixo
• ( ) Médio
• ( ) Alto

21
 Atividade 01
• Elaborar questionário para:
– identificar perfil do usuário;
– completar a descrição do produto, detalhes para
implementação – Requisitos funcionais e não
funcionais (resgatar).
– analisar o contexto:
• objetivo do usuário;
• contexto de aplicação (onde e como);
– Definir metas de usabilidade e de experiência do
usuário.
22
Descrição da Tarefa
Modelo Hierárquico da Tarefa

• Descrição da Tarefa
– Estrutura hierárquica
• Níveis de granularidade
– Tarefas
– Subtarefas
– Ações
– Ordem de execução
– Dependências (de acordo com formalismo adotado)

23
Descrição da Tarefa
Modelo Hierárquico da Tarefa

24
Descrição da Tarefa
Modelo Hierárquico da Tarefa

25
Descrição da Tarefa
Modelo Hierárquico da Tarefa

26
Descrição da Tarefa
Modelo Hierárquico da Tarefa

27
Descrição da Tarefa
Modelo Hierárquico da Tarefa

... ... ...

28
 Descrição da Tarefa
Modelo Hierárquico da Tarefa

... ... ... ...

29
 Descrição da Tarefa
Modelo Hierárquico da Tarefa

... ... ... ...

30
Descrição da Tarefa
Modelo Hierárquico da Tarefa

31
Descrição da Tarefa
Modelo Hierárquico da Tarefa

32
 Atividade 02
• Modelar a tarefa para sua aplicação e
submeter arquivo no sigaa.

33
Design da Interação – Ciclo de Vida

(RE)DESIGN E VERSÃO INTERATIVA

34
 Início do
processo
Identificar necessidades/
estabelecer requisitos

(Re) Design Avaliar

Produto
Construir versão interativa
Ideias!
Ter várias ideias
Organizá-las
Priorizá-las
Interação (mesmo que)
Selecioná-las
primitiva a partir do uso
de prototipos

35
36
Disponivel em: https://www.youtube.com/watch?v=_2X-VAhSFsM
37
Disponivel em: http://www.youtube.com/watch?v=CKVmDvE-6CE&hd=1

38
 Como ter boas ideias?

• Tendo várias ideias!!!

– Vendo soluções existentes
– Considere pontos de vista diferentes
– Considere a opinião do usuário
• E demais stakeholders

39
40
 Brainstorming

 Geração de ideias em grupo

 Discussões
 Problema / Solução

 Envolvidos
 Facilitador
 Usuários e demais stakeholders
 Mínimo: 2 / Máximo: 12

41
 Brainstorming
Etapas

 Geração :
 Todas as pessoas expõem suas ideias
 Ideias registradas e publicadas
 Crítica
 Destaque de ideias inadequadas
(equivocadas/impraticáveis)
 Organização
 Agrupadas por semelhança e exploradas mais a
fundo

42
 Card Sorting

 Descobrir a representação ou modelo mental

do usuário sobre um conjunto de atividades
(funções para um programa)

 Sessões individuais:
 Numero mágico!
 5? 6?
 10? 15?

http://www.nngroup.com/articles/card-sorting-how-many-users-to-test 43
 Card Sorting
Etapas

 Funções descritas em pedaços de papel

 Numerados no verso
 Papéis espalhados em uma mesa
 Evitando qualquer tipo de agrupamento inicial
 Usuário organiza os papéis em grupos
 Critérios próprios
 Os grupos devem ser nomeados
 Associações devem ser feitas por proximidade
 Alguns papéis podem sobrar (lixo)

44
Card Sorting
Exemplo

45
 Card Sorting
Resultado
• Análise das igualdades e diferenças
• Grupos diferentes de usuários

46
http://sixrevisions.com/usabilityaccessibility/card-sorting/
 Diagrama de Afinidades

 Organizar grande quantidade de itens em

grupos lógicos
 Agrupar funções de um produto em
desenvolvimento
 Projetistas e usuários trabalham juntos
 Obter um consenso
 Atividade coletiva

47
 Diagrama de Afinidades
Etapas

1. Definição inicial de funções

2. Agregação de funções adicionais
3. Agrupar funções
4. Nomear grupo de funções
5. Diagrama de afinidades

48
 PROTÓTIPOS
Interações contínuas
Prototipagem evolutiva

49
 O que é um Protótipo?

• Representação gráfica, não

necessariamente funcional, de um
sistema em fase de Design (ou re-design)
– Exploração de ideias
– Antes de investimento
• Tempo
• Dinheiro

50
http://grouplab.cpsc.ucalgary.ca/saul/681/1998/prototyping/survey.html#sketch
Protótipos
Classificação
 Profundidade/Abrangência
 Abrangência de funcionalidade contempladas
 Profundidade das funcionalidades
contempladas

 Fidelidade
 Nível de semelhança com o produto final
 Aparência e Interação

51
Profundidade e Abrangência
Protótipo Vertical ou Horizontal

52
Fidelidade

• Baixa-Fidelidade
– Rudimentares Funionalidades

• Média-Fidelidade
– Híbridos
Aparência
• Alta-Fidelidade
– Executáveis Implementação

53
 Baixa-Fidelidade

 Representações gráficas rudimentares do

objeto em desenvolvimento
 Baixo investimento de tempo e recursos
 Pouca habilidade técnica
 Adequado na fase inicial do desenvolvimento
 Especificação dos requisitos
Funionalidades

Aparência

Implementação
54
 Baixa-Fidelidade

• Vantagens
– Melhora a comunicação entre usuários e projetistas
– Facilita a compreensão de conceitos do contexto de uso
– Possibilita a exploração de várias alternativas de projeto
• Sem se ater a detalhes operacionais e/ou estéticos do sistema
• Desvantagens
– Refletem pouca ou nenhuma funcionalidade do sistema
– Ausência de interação direta

55
 Baixa-Fidelidade
Exemplos

http://www.nngroup.com/topic/prototyping/
56
http://grouplab.cpsc.ucalgary.ca/saul/681/1998/prototyping/survey.html#sketch
 Baixa-Fidelidade
Técnicas

 Sketch
 Representações gráficas de telas
 Storyboards
 Representações gráficas de cenários
 PICTIVE (Plastic Interface for Collaborative Technology Initiatives)
 Maquetes em papel (plástico) e lápis
 Interação registrada em vídeo

57
 Baixa-Fidelidade
Sketch

• Feitos à mão (pelo projetista ou usuário)

– Concretizar ideias iniciais

58
 Baixa-Fidelidade
Storyboards

• Detalhamento de um
cenário de uso
especificado para o
sistema
• Sequência de
desenhos
representando
elementos do
contexto (usuário,
equipamentos, móveis, etc)

59
Baixa-Fidelidade
Storyboards

60
 Baixa-Fidelidade
PICTIVE

• Câmera de vídeo
• Coleção de Objetos
• Material de escritório
– Papel, Post-It
– Lapis, Canetas, Marca texto, tesoura, etc.
• Material preparado pelos desenvolvedores
– Barras de menu, Caixas de diálogos, Ícones, etc

61
Baixa-Fidelidade
PICTIVE

62
 Média-Fidelidade

• Implementação computadorizada de uma

aplicação limitada funcionalmente, contendo
apenas as funções essenciais para avaliar
alguns cenários específicos
– Agrega características de baixa-fidelidade e de
alta-fidelidade
• Unir as vantagens
Funionalidades

Aparência

Implementação
63
 Média-Fidelidade

• Utilização de uma técnica de prototipagem de

baixa-fidelidade (sketch, storyboards, etc) com
um suporte computacional, de modo a
possibilitar a simulação de seu
comportamento tal como um protótipo de
alta-fidelidade, favorecendo a prática da
prototipagem exploratória e evolutiva

64
 Média-Fidelidade
Vantagens

 Baixa-fidelidade
 Rapidez e facilidade de construir e modificar
 Baixo investimento de tempo e recurso
 Pouca habilidade técnica específica por parte dos
projetistas
 Possibilidade de explorar diferentes alternativas de projeto
 Melhoria na comunicação da equipe de projeto
 Alta- fidelidade
 Interação direta entre o usuário e o sistema
 Manutenção do histórico do projeto
 Reuso de partes do projeto
 Testes de usabilidade e de treinamento
65
 Média-Fidelidade
Ferramentas de apoio

• Editores de HTML
• Microsoft Power Point
• Microsoft Visio
• SILK (Landay & Myers, 1995)
• DENIM (Lin et. al., 2002)
• DEMAIS (Bailey & Konstan, 2003)
• SketchiXML (Coyette & Vanderdonckt, 2005)

66
Média-Fidelidade
Exemplos

67
 Média-Fidelidade
Exemplos

68
http://users.polytech.unice.fr/~joffroy/enseignement/si5/plasticite/index.html
 Alta-Fidelidade

 Representações executáveis (código), construídos

com o uso de uma linguagem de programação (ou
ferramentas de apoio) e contêm as principais
funcionalidades presentes na interface do futuro
sistema
 Aspectos estéticos
Funionalidades
 padrão, fonte, cor, tamanhos de botões, etc.
 Componentes de navegação Aparência
 Utilidade Implementação
 Fases finais do processo de DI
 Treinamento e Testes de usabilidade

69
 Alta-Fidelidade
Vantagens e Desvantagens

 Vantagens
 Interação direta do usuário com a solução
proposta
 O código pode ser aproveitado na interface final
 Desvantagens
 Difíceis de serem construídos e modificados
 Os projetistas resistentes à mudanças
 Pode induzir no usuário uma sensação do sistema
pronto
70
Alta-Fidelidade
Exemplos

71
DÚVIDAS?

72
Leitura de referência
• Preece, J. (2005).
– Capítulo 6: O Processo do Design da Interação. Design de Interação: Além da
Interação Homem-Computador.
– Capítulo 7: Identificando Necessidades e Estabelecendo Requisitos
– Capítulo 8: Design, Prototipação e Construção
• Cybis, W. et al (2007).
– Capítulo3: O ciclo da engenharia da usabilidade.
– Capítulo 4: Técnicas de análise contextual.
– Capítulo 5: As técnicas de concepção.
• Nielsen (1993);
– Capitulo 4: The Usability Engineering Lifecycle. Usability Engineering
• Mayhew (1999)
– The Usability Engineering Lifecycle: A Practitioner's Handbook for User
Interface Design (Interactive Technologies)

73
Leitura de apoio
Prototipagem (parte 1)
• Berkun, S. The Art of UI Prototyping. Novembro de 2000. Disponível em:
http://www.scottberkun.com/essays/essay12.htm. Acesso em: Janeiro de 2006.

• Coyette, A., Vanderdonckt, J. A Sketching Tool for Designinf Anyuser, Anyplataform,

Anywhere User Interfaces. In INTERACT 2005, p. 550 – 564, 2005.

• Engelberg, D., A. Seffah. A Framework for Rapid Mid–Fidelity Prototyping of Web Sites. In:
IFIP 17th Computer Congress: Usability. Gaining a Competitive Edge Montréal, Québec,
Canadá, p. 203–215, 2002.

• Landay, J. A., Myers, B. A. Interactive Sketching for the Early Stages of User Interface
Desing. Proceedings of the SIGCHI conference on Human factors in computing systems,
p.43-50, 1995.

• Leone, P., Gillihan, D., & Rauch, T. Web-based prototyping for user sessions: Medium-
fidelity prototyping. Proceedings of Society for Technical Communications 44th Annual
Conference, p. 231-234, 2000. 74
Leitura de apoio
Prototipagem (parte 2)
• Lin, J., Thomsen, M., Landay, J. A. A Visual Language for Sketching Large and Complex Interactive
Designs. CHI-CONFERENCE, USA, Abril de 2002.

• Maguire, M. Methods to Support Human-Centred Design. International Journal of Human Computer

Studies, 2001.

• Rettig, M. Prototyping for Tiny Fingers. Communications of the ACM, Vol. 37, N° 4, 1994.

• Rosson, M.B., Maass, S., Kellog, W.A. Designing for designers: an analysis of design practice in the
real world. Proceedings of the SIGCHI/GI 1987, ACM Press, p. 137 – 142, 1986.

• Rudd, J., Stern, K., Isensee, S. Low vs. High-fidelity Prototyping Debate. Interactions, Vol.3, Nº 1,
Janeiro de 1996.

• Uceta F.A., Dixon M.A. and Resnick M.L. Adding interactivity to paper prototypes. Proceedings of
the Human Factors and Ergonomics Society 42nd Annual Conference, Human Factors and Ergonomics Society,
1998. 506-510

75
Ferramentas
Prototipagem
• Prototipagem
– http://iplotz.com/
– http://pencil.evolus.vn/
– http://www.balsamiq.com/products/mockups
– https://gomockingbird.com/
– https://pidoco.com/
– http://www.foreui.com/
– https://play.google.com/store/apps/details?id=com.welant.mockups&
hl=fr
– http://www.uisketcher.com/
– Outras em:
• http://c2.com/cgi/wiki?GuiPrototypingTools;
• http://www.inspireux.com/2010/06/28/50-sketching-resources-for-user-
experience-designers/
• Storyboard
– http://www.storyboardthat.com/
– http://www.cranksoftware.com/storyboard

76