Download - UX en proyectos de moove-it
Que hacemos en el grupo de UX?
Objetivos
1. Que cada integrante de este grupo aprenda más sobre UX
2. Volcar a TODO moove-it las enseñanzas3. Que impacte el trabajo realizado en mejoras sobre los
proyectos4. Generar un area que mejore y audite el trabajo
realizado en el área de UX5. Poder vender los servicios de esta área
Quienes somos por ahora ?JP, Martin, Suttner, Moretti, Borrazás, Guzman, Fernando y Andreas
Patrones a analizar
● Tablas○ Hover de datos y titulos○ Truncar○ Zebra○ Sorting○ Valor del dato (ej. 0, 1 ... true, false)
● Links vs Botones● Acciones
○ Primaria, secundaria, Destrucción● Criterios
○ Estéticos○ Funcionales
Tablas - TruncarProblema:Cuando despliego datos sobre una tabla puede pasar que un valor tome un largo mayor al "width" de la columna.
Solución: ● Truncar el valor● Agregar en el hover la descripción completa
Tablas - Largo de una columna ProblemaEstá bien que el titulo exprese el significado del valor ... no abusar con el largo!Idealmente tener en cuenta el largo que pueden tomar los valores en la columna.
Solución titulo:1. Si es posible acortar el titulo sin perder el significado2. Si no es posible poner una sigla o abreviar y con el hover
poner la descripción completa
Pique adicional3. Ojo con los espacios. Cortan la columna. Agregar " "
en vez de espacio para que no haga el salto de linea
Tablas
- Trunca el dato de descripción !- no agrega el la descripción en el hover !- Titulo grande y valor pequeño !
Tablas - valor "humano"ProblemaHay veces que el valor que visualizamos es 1 o 0 en vez de poner Verdadero/Falso. Esto ocurre tambien con identificadores. El usuario no tiene porque saber que 453 = Montevideo
Solución titulo:1. Transformar a el valor que el usuario entiende para
visualizarlo en la tabla
Tablas - valor "humano"
El articulo que es ? el numero a que corresponde ? que espera el usuario ?
Group ? a que hace referencia el valor 2222 ?
Tablas - SortingProblema:
● se desea comparar campos● hay muchas filas● hay paginado● no toda la información está visible
Solución:● agregar sorting por columna en los campos necesarios
Indicaciones:● ser bien explícitos al indicar la existencia de la funcionalidad● indicar qué columna está ordenada en cada momento
Tablas - Sorting
si bien ambas indican qué columna está siendo sorteada, sólo una muestra la funcionalidad al hacer hover
Tablas - ZebraProblema:
● hay muchas filas● se pierde distinción entre una fila y otra● poca legibilidad
Solución:● pintar alternadamente las filas con dos colores distintos
Indicaciones:● aumentar contraste● usar colores de similar valor, diferencia sutil● de baja saturación para no cargar la tabla
Tablas - Zebra
ver diferencia de contraste y legibilidad entre filas
no utilizar 'inline-editing yellow' a menos que se pueda editar al hacer click
Inline editingProblema:Como indicar a el usuario que determinado/s campos son para "edit in place" o "inline editing"?
Solución:Utilizar el color #FFFF92 en el hover del contenedor del formulario o de la fila de la tabla. Este color debe ser mostrado también mientras se edita el elemento para marcar que el mismo se esta editando. De ser posible agregar un elemento que se muestre en todo momento para indicar que esa seccion es editable (icono lapiz).
Nota: no se recomienda utilizar este color para otra cosa que no sea el inline editing.
Camino de Migas Problema:
● el usuario necesita saber dónde se encuentra dentro del flujo de la página para saber cómo volver
Solución:● utilizar labels ordenados jerárquicamente que indiquen el
camino recorrido hasta el punto actual
Indicaciones:● todas menos la locación actual deben ser links que
permiten navegar hacia atrás● utilizar separadores que indiquen un orden● los separadores no deben ser links
Camino de Migas
está bien que el hover tenga efecto en todos menos el último, pero también hay que mostrar previamente una diferencia de estilo
Links vs botones Problema:
● Cuándo usar cual?
Solución:● Links are for navigation. They are used to move between
pages in an information space.● Buttons are for actions that cause some chance (e.g.
adding a product to shopping cart)
Un boton demuestra una mucho mayor importancia que un link, lo que significa que debe ser reservado para las acciones que implican un cambio o un compromiso por parte del usuario.
Acciones Problema:Se necesita indicar un flujo claro al usuario.
Solución:● Evitar las acciones secundarias siempre que sea posible.
"Do you really need that 'reset' button?"● Asegurarse que exista una clara distinción entre la acción
primaria y la secundaria. Agregar peso visual a la accion primaria y quitar peso a la secundaria (color, botón/link, tamaño).
● Alinear la acción primaria con los campos del formulario para generar un camino claro para completarlo.
Mantener Criterios VisualesProblema:
● lograr una página web consistente● conseguir que tenga porte● transmitir seguridad al navegarla
Solución:● seguir patrones de diseño UX● mantener los criterios tomados● no confundir al usuario con diseños distintos para
funcionalidades similares● que el usuario encuentre lo que espera a partir de lo ya
aprendido dentro de nuestra aplicación● principio de la menor sorpresa● principle of least astonishment (POLA)
Mantener criterios funcionalesProblemaSi un componente visual realiza una acción o función en un módulo, mantener el criterio en toda la app.
Solución:1. Tener criterio !