UI/UX na Prática

1. O que é UI?

Em um site, praticamente tudo que o usuário consegue visualizar ou utilizar pode fazer parte da interface.

• Botões
• Menus
• Formulários
• Cores
• Tipografia
• Ícones
• Imagens
• Cards
• Campos de entrada
• Links
• Mensagens
• Elementos de navegação

Exemplo de UI

Observe um botão simples:

<button>
    Comprar agora
</button>

O HTML cria o elemento. O CSS pode determinar sua aparência.

button {
    background: #007acc;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

2. O que é UX?

UX está relacionada à facilidade, clareza, eficiência e satisfação durante a utilização de uma interface.

Exemplo

Imagine uma página de compra.

O botão "Comprar" pode ser visualmente bonito. Isso é uma questão de UI.

Porém, se o usuário precisar passar por dez telas desnecessárias para finalizar a compra, existe um problema de UX.

3. UI × UX

4. Pensar no usuário

O desenvolvedor conhece o sistema profundamente. O usuário não.

Exemplo

Imagine um botão contendo somente um ícone:

<button>⋮</button>

O desenvolvedor pode saber que esse botão abre um menu de opções.

Mas será que todos os usuários saberão?

<button aria-label="Abrir opções">
    ⋮
</button>

5. Hierarquia Visual

Podemos criar hierarquia utilizando:

• Tamanho
• Cor
• Contraste
• Espaçamento
• Posicionamento
• Peso da fonte
• Imagens
• Elementos de destaque

Exemplo

<h1>Curso de Desenvolvimento Web</h1>

<p>
    Aprenda HTML, CSS e JavaScript.
</p>

<button>
    Começar agora
</button>

6. Cores na Interface

Alguns significados frequentemente utilizados:

7. Tipografia

A escolha da fonte influencia diretamente a leitura e a percepção visual do site.

Boas práticas

• Utilize fontes fáceis de ler.
• Mantenha tamanhos adequados.
• Crie diferença entre títulos e textos.
• Evite excesso de fontes diferentes.
• Utilize espaçamento adequado entre linhas.

Exemplo CSS

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

h1 {
    font-size: 2.5rem;
}

p {
    font-size: 1rem;
}

8. Espaçamento e organização

Uma interface sem espaçamento pode ficar visualmente confusa, mesmo quando possui todas as informações necessárias.

Exemplo

.card {
    padding: 20px;
}

.card h2 {
    margin-bottom: 10px;
}

.card p {
    margin-bottom: 15px;
}

9. Botões e chamadas para ação

Exemplos:

• Salvar
• Enviar
• Excluir
• Comprar
• Editar
• Continuar
• Cancelar

Botão HTML

<button type="button">
    Salvar
</button>

Botão de formulário

<button type="submit">
    Enviar formulário
</button>

<button>
    Baixar material
</button>

10. Formulários e UX

Formulários são um dos pontos onde problemas de UX aparecem com muita frequência.

Exemplo correto

<label for="email">
    E-mail
</label>

<input type="email" id="email" name="email" placeholder="Digite seu e-mail">

Evite depender somente do placeholder

O placeholder é uma dica dentro do campo e não deve substituir a identificação permanente do campo.

<label for="nome">
    Nome completo
</label>

<input type="text" id="nome" name="nome" placeholder="Ex.: João da Silva">

11. Feedback da Interface

Quando o usuário clica em "Salvar", por exemplo, o sistema deve indicar que a operação aconteceu.

Exemplos de feedback

• "Cadastro realizado com sucesso."
• "Senha incorreta."
• "Arquivo enviado."
• "Preencha este campo."
• "Carregando..."

<p role="status">
    Cadastro realizado com sucesso!
</p>

12. Mensagens de erro

Erro 001.

O e-mail informado não é válido.
Verifique o endereço e tente novamente.

13. Navegação

Uma boa navegação deve permitir que o usuário saiba onde está e para onde pode ir.

Exemplo

<nav aria-label="Navegação principal">

    <a href="index.html">
        Início
    </a>

    <a href="cursos.html">
        Cursos
    </a>

    <a href="contato.html">
        Contato
    </a>

</nav>

14. UI/UX e Responsividade

Um site pode ser acessado por:

• Computadores
• Notebooks
• Tablets
• Celulares
• Monitores de diferentes tamanhos

Exemplo CSS

.container {
    width: 90%;
    max-width: 1100px;
    margin: auto;
}

@media (max-width: 768px) {

    .container {
        width: 95%;
    }

}

15. Mobile First

Exemplo

.card {
    width: 100%;
}

@media (min-width: 768px) {

    .card {
        width: 50%;
    }

}

16. UI/UX e Acessibilidade

Acessibilidade faz parte de uma boa experiência do usuário.

Imagem com texto alternativo

<img src="logo.png" alt="Logo da empresa">

Botão acessível

<button aria-label="Fechar janela">
    ×
</button>

Campo de formulário

<label for="telefone">
    Telefone
</label>

<input type="tel" id="telefone" name="telefone">

17. Consistência visual

Se um botão azul significa "Salvar" em uma página, não é interessante que outro botão azul em outra página represente "Excluir" sem uma boa razão.

Elementos que podem seguir padrões

• Botões
• Fontes
• Cores
• Cards
• Menus
• Formulários
• Espaçamentos
• Ícones

18. Microinterações

Exemplos:

• Botão muda de aparência ao passar o mouse.
• Campo mostra erro.
• Menu abre.
• Ícone muda após uma ação.
• Elemento apresenta animação.

Exemplo CSS

button {
    transition: 0.2s;
}

button:hover {
    transform: translateY(-2px);
}

19. UX e desempenho

Um site visualmente bonito pode proporcionar uma experiência ruim se demorar muito para carregar.

Alguns fatores importantes

• Tamanho das imagens
• Quantidade de scripts
• Quantidade de requisições
• Arquivos CSS
• Arquivos JavaScript
• Servidor
• Cache

20. Exemplo: Menu simples

Um menu precisa ser fácil de encontrar e utilizar.

<header>

    <a href="index.html">
        Minha Empresa
    </a>

    <nav aria-label="Menu principal">

        <a href="#inicio">
            Início
        </a>

        <a href="#servicos">
            Serviços
        </a>

        <a href="#contato">
            Contato
        </a>

    </nav>

</header>

21. Cards e organização de conteúdo

Estrutura HTML

<article class="card">

    <h2>
        Curso de HTML
    </h2>

    <p>
        Aprenda a criar estruturas para páginas web.
    </p>

    <a href="html.html">
        Ver curso
    </a>

</article>

22. HTML Semântico e UX

Exemplos:

<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>

<main>

    <section>

        <h1>
            Cursos
        </h1>

        <article>

            <h2>
                HTML
            </h2>

            <p>
                Curso de HTML.
            </p>

        </article>

    </section>

</main>

23. Organização da informação

Um exemplo de organização:

1. Início
2. Sobre a empresa
3. Serviços
4. Produtos
5. Contato

24. Affordance

Exemplo

Um botão visualmente parecido com um botão sugere que pode ser pressionado.

<button>
    Enviar
</button>

Já um texto que parece apenas texto pode não deixar claro que é clicável.

25. Carga Cognitiva

Quanto mais decisões desnecessárias o usuário precisa tomar, maior pode ser a dificuldade de utilização.

26. Heurísticas de Usabilidade

Alguns princípios importantes

• Manter o usuário informado.
• Utilizar linguagem compreensível.
• Permitir controle e liberdade.
• Manter consistência.
• Evitar erros.
• Ajudar o usuário a reconhecer informações.
• Facilitar recuperação de erros.

27. Testando a experiência do usuário

Exemplo de teste

Imagine que você desenvolveu um formulário.

Peça para outra pessoa realizar uma tarefa:

Observe:

• A pessoa encontrou o formulário?
• Entendeu os campos?
• Encontrou o botão?
• Compreendeu as mensagens?
• Conseguiu concluir a tarefa?

28. UI/UX: antes e depois

❌ Interface problemática

<div>

    Nome
    <input>

    Email
    <input>

    <button>
        Clique aqui
    </button>

</div>

✅ Interface melhor estruturada

<form>

    <div>

        <label for="nome">
            Nome completo
        </label>

        <input
            type="text"
            id="nome"
            name="nome"
            required
        >

    </div>

    <div>

        <label for="email">
            E-mail
        </label>

        <input
            type="email"
            id="email"
            name="email"
            required
        >

    </div>

    <button type="submit">
        Criar cadastro
    </button>

</form>

29. Checklist de UI/UX

Antes de finalizar um site, faça uma avaliação.

• O site possui uma estrutura visual organizada?
• Os textos são fáceis de compreender?
• Os botões deixam clara a ação?
• Os formulários possuem labels?
• As imagens possuem texto alternativo quando necessário?
• O site funciona em telas pequenas?
• As mensagens de erro são compreensíveis?
• Existe feedback após ações importantes?
• Os elementos possuem consistência visual?
• O usuário consegue encontrar as informações?

30. Atividade Prática

A página deverá possuir

• Cabeçalho.
• Título.
• Texto explicativo.
• Formulário.
• Nome.
• E-mail.
• Telefone.
• Senha.
• Botão de cadastro.
• Mensagens de validação.
• Layout responsivo.
• Recursos básicos de acessibilidade.

Critérios de avaliação

31. Resumo da Aula