Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
UX en proyectos de moove-it           Grupo de UX     Presentación: Seba Suttner,          Martin Cabrera,           Seba ...
Que hacemos en el grupo de UX?Objetivos 1. Que cada integrante de este grupo aprenda más    sobre UX 2. Volcar a TODO moov...
Patrones a analizar ● Tablas     ○ Hover de datos y titulos     ○ Truncar     ○ Zebra     ○ Sorting     ○ Valor del dato (...
Tablas - TruncarProblema:Cuando despliego datos sobre una tabla puede pasar que unvalor tome un largo mayor al "width" de ...
Tablas - Largo de una columnaProblemaEstá bien que el titulo exprese el significado del valor ... noabusar con el largo!Id...
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 deponer Verdadero/Falso. Esto ocurr...
Tablas - valor "humano"                          El articulo que es ? el                          numero a que corresponde...
Tablas - SortingProblema: ● se desea comparar campos ● hay muchas filas ● hay paginado ● no toda la información está visib...
Tablas - Sorting                   si bien ambas                   indican qué                   columna está siendo      ...
Tablas - ZebraProblema: ● hay muchas filas ● se pierde distinción entre una fila y otra ● poca legibilidadSolución: ● pint...
Tablas - Zebra                              ver diferencia de                              contraste y                    ...
Inline editingProblema:Como indicar a el usuario que determinado/s campos son para"edit in place" o "inline editing"?Soluc...
Inline editing
Camino de MigasProblema: ● el usuario necesita saber dónde se encuentra dentro del   flujo de la página para saber cómo vo...
Camino de Migasestá bien que elhover tenga efectoen todos menos elúltimo, perotambién hay quemostrarpreviamente unadiferen...
Links vs botonesProblema: ● Cuándo usar cual?Solución: ● Links are for navigation. They are used to move between   pages i...
Links vs botones
AccionesProblema:Se necesita indicar un flujo claro al usuario.Solución: ● Evitar las acciones secundarias siempre que sea...
Acciones
Mantener Criterios VisualesProblema: ● lograr una página web consistente ● conseguir que tenga porte ● transmitir segurida...
Mantener Criterios Visuales           no se mantienen formatos           para funcionalidad similar                 + add ...
Mantener criterios funcionalesProblemaSi un componente visual realiza una acción o función en unmódulo, mantener el criter...
Mantener criterios funcionales                       Funcionalidad de                       calenario.                    ...
Gracias!
Upcoming SlideShare
Loading in …5
×

UX en proyectos de moove-it

1,881 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

UX en proyectos de moove-it

  1. 1. UX en proyectos de moove-it Grupo de UX Presentación: Seba Suttner, Martin Cabrera, Seba Borrazás
  2. 2. 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ñanzas 3. Que impacte el trabajo realizado en mejoras sobre los proyectos 4. Generar un area que mejore y audite el trabajo realizado en el área de UX 5. Poder vender los servicios de esta áreaQuienes somos por ahora ?JP, Martin, Suttner, Moretti, Borrazás, Guzman, Fernandoy Andreas
  3. 3. 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
  4. 4. Tablas - TruncarProblema:Cuando despliego datos sobre una tabla puede pasar que unvalor tome un largo mayor al "width" de la columna.Solución: ● Truncar el valor ● Agregar en el hover la descripción completa
  5. 5. Tablas - Largo de una columnaProblemaEstá bien que el titulo exprese el significado del valor ... noabusar con el largo!Idealmente tener en cuenta el largo que pueden tomar losvalores en la columna.Solución titulo: 1. Si es posible acortar el titulo sin perder el significado 2. Si no es posible poner una sigla o abreviar y con el hover poner la descripción completaPique adicional 3. Ojo con los espacios. Cortan la columna. Agregar " " en vez de espacio para que no haga el salto de linea
  6. 6. Tablas- Trunca el dato de descripción !- no agrega el la descripción en el hover !- Titulo grande y valor pequeño !
  7. 7. Tablas - valor "humano"ProblemaHay veces que el valor que visualizamos es 1 o 0 en vez deponer Verdadero/Falso. Esto ocurre tambien conidentificadores. El usuario no tiene porque saber que 453 =MontevideoSolución titulo: 1. Transformar a el valor que el usuario entiende para visualizarlo en la tabla
  8. 8. Tablas - valor "humano" El articulo que es ? el numero a que corresponde ? que espera el usuario ? Group ? a que hace referencia el valor 2222 ?
  9. 9. Tablas - SortingProblema: ● se desea comparar campos ● hay muchas filas ● hay paginado ● no toda la información está visibleSolución: ● agregar sorting por columna en los campos necesariosIndicaciones: ● ser bien explícitos al indicar la existencia de la funcionalidad ● indicar qué columna está ordenada en cada momento
  10. 10. Tablas - Sorting si bien ambas indican qué columna está siendo sorteada, sólo una muestra la funcionalidad al hacer hover
  11. 11. Tablas - ZebraProblema: ● hay muchas filas ● se pierde distinción entre una fila y otra ● poca legibilidadSolución: ● pintar alternadamente las filas con dos colores distintosIndicaciones: ● aumentar contraste ● usar colores de similar valor, diferencia sutil ● de baja saturación para no cargar la tabla
  12. 12. Tablas - Zebra ver diferencia de contraste y legibilidad entre filasno utilizar inline-editingyellow a menos que sepueda editar al hacerclick
  13. 13. 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 delformulario o de la fila de la tabla. Este color debe ser mostradotambién mientras se edita el elemento para marcar que elmismo se esta editando. De ser posible agregar un elementoque se muestre en todo momento para indicar que esa secciones editable (icono lapiz). Nota: no se recomienda utilizar este color para otra cosa que no sea el inline editing.
  14. 14. Inline editing
  15. 15. Camino de MigasProblema: ● el usuario necesita saber dónde se encuentra dentro del flujo de la página para saber cómo volverSolución: ● utilizar labels ordenados jerárquicamente que indiquen el camino recorrido hasta el punto actualIndicaciones: ● 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
  16. 16. Camino de Migasestá bien que elhover tenga efectoen todos menos elúltimo, perotambién hay quemostrarpreviamente unadiferencia de estilo
  17. 17. Links vs botonesProblema: ● 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 unlink, lo que significa que debe ser reservado para las accionesque implican un cambio o un compromiso por parte delusuario.
  18. 18. Links vs botones
  19. 19. AccionesProblema: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.
  20. 20. Acciones
  21. 21. Mantener Criterios VisualesProblema: ● lograr una página web consistente ● conseguir que tenga porte ● transmitir seguridad al navegarlaSolució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)
  22. 22. Mantener Criterios Visuales no se mantienen formatos para funcionalidad similar + add vs. Add
  23. 23. Mantener criterios funcionalesProblemaSi un componente visual realiza una acción o función en unmódulo, mantener el criterio en toda la app.Solución: 1. Tener criterio !
  24. 24. Mantener criterios funcionales Funcionalidad de calenario. No Show. No mantiene criterio ! Show !
  25. 25. Gracias!

×