Post on 06-Jun-2015
description
UNIVERSIDADE FEDERAL RURAL DE PERNAMBUCO
CENTRO DE EDUCAÇÃO A DISTÂNCIALICENCIATURA EM COMPUTAÇÃO
INTERFACE HOMEM-MAQUINAPRIMEIRO ENCONTRO PRESENCIAL
Tutor: Rodrigo Lins Rodrigues
rodrigomuribec@hotmail.com2011.2
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Visão geral sobre a disciplina…
2011.2
48/2
Interface Homem-Máquina
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
48/3
Agenda
Objetivos da disciplina Conteúdo Metodologia Avaliações Datas importantes Outras informações pertinentes
2011.2
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Quais os objetivos?
2011.2
48/4
A objetivo principal da disciplina de Interface Homem-Máquina é apresentar uma visão geral das bases teóricas, modelos e métodos para o projeto e a avaliação de interfaces homem-máquina.
(Interface Homem-Máquina) = (Interação Humano-Computador) = (Design da Interação);
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Quais os objetivos específicos?
2011.2
48/5
Possibilitar o desenvolvimento de protótipos de interfaces para aplicações computacionais;
Discutir metas e métodos para a avaliação de interfaces homem-máquina;
Discutir aspectos relativos ao projeto e avaliação da documentação de produtos;
Apresentar paradigmas de interação homem-máquina emergentes
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Qual o conteúdo programático planejado?
2011.2
48/6
Parte I – Fundamentos e conceitos sobre IHC Interfaces Cognição visual e níveis cognitivos Ergonomia e usabilidade
Parte II – Design e linguagem visual Princípios gerais de design de interface Ícones e textos Estrutura de interface e layout Imagens e função de comunicação
Parte III – Design e metodologia Discussão sobre o projeto de interface
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Quais os tipos de atividades de avaliação?
2011.2
48/7
Será constituído de dois tipos: Atividades virtuais
Participação nos fóruns e chats Realização das atividades virtuais
Atividades presenciais Apresentação de seminários (1AVA) Realização e apresentação de projetos
(2AVA) Avaliação tradicional (3AVA)
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Como será a avaliação?
2011.2
48/8
Adotaremos o procedimento padrão de avaliação da Instituição, isto é…. a nota de avaliação corresponde a média
dada pelas notas obtidas com as atividades virtuais e a nota da avaliação presencial
A média das atividades virtuais corresponderá a 30% da nota final e a média das avaliações presenciais corresponderá a 70% .
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Como serão as avaliações?
2011.2
48/9
Primeira avaliação (1AVA): corresponderá apresentação de um seminário em equipe
considerando algum dos temas proposto para a disciplina.
Segunda avaliação (2AVA): corresponderá a apresentação e entrega de um projeto de
interface de software.
EAD/UFRPE - LC - PLANO DE ENSINO
Seminário da Disciplina
2011.2
48/10
A 1AVA consistirá da elaboração e apresentação de um seminário com tema relacionado ao conteúdo da disciplina e previamente estabelecido;
O seminário será realizado em EQUIPE;
Não poderá haver duas equipes com um mesmo tema;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Temas sugeridos para o Seminário
2011.2
48/11
Pode ser um dos seguintes: Ergonomia do software * Engenharia Cognitiva Engenharia Semiótica Estilos ou modelos de interação homem-
computador Princípios de design para o software educacional * Processo de design de interface * Design de interface para a web * Design de interface para software multi-usuário * Acessibilidade *
EAD/UFRPE - LC - PLANO DE ENSINO
Entregas referente ao Seminário
2011.2
48/12
Deverão ser entregues para avaliação (postado no ambiente): 1) Apresentação do seminário (slides) 2) Resumo do conteúdo apresentado no seminário
Não esqueçam de nomear o arquivo segundo o padrão: Nome do Pólo-Tema do Seminário.zip, exemplo CAUCAIA-
Modelos de Interação.zip Apresentação
É de extrema importância a postagem desses documentos, pois eles representam a evidência de
que vocês realizaram a 1AVA.
EAD/UFRPE - LC - PLANO DE ENSINO
Sobre o Resumo
2011.2
48/13
O resumo a ser elaborado deve: Ter no máximo 2 laudas; Deve incluir os aspectos mais importantes
do tema E duas perguntas relevantes sobre o tema
apresentado a serem respondidas pelos colegas (incluir no final do resumo)
Esse resumo deve ser
distribuído na turma.
EAD/UFRPE - LC - PLANO DE ENSINO
O ProjetoConsiderações Gerais
2011.2
48/14
A segunda avaliação (2AVA) corresponderá a realização de um projeto.
O projeto será realizado em equipe;
O tamanho da equipe será de 3 participantes;
EAD/UFRPE - LC - PLANO DE ENSINO
O Projeto
2011.2
48/15
A EQUIPE poderá selecionar uma das direções possiveis para o projeto: 1) O projeto poderá corresponder uma
avaliação de um software educacional em termos de interface
2) O projeto poderá corresponder em uma proposta de projeto de interface para um software específico também proposto pela equipe
A seguir explicaremos cada uma dessas direções….
EAD/UFRPE - LC - PLANO DE ENSINO
O ProjetoDireção 1: Avaliação de um Software
2011.2
48/16
A equipe deverá selecionar um software, preferencialmente e avaliá-lo em termos de usabilidade e ergonomia;
A escolha do software é livre, contudo é necessário submetê-lo para avaliação pela equipe de professores da disciplina;
A avaliação da interface do software deverá atender alguns critérios ainda a definir na disciplina (aguarde maiores detalhes sobre esse ponto).
O resultado da análise deverá ser apresentado tanto em forma de apresentação quanto em relatório.
EAD/UFRPE - LC - PLANO DE ENSINO
O ProjetoDireção 2: Desenhando uma proposta de interface
2011.2
48/17
A equipe deverá propor o projeto (desenho) de interface para um software proposto pela mesma;
O software proposto pode ser reaproveitado de alguma outra disciplina já cursada pela equipe (exemplo: Gerência de Projetos e Jogos Educacionais);
Deverá ser entregue o desenho da interface em forma de documento segundo o guia a ser disponibilizado na disciplina.
EAD/UFRPE - LC - PLANO DE ENSINO
Entregas do Projeto
2011.2
48/18
Deverão ser entregues para avaliação (postado no ambiente):
1) Apresentação 2) Relatório ou desenho da interface
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Algumas datas importantes….
2011.2
48/19
Entendendo um pouco sobre a área de IHC
O que é IHC
Início: Segunda Guerra, reafirma-se dec 60;
Sinônimos: fatores humanos (UK), ergonomia (US), Interação Homem – Máquina;
O desempenho do usuário no contexto de qualquer sistema: computacional, mecânico, ou manual;
Homem + Computador + Interação ;
O que é IHC?
Interação Humano-Computador (IHC): área de estudo que está na interseção das ciências da computação e informação e ciências sociais e comportamentais e envolve todos os aspectos relacionados com a interação entre usuários e sistemas.
A interação humano-computador estuda tanto os fatores computacionais quanto os fatores humanos e surgiu como um campo autônomo de estudo na interseção das áreas de:
computação gráfica, sistemas operacionais, fatores humanos, ergonomia, engenharia industrial, psicologia cognitiva...
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
O que é IHC
2011.2
48/23
Interação
Sistema Usuário
Conhecimento e Habilidades dos
Especialistas em IHCTeorias,
Métodos,Técnicas e
Ferramentasde
Design de IHC
Disciplinas associadas à IHC
InteligênciaArtificial
Lingüística
FilosofiaSociologia
Antropologia
Design
Engenharia
Ergonomia e Fatores
Humanos
PsicologiaSocial e
OrganizacionalPsicologiaCognitiva
Ciência da computação
Problemas Comuns no Desenvolvimento de Sistemas
foco no sistema (versus foco no usuário); desprezo pela interface; impacto da introdução de novas tecnologias
desprezado; base teórica dos desenvolvedores fraca ou
inexistente; design de software desconsiderado; processo de desenvolvimento inadequado; ferramentas inadequadas; interação usuário-sistema não avaliada;
Conceitos gerais de IHC
Profissões
Designers de Informação Pessoal envolvido no desenho de todos os aspectos
interativos em um produto, não somente o design gráfico e de interface.
Engenheiros de Usabilidade Pessoal que avaliam produtos utilizando métodos e
princípios de usabilidade. Webdesigners
Desenvolvem e criam o design visual de websites – os leiautes, por exemplo.
Arquitetos da Informação Têm ideias de como planejar e estruturar produtos
interativos.
Interface
O conceito de interface é utilizado em diferentes áreas da ciência da computação e é importante no estudo da interação homem-máquina, no projeto de dispositivos de hardware, na especificação de linguagens de programação e também em projetos de desenvolvimento de software.
A interface existente entre um computador e um humano é conhecida como interface do usuário.
As interfaces utilizadas para conectar componentes de hardware são chamadas de interfaces físicas.
Exemplos de interfaces
Exemplos de interfaces
Exemplos de interfaces
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
xxxxxxx
48/31 zxxxxxx
2011.2
Usabilidde
Usabilidade
Termo usado para definir a facilidade com que as pessoas podem empregar uma ferramenta ou objeto a fim de realizar uma tarefa específica e importante;
Em IHC, usabilidade normalmente se refere à simplicidade e facilidade com que uma interface, um programa de computador ou um website pode ser utilizado.
O termo também é utilizado em contexto de produtos como aparelhos eletrônicos, em áreas da comunicação e produtos de transferência de conhecimento, como manuais, documentos e ajudas online.
Por que estudar IHC ?
Questões importantes sobre navegação e usabilidade
Questões gerais: Onde estou? Para onde posso ir? Como eu cheguei aqui? Como posso voltar para o lugar
de onde sai?
Problema de Usabilidade
... qualquer coisa que interfira com a habilidade do usuário em completar suas tarefas de forma efetiva e eficiente. (Karat, 1992)
... um aspecto do sistema e/ou da demanda sobre o usuário que torna o sistema desagradável, ineficiente, oneroso ou impossível de permitir a realização dos objetivos do usuário em uma situação típica de uso. (Lavery et al, 1997)
O Processo de Engenharia de Usabilidade
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Indicações de leitura
2011.2
48/37
Ergonomia
Qualidades ergonômicas de uma interface
As qualidades ergonômicas são tanto da interface quanto do software em si;
Então a pergunta é: por onde começar um projeto que seja realmente
ergonômico? Pela interface, pois é através dela que um programador vai
entender as suas necessidades com relação a um produto. Mais à frente, veremos questões metodológicas, mas aqui
colocaremos oito critérios veremos questões metodológicas, mas aqui colocaremos
oito critérios gerais para o sucesso de uma interface com base em estudos de Scapain e Bastien do INRIA.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
A CONDUÇÃO (1)
2011.2
48/40
Ele apresenta uma série de mensagens úteis para que o usuário sinta-se seguro em interagir;
Estas mensagens aparecem em forma de alertas, rótulos, pequenos textos que ocorrem no momento e local exatos
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
CARGA DE TRABALHO (2)
2011.2
48/41
Um software ergonômico permite fácil aprendizado porque sua interface e estrutura permitem que o usuário aprenda rapidamente como utilizá-lo, diminuindo a quantidade de falhas na interação e sobrecarga cognitiva;
Quanto maior a carga de trabalho cognitivo do usuário, maior a possibilidade de cometer erros.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
CONTROLE EXPLÍCITO (3)
2011.2
48/42
Este critério diz que o software deve ser “obediente” e que o usuário deve ter total controle sobre ele;
É necessário que o usuário consiga decidir e concretizar as ações no decorrer da interação.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
ADAPTABILIDADE (4)
2011.2
48/43
É a característica de poder fazer as mesmas tarefas de diferentes formas;
Quando um software permite isso, está possibilitando aos usuários de diferentes níveis de experiência a “customização” ou “personalização” da interface.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
GESTÃO DE ERROS (5)
2011.2
48/44
Prever alertas aos usuários, quando estes entram com dados inadequados.
Digite apenas letras no login
Verificação ortográficado Microsoft word
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
HOMOGENEIDADE/COERÊNCIA (6)
2011.2
48/45
Interfaces devem apresentar determinado padrão estético;
O usuário não pode ter a impressão de que, de uma hora para outra, tudo mudou e “parece” que está em outro software.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
SIGNIFICADO DOS CÓDIGOS (7)
2011.2
48/46
Quanto mais universal for o significado das figuras utilizadas para formar a interface, mais abrangente será o público a ser atingido;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
COMPATIBILIDADE (8)
2011.2
48/47
Significa que o que vemos na tela está compatível ou correspondente com o que sairá na impressora;
Design de Interface
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Elementos da comunicação visual
2011.2
48/49
A linguagem visual é fortemente definida pelo uso da cor em diversas aplicações;
Um dos cuidados que devemos ter é com o significado cultural, que é muito diverso;
É importante pesquisar o significado da cor para o usuário;
O uso do recurso da cor na interface como forma meramente decorativa é desaconselhado.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Elementos da comunicação visual
2011.2
48/50
É importante também observar a relação das cores entre si;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Ícones e textos
2011.2
48/51
Todos nós utilizamos ícones quando interagimos com um software de interface gráfica;
A classificação é feita pela área da semiótica, que se dedica ao estudo dos signos;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Ícones e textos
2011.2
48/52
Veja o que os ícones podem representar , estando ou não associados a textos:
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Fontes
2011.2
48/53
Existem fontes desenhadas em estilos diversos, mas uma característica que é comum a um grande grupo de fontes é a presença de serifa;
É uma terminação saliente no desenho da fonte, cujo uso normalmente é recomendado para documentos impressos,
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Estrutura da Interface
2011.2
48/54
O desenho de uma interface sempre está influenciado fortemente pelo dispositivo onde aparece;
No caso dos monitores de computador, sempre estamos lidando com uma estrutura retangular;
Em interfaces retangular olhamos de cima para baixo e da esquerda para a direita porque na nossa cultura é assim que lemos os textos.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Estrutura da Interface
2011.2
48/55
No canto superior direito, onde a varredura visual não se detém muito, é o local propício para informação e janelas menos utilizadas durante a interação, como menus de ajuda, por exemplo.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Estrutura da Interface
2011.2
48/56
O lado esquerdo tem grande quantidade de informação e se aplica para menus.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Estrutura da Interface
2011.2
48/57
A parte inferior direita é o campo de fechamento visual, importante para localizar ícones de navegação ou mensagens relativas à passagem de uma página para outra.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Estrutura da Interface (Camadas)
2011.2
48/58
Além da organização dos elementos visuais, no sentido bidimensional, temos que perceber a interface como camadas de imagens;
Temos a percepção da sobreposição e dos elementos que possuem maior grau de importância, como sendo o que está “na frente”;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Imagens e função de comunicação na interface
2011.2
48/59
Na interface, as imagens adquirem funções de comunicação que são úteis para orientar o usuário;
Existem muitas funções para as imagens, mas podemos enumerar quatro que quase sempre serão percebidas: Ilustrativa, taxonômica, sinalização e operativa.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Imagens e função de comunicação na interface
2011.2
48/60
Função Ilustrativa: Esta é uma das funções mais usadas. Imagens com esta função são representações gráficas de ferramentas, processos, funções, esquemas ou situações que servem para chamar a atenção ou designar algum conceito;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Imagens e função de comunicação na interface
2011.2
48/61
Função taxonômica: Para definir como os elementos de uma interface (textos, ícones, animações, barras de menu, entre outros) são organizados;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Imagens e função de comunicação na interface
2011.2
48/62
Função de sinalização: As imagens com este atributo são extremamente importantes porque sinalizam, isto é, orientam o usuário na tomada de decisões durante a interação.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Imagens e função de comunicação na interface
2011.2
48/63
Função operativa: Para operar qualquer aparelho, necessitamos de “botões” que nos permitam interagir . Na interface, isso acontece por diversos grupos
de botões e áreas onde podemos escrever; Os mais comuns são os botões de caixa de
ferramentas, setas de navegação e menus com palavras ou ícones explicativos;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Layout
2011.2
48/64
Proximidade e alinhamento Imagens que pertencem a um mesmo
grupo devem estar próximas; O alinhamento também permite
estabelecer uma hierarquia que vai orientar a ordem de leitura na interface e, posteriormente, as ações na interação
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Layout
2011.2
48/65 Equilíbrio, proporção e simetria
As imagens que compõem a interface devem ter uma relação de harmonia;
Esta relação pode se dar de forma dinâmica ou estática: esta é quando temos pesos iguais em dois lados ou todos os elementos centralizados.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Layout
2011.2
48/66 Cores e contrastes
As cores e áreas claras e escuras orientam a atenção do usuário para determinadas partes da interface;
sendo úteis principalmente para dar ênfase, orientar a leitura e dar importância a um assunto
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Layout
2011.2
48/67 Consistência e identidade
Uma interface pode ser composta por diversas partes ou páginas que devem ter consistência ou identidade visual, a fim de permitir que as visualizemos como sendo da mesma “família”.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Layout
2011.2
48/68 Concisão
O design de uma interface pode estimular o uso indiscriminado de imagens;
Para comunicar-se bem, precisamos usar as palavras certas no momento certo;
Na interface também queremos nos comunicar bem, usando as imagens mais adequadas nos lugares e ordem certos para o melhor aprendizado.
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Layout
2011.2
48/69 Visibilidade e Legibilidade
Nem tudo que é visível é legível;
Se você está a 5 metros de uma letra de meio centímetro de altura, ela vai ser visível, mas
certamente será ilegível, porque você não consegue saber de qual letra se trata;
Estes princípios são gerais, mas em todo projeto devem ser observados enquanto requisitos básicos de qualidade de design, sendo analisados nas interfaces.
Design e metodologia
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Projeto da Interface
2011.2
48/71
Ao projetar uma interface devemos entender o perfil do usuário;
Um perfil deve conter mais do que a idade e sexo;
Devemos investigar um pouco dos hábitos, costumes, e características de grupo, para podermos trazer para a interface as situações que tenham um significado relevante;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Projeto da Interface
2011.2
48/72
Uma das primeiras decisões a serem tomadas é se vamos usar uma abordagem de design participativo ou não;
Inclui um ou mais usuários em determinadas fases do projeto;
Elimina retrabalho e diminui o tempo do projeto;
As falhas são corrigidas durante o andamento dos trabalhos, e não apenas no final;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Metodologia de Projeto da Interface
2011.2
48/73
Metodologia de design ergonômico de interfaces humano-computador;
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Metodologia de Projeto da Interface
2011.2
48/74 Problematização: delimitar o problema de projeto. Quanto
mais bem definido o problema, mais fácil a solução;
Análise: Entendimento do usuário;
Modelagem conceitual: descrever em palavras e imagens o que queremos que apareça na interface;
Modelagem visual: colocar tudo organizado na tela, usando do recurso de diagramação para dar ordem, hierarquia à informação visual;
Instalação da GUI: o software com a interface em funcionamento é instalado numa plataforma pré-determinada, onde se tem a possibilidade de realizar testes de usabilidade;