mai
14
2021
por Isabela Sanchez e Raphael Calais
0 comentários

Acessibilidade no Design de Interfaces Episódio 3: o texto

Acessibilidade no Design de Interfaces Episódio 3: o texto
por Isabela Sanchez e Raphael Calais
0 comentários

Quando se fala em acessibilidade no design de interfaces, o texto obviamente é essencial! Mais do que pensar no contraste das cores e nas formas utilizadas, o tipo e tamanho de fonte também devem fazer parte de sua lista para ficar atento.

Recapitulando…

Nos últimos 2 textos do blog falamos sobre como as formas e cores que compõem sua criação podem ajudar ou atrapalhar a visualização por pessoas diferentes, nos diversos tipos de dispositivos.

Se você ainda não conferiu ou não absorveu todo conteúdo, corre lá antes de dar início ao último episódio da nossa série sobre Acessibilidade no Design de Interfaces com o Episódio 3: o texto.

Um fato importante a destacar é que, de acordo com pesquisa feita pelo Movimento Web para Todos e pela plataforma BigDataCorp, apenas 0,74% do conteúdo dos sites brasileiros são acessíveis, um número extremamente baixo e que precisamos mudar urgentemente! Continue a leitura e vamos mudar essa realidade juntos.

E como é que o texto entra nessa história?

Seu conteúdo é o que o seu cliente quer ver mas, de que adianta investir na produção, se as pessoas têm dificuldade na leitura? Letras pequenas são difíceis de serem lidas por qualquer pessoa com visão reduzida, como idosos ou míopes, por exemplo. O tipo de fonte também pode atrapalhar a leitura, causando confusão ao leitor ou impedindo sua compreensão, principalmente para quem tem dislexia, por exemplo.

Boas práticas no uso do texto

Tabela de Snellen. Uma tabela que mostra as letras para fazer testes de visão.
Tabela de Snellen

Em primeiro lugar, lembre-se do que já falamos sobre cor e forma, tudo aquilo vai ser aplicado aqui também! Agora, confira nossas dicas e continue fazendo testes com diversas pessoas.

  1. Tamanho da fonte: segundo a W3C, a principal organização de padronização da World Wide Web, devemos trabalhar com fontes em 3 níveis, A, AA e AAA, mas o mínimo recomendado é o tamanho AA.
  2. Use a fonte OpenDyslexic: faça o download gratuito no site https://opendyslexic.org/ e crie uma versão amigável para quem tem dislexia.
  3. Não esqueça do contraste: os textos no nível AA devem ter no mínimo 4.5:1 de taxa de contraste de cor e os AAA 7:1. Isso significa que a cor dos textos AA devem ter no mínimo 4,5 x mais luminosidade que o fundo e os textos AAA devem ser 7x mais luminosos.
    Importante: este cálculo é feito incluindo pessoas com visão moderada e que não precisam de assistente de contraste e também de pessoas que têm daltonismo. Pessoas que têm perda de visão acima de 20/80 (segundo a Tabela de Snellen) precisam de tecnologia assistiva para aumentar o contraste e ampliar o texto.
  4. Analise: o contraste vai variar de acordo com o tipo de família que estiver sendo usada, fontes Light ou Extra Light podem apresentar mais problemas.
  5. Destaque os links: pelo menos duas características gráficas que o diferenciem dos outros elementos.
  6. Foco no zoom: confira como seu site e os textos ficam com 200% de zoom.

Então, só devo pensar nas cores, formas e textos?

Não! Quando falamos de acessibilidade devemos pensar em todas pessoas e em responsividade do layout (fator indispensável em qualquer aplicação ou site).

  1. Função Alt Text: criar um texto alternativo nas imagens para adicionar sua descrição auxilia quem tem deficiência visual e utiliza ferramentas de leitura (de bônus, seu rankeamento no Google ainda aumenta).
  2. Audiodescrição: também ajudam a descrever as imagens.
  3. LIBRAS: disponibilizar uma tradução na Língua Brasileira de Sinais é importante e existem avatares capazes de fazer essa função nos sites, como por exemplo o VLibras, disponível em https://www.gov.br/governodigital/pt-br/vlibras/.
  4. Legenda: colocar a legenda nos vídeo auxiliam na compreensão do que é dito.

A acessibilidade não atrapalha o design!

Agora que você já viu várias dicas e está pronto para dar início às suas criações, tenha em mente que a acessibilidade não é inimiga da beleza (não vamos entrar nessa discussão, apenas tenha em mente que é possível seguir princípios estéticos e promover acessibilidade ao mesmo tempo).

Colocar estética acima da acessibilidade é uma maneira de criar barreiras sociais e excluir aqueles que têm deficiência, ao ponto que, interfaces minimalistas e acessíveis são estéticas e ainda abraçam a todos (além de ser uma tendência atual).

Ficou com alguma dúvida sobre acessibilidade no design de interfaces ou precisa de ajuda em seu projeto? Conte com a gente! Pensamos em tudo para facilitar sua criação!

https://performait.com/servicos/lean

Compartilhe
mai
7
2021
por Isabela Sanchez e Raphael Calais
0 comentários

Acessibilidade no Design de Interfaces – Episódio 2: as cores

Acessibilidade no Design de Interfaces – Episódio 2: as cores
por Isabela Sanchez e Raphael Calais
0 comentários

No segundo episódio da nossa série sobre Acessibilidade no Design de Interfaces, abordaremos as cores. Muito além da estética, elas desempenham um papel essencial no desenvolvimento de sites e aplicações e merecem nossa atenção.

Mas, o que é Acessibilidade no Design mesmo?

Antes de continuar com o assunto, vamos relembrar o que Acessibilidade significa e o porquê pensar nesse assunto é tão importante!

Quando vamos a um estabelecimento é comum vermos rampas ou elevadores que possibilitam o acesso de cadeirantes, certo? Isso é acessibilidade: desenvolver um projeto que inclui pessoas portadoras de deficiências ou com mobilidade reduzida.

No mundo digital o mesmo princípio é válido! Um site ou aplicação precisa ir além da estética para contemplar usuários com dislexia, idosos ou qualquer pessoa com dificuldade visual.

E onde as cores entram na Acessibilidade no Design de Interfaces?

Nem todos nós vemos as cores da mesma forma. Isso acontece por conta dos dispositivos que usamos e também devido a problemas como daltonismo, catarata ou baixa visão.

Vamos analisar o diagrama abaixo e pegar o daltonismo como exemplo.

Mapa de cores para daltônicos, aqui falamos da visão normal em comparação da Protanopia, deuteranopia, tritanopia.

Você consegue notar o quanto as cores “universais”, verde e vermelho, são difíceis de serem reconhecidas? Logo elas, que estão presentes em tantos formulários espalhados por aí!
Outro caso comum e que dificulta a leitura é o uso de um contraste baixo entre uma cor e outra, como por exemplo um fundo cinza com o texto em branco, que não só dificulta a leitura de quem tem baixa visão, como para quem usa monitores com pouco brilho e contraste ou está em um ambiente com iluminação intensa.

Boas práticas para cores mais acessíveis no design

Você não consegue olhar com os olhos de todos e pensar na escolha das cores parece uma tarefa impossível? Calma, resolver o problema das cores na acessibilidade é mais fácil do que parece, basta seguir alguns princípios básicos e testar seus designs em diferentes telas.

1- Não confie apenas na cor!
Sim, a cor é importante, mas não deve ser a única a guiar o usuário. Utilize também ícones, texto e texturas para tornar as informações mais claras.

2- O contraste é seu amigo!
Garanta sempre um bom contraste entre as cores e os outros elementos.

3- Às vezes, mais é mais!
Não tenha medo de usar mais brilho, mais saturação e mais matiz! Aumentar um pouco cada um deles pode ser a diferença na hora de proporcionar a experiência visual que você deseja para todos.

Como saber se estou no caminho certo?

Depois que escolher as cores desejadas, teste! Veja seu design em diferentes telas e peça para que outras pessoas dêem sua opinião (garanta que sejam de diferentes idades e que tenham dispositivos diferentes).

Além disso, conte com ferramentas gratuitas que mostram se suas cores e fontes estão legais! Confira alguns exemplos:

  1. Colour Contrast Analyser
  2. Contrast Ratio3
  3. Color Safe4
  4. Contrast Checker5
  5. CoblindorIamcal Color Vision

Você está quase lá!

Agora que você já refletiu a respeito das formas e das cores e estudou como usá-los a favor de todos, você está a um passo de criar um design que vai além da estética e da responsividade! No próximo episódio vamos finalizar falando sobre o texto e a tarefa de levar a acessibilidade às suas criações ficará ainda mais fácil!

Ah! Se você ficou com dúvidas, pode falar que nós ajudamos!

https://performait.com/#sobre

Compartilhe
abr
30
2021
por Raphael Calais e Isabela Sanchez
0 comentários

Acessibilidade no Design de Interfaces – Episódio 1: As Formas

Acessibilidade no Design de Interfaces – Episódio 1: As Formas
por Raphael Calais e Isabela Sanchez
0 comentários

A Acessibilidade no Design de interfaces é um assunto bem amplo e, para facilitar o entendimento, resolvemos dividir o assunto por elementos: as formas, as cores e os textos.

Esse é o primeiro episódio, dedicado as formas e elementos que, dependendo de suas proporções, podem causar frustração e mal uso da plataforma por usuários com deficiências visuais ou mecânicas e até mesmo pessoas sem deficiências, mas com aparelhos eletrônicos limitados. 

O conceito das formas

As formas no Design de Interface definem como as informações no site ou aplicativo serão demonstradas, por exemplo: na imagem abaixo conseguimos identificar claramente onde está o botão simplesmente pela sua forma.

Não importa a língua que o site seja escrito, é possível identificar onde devemos clicar e sabemos que, ao fazer isso, seremos direcionados para algum lugar, assim como, conseguimos nos localizar pelos ícones e encontramos facilmente o campo de busca e nem precisamos entender japonês, o idioma do site no exemplo abaixo. 

Home do site rakuten que mostrar que mesmo estando escrita em japonês, sabemos onde clicar e o que fazer pelos ícones e botões. Ótimo exemplo de acessibilidade no design de interfaces.
Home do site rakuten.co.jp em abril de 2021.

Ainda no mesmo exemplo, é possível distinguir as informações que aparecem imediatamente na home do site, pois a forma define os cartões de cada item, não deixando assim as informações dispersas na página.

O mal uso das formas: 

Como podemos ver, um simples retângulo possui uma enorme importância para o entendimento e funcionamento da plataforma, mas muitas vezes, a forma é mal usada, impossibilitando até mesmo uma pessoa sem deficiências visuais ou mecânicas de se conectar ou preencher as informações requeridas.  
 
Ao tentar buscar por um estilo que remete sofisticação e modernismo, os clientes acabam por optar por formas mais simples, esbeltas e delicadas, impossibilitando assim sua visualização e entendimento por parte dos usuários, tornando mais difícil entender as informações, que antes eram intuitivas.

Antiga home do site Evernote onde o botão está escondido pelo plano de fundo.
Antiga home do site Evernote. (evernote.com)

O botão call to action, o chamariz da capa, está escondido pelo plano de fundo, perdendo seu contraste e impossibilitando diversas pessoas de vê-lo ou associar a forma com um botão.  
 
Quando falamos de acessibilidade no design de interfaces, falamos inevitavelmente de um design mais robusto, maior, mais preenchido e claro. Falamos de botões com um bom tamanho e contraste, com sombreado para destacá-lo do plano achatado da tela e que não dependem somente do famoso “hover effect” para aparecerem. 
 
Aqui, precisamos que as formas conversem e sejam visíveis e entendíveis para todos e que não priorizem somente as telas em HD dos novos monitores.  

Algumas soluções para uma melhor acessibilidade no design de interfaces: 

Investir em Acessibilidade no Design de Interfaces e no estudo da dimensionalidade das formas, junto com a sua capacidade de responsividade na maioria das telas dos smartphones e dos desktops, não é uma questão de persona ou de um visual sofisticado e comprimido, é uma questão de empatia.  
 
Se levarmos em conta que ao menos 18,6% de toda a população brasileira possui uma deficiência visual (6,7% da população possui alguma deficiência física – IBGE), estamos falando de uma boa parcela de pessoas que podem estar tentando acessar o site, aplicativo ou sistema e se frustrando constantemente.  
 
Também não podemos ignorar as pessoas que estão acessando a plataforma por um celular menos tecnológico.  
 
Logo, o primeiro passo é aceitar e investir na acessibilidade do Design e o segundo , seguir algumas regras de acessibilidade nas formas como: 
       
⦁ Faça os botões visíveis e capriche no contraste; 
⦁ Deixe o botão bem localizado e tente copiar essa fórmula da sua localização para que o usuário não tenha que procurá-lo sempre. 
⦁ Crie os cards e campos visíveis. Não use cores claras para passar informação (caso o fundo seja branco) ou cores escuras (caso o fundo seja preto); 
⦁ Mantenha as formas bem marcadas e, caso não haja um bom contraste, acrescente contornos nela ou no hover effect da forma.  
⦁ Respeite a lei do “font size = 16px;” 
⦁ Não crie botões menores do que 48px de altura, evite que os campos de clique e interação estejam escondidos. Pense, se você está tentando escondê-los, seria melhor nem os mostrar, certo?  

Por fim, teste seu produto com a maior quantidade de pessoas possível para que cada uma, com sua particularidade, consiga ter acesso total à sua plataforma. 

Compartilhe
abr
8
2021
por Isabela Sanchez e Raphael Calais
0 comentários

O que é Matriz CSD e como utilizá-la em seus projetos.

O que é Matriz CSD e como utilizá-la em seus projetos.
por Isabela Sanchez e Raphael Calais
0 comentários

A Matriz CSD é uma ferramenta que, à primeira vista, pode parecer muito simples ou até mesmo ineficiente, mas esconde o poder de transformar seus projetos e otimizar sua entrega.  

O que é a Matriz CSD? 

Todo início de projeto vem acompanhado de dúvidas, certo? Às vezes o briefing não está tão completo quanto é o esperado ou existam divergências entre o que deve ser priorizado, entre outras questões que atrasam o início do desenvolvimento. 

Com a CSD, você exemplifica essas Certezas, Suposições e Dúvidas de uma forma prática e visual, facilitando assim o pontapé inicial. 

Como utilizar? 

A ferramenta, que pode ser usada em trabalhos individuais ou em grupo, consiste em criar três colunas em um papel, lousa ou parede, com post its de diferentes cores, fazendo anotações de qualquer aspecto do projeto para criar um retrato visual com tudo o que a equipe precisa saber. Ferramentas como o Trello, Mural ou Microsoft Planner também podem ser utilizadas. 

Certezas 

Nesse campo você irá preencher o que você realmente sabe sobre o projeto. Contudo, tome cuidado com verdades absolutas ou pré-conceitos sem fundamento e, caso você seja o facilitador, instigue os participantes a analisarem entre o que sabem e o que acham que sabem. 

Suposições 

É aqui que entram as hipóteses formuladas e o que achamos que sabemos. Se alguma informação ia ser colocada em certezas, mas não houve confirmação, mude para esse campo e considere-a como uma suposição. 

Dúvidas 

O que você gostaria de perguntar ao cliente? Quais dúvidas ficaram sem resposta durante suas reuniões? Até que essas perguntas não tenham respostas, pois é aqui que você vai colocá-las. 

É normal que no início do projeto esse campo tenha mais anotações. Entretanto, com o tempo e as descobertas (como em entrevistas e observações), as dúvidas passam para o campo de Certezas ou são excluídas. 

Quadro branco com post-its colados por setores: certezas, suposições e dúvidas

Exemplo de Matriz CSD:

Vamos supor que o cliente que vamos desenvolver uma solução é uma empresa que está crescendo no mercado dos fast-foods (vamos chamar a empresa de Burgão). O que sabemos, deduzimos ou precisamos saber sobre cliente?

CERTEZAS 

1- O Burgão vende lanches, porções e bebidas a mais de vinte anos. 

2- Existem lojas por todo o Brasil. 

3- Vendem lanches para todos os públicos, contando vegetarianos, intolerantes à laticínios e glúten e outros.   

SUPOSIÇÕES 

1- Foi o marketing que transformou a jornada do cliente. 

2- Cidades que possuem lojas apenas em shoppings estão sofrendo com a pandemia. 

3- Lojas com drive-thru aumentaram suas vendas nos períodos de quarentena. 

4- O público-alvo maior são jovens e jovens adultos. 

DÚVIDAS 

1- Utilizar um app já pré-existente para realizar nossas vendas por delivery? (iFood, Rappi, UberEats, outros…) 

2- Desenvolver um app exclusivo trará mais clientes? 

3- Os sistemas atuais das lojas comportam a quantidade de pedidos que têm recebido? 

Com esses exemplos conseguimos ter uma base de como funciona a Matriz no início. Após discussões entre a equipe e pesquisas, algumas afirmações ou dúvidas podem passar a outra categoria, por exemplo a suposição nº 3, na qual com uma busca na internet chegamos a conclusão que se trata de uma certeza. 

Nesse ponto, é muito importante salientar que a Matriz CSD é mutável! Conforme as pesquisas são feitas, o projeto é desenvolvido e o cliente responde as dúvidas, as afirmações mudam de categoria, são excluídas ou podem ser adicionadas. 

Por que usar Matriz CSD? 

A Matriz CSD é uma forma visual de organizar tudo o que se tem sobre o projeto, todavia é fundamental para dar o pontapé inicial em projetos, ampliando os horizontes da equipe e permitindo uma gestão mais eficiente com a centralização das informações. 

A imersão em cada aspecto analisado proporciona maior segurança ao time e otimiza o desenvolvimento, esclarecendo tudo o que é necessário para que as tarefas evoluam. 

Ainda está com dúvidas? Entre em contato com nossa equipe! Estamos prontos para entregar a melhor solução para você e guiar seus projetos rumo ao sucesso!

Compartilhe
mar
12
2021
por Isabela Sanchez e Raphael Calais
0 comentários

Hierarquia Visual e a Sua Importância em Aplicações

Hierarquia Visual e a Sua Importância em Aplicações
por Isabela Sanchez e Raphael Calais
0 comentários

Uma página ou aplicativo vai além das funcionalidades criadas. Ao pensar em desenvolvimento, devemos também pensar a respeito do layout utilizado, de forma que seja possível atrair o olhar dos usuários para o lugar que se deseja no momento certo, estimulando-os a agir conforme o esperado.

Hierarquia visual

A Hierarquia visual é o princípio de organizar os elementos para mostrar sua ordem de importância, distribuindo-os de forma lógica e estratégica para influenciar as percepções dos usuários e os orientar para as ações desejadas.

De modo geral, é a hierarquia visual que determina quais elementos receberão atenção do usuário, atraindo seus olhos diretamente para o foco desejado no momento correto.

Isso pode acontecer para incentivar inscrições em newsletters, promover algum conteúdo específico, destacar um produto novo ou até mesmo guiar uma sequência de ações em uma aplicação ou cliques em call to actions (CTAs).

Outro fator relevante é a experiência do usuário. Na construção de um layout responsivo, deve sempre ser levada em conta uma visita agradável e intuitiva, fazendo com que o usuário realmente goste de fazer o que é pedido.

“A hierarquia visual controla a entrega da experiência. Se você tiver dificuldade em descobrir onde olhar em uma página, é mais do que provável que seu layout não tenha uma hierarquia visual clara.” – Grupo Nielsen Norman.

Objetivos da hierarquia visual

Na prática, o cuidado com o design e o estudo da hierarquia visual tem 3 funções básicas que devem ser levadas em conta:

Orientação:

Construir um layout pensando em conduzir o usuário de ação em ação, sem que ele se sinta pressionado ou forçado a navegar.

Comunicação:

criar links na mente do usuário com o intuito de diminuir a carga cognitiva que ele recebe, diminuindo o seu esforço para achar informações e o caminho que deve trilhar.

Impacto emocional:

sua aplicação deve conter elementos que envolvam o usuário de forma que ele se conecte com o conteúdo e as ações, tornando sua experiência divertida e mais leve.

Os princípios da hierarquia visual

Para auxiliá-lo em seu design, existem algumas regras de ouro nas quais você deve ficar atento:

  1. Tamanho e escala: elementos maiores são mais importantes.
  2. Cor e contraste: cores vivas se destacam mais do que cores escuras.
  3. Tipografia: o tamanho e o tipo de fonte proporcionam diferenciações e destaques.
  4. Proximidade: separa os elementos uns dos outros e cria sub-hierarquias.
  5. Espaço em branco: torna mais fácil a visualização.
  6. Alinhamento: cria ordem entre os elementos.
  7. Repetição: atribui significado em relação aos elementos.
  8. Linha principais: guiam o olhar.
  9. Regra dos terços: imagine a tela dividida em 9 quadrados (como um jogo da velha) e descentralize o objeto, colocando-o na intersecção das linhas.

Estude cada um dos princípios e entenda que você não precisa (e às vezes não deve) utilizar todos eles ao mesmo tempo, mas sim, analisar o design de acordo com suas necessidades, aplicando o que cabe em cada caso.

Ao lado direito, post it mostrando uma má hierarquia visual, onde o texto do site não possui distinção de tamanho, fonte ou espaçamento. Já na imagem ao lado mostra uma boa hierarquia visual, seguindo um grid (regra dos terços) e diferenciando a fonte dos títulos para o restante do texto.

Para facilitar a compreensão e o seu trabalho, vamos abordar mais profundamente 3 dos aspectos mais importantes para que você dê o start que seus projetos precisam.

Hierarquia tipográfica

O texto está presente em grande parte das interfaces que se relacionam com o usuário e é por isso que ele desempenha um papel fundamental quando falamos de hierarquia.
Sabendo disso, talvez você pense “então é só colocar tudo grande e pronto, terminei o trabalho?” Bom, não funciona dessa forma. Para dar ênfase e importância precisamos trabalhar com várias características do texto além do tamanho. É uma mistura de tamanho, estilo, peso e cor que vão influenciar no resultado final.

Além disso, para definirmos isso da melhor maneira para o usuário, é preciso ter atenção nos diferentes tipos de elementos contidos em um texto, que vão desde o título, subtítulo, parágrafos, captions, citações, entre outros.


Crie uma ordem que faça sentido para o conteúdo, é aí que teremos os diferentes níveis de importância, fazendo o usuário compreender por onde ele começa a escanear os elementos.

Dessa forma garantimos a eficácia da transmissão da mensagem e isso reflete diretamente na experiência e relação do usuário com o produto.

Hierarquia com cores

A cor contribui bastante para a hierarquia como um todo. As cores possuem sua própria hierarquia, isso quer dizer que um preto ou um azul escuro chamarão menos atenção se comparados com tons claros, tal como amarelo e tons pastéis. Cada cor tem um peso diferente na interface e é o seu bom uso que irá garantir a hierarquia ideal.

Hierarquia com tamanhos

Ao trabalhar em uma interface com tamanhos, temos a necessidade de ter um cuidado para não exagerar ou achar que o fato de um elemento estar grande é o suficiente para uma boa hierarquia. É necessário haver harmonia na composição para que os elementos não sejam desproporcionais.


Tenha em mente que, embora o grande seja mais perceptível, isso nem sempre é o melhor. O título, por exemplo, não é mais importante que o texto, mas ele ser visto primeiro norteia o entendimento sobre o assunto abordado. Vale destacar que elementos maiores favorecem o clique e merecem cuidado dobrado, sobretudo em dispositivos mobile no quais as telas são menores e precisamos usar os dedos para completar as ações.

Essa hierarquia pode influenciar, nas formas, objetos e tipografias. Veja na Netflix, por exemplo, o tamanho define a relevância dos filmes, dando ênfase aos filmes originais do streaming.

Outro princípio importante relacionado a esse conceito é a escala, relacionada ao tamanho de um objeto em relação a outro. Um único objeto, não importa o quão grande ou pequeno seja, não tem escala até ser comparado a outro. Isso nos permite criar equilíbrio em um design e foco nos elementos dominantes. Quanto maior a escala de diferença, maior a ênfase.

Execução e testes

Destacamos 3 elementos que são os principais e mais recorrentes em interfaces, prestar atenção neles nos auxilia a ter uma boa hierarquia, mas é necessário que você leve em conta todos os aspectos na construção de seu site ou aplicativo.


Ao desenvolver soluções, faça testes A/B e use ferramentas que auxiliam na análise do comportamento, como o Hotjar, que representa visualmente como os usuários interagem com seu site. Não tenha medo de falhar e entenda como funciona a mente de seus clientes, cada situação é única e demanda estratégias personalizadas.

Definir uma hierarquia ideal auxilia no bom posicionamento da sua marca e de seu negócio. Vale lembrar que tudo em uma interface é importante e essa organização apenas fornece a importância que você precisa, no momento correto.

Não sabe por onde começar? Entre em contato com nossa equipe! Estamos prontos para entregar a melhor solução para você!

Saiba mais sobre nossa Torre de Lean
@performaitsolutions

Compartilhe
mar
4
2021
por Isabela Sanchez e Raphael Calais
0 comentários

A Importância de Uma Boa User Story no Desenvolvimento do Produto

A Importância de Uma Boa User Story no Desenvolvimento do Produto
por Isabela Sanchez e Raphael Calais
0 comentários

A experiência do consumidor tem ganhado destaque e se torna cada vez mais importante para o sucesso das empresas, mudando a maneira como devemos criar projetos e produtos. Essa realidade tornou praticamente impossível dar início a um planejamento sem levar em conta uma boa e detalhada User Story.

O que é uma User Story?

A “História do usuário” é o pontapé inicial que seu projeto precisa e que ajuda a definir os detalhes sobre as necessidades de quem vai usar um produto ou serviço.
Uma boa User Story é uma descrição simples, clara e concisa que cabe em um pequeno cartão e não é tudo o que você precisa para dar andamento ao desenvolvimento, mas é o primeiro passo e o lembrete do que é necessário, devendo ser seguido de diversas etapas e conversas entre o Product Owner, os membros do time e, claro, os usuários.

Quais as vantagens das histórias de usuários?

Já deu para entender um pouco sobre a importância de ter seu desenvolvimento focado nas necessidades reais e práticas do usuário, baseado em User Stories, mas o que isso implica na prática?

Ao adicionar essa etapa em seus processos você pode observar algumas vantagens:

  • Validação de funcionalidades antes de sua inclusão.
  • Análise das necessidades reais do usuário.
  • Visão ampla dos problemas e dores do usuário.
  • Definição mais clara de prioridades.
  • Foco na solução.
  • Facilidade para organizar a equipe necessária, o tempo estimado e o esforço para implementar as funcionalidades.
  • Melhora no trabalho em equipe.
  • Redução de tempo e desperdício.

Como é uma User Story?

As histórias de usuários seguem basicamente 3 aspectos ou “3 C’s”:

Cartão:

É a descrição propriamente dita da necessidade do usuário, normalmente responde às perguntas:

  • Quem quer?
  • O que quer?
  • Para que?
Exemplo de cartões de User Story: eu, enquanto (quem), quero (o quê), para (por quê).
Conversas:

São literalmente as conversas nas quais são discutidos os detalhes da solução de negócios, tal qual geram a compreensão do que é realmente necessário como funcionalidade. Normalmente acontecem entre o Product Owner, membros do time de Desenvolvimento e outras pessoas de negócio.

Confirmação:

São os Critérios e Testes de Aceitação que documentam os detalhes da User Story e estabelecem como as funcionalidades devem se comportar quando implementadas. Os Critérios de aceitação devem ser pequenos, assim como de fácil entendimento e são utilizados para determinar quando uma entrega está pronta, ajudando o Product Owner a determinar para o Time de Desenvolvimento o que ele precisa para que as funcionalidades propiciem valor. A partir desses Critérios, o Time de Desenvolvimento gera os Testes de Aceitação.

Comece a criar boas User Stories!

Bill Wake, autor do livro “Extreme Programming Explored”, definiu algumas características para a criação de boas histórias do usuário com a criação do acrônimo INVEST:
 
Independent (independente): ao criar várias User Stories, é ideal que elas sejam o mais independentes possível e não dependam uma da outra.

Negociable (negociável e negociada): as histórias não são imutáveis! O que importa é sua essência, os detalhes devem ser definidos nas conversas (3 C’s mencionados anteriormente).

Valuable (valiosa): o mais importante é a entrega de valor para o cliente. Mesmo as menores User Stories devem representar funcionalidades.

Estimable (estimável): devem haver detalhes técnicos e de negócios devem possuir detalhes suficientes para transformar a User Story em uma parte do produto.

Small (pequena): pequenas histórias têm maior precisão nas estimativas.

Testable (testável): é necessário que se possa verificar e confirmar que a User Story está pronta e está funcionando! Os testes possibilitam a “Confirmação” dos “3 C’s”.

Então… User stories sempre são pequenas?

Falamos bastante sobre a importância de criar histórias resumidas, mas em sua origem elas podem ser grandes, para depois serem divididas em pequenas histórias a serem estimadas individualmente. Entenda melhor:

Épicos: são as User Stories muito grandes ou sem detalhes suficientes que permitam seu desenvolvimento individual. É basicamente uma história de escopo aberto que dará origem a uma carga maior de desenvolvimento ou que irá se subdividir com a criação de diversas User Stories.

Tema: quando são criadas várias histórias relacionadas, as mesmas podem ser agrupadas em “Temas”. Elas podem ter origem no mesmo Épico ou ter a mesma meta de negócio, por exemplo.

O desenvolvimento das histórias se dá antes do início do projeto e conta com a participação de todos da equipe, com o objetivo de criar um Backlog do produto que descreva a funcionalidades a serem adicionadas ao longo do ciclo. Durante todo o processo novas histórias podem ser escritas e adicionadas a qualquer momento e por qualquer pessoa, sempre levando em consideração as características INVEST.

Desenvolver a história do usuário é obrigatório?

Na teoria seu time não é obrigado a desenvolver User Stories, mas a importância do design centrado no usuário e seu impacto positivo nos negócios (LINKAR COM O TEXTO) reforça a necessidade dessa etapa em seu planejamento.

“Não há nada tão inútil do que fazer com grande eficiência, aquilo que não deveria ser feito.” Peter Drucker

Levando em conta o User Experience, não podemos deixar de considerar essa frase e o conceito de eliminação de desperdício do Lean, que guiam para a entrega de resultados, ao invés de funcionalidades.

A criação de User Stories ajuda a definir o desejo do usuário final e aumenta a assertividade do trabalho de toda equipe.

Conclusão

As etapas para criar um produto centrado no usuário são inúmeras e devem ser sempre avaliadas caso a caso, mas as User Stories são de extrema importância para dar o Start no planejamento e definir as metas desejadas. Além disso, as histórias servem também como uma forma de documentar processos e registrar as atividades desenvolvidas, servindo como referência para novos desenvolvimentos.

Ficou com alguma dúvida sobre o assunto? Mande sua pergunta pra gente! Vamos adorar te ajudar!

Saiba mais sobre nossos serviços em Lean
fev
25
2021
por Ariane Prado e Raphael Calais. - Revisão por Isabela Sanchez
0 comentários
Torre de Lean

Como o Design Centrado no Usuário Pode Impactar Seu Negócio

Como o Design Centrado no Usuário Pode Impactar Seu Negócio
por Ariane Prado e Raphael Calais. - Revisão por Isabela Sanchez
0 comentários
Torre de Lean

O design centrado no usuário tem se destacado em empresas de todos os tipos. Cada vez mais as empresas inovadoras acrescentam em seus valores as necessidades do usuário e alavancam suas vendas, enquanto empresas que não incluem a experiência do usuário em seus valores tendem a ter mais dificuldade de prosperar e evoluir.


Quem é o UX Designer?

Segundo Don Norman, fundador do NN Group, o UX (ou experiência do usuário) envolve muito mais que o design do produto e seu desenvolvimento, o termo engloba o modo como qualquer usuário interage com o mundo ao seu redor.

Sendo assim, o design vai além da estética e efetua um papel ativo como ferramenta para a construção de soluções, passando pela identificação dos problemas, dores e necessidades do usuário, a criação de protótipos que serão testados e receberão feedbacks para que no fim aconteça uma reavaliação. Este processo manterá o conteúdo do projeto sempre atualizado e funcional.

Estamos aqui falando de uma das funções do UX Designer (vulgo User Experience Designer). Seu papel é essencial, podendo até mesmo participar das decisões de negócios e ajudar na priorização de demandas.
Infelizmente, muitas empresas têm dificuldades em construir uma visão centrada no usuário que gere impacto e transforme de fato a forma que o produto é enxergado.

Figura Double Diamond mostrando o processo de trabalho no UX
Double Diamond é uma forma do UX organizar seu trabalho antes de criar um protótipo para ser testado.

Objetivo do User Experience ou Design Centrado no Usuário.

A verdadeira experiência do usuário vai além de vender aos clientes o que eles dizem querer.
Para a experiência do usuário ocorrer da melhor forma, é preciso atender as necessidades específicas do consumidor sem que haja confusão ou algum tipo de incômodo. Essa tarefa necessita de serviços de disciplinas como engenharia, marketing, design gráfico e industrial, design de interface, entre outros, unidos para apostar na simplicidade e assertividade no desenvolvimento de produtos, serviços ou de sistemas fáceis de usar.

Pensar com foco no cliente é atentar-se às suas emoções e estar alinhado com os sentimentos que o usuário tem enquanto está em contato com a marca, aproximando o cliente de maneira eficiente e criando uma verdadeira cultura centrada no usuário dentro de sua empresa.

Uma porta sem ux e uma com ux. No caso a sem ux está escrito puxe, mas esta sem o puxador.
Às vezes alguns erros graves passam despercebidos por não terem sido testados.

Vantagens de aplicar User Experience na sua empresa.

Em termos simples, o UX tem o objetivo de encantar pessoas e deixá-las mais felizes na usabilidade de algum produto ou serviço, podendo render vantagens valiosas, como:

Aumento da conversão nas vendas

Se um cliente em potencial tem uma boa experiência antes da decisão de compra, claramente também têm mais chances de converter e comprar de fato.
Em um cenário digital: se o usuário que se sente satisfeito com a experiência de navegação de um site ou até mesmo com os mecanismos de botões antes de efetivar a compra, existem maiores chances de ele converter e tornar-se um cliente. Ou seja, facilitar e deixar essa jornada mais intuitiva é um grande diferencial para ter mais conversõ

Fidelização

A fidelização de um cliente ou usuário passa a se tornar realidade quando ele se sente totalmente à vontade, seja com o sistema de navegação de um site ou com a usabilidade de um produto ou serviço. Uma vez fidelizado, é bem provável que ele não busque opções em outros sites e nem novos produtos com outras marcas.

Economia de recursos

Basicamente, ao analisar a experiência do usuário, é possível fazer um planejamento mais inteligente. Isso reduz as chances de retrabalho, diminuindo também os custos e tempo dos profissionais envolvidos.

Maior valor percebido pelo cliente

O valor percebido pelo cliente trata-se da sensação que vem acompanhada com a aplicação eficaz do UX na experiência de usabilidade dele.
É importante destacar que o valor percebido não tem relação direta com custo, mas sim com o sentimento após a experiência com a sua marca, que pode ser influenciado pela qualidade da informação recebida em um site, quantidade de funcionalidades úteis de um aparelho eletrônico, ou até mesmo pelo custo-benefício de algo comprado.
Na prática: sabe quando você prefere pagar um pouco mais caro por algo porque é fã da marca e fica feliz por se relacionar com ela? Esse é o valor percebido pelo cliente.

O trabalho de UX ajuda a melhorar a imagem da sua marca, afinal uma imagem positiva, uma experiência marcante e um bom produto são palavras chaves no branding de qualquer empresa prolífera.

Recomendações e indicações

Um cliente ou usuário satisfeito (seja com a navegação de um site, processo de compra ou experiência de usabilidade de um produto) vai estar propenso a fazer recomendações da empresa que proporcionou uma melhor experiência.
O cliente fiel, por ter sido feliz em todo o processo de compra – desde pesquisa, avaliação da solução, atendimento, etc. – também pode se tornar um defensor da marca, fazendo indicações e ressaltando benefícios

Aqui falamos de lovemark. Uma relação onde o cliente enxerga a empresa como parceira.


Como aplicar o UX e as práticas do design centrado no usuário em sua empresa?

A prática do User Experience exige tempo, testes e muito esforço. Além do mais, os componentes do UX podem variar de acordo com o seu negócio, entretanto, existem três pontos chaves para direcionar uma estratégia de experiência do usuário com sucesso:

Pesquisa de mercado

As pesquisas ajudam a determinar quem é seu cliente ideal e são sempre bem-vindas. Aplicando isso no UX, é possível categorizar o público de acordo com o comportamento em seu site ou aplicativo, por exemplo.
Descubra quem são os usuários que estão convertendo mais, os que ficam mais tempo e também aqueles com altas taxas de rejeição.

Foco no usuário

Uma boa estratégia de User Experience precisa ser voltada totalmente para aquele que usará seu site ou aplicativo. Então, além de uma interface visualmente agradável, ela também precisa ser útil e intuitiva ao consumidor.
Profissionais de vendas e atendimento que possuem contato direto com o consumidor, por exemplo, podem fornecer dicas valiosas! Ideias para que as estratégias de experiência do usuário atendam suas necessidades e expectativas.

Testes

É válido reforçar que a melhor maneira de colocar em prática o User Experience é fazendo e analisando testes.
Tenha em mente que, testar a usabilidade é uma etapa fundamental antes de implementar seu layout definitivo. Afinal, a estrutura do seu projeto e o tipo de navegação que oferece pode definir se o usuário vai concluir uma tarefa ou não.
Testes frequentes irão ajudar a melhorar a usabilidade do projeto. Logo, você terá mais clientes satisfeitos e prontos para voltar a fazer negócio com você.
Com o passar do tempo, os problemas irão diminuir e sua plataforma ficará mais intuitiva.
Dica: continue fazendo pequenos testes! Sempre existe algo a ser ajustado.
O usuário precisa estar no centro das decisões. Mantenha o foco nas pessoas e nos sistemas e resolva os problemas certos!


Quer saber mais sobre o nosso trabalho na torre de Lean aqui na PerformaIt?

Serviços na Torre de Lean

Te ajudamos a entender melhor Design Centrado no Usuário? Comente com a gente o que achou do texto!

Compartilhe
jan
19
2021
por Eduardo Cruz
0 comentários
Performa_IT

Solutions Mapeamento de Demanda

Solutions Mapeamento de Demanda
por Eduardo Cruz
0 comentários
Performa_IT

Aqui na Performa_IT acreditamos que projetos devem ser vistos como empreendimento, com bases sólidas no planejamento estratégico.

Pensando nisso, antes de desenvolvermos uma solução, fazemos um mapeamento de demanda, onde nos unimos para entender a fundo o funcionamento de cada etapa do processo e conseguimos otimizar as tarefas, criando estratégias de acordo com a necessidade de cada cliente.

Faz parte de nosso mapeamento de demanda: determinar os principais objetivos, verificar as entregas, identificar os clientes, modificar os processos, analisar os recursos que devem ser utilizados e, por fim, documentar tudo para futuras verificações.

Todos esses processos nos possibilitam entregar soluções, e não funcionalidades.

Quer saber mais sobre como trabalhamos e as metodologias que colocamos em prática? Fique de olho em nossas redes sociais e conheça tudo que temos a oferecer.

💻 Saiba mais sobre a Torre de Solutions
📷 @performaitsolutions
✉ performait@performait.com
📞 (19) 3778-9594
📞 (11) 2124-3308

Compartilhe
jan
6
2021
por Eduardo Cruz
0 comentários
Torre de Solutions

Power Apps

Power Apps
por Eduardo Cruz
0 comentários
Torre de Solutions

O que é o Power Apps?

Power Apps é um conjunto de aplicativos, serviços, conectores e plataforma de dados que fornece um ambiente de desenvolvimento de aplicativos rápido para construir aplicativos personalizados para suas necessidades de negócios. 

Usando a energia Apps, você pode rapidamente construir aplicativos personalizados de negócios que se conectam a seus dados de negócios armazenados tanto na plataforma de dados subjacente ( Microsoft Dataverse ) fontes de dados local (SharePoint, Microsoft 365, Dynamics 365, SQL Server, e assim por diante).

Os aplicativos desenvolvidos com o Power Apps fornecem uma rica lógica de negócios e recursos de fluxo de trabalho. Além disso, ele transformará seus processos de negócios manuais em processos digitais automatizados. Além disso, os aplicativos desenvolvidos com Power Apps têm um design responsivo, podendo ser executados perfeitamente no navegador ou em dispositivos móveis (telefone ou tablet). 

Ou seja, Power Apps “democratiza” a experiência de criação, de aplicativos de negócios personalizados, permitindo que os usuários criem aplicativos de negócios personalizados e ricos em recursos sem escrever código.

Ainda mais, ele fornece uma plataforma extensível que permite que desenvolvedores profissionais interajam programaticamente com dados e metadados, apliquem lógica de negócios, criem conectores personalizados e se integrem a dados externos.

Power Apps Studio

É o designer de aplicativos usado para criar aplicativos de tela. Em outras palavras, o designer de aplicativos torna a criação de aplicativos mais parecida com a construção de uma apresentação de slides no Microsoft PowerPoint. 

O designer de aplicativos

Permite definir o mapa do site e adicionar componentes para construir um aplicativo orientado a modelos. 

Power Apps portals Studio 

É uma ferramenta de design WYSIWYG para adicionar e configurar páginas da web, componentes, formulários e listas. 

Power Apps é uma plataforma de desenvolvimento de alta produtividade para aplicativos de negócios e tem quatro componentes principais:

  • Aplicativos de tela
  • Aplicativos baseados em modelos
  • Portais
  • Microsoft Dataverse
  • Aplicativos de tela
  • Os aplicativos de tela começam com a experiência do usuário, criando uma interface altamente personalizada, com o poder de uma tela em branco e conectando-a à sua escolha de mais de 200 fontes de dados. Sendo assim, você pode criar aplicativos de tela para aplicativos da web, celular e tablet.
  • Os aplicativos de tela oferecem flexibilidade para organizar a experiência do usuário e a interface da maneira que você quiser. Nesse sentido, sua criatividade e senso de negócios orientam como você deseja que seus aplicativos sejam exibidos.

Aplicativos baseados em modelo

  • Os aplicativos orientados por modelo começam com seu modelo de dados – construídos a partir da forma de seus principais dados e processos de negócios no Dataverse para modelar formulários, visualizações e outros componentes. Além disso, os aplicativos baseados em modelos geram automaticamente uma ótima IU, que é responsiva em todos os dispositivos.
  • Ao criar um aplicativo orientado a modelo, você pode usar todo o poder do Dataverse para configurar rapidamente seus formulários, regras de negócios e fluxos de processo. Bem como, você pode criar um aplicativo orientado a modelo a partir do site Power Apps.

Portais

Os portais ajudam a criar sites externos que permitem que o usuários fora de sua organização, façam login com uma ampla variedade de identidades, bem como, criem e visualizem dados no Dataverse ou até mesmo naveguem no conteúdo anonimamente.

Dataverse

Dataverse é a plataforma de dados que vem com o Power Apps e permite armazenar e modelar dados de negócios. Com ela, os aplicativos do Dynamics 365 (como Vendas do Dynamics 365, Atendimento ao Cliente, Serviço de Campo, Marketing e Automação de Serviço de Projeto) são construídos. Todavia, se você é um cliente do Dynamics 365, seus dados já estão no Dataverse.

Em outras palavras, o Dataverse permite que você armazene e gerencie dados com segurança em um conjunto de tabelas padrão e personalizadas, nas quais você pode adicionar colunas quando precisar delas.

Contato Comercial:

Eduardo Cruz | Leonardo Tristão

performait@performait.com

Campinas: (19) 3778-9594

São Paulo: (11) 2124-3308

www.performait.com

Compartilhe
out
6
2020
por Eduardo Cruz
0 comentários
Performa_IT

Aplicativos .NET

Aplicativos .NET
por Eduardo Cruz
0 comentários
Performa_IT

APLICATIVOS .NET – Nosso time de desenvolvedores realiza entregas em Desenvolvimento de Software em diversas linhas em .NET.

Desenvolvimento .NET (Web e área de trabalho)

Compile aplicativos multiplataforma da área de trabalho do Windows e da Web com C#, F# ou Visual Basic.

C# e Visual Basic http://www.performait.com

Produtivas, multiuso, fortemente tipadas, orientadas a objeto, software livre.

C# e Visual Basic Aplicativos .NET são linguagens de programação projetadas para a criação de uma variedade de aplicativos executados no .NET Framework. Essas linguagens são poderosas, fortemente tipadas e orientadas a objeto. Elas se baseiam no .NET Compiler Platform “Roslyn”, que fornece APIs de análise de código avançadas e são software livre no GitHub.

F#

Programação simples, eficiente, de dados avançados e com foco na função.

F# é a primeira linguagem de programação funcional de software livre, de plataforma cruzada que permite aos desenvolvedores enfrentarem problemas de computação com um código simples, de fácil manutenção e robusto. F# está no GitHub, e várias ferramentas e bibliotecas estão disponíveis na comunidade do F#.

Aplicativos Web ASP.NET http://www.performait.com

As ferramentas abertas e flexíveis que você precisa para criar e implantar aplicativos Web modernos

ASP.NET é uma estrutura Web de software livre para a criação de ótimos sites e aplicativos Web usando HTML, CSS e JavaScript. Você também pode criar APIs Web e sites móveis, usar as tecnologias em tempo real, como os Soquetes Web, e mais.

Aplicativos na nuvem no Azure

Implante rapidamente aplicativos de missão crítica. Comece gratuitamente. Dimensione conforme seu crescimento.

Execute aplicativos Web ASP.NET e programas .NET na nuvem usando Sites do Azure, WebJobs, Serviços de Nuvem e VMs. Use o .NET e o Visual Studio para implantar um aplicativo novo ou existente em segundos.

Plataforma Universal do Windows

Uma plataforma do Windows, vários dispositivos.

Aproveite suas habilidades em C# e no Visual Basic para se beneficiar com o poder do Windows 10 ao compilar a próxima geração de aplicativos.

 O Windows 10 é executado em um núcleo único e unificado em todos os dispositivos: móvel, desktop, Xbox ou em outro lugar. Os aplicativos do Windows 10 criados com C# e Visual Basic são executados com a mesma rapidez que o C++ com o tempo de execução do .NET Native.

Móvel de plataforma cruzada

Visual Studio e Xamarin

Crie aplicativos nativos avançados usando C# no iOS, Android e Windows, maximizando a reutilização de códigos. Compartilhe códigos entre plataformas de dispositivos com projetos compartilhados ou bibliotecas de classes portáteis.

Com 100% das APIs nativas expostas, você tem acesso completo aos recursos do dispositivo. Crie aplicativos com experiências de usuário nativas e desempenho nativo com a simplicidade do arrastar e soltar.

.NET Core

Modular, plataforma cruzada, software livre.

O .NET Core é um conjunto de componentes de runtime, biblioteca e compilador otimizados para cargas de trabalho modernas executadas no Windows, no macOS e no Linux. Ele pode ser instalado localmente com seu aplicativo apenas com os pacotes de que você precisa. O tempo de execução, as bibliotecas e o compilador do .NET Core são de software livre no GitHub e estão recebendo contribuições.

Consulte-nos para seu projeto de e engaje sua oportunidade com a Performa_IT.

Contato Comercial:

Eduardo Cruz | Leonardo Tristão

performait@performait.com

Campinas: (19) 3778-9594

São Paulo: (11) 2124-3308

www.performait.com

Compartilhe