Directrices generales sobre la experiencia del usuario

Introducción

Si estás empezando a diseñar tu primera aplicación y no tienes experiencia en diseño, puede que necesites algo de ayuda y orientación sobre cómo diseñar aplicaciones. Esta página ofrece información práctica que puedes utilizar para crear aplicaciones.

Archivo de ejemplo

Puedes descargar un archivo de muestra predefinido que contiene elementos que puedes utilizar en el diseño para crear aplicaciones web útiles, prácticas y fáciles de usar. Abre el archivo de muestra en Apps Studio y copia y pega los elementos necesarios para tu diseño.

Empezar tu primer diseño

Antes de empezar a crear tu primera aplicación, se recomienda planificar el trabajo por adelantado. Plantéate primero las siguientes preguntas:

• ¿Cuál es el contexto de tu aplicación?
• ¿Quiénes son los usuarios? ¿Cuál es su objetivo, ocupación o especialización?
• ¿Cuál es la situación típica o el caso más frecuente?
• ¿Cómo vas a medir el éxito de la aplicación?
• ¿Cuáles son los efectos positivos que se esperan de la aplicación?

Una vez que hayas creado tu plan, puedes revisarlo fácilmente con tus compañeros y hacer cualquier cambio. Tras esto, puedes pasar con seguridad a los siguientes pasos:

1. Evalúa otros casos analizando los escenarios menos frecuentes y los casos límite. Anótalos y priorízalos.
2. Define el mejor medio o formato para conseguir el mejor resultado. En este paso, ya puedes decidir si necesitas una página, un sitio web o varios asistentes a partir de una página.
3. Investiga e identifica a tus competidores para evaluar los puntos fuertes y débiles. Evalúa cómo abordar problemas similares.
4. Crea un prototipo aproximado de tu aplicación. Puedes discutir el prototipo con tus compañeros para llegar a la mejor solución.
5. Prueba el prototipo y recopila las opiniones. Se recomienda compartir el prototipo con los usuarios potenciales para obtener mejores opiniones y mejoras.
6. Comienza a diseñar la versión final de tu aplicación.

Principios de diseño

Hay muchos principios de diseño que se deben seguir para crear aplicaciones prácticas y fáciles de usar. Para obtener la mejor experiencia de usuario, sigue al menos los dos principios siguientes.

Consistencia

• Usa el mismo tipo de letra y diseño en la medida de lo posible.
• Sé coherente en el diseño en todas las páginas de la aplicación para mejorar la experiencia del usuario.

Simplicidad

• Usa solo los elementos necesarios para realizar el trabajo.
• Intenta evitar tener más elementos de los necesarios en el diseño.
• Asegúrate de que todo esté claro y de que no falte ninguna información importante que el usuario tenga que buscar.

Colores

El uso del color es muy importante a la hora de crear el diseño de la aplicación. Para obtener la mejor experiencia de usuario, sigue las siguientes directrices:

• Usa los colores de forma coherente en toda la aplicación para los elementos del mismo tipo.
• Intenta evitar los colores del semáforo, a menos que sea necesario. Puedes utilizar el rojo para los errores, el amarillo o el naranja para las advertencias y el verde para comunicar el progreso positivo.

• Intenta no basarte solo en los colores para presentar la información. Añade siempre información en formato textual junto al objeto de color.

Consejo:

Busca colores que proporcionen el máximo contraste, incluido el suficiente contraste entre el contenido y el fondo, para que el texto y las imágenes no decorativas sean legibles para cualquier persona con baja visión o deficiencias cromáticas.

Alineación

La alineación de los elementos es un paso importante para crear un diseño eficaz. Asegúrate de que tus elementos estén alineados de forma coherente.

Puedes alinear fácilmente tus elementos horizontal o verticalmente desde la pestaña Estilo.

Ejemplo

A continuación, se muestra un ejemplo de un elemento y el procedimiento para crearlo.

Paso	Acción
1	Abre tu aplicación ya existente o inicia una nueva.
2	Añade un nuevo contenedor a tu diseño con las siguientes propiedades: Diseño: horizontal, superior, izquierda Tamaño: ancho - 100%, alto - automático o en blanco
3	Añadir un contenedor dentro del primero con las siguientes propiedades: Diseño: horizontal, abajo, izquierda Tamaño: anchura - 40 % - altura - automática o en blanco
4	Añade una etiqueta de control dentro del contenedor con las siguientes propiedades: Texto: Etiqueta
5	Añade una segunda etiqueta dentro del contenedor con las siguientes propiedades: Texto: * Estilo: color - #c2320c
6	Añade un nuevo contenedor dentro del principal con las siguientes propiedades: Diseño: vertical, izquierda, arriba Tamaño: anchura - 60 %, altura: automática o en blanco
7	Añade un recuadro de texto dentro del contenedor con las siguientes propiedades: Texto de sugerencia: texto de sugerencia
8	Añade una etiqueta dentro del mismo contenedor bajo el cuadro de texto con las siguientes propiedades: Texto: este campo es obligatorio Otras propiedades: oculto Estilo: color - #c2320c

Nota: Asegúrate de que los mensajes de error están ocultos y solo sean visibles en caso de que se produzca un error.

Después de seguir el procedimiento anterior, la estructura y el elemento se verán como en las imágenes de abajo.