Introdução a IHC

UNIVERSIDADE FEDERAL RURAL DE PERNAMBUCO

CENTRO DE EDUCAÇÃO A DISTÂNCIALICENCIATURA EM COMPUTAÇÃO

INTERFACE HOMEM-MAQUINAPRIMEIRO ENCONTRO PRESENCIAL

Tutor: Rodrigo Lins Rodrigues

[email protected]

EAD/UFRPE - LC - Encontro Presencial - 12.11.11

Visão geral sobre a disciplina…

2011.2

48/2

Interface Homem-Máquina


48/3

Agenda

Objetivos da disciplina Conteúdo Metodologia Avaliações Datas importantes Outras informações pertinentes

2011.2


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);


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


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


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)


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% .


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;


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 *


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.


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.


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;


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….


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.


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.


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


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...


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




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


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.


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


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.


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.


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.


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


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.


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;


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


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.


Elementos da comunicação visual

2011.2

48/50

É importante também observar a relação das cores entre si;


Í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;


Ícones e textos

2011.2

48/52

Veja o que os ícones podem representar , estando ou não associados a textos:


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,


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.



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.



2011.2

48/56

O lado esquerdo tem grande quantidade de informação e se aplica para menus.



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.


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”;


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.



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;



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;



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.



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;


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


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.


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


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”.


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.


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


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;


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;


Metodologia de Projeto da Interface

2011.2

48/73

Metodologia de design ergonômico de interfaces humano-computador;


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;

Documents

Introdução a IHC