Interface Gráfica do Usuário – Aula 8 - Desenvolvimento de Interfaces
Aula 6 - Design e Processo de Design de Interfaces de Usuário
-
Upload
andre-constantino-da-silva -
Category
Design
-
view
177 -
download
1
Transcript of Aula 6 - Design e Processo de Design de Interfaces de Usuário
![Page 1: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/1.jpg)
Design de Interfaces de UsuárioParte 1
Prof. André Constantino da Silva
IHC
Baseado nos slides daProf. Dr. Heloísa Vieira da Rocha
![Page 2: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/2.jpg)
• 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
![Page 3: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/3.jpg)
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
![Page 4: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/4.jpg)
Introdução
• O que eu preciso saber para desenvolver uma aplicação com boa usabilidade? Conhecimento
![Page 5: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/5.jpg)
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
![Page 6: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/6.jpg)
6
Modelo Mental (MM)Aparência Física
OperaçãoForma de responder
Help e manuais
![Page 7: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/7.jpg)
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
![Page 8: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/8.jpg)
8
Modelo Mental – Uniforme?
O modelo conceitual entre os usuários é o mesmo?
![Page 9: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/9.jpg)
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
![Page 10: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/10.jpg)
10
• Observação
• Instrução
• Inferência
Modelo Mental - Evolução
![Page 11: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/11.jpg)
• Os usuários sabem todos os requisitos da aplicação?
• Diferentes papeis dos usuários
• Contextos
E mais problemas...
![Page 12: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/12.jpg)
• 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
![Page 13: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/13.jpg)
13
Design Centrado no Usuário (UCD)
Quem?Quais tarefas?
Funcionalidades?Utilização.
PropostasProtótipos
Testes com usuários
•Abordagem que coloca o usuário como centro do processo de design e desenvolvimento
![Page 14: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/14.jpg)
• É o processo de design em que as necessidades, desejos e limitações do serhumano 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
![Page 15: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/15.jpg)
• 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
![Page 16: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/16.jpg)
16
Design Participativo
Design com usuários e não para osusuários.
Incorpora o usuário como membro da equipe de projeto, participando de todasas etapas.
• Melhora o entendimento do trabalhodo usuário e combina o conhecimentodos diversos participantes.
![Page 17: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/17.jpg)
17
Design Participativo
![Page 18: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/18.jpg)
18
Engenharia Cognitiva
• Enfatiza a modelagem de umaatividade na forma como ela éentendida pelo usuário.
• Visa facilitar a realização da tarefaatravés de um bom modelo conceitualdo sistema.
• Dificuldade de mapeamento de termos psicológicos para mecanismosfísicos: Golfo da Execução e Golfo da Avaliação.
Golfo da execução: Como eu executo a tarefa....?Golfo da Avaliação: Consegui...?
![Page 19: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/19.jpg)
19
Modelo Estrela
Onde e como é necessárioTarefas automatizadas
Características e Requisitos
Métricas e metas de usabilidade
Representação do projeto para Comunicação entre a equipe
Materializar o projetoFacilitar a avaliação prévia
Ocorre entre todas as etapasAvaliando artefatos
gerados em cada
![Page 20: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/20.jpg)
20
Engenharia de Usabilidade
Compreensão do usuário e atividadesFuncionalidades e Contexto de trabalho
Evolução do usuárioSistemas similares
Metas e métricas de usabilidade
Explorar possíveis soluções de projetoDesign Participativo
Avaliações Heurísticas / GuidelinesProtótipos e Testes com Usuários
![Page 21: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/21.jpg)
– 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 nessaetapa?
21
Desenvolvimento
![Page 22: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/22.jpg)
22
![Page 23: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/23.jpg)
– 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
![Page 24: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/24.jpg)
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
![Page 25: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/25.jpg)
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
![Page 26: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/26.jpg)
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...
![Page 27: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/27.jpg)
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
– Documentosde Requisitos
– Casos de Uso
– Features
– etc...
Conhecer usuário, necessidades, tarefas...
![Page 28: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/28.jpg)
28
![Page 29: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/29.jpg)
29Alunos Professores
![Page 30: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/30.jpg)
• 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
![Page 31: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/31.jpg)
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”
![Page 32: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/32.jpg)
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
![Page 33: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/33.jpg)
33
• MindMaps (Log de idéias)
Geração de idéias
![Page 34: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/34.jpg)
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
![Page 35: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/35.jpg)
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
![Page 36: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/36.jpg)
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 formaspara a entrada dos símbolos lógicos:
1) Teclado Físico: os símbolos lógicos são mapeados para caracteres doteclado, como no sistema ALFie, Café, Gateway, que usam o & parasimbolizar 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 debotões, como no sistema Tarski´s World (em uma janela flutuante) eWinKE (em uma barra de ferramenta);
3) Interação com Menu: os símbolos lógicos são disponibilizados em ummenu, 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.
![Page 37: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/37.jpg)
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
![Page 38: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/38.jpg)
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
![Page 39: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/39.jpg)
39
Vamos dizer que optamos por uma entrevista Semi-estruturadaPlanejamos 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
![Page 40: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/40.jpg)
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
![Page 41: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/41.jpg)
41
• Pedro MarcuseDesigner 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
![Page 42: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/42.jpg)
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
![Page 43: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/43.jpg)
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 sitesespecializados. 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éiasporque, 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
![Page 44: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/44.jpg)
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
![Page 45: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/45.jpg)
45
• Como seria uma Persona para o nosso exemplo?
Personas
![Page 46: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/46.jpg)
46
• Pequenas narrativas que descrevem atividades humanas outarefas
• 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áriosou propor novas situações
• Ajudam na representação do modelo conceitual para as atividades
Cenários
![Page 47: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/47.jpg)
47
•Exemplo de cenário:
“Maria quer encontrar um livro de “Donald Norton”. Ela não lembra o título massabe que foi publicado em 1988. Ela vai até o catálogo e informa seu nome esenha. Ela se irrita pela fato de ter que solicitar permissão para simplesmenteconsultar o catálogo. Tendo o acesso liberado ela tem a possibilidade de fazer umbusca por autor ou por data, mas não pela combinação dos dois como gostaria. Elaentão faz um busca por autor porque por ano retornaria muitos registros. Osistema retorna que não há registros para “Donald Norton” e exibe registros comnomes de autores similares. Maria percebe então que o nome do autor não eraNorton e sim Norman. Ela seleciona o registro e verifica então onde está o livroque procura”.
Cenários
![Page 48: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/48.jpg)
48
Storyboards
Continuação no TelEduc!
![Page 49: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/49.jpg)
49
• O que é uma tarefa?
Conjunto de atividades que são realizadaspara 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
![Page 50: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/50.jpg)
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
![Page 51: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/51.jpg)
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
... ... ...
![Page 52: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/52.jpg)
52
Caso de Uso 1 - Inserir ExercícioBreve 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
![Page 53: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/53.jpg)
53
• Como referenciar a aplicação?
– Caderno Interativo de Lógica
Precisamos de um nome
![Page 54: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/54.jpg)
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
![Page 55: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/55.jpg)
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...
![Page 56: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/56.jpg)
56
Diagrama CTTs
![Page 57: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/57.jpg)
57
Diagrama CTTsTarefa
Abstrata
![Page 58: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/58.jpg)
58
Diagrama CTTs
Tarefa InteraçãoEx.: pressionar
botão
![Page 59: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/59.jpg)
59
Diagrama CTTs
Tarefa da AplicaçãoEx.: fornecer
informação ao usuário
![Page 60: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/60.jpg)
60
Diagrama CTTs
Tarefa do UsuárioEx.: pensar, decidir
(normalmente tarefas cognitivas)
![Page 61: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/61.jpg)
61
Diagrama CTTs
Ativação
![Page 62: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/62.jpg)
62
Diagrama CTTs
Ativação com
passagem de dados
![Page 63: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/63.jpg)
63
Diagrama CTTs
Escolha
![Page 64: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/64.jpg)
64
Diagrama CTTs
Desativação
![Page 65: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/65.jpg)
65
Diagrama CTTs
Interação
![Page 66: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/66.jpg)
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
![Page 67: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/67.jpg)
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;
![Page 68: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/68.jpg)
68
Diagrama de Fluxo
![Page 69: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/69.jpg)
69
Diagrama de Fluxo
![Page 70: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/70.jpg)
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;
![Page 71: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/71.jpg)
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;
![Page 72: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/72.jpg)
72
Prototipação - Low-Fidelity
![Page 73: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/73.jpg)
73
Prototipação - Low-Fidelity
![Page 74: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/74.jpg)
74
Prototipação - Low-Fidelity
Uma proposta desolução?
![Page 75: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/75.jpg)
75
Prototipação - Low-Fidelity
Uma proposta desolução?
Duas?
![Page 76: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/76.jpg)
76
Prototipação - Low-Fidelity
Uma proposta desolução?
Duas?Três?
![Page 77: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/77.jpg)
77
Prototipação - Low-Fidelity
Uma proposta desoluçã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 CanetaInserir
Desenhar
GrafoCancelar
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
![Page 78: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/78.jpg)
78
Prototipação - Low-Fidelity
Uma proposta desoluçã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 CanetaInserir
Desenhar
GrafoCancelar
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!
![Page 79: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/79.jpg)
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.
![Page 80: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/80.jpg)
80
Prototipação - High-Fidelity
![Page 81: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/81.jpg)
81
Prototipação - High-Fidelity
![Page 82: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/82.jpg)
82
Prototipação - High-Fidelity
![Page 83: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/83.jpg)
83
Validando o Protótipo
![Page 84: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/84.jpg)
84
• Em paralelo!
• Desenvolvimento da arquitetura do sistema:
Já ia esquecendo a ESw?
Interface com o usuário
Negócio
Persistência
![Page 85: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/85.jpg)
85
• Elaboração dos
diagramas
de classes:
Já ia esquecendo a ESw?
![Page 86: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/86.jpg)
86
• Elaboração dos diagramas de classes:
Já ia esquecendo a ESw?
![Page 87: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/87.jpg)
87
• Elaboração dos diagramas de classes:
Já ia esquecendo a Esw?
![Page 88: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/88.jpg)
“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...
![Page 89: Aula 6 - Design e Processo de Design de Interfaces de Usuário](https://reader033.fdocument.pub/reader033/viewer/2022052413/55b2f6eabb61ebe5268b47d5/html5/thumbnails/89.jpg)
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