Desenho de telas (brainstorm)

Desenho de telas (brainstorm)

  25 de fevereiro de 2019    henrique

---

Brainstorm é um termo em inglês para tempestade cerebral, traduzindo para o mundo dos negócios seria algo como tempestade de ideias.

    Essa técnica é muito utilizada nas empresas para resolução de problemas (geralmente os mais complicados), onde a equipe se reune para discutir a resolução de um problema. Ele deve seguir alguns princípios:

     Sempre se lembre de que quanto mais ideias melhor, por mais que de primeiro momento pareçam absurdas, nunca as descarte. Tente ser flexível, pois algumas vezes fazer diferente do habitual é necessário, faça com que os envolvidos interajam uns com os outros, quanto mais melhor, pois surgem mais discussões, mais ideias e provavelmente uma delas será a escolhida como melhor alternativa para resolver o problema.

    Na UX é na maioria das vezes interessante desenhar as telas e após concluídos os desenhos, que você as refaça, pois nesse momento de se refazer as telas é que surgem as melhorias das mesmas, onde se começa a pensar nas funcionalidades menos óbvias da aplicação.

    Feito isso comece a imaginar como o usuário irá utilizar o sistema, e ir desenhando os fluxos da aplicação, utilizar o modelo feito acima e ir ilustrando (criando marcações) onde o usuário vai clicando ou tocando, cada interação que se imagina que ele terá, isso ajuda a pensar em reduzir o fluxo, facilitar a utilização do sistema pelo usuário.

Ler

UX: Monitoramento e Heat maps (Mapa de calor)

UX: Monitoramento e Heat maps (Mapa de calor)

  6 de novembro de 2018    henrique

---

Monitoramento

    Monitoramento é parte essencial na manutenção de sites e aplicações tanto para medir os resultados quanto a performance, também é importante para se saber onde e quando eles devem sofrer alterações de design ou processo.

    Em resumo o monitoramento serve para entender se o usuário está satisfeito ou não com o produto e no que o mesmo pode ser melhorado. E para isso definimos algumas métricas, os famosos KPIs (Key Performance Indicator), e 3 tipos de métricas são interessantes no mundo do UX.

1. Métricas descritivas, para ajudar a contar o que aconteceu;
2. Métricas de percepção, para concentrar em como os clientes percebem o produto;
3. Métricas de resultados, para ajudar a descrever o que os clientes fizeram ou esperam fazer com base em suas percepções.

E também 3 métricas importantes para qualquer tipo de produto:

1. Usabilidade: as métricas relacionadas a usabilidade devem focar no quão fácil é realizar uma tarefa, devem permitir identificar a taxa de sucesso e facilidade de uso. Também pode incluir métricas mais específicas como reconhecimento de ícones, navegação em menus, momentos de confusão, hesitação, etc.
2. Engajamento: é útil para entender o quanto as pessoas interagem com o produto, a quantidade de atenção dada ao produto, quanto tempo as pessoas gastam em um fluxo de trabalho e se essas pessoas se sentem bem ao utilizar o produto.
3. Conversão: as métricas dessa categoria ajudam a identificar tendências e, principalmente, a projetar novas soluções para que o produto seja mais assertivo as necessidades dos seus usuários.

    Existem várias ferramentas que auxiliam o monitoramento algumas das principais são as web analytics e os heat maps (mapas de calor)

Heat maps (Mapa de calor)

    Heatmaps são mapas que indicam onde o usuário está clicando, até onde está baixando a página, ou seja, de uma forma geral mostra qual o comportamento do usuário perante a aplicação ou página.

    Os heat maps online fornecem indicadores que vão além de pageviews e relatórios básicos de navegação, eles mostram com exatidão quais os links e outros elementos onde os usuários clicam (e por consequência onde não clicam), além de demonstrar até que ponto os visitantes rolam uma página e que elementos são ignorados ao longo dessa rolagem.

    Em geral para se passar a utilizar essas ferramentas você deverá colar um código fornecido pela ferramenta de heat map em suas páginas

    Após isso é só esperar que seus usuários visualizem e interajam com seu site para começar a gerar os dados a serem analisados através de relatórios.

Para se analisar esses relatórios você deverá ter em mente o seguinte padrão de cores sendo quanto mais à esquerda mais clicado e quanto mais à direita menos clicado.

Os principais relatórios de heat map são:

     1 - Click Maps (Mapas de cliques) - Mostram os lugares ou elementos mais e menos clicados em uma página de acordo com as cores.

    2 - Scrolling Maps (Mapas de rolagem) - Mostram até onde os usuários costumam rolar a página.

Ferramentas de monitoramento 

    Aqui estão algumas ferramentas de monitoramento bastante conhecidas.

Hotjar - https://www.hotjar.com

Fullstory - https://www.fullstory.com

Inspectlet - https://www.inspectlet.com

Ler

UX: Microcopy (Microtexto)

UX: Microcopy (Microtexto)

  10 de maio de 2018    henrique

---

    Pode ser usado para links, botões, títulos, ações, enfim para quase tudo.

    É muito importante ter em mente que os textos devem ser simples e diretos, mas sem ser invasivo ou autoritário, eles devem literalmente conversar com o usuário claramente e fazer com que ele fique confortável.

     Usemos o exemplo do trivago, a sua página inicial é esta, o logo, um texto simples explicando claramente o que o site faz e embaixo um campo para digitar o texto da pesquisa "Ex.: Foz do Iguaçu". Mas se pensarmos bem Foz do Iguaçu é uma cidade e este campo de busca não serve apenas para cidades, nele posso digitar estados por exemplo que também é realizada a pesquisa, por tanto, pode ser melhorado para explicar melhor ao usuário o que acontece alí e não limitar a funcionalidade. Se tivéssemos, por exemplo, "Onde deseja encontrar hotéis?" teríamos mais possibilidades para o usuário digitar, vale apontar que em alguns casos perguntas são muito bem vindas.

Ler

UX Research (Pesquisa em UX)

UX Research (Pesquisa em UX)

  30 de abril de 2018    henrique

---

    Para começar com research em UX, deve-se buscar referências de serviços ou aplicativos com o mesmo segmento ou ao menos parecido com o que se deseja fazer. Pois nada melhor do que se ter ao menos uma ideia do que estamos fazendo antes mesmo de começar e research é isso, pesquisa pré início da implementação, é pesquisar o que se tem no mercado, de onde se pode buscar inspirações.

     O problema é que nem sempre temos essa opção, pois e quando estamos inaugurando um segmento novo de mercado ou desenvolvendo um serviço inovador que não se tem nada igual? Bom neste caso é muito importante se pensar em padrões já muito bem definidos para somar com sua ideia inovadora, como por exemplo ter o design baseado em material do Google onde o menu fica na parte de baixo e já temos muitos usuários acostumados à isso, ou então termos os ícones muito claros e também já conceituados como o menu em formato hambúrguer "aqueles três riscos horizontais", tudo isso com o intuito de fazer com que o usuário não se sinta muito perdido na sua aplicação.

    Alinhando a esta pesquisa que vamos fazer irei passar os conceitos de concorrentes diretos e indiretos.

    Concorrentes diretos são aqueles que fazem o mesmo tipo de produto ou serviço que o seu, como por exemplo a Acer e a Compaq, que são duas fabricantes de notebooks, cada uma com seu estilo e notebook, mas as duas produzem no final das contas notebooks, por tanto, são concorrentes diretas.

    Concorrentes indiretos, são concorrentes que vendem produtos ou serviços similares, mas vendem de forma diferente, como por exemplo a netshoes e a C&A, as duas vendem calçados, mas a netshoes foca em vendas por internet e a C&A por lojas físicas.

Entrevistas

Em entrevistas é importante ter alguns pontos bem definidos antes de começar

• Entenda o que você quer descobrir;
• Não faça perguntas que influenciem respostas, deixe as perguntas mais abertas;
• Faça a mesma pergunta de formas diferentes, para caso o entrevistado não entender de primeira;
• Comece com perguntas simples para quebrar um pouco o gelo e fazer com que o entrevistado fique mais à vontade;

Sites de imagens e vetores

https://www.shutterstock.com/pt

https://br.freepik.com

https://pttrns.com

https://sketchrepo.com

Aplicativos para pesquisa:

https://pt.surveymonkey.com

https://www.google.com/intl/pt_br/forms/about/

https://binds.co

https://www.survio.com/br/

Ler

UX: Thumb zone

UX: Thumb zone

  16 de abril de 2018    henrique

---

    Thumb zone diz respeito aos lugares mais confortáveis para o usuário interagir na tela, pensando em smartphones, daí o nome Thumb (dedo, polegar) zone (zona).

    Pesquisas indicam que 50% dos usuários utilizam smartphones apenas com uma mão fazendo uso do polegar para tocar a tela, isso faz com que o tamanho da tela influencie diretamente na experiência de usuário, pois quanto maior a tela mais espaço onde o usuário não consegue alcançar apenas com o polegar.

    Isso faz com que tenhamos que levar em consideração onde ficará algum elemento, se ele é mais utilizado, deverá ficar na área de mais fácil acesso (easy), se for um pouco menos utilizado deverá ficar na área de razoável fácil acesso (ok), e os pouco utilizados ou apenas para visualização na área de mais difícil acesso (hard).

    Seguindo este conceito o Google lançou a Material Design que é uma interface visual da qual o botão de ação fica na parte inferior direita, para facilitar o acesso aos usuários.

Ler

UX: Lei de Fitts

UX: Lei de Fitts

  12 de abril de 2018    henrique

---

    Lei de Fitts, levar em consideração a rapidez e facilidade com que o usuário vai ter para realizar uma ação, como por exemplo um botão menor é mais demorado para ser clicado do que um botão maior mesmo que os dois estejam na mesma distância, isso pelo fato de o usuário ter de acertar o clique em uma área menor, que é mais difícil.

     Isso também se aplica a submenus onde quanto mais longe a opção está do clique originário mais tempo o usuário vai demorar para clicar nele e por isso geralmente as opções mais utilizadas ficam mais próximas e as menos utilizadas vem depois.

     Como mostrado na imagem acima os itens que estão dentro da marcação em vermelho são mais rapidamente acessados do que os que estão em azul pois estão mais próximo do clique original que foi no topo em "Conversa".

    Um outro exemplo é o caso dos checkbox, que atualmente muitos perceberam que fica mais fácil para o usuário se a área de clique (ou toque) for não apenas ao quadrado, mas também o texto do checkbox.

Ler

UX: Microinterações, importância e aplicações

UX: Microinterações, importância e aplicações

  9 de abril de 2018    henrique

---

    Microinterações são pequenas ações que mostram para o usuário o que aconteceu devido a uma determinada ação. Serve para chamar a atenção do usuário para um ponto em específico. Alguns exemplos de microinterações são:

• Quando colocamos o celular na opção vibrar o celular emite uma vibração curta para indicar que a opção foi ativada com sucesso.
• Quando no smartphone estamos em um aplicativo que atualiza ao puxarmos a tela para baixo e um ícone de animação indicando que está carregando.
• Ou outro exemplo, são e-commerces que mostram no ícone de carrinho de compras quantos itens já adicionamos mesmo sem entrar na página do carrinho de compras propriamente dito, isso faz com que o usuário tenha certeza que aquele item foi adicionado ao carrinho ou então que ele confira que já adicionou os três itens procurados.

    Conforme vimos nos exemplos acima, uma microinteração pode ser uma animação, uma informação a mais exibida ao usuário ou mesmo uma ação de hardware (caso do smartphone vibrando).
    Uma microinteração necessita de um gatilho, uma ação, um feedback e um loop / mode.

• Gatilho: Quando deverá ser iniciada.
• Ação: O que vai acontecer.
• Feedback: Como saber que a microinteração terminou e qual será a forma de mostrar ao usuário o que aconteceu ou se a operação foi concluída.
• Loop:  Quando deverá ser repetida.Mode: Ter ação ou feedback diferente para uma diferença de gatilho.

    Portanto quando estiver desenhando/desenvolvendo seu aplicativo ou site pense em como adicionar microinterações para trazer mais conforto ao usuário e deixá-lo sempre informado do que está acontecendo. Mas também lembre-se de que tudo em excesso faz mal, então adicionar excessivas microinterações sejam animadas ou não, pode tornar a experiência do usuário mais chata, com um ar mais pesado.

Ler

UX: Lei de Hick

UX: Lei de Hick

  5 de abril de 2018    henrique

---

    A Lei de Hick ensina que quanto mais opções o usuário tem, mais tempo ele demorará para decidir qual escolher, às vezes dar menos opções para o usuário pode ser melhor.
    A intenção aqui não é mostrar o cálculo ou dizer que para fazer uma interface de usuário você precisará fazê-lo sempre, caso queira poderá ver no wikipédia, mas conscientizar que muitas vezes dar muitas opções de escolha ao usuário pode fazer com que o mesmo demore a escolher uma e com isso perca o interesse em escolher ou utilizar seu aplicativo, pensemos em um site de compras onde a navegação é complicada, pois no menu o usuário tem de escolher entre muitas subdivisões quando na verdade ele só quer ver os notebooks mais vendidos do momento e escolher um, ao demorar à chegar na busca desejada e decidir entre tantas opções o mesmo perde o interesse e compra em outro site, pronto, foi perdida uma venda quase certa.

Ler

UX: Por onde começar (Leis básicas)

UX: Por onde começar (Leis básicas)

  3 de abril de 2018    henrique

---

     Quando pensamos em UX (user experience, ou experiência de usuário), devemos ter alguns conceitos básicos bem definidos em mente.
    Vou mostrar alguns para sempre que possível incluir os itens listados abaixo no trabalho de UX de modo geral.
     Sempre mostrar um feedback para o cliente para ele saber que tal ação foi ou não realizada (mensagens de sucesso, erro ou aviso), também na medida do possível ter e mostrar uma forma fácil do usuário cancelar ou reverter aquela ação. Ou seja, sempre deixar o usuário no controle da aplicação.
    Manter um padrão de ações (confirmar seguir um padrão, sempre ter opção de cancelar operação no mesmo lugar) e ícones (controles de um modo em geral, textbox, botão, ícones), e caso possível tentar reaproveitar a experiência do usuário para dentro da sua aplicação por exemplo um botão de editar ser um lápis (padrão para muitos aplicativos) ou então o menu estar na esquerda ou acima, etc.
    Ter prevenção de erros, como por exemplo ter auto complete ou auto correct, isso faz com que o usuário utilize mais facilmente sua aplicação sem ter de ir e voltar nas ações.
    Contar com a memória limitada do usuário, ou seja, exibir o que o usuário está fazendo e o que usuário já fez, como por exemplo nos sites que mostram as páginas acessadas até chegar aonde se está (home > produtos > eletrdomésticos), este conceito se chama breadcrumb.
    Ter documentação online ou no próprio aplicativo para caso o usuário tenha dúvidas de alguma funcionalidade, esta documentação deve ser o mais simples possível, uma boa opção é ter em esquemas de tutoriais e perguntas mais comuns juntos.
    Sempre pensar que menos é mais, ter uma interface simples apenas com as opções necessárias naquele momento.

Ler

UX: Conhecendo MVP e MLP

UX: Conhecendo MVP e MLP

  8 de março de 2018    henrique

---

     A sigla MVP significa Minimum Viable Product ou Produto Mínimo Viável, o que nada mais é do que um conjunto de funcionalidades que fazem o projeto ser um produto. Consiste no núcleo do produto, a idéia central ou inicial do mesmo.

     Ele é bastante útil para sabermos se o projeto terá aceitação ou se está realmente no caminho certo antes mesmo de se ter um produto completo, isso faz com que se economize tempo e dinheiro.
     Vamos a um exemplo:
     Estamos com a ideia de criar um aplicativo, ele servirá para pessoas chamarem um técnico em informática para resolver problemas em seus computadores ou celulares. Mas ainda não sabemos se isso será realmente rentável e se terá uma boa procura, pois precisamos de técnicos cadastrados, usuários que confiem em um app, afinal o usuário e o técnico irão se encontrar, precisamos também saber como será feita a monetização se será cobrada uma taxa dos técnicos ou se terá propagandas etc.
     Portanto, podemos criar um aplicativo simples que terá o cadastro de técnicos, de usuários e um campo para busca de técnicos com endereço próximo.
     E para medir a aceitação definimos caso o aplicativo tenha um número X de downloads por semana, o mesmo será feito com as próximas funcionalidades (feedback sobre o técnico, rankeamento de técnicos e clientes, busca por mapa, chat e etc.)
     Agora imagine se só testamos o conceito do aplicativo depois de feitas todas essas funcionalidades que com certeza demandam bastante tempo investido.

     Já o MLP significa Minimum Loveable Product ou, em português, Produto Mínimo Adorável (Encantador), que em resumo é o MVP, mas com alguns incrementos. O MLP consiste em tentar agregar algo também simples, também em um estado inicial, mas mais atrativo para o usuário ou cliente.
     Voltando ao nosso exemplo, além de termos os cadastros e a busca, já pensaríamos por exemplo em ter um bom layout e um bom visual, mesmo que ainda não sejam os finais, os mais trabalhados, mas que sejam bastante aceitáveis para os usuários e os técnicos, é basicamente fazer com que os usuários tenham a sensação de que o aplicativo já está mais próximo do final, mesmo com poucas funcionalidades.

     Segue uma imagem com um comparativo muito interessante entre os dois.

Ler