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

Gestão remota: ferramentas de gestão de equipes e dicas de liderança img
#Marketing

Gestão remota: ferramentas de gestão de equipes e dicas de liderança

O ano de 2020 reuniu inúmeros desafios para os profissionais, incluindo lideranças, aprendendo a lidar com gestão remota, da noite para o dia, e ainda serem assertivos em suas decisões.Uma equipe remota precisa de ferramentas, para ser produtiva, precisa de comunicação clara e objetiva, alinhamento regular entre os envolvidos e uma boa gestão para facilitar e orientar o trabalho do time.Para ajudar a gerenciar uma equipe, preparamos este artigo, com algumas dicas práticas para incrementar na sua rotina, assim como ferramentas de gestão de equipes para automatizar processos.  Gestão remota: como manter a produtividade da equipeSeparamos seis dicas objetivas para manter seu time unido, embora separado, inclusive no alinhamento das demandas e propósito da empresa.Reuniões objetivasMesmo tendo telefone, WhatsApp e outros recursos de chat, use serviços como Zoom e Google Hangouts para que as pessoas se vejam e faça bom uso das metodologias ágeis nesses bate-papos. Adeque a frequência, conforme as necessidades, determinando uma agenda ok para todos. E que elas sejam breves, para não atrapalhar, ao invés de ajudar. Anote os pontos a serem discutidos e peça para que todos façam o mesmo, antes da reunião.Tecnologias que encurtam distânciasEscolha as ferramentas que atendam as suas demandas, não apenas as tradicionais, como o e-mail e as mensagens de WhatsApp. O Asana é uma ferramenta de comunicação em grupo, baseado em nuvem, que evita os montes de e-mails trocados. Já o Trello é uma plataforma de gerenciamento e organização de tarefas individuais ou em equipe. Seu funcionamento básico consiste em quadros, incluindo objetivos, que são distribuídos entre colunas. Possui muitas opções de customização e pode se adaptar, conforme as demandas de cada usuário.Há também o Buffer, voltado principalmente para as áreas de comunicação e marketing, pois permite gerenciamento de redes sociais e publicações programadas com antecedência.Se você precisa saber mais sobre ferramentas que facilitam o trabalho remoto, temos um guia de ferramentas para otimizar seu home office que traz muitas opções e ainda explica o uso delas em diferentes contextos.Na gestão remota: ajuste as expectativasAjude a equipe a organizar o que eles devem fazer e crie expectativas realistas para o trabalho deles. Isso também se aplica a você, gestor. Diga claramente quais são as tarefas e as motivações por trás delas, e ajude os funcionários a entender exatamente como o sucesso será medido. Defina escopo, entregas e datas para cada tarefa do projeto.E não se esqueça da cultura de feedback, uma gestão remota também precisa impulsionar este hábito mesmo que virtualmente.Foco nos resultados da equipe, e não em cada atividadeEsta nova configuração do mercado de trabalho evidencia como não ser possível administrar todos os aspectos do trabalho não é o fim do mundo.Se concentrar na atividade ou no número de horas trabalhadas passa a não ser uma prioridade da gestão, mas sim prestar atenção nos resultados, usando suas métricas de sucesso apoiadas nisso.Assim, você demonstra a sua equipe que autonomia tem muito a ver com responsabilidade e foco.Providencie os recursos necessáriosImportante ter atenção se os recursos tecnológicos ao seu time são supridos, como computadores, software, dispositivos móveis ou até conexão de banda larga. Lembre-se de que a responsabilidade de fazer essa checagem é sua, que representa a empresa para eles, seus valores e missão.Gestão remota requer resiliência e empatiaEis um ano para desenvolver soft skills, não é mesmo? Uma boa gestão remota, especialmente nas condições atuais, olha para a produtividade das pessoas com mais resiliência. Permita a seu time liberdade e flexibilidade de fazer o trabalho em uma rotina mais saudável. Lembre-se: o foco é a excelente entrega, e não o período do “expediente”.No blog da DH você encontra conteúdos focados em liderança, negócios, e claro, habilidades digitais. Com a gente, você também consegue fazer uma Imersão em Transformação Digital e se tornar um profissional ainda melhor.Leia mais no blog DH+ Dica dos especialistas: 5 livros inspiradores sobre transformação digital+ Futuro do trabalho: o que a tecnologia não substitui?+ Foco no cliente: entenda o que é um negócio customer centric

Catálogo com mais de 40 APIs mais usadas por desenvolvedores img
#Tecnologia

Catálogo com mais de 40 APIs mais usadas por desenvolvedores

Nem sempre os usuários se dão conta de sua existência e benefícios, mas elas estão lá, facilitando a vida de todos. Porém, se soubéssemos quais as APIs mais usadas por desenvolvedores, provavelmente seria mais fácil reconhecer sua relevância.Application Programming Interface (em português, Interface de Programação de Aplicações) pode não ser lá muito popular por nome - API - mas, torna a experiência do usuário(UX) em sistemas e sites muito mais satisfatória, segura e completa. Pensando nisso, neste artigo, convidamos o professor de programação, Leonardo Carvalho, para nos contar um pouco sobre as APIs mais utilizadas atualmente e qual o motivo desta popularidade toda.APIs mais usadas por desenvolvedores e sua importânciaMuitos dos apps usados todos os dias acessam diversas APIs. Graças a elas, podem oferecer diversos serviços, tais como pagamentos, mapas, armazenamento na nuvem, redes sociais etc. Leonardo Carvalho cita abaixo algumas delas, divididas por categorias, contextualizando a experiência:Logins com redes sociaisPara evitar o desgaste do usuário em ter que se cadastrar em todo santo app, site e sistemas, é possível usar logins de terceiros, como o das redes sociais. “Geralmente, são usados em redes sociais, mas não se limitam a elas. O Facebook Login é o mais utilizado mas, temos, também, Google, Twitter e Apple (esse último é obrigatório, caso você desenvolva apps para dispositivos da Apple e tenha login com outras redes). Além destes, existe o GitHub, GitLab, Slack, Discord e Jira”, explica o professor.Logins com redes sociais aceleram a criação/login de perfis no seu app, fazendo com que a experiência do usuário seja mais fluida possível. Dessa forma, possíveis KPIs do app podem ser melhoradas com elas.MapasDesde os primórdios, pessoas precisam memorizar caminhos para chegar aos lugares ou usar um mapa. O problema é que esses mapas geralmente são extensos, desatualizados e de difícil manuseio. Mas, não hoje em dia, como diria a música, ponto para a internet.Aí que entram APIs interessantes, como as focadas em mapas. “Sem dúvida, entre as APIs mais usadas para mapas está o Google Maps. Dá para determinar rotas, distâncias, encontrar locais, criar mapas personalizados, geolocalização. Além da API do Google, tem o Bing Maps, Here Maps (um dos mais atualizados do mundo, na minha opinião), Apple Maps e OpenStreetMaps” enfatiza.Bônus de mapas: CEPLeonardo Carvalho explica que, se não fossem as APIs de CEP, a chatice e demora em preencher cadastros em sites e sistemas no Brasil, campo por campo,seria uma realidade não muito prática.Para consultar dados relacionados aos CEPs, é possível usar o serviço do ViaCEP, Buscar CEP e WebmaniaBR. ClimaSe antes, dependíamos da previsão do tempo fornecida pela TV, rádio e jornais diários, hoje temos aplicações completas para clima, com dados detalhados, que podem ser utilizados, por exemplo, em aplicações agrícolas, planejamento logístico ou mesmo para saber quando lavar roupa.Entre as APIs mais usadas, o professor cita o OpenWeatherMap API, Climatempo, HG Weather e CPTEC/INPE.Pagamentos“Não dá para falar de internet sem pensar nas possibilidades de compra online que existem atualmente”, enfatiza o especialista, pois, em tempos de pandemia, seria impossível a existência de apps de delivery, marketplace e supermercados, com a devida segurança e distanciamento social, sem a existência dos serviços de pagamentos online.Entre eles, é possível citar:➜ Mercado Pago➜ PagSeguro➜ PayPal➜ GerenciaNet➜ Wirecard (anteriormente Moip)➜ Vindi➜ Ebanx➜ PagBrasil (e sua tecnologia Boleto Flash)➜ StripeArmazenamentoO professor ressalta que uma das revoluções trazidas pela internet foi a possibilidade de guardar arquivos em servidores e poder acessá-los de qualquer lugar, por meio de uma interface customizada. E essa é uma das possibilidades com as APIs de armazenamento em nuvem. “Entre muitas, as que mais se destacam são a do Google Drive e Amazon S3. Ambas possuem interface própria para realizar o armazenamento e recuperação dos dados via app ou web, mas também permitem o uso através de APIs.”Carvalho cita ainda outros serviços, como Google Cloud Storage (o Drive é focado em usuários domésticos e esse no uso em escala), Azure Storage, OneDrive e Dropbox.Informações financeirasEnquanto você lê este artigo, milhares (senão milhões) de transações financeiras estão acontecendo em algum lugar do mundo, seja no mercado tradicional dos bancos, na economia digital ou no mundo das criptomoedas. “E, para acessar informações sobre os valores transacionados pelo mundo, usamos (adivinhe só) APIs do mercado financeiro. Aqui, o destaque é para a API do Yahoo, com o serviço Yahoo Finance. Outras muito utilizadas são Currency Layer, o Open Exchange Rates, APIs da B3 e a HG Finance API”, explica.APIs mais usadas para informações CovidUma das APIs mais usadas por desenvolvedores, principalmente nos últimos tempos, são as relacionadas com a Covid-19.O professor conta que, no Brasil, o destaque vai para o admirável trabalho do Turicas, o Álvaro Justen (e muitos outros), no Brasil.io. Os dados desta API gratuita são provenientes das 26 Secretarias Estaduais de Saúde e da Secretaria de Saúde do Distrito Federal. Compilados, eles fornecem informações de casos para análise, consolidadas e detalhadas, sobre a doença em território nacional. Conta com a documentação aberta, que pode ser editada por aqueles que queiram contribuir com o projeto. “Ainda em terras tupiniquins, tem a COVID-19 Brazil API. Olhando para os dados globais, há a COVID19 API, o Bing COVID-19 Data (com os dados organizados neste incrível mapa interativo), a  NovelCOVID API e muitos outros, disponíveis nesta página especial do Postman”.Caso você tenha se interessado pelas mais pedidas, globalmente falando, a startup americana RapidAPI (um marketplace de APIs) listou as 50 APIs mais utilizadas por seus clientes. Já em terras brasileiras, a startup LinkAPI fez o mesmo serviço por aqui. Vale a pena conferir.O catálogo de APIs que impulsionam a experiência do usuário é extenso, mas este é apenas uma das habilidades desejáveis dentro da área de programação. Caso queira se especializar no mundo dos códigos, invista em um curso de Web Full Stack completo para aprender na prática o que o mercado procura.

Soft skills de um UX Designer: principais habilidades comportamentais deste profissional img
#UX

Soft skills de um UX Designer: principais habilidades comportamentais deste profissional

Nem só de habilidades técnicas vive um profissional, em User Experience, é imprescindível conhecer quais as soft skills de um UX Designer brilham os olhos das empresas.O “x” da questão, que diferencia um ótimo profissional dessa área de outro mediano, são as soft kills, ou seja, as habilidades comportamentais. Hoje, o mercado de trabalho, além da tradicional formação e experiência na função, também demanda outros requisitos.Acompanhe o artigo e entenda como desenvolver as soft skills e ser um UX designer completo.  Soft skills de um UX Designer: o que é?Para quem está se perguntando o que é um UX designer a resposta é simples: é o profissional responsável pelo visual atrativo de uma plataforma digital, que proporcione uma melhor experiência ao usuário, baseada no comportamento dele, seja por meio da usabilidade, utilidade ou conveniência oferecidas na interação com um produto. A área de UX (Experiência do Usuário) é ampla. Dentre suas atuações, o UX designer, que pode ser especializado apenas em hard skills, habilidades técnicas adquiridas por meio de cursos, faculdade ou processos repetitivos. Já as soft skills são mais sutis do que o "tecniquês", e estão associadas ao comportamento do profissional no ambiente de trabalho e na resolução de problemas complexos relacionados a relacionamento, mindset ágil e percepções de grupo, porém fazem a diferença na carreira UX Designer.Não há um hard x soft. O ideal para um profissional completo e de alto nível na área é o equilíbrio entre ambas as skills. Por isso, se atente ao próximo tópico e lembre-se, assim como qualquer habilidade, as softs também precisam de muito treino para serem dominadas.Quais as principais soft skills de um UX DesignerListamos algumas habilidades comportamentais que agregam muito ao perfil de um excelente UX designer, assim você sabe como encantar recrutadores e gestores dos projetos.Escuta ativa Uma das skills mais importantes do UX designer é saber escutar ativamente outras pessoas da equipe. E o que isso significa, na prática?Que você deve incentivar as pessoas que trabalham no projeto a compartilhar suas ideias durante todas as suas fases, para troca de conhecimento. Esse tipo de interação facilita o trabalho do dia a dia e encurta distâncias de entendimento entre as pessoas.FeedbackUm bom UX designer precisa desenvolver a capacidade de estimular uma cultura de feedback, sem utilizar linguagem agressiva ou contundente. Pensando que um projeto de UX exige muitas modificações até estar realmente pronto, opinar sem ofender os outros é imprescindível.Portanto, a dica é sempre focar no que cabe aprimoramento, indicando o gap, mas, trazendo soluções criativas e estimulantes ao time.Compartilhar ideiasComo o universo de UX está sempre em transformação, os profissionais devem seguir no mesmo ritmo. Por exemplo, ser comunicado sobre um projeto inovador, e muito desafiador, pede, entre outras coisas, compartilhar ideias para buscar mais diversidade à pauta.Além disso, ter resiliência para lidar com os possíveis gargalos no meio do caminho pode ser um importante diferencial de sucesso em sua entrega.Comunicação objetivaNão deveria, mas alguns profissionais de UX designer costumam acreditar que todos entendem deste universo como ele. Portanto, use de humildade e treine a capacidade de se comunicar de forma clara e objetiva. Esse recado se estende à comunicação escrita também, como e-mails e chats. Aliás, essa habilidade evita muitos possíveis problemas que a má interpretação pode gerar, como alterações de cor ou fonte erradas.Aprendizado constanteO usuário muda de comportamento toda hora. O universo digital que trabalhamos, consequentemente, também e o UX designer deve acompanhar todas essas mudanças. Portanto, atualize-se! Busque informações em livros, webinars, leia conteúdos de UX e outras fontes de conhecimento para o aperfeiçoamento na área.Na Digital House, o curso de Experiência do Usuário (UX) atende em cheio a esta necessidade, ajudando o profissional de UX Design a desenvolver a prática das hard e soft skills, em equilíbrio e na medida que o mercado precisa. Projete sua carreira à cultura digital com a DH!Leia mais no blog DH:+ Cultura de UX: como essa mentalidade pode transformar empresas+ Prototipação em UX: 5 ferramentas para tirar ideias do papel+ Conhea a área de UX Research e como se tornar um profissional de pesquisa