Princípios de Design – Aula 4 - Desenvolvimento de Interfaces

23
 PRINCÍPIOS DE DESIGN  AULA 4 Desenvolvimento de Interfaces Prof. Jemerson Fernando Maia 02/2012

description

Princípios de Design – Aula 4 - Desenvolvimento de Interfaces

Transcript of Princípios de Design – Aula 4 - Desenvolvimento de Interfaces

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 1/23

PRINCÍPIOS DE DESIGN  – AULA 4

Desenvolvimento de Interfaces

Prof. Jemerson Fernando Maia

02/2012

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 2/23

Introdução

Se analisarmos a complexidade da maioria dossistemas computacionais, vemos que o potencialde se ter uma precária IHC é bastante alto.Contudo, alguns autores definiram princípiosbásicos a serem analisados que ajudem agarantir uma boa IHC.

Norman (1988), partindo da experiência deobservar e vivenciar as frustrações que as

pessoas experimentam com objetos do cotidianoque não conseguem saber como usar, identificouquatro princípios básicos de um bom design.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 3/23

Introdução

Os quatro princípios são:Visibilidade e Affordances;Bom modelo conceitual;Bons mapeamentos e;Feedback.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 4/23

Visibilidade e Affordances

Apenas as coisas necessárias têm que estarvisíveis: para indicar quais as partes que podem ser operadas; para indicar como o usuário interage com o

dispositivo. Visibilidade indica ações pretendidas e as ações

reais, e também distinções importantes. A visibilidade do efeito das operações indica se a

operação foi feita como pretendida. A falta de visibilidade é que torna muitos

dispositivos tão difíceis de serem operados.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 5/23

Visibilidade e Affordances

Exemplo: Quantos de nós já experimentamos frustrações no

uso de portas cuja funcionalidade é extremamentesimples  – abrir e fechar, e nada mais. Muitas vezes

empurramos portas que deveríamos puxar, tentamosabrir para a direita quando deveria ser para aesquerda, empurramos portas que deveriam serdeslizadas em alguma direção (que também as vezesnão descobrimos qual é). As partes corretas

deveriam estar visíveis. Designers deveriam proversinais que claramente indicassem que uma portadeveria ser empurrada, deslizada, puxada e qualqueroutra forma de abrir. 

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 6/23

Visibilidade e Affordances

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 7/23

Visibilidade e Affordances

Objetos com um bom design são fáceis deinterpretar e entender. Eles têm “dicas” visíveis de sua operação.Objetos com design pobre são difíceis e

frustrantes de usar. Eles não provêm indicaçõesou o que é muito pior, provêm falsas “dicas”.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 8/23

Visibilidade e Affordances

Affordance é o termo definido para se referir aspropriedades percebidas e propriedades reais de umobjeto, que deveriam determinar como ele pode serusado.

Simplificando, affordance significa “dar uma pista”. Quando se tem predominância de affordance  o

usuário sabe o que fazer somente olhando, nãosendo preciso figuras, rótulos ou instruções.

Objetos complexos podem requerer explicações, masobjetos simples não. Quando estes necessitam derótulos ou instruções é porque o design não estábom.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 9/23

Bom modelo conteitual

Um bom modelo conceitual permite prevero efeito de ações.

Sem um bom modelo conceitual opera-se sob

comando cegamente.Efetua-se as operações sem saber que efeitos

esperar ou, o que fazer se as coisas não deremcerto.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 10/23

Bom modelo conteitual

Exemplo:Consideremos o exemplo da tesoura. Mesmo que

nunca tenhamos visto uma anteriormente, é claro

seu limitado número de funções possíveis. Osburacos deixam claro que algo deve ser colocadoneles, e a única coisa lógica de se colocar e quepodem ser encaixados são os dedos. Os buracos

possuem affordance que possibilita que os dedossejam inseridos. O tamanho dos buracos provêmrestrições que limitam quais dedos podem serusados: os dedos são sugeridos e outras

restringidos pelos buracos.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 11/23

Bom modelo conteitual

Consegue-se entender a tesoura e seufuncionamento porque suas partes são visíveis eas implicações claras. O modelo conceitual é,portanto, claro e até óbvio e existe um efetivo usode affordance .

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 12/23

Bom modelo conteitual

Em um contra exemplo pode ser usado umrelógio digital simples com dois ou até quatrobotões: Para que servem esses botões? Como descobrir

se são de puxar e empurrar e não girar? Comoacertar a hora, a data?

Não existe um relacionamento evidente entre os

controles e suas funções, nenhum mapeamentoaparente.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 13/23

Bons mapeamentos

Mapeamento é o termo técnico para denotar orelacionamento entre duas entidades. No casode interfaces, indica o relacionamento entre

os controle, seus movimentos e osresultados obtidos.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 14/23

Bons mapeamentos

Exemplo:Vamos recorrer ao exemplo dos carros e os

mapeamentos envolvidos em dirigir um carro.

Quando queremos ir para a direita, deveremosvirar o volante também para a direita.O usuário identifica dois mapeamentos: o controle que afeta a direção e;

o volante que precisa ser virado em uma das duasdireções.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 15/23

Bons mapeamentos

Ambos são arbitrários, mas a roda e o sentidohorário são escolhas naturais: visíveis, muitorelacionado ao resultado esperado, e provêm umfeedback imediato.

O mapeamento é facilmente aprendido e semprelembrado.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 16/23

Bons mapeamentos

Mapeamentos naturais são aqueles queaproveitam analogias físicas e padrõesculturais e com isso levam ao entendimento

imediato. Um objeto é fácil de ser usado quando existe

um conjunto visível de ações possíveis, e oscontroles exploram mapeamentos naturais. Oprincípio é simples, mas ainda existemdesigns onde não são incorporados.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 17/23

Feedback

Retornar ao usuário informações sobre asações que foram feitas, quais os resultadosobtidos.

Imagine falar com uma pessoa sem ouvir suaprópria voz ou desenhar com uma lápis que nãorisca, ou seja, sem nenhum feedback.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 18/23

Feedback

Exemplo:A um tempo atrás, ao imprimir documentos em

impressoras de rede nos deparávamos com

alguns problemas clássicos como: qual foi mesmo a impressora? a impressão já terminou ou não? o documento foi mesmo impresso ou houve algum

problema?Atualmente conseguimos visualizar essas

informações através do spool de impressão doSO.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 19/23

Conclusão

A tecnologia oferece potencial para tornarnossas vidas mais simples e agradável e cadanova tecnologia trás mais benefícios, mas ao

mesmo tempo adiciona tamanhacomplexidade que faz aumentar nossadificuldade e frustração em utilizá-la.

A mesma tecnologia que simplifica a vidaprovendo um maior número defuncionalidades em um objeto, também acomplica tornando muito mais difícil de

aprender, e usar.

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 20/23

Imagem a ser analisada

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 21/23

Imagem a ser analisada

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 22/23

Imagem a ser analisada  – Interface Bom

5/15/2018 Princ pios de Design Aula 4 - Desenvolvimento de Interfaces - slidepdf.com

http://slidepdf.com/reader/full/principios-de-design-aula-4-desenvolvimento-de-interfaces 23/23

Imagem a ser analisada  – Interface Ruim