aula 3 de eng

Prévia do material em texto

ENGENHARIA DE USABILIDADE E INTERFACES 
Unidade III – Desenvolvimento de Projetos de IHC 
 
Wendel Castro – wendelcastro20@gmail.com 
Conteúdo Programático desta Unidade 
 Técnicas de Concepção 
 Técnicas de Modelagem 
ENGENHARIA DE USABILIDADE E INTERFACES 
• Demonstrar técnicas destinadas a implementar as 
especificações para a interface e a usabilidade. 
Objetivo 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Projeto 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
• Geração e Organização de Ideias: 
– Brainstorm 
– Card Sorting (Arranjo de Cartas) 
– Diagrama de Afinidade 
 
• Concepção: 
– Narrativa Gráfica (Storyboard) 
– Maquetes 
– Prototipagem Rápida 
• Baixa Fidelidade 
• Alta Fidelidade 
Técnicas de Concepção 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Brainstorm – Tempestade de Ideias 
Unidade III – Projeto de IHC 
• Visa a geração de ideias em grupo 
• Pessoas se reúnem para resolver um problema, ou para 
criar novos sistemas 
• Permite a melhor compreensão do problema, e da 
solução 
• No mínimo 2 pessoas e no máximo 12 pessoas 
• Etapas: 
– 1 - Geração de ideias 
– 2 – Crítica das ideias 
• Deve existir uma pessoa que comande a reunião 
• Registrar as ideias 
ENGENHARIA DE USABILIDADE E INTERFACES 
Brainstorm – Tempestade de Ideias 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Card Sorting – Arranjo de Cartas 
Unidade III – Projeto de IHC 
• Visa descobrir o modelo mental dos usuários em relação aos itens de 
informação para uma aplicação 
 
• Analista descreve os itens em fichas de papel e espalha sobre a 
mesa 
 
• Um usuário é convidado para organizar em grupos, e nomear os 
grupos 
 
• Não é necessário mais que seis sessões individuais 
 
• Os resultados são combinados, se necessário estatisticamente 
ENGENHARIA DE USABILIDADE E INTERFACES 
Card Sorting – Arranjo de Cartas 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Diagrama de Afinidade 
Unidade III – Projeto de IHC 
• É utilizado para organizar uma grande quantidade de 
itens em grupos lógicos 
 
• Projetistas e usuários alvo trabalham juntos para obter um 
consenso sobre a organização de itens 
 
• Os diagramas de afinidade são usados geralmente para 
identificar e agrupar as funções de um produto em 
desenvolvimento 
ENGENHARIA DE USABILIDADE E INTERFACES 
Diagrama de Afinidade 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Storyboard – Narrativa Gráfica 
Unidade III – Projeto de IHC 
• É a representação das interações entre os usuários e o sistema em 
seu ambiente de trabalho 
 
• Consiste do detalhamento de um cenário do sistema, através de uma 
sequência de desenhos. 
 
• Os desenhos devem ser feitos em grandes folhas de papel e 
colocadas na parede de uma sala de reunião 
 
• Os desenhos vão ser avaliados pelos usuários e especialistas, com 
base nos requisitos de usabilidade 
 
• É necessário que o projetista descreva os acontecimentos 
desenhados 
ENGENHARIA DE USABILIDADE E INTERFACES 
Storyboard – Narrativa Gráfica 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Storyboard – Narrativa Gráfica 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Maquetes – Protótipos em Papel 
Unidade III – Projeto de IHC 
• São usados para esclarecer e desenvolver requisitos específicos para 
a interface do programa 
• Favorecem a concepção participativa – bastar saber desenhar 
• Permite simular e testar a interação com o usuário 
• Proporciona a identificação precoce de problemas de usabilidade 
 
• Ciclo de construção de maquetes: 
– Conceito: Explorar diferentes linguagens gráficas nos vários aspectos 
conceituais e estruturas gráficas das telas 
– Projeto das Preliminar das Telas: Definir o projeto inicial de cada tela 
– Interação: Organizar uma estrutura de telas 
– Projeto detalhado das telas: Possibilidades de elementos de arte, cores 
e estilo 
– Teste de Telas: Testar e revisar as tela 
ENGENHARIA DE USABILIDADE E INTERFACES 
Maquetes – Protótipos em Papel 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Prototipagem Rápida 
Unidade III – Projeto de IHC 
• É a implementação de programas de software que 
simulem o sistema final com mais fidelidade que as 
maquetes de papel 
 
• Permite obter um feedback mais fiel sobre os problemas e 
vantagens da interface em desenvolvimento 
 
• Protótipos: 
– Baixa fidelidade: Muitos aspectos a serem “explorados” 
– Alta fidelidade: Muitos aspectos a serem “validados” 
ENGENHARIA DE USABILIDADE E INTERFACES 
Prototipagem de Baixa Fidelidade 
Unidade III – Projeto de IHC 
• São protótipos informatizados 
 
• Esse protótipo podem ser validado por representantes de 
usuários em simulações de uso mais realista que 
maquetes de papel 
 
• Porém é um pouco limitado no que diz respeito ao nível 
de detalhamento, conteúdo e aparência 
 
• Pencil é uma ferramenta para modelagem de telas 
ENGENHARIA DE USABILIDADE E INTERFACES 
Prototipagem de Baixa Fidelidade 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Prototipagem de Alta Fidelidade 
Unidade III – Projeto de IHC 
• É criado com ferramentas que proporcionam 
componentes de interface com aparência e 
comportamento parecidos com o pretendido 
 
• Contam com um conteúdo de informação mais elaborado 
 
• É possível obter medidas de usabilidade: 
– Eficácia 
– Eficiência 
– Satisfação 
ENGENHARIA DE USABILIDADE E INTERFACES 
Prototipagem de Alta Fidelidade 
• Exemplo: Netbeans utilizando Swing, sem a construção das classes de negócio 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
• Conjunto de etapas para a definição de 
elementos concretos, partindo de elementos 
abstratos; 
 
• Fase de refinamento do trabalho de concepção, 
gerando requisitos que serão usados no projeto 
de IHC. 
Técnicas de Modelagem de Interface 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Técnicas de Modelagem de Interface 
• The Bridge 
 
• Usage-centered Design 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge 
Unidade III – Projeto de IHC 
• Proposta por Tom Dayton em 1996. 
 
• Essa abordagem baseia-se em uma sequência de sessões de 
projeto participativo, envolvendo usuários, engenheiros de 
usabilidade, engenheiros de software, programadores. 
 
• De preferência todo o trabalho previsto deve ser realizado em um ou 
dois dias de reuniões em salas equipadas apenas de mesas, 
cadeiras, lápis, papel, cartões adesivos e desenhos de janelas pré- 
impressos. 
 
• Nelas, projetistas e usuários irão realizar a passagem (“The Bridge”) 
entre os requisitos de usabilidade e o projeto de uma interface. 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge 
Unidade III – Projeto de IHC 
• É mais direta e econômica que a abordagem centrada 
no uso, propondo poucas transformações, por meio das 
quais o modelo conceitual e definido a partir dos grandes 
componentes que compõem um projeto (Visão macro). 
 
• Esta abordagem envolve três passagens principais: 
– Fluxo de tarefas; 
– Mapear os fluxos de tarefa em objetos da tarefa; 
– Mapear objetos da tarefa em objetos de interfaces. 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge 
Unidade III – Projeto de IHC 
• Fluxo das Tarefas:– É a forma de expressão dos requisitos do usuário 
 
– As descrições nesta etapa se fazem em um alto nível de 
abstração, já que elas se referem aos objetivos dos usuários e 
não entram em detalhes sobre o sistema ou a interface. 
 
– Nessa primeira etapa os projetistas e usuários realizam a 
definição de um novo fluxo de trabalho para o usuário de novo 
sistema. 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge 
Unidade III – Projeto de IHC 
• Fluxo das Tarefas: 
– Este é descrito por um fluxograma apresentando blocos para o 
início, os processos e decisões e o resultado esperado do 
trabalho. 
 
– As descrições nos blocos devem conter nomes, associados aos 
objetos e atributos manipulados pelos usuários, e verbos, 
associados às ações realizadas pelos usuários sobre tais objetos. 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge 
• Exemplo de Fluxo de Tarefa (Check in no Hotel) 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge – Objetos da Tarefa 
Unidade III – Projeto de IHC 
• Os objetos de tarefa são as entidades com as quais os 
usuários irão realizar uma tarefa com o sistema 
(independentemente de sua interface). 
 
• Uma vez validados, os fluxos de tarefas devem ser 
analisados visando a definição de classes de objetos de 
tarefa. 
 
• Estas correspondem a classes de informação por meio 
das quais os usuários realizam suas tarefas. 
 
• Elas não referem ainda a funções do novo sistema. 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge – Objetos da Tarefa 
Unidade III – Projeto de IHC 
• Identificação da classe 
– Descrições dos fluxos de tarefa 
• Propriedades 
– Atributos 
– Componentes 
• Ações 
– Verbos da descrição dos fluxos de tarefas 
• Relações de agregação entre objetos 
– Desktop. 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge – Objetos da Tarefa 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge – Objetos da Interface 
Unidade III – Projeto de IHC 
• Objetos da tarefa 
– Identificação do objeto de tarefa 
– Item em listas 
– Apresentação de janela com suas informações 
• Propriedades dos objetos da tarefa 
– Texto 
– Figuras 
– Ícones 
• Ações de objeto de tarefa 
– Menu 
– Barra de ferramentas 
– Grupo de botões 
ENGENHARIA DE USABILIDADE E INTERFACES 
The Bridge – Objetos da Interface 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Unidade III – Projeto de IHC 
• Proposto Lary Constantine e Lucy Lockwood em 1999; 
• Visa construir projetos de IHC centrados no uso do sistema; 
• É mais detalhada que a The Bridget . Propõe um número maior de 
transformações e, principalmente, um estilo de concepção partindo 
dos pequenos componentes. 
• No projeto centrado de uso, as decisões de projeto são baseadas em 
análises “objetivas” de modelos de usuários de tarefas, de conteúdos 
de interfaces. 
• A abordagem está organizada em três etapas de modelagens: 
– Papéis de usuários 
– Casos de tarefas 
– Arquitetura de interface e de navegação 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Papéis de Usuários 
• O papel de usuário é definido como um tipo de usuário 
que apresenta necessidades, interesses, expectativas, 
comportamentos ou responsabilidades específicas em 
relação ao sistema. 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Casos de Tarefa 
• Envolve casos de uso essenciais ou casos de tarefa. 
 
• São definidos como narrativas estruturadas e 
simplificadas de interação realizada pelo usuário 
desempenhando seu papel por meio do sistema. 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Mapas de Casos de Tarefa 
• Exemplo Especialização 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Mapas de Casos de Tarefa 
• Exemplo Extensão: 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Mapas de Casos de Tarefa 
• Exemplo Composição: 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Usage-centered Design 
Mapas de Casos de Tarefa 
• Exemplo Afinidade: 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Estrutura de Conteúdos da Interface 
Unidade III – Projeto de IHC 
• Estrutura de conteúdos capaz de apoiar os usuários 
quando estiverem desempenhando seus papéis nos 
casos de tarefa definidos no projeto. Podem ser: 
– Modelo de contextos de interação 
– Mapa de navegação entre contextos 
ENGENHARIA DE USABILIDADE E INTERFACES 
Modelo de contextos de interação 
Unidade III – Projeto de IHC 
• “Espaços” ou “locais” que devem estar equipados com as 
ferramentas e os materiais de que os usuários necessitam 
para a realização de suas tarefas. 
• As regras gerais de mapeamentos são as seguintes: 
– Os casos de tarefa correspondem a espaços de trabalho que 
serão associados a uma janela ou caixa de diálogo; 
– Ferramentas representam as funções que processam dados e 
informações; 
– Materiais representam esses dados e informações. 
ENGENHARIA DE USABILIDADE E INTERFACES 
Modelo de contextos de interação 
Unidade III – Projeto de IHC 
• As descrições nessa etapa da modelagem devem se 
referir aos componentes de interface abstratos. Assim, os 
autores propõem que nessa etapa se faça a construção 
de protótipos abstratos, espécies de maquetes feitas de 
componentes abstratos. 
 
• Para os autores, Constantine e Lockwood, não é 
necessário, nem prático, tentar definir soluções de layout 
nessa etapa, o que será feito mais adiante, na etapa de 
projeto detalhado. 
ENGENHARIA DE USABILIDADE E INTERFACES 
Estrutura de Conteúdos da Interface 
• Mapa de navegação entre contextos: 
– Um mapa de navegação, basicamente é um diagrama de 
transição de dados onde é representados por retângulos e flechas 
conectando espaços. 
Unidade III – Projeto de IHC 
ENGENHARIA DE USABILIDADE E INTERFACES 
Considerações sobre o projeto IHC 
Unidade III – Projeto de IHC 
• Características favoráveis das diversas técnicas de 
concepção de Interface Humano-Computador: 
– Envolver soluções relacionadas aos aspectos essenciais da 
interface inicialmente; 
 
– Prever a descrição de soluções em termos abstratos 
inicialmente, e detalhar progressivamente conforme o projeto 
avança; 
 
– Prever transformações, representando com mapeamento entre 
aspectos de uma representação e outra; 
 
– Prever diversas oportunidades para que tais definições sejam 
repartidas e validades pelos usuários. 
ENGENHARIA DE USABILIDADE E INTERFACES 
Projetar Para Usuários 
 Abordagem dominante 
 Aplicação de teorias, leis e 
princípios gerais 
 O Ergonomista/projetista 
atua em nome do usuário 
 Propício para projetos 
genéricos 
 O Ergonomista decide o que 
é melhor para o usuário 
Projetar Com Usuários 
Unidade III – Projeto de IHC 
 Abordagem resultante de críticas ao 
"projeto para usuários" 
 Ergonomia participativa 
 Consideração com questões inerentes 
ao ser humano: ambições, crenças, 
emoções e outras 
 Ergonomista atua como agente de 
mudança 
 Abordagem apropriada para projetos 
identificados ou locais 
 Os usuários decidem por si mesmos 
ENGENHARIA DE USABILIDADE E INTERFACES 
A abordagemde projeto centrado no usuário, leva 
em conta o ser humano em cada etapa do 
desenvolvimento de um produto ou serviço. 
Tudo que o usuário experimenta deve ser 
resultado de uma decisão consciente da parte do 
projetista. 
Unidade III – Projeto de IHC