10 interfaces de usuário de integração CSS e JavaScript gratuitas

O objetivo da integração é familiarizar os novos usuários com uma interface. Isso vem em muitos estilos diferentes, e não há maneira certa de fazê-lo. Mas se você estudar como sites e aplicativos fazem a integração, poderá obter ideias para seu próprio trabalho.

E com essas UIs de integração de CSS e JavaScript gratuitas, você terá muitas ideias que oferecem inspiração e snippets de código para ajudá-lo a começar.

1. Slides de carrossel

A integração do carrossel rotativo é muito popular em dispositivos móveis, onde o espaço na tela é limitado. Mas esse efeito também pode funcionar em sites onde você precisa transmitir informações rapidamente.

Confira esta demonstração de slides em carrossel criada por Nick Wanninger para ver o que quero dizer.

É um exemplo de integração totalmente gratuito criado usando o Flickity e algum código CSS básico. Isso funciona tanto para dispositivos móveis quanto para computadores, por isso é uma excelente opção se você precisar de uma solução responsiva.

2. Reaja a interface do usuário diária

Como um design de prática simples, Jack Oliver criou esta caneta React Daily UI do zero. E é uma das experiências de integração mais elegantes que já vi.

A interface apresenta texto fictício, pois não é para uso prático no mundo real, mas é muito limpa e deve deixar espaço suficiente para caber praticamente qualquer coisa na página.

Uma coisa a notar é que não consegui fazer isso funcionar no celular com furtos, e parece apenas reconhecer toques no momento. Mas para uma solução apenas com clique, é muito bom.

3. Telas de integração

Esta caneta não apenas apresenta uma interface incrível para integração, mas também possui animações personalizadas para inicializar.

O desenvolvedor Jeff Ham conhece uma interface e criou essa tela de integração imaculada. Ele se baseia em JavaScript para criar as animações da “próxima tela” e os eventos de alternância para cliques/toques do usuário.

Uma boa adição a essa interface é o botão azul próximo na parte inferior. Isso permite que o usuário avance tela a tela com um grande CTA à vista. Aposto que isso aumentaria o número total de pessoas que convertem e melhoraria a qualidade da experiência geral.

4. Conselho

Este trecho do Boardal é bastante único, pois não é algo que você vê com frequência.

Ele usa uma janela modal com conteúdo de integração para ajudar os usuários a acessar o site mais rapidamente. É um design personalizado criado exclusivamente para testes e é uma das maneiras mais legais de melhorar o processo de integração.

Observe que isso funciona melhor em uma área de trabalho porque depende do efeito modal (não é ideal para telas menores).

Portanto, se você gosta do design e deseja uma maneira fácil de melhorar a integração do seu site, experimente o Boardal.

5. Visita guiada

Normalmente, a integração é considerada um processo passo a passo que apresenta novas páginas e recursos ao usuário. Mas, pessoalmente, acho as visitas guiadas muito mais úteis.

Se você deseja um snippet simples para começar, este tour guiado é perfeito. Ele se baseia em componentes do Bootstrap e usa pequenas dicas de ferramentas com botões “próximo” para avançar no tour.

O usuário pode encerrar o tour a qualquer momento, caso se aborreça ou não se importe mais. Isso o torna um passeio opcional, portanto, menos pessoas ficarão incomodadas com o processo.

No geral, esse é o meu método de integração preferido, embora exija um pouco mais de esforço para configurá-lo. Mas esta demonstração, pelo menos, fornece um modelo para começar.

6. Visita de materiais

Um método alternativo de tour é o tour de avanço automático que destaca recursos específicos.

O melhor exemplo que encontrei é esta caneta criada por Gregor Adams. Ele é baseado nas diretrizes de material e usa círculos destacados para mostrar partes da página. Essa técnica é perfeita se você tiver interfaces muito complexas com muitos recursos.

Ao escurecer a página inteira, você foca em uma área de cada vez. Isso chama a atenção do usuário imediatamente, que é exatamente o que você precisa fazer para uma boa integração.

Eu sei que isso não vai se encaixar bem em todos os sites, mas se você gosta da interface, eu recomendo tentar.

7. Integração de aplicativos Android

Os aplicativos móveis geralmente precisam do processo de integração mais do que os sites. É comum que os designers de interface do usuário móvel coloquem recursos na tela menor, o que pode sobrecarregar os usuários sem uma introdução guiada.

Este guia de integração de Mat Swainson é um pequeno e eloquente exemplo do que pode ser feito para aplicativos de smartphone.

É baseado em um modelo Android, mas certamente não é o único estilo que você pode usar. Eu gosto de como ele suporta swiping nativo, que funciona mesmo em navegadores da web para dispositivos móveis.

Além disso, o pequeno indicador de progresso na parte superior é um toque agradável. Definitivamente, uma página de integração simples, mas vale a pena salvar se você estiver procurando inspiração.

8. Introdução Iônica

Há muito que você pode fazer com o Ionic e esta caneta é um ótimo exemplo.

O desenvolvedor Clifford Fajardo criou uma introdução Ionic onboard rodando apenas na estrutura JavaScript. Ele suporta todas as interações móveis, como toques, furtos e até suporta opções para toques duplos, se você quiser esse recurso.

O Ionic é usado principalmente para desenvolvimento móvel e também funciona muito bem para sites móveis. Não posso dizer que essa tela de integração caberia em todos os sites, mas é uma escolha sólida se mais de 50% do seu público vier de dispositivos móveis.

9. Forma Vertical

Com uma leve animação de interface do usuário e um design muito simples, esta forma vertical é um deleite único.

Ele usa as propriedades flex CSS em pleno efeito, juntamente com algumas animações JavaScript e CSS personalizadas. É verdade que acho o conteúdo um pouco fraco, por isso não oferece muito em termos de integração detalhada.

No entanto, você pode pegar essa interface e realmente torná-la sua sem muito esforço, então deixa muito para a imaginação.

10. Dica de visita guiada

Aqui está mais um exemplo de tour guiado, mas este usa uma caixa de dica de ferramenta completa fixada na página.

Se você verificar o snippet, verá que ele não está integrado a nenhuma interface específica. Em vez disso, é apenas uma dica de ferramenta flutuante com conselhos e etapas de progresso para o usuário.

Combinar essa interface do usuário com algum script de posicionamento de dica de ferramenta fixo permitiria mover facilmente essa coisa pela interface com dicas de ferramentas apontando para todos os seus principais recursos. Este modelo exigirá uma personalização real para fazê-lo funcionar, mas para uma interface de usuário simples, é lindo.