Your SlideShare is downloading. ×
0
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
UX en proyectos de moove-it
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

UX en proyectos de moove-it

1,554

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,554
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. UX en proyectos de moove-it Grupo de UX Presentación: Seba Suttner, Martin Cabrera, Seba Borrazás
  • 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. 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. 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. 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. Tablas- Trunca el dato de descripción !- no agrega el la descripción en el hover !- Titulo grande y valor pequeño !
  • 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. 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. 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. Tablas - Sorting si bien ambas indican qué columna está siendo sorteada, sólo una muestra la funcionalidad al hacer hover
  • 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. Tablas - Zebra ver diferencia de contraste y legibilidad entre filasno utilizar inline-editingyellow a menos que sepueda editar al hacerclick
  • 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. Inline editing
  • 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. Camino de Migasestá bien que elhover tenga efectoen todos menos elúltimo, perotambién hay quemostrarpreviamente unadiferencia de estilo
  • 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. Links vs botones
  • 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. Acciones
  • 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. Mantener Criterios Visuales no se mantienen formatos para funcionalidad similar + add vs. Add
  • 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. Mantener criterios funcionales Funcionalidad de calenario. No Show. No mantiene criterio ! Show !
  • 25. Gracias!

×