Avaliação de Hierarquia e Layout

Passo 1 — Mapear o fluxo de leitura natural

Determinar onde o olho pousa primeiro, segundo e terceiro ao abrir a interface, sem nenhuma instrução. Verificar se essa ordem natural de leitura corresponde à ordem de importância do produto (definida nos casos de uso da ficha de contexto):

- O elemento mais importante do produto está no caminho natural da primeira fixação visual?

- O fluxo de leitura que a interface impõe corresponde ao fluxo de uso do produto? - Há elementos que capturam a atenção de forma desproporcional à sua importância?

Registrar: "o olho vai para X antes de Y, mas Y é mais importante para o usuário segundo a ficha de contexto."

Passo 2 — Avaliar o sistema de espaçamento

Verificar se o espaçamento ao longo da interface segue um sistema consistente ou se é arbitrário:

**Consistência:**

- Elementos do mesmo tipo têm o mesmo espaçamento entre si? - O espaçamento interno (padding) de componentes similares é equivalente? - Há valores de espaçamento claramente fora de qualquer escala (ex: 7px, 13px, 22px)?

**Ritmo e variação:** - O espaçamento entre seções é maior do que o espaçamento dentro de seções? - Elementos relacionados estão mais próximos entre si do que de elementos não relacionados (princípio da proximidade)? - Há variação intencional de densidade — áreas de respiração intercaladas com áreas de conteúdo denso?

**Densidade:** - A densidade da interface está adequada para o caso de uso? (Alta densidade para ferramentas operacionais; mais espaço para produtos de consumo e marketing) - Há espaços em branco grandes sem propósito, ou espaços insuficientes que comprimem conteúdo importante?

Passo 3 — Avaliar a hierarquia visual

Verificar se o espaço e o peso visual estão sendo usados corretamente para comunicar importância:

**Teste da névoa:** Com a visão desfocada, é possível identificar:

- O elemento principal de cada seção? - Os agrupamentos de conteúdo relacionado? - A divisão entre seções distintas?

**Hierarquia por espaço:** - Elementos mais importantes têm mais espaço ao redor (isolamento por espaço)? - Há separação visual suficiente entre seções de conteúdo diferentes? - O espaço em branco está sendo usado como material de design para direcionar a atenção?

**Hierarquia por tamanho:** - O tamanho relativo dos elementos reflete a importância do conteúdo? - Há elementos pequenos que deveriam ser maiores (ação primária pequena, dado importante em tamanho reduzido)?

Passo 4 — Avaliar a estrutura de containers e agrupamentos

Verificar se a estrutura de containers (cards, seções, grupos) está servindo à hierarquia ou apenas criando ruído visual:

**Uso de cards:**

- Cards estão sendo usados para conteúdo genuinamente isolado e distinto, ou para qualquer agrupamento? - Há cards dentro de cards (aninhamento)? Esse padrão quase sempre cria hierarquia falsa. - O espaçamento e alinhamento por si só poderiam substituir algum container desnecessário?

**Alinhamento:** - Há um eixo de alinhamento claro ao qual a maioria dos elementos se ancora? - Elementos similares estão alinhados entre si ao longo da interface? - Há quebras de alinhamento não intencionais que criam sensação de desordem?

Passo 5 — Documentar os achados com localização e impacto

Para cada problema identificado:

- Nomear o problema com precisão - Indicar a localização na interface (seção, componente, área) - Descrever o impacto na experiência do usuário com base nos casos de uso da ficha de contexto - Indicar a severidade: **alta** (viola critério de qualidade definido), **média** (degrada percepção sem violar critério), **baixa** (melhoria incremental)

Registrar também o que está funcionando corretamente nessa dimensão.

---