Post on 23-Jul-2016
description
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.