SlideShare uma empresa Scribd logo
1 de 89
Baixar para ler offline
Design de Interfaces de Usuário
Parte 1
Prof. André Constantino da Silva
IHC
Baseado nos slides da
Prof. Dr. Heloísa Vieira da Rocha
• Compreender a importância de centrar o
design no usuário
• Conhecer os princípios do Projeto Centrado
no Usuário
• Conhecer técnicas que auxiliam a projetar
para o usuário
Objetivo das Aulas
Introdução
• Design é a concepção de um produto
(máquina, utensílio, mobiliário,
embalagem, publicação etc.),
especialmente no que se refere à sua
forma física e funcionalidade
Introdução
• O que eu preciso saber para desenvolver
uma aplicação com boa usabilidade?
Conhecimento
Introdução
• O que eu preciso saber para desenvolver
uma aplicação com boa usabilidade?
Conhecimento
– Usuários
– Funcionalidades
– Tecnologias que será utilizada para
desenvolver
6
Modelo Mental (MM)
Aparência Física
Operação
Forma de responder
Help e manuais
7
• O entendimento é fraco
• Especificado imprecisamente
• Cheio de inconsistências
• Cheio de “buracos” e artimanhas
• São incompletos
• A habilidade das pessoas para “executar” seus modelos mentais é limitada
pelos mecanismos perceptual e cognitivo
• Modelos mentais são instáveis pelas próprias restrições e interferências da
memória: as pessoas esquecem detalhes do sistema que estão usando,
artefatos e operações similares são confundidos
• Modelos mentais não são “científicos”: as pessoas mantêm comportamento
supersticioso em seus modelos
• Freqüentemente fazem operações físicas extras em vez de planejamento
mental que possibilite evitar essas ações (Norman, 1983)
Modelo Mental - Características
8
Modelo Mental – Uniforme?
O modelo conceitual entre os usuários é o mesmo?
9
• Para aprender a programar um computador você é instruído
em um paradigma de programação
– Paradigma procedimental: C, Pascal
• Durante o curso, você aprende outros paradigmas
– Paradigma orientado a objetos: Java
– E existem outros: Paradigma funcional (Lisp) e Paradigma lógico
(Prolog)
• Dificuldade de aprendizado de um novo paradigma ocorre
– o seu Modelo Mental é voltado para o primeiro paradigma que
aprende e você o usa para compreender o novo paradigma
Modelo Mental - Evolução
10
• Observação
• Instrução
• Inferência
Modelo Mental - Evolução
• Os usuários sabem todos os requisitos da
aplicação?
• Diferentes papeis dos usuários
• Contextos
E mais problemas...
• Assegurar que a Imagem do Sistema seja
consistente com o MM dos usuários
– MM do Designer coincidir com MM do Usuário
E qual o seu papel como designer?
Necessário conhecer o
usuário e as tarefas
13
Design Centrado no Usuário (UCD)
Quem?
Quais tarefas?
Funcionalidades?
Utilização.
Propostas
Protótipos
Testes com usuários
•Abordagem que coloca o usuário como centro do
processo de design e desenvolvimento
• É o processo de design em que as
necessidades, desejos e limitações do ser
humano são levados em conta durante todas as
fases de concepção e desenvolvimento de um
projeto
• O objetivo do design de interface de usuário é
tornar a interação do usuário o mais simples e
eficiente possível, em termos de realização dos
objetivos do usuário
Design Centrado no Usuário
• Definido na ISO Human-centred design for interactive systems
(ISO 9241-210, 2010)
• 6 princípios chaves:
– O design da interface é criado a partir do conhecimento explícito
dos usuários, tarefas e ambiente
– Usuários são envolvidos em todo o processo de design e
desenvolvimento
– O projeto é dirigido e refinado por meio avaliações centradas no
usuário
– O processo é iterativo
– O design deve focar a experiência do usuário como um todo
– A equipe deve ser multidisciplinar
Design Centrado no Usuário
16
Design Participativo
 Design com usuários e não para os
usuários.
 Incorpora o usuário como membro da
equipe de projeto, participando de todas
as etapas.
• Melhora o entendimento do trabalho
do usuário e combina o conhecimento
dos diversos participantes.
17
Design Participativo
18
Engenharia Cognitiva
• Enfatiza a modelagem de uma
atividade na forma como ela é
entendida pelo usuário.
• Visa facilitar a realização da tarefa
através de um bom modelo conceitual
do sistema.
• Dificuldade de mapeamento de termos psicológicos para mecanismos
físicos: Golfo da Execução e Golfo da Avaliação.
Golfo da execução: Como eu executo a tarefa....?
Golfo da Avaliação: Consegui...?
19
Modelo Estrela
Onde e como é necessário
Tarefas automatizadas
Características e Requisitos
Métricas e metas
de usabilidade
Representação do projeto para
Comunicação entre a equipe
Materializar o projeto
Facilitar a avaliação prévia
Ocorre entre todas as etapas
Avaliando artefatos
gerados em cada
20
Engenharia de Usabilidade
Compreensão do usuário e atividades
Funcionalidades e Contexto de trabalho
Evolução do usuário
Sistemas similares
Metas e métricas de usabilidade
Explorar possíveis soluções de projeto
Design Participativo
Avaliações Heurísticas / Guidelines
Protótipos e Testes com Usuários
– Qual o ponto de partida?
– Quais as informações necessárias?
– Usuário, Sistema, Tarefa? O que é importante e
como obter essas informações?
– Quais artefatos da ES e IHC poderiam ajudar nessa
etapa?
21
Desenvolvimento
22
– Como a aplicação vai auxiliar nas tarefas do
usuário?
– Como planejar o funcionamento da
aplicação?
– Que artefatos podem auxiliar nessa etapa?
23
Usuário – Características
24
Introdução
Integração
ES/IHC
Desenvolvimento de Sistemas Interativos
no usuário
(aspectos de
interação)
Interação Humano-
Computador (IHC)
Engenharia de
Software (ES)
no sistema
(tecnologia)
foco foco
25
– Qual o ponto de partida?
– Contexto Exemplo:
Você e seus colegas montaram uma empresa de
desenvolvimento de software educacionais. Ao ouvir o
professor comentar que existem poucos softwares para o
Tablet PC, vocês resolveram inovar e desenvolver softwares
para este dispositivo. Como todos os participantes gostam
muito de Inteligência Artificial, resolveram que o primeiro
produto seria para auxiliar os alunos nesta matéria.
Iniciando o Desenvolvimento
26
• E...
– O produto tem que ter diferencial
• Queremos que ele seja usavél e usado
– Explore o potencial do Tablet PC
• Uso da escrita a mão
– Ser usado tanto em sala de aula quanto fora da sala
• Dando um passo a frente:
– Quem serão meus potenciais usuários?
– O que eles gostariam de fazer usando o Tablet PC?
Dificultando...
27
• IHC
• Conhecer o usuário
– Pesquisa
– Entrevista / Questionário
(usados em avaliações também)
– Personas
• Geração de idéias
– Brainstorming
– Mindmaps
• Conhecendo as necessidades
– Cenários
– Storyboard
Métodos / Artefatos
• ESw
– Documentos
de Requisitos
– Casos de Uso
– Features
– etc...
Conhecer usuário, necessidades, tarefas...
28
29Alunos Professores
• Conhecemos superficialmente os usuários
– Temos uma noção de quem são e o seu
trabalho
• Precisamos dar um próximo passo
– Definir melhor a aplicação. O que vamos
desenvolver?
Mais um passo a frente
31
• Brainstorming
• Criatividade - Grupo vs. Individual
• Mais Idéias == Mais Criativo == Melhor
• Tempo limitado
• Manter um registro
Geração de idéias
“Brainstorming is not just a good idea but an
inexhaustible source of inspiration and fresh thinking”
32
• Brainstorming dicas:
• Seja visual
• Evitar fazer julgamentos
• Encorajar idéias “viagens”
• Construir em cima da idéia de outro
• Vá em direção da quantidade
• Somente um fala a cada vez
• Mantenha-se focado no tema
Geração de idéias
33
• MindMaps (Log de idéias)
Geração de idéias
34
• Por que fazer um log de idéias?
Geração de idéias
•Para não esquecê-las
•Para guardar e avaliá-las depois
•Para ajudar a clarificar, concretizar, idéias que ficam
rodando na cabeça
•Para liberar sua cabeça para novas idéias
•Porque uma boa idéias leva a outras
•Para dar às idéias a importância que elas merecem
35
• O nosso MindMaps
Geração de idéias
Aplicação educacional
para tablet
Conceito de Brainstorming
Textos
Aplicativos pen-based
Disciplina de IA
Senso Comum
Ensino de IA
Agentes
Construção de
agentes
Protótipo funcional
(???)
Jogo
Imagem e ação “Bolinha”
Palavra-cruzada
IHC 2006
Processo
Representação de
conhecimento
Símbolos matemáticos
“Tradutor”
Expressões lógicas
Colaboração
Grafos
Aluna “monta” agente
ConceptNet
Software
ROBOCOD
Eliza
Redes neurais
Desenho com apoio
da ConceptNet
Exemplos de
aplicativos
Escolhido
36
• Vale a pena investir na idéia selecionada?
• Existem softwares semelhantes? Qual vai ser o
diferencial?
É uma nova idéia?
Através da análise de aplicações semelhantes, verificou-se três formas
para a entrada dos símbolos lógicos:
1) Teclado Físico: os símbolos lógicos são mapeados para caracteres do
teclado, como no sistema ALFie, Café, Gateway, que usam o & para
simbolizar o conector , o LLProver, que usa a seqüência / , e o MIB; e
2) Teclado Virtual: os símbolos lógicos são disponibilizados através de
botões, como no sistema Tarski´s World (em uma janela flutuante) e
WinKE (em uma barra de ferramenta);
3) Interação com Menu: os símbolos lógicos são disponibilizados em um
menu, como no sistema DC Proof.
Alguns sistemas estão disponíveis para a Web, como é o caso do ALFie,
Café, Gateway e LLProver, outros são para ambientes desktop, como
por exemplo, Aristotle, DC Proof, MIB, Tarski´s World e WinKE.
37
– Como a aplicação vai auxiliar nas tarefas do
usuário?
– Como planejar o funcionamento da
aplicação?
Precisamos então conhecer melhor o usuário!
– Que artefatos podem auxiliar nessa etapa?
Usuário – Características
38
• Não – estruturadas
– Conversa informal, mas com um “plano de assuntos” a tratar
– Gera informações interessantes e imprevistas, difícil de analisar
• Estruturadas
– Questões pré-determinadas (similar a um questionário),
geralmente de múltipla-escolha
– Objetivos claros com as questões
• Semi-estruturadas
– Questões abertas e outras objetivas
– Explora mais um livre discurso do entrevistado
Entrevistas
39
Vamos dizer que optamos por uma entrevista Semi-estruturada
Planejamos então a entrevista:
- Duração de 30 minutos a 1 hora
- Pessoas que irão participar da entrevista
- Recursos a serem utilizados
- Lápis, papel e gravador de áudio
- As perguntas. Exemplos:
1. Quais os tópicos (na disciplina) nos quais os alunos tem mais dificuldade?
2. Qual a importância de lógica de primeira ordem no currículo de cursos de
computação?
3. Como você ensina lógica de primeira ordem ou outro tipo de lógica?
4. Em que ponto os alunos apresentam maior dificuldade?
5. O que é importante que o aluno saiba ou desenvolva para vencer essa
dificuldade?
6. Que aplicativos de apoio ao ensino de lógica de primeira ordem você conhece?
Entrevistas
40
• Criação de perfis de usuários
– Usuários fictícios
– Representativos
– Usado para motivar e guiar os membros ao PCD
• Descrição de características como:
– Educação
– Habilidades
– Profissão
– Idade
– Características pessoais como: se gosta de esportes, hobby, estado civil,
etc.
Personas
41
• Pedro Marcuse
Designer de Interfaces
Formação: Antes de começar a faculdade de Desenho
Industrial, sua principal ocupação eram os games.
Escolheu essa faculdade porque sempre teve facilidade
com as artes. Nunca poderia ter feito um curso chato
como Administração ou Direito. Começou a trabalhar a
partir do segundo ano de faculdade só pra não precisar
depender mais da mesada do pai. Há dois anos
formado, Pedro se encontrou no Design de Interfaces e
quer se especializar nisso, apesar de seu trabalho atual
como webdesigner exigir outras habilidades.
Personas - Exemplo
http://usabilidoido.com.br/persona_o_usuario_mascote_do_projeto.html
42
• Pedro Marcuse
Interesse no Usabilidoido:
Melhorar o discurso para argumentar com clientes e outros
membros da equipe, visando obter uma situação profissional
superior.
Assuntos Preferidos:
– Usabilidade
– Design gráfico de interfaces
Tipo psicológico : Introvertido - Intuitivo - Pensador - Julgador
Personas - Exemplo
http://usabilidoido.com.br/persona_o_usuario_mascote_do_projeto.html
43
• Pedro Marcuse
Descrição da personalidade :
Pedro sente uma pressão grande por se manter informado nas novidades da profissão. Por
vezes, encontramos Pedro sentado na frente do computador fora do horário de
trabalho, só para dar conta das novidades que saem nas listas de email, blogs e sites
especializados. Quando está muito concentrado, prefere terminar de ler um artigo ou
livro antes de sair de casa para se divertir.
Quando está longe do computador, está sempre no mundo-da-lua. Durante as aulas da
faculdade, as aulas chatas eram o momento em que ele tinha as melhores idéias para
solucionar problemas do trabalho. Comprou um Palmtop só para anotar as idéias
porque, senão o fizesse, esquecia depois.
Seu círculo social é pequeno, não é um tipo popular. No entanto, valoriza muito o contato
com as poucas pessoas que mantém vínculos fortes. Pedro prefere não ficar com a
responsabilidade de líder, mas se precisar pode guiar uma equipe em projetos
inovadores. Quando trabalha em equipe costuma desenvolver idéias em segredo até
que tenha certeza de que está certo. "Dizem que sou teimoso, mas sei reconhecer
quando estou errado", afirma ele.
Personas - Exemplo
http://usabilidoido.com.br/persona_o_usuario_mascote_do_projeto.html
44
• Projeto: Internet Explorer 5 da Microsoft
• Motivação: conscientizar os desenvolvedores da
importância de oferecer uma boa experiência aos
usuários
• Como foi usado: durante as discussões sobre o rumo da
interface, o nome das personas eram evocadas para
defender que determinado recurso seria difícil demais
para ser usado por aquela persona
Personas no projeto
45
• Como seria uma Persona para o nosso
exemplo?
Personas
46
• Pequenas narrativas que descrevem atividades humanas ou
tarefas
• Não necessariamente descrevem o uso de um software
• Ajudam a identificar os stakeholders, suas tarefas, necessidades,
objetivos, etc
• Ótima maneira de comunicação entre equipe de produção e
usuários
• Podem mostrar situações existentes nas atividades dos usuários
ou propor novas situações
• Ajudam na representação do modelo conceitual para as
atividades
Cenários
47
•Exemplo de cenário:
“Maria quer encontrar um livro de “Donald Norton”. Ela não lembra o título mas
sabe que foi publicado em 1988. Ela vai até o catálogo e informa seu nome e
senha. Ela se irrita pela fato de ter que solicitar permissão para simplesmente
consultar o catálogo. Tendo o acesso liberado ela tem a possibilidade de fazer um
busca por autor ou por data, mas não pela combinação dos dois como gostaria. Ela
então faz um busca por autor porque por ano retornaria muitos registros. O
sistema retorna que não há registros para “Donald Norton” e exibe registros com
nomes de autores similares. Maria percebe então que o nome do autor não era
Norton e sim Norman. Ela seleciona o registro e verifica então onde está o livro
que procura”.
Cenários
48
Storyboards
Continuação no TelEduc!
49
• O que é uma tarefa?
Conjunto de atividades que são realizadas
para atingir algum objetivo do usuário ao
interagir com a aplicação
• Tarefa x Requisitos
Tarefas reúne diversos requisitos levantados
por um usuário
Tarefas
50
• Professor
– Elabora o enunciado do exercício (podendo usar o
teclado para digitar frases e a caneta para inserir
símbolos lógicos)
– Disponibiliza exercícios aos alunos
– Explica como resolver um exercício
• Aluno
– Resolve o exercício
– Auxilia outro aluno a resolver um exercício
– Explica como resolver um exercício
Algumas Tarefas
51
• Em paralelo! Desenvolvimento de casos de
uso
Onde estão os métodos e artefatos da ESw?
N Evento Caso de uso
1 O professor insere um exercício no caderno
de atividades
Inserir Exercício
2 O professor edita um exercício no caderno
de atividades
Editar Exercício
3 O professor exclui um exercício do caderno
de atividades
Excluir Exercício
4 O aluno resolve individualmente um
exercício do caderno de atividades
Resolver Exercício
Individualmente
5 Os alunos resolvem colaborativamente um
exercício do caderno de atividades
Resolver Exercício
Colaborativamente
... ... ...
52
Caso de Uso 1 - Inserir Exercício
Breve Descrição: O professor deseja inserir um novo exercício no caderno de
atividades.
Ator Primário: Professor
Precondições: professor estar logado
Pós-condições: novo exercício é guardado e disponibilizado
Onde estão os métodos e artefatos da ESw?
Ator Sistema
1. O professor informa que deseja
adicionar um novo exercício
2. O professor fornece as
informações do exercício
3. O sistema guarda as informações
do exercício
53
• Como referenciar a aplicação?
– Caderno Interativo de Lógica
Precisamos de um nome
54
• Já tenho uma boa idéia... e agora?
Design, Projeto, Especificação, Testes...
•Planejar, materializar as soluções...
•Diversos artefatos da ES e IHC podem auxiliar no
design e projeto do sistema
55
• IHC
• Design
– Diagrama de fluxo
– Diagrama de CTTs
• Prototipação
– Low-Fidelity (paper prototyping
– High-Fidelity
• Avaliação
– Inspeção
– Testes de Usabilidade
Artefatos
• Engenharia de
Software
• Diagramas:
– Classes
– ER
– Sequência
– Componentes
– etc...
• Protótipo
• Código
• Testes de software
Design, Projeto, Especificação, Testes...
56
Diagrama CTTs
57
Diagrama CTTs
Tarefa
Abstrata
58
Diagrama CTTs
Tarefa Interação
Ex.: pressionar
botão
59
Diagrama CTTs
Tarefa da Aplicação
Ex.: fornecer
informação ao
usuário
60
Diagrama CTTs
Tarefa do Usuário
Ex.: pensar, decidir
(normalmente tarefas
cognitivas)
61
Diagrama CTTs
Ativação
62
Diagrama CTTs
Ativação
com
passagem
de dados
63
Diagrama CTTs
Escolha
64
Diagrama CTTs
Desativação
65
Diagrama CTTs
Interação
66
• Foco nas atividades
– designer não foca em detalhes de
implementação
• Estrutura hierárquica
– Decomposição do problema em problemas
menores
• Sintaxe gráfica
• Notação de concorrência
• Objetos
Diagrama CTTs
67
Diagrama de Fluxo
•Também conhecido como:
• Interface-flow diagram;
• Windows navigation diagram;
• Context-navigation map;
• Navigation diagram (RUP);
•Visa modelar os relacionamentos entre elementos da interface;
• Utilizado para modelar a interação de um usuário com a interface,
ilustrando um cenário ou caso de uso;
• Oferece um overview da interface e sua navegação;
• Permite verificar todo o fluxo de navegação na interface;
68
Diagrama de Fluxo
69
Diagrama de Fluxo
70
Prototipação – Por que?
• “Mil e uma utilidades...”
• Útil para discutir idéias com os stakeholders;
• Meio de comunicação entre os membros da
equipe de desenvolvimento;
• Ótimo para testar suas próprias idéias;
• Permite testar alternativas de design;
• Auxilia na obtenção de requisitos (e
refinamento);
• Permite testes e avaliações;
71
Prototipação - Low-Fidelity
Prototipação em Papel
• Rápido, barato, fácil de fazer e modificar;
• Útil para explorar alternativas de design e
idéias;
• Bastante usual nos primeiros estágios do
desenvolvimento (coletar requisitos);
• Podem ser utilizados para testar a interação
também;
• Não se parecem muito com o produto final;
72
Prototipação - Low-Fidelity
73
Prototipação - Low-Fidelity
74
Prototipação - Low-Fidelity
Uma proposta de
solução?
75
Prototipação - Low-Fidelity
Uma proposta de
solução?
Duas?
76
Prototipação - Low-Fidelity
Uma proposta de
solução?
Duas?
Três?
77
Prototipação - Low-Fidelity
Uma proposta de
solução?
Duas?
Três?
Quatro?
Caderno Interativo de Lógica
Exercício:aula1_ex03
Considerando que:
- Todo aluno de computação é uma pessoa inteligente.
- Toda pessoa inteligente gosta de festa.
- Natanael é um aluno de computação.
Use o cálculo de primeira ordem para mostrar que:
- Natanael gosta de festa.
Enunciado:
Escrever com
a Caneta
Inserir
Desenhar
Grafo
Cancelar
Abrir Exercício Fechar Exercício
Arquivo
Novo Exercício
Salvar Como ImprimirSalvar Visualizar Impressão
Editar Inserir Resolução Relembrar a Teoria Ajuda
Sair
78
Prototipação - Low-Fidelity
Uma proposta de
solução?
Duas?
Três?
Quatro?
Caderno Interativo de Lógica
Exercício:aula1_ex03
Considerando que:
- Todo aluno de computação é uma pessoa inteligente.
- Toda pessoa inteligente gosta de festa.
- Natanael é um aluno de computação.
Use o cálculo de primeira ordem para mostrar que:
- Natanael gosta de festa.
Enunciado:
Escrever com
a Caneta
Inserir
Desenhar
Grafo
Cancelar
Abrir Exercício Fechar Exercício
Arquivo
Novo Exercício
Salvar Como ImprimirSalvar Visualizar Impressão
Editar Inserir Resolução Relembrar a Teoria Ajuda
Sair
Vencedor!
79
Prototipação - High-Fidelity
• Muito próximo do produto final;
• Funcional, interativo, navegacional;
• Utilizado para exploração e testes;
• Usado para “vender” as idéias;
• Útil para testar aspectos técnicos e a interação;
• Utiliza ferramental de software para auxiliar no
desenvolvimento;
• Ex: HTML, JavaScript, Visio, Delphi.
80
Prototipação - High-Fidelity
81
Prototipação - High-Fidelity
82
Prototipação - High-Fidelity
83
Validando o Protótipo
84
• Em paralelo!
• Desenvolvimento da arquitetura do
sistema:
Já ia esquecendo a ESw?
Interface com
o usuário
Negócio
Persistência
85
• Elaboração dos
diagramas
de classes:
Já ia esquecendo a ESw?
86
• Elaboração dos diagramas de classes:
Já ia esquecendo a ESw?
87
• Elaboração dos diagramas de classes:
Já ia esquecendo a Esw?
“O design é um processo que equilibra as
restrições e os constantes compromissos de
um conjunto de requisitos uns com os outros,
e as restrições podem resultar em poucas
alternativas viáveis”
Rogers, Sharp e Preece, 2013, p. 337
Resumindo...
89
• Vários métodos/artefatos para apoiar diferentes momentos
do processo de desenvolvimento
– Entrevistas
– Personas
– Storyboards
– Protótipos
– Casos de uso
– Diagramas UML
– Diagramas CTT
– ...
• Como escolher?
Conclusão

Mais conteúdo relacionado

Mais procurados

Aula 04 arquitetura de computadores
Aula 04   arquitetura de computadoresAula 04   arquitetura de computadores
Aula 04 arquitetura de computadores
Daniel Moura
 
Ihc 01-conceitos básicos
Ihc 01-conceitos básicosIhc 01-conceitos básicos
Ihc 01-conceitos básicos
Eduardo Xavier
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
Rodrigo Rodrigues
 
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
 

Mais procurados (20)

Informática Básica - Aula 04 - Software
Informática Básica - Aula 04 - SoftwareInformática Básica - Aula 04 - Software
Informática Básica - Aula 04 - Software
 
Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)Interface Humano-Computador (IHC)
Interface Humano-Computador (IHC)
 
Engenharia semiotica
Engenharia semioticaEngenharia semiotica
Engenharia semiotica
 
Aula 04 arquitetura de computadores
Aula 04   arquitetura de computadoresAula 04   arquitetura de computadores
Aula 04 arquitetura de computadores
 
Fundamentos básicos do Design gráfico
Fundamentos básicos do Design gráficoFundamentos básicos do Design gráfico
Fundamentos básicos do Design gráfico
 
Ihc 01-conceitos básicos
Ihc 01-conceitos básicosIhc 01-conceitos básicos
Ihc 01-conceitos básicos
 
Arquitetura de Software
Arquitetura de SoftwareArquitetura de Software
Arquitetura de Software
 
Ux design - Conceitos Básicos
Ux design - Conceitos BásicosUx design - Conceitos Básicos
Ux design - Conceitos Básicos
 
Sistemas operacionais
Sistemas operacionaisSistemas operacionais
Sistemas operacionais
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
IHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de DesignIHC - Slide 2 - Usabilidade e Princípios de Design
IHC - Slide 2 - Usabilidade e Princípios de Design
 
Introdução a computação
Introdução a computaçãoIntrodução a computação
Introdução a computação
 
Aula03 - Informática Básica
Aula03 - Informática BásicaAula03 - Informática Básica
Aula03 - Informática Básica
 
Gerenciamento de Arquivos Nos Sistemas Operacionais
Gerenciamento de Arquivos Nos Sistemas OperacionaisGerenciamento de Arquivos Nos Sistemas Operacionais
Gerenciamento de Arquivos Nos Sistemas Operacionais
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 
Usabilidade aula-01 Introdução
Usabilidade aula-01 IntroduçãoUsabilidade aula-01 Introdução
Usabilidade aula-01 Introdução
 
Lista de exercícios em portugol
Lista de exercícios em portugolLista de exercícios em portugol
Lista de exercícios em portugol
 
Apresentação Sistemas Operativos TUDO.pdf
Apresentação Sistemas Operativos TUDO.pdfApresentação Sistemas Operativos TUDO.pdf
Apresentação Sistemas Operativos TUDO.pdf
 
UX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do UsuárioUX e UI - Experiência e Interface do Usuário
UX e UI - Experiência e Interface do Usuário
 
O que é Interação Humano-Computador?
O que é Interação Humano-Computador?O que é Interação Humano-Computador?
O que é Interação Humano-Computador?
 

Destaque

Experiencia De Usuario + Relato + Storyboard
Experiencia De Usuario + Relato + StoryboardExperiencia De Usuario + Relato + Storyboard
Experiencia De Usuario + Relato + Storyboard
hernan.corvalan
 
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
André Constantino da Silva
 

Destaque (20)

Aula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuáriosAula 5 -Avaliação de interfaces de usuário - testes com usuários
Aula 5 -Avaliação de interfaces de usuário - testes com usuários
 
Introdução ao TelEduc
Introdução ao TelEducIntrodução ao TelEduc
Introdução ao TelEduc
 
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
Mouse+Teclado x Toque+Caneta: as modalidades de interação em contextos educac...
 
Princípios de Design de Interação
Princípios de Design de InteraçãoPrincípios de Design de Interação
Princípios de Design de Interação
 
Avaliação de Interface
Avaliação de InterfaceAvaliação de Interface
Avaliação de Interface
 
Experiencia De Usuario + Relato + Storyboard
Experiencia De Usuario + Relato + StoryboardExperiencia De Usuario + Relato + Storyboard
Experiencia De Usuario + Relato + Storyboard
 
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
 
Processos para o Design da Interface de Usuário
Processos para o Design da Interface de UsuárioProcessos para o Design da Interface de Usuário
Processos para o Design da Interface de Usuário
 
Webdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criaçãoWebdesign - O webdesigner no processo de criação
Webdesign - O webdesigner no processo de criação
 
Prototipação de software
Prototipação de softwarePrototipação de software
Prototipação de software
 
Os 10 Produtos Mais Vendidos na Internet em 2016
Os 10 Produtos Mais Vendidos na Internet em 2016Os 10 Produtos Mais Vendidos na Internet em 2016
Os 10 Produtos Mais Vendidos na Internet em 2016
 
Aula 1 final
Aula 1 finalAula 1 final
Aula 1 final
 
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de RepetiçãoAula 10 - Comando de Decisão Múltipla e Comandos de Repetição
Aula 10 - Comando de Decisão Múltipla e Comandos de Repetição
 
DESIGN DE INTERFACE
DESIGN DE INTERFACEDESIGN DE INTERFACE
DESIGN DE INTERFACE
 
7Masters Usabilidade - Design-driven Innovation, com Érico Fileno
7Masters Usabilidade - Design-driven Innovation, com Érico Fileno7Masters Usabilidade - Design-driven Innovation, com Érico Fileno
7Masters Usabilidade - Design-driven Innovation, com Érico Fileno
 
Usabilidade de Interfaces - Parte 3
Usabilidade de Interfaces - Parte 3Usabilidade de Interfaces - Parte 3
Usabilidade de Interfaces - Parte 3
 
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
 
Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1Usabilidade de Interfaces - Parte 1
Usabilidade de Interfaces - Parte 1
 
Como fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficasComo fazer citações e referências bibliográficas
Como fazer citações e referências bibliográficas
 
Design de Interfaces
Design de InterfacesDesign de Interfaces
Design de Interfaces
 

Semelhante a Aula 6 - Design e Processo de Design de Interfaces de Usuário

Software fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarSoftware fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programar
Harlley Oliveira
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Cris Fidelix
 
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IAAula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Amyris Fernandez
 
Interação humano computador (introdução )
Interação humano computador (introdução )Interação humano computador (introdução )
Interação humano computador (introdução )
Jesse Teixeira
 
Processo inovação
Processo inovaçãoProcesso inovação
Processo inovação
Alaor Bianco
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Mourylise Heymer
 

Semelhante a Aula 6 - Design e Processo de Design de Interfaces de Usuário (20)

Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuárioDesign de Interação - Entendendo, conceituando e abordagem centrada no usuário
Design de Interação - Entendendo, conceituando e abordagem centrada no usuário
 
Arquitetura da Informação
Arquitetura da InformaçãoArquitetura da Informação
Arquitetura da Informação
 
Aula 3 – A áera de IHC
Aula 3 – A áera de IHCAula 3 – A áera de IHC
Aula 3 – A áera de IHC
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarSoftware fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programar
 
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
Capítulo 2   compreendendo e conceitualizando a interação [ final ]Capítulo 2   compreendendo e conceitualizando a interação [ final ]
Capítulo 2 compreendendo e conceitualizando a interação [ final ]
 
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane FidelixAula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
Aula 01 - Conceitos de IHC - Prof.ª Cristiane Fidelix
 
Ergodesing e arquitetura de Informação
Ergodesing e arquitetura de InformaçãoErgodesing e arquitetura de Informação
Ergodesing e arquitetura de Informação
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Projeto de Interface de Usuário
Projeto de Interface de UsuárioProjeto de Interface de Usuário
Projeto de Interface de Usuário
 
Design Centrado no Usuário
Design Centrado no UsuárioDesign Centrado no Usuário
Design Centrado no Usuário
 
Design de interação aula 2
Design de interação aula 2Design de interação aula 2
Design de interação aula 2
 
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IAAula 1 - Interaction Design From Ethnography, Mental Models to IA
Aula 1 - Interaction Design From Ethnography, Mental Models to IA
 
Interação humano computador (introdução )
Interação humano computador (introdução )Interação humano computador (introdução )
Interação humano computador (introdução )
 
Processo inovação
Processo inovaçãoProcesso inovação
Processo inovação
 
User eXperience
User eXperienceUser eXperience
User eXperience
 
Design Centrado no usuário
Design Centrado no usuárioDesign Centrado no usuário
Design Centrado no usuário
 
Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010Design de Interação, Experiência do Usuário e Usabilidade - 2010
Design de Interação, Experiência do Usuário e Usabilidade - 2010
 
Design thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências webDesign thinking - Prototipando melhores experiências web
Design thinking - Prototipando melhores experiências web
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Workshop de UX, 02
Workshop de UX, 02Workshop de UX, 02
Workshop de UX, 02
 

Mais de André Constantino da Silva

Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
André Constantino da Silva
 
Aula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativoAula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativo
André Constantino da Silva
 
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e OperadoresAula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
André Constantino da Silva
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
André Constantino da Silva
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
André Constantino da Silva
 
Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...
Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...
Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...
André Constantino da Silva
 

Mais de André Constantino da Silva (20)

Aula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimentoAula sobre texto academico - elaboração do desenvolvimento
Aula sobre texto academico - elaboração do desenvolvimento
 
Aula 4 - Avaliação de Interface - Parte 1
Aula 4 -  Avaliação de Interface - Parte 1Aula 4 -  Avaliação de Interface - Parte 1
Aula 4 - Avaliação de Interface - Parte 1
 
Aula 3 - Fatores Humanos
Aula 3 - Fatores HumanosAula 3 - Fatores Humanos
Aula 3 - Fatores Humanos
 
Aula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da DisciplinaAula 1 - Apresentação da Disciplina
Aula 1 - Apresentação da Disciplina
 
Introdução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEducIntrodução ao ambiente virtual de aprendizagem TelEduc
Introdução ao ambiente virtual de aprendizagem TelEduc
 
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHCAula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
Aula 5 - Fatores Humanos - Parte 2 - Disciplina de IHC
 
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4   Fatores Humanos - parte 1 - Disciplina de IHCAula 4   Fatores Humanos - parte 1 - Disciplina de IHC
Aula 4 Fatores Humanos - parte 1 - Disciplina de IHC
 
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning EnvironmentsInkBlog: A Pen-Based Blog Tool for e-Learning Environments
InkBlog: A Pen-Based Blog Tool for e-Learning Environments
 
Aula 3
Aula 3Aula 3
Aula 3
 
Aula 2 final
Aula 2 finalAula 2 final
Aula 2 final
 
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
Aula 9 - Resultado Operandos Matemáticos, Operadores Aritmeticos, Relacionais...
 
Aula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativoAula 6 – linguagem HTML - Endereço absoluto e relativo
Aula 6 – linguagem HTML - Endereço absoluto e relativo
 
Aula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - FramesAula 7 – linguagem HTML - Frames
Aula 7 – linguagem HTML - Frames
 
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e OperadoresAula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
Aula 8 - Lógica de Programação - Variáveis, Tipos de dados e Operadores
 
Aula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e linksAula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e links
 
Aula 3 – Linguagem HTML - formatação de texto
Aula 3 – Linguagem HTML -  formatação de textoAula 3 – Linguagem HTML -  formatação de texto
Aula 3 – Linguagem HTML - formatação de texto
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...
Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...
Desenvolvimento de Sistemas Interativos - Integração das Visões de Engenharia...
 
Uml - Exemplos de Modelagem em UML
Uml - Exemplos de Modelagem em UMLUml - Exemplos de Modelagem em UML
Uml - Exemplos de Modelagem em UML
 
Raciocínio Lógico Aplicado a Resolução de Problemas Matemáticos
Raciocínio Lógico Aplicado a Resolução de Problemas MatemáticosRaciocínio Lógico Aplicado a Resolução de Problemas Matemáticos
Raciocínio Lógico Aplicado a Resolução de Problemas Matemáticos
 

Aula 6 - Design e Processo de Design de Interfaces de Usuário

  • 1. Design de Interfaces de Usuário Parte 1 Prof. André Constantino da Silva IHC Baseado nos slides da Prof. Dr. Heloísa Vieira da Rocha
  • 2. • Compreender a importância de centrar o design no usuário • Conhecer os princípios do Projeto Centrado no Usuário • Conhecer técnicas que auxiliam a projetar para o usuário Objetivo das Aulas
  • 3. Introdução • Design é a concepção de um produto (máquina, utensílio, mobiliário, embalagem, publicação etc.), especialmente no que se refere à sua forma física e funcionalidade
  • 4. Introdução • O que eu preciso saber para desenvolver uma aplicação com boa usabilidade? Conhecimento
  • 5. Introdução • O que eu preciso saber para desenvolver uma aplicação com boa usabilidade? Conhecimento – Usuários – Funcionalidades – Tecnologias que será utilizada para desenvolver
  • 6. 6 Modelo Mental (MM) Aparência Física Operação Forma de responder Help e manuais
  • 7. 7 • O entendimento é fraco • Especificado imprecisamente • Cheio de inconsistências • Cheio de “buracos” e artimanhas • São incompletos • A habilidade das pessoas para “executar” seus modelos mentais é limitada pelos mecanismos perceptual e cognitivo • Modelos mentais são instáveis pelas próprias restrições e interferências da memória: as pessoas esquecem detalhes do sistema que estão usando, artefatos e operações similares são confundidos • Modelos mentais não são “científicos”: as pessoas mantêm comportamento supersticioso em seus modelos • Freqüentemente fazem operações físicas extras em vez de planejamento mental que possibilite evitar essas ações (Norman, 1983) Modelo Mental - Características
  • 8. 8 Modelo Mental – Uniforme? O modelo conceitual entre os usuários é o mesmo?
  • 9. 9 • Para aprender a programar um computador você é instruído em um paradigma de programação – Paradigma procedimental: C, Pascal • Durante o curso, você aprende outros paradigmas – Paradigma orientado a objetos: Java – E existem outros: Paradigma funcional (Lisp) e Paradigma lógico (Prolog) • Dificuldade de aprendizado de um novo paradigma ocorre – o seu Modelo Mental é voltado para o primeiro paradigma que aprende e você o usa para compreender o novo paradigma Modelo Mental - Evolução
  • 10. 10 • Observação • Instrução • Inferência Modelo Mental - Evolução
  • 11. • Os usuários sabem todos os requisitos da aplicação? • Diferentes papeis dos usuários • Contextos E mais problemas...
  • 12. • Assegurar que a Imagem do Sistema seja consistente com o MM dos usuários – MM do Designer coincidir com MM do Usuário E qual o seu papel como designer? Necessário conhecer o usuário e as tarefas
  • 13. 13 Design Centrado no Usuário (UCD) Quem? Quais tarefas? Funcionalidades? Utilização. Propostas Protótipos Testes com usuários •Abordagem que coloca o usuário como centro do processo de design e desenvolvimento
  • 14. • É o processo de design em que as necessidades, desejos e limitações do ser humano são levados em conta durante todas as fases de concepção e desenvolvimento de um projeto • O objetivo do design de interface de usuário é tornar a interação do usuário o mais simples e eficiente possível, em termos de realização dos objetivos do usuário Design Centrado no Usuário
  • 15. • Definido na ISO Human-centred design for interactive systems (ISO 9241-210, 2010) • 6 princípios chaves: – O design da interface é criado a partir do conhecimento explícito dos usuários, tarefas e ambiente – Usuários são envolvidos em todo o processo de design e desenvolvimento – O projeto é dirigido e refinado por meio avaliações centradas no usuário – O processo é iterativo – O design deve focar a experiência do usuário como um todo – A equipe deve ser multidisciplinar Design Centrado no Usuário
  • 16. 16 Design Participativo  Design com usuários e não para os usuários.  Incorpora o usuário como membro da equipe de projeto, participando de todas as etapas. • Melhora o entendimento do trabalho do usuário e combina o conhecimento dos diversos participantes.
  • 18. 18 Engenharia Cognitiva • Enfatiza a modelagem de uma atividade na forma como ela é entendida pelo usuário. • Visa facilitar a realização da tarefa através de um bom modelo conceitual do sistema. • Dificuldade de mapeamento de termos psicológicos para mecanismos físicos: Golfo da Execução e Golfo da Avaliação. Golfo da execução: Como eu executo a tarefa....? Golfo da Avaliação: Consegui...?
  • 19. 19 Modelo Estrela Onde e como é necessário Tarefas automatizadas Características e Requisitos Métricas e metas de usabilidade Representação do projeto para Comunicação entre a equipe Materializar o projeto Facilitar a avaliação prévia Ocorre entre todas as etapas Avaliando artefatos gerados em cada
  • 20. 20 Engenharia de Usabilidade Compreensão do usuário e atividades Funcionalidades e Contexto de trabalho Evolução do usuário Sistemas similares Metas e métricas de usabilidade Explorar possíveis soluções de projeto Design Participativo Avaliações Heurísticas / Guidelines Protótipos e Testes com Usuários
  • 21. – Qual o ponto de partida? – Quais as informações necessárias? – Usuário, Sistema, Tarefa? O que é importante e como obter essas informações? – Quais artefatos da ES e IHC poderiam ajudar nessa etapa? 21 Desenvolvimento
  • 22. 22
  • 23. – Como a aplicação vai auxiliar nas tarefas do usuário? – Como planejar o funcionamento da aplicação? – Que artefatos podem auxiliar nessa etapa? 23 Usuário – Características
  • 24. 24 Introdução Integração ES/IHC Desenvolvimento de Sistemas Interativos no usuário (aspectos de interação) Interação Humano- Computador (IHC) Engenharia de Software (ES) no sistema (tecnologia) foco foco
  • 25. 25 – Qual o ponto de partida? – Contexto Exemplo: Você e seus colegas montaram uma empresa de desenvolvimento de software educacionais. Ao ouvir o professor comentar que existem poucos softwares para o Tablet PC, vocês resolveram inovar e desenvolver softwares para este dispositivo. Como todos os participantes gostam muito de Inteligência Artificial, resolveram que o primeiro produto seria para auxiliar os alunos nesta matéria. Iniciando o Desenvolvimento
  • 26. 26 • E... – O produto tem que ter diferencial • Queremos que ele seja usavél e usado – Explore o potencial do Tablet PC • Uso da escrita a mão – Ser usado tanto em sala de aula quanto fora da sala • Dando um passo a frente: – Quem serão meus potenciais usuários? – O que eles gostariam de fazer usando o Tablet PC? Dificultando...
  • 27. 27 • IHC • Conhecer o usuário – Pesquisa – Entrevista / Questionário (usados em avaliações também) – Personas • Geração de idéias – Brainstorming – Mindmaps • Conhecendo as necessidades – Cenários – Storyboard Métodos / Artefatos • ESw – Documentos de Requisitos – Casos de Uso – Features – etc... Conhecer usuário, necessidades, tarefas...
  • 28. 28
  • 30. • Conhecemos superficialmente os usuários – Temos uma noção de quem são e o seu trabalho • Precisamos dar um próximo passo – Definir melhor a aplicação. O que vamos desenvolver? Mais um passo a frente
  • 31. 31 • Brainstorming • Criatividade - Grupo vs. Individual • Mais Idéias == Mais Criativo == Melhor • Tempo limitado • Manter um registro Geração de idéias “Brainstorming is not just a good idea but an inexhaustible source of inspiration and fresh thinking”
  • 32. 32 • Brainstorming dicas: • Seja visual • Evitar fazer julgamentos • Encorajar idéias “viagens” • Construir em cima da idéia de outro • Vá em direção da quantidade • Somente um fala a cada vez • Mantenha-se focado no tema Geração de idéias
  • 33. 33 • MindMaps (Log de idéias) Geração de idéias
  • 34. 34 • Por que fazer um log de idéias? Geração de idéias •Para não esquecê-las •Para guardar e avaliá-las depois •Para ajudar a clarificar, concretizar, idéias que ficam rodando na cabeça •Para liberar sua cabeça para novas idéias •Porque uma boa idéias leva a outras •Para dar às idéias a importância que elas merecem
  • 35. 35 • O nosso MindMaps Geração de idéias Aplicação educacional para tablet Conceito de Brainstorming Textos Aplicativos pen-based Disciplina de IA Senso Comum Ensino de IA Agentes Construção de agentes Protótipo funcional (???) Jogo Imagem e ação “Bolinha” Palavra-cruzada IHC 2006 Processo Representação de conhecimento Símbolos matemáticos “Tradutor” Expressões lógicas Colaboração Grafos Aluna “monta” agente ConceptNet Software ROBOCOD Eliza Redes neurais Desenho com apoio da ConceptNet Exemplos de aplicativos Escolhido
  • 36. 36 • Vale a pena investir na idéia selecionada? • Existem softwares semelhantes? Qual vai ser o diferencial? É uma nova idéia? Através da análise de aplicações semelhantes, verificou-se três formas para a entrada dos símbolos lógicos: 1) Teclado Físico: os símbolos lógicos são mapeados para caracteres do teclado, como no sistema ALFie, Café, Gateway, que usam o & para simbolizar o conector , o LLProver, que usa a seqüência / , e o MIB; e 2) Teclado Virtual: os símbolos lógicos são disponibilizados através de botões, como no sistema Tarski´s World (em uma janela flutuante) e WinKE (em uma barra de ferramenta); 3) Interação com Menu: os símbolos lógicos são disponibilizados em um menu, como no sistema DC Proof. Alguns sistemas estão disponíveis para a Web, como é o caso do ALFie, Café, Gateway e LLProver, outros são para ambientes desktop, como por exemplo, Aristotle, DC Proof, MIB, Tarski´s World e WinKE.
  • 37. 37 – Como a aplicação vai auxiliar nas tarefas do usuário? – Como planejar o funcionamento da aplicação? Precisamos então conhecer melhor o usuário! – Que artefatos podem auxiliar nessa etapa? Usuário – Características
  • 38. 38 • Não – estruturadas – Conversa informal, mas com um “plano de assuntos” a tratar – Gera informações interessantes e imprevistas, difícil de analisar • Estruturadas – Questões pré-determinadas (similar a um questionário), geralmente de múltipla-escolha – Objetivos claros com as questões • Semi-estruturadas – Questões abertas e outras objetivas – Explora mais um livre discurso do entrevistado Entrevistas
  • 39. 39 Vamos dizer que optamos por uma entrevista Semi-estruturada Planejamos então a entrevista: - Duração de 30 minutos a 1 hora - Pessoas que irão participar da entrevista - Recursos a serem utilizados - Lápis, papel e gravador de áudio - As perguntas. Exemplos: 1. Quais os tópicos (na disciplina) nos quais os alunos tem mais dificuldade? 2. Qual a importância de lógica de primeira ordem no currículo de cursos de computação? 3. Como você ensina lógica de primeira ordem ou outro tipo de lógica? 4. Em que ponto os alunos apresentam maior dificuldade? 5. O que é importante que o aluno saiba ou desenvolva para vencer essa dificuldade? 6. Que aplicativos de apoio ao ensino de lógica de primeira ordem você conhece? Entrevistas
  • 40. 40 • Criação de perfis de usuários – Usuários fictícios – Representativos – Usado para motivar e guiar os membros ao PCD • Descrição de características como: – Educação – Habilidades – Profissão – Idade – Características pessoais como: se gosta de esportes, hobby, estado civil, etc. Personas
  • 41. 41 • Pedro Marcuse Designer de Interfaces Formação: Antes de começar a faculdade de Desenho Industrial, sua principal ocupação eram os games. Escolheu essa faculdade porque sempre teve facilidade com as artes. Nunca poderia ter feito um curso chato como Administração ou Direito. Começou a trabalhar a partir do segundo ano de faculdade só pra não precisar depender mais da mesada do pai. Há dois anos formado, Pedro se encontrou no Design de Interfaces e quer se especializar nisso, apesar de seu trabalho atual como webdesigner exigir outras habilidades. Personas - Exemplo http://usabilidoido.com.br/persona_o_usuario_mascote_do_projeto.html
  • 42. 42 • Pedro Marcuse Interesse no Usabilidoido: Melhorar o discurso para argumentar com clientes e outros membros da equipe, visando obter uma situação profissional superior. Assuntos Preferidos: – Usabilidade – Design gráfico de interfaces Tipo psicológico : Introvertido - Intuitivo - Pensador - Julgador Personas - Exemplo http://usabilidoido.com.br/persona_o_usuario_mascote_do_projeto.html
  • 43. 43 • Pedro Marcuse Descrição da personalidade : Pedro sente uma pressão grande por se manter informado nas novidades da profissão. Por vezes, encontramos Pedro sentado na frente do computador fora do horário de trabalho, só para dar conta das novidades que saem nas listas de email, blogs e sites especializados. Quando está muito concentrado, prefere terminar de ler um artigo ou livro antes de sair de casa para se divertir. Quando está longe do computador, está sempre no mundo-da-lua. Durante as aulas da faculdade, as aulas chatas eram o momento em que ele tinha as melhores idéias para solucionar problemas do trabalho. Comprou um Palmtop só para anotar as idéias porque, senão o fizesse, esquecia depois. Seu círculo social é pequeno, não é um tipo popular. No entanto, valoriza muito o contato com as poucas pessoas que mantém vínculos fortes. Pedro prefere não ficar com a responsabilidade de líder, mas se precisar pode guiar uma equipe em projetos inovadores. Quando trabalha em equipe costuma desenvolver idéias em segredo até que tenha certeza de que está certo. "Dizem que sou teimoso, mas sei reconhecer quando estou errado", afirma ele. Personas - Exemplo http://usabilidoido.com.br/persona_o_usuario_mascote_do_projeto.html
  • 44. 44 • Projeto: Internet Explorer 5 da Microsoft • Motivação: conscientizar os desenvolvedores da importância de oferecer uma boa experiência aos usuários • Como foi usado: durante as discussões sobre o rumo da interface, o nome das personas eram evocadas para defender que determinado recurso seria difícil demais para ser usado por aquela persona Personas no projeto
  • 45. 45 • Como seria uma Persona para o nosso exemplo? Personas
  • 46. 46 • Pequenas narrativas que descrevem atividades humanas ou tarefas • Não necessariamente descrevem o uso de um software • Ajudam a identificar os stakeholders, suas tarefas, necessidades, objetivos, etc • Ótima maneira de comunicação entre equipe de produção e usuários • Podem mostrar situações existentes nas atividades dos usuários ou propor novas situações • Ajudam na representação do modelo conceitual para as atividades Cenários
  • 47. 47 •Exemplo de cenário: “Maria quer encontrar um livro de “Donald Norton”. Ela não lembra o título mas sabe que foi publicado em 1988. Ela vai até o catálogo e informa seu nome e senha. Ela se irrita pela fato de ter que solicitar permissão para simplesmente consultar o catálogo. Tendo o acesso liberado ela tem a possibilidade de fazer um busca por autor ou por data, mas não pela combinação dos dois como gostaria. Ela então faz um busca por autor porque por ano retornaria muitos registros. O sistema retorna que não há registros para “Donald Norton” e exibe registros com nomes de autores similares. Maria percebe então que o nome do autor não era Norton e sim Norman. Ela seleciona o registro e verifica então onde está o livro que procura”. Cenários
  • 49. 49 • O que é uma tarefa? Conjunto de atividades que são realizadas para atingir algum objetivo do usuário ao interagir com a aplicação • Tarefa x Requisitos Tarefas reúne diversos requisitos levantados por um usuário Tarefas
  • 50. 50 • Professor – Elabora o enunciado do exercício (podendo usar o teclado para digitar frases e a caneta para inserir símbolos lógicos) – Disponibiliza exercícios aos alunos – Explica como resolver um exercício • Aluno – Resolve o exercício – Auxilia outro aluno a resolver um exercício – Explica como resolver um exercício Algumas Tarefas
  • 51. 51 • Em paralelo! Desenvolvimento de casos de uso Onde estão os métodos e artefatos da ESw? N Evento Caso de uso 1 O professor insere um exercício no caderno de atividades Inserir Exercício 2 O professor edita um exercício no caderno de atividades Editar Exercício 3 O professor exclui um exercício do caderno de atividades Excluir Exercício 4 O aluno resolve individualmente um exercício do caderno de atividades Resolver Exercício Individualmente 5 Os alunos resolvem colaborativamente um exercício do caderno de atividades Resolver Exercício Colaborativamente ... ... ...
  • 52. 52 Caso de Uso 1 - Inserir Exercício Breve Descrição: O professor deseja inserir um novo exercício no caderno de atividades. Ator Primário: Professor Precondições: professor estar logado Pós-condições: novo exercício é guardado e disponibilizado Onde estão os métodos e artefatos da ESw? Ator Sistema 1. O professor informa que deseja adicionar um novo exercício 2. O professor fornece as informações do exercício 3. O sistema guarda as informações do exercício
  • 53. 53 • Como referenciar a aplicação? – Caderno Interativo de Lógica Precisamos de um nome
  • 54. 54 • Já tenho uma boa idéia... e agora? Design, Projeto, Especificação, Testes... •Planejar, materializar as soluções... •Diversos artefatos da ES e IHC podem auxiliar no design e projeto do sistema
  • 55. 55 • IHC • Design – Diagrama de fluxo – Diagrama de CTTs • Prototipação – Low-Fidelity (paper prototyping – High-Fidelity • Avaliação – Inspeção – Testes de Usabilidade Artefatos • Engenharia de Software • Diagramas: – Classes – ER – Sequência – Componentes – etc... • Protótipo • Código • Testes de software Design, Projeto, Especificação, Testes...
  • 59. 59 Diagrama CTTs Tarefa da Aplicação Ex.: fornecer informação ao usuário
  • 60. 60 Diagrama CTTs Tarefa do Usuário Ex.: pensar, decidir (normalmente tarefas cognitivas)
  • 66. 66 • Foco nas atividades – designer não foca em detalhes de implementação • Estrutura hierárquica – Decomposição do problema em problemas menores • Sintaxe gráfica • Notação de concorrência • Objetos Diagrama CTTs
  • 67. 67 Diagrama de Fluxo •Também conhecido como: • Interface-flow diagram; • Windows navigation diagram; • Context-navigation map; • Navigation diagram (RUP); •Visa modelar os relacionamentos entre elementos da interface; • Utilizado para modelar a interação de um usuário com a interface, ilustrando um cenário ou caso de uso; • Oferece um overview da interface e sua navegação; • Permite verificar todo o fluxo de navegação na interface;
  • 70. 70 Prototipação – Por que? • “Mil e uma utilidades...” • Útil para discutir idéias com os stakeholders; • Meio de comunicação entre os membros da equipe de desenvolvimento; • Ótimo para testar suas próprias idéias; • Permite testar alternativas de design; • Auxilia na obtenção de requisitos (e refinamento); • Permite testes e avaliações;
  • 71. 71 Prototipação - Low-Fidelity Prototipação em Papel • Rápido, barato, fácil de fazer e modificar; • Útil para explorar alternativas de design e idéias; • Bastante usual nos primeiros estágios do desenvolvimento (coletar requisitos); • Podem ser utilizados para testar a interação também; • Não se parecem muito com o produto final;
  • 74. 74 Prototipação - Low-Fidelity Uma proposta de solução?
  • 75. 75 Prototipação - Low-Fidelity Uma proposta de solução? Duas?
  • 76. 76 Prototipação - Low-Fidelity Uma proposta de solução? Duas? Três?
  • 77. 77 Prototipação - Low-Fidelity Uma proposta de solução? Duas? Três? Quatro? Caderno Interativo de Lógica Exercício:aula1_ex03 Considerando que: - Todo aluno de computação é uma pessoa inteligente. - Toda pessoa inteligente gosta de festa. - Natanael é um aluno de computação. Use o cálculo de primeira ordem para mostrar que: - Natanael gosta de festa. Enunciado: Escrever com a Caneta Inserir Desenhar Grafo Cancelar Abrir Exercício Fechar Exercício Arquivo Novo Exercício Salvar Como ImprimirSalvar Visualizar Impressão Editar Inserir Resolução Relembrar a Teoria Ajuda Sair
  • 78. 78 Prototipação - Low-Fidelity Uma proposta de solução? Duas? Três? Quatro? Caderno Interativo de Lógica Exercício:aula1_ex03 Considerando que: - Todo aluno de computação é uma pessoa inteligente. - Toda pessoa inteligente gosta de festa. - Natanael é um aluno de computação. Use o cálculo de primeira ordem para mostrar que: - Natanael gosta de festa. Enunciado: Escrever com a Caneta Inserir Desenhar Grafo Cancelar Abrir Exercício Fechar Exercício Arquivo Novo Exercício Salvar Como ImprimirSalvar Visualizar Impressão Editar Inserir Resolução Relembrar a Teoria Ajuda Sair Vencedor!
  • 79. 79 Prototipação - High-Fidelity • Muito próximo do produto final; • Funcional, interativo, navegacional; • Utilizado para exploração e testes; • Usado para “vender” as idéias; • Útil para testar aspectos técnicos e a interação; • Utiliza ferramental de software para auxiliar no desenvolvimento; • Ex: HTML, JavaScript, Visio, Delphi.
  • 84. 84 • Em paralelo! • Desenvolvimento da arquitetura do sistema: Já ia esquecendo a ESw? Interface com o usuário Negócio Persistência
  • 85. 85 • Elaboração dos diagramas de classes: Já ia esquecendo a ESw?
  • 86. 86 • Elaboração dos diagramas de classes: Já ia esquecendo a ESw?
  • 87. 87 • Elaboração dos diagramas de classes: Já ia esquecendo a Esw?
  • 88. “O design é um processo que equilibra as restrições e os constantes compromissos de um conjunto de requisitos uns com os outros, e as restrições podem resultar em poucas alternativas viáveis” Rogers, Sharp e Preece, 2013, p. 337 Resumindo...
  • 89. 89 • Vários métodos/artefatos para apoiar diferentes momentos do processo de desenvolvimento – Entrevistas – Personas – Storyboards – Protótipos – Casos de uso – Diagramas UML – Diagramas CTT – ... • Como escolher? Conclusão