Introdução a IHC
-
Upload
rodrigo-rodrigues -
Category
Documents
-
view
3.277 -
download
1
description
Transcript of Introdução a IHC
![Page 1: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/1.jpg)
UNIVERSIDADE FEDERAL RURAL DE PERNAMBUCO
CENTRO DE EDUCAÇÃO A DISTÂNCIALICENCIATURA EM COMPUTAÇÃO
INTERFACE HOMEM-MAQUINAPRIMEIRO ENCONTRO PRESENCIAL
Tutor: Rodrigo Lins Rodrigues
![Page 2: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/2.jpg)
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Visão geral sobre a disciplina…
2011.2
48/2
Interface Homem-Máquina
![Page 3: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/3.jpg)
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
![Page 4: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/4.jpg)
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);
![Page 5: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/5.jpg)
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
![Page 6: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/6.jpg)
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
![Page 7: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/7.jpg)
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)
![Page 8: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/8.jpg)
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% .
![Page 9: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/9.jpg)
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.
![Page 10: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/10.jpg)
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;
![Page 11: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/11.jpg)
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 *
![Page 12: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/12.jpg)
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.
![Page 13: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/13.jpg)
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.
![Page 14: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/14.jpg)
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;
![Page 15: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/15.jpg)
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….
![Page 16: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/16.jpg)
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.
![Page 17: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/17.jpg)
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.
![Page 18: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/18.jpg)
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
![Page 19: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/19.jpg)
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Algumas datas importantes….
2011.2
48/19
![Page 20: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/20.jpg)
Entendendo um pouco sobre a área de IHC
![Page 21: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/21.jpg)
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 ;
![Page 22: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/22.jpg)
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...
![Page 23: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/23.jpg)
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
O que é IHC
2011.2
48/23
Interação
Sistema Usuário
![Page 24: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/24.jpg)
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
![Page 25: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/25.jpg)
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
![Page 26: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/26.jpg)
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.
![Page 27: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/27.jpg)
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.
![Page 28: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/28.jpg)
Exemplos de interfaces
![Page 29: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/29.jpg)
Exemplos de interfaces
![Page 30: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/30.jpg)
Exemplos de interfaces
![Page 31: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/31.jpg)
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
xxxxxxx
48/31 zxxxxxx
2011.2
![Page 32: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/32.jpg)
Usabilidde
![Page 33: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/33.jpg)
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.
![Page 34: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/34.jpg)
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?
![Page 35: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/35.jpg)
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)
![Page 36: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/36.jpg)
O Processo de Engenharia de Usabilidade
![Page 37: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/37.jpg)
EAD/UFRPE - LC - Encontro Presencial - 12.11.11
Indicações de leitura
2011.2
48/37
![Page 38: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/38.jpg)
Ergonomia
![Page 39: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/39.jpg)
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.
![Page 40: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/40.jpg)
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
![Page 41: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/41.jpg)
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.
![Page 42: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/42.jpg)
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.
![Page 43: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/43.jpg)
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.
![Page 44: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/44.jpg)
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
![Page 45: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/45.jpg)
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.
![Page 46: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/46.jpg)
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;
![Page 47: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/47.jpg)
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;
![Page 48: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/48.jpg)
Design de Interface
![Page 49: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/49.jpg)
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.
![Page 50: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/50.jpg)
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;
![Page 51: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/51.jpg)
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;
![Page 52: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/52.jpg)
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:
![Page 53: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/53.jpg)
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,
![Page 54: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/54.jpg)
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.
![Page 55: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/55.jpg)
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.
![Page 56: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/56.jpg)
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.
![Page 57: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/57.jpg)
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.
![Page 58: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/58.jpg)
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”;
![Page 59: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/59.jpg)
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.
![Page 60: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/60.jpg)
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;
![Page 61: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/61.jpg)
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;
![Page 62: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/62.jpg)
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.
![Page 63: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/63.jpg)
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;
![Page 64: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/64.jpg)
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
![Page 65: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/65.jpg)
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.
![Page 66: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/66.jpg)
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
![Page 67: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/67.jpg)
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”.
![Page 68: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/68.jpg)
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.
![Page 69: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/69.jpg)
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.
![Page 70: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/70.jpg)
Design e metodologia
![Page 71: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/71.jpg)
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;
![Page 72: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/72.jpg)
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;
![Page 73: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/73.jpg)
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;
![Page 74: Introdução a IHC](https://reader038.fdocumentos.com/reader038/viewer/2022103000/557257acd8b42a761d8b4691/html5/thumbnails/74.jpg)
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;