songalobung/ui-ux-design

Design de UI/UX Centrado no Ser Humano

Torne a coisa útil compreensível, acessível e confiável para as pessoas que precisam dela. O polimento visual apoia uma boa experiência; ele não pode compensar a resolução do problema errado, conteúdo confuso, controles inacessíveis ou um fluxo de trabalho não testado.

Princípios operacionais

1. Comece com pessoas e resultados. Entenda quem está tentando fazer o quê, em que contexto, com quais restrições. Não confunda uma solicitação de stakeholder, funcionalidade ou tendência com uma necessidade validada de usuário.
2. Projete toda a jornada. Considere as etapas, canais, transferências, resultados, caminhos de recuperação e necessidades de suporte antes de polir uma tela.
3. Torne evidências e suposições visíveis. Separe o que os usuários disseram ou a pesquisa demonstrou de interpretações e hipóteses. Não invente usuários, pesquisas, testes, métricas, depoimentos ou fatos do produto.
4. Inclua pessoas que muitas vezes são excluídas. Considere variação em habilidade, idade, idioma, alfabetização, cultura, dispositivo, conectividade, tempo, confiança, privacidade e ambiente. Inclua pessoas com deficiência em pesquisa e avaliação quando possível.
5. Prefira clareza, controle e recuperação. Explique o estado atual, torne a próxima ação útil aparente, evite erros previsíveis e forneça maneiras adequadas de sair ou se recuperar.
6. Trate a acessibilidade como um requisito de design e implementação. Use normas aplicáveis com precisão, mas não confunda conformidade técnica com prova de usabilidade.
7. Use padrões e efeitos visuais a serviço da tarefa. Seja coerente e distinto sem fazer os usuários decodificarem a interface.
8. Itere a partir de problemas observados. Prototipe cedo, avalie com pessoas representativas, corrija barreiras de alto impacto e continue aprendendo após o lançamento.
9. Pense sobre o produto antes de suas telas. Entenda valor verificado, realidades de negócio/serviço, metas do usuário, risco e ciclo de vida. Não faça todo produto parecer o mesmo modelo da moda.
10. Use narrativa visual com honestidade. Molde atenção, atmosfera, imagens, profundidade e ritmo para esclarecer o significado. Nunca fabrique evidências ou deixe que a composição esconda informações consequentes.
11. Pratique contenção de design. Gradientes, vidro, cartões, movimento, 3D e decoração devem merecer seu lugar. Remova efeitos que não melhorem a clareza da tarefa, identidade ou feedback útil.

Modelo operacional multidisciplinar

Para trabalho substancial de design, aplique oito lentes complementares em sequência e deixe-as se desafiar mutuamente: design de produto verifica adequação da tarefa e do produto; pesquisa de UX verifica evidências e suposições; direção criativa verifica originalidade e coerência; arquitetura de sistemas de design verifica reutilização e consistência; engenharia frontend verifica viabilidade e comportamento renderizado; design de interação/movimento verifica estado, feedback e movimento proposital; auditoria de acessibilidade/usabilidade verifica operabilidade e inclusão; e um crítico de design implacável busca as razões mais claras pelas quais o resultado ainda pode falhar. O crítico deve ser rigoroso com o trabalho e respeitoso com as pessoas. Não afirme ser um profissional humano credenciado ou ter realizado pesquisa, auditoria ou teste que não ocorreram. Responsabilidades detalhadas e a sequência de revisão estão em references/design-capability-playbook.md.

Selecione a profundidade certa

Para uma pequena alteração de componente, inspecione convenções próximas, identifique estados afetados, implemente e execute verificações proporcionais. Para uma tela ou fluxo, use o loop de design completo abaixo. Para um novo produto, fluxo de trabalho de alto risco ou problema ambíguo, faça descoberta e validação antes de se comprometer com uma solução polida. Nunca infle uma pequena tarefa em uma cerimônia processual; nunca pule as perguntas humanas e de acessibilidade meramente porque o entregável é visual.

Loop de design ponta a ponta

1. Enquadre o problema

Identifique o público-alvo, tarefa do usuário, resultado desejado, restrições de negócio ou serviço, ambiente de uso, plataforma, conteúdo, riscos e o que está explicitamente fora do escopo. Inspecione o produto existente e o repositório antes de alterá-los: navegação, evidências de análise ou pesquisa se disponíveis, rotas, componentes, tokens de design, cópia, dependências e convenções da plataforma.

Pergunte: O que a pessoa precisa realizar? O que ela precisa saber antes de agir? O que acontece se ela for bem-sucedida, falhar, parar ou retornar mais tarde? Quais suposições não foram verificadas? O que tornaria esta experiência insegura, excludente, confusa ou cara?

Não presuma que rótulos demográficos explicam comportamento. Prefira contexto observável, metas, barreiras e evidências a estereótipos ou personas fictícias. Se faltar contexto crítico, faça uma pergunta focada; caso contrário, declare uma suposição conservadora e prossiga.

2. Pesquise necessidades e contexto de forma proporcional

Use o método mais leve que possa responder à decisão em questão: revise pesquisas existentes e feedback de suporte; inspecione análises ou resultados de tarefas onde disponíveis; entreviste ou observe usuários; conduza investigação contextual; mapeie uma jornada; ou teste um protótipo. Faça perguntas abertas e não indutoras sobre comportamento real recente. Observe o que as pessoas fazem bem como o que dizem. Proteja a privacidade, obtenha consentimento apropriado e não colete dados sensíveis sem uma necessidade e salvaguardas claras.

Recrute pessoas representativas das tarefas e contextos relevantes, incluindo pessoas com deficiência e pessoas que enfrentam barreiras de acesso. Evite tratar um participante como representante de toda uma população. Registre o método, limitações da amostra, evidências e questões não resolvidas. Se a pesquisa direta não estiver disponível, diga isso e rotule quaisquer necessidades inferidas como hipóteses para validação posterior.

3. Mapeie o serviço e a informação

Mapeie a tarefa ponta a ponta, do gatilho ao resultado bem-sucedido, incluindo pré-requisitos, decisões, erros, interrupções, transferências, ajuda e visitas de retorno. Marque etapas desnecessárias, entrada repetida, elegibilidade pouco clara, becos sem saída e pontos onde as pessoas precisam de segurança ou assistência humana.

Organize o conteúdo em torno das perguntas e ações do usuário, não do organograma da organização. Dê a cada página ou visão um propósito claro. Use cabeçalhos descritivos, agrupamento significativo e navegação previsível. Mantenha informações e escolhas principais visíveis quando os usuários precisarem delas; use divulgação progressiva apenas quando reduzir a carga cognitiva sem esconder uma escolha consequente ou próximo passo.

4. Priorize e defina o sucesso

Priorize por impacto no usuário, frequência, gravidade da falha, risco de acessibilidade e incerteza — não por novidade visual. Defina como é o sucesso em termos observáveis: completar uma tarefa, encontrar informações corretas, recuperar-se de um erro ou entender uma decisão. Use medidas de resultado apenas quando puderem ser coletadas honestamente e interpretadas com suas limitações. Não invente melhorias de conversão ou afirme causalidade apenas a partir de um redesign visual.

5. Explore antes de se comprometer

Esboce ou prototipe múltiplas estruturas plausíveis quando houver incerteza significativa. Comece com decisões de fluxo ou wireframe de baixa fidelidade antes de investir em decoração. Compare alternativas em relação à clareza da tarefa, esforço do usuário, acessibilidade, viabilidade e adequação ao produto. Use uma referência fornecida para extrair princípios — não para copiar um layout ou imitar uma identidade distinta.

6. Especifique estrutura e comportamento

Crie um resumo de design proporcional: usuários e contexto; tarefa e resultado; hierarquia de conteúdo; ações primárias e secundárias; direção visual; estados críticos; restrições da plataforma; alvo de acessibilidade; suposições conhecidas; plano de validação. Defina contratos de interação para controles: propósito, métodos de entrada disponíveis, transições de estado, feedback, erro/recuperação, comportamento de teclado/foco e o que a tecnologia assistiva deve saber.

7. Construa sobre o sistema existente

Inspecione e reutilize tokens, componentes, semântica, padrões de layout e comportamento da plataforma já estabelecidos. Implemente com a pilha nativa do repositório. Adicione dependências apenas quando elas resolverem uma necessidade real e forem compatíveis com restrições de desempenho, manutenção, acessibilidade e licenciamento. Crie componentes compartilhados quando o uso repetido ou comportamento complexo justificar a abstração; mantenha elementos únicos simples.

8. Valide, refine e relate

Teste tarefas completas em tamanhos realistas e com conteúdo realista. Revise com teclado, ponteiro, toque, zoom/redimensionamento de texto, movimento reduzido e tecnologia assistiva relevante onde disponível. Conduza sessões de usabilidade com pessoas representativas para fluxos significativos. Registre observações como evidência, distinga gravidade de frequência, corrija as barreiras de maior impacto e reteste. Declare o que foi testado, o que não foi, incerteza remanescente e problemas conhecidos. Nunca afirme conformidade, validação do usuário ou uma verificação bem-sucedida de navegador sem evidência.

Orientação complementar detalhada

Carregue as referências relevantes para a tarefa em vez de confiar na memória ou apenas neste resumo. O catálogo de ferramentas é opcional: nunca exija um serviço nomeado, afirme acesso que não está disponível ou use uma nova biblioteca apenas porque aparece no catálogo.

• references/human-centered-process.md — descoberta, ética de pesquisa, mapeamento de jornada, estrutura de conteúdo, priorização e teste de usabilidade prático.
• references/accessibility-inclusive-design.md — design inclusivo de deficiências, limites do WCAG 2.2, implementação semântica, teclado/foco, formulários, mídia, movimento e verificações de tecnologia assistiva.
• references/interaction-patterns.md — feedback de ação, navegação, formulários, busca, tabelas, diálogos, ações destrutivas, erros, estados vazios/carregamento e decisões de interação responsiva.
• references/visual-design-systems.md — hierarquia, tipografia, cor, espaçamento, layout, conteúdo, tokens, tema, imagens, movimento e direção visual coerente.
• references/design-capability-playbook.md — métodos explícitos passo a passo para inteligência de design, direção criativa, pesquisa, layout, tipografia, cor, arquitetura, psicologia de UX, interação, movimento, design responsivo e QA renderizado. Leia isto para novas telas, sistemas de design, atualizações visuais ou solicitações detalhadas de usuário.
• references/design-intelligence-architecture.md — registros de raciocínio de design, crítica visual, simulação de alternativas, interpretação de captura de tela, comparação design-código, regressão visual, UX comportamental, inteligência responsiva/de desempenho, governança, memória de projeto, benchmarks e melhoria controlada. Leia para trabalho avançado de produto ou quando o usuário solicitar sistemas de inteligência de design.
• references/tool-selection-and-workflow.md — fluxo de trabalho opcional de descoberta a entrega e guia de seleção para as ferramentas nomeadas de cor, tipo, pesquisa, componente, movimento, 3D, ícone, ilustração, foto e QA do usuário. Leia ao escolher ou usar referências externas, ativos ou bibliotecas de implementação. Sempre verifique documentação atual, compatibilidade, preços e direitos.
• references/tool-source-notes.md — notas de verificação de fonte primária datadas para um subconjunto dessas ferramentas; use como ponteiros de link, não um substituto para verificar os termos atuais da fonte.
• references/curated-source-research.md — livros adicionais do usuário, artigos de UX, resumos de pesquisa e links de fonte da Apple/Meta, com conclusões verificadas, proveniência, escopo de evidência e limitações. Carregue ao consultar essas fontes ou escolher referências de plataforma/e-commerce.
• references/knowledge-library.md — mapa da biblioteca de referência curada completa e receitas de carregamento baseadas em tarefa. Leia ao planejar trabalho substancial ou selecionar referências.
• references/design-philosophy.md — pensamento de produto, narrativa visual, persuasão ética e contenção.
• references/design-styles.md, references/typography.md, references/color-theory.md e references/layout-patterns.md — conhecimento detalhado de design para direção visual e composição.
• references/ux-patterns.md, references/motion-design.md e references/design-systems.md — padrões de tarefa, movimento proposital e sistemas reutilizáveis.
• references/accessibility.md e references/platform-guidelines.md — roteamento rápido de acessibilidade e adaptação específica de plataforma. Verifique detalhes voláteis da plataforma na documentação oficial atual.
• references/anti-ai-slop.md e references/visual-qa.md — critique decisões genéricas de design e inspecione/corrija o produto renderizado.
• references/quality-assurance.md — revisão de design, avaliação de usabilidade, QA de implementação, gravidade, iteração e entrega honesta.
• references/standards-and-sources.md — referências autoritativas e quais são normativas, informativas, específicas de plataforma ou heurísticas.
• references/source-patterns.md — padrões observados nas doze bibliotecas de UI fornecidas pelo usuário, além de precauções de reutilização específicas de item.
• templates/design-brief.md e templates/usability-test-plan.md — modelos de trabalho adaptáveis. Use apenas campos relevantes para o escopo.
• templates/design-decision-log.md e templates/design-evaluation.md — registros reutilizáveis para raciocínio, alternativas, evidência, implementação, escopo de teste e incerteza remanescente.

Barra de aceitação de implementação

Antes de considerar uma interface completa, confirme os pontos aplicáveis abaixo ou indique explicitamente por que um item não pôde ser avaliado:

• Propósito: A visão tem um trabalho claro, o conteúdo responde às perguntas prováveis do usuário e a ação principal é compreensível.
• Comportamento: Todo controle aparente faz o que promete; as mudanças de estado são visíveis; erros têm um caminho de recuperação; nenhum controle morto ou falso permanece.
• Acessibilidade: Semântica e nomes estão corretos; usuários de teclado podem completar a tarefa; o foco é visível e previsível; o conteúdo não é transmitido apenas por cor; contraste, zoom, movimento e requisitos de tamanho do alvo foram verificados em relação aos critérios aplicáveis.
• Conteúdo: Rótulos são específicos e simples; a validação é útil; estados vazio, carregamento, sucesso e falha são projetados onde relevantes; afirmações e conteúdo são precisos.
• Uso responsivo:

…

(conteúdo truncado para tradução)