NOTA: Alguns dos exemplos interativos podem usar CSS que você ainda não aprendeu. Não se preocupe em tentar entender todo o código. O objetivo dos exemplos é mostrar prévias desses conceitos de design para que você entenda melhor como as coisas funcionam. Para ver as prévias, você precisará ativar o editor interativo. Uma divulgação progressiva é um padrão de design usado para mostrar aos usuários apenas o conteúdo relevante com base em sua atividade atual e ocultar o restante. Isso é feito para reduzir a carga cognitiva e tornar a experiência do usuário mais intuitiva.

<link rel="stylesheet" href="styles.css">

<div class="progressive-disclosure">
  <button id="show-details-btn" aria-expanded="false" aria-controls="extra-content">
    Show More Details
  </button>
  <div id="extra-content" class="hidden" tabindex="-1">
    <p>
      Here are additional details that are revealed only when you want to see them.
      This keeps the interface clean and reduces cognitive load.
    </p>
  </div>
</div>
<script src="index.js"></script>

.progressive-disclosure {
  font-family: sans-serif;
  max-width: 400px;
  margin: 20px auto;
}

#show-details-btn {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#show-details-btn:hover,
#show-details-btn:focus {
  background-color: #0056b3;
  outline: none;
}

.hidden {
  display: none;
}

#extra-content {
  margin-top: 15px;
  padding: 10px;
  background-color: #f7f9fcff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

const btn = document.getElementById('show-details-btn');
const content = document.getElementById('extra-content');

btn.addEventListener('click', () => {
  const isHidden = content.classList.toggle('hidden');
  btn.setAttribute('aria-expanded', !isHidden);
  if (!isHidden) {
    content.focus();
  }
});

Por exemplo, quando você usa a página de busca do Google, a maioria das suas pesquisas será simples. Então, ter uma interface de usuário simples com poucas opções faz sentido. Mas para as poucas vezes em que você precisar de uma busca mais avançada, o Google oferece uma opção de busca avançada que revelará mais opções. Você pode encontrar a opção de pesquisa avançada do Google no menu de configurações na página inicial do Google. Ou você pode ir para google.com/advanced_search. Outro exemplo de divulgação progressiva seria o botão "More details" em produtos de um site de comércio eletrônico. Quando você visita um site como Amazon, você verá uma lista de imagens de produtos em diferentes categorias. Isso permite que os usuários façam compras com facilidade e não fiquem sobrecarregados com muita informação. Se o usuário estiver interessado em um produto específico, ele pode clicar na imagem do produto para revelar mais detalhes sobre o produto. Exibir todas as informações de uma vez pode ser esmagador para o usuário. Então, ao usar a divulgação progressiva, o usuário pode escolher ver mais informações quando estiver pronto.

<link rel="stylesheet" href="styles.css" />

<div class="product-list">
  <div class="product" tabindex="0" aria-expanded="false" aria-controls="details-1">
    <img src="https://placehold.co/150x150" alt="Example Product Image" />

    <button class="details-btn" aria-label="Show more details for Product 1">More details</button>
    <div id="details-1" class="product-details hidden" tabindex="-1">
      <p><strong>Product 1:</strong> This is a great product with awesome features that you'll love.</p>
      <ul>
        <li>Feature A</li>
        <li>Feature B</li>
        <li>Feature C</li>
      </ul>
    </div>
  </div>

  <div class="product" tabindex="0" aria-expanded="false" aria-controls="details-2">
    <img src="https://placehold.co/150x150" alt="Example Product Image" />

    <button class="details-btn" aria-label="Show more details for Product 2">More details</button>
    <div id="details-2" class="product-details hidden" tabindex="-1">
      <p><strong>Product 2:</strong> Another fantastic item with lots of benefits for your daily use.</p>
      <ul>
        <li>Benefit X</li>
        <li>Benefit Y</li>
        <li>Benefit Z</li>
      </ul>
    </div>
  </div>
</div>
<script src="index.js"></script>

.product-list {
  font-family: sans-serif;
  display: flex;
  gap: 20px;
  max-width: 800px;
  margin: 20px auto;
  flex-wrap: wrap;
}

.product {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  width: 180px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  position: relative;
}

.product img {
  width: 100%;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  margin-bottom: 8px;
}

.details-btn {
  background-color: #007bff;
  border: none;
  color: white;
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 5px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

.details-btn:hover,
.details-btn:focus {
  background-color: #0056b3;
  outline: none;
}

.product-details {
  margin-top: 10px;
  background-color: #f7f9fc;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.9rem;
}

.hidden {
  display: none;
}

document.querySelectorAll('.details-btn').forEach(button => {
  button.addEventListener('click', () => {
    const product = button.closest('.product');
    const details = product.querySelector('.product-details');
    const isHidden = details.classList.toggle('hidden');
    product.setAttribute('aria-expanded', !isHidden);
    if (!isHidden) {
      details.focus();
      button.textContent = 'Hide details';
    } else {
      button.textContent = 'More details';
    }
  });
});

Então, quais são algumas das melhores práticas para projetar com a técnica de divulgação progressiva? A primeira consideração é manter todas as informações importantes visíveis o tempo todo. Os usuários não devem ter que lutar para encontrar informações-chave porque elas estão ocultas por recursos avançados extras.

<link rel="stylesheet" href="styles.css" />

<div class="info-section">
  <h2>Order Summary</h2>
  <p><strong>Items in Cart:</strong> 3</p>
  <p><strong>Total Price:</strong> $75.00</p>
  <div class="advanced-options">
    <button id="toggle-advanced-btn" aria-expanded="false" aria-controls="advanced-details">
      Show Advanced Options
    </button>
    <div id="advanced-details" class="hidden" tabindex="-1">
      <p>Apply coupon codes, gift wrapping, or select shipping preferences here.</p>
      <form>
        <label for="coupon">Coupon Code:</label><br />
        <input type="text" id="coupon" name="coupon" /><br /><br />
        <label>
          <input type="checkbox" name="gift-wrap" /> Gift wrap this order
        </label><br /><br />
        <label for="shipping">Shipping method:</label><br />
        <select id="shipping" name="shipping">
          <option value="standard">Standard (Free)</option>
          <option value="express">Express ($10.00)</option>
        </select>
      </form>
    </div>
  </div>
</div>

<script src="index.js"></script>

.info-section {
  font-family: sans-serif;
  max-width: 400px;
  margin: 30px auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  background-color: #fff;
}

h2 {
  margin-top: 0;
}

.advanced-options {
  margin-top: 20px;
}

#toggle-advanced-btn {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

#toggle-advanced-btn:hover,
#toggle-advanced-btn:focus {
  background-color: #0056b3;
  outline: none;
}

.hidden {
  display: none;
}

#advanced-details {
  margin-top: 15px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f7f9fc;
}

const toggleBtn = document.getElementById('toggle-advanced-btn');
const advancedDetails = document.getElementById('advanced-details');

toggleBtn.addEventListener('click', () => {
  const isHidden = advancedDetails.classList.toggle('hidden');
  toggleBtn.setAttribute('aria-expanded', !isHidden);
  if (!isHidden) {
    advancedDetails.focus();
  }
});

Outra consideração é fornecer um único ponto de acesso para os usuários acessarem recursos adicionais ou informações. Isto pode ser um botão ou link que está sempre visível na página. Adicionar múltiplos pontos de acesso pode ser confuso para os usuários e pode levar a uma experiência ruim do usuário.

<link rel="stylesheet" href="styles.css" />
<script src="index.js" defer></script>

<div class="product-preview">
  <img src="https://placehold.co/150x150" alt="Example Product Image" />

  <h3>Sample Product</h3>
  <p class="price">$49.99</p>
  <button class="info-toggle" aria-expanded="false" aria-controls="product-info">
    More Info
  </button>
  <div id="product-info" class="product-info hidden" tabindex="-1">
    <p>This product is made from high-quality materials and comes with a 2-year warranty. Perfect for everyday use.</p>
    <ul>
      <li>Durable and lightweight</li>
      <li>Available in multiple colors</li>
      <li>Free shipping included</li>
    </ul>
  </div>
</div>

body {
  font-family: sans-serif;
  padding: 30px;
  display: flex;
  justify-content: center;
}

.product-preview {
  max-width: 300px;
  border: 1px solid #ccc;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.product-preview img {
  width: 100%;
  border-radius: 4px;
  margin-bottom: 10px;
}

.price {
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}

.info-toggle {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 16px;
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.info-toggle:hover,
.info-toggle:focus {
  background-color: #0056b3;
  outline: none;
}

.product-info {
  margin-top: 15px;
  text-align: left;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 6px;
}

.hidden {
  display: none;
}

const toggleBtn = document.querySelector('.info-toggle');
const infoPanel = document.getElementById('product-info');

toggleBtn.addEventListener('click', () => {
  const isHidden = infoPanel.classList.toggle('hidden');
  toggleBtn.setAttribute('aria-expanded', !isHidden);
  toggleBtn.textContent = isHidden ? 'More Info' : 'Hide Info';

  if (!isHidden) {
    infoPanel.focus();
  }
});

Ao projetar suas aplicações, pense na experiência geral do usuário e em como você pode usar o progressive disclosure para facilitar que os usuários encontrem as informações de que precisam. Quando feito corretamente pode fazer uma grande diferença na experiência geral do usuário.