Posts da Tag: UX - Blog da TreinaWeb

Acessibilidade e User Experience (UX)

Wireframe: o que é e por que utilizar?

Ao desenvolver um site ou um aplicativo, é comum pensarmos em como ele será, quais funcionalidades, menus… Essa ideia inicial, muitas vezes rabiscadas no papel, tem um nome: wireframe.

O que é um wireframe?

O wireframe é uma etapa do desenvolvimento de um projeto, onde criamos um “esqueleto”, que serve para ilustrar, de maneira simplificada, um site ou aplicativo.

O objetivo principal do wireframe é focar na organização do conteúdo, dentre outras características da Arquitetura da informação. Já temos um artigo que aborda o papel da Arquitetura de Informação, mas de forma bem resumida, ela tem o foco em ajudar o usuário a encontrar o que ele está procurando.

Um wireframe é considerado um protótipo de baixa fidelidade, pois ele está distante do entregável, não sendo tão fiel, podendo ser modificado e refeito. Ele serve mais para termos uma ideia do que vai vir a ser o produto final. Aqui vamos focar mais em um protótipo de um site/app/sistema, mas ele pode servir para qualquer coisa, não somente um app ou site.

Abaixo temos alguns dos benefícios de se utilizar wireframes:

  • Apresenta resultados mais tangíveis e compreensíveis, servindo também para um entendimento do que será feito;
  • Facilita o alinhamento da expectativa do cliente quanto ao que o usuário quer e ao projeto criado;
  • A entender quantas telas o projeto precisará e como elas devem ser desenhadas;
  • Auxilia na diagramação do conteúdo, facilitando o trabalho do designer;
  • Promove o desenvolvimento de variações de layout;
  • Sua revisão e adaptação são mais baratas de serem feitas.
UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

Como seu foco é ser simples, muitas vezes ele pode aparentar estar incompleto, mas a magia dele está justamente em sua simplicidade. Esse esboço facilita muito para que você não perca muito tempo criando algo elaborado. A partir desse esboço mais básico podemos ter mais ideias de mudanças e melhorias.

É importante ressaltar que o wireframe serve para mostrar termos de estrutura e não aparência. Sendo assim, nesta etapa devemos pensar e observar outras coisas, como por exemplo, como as informações ficarão organizadas, quais menus ele irá ter, como será o fluxo de uma página, como será a navegação principal, etc…

Isso deve ser feito antes de começarmos a pensar em cores, formas, formato, imagens, fontes, etc. Isso vale também porque o seu cliente/usuário pode não se atentar no que ele realmente tem que ver. Ele tem que ver o que realmente importa neste momento: se está intuitivo, se a navegação está correta, etc.

No wireframe você só precisa ter uma ideia aproximada das informações que estão acontecendo na página, do que vai tratar o projeto.

Tipos de wireframes

Podemos dividir os tipos de wireframes em três principais:

  • Wireframe de baixa fidelidade: como já vimos neste artigo, é a versão mais simples possível, tendo os elementos principais, feitos em papel e caneta, por exemplo;
  • Wireframe anotado: neste tipo já temos um upgrade, podendo adicionar mais detalhes ao wireframe, como por exemplo, colocar legendas e anotações para facilitar o entendimento do que cada item faz;
  • Wireframe de fluxo de usuários: neste tipo é mostrado como um usuário irá navegar pelo conteúdo. Aqui tudo pode ser estático, sem interação. O foco é mostrar como funciona um fluxo de usuário;
  • Wireframe interativo: aqui já podem entrar a utilização de softwares para criarmos uma interação, seja com cliques, toques, zoom, etc.

Onde fazer um wireframe?

Para cada contexto que vimos acima, o wireframe tem uma quantidade de detalhes: ele pode ser simples, feito no papel, numa lousa… Depois você pode ir para uma ferramenta, deixando-o mais interativo, feito em softwares como o Axure e o Sketch.

Lembre-se sempre de evitar adicionar elementos visuais complexos. Nesta etapa, menos é mais. Esses elementos podem te distrair da tarefa principal.

Você pode utilizar algumas técnicas no desenvolvimento do wireframe, como a técnica “Crazy 8’s”, onde você dobra um pedaço de papel em 8 seções diferentes e depois faz 8 diferentes ideias de um wireframe o mais rápido possível.

Também não se esqueça de aproveitar as 10 heurísticas de Nielsen, para melhorar a usabilidade da sua interface. Com o uso desse esboço, você poderá diminuir drasticamente os riscos de errar ao criar aplicativos e sites.


Acessibilidade e User Experience (UX)

Como melhorar a experiência do usuário em e-commerce

O ato de fazer compras online cresceu nos últimos meses. Com isso, os clientes passaram a buscar ainda mais por sites que os fazem ter experiências positivas, que responda seus anseios e que o processo de compra seja fácil e seguro. É justamente nesses pontos que vem a importância do olhar para a experiência do usuário: não basta ter apenas uma boa estratégia de marketing se seu cliente não tem uma boa experiência no seu site. Sendo assim, veremos neste artigo algumas dicas de como melhorar a experiência do usuário no seu e-commerce.

O que é experiência do usuário (UX)?

Você já pensou em como está a experiência do usuário no seu e-commerce? Para pensar em uma resposta, você pode analisar considerando se qualquer pessoa poderia entrar no site, navegar, compreender os conteúdos e efetuar uma compra sem nenhuma limitação ou dificuldade.

A experiência do usuário é basicamente o que uma pessoa sente ao utilizar um sistema, produto ou serviço. O usuário tem que se sentir confortável. No caso do ecommerce, por exemplo, se o usuário precisa pensar muito ao utilizar seu site, provavelmente ele tem sérios problemas de usabilidade. É importante que os usuários saibam o que fazer para ver os produtos, comprar, ir para o carrinho de compras, dentre outras ações.

Por isso, é fácil perceber que a experiência do usuário tem um papel importante para um e-commerce, já que este, basicamente, depende de interações virtuais bem-sucedidas com seus usuários para ter sucesso e vender mais.

Como melhorar a experiência do usuário no seu ecommerce?

  • Analise o comportamento dos clientes
    Quem irá utilizar seu site são seus clientes, portanto, preste atenção neles. Caso tenha muito abandono de carrinho, tente perceber os motivos que levam isso a acontecer. Também tenha um bom mecanismo de pesquisa no site, boa parte dos usuários tendem a ir atrás de algo por ali.

  • Tenha um site responsivo
    Um site que não é responsivo fará com que o cliente tenha dificuldades em interagir com o seu site, o que acaba gerando frustração e, consequentemente, abandono da sua página. Portanto, o seu site deve ser funcional, atrativo e adaptável a qualquer ferramenta que os usuários estejam usando para facilitar a sua visualização.

  • Simplifique o checkout / deixe-o seguro
    Deixe o checkout o mais simples e transparente possível, a poucos passos do cliente finalizar a compra. Além disso, invista na segurança para que seu e-commerce seja seguro. Caso contrário, isso irá afastar muitos clientes que vão ter receio de colocar dados financeiros ali.

  • Ofereça ajuda em tempo real
    Oferecer ajuda em tempo real ou disponibilizar canais de comunicação faz com que o usuário tenha maior confiança em interagir e comprar no seu e-commerce. Tenha cuidado também com o pós venda, é muito importante ter um bom atendimento e suporte, depois que o cliente adquirir. Sendo assim, você pode disponibilizar chats, telefone, e-mail, whatsapp, redes sociais, etc, para atendê-los de uma forma amigável, com eficiência e agilidade.

  • Garantia de execução das funcionalidades
    Tente garantir ao máximo de que tudo está dentro dos conformes. Imagina o usuário encontrar páginas fora do ar, um botão que não funciona ou qualquer outra funcionalidade que o dificulte de finalizar sua compra? Além de passar insegurança para quem está do outro lado, acaba prejudicando muito o desempenho do site. Por isso, você deve estar sempre atento às funcionalidades do seu e-commerce.

  • Simplifique o que puder
    A maioria dos usuários não gosta de perder tempo procurando algo no site, nem de ter que entrar em várias páginas/menus para encontrar o que deseja. Por isso, seu site precisa ser fácil de usar. As informações precisam ser organizadas de uma forma que sejam fáceis de serem encontradas, isso fará com que o usuário tenha uma boa navegação.

Wordpress - Criação de lojas virtuais com WooCommerce
Curso de Wordpress - Criação de lojas virtuais com WooCommerce
CONHEÇA O CURSO

Cuidado com…

  • Exigir o preenchimento de formulários muito longo e de campos que não irão agregar nada;
  • Apresentar preços diferentes no carrinho e na página do produto, ainda mais se os mesmos estiverem em promoção;
  • Qualquer tipo de erros no carregamento;
  • Ausência dos certificados de segurança (lembre-se que seus clientes irão colocar dados financeiros em seu site);
  • Meios de pagamento limitados. Diversifique os meios de pagamentos para que possam atender a todos;
  • Falta de informações ou conteúdo mal escrito;
  • Cupons de desconto que não funcionam.

Investir na experiência do usuário só nos traz vantagens, como a elevação da satisfação dos clientes, aumento das vendas, aumento da credibilidade da marca e até mesmo melhora o ranqueamento do seu e-commerce em sites de busca.


Acessibilidade e User Experience (UX)

Como é o dia a dia de um profissional de Usabilidade?

Usabilidade é um conceito importantíssimo no processo de digitalização de qualquer empresa ou negócio. Pensar em uma ótima experiência para o usuário – termo conhecido como User Experience (UX) em inglês – é a principal tarefa dos profissionais de usabilidade dentro de uma organização. Basicamente, ele é o responsável por analisar, medir e melhorar o nível de satisfação do usuário ao utilizar um site ou aplicativo. Quanto mais a solução atender as necessidades, mais satisfeito o usuário final ficará.

Em linhas gerais, um usuário prioriza sites e aplicações que lhe oferece uma experiência agradável, seja pela eficácia, rapidez ou interface. Considerando que estes fatores podem determinar o sucesso ou o fracasso de um sistema, é importante contar com profissionais que se encarreguem de analisar a experiência de navegação, que prevejam o comportamento do usuário, bem como ofereçam um sistema que o satisfaça e atenda aos seus objetivos. Em suma, é isso o que um profissional de usabilidade faz.

Atividades profissionais

O profissional de usabilidade, também conhecido como UX Designer, tende a ser mais procurado no setor da tecnologia, embora existam especialistas que realizam esta atividade elaborando produtos físicos. Na área de tecnologia, sua principal função é atuar como um elo entre desenvolvedor e o usuário final.

Este profissional é responsável por se colocar no lugar dos usuários e avaliar a necessidade de incluir, ajustar ou remover determinada funcionalidade. Caso o recurso seja incluído, ele também deverá visualizar como será o seu comportamento. Outras atividades comumente realizadas pelo UX Designer são:

  • Analisar e levantar requisitos;
  • Avaliar produtos com um olhar especializado;
  • Realizar estudos de campo com usuários atuais ou com potenciais usuários;
  • Convidar os stakeholders para realizar sessões de brainstorming e entrevistas;
  • Garantir que as melhores práticas de usabidade seram cumpridas;
  • Prever potenciais problemas ou dúvidas dos usuários;
  • Colaborar com profissionais de design, negócios, marketing e tecnologia;
  • Elaborar conjunto de protótipos para serem avaliados;
  • Ser a ponte entre o que a empresa quer e o que o usuário precisa;
  • Difinir escopos e prioridades do projeto;
  • Realizar testes de usabilidade constantemente;
  • Verificar qual funcionalidade deve ser otimizada;
  • Realizar pesquisas de satisfação e comentários ao suporte técnico;
  • Acompanhar o processo de implantação.

Atualmente as organizações estão cientes da importância de colocar o cliente no centro de sua estratégia e, por isso, precisam ter profissionais de usabilidade capazes de alinhar os objetivos de negócio com as necessidades de seus clientes.

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

Características do profissional

Pessoas que desejam se tornar um UX Desing precisam ter uma mente calma e aberta para entender o usuário, bem como ter empatia e entender que sempre está projetando algo para os outros. Além disso, este profissional deve ser um especialista em analisar e sintetizar estruturas de informação.

O profissional de usabilidade também costuma ser uma pessoa interessada em descobrir problemas e curiosa para encontrar uma maneira de como resolvê-los. Ter um perfil analítico e boas habilidades de comunicação também são características essenciais.

Outras características desta profissão são:

  • Atenção aos detalhes, para antecipar possíveis erros e analisar qual será a solução para eles;
  • Alta capacidade de comunicação, já que a maioria dos textos que acompanham os produtos tecnológicos geralmente são escritos em uma linguagem muito técnica e confusa;
  • Esta capacidade de comunicação também será um recurso importante na hora de descrever tanto os problemas identificados, quanto as soluções encontradas;
  • Ter noções de design, para fazer com que as ideias propostas sejam corretamente interpretadas pelo resto da equipe de trabalho;
  • Inquietação e muita curiosidade em saber como funcionam as coisas.

Considerações Finais

O UX Desing é um profissional que verifica se determinado produto deixará uma boa sensação nas pessoas, em relação à ergonomia, facilidade de uso, eficiência, entre outros aspectos. Portanto, esta é uma profissão multidisciplinar, de grande relevância para as organizações e de alto nível estratégico. Basicamente, ele atua utilizando habilidades de três áreas: Psicologia (para entender as pessoas), Design (para definir a interface, os elementos do produto e o seu impacto nas pessoas) e Tecnologia (para estruturar a parte técnica).


Acessibilidade e User Experience (UX)

Double Diamond e sua utilização nos processos de UX

Criado pelo British Design Council, o Double Diamond é um método do Design Thinking que está sendo bastante utilizado em equipes de UX. Este processo auxilia basicamente em encontrar a melhor solução para um problema ou ainda na criação de produtos, serviços e processos.

Esse processo é representado por dois diamantes: um focado em identificar qual é o problema e outro voltado para a solução. Isso para que possamos garantir uma análise mais profunda e com um número maior de possibilidades, ou seja, a fim de se chegar em uma solução mais assertiva.

Neste processo utilizamos dois tipos de pensamentos: divergente e convergente, onde divergente será sempre na abertura do diamante e o convergente no fechamento do diamante. No pensamento divergente são criadas muitas ideias, já que precisamos expandir nossos horizontes, considerando tudo o que for possível, para que no pensamento convergente, possamos analisar as informações e reduzir as ideias para chegar na melhor opção.

Design  Thinking
Curso de Design Thinking
CONHEÇA O CURSO

As 4 etapas do Double Diamond

O double diamond é composto por 4 etapas: imersão, definição, ideação e prototipação. Mas você também pode encontrar modelos com as etapas: descoberta, definição, desenvolvimento e entrega. Ainda que com outro nome, as fases tem o mesmo propósito.

Nas etapas de imersão e definição temos o entendimento do problema, o que podemos fazer. Nas fases de ideação e prototipação vemos quais alternativas temos de solução e como vamos desenvolver.

Imersão

Temos o hábito de ao pensar em um problema já querer achar uma solução, de preferência o mais rápido possível. Porém essa solução pode não ser a melhor, ou ainda, pode ser uma solução baseada em achismos. Por conta disso, temos como primeiro passo a imersão. Devemos imergir o máximo em uma situação, para descobrir os problemas, encontrar pontos de dor, para que possamos ter dados que possam ser analisados antes de tomar qualquer decisão.

Precisamos entender o problema antes de pensar na solução.

Algumas ferramentas que podem ser utilizadas nessa fase: entrevistas, pesquisas quantitativas e qualitativas, benchmarking, análise de dados, matriz CSD, análise Heurística

Definição

Depois da etapa de imersão, de ter encontrado pontos de dor e quais problemas podemos explorar, precisamos organizar todas as informações coletadas nessa etapa anterior e definir o problema que será resolvido. Sim, é “o problema”, e precisamos escolher um bom problema.

Como provavelmente não conseguiremos resolver todos os problemas que apareceram, precisamos saber priorizar. Delimite esse problema e deixe aberto para as inúmeras soluções que possam sair dali. Precisamos entregar algo que seja tecnicamente possível de ser resolvido e que seja desejável pelas pessoas.

Algumas ferramentas que podem ser utilizadas nessa etapa: criação de personas, mapa de empatia, etc.

Ideação

Aqui chegamos no segundo diamante do Double Diamond. Agora sim chegou a hora de enfim pensar nas soluções para o problema definido. Mas, primeiramente, precisamos ter o nosso desafio em questão muito bem definido.

Caso ainda não esteja muito certo, por exemplo se está faltando dados, pesquisas, se ainda não sabe ao certo qual problema deve ser priorizado, é importante voltar às etapas anteriores – isso não é um retrocesso. Não se preocupe, pois como não é um processo linear, você pode voltar no início caso necessário.

Aqui todos da equipe podem falar suas ideias, pois uma pode complementar a outra, cada um pode ter uma visão diferente, podemos até pegar partes de cada ideia e transformar em uma só, sempre em busca de uma solução que resolva o problema das pessoas em questão. No fim precisamos juntos ver a ideia mais promissora.

Algumas ferramentas e técnicas: mapa mental, brainstorming, crazy 8’s, Benchmarking, 4x4x4, MoSCoW, Userflow, Sitemap.

Prototipação

Essa etapa pode ser a mais esperada pois é quando vemos algo mais “concreto”. Nesta etapa precisamos tangibilizar a ideia em um protótipo, podendo assim validar com pessoas usuárias e, claro, receber feedbacks. O protótipo pode ser no papel, porém a utilização de algum software fica mais próximo do mundo real.

Nesta etapa também fazemos os testes, que são muito importantes. Temos o teste de conceito, que é ideal para validar a ideia, vendo o que as pessoas pensam sobre a solução e o teste de usabilidade, onde observamos como a pessoa utiliza o protótipo, o que nos ajuda a identificar o fluxo que ela está seguindo, suas dificuldades, etc, surgindo assim melhorias.

Algumas ferramentas: protótipo no papel, protótipo navegável wireframe, Figma, etc.

Prototipação Rápida
Curso de Prototipação Rápida
CONHEÇA O CURSO

O Double Diamond pode ser utilizado nos mais diversos contextos, ainda mais em processos de descobrimentos longos, que você não conhece o resultado final. Quando uma equipe de UX utiliza o Double Diamond, eles conseguem avaliar e estudar cada possibilidade, a fim de propor a melhor solução que atenda às necessidades dos usuários.


Acessibilidade e User Experience (UX)

UX e UI: O que é e quais as diferenças?

Quando estamos desenvolvendo algum software ou um site por exemplo, devemos colocar o cliente no centro das atenções. As pessoas querem praticidade quanto utilizam um sistema/produto, por isso devemos pensar muito na experiência do usuário, para que ela seja a melhor possível. Para isso, devemos nos colocar no lugar do usuário e verificar pontos que devem ser levados em conta na hora de criar a interface (meio pelo qual o usuário interage pelo sistema). Sendo assim, vamos abordar neste artigo dois pontos muito importantes: UX e UI. Esses termos ainda são bastante confundidos por iniciantes por serem semelhantes, mas eles são duas coisas distintas. Apesar de estarem unidas e trabalharem juntas, elas têm suas diferenças.

UX/UI - Introdução
Curso de UX/UI - Introdução
CONHEÇA O CURSO

User eXperience (UX)

UX (User eXperience) ou experiência do usuário, visa proporcionar ao usuário sempre a melhor experiência. Tem a finalidade de melhorar todos os aspectos da interação humana, não visando apenas em sistemas, mas também em produtos e serviços. UX está relacionado ao uso do serviço, a interação do usuário.

Pessoa apertando uma tecla do teclado

Existem diversas vantagens de aplicar as regras de UX, além de deixar a experiência do usuário tornando-a mais amigável, você gera satisfação, fazendo com que essas experiências encantem os clientes, o que acaba os fidelizando. Isso também resulta em uma maior conversão de vendas, indicações de forma orgânica e ainda aumenta o valor agregado do produto.

Vale ressaltar novamente que UX não é aplicado apenas para softwares e apps e sim para qualquer coisa, como produtos e serviços.

User Interface (UI)

UI (User Interface) ou interface do usuário, é o ponto de ligação entre o usuário e o sistema/produto/serviço. Através dele fazemos a projeção e criação de interfaces, juntamente com o design. Toda essa interação é feita através de uma interface. Nós pensamos como uma interface uma tela do computador, mas ela não precisa ser necessariamente uma tela: pode ser um microondas, um controle remoto, etc. Em geral, é o que faz a ponte entre uma pessoa e o objetivo que ela tem.

Uma pessoa manuseando um tablet

Uma boa interface é simples e fácil de utilizar. O usuário deve conseguir realizar o que ele deseja de um modo simples, e claro, com uma boa experiência. Um dos pontos para se chegar a essa boa experiência, é justamente o UX. Por isso, dizemos que UX e UI dependem uma da outra e trabalham juntas. Não tem como criar uma interface sem pensar na experiência do usuário, até mesmo porque você irá lidar com pessoas, não robôs.

Para facilitar, podemos pensar que o UI está mais ligado a parte física e prática (interface), guiando o que o usuário deve fazer enquanto usa o site. Já o UX lida mais com as emoções, como o usuário se sentirá ao usar a interface, tendo uma navegação agradável.

A pessoa que trabalha com UX e UI faz a prototipação da interface utilizando softwares, realiza pesquisas e pensa em vários aspectos no que diz respeito a experiência da interface, além de identificar e criar personas. Temos um post específico de personas em UX aqui no blog.

Uma empresa que pensa no UX e UI está pensando em seus clientes/usuários e isso é muito importante e deve ser levado em conta. Imagine que o usuário visite sua loja virtual e ao visualizar um produto não consiga achar as informações que gostaria, ou que ao clicar em comprar ele não conseguiu ver se o produto foi realmente para o carrinho? Isso é sinal de um UI mal feito, onde muitas vezes faz com que o usuário desista de comprar no seu site e vá para um concorrente. Por isso que muitas vezes a UX e UI são confundidas, porque elas têm uma ligação muito direta: se a navegação é ruim, a experiência também acaba sendo.

Confira nossos artigos sobre user experience.

Desenvolvedor Front-end
Formação: Desenvolvedor Front-end
HTML, CSS e JavaScript são a base de toda a web. Tudo o que você está vendo aqui agora depende deste tripé. Nesta formação vamos iniciar aprendendo lógica. Em seguida veremos todos os aspectos do HTML, CSS e JavaScript. Por fim, aprenderemos Sass, Google Analytics, empacotar nossas aplicações com Webpack, criação de aplicações Desktop com Electron, UX/UI e uma introdução aos frameworks mais utilizados no mercado: Angular, React, Vue e Ember.
CONHEÇA A FORMAÇÃO