Práticas recomendadas para 6 elementos comuns da interface do usuário
A aparência e a usabilidade de determinados elementos e funcionalidades da interface são cruciais para o sucesso de qualquer site no mercado atual.
Estudos demonstraram que até mesmo um atraso de uma fração de segundo na opinião do usuário enfraqueceria sua percepção e interesse em um site e, em última análise, diminuiria a taxa de conversão do site.
Em certos nichos e indústrias, ter elementos de UI que não são óbvios em seu uso pode ser perfeitamente aceitável. A indústria de blogs e desenvolvimento web são exemplos perfeitos.
Mas quando projetamos interfaces de usuário para públicos não especializados em tecnologia - o que geralmente é o caso do trabalho do cliente -, precisamos garantir que certos elementos da interface do usuário não se afastem muito do que os usuários estão acostumados.
Este artigo discute algumas práticas recomendadas e características de usabilidade de seis elementos da interface do usuário e as convenções de cada um, para que os desenvolvedores possam criar experiências do usuário que sejam simples e bonitas.
1. Aparência da Caixa de Pesquisa
Em grandes sites ricos em informações ou produtos pesados, a busca é a principal. Os usuários aqui geralmente abandonam as barras de navegação convencionais em favor da caixa de pesquisa.
Uma caixa de pesquisa que não é imediatamente visível terá um dos dois efeitos: 1) o usuário assumirá que nenhuma funcionalidade de pesquisa está disponível, ou 2) o usuário encontrará a funcionalidade de pesquisa após um período atrasado e, possivelmente, irritante.
Certifique-se de que a caixa de pesquisa no seu site é fácil de ver. Fundos escuros e gráficos extravagantes prejudicam a usabilidade , por isso, mantê-lo branco ou cinza claro é o melhor. Além disso, verifique se a caixa de pesquisa é grande o suficiente em relação a outros elementos importantes na página, mantendo assim sua posição na hierarquia visual.
A caixa de pesquisa em Domínio por IP adapta-se bem ao tema visual do site, sendo laranja e graficamente consistente com o ambiente. Mas se uma caixa de pesquisa em um site mais ocupado receber esse tratamento, provavelmente seria difícil identificar.
O design não é um obstáculo no domínio por IP, porque o site tem uma função: pesquisa, que fica bem no meio da página. Além disso, estando em um nicho de tecnologia, seus desenvolvedores têm menos incentivo para ficar com as convenções. Mas esse grau de criatividade deve ser evitado em websites maiores , cujos públicos-alvo podem não ser tecnicamente mais experientes.
Hora de Aventura Enquanto isso, mantém sua caixa de pesquisa branca, convenientemente dimensionada e fácil de encontrar na página:
Apesar de estar em um idioma estrangeiro, o Adventure Time tem uma caixa de pesquisa muito clara, mesmo para usuários que falam inglês. O tamanho e a cor da caixa são complementados pelo gráfico de lupa, que se tornou o símbolo universal da pesquisa online. Um usuário que procura essa funcionalidade não terá um problema aqui.
Esse padrão deve ser seguido em todos os projetos destinados a uma base diversificada de usuários.
Leitura adicional:
2. Conteúdo dobrável / expansível claramente marcado
Os sites se beneficiam de painéis e menus suspensos, porque eles criam layouts mais limpos e menos confusos. O conteúdo oculto nesses elementos de interface pode, no entanto, prejudicar a usabilidade de um site, caso sua presença não seja claramente indicada.
Quando um usuário clica em um link ou botão, espera ser levado a uma nova página. Mas quando um usuário clica em um link ou botão que tem um indicador de conteúdo oculto, espera que o novo conteúdo seja exibido instantaneamente (via JavaScript ou AJAX) e tenha a opção de ocultá-lo posteriormente. Assim, um site deve diferenciar entre links normais e links que revelam novos conteúdos via JavaScript .
O conteúdo recolhível, como em painéis laterais e árvores de menu, pode ser indicado com uma seta, um triângulo ou um indicador de mais / menos do Windows Explorer. O painel que os usuários conectados acessam Globo CSS indica claramente que é recolhível:
Abaixo está a mesma página depois que o painel foi expandido para revelar um grupo de funções:
Com o conteúdo do painel agora expandido, a seta é girada em 90 graus, sugerindo que o mesmo conteúdo pode agora ser oculto ou recolhido. Esse mesmo princípio pode ser aplicado aos menus suspensos ou suspensos, embora isso não exija uma seta giratória. Surpreendentemente, esse recurso é frequentemente omitido mesmo em sites projetados profissionalmente.
Leitura adicional:
3. Indicador de Carregamento AJAX
Quando você melhora a experiência do usuário carregando conteúdo por meio de solicitações assíncronas, certifique-se de informar ao usuário que uma solicitação AJAX está sendo processada. Sem esse indicador, o usuário pode desistir de esperar ou se perguntar por que nada aconteceu em resposta ao clique.
Você pode conseguir isso de várias maneiras; Uma maneira é destacar uma mensagem de "Carregamento" ou semelhante no local ou perto do local onde a ação ocorrerá, como faz o leitor de RSS do Google:
Na parte superior da captura de tela, há um texto realçado em amarelo, que aparece quando o botão "Marcar tudo como lido" é clicado, informando ao usuário que algo está acontecendo.
Outra maneira de indicar isso é com animação ou uma ampulheta rotativa, que seria familiar para os usuários do Windows. Um indicador animado é usado em vários sites, incluindo Twitter , onde os usuários clicam no botão "Mais" para ver os tweets mais antigos:
Depois que o botão é clicado e dependendo da velocidade da conexão do cliente com o servidor, um familiar gráfico animado aparece, informando ao usuário que o pedido está sendo processado.
Gráficos de carregamento AJAX estão disponíveis gratuitamente em vários sites diferentes, muitos dos quais permitem que você personalize os gráficos com tamanho, cor e outras opções.
Esse tipo de indicador visual é importante para solicitações assíncronas que não fornecem pistas do cliente sobre qual atividade está sendo carregada.
Um indicador semelhante ao AJAX também pode ser usado para melhorar a funcionalidade não-AJAX que se comporta como AJAX e leva tempo para carregar. Isso pode incluir uma galeria de fotos que carrega uma imagem maior quando uma miniatura é clicada.
Gráficos de carregamento de AJAX e outros indicadores na verdade não aceleram uma página, mas eles melhoram o tempo de carga “percebido” , que geralmente é tão valioso quanto melhorar o tempo de carregamento real .
Leitura adicional:
4. Localização do carrinho de compras e funções de login e registro
Quando os usuários digitalizam uma página para o botão "Carrinho de compras" ou "Registrar agora", o primeiro lugar é o canto superior direito da página. A menos que você tenha uma razão convincente para fazê-lo, mantenha essa funcionalidade em seu local familiar ou corre o risco de desacelerar e interromper a experiência do usuário.
Opções e funções que se enquadram nesta categoria incluem "Ver carrinho", "Check out", "Log in", "Log out", "Registrar", "Enviar link", "Esqueceu a senha?" E até mesmo "Fale conosco. Esse último item normalmente seria o último em uma barra de navegação horizontal.
TasteBook inclui quatro desses links no canto superior direito de seu layout:
Maui Divers Jewelry é outro bom exemplo e também inclui um gráfico de sacola de compras:
5. Formato de Data de Expiração nos Formulários de Cartão de Crédito
Quando um formulário solicita a data de vencimento do seu cartão de crédito, o formato é sempre o mesmo: o mês, representado por dois dígitos, seguido do ano, representado por dois ou quatro dígitos (por exemplo, 03/11 ou 03/2011). O formato de quatro dígitos é como a data de expiração aparece no próprio cartão de crédito.
A melhor maneira, portanto, de coletar essas informações e fortalecer a experiência do usuário é usar duas caixas de seleção separadas, uma para o mês e outra para o ano. Não faça o usuário inserir a data de validade em uma única caixa de texto, mesmo que você forneça instruções.
Aqui está um bom exemplo do página de pagamento de Maui Divers Jóias:
E aqui está um exemplo de um campo de data de expiração mal projetado:
Além disso, o seletor de mês não deve exibir os nomes dos meses, mas deve listar os números de 01 a 12. Não há razão para desacelerar os usuários, fazendo-os descobrir que "08" significa "agosto".
6. Links Facilmente Identificáveis
Isso nunca deve ser um problema, mas infelizmente alguns sites ainda não distinguem claramente entre links e texto regular no corpo principal.
Na maioria dos casos, a melhor maneira de indicar essa diferença é tornando os links uma cor diferente e sublinhando-os. Em alguns casos, basta uma forte cor contrastante; mas apenas sublinhar ou apenas alterar ligeiramente a cor raramente é suficiente e, muitas vezes, prejudica a acessibilidade.
Cameron.io faz esta distinção bem:
Esses links não seriam tão visíveis se fossem meramente sublinhados, mas não alterados em cores. Você não criaria um botão que não se parecesse com um botão, então por que deixar os links de texto se misturarem ao corpo principal? Como a maioria dos usuários verifica o texto on-line, os designers devem garantir que todos os links sejam identificáveis muito antes de um mouse ser passado sobre eles.
Leitura adicional:
Conclusão
Todos os elementos e funções da interface do usuário discutidos neste artigo são cruciais para a usabilidade do site e desempenham papéis importantes na percepção da marca pelo usuário.
Muitos pequenos aprimoramentos podem fazer uma grande diferença na velocidade percebida e podem impedir que os usuários fiquem frustrados ou desconfortáveis.
Torne os elementos da interface do usuário simples e simplificados e siga as convenções, sempre que possível. Você verá taxas de rejeição reduzidas, melhores conversões e um fluxo constante de tráfego de retorno.
Escrito exclusivamente para WDD por Louis Lazaris, um escritor freelance e desenvolvedor web. Louis corre Webs impressionantes , onde ele publica artigos e tutoriais sobre web design.
Como alguns desses ou outros elementos da interface do usuário poderiam ser aprimorados? Por favor, compartilhe seus pensamentos nos comentários abaixo.