{"id":260967,"date":"2023-03-04T10:29:00","date_gmt":"2023-03-04T07:29:00","guid":{"rendered":"https:\/\/inform.click\/as-10-principais-tendencias-de-design-de-ui-ux-para-negocios-de-comercio-eletronico\/"},"modified":"2023-03-04T10:29:00","modified_gmt":"2023-03-04T07:29:00","slug":"as-10-principais-tendencias-de-design-de-ui-ux-para-negocios-de-comercio-eletronico","status":"publish","type":"post","link":"https:\/\/inform.click\/pt-pt\/as-10-principais-tendencias-de-design-de-ui-ux-para-negocios-de-comercio-eletronico\/","title":{"rendered":"As 10 principais tend\u00eancias de design de UI\/UX para neg\u00f3cios de com\u00e9rcio eletr\u00f4nico"},"content":{"rendered":"<p>\n  2019 j\u00e1 est\u00e1 acabando, e temos que agradecer por muitas tend\u00eancias que marcaram esse ano. Em particular, h\u00e1 uma tend\u00eancia que veio para ficar por muito tempo. Pelo menos no com\u00e9rcio eletr\u00f4nico.\n<\/p>\n<p>\n  \u00c9 a experi\u00eancia do usu\u00e1rio.\n<\/p>\n<p>\n  Mais e mais marcas de com\u00e9rcio eletr\u00f4nico priorizam o investimento em interface do usu\u00e1rio e design, e isso n\u00e3o \u00e9 mais apenas um capricho. \u00c9 uma obriga\u00e7\u00e3o.\n<\/p>\n<p>\n  Aqui est\u00e1 o que dizem as estat\u00edsticas. Segundo Sagipl:\n<\/p>\n<ul>\n<li>82% dos 100 principais sites da Alexa usam design adapt\u00e1vel. Portanto, seu investimento em design de UI e UX \u00e9 um pr\u00e9-requisito para se manter competitivo.\n  <\/li>\n<li>Os compradores deixam um site ap\u00f3s 0,05 segundos se acharem que n\u00e3o \u00e9 interessante ou tiverem um problema com a interface \u2013 um problema que o design UX pode corrigir.\n  <\/li>\n<li>Como cada vez mais compradores preferem comprar produtos de dispositivos m\u00f3veis (67%), ter seu site\/servi\u00e7o, n\u00e3o ter um site\/aplicativo amig\u00e1vel pode custar mais da metade do seu p\u00fablico.\n  <\/li>\n<\/ul>\n<p>\n  O com\u00e9rcio eletr\u00f4nico viu algumas tend\u00eancias importantes de design de UI e UX estabelecidas este ano. Essas tend\u00eancias est\u00e3o preocupadas em criar uma experi\u00eancia de usu\u00e1rio perfeita e aumentar o engajamento, o tr\u00e1fego, as convers\u00f5es, as vendas e, como resultado, atrair leads de alta qualidade.\n<\/p>\n<p>\n  Essas tend\u00eancias vieram para ficar e segui-las \u00e9 essencial se voc\u00ea deseja que seu neg\u00f3cio de com\u00e9rcio eletr\u00f4nico permane\u00e7a competitivo.\n<\/p>\n<p>\n  Vamos dar uma olhada nessas tend\u00eancias e analisar alguns exemplos de marcas de com\u00e9rcio eletr\u00f4nico.\n<\/p>\n<h5>\n  1 Um apelo ao minimalismo<br \/>\n<\/h5>\n<p>\n  Uma tend\u00eancia que ganhou for\u00e7a este ano mostra a tend\u00eancia crescente de tornar os sites mais minimalistas.\n<\/p>\n<p>\n  Por que minimalismo?\n<\/p>\n<p>\n  Essa tend\u00eancia no design de interface do usu\u00e1rio e UX \u00e9 a rea\u00e7\u00e3o ao design complexo e &#8216;recheado'. E, como h\u00e1 uma tend\u00eancia crescente para simplificar a interface do usu\u00e1rio, o minimalismo oferece tudo para alcan\u00e7\u00e1-lo.\n<\/p>\n<p>\n  Vejamos o exemplo de um site dinamarqu\u00eas da Iskos, fabricante de m\u00f3veis:\n<\/p>\n<p>\n  \u00c0 primeira vista, j\u00e1 \u00e9 poss\u00edvel perceber os principais atributos do web design minimalista, nomeadamente:\n<\/p>\n<ul>\n<li>Espa\u00e7o negativo \u2013 espa\u00e7o em branco ou plano de fundo da p\u00e1gina inicial\n  <\/li>\n<li>Textura plana \u2013 todas as imagens e elementos da interface do usu\u00e1rio n\u00e3o utilizam 3D ou outras t\u00e9cnicas para se destacar porque j\u00e1 o fazem gra\u00e7as ao espa\u00e7o negativo.\n  <\/li>\n<li>Imagens contrastantes (duras) \u2013 em vez das cores vivas do plano de fundo e dos elementos da interface do usu\u00e1rio, o design minimalista usa imagens para destacar os elementos essenciais (neste caso, o fabricante exibe seus produtos).\n  <\/li>\n<li>Tipografia minimalista \u2013 este site \u00e9 um \u00f3timo exemplo de design minimalista, pois usa um tamanho de fonte decente e uma cor de fonte calma, mas contrastante.\n  <\/li>\n<\/ul>\n<p>\n  Voc\u00ea tamb\u00e9m pode notar um esquema de cores limitado em geral. Essa abordagem cria uma \u00f3tima interface de usu\u00e1rio, pois chama a aten\u00e7\u00e3o do usu\u00e1rio diretamente ao ponto.\n<\/p>\n<p>\n  O site \u00e9 dividido em se\u00e7\u00f5es usando apenas um t\u00edtulo simples e imagens do produto.\n<\/p>\n<p>\n  Um elemento de interface do usu\u00e1rio contrastante neste site \u00e9 uma janela de menu pop-up no canto da tela:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971020218.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971020218.webp\" alt=\"\" \/><\/a><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839713995bc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839713995bc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  N\u00e3o h\u00e1 necessidade de adicionar mais se\u00e7\u00f5es a este menu, pois todas j\u00e1 est\u00e3o na p\u00e1gina inicial, portanto, este menu serve como uma fonte adicional de informa\u00e7\u00e3o para o usu\u00e1rio, que deseja interagir mais com a marca.\n<\/p>\n<p>\n  Esses designs, com navega\u00e7\u00e3o simples e o produto como ponto focal principal, s\u00e3o perfeitos para alcan\u00e7ar a excel\u00eancia em design de UI\/UX.\n<\/p>\n<h5>\n  2 Fazendo uma \u00eanfase na marca<br \/>\n<\/h5>\n<p>\n  Outra tend\u00eancia no design de UI e UX \u00e9 fortalecer a conex\u00e3o entre a experi\u00eancia do usu\u00e1rio e a marca.\n<\/p>\n<p>\n  A experi\u00eancia do usu\u00e1rio \u00e9 definida pelo qu\u00e3o perto o usu\u00e1rio pode se aproximar da marca, e isso se tornou o ponto para os designers de UI e UX focarem. Al\u00e9m disso, um design centrado no branding, faz com que todas as etapas da experi\u00eancia do usu\u00e1rio sejam focadas em apresentar a marca a esse usu\u00e1rio.\n<\/p>\n<p>\n  Um \u00f3timo exemplo de como enfatizar a marca no design de interface do usu\u00e1rio e UX \u00e9 o Unsubscribe, marca de com\u00e9rcio eletr\u00f4nico de produtos para cabelos.\n<\/p>\n<p>\n  O site deles \u00e9 uma obra-prima que combina a experi\u00eancia do usu\u00e1rio e a marca em cada etapa do caminho. Ao navegar por este site, o usu\u00e1rio ir\u00e1 se deparar com diferentes elementos, o que ajuda a alcan\u00e7ar uma intera\u00e7\u00e3o completa com uma marca:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839716c52bd.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839716c52bd.webp\" alt=\"\" \/><\/a><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971a248cc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971a248cc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Al\u00e9m de verem em seus slogans a palavra &#8216;cancelar assinatura', que corresponde ao nome da marca, eles tamb\u00e9m fazem do seu objetivo um ponto central do site, que \u00e9 ajudar pessoas ativas a cuidar melhor do cabelo:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383971d7a536.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  E, claro, o site \u00e9 feito com as melhores pr\u00e1ticas minimalistas, ajudando a criar uma interface de usu\u00e1rio simples, mas vers\u00e1til e uma experi\u00eancia de usu\u00e1rio positiva em geral.\n<\/p>\n<h5>\n  3 Ficando Mais Ousado<br \/>\n<\/h5>\n<p>\n  Este ano, os designers observaram uma tend\u00eancia crescente de fontes mais ousadas, por\u00e9m mais simples. Essa tend\u00eancia coincide com a tend\u00eancia do minimalismo, mencionada acima.\n<\/p>\n<p>\n  No com\u00e9rcio eletr\u00f4nico, fontes em negrito s\u00e3o usadas para chamar a aten\u00e7\u00e3o do usu\u00e1rio para uma mensagem que geralmente \u00e9 colocada no meio da p\u00e1gina. Aqui est\u00e1 um exemplo da Limnia, uma marca de e-commerce que vende joias finas:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839720e3448.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Embora o site utilize um v\u00eddeo de uma modelo apresentando o produto ao fundo, nossa aten\u00e7\u00e3o n\u00e3o \u00e9 atra\u00edda por ele, mas sim pela mensagem colocada no centro da p\u00e1gina em negrito.\n<\/p>\n<p>\n  Entre as fontes mais usadas, os designers de UI e UX preferem Helvetica, Sans e Univers. No entanto, voc\u00ea n\u00e3o pode escolher aleatoriamente a fonte para o design de UI\/UX. Esta escolha depende de v\u00e1rios fatores diferentes, nomeadamente:\n<\/p>\n<ul>\n<li>N\u00edvel de ousadia em contraste com o resto do design.\n  <\/li>\n<li>Tamanho da fonte e como ela \u00e9 percebida em contraste com o restante do design.\n  <\/li>\n<li>Tipo, n\u00edvel de ousadia, tamanho e cor da fonte em rela\u00e7\u00e3o \u00e0 est\u00e9tica da sua marca.\n  <\/li>\n<\/ul>\n<p>\n  Todos esses fatores influenciam como um usu\u00e1rio percebe e interage com sua marca, portanto, a escolha das fontes deve contribuir para a consist\u00eancia do design de UI e UX.\n<\/p>\n<h5>\n  4 Adapta\u00e7\u00e3o para dispositivos m\u00f3veis<br \/>\n<\/h5>\n<p>\n  Mencionamos na introdu\u00e7\u00e3o deste artigo que mais da metade de seus clientes prefere fazer compras por meio de dispositivos m\u00f3veis. E como as marcas de e-commerce operam predominantemente online (com apenas algumas delas com showrooms f\u00edsicos), investir em mobile UX design \u00e9 obrigat\u00f3rio.\n<\/p>\n<p>\n  De acordo com a Interaction Design Foundation, a experi\u00eancia do usu\u00e1rio m\u00f3vel visa criar experi\u00eancias m\u00f3veis positivas por meio de sites, aplicativos e outros servi\u00e7os usados \u200b\u200bem dispositivos m\u00f3veis. Os principais objetivos do UX m\u00f3vel s\u00e3o efici\u00eancia e capacidade de descoberta.\n<\/p>\n<p>\n  Para uma marca de e-commerce, mobile UX significa, antes de tudo, acessibilidade completa a todos os elementos do site e simplicidade da interface.\n<\/p>\n<p>\n  Um \u00f3timo exemplo de adapta\u00e7\u00e3o de um site para desktop e dispositivos m\u00f3veis \u00e9 Boria, uma marca francesa de com\u00e9rcio eletr\u00f4nico que vende decora\u00e7\u00e3o para casa:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839723c6abc.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  A vers\u00e3o m\u00f3vel do site de Boria tem menos elementos de design. No entanto, preserva todas as se\u00e7\u00f5es-chave necess\u00e1rias para que os clientes comprem por meio de dispositivos m\u00f3veis:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839726c8a52.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Investir em mobile UX n\u00e3o \u00e9 apenas um pr\u00e9-requisito para uma \u00f3tima experi\u00eancia do usu\u00e1rio. Tamb\u00e9m \u00e9 importante para o ranking de SEO da sua marca de com\u00e9rcio eletr\u00f4nico.\n<\/p>\n<p>\n  O Google classifica marcas com sites de alta qualidade adaptados a dispositivos m\u00f3veis muito altos. Mas existem v\u00e1rias regras que tornam um site m\u00f3vel excelente. \u00c9 por isso que, em 2015, o Google postou dicas de design de UX m\u00f3vel para desenvolvedores, atualizando regularmente essas dicas \u00e0 medida que novas tend\u00eancias surgem. Entre essas dicas voc\u00ea pode encontrar:\n<\/p>\n<ul>\n<li>\n    <strong>Pesquise antes de prototipar<\/strong>. Como os designers de UX s\u00e3o tendenciosos, o Google aconselha n\u00e3o entrar na prototipagem imediatamente, mas pesquisar primeiro o p\u00fablico-alvo por meio de an\u00e1lise heur\u00edstica e testes AB.\n  <\/li>\n<li>\n    <strong>Trabalhe em alvos de toque<\/strong>. Mesmo que a interface de um site para celular seja amig\u00e1vel e o site carregue rapidamente em dispositivos m\u00f3veis, os usu\u00e1rios ainda abandonar\u00e3o o site se ele tiver elementos que n\u00e3o respondem ao toque. Isso significa que esses elementos t\u00eam alvos de toque muito pequenos e o Google recomenda deix\u00e1-los com pelo menos 7 a 10 mm de largura.\n  <\/li>\n<li>\n    <strong>Menos desordem<\/strong>. Sin\u00f4nimo da tend\u00eancia do minimalismo no design de interface do usu\u00e1rio e experi\u00eancia do usu\u00e1rio, essa dica indica que o Google classifica os sites para dispositivos m\u00f3veis desordenados mais abaixo, pois s\u00e3o dif\u00edceis de interagir.\n  <\/li>\n<\/ul>\n<p>\n  Em outras palavras, as marcas de com\u00e9rcio eletr\u00f4nico devem prestar igual aten\u00e7\u00e3o \u00e0 funcionalidade de seus sites, tanto em computadores quanto em dispositivos m\u00f3veis, para oferecer a experi\u00eancia completa da marca.\n<\/p>\n<h5>\n  5 Focando na Velocidade<br \/>\n<\/h5>\n<p>\n  No in\u00edcio do artigo, tamb\u00e9m mencionamos que os clientes tomam a decis\u00e3o de interagir com sua marca nos primeiros 0,05 segundos de visita ao seu site.\n<\/p>\n<p>\n  Para marcas de com\u00e9rcio eletr\u00f4nico, a baixa velocidade de carregamento da p\u00e1gina pode ser prejudicial. Por ser um setor muito competitivo, n\u00e3o h\u00e1 problema para um usu\u00e1rio ir e encontrar outra marca de com\u00e9rcio eletr\u00f4nico com um produto semelhante, mas um site de carregamento r\u00e1pido.\n<\/p>\n<p>\n  O desempenho tamb\u00e9m faz parte da experi\u00eancia do usu\u00e1rio e diz muito sobre como voc\u00ea valoriza seus visitantes como uma marca de com\u00e9rcio eletr\u00f4nico.\n<\/p>\n<p>\n  Ent\u00e3o, qual \u00e9 o objetivo de um designer de UX quando se trata de uma velocidade de carregamento de p\u00e1gina perfeita?\n<\/p>\n<p>\n  De acordo com a Unbounce, leva em m\u00e9dia 15,3 segundos para uma p\u00e1gina de destino carregar. Isso, no entanto, j\u00e1 \u00e9 muito longo se o seu objetivo for criar uma experi\u00eancia de usu\u00e1rio positiva.\n<\/p>\n<p>\n  Assim, a Unbounce afirma que a melhor velocidade de carregamento da p\u00e1gina \u00e9 de 2,4 a 3,21 segundos, mas sites que carregam em cinco segundos tamb\u00e9m obt\u00eam sess\u00f5es m\u00e9dias mais longas (70% mais de acordo com a fonte).\n<\/p>\n<p>\n  Assim, o objetivo final para uma experi\u00eancia positiva do usu\u00e1rio \u00e9 atingir uma velocidade de carregamento de p\u00e1gina de 3 segundos em m\u00e9dia.\n<\/p>\n<h5>\n  6 Criando a Experi\u00eancia do Camarim<br \/>\n<\/h5>\n<p>\n  Agora, vamos passar da parte t\u00e9cnica de nossa discuss\u00e3o para as tend\u00eancias em servi\u00e7os que as marcas de com\u00e9rcio eletr\u00f4nico podem oferecer para aprimorar a experi\u00eancia do usu\u00e1rio e a intera\u00e7\u00e3o do usu\u00e1rio com a marca.\n<\/p>\n<p>\n  Uma das tend\u00eancias crescentes em design de UI e UX este ano foi a introdu\u00e7\u00e3o de camarins virtuais.\n<\/p>\n<p>\n  A experi\u00eancia online do provador surgiu como resposta \u00e0s crescentes exig\u00eancias dos consumidores para interagir mais com os produtos e experiment\u00e1-los. Todos n\u00f3s sabemos que estamos comprando um porco em um pux\u00e3o se n\u00e3o pudermos tocar fisicamente no produto. Isso \u00e9 especialmente verdadeiro quando se trata de marcas de com\u00e9rcio eletr\u00f4nico que vendem roupas ou acess\u00f3rios.\n<\/p>\n<p>\n  Uma dessas marcas de com\u00e9rcio eletr\u00f4nico \u00e9 a Warby Parker, uma empresa online que vende \u00f3culos, respondeu a esse problema lan\u00e7ando um aplicativo m\u00f3vel, onde os usu\u00e1rios podem experimentar diferentes formas de \u00f3culos simplesmente tirando uma foto:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972a0f7bf.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Este aplicativo tem sido muito \u00fatil para os clientes, que desejam comprar \u00f3culos, mas hesitam em saber qual formato dos \u00f3culos caber\u00e1 em seu rosto.\n<\/p>\n<p>\n  Essa tend\u00eancia \u00e9 a fus\u00e3o entre UX e AR (realidade aumentada), pois os clientes interagem com objetos da vida real, que s\u00e3o aprimorados por modalidades sensoriais geradas por computador, para receber a experi\u00eancia completa do usu\u00e1rio com a marca.\n<\/p>\n<h5>\n  7 Contando uma hist\u00f3ria por meio de recursos visuais<br \/>\n<\/h5>\n<p>\n  Outra tend\u00eancia que visa melhorar a experi\u00eancia do usu\u00e1rio por meio do conte\u00fado do site \u00e9 a narrativa visual.\n<\/p>\n<p>\n  O papel do storytelling no marketing \u00e9 enorme. A pesquisa mostra que as mensagens de marketing entregues como hist\u00f3rias s\u00e3o at\u00e9 22 vezes mais envolventes e memor\u00e1veis. Contar hist\u00f3rias significa mais valor, e \u00e9 por isso que migrou com sucesso para o design UX e se tornou uma narrativa visual.\n<\/p>\n<p>\n  Para uma marca de e-commerce, o storytelling visual \u00e9 essencial para a experi\u00eancia do usu\u00e1rio, pois aproxima o cliente da marca e oferece a ele uma participa\u00e7\u00e3o exclusiva na defini\u00e7\u00e3o dessa marca.\n<\/p>\n<p>\n  Uma das marcas que combina com sucesso a narrativa visual e a experi\u00eancia positiva do usu\u00e1rio \u00e9 a Always, marca de higiene pessoal da P&G:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383972d84b88.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Utilizando narrativa visual, a Always conta como a marca participa de diversas causas sociais, revelando as hist\u00f3rias, como as pessoas interagem com a marca e seu produto atrav\u00e9s do seu ponto de vista pessoal:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-63839730a17d5.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  H\u00e1, no entanto, um problema com a coloca\u00e7\u00e3o de conte\u00fado quando se trata de narrativa visual no design UX. Dependendo do idioma que o p\u00fablico-alvo fala e em que dire\u00e7\u00e3o ele l\u00ea (da esquerda para a direita ou da direita para a esquerda), o conte\u00fado ser\u00e1 colocado de maneira diferente.\n<\/p>\n<p>\n  Por exemplo, para o p\u00fablico que l\u00ea da esquerda para a direita, o conte\u00fado deve ser colocado no meio ou \u00e0 esquerda e com cerca de 75 caracteres por linha:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973383a31.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  O visual storytelling \u00e9 uma metodologia subjacente ao UX design, essencial para as marcas de e-commerce, pois baseiam toda a sua experi\u00eancia com o cliente em experi\u00eancias online.\n<\/p>\n<h5>\n  8 Fazendo Check-out Sem Esfor\u00e7o<br \/>\n<\/h5>\n<p>\n  Outra tend\u00eancia de clientes exigentes \u00e9 tornar o checkout mais f\u00e1cil. O checkout sem esfor\u00e7o tamb\u00e9m \u00e9 um dos maiores desafios no design de UX.\n<\/p>\n<p>\n  De acordo com estat\u00edsticas recentes da InvestCRO, a taxa m\u00e9dia de abandono do carrinho de compras \u00e9 de 65,23%, para a qual contribuem consideravelmente os seguintes motivos:\n<\/p>\n<ul>\n<li>14% \u2013 sem op\u00e7\u00e3o de check-out do h\u00f3spede\n  <\/li>\n<li>11% \u2013 processo de checkout complexo\n  <\/li>\n<li>7% \u2013 op\u00e7\u00f5es de pagamento insuficientes\n  <\/li>\n<\/ul>\n<p>\n  Como a conclus\u00e3o dos pagamentos e o checkout pertencem \u00e0 experi\u00eancia do usu\u00e1rio, o designer de UX \u00e9 quem deve se preocupar em torn\u00e1-lo mais f\u00e1cil.\n<\/p>\n<p>\n  Se o site tiver uma alta taxa de abandono do carrinho de compras, \u00e9 tarefa do designer de UX:\n<\/p>\n<ul>\n<li>Descubra por que isso est\u00e1 acontecendo com a ajuda de testes de usabilidade (atrav\u00e9s de entrevistas com usu\u00e1rios e dados recebidos do suporte ao cliente).\n  <\/li>\n<li>Mapeie a jornada do cliente considerando os dados coletados nos testes de usabilidade.\n  <\/li>\n<li>Fa\u00e7a testes AB para ver como a solu\u00e7\u00e3o est\u00e1 funcionando.\n  <\/li>\n<\/ul>\n<p>\n  Como o sucesso de uma marca de e-commerce depende muito da experi\u00eancia do cliente com o checkout, simplificar esse processo com o design UX \u00e9 uma contribui\u00e7\u00e3o importante para uma experi\u00eancia positiva do usu\u00e1rio.\n<\/p>\n<h5>\n  9 Foco em ofertas personalizadas<br \/>\n<\/h5>\n<p>\n  A personaliza\u00e7\u00e3o \u00e9 a tend\u00eancia que veio para ficar. E o UX pode lev\u00e1-lo a outro n\u00edvel ao criar ofertas personalizadas.\n<\/p>\n<p>\n  Muitas marcas de com\u00e9rcio eletr\u00f4nico j\u00e1 est\u00e3o fazendo grande uso dele.\n<\/p>\n<p>\n  Por exemplo, Thinx, uma marca de e-commerce que vende roupas \u00edntimas e produtos de higiene pessoal, desenvolveu uma pesquisa para ajudar a escolher produtos que atendam \u00e0s necessidades de um usu\u00e1rio:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397366f145.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Seguindo os resultados da pesquisa, a marca cria ofertas personalizadas, o que \u00e9 perfeito para clientes de primeira viagem.\n<\/p>\n<p>\n  Outra empresa, a Tobi, uma marca de e-commerce que vende roupas, focou na inclus\u00e3o projetando uma janela pop-up para ajudar pessoas com defici\u00eancia a ajustar o site para tornar a interface do usu\u00e1rio mais confort\u00e1vel para eles usarem:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-638397393475a.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Essas contribui\u00e7\u00f5es de design de UI e UX t\u00eam como objetivo personalizar a experi\u00eancia de cada usu\u00e1rio com a marca, reconhecendo as caracter\u00edsticas e comportamentos \u00fanicos de cada usu\u00e1rio.\n<\/p>\n<h5>\n  10 Conversando com o Cliente<br \/>\n<\/h5>\n<p>\n  No com\u00e9rcio eletr\u00f4nico, os chatbots desempenham um papel importante, fornecendo suporte ao cliente. Eles tamb\u00e9m fazem parte da experi\u00eancia do usu\u00e1rio, independentemente de usarem design de IU gr\u00e1fico ou design de IU de voz.\n<\/p>\n<p>\n  O design da interface do usu\u00e1rio oferece grande versatilidade para marcas de com\u00e9rcio eletr\u00f4nico quando se trata de criar chatbots. Por exemplo, MeUndies, uma marca de com\u00e9rcio eletr\u00f4nico que vende roupas \u00edntimas, usa o chatbot do site para responder \u00e0s perguntas mais pesquisadas:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973c90de8.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973c90de8.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Algumas marcas optam por uma experi\u00eancia de chatbot mais interativa. Sempre, por exemplo, transforma uma conversa com seu chatbot em uma intera\u00e7\u00e3o realista com humanos:\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973fc0224.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-314434-6383973fc0224.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  A escolha de um chatbot depende de como voc\u00ea deseja que ele represente sua marca. Mas n\u00e3o h\u00e1 como negar que a tend\u00eancia do chatbot continuar\u00e1 fazendo parte do design de UI e UX, pois tem um impacto direto na qualidade da experi\u00eancia do usu\u00e1rio.\n<\/p>\n<h5>\n  N\u00e3o se esque\u00e7a do valor<br \/>\n<\/h5>\n<p>\n  Todas as tend\u00eancias sobre as quais falamos neste artigo t\u00eam um forte foco na entrega de valor ao cliente. Eles se concentram no design que n\u00e3o causa danos, mas enfatiza o valor. Essas tend\u00eancias tamb\u00e9m visam aproximar sua marca de com\u00e9rcio eletr\u00f4nico dos clientes por meio de narrativa visual, design de IA conversacional e marca UX.\n<\/p>\n<p>\n  Acompanhar essas tend\u00eancias de UI\/UX pode ajudar as marcas de com\u00e9rcio eletr\u00f4nico a colocar a experi\u00eancia do usu\u00e1rio em primeiro plano, garantindo que continuem sendo bem-sucedidas nesse setor altamente competitivo.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fonte de grava\u00e7\u00e3o: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2020\/05\/12\/ecommerce-ui-ux-design-trends\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>2019 j\u00e1 est\u00e1 acabando, e temos que agradecer por muitas tend\u00eancias que marcaram esse ano. Em particular, h\u00e1 uma tend\u00eancia que veio para ficar por muito tempo. Pelo menos no com\u00e9rcio eletr\u00f4nico. \u00c9 a experi\u00eancia do usu\u00e1rio. Mais e mais marcas de com\u00e9rcio eletr\u00f4nico priorizam o investimento em interface do usu\u00e1rio e design, e isso n\u00e3o \u00e9 mais apenas um capricho. \u00c9 uma obriga\u00e7\u00e3o. Aqui est\u00e1 o que dizem as estat\u00edsticas. De acordo com a Sagipl: 82% dos 100 principais sites da Alexa usam design adaptativo. Portanto, seu investimento em design de UI e UX \u00e9 um pr\u00e9-requisito para se manter competitivo. Os compradores saem de um site\u2026<\/p>\n","protected":false},"author":1,"featured_media":211003,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[202,59],"tags":[],"class_list":["post-260967","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-designer-de-web","category-web-e-wordpress-2"],"_links":{"self":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260967","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/comments?post=260967"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/posts\/260967\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media\/211003"}],"wp:attachment":[{"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/media?parent=260967"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/categories?post=260967"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/pt-pt\/wp-json\/wp\/v2\/tags?post=260967"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}