Disciplina: Interface Humano-Computador Prof: João Carlos da Silva Junior
Definição Interação homem-computador é o conjunto de processos, diálogos, e ações através dos quais o usuário humano interage com um computador. conteúdo utilizado exclusivamente para fins didáticos 2
Humano-Computador Devido ao fato da interação homemcomputador estudar o homem e a máquina em comunicação é necessário, ao estudioso da área, o conhecimento tanto de máquinas como do ser humano. conteúdo utilizado exclusivamente para fins didáticos 3
Humano (Homem) teoria da comunicação; disciplinas de projeto gráfico e industrial; lingüística; ciências sociais; Questões sobre a memória, atenção, percepção psicologia cognitiva e desempenho humano conteúdo utilizado exclusivamente para fins didáticos 4
Máquinas conhecimento de técnicas de computação gráfica; sistemas operacionais; linguagens de programação; ambientes de desenvolvimento; conteúdo utilizado exclusivamente para fins didáticos 5
Exemplos IPHONE Minority Report Microsoft Surface Terminais de ATM conteúdo utilizado exclusivamente para fins didáticos 6
Introdução Resultado do design é um produto O produto é derivado das especificações fornecidas pelo cliente conteúdo utilizado exclusivamente para fins didáticos 7
Modelo Cascata conteúdo utilizado exclusivamente para fins didáticos 8
Modelo Cascata Desvantagens É difícil entender completamente e expressar os requisitos do usuário antes que algum design tenha sido feito Os custos para manutenção são maiores conteúdo utilizado exclusivamente para fins didáticos 9
Modelo Espiral Tentativa de melhorar o Modelo Cascata Apesar de usar os mesmos processos (Análise de Requisitos, Design e Implementação), mostra maior interação entre essas fases Introduz a idéia de prototipagem para maior entendimento dos requisitos conteúdo utilizado exclusivamente para fins didáticos 10
Modelo Espiral conteúdo utilizado exclusivamente para fins didáticos 11
DESIGN CENTRADO NO HUMANO (DCH) Surgiu em resposta aos vários problemas encontrados nos modelos anteriores Pressupostos Importantes O resultado de um bom design é a satisfação do cliente O processo de design envolve uma colaboração entre designers e clientes O cliente e o designer estão em constante comunicação durante o processo conteúdo utilizado exclusivamente para fins didáticos 12
Objetivos DESIGN CENTRADO NO HUMANO (DCH) Produzir sistemas fáceis de aprender e usar Seguros e Efetivos em facilitar as atividades do usuário Importante: Testes freqüentes com o usuário usando representações informais e prototipagem. conteúdo utilizado exclusivamente para fins didáticos 13
Modelo de Eason conteúdo utilizado exclusivamente para fins didáticos 14
Modelo Estrela conteúdo utilizado exclusivamente para fins didáticos 15
MODELO DE SHNEIDERMAN Modelo baseado em 3 Pilares No início do processo, o designer deve gerar um conjunto de guidelines O segundo pilar é composto de ferramentas de prototipagem O terceiro pilar é dedicado a testes de usabilidade - avaliação com experts e testes com usuários conteúdo utilizado exclusivamente para fins didáticos 16
MODELO DE SHNEIDERMAN conteúdo utilizado exclusivamente para fins didáticos 17
MODELO LUCID (Logic User- Centered Interface Design) Desenvolver o conceito do produto Realizar pesquisa e análise das necessidades - usando construção de cenários, design participativo, fluxo e seqüência de tarefas Criar conceitos e protótipos de telas - usando guidelines, guias de estilo e metáforas para o design Design interativo e refinamento - expandindo o protótipo para sistema completo; inclui avaliação por experts e testes de usabilidade Implementação e Suporte conteúdo utilizado exclusivamente para fins didáticos 18
O que leva a um bom design? Escolha um domínio no qual muitas pessoas estão envolvidas Estude a natureza das ações dessas pessoas naquele domínio, especialmente em ações repetitivas O que elas reclamam mais? Que ações gostariam de realizar? Defina software que imite padrões de ação incluindo funções que não poderiam ser feitas manualmente conteúdo utilizado exclusivamente para fins didáticos 19
O que leva a um bom design? Crie protótipos o mais cedo possível e observe como as pessoas reagem, o que quebra a experiência delas Mantenha comunicação com elas Projetar para usuários x Projetar com usuários conteúdo utilizado exclusivamente para fins didáticos 20
Não Esquecer - IHC Conheça o usuário Minimize memorização Reduza a carga de memória do usuário Otimize operacionalização Coloque o usuário no controle da interface Previna erros Torne a interface do usuário consistente conteúdo utilizado exclusivamente para fins didáticos 21
Colocar o usuário no controle Permitir o uso de mouse e teclado Mostrar mensagens descritivas e textos Prover ações e feedbacks imediatos e reversíveis Prover caminhos e saídas significativos Acomodar-se a diferentes habilidades de usuários (Acessibilidade) Tornar a interface do usuário transparente conteúdo utilizado exclusivamente para fins didáticos 22
Colocar o usuário no controle Permitir que usuários adaptem a interface Permitir a manipulação direta da interface conteúdo utilizado exclusivamente para fins didáticos 23
Reduzir a carga de memória Realçar a demanda da memória de curto prazo Contar com o reconhecimento e não relembrança Prover pistas visuais Prover defaults, undo e redo conteúdo utilizado exclusivamente para fins didáticos 24
Reduzir a carga de memória Prover atalhos de interface Prover uma sintaxe objeto-ação Usar metáforas do mundo real Prover clareza visual conteúdo utilizado exclusivamente para fins didáticos 25
Tornar a interface consistente Manter consistência intra e entre aplicações Manter os resultados da interface Prover apelos estéticos e integridade Dar suporte ao contexto das tarefas Uso cotidiano Configuração conteúdo utilizado exclusivamente para fins didáticos 26
Reconhecer o usuário Perfil de usuários Novato ou usuários de primeiro momento Conhecedor ou usuário intermitente Usuários experientes Conseqüência para o design Proposição da interface em múltiplos níveis conteúdo utilizado exclusivamente para fins didáticos 27
Prevenir Erros Completar sentenças Corrigir comandos? conteúdo utilizado exclusivamente para fins didáticos 28
Diretrizes Projeto Interfaces 1. Conheça o seu usuário ou cliente 2. Entenda a função do negócio 3. Entendimento dos princípios de bons projetos de telas 4. Desenvolva menus do sistema e esquemas de navegação 5. Selecione o tipo apropriado de janela 6. Selecione os dispositivos de controle apropriados 7. Escolha os controles de tela apropriados 8. Escreva mensagens e textos claros conteúdo utilizado exclusivamente para fins didáticos 29
Diretrizes Projeto Interfaces 1. Fornecer feedback, orientação e assistência efetivos 2. Fornecer internacionalização e acessibilidade efetivos 3. Criação de gráficos, ícones e imagens significativas 4. Escolha as cores apropriadas 5. Organização e layout de janelas e páginas 6. Teste, teste e teste conteúdo utilizado exclusivamente para fins didáticos 30
O que são guidelines? São orientações que devem ser consideradas na elaboração e avaliação de um software. São criadas, principalmente, a partir do senso comum e da experiência na elaboração de outros projetos de software. Os guidelines proporcionam uma valiosa e prática ferramenta para a aplicação de conceitos de interface voltada para o usuário, em um projeto de software. O uso de guidelines não deve ser entendido como uma receita de design, mas sim como um conjunto de princípios norteadores do design. conteúdo utilizado exclusivamente para fins didáticos 31
Guidelines Princípios de design: São guidelines mais genéricas, exigem uma interpretação antes de ser aplicadas. Ex.: Mantenha o site simples (p/websites) Regras de design: São guidelines em um nível mais detalhado. Ex.: Não ofereça uma opção para buscas em toda a rede a partir de seu próprio website. conteúdo utilizado exclusivamente para fins didáticos 32
Guidelines Guia de estilo Consiste em uma coleção de regras de design específicas e em princípios dos quais derivam as regras. São mais comuns nas guidelines de determinados fabricantes, para definir a identidade visual da interface e garantir consistência tanto no produto quanto entre produtos de um determinado fabricante. Ex.: Ao criar um ícone colorido, você deve iniciar criando primeiro a versão preto e branco e depois acrescentar cor. (Macintosh) conteúdo utilizado exclusivamente para fins didáticos 33
Onde encontrar? http://warau.nied.unicamp.br/ conteúdo utilizado exclusivamente para fins didáticos 34
O que é usabilidade? Características de um sistema Fácil de Aprender Fácil de Utilizar Fácil de Relembrar Tolerante a Erros Subjetivamente Agradável conteúdo utilizado exclusivamente para fins didáticos 35
O que é usabilidade? Combinar Objetivos conteúdo utilizado exclusivamente para fins didáticos 36
O que é usabilidade? conteúdo utilizado exclusivamente para fins didáticos 37
Usabilidade é importante? Historicamente muitas empresas subestimaram a importância da Usabilidade no fracasso ou sucesso de seu projeto web 90% dos sites comerciais tem Usabilidade deficiente Usabilidade é uma parte pequena de um projeto, porém a mais crítica porque é a parte que o usuário vê Do ponto de vista do Usuário, Usabilidade pode ser a diferença entre executar uma atividade de maneira adequada ou se frustar Do ponto de vista do Desenvolvedor, Usabilidade pode ser a diferença entre o Sucesso e o Fracasso do sistema Do ponto de vista da Gestão, um sistema de Usabilidade deficiente pode reduzir a produtividade da força de trabalho a um nível até pior do que sem o sistema Falta de Usabilidade, além de custar tempo e esforço extras, pode decretar a falência do projeto conteúdo utilizado exclusivamente para fins didáticos 38
Usabilidade - Benefícios Usuário Fácil de Aprender e Usar Gera Menos Stress Gera Confiança no Sistema Força de Trabalho mais Rápida e Eficiente Diminui Custos de Treinamento e Help Desk conteúdo utilizado exclusivamente para fins didáticos 39
Usabilidade - Benefícios Gestão do Projeto Melhora o Controle de Risco - consegue-se, por meio de testes, identificar os melhores designs Simplifica o Planejamento e Reduz Retrabalho Indica Evidência de Sucesso já na Fase de Testes conteúdo utilizado exclusivamente para fins didáticos 40
Usabilidade - Benefícios Desenvolvimento Prova que o Design Funciona os usuários validam o design bem antes do sistema ser construído, de modo que sabe-se que o design funcionará Impossibilita Mudanças de Última hora Redução no Número de Alterações pedidas durante a Homologação conteúdo utilizado exclusivamente para fins didáticos 41
Estrutura do site Refere-se a como a informação é organizada dentro de um site Permite ao usuário procurar por relacionamento de informações, que revela: Categorias Hierarquias Networks A estruturação do Site possibilita ao usuário construir um modelo mental e também o ajuda a recordar informações conteúdo utilizado exclusivamente para fins didáticos 42
Estrutura do site Seqüencial ideal para sites pequenos onde as informações fluem como uma narrativa Tipo Teia (Web) ideal para sites pequenos com usuários avançados. Acesso rápido a diferentes informações. Pode causar confusão para alguns usuários por não ser prático conteúdo utilizado exclusivamente para fins didáticos 43
Estrutura do site Hierárquica uma das melhores formas de se organizar grupos de informação. Os usuários, além de estarem mais acostumados com estruturas hierárquicas, acham a metáfora mais familiar. A maioria dos sites comerciais e corporativos adota essa estrutura conteúdo utilizado exclusivamente para fins didáticos 44
Estrutura do site Ruins Profundo e Estreito uma estrutura de menu profunda e estreita esconde a informação. O usuário deve clicar por uma série de submenus. conteúdo utilizado exclusivamente para fins didáticos 45
Estrutura do site Ruins Muito Largos Estrutura ruim porque existem muitas opções no menu principal, sobrecarregando o usuário com informações conteúdo utilizado exclusivamente para fins didáticos 46
Estrutura do site Balanceada e Quadrangular Estudos sugerem que uma mistura entre profundidade e largura podem oferecer um tempo ótimo de resposta. O usuário navega por um número mínimo de sub-menus e tem escolhas limitadas no nível do menu principal. conteúdo utilizado exclusivamente para fins didáticos 47
Navegação Ser regular, estruturada e hierárquica porque o usuário reconhecerá as consistências e relacionamentos, facilitando a sua experiência com a navegação do site Sempre fornecer informações para o usuário de onde ele está, de onde ele veio e para onde ele pode ir Deixar bem claro aos usuários que um certo link, seja ele texto ou imagem, é de fato clicável e que o mesmo o leva para o lugar em que ele espera ir Possibilitar ao usuário navegar de forma rápida pela estrutura do site Possibilitar ao usuário retornar sobre os links percorridos Possibilitar ao usuário retornar a uma home page no caso dele se sentir perdido conteúdo utilizado exclusivamente para fins didáticos 48
Navegação Um site pode ter mais de um nível de navegação. É recomendado a utilização de Navegação Global e Local porque oferece uma maneira clara de se organizar e encontrar informação em um site conteúdo utilizado exclusivamente para fins didáticos 49
Navegação Processo Agregação Como em um menu, o nível principal deve representar a coleção dos demais itens, maximizando o processo de navegação e evitando que o usuário se perca Sumarização Representa uma grande quantidade de dados de forma condensada, como por exemplo usar pequenas imagens com um tamanho inferior, como representação a de maiores resoluções. Otimizando o tempo de resposta de uma determinada página. Filtragem exibir apenas informações relevantes após uma determinada pesquisa. Quebra exibir apenas a parte inicial de uma determinada informação, dando a possibilidade de exibição do contexto como um todo, em um link, onde ficaria a critério do próprio usuário, selecioná-lo. conteúdo utilizado exclusivamente para fins didáticos 50
Metas e Objetivos Aprendizado Eficiência Memorização conteúdo utilizado exclusivamente para fins didáticos 51
Metas de Eficiência Qual o grau de dificuldade que os seus clientes encontram para comprar em seu site? conteúdo utilizado exclusivamente para fins didáticos 52
Metas de Eficácia Exemplo Comércio Eletrônico Qual é a taxa de conversão? Qual é a taxa de abandono de carrinho? conteúdo utilizado exclusivamente para fins didáticos 53
Metas de Aprendizado Quanto tempo os seus usuários demoram para aprender a interagir com o seu website? O seu site é auto-explicativo? Existe alguma área que estimule o aprendizado sobre a utilização do seu produto? conteúdo utilizado exclusivamente para fins didáticos 54
Metas de Aprendizado Exemplo Comércio Eletrônico Qual o tempo médio que as pessoas gastam para finalizar um pedido? conteúdo utilizado exclusivamente para fins didáticos 55
Metas de Memorização Depois que os seus clientes entram no seu site, eles conseguem lembrar como executaram uma tarefa? conteúdo utilizado exclusivamente para fins didáticos 56
Protótipos Antes de começar a fazer um site é feito um wireframe funcional, que nada mais é que um protótipo do produto final, remetendo a definição de toda a arquitetura de informação. conteúdo utilizado exclusivamente para fins didáticos 57
Softwares - Wireframe Axure Gliffy Visio Como construir Wireframe conteúdo utilizado exclusivamente para fins didáticos 58