A

Interface Humano - Computador

Aula 01 - Conceitos Iniciais
Giliane Bernardi - giliane@inf.ufsm.br http://nte.ufsm.br

Introduo
Relembrando aspectos da Engenharia de Software Ciclo de Vida de um Software
Levantamento de Requisitos; Anlise de Requisitos; Projeto de Software; Implementao; Testes; Manuteno.

Introduo
Projeto de Software
Tambm chamado Engenharia de Projeto, engloba um conjunto de princpios, conceitos e prticas que levam ao desenvolvimento de um sistema ou produto de alta qualidade; Princpios estabelecem uma filosofia que guia o projetista no trabalho a ser desenvolvido; Conceitos de projeto devem ser compreendidos antes que o desenvolvimento do projeto seja posto em prtica; Prticas de projeto levam a criao de vrias representaes do software que norteiam a atividade de construo que se segue;

Introduo
O projeto permite ao engenheiro de software modelar o sistema ou o produto que deve ser construdo; Situa-se no ncleo tcnico da Engenharia de Software e inicia logo que os requisitos de software tenham sido analisados e modelados; O projeto de software a ltima ao do engenheiro de software dentro da atividade de modelagem;

Introduo
Cada um dos modelos de anlise fornece informaes pra criar os modelos de projeto; Modelos gerados na fase de projeto:
Projeto de Dados; Projeto Arquitetural; Projeto em nvel de componentes (procedimental); Projeto de Interface;

Introduo
O Projeto de Interface concentra-se em trs reas de preocupao:
O projeto de interfaces entre componentes de software; O projeto de interfaces entre o software e outros produtores e consumidores de informao no-humanos (outras entidades externas); O projeto de interfaces entre um ser humano (o usurio) e o computador;

Introduo
Por que estudar IHC?
Porque os computadores esto em toda parte

Introduo
A importncia da rea de IHC pode ser evidenciada considerando o impacto das Tecnologias da Informao e da Comunicao TICs em nosso cotidiano:
Como esto presentes em nossas vidas e na sociedade? Em que reas elas esto presentes? Que importncia elas possuem? O que significa ter tanta tecnologia na vida das pessoas? Quais so as consequncias disso para as pessoas que utilizam e para as pessoas que desenvolvem estas tecnologias?

Introduo
Exemplos de ferramentas, instrumentos ou dispositivos em que esto presentes:
celular usado como carto de crdito; quiosque eletrnico para consulta numa livraria; smartphones que consultam resultados de exames mdicos via Web; livros eletrnicos; consoles de jogos que exercitam mente e corpo; TV digital interativa; participao poltica na internet usando diversos dispositivos e ferramentas; ...

Introduo
Exemplo: o interfone do prdio mudou!
num condomnio com 5 blocos com 5 andares cada, existem 4 apartamentos por andar

Introduo
Exemplo: o interfone do prdio mudou!
o interfone no trreo de cada bloco mudou de uma soluo especfica (esquerda) para uma soluo genrica (direita)

Introduo
Exemplo: o interfone do prdio mudou!
analise as formas de interao nas duas propostas de interfone:
Como ligar para o apartamento 104? O que preciso memorizar (e lembrar) para usar o interfone? Pense numa pessoa idosa e um cego usando ambos interfones

Introduo
Exemplo: o interfone do prdio mudou!
Como o novo dispositivo afetou a vida das pessoas que moram e que visitam o condomnio? Por exemplo:
mudou a forma de expressar eu quero falar com o apartamento XXX os moradores agora podem usar o interfone para falar entre apartamentos de qualquer bloco ficou um pouco mais complexo aprender e explicar como funciona

Introduo

Eleies de 1982 fonte TRE

Como votar no Jos da Silva para vereador? Como saber se o nmero do candidato desejado? Como votar em branco? Como votar nulo? Ser que a motivao para o voto nulo foi modificada na transio da cdula de papel para a urna eletrnica?

Interface Humano-Computador
Mas afinal, o que Interface Humano-Computador? Quando o conceito de interface surgiu, ela era entendida como o hardware e o software com o qual o homem e o computador podiam se comunicar. A evoluo do conceito levou incluso dos aspectos cognitivos e emocionais do usurio durante a comunicao;

sistema

Interface Humano-Computador
Algumas possibilidades de conceitos:
Primeiramente, se visualiza uma interface como um lugar onde o contato entre duas entidades ocorre (por exemplo, a tela de um computador);
A forma das interfaces reflete na qualidade fsica das partes na interao;

Interfaces de nosso dia-a-dia: uma maaneta de uma porta, uma torneira, a direo de um carro, etc...

Interface Humano-Computador
O conceito de interface utilizado em diferentes reas da Cincia da Computao, sendo importante no estudo da interao homem-mquina, no projeto de dispositivos de hardware, na especificao de linguagens de programao e tambm em projetos de desenvolvimento de software;

usurio

sistema

nico meio de contato entre usurio e sistema

Interface Humano-Computador
Projeto de Interface com o Usurio quem faz?
Um engenheiro de software projeta a interface com o usurio pela aplicao de um processo iterativo que se apoia em princpios de projeto . (Pressman, 2011)

Interface Humano-Computador
Projeto de Interface com o Usurio quais so os passos?
...comea com a identificao dos requisitos do usurio, das tarefas e do ambiente. Aps, cenrios so criados e analisados para definir um conjunto de objetos e aes de interface. Em seguida, prottipos so construdos e, por fim, o modelo de projeto implementado e o resultado avaliado quanto qualidade. (Pressman, 2011)

Interface Humano-Computador
Projeto
de Interface com o Usurio qual o produto de trabalho?

Cenrios de usurio so criados e layouts de tela so gerados. Um prottipo de interface desenvolvido e modificado de modo iterativo (Pressman, 2011)

Interface Humano-Computador
Quem nosso H?

Interface Humano-Computador
Quem nosso H?

Fote: Fonte: Fernandes, 2012

Interao
Desta forma, no se pode pensar em projeto de interfaces sem considerar o ser humano que vai us-las; Neste contexto, interface e interao so conceitos que no podem ser analisados independentemente; Interao pode ser vista como uma ao de um objeto fsico sobre o outro;
o termo designa a ao conjunta humano-humano e humanomquina;

A interao ocorre quando a ao de uma pessoa desencadeia uma reao em outro (humano ou no);

Interao
um processo de...
sequncia de estmulos e respostas operao de mquina Norman (1986) interpreta a interao como um processo atravs do qual o usurio formula uma inteno, planeja suas aes, atua sobre a interface, percebe e interpreta a resposta do sistema e avalia se seu objetivo foi alcanado comunicao com/por meio da mquina de Souza (2005) interpreta a interao com um processo de comunicao entre pessoas (incluindo o designer e os usurios), mediada por sistemas computacionais.

Interao

Interao
Voltando ao nosso H Usurio
Indivduo engajado em um processo de interao; Busca alcanar um objetivo; Est inserido em um contexto de uso;

Perspectivas de Interao

Fonte: Kammersgaard (1988)

Perspectivas de Interao
Perspectiva de Sistema
Usurio considerado como um sistema computacional; A interao humano-computador aproxima-se da interao entre sistemas mera transmisso de dados; Geralmente requer treinamento e capacidade cognitiva; Exemplos:
Teclas de atalho; Linhas de comando; Elementos de interface restritivos;

Perspectivas de Interao
Perspectiva de Parceiro de Discurso
Oriundo da rea de Inteligncia Artificial; O sistema assume um papel altura de um ser humano;
Capaz de raciocinar, fazer inferncias, tomar decises e adquirir informao; Interao por meio de linguagem natural; Exemplos:
Sistemas de busca e tradutores; Chatter bots;

Perspectivas de Interao
Perspectiva de Ferramenta
Sistema interativo considerado um instrumento que auxilia o usurio a realizar suas tarefas; A interao representa aplicar uma ferramenta a algum material e avaliar o resultado; Encadeamento de aes e reaes executadas de maneira quase automtica; Exemplo:
Software editor de textos;

Perspectivas de Interao
Perspectiva de Mdia
Sistema interativo visto como uma mdia atravs da qual as pessoas se comunicam umas com as outras; Interao significa comunicao em um contexto coletivo; Comunicao bilateral:
E-mail, chats, frum; Redes sociais;

Ou unilateral, do designer para o usurio:

Ajuda on-line; Documentao do sistema; Instrues da interface;

Perspectivas de Interao
perspectiva sistema significado de interao transmisso de dados fatores de qualidade mais evidentes eficincia (tal como indicado pelo tempo de uso e nmero de erros cometidos)

parceiro de discurso

da interpretao e conversa usurio-sistema adequao textos gerao de manipulao da ferramenta comunicao entre usurios e designerusurio funcionalidades relevantes ao usurio, facilidade de uso qualidade da comunicao mediada e entendimento mtuo

ferramenta

mdia

Interao Humano-Computador
Focando no desenvolvimento de Interfaces Computacionais, a principal preocupao deve ser a de melhorar o modo como as pessoas podem usar o computador para realizao de suas atividades; O termo Interao Humano-Computador surgiu por volta da dcada de 80 para descrever este novo campo de estudo;
Foco mais amplo que somente o design de interfaces, abrangendo todos os aspectos relacionados com a interao entre usurios e computadores;

Interao Humano-Computador
IHC a disciplina preocupada com o design, avaliao e implementao de sistemas computacionais interativos para uso humano e com o estudo dos principais fenmenos ao redor deles. (Rocha e Baranauskas, 2003)

Interao Humano-Computador
Grande parte da rea da Computao est interessada em construir sistemas: eficientes, robustos, livres de erros e de fcil manuteno;
Conceber um sistema de dentro para fora

A rea de IHC est principalmente interessada na qualidade de uso destes sistemas e no impacto na vida de seus usurios;
Conceber um sistema de fora para dentro

Interao Humano-Computador
usurios usurios

dados lgica interface

dados lgica interface

de dentro para fora

de fora para dentro

Interao Humano-Computador
No contexto de IHC, temos quatro elementos bsicos:
O sistema; Os usurios; Os desenvolvedores; e O ambiente de uso (domnio de aplicao).

Estes elementos esto envolvidos em dois processos:

A interao usurio-sistema; e O desenvolvimento do sistema.

Interao Humano-Computador
Para o estudo destes elementos e para a aplicao deles, visando uma melhoria dos processos de desenvolvimento e de relao usurio e sistema, cinco aspectos devem ser considerados:
Design e desenvolvimento do hardware e do software; Estudo da capacidade e limitao fsica e cognitiva dos usurios; Instrumentao terica e prtica para o design e desenvolvimento de sistemas interativos; Modelos de interfaces e do processo de interao usuriosistema; Anlise do domnio e de aspectos sociais e organizacionais.

Interao Humano-Computador
Design e desenvolvimento do hardware e do software: estudo de tecnologias de dispositivos de entrada e sada; e tecnologias de software, como ambientes grficos e virtuais; Estudo da capacidade e limitao fsica e cognitiva dos usurios: considera estudos de ergonomia para avaliar limites de esforo fsico do usurio, e estudos de psicologia e cincia cognitiva sobre a capacidade humana de memorizao, raciocnio e aprendizado;

Interao Humano-Computador
Instrumentao terica e prtica para o design e desenvolvimento de sistemas interativos: envolve o conhecimento terico sobre os fenmenos envolvidos;
Modelos para o processo de desenvolvimento que descrevam as etapas necessrias e como devem ser conduzidas; Diretrizes, tcnicas, linguagens, formalismos e ferramentas de apoio a estas etapas;

Interao Humano-Computador
Modelos de interfaces e do processo de interao usuriosistema: para desenvolver modelos abstratos dos processos de interaes compatveis com as capacidades e limitaes fsicas e cognitivas dos usurios; Anlise do domnio e de aspectos sociais e organizacionais: para avaliar o impacto que o contexto onde est inserido o usurio exerce sobre seus conhecimentos, sua linguagem e suas necessidades.

Interao Humano-Computador
Benefcios de IHC atravs do aumento da qualidade de uso de sistemas interativos:
Aumentar a produtividade dos usurios; Reduzir o nmero e a gravidade dos erros cometidos pelos usurios; Reduzir o custo de treinamento; Reduzir o custo de suporte tcnico; Aumentar as vendas e a fidelidade do cliente;

Projetando interfaces, algumas consideraes iniciais....

Mandel apud Pressman (2006) apontam trs regras de ouro que formam a base para um conjunto de princpios de projeto da interface com o usurio

Projetando interfaces, algumas consideraes iniciais....

1. Coloque o usurio no controle

2. Reduza a carga de memria do usurio

3. Torne a interface consistente

Projetando interfaces, algumas consideraes iniciais....

1- Coloque o usurio no controle
A maioria das limitaes e restries de interfaces impostas por um projetista destinada a simplificar o modo de interao. Mas para quem? Em muitos casos o projetista pode introduzir restries e limitaes para simplificar a implementao da interface. O resultado pode ser uma interface fcil de construir, mas frustrante de usar.

Projetando interfaces, algumas consideraes iniciais....

1- Coloque o usurio no controle princpios
Defina os modos de interao de uma forma que no force o usurio a aes desnecessrias: um modo de interao o estado atual da interface. O usurio deve entrar e sair do modo com pouco ou nenhum esforo;

Projetando interfaces, algumas consideraes iniciais....

1 - Coloque o usurio no controle princpios
Proporcione interao flexvel: como diferentes usurios podem ter diferentes preferncias de interao, a escolha deve ser oferecida. Considere que nem toda ao adequada a todos os mecanismos de interao;

Projetando interfaces, algumas consideraes iniciais....

1 - Coloque o usurio no controle princpios
Permita que a interao com o usurio possa ser interrompida e desfeita: mesmo quando envolvido em uma sequncia de aes, o usurio poder interromper a sequncia para fazer alguma outra coisa (sem perder o trabalho que j tinha sido feito). O usurio poder tambm desfazer qualquer ao;

Projetando interfaces, algumas consideraes iniciais....

1 - Coloque o usurio no controle princpios
Simplifique a interao medida que os nveis de competncia progridem e permita que a interao seja personalizada: os usurios frequentemente descobrem que realizam a mesma sequncia de interaes repetidamente. Vale a pena projetar um mecanismo macro que permita a um usurio avanado personalizar a interface para facilitar a interao;

Projetando interfaces, algumas consideraes iniciais....

1 - Coloque o usurio no controle princpios
Esconda detalhes tcnicos internos do usurio espordico: a interface com o usurio deve lev-lo ao mundo virtual da aplicao. Ele no deve perceber o sistema operacional, funes de gerenciamento de arquivos, entre outras. A interface nunca deve exigir que o usurio interaja em um nvel que seja interno mquina (um usurio nunca precisa teclar comandos do sistema operacional de dentro de um software de aplicao) ;

Projetando interfaces, algumas consideraes iniciais....

1 - Coloque o usurio no controle princpios
Projete a interao direta com os objetos que aparecem na tela: o usurio tem uma sensao de controle quando pode manipular os objetos necessrios para realizar uma tarefa de modo semelhante ao que ocorreria se o objeto fosse uma coisa fsica. Por exemplo, uma interface de aplicao que permite ao usurio esticar um objeto (aument-lo no tamanho) uma implementao de manipulao direta;

Projetando interfaces, algumas consideraes iniciais....

2 Reduza a carga de memria do usurio
Quanto mais um usurio tiver que lembrar, mais sujeita a erros ser a interao com o sistema; Uma interface bem projetada no sobrecarrega a memria do usurio; Lembrar ao usurio de informaes pertinentes; Apresentar cenrios de interao;

Projetando interfaces, algumas consideraes iniciais....

2 Reduza a carga de memria do usurio princpios
Reduza a demanda da memria de curto prazo: quando os usurios esto envolvidos em tarefas complexas, a demanda de memria de curto prazo pode ser significativa. A interface deve ser projetada para reduzir a necessidade de lembrar aes e resultados anteriores. Pode-se fornecer indicaes visuais para reconhecimento de aes;

Projetando interfaces, algumas consideraes iniciais....

2 Reduza a carga de memria do usurio princpios
Defina atalhos intuitivos: quando so usados mnemnicos para realizar uma funo do sistema (por exemplo, alt-P para invocar a funo de impresso), estes devem ser ligados a ao de um modo que seja fcil lembrar (por exemplo, a primeira letra da tarefa a ser invocada);

Projetando interfaces, algumas consideraes iniciais....

2 Reduza a carga de memria do usurio princpios
O layout visual da interface deve ser baseado em uma metfora do mundo real: por exemplo, um sistema de pagamento de contas deve usar uma metfora de talo e canhoto de cheques para guiar o usurio durante o processo de pagamento de contas. Isto permite ao usurio se apoiar em indicaes visuais bem entendidas;

Projetando interfaces, algumas consideraes iniciais....

2 Reduza a carga de memria do usurio princpios

Revele informao de um modo progressivo: a interface deve ser organizada de forma hierarquica. Inicialmente, a informao deve ser apresentada em um alto nvel de abstrao e depois ir apresentando detalhes;

Projetando interfaces, algumas consideraes iniciais....

3 Faa a interface consistente

A interface deve apresentar e receber informao de forma consistente;

Toda a informao visual deve ser organizada de acordo com um padro de projeto mantido ao longo de todo sistema; Mecanismos de entrada devem ser restritos a um conjunto limitado, usado constantemente ao longo de toda a aplicao; Mecanismos para navegar de tarefa a tarefa devem ser consistentemente definidos e implementados.

Projetando interfaces, algumas consideraes iniciais....

3 Faa a interface consistente princpios
Permita ao usurio situar a tarefa atual em um contexto significativo: importante fornecer indicadores (ttulos de janela, cones, cdigos de cores) que permitam ao usurio saber o contexto do trabalho em mos. Alm disso, o usurio pode determinar de onde veio e que alternativas existem de transio para uma nova tarefa;

Projetando interfaces, algumas consideraes iniciais....

3 Faa a interface consistente - princpios
Mantenha consistncia ao longo de uma famlia de aplicaes: um conjunto de aplicaes (ou produtos) deve implementar as mesmas regras de projeto, de modo que seja mantida a consistncia para toda a interao;

Projetando interfaces, algumas consideraes iniciais....

3 Faa a interface consistente princpios
Se modelos interativos anteriores criaram expectativas para o usurio, no faa modificaes, a menos que haja forte razo para isso: quando uma sequncia interativa particular torna-se uma norma de fato (por exemplo, o uso de alt-S para salvar um arquivo), o usurio espera isso em toda a aplicao que encontra;

Algumas Imagens...

Algumas Imagens...

Algumas Imagens...

Algumas Imagens...

Finalizando...
Algumas causas de problemas no projeto de interfaces:

Desconhecimento do usurio (aspectos cognitivos, fsicos e sociais); Desconhecimento da atividade (estratgias, restries); Priorizao da lgica de funcionamento em detrimento da lgica de utilizao; Desconhecimento de modelos, mtodos e tcnicas.

Finalizando...

As pessoas devem aprender a tarefa e no a tecnologia

(Rocha e Baranauskas, 2003)

Para pensar...
Que aplicaes voc conhece que possuem interfaces grficas que dificultam o uso das mesmas? Quais caractersticas mais marcantes tornam estas aplicaes difceis de serem usadas? Voc se sente apto para projetar uma boa interface entre homem e mquina? Quais habilidades / saberes precisam ser desenvolvidos para projetar uma boa interface entre homem e mquina?

Referncias Bibliogrficas
Leite, J. C. Projeto de Interfaces de Usurio. UFRGS, 2001. Preece, J.; Rogers, Y.; Sharp, H. Design de Interao. Porto Alegre: Bookman, 2005. Pressman, Roger. Engenharia de Software. So Paulo: McgrawHill, 2011. Rocha, H. V.; Baranauskas, M. C. C. Design e Avaliao de Interfaces Humano-Computador. So Paulo, IME-USP, 2003. Silva, B. S.; Barbosa, S. D. J. Interao Humano-Computador. Rio de Janeiro: Elsevier, 2010 (slides adaptados).