jmaxzh/sdlc-ux-design

Design de UX

Aplicabilidade

• Aplicar ao design, implementação, modificação, revisão, otimização ou orientação de princípios de experiência de tarefas de produto para desktop, mobile e web. Tarefas exclusivamente de backend, banco de dados e outras sem interação voltada ao usuário estão fora do escopo desta skill.
• Esta skill funciona independentemente do fluxo de trabalho SDLC e pode ser instalada sozinha. Para tarefas que também envolvam hierarquia visual, tipografia, cor, layout, geometria de controles ou movimento, utilize orientações de UI disponíveis, como sdlc-ui-design, para essas decisões.
• Quando apenas orientação de princípios for solicitada, dê uma resposta breve nesse nível, em vez de expandir para design específico do produto, implementação ou teste de aceitação.
• Para solicitações apenas de revisão, relate descobertas e recomendações sem criar um novo design ou alterar a implementação.
• Exploração de design, propostas, comparação de conceitos e validação de protótipos criam ou modificam apenas artefatos de design independentes. Altere o código de produção somente quando a solicitação incluir implementação.
• Para solicitações mistas, entregue o design antes de prosseguir com a implementação autorizada. Entregue e avalie cada um separadamente; a validação do protótipo não estabelece aceitação da implementação.
• Para implementação, siga as verificações existentes do projeto. Quando o ambiente atual suportar a reprodução de um defeito, use uma re-verificação focada nesse defeito; escolha verificações para outras alterações de comportamento de acordo com seu risco e escopo. Não configure ambientes adicionais de verificação, produza relatórios formais de verificação ou duplique verificações existentes apenas para satisfazer esta skill.
• Para resultados de implementação, relate as verificações realizadas, observações e escopo não verificado. Distinga evidências de tempo de execução, inferência baseada em código e julgamento subjetivo; a autoavaliação do modelo não é aceitação do usuário.

Leitura sob demanda

• Siga os princípios compartilhados abaixo e leia as referências de plataforma para o alvo e cenário reais.
• Desktop: leia princípios de desktop.
• Mobile: leia princípios mobile.
• Web: leia princípios web.
• Para mobile web, leia tanto os princípios mobile quanto web. Para outras combinações, carregue referências adicionais de acordo com as condições dos documentos selecionados.
• Se a plataforma não for especificada, infira-a do contexto da tarefa e do projeto primeiro. Para conselhos gerais, use apenas princípios compartilhados. Peça esclarecimentos apenas se uma tarefa concreta ainda não tiver uma decisão de plataforma necessária.
• Para o contexto ou limites de uma adaptação, consulte sua entrada vinculada em contexto de fontes e, quando necessário, a passagem original. As instruções em inglês nesta skill definem a adaptação local; a consulta não importa fluxos de trabalho ou cadeias de ferramentas upstream.

Entrega de design

Use esta seção para exploração de interação solicitada, propostas, comparação de conceitos ou validação de protótipo, independentemente do tamanho da mudança. Em tarefas mistas, aplica-se à parte de design; a entrega e aceitação da implementação seguem a tarefa e os requisitos existentes do projeto.

• Apresente designs de UX como um artefato HTML interativo de página única. Torne as principais ações, mudanças de estado relevantes e ações de retorno ou recuperação necessárias operáveis no protótipo. Verifique se os controles e feedback demonstram a operação pretendida e distinguem estados relevantes. Contexto de fontes.
• Padrão para CSS e JavaScript inline para que o HTML abra diretamente. Use estado local e dados ilustrativos claramente identificados para demonstrar o escopo de interação acordado.
• Para design combinado de UI/UX, use geração de imagem primeiro para a proposta de UI e forneça um protótipo HTML de UX interativo. Se a geração de imagem não estiver disponível ou falhar, use um artefato HTML para ambos. Contexto de fontes.
• Inspecione o protótipo renderizado no viewport pretendido usando conteúdo real quando disponível; caso contrário, use conteúdo representativo claramente identificado. Contexto de fontes.
• Lidere a entrega com a pré-visualização interativa e o arquivo HTML abrível. Mantenha a prosa acompanhante breve e limitada a instruções de abertura, escopo de simulação e limitações necessárias.

Princípios compartilhados

Aplicando os princípios

• Aplique princípios relevantes ao trabalho solicitado, plataforma alvo e cenário.
• Explique condições e trade-offs que afetam a recomendação.
• Antes de citar requisitos ou recomendações numéricos, verifique sua fonte, unidades e aplicabilidade à plataforma alvo.

Princípios de design

• Tarefas e resultados: organize a UI pelos objetivos do usuário e ordem de operação. Priorize informações e ações necessárias para a tarefa atual. Avalie cada superfície pelo que seus usuários precisam realizar ali. Contexto de fontes.
• Pontos de entrada e controles: torne os pontos de entrada primários detectáveis e a ação pretendida de cada controle clara. Use rótulos de botão que identificam ações e seus objetos; rotule ícones ambíguos. Contexto de fontes.
• Semântica de ícones: determine a semântica de um ícone a partir de seu uso atual. Oculte ícones decorativos redundantes ao lado de texto visível da árvore de acessibilidade. Forneça uma alternativa de texto para ícones significativos independentes. Exponha o nome acessível e o estado aplicável de um controle de ícone. Contexto de fontes.
• Prioridade de tarefa: em uma tela orientada a tarefas, deixe a pergunta que os usuários precisam responder primeiro determinar a ênfase visual e a ordem de leitura. Contexto de fontes.
• Estrutura de apresentação: deixe as afirmações de uma página de apresentação e as evidências para elas determinarem quais seções são necessárias e em que ordem. Contexto de fontes.
• Conteúdo factual e ilustrativo: baseie afirmações e evidências sobre produtos reais, clientes ou atividade de negócios em fatos disponíveis. Identifique claramente o conteúdo ilustrativo. Contexto de fontes.
• Consistência de dados: dentro do mesmo escopo de relatório, mantenha o mesmo fato consistente onde quer que apareça, e mantenha figuras derivadas consistentes com seus dados subjacentes. Torne claras as diferenças no escopo, período de tempo ou base de cálculo. Contexto de fontes.
• Carga cognitiva: apresente opções e contexto necessários para decisões, reduza memorização e entrada repetida, e permita que os usuários inspecionem e alterem padrões. Revele opções complexas à medida que se tornam relevantes. Mantenha a informação necessária para uma decisão disponível no ponto de escolha, inclusive ao reduzir etapas. Contexto de fontes.
• Aprendizado: reduza o esforço mental desnecessário introduzido pela interface. Apoie o aprendizado que ajuda os usuários a entender e dominar sua tarefa. Contexto de fontes.
• Simplificação: julgue a simplificação pelos obstáculos que ela remove da tarefa do usuário. Preserve funcionalidade necessária, informações relevantes para decisão e acessibilidade. Contexto de fontes.
• Consistência: siga as convenções de interação da plataforma e comportamento consistente dos controles.
• Feedback de status e espera: mostre o lugar atual do usuário na tarefa ou navegação, status de processamento e resultados. Distinga carregamento, dados vazios e falha. Responda prontamente às ações. Para operações longas, forneça status confiável e mostre progresso real quando mensurável. Escalone o feedback para a importância sem interrupções frequentes. Alinhe a apresentação de cada estado e as ações disponíveis com seu significado; distinga estados somente leitura, desabilitados e em andamento. Contexto de fontes.
• Controle do usuário: forneça ações de saída, cancelamento e retorno detectáveis. Suporte desfazer e refazer onde apropriado e esclareça quais alterações eles afetam. Explique as consequências antes de ações irreversíveis. As transições visuais não devem impedir ações de retorno, alternância ou cancelamento suportadas. Distinga interromper uma animação de cancelar uma operação em segundo plano. Contexto de fontes.
• Modalidade: reserve a interação modal para tarefas que exigem interromper o trabalho atual ou proteger o foco. Contexto de fontes.
• Prevenção e recuperação de erros: declare restrições de entrada e operação antecipadamente no ponto onde se aplicam. Exija confirmação quando as consequências o justificarem. Valide em momentos apropriados sem interromper entrada incompleta. Em caso de falha, preserve a entrada válida, identifique o problema e sua localização, explique causas conhecidas sem apresentar palpites como fatos e ofereça um caminho de recuperação.
• Conectividade e recuperação: para tarefas dependentes de rede, torne claras as capacidades disponíveis sob conectividade limitada. Ofereça ações alternativas ou de recuperação que o produto realmente suporte. Contexto de fontes.
• Linguagem da interface: use linguagem que o público-alvo entenda. Retenha termos de domínio familiares quando eles transmitirem o significado pretendido com precisão. Contexto de fontes.
• Operação acessível: suporte teclado e tecnologia assistiva no ambiente alvo, com nomes de controle, estados e foco identificáveis. Forneça ações equivalentes para entrada de precisão ou gestos complexos. Escolha o comportamento de interação com base nas capacidades de entrada realmente disponíveis. Torne as ações principais utilizáveis sem hover. Contexto de fontes.