Aulas 7. IHC – Projeto de Interface com o Usuário

A

IHM
Interface Humano-Máquina

Prof. Dra. Sílvia Dotta

Aulas 7. IHC – Projeto de Interface com o Usuário

Processo de desenvolvimento da interface

Projeto de Interface com o
usuário
• O projeto de interface com o usuário cria um meio efetivo de
comunicação entre o ser humano e o computador

“Para o usuário, a interface é o sistema”

Projeto de Interface - requisitos
• Mapa de Informações (Matrizes Categorizadas de Escopo).
• Análise de Tarefas (Matrizes e Fluxogramas de Tarefas).
• Regras de Negócios Fluxogramas e Documentos de Negócios).
• Testes taxonômicos.
• Escolher os elementos da interface. (texto, áudio, vídeo, foto,
infográficos)
• Contexto de uso.
• Cenário de uso.
• Requisitos para “fazer acontecer”.
Determinar os recursos técnicos para a construção da interface.
Introduzir os elementos corretos de linguagem na comunicação
com o público-alvo.
Criar conceito estético.
Introduzir a Direção de Arte no timing correto.

Projeto de Interface – design de
informação
A informação “comunica” e se torna consistente quando:

Possui uma categorização lógica e natural para o usuário dentro do
cenário de uso.

Pode ser localizada sempre no mesmo lugar.

Não perde a identidade quando associada a outros conteúdos, mas
agrega outros sentidos.

É importante e útil dentro dos contexto e cenário de uso propostos
para o projeto.

Projeto de Interface - AI
O que é mais importante ao projetarmos e construírmos interfaces?

Harmonizar Elementos de Interação.
Distribuir a informação de forma lógica e natural.
Nunca sobrepor conceitos estéticos à Arquitetura da Informação.
Harmonizar menus e categorias de navegação.
Flexibilizar sem bagunçar.
Refletir com exatidão as regras de negócio.
Tratar a parte de conteúdo como um produto editorial.
Tratar a interação com sistema como produto interativo.
Mensurar retornos para possíveis correções.
Cuidado extremo com a redudância taxonômica.
Observar o quesito acessibilidade.
Mensurar o momento correto de introduzir inovações.
Dosar o conteúdo e a oferta de novas áreas ou recursos/ conteúdos.

Não-linearidade e resgate do “fio da meada”:

É o grande desafio.
Conteúdo linear e com grande profundidade pode ser editado.
As taxonomias são de grande importância porque agregam
pistas sobre os subníveis.
Se errarmos na definição das primeiras categorias, o trabalho
estará comprometido.
A memorização da informação depende também da forma
como ela é apresentada.
As associações feitas durante a navegação substituem a
sequência temporal.
Definir núcleos da informação é algo fundamental.

Elementos de linguagem e comunicação

•Cores.
•Símbolos.
•Idioma.
•Padrões Estéticos.
•Tipos e temas de fotos.
•Sons e música.
• Etc..

Wireframes

•Wireframes devem determinar a proporcionalidade dos
elementos de informação e interação.
•Wireframe deve determinar quais os tipos de interação aparecem
em cada nível de informação.
•Wireframe deve determinar o comportamento e a posição dos
elementos nas páginas.
•Wireframe reflete a sensibilidade editorial do projeto.
•Wireframe deve refletir a taxonomia final.
•Wireframe deve especificar as etapas de interação.

Wireframes

http://www.axure.com/features


Análise
• Qual o perfil do usuário ?
– Podem haver várias percepções do sistema ?
• Quais as tarefas usadas para atingir as metas?
– Identificar quais são;
– Refiná-las;
– Tarefas resultam em objetos (ícones, menus,
etc) e ações (como manipular/organizar estes
objetos).

Projeto
• Que mecanismos de controle utilizar
– Formas de alterar e perceber alterações do estado do sistema;
– Menus ? Formulários ? Comandos ?
• Como será a ajuda ao usuário
– Mensagens (construtivas, a culpa não é do
usuário);
– Sistema de ajuda on-line.


Prototipação
• Visa provocar críticas/sugestões do usuário
• Prototipação
• Versão simplificada do sistema
• Protótipo horizontal: Amplitude: Interface quase completa mas
com funcionalidade reduzida.
• Protótipo vertical: Profundidade: Interface e Funcionalidade
completas de uma parte do sistema.


Avaliação
• Deve ser feita a cada ciclo;
• Submetida aos usuários de diferentes perfis (caso existam);
• A cada novo ciclo os protótipos tendem a se aproximar da
versão final do sistema.


AVALIAÇÃO DAS INTERFACES
• O papel da avaliação é verificar se realmente o sistema
comporta-se como esperado e atende os requisitos dos
usuários.
• Revisão de Guidelines: a interface é checada com os itens do
guideline de desenvolvimento de interfaces;
• Inspeção formal de usabilidade: os méritos e defeitos da
interface são discutidos com relação aos itens que
caracterizam a usabilidade das interfaces. (Shneiderman,
1998).

Iniciando o projeto de interface
....
• Conhecer o usuário (reuniões,pesquisa, entrevistas,
questionários...). Definir tarefas, necessidades ... Ver o
contexto
• Geração de Idéias (brainstorming, mindmaps)
• Guias para Projeto de Interface
• Lay-outs de tela e cenários
de usuários
• Prototipação

Prototipação - Conceitos
• É uma abordagem baseada numa visão evolutiva do
desenvolvimento de software, afetando o processo como um
todo. Esta abordagem envolve a produção de versões de
protótipos (análogo a maquetes para a arquitetura) - de um
sistema futuro com o qual pode-se realizar verificações e
experimentações para se avaliar algumas de suas qualidades
antes que o sistema venha realmente a ser construído.

Personas

É um personagem fictício, arquétipo hipotético de um grupo de
usuários reais, criada para descrever um usuário típico.
Elementos de uma persona
•Identidade: nome, idade e outros dados demográficos
•Status: primária, secundária ou outro stakeholder (p. ex.:
antiusuário)
•Objetivos: com o sistema e fora dele
•Habilidades: especialidade (educação, treinamento e
competências)
•Tarefas: quais? Frequência? Importância? Duração?
•Relacionamentos: ajuda a identificar stakeholders
•Requisitos: de que a persona precisa?
•Expectativas: como a persona organiza as informações? Como
acredita que o sistema funciona?

Cenários

Descrevem o comportamento e as experiências dos atores, para
atender a vários objetivos:

•Descrever uma história num domínio de atividade
•Capturar requisitos e auxiliar do entendimento da atividade
•Levantar questões sobre a introdução de tecnologia
•Explorar diferentes soluções de design
•Avaliar se um produto satisfaz a necessidade de seus usuários

Elementos de um cenário: ambiente ou contexto; atores, objetivos,
planejamento, ações, eventos, avaliação

Personas e Cenários
Luiz Fernando Sallum, 16 anos, Masculino,
Rio de Janeiro, Classe social B, Mora com os pais e avós,
estudante do Ensino Médio, dá aula de tênis no
condomínio onde mora.

Do alto dos seus 16 anos, o carioca Luiz Fernando Sallum é
um investidor do tipo “agressivo”. O estudante do Ensino Médio
acompanha de perto as notícias sobre o pregão há um ano e
comprou suas primeiras ações em janeiro. Juntou o dinheiro
ganho de aniversário dos pais e avós com o que conseguiu em
três meses dando aulas de tênis no condomínio e transformou tudo em quase um
lote de ações Vale. “No primeiro mês, meu lucro foi de 31%. Achei a Bolsa de
Valores um paraíso”, conta.
Sallum acompanha os gráficos de mais de 80 ações na tela do seu sistema de
Home Broker. A um movimento destoante, busca o motivo. Se a justificativa
convence e sugere mais alta, compra o papel que geralmente fica pouco na
carteira. O estudante gosta de negociar ações de empresas menores e mais
sujeitas à volatilidade. E já aprendeu que para evitar perdas nesses casos, deve
entrar já de olho na saída. “Programo o stop loss (ordem de venda que limita o
prejuízo) logo abaixo do preço da compra”, ensina. “Pois quando vem um tubarão
vendendo, não tem para onde correr.”
Cenário construído para o
investbolsa.com.br

Protótipo de Baixa Fidelidade
• Fidelidade refere-se ao nível de detalhe.
• é uma representação artística, um esboço, com
muitos detalhes omissos
• Vantagem: não tomam muito tempo para seu
desenvolvimento e não requer equipamento
dispendioso.

Protótipos de Baixa Fidelidade
• são construídos, na
maioria das vezes, em
papel e podem ser
testados com
usuários reais, assim,
permitem demonstrar
o comportamento da
interface muito cedo
no desenvolvimento

Protótipos de baixa fidelidade
• seu uso pode aumentar a qualidade das
interfaces, pois, permitem várias avaliações pelo
usuário em pouco tempo e o retorno imediato.

Protótipos de baixa fidelidade

• com eles, os usuários são obrigados a pensar no
conteúdo em vez da aparência, uma vez que
somente são realizados esboços que servem
como protótipos

Protótipos Físicos de Baixa Fidelidade
• Neste tipo de protótipo, as dimensões e o
aspecto são importantes, embora ainda possam
ser feitos com materiais simples como cartolina e
massa de modelar

Exemplo de Protótipo de baixa
fidelidade
• Protótipos em papel: é desenvolvido um conjunto de
interfaces associadas a cenários de utilização que são
apresentados aos usuários.
• Este tipo de prototipação é barata e eficiente (Rogers, Sharp, Preece,
2002)(Kotonya, Sommerville 1998).
• É mais indicada quando o sistema a desenvolver é software. Não é
necessário desenvolver software executável.
• Os analistas e usuários percorrem estes cenários, simulando a
utilização do sistema, sendo analisado as reações dos utilizadores, a
informação requerida e a forma de interação com o sistema.
• Este método é muito eficiente para sistemas interativos, sendo
considerado como protótipo de baixa fidelidade (Rogers, Sharp, Preece,
2002).

A

Protótipos de Alta Fidelidade

• assemelham-se ao produto final, neles os detalhes são
importantes, pois, simulam todas as funcionalidades do
sistema.

Wearable computer - Eurotech

• A apresentação
formal sugere
“produto acabado”,
pois além de
visualizar as
conexões,
conseguimos
visualizar o design: o
arranjo gráfico, o uso
das cores, os tipos,
Soft-shell mobile phone – etc.
http://www.nec-design.co.jp/showcase/

• acarreta mais tempo
e dinheiro investido
em sua confecção do
que no protótipo de
baixa fidelidade

P-ISM :
Pen-style Personal Networking Gadget
Package
http://www.nec-design.co.jp/showcase/

Comparativamente temos:
Aplicação Custo de Custo de
Tipo Fator +
no ciclo de alterar a alterar a
Protótipo positivo
desenvolv. aparência seqüência

Flexibilidade,
facilidade de
Baixa alterar Quase
Início Baixo
fidelidade seqüência, nenhum
comportament
o geral

Fidelidade da
Alta
aparência Final Baixo Alto
fidelidade
(Look & Feel)

Aulas 7. IHC – Projeto de Interface com o Usuário

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Aulas 7. IHC – Projeto de Interface com o Usuário

Aulas 7. IHC – Projeto de Interface com o Usuário