Princípios de Design – Aula 4 - Desenvolvimento de Interfaces
-
Upload
alex-maycon-da-silva -
Category
Documents
-
view
367 -
download
0
description
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