Pasar al contenido principal

Principios de diseño

Te contamos cuáles son los 7 principios de diseño que utilizamos cuando construimos productos digitales del GCBA.

1. Igualdad de uso

El diseño debe ser fácil de usar y adecuado para todas las personas independientemente de sus capacidades y habilidades.

Representación abstracta de igualdad de uso

Pautas:

  • Que proporcione las mismas maneras de uso para todos los usuarios: idénticas cuando es posible, equivalentes cuando no lo es.

  • Que evite segregar o estigmatizar a cualquier usuario.

  • Las características de privacidad, garantía y seguridad deben estar igualmente disponibles para todos los usuarios.

  • Que el diseño sea atractivo para todos los usuarios.

2. Flexibilidad

El diseño debe poder adecuarse a un amplio rango de preferencias y habilidades individuales.

Representación abstracta de Flexibilidad

Pautas:

  • Que ofrezca posibilidades de elección en los métodos de uso.

  • Que pueda accederse y usarse tanto con la mano derecha como con la izquierda.

  • Que facilite al usuario la exactitud y precisión.

  • Que se adapte al paso o ritmo del usuario.

3. Simple e intuitivo

El diseño debe ser fácil de entender independientemente de la experiencia, los conocimientos, las habilidades o el nivel de concentración del usuario.

Representación abstracta de Simple e intuitivo

Pautas:

  • Que elimine la complejidad innecesaria.

  • Que sea consistente con las expectativas e intuición del usuario.

  • Que se acomode a un amplio rango de alfabetización y habilidades lingüísticas.

  • Que dispense la información de manera consistente con su importancia.

  • Que proporcione avisos eficaces y métodos de respuesta durante y tras la finalización de la tarea.

  • Que los usuarios sepan la consecuencia de cada acción que toman.

  • Que lleve a los usuarios a su objetivo en la menor cantidad de tiempo.

4. Información fácil de percibir

El diseño debe ser capaz de intercambiar información con el usuario, independientemente de las condiciones ambientales o las capacidades sensoriales del mismo.

Representación abstracta de Información fácil de percibir

Pautas:

  • Que use diferentes modos para presentar de manera redundante la información esencial (gráfica, verbal o táctilmente).

  • Que proporcione contraste suficiente entre la información esencial y sus alrededores.

  • Que amplíe la legibilidad de la información esencial.

  • Que diferencie los elementos en formas que puedan ser descritas (por ejemplo, que haga fácil dar instrucciones o direcciones).

  • Que proporcione compatibilidad con varias técnicas o dispositivos usados por personas con limitaciones sensoriales.

5. Tolerante a errores

El diseño debe minimizar las acciones accidentales o fortuitas que puedan tener consecuencias graves o no deseadas.

Representación abstracta de Tolerante a errores

Pautas:

  • Que disponga los elementos para minimizar los riesgos y errores. Esto implica facilitar los elementos más usados y accesibles; y eliminar o aislar los elementos peligrosos.

  • Que proporcione advertencias sobre peligros y errores.

  • Que proporcione características seguras de interrupción.

  • Que desaliente acciones inconscientes en tareas que requieren vigilancia.

6. Escaso esfuerzo físico

El diseño debe poder ser usado eficazmente y con el mínimo esfuerzo posible.

Representación abstracta de Escaso esfuerzo físico

Pautas:

  • Que permita que el usuario mantenga una posición corporal neutra.

  • Que utilice de manera razonable las fuerzas necesarias para operar.

  • Que minimice las acciones repetitivas.

  • Que minimice el esfuerzo físico continuado.

7. Dimensiones apropiadas

Representación abstracta de Dimensiones apropiadas

  • Los tamaños y espacios deben ser elementos importantes tanto para un usuario sentado como de pie.
  • Que el alcance de cualquier componente sea confortable para cualquier usuario sentado o de pie.
  • Que se acomode a variaciones de tamaño de la mano o del agarre.
  • Que proporcione el espacio necesario para el uso de ayudas técnicas o de asistencia personal.

Diseño atómico

A la hora de construir nuestro sistema Obelisco utilizamos la llamada Metodología de Diseño Atómico. Esta forma de trabajo nos permite acelerar el proceso de creación de diseños modulares, reduciendo los elementos a la mínima expresión para luego combinarlos y crear estructuras nuevas más complejas.

El diseño atómico cuenta con 5 etapas:

  • Átomos: unidad más pequeña. En diseño hablamos de átomos cuando nos referimos a elementos UI que tienen alguna funcionalidad por sí mimos. Por ejemplo: botones, cards, inputs. También incluye elementos abstractos como tipografías, paleta cromática o párrafos.

  • Moléculas: unión de 2 o más átomos, que formar un elemento de UI relativamente simple que funciona como una unidad. Por ejemplo: etiquetas o un input más un botón.

  • Organismos: unión de 2 o más moléculas. Son componentes de UI más complejos, formados por átomos, moléculas u otros organismos. Forman secciones distintas y con mayor complejidad. Por ejemplo: pop up, footer, o menú.

  • Plantillas (templates): organizan los componentes y organismos en un layout. Más centrado en la estructura de la página que en el contenido final. Es el esqueleto del producto digital,. la plantilla de una página.

  • Páginas: es el diseño final, con imágenes, textos y detalles que hacen que esté listo para testearlo y/o desarrollarlo.

imagen que grafica las cinco etapas del diseño atómico

Logo del sistema de diseño Obelisco
Los contenidos de buenosaires.gob.ar están licenciados bajo Creative Commons Reconocimiento 2.5 Argentina License.