PROJETO DE INTERFACES

Conteudista
Prof.ESP. GLEIDSON GOUVEA DA SILVA

Introduo

Chegamos a algo que todo mundo est acostumado a ver e ouvir falar, porm
em muitos casos vemos erros simples e por sua vez at alguns erros primrios
por esquecermos de trabalhar o bsico em nosso projeto, desde estudo,
anlises e testes com o mesmo, para ns que falamos e vivemos o mundo
web, trabalhar uma boa interface para que os usurios possam navegar e
compreender onde estando situados algo extremamente fundamental, por
isso vamos pensar muito em nosso projeto daqui para frente, vamos lembrar
que no estamos desenvolvendo apenas um layout, mas sim estamos criando
uma experincia com o usurio e isso torna tudo mais vivo, mais realista e
marcante para usurio e para ns como criadores do projeto.
Vamos ver que trabalhar uma boa interface no um bicho de sete cabeas e
nem tudo todo terrorismo que ouvimos por ai sobre uma boa interface para
o usurio, vamos perceber que tudo est mais em nossa proposta de
organizao de trabalho, entendimento do nosso usurio, desde seu
comportamento at suas necessidades. Com isso a partir daqui vamos
entender sua real importncia, como lidar com problemas criando solues e
resultados satisfatrios para cada usurio e sua navegao.

Capitulo 01 - Experincia do Usurio e Usurio de Interfaces

Isso algo ouvimos demais, algumas pessoas e designers acabam na dvida

de entender como essa experincia funciona, quais suas vantagens e
desvantagens? Qual o real propsito de trabalhar todo esse processo. Certo,
mas como assim experincia com usurio?
Para comear podemos encontrar duas siglas que condiz com nosso tema
sendo: Experincia do Usurio (EU) ou User Experience (UX), envolve mais
que a simples interao do usurio, ela vai alm gerando destaques em
aspectos afetivos, sentimentos e significados se destacam e ganhamos
riquezas na interao humano-computador.
Sabemos que a web dinmica, interativa e alm de tudo est em constante
evoluo e com isso nossa experincia do usurio torna-se dinmica no qual
essa o nosso maior desafio, acompanhar as mudanas tecnolgicas,
mercadolgicas e comportamental, pois ambas esto em constante mudana.

A maioria das pessoas acredita que User Experience somente encontrar a

melhor soluo para os seus usurios mas no . UX trata sobre definir o
problema que precisa ser resolvido (o porqu), definir para quem esse
problema precisa ser resolvido (o quem), e definir o caminho que deve ser
percorrido

para

resolv-lo

(Whitney

Hess).

Outra definio que temos de User Experience as percepes e respostas dos

usurios resultantes do uso e/ou antecipao do uso de um produto, sistema
ou servio (ISO 9241-210, 2010 apud Schlemmer, 2012).

Temos como meta e entender e atender as reais necessidades, desejos e

expectativas do usurio, quando o usurio navega em website ele quer ver um
bom layout, ter fcil acesso as itens procurados, contedo relevante, pginas
rpidas e desejos e necessidades sanados. Estamos aqui entendendo esse
mundo e o que buscam e o que sentem em relao a isso, agora vamos
comear a ver que quem projeto a interface seu foco cada vez mais pensar
no usurio e para isso dar certo todo o processo envolve vrias reas na qual
podemos realmente montar uma equipe para projetar interfaces por sua ampla
gama de categorias envolvidas.

Vamos conhecer as reas que subdividimos em Arquitetura de Informao (AI),

Design, Front-End e User Experience (UX), ambas trabalhadas em conjunto e
harmonia geram mais preciso em seus projetos.
O Arquiteto de informao responsvel por projetar funcionalidades,
organizao de contedo, ambos trabalhados focados no comportamento do
usurio, nessa fase h todo estudo de necessidades, perfil e caractersticas do
usurio podendo assim dizer as aes que poderiam ser efetuadas e as que
no podero. O mesmo ainda classifica e cuida de informao e coleta de
dados para o projeto, a partir dele so criados os prottipos wireframes,
palavras-chave, documentao, categorias, flows de navegao.

O Designer responsvel por toda rea visual do projeto, pensar em cores,

formas, imagens sua principal funo, alm de aplicar coerentemente todo
contedo de forma a facilitar a legibilidade da informao dentro de um projeto.
Com base nas informaes recebidas do arquiteto de informao ele constri
layouts, compatveis, agradveis, consistentes, ajudando na compreenso e
leitura visual em todo projeto.

Quando falamos de Front-End muitos as vezes algumas pessoas acabam se

confundindo e no entendendo sua real funo, mas vemos aqui que eles so
os responsveis ativos na transformao dos layouts recebidos do designer
mais a experincia arquitetada pelo arquiteto de informao, em cdigos,
podendo a partir de agora termos o nosso projeto visivelmente ativo para
navegadores web, eles renem toda a informao e rea visual para
transformar em um arquivo/documento com a estrutura semntica, resultados
disso temos documentos em HTML semnticos, folhas de estilo CSS, cdigo
Java Script que melhora a experincia com o usurio, tudo isso gerando j
melhor navegao, velocidade e otimizao das pginas.

Chegamos agora nos designers de user Experience, realmente aqui

entendemos a requisitos do usurio, entram em prtica as reais necessidade
desse usurio/cliente, o fator X realmente proporcionar uma real experincia
com esse usurio, gerar uma proximidade, fidelidade, interao e feedbacks
sobre todo projeto. Nessa rea possuiu total integrao com os demais itens
que vimos acima ele atinge todos os pontos como usabilidade, performance,
necessidades, organizao, esttica. Vamos conferir abaixo um diagrama que
representa essas reas e sua interdisciplinaridade.

Vamos ver que Maslow entra como factor principal para entendermos nosso
projeto desde seu inicio at finalizao e com ela sabemos e vemos que o ser
humano necessita/busca, afeto, amor, auto-estima e realizao pessoal e
esses itens so basicamente nosso foco, levar tudo o usurio est buscando
com interaes em harmonia, mensagens amigveis, humanizao em
contedo, no qual sabemos que muitos sites, pginas temos mensagens
geradas por computadores deixando de ter a verdadeira essncia que
precisamos levar a cada usurio e isso perde muito em um projeto.
Desenvolver algo funcional sem pensar desde nossa parte administrativa e
todos os itens de experincia com usurio como termos vivenciado qualquer
situao na qual no fomos bem tratados, quando queremos ir at um
shopping e ele fantasticamente lindo e perfeito porm a recepo e
atendimento das pessoas ruim, tudo que foi construdo em sua cabea sobre
a beleza, conforto, segurana do local comea a desmoronar e voc
simplesmente comea a no gostar mais desse local, assim com a
experincia do usurio, estamos distantes mas estamos falando de pessoas,
para pessoas e com pessoas, lembrar que sempre tem algum atrs da tela e
que essa pessoa tambm tem necessidades, desejos e sentimentos igual a
ns.

Essa combinao mostra todas as reas e vertentes possveis que temos

dentro da experincia do usurio, lembrando que o usurio precisam de amor,
e precisamos pensar em design de interface emocional, para conquistarmos o
usurio cada vez mais, independente do tamanho de nosso projeto, vamos
sempre focar no emocional.

Capitulo 02 - Organizao, Esboos e Ferramentas

Nessa rea vamos ainda ver o quo importante manter nossa organizao
em dia, desde o ponto mais bsico at o elemento mias detalhado, vemos me
muitos casos, projetos com erros bsicos que poderiam ser corrigidos se
organizados e visualizados antes. Estamos no momento que se errarmos
agora, corre o grande risco de precisar realizar a novamente todo o projeto,
desde idia, concepo e produo. Por isso hora de estudarmos mais
9

nosso projeto e verificar se ele atinge todos os requisitos pesquisados por

voc, referente ao cliente.
Organizar e ter um bom wireframe cuidar do nosso projeto para o futuro, ele
funciona como um prottipo, porm nele no precisamos inserir fotos e
contedo super detalhados, ele a nossa guia do projeto, no qual ele estrutura
a hierarquia , posicionamentos e organizao dos elementos em nosso layout,
tudo parece muito simples, mas grandes casos navegamos em um site lindo,
porm nada agradvel e isso j se d quando estamos nessa rea inicial de
projeto.
Wireframe em sua grande maioria algo que para construirmos precisamos
apenas de papel, lpis e borracha nas mos, assim j conseguimos criar toda
nossa ideia de organizao e funcionalidades de nosso site.

10

Quando temos toda nossa base em wireframe criada, chegamos ao momento

dos mockups, que so representaes bem prximas ao nosso projeto, super
comum encontrarmos em reunies no dia-a-dia, vrios projetos apresentados
em mockups, por trazerem a real fidelidade de como o projeto vir ser, isso
facilita no apenas para ns web designers, mas tambm para o
cliente/usurio, pois ele consegue ter a real percepo de tudo que foi falado
com ele em reunies est dentro dos padres de cada feedback recebido.

11

Algo que vemos comumente na rea de projetos de interface so as chamadas

ao ou call to action. Ele atua fortemente no mundo web e um dos
propulsores do mundo web, geralmente ele vem em forma de links, botes que
conhecemos e visualizamos todo dia como, Boto Curtir, Ver Mais, Compre
agora, ltimas unidades entre outros, mas por esses exemplos realmente
sabemos que eles esto totalmente ativos em nossa vida e para isso trabalhar
os famosos, call to action fundamental para um projeto obter mais xito em

seu lanamento.
Ambas ferramentas somadas e bem trabalhadas geram fora, segurana e
relacionamento com o usurio, que est cada vez mais crtico e participativo
por causa das redes sociais; Utilizar ferramentas por s s no conseguimos
nenhum resultado, precisamos fielmente trabalhar com necessidades, desejos
e sentimento do nosso usurio.
Mais um tem que muitos as vezes esquecem por terem grande habilidades
com software o design clean ( limpo ), e para ser limpo no necessariamente
precisamos trabalhar com o branco, esse um erro que muito iniciantes
cometem em pensar que o clean est associado sempre ao branco, quando
no est. Podemos criar um design agradvel para nosso layout, baseado em
vrias, cores, fotos e elementos desde que a harmonia e composio visual
12

desse layout fique clara e objetiva, nesse conceito vemos vrios projetos que
contm cores e formas at elementos 3D e no deixam de ser clean por no
terem o branco como cor principal.

Nosso exemplo acima ilustra bem quando falamos que para ser clean, nosso
projeto no necessita ser branco e pode sim trabalhar com cores, desde que
tenha equilbrio com os elementos visuais e proposta do layout.

13

Concluso:

Vimos que projetar interfaces vai alm de sentar em um microcomputador e

sair criando, precisamos realmente pensar em todos os passos antes de
produzir. Identificar necessidades e desejos do usurio fator fundamental
para uma boa construo estrutural, saber como ele pensa e o que ele pensa
torna todo o projeto mais completo e cuidadoso, lembrando que uma vez
iniciado sem seguirmos os padres bsicos, nosso projeto corre o risco de ser
refeito e isso leva a uma nova estrutura de projeto e construo tornando assim
o primeiro trabalho criado em tempo perdido. Um bom wireframe trabalhado
ajuda em muito a criao e desenvolvimento do projeto e j vimos que no
nenhum bicho de sete cabeas trabalhar sua construo.

Uma boa

apresentao pode render grandes frutos para isso nossos mockups entram
em ao, criar uma apresentao para seu projeto de modo que o mesmo
consiga se vender sozinho um grande ponto para concretizar a aprovao
para o prximo nvel, que combinado com as chamadas de ao torna nosso
projeto mais forte e completo.
Tudo est ligado as necessidades, desejos e sentimentos do nosso usurio, o
ponto principal para acertarmos em nossos projetos lembrar que do outro
lado de nossa tela h algum e os sentimentos so variveis que no temos
controle, ento focar em transmitir amor, carinho e afeto atravs de um design,
tambm faz parte do nosso dia-a-dia.

14

15

Referncias

MEMRIA, Felipe. Design para a Internet: projetando a experincia perfeita.

Rio de Janeiro: Campus/Elsevier, 2005. 192 p.

AGNER, Luiz. Ergodesign e Arquitetura da Informao: trabalhando com o

usurio. Editora Quartet, Rio de Janeiro: 1959.

DIAS, Cludia. Usabilidade na Web: criando portais mais acessveis. Atlas

Books, Rio de Janeiro: 2007.

FILHO, Joo Gomes. Gestalt do Objeto: sistema de leitura visual da forma.

Editora Escrituras, So Paulo: 2001.

NIELSEN, Jakob. Projetando Websites. Editora Campus, Rio de Janeiro: 2000.

PREECE, Jennifer; ROGERS, Yvone; SHARP, Helen. Design de Interao:

Alm da Interao homemcomputador. Editora Bookman, So Paulo: 2005.

16