Design que Vende. Eder Paes

Transcrição

1 Design que Vende Eder Paes

2 Conceito funcionalista do design A forma segue a função. A forma é resultado da funcionalidade do objeto ou do espaço, não do capricho pessoal ou da tradição histórica. O ornamento não tem mais lugar na funcionalidade do objeto. A primeira escola de design do mundo, Bauhaus, foi o centro do design funcionalista. Fundada em 1919, foi uma das maiores e mais importantes expressões do que é chamado modernismo no design e na arquitetura. "Design é função, não forma. Steve Jobs.

3 Fases do webdesign 1ª - Fase do texto: valorização apenas do conteúdo, cuidado nenhum com design e usabilidade. 2ª - Fase da imagem: conteúdo perde o foco, bons sites são sites com grande quantidade de truques técnicos. 3ª - Fase da estética: conteúdo retorna a ser relevante, mas sua apresentação estética é mais evidente. 4ª - Fase da usabilidade: conteúdo é o grande centro das atenções, estética é apenas um acessório. 5ª - Fase da acessibilidade: sites se adaptam a qualquer tipo de tela, internet se estende as coisas. Evidência ao UX Design.

4 User Experience Design São as percepções e reações de uma pessoa que resultam do uso ou utilização prevista de um produto, sistema ou serviço. A experiência do usuário inclui todas as emoções, crenças, preferências, percepções, respostas físicas e psicológicas, comportamentos e realizações do usuário que ocorrem antes, durante e após o uso. Três fatores que influenciam a experiência do usuário: o sistema, usuário e contexto de uso.

5 UX design no ecommerce Usabilidade: facilidade de uso, uso intuitivo da interface, hierarquia de informações. Acessibilidade: lojas acessíveis em todos os dispositivos, seja ele desktop ou mobile. Relacionamento: a loja tem que falar a língua de seus clientes. Estética: reforçar identidade visual da loja, ser sutil, sem atrapalhar o uso da mesma.

6 Como não errar no UX Design Quem é meu público? OS LEIGOS!

7 Como não errar no UX Design Ecommerce é apenas mais um canal de venda, encare sua loja como você encara uma loja física ou um televendas. Planejar previamente o seu negócio, definir seus produtos, categorias, formas de pagamento, formas de envio, divulgação, etc. Não reinventar a roda. Dar preferência aquilo que os usuários estão condicionados. Ser direto, objetivo e claro. Conteúdo irrelevante não agrega valor algum para o usuário e para SEO. Seu produto é a estrela principal, não seu layout. Sua loja não deve ser feita pra você e sim para seus clientes. Coloque-se no lugar deles.

8 Como não errar no UX Design Atestar a capacidade técnica, atualização e experiência da equipe envolvida no desenvolvimento do projeto. Dar liberdade e tempo hábil para criação do projeto. Preencher atentamente os briefings e dados solicitados por sua agência ou desenvolvedor. Manter proximidade a todo momento entre ux designer e desenvolvedor front-end. Se manter atualizado com as tendências do mercado e aplicá-las a seu negócio com pioneirismo. Primeiro se projeta, depois se executa, e não o contrário. Opte por plataformas que favoreçam esse fluxo.

9 Estrutura básica do layout Header / Cabeçalho Content / Conteúdo Footer / Rodapé

10 Exemplo prático: Header ruim

11 Exemplo prático: Header duvidoso

12 Exemplo prático: Header acertivo

13 Estrutura básica de navegação Maior acesso Mais sensível Catálogo Home Produto Carrinho! Checkout Busca Painel do Cliente Institucionais / Atendimento

14 Estrutura básica: Home Maior penetração de clientes recorrentes ou campanha de branding. Apresentar promoções e destaques em constante atualização. Manter a loja viva. Conteúdo institucional para maior credibilidade e SEO. Vitrine de produtos em destaque resumindo os departamentos da loja. Filtros de busca para facilitar e guiar os usuários no que ele precisa encontrar.

15 Exemplo prático: Home

16 Exemplo prático: Home

17 Exemplo prático: Home

18 Estrutura básica: Catálogo / Busca Grande área de acesso de clientes vindo de buscadores ou campanhas. Apresentar produtos com fotos atraentes e em bom tamanho para visualização. Apresentar preços (de, por, parcelado, à vista) com clareza, sem enganar" seu cliente. Ordenação de resultados por data, preço, relevância é de grande importância. Filtros são essenciais para uma navegação rápida e eficiente. Descrição do departamento / categoria para otimização SEO.

19 Exemplo prático: Catálogo / Busca

20 Exemplo prático: Catálogo / Busca

21 Estrutura básica: Produto Área mais importante e mais acessada da loja. Apresentar todos os dados relevantes sobre seu produto (nome, marca, código, descrição, dados técnicos, informações adicionais, etc). A descrição sempre deve ser original e de fácil acesso. Apresentar fotos em tamanho satisfatório e com alta qualidade para visualização de todos os detalhes. Apresentar vídeos, infográficos, tabelas e descrições ilustradas para fácil entendimento do produto em questão.

22 Estrutura básica: Produto Apresentar preços (de, por, parcelado, à vista) com clareza, sem enganar" seu cliente. Apresentar variações de produtos com clareza, com ilustração e não somente nome. Posicionar no local exato, antes do botão comprar para que o cliente não esqueça de selecionar. Dar opções de compartilhamento do produto nas redes sociais. Especificar dados de disponibilidade do produto, prazos de entrega e outros relevantes à compra. Botão comprar de fácil acesso e convidativo, que expresse a ação de continuar" e segurança".

23 Estrutura básica: Produto Dar opções de outros produtos relevantes e complementares para compra conjunta. Apresentar sugestões de produtos similares, com melhor avaliação para maior satisfação de seu cliente. Mostrar avaliações e depoimentos de clientes que compraram o produto em questão. Possibilitar ao cliente fazer perguntas sobre suas dúvidas e que elas fiquem disponíveis para todos os clientes.

24 Exemplo prático: Produto

25 Exemplo prático: Produto

26 Estrutura básica: Carrinho de Compras Apresentar de maneira clara os produtos contidos e seus dados principais (foto, nome, quantidade, preço). Facilitar a mudança de quantidade dos produtos, exclusão de itens e cupons de desconto. Fácil acesso a simulação de valor de frete e prazos de entrega. Subtotal e total aparentes e organizados, com opções claras de pagamento (parcelamento, à vista). Botão finalizar compra de fácil acesso e convidativo, que expresse a ação de continuar" e segurança. Acesso rápido ao carrinho de compras através do ícone do header com resumo de seu conteúdo e possibilidade de ir direto ao checkout.

27 Exemplo prático: Carrinho

28 Estrutura básica: Checkout Área mais sensível da loja, onde surgem a maior parte das dúvidas e tem grande taxa de abandono. Limpar totalmente o layout, mantendo apenas logotipo, dados de contato (telefone, chat), certificados de segurança. Ter o mínimo de fases possíveis, mas de maneira organizada e passo-a-passo. Formatar campos para fácil preenchimento (documentos, cep, data de nascimento). Perguntar somente aquilo que for necessário para efetivação da compra, dados irrelevantes só pioram a experiência.

29 Estrutura básica: Checkout Possibilitar o login ou cadastro no próprio checkout, evitando preenchimento prévio. Apresentar dados de endereço no preenchimento do CEP para facilitar e agilizar o preenchimento. Mostrar de forma clara e objetiva as opções de frete, assim como os prazos de entrega e valores. Dar dicas breves em todos os passos que possam gerar dúvidas aos clientes.

30 Estrutura básica: Checkout Os gateways e facilitadores ajudam a aumentar a credibilidade e segurança para os clientes. Dê preferência aos meios de pagamento transparente, para que o usuário faça o pagamento na própria loja. Apresente um resumo dos produtos a serem comprados, com opção de alteração. Mostre com clareza os totais, fretes e descontos para evitar possíveis transtornos. Botão finalizar compra de fácil acesso e convidativo, que expresse a ação de continuar" e segurança.

31 Exemplo prático: Checkout

32 Exemplo prático: Checkout

33 Estrutura básica: Página de Sucesso Exibida na efetivação do pedido, deve ser clara a mensagem de sucesso do pedido. Mostrar agradecimento pela compra efetuada e convidando para próximas experiências. Apresentar um resumo do que foi comprado, valores e formas de pagamento. Instruir de maneira clara como efetuar o pagamento, caso a opção seja boleto bancário, transferência ou depósito. Dar opção de avaliação da compra, através de mecanismos como o ebit, que contam pontos para sua reputação.

34 Estrutura básica: Painel do Cliente Acessado na maioria das vezes após realização de um pedido ou após um cadastro. Deve facilitar a alteração de dados da conta (nome, , endereços). Apresentar de forma clara os pedidos realizados e seus status, assim como código de acompanhamento e possibilidade de cancelamento. Dar opções adicionais como gerenciar cadastro em newsletter, lista de desejos, editar avaliações e comentários. Deve ter fácil acesso através do header, com possibilidade de login rápido através de ou redes sociais.

35 Estrutura básica: Institucionais / Atendimento Apresente todos os dados necessários para atestar a credibilidade de sua loja (histórico, políticas, endereços, dados de contato, documentos). Descreva com clareza como são os passos para efetuar uma compra. Apresente com detalhes todas as formas de pagamento e envio dos produtos, assim como os prazos de entrega. Respeite a privacidade de seus clientes, apresente suas políticas de forma detalhada e completa. Crie uma central de atendimento para tirar dúvidas frequentes e acessar todas as formas de contato. Possibilite um atendimento rápido e de fácil acesso, através de telefone, apps, , formulário, chat, etc.

36 Plataforma A plataforma deve ser escolhida com bastante cuidado, avaliando seu custo-benefício a curto, médio e longo prazo. Jamais a plataforma pode atrapalhar a experiência de compra, ela deve ser sua grande aliada. Documentação extensa para implantação e integrações é fundamental para explorar ao máximo os recursos. A plataforma tem que ser aliada a agências implatadoras e não concorrente. Migrações são dolorosas, sua plataforma deve lhe auxiliar e dar todo apoio necessário caso faça necessário. Procure plataformas que proporcionam liberdade a você e aos seus desenvolvedores, como open sources.

37 Vantagens dos Open Sources É um modelo colaborativo de produção intelectual, criado por comunidades de desenvolvedores, sem ter como prioridade o interesse comercial e sim o aprimoramento de uma tecnologia ou sistema. Proporcionam grande liberdade para implantação de lojas virtuais, criação de layouts e desenvolvimento de recursos e integrações. A plataforma se adapta ao seu negócio, não o contrário: primeiro se projeta, depois se executa. Extensa documentação e comunidade, maior oferta de profissionais capacitados. Sua loja não fica presa a uma única empresa, a facilidade de migração ajuda a recorrer a outras alternativas sem maiores dores de cabeça. Atualização recorrente de recursos e versões, plataformas amplamente utilizadas estão em constante aprimoramento.

38 Resumo Seu design primeiro deve ser funcional, depois estético. Projete sua loja colocando-se no lugar do seu público. Facilite a navegação e favoreça as informações relevantes. Tenha sua loja acessível em qualquer dispositivo. Mantenha-se sempre atualizado sobre as tendências de mercado e seja pioneiro. Não desvie seu foco, não queira criar uma empresa de desenvolvimento ou design dentro de sua loja, esse não é seu negócio. Escolha empresas especializadas, de credibilidade e que te mostrem resultados reais: clientes que vendem.

39 Prometo, seu sucesso é garantido! Obrigado.

40 Eder Paes CEO Admake (14) /