Aula 1. Introdução: Interface Homem-Máquina

IHM

A

IHM Interface Humano-Máquina

Prof. Dra. Sílvia Dotta

Aula 1 - Introdução

Roteiro da aula

• Apresentação da disciplina• Motivação, Objetivos•Metodologia de ensino• Introdução e conceituação de IHM• Histórico e evolução• Problemas em IHM• Problemas em IHM

CRÉDITOS

T P I: 4-0-4

Motivação

• Como conceber interfaces que atendam satisfatoriamente a critérios de funcionalidade, usabilidade e acessibilidade? Como o computador deve “interagir” com humanos?

cédula vs. urna eletrônica

• Como votar no José da Silva para vereador?

• Como saber se o número é do candidato desejado?

• Como votar em branco?

• Como votar nulo?

• Em que ordem votar?

Eleições de 1982 – fonte TRE

• Permitir ao aluno a percepção, avaliação e concepção de interfaces que se aproximem cada vez mais das necessidades dos usuários em relação não apenas a critérios de FUNCIONALIDADE (conjunto de tarefas desempenhadas pelo sistema) mas principalmente em relação à

Objetivos da Disciplina

• USABILIDADE (maneira como os usuários devem proceder para tirar proveito da funcionalidade do sistema, ou seja facilitar o uso e melhorar a interação com o usuário)

• Conceituação (interface, interação, fatores humanos)

• Histórico – evolução dos tipos de interfaces

• Fatores Humanos (cognição, percepção, ergonomia)

• Fatores Tecnológicos (design, padrões para interfaces)

• Engenharia de Usabilidade, Acessibilidade

• Guidelines, guias de estilo e padrões para interfaces.

IHM - Programa da Disciplina

• Guidelines, guias de estilo e padrões para interfaces.

• Métodos e Técnicas de Design de Interfaces

• Processo de desenvolvimento

• Avaliação de Interfaces e Testes de Usabilidade

•BENYON, Deavid. Interação Humano-computador. São Paulo, Pearson, 2011.

•PREECE, ROGERS & SHARP, Design de Interação - Além da interação homem-computador, Ed Bookman, 2005

•NIELSEN, Jakob, Projetando Websites , Editora: Campus, 2000

•SHNEIDERMAN, Ben; PLAISANT, C., Designing The User Interface - Strategies For Effective Human-Computer Interaction, Editora: Addison Wesley, 2009.

IHM - Bibliografia

For Effective Human-Computer Interaction, Editora: Addison Wesley, 2009.

•ROCHA, H. V.; BARANAUSKAS, M.C. , Design e Avaliação de Interfaces Humano-Computador. Campinas: NIED/ UNICAMP, 2003

• Exposição em aula

• Atividades práticas

• Projeto de interfaces

• Desenvolvimento de artigos

• Apresentação de seminários

IHM - Metodologia

• Apresentação de seminários

Recursos didáticos• Disponibilização de roteiros de aula em CONVERGÊNCIA –

Grupo IHC• Entrega de atividades em CONVERGÊNCIA e Tidia

Avaliação

Créditos: IHM Interface Humano-Máquina - MC7104T-Teoria: 4,

• I- Atividades extra-classe: 4• As 4 horas de atividades extra-classe são seriamente

consideradas.Nota:Nota:

Atividades semanais individuais ou em grupo: 50%

Artigo final individual: 50%

Frequência: mínimo 75%

Alguns temas para artigo

Definir tema do artigo até próximo encontro (quarta-feira, 21/9)

• IHC in-car (dispositivos para automóveis: GPS, players etc.)

• IHC em dispositivos móveis

• IHC em redes sociais

• IHC em ambientes colaborativos

• IHC em realidade virtual

• Conceitos e técnicas para desenvolvimento de interfaces adaptativas

• IHC em ambientes de aprendizagem

• IHC em games e games sociais

• IHC para um ambiente de vídeos on-line

Atividade para a próxima aula

Compartilhar em LINKS (http://convergencia.grou.ps) pelos menos três artigos sobre o tema que você pensa em fazer seu artigo.

convergencia.grou.ps

• É uma mídia social utilizada como ambiente virtual de aprendizagem em nossa disciplina

• Todos os conteúdos estão publicados em Convergência.

• Atividades serão realizadas em Convergência.

• Para enviar atividades você precisa ser membro de • Para enviar atividades você precisa ser membro de Convergência.

• Convergência é uma mídia social pública

• Há um grupo (IHC) fechado no qual somente participam os estudantes da disciplina.

INTRODUÇÃO

Definição

• Interface:

• Genérica:• Lugar onde o contato entre duas entidades ocorre

• Ex.: maçanetas de portas, torneiras, direção de um carro, etc.

• É uma superfície de contato que reflete as propriedades

13

• É uma superfície de contato que reflete as propriedades físicas das partes que interagem, as funções a serem executadas e o balanço entre poder e controle (Laurel, 1993)

• Informática:

• Parte do sistema computacional com o qual o usuário entra em contato físico e perceptivo (Moran, 1981);

• É o conjunto de comandos de controle do usuário + respostas do computador, constituídos por sinais (gráficos, acústicos e táteis) – tela do computador por exemplo;

Importância

• Tem sido dada uma importância cada vez maior à interface de aplicações computacionais;

• Fatores de satisfação subjetiva, de eficiência, de segurança, de custo de treinamento, de retorno de investimento, todos,

14

custo de treinamento, de retorno de investimento, todos, dependem de um bom design de interface;

Importância

• Razões que justificam o investimento em Interfaces

• Satisfação do usuário (lealdade)

• Vantagem competitiva (usabilidade)

• Minimização de custos posteriores (redução dos custos e tempo de treinamento dos usuários e custos de manutenção)

15

Importância

• Competitividade

• O fator que acaba "desempatando" dois produtos semelhantes passa a ser, muitas vezes, a interface e não a análise das qualidades de desempenho do software

• Em termos comerciais uma boa interface parece ser cada vez mais decisiva na boa colocação de um software no mercado.

16

mais decisiva na boa colocação de um software no mercado.

• Se os produtos são semelhantes e vendidos por preços também semelhantes, compra-se aquele que vem em uma "embalagem" mais agradável.

• Informática como instrumento de inclusão social

• Usuários com necessidades especiais;

• Dispositivos de I/O não convencionais

• Realidade Virtual

Contexto

• No contexto de IHC (Interação Humano-Computador) deve ser considerado quatro elementos básicos:

• o sistema (software em si);

• os usuários;

• os desenvolvedores do sistema e;

17

• o ambiente em uso (domínio da aplicação)

Quem são os usuários?

• Trazem consigo experiências passadas;

• Têm concepção daquilo que o computador pode fazer (modelos mentais);

• Se ele não sabe muito a respeito de um

18

• Se ele não sabe muito a respeito de um objeto ou tarefa, irá associar com algo que já é de seu conhecimento;

Quem são os usuários?

• São impacientes;

• Odeiam erros;

• Têm necessidades diferentes em função da sua experiência (diferentes perfis).

19

da sua experiência (diferentes perfis).

Definições

• Interface Humano-Computador:

• Interface é o componente (software) responsável por mapear ações do usuário em solicitações de processamento ao sistema (aplicação), bem como

20

processamento ao sistema (aplicação), bem como apresentar os resultados produzidos pelo sistema.

• A Interface é um componente essencial no contexto dos sistemas interativos, sendo fator determinante para o sucesso ou fracasso do projeto de um sistema

• Não se pode pensar em interfaces sem considerar o ser

humano que vai usá-la.

Definições

• Interação Humano-Computador (IHC):

• É a disciplina preocupada com o design, avaliação e implementação de sistemas computacionais interativos para uso humano e com o estudo dos principais fenômenos ao redor

21

humano e com o estudo dos principais fenômenos ao redor deles.

• Área de aplicação: aspectos humanos

• Processamento de informação humano

• Linguagem, comunicação e interação

• Ergonomia

Definições

• Área de aplicação: aspectos computacionais(sistema e interface)

• Dispositivos de entrada e saída

• Técnicas e formas de diálogo

• Computação gráfica

22

• Computação gráfica

• Arquiteturas para diálogo

Objetivos

• Produzir sistemas fáceis de utilizar, seguros e funcionais;

• Nesse contexto, o termo sistemas não se refere somente ao hardware e software mas todo o ambiente que usa ou é afetado pelo uso da tecnologia computacional;

• Pessoas não devem ter que mudar radicalmente para se adequar ao sistema, o sistema é que deve ser projetado para

23

adequar ao sistema, o sistema é que deve ser projetado para se adequar a seus usuários;

Objetivos

• Enfatizar a importância de métodos e técnicas centrados no usuário para incrementar a utilização de interfaces computadorizadas;

• Explicitar os componentes da interface e apresentar diretrizes para o projeto de interfaces que facilitem a interação homem-computador;

24

computador;

• Testar a facilidade de uso de aplicações computacionais, relatar os problemas encontrados e apresentar possíveis soluções.

Desafios

• Como dar conta da rápida evolução tecnológica?

• Equilibrar conforto e facilidades de uso com desempenho da aplicação (tolerância a erros controlada);

• Como garantir que os projetistas ofereçam boas interfaces ao mesmo tempo que exploram o potencial e funcionalidades da

25

mesmo tempo que exploram o potencial e funcionalidades da nova tecnologia?

• Ex: Celulares (Os serviços e funcionalidades, hoje, vão muito além de simples conversação ou armazenamento de nomes na agenda).

Desafios

• Aumentar a funcionalidade não pode ser desculpa para um design mais pobre;

• É possível projetar boas interfaces mesmo que a quantidade de funções seja relativamente grande, desde que existam bons mecanismos de feedback;

26

Aspectos Multidisciplinares de IHC

• Ciência da Computação

• Prover o conhecimento sobre as possibilidades da tecnologia e oferecer mecanismos sobre como explorar todo seu potencial;

• Psicologia

27

• Entender o comportamento humano e os processos mentais subjacentes;

• Fatores Humanos ou Ergonomia

• Conceber e fazer o design de diversas ferramentas e artefatos para diferentes ambientes de trabalho, adequados às capacidades e necessidades dos usuários;


• Linguística

• Estudar cientificamente a linguagem;

• Explorar a estrutura da linguagem natural na concepção de interfaces (uso mais tradicional);

• Contribuir na concepção de linguagens de

28

• Contribuir na concepção de linguagens de programação mais fáceis de serem aprendidas (Ex. Linguagem Logo);

• Contribuir na Internacionalização de Interfaces (preocupação em isolar os fatores culturais de um produto de outros que podem ser considerados genéricos culturalmente).


• Sociologia

• Preocupa-se com o impacto dos sistemas interativos na estrutura da sociedade, ou seja, o impacto social e as mudanças na forma de trabalhar de uma organização ocasionados pelo avanço tecnológico.

29

organização ocasionados pelo avanço tecnológico.

• Design Gráfico

• Habilidade estética dessa área é importante na medida que a apresentação da interface torna-se "bonita" aos olhos dos usuários, trazendo satisfação.

Evolução das Interfaces

Barbosa e Silva 2010

30

Anos 40

• Tecnologias de Hardware

• Mecânica e Eletromecânica;

• Sem retorno visual.

• Modo de Operação

• Usado somente para cálculo.

• Programação

31

• Programação

• Movimento de cabos e chaves.

• Usuários

• Os próprios inventores.

• Paradigma de Interface com usuário:

• Nenhum.

Anos 40


32

ENIAC

Anos 50 e 60


• Válvulas e Transistores;

• Uso de painéis como retorno visual.


• Um usuário por vez utiliza a máquina.

• Programação

33

• Programação

• Linguagem de Máquina e Assembler.

• Usuários

• Pioneiros e Profissionais de Computação.


• Programação em batch.

Anos 50 e 60


34Painel de Controle Strech

Anos 60 a 80


• Circuito Integrado;

• Monitores monocromáticos.


• Time Sharing.

35

• Time Sharing.

• Programação

• Linguagens de Alto Nível (científicas).

• Usuários

• Surgem os “primeiros” usuários utilizando o computador para atividades repetitivas, sem poder de criação.


• Menus hierárquicos e preenchimentos de formulários em tela.

Anos 60 a 80Invenção do Mouse


36

Terminais Monocromáticos

Anos 80


• VLSI – Nova geração de circuitos integrados;

• Monitores coloridos tornam a interface mais agradável.


• Computador pessoal para um usuário único.

• Programação

37

• Programação

• Linguagens orientadas a problemas;

• Surgimento de Ferramentas para construção de Interfaces.

• Usuários

• Todos os tipos de profissionais começam a ter acesso aos computadores.


• Surgem as primeiras interfaces gráficas (GUIs):• WIMP (Windows, Icons, Menus e Pointers);

• Manipulação Direta: WIMP + uso de metáforas. Ex: arrastar arquivos para lixeira.

Anos 80


38

Geração Windows

Anos 90


• Diversas tecnologias: computadores portáteis, redes de computadores, telas sensíveis ao toque, palms, etc.


• Usuários conectados a redes, sistemas distribuídos.

• Programação

39

• Programação

• Linguagens orientadas a objetos.

• Usuários

• Todas as pessoas (popularização do computadores).


• Andeersen (1993 - Netscape): Cria o primeiro navegador com interface em modo gráfico, surgem as interfaces WUI (Web User

Interface);

• GUI (Desenvolvimento das Interfaces Gráficas) em várias plataformas: Windows, Unix, Dispositivos portáteis, celulares, interfaces baseadas em voz, etc.

Anos 90Geração Realidade Virtual,

Notebooks, Palmtops e Celulares


40

Gerações de Interfaces

• Primeira geração:

• Comandos e interfaces de perguntas (query interfaces).

• A comunicação é puramente textual e é feita via comandos e respostas às perguntas geradas pelo sistema.

• Exemplos: Unix, MS-DOS e SO dos Mainframes.

41


• Segunda geração:

• Menu simples.

• Uma lista de opções é apresentada ao usuário e a decisão apropriada é selecionada via algum código digitado.

42


• Terceira geração:

• Orientada a janela, interfaces de apontar e apanhar (point and

pick interfaces).

• Conhecidas como interfaces WIMP (Windows,

• Icons, Menus, and Pointing devices) + Manipulação Direta.

43

• Trazem o conceito de mesa de trabalho (desktop).


• Quarta geração:

• Hipertexto e multitarefa (GUI + WUI).

• Esta geração (geração corrente), soma aos atributos das interfaces de terceira geração, as técnicas de hipertexto e multitarefa.

• A quarta geração das interfaces está disponível na maioria das

44

• A quarta geração das interfaces está disponível na maioria das estações de trabalho e dos computadores pessoais atuais.

• Utilização da alta tecnologia para usar metáforas

Tipos de Interface Homem-Computador

• CUI (Character-based User Interface): • Textos e caracteres alfanuméricos, fazendo uso da metáfora

de uma máquina de escrever ou de um teletipo;

• GUI (Graphical User Interface):• Gráficos e desenhos, fazendo uso de metáforas de mesas

de trabalho, documentos, botões, janelas, etc.

• WUI (Web User Interface): • Usadas na Web (navegadores).

45

• Usadas na Web (navegadores).

• PUI (Pen-based User Interface) / (Perceptual): • Compostas de um monitor de vídeo em formato de uma

planilha ou bloco de anotações que recebe dados através de uma espécie de caneta eletrônica ou o próprio dedo.

• VRUI (Virtual Reality-based User Interface):• Fundamentadas no paradigma da realidade virtual e

utilizadas com muito menor freqüência que as anteriores por limitação de custos e tecnologia.

Para próxima aulaAtividade individual: Preparação para o artigo final:

Compartilhar na seção LINKS de convergencia.grou.ps, três artigos que tratem sobre o tema escolhido para seu artigo final.

Atividade em grupo: Projeto de interface

Organização dos grupos: 3 integrantes, definir líder, enviar por e-mail nomes completos, RAs, e-mails e o tema do grupomail nomes completos, RAs, e-mails e o tema do grupo

Selecionar um sistema (desktop ou web) para desenvolver (ou melhorar) projeto de interface

Analisar três sistemas similares: pontos negativos e positivos das interfaces.

Entregar texto (formatado ABNT) na Digiteca (Convergência).

Comunicar envio do arquivo pelo mural do grupo IHC (Convergência)

Education

Aula 1. Introdução: Interface Homem-Máquina