Cinco idéias de prototipagem UX para o seu site de inicialização!

Ayesha Ambreen em UX Planet Seguir 9 de jul · 9 min ler

Como você define a experiência do usuário?

É a experiência que seus visitantes têm em seu site? É o quanto eles interagem com seu site ou como é fácil usá-lo? É o takeaway para seus visitantes? Ou é definido por quão altamente é o seu site?

Olhando para o design do site como uma espécie de " grande figura ", é tudo o que precede.

O co-fundador da Imaginovation, Michael Georgiou, escrevendo para a Entrepreneur , chega a chamar a experiência do usuário de “ a métrica mais importante que você não está medindo ”.

Mesmo sem perceber, a experiência do usuário está desempenhando um papel importante no sucesso geral do seu site.

Construindo em torno de UX

Segundo a User Experience Professionals Association , a experiência do usuário é:

“Todos os aspectos da interação do usuário com um produto, serviço ou empresa que compõem as percepções do usuário em relação ao todo. O design da experiência do usuário como disciplina está relacionado a todos os elementos que juntos compõem essa interface, incluindo layout, design visual, texto, marca, som e interação. ”

Assim, cada aspecto do design do seu site pode – e deve – incluir atenção à experiência geral do usuário.

Isso soa bem do ponto de vista retrospectivo. Afinal, em algum momento, cada um de nós é o usuário e preferimos uma boa experiência.

Mas como um designer pode incluir isso no protótipo e no wireframe de seu site, antes do tempo?

Considerando o produto ou os serviços, a marca e o público-alvo irão variar dependendo das circunstâncias, quão bem você conhece sua marca e, por último, mas não menos importante: o site em questão.

Mas essas cinco ideias de protótipo para um site de startups podem dar a você um salto na criação de um site que atenda à experiência do usuário.

Um Layouts Simétricos:

Layouts assimétricos são uma tendência popular no design do site como um todo nos dias de hoje. Eles são valorizados por serem incomuns e, por definição, “ fora da caixa ”; em vez de manter um layout de grade mais tradicional, o design assimétrico pode funcionar da mesma forma que um piso aberto em uma casa, permitindo mais espaço e respirabilidade.

Mas layouts como esses são mais do que apenas outro rosto bonito (assimétrico).

Um layout que não é exatamente tradicional em seus canais pode fazer duas coisas importantes:

  • Chame atenção para elementos específicos
  • Conduza o olho, ajudando o espectador ao longo de uma jornada pré-definida

Esses dois recursos são fatores que influenciam bastante no bom design da interface do usuário.

Em primeiro lugar, chamar a atenção para elementos específicos no design destaca recursos e informações que serão úteis para o espectador.

Todo mundo já teve essa experiência em um site mal projetado, onde eles têm que lutar muito para encontrar as informações que estão procurando. Ninguém gosta dessa experiência.

Assim, mesmo ao decidir quais recursos serão destacados em seu layout não tradicional, dê prioridade ao conteúdo que provavelmente será pesquisado por seu visualizador. Informações, como listagens de produtos ou informações de contato, devem estar no topo da lista.

Em segundo lugar, os layouts assimétricos podem ajudar seus espectadores em suas viagens pelo seu site.

E é verdade que os sites simétricos mais tradicionais também podem fazer isso. A diferença importante em relação ao UX é que os layouts assimétricos, como mencionado, abrem espaço, dando espaço para o seu site respirar.

Mesmo que seus espectadores percorram o conteúdo e encontrem o que estão procurando, um layout assimétrico destaca e os conduz diretamente a outras seções importantes do site com uma estética única.

Fonte: Hirondelle EUA

Os designers da Hirondelle USA sabem como tirar o melhor proveito de um layout assimétrico. O conteúdo descentralizado desempenha um papel crucial em tornar a composição desequilibrada.

Fonte: Claudio Guglieri

A página inicial de Claudio Guglieri é outro exemplo de layouts assimétricos. Primeiro, o telefone está um pouco para baixo, interferindo na seção de trabalho seguinte e, em seguida, a sutil irregularidade nas imagens dentro das grades traz uma sensação de desequilíbrio.

M icro Movimentos:

Em termos de atrair a atenção de um espectador, é difícil pensar em uma escolha mais eficaz do que usar o design que se move.

Os vídeos em si são extremamente importantes em termos de marketing e branding. E o vídeo faz uma enorme diferença no engajamento e quanto tempo o espectador fica em determinado site também. A revista Forbes , por exemplo, observa que o usuário médio da Internet gastará até 88% mais tempo em um site que inclui conteúdo de vídeo .

Então, como isso se traduz em micro-movimentos?

Bem, é uma tendência relativamente nova, sendo explorada por vários designers de protótipos na web. Portanto, a pesquisa em estatística ainda não foi divulgada.

Mas, com o design em movimento, criando um impacto tão grande na forma de vídeo, os micro-movimentos, micro-vídeos, gifs e até imagens em loop estático, com um leve toque de mudança ocasional, obtêm – e mantêm – a atenção do espectador.

Os micro-movimentos, como o termo implica, podem ser incrivelmente sutis, mas sua influência no envolvimento e na experiência do usuário pode superar em muito a soma de suas partes.

Fonte: The Cool Club

Você gosta de jogos de cartas? Se sim, então The Cool Club tem algo legal para você. Os cartões de animais que se movem suavemente no banner são suficientes para chamar a atenção e atrair o visitante a rolar. Eles têm algo para os fãs de Star Wars também em sua cesta.

Fonte: Locomotiva

Site de locomotivas explica como a melhor agência de web design pode brincar com animação. Objetos flutuantes – movendo-se diretamente para cima ou para baixo ao arrastar – não apenas chamam a atenção, mas envolvem os visitantes também.

F luid / Design Orgânico:

Design fluido ou orgânico é outra forma de layout que está criando sua cabeça como tendências de web design emocionantes.

Essa escolha de design usa formas, cores e movimentos que são extraídos da vida e da natureza. Assim, em vez de uma caixa com conteúdo, você pode ter um fundo de fluxo e refluxo com formas que colocam o espectador em mente de um lago.

A ideia é que o design torne o conteúdo mais acessível.

Esse tipo de design é cada vez mais eficaz à medida que mais e mais pessoas lidam com sobrecarga de informações, ansiedade e outros problemas que podem tornar o processamento de conteúdo mais difícil.

O design fluido deve tirar um pouco da formalidade do layout de um site, tornando mais fácil e mais orgânico para o espectador processar o conteúdo, prestar atenção e seguir a lógica do layout do site.

É fácil pensar em termos de formas tradicionais. Mas só porque algo é fácil – ou porque é tradicional – não significa que se adapte a todas as circunstâncias. E inclinar-se para a fluidez que é fácil para os olhos – e no cérebro – definitivamente contribui para uma melhor experiência do usuário.

Fonte: 120 Auditoria de Água

Uma seção do 120 Water Audit 'exibe a forma orgânica das ondas como um fundo sutil por razões óbvias (já que a empresa gira em torno da água).

Fonte: Le Cab Com

Le Cab Com não apenas exibia as formas irregulares, mas as animava para formar uma forma irregular gigante. Para trazer consistência ao design, essas formas são usadas como favicon e também no efeito de transição de página.

M ouse Overs:

Todo mundo gosta de conteúdo interativo. E nem sempre tem que ser conteúdo que nos faça perguntas e demandas de entrada.

Às vezes, significa apenas algo tão simples quanto passar o mouse sobre uma palavra ou frase e receber um reconhecimento de nossa existência no site que estamos vendo.

Novamente, assim como na entrada anterior sobre tendências de design de influência fluida, é importante levar em conta a ansiedade aumentada do mundo de hoje ao projetar uma boa experiência do usuário. Manter o espectador calmo, engajado e investido enquanto os ajuda a encontrar o que eles precisam e, eventualmente, converter pode, às vezes, ser tão fácil quanto dar a eles uma opinião sobre o que eles vêem na tela.

Para este fim, um número crescente de sites incorporou jogos pequenos e fáceis de jogar em suas páginas.

E, embora os jogos que não sobrecarregam o espectador possam ser uma boa ideia, eles também podem desviar a atenção do ponto final de sua startup, impedindo que o espectador avance na jornada.

Outra sugestão é incorporar pequenas alterações – alterações de cor, pop-ups fade-in com informações ou esclarecimento de conteúdo, ou até mesmo um pequeno ruído de reconhecimento – quando o espectador passa o mouse sobre determinados itens. Essas alterações normalmente seriam incluídas com fotos, links ou conteúdo clicáveis que precisam de mais definição.

Mas essas mudanças também podem ser incorporadas como “ovos de Páscoa” em conteúdo aleatório ou outros recursos que se encaixam em sua inicialização específica.

Com o reconhecimento do site, a experiência do usuário é aumentada; e com conteúdo extra como pop-ups fade-in, fica mais fácil para um usuário encontrar as informações de que precisam, na ponta dos dedos, sem ter que ir e voltar entre as páginas.

Fonte: Pixels de Tomer Lerner

O site “ Pixels by Tomer Lerner ” tem um exemplo típico de mouseovers. É muito gratificante ver essas formas geométricas respondendo ao movimento do mouse e se movendo em direções diferentes enquanto você move o cursor sobre elas.

Fonte: Mainworks

A Mainworks exibe criativamente seu trabalho em um layout de grade composto por imagens texturizadas de cada projeto. Toda imagem ganha vida assim como os visitantes passam o mouse sobre uma foto (um de cada vez) e exibe as informações do projeto na tela.

W Espaço hite:

O espaço em branco desempenha um grande papel na rapidez e facilidade com que processamos as informações que vemos.

Se não houver espaço em branco suficiente e houver muito conteúdo, perderemos o ponto principal e, potencialmente, não processaremos nenhuma informação por estarmos sobrecarregados.

Se houver muito espaço em branco, poderemos sentir que estamos perdendo alguma coisa. Ou podemos até sentir que algo está errado com o carregamento do site, e temos que atualizá-lo e tentar novamente.

O uso adequado e equilibrado do espaço em branco no design do site pode fazer pelo menos duas coisas para a experiência do usuário do espectador:

  • Pode destacar informações importantes
  • Pode contribuir para uma estética minimalista

Como designers, a última coisa que queremos para os espectadores é se perder, ficar sobrecarregados ou sobrecarregados no conteúdo que estamos oferecendo. Criar espaço suficiente em torno de partes individuais de conteúdo pode ajudar. No entanto, você sempre pode usar os princípios da gestalt para incorporar a psicologia humana ao design.

E a estética minimalista, novamente, contribui para diminuir a ansiedade e o engajamento.

Fonte: Squarespace

O Squarespace explica brevemente os seus três principais recursos, um após o outro, usando um primeiro plano em forma de quadrado branco. Além disso, todo o layout tem muito menos elementos para reduzir a distração. Enquanto a chamada branca para a ação “COMEÇAR” recebe o holofote bem merecido.

Fonte: Tinker

O Tinker é para quem procura um relógio de pulso personalizado, escolhendo tudo, desde cores a estilo. O que faz sentido porque o designer usa o espaço em branco para mostrar o relógio em pedaços. Muito criativo, não é? Em geral, o site usa religiosamente o espaço negativo apenas exibindo informações sobre o relógio e o preço; sem texto longo, nem mesmo o chamado para ações.

Experiência do usuário como um processo…

Cada um desses cinco pontos acima pertence a apenas uma parte da experiência geral do usuário, em vez de ser um protótipo do todo.

Em geral, a forma como você cria seu website será diferente dependendo do seu público e do seu nicho de mercado. Mas certas coisas são verdadeiras com a experiência do usuário em todos os tipos de sites: nenhum usuário quer se sentir incomodado ou sobrecarregado com um site. Todos os usuários desejam encontrar as informações que estão procurando com um mínimo de barulho, e os usuários estão mais propensos a interagir com um site que eles acham atraente e fácil de usar.

Em última análise, o melhor protótipo para o seu site de inicialização será aquele que é, em geral, de fácil utilização.