Aulas 7. IHC – Projeto de Interface com o Usuário
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,374 views

 

Statistics

Views

Total Views
1,374
Views on SlideShare
1,367
Embed Views
7

Actions

Likes
2
Downloads
76
Comments
0

1 Embed 7

http://convergencia.grou.ps 7

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • AIHMInterface Humano-MáquinaProf. Dra. Sílvia DottaAulas 7. IHC – Projeto de Interface com o Usuário
  • Processo de desenvolvimento da interface
  • Projeto de Interface com ousuá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çãocom o público-alvo. Criar conceito estético. Introduzir a Direção de Arte no timing correto.
  • Projeto de Interface – design deinformaçãoA informação “comunica” e se torna consistente quando: Possui uma categorização lógica e natural para o usuário dentro docenário de uso. 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.
  • 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.
  • 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.
  • 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..
  • 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.
  • Projeto de Interface - AI Wireframes
  • Projeto de Interface - AI Wireframes
  • Projeto de Interface - AI Wireframes
  • Projeto de Interface - AI Wireframes
  • Projeto de Interface - AI Wireframes
  • Projeto de Interface - AIWireframes
  • Projeto de Interface - AIhttp://www.axure.com/features
  • Processo de desenvolvimento da interfaceAná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).
  • Processo de desenvolvimento da interfaceProjeto• 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.
  • Processo de desenvolvimento da interfacePrototipaçã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.
  • Processo de desenvolvimento da interfaceAvaliaçã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.
  • Processo de desenvolvimento da interfaceAVALIAÇÃ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).
  • Processo de desenvolvimento da interface
  • 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 emtrês meses dando aulas de tênis no condomínio e transformou tudo em quase umlote de ações Vale. “No primeiro mês, meu lucro foi de 31%. Achei a Bolsa deValores um paraíso”, conta.Sallum acompanha os gráficos de mais de 80 ações na tela do seu sistema deHome Broker. A um movimento destoante, busca o motivo. Se a justificativaconvence e sugere mais alta, compra o papel que geralmente fica pouco nacarteira. O estudante gosta de negociar ações de empresas menores e maissujeitas à volatilidade. E já aprendeu que para evitar perdas nesses casos, deveentrar já de olho na saída. “Programo o stop loss (ordem de venda que limita oprejuízo) logo abaixo do preço da compra”, ensina. “Pois quando vem um tubarãovendendo, não tem para onde correr.” Cenário construído para o investbolsa.com.br
  • ATipos 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.
  • 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 baixafidelidade • 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).
  • Interface Humano Máquina
  • AProtótipos de Alta Fidelidade
  • 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
  • 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/
  • 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 Packagehttp://www.nec-design.co.jp/showcase/
  • Comparativamente temos: Aplicação Custo de Custo deTipo Fator + no ciclo de alterar a alterar aProtótipo positivo desenvolv. aparência seqüência Flexibilidade, facilidade deBaixa alterar Quase Início Baixofidelidade seqüência, nenhum comportament o geral Fidelidade daAlta aparência Final Baixo Altofidelidade (Look & Feel)