aulas 7. ihc – projeto de interface com o usuário

A

Prof. Dra. Sílvia Dotta

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

IHM Interface Humano-Máquina

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”

• 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.

Projeto de Interface - requisitos

• 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çãocom o público-alvo.� Criar conceito estético.� Introduzir a Direção de Arte no timing correto.

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.

Projeto de Interface – design de informação

� Pode ser localizada sempre no mesmo lugar.

� Não perde a identidade quando associada a outros conteúdos, masagrega outros sentidos.

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

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.

Projeto de Interface - AI

� 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 agregampistas sobre os subníveis.� Se errarmos na definição das primeiras categorias, o trabalho


� Se errarmos na definição das primeiras categorias, o trabalhoestará 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.


•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 aparecemem cada nível de informação.•Wireframe deve determinar o comportamento e a posição dos


•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

Projeto de Interface - AIhttp://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;


– 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.


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.


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


• 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• 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. 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)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•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 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

A

Tipos de Protótipos

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.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 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.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).

Interface Humano Máquina

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, conexões, conseguimos visualizar o design: o arranjo gráfico, o uso das cores, os tipos, etc.Soft-shell mobile phone –

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:

Tipo Protótipo

Fator + positivo

Aplicação no ciclo de desenvolv.

Custo de alterar a aparência

Custo de alterar a seqüência

Baixa

Flexibilidade, facilidade de alterar

InícioQuase

BaixoBaixa fidelidade

alterar seqüência, comportamento geral

InícioQuase

nenhumBaixo

Alta fidelidade

Fidelidade da aparência (Look & Feel)

Final Baixo Alto

aulas 7. ihc – projeto de interface com o usuário

Documents