UX

desing

— by Luiz Lins, Prof

〞

o que é experiência?

〞

Um exemplo de produto BOM

um exemplo de produto BOM

"atendeu minhas expectativas."

"fez com que me sentisse bem."

"me surpreendeu! algo inovador."

Emoções positivas

〞

Um exemplo de produto RUIM

um exemplo de produto RUIM

"me senti muito frustrado(a)."

"não gostei do que foi oferecido."

"que raiva! nunca mais uso isso."

Emoções negativas

tem a ver com emoções

"experiência"

"experiência" é o que uma pessoa sentiu em certo momento em que viveu.

Para o UX

Se a pessoa se sentiu bem usando o produto ou serviço, dirá que a experiência foi boa.

Se a pessoa não se sentiu bem usando o produto ou serviço, dirá que a experiência foi ruim.

De acordo com a Nielsen Norman Group (NN/g)

"User experience", ou "Experiência do usuário" é a área que envolve todos os aspectos da interação da pessoa usuária final com a empresa, seus serviços e seus produtos.

A responsabilidade da UX é estudar todos os aspectos sensoriais (visão, paladar, olfato, tato e audição), psíquicos e emocionais que um produto ou serviço pode gerar.

Usuários e Usuárias

〞

Todo produto ou serviço oferecido, tem como objetivo atender alguém.

Quem os cinemas atendem?

Pessoas que vão assistir os filmes

Quem os escolas atendem?

Pessoas que vão assistir as aulas

Quem os petshops atendem?

Animais de estimação

Apesar dos tutores e tutoras pagarem, quem é atendido é o pet.

Usuário ou usuária é quem usufrui de algo.

O conceito é:

Esse é um conceito muito amplo e quem será o(a) usuário(a) depende  do contexto.

O que é um cliente e um usuário?

Guarda-chuva da UX

Arquitetura da Informação

Responsável pela organização e otimização dos conteúdos em um produto ou serviço.

Arquitetura da informação

* Organização de fluxos de sites;

* Organização das páginas de um site;

* Organização dos produtos dentro de um site;

 

Usabilidade

Usabilidade é a divisão da UX que se preocupa em tornar um produto ou serviço mais acessível e utilizável para todas as pessoas usuárias.

Usabilidade

Usabilidade é a divisão da UX que  se preocupa em tornar um produto ou serviço mais acessível e utilizável para todas as pessoas usuárias.

Design Visual

O Design Visual é a divisão  responsável pela aplicação dos conceitos visuais (tipografia, cores, formas e etc.) para criar experiências acessíveis, agradáveis e confiáveis para a pessoa usuária.

Análise de Dados

A Análise de Dados é muito importante e está presente em todas as outras divisões. Esse é o conhecimento de interpretação de dados e informações para transformá-los em insights e soluções tangíveis.

Design de Intereção

O  design de interação é a divisão responsável por projetar como as pessoas usuárias interagirão com os  produtos ou serviços,  seja interação por toque, voz ou texto.

Pesquisa com pessoas usuárias

É responsável por utilizar processos para trazer dados que ajudam a entender melhor quem é o público-alvo e como entregar a experiência mais agradável possível, além de testar soluções e acompanhar métricas de produtos para manter sua excelência.

Especialidades dentro da UX

Temos 08 divisões

Design centrado no usuário

Precisa de despertador

Não precisa de  despertador

Pensar fora

Pensar "fora da caixa" e fazemos experiência com a dor da pessoa usuária

Design centrado na pessoa usuária

〞

DCU se trata de uma linha de pensamento que coloca as dores e necessidades das pessoas usuárias no centro do processo de desenvolvimento de produtos.

- Design centrado do usuário (DCU)

Mas a DCU necessita de algo muito importante na área da UX: a empatia.

Compreender o próximo é uma tarefa simplesmente complexa

Nossa primeira aula.

Somos seres diferentes,

com percepções diferentes

Buscar entender melhor suas emoções, seus sentimentos e pensamentos.

Empatia:

Se trata da aptidão de conseguir compreender uma pessoa mentalmente e emocionalmente através da ação de se colocar no lugar dela e se imaginar passando pela mesma situação passada por esse indivíduo.

Abrimos a nossa mente e conseguimos ver o mundo através dos olhos das pessoas usuárias.

〞

Empatia é base da UX e do trabalho da pessoa UX Designer.

〞

Como a empatia ajuda a criar novos produtos e a crescer empresas?

〞

Atividade:

 

Empatia e pesquisas no mercado de trabalho.

A empatia é uma habilidade importantíssima no mundo da UX, pois só conseguimos desenvolver produtos e serviços que vão ao encontro com as dores e necessidades das pessoas se tivermos a habilidade de abrir espaço para acolhermos e compreendermos as emoções delas. Mas, para realizar ações com empatia, é importante ter conhecimento sobre quem são as pessoas para quem o produto/serviço está sendo produzido.

Por conta dessa necessidade de compreensão, as Pesquisas são essenciais no ramo da UX. Não é possível produzir algo que agrade as pessoas usuárias se não conhecermos quem elas são.

Em resumo: as pesquisas conseguem revelar quem é o público-alvo e quais são os seus maiores sonhos, angústias e necessidades, o que resulta em conexão e empatia.

Para conhecer mais sobre pesquisas e sobre empatia, aqui estão algumas sugestões de conteúdos:

Vamos curtir um pouco

de códigos!

Vamos começar do

começo

〞

O HTML (HyperText Markup Language) foi criado em 1991 por Tim Berners-Lee no CERN, Suíça, com o objetivo de compartilhar documentos científicos através de links (hipertexto). Evoluiu de uma linguagem simples para a base estrutural da Web, com o grande marco do HTML5 em 2014, introduzindo semântica e suporte multimídia. 

– Conrad Anker



curl https://globo.com

Lê URL a partir do terminal

〞

Web browsers are software applications used to access, navigate, and interact with content on the World Wide Web, including websites, images, and videos. Popular examples include Google Chrome, Apple Safari, Microsoft Edge, Mozilla Firefox, and Opera. They act as interpreters, turning server code into visual, interactive interfaces.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título da Página</title>
</head>
<body>
    <h1>Olá, Mundo!</h1>
    <p>Conteúdo principal da página.</p>
</body>
</html>

https://developer.mozilla.org/pt-BR/docs/Web/HTML

<meta>

  • <meta> é uma tag HTML utilizada para definir metadados (dados sobre dados) de uma página web.

  • Esses metadados não são exibidos diretamente na página, mas são interpretados pelos navegadores, mecanismos de busca (como o Google) e outros serviços web.

  • Eles devem ser inseridos dentro da seção <head> do documento HTML.

<meta>

  • charset
    Define qual a codificação de caracteres foi usada no documento.

  • content
    Define o conteúdo associado ao http-equiv.

  • http-equiv
    Prove um cabeçalho HTTP com informação do conteúdo do atributo.

  • name
    Define o nome do metadado.

  • Definição de caracteres
    content-type, default-style, refresh, application-name, author, description, generator, keywords, viewport

Exemplos básicos

〞

As melhores IDEs e editores para HTML incluem o popular Visual Studio Code (gratuito e versátil), JetBrains WebStorm (robusto e pago), e opções leves como Sublime Text ou Atom.

– Google (pesquisa)

Semântica de tags

<tag></tag>

<tag/>

Semântica de HTML

  • <!DOCTYPE html>: Declaration defining the document type and version (HTML5 for modern web).
  • <html>: The root element that encloses all other HTML content on the page.
  • <head>: Contains metadata about the document, such as the title, links to stylesheets, and scripts, which is not directly visible on the page.
  • <title>: Defines the title of the document, which appears in the browser's title bar or page tab.
  • <body>: Contains all the visible content of the webpage, including text, images, and links.

While the current HTML standard includes many elements, beginners can focus on a core set to build a functional webpage.

  • <header>: Cabeçalho do site ou seção (logo, título).
  • <nav>: Menu de navegação.
  • <main>: Conteúdo principal e exclusivo da página.
  • <section>: Agrupa conteúdos temáticos relacionados.
  • <article>: Conteúdo autônomo, como posts de blog.
  • <aside>: Conteúdo secundário, como barras laterais.
  • <footer>: Rodapé do site (direitos autorais, links).

Mais tags HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Título da Página</title>
</head>
<body>
    <header>
        <h1>Logo/Nome do Site</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Sobre</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section>
            <h2>Bem-vindo</h2>
            <p>Conteúdo principal aqui...</p>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2026 Meu Site</p>
    </footer>
</body>
</html>
  • <p></p> Paragráfos;
  • <img> Imagens;
  • <a> links;
  • <table>
    • <tr></tr>
    • <td></td>
  • <li>
  • <div></div>
  • <span></span>

HTML

<!-- paragráfos -->

<p>Primeiro parágrafo do texto.</p>
<p>Segundo parágrafo do texto.</p>
<p>Terceiro parágrafo do texto.</p>


<!-- imagens -->

<img src="avatar.png" alt="Texto alternativo" title="Avatar" />

<img src="arquivo_inexistente.jpg" alt="Texto alternativo" title="Outra figura"/>


<!-- Links -->

<a href="pagina2.html">Página 2</a>

<a href="#paragrafo3">Ir para o parágrafo 3</a>
<!--outros elementos-->
<p id="paragrafo3">Parágrafo no rodapé.</p>

<!-- Tables -->

<table>
  <tr>
    <td>Linha 1, Coluna 1</td>
    <td>Linha 1, Coluna 2</td>
  </tr>
  <tr>
    <td>Linha 2, Coluna 1</td>
    <td>Linha 2, Coluna 2</td>
  </tr>
  <tr>
    <td>Linha 3, Coluna 1</td>
    <td>Linha 3, Coluna 2</td>
  </tr>
</table>
<!-- List -->

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>


<!-- Exemplo de Lista Aninhada (Não Ordenada): -->
<ul>
  <li>☕ Café</li>
  <li>🍵 Chá
    <ul>
      <li>Chá Verde</li>
      <li>Chá Preto</li>
    </ul>
  </li>
  <li>🥛 Leite</li>
</ul>


<!-- Exemplo de Lista Ordenada com Sublista: -->
<ol>
  <li>Passo 1</li>
  <li>Passo 2
    <ol>
      <li>Subpasso 2.1</li>
      <li>Subpasso 2.2</li>
    </ol>
  </li>
</ol>
  • 1 - números (padrão)
  • i - números romanos minúsculos
  • I - números romanos maiúsculos
  • a - letras minúsculas
  • A - letras maiúsculas

Os valores permitidos para esse atributo são:

<!-- List -->

<dl>
  <dt>Título 1</dt>
  <dd>Definição 1</dd>
  
  <dt>Título 2</dt>
  <dd>Definição 2</dd>
  
  <dt>Título 3</dt>
  <dd>Definição 3</dd>
</dl>

SPAN

DIV

SPAN

DIV

* Comportamento de Layout: O <div> ocupa toda a largura horizontal disponível de seu elemento pai e sempre começa em uma nova linha. É como um "bloco" ou uma "caixa" que empurra o conteúdo seguinte para baixo.

* Uso Típico: É usado para estruturar o layout geral da página, agrupar grandes seções de conteúdo (como um cabeçalho, rodapé ou barra lateral) e aplicar estilos a blocos inteiros.

* Conteúdo: Pode conter outros elementos de bloco e elementos em linha.

* Exemplo Visual: Adicionar uma cor de fundo a uma <div> fará com que toda a linha (de ponta a ponta) seja preenchida.

* Comportamento de Layout: O <span> ocupa apenas a largura necessária para o seu conteúdo e não inicia uma nova linha. Ele flui dentro do texto existente sem interromper o fluxo do documento.

* Uso Típico: É usado para agrupar pequenas partes de texto ou elementos em linha dentro de um bloco maior (como um parágrafo) para aplicar estilos específicos, como mudar a cor ou o peso de uma palavra ou frase específica.

* Conteúdo: Pode conter apenas outros elementos em linha.

* Exemplo Visual: Adicionar uma cor de fundo a um <span> destacará apenas o texto contido nele, sem ocupar a largura total da linha.


<!-- [...] -->

<nav>  
  <a href="exercicio-01.html">Exercicio 01</a>
  <a href="exercicio-02.html">Exercicio 02</a>
</nav>

<section id="conteudo"></section>


<!-- [...] -->

<script>

	document.querySelectAll('a').forEach(link => {
		
  		const conteudo = document.getElementById('conteudo');
  
  		link.onclick = function(e) {
          
          e.preventDefault();
          fetch(link.href)
          	.then(resp => resp.text())
          	.then(html => conteudo.innerHTML = html )
          
        }
  
    })  
  
</script>