3. 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”
4. 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.
5. 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.
6. 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.
7. Projeto de Interface - AI
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.
8. Projeto de Interface - AI
Elementos de linguagem e comunicação
•Cores.
•Símbolos.
•Idioma.
•Padrões Estéticos.
•Tipos e temas de fotos.
•Sons e música.
• Etc..
9. Projeto de Interface - AI
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.
17. Processo de desenvolvimento da interface
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).
18. Processo de desenvolvimento da interface
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.
19. Processo de desenvolvimento da interface
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.
20. Processo de desenvolvimento da interface
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.
21. Processo de desenvolvimento da interface
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).
23. 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
24. 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.
25. 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?
26. 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
27. 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
29. 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.
30. 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
31. 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.
32. 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
33. 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
34. 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).
38. 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
39. Protótipos de Alta Fidelidade
• 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/
40. Protótipos de Alta Fidelidade
• 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/
41. 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)
