Acordeón

Componentes

Componentes del Sistema de Diseño

Esta herramienta permite al equipo establecer patrones y contar con una serie de elementos que se pueden, y deben, reutilizar para crear funcionalidades.

La modularidad del sistema, es lo que permite crear desde una unidad mínima hasta componentes más complejos. Establece reglas que nos ayudan a trabajar en equipo de forma alineada a través de principios.

Además, el sistema de diseño refleja el punto de unión entre el equipo de diseño y el de desarrollo. Gracias a éste, conseguimos implementar un lenguaje claro y consistente, a partir del cual crear y evolucionar productos.

Un sistema de diseño podría entenderse como:

  • Un lenguaje común.
  • Una colección de elementos reutilizables, guiados por una documentación clara.
  • Un conjunto de patrones y prácticas que se comparten dentro de un equipo de forma coherente y organizada.

El sistema de diseño tiene que ser flexible y mantenerse vivo a largo plazo. Un sistema de diseño no es estático, sino dinámico. Evoluciona con el producto y su diseño.

Valor

Utilizar un sistema de diseño garantiza la consistencia de nuestros productos. Esto repercute de manera positiva en la experiencia del usuario y acorta significativamente los tiempos de ideación, desarrollo y elaboración de productos.

Por otra parte, los sistemas de diseño son una herramienta especialmente útil para crear productos digitales capaces de escalar y crecer rápidamente de una forma controlada.

Acordeón

El componente acordeón, permite a los usuarios mostrar y ocultar secciones de contenido relacionado en una página

El componente de acordeón colapsable, se encuentra ubicado en la librería del Kit Digital bajo el nombre de uft-accordion


        


<div class="uft-accordion">


  <div class="uft-collapse uft-card">


    <button


      class="uft-collapse_heading"


      data-uft-collapse="#collapseExample01">


      <h5>Título primer acordeón</h5>


      <span class="uft-btn-inline">


        <span class="d-none">Ver más</span>


        <i class="uft-icon uft-icon--close uft-icon--rounded">minus</i>


        <i class="uft-icon uft-icon--open uft-icon--rounded">add</i>


      </span>


    </button>


    <div class="uft-collapse_body" id="collapseExample01">


      <div class="uft-card_body">


        <p>


          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium


          ad aspernatur at consectetur eius eos fuga hic, maiores maxime modi


          mollitia obcaecati perspiciatis quam quas quis repellendus tenetur


          vitae voluptas?


        </p>


      </div>


    </div>


  </div>


  <div class="uft-collapse uft-card">


    <button


      class="uft-collapse_heading"


      data-uft-collapse="#collapseExample02">


      <h5>Título segundo acordeón</h5>


      <span class="uft-btn-inline">


        <span class="d-none">Ver más </span>


        <i class="uft-icon uft-icon--close uft-icon--rounded">minus</i>


        <i class="uft-icon uft-icon--open uft-icon--rounded">add</i>


      </span>


    </button>


    <div class="uft-collapse_body" id="collapseExample02">


      <div class="uft-card_body">


        <p>


          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium


          ad aspernatur at consectetur eius eos fuga hic, maiores maxime modi


          mollitia obcaecati perspiciatis quam quas quis repellendus tenetur


          vitae voluptas?


        </p>


      </div>


    </div>


  </div>


</div>

Cuándo utilizar este componente

  • Utilice un acordeón únicamente si hay evidencia de que útil para el usuario.
  • Evaluar con los usuarios si el uso del acordeón compensa los posibles problemas de ocultar contenido.

Cuándo no utilizar este componente

  • Los acordeones ocultan contenido al usuario. No todos notan o entienden cómo funcionan. Por este motivo, sólo deben ser implementados en situaciones específicas y si la investigación de usuarios lo respalda.
  • No utilice acordeón para contenido relevante y que requiere ser visto.
  • Un contenido bien escrito y estructurado puede eliminar la necesidad de utilizar un acordeón.
  • No coloque acordeones dentro de acordeones, ya que dificultará la búsqueda del contenido.
  • No utilice el componente de acordeón, si la cantidad de contenido dentro de éste hará que la página se cargue lentamente.

Por lo general, es mejor:

  • Simplificar y reducir la cantidad de contenido
  • Dividir el contenido en varias páginas
  • Mantener el contenido en una sola página, separado por encabezados
  • Utilizar una lista de enlaces al comienzo de la página conocidos como "enlaces de anclaje" para llevar al usuario a secciones específicas dentro del contenido.
  • Los acordeones funcionan mejor para contenido y enlaces simples.