09/10/2017 AVA UNINOVE

Os quatro princpios de Design

DESENVOLVER INTERFACES AMIGVEIS, EFICIENTES E QUE CAUSEM UMA TIMA SENSAO NA
UTILIZAO O NOSSO OBJETIVO. PARA ISSO, PRECISAMOS ENTENDER CONCEITOS IMPORTANTES DE

DESIGN DE INTERFACES E, ENTRE ELES, OS PRINCPIOS DE DESIGN. AQUI VOC APRENDER SOBRE OS

QUATRO GRANDES PRINCPIOS DE DESIGN E COMO ELES PODEM AFETAR O PROCESSO DE

DESENVOLVIMENTO DE BOAS INTERFACES.

AUTOR(A): PROF. THIAGO GRAZIANI TRAUE

O que so princpios de design?

Desenvolver sistemas computacionais no uma tarefa fcil, haja vista que h cursos e mais cursos de
diferentes nveis que, por anos, visa proporcionar aos seus participantes o processo completo de

desenvolvimento de uma aplicao. Este curso mesmo, repleto de disciplinas que contemplam diversas
diretivas para lhe proporcionar uma formao completa na rea.
Isso quer dizer que desenvolver aplicaes , inegavelmente, uma tarefa complexa. E isso no vale apenas

para projetos de sistemas, projetos so complexos por natureza, independente se so projetos de

embalagens de salgadinhos ou de sistemas bancrios completos. Projetos so complexos.

Por isso, precisamos conhecer o que os grandes autores, e claro, experientes na rea, portanto autores e
autoridades no assunto, dizem sobre os princpios de design.
Os princpios de design so quatro itens os quais devemos nos apoiar para fazer design e para qualquer

rea, seja, o desenvolvimento de embalagens de biscoitos (ou bolachas!) ou para telas complexas de

sistemas mveis e altamente interativos. O design, muitas vezes a alma do negcio e apoiar-se em seus
princpios poder resultar no sucesso de um projeto.

Em 1988, Norman publicou seu primeiro artigo sobre os princpios de design, que so atuais inclusive em

nossa realidade, mesmo a quase 30 anos.

Norman identicou esses princpios a partir de experincias pessoais ao observar o mundo e as frustraes

das pessoas com objetos do dia-a-dia e a diculdade de oper-los ou, pior, descobrir para que servem,

apenas os observando.
Os quatro grandes princpios, que estudaremos aqui, so:

Os quatro princpios de Design 01 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 1/9
09/10/2017 AVA UNINOVE

Visibilidade e affordance;
Bons modelos conceituais;
Bons mapeamentos;
Feedback.

Embora haja quatro princpios que sero apresentados isoladamente, seus aspectos e caractersticas so
altamente inter-relacionados e, portanto, podem ser tratados simultaneamente num projeto.

Visibilidade e affordance
Apenas o que precisa ser mostrado deve ser mostrado. Essa a essncia do princpio de visibilidade e

affordance.
A ideia que quando estamos trabalhando no design de alguma aplicao ou de algum equipamento (ou
ainda de qualquer coisa que estejamos projetando para uso humano), precisamos projetar sempre pensando

no usurio e de como ele ir enxergar nosso produto. Por isso, devemos deixar visveis apenas o que til,
de fato, para o usurio.

Os quatro princpios de Design 02 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 2/9
09/10/2017 AVA UNINOVE

Legenda: VISIBILIDADE E AFFORDANCE: PRECISAMOS DEIXAR APENAS O QUE VISVEL A MOSTRA

Existe, ainda, o conceito de visibilidade do efeito, que o usurio v (e percebe!) as aes realizadas no

sistema, ou seja, o usurio v sua ao se tornando efetiva no sistema. Se a ao pretendida igual a ao

realizada, ento a visibilidade do efeito foi bem sucedida. Para car mais fcil de entender, vamos a um

exemplo: o interruptor.
O interruptor (de parede, convencional) uma interface, que permite mudar o estado de um ambiente

(ilumina-lo ou escurec-lo). Ao apertar o interruptor para ligar a lmpada e ela, de fato, acender, ento a

visibilidade do efeito foi bem sucedida, contudo se voc apertar o interruptor para acender uma lmpada e,
repentinamente, sua torradeira comear a falar, ento a visibilidade do efeito no foi atendida. Ah, claro, as

lmpadas no proporcionam acessibilidade aos decientes visuais e isso algo que temos que tomar muito

cuidado ao desenvolver boas interfaces, com todas as visibilidades do efeito bem planejadas, para todos.

Os quatro princpios de Design 03 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 3/9
09/10/2017 AVA UNINOVE

Segundo Rocha, H. V., um bom contraexemplo da aplicao do princpio de visibilidade, so as portas.

Muitas vezes olhamos para as portas e no sabemos se devem ser puxadas, empurradas, deslizadas, ou

apenas car em frente a elas. Isso quer dizer que as dicas visuais de como operar uma porta nem sempre

satisfatria, gerando, portanto, frustraes na utilizao. Isso, claro, ocorre muito com interfaces grcas
de sistemas computacionais. Nossas interfaces no podem se tornar portas!

O ponto sobre o princpio da visibilidade que sua interface precisa fornecer dicas visuais (ou tteis) que

permitem o usurio rapidamente interpretar como operar tal interface e, ao mesmo tempo, prever o efeito

da ao.
Mas e a affordance? Bem, primeiramente importante saber que no existe traduo para este termo em

portugus (assim como a palavra saudades no pode ser traduzida para o ingls!). A affordance e o termo

usado sobre a relao das propriedades perceptveis e as propriedades reais de uma interface. Se as
propriedades percebidas pelos usurios so as mesmas propriedades reais da interface ou do objeto, ento a

affordance est sendo atendida integralmente. Por exemplo, o computador de mesa possui um gabinete,

monitor e perifricos. Para ligar o computador, procuramos diretamente o boto de ligar no gabinete, certo?
Se este boto est bem visvel e fcil de interpretar que serve de fato para ligar o computador, ento o

design deste gabinete possui princpios de Affordance bem aplicados.

Bons modelos conceituais

O princpio de bom modelo conceito o que permite os usurios a preverem os efeitos de suas aes, sem

desempenhar nenhuma ao, ou seja, permite o usurio a saber o que ir acontecer mesmo sem fazer nada.

Quando tm-se a predominncia do princpio de bom modelo conceitual aplicado ao design do sistema, os
usurios sabem rapidamente o que fazer, ou seja, o sistema torna-se rapidamente intuitivo. Isso consegue-

se conhecendo a rea a qual o sistema est sendo desenvolvido e entendendo processos e subprocessos

usados pelos usurios.

Isso parece ser simples de conseguir em sistemas computacionais, mas no . O ponto crtico que os

usurios podem aprender a operar o sistema atravs de treinamentos e manuais, mas quando algo der

errado o usurio poder car perdido se o sistema no possui um bom modelo conceitual aplicado ao seu
design.

Segundo Rocha, H. V., de uso dirio das pessoas, como tesouras, copos etc., o modelo conceitual bvio,

mas muito complexo de ser aplicado em sistemas computacionais.

Os quatro princpios de Design 04 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 4/9
09/10/2017 AVA UNINOVE

Isso nos retrata a importncia de conhecermos o domnio o qual a nossa aplicao est sendo empregada,

conforme mencionado acima. Por exemplo se estamos desenvolvimento uma aplicao mdica, precisamos

conhecer o processo utilizado pelos mdicos e operadores dessa aplicao. por isso que desenvolver
sistemas to completo: Temos que conhecer a nossa rea e a rea do nosso cliente e, para piorar, esses

clientes (portanto domnios de conhecimento), mudam a cada novo projeto.

Bons mapeamentos
Para entendermos o que o princpio de bom mapeamento em relao aos princpios de design, precisamos

entender o que mapeamento, propriamente dito.

A palavra mapeamento o termo tcnico para decorar o relacionamento entre duas entidades, que so

distintas (Rocha, H. V.).

Quando estamos, ento, falando de design de interfaces o mapeamento refere-se relao entre os itens da
interface e seus efeitos no sistema. Ao pressionar um boto de imprimir e o sistema enviar o documento

corretamente impressora, ento o mapeamento foi atingido.

Este princpio parece ser simples de ser aplicado, mas quando estamos desenvolvendo aplicaes, nem
sempre cobrimos todas as funcionalidades do sistema com a interface e so precisos retrabalhos para isso.

Se este retrabalho no design for mal feito ou mal planejado, o sistema car como uma colcha de

retalhos.
Para se garantir bons mapeamentos, o designer da interface precisa conhecer profundamente as

funcionalidades proporcionadas pelo sistema e, claro, as funcionalidades esperadas pelos usurios.

Uma forma de resolver isso seria colocar todas as funcionalidades na interface certo? No, no to
simples. A imagem abaixo mostra uma interface de um editor de texto com todos os botes disponveis

sendo exibidos. Quase no h espao para de digitar o texto!

Os quatro princpios de Design 05 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 5/9
09/10/2017 AVA UNINOVE

Legenda: ANTONIAN E., 2014, JIRA, WHY IS THE UI/UX DESIGN SO BAD!, DISPONVEL EM

HTTP://WWW.WILIAM.COM.AU/WILIAM-BLOG/JIRA-WHY-IS-THE-UI-UX-DESIGN-SO-BAD, ACESSADO

EM 23 DE SETEMBRO DE 2016

Isso quer dizer que bons mapeamentos tambm podem ser conseguidos com teclas de atalho, movimentos

especiais de mouse, deteco de face etc.

Um bom mapeamento como princpio de design o resultado da aplicao dos bons modelos conceituais

unido a um design cuidadoso que no deixa nada de fora, mas tambm no gere uma tela com mais

funcionalidades do que as necessrias. Lembre-se que um princpio de design no pode afetar outro, ou

seja, aplicar bom mapeamento no pode afetar a visibilidade e a affordance.

Feedback
Feedback signica, ao p da letra, retroalimentao. Este conceito aplicado aos princpios de design retrata,

ento, as informaes que so mostradas ao usurio.

Os quatro princpios de Design 06 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 6/9
09/10/2017 AVA UNINOVE

Isso quer dizer que precisamos manter os usurios bem informados o tempo inteiro, ou seja, o usurio

precisa saber o que est acontecendo, mas a quantidade de informaes tem limite, claro.

Em um sistema qualquer de uso comum, ou seja, que utilizado por um usurio sem domnio da tecnologia,

no precisa mostrar aos usurios o uso da CPU ou a quantidade de memria sendo alocada. Por outro lado,
se voc est projetando uma cabine de avio, informaes simples como presso dos pneus do avio,

temperatura da gua dos banheiros etc., devem ser facilmente acessadas pelos pilotos, assim como, as

informaes essenciais do voo (altitude, velocidade, presso dos motores, sistema de GPS etc.).

O feedback em si no um princpio de design difcil de aplicar, mas precisa ser cuidadosamente planejado

como os demais princpios. O ponto aqui : manter o usurio informada para no deix-lo perdido, mas

informao certa na hora certa primordial para no faz-lo se perder ainda mais, com excesso de
informaes.

Como vimos nesta aula, os princpios de design precisam ser levados em considerao cuidadosamente para

garantirmos a satisfao de nossos usurios em relao aos nossos sistemas. Aplicar os princpios requer

planejamento cuidadoso e estratgico. Investir tempo nisso pode ser caro mas, certamente, mais barato

do que o retrabalho necessrio quando se tm interfaces ruins, que mais atrapalham do que ajudam os
usurios a atingirem suas metas e necessidades.

ATIVIDADE FINAL

Um principio de design que diz que devemos tornar visvel apenas o que
deve estar visvel em cada situao o princpio de...?

A. Visibilidade de affordance
B. Bons mapeamentos

C. Bons modelos conceituais

D. Feedback

Por que devemos nos preocupar com o princpio de design de feedback?

Os quatro princpios de Design 07 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 7/9
09/10/2017 AVA UNINOVE

A. Este princpio de design no serve para muita coisa, se no para mostrar ao usurio o que precisa ser

mostrado, apenas.
B. Para mantes os usurios sempre informados do que for necessrio o tempo todos.

C. Para ajudar o usurio a criar mapas mentais de como operar o sistema integralmente, logo na

primeira tela ou primeiras instrues.

D. Para ajudar o usurio a encontrar o que procura

Voc v uma interface pela primeira vez e rapidamente sabe o que fazer
com ela. Qual o principal princpio deste cenrio?

A. Feedback

B. Bons mapeamentos

C. Visibilidade e affordance

D. Bons modelos conceiturais

REFERNCIA
Rocha, H. V. e Baranauskas, M. C. C., 2003, Design e Avaliao de Interfaces Humano-Computador, Instituto

de Computao, Universidade Estadual de Campinas,

Fioretti, M., 2015, Design encanta, inovao surpreende, 1 Ed., Alta Books

ANTONIAN E., 2014, Jira, why is the UI/UX design so bad!, Disponvel em

http://www.wiliam.com.au/wiliam-blog/jira-why-is-the-ui-ux-design-so-bad, acessado em 23 de Setembro

de 2016

Os quatro princpios de Design 08 / 08

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 8/9
09/10/2017 AVA UNINOVE

https://ava.uninove.br/seu/AVA/topico/container_impressao.php 9/9