INTERFACE COM O USUÁRIO

André Canesin DE PASCHOAL1

RESUMO: Do conteúdo de um site, até a sua interface final. Todo projeto de um site, depende de um tema, que pode ser considerado uma empresa, um profissional, um produto, ou seja, o site nada mais é do que um material que comunica, informa ou ilustra um determinado tema. Porém, não basta somente expor conteúdos de qualquer forma para o usuário, um site depende do estudo do mesmo para facilitar a sua busca tornando-a mais prazerosa, compreensível e segura. A partir de 1990, com o surgimento da web, a interface não é pensada somente para softwares de ambientes desktop, novos usuários de classes sociais, profissionais e educacionais diferentes foram inseridos na utilização de interfaces, as interfaces web. Com isso o conceito de usabilidade mudou e todo o desenvolvimento foi focado para a facilidade do usuário. A composição da interface com cores, formas, fontes, margens e posição estratégicas dos elementos, tornou a usabilidade mais agradável, dando ao usuário mais habilidade e efetividade. A interface de um site deve conversar com o usuário, solucionando todas as suas dúvidas de forma prática. Um site deve ter a maior compreensão possível para quem foi designado. PALAVRAS-CHAVE: Interação; Sentimentos; Busca; Experiência.

1 INTRODUÇÃO

O cenário de desenvolvimento web no Brasil, passa por um momento de

organização. Diretrizes e metodologias são criadas para a padronização do

desenvolvimento, o que torna a web algo mais profissional. Porém existem dúvidas

sobre os quais profissionais desenvolvem um site e a importância de cada um deles

no desenvolvimento de um projeto completo.

Podemos dividir a produção de um site em três profissionais. São eles o Web

Designer, o Desenvolvedor front-end e o desenvolvedor back-end. Basicamente o

Designer Gráfico define a melhor interação do usuário com a interface e cria o

layout. O Desenvolvedor front-end estrutura todo o layout com a linguagem de

marcação HTML (HyperText Markup Language, que significa Linguagem de

Marcação de Hipertexto), se preocupando sempre com a semântica da linguagem

que dita a melhor usabilidade do site e maior facilidade das informações serem

                                                                                                                         1   Graduação em Design Gráfico, Especialização em Docência no Ensino Superior pelo Centro Universitário Barão de Mauá, Ribeirão Preto, São Paulo, Brasil. E-mail do autor: andre.canesin@gmail.com. Orientador: Prof. Me. Mario Marcos Lopes

2    

encontradas por buscadores. Lembrando que usabilidade é a tentativa ou esforço de

entregar o mesmo conteúdo para todos os usuários, incluindo deficientes. O

desenvolvedor back-end entra no projeto para configurar toda a parte de servidor de

hospedagem, funcionalidades do site e links com banco de dados. Os termos front-

end e back-end referem-se respectivamente às seguintes ideias. O que está a frente

e o usuário interage e o que está atrás, responsável pelas requisições no banco de

dados. Profissionais desenvolvedores normalmente são profissionais da ciência da

computação ou análise de sistemas, já o responsável pela interface é o Designer

Gráfico. Como já foi dito, padrões e metodologias estão sendo criadas para

desenvolvedores, a ideia principal deste artigo é discorrer sobre algumas dicas e

regras para criação de interfaces, tornando o design para web ou web design algo

mais organizado, padronizado e importante na formação do profissional de design.

Para falar de interface o artigo elege como referência o estudo feito por um analista

de usabilidade chamado Jakob Nielsen, que criou uma lista e deu aos itens o nome

de heurísticas para a criação de uma interface, que se tornaram fatores de apoio

para que o usuário consiga resolver seus problemas e dúvidas de forma simples,

navegando de forma intuitiva e guiada.

Uma coisa que gosto particularmente deste livro é que ele deixa claro que o design gráfico no negócio de interfaces com usuários não é somente sobre estética. Há muito mais coisas em jogo do que simplesmente belas figuras, e um bom design gráfico pode melhorar significantemente o valor comunicativo da interface, levando a uma melhoria na usabilidade (MULLET, 1995, p. 8)

2 AS HEURÍSTICAS DE JAKOB NIELSEN 2.1 Feedback

O sistema deve sempre manter os usuários informados sobre o que está ocorrendo, com respostas apropriadas e dentro do tempo razoável. (NIELSEN, 1995)

Qualquer sistema que interage com um usuário, deve responder e informar.

Deixar claro que está carregando algo ou faltou informação do usuário para

completar a tarefa e até mesmo informar o local onde ele se encontra, podemos

chamar este caso de visibilidade do status do sistema, que consiste em informar o

que o usuário está fazendo, com retorno de informações imediato.

3    

É muito importante que o usuário se sinta seguro de suas ações, quando o

mesmo clicar em um item no menu de seu site, no caso um item chamado “contato”,

mesmo sendo óbvio que ele se encontre na página de contato, pois serão exibidos

os itens que ele está procurando, é correto informar o mesmo com um título

“contato” na mesma página, então toda página de um site deve conter um título

relacionado como na Figura 1. Segundo Krug (2008, p.72), “Todas as páginas

precisam de um nome. Da mesma forma que cada esquina precisa de uma placa de

sinalização, cada página deve ter um nome.” Pode parecer inútil e repetitivo, mas

traz a sensação de segurança para o usuário, que se sente importante como foco

daquela informação.

Figura 1 – Título relacionado Fonte: Interface Site Ourofino Saúde Animal

Outro modo de informar ao usuário onde ele está no seu site são os

breadcrumbs, conhecidos também por “migalhas de pão”, são aqueles textos

informativos sempre localizados no topo de um site com uma lista de páginas para

chegar na página atual, veja na Figura 2, Krug (2008, p.77) disse que, “as Migalhas

são auto-explicativas, não ocupam muito espaço e fornecem uma forma conveniente

e consistente de fazer duas coisas que você precisa fazer com maior frequência:

voltar um nível ou ir para o início”. Nada mais é do que um suporte para o usuário

navegar e se localizar no site, um retorno de informação. Mais uma forma usual de

indicar ao usuário onde ele está é a marcação no menu ativo como na figura 3, uma

ótima prática de interface. Todas estas práticas deixam o usuário seguro devido a

preocupação de ampará-lo em caso de perda de raciocínio durante a navegação.

4    

Figura 2 - Breadcrumbs Fonte: Interface Site Ourofino Saúde Animal

Figura 3 – Menu ativo Fonte: Interface Site Ourofino Saúde Animal

2.2 Falar a linguagem do usuário

O diálogo deve ser expressado claramente em palavras, frases e conceitos familiares ao usuário ao invés dos termos originados do sistema (NIELSEN, 1995)

Todos os itens da interface devem ser representados com símbolos ou textos

de fácil entendimento, os textos de preferência com uma boa leitura e os símbolos

com dimensões adequadas e conceitos definidos. Alguns símbolos possuem

conceitos de fácil entendimento e de costume da maior parte dos usuários, mas

sempre devemos pensar que nem todos possuem o mesmo conhecimento, então é

usual e uma boa prática nomear os símbolos, como na Figura 4, nunca deixe o

5    

usuário em dúvida pois é uma forte causa para ele deixar sua interface e partir para

outra que o faça pensar mais intuitivamente.

Figura 4 – Símbolos nomeados Fonte: Interface Site Ourofino Saúde Animal

A preocupação deve ser focada para que o usuário não tenha que voltar no

tempo em sua fase de criança quando o aprendizado se dava a partir da

tentativa/erro. Como exemplo destes símbolos que fazem parte de um layout,

podemos pensar em ícones que ilustram algo, como o desenho de uma casa, veja

na Figura 5, simbolizando a home do site ou um desenho de uma lupa, veja na

Figura 6, simbolizando que ali encontra-se alguma informação de busca. Todas

essas práticas tornam a interface compatível com o mundo real, sem termos

orientados ao sistema, usando terminologia familiar ao usuário, dando ordem lógica

e natural às informações, organizando-as de acordo com o modelo mental do

usuário. Segundo Helander (1997, p.49),  “As expectativas que um usuário tem sobre

o comportamento de um computador vêm de modelos mentais”. Como já vimos a

usabilidade é a qualidade da interação do usuário com a interface.

6    

Figura 5 – Símbolo de conceito familiar Fonte: Interface Site Ourofino Saúde Animal

Figura 6 – Símbolo de conceito familiar Fonte: Interface Site Ourofino Saúde Animal

2.3 Saídas claramente demarcadas

Usuários normalmente escolhem algumas funções no sistema por engano e precisarão de saída de emergências bem demarcadas para sair do estado indesejado sem passar por um longo caminho. (NIELSEN, 1995)

Nada pior em uma experiência do que se sentir sem o domínio da situação,

quando você não sabe se vai pra frente ou pra trás, como sair daquele lugar, onde

nada por perto indique como voltar e começar novamente, não é isso que

esperamos que nossa interface proporcione ao nosso usuário, pelo contrário,

queremos que ele se sinta à vontade ao navegar pelo site, sem medo. Por isso

devemos sempre indicá-lo atalhos que possibilitem o controle de avançar e retornar

7    

em seus passos e sempre deixando claro que um passo pode não ter volta, como no

caso de salvar algo no banco de dados, uma alteração de senha ou finalização de

compra por exemplo. O usuário tem que ter liberdade e controle, tendo meios fáceis

e visíveis para sair de situações inesperadas. O botão voltar na interface pode ser

considerado uma regra, veja na Figura 7, segundo Nielsen (2007) é o segundo

recurso mais utilizado a web, não podemos esperar que o usuário entenda que pode

voltar pelo botão do navegador, veja na Figura 8, mesmo que ele faça parte da

interface do mesmo, uma boa interface web, não depende da interface do

navegador. Podemos chamar estes atalhos recomendados de saídas de emergência

para que o usuário possa desfazer ou refazer ações voltando ao controle da sua

interação e situando-se em um ponto recente da mesma.

Figura 7 – Botão voltar na interface web Fonte: Interface Site Ourofino Saúde Animal

Figura 8 – Botão voltar na interface do navegador Fonte: Interface Firefox 37.0.2

8    

2.4 Consistência Os usuários não devem ter que saber se palavras, situações, ou ações diferentes significam a mesma coisa. O sistema deve seguir as convenções da plataforma. (NIELSEN, 1995)

A padronização em uma interface é basicamente responsável pela

organização mental do usuário para uma navegação intuitiva. Além de resultar

também em uma organização de elementos no layout. Esta padronização sendo

estética cria uma unidade visual que facilita o manuseio, tornando a navegação ágil

e facilitando a aprendizagem do usuário e reconhecimento dos conceitos. Nunca

devemos identificar uma mesma ação por ícones diferentes, elementos parecidos

devem ser usados para propósitos semelhantes e funcionalidades similares terem

uma sequência de ação próximas. Basicamente textos, símbolos e qualquer outro

elemento interativo ou informativo deve ter o mesmo significado em qualquer lugar

da interface, imagine se em uma página, o ícone de uma flecha para a esquerda,

que remete a intenção de voltar, apareça em outra página, da mesma forma e cor,

porém com uma finalidade diferente. Isso causa confusão, estranheza e frustação do

usuário. Outro exemplo de padronização em um layout web é definir uma forma

única para botões, veja na figura 9, podemos citar botões básicos como “voltar”,

“enviar”, “ver mais” etc., devem ser padronizados em sua forma, cor e até mesmo

tamanho de fonte. A interface não deve apresentar convenções ambíguas. Todas

estas práticas ajudam na consistência da interface.

Figura 9 – Padronização de botões da interface Fonte: Interface Site Ourofino Saúde Animal

9    

2.5 Previnir erros

Por melhor que seja a mensagem de erro, um cuidadoso projeto de interface é que impede a ocorrência dos problemas em primeiro lugar. Eliminar circunstâncias que sejam propícias aos erros, ou verificá-las e apresentar ao usuário uma opção de confirmação antes que incidam no erro (NIELSEN, 1995)

Como já foi falado neste artigo, erros acontecem a todo momento pelos

usuários e a função do web designer é pensar a frente dele tentando minimizar ou

evitar a chance de erros pois estes são os maiores motivos de frustação dos

usuários. Para isso deve-se utilizar recursos que facilitam as ações do usuário ou

que evitem a confusão que poderá resultar no erro. Nota-se então que o melhor a se

fazer é prevenir, evitando as frustações, porém o erro é inevitável e uma hora

ocorrerá, com isso é muito importante um retorno claro para o usuário assim que o

erro acontecer. Além deste aviso, um caminho simples para retornar do erro e

começar novamente sua interação é muito útil. Um exemplo que mais ocorre na web

é o erro no preenchimento de um formulário, para evitar este erro podemos utilizar

formulários que só aceitam um tipo de preenchimento, como por exemplo um

formulário para preencher o telefone que tem sua máscara definida, veja na Figura

10, não deixando o usuário preencher com outro tipo de informação.

Figura 10 – Máscara definida Fonte: Interface Site Ourofino Saúde Animal

10    

Outra boa prática é manter o formulário preenchido com um exemplo, do tipo

“joao@email.com” no campo de “E-mail”, o que chamamos de placeholder, além de

manter todos os rótulos dos campos com seu titulo definido, veja na Figura 11.

Figura 11 – Placeholder (Exemplo de preenchimento) Fonte: Interface Site Ourofino Saúde Animal

O retorno que o usuário espera quando ocorre um erro precisa informá-lo o

que ocorreu, como por exemplo o sistema avisa o usuário que o número de telefone

dele é obrigatório e não foi preenchido assim após esta correção a ação estará

completa ou caso ele escreva um conteúdo que não seja um e-mail válido no campo

de e-mail, o sistema o avisa que aquele conteúdo não é válido, sempre alertando o

erro com uma mudança de cor de fundo ou cor de texto, destacando a informação,

veja na Figura 12.

Figura 12 – Marcação para aviso de erro Fonte: Interface Site Ourofino Saúde Animal

11    

2.6 Minimizar a sobrecarga de memória do usuário

Minimizar a carga da memória do usuário permitindo a visualização de objetos, ações, e opções. O usuário não deve ter que lembrar informações de uma parte do diálogo para outra. As instruções para o uso do sistema devem ser visíveis ou facilmente recuperáveis sempre que apropriado. (NIELSEN, 1995)

Esta regra, ou heurística como chamamos aqui e tem como função reduzir a

dificuldade do usuário para solucionar um problema ou dúvida encontrado em uma

interface, nos trás a ideia de que em uma interface o usuário não tem que lembrar

conceitos nem caminhos para solucionar seu problema, tudo tem que estar sempre

a sua disposição, para ir a diante ou retroceder em sua navegação. Uma prática boa

de exemplo é usar símbolos, cores e conceitos que já estão na mente do usuário no

dia a dia, como um semáforo, todos sabem o significado das cores, o que cada uma

quer dizer, isso facilita, somando conceitos já conhecidos em sua interface, tudo se

torna mais fácil fazendo o usuário pensar menos, ficando mais a vontade para

apreciar o design e o conteúdo do projeto. O usuário deve reconhecer ações e

caminhos ao invés de lembrá-los, a interface deve dialogar com o usuário no

momento da interação, servindo-o como guia, tornando estas ações e caminhos

visíveis e de fácil identificação e recuperação em caso de perda de raciocínio.

2.7 Atalhos

Os atalhos, não vistos pelos usuários novatos, podem normalmente acelerar a navegação para usuários experientes, de tal modo que o sistema deve conciliar usuários experientes e inexperientes. (NIELSEN, 1995)

A prática dos atalhos em uma interface depende de tecnologias utilizadas na

montagem da estrutura HTML do projeto, estes servem para melhorar a flexibilidade

e eficiência na navegação de um usuário experiente, que tendem a compreender

mais rapidamente caminhos da árvore navegacional de um projeto. Como bons

exemplos desta prática podemos citar a tecla TAB para localizar botões de submeter

algo ou também para navegar entre campos de um formulário. Estes atalhos podem

passar desapercebido por usuários novatos que necessitam de caminhos mais

fáceis de ser entendidos para concluir sua navegação, então uma boa interface deve

12    

ser intuitiva na interação com usuários novatos como robusta o suficiente para

permitir rapidez e eficiência na interação do usuário avançado.

2.8 Diálogos simples e naturais

Os diálogos não devem conter informações que sejam irrelevantes ou que sejam raramente necessárias. Cada unidade extra da informação em um diálogo compete com as unidades relevantes da informação e diminui sua visibilidade relativa. (NIELSEN, 1995)

Todas as informações devem ser mostradas ao usuário de forma simples e

direta, sendo exatamente o que ele precisa e está procurando, nada de repetições e

informações extras ou irrelevantes, uma informação extra pode atrapalhar e ofuscar

uma outra mais relevante para o seu layout visual. Com isso, o minimalismo é de

extrema importância para a interface não apresentar informações desnecessárias.

Neste ponto da criação do layout de uma interface, o cuidado com a estética é

fundamental, cada elemento deve ser pensado para agradar os olhos do usuário,

respeitando alguns princípios, como contraste, alinhamento, espaçamentos e

proximidades, tornando a experiência mais prazerosa. Uma boa prática é trabalhar

bem com espaçamentos, criando respiros para os olhos do usuário, um espaço sem

informação é essencial para o descanso dos olhos, veja na Figura 13.

Figura 13 – Margem, espaço sem informação para descanso dos olhos do usuário Fonte: Interface Site Ourofino Saúde Animal

2.9 Boas mensagens de erro

13    

As mensagens de erro devem ser expressas de forma clara (sem códigos), indicar precisamente o problema, e sugerir construtivamente uma solução. (NIELSEN, 1995)

A mensagem de erro em uma interface deve ser de fácil entendimento, com

simbologias e conteúdos já conhecidos pelo usuário, não adianta deixar que o

sistema informe-o, com sua linguagem, o usuário não é obrigado a entender a

linguagem do sistema e sim uma que todos possam entender. Esta mensagem tem

a obrigação de ajudar o usuário a entender o que está acontecendo e lhe guiar para

voltar alguns passos para o recomeço ou conseguir resolver seu problema e

prosseguir na sua navegação sem perder nenhuma informação. Um bom exemplo

em uma interface de web, já citado aqui, ocorre no preenchimento de um formulário,

caso alguma informação for preenchida incorretamente, o sistema logo informa o

usuário que algo no seu formulário está errado, alterar a cor do campo preenchido

ou de seu rótulo/título, veja na figura 12, é uma boa forma de alertar o usuário onde

está seu erro. Todas essas práticas devem ser precisas, evitando a intimidação e

culpa do usuário, deixando-o sempre a vontade.

2.10 Ajuda e documentação

Pode ser necessário que o sistema forneça ajuda e documentação, apesar de ser melhor quando o sistema é usado sem documentação. A informação deve ser fácil de ser encontrada, focada nas tarefas do usuário. Devem ser listados passos concretos a serem seguidos, e não ser muito extenso. (NIELSEN, 1995)

Uma interface ideal não precisa de documentação e ajuda para o usuário,

porém se necessário a documentação deve estar em local de fácil acesso, ser de

fácil entendimento e não muito extensa, contendo passos concretos e diretos para o

usuário conseguir concretizar sua tarefa. Em um layout web, normalmente quando o

conteúdo é muito extenso, a interface costuma ter uma área chamada mapa do site,

onde o usuário pode navegar em uma árvore navegacional com todos os links e

áreas do site ou um rodapé estendido, com links que repetem o menu principal do

site, veja figura 14.

14    

Figura 14 – Rodapé estendido Fonte: Interface Site Ourofino Saúde Animal

3 CONSIDERAÇÕES FINAIS

Seguindo estas regras, heurísticas ou recomendações, a interface do site

permitirá uma experiência de uso mais agradável e com maior absorção do

conteúdo, o usuário terá menos dificuldade, receio ou medo de desbravar novos

conteúdos na interface. Então para construir uma interface web necessita

conhecimento de usabilidade, pois além de agradar o usuário, lhe fornece confiança

em alcançar seus objetivos. Em um curso superior de Design Gráfico, a matéria web

design deve eleger como foco principal e inicial o conceito de usabilidade e

interação, para isso o aprendizado deve ser iniciado com a prática. Cria-se

personagens fictícios como potenciais usuários do site, após analisar o perfil de

cada personagem criados, juntamente com as informações da empresa ou tema

específico do site, que faz parte de um briefing, inicia-se o processo de prototipação

da interface, esse processo é feito com papel e lápis, para dar mais liberdade ao

designer. Com isso coloca-se em prática as regras ou heurísticas, o entendimento

das heurísticas é a base para uma interface bem feita, após este passo, dá-se início

ao processo de criação de layout ou projeto gráfico, em cima dos protótipos

montados já com a interação definida.

Portanto podemos definir que as heurísticas estão presentes no processo de

idealização da interação e na criação do projeto gráfico, etapas de responsabilidade

do web designer.

15    

REFERÊNCIAS BIBLIOGRÁFICAS

MULLET, Kevin. Designing Visual Interfaces: Communication Oriented Techniques. Reimpressão. Universidade de Michigan: SunSoft Press, 1995. NIELSEN, Jakob. NN/g Article: 10 Usability Heuristics for User Interface Design, 1995. Disponível em: <http://www.nngroup.com/articles/ten-usability-heuristics/>. Acesso em: 29 mai. 2015. KRUG, Steve. Não me faça pensar. 2.ed. Rio de Janeiro: Alta Books, 2008. HELANDER, M. G. Handbook of Human-Computer Interaction. 2.ed. North-Holland: Elsevier, 2014. INFORMANT. Usabilidade: Conheça as 10 heurísticas de Nielsen – Parte 1. 29 jan. 2014. Disponível em: <http://www.informant.com.br/blog/2014/01/29/usabilidade-conheca-as-10-heuristicas-de-nielsen-parte-1/>. Acesso em: 09 fev. 2015. INFORMANT. Usabilidade: Conheça as 10 heurísticas de Nielsen – Parte 2. 30 jan. 2014. Disponível em: <http://www.informant.com.br/blog/2014/01/30/conheca-as-10-heuristicas-de-nielsen-parte-2/>. Acesso em 09 fev. 2015. CHOCOLADESIGN. As 10 heurísticas de Nielsen para a Usabilidade. 17 out. 2012. Disponível em: <http://chocoladesign.com/as-10-heuristicas-de-nielsen-para-a-usabilidade>. Acesso em 05 dez. 2014. TIDBITS. As 10 heurísticas de usabilidade do Nielsen. 10 nov. 2008. Disponível em: <http://chocoladesign.com/as-10-heuristicas-de-nielsen-para-a-usabilidade>. Acesso em 20 fev. 2015.