Interface Humano Computador

Perspectiva de Síntese
Alunos: João Victor de Oliveira Dantas
Gabriel Cardoso Barreto Lima de Meneses
Ellen Vitória Menezes Lima
Misael Falcão Luz de Souza
Danilo Barreto Davila Resende
Erick Santos Resende
O que é Síntese?

• Perspectiva na filosofia
• Tese
• Antítese
• Síntese
O Processo do Design

• As 3 etapas:
• Analise: Estudar a situação atual
• Síntese: Produzir a solução
• Avaliar se resolveu o problema
A síntese e sua constante evolução

• No desenvolvimento de Software
• Democratização da tecnologia acelera a evolução
Computação Gráfica, Design e IHC andam
juntas

• As novas preocupações
• Ícones
• Fontes
• Textos
• Layout
• Cores
• Backgrounds
A complexidade do desenvolvimento

“milagre mais comum da engenharia de

software é a transição da análise para o
projeto e do projeto para o código” - Richard
Due
A Perspectiva da Síntese

• Contexto de Uso
• Definição da nova estrutura do trabalho
• Especificação da usabilidade esperada
• O Projeto da Interface
1. Contexto de Uso

• Estudar a interação do usuário com o sistema

• Entender a realidade do usuário
• Onde?
• Quando?
• Como?
• A norma ISO 9241:11 formaliza e define componentes de um contexto de
uso, divididos em:
• Usuário
• Tarefas com o sistema
• Equipamento
• Aspectos do ambiente (físico, social, etc)
Affordance

• Explícito
• Padrão
• Escondido
• Metafórico
Tipos de Affordance

• Tipo 1: Explícito
Tipos de Affordance

• Tipo 2: Padrão
Tipos de Affordance

• Tipo 3: Escondido
Tipos de Affordance

• Tipo 4: Metafórico
Como Contraexemplo

• Estranhamos quando
foge das regras
2. Definição da nova estrutura do trabalho

• M.A.D.
• Definição encontrada em artigos publicados por Scapin (1998)
• Na tarefa:
• Nome
• Estado-inicial e Estado-final
• Objetivo
• Pré-Condições e Pós-condições
• Atributos
2. Definição da nova estrutura do trabalho

• Tarefas de 2 tipos:
• Elementar
• Composta
• Atributos e Eventos
2. Definição da nova estrutura do trabalho

• Pontos Positivos:
• Objetivos
• Lógica de realização da tarefa
• Objetivos envolvidos
• Métodos Utilizados
• Restrições
• Incoerências e incompletudes
• Fatores de criticalidade
3. Especificação da usabilidade esperada

• O que é a usabilidade?
• Existem 3 princípios que regem a usabilidade
• Eficácia
• Eficiência
• Satisfação
• Como melhorar a usabilidade?
• Métricas Qualitativas e Quantitativas
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 1. Carga de
trabalho
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 2. Condução possui 4 sub critérios

• Incentivo
• Agrupamento de itens
• Feedback imediato
• Legibilidade
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 3. Adaptabilidade
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 4. Controle
Explícito
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 5. Gestão de Erros
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 6. Compatibilidade
Os 8 Critérios
Ergonômicos
Scapin e
Bastien
6. Compatibilidade
Os 8 Critérios
Ergonômicos
Scapin e
Bastien
6. Compatibilidade
Os 8 Critérios
Ergonômicos
Scapin e
Bastien
6. Compatibilidade
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 7. Consistência
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 7. Consistência
Os 8 Critérios Ergonômicos
Scapin e Bastien

• 8. Significância de
códigos
• Programa Sibelius
O caso dos 3 cliques

• Teoria UI/UX dos anos 90

• Causaram Problemas
• Jakob Nielsen provou o contrário

“a capacidade dos usuários de encontrar produtos em um site de comércio

eletrônico aumentou em 600% depois que o design do site foi modificado e o
acesso aos produtos ficou a 4 cliques da página inicial, em vez de 3.” - Jakob
Nielsen

• Simplicidade, lógica de agrupamento de rótulos são mais importantes que

cliques
O caso dos 3 cliques

• “Se levarmos essa ideia de reduzir

cliques a risca, Spotify teria apenas o
botão play, para ouvir as músicas” –
Comunicado do Spotify
O caso dos 3 cliques

• O Caso da Apple
4. O Projeto da Interface – Ideias Gerais

• Fase de detalhamento do contexto de uso

• É onde serão definidas as características das interfaces, levando
em conta os dados levantados anteriormente
• Abordagens famosas para a fase de projeto da interface: “The
Bridge” (Tom Dayton et. al., 1996) e “Usage-Centered Design”
(Constantine, Lockwood, 1999)
4.1. The Bridge

• Baseado em Orientação a Objetos

• Tem como objetivo fazer uma “ponte” entre os requisitos de
usabilidade e o projeto de uma interface
• Propõe sessões de projeto participativo com diversos agentes:
• Usuários
• Engenheiros de software
• Engenheiros de usabilidade
• Programadores
4.1.1. The Bridge – Etapas

• Exigências dos usuários → Fluxo de tarefas

• Fluxo de tarefas → Objetos de tarefa
• Objetos de tarefa → Objetos de interface
4.1.2. The Bridge – Visualização

Exemplo de janelas
Fluxo de tarefa Objetos de tarefa primária e secundárias
4.2. Usage-Centered Design

• Ideia: como incorporar usabilidade ao processo de desenvolvimento de

software?
• Por meio do foco nas intenções e padrões dos usuários
• ”Usage-Centered Design é uma abordagem sistemática e baseada em modelos
para o design visual e interativo para interfaces de usuário em software e
aplicações web” (CONSTANTINE, LOCKWOOD)
• Inspirações: orientação a objetos, metodologia ágil
• Fortemente baseado em modelos abstratos, “casos de uso essenciais” –
• Processo sistemático, formal e especificado
• Permite reduzir testes de usabilidade e tempo gasto em refinamento
4.2.1. Usage-Centered ou User-Centered?

• São duas abordagens distintas!

• Focos diferentes
• Metodologias diferentes
Usage-Centered Design
Metodologia formal e sistemática
Processo de design baseado em
modelagem
Valoriza modelagem exploratória,
validação de modelos e avaliações de
usabilidade
Processo altamente formal e
especificado
User-Centered Design
Metodologia informal
Processo de design baseado em
prototipagem iterativa
Valoriza testes e feedback do usuário,
design participativo
Processo informal e variavel
Bibliografia

• http://docente.ifrn.edu.br/joaoqueiroz/disciplinas/ihc-interacao-humano-computador/aulas/aula-3#:~:text=Contexto%20de%20uso%3A,ocorre
%20a%20intera%C3%A7%C3%A3o%20(onde).
• http://www.inf.ufsc.br/~edla.ramos/ine5624/_Walter/Normas/Parte%2011/iso9241-11F2.pdf
• https://www.treinaweb.com.br/blog/affordances-desenhando-interfaces-intuitivas#:~:text=A%20defini%C3%A7%C3%A3o%20de%20Affordances
%20foi,de%20forma%20intuitiva%2C%20sem%20explica%C3%A7%C3%A3o.
• https://homepages.dcc.ufmg.br/~clarindo/arquivos/disciplinas/eu/material/transparencias/topicos/5-1-analise-contexto-uso.pdf
• https://en.wikipedia.org/wiki/Usage-centered_design
• https://dl.acm.org/doi/pdf/10.5555/3290281.3290311
• https://www.researchgate.net/figure/Comparison-of-User-Centered-and-Usage-Centered-Design_tbl1_3247829
• https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.1028.4306&rep=rep1&type=pdf
• https://ronnison.files.wordpress.com/2018/06/engenharia-de-usabilidade-aula-9.pdf
• https://lithebridge.files.wordpress.com/2015/05/the-bridge-documento.pdf