Auto-evaluación: Principios heurísticos de USABILIDAD
1: Visibilidad
El sistema debe mantener siempre informados a los usuarios sobre lo que está sucediendo, a través de la retroalimentación adecuada dentro de un tiempo razonable.
2: Comfort y Familiaridad
El sistema debería hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario, en lugar de términos orientados al sistema. Siga las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
3: Control de usuario y libertad
Los usuarios a menudo eligen las funciones del sistema por error y necesitarán una "salida de emergencia" claramente marcada para salir del estado no deseado sin tener que pasar por un diálogo extendido. Habilitar la opción deshacer y rehacer.
4: Consistencia y estándares
Los usuarios no deben tener que preguntarse si diferentes palabras, situaciones o acciones significan la misma cosa. Seguir convenciones de plataforma.
5: Prevención de errores
Incluso mejor que buenos mensajes de error es un diseño cuidadoso que evita que un problema se produzca en primer lugar. Eliminar las condiciones propensas a errores o verificarlos y presentar a los usuarios la opción de confirmación antes de comprometerse con la acción.
6: Reconocer antes de recordar
Minimizar la carga de memoria del usuario haciendo visibles objetos, acciones y opciones. El usuario no debe tener que recordar información de una parte del diálogo a otra. Las instrucciones de uso del sistema deben ser visibles o fácilmente recuperables cuando proceda.
7: Flexibilidad y uso eficiente
Los aceleradores no vistos por el usuario novato pueden a menudo acelerar la interacción para el usuario experto de tal manera que el sistema pueda atender tanto a usuarios inexpertos como experimentados. Permitir a los usuarios adaptar acciones frecuentes.
8: Diseño y estética minimalista
Los diálogos no deben contener información que sea irrelevante o rara vez necesaria. Cada unidad adicional de información en un diálogo compite con las unidades relevantes de información y disminuye su visibilidad relativa.
9: Reconocer, diagnosticar y reparar un error
Los mensajes de error deben expresarse en un lenguaje sencillo (sin códigos), indicar con precisión el problema y sugerir constructivamente una solución.
10: Ayuda y documentación
Aunque es mejor si el sistema se puede utilizar sin documentación, puede ser necesario proporcionar ayuda y documentación. Cualquier información de este tipo debe ser fácil de buscar, centrarse en la tarea del usuario, enumerar los pasos concretos que se deben llevar a cabo, y no ser demasiado grande.
Charla con Bryan Brenes, Artista visual multidisciplinario, en torno al tema de la ANIMACIÓN:
12 principios de la animación:
Compresión y extensión: se estiran y se pegan para generar tensión dinámica.
Anticipación: dos o una acción previa que explican lo que va a suceder.
Puestas en escena: Que cada cuadro tenga lógica en esa secuencia. No puede haber duda de qué es lo que se habla.
Animación directa y pose a pose: dibujar un cuadro sobre el otro. A mano se colocan cuadros clave, que dirigen el acto de la animación, indican las partes del cuadro que toca y la duración.
Acción complementaria y acción superpuesta: Los movimientos inércicos que suceden en una velocidad distinta a la del movimiento inicial. Movimientos “de rebote”.
Acelerar y desacelerar: Ease. Hace que si se toma un bloque y se mueve, se le coloca y se suaviza el movimiento.
Arcos: Casi todo movimiento tiene una leve curva.
Acción secundaria: algo anecdótico, permite aprovechar la salida con una animación en segundo plano que agrega un extra antes del final de la animación.
Timing: relacionado a la cantidad de cuadros en un segundo.
Exageración: animación 2D permite exagerar demasiado porque no se lucha contra la fuerza de la gravedad.
Dibujos sólidos: pensar en lo que es un dibujo con peso, pensar por ejemplo en las sombras para dar ubicación en el espacio.
Atractivo: algo que sea interesante de ver, con un aspecto estético agradable.
Hello everyone, follow this tutorial to create a beautiful onboarding screen animation in Adobe XD. You can download the project files with all the assets in...
M O O D B O A R D (siete):
Interfaz: On boarding
Las pantallas introductorias, u on boarding, son una parte vital del app y el principal momento en que el usuario se topará con el estilo ilustrativo y con instrucciones sobre cómo emplear el app. Este tutorial me dio una vía para diagramar el On boarding y animarlo con facilidad, al menos para la fase de prototipado de mediana fidelidad.
Opciones animadas para el indicador de carga de la aplicación. Lo ideal sería aplicar una animación sencilla, que sea dinámica, pero no abrumadora. Debe comunicar ligereza y valerse de tres círculos, o una sola línea gruesa (en concordancia con el diseño del logotipo de Artmates).
M O O D B O A R D (cinco):
Interfaz: barra de navegación
Algunas posibilidades para el diseño y desplazamiento del indicador de ubicación de la barra de navegación principal. Estos emplean como recurso principal el destacado por tamaño y la diferenciación por color. En el caso de Artmates, lo ideal será utilizar solamente la estrategia del tamaño, o emplear una distinta.
Con base en las ideas de linealidad, ligereza gráfica y alto contraste de color, el app Artmates plantea una interfaz dinámica y jovial, muy adecuada para el público meta definido.
Propuse trabajar solamente a partir de dos colores, sumados al blanco y el gris, como paleta de color principal para Artmates. El rosa y el azul generan un alto contraste de muy agradable percepción, además, remiten a lo contemporáneo y lo social, en especial el azul RGB 255, brillante y contrastado en contra de un rosa pálido.
Las ilustraciones y el look&feel general del app serán muy gráficas (lineales) y ligeras. El app no pretende ser pesada a la mirada, más bien desea ser de fácil legibilidad y agradable percepción. Los humanos representados adquieren cierto grado de caricaturización gracias a esa linealidad, que a su vez, pretende estandarizar la representación.
discoholicmusic
dededos
ellievsbear
kaledo-art
vaporwave
andulkaphoto