MENU

| BR

Campus

Cursos

Programas Executivos

Paises

Como criar um design responsivo para oferecer a tão esperada navegação amigável

Como criar um design responsivo para oferecer a tão esperada navegação amigável
#UX
26 de junho - min de leitura

Para criar uma página amigável, existem técnicas que ajudam a entregar experiência ao usuário. Nessa etapa, criar um design responsivo para diminuir a taxa de rejeição e aumentar o tempo de permanência no site é essencial.


Se você deseja vender mais e obter maior visibilidade de marca, terá que oferecer uma boa experiência ao seu usuário, esteja aonde ele estiver. Ou seja, precisa ter um site responsivo. Justamente aí que o UX Design ganha seu protagonismo.

No mais recente estudo do Google, “O mundo nunca será o mesmo”, foram projetados os impactos da pandemia no comportamento, consumo, trabalho, finanças e economia, trazendo uma mensagem objetiva: tudo agora se torna virtual e essa realidade desenha novos modelos de interação. 

Segundo ele, as buscas como “velocidade de internet” são altíssimas atualmente. Olha as necessidades do home office aparecendo!

+ Precisa de ajuda no home office? Conheça algumas ferramentas para melhorar sua rotina de trabalho em casa

Para o mundo pós-pandemia, o estudo de nome emblemático também prevê que o comportamento dos usuário ficará muito mais exigente (ainda!) quanto à rapidez e eficiência na resposta das empresas e seus canais online, incluindo atendimento. Ou seja, fique de olho no UX.

Vem com a gente neste artigo e entenda como criar um design responsivo, focado em user experience.

UX Design, o dono do design responsivo

Antes de mais nada, vamos relembrar o que é um design responsivo: um conjunto de técnicas que garante um site acessível a qualquer tipo de dispositivo, seja ele desktop ou móvel. 

Essa aplicação no código envolve HTML, CSS e algum framework, como o Bootstrap. Com essa técnica, seu site se ajusta de acordo com o tamanho da tela do usuário.

O próprio Google, o cara que assina o estudo citado, recomenda esse tipo de design responsivo como uma forma de otimizar a experiência do usuário, para evitar duplicações de conteúdo e obter imagem consistente.

Agora, voltando o foco para a parte que vai além da técnica, temos os seguintes desafios:

➜ Atingir o mesmo grau de satisfação do cliente, tanto por dispositivos móveis quanto desktops;

➜ Que toda a jornada do usuário no site seja estratégica, simples e encantadora.

Os profissionais certos para esta missão são das áreas de UX/UI, pois, com sua skill, pensa nas funcionalidades e maneiras de capacitar e gerar um caminho interessante a quem acessar aquele site, por ambas as vias, e não apenas pela ótica da adaptação dos tamanhos das telas, imagens ou da otimização do menu.

Dicas de como criar um design responsivo que funciona

Nosso professor, especialista em Marketing Digital e UX da Digital House, Renato Gondra, elenca três pontos essenciais na criação de designs responsivos. São eles:

Busque referências

O famoso benchmark é importante. Ou seja, olhar o que marcas bem conceituadas fazem é uma inspiração a ser seguida. Veja o site no desktop e depois no smartphone. Analise e compare as diferenças.

“Também vale olhar os guias de design system do Android e do Apple IOS. Alguns dos componentes dos apps podem ser aproveitados em sites responsivos”, finaliza.

Pense Mobile First

Hoje mais de 70% do tráfego da internet é feito através de smartphones. Então, prefira começar desenhando seu produto digital para smartphones. Assim, você inicia já com foco na simplicidade e fica mais fácil transformar num site para desktop.

“Mas lembre-se: é papel do designer desenhar pelo menos essas duas versões de tela”, ressalta Gondra.

+ Dados comprovam: existe a mudança do Mobile First para Mobile Only

Componentes (Assets) que podem ser adaptados

Durante o design, você poderá apontar particularidades em cada tipo de dispositivo.

Alguns elementos podem se comportar de maneira diferente em telas menores. Então, é importante ficar atento a isso.

“Uma tabela que funciona superbem em desktop pode não promover uma boa experiência em smartphones. Nesse caso, você pode trocar por um card expansível, por exemplo”, completa.

Além disso, no momento do desenvolvimento, continue a estudar essas interações. E, após ele, o trabalho não para. Faça testes de usabilidade e brainstorm com sua equipe. Pois, em meses, tudo não só pode mudar completamente do mundo que conhecemos, como já mudou.

Como criar uma navegação amigável

1 - Atenção para a velocidade de carregamento

Fique atento à velocidade de carregamento do site - se demorar muito, seu cliente pode não estar tão engajado na sua marca para esperar. Além disso, esta falha pode remeter a uma característica da própria empresa. 

2 - Menos efeitos pode ser uma boa

Os efeitos podem até ser atrativos, mas se seu uso for em telas maiores. Pelo acesso em dispositivos móveis ou tablets, pode ocorrer o contrário. Sendo assim, teste este atrativo nos dois canais e observe se passa a mesma mensagem, antes de aderir.

3 - Utilize imagens flexíveis

Imagens pesadas e estáticas podem ser interpretadas como ultrapassadas. Em um site adaptável, se usa imagens leves, que possam ser carregadas em qualquer dispositivo, pois se adaptam a diferentes tamanhos de dispositivos, ou seja, medidas fluidas

4 - Textos legíveis

Dispositivos móveis têm telas menores e precisam de legibilidade para o usuário. Então, recomendável colocar os textos que evitem precisar de zoom toda hora.

Se transforme em um profissional do UX Design

Fazer um design responsivo é uma tarefa robusta e que ultrapassa técnica e programação, já que coloca a perspectiva do usuário como a espinha dorsal de qualquer fluxo de experiência, sendo um exercício de concentração, observação e ação. Tudo junto e misturado.

Com a habilidade digital de  UX design aprendida e bem desenvolvida, você poderá fazer um design responsivo que capte audiência, conversões e, o mais importante, tenha sucesso na interação do usuário, tornando ela mais agradável, simplificada e útil. Este feito traz não só vendas como resultado, mas fidelização. 

Na Digital House, você pode se tornar este facilitador e promotor de satisfação. Conheça nosso curso de UX Design e se especialize nesta profissão.

Outras notícias

Mentalidade Digital: como os negócios precisam se reinventar diante das mudanças do consumidor img
#Marketing

Mentalidade Digital: como os negócios precisam se reinventar diante das mudanças do consumidor

Não existe novo normal. Se procurarmos no dicionário o significado da palavra normal vamos encontrar:1. conforme a norma, a regra; regular;2. que é usual, comum; natural.Talvez a gente não viva nunca mais em um mundo comum.A globalização cresceu em níveis inimagináveis nos últimos anos. Vivemos em um mundo onde a distribuição de riqueza e tecnologia é extremamente desigual ao redor do planeta. As informações viajam instantaneamente causando conflitos e choques entre culturas e costumes. E como se já não bastasse tudo isso, recentemente vimos um vírus viajar o mundo inteiro também.A Teoria do Caos é mais real do que nunca. Quando uma borboleta bate as asas na China tempos depois acontece um furacão no Brasil. Tudo está interligado, tudo muda muito rápido. Não dá mais tempo de nos acostumarmos com nada.Essa é a nova realidade, não um novo normal.Digital não é tecnologiaQuando falamos de tecnologia começamos logo a procurar hardware e software. Você aponta para o computador, o celular, a TV. Descreve os softwares que estão ali. Mas na verdade, o digital é algo muito mais amplo que isso.Eu costumo dizer que a base do digital são as coisas que se tornaram imateriais. O limite físico deixa de existir quando algo é digitalizado.Uma foto digitalizada deixa de ser papel, um filme digitalizado deixa de ser uma fita, uma música deixa de ser um disco. Tudo vira dados.Os dados trafegam por softwares (sistemas de computador) através de hardwares (dispositivos eletrônicos), e o digital é a combinação de tudo isso, é o que permite essa desmaterialização.É fazer uma reunião sem se deslocar para uma sala de reunião, é orientar uma pessoa a distância, por áudio ou vídeo, é pedir algo no seu celular para entregar na porta da sua casa ou para assistir imediatamente na TV.Você elimina ou reduz a necessidade de matéria física. Você desmaterializa o máximo possível.Nunca vamos nos tornar 100% digitais, apesar da ficção científica às vezes explorar isso. Eu prefiro acreditar que se chegarmos a esse ponto seremos outra espécime. O Homo sapiens precisa de contato físico. Porém queremos contato físico com quem amamos, não para resolver atividades corriqueiras como ir ao supermercado ou a farmácia.Os negócios agora são Digital FirstAntes, quando você abria uma restaurante, pensava primeiro nas receitas, na equipe de funcionários, na cozinha, no ponto comercial e quando tudo estava pronto decidia se ir operar também com delivery.Muitos restaurantes agora estão abrindo sem ponto físico. Obviamente a cozinha precisa estar em algum lugar, mas não tem salão. Só trabalha com delivery. A prática tem até um nome: dark kitchen ou restaurante fantasma.E isso não acontece apenas com restaurantes. Professores, personal trainers, psicólogos e mais um monte de serviços que atendem as pessoas por videoconferência e agora tem clientes espalhados por diversas cidades, estados e até países, não vão voltar a operar 100% presencial.Uma pesquisa da Fortune com os CEOs das 500 maiores empresas dos Estados Unidos revelou 26,2% vão trabalhar de casa indefinidamente. E 52,4% não pretendem mais fazer reuniões de negócios que podem ser substituídas por videochamada.Porque gastar uma fortuna em um espaço físico se não for necessário?Além disso o consumidor está se acostumando com a ideia de que não precisa ir até a loja, só no Brasil o e-commerce já ganhou mais de 135 mil lojas digitais.Cultura Digital requer uma mudança de mentalidadeSe desapegar das estruturas físicas, trabalhar a distância, gerenciar times remotos, não sofrer com trabalho em excesso ou baixa produtividade, tudo isso requer um tremendo esforço de toda a empresa.Felizmente existem metodologias e ferramentas para gerenciar essas mudanças e compartilhar as melhores práticas. Metodologias ágeis, UX, Design Thinking, Lean Startup estão entre alguns dos conhecimentos necessário para mudar a mentalidade e aproveitar os benefícios que o digital traz.Mudar o seu negócio, da mesma maneira que era antes, para um site de e-commerce ou atendimento remoto, e continuar gerenciando como se fosse uma loja física, consultório ou sala de aula, não vai funcionar nesse novo mundo competitivo que estamos vivendo.Chegou a hora de parar de sobreviver, ou simplesmente tentar, é o momento de começar a se reinventar e fazer a diferença nesse novo mundo.(*) Edney “InterNey” Souza é Diretor Acadêmico na Digital House Brasil, Organizador da Social Media Week São Paulo, Editor e Tradutor do WordPress.com para o Brasil, Colunista do ProXXima, Diretor da ABP (Associação Brasileira de Propaganda) e Conselheiro da ABRADi (Associação Brasileira de Agentes Digitais).

Introdução ao Flutter: como funciona o framework e sua linguagem Dart  img
#Tecnologia

Introdução ao Flutter: como funciona o framework e sua linguagem Dart

Empresas grandes vêm apostando na linguagem de programação Flutter e a justificativa para isso é simples: a forma como essa ferramenta funciona na criação de aplicações mobile.O que é Flutter?Criado pelo Google, o Flutter é um framework, ou seja, um facilitador no desenvolvimento, que possibilita criar aplicativos mobile para Android e iOS com algumas funcionalidades vantajosas para o dia a dia de um programador.Nesse artigo vamos explicar algumas de suas características e como você pode tirar proveito delas.  Características do Flutter e como ele funcionaDe código aberto sobre a BSD License e multiplataforma, o Flutter tem como linguagem base o Dart para a criação de aplicativos. Isso significa, facilidade de desenvolvimento e vamos explicar o porquê.Ao criar um aplicativo por ele, seu código é compilado para a linguagem base do dispositivo, ou seja, as aplicações são realmente nativas. Essa vantagem faz com que você consiga acessar recursos do dispositivo sem auxílio de terceiros, o que gera melhor desempenho. Para que entenda melhor o quanto isso pode ser uma mão na roda para o desenvolvedor, citamos quatro características do Flutter que se integram e geram benefícios.➜ Ser uma multiplataforma – com ele, é possível desenvolver aplicações em qualquer sistema operacional (Windows, Linux e MacOS), o que...➜ ...permite a criação de apps nativos, a partir de um único código-base – nele você desenvolve aplicações nativas para Android e iOS, além de ter...➜ ... acesso direto aos recursos nativos do sistema – uma aplicação criada com Flutter pode ter acesso nativo aos recursos do dispositivo como a câmera, o wi-fi, a memória etc, gerando assim...➜ ...maior desempenho – as aplicações criadas com Flutter têm mais desempenho se comparadas ao React Native, por exemplo, pois todo seu código-fonte é transformado em código nativo.Por estas características, o Flutter é considerado um dos melhores frameworks para o desenvolvimento de aplicações mobile. Como o mundo é mobile agora, seu protagonismo é facilmente compreendido, não é mesmo?+ Leia um infográfico completo sobre o movimento Mobile First, not Mobile OnlyConcluindo, essa ferramenta demonstra grande estabilidade, desempenho e bons resultados na forma simples de desenvolver aplicações. Quando você domina Flutter, pode promover entregas muito mais próximas da satisfação de seu cliente, de maneira mais ágil e descomplicada.   Na grade de cursos de programação da Digital House, você vai aprender a programar do zero por diversas aplicações, incluindo o Flutter.Em cinco meses de curso, além da habilidade técnica, você aprende a desenvolver soft skills, tudo através de metodologias ágeis, tão requisitadas pelas grandes empresas.Venha incrementar sua carreira com professores especialistas que atuam em grandes empresas. Conheça nossa metodologia de aulas remotas e se junte ao time DH!

Como conseguir vendas através do Instagram Shopping  img
#Marketing

Como conseguir vendas através do Instagram Shopping

É com um clima “descompromissado” e prático que o Instagram Shopping está ganhando cada vez mais espaço na visão dos usuários.A função, que é uma oportunidade e tanto para as marcas, agrega estratégias de marketing digital de negócios menores até grandes empresas. Mas para que a ferramenta seja eficiente, é importante saber como o Instagram Shopping funciona.Instagram Shopping: como vender mais pela rede socialA rede social se tornou uma opção valiosa para a venda remota. Entre as demais, o Instagram pode ser a melhor alternativa para quem tem um e-commerce.Com mais de 64 milhões de usuários, o Brasil é o segundo país com maior número de pessoas no Instagram, atrás apenas dos Estados Unidos. Segundo pesquisa do pesquisa do Opinion Box, 25% dos internautas dizem que ela é sua rede social mais utilizada. 8 em cada 10 de seus usuários seguem perfis de empresas e 50% dizem já ter comprado algum produto ou contratado algum serviço que conheceram no Instagram.Essa, indiscutivelmente, é uma poderosa rede social para os negócios. Mas, para que cumpra bem seu papel, é necessário que seu e-commerce utilize todos seus recursos e da melhor forma possível.Para entender esse sucesso todo, é só seguir o raciocínio, quase tão simples como a lógica da rede: o Instagram é uma grande vitrine pessoal, natural que seja uma vitrine comercial também, que age por identificação direta com as imagens em sinergia com o comportamento e interações do usuário.Ou seja, a compra faz parte desta experiência, muitas vezes quase como uma consequência da jornada.Como configurar o Instagram Shopping da sua marca  O recurso permite vender por meio do próprio aplicativo, e para isso, é utilizada uma nova aba no feed da página. Nesse espaço, são colocados os produtos que estão para compra, já com o preço informado.Para começar a usar a ferramenta, basta linkar o seu perfil do Instagram com um catálogo do Facebook, que vai manter os seus produtos disponíveis na loja. O Instagram vai verificar a sua conta, seus produtos, e com o conteúdo aprovando, já pode começar a ser usado. Essa solução permite às empresas criar, então, suas lojas dentro da própria rede social, com um objetivo claro: facilitar a venda, tanto para quem vende quanto para o cliente. Da mesma forma que os posts patrocinados impulsionaram os anúncios no Facebook, no Instagram Shopping são aproveitadas a naturalidade e a facilidade da rede para aumentar o volume de vendas.Estratégias para conseguir vendas no InstagramPara que entenda mais detalhes de como usar a ferramenta, separamos algumas estratégias para a sua loja no Instagram:➜ Atentem-se às informações básicas do post, por exemplo, qualidade da imagem, legenda, perfil e bio estruturada.➜ Tente variar formatos. É  possível destacar até cinco produtos por fotos no feed, mas existem outros formatos que funcionam bem. O carrossel pode ser uma boa maneira de mostrar os produtos individualmente, um por foto, ou mesmo um volume maior (é possível etiquetar 20 peças).➜ Stories são muito importantes para destacar produtos, promoções etc. Você pode etiquetar os produtos diretamente por eles, ilustrando o uso. Além disso, é uma forma orgânica de divulgar seus produtos.➜ Os posts precisam seguir a estética das fotos naturais. Os com etiquetas devem ser bem trabalhados, pois precisam ser reconhecidos imediatamente, com identificação direta a sua marca.➜ Evite que as etiquetas fiquem muito próximas umas das outras. Isso dificulta o processo de assimilação do usuário. ➜ Confira sempre se suas tags estão indo para o produto certo. Um simples erro aqui pode resultar em uma experiência negativa ao usuário e comprometer a imagem da sua marca, além de contabilizar menos uma venda.Por que você deve usar o Instagram ShoppingEntre as vantagens da função, além das já especificadas ao longo do artigo, ele permite um processo de mensuração e acompanhamento de resultados orgânicos, já que o público interage diretamente com seus posts de vendas.A ferramenta é eficaz, especialmente às pequenas empresas, que vendem diretamente pela rede social. O engajamento com os fãs e a facilidade da experiência de navegação e de compra resultam em um volume maior de  visibilidade e produtos vendidos.No curso de Marketing Digital, da Digital House, você vai dominar a construção de estratégias para esta rede, Facebook, LinkedIn, Google (Search, display e remarketing), e-mail marketing e todas elas juntas, no mesmo sentido. Ao longo das aulas, os alunos aprenderão, com teoria e muita prática: branding, storytelling, SEO & AEO & Link Building, gestão de conteúdo e tudo o que é preciso para se tornar habilitado para os desafios da Transformação Digital e novos hábitos de consumo.