UI-Interface de Usuário Para WordPress

William Tormen

William Tormen

Co-fundador da Agência WnWeb. Profissional especialista em criação de sites em WordPress.

É claro que você já ouviu o termo UI(Interface de usuário), se não ouviu não se assuste, UI é um termo mais técnico igual o UX(Experiência de usuário), para as pessoas que possuem um pouco mais de conhecimento, nos expressamos falando somente as siglas.

Neste artigo vamos abortar o termo UI-Interface de Usuário Para WordPress, ou seja, vamos falar sobre a aplicação do UI em sites, lojas virtuais, mas mais precisamente em projetos focamos em WordPress.
Compartilhar no facebook
Facebook
Compartilhar no twitter
Twitter
Compartilhar no linkedin
LinkedIn
Compartilhar no whatsapp
WhatsApp

Índice do artigo

O que é UI-Interface de Usuário?

UI-Interface de Usuário Para WordPress

Sem enrolação, o conceito de UI é melhorar a interação entre o usuário e seu site, loja virtual, aplicativos ou softwares, basicamente é isso.

O UI explora ao máximo os diversos elementos que fazem parte do seu layout e que são de extrema importância para melhor a interação do usuário com seu site.

Explicando melhor, quais são os principais elementos?

Se pensarmos que um site é composto por: Textos, botões, ícones, cores e imagens. Fica mais simples e fácil de entender, vamos detalhar esses itens para facilitar a explicação.

Tipografia.

A tipografia é a fonte, ou seja, o estilo de letra do seu site, seu logotipo é composto por uma letra acompanhada de um desenho talvez, o estilo da escrita no teu logotipo é chamado de fonte. É claro que muitas vezes não existe uma fonte certa, muitos logotipos são personalizados e estilizados, mas vamos retomar o ponto de partida. Toda escrita tem uma fonte e essa fonte é chamada de tipografia.

Utilizar o tamanho adequado na fonte é muito importante também, existem dados recentes que explicam que o tamanho 14px e 16px, são os mais indicados para uma leitura, o espaçamento e a distância entre as linhas também é um fator importante para considerar, avalie você mesmo.

Se você tivesse que escolher um estilo de formatação e fonte para seu site, qual escolheria?

Exemplo 1:
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.
Exemplo 2:

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English.

Imagine-se lendo um livro ou texto médio/grande de uma página de um site qualquer, qual estilo de texto é o mais suave de ler?

O exemplo 1 de ambas explicações é muito mais confortável de ler e muito mais intuitivo, esse julgamento de qual ser o melhor texto é baseado em diversos estudos, para cada estilo de público e necessidade existe um estilo de fonte adequado, mas sempre é bom ressaltar, pare e pense sobre seu projeto, avalie se realmente sua formatação tá boa! Pergunte para mais pessoas, oque elas acham do estilo da fonte, combinações de cores e espaçamentos.

Não tem conhecimento técnico o suficiente para escolher e avaliar? Tudo bem! Compare seu site com o seu maior concorrente, anote os pontos a serem melhorados em seu site, navegue em seu site em seu celular, talvez você nunca tenha feito isso.

A importância dos botões.

Por mais simples que possa ser, os botões fazem parte dos sites e lojas virtuais desde sempre, é uma forma de destacar ou padronizar alguns elementos.

Alguns botões têm mais impactos e importância que outros, é importante saber entender a finalidade de cada botão.

Profissionais indicam o uso de botões com as bordas arredondadas ou ovais, eles explicam que no estudo baseado nessa técnica o botão arredondado teve mais interação do que o botão quadrado.

///// Botões CTA: Call To Action.

Esses botões são as chamadas para ação, são responsáveis por induzir o usuário a ver um determinado produto, serviço, entrar em contato, inscrever-se.

Exemplo de Botão CTA para entrar em contato, desde a cor até o estilo arrendondado faz parte do conceito UI.

Exemplo de Botão CTA para comprar um produto, cor verde é mais efetiva para botões com a ação de comprar.

Sistema de cores.

É satisfatório ver um projeto que está utilizando suas cores da identidade visual bem distribuída e bem trabalhadas no projeto, mas será que a cor da identidade visual está boa para o usuário?

Desde sempre nosso cérebro é treinado para identificar algumas cores e associa-las com alguma situação.

///// Atenção, cuidado, perigo.

Cor vermelha sempre indicou uma situação de perigo, delicada o até mesmo uma situação de alerta, utilizar o vermelho descuidadamente pode passar a ideia errada ao seu usuário.

///// Atenção, sinalização.

Amarelo também é indicada para o uso de sinalização, atenção, cuidado, prepare-se. Se usada estrategicamente é uma cor muito boa.

///// Seguração, tranquilidade.

Verde é uma cor muito boa para transmitir segurança, tranquilidade é muito indicada para botões comprar, adquirir, contratar e assinar.

Por mais que a combinação de cores seja quase infinita, e sua marca tem uma paleta de cor ou identidade visual, é muito importante pensar de forma estratégica, esse é o papel do UI, estudar o comportamento e entender como o usuário se comporta na interface.

Hoje uma das formas mais utilizadas de cores são no estilo Flat Deisgn, não vou entrar muito neste assunto para não fugir do nosso ponto principal, mas vou deixar uma imagem para explicar a diferença entre o Flat Design e o Realistmo Design.

Flat Design ou Realismo Design

Hoje o Flat Design é a tendência, muitos gigantes do mercado já mudaram seus logotipos realismo pelo Flat Design, além de ficar melhor visualmente é muito mais leve, pensando em desempenho e otimização.

UI Mobile - Interface de usuário Mobile.

Muitas empresas pensam no site ou loja virtual apenas no desktop, não pensam em suas versões mobiles, mas hoje o Google prefere que os sites sejam otimizados para o mobile antes mesmo de serem otimizados para outras resoluções isso se chama Mobile First.

O que é Mobile Friendly?

É importante você não confundir o termo Mobile Friendly com o termo Responsivo, existe uma diferença neste ponto.

///// Responsivo.

Responsivo é ter um site adaptável a todas as resoluções, mas não necessariamente funcionar 100% em todos os dispositivos móveis, existem elementos que não se comportam bem em resoluções menores e por mais adaptável que seja, não fica 100% certo.

Resumo: Responsivo é ter seu site adaptável em diversas resoluções (tamanhos de telas).

///// Mobile Friendly e First Mobile.

Agora vem a diferença, para construir um projeto totalmente otimizado para os dispositivos mobiles e até mesmo ter um alto desempenho no Google, é necessário ter na equipe um profissional em UX ou UI.

Mobile Friendly é muito diferente do layout responsivo.

Lembrando que 80% do tráfego do seu site é pelo público mobile, por este motivo o conceito mudou e agora ele se chama Mobile First, explicando de forma rápida e simples, para o algoritmo do Google, o mais importante é a otimização e navegabilidade mobile, sem contar que e um dos maiores fatores de ranqueamento no SEO.

O profissional UX prepara seu site para ficar perfeito em todas as resoluções, pensando em cada ação que o usuário vai tomar dentro do seu site, um profissional bem qualificado já prepara o ambiente pensando no SEO do site.

Explicando de forma rápida, o profissional UX com a própria sigla diz. Experiência de Usuário.

Este profissional tem como função melhorar a navegabilidade do seu projeto pensando diretamente nos passos do cliente, ter uma interface de usuário capaz de atender as necessidades dos usuários de forma rápida e simples é o sonho de qualquer um.

Depois que o profissional UX saiu de ação, chega o UI, com a função de aplicar os conceitos de design na estrutura que o profissional UX elaborou.

Na imagem a seguir é possível ilustrar bem a diferença entre UX e UI.

Diferença Entre UI e UX

UI-Interface de Usuário Para WordPress.

Se você clicou no menu índice e caiu diretamente aqui, significa que você conhece os outros tópicos, parabéns é bastante conhecimento, na verdade, agora vamos para a parte que lhe interessa, UI-Interface de Usuário Para WordPress.

Talvez você não saiba, mas o WordPress por ser uma plataforma focada em blog, ele é totalmente funcional e otimizado quando o assunto é Mobile First e Mobile Friendly.

Voltando uns 10 anos atrás quando não era um fator importante a navegação mobile existia alguns plug-ins que mesmo assim conseguiam simular uma resolução menor em seu site.

Hoje por ser muito mais importante a navegação mobile, o próprio WordPress tem por função nativa ser otimizado para o mobile, mas a grande sacada é a seguinte, o problema nunca foi a plataforma WordPress, mas sim, o tema que você usa.

Talvez por falta de investimento em um tema específico para seu nicho de negócio, você optou por um tema que não possui esse recurso, é muito mais econômico você investir em um tema totalmente otimizado e que tenha uma boa interface UI, contratar um profissional para ajustar é praticamente pagar 2x pela mesma coisa.

Um tema que particularmente eu gosto muito é o Pergo, você pode compra-lo aqui, é um tema muito bom e tem uma ótima interface de usuário, além de ser um tema otimizado para o SEO, mais informações sobre o tema você encontra aqui.

Agora vamos para a realidade de muitos, não quer comprar um tema muito menos contratar um profissional em UI e UX, tudo bem, calma!

Plug-in Ideal para seu site

Utilize um construtor de páginas, os famosos Pages Builder’s , sempre indico o Elementor PRO.

///// Elementor PRO

Um dos melhores construtores de páginas, já testamos diversos aqui na agência, o Elementor PRO é muito completo e nos atende muito bem nessa parte de UX e UX.

Elementor PRO Editando Mobile

É possível você alterar o layout do seu site e visualizar em simultâneo, a navegação mobile, com isso você melhora todos os elementos em ambas resoluções e melhora a interface do usuário.

Sou Designer, qual programa usar?

Tá em dúvida de qual software utilizar para criar seus layouts e fazer uma interface de usuário top? Vou te apresentar o Adobe XD, além de ser um programa sensacional para criar interfaces UX e UI, você pode criar todo o layout por ele, todas as telas do seu projeto e colocar gatilhos nos botões para simular a navegação das páginas.

Além de criar as telas e simular também a navegação mobile, quando apresentar o layout para seus clientes, eles terão a experiência de navegar em seus sites antes mesmo de serem publicados.

Após criar as telas do seu projeto, você pode criar um link de compartilhamento para enviar para seu cliente, é possível deixar o link privado (com uma senha), ou público, onde todos pode acessar seu layout.

William Tormen - Especialista WordPress

William Tormen - Especialista WordPress

Espero que tenha ajudado a esclarecer alguma dúvida, se você não conhecia os termos UX, UI, Mobile Friendly, Mobile First e Responsivo, você foi apresentado aos termos, quando pensei nesse tema para o artigo eu fiquei muito feliz, quando comecei no mundo digital e logo surgiram esses termos eu lembro que muita gente tinha dúvidas e muitas dúvidas sobre esses termos, eu era mais um nesse grupo, graças aos cursos que tive o prazer de fazer e a experiência como desenvolvedor Front-End, hoje meu conhecimento ajuda muitos que estão começando exatamente como eu comecei um dia, é isso o mais legal de tudo, aprender para ensinar.