Author: larissaux.com

Sites para melhorar como designer e front-end

Ao longo de muitos posts recebidos e salvos no LinkedIN, Instagram, Tik Tok e outras redes sociais, essa lista foi feita para guardar as dicas de sites de ux design, front-end e assuntos associados a essas áreas (SEO, marketing digital, materiais gráficos, dentre outros). Espero que seja útil!

📋 Briefings & Prática de Design

💼 Currículo & Carreira

📚 Educação & Recursos de UX/UI

🎨 Inspiração & Galeria de Design

🎯 Design Systems & Padrões

🤖 IA & Ferramentas de Design

💻 Software & Animação

  • Cavalry – Software de motion design e animação
  • DaVinci Resolve – Editor de vídeo profissional gratuito
  • https://animejs.com – Biblioteca JavaScript para animações
  • animista.css – Gerador de animações CSS prontas
  • https://web.archive.org – Vê versões antigas de qualquer site (Wayback Machine)

🎨 Cores & Paletas

  • https://khroma.co – Gerador de paletas de cores com IA
  • https://color.review – Testa contraste de cores para acessibilidade
  • https://coolors.co – Gerador de paletas de cores
  • Color Hunt – Paletas de cores curadas e trending
  • Happy Hues – Paletas com exemplos de aplicação
  • Pigment – Ferramenta de paletas de cores
  • Adobe Color – Criador de esquemas de cores da Adobe
  • Coolors – Gerador rápido de paletas
  • Colorable – Testa combinações de cores para acessibilidade
  • WhoCanUse – Simulador de acessibilidade de cores
  • Tailwind CSS Color Generator – Gera paletas para Tailwind CSS

🔤 Ícones

  • https://phosphoricons.com – Biblioteca de ícones flexível e gratuita (Phosphor Icons)
  • https://isocons.app – Ícones isométricos gratuitos
  • https://lordicon.com – Ícones animados
  • https://www.flaticon.com – Milhões de ícones gratuitos e pagos
  • https://thenounproject.com – Maior biblioteca de ícones do mundo
  • Feather Icons – Ícones minimalistas open source
  • Bootstrap Icons – Biblioteca oficial de ícones Bootstrap
  • Icons8 – Ícones, ilustrações e fotos
  • Heroicons – Ícones SVG da Tailwind Labs
  • Lucide – Fork do Feather Icons com mais ícones
  • Remix Icon – Sistema de ícones open source
  • Radix Icons – Ícones do Radix UI

🔤 Fontes

  • https://bestfreefonts.com – Fontes gratuitas selecionadas
  • Google Fonts – Biblioteca gratuita do Google
  • DaFont – Fontes gratuitas para download
  • Adobe Fonts – Biblioteca de fontes da Adobe
  • Befonts – Fontes gratuitas curadas
  • 1001 Fonts – Grande coleção de fontes
  • Font Space – Fontes gratuitas para uso comercial
  • Fontpair – Sugestões de combinações de fontes
  • Abstract Fonts – Fontes experimentais e artísticas

🖼️ Imagens & Ilustrações

🗺️ Mapas, Diagramas & Shapes

🎨 CSS & Ferramentas de Desenvolvimento

  • smooth-shadow.css – Gerador de sombras suaves CSS
  • animista.css – Gerador de animações CSS
  • css-gradients – Gerador de gradientes CSS
  • get-waves.css – Gerador de ondas decorativas
  • blob-svg-generator – Formas orgânicas para designs
  • CSS Complex Shape – Shapes complexos em CSS

📊 Marketing, SEO & Pesquisa

🌐 Hospedagem & Deploy

  • GitHub Pages – Hospedagem gratuita para sites estáticos
  • Vercel – Deploy de aplicações frontend
  • Netlify – Hospedagem e deploy contínuo
  • 000Webhost – Hospedagem gratuita com PHP
  • AwardSpace – Hospedagem web gratuita
  • GoogleHost – Serviços de hospedagem

🛠️ Plugins & Ferramentas Figma

🍳 Utilitários Diversos

🎓 CERTIFICAÇÕES GRATUITAS

Design & UX

Marketing Digital

Outras Certificações Google

https://grow.google/certificates/ – Project Management, Data Analytics, IT Support, Cybersecurity (mesmas condições Coursera)

Leis da psicologia no UX Design

Como justificar decisões de design quando não é possível coletar dados de teste? Nestes momentos, os princípios da psicologia podem ser utilizados para interpretar por que as pessoas se comportam de determinada maneira.

1. Lei de Jakob

Usuários passam boa parte do tempo navegando em outros sites e preferem que seu site funcione da mesma forma que todos os outros sites que já conhecem.

Da mesma forma, ao criar produtos ou serviços digitais, uma prática comum é espelhar-se na forma como as coisas funcionam no mundo físico.

  • Ao minimizar mudanças, minimize as possíveis incompatibilidades. O efeito cumulativo de poupar esforço mental garante menor carga cognitiva.
  • Quando é imperativo que o design seja alterado consideravelmente, pode-se introduzir gradualmente o novo design, e também dar autonomia a seus usuários para escolherem entre a versão anterior ou a versão atual, como feito no Google e no Clickup.
  • Isso significa que os padrões de interface nunca devem ser alterados? Não exatamente. O equilíbrio consiste em priorizar convenções familiares, mas com a consciência de abrir mão delas caso faça sentido. Ao trilhar caminhos não-convencionais, tome o cuidado de sempre testar com os usuários para verificar se a compreensão do funcionamento não foi prejudicada.

2. Lei de Fitts

  • Quanto maior o objeto, menor o tempo para selecioná-lo. Da mesma forma, quanto menor o objeto, maior o tempo necessário para encontrá-lo e selecioná-lo.
  • O diâmetro da ponta dos dedos de um adulto comum (nos EUA) varia entre 16 e 20 mm (DANDEKAR et al, 2003).
  • Recomenda-se que botões de envio do formulário estejam posicionados próximos ao último campo de preenchimento do formulário.
  • Permitir que se clique tanto no input quanto na label para preencher um campo podem aumentar a área útil de toque.
  • A Apple recomenda colocar os elementos interativos na mesma altura do campo de visão do usuário e arredondar os elementos interativos para aumentar a precisão, pois as áreas de seleção com bordas angulosas tendem a focar nossos olhos nas extremidades, e não no conteúdo.

Recomendações de tamanho mínimo do alvo de toque:

Empresa/OrganizaçãoTamanho
Interfaces espaciais – Apple60 x 60 pt
Interfaces de toque – Apple44 x 44 pt
Material Design – Google48 x 48 px
Diretrizes de Acessibilidade Web (WCAG)44 x 44 px
Grupo Nielsen Norman1 x 1 cm

3. Lei de Miller

Uma pessoa comum só consegue reter por volta de 7 itens na sua memória de trabalho.

  • Miller constatou que a capacidade de memória em jovens adultos era limitada a 7 itens, independentemente do estímulo. Ou seja, o nossos processamento se dá mais pelos “blocos” do que pela densidade da informação em si. É por isso que ler um número com divisões “(61) 98745 – 4512” é muito mais fácil do que ler “61987454512”.
  • Os blocos de informação podem ser aplicados em textos e interfaces para melhorar a leitura. Da mesma forma, a não-aplicação desta divisão em “pacotes” pode fazer com que a leitura fique prejudicada.
Fonte: Autoria própria.

4. Lei de Hick

Quanto maior o número e a complexidade de opções disponíveis, mais tempo demora para se tomar uma decisão.

  • Menos é mais: Divida tarefas complexas em etapas menores. Assim, o número de informações para reter e opções para decidir diminui, e o tempo de resposta é menor.
  • O muito menos, também é demais: Tome cuidado para não simplificar tanto ao ponto da abstração. Quando uma interface é “limpa demais”, a quantidade de informação foi reduzida, mas isso levou a falta de pistas visuais para encontrar a informação necessária. Assim, a carga cognitiva para tentar descobrir o próximo passo aumentou.
No exemplo acima, a neta cobriu boa parte dos botões do controle, mantendo apenas o essencial que era mais utilizado pela avó.

5. Lei de Postel (princípio da Robustez)

Seja confiável e acessível em suas ações, mas tolerante com o que aceita dos outros.

Postel foi um dos responsáveis pelo protocolo de comunicação TCP, através de uma rede. Este protocolo é usado até hoje, pois baseia-se na tolerância às falhas, um dos pilares para a comunicação confiável.

Na primeira parte, explica que o sistema deve ser confiável de usar e acessível à maior gama possível de usuários. Todo usuário deve ter um sistema que funcione, independentemente da velocidade da conexão, resolução de tela ou uso de tecnologias assistidas.

A segunda parte diz respeito à tolerância a falhas, ou seja: Os programas que recebem dados devem ser robustos o suficiente para aceitar e interpretar entradas que não atendem às especificações, desde que o significado seja claro.

Quanto mais campos são exigidos do usuário, maior a carga cognitiva exigida e maior a chance de deterioração na qualidade das respostas (fadiga de decisão).

Aprimoramento responsivo: Estratégia em que o conteúdo básico é entregue a todos os usuários. Conforme é detectado que o dispositivo do usuário possua mais recursos e features, aí vão sendo carregadas mais camadas de animação e interação.

Resiliência de design: Considere que o usuário pode querer ler o texto em uma fonte maior ou menor ao construir a página. Também considere os diferentes tamanhos de zoom, e por fim, ao trabalhar com produtos que funcionam em múltiplos países, considere a compactação do idioma.

Compactação do idioma é a extensão média que suas palavras ocupam. O inglês é um idioma compacto, com palavras mais curtas. Já a mesma palavra, em italiano, pode ser o dobro do tamanho ou mais.

Exemplo: Visualizações em inglês é “views” e em italiano é “visualizzazioni”.

6. Regra Pico-fim

As pessoas julgam uma experiência com base principalmente em como se sentiram no seu pico (momento mais intenso) e no final, em vez da soma total ou média de cada momento da experiência.


A regra pico-fim sugere que devemos prestar atenção especial aos momentos mais intensos e ao momento final de uma experiência do usuário. Um produto pode ter pequenas falhas ao longo do caminho, mas se o momento crítico e o encerramento forem positivos, a percepção geral será favorável.

  • Em processos longos, crie “picos positivos” estratégicos para manter o engajamento.
  • Evite terminar experiências com mensagens de erro ou frustrações – se algo der errado, ofereça soluções claras e um caminho positivo adiante.

Exemplo: O Duolingo celebra conquistas com animações e mensagens motivadoras. Mesmo que o usuário cometa erros durante a lição, o final sempre reforça o progresso alcançado.

7. Efeito da estética-usabilidade

Usuários frequentemente percebem designs esteticamente agradáveis como mais fáceis de usar, mesmo que não sejam tão funcionais.


Um produto visualmente atraente gera uma resposta emocional positiva, tornando os usuários mais tolerantes a pequenos problemas de usabilidade e mais propensos a explorar suas funcionalidades.

  • Lembre-se: a estética NÃO substitui a usabilidade real. Ela pode mascarar problemas temporariamente, mas não resolve falhas funcionais graves.
O contraste do texto está baixo em alguns pontos, e é difícil diferenciar o que são botões ou objetos da interface, porém ela é muito bonita, o que alivia a percepção de usabilidade. Fonte: Pinterest.

8. Efeito de von Restorff

Quando vários objetos similares estão presentes, aquele que difere dos demais tem maior probabilidade de ser lembrado.

Também conhecido como efeito do isolamento, este princípio explica que elementos que se destacam visualmente em um conjunto são mais facilmente notados e memorizados.

  • Destaque visualmente os botões de ação primária (CTAs) usando cores contrastantes em relação ao restante da interface.
  • Use o destaque com parcimônia – se tudo for destacado, nada se destaca.
  • Em listas ou menus, destaque a opção recomendada ou mais popular para guiar a decisão do usuário.

9. Lei de Tesler

Para qualquer sistema, existe uma certa quantidade de complexidade que não pode ser reduzida – ela só pode ser transferida.

Tesler, cientista da computação da Xerox PARC, propôs que toda aplicação possui uma complexidade inerente que não pode ser eliminada. A questão não é se haverá complexidade, mas quem vai lidar com ela: o usuário ou o sistema.

  • Identifique a complexidade essencial do seu produto e assuma-a no sistema, protegendo o usuário dela.
  • Automatize processos complexos sempre que possível, apresentando ao usuário apenas as decisões realmente necessárias.
  • Ofereça configurações avançadas para usuários experientes, mas mantenha-as opcionais e ocultas por padrão.
  • Não simplifique tanto a interface que force o usuário a realizar tarefas complexas manualmente para compensar.
  • Exemplo: Ao configurar um email, o sistema pode assumir automaticamente as configurações de servidor (IMAP, SMTP, portas) baseando-se no provedor de email, deixando o usuário informar apenas email e senha. A complexidade existe, mas foi transferida para o sistema.

10. Limiar de Doherty

A produtividade aumenta quando um computador e seu usuário interagem em um ritmo (<400ms) que garante que nenhum dos dois precise esperar pelo outro.

Walter J. Doherty, pesquisador da IBM, descobriu que quando o tempo de resposta de um sistema cai abaixo de 400 milissegundos, a produtividade aumenta drasticamente. Isso ocorre porque o usuário permanece focado e engajado, criando um fluxo contínuo de trabalho.

  • Otimize o desempenho para garantir que interações comuns ocorram em menos de 400ms.
  • Use feedback visual imediato (como mudanças de estado em botões) mesmo que o processo backend demore mais.
  • Implemente skeleton screens ou loading progressivo para manter o usuário informado durante carregamentos.
  • Priorize a velocidade de resposta nas interações mais frequentes do seu produto.
  • Para processos que naturalmente demoram mais, forneça indicadores de progresso claros e estimativas de tempo.

Atenção: Curiosamente, respostas instantâneas demais (abaixo de 100ms) podem parecer artificial ou fazer o usuário questionar se algo realmente aconteceu. Pequenos atrasos intencionais podem, às vezes, aumentar a percepção de que o sistema está “trabalhando”.

11: Responsabilidade no design

O primeiro passo para tomar decisões de design mais responsáveis é reconhecer como a mente humana é suscetível à tecnologia persuasiva.

B. F. Skinner demonstrou que o reforço aleatório em horários variáveis é a maneira mais eficaz de influenciar o comportamento. Essa pesquisa foi aplicada em produtos digitais através de:

  • Recompensas variáveis intermitentes: O gesto de “puxar para atualizar” funciona como uma máquina caça-níqueis. Estudos mostram que a pessoa média interage com seu smartphone mais de 2.500 vezes por dia.
  • Loops infinitos: Vídeos de reprodução automática e feeds de rolagem infinita maximizam o tempo no site, removendo a necessidade de decisão consciente do usuário.
  • Afirmação social: Cada “curtida” fornece dopamina, satisfazendo temporariamente nosso desejo de aprovação.
  • Configurações padrão: A maioria das pessoas nunca as altera. Um estudo mostrou que as configurações do Facebook correspondiam às expectativas em apenas 37% das vezes.
  • Padrões sombrios: Pesquisadores identificaram 1.818 ocorrências de técnicas enganosas em 11.000 sites analisados.
Botão curtir, do facebook.

As empresas raramente pretendem criar produtos prejudiciais. O botão “curtir” do Facebook não foi criado para viciar, mas acabou se tornando um mecanismo de feedback viciante. Pesquisas mostram que a mera presença de smartphones reduz nossa capacidade cognitiva, e há conexões entre uso de mídia social e aumento de depressão em jovens.

Para construir produtos que apoiam os objetivos das pessoas, nós devemos:

  • Pensar além do caminho feliz: Colocar casos extremos no centro do pensamento para criar produtos mais resilientes.
  • Diversificar equipes: Equipes diversificadas trazem um espectro mais amplo de experiência humana.
  • Olhar além dos dados: Usar pesquisa qualitativa para entender como o produto afeta as vidas dos usuários.

12. Aplicando princípios da psicologia ao design

A maneira mais eficaz de aproveitar a psicologia é incorporá-la à tomada de decisões cotidiana.

  • Visibilidade: Tornar os princípios visíveis no espaço de trabalho (pôsteres) cria vocabulário coletivo compartilhado.
  • Show-and-Tell: Sessões regulares de compartilhamento criam cultura de diálogo e construção de conhecimento.

Conectando princípios a leis:

Criar estrutura com: Objetivo (princípio) → Observação (lei psicológica) → Diretrizes (regras práticas)

Exemplos:

1. “Clareza em detrimento da abundância de opções” → Lei de Hick → “Limitar opções a 3 itens” / “Explicações com máximo 80 caracteres”

2. “Familiaridade em detrimento da novidade” → Lei de Jakob → “Usar padrões de design comuns” / “Evitar UI chamativa”

Repita esse processo para cada princípio, criando uma estrutura de design abrangente que conecta valores da equipe com fundamentação psicológica.

Referências:

  • YABLONSKI, J. Leis Da Psicologia Aplicadas A Ux. 2020. 2º edição.

Métricas de UX e como implementar

Como saber se o design que você está criando realmente funciona? Como justificar decisões de design para stakeholders sem depender apenas de opiniões subjetivas?

Segundo o livro “Measuring the User Experience” de Tom Tullis e Bill Albert, medir a experiência do usuário não é apenas sobre provar valor — é sobre melhorar continuamente o produto. As métricas ajudam a identificar problemas antes que se tornem críticos, validar hipóteses de design e priorizar melhorias com base em impacto real.

Tipos de métricas de UX

  • Comportamentais
  • Atitudinais
  • Relativas ao engajamento

Métricas comportamentais

Capturam o que os usuários realmente fazem ao interagir com seu produto.

Taxa de sucesso da tarefa: Percentual de usuários que completam uma tarefa com sucesso. É a métrica mais direta para avaliar usabilidade — se os usuários não conseguem completar tarefas básicas, algo está fundamentalmente errado.
Tempo na tarefa: Quanto tempo os usuários levam para completar uma tarefa. Tarefas que demoram muito podem indicar confusão, complexidade desnecessária ou falta de clareza na interface.
Taxa de erro: Frequência com que usuários cometem erros durante uma tarefa. Erros frequentes sinalizam problemas de design que precisam ser corrigidos.
Número de cliques/toques: Quantas interações são necessárias para completar uma tarefa. Menos cliques geralmente significam melhor eficiência, mas isso deve ser balanceado com clareza — reduzir cliques não deve aumentar a carga cognitiva.

Métricas atitudinais

Estas métricas capturam o que os usuários pensam e sentem sobre sua experiência.

System Usability Scale (SUS): Questionário padronizado de 10 perguntas que fornece uma pontuação de 0 a 100 sobre a usabilidade percebida. Desenvolvido por John Brooke em 1986, o SUS continua sendo uma das métricas mais utilizadas por sua simplicidade e confiabilidade.
Net Promoter Score (NPS): Mede a probabilidade de usuários recomendarem seu produto. Pergunta simples: “Em uma escala de 0 a 10, qual a probabilidade de você recomendar este produto a um amigo?”
Customer Satisfaction (CSAT): Mede satisfação imediata após uma interação específica. Útil para avaliar pontos específicos da jornada do usuário.

Métricas de engajamento

Indicam como os usuários se relacionam com seu produto ao longo do tempo.

Taxa de retenção: Percentual de usuários que retornam ao produto após a primeira visita. Alta retenção indica que o produto entrega valor sustentado.
Frequência de uso: Com que regularidade os usuários retornam. Produtos bem-sucedidos criam hábitos de uso.
Taxa de abandono (churn): Percentual de usuários que param de usar o produto. Identificar quando e por que os usuários abandonam é crucial para melhorias.

Framework HEART do Google

O Google desenvolveu o framework HEART especificamente para medir experiência do usuário em escala. Usado no Google Analytics, cada letra representa uma categoria de métricas:
H – Happiness (Felicidade): Satisfação, facilidade de uso percebida, NPS. Mede atitudes subjetivas dos usuários.
E – Engagement (Engajamento): Frequência de uso, intensidade de uso. Mede o nível de envolvimento dos usuários.
A – Adoption (Adoção): Novos usuários, cadastros, features utilizadas. Mede quantos usuários começam a usar o produto ou novas funcionalidades.
R – Retention (Retenção): Taxa de retorno, churn rate. Mede quantos usuários continuam usando ao longo do tempo.
T – Task Success (Sucesso da Tarefa): Taxa de sucesso, tempo na tarefa, taxa de erro. Mede se os usuários conseguem completar suas tarefas.
O framework HEART é particularmente útil porque conecta métricas de UX a objetivos de negócio. Em vez de medir apenas usabilidade, ele considera o ciclo completo de vida do usuário.

Como implementar métricas de UX

  1. Comece com 3-5 métricas principais que realmente importam para seu produto.
  2. Estabeleça linha de base – Antes de implementar mudanças, meça o estado atual. Esta linha de base servirá como ponto de comparação para avaliar o impacto de melhorias futuras. Sem baseline, é impossível saber se houve progresso real.
  3. Colete dados.
    Ferramentas de analytics: Google Analytics, Mixpanel, Amplitude capturam comportamento quantitativo em escala. Configure eventos customizados para rastrear ações específicas relevantes para suas métricas.
    Testes de usabilidade: Observação direta de usuários completando tarefas fornece dados qualitativos ricos. Combine com questionários pós-teste para capturar métricas atitudinais.
    Pesquisas: SUS, NPS e CSAT podem ser implementados através de ferramentas como Typeform, SurveyMonkey ou integrados diretamente no produto.
    Heatmaps e session recordings: Ferramentas como Hotjar ou FullStory mostram onde usuários clicam, rolam e travam, fornecendo contexto visual para métricas comportamentais.
  4. Compare com benchmarks da indústria;
  5. Analise tendências ao longo do tempo, não apenas snapshots;
  6. Segmente por tipo de usuário, dispositivo, fluxo;
  7. Procure por correlações entre diferentes métricas. Por exemplo, se a taxa de sucesso de tarefa é alta, mas o tempo na tarefa também é alto, isso pode indicar que usuários estão conseguindo completar tarefas, mas com dificuldade excessiva.

Armadilhas comuns

Ao implementar métricas de UX, cuidado com estas armadilhas:
Métricas de vaidade: Números que parecem impressionantes mas não indicam valor real. Pageviews sem contexto de engajamento, downloads sem taxa de ativação, ou seguidores sem conversão são exemplos clássicos.
Otimização local: Melhorar uma métrica específica sem considerar o impacto no sistema como um todo. Por exemplo, reduzir tempo na tarefa removendo passos essenciais pode aumentar taxa de erro.
Paralisia por análise: Gastar tanto tempo coletando e analisando dados que nunca se toma ação. Como diz o provérbio: “Dados perfeitos amanhã são menos valiosos que dados bons hoje.”
Ignorar qualitativo: Métricas quantitativas dizem “o quê”, mas raramente dizem “por quê”. Combine sempre com pesquisa qualitativa para contexto completo.

Como afirmam Tullis e Albert: “Você não pode gerenciar o que não pode medir.” Métricas de UX não são apenas números — são a ponte entre experiência do usuário e impacto de negócio, provando que bom design não é luxo, mas necessidade estratégica.

Referências

  • Tullis, Tom & Albert, Bill. “Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics” (2013)
  • Rodden, Kerry, Hutchinson, Hilary & Fu, Xin. “Measuring the User Experience on a Large Scale: User-Centered Metrics for Web Applications” (Google HEART Framework, 2010)
  • Hall, Erika. “Just Enough Research” (2013)
  • Brooke, John. “SUS: A Quick and Dirty Usability Scale” (1996)
  • Sauro, Jeff & Lewis, James. “Quantifying the User Experience: Practical Statistics for User Research” (2016).

7 boas práticas para levantamento de requisitos

Levantar requisitos de software é um trabalho contínuo: Apesar de ter um template, consultar múltiplas partes e revisar, é possível que haja uma ou outra brecha na especificação. Este post traz um checklist prático e dividido em etapas, para evitar omissões e mal entendidos nesta etapa.

Levantar requisitos de software é um trabalho contínuo: Apesar de ter um template, consultar múltiplas partes e revisar, é possível que haja uma ou outra brecha na especificação.

Para você que trabalha com levantamento de requisitos, aqui vai um checklist prático e dividido em etapas, para evitar omissões e mal entendidos na especificação.

Antes da especificação

1 – Identifique a Dor Principal: No início do projeto, trabalhe junto ao Product Owner e stakeholders para identificar qual é a maior dor a ser resolvida, e formalize esta identificação em um lugar acessível a todos. A dor principal que o projeto visa resolver será utilizada posteriormente para priorização dos requisitos, evoluções, e para manter o foco no valor de negócio durante todo o desenvolvimento.

2 – Estabeleça um template: Manter a consistência na documentação de um projeto é importante e transmite credibilidade. Além disso, um bom modelo de documento, que exija determinadas informações, previne que algum detalhe seja esquecido.

Recomenda-se que o seu template tenha as seguintes informações:

  • 2.1 – Numeração de requisitos: Todos os requisitos devem ser numerados seguindo um padrão consistente (ex: 001, 002, etc). Esta numeração facilita a rastreabilidade e comunicação entre equipes.
  • 2.2 – Critérios de aceite: Para cada requisito, defina claramente como será testado através de critérios de aceite específicos, mensuráveis e verificáveis, com exemplos práticos. Estes critérios servem como base para testes automatizados e validação de entrega. Exemplo: “Ao clicar em “Enter”, a próxima tela deverá ser carregada em até 3 segundos.
  • 2.3 – Fluxos de exceção: Documente cenários de erro, falhas de sistema, dados inválidos e situações inesperadas (exemplo: Usuário tinha uma lista de vídeos para assistir, mas um dos vídeos está indisponível por falha do servidor ou porque o arquivo está corrompido. O que deve aparecer na tela? Deve pular automaticamente para outro vídeo e ignorar aquele? Essa ocorrência deve ser salva em algum log?). Para cada exceção, defina como o sistema deve reagir, que mensagens exibir ao usuário e se o problema deve ser registrado para análise posterior.
  • 2.4 – Protótipos e diagramas: Inclua wireframes, mockups, diagramas de fluxo e modelos de dados para tornar os requisitos mais tangíveis. Os protótipos ajudam os desenvolvedores a entender a expectativa visual, e os fluxos ajudam a validar cenários complexos com múltiplas exceções e validações.
  • 2.5 – Campos de dados: Para cada campo de entrada, especifique tamanho máximo, formato esperado, validações necessárias e comportamento em casos de erro. Por exemplo: “Campo CEP: 8 dígitos numéricos, formato XXXXX-XXX, validação via API dos Correios”. Além disso, especifique também o que deve ocorrer com campos muito grandes apresentados em tela (se serão apresentados pela metade, se ao clicar o usuário poderá ver mais, ou só de apontar o mouse o texto restante aparecerá em um tooltip, etc). Caso não seja especificado, é provável que os desenvolvedores utilizem um tamanho padrão para cada campo, mas é bom ser o mais completo possível.

Durante a especificação

3 – Requisitos não funcionais básicos: usabilidade, segurança e integração:

  • Usabilidade: Defina padrões de experiência do usuário, tempos de resposta esperados, acessibilidade e facilidade de aprendizado. Especifique métricas como “90% dos usuários devem completar a tarefa X em menos de 3 cliques”.
  • Integração: Como o sistema irá interagir com outros sistemas? incluindo APIs, formatos de dados, protocolos de comunicação e tratamento de indisponibilidades de serviços externos (este ponto se relaciona também com os fluxos de exceção).
  • Informações sensíveis: Estabeleça políticas claras para tratamento de informações sensíveis, incluindo: critérios de classificação de dados, métodos de criptografia, controles de acesso, logs de auditoria e conformidade com regulamentações (LGPD, GDPR). Defina quem tem acesso a quais dados e em que circunstâncias.

4 – Valide os requisitos com um ponto focal e um desenvolvedor: Esta etapa é extremamente negligenciada, muitas vezes por conta de prazos apertados. Entretanto, o ideal é que o documento de requisitos seja validado pelo menos uma vez por uma pessoa da área de negócio (que entende as necessidades do usuário) e um desenvolvedor (que compreende a viabilidade técnica e o esforço de desenvolvimento). Esta dupla validação identifica inconsistências, ambiguidades e problemas de implementação antes que se tornem custosos.

5 – Verifique requisitos conflitantes: Revise sistematicamente os fluxos e os requisitos para identificar contradições, sobreposições ou dependências problemáticas. Caso o projeto seja muito grande ou complexo, considere criar uma matriz de rastreabilidade.

Extra – Uso de IA: A inteligência artificial é uma grande aliada para revisar requisitos, identificar inconsistências, sugerir casos de teste e automatizar partes da documentação. Entretanto, aqui vai uma dica: Escreva primeiro uma versão sem IA, e só depois a utilize.

Este estudo testou a utilização de IA para a escrita, e os resultados mostram que a dependência completa de IA pode criar um débito cognitivo – diminuição da atividade cerebral em áreas como memória e criatividade. Portanto, os participantes que escreveram primeiro de forma livre e somente depois utilizaram a IA tiveram uma melhor performance.

Após a especificação

6 – Mantenha o documento vivo e versionado: Mantenha o documento sempre atualizado e use controle de versão rigoroso. Cada versão deve ter data, responsável pelas mudanças e resumo das alterações, usando ferramentas disponíveis como Git, SharePoint, dentre outras.

7 – Estabeleça um fluxo para mudanças de requisito: Um processo claro gera transparência para toda a equipe. Por isso, estabeleça critérios para alterações nos requisitos, incluindo: quem pode solicitar mudanças, impacto, quando as mudanças serão feitas e implementadas.

Mudanças não controladas são uma das principais causas de estouro de prazo e orçamento.

CHAOS REPORT, 2023.

Referências

  1. Nataliya Kosmyna, Eugene Hauptmann, Ye Tong Yuan, Jessica Situ, Xian-Hao Liao, Ashly Vivian Beresnitzky, Iris Braunstein, Pattie Maes. 2025. Your brain on ChatGPT: Accumulation of cognitive debt when using an AI assistant for essay writing task [Preprint]. arXiv. Available from: https://doi.org/10.48550/arXiv.2506.08872
  2. The standish group. CHAOS REPORT 2023. Available from: https://thestory.is/en/journal/chaos-report.

“Dark design patterns” – padrões obscuros de design

Há diversos tipos de Padrões Obscuros. Citaremos alguns deles abaixo.

  • Sopa de palavrinhas (“Trick wording”): Ao preencher um formulário, você responde a uma pergunta que o leva a dar uma resposta que não pretendia. Lendo rápido, a pergunta lhe parece perguntar algo, mas ao ler de novo, o conteúdo da pergunta é outro;
  • Item surpresa (“Sneaking”): Você tenta comprar algo, mas em algum momento o site insere um item a mais em sua cesta;
  • Vendendo a alma (“Hard to cancel”): Você entra em uma situação com muita facilidade, mas descobre que é difícil sair dela (por exemplo, uma assinatura premium);
  • Privacidade Zuckering: Você é levado a compartilhar publicamente mais informações sobre si mesmo do que pretendia;
  • Difícil de comparar (“Comparision prevention”): A loja torna difícil para você comparar o preço de um item com outro, então acaba não conseguindo decidir a compra com mais informação;
  • Desvio de atenção (“Visual interference”): O design foca propositadamente sua atenção em algo para distraí-lo quanto a outro ponto;
  • Custos escondidos (Hidden costs): Você chega à última etapa e descobre algumas cobranças inesperadas (por exemplo, taxa de entrega);
  • Isca e troca: Você se propõe a fazer algo, mas um evento diferente e indesejável acontece (por exemplo, vê um anúncio tentador, mas quando tenta finalizar a compra, percebe que a opção não mais está disponível, momento em que a loja te oferece outras opções mais favoráveis no negócio);
  • Vergonha de confirmação (“Confirmshaming”): A opção de recusar é formulada de forma a envergonhar o usuário. Por exemplo, quando o site mostra uma oferta e apresenta dois botões: “eu quero perder o desconto” e “eu quero desconto!”;
  • Anúncios disfarçados (Disguised ads): Anúncios que são disfarçados como outros tipos de conteúdo ou navegação, para que você clique neles.
  • Continuidade forçada (Sneaking): Quando sua avaliação gratuita com um serviço chega ao fim e seu cartão de crédito começa a ser cobrado silenciosamente sem nenhum aviso.
  • Spam de amigos: O produto solicita permissões de e-mail ou mídia social sob o pretexto de que será usado para um resultado desejável, mas envia spam a todos os seus contatos em uma mensagem que afirma ser sua.

Referências:

Vieses cognitivos no design

Você já ouviu falar em vieses cognitivos?

Um viés cognitivo é um atalho de pensamento que afeta as nossas percepções, e portanto, julgamentos e decisões. Imagine só: Um ser humano toma várias microdecisões durante um dia (“Vou levantar agora ou daqui a 5 minutos? O que comer para o café da manhã? Vou sair de sapato ou tênis?“). Só que tomar decisões é cansativo!

Por isso, durante a evolução o cérebro humano criou atalhos, permitindo concentrar esforços em decisões que realmente importam (chamamos isso de diminuir a carga cognitiva). Porém, um viés cognitivo pode nos levar a percepções que não refletem toda a realidade ou contribuir para comportamentos irracionais. É isso que o Rian Dutra explica em seu livro “Enviesados”.

Abaixo, traremos os principais vieses apresentados no livro:

Viés da ancoragem

Imagine que você não tem noção de quanto custa uma bicicleta elétrica. Se alguém te falar que é 6000, você vai acreditar. Caso uma segunda pessoa te ofereça uma bicicleta elétrica de 4000, você pode achar que é um bom preço, pois é mais barato. Ou seja, o valor da primeira oferta de 6000 alterou sua percepção sobre a oferta de 4000.

A primeira oferta (de 6000) foi uma âncora. As âncoras são informações iniciais que os usuários obtêm, e que podem afetar o julgamento e interpretações posteriores. A âncora pode ser usada tanto para fazer um produto parecer mais barato ou mais caro. Também pode ser usada para diminuir a carga cognitiva (por exemplo, sugerindo um valor de contribuição, ao invés de deixar em aberto).

A primeira oferta (de 6000) foi uma âncora. As âncoras são informações iniciais que os usuários obtêm, e que podem afetar o julgamento e interpretações posteriores. A âncora pode ser usada tanto para fazer um produto parecer mais barato ou mais caro. Também pode ser usada para diminuir a carga cognitiva (por exemplo, sugerindo um valor de contribuição, ao invés de deixar em aberto).
Viés da ancoragem na prática.

Viés da perda (aversão à perda)

O ser humano tem 2 vezes mais medo de perder do que alegria de ganhar algo, afinal, “mais vale um pássaro na mão do que dois voando”. Provavelmente por questões evolutivas, as emoções negativas têm mais impacto que as emoções positivas.

Por exemplo, nas primeiras compras online, existia um receio muito grande de que a encomenda não fosse chegar. Era uma tecnologia nova, que iniciou-se na base da confiança. Para aliviar o medo de perder algo, os e-commerces começaram a dar mais informações sobre onde estava a encomenda.

A aversão à perda também pode ser usada para mostrar a um cliente o que ele perde ao não adquirir seu produto (os seguros de carro são um bom exemplo). Com isso, aumenta-se a chance de engajar mais clientes.

Efeito cashless

Quanto mais “real” for o pagamento, mais doloroso é. Por isso sentimos mais “dó” de gastar dinheiro físico do que sentimos ao fazer uma compra com o cartão de crédito. Quanto menos vemos o dinheiro sendo gasto, mais valorizamos uma aquisição. Com o cartão, porém, há a impressão de que não foi gasto tanto dinheiro assim, aumentando a propensão a comprar mais e por um valor maior.

A Disney, Amazon e tantos outros perceberam isso, e tornaram as compras online cada vez mais fáceis, até com compras de 1-clique (exemplo abaixo).

Viés do custo afundado

Imagine que você começou a aprender a tricotar. Comprou todas as agulhas, linhas, aprendeu a fazer alguns tipos de nó e até já fez as suas primeiras peças. Se alguém te falasse que é uma perda de tempo, você desistiria? Provavelmente não, porque já investiu dinheiro e tempo para aprender.

O viés do custo afundado é similar ao princípio físico da inércia, no sentido de que quando investimos muito em algo, tendemos a permanecer ali. Em aplicativos e sistemas, permitir que o usuário experimente seu produto e faça progressos, cumpra metas, favorece que ele tenha a tendência de continuar usando o seu produto.

Viés do status quo

A psicologia identificou que, se não há um grande incômodo, nosso cérebro tem uma preferência natural por deixar as coisas exatamente como elas estão. Os seres humanos iniciaram como nômades e passaram a ser sedentários, muito por conta de terem achado espaços confortáveis o suficientes para não precisar buscar outros incessantemente.

Preferimos continuar em nossa rotina, mesmo que hajam alternativas mais vantajosas. Nosso estado atual vira um ponto de referência, e qualquer mudança pode ser percebida como uma possível perda. Em aplicativos e sistemas, é possível usar o princípio do status quo para manter um usuário consumindo o produto (facilitando suas decisões, como deixar a resposta pré-preenchida), ou enfatizando os benefícios de mudar, caso seja esse o comportamento almejado.

Viés de enquadramento

Lembra daqueles anúncios famosos de pasta de dente? “9 em cada 10 dentistas recomendam”. Isso é uma forma de apresentar a informação. E se as propagandas falassem “1 em cada 10 dentistas não recomendam” ou “10% dos dentistas não recomendam”? Pareceria bem ruim.

Esse e vários outros exemplos mostram que manipular a forma como a informação é apresentada pode influenciar e alterar a tomada de decisão. O efeito de enquadramento atua utilizando a aversão à perda, de forma a maximizar algum aspecto positivo do produto, para que o consumidor preste atenção no ponto que o interessa, e não fique receoso de estar fazendo uma escolha ruim.

Fadiga da decisão

Quando sobrecarregados com muitas opções, podemos demorar muito ou até desistir de tomar uma decisão. Ao ser confrontados com muitas opções em um cardápio ou um aplicativo de compra, é bem provável que iremos na opção mais fácil. Inclusive, é possível que seja perdida uma boa oportunidade, simplesmente porque é cansativo ter que escolher tanto.

Para evitar a fadiga de decisão, devemos optar por uma boa arquitetura da informação, de forma a ser fácil discernir um tópico de outro, bem como dividir em partes os fluxos que podem ser muito grandes. O ideal é reduzir ao máximo as opções disponíveis. Quando isso não é viável, pode-se inserir ou criar algoritmos de recomendação que aprendem o gosto do usuário. Dessa forma, as recomendações irão ser cada vez mais assertivas e facilitar a sua escolha nas próximas vezes.

Heurística de afeto

Nossas decisões não são racionais, mas influenciadas por emoções. As emoções funcionam como “atalho mental”, quando temos alguma restrição. Quando pressionados, temos poucas informações ou o julgamento for muito complexo, tendemos a confiar nas nossas emoções mais do que em informações concretas (mesmo que não percebamos).

Para projetar considerando a heurística de afeto, é importante entender as emoções do usuário, considerando seus sentimentos para criar produtos que os cativem. Para isso, pesquisas com usuários e análise de dados serão seus melhores amigos.

Para você que leu até aqui, meu muito obrigado!

Esse texto é um resumo do livro “Enviesados” do Rian Dutra.

Composição mínima de imagens para geração de prompts

Neste post, mostramos um compilado de estilos visuais que podem auxiliar no momento em que escrevemos um prompt de geração de imagens.

A geração de imagens para trabalhos artísticos, projetos, inspirações ou até mesmo hobbies perpassa a escolha de um ou mais estilos representativos. Muitas vezes, temos uma imagem específica em mente, mas não conseguimos saber como procurar esse estilo na internet ou como instruir o ChatGPT ou outra IA a gerar uma imagem nesse estilo.

Para isso, eu e o Luiz Carlos Branco elaboramos um compilado de estilos visuais que podem auxiliar no momento em que escrevemos um prompt de geração de imagens. Afinal, quanto mais específico, maior a chance de o resultado gerado ser parecido com o que tínhamos em mente.

EstiloDescriçãoTermos de pesquisa
Flat DesignEstilo minimalista, sem profundidade, cores sólidas.flat illustration, flat design character, minimalist flat icon.
Line ArtDesenho só com linhas, muitas vezes monocromático.line art, continuous line drawing, minimal line sketch.
CartoonDesenhos caricatos, expressivos.cartoon style, toon character.
ComicDesenhos com toque realista e iluminação marcada.comic book illustration.
VectorImagens vetoriais, limpas e escaláveis. Não é exatamente um estilo, mas muito comum em pesquisas.vector illustration, vector graphic, vector icon.
3D RenderImagens renderizadas com profundidade realista ou estilizada.3d render, 3d character, 3d scene.
IsometricVista em perspectiva 3D sem distorção, muito usado em infográficos.isometric illustration, isometric infographic.
CyberpunkFuturista, ambientes urbanos iluminados por neon.cyberpunk art, sci-fi illustration, futuristic city, neon art, dystopian art.
Pixel ArtGráfico retrô de videogame, com blocos visíveis.pixel art, 8-bit style, retro pixel illustration.
Rough SketchRabiscos, rascunhos, traços soltos.sketch style, pencil sketch, hand-drawn sketch.
Anime / MangaEstilo japonês com olhos grandes, expressões fortes.anime style, manga illustration, japanese anime art.
Low PolyEstilo 3D com poucos polígonos, formas geométricas.low poly art, low poly 3d, geometric style.
InfographicEstilo informativo, usado para explicar conceitos.infographic style, educational illustration, diagram drawing.
Hand-drawn (desenhado a
mão)		Linhas irregulares, imperfeições intencionais e elementos que simulam rabiscos, esboços ou escrita manual.hand-drawn illustration,
hand-drawn doodle,
sketch style illustration,
handmade illustration.
RealistImagens que tentam simular a realidade.realistic drawing, photorealistic render, realistic portrait.
Gothic / Horror / Dark ArtElementos vitorianos, fantásticos ou de horror.gothic horror art, dark illustration, macabre art, gothic fantasy.

Surrealism		Imagens ilógicas, irracionais ou abstratas. Associado à composição, ao invés de um objeto.surreal illustration, abstract illustration, dreamlike art, conceptual illustration.
Pop ArtIncorpora imagens da cultura popular e de massa, utilizando cores vibrantes e/ou técnicas de impressão em série.pop art illustration, pop art style, comic art, bright colors illustration.
SteampunkCombinação de elementos de tecnologia distópica com ambientação de revolução industrial e era vitoriana.vector illustration, vector graphic, vector icon.
ChibiPersonagens com olhos grandes, corpos pequenos e características fofas.chibi character, chibi art, chibi style.
Collage Composição de elementos sobrepostos, com aparência recortada.collage art, mixed media collage, cutout illustration, photo montage art.
CaricatureRepresentações exageradas e humorísticas de pessoas / personagens. caricature illustration, funny portrait, exaggerated features art.
Doodle / zentangle Desenhos espontâneos, padrões repetitivos e linhas contínuas.doodle art, zentangle pattern, hand-drawn sketch, abstract doodles.
VaporwaveEstética nostálgica com tons neon, glitch art, anos 80 e 90.vaporwave art, neon retro, glitch illustration, synthwave aesthetic.
Point / dot artTécnica de criação de imagens por meio de pontos (pontilhismo).pointillism, dot art, stippling art, dotwork illustration.
Fluffy (pelúcia)Estilo fofo e macio, com foco em pelúcia, nuvens ou elementos reconfortantes.fluffy art, soft character design, kawaii fluffy illustration, cozy art style.
Hard-edge paintingUso de cores sólidas e limites nítidos, sem transições suaves — formas geométricas e contraste.hard edge art, geometric abstraction, sharp color blocks, clean lines illustration.
OrigamiArte baseada em dobraduras, com formas com aparência de papel ou estruturas angulares.origami art, paper fold illustration, geometric paper style, folded paper effect.
Skeuomorphism (realista para interfaces)Imitação de objetos reais com aparência, texturas e sombras detalhadas.skeuomorphic design, realistic UI, skeuomorphic interface.
NeomorphismEstilo suave com botões que parecem “entalhados” ou “elevados” da interface, usando sombras difusas.neomorphism UI, soft UI, neumorphic design.
Liquid GlassInspira-se em líquidos e vidro fluido, com transparência dinâmica, reflexos e luz suave.liquid glass UI, fluid glass design, glass liquid effect.
MinimalistDesign limpo, simples, com foco no essencial e sem excessos visuais.minimalist UI, clean interface, minimal design.
Glassmorphism (vidro)Transparência fosca semelhante a vidro embaçado, com camadas translúcidas e desfoque.glassmorphism UI, frosted glass effect, translucent UI.
Claymorphism (argila)Elementos arredondados, 3D suave, cores vibrantes e textura plástica, lembrando massinha.claymorphism UI, claymorphic design, soft 3D UI.
Negative SpaceUso criativo do espaço vazio para destacar elementos principais e guiar a atenção.negative space UI, whitespace design, clean spacing UI.
Estilos visuais e suas palavras-chave.

Conheça também

Material de apoio para imagens digitais – Nvlan

Portal Despoluir: Modernização e Redesenho da Experiência

O programa Despoluir é o maior programa ambiental da iniciativa privada do Brasil, promovendo serviços gratuitos aos transportadores como avaliações de opacidade, avaliação da qualidade do diesel e serviço de orientação ao transportador.

Desafio

O portal anterior do programa Despoluir apresentava limitações significativas que comprometiam sua eficácia. O conteúdo estava desatualizado e organizado de forma excessivamente técnica, dificultando o acesso à informação pelos usuários finais.

A identidade visual era pouco atraente e não havia responsividade adequada para dispositivos móveis. Era necessário desenvolver um novo portal mais moderno, claro e estratégico para atender adequadamente aos três públicos principais: transportadores interessados nos serviços, representantes do governo e federações de transporte rodoviário.


Metodologia e processo de desenvolvimento

O projeto foi conduzido através de reuniões mensais com stakeholders para compreender os objetivos do programa e alinhar as prioridades de negócio. Além disso, fizemos coletivamente uma etapa de desk research para entender melhor o negócio. A partir dos dados de monitoramento do Google Analytics, pudemos traçar quais eram as páginas mais acessadas, e quais os gargalos os usuários possuíam ao encontrar uma informação.

Assim, pudemos traçar personas interessadas e utilizamos a matriz CSD para mapear hipóteses e necessidades dos públicos-alvo, direcionando tanto a estratégia de conteúdo quanto a arquitetura da informação.


Foi realizada uma curadoria criteriosa do conteúdo existente, removendo publicações obsoletas e reescrevendo textos com foco na clareza e na explicação dos produtos e serviços oferecidos.

Migração e preservação de conteúdo

A migração técnica do portal envolveu múltiplas etapas para garantir a continuidade do acesso aos conteúdos existentes. Para preservar a experiência do usuário e manter a autoridade de SEO do domínio, implementei um sistema de redirecionamento das URLs antigas para as novas páginas correspondentes, assegurando que links externos e bookmarks continuassem funcionais.

Inicialmente, realizei a migração do antigo SharePoint para SharePoint Online utilizando o SharePoint Migration Tool. Posteriormente, exportei o conteúdo através de ferramentas específicas do WordPress, com apoio de planilhas Excel para o mapeamento e organização dos dados e nova importação no WordPress.

Solução implementada

Propusemos uma nova linguagem visual baseada em publicações recentes do programa, incorporando cores mais vibrantes e linguagem mais acessível, além de reduzir blocos extensos de texto para favorecer a escaneabilidade.

A arquitetura da informação foi completamente redefinida, tornando a navegação mais intuitiva e alinhada aos fluxos reais dos usuários. Durante este processo, foi feito um processo educativo com as áreas envolvidas, pois haviam algumas dúvidas sobre a disposição das informações e serviços. Os componentes foram escolhidos e documentados com foco na padronização e escalabilidade do design, priorizando a performance em dispositivos móveis, que correspondem à maior parte do acesso.

A página de contato foi redesenhada para explicar claramente quais serviços estão disponíveis em cada federação, eliminando ambiguidades que antes só eram esclarecidas após o envio de solicitações. A disponibilidade regional de cada serviços também foi incluída na página individual de cada um, evitando uma possível frustração do usuário que poderia não ser atendido na região em que se encontrava.

Resultados obtidos

Os indicadores iniciais demonstram melhorias significativas na performance do portal: aumento no tempo médio de permanência, melhoria nas taxas de conversão (solicitações de atendimento) redução na taxa de rejeição e crescimento nos acessos via dispositivos móveis.

Os stakeholders reportaram feedback positivo sobre a clareza das informações e a melhoria da experiência de navegação, validando as decisões tomadas durante o processo de redesenho.

Gostaria de agradecer a todo o time envolvido neste processo, e a parceria durante todo o processo de trabalho e entrega. Foi um período de grande crescimento para mim ter feito parte desta equipe.

ITL: Migração de site para WordPress

Com a ajuda da equipe envolvida, conduzi a migração do site institucional do ITL (Instituto de Transporte e Logística) para WordPress, focando na modernização da arquitetura, implementação de responsividade e melhorias significativas de acessibilidade. O projeto envolveu a reconstrução completa da experiência digital, mantendo a identidade visual consolidada da instituição.

Análise da Estrutura Original

O site original apresentava uma estrutura bem definida para uma instituição educacional, com foco em três pilares principais:

  • Cursos Executivos: Preparação para desafios do setor
  • Especializações e MBAs: Formação de alta performance
  • Certificações Internacionais: Qualificação com instituições globais

Estratégia de Migração

1. Arquitetura de Templates Personalizados

Desenvolvi uma estrutura de templates modulares para garantir consistência e flexibilidade:

Hierarquia de modelos de página:

  • Cabeçalho responsivo com navegação adaptativa. Foram construídos 2 cabeçalhos para melhor divisão da informação.
  • Página inicial com apresentação dos cursos e notícias mais recentes;
  • Templates específicos para páginas de cursos, especializações e MBAs.
  • Páginas individuais de cursos com estrutura padronizada.
  • Página de resultados de busca otimizada.
  • Página de erro personalizada mantendo o branding.
  • Adaptações para responsividade em dispositivos móveis.

2. Implementação de Responsividade

Mobile-First Approach:

  • Redesenho completo da experiência mobile, priorizando conteúdo e navegação;
  • Cards de cursos empilháveis em dispositivos menores;
  • Menu hambúrguer com animações suaves.

3. Melhorias de Acessibilidade (WCAG 2.1)

Navegação por Teclado:

  • Implementação de skip links para conteúdo principal;
  • Focus indicators visíveis em todos os elementos interativos;
  • Ordem lógica de tabulação.

Legibilidade e Contraste:

  • Ajuste de contrastes para atender padrão AA;
  • Hierarquia tipográfica clara com tamanhos escaláveis;

4. Otimização de Performance

  • Implementação de cache avançado;
  • Minificação de CSS/JS;
  • Redirecionamento de URLs antigas (com as quais haviam conexões de outros sites e redes sociais).

5. Navegação Intuitiva

Apesar de manter a estrutura do site original, algumas adaptações para a experiência do usuário foram implementadas, como:

  • Aumento de contraste: A leitura de botões foi facilitada pelo aumento de contraste implementado.
  • Call-to-Actions Estratégicos: Posicionamento otimizado para conversão

6. Integração com Analytics para Monitoramento

  • Google Analytics 4 com eventos personalizados;
  • Monitoramento de Core Web Vitals;
  • Heatmaps para análise de comportamento;

Resultados Alcançados

Performance

  • Melhoria de 65% no tempo de carregamento mobile;
  • Score 80+ no PageSpeed Insights;
  • Redução de 10% na taxa de rejeição;

Entrega e Capacitação da Equipe

Após a conclusão da migração e testes finais, o sistema foi oficialmente entregue ao ITL. Realizei uma oficina prática com a equipe de comunicação e marketing da instituição, capacitando os usuários internos para o uso autônomo da plataforma WordPress para publicação de notícias. A oficina incluiu a criação de um manual de uso personalizado e estabelecimento de fluxos de trabalho para manutenção contínua do site.

E-AUDSUS: Modernizando a Transparência no SUS

Participei da concepção e desenvolvimento do E-AUDSUS, uma plataforma digital que revolucionou a forma como o Departamento Nacional de Auditoria do SUS (DENASUS) gerencia solicitações de informação e demandas de auditoria. O projeto nasceu da necessidade de criar um canal de comunicação eficiente entre o público e o órgão, seguindo os padrões de transparência do governo federal.

Descoberta e Levantamento de Requisitos

O trabalho de aprimoramento da experiência do usuário começou com um mergulho profundo nas necessidades dos clientes e no estudo dos processos existentes. Durante agosto de 2022, nossa equipe conduziu um levantamento extensivo que incluiu:

  • Análise documental;
  • Reuniões semanais de validação de requisitos;
  • Mapeamento de processos.

Arquitetura da Experiência

Desenvolvemos uma página inicial acolhedora que contextualiza o visitante sobre o propósito do E-AUDSUS. O design segue rigorosamente o padrão GOV.BR, garantindo consistência com outros serviços governamentais. A interface apresenta claramente as duas principais funcionalidades:

  • Pedidos de Informação: Para solicitações baseadas na Lei de Acesso à Informação;
  • Denúncias: Para situações que requerem investigação auditorial.

Fluxo de Peticionamento Externo

1. Solicitação Inicial

Criamos um formulário intuitivo onde o cidadão pode registrar sua demanda. As telas foram cuidadosamente estruturadas em abas para organizar os dados da solicitação, do solicitante, as informações relativas ao protocolo SEI, o detalhamento e anexos, caso existam.

As abas foram pensadas tanto para o solicitante quanto para a equipe interna que fará o preenchimento das etapas seguintes.

Análise Interna

3. Análise de Admissibilidade

Projetamos um sistema robusto para análise interna das demandas, incluindo:

  • Critérios de Admissibilidade: Interface estruturada para verificar atividades realizadas e planejadas
  • Análise Multicriterial: Seções dedicadas para Competência, Materialidade e Relevância
  • Jornada Transversal: Abas que representam todo o ciclo de vida da auditoria (solicitação → demanda → planejamento → execução → monitoramento → comunicações)

4. Fluxo de Decisão

O analista competente pode tomar algumas decisões para triar as demandas que chegarem, sendo elas. O fluxo foi pensado para que não houvessem muitos cliques ao realizar as seguintes ações:

  • Justificar adequadamente decisões de não admissão da demanda;
  • Encaminhar demandas aprovadas para a esfera competente, quando não forem relativas ao órgão de auditoria;
  • Manter rastreabilidade completa do processo.

Sistema de Gestão

5. Dashboard de Auditorias

Para suportar a visão gerencial durante o processo de triagem de demandas, também foi elaborada uma interface de relatórios, contendo:

  • Métricas Visuais: Cards coloridos mostrando auditorias planejadas, não recebidas e em andamento
  • Gestão de Pessoas: Interface para acompanhar a distribuição de trabalho entre auditores
  • Histórico Completo: Sistema de busca e filtros para localizar informações específicas

Adequação Organizacional

Adaptamos toda a nomenclatura e estrutura dos protótipos para refletir a nova organização do AudSUS, demonstrando flexibilidade e atenção aos detalhes organizacionais Foram feitas entrevistas com várias das áreas envolvidas, afim de manter coesão entre as ações do sistema e evitar redundâncias.

Padrões GOV.BR

Implementamos rigorosamente os padrões visuais e de usabilidade do Design System do governo federal, garantindo familiaridade e acessibilidade para os usuários.

Referências

Design system do Governo: https://www.gov.br/ds/home