O que é UI - User Interface? Veja aqui- Blog Raffcom
 O que é UI – User Interface?

O que é UI – User Interface?

Nos últimos anos, com a expansão de tecnologias em geral, muitas empresas começaram a investir na criação de sites, aplicativos e softwares, tudo isso com a intenção de estreitar ainda mais o laço entre as marcas e os consumidores. Para facilitar essa aproximação, foi necessário entender os inúmeros pontos que fazem parte de uma interação positiva entre o consumidor e a empresa no meio digital.

Dessa maneira surgiu a área de UI, que é responsável pela parte visual de um projeto, por onde o usuário interage com um determinado aplicativo, programa de computador, rede social, site ou até mesmo algum produto físico.

O User Interface – ou interface do usuário – é tudo aquilo que é perceptível visualmente em alguma plataforma e leva o usuário a uma interação positiva.  Pode ser um botão, um menu diferente ou até mesmo um som.

Enquanto o UX se preocupa em como a experiência do usuário pode ser boa, o UI cria uma interface com diversos elementos que proporcionam isso.

interface_ui_2

Por isso, neste post vou explicar o que é o User Interface e como podemos usá-lo como uma ferramenta estratégica para extrair o máximo de resultado em ações no meio digital.

Quer aprender? Então seja bem-vindo!

Qual a diferença entre UI (User Interface) e UX (User Experience)?

Esse é um tema que persegue todos os conteúdos que tentam falar especificadamente de UI ou de UX. Apesar de estarem atreladas, essas duas áreas são muito diferentes. Sendo assim, muitas pessoas ainda têm dúvidas sobre o que cada uma delas faz e como é possível obter bons resultados através da sua utilização.

De forma simplificada, UI é mais uma das ferramentas utilizadas para entregar a boa experiência ao usuário, pois é a parte tangível de um projeto, onde você constrói visualmente o site ou qualquer outra plataforma.

Já o UX é a parte intangível, que identifica os pontos de contato que fazem parte de uma boa experiência com a marca. Para você saber mais sobre UX indico que leia esse post sobre o que é UX Design.

UI na prática

interface_ui

Quando compreendemos todo o trabalho que o profissional de UX realiza, identificando como a experiência do usuário com algum produto ou serviço pode ser melhorada, fica muito mais fácil visualizarmos o que o profissional de UI faz.

Na prática, toda a parte que envolve a criação de layouts, com textos, imagens, chamadas para ação ou outros elementos, é responsabilidade do UI idealizar.

Nessa hora, pensar em uma interface simplesmente bonita é um erro muito grave, pois a usabilidade deve estar em primeiro lugar. Trabalhando dessa forma, a beleza das suas telas será uma consequência, que atrelada a boa experiência do usuário trará sucesso ao seu projeto.

interface_ui_3

Para garantir uma user-friendly, ou seja, uma experiência amigável, existe uma série de boas práticas que auxiliam na criação de uma boa interface para o usuário. Separei abaixo alguns pontos que considero importantes colocar em prática em qualquer projeto de UI:

  • Agrupar informações semelhantes ao invés de fragmentá-las;
  • Repetir o “call to action” mais importante da página para aumentar as possibilidades de interação;
  • Recomendar uma ação específica ao invés de mostrar várias com a mesma finalidade;
  • Deixar o caminho do usuário mais fácil para desfazer alguma interação, evitando assim a sua saída do site, app, etc;
  • Deixar bem claro o que pode ser clicado e selecionado;
  • Ser direto e objetivo;
  • Utilizar mais contraste do que similaridade;
  • Utilizar menos campos de preenchimento nos formulários;
  • Mostrar as informações ao invés de escondê-las.

Se preocupe com a usabilidade

É preciso que o usuário consiga identificar de forma clara os elementos que realizam alguma ação e quais ações eles realizam. Usar criatividade na hora de compor os elementos é muito importante, mas é preciso atentar-se aos “padrões” aos quais os usuários já estão acostumados e que reconhecem mais facilmente.

Um bom exemplo disso é a cor dos botões que já estamos acostumados a ver. A cor verde, que por um padrão significa uma ação positiva e, o vermelho que representa uma negação ou ação de deletar.

Agora imagine a confusão que você pode fazer na cabeça do usuário se a funcionalidade dessas cores for invertida. No exemplo abaixo é possível perceber a dificuldade em identificar qual é a ação correta a ser realizada.

clareza_em_ui_1

E agora se simplesmente tirássemos o texto do botão?

clareza_em_ui_2

É muito possível que a pessoa que se depare com essa situação cometa um erro e saia frustrada desse processo. Esse é um ótimo exemplo de como é importante ser claro e objetivo em todos os projetos.

Ter clareza é uma das questões mais importantes, pois uma interface não pode ser muito complexa e repleta de explicações, assim o usuário ficará perdido e não saberá que ação tomar, mas também não pode ser minimalista ao ponto dele não entender como funciona. Buscar pelo meio termo é o que chamamos de clareza em UI.

Se você conseguir usar apenas uma palavra em um botão, use. Se conseguir resumir os títulos de blocos em poucas palavras, resuma. Se for possível usar um ícone ao invés de uma frase, faça isso. O importante é que a mensagem fique clara e adequada para o usuário.

Facilite o acesso as informações

Uma boa interface é, necessariamente, redundante, pois é preciso deixar mais de um caminho possível para que o usuário consiga chegar ao seu destino ou desfazer uma ação errada. O papel de um profissional de UI Designer é guiar o usuário de forma simples, ao invés de complicar sua experiência criando um labirinto.

O exemplo abaixo é da tela de salvar do Pinterest, onde existem três opções para desfazer a ação de salvar.

pinterest_ui

  • Clicar em qualquer lugar da tela fora do modal;
  • Clicar na opção fechar no canto superior direito;
  • Apertar a tecla ESC do teclado.

Auxiliar o usuário a desfazer uma ação executada por engano é essencial, pois as pessoas são passíveis a erros, e quando é possível concertá-los de forma clara e rápida a sua plataforma acaba ganhando destaque.

Responda: interaja com a ação do usuário

É essencial que a todo o momento a interface dê respostas ao usuário sobre as ações que ele está executando. Pode parecer óbvio, mas uma barra de carregamento pode ser a diferença entre o usuário continuar esperando ou fechar uma aba.

spinner_youtube_ui

Não é por acaso que o spinner do YouTube mostra que o vídeo está sendo carregado.

O rascunho é essencial

Normalmente o profissional de UI começa com a criação de rascunhos e wireframes, ou seja, desenhando a estrutura/esqueleto como base do projeto.

O wireframe é uma parte essencial do projeto, pois com ele você consegue ter uma visão geral do layout, da hierarquia do conteúdo, de como os elementos vão ser dispostos na tela e dos pontos de interação que podem acontecer entre o usuário e a plataforma.

wireframes_ui

Depois de ter validado os wireframes, siga com a criação de um protótipo de alta fidelidade, ou seja, o layout gráfico da sua interface. Esse protótipo normalmente é desenvolvido em softwares de criação, mas existem alguns designers que trabalham direto com HTML e CSS.

Não é aconselhável trabalhar com a criação em HTML e CSS antes do cliente ter aprovado todo o projeto, pois fazer modificações direto no código fonte pode ser muito mais trabalhoso e demorado.  O ideal é utilizar, em um primeiro momento, ferramentas de edição como Photoshop e Sketch.

Ferramentas de UI

ferramentas_ui

Na hora de colocar a mão na massa, existem três softwares que são utilizados para a criação: Photoshop, Sketch e o Adobe Experience Design.

Não vou entrar na discussão de qual deles é o melhor, pois tudo dependerá da sua necessidade e adaptação. Por isso, antes de começar a trabalhar em um projeto de UI tenha certeza de estar trabalhando com um software que supri todas as suas necessidades.

Adobe Photoshop

O Adobe Photoshop é um software muito conhecido por designers e fotógrafos do mundo todo. Nas últimas atualizações, novas funcionalidades voltadas para o desenvolvimento de interface foram adicionadas, o que facilitou ainda mais a vida dos que já usavam a ferramenta para essa finalidade, o que também despertou o interesse de novos usuários.

O Adobe Photoshop possui versão para plataforma Windows e Mac OS X.

Sketch

O Sketch foi pensado exclusivamente para o desenvolvimento de interfaces web e mobile. Por esse motivo, muitos designers preferem trabalhar com ele, pois foi criado especificamente com esse propósito.

Atualmente só existe versão da plataforma para Mac OS X, o que impede que designers que utilizem Windows tenham acesso ao software.

Adobe Experience Design

O Adobe Experience Design é o mais novo lançamento da Adobe. Sua versão para avaliação foi disponibilizada para download no início do ano, mas somente para plataformas Mac OS X. Assim como o Sketch, a ferramenta foi pensada exclusivamente para o desenvolvimento de interfaces web.

A comunidade de designer ainda está em processo de adaptação e conhecimento, mas como todos os produtos da Adobe, é uma grande aposta para quem quer desenvolver projetos de forma fluída.

Apesar das funcionalidades que essas ferramentas disponibilizam é importante não ficar preso a elas. Crie, teste e veja o resultado, caso for necessário faça todo o processo novamente, pois tudo precisa ser pensado na boa experiência que o usuário pode ter.

O futuro das interfaces

amazon_echo_ui

Quando as telas touchscream surgiram, os designers tiveram o desafio de pensar em interações que antes aconteciam através de um teclado no celular e passaram a acontecer diretamente na tela. Isso trouxe um mundo de possibilidades novas para as empresas e seus clientes.

Agora estamos vendo novas mudanças acontecerem, como as interfaces não visuais. Um dos exemplos é o novo Amazon Echo, um assistente virtual que ajuda nos afazeres de casa sem precisar de nenhuma interação com toque, somente com a voz.

Outra novidade para a qual devemos voltar nossa atenção é a realidade virtual, que também exige outro tipo de interação e uma interface cada vez mais intuitiva e íntima com o usuário.

A tendência de um futuro muito próximo é que as interfaces se moldem as reais necessidades de cada pessoa, tornando cada contato único e extremamente positivo.

O UI está em constante mudança

O modo como as pessoas utilizam os produtos está mudando, dessa forma as interfaces precisam acompanhar essas mudanças se quiserem continuar entregando a melhor experiência. Graças a isso, o trabalho do UI Designer acabou se tornando essencial em cada processo.

E como o mercado de User Interface exige uma mudança constante, isso também é um requisito para o profissional que se aventura em fazer interfaces cada vez mais amigáveis.

O setor cresce exponencialmente e busca profissionais especialistas em identificarem problemas e buscarem por soluções. Às vezes a falha está na cor de um botão, como vimos no começo do texto, por isso a capacidade de fazer uma análise minuciosa é uma das qualidades mais importantes que esse profissional possui.

Espero que tenha gostado do texto, mas se ficou com alguma dúvida ou tem alguma sugestão, escreva nos comentário.

Fique atento que muito em breve voltarei com mais informações sobre como podemos melhorar a experiência dos usuários em plataformas on-line.

Até lá!

Rafael Lovi UX Designer

Rafael Lovi

UX Designer

blog@raffcom.com.br

Continue lendo

Estratégia em redes sociais: você está conversando com seu público-alvo?

Conhecer a fundo o perfil do público-alvo — suas necessidades, desejos e motivações — é primordial para o desenvolvimento de qualquer estratégia em redes sociais de sucesso. No entanto, para muitas empresas, “acertar o tom” da conversa ainda é um grande desafio. Afinal, antes de investir em táticas de venda e apresentação do produto, é […]

Integração do Google AdWords com o Google Analytics

Você provavelmente já deve saber que existem inúmeras razões para utilizarmos estratégias de links patrocinados, principalmente no Google AdWords. Para otimizar ainda mais essas estratégias e melhorar o desempenho de cada uma das suas campanhas, o recomendado é que seja feita e integração do Google AdWords com o Google Analytics. Mas você sabe como vincular […]

Remarketing de display: conheça os modelos e saiba segmentar corretamente

Em uma estratégia de Google Ads, as ações de remarketing trazem bons resultados ao possibilitar a exibição de anúncios a um público mais direcionado, aumentando as chances de conversão. Pensando nisso, vamos apresentar no post de hoje, uma ferramenta bastante eficiente para garantir o sucesso da sua tática de retargeting: o remarketing de display. No […]

O que é Behavioral Targeting (BT)?

Bom, agora que você já conheceu como o Web Analytics funciona e quais são as ferramentas úteis de acompanhamento de comportamento dos usuários no site, chegou o momento de colocar toda essa teoria na prática. Neste post, iremos abordar o Behavioral Targeting, uma técnica que auxilia na construção de ações de campanhas mais personalizadas, com […]