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.

Heurísticas, Taller UX - Agosto 2016

827 views

Published on

Invitado especial: Santiago Bustelo
Reglas básicas para evaluar usabilidad.

Published in: Education
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m77EgH } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... Download doc Ebook here { http://bit.ly/2m77EgH } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Heurísticas, Taller UX - Agosto 2016

  1. 1. APRENDIENDO A DISEÑAR PARA MEDIOS INTERACTIVOS
  2. 2. Santiago Bustelo IxDA Buenos Aires 
 Contribuciones de Luciana Ramírez Farías, Damián Calderón y Jorge Martínez Principios, Reglas y Heurísticas Con el apoyo de Este obra está bajo una licencia de
 Creative Commons Atribución-CompartirIgual 4.0 Internacional
  3. 3. Esta presentación está publicada bajo licencia
 Creative Commons Atribución-CompartirIgual 4.0 Internacional (CC BY-SA 4.0) Usted es libre de: • Compartir — copiar y redistribuir el material en cualquier medio o formato • Adaptar — remezclar, transformar y crear a partir del material. Para cualquier propósito, incluso comercialmente. Ellicenciantenopuederevocarestaslibertadesentantoustedsigalostérminosdelalicencia. Bajo las condiciones siguientes: Atribución — Usted debe darle crédito a esta obra de manera adecuada (dar nombre del creador y de las partes atribuidas, un aviso de derechos de autor, una nota de licencia, un aviso legal, y un enlace al material), proporcionando un enlace a la licencia, e indicando si se han realizado cambios. Puede hacerlo en cualquier forma razonable, pero no de forma tal que sugiera que usted o su uso tienen el apoyo del licenciante. CompartirIgual — Si usted mezcla, transforma o crea nuevo material a partir de esta obra, usted podrá distribuir su contribución siempre que utilice la misma licencia que la obra original, o una que aparezca como compatible en https://creativecommons.org/compatiblelicenses. No hay restricciones adicionales — Usted no puede aplicar términos legales ni medidas tecnológicas que restrinjan legalmente a otros hacer cualquier uso permitido por la licencia.
  4. 4. Acerca de Taller UX Taller UX es un modelo reproducible de microtalleres de User Experience, construido colaborativamente, con el objetivo de mejorar la educación y divulgación de UX en español. ¿Querés colaborar con el proyecto o estás interesado en reproducir el taller en tu ciudad? ¡Contactanos! Acerca de IxDA IxDA (Interaction Design Association), es una organización mundial voluntaria, sin fines de lucro ni costos de membresía, iniciada en 2003. Está conformada por voluntarios que se identifican con la misión de mejorar la condición humana avanzando la práctica profesional del Diseño de Interacción, sin percibir retribución económica por su participación. Por ello, todas las iniciativas de IxDA son por la comunidad, para la comunidad.
  5. 5. Heurísticas de Usabilidad • Principios reconocidos de usabilidad. • Son lineamientos generales para reducir las frustraciones que un usuario puede tener al utilizar nuestro sistema. • Hay muchos conjuntos de heurísticas de usabilidad.
 No son mutuamente excluyentes, y cubren muchos aspectos en común. 5Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  6. 6. Heurísticas: como las reglas gramaticales Ortografía Gramática Reglas del arte Manual de estilo Obras, sobras y zozobras GENERAL
 (LENGUA) ESPECÍFICO
 (MEDIO) GÉNERO 6Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo • Iconos: BeOS icons - Matthew McClintock
  7. 7. A dónde aplican? 7Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  8. 8. Niveles de definiciones de diseño • Principios, fundamentos • Reglas, heurísticas • Patrones • Guías y librerías • Checklists GENERAL
 (DISCIPLINA) ESPECÍFICO
 (PROYECTO) Diseño Verificación Sistematización 8Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  9. 9. • Instrucción • Formación de hábitos • Operación • Selección • Percepción COSTO Principios de… 9Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  10. 10. Principios de percepción: Memoria de “corto plazo” • Instrucción • Formación de hábitos • Operación • Selección • Percepción 10Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  11. 11. Memoria de trabajo o “de corto plazo” (Baddeley & Hitch, 1974, 2000) Ejecutivo
 Central Bucle
 fonológico Agenda visoespacial Almacén episódico Lenguaje
 Semántica
 visual
 Memoria episódica de corto plazo Información sensorial Memoria sensorial Decaimiento Atención Simply Psychology: Working Memory Wikipedia:
 Memoria de trabajo 11Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  12. 12. Límite del Bucle fonológico como sistema autónomo 2”aprox. 12Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  13. 13. ¿Cuántas figuras podemos contar de un vistazo? 13Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  14. 14. ¿Cuántas figuras podemos contar de un vistazo? 14Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  15. 15. ¿Cuántas figuras podemos contar de un vistazo? 15Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  16. 16. ¿Cuántas figuras podemos contar de un vistazo? 16Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  17. 17. P R I N C I P I O 3 a 4 elementos es el límite que podemos enumerar de un vistazo, y también de la memoria de trabajo. 17Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  18. 18. Aplicación
  19. 19. Aplicación vs. 4393-9889
  20. 20. 3570841 AddPrinter.app/ 147198 AddressBookUrlForwarder.app/ 39677 AirPlayUIAgent.app/ 122696 AirPort Base Station Agent.app/ 178925 AOS.bundle/ 2233447 AppDownloadLauncher.app/ 1039622 AppleFileServer.app/ 30542 AppleGraphicsWarning.app/ 3612189 AppleScript Utility.app/ 0 ApplicationFirewall.bundle/ 66853510 Applications/ 1236110 Automator Runner.app/ 3609117 backupd.bundle/ 3192667 Bluetooth Setup Assistant.app/ 3742573 BluetoothUIServer.app/ 4240544 CalendarFileHandler.app/ 78901 Captive Network Assistant.app/ 20944 CarbonSpellChecker.bundle/ 64241082 Certificate Assistant.app/ 5217723 cloudphotosd.app/ 0 com.apple.recovery.boot/ 54890 CommonCocoaPanels.bundle/ 1441525 CoreLocationAgent.app/ 2347880 CoreServicesUIAgent.app/ 326758843 CoreTypes.bundle/ 636007 Database Events.app/ 4453617 DiskImageMounter.app/ 21420341 Dock.app/ 1605493 Encodings/ 2153879 Expansion Slot Utility.app/ 3740960 File Sync.app/
  21. 21. 3570841 AddPrinter.app/ 147198 AddressBookUrlForwarder.app/ 39677 AirPlayUIAgent.app/ 122696 AirPort Base Station Agent.app/ 178925 AOS.bundle/ 2233447 AppDownloadLauncher.app/ 1039622 AppleFileServer.app/ 30542 AppleGraphicsWarning.app/ 3612189 AppleScript Utility.app/ 0 ApplicationFirewall.bundle/ 66853510 Applications/ 1236110 Automator Runner.app/ 3609117 backupd.bundle/ 3192667 Bluetooth Setup Assistant.app/ 3742573 BluetoothUIServer.app/ 4240544 CalendarFileHandler.app/ 78901 Captive Network Assistant.app/ 20944 CarbonSpellChecker.bundle/ 64241082 Certificate Assistant.app/ 5217723 cloudphotosd.app/ 0 com.apple.recovery.boot/ 54890 CommonCocoaPanels.bundle/ 1441525 CoreLocationAgent.app/ 2347880 CoreServicesUIAgent.app/ 326758843 CoreTypes.bundle/ 636007 Database Events.app/ 4453617 DiskImageMounter.app/ 21420341 Dock.app/ 1605493 Encodings/ 2153879 Expansion Slot Utility.app/ 3740960 File Sync.app/ 3.570.841 AddPrinter.app/ 147.198 AddressBookUrlForwarder.app/ 39.677 AirPlayUIAgent.app/ 122.696 AirPort Base Station Agent.app/ 178.925 AOS.bundle/ 2.233.447 AppDownloadLauncher.app/ 1.039.622 AppleFileServer.app/ 30.542 AppleGraphicsWarning.app/ 3.612.189 AppleScript Utility.app/ 0 ApplicationFirewall.bundle/ 66.853.510 Applications/ 1.236.110 Automator Runner.app/ 3.609.117 backupd.bundle/ 3.192.667 Bluetooth Setup Assistant.app/ 3.742.573 BluetoothUIServer.app/ 4.240.544 CalendarFileHandler.app/ 78.901 Captive Network Assistant.app/ 20.944 CarbonSpellChecker.bundle/ 64.241.082 Certificate Assistant.app/ 5.217.723 cloudphotosd.app/ 0 com.apple.recovery.boot/ 54.890 CommonCocoaPanels.bundle/ 1.441.525 CoreLocationAgent.app/ 2.347.880 CoreServicesUIAgent.app/ 326.758.843 CoreTypes.bundle/ 636.007 Database Events.app/ 4.453.617 DiskImageMounter.app/ 21.420.341 Dock.app/ 1.605.493 Encodings/ 2.153.879 Expansion Slot Utility.app/ 3.740.960 File Sync.app/ vs.
  22. 22. 3570841 AddPrinter.app/ 147198 AddressBookUrlForwarder.app/ 39677 AirPlayUIAgent.app/ 122696 AirPort Base Station Agent.app/ 178925 AOS.bundle/ 2233447 AppDownloadLauncher.app/ 1039622 AppleFileServer.app/ 30542 AppleGraphicsWarning.app/ 3612189 AppleScript Utility.app/ 0 ApplicationFirewall.bundle/ 66853510 Applications/ 1236110 Automator Runner.app/ 3609117 backupd.bundle/ 3192667 Bluetooth Setup Assistant.app/ 3742573 BluetoothUIServer.app/ 4240544 CalendarFileHandler.app/ 78901 Captive Network Assistant.app/ 20944 CarbonSpellChecker.bundle/ 64241082 Certificate Assistant.app/ 5217723 cloudphotosd.app/ 0 com.apple.recovery.boot/ 54890 CommonCocoaPanels.bundle/ 1441525 CoreLocationAgent.app/ 2347880 CoreServicesUIAgent.app/ 326758843 CoreTypes.bundle/ 636007 Database Events.app/ 4453617 DiskImageMounter.app/ 21420341 Dock.app/ 1605493 Encodings/ 2153879 Expansion Slot Utility.app/ 3740960 File Sync.app/ 3.570.841 AddPrinter.app/ 147.198 AddressBookUrlForwarder.app/ 39.677 AirPlayUIAgent.app/ 122.696 AirPort Base Station Agent.app/ 178.925 AOS.bundle/ 2.233.447 AppDownloadLauncher.app/ 1.039.622 AppleFileServer.app/ 30.542 AppleGraphicsWarning.app/ 3.612.189 AppleScript Utility.app/ 0 ApplicationFirewall.bundle/ 66.853.510 Applications/ 1.236.110 Automator Runner.app/ 3.609.117 backupd.bundle/ 3.192.667 Bluetooth Setup Assistant.app/ 3.742.573 BluetoothUIServer.app/ 4.240.544 CalendarFileHandler.app/ 78.901 Captive Network Assistant.app/ 20.944 CarbonSpellChecker.bundle/ 64.241.082 Certificate Assistant.app/ 5.217.723 cloudphotosd.app/ 0 com.apple.recovery.boot/ 54.890 CommonCocoaPanels.bundle/ 1.441.525 CoreLocationAgent.app/ 2.347.880 CoreServicesUIAgent.app/ 326.758.843 CoreTypes.bundle/ 636.007 Database Events.app/ 4.453.617 DiskImageMounter.app/ 21.420.341 Dock.app/ 1.605.493 Encodings/ 2.153.879 Expansion Slot Utility.app/ 3.740.960 File Sync.app/ vs. vs.
  23. 23. H E U R Í S T I C A S • Reducir la carga de la memoria a corto plazo. Donde fuera apropiado, debe ofrecerse acceso inmediato a comandos, abreviaturas, códigos, y otras informaciones que puedan aclarar dudas contextualizadas. Ben Shneiderman
 • Reconocer antes que recordar. Hacer que los objetos, acciones y opciones sean visibles en el momento apropiado para reducir al mínimo la carga de memoria del usuario y facilitar las decisiones. Jakob Nielsen 20Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  24. 24. Principios de percepción: Gestalt • Instrucción • Formación de hábitos • Operación • Selección • Percepción 21Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  25. 25. Gestalt: Principio de unidad • Los objetos encerrados son percibidos como un grupo 22Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  26. 26. El lenguaje visual no escala infinitamente 23Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  27. 27. Abuso y agotamiento de los recursos
  28. 28. P R I N C I P I O S Cuando todo es importante, nada es importante. Vox Populi 25Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  29. 29. 1 + 1 = 3 o más La actividad visual suplementaria es
 no-información, ruido, y recarga. (Edward Tufte, The Visual display of Quantitive Information) 26Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  30. 30. H E U R I S T I C A S • Estética y diseño minimalista. No mostrar información irrelevante o innecesaria, ya que cada elemento adicional disminuye la relevancia del otro. Jakob Nielsen • Usar el menor recurso capaz de aportar significado. Edward Tufte • Considerar las limitaciones humanas. El diseño debe considerar y evitar sobrecargar las limitaciones, cognitivas y sensoriales, del ser humano. Susan Weinschenk & Dean Barker 27Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  31. 31. Aplicación I II III IV x y x y x y x y 100 804 100 914 100 746 80 658 80 695 80 814 80 677 80 576 130 758 130 874 130 1.274 80 771 90 881 90 877 90 711 80 884 110 833 110 926 110 781 80 847 140 996 140 810 140 884 80 704 60 724 60 613 60 608 80 525 40 426 40 310 40 539 190 1.250 120 1.084 120 913 120 815 80 556 70 482 70 726 70 642 80 791 50 568 50 474 50 573 80 689 28Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  32. 32. Aplicación I II III IV x y x y x y x y 100 804 100 914 100 746 80 658 80 695 80 814 80 677 80 576 130 758 130 874 130 1.274 80 771 90 881 90 877 90 711 80 884 110 833 110 926 110 781 80 847 140 996 140 810 140 884 80 704 60 724 60 613 60 608 80 525 40 426 40 310 40 539 190 1.250 120 1.084 120 913 120 815 80 556 70 482 70 726 70 642 80 791 50 568 50 474 50 573 80 689 I II III IV x y x y x y x y 100 804 100 914 100 746 80 658 80 695 80 814 80 677 80 576 130 758 130 874 130 1.274 80 771 90 881 90 877 90 711 80 884 110 833 110 926 110 781 80 847 140 996 140 810 140 884 80 704 60 724 60 613 60 608 80 525 40 426 40 310 40 539 190 1.250 120 1.084 120 913 120 815 80 556 70 482 70 726 70 642 80 791 50 568 50 474 50 573 80 689 vs. 28Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  33. 33. Aplicación Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 29
  34. 34. Aplicación vs. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 29
  35. 35. Principios de Selección • Instrucción • Formación de hábitos • Operación • Selección • Percepción 30Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  36. 36. Tiempo necesario para tomar una decisión:
 T = a + b log2 ( n +1 ) • a, b: latencia y velocidad,
 dependientes del contexto.
 Raskin: a falta de datos, tomamos a=50, b=150 msec. • n: cantidad de opciones
 con igual índice de probabilidad. 
 Más información:
 Artículo en Wikipedia sobre Ley de Hick (en inglés) Ley de Hick-Hyman 31Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  37. 37. Aplicación de Ley de Hick Tenemos 32 items con igual probabilidad. ¿Cómo nos conviene disponerlos?
 a) Una sola página con 32 items b) 4 páginas con 8 items cada una T = a + b log2 ( n +1 ) x log2 x 1 0 2 1 3 1,58 4 2 5 2,32 6 2,58 7 2,81 8 3 9 3,17 10 3,32 11 3,46 x log2 x 12 3,58 13 3,7 14 3,81 15 3,91 16 4 17 4,09 18 4,17 19 4,25 20 4,32 21 4,39 22 4,46 x log2 x 23 4,52 24 4,58 25 4,64 26 4,7 27 4,75 28 4,81 29 4,86 30 4,91 31 4,95 32 5 33 5,04 32Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  38. 38. Tenemos 32 items con igual probabilidad.
 ¿Cómo nos conviene disponerlos?
 a)Una sola página con 32 items
 50 + 150 log2 (32 + 1) = 806,6 ms. b)4 páginas distintas con 8 items cada una
 50 + 150 log2 (8 + 1) = 525,48 ms. cada pantalla
 x 4 = 2101,92 ms. Aplicación de Ley de Hick 33Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  39. 39. Windows 3.1: un solo plano de decisión 34Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  40. 40. Windows 95: Jerarquías 35Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  41. 41. Windows 95: Jerarquías 36Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  42. 42. Windows 95: Jerarquías 37Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  43. 43. Windows 95: Jerarquías 38Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  44. 44. Windows 95: Jerarquías 39Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  45. 45. Mientras tanto, en el escritorio…
  46. 46. 41Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  47. 47. 41Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  48. 48. vs. 41Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  49. 49. Principio de priorización: Ley de Pareto • El 80% de los resultados proviene del 20% de las causas. 42Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  50. 50. Simplicidad en la selección y operación: Operación no modal • Una interfaz es modal cuando su respuesta es modificada por un estado de la misma, y el usuario no es consciente de ese estado. • Los modos son fuente de errores, confusiones, restricciones innecesarias y complejidad en la operación. (Jef Raskin, The Humane Interface) 43Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  51. 51. Modos en los navegadores
  52. 52. Modos en los navegadores Borrar el caracter a la izquierda del cursor Si un campo de texto tiene foco
  53. 53. Modos en los navegadores Borrar el caracter a la izquierda del cursor Si un campo de texto tiene foco Ir a la página visitada anteriormente Si no hay foco en
 un campo de texto
  54. 54. Modos en los navegadores Borrar el caracter a la izquierda del cursor Si un campo de texto tiene foco Ir a la página visitada anteriormente Si no hay foco en
 un campo de texto Perder todo el trabajo realizado en la página Si el formulario perdió foco, o la página no respeta estándares
  55. 55. Monotonía: una sola forma de conseguir el mismo resultado • Cuando hay más de un método capaz de producir el mismo resultado, se requiere de actividad cognitiva adicional para resolver la forma de realizar la tarea. (Jef Raskin, The Humane Interface) 45Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  56. 56. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • https://www.goodui.org/ Monotonía vs. entropía 46
  57. 57. H E U R I S T I C A S • Considerar las limitaciones humanas. • Simplicidad. El diseño no debe emplear complejidad innecesaria. Susan Weinschenk & Dean Barker 
 • Estética y diseño minimalista. • Reducir al mínimo la carga de memoria. • Flexibilidad y eficiencia de uso. Hacer al sistema eficiente, para distintos niveles de experiencia, a través de atajos, herramientas avanzadas y acciones frecuentes. Jakob Nielsen 47Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  58. 58. Principios de Operación • Instrucción • Formación de hábitos • Operación • Selección • Percepción 48Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  59. 59. Una herramienta satisface necesidades humanas, amplificando capacidades humanas Necesidad Herramienta Capacidad Esta parte se ajusta al problema Esta parte se ajusta a la persona Bret Victor: A Brief Rant On The Future Of Interaction Design 49Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  60. 60. H E U R I S T I C A S • Flexibilidad y eficiencia de uso. Jakob Nielsen
 • Soportar puntos de control interno. Los usuarios deben sentir que están al mando y que el sistema responde a sus acciones, en lugar de ser ellos quienes responden al sistema. Ben Shneiderman 50Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  61. 61. H E U R I S T I C A S • Adaptación. El diseño cumple con las necesidades y el comportamiento de cada grupo de usuarios. Susan Weinschenk & Dean Barker • Automatizar la carga de trabajo no deseado. • Liberar recursos cognitivos para tareas de alto nivel. • Eliminar cálculos mentales, estimaciones, comparaciones, y pensamiento innecesario. Jill Gerhardt-Powals

  62. 62. Ley de Fitts • Tiempo promedio en apuntar a un objetivo:
 T = a + b log2 ( D / W +1 ) • a, b: latencia y velocidad,
 determinadas experimentalmente.
 Raskin: a falta de datos, tomamos a=50, b=150 msec. • D: distancia desde el punto de partida
 hasta el centro del objetivo. • W: ancho del objetivo,
 medido sobre el eje del movimiento. 
 Más información:
 Artículo en Wikipedia sobre Ley de Fitts 52Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  63. 63. Aplicación de ley de Fitts: optimización de operación • Priorizar ubicación respecto a posición inicial del cursor • Evitar movimientos complejos: submenúes, drag & drop • Ampliar y distinguir áreas clickeables: Botón Flash mal hecho link estándar 1 2 3 4 5 6 7 8 9 10 Botón Botón Opción Página Página 1 2 3 4 5 6 7 8 9 10 <label for...>opción</label> Descripción 53Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  64. 64. Aplicación de ley de Fitts: submenúes • Permitir operar submenúes en diagonal, generando un área invisible temporal entre el cursor y el submenú
  65. 65. Aplicación de ley de Fitts: submenúes • Permitir operar submenúes en diagonal, generando un área invisible temporal entre el cursor y el submenú
  66. 66. Aplicación de ley de Fitts: submenúes • Permitir operar submenúes en diagonal, generando un área invisible temporal entre el cursor y el submenú
  67. 67. Aplicación de ley de Fitts: submenúes • Permitir operar submenúes en diagonal, generando un área invisible temporal entre el cursor y el submenú
  68. 68. Aplicación de ley de Fitts: submenúes • Permitir operar submenúes en diagonal, generando un área invisible temporal entre el cursor y el submenú
  69. 69. • Separar funciones • Alejar funciones destructivas de funciones habituales: Aplicación de ley de Fitts: reducción de errores 55Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  70. 70. ¿Subir el volumen, o apagar?
  71. 71. H E U R I S T I C A S • Prevención de errores. Evitar que ocurran problemas: eliminar las condiciones propensas a errores o detectarlas antes de que los usuarios se comprometan a la acción. Jakob Nielsen 
 57Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  72. 72. Principios de Formación de hábitos • Instrucción • Formación de hábitos • Operación • Selección • Percepción 58Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  73. 73. Condicionamiento instrumental
  74. 74. David Hogue: Psychology for human experience Percibir Predecir Respuesta Aprender Consistencia Transferir Observación y práctica Interacción Comprensión 60Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  75. 75. H E U R I S T I C A S • Visibilidad de las funciones. Cuanto más visibles sean las funciones, será más probable que los usuarios puedan saber qué hacer a continuación. Por el contrario, cuando las funciones están fuera de la vista, resultan difíciles de encontrar y saber cómo usar. Don Norman
 • Adecuación entre el sistema y el mundo del usuario. El sistema debe hablar el lenguaje del usuario, con palabras, frases y conceptos que le resulten familiares, 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. Jakob Nielsen 61Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  76. 76. H E U R I S T I C A S • Affordance Atributo de un objeto que permite a la gente saber cómo usarlo. Por ejemplo, un botón invita a ser apretado. En un nivel muy simple, “afford” significa “dar una pista”. Cuando los affordances de un objeto físico son perceptualmente obvios, resulta fácil saber cómo interactuar con él. Don Norman
 • Mapeo Refierealarelaciónentrelos controlesysusefectosenelmundo. Casitodoslosartefactosnecesitan algúntipodecorrespondenciaentre controlesyfunciones,yasetratede unalinterna,coche,plantade energía,ocabina. Un ejemplo de buena correspondencia es el uso de flechas “arriba” y “abajo” en el teclado, para representar el movimiento ascendente y descendente del cursor. Don Norman 62Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  77. 77. H E U R I S T I C A S • Visibilidad del estado del sistema. El sistema siempre debe mantener a los usuarios informados sobre lo que está sucediendo, a traves de información apropiada en un tiempo razonable. Jakob Nielsen
 • Realimentación informativa. Para cada acción del operador, debe existir una respuesta del sistema. • Respuesta modesta para acciones menores o frecuentes. • Respuesta sustancial para acciones poco frecuentes o de mayor importancia. Ben Shneiderman 63Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  78. 78. H E U R I S T I C A S • Consistencia y estándares. Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Siga las convenciones de la plataforma. Jakob Nielsen
 • Luchar por la Consistencia. • Secuencias de acciones similares ante situaciones similares. • Terminología única para avisos, menúes y ayudas. • Comandos consistentes. • Uso consistente de colores, tipografía y elementos visuales. Ben Shneiderman 64Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  79. 79. Jugar es un comportamiento que puede no tener un fin particular, pero mejora el rendimiento en situaciones similares en el futuro. Es fundamental para el aprendizaje y el desarrollo. En un mundo de causas y efectos implacables, de encadenamientos trágicos y consecuencias inevitables, la disociación de las acciones con sus consecuencias es una característica atractiva de los juegos. (Chris Crawford, The Art of Computer Game Design - 1982) Fuente imagen: https://www.flickr.com/ photos/mbiddulph/6947069392 Texto
  80. 80. H E U R I S T I C A S • Control y libertad del usuario. Soporte para deshacer, rehacer y puntos de salida para ayudar a los usuarios y no dejarlos en un estado no deseado causado por errores. Jakob Nielsen
 • Permitir revertir acciones de manera sencilla. • En la medida de lo posible, las acciones deben ser reversibles. • Ello reduce la ansiedad, dado que el usuario sabe que los errores pueden ser corregidos. Por ello alienta a la exploración de opciones poco familiares. • Las unidades de reversibilidad pueden ser una acción aislada, una entrada de datos, o un grupo completo de acciones. Ben Shneiderman 66Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  81. 81. Principios de Instrucción • Instrucción • Formación de hábitos • Operación • Selección • Percepción 67Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  82. 82. Construcción de sentido Definición de cada nivel: Douglas Martínez Fernández - Conocimiento e inteligencia Datos Información Conocimiento Inteligencia Valores recolectados del mundo real sin contexto ni relación entre sí Datos sometidos a un proceso de relación Cuando la información es sometida al uso y
 hay experiencia gracias a la vivencia Podemos predecir o imaginarnos acontecimientos futuros con un grado aceptable de certeza DISEÑADOR USUARIO 68Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  83. 83. Adelantarse a las preguntas… en orden 69Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  84. 84. 70Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  85. 85. H E U R I S T I C A S • Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores. Exprese mensajes de error en un lenguaje sencillo (sin códigos) para indicar el problema y sugerir soluciones. Jakob Nielsen
 • Gestión de errores sencilla. En medida de lo posible, se debe de diseñar el sistema para que el usuario no pueda comenter un error irreparable. Si se comete uno, el sistema debe detectarlo y ofrecer una solución sencilla y comprensible para poder manejarlo. Ben Shneiderman 71Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  86. 86. 5 pasos de la retórica clásica 1. Lograr la atención 2. Establecer contexto: información conocida 3. Presentar la información nueva 4. Conclusión 5. Llamado a la acción 72Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  87. 87. 73Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  88. 88. H E U R I S T I C A S • Conducir las tareas. • Secuencias de acciones deben ser organizadas en grupos con inicio, desarrollo y final. • Al completar un grupo de acciones, la respuesta del sistema produce en el operador satisfacción, sensación de alivio, una señal para dejar a un lado opciones y planes de contingencia, y la indicación de que el camino está listo para el próximo grupo de acciones. Ben Shneiderman
 • Ayuda y documentación. Aunque es mejor que un sistema se pueda usar sin documentación, ésta puede ser necesaria. Esa información debe soportar búsquedas con poco esfuerzo, tener foco en las tareas del usuario, listar pasos concretos a realizar, y no ser demasiado extensa. Jakob Nielsen 74Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  89. 89. 10 Heurísticas de Jakob Nielsen
  90. 90. 1Visibilidad del estado del sistema H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  91. 91. 77Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  92. 92. 77Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  93. 93. 77Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  94. 94. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 78
  95. 95. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 78
  96. 96. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 78
  97. 97. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 78
  98. 98. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 79
  99. 99. Durante el fin de semana, nadie pudo ingresar… ni pudo entender por qué
  100. 100. Durante el fin de semana, nadie pudo ingresar… ni pudo entender por qué
  101. 101. 2Adecuación entre el sistema y el mundo del usuario H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  102. 102. bash-3.2$ bin/sync 82Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  103. 103. bash-3.2$ bin/sync 82Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  104. 104. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • • Metáforas e íconos que el usuario ya conozca • Hablar con los términos que el usuario utilice • Seguir las convenciones del sistema • Utilizar patrones de diseño 83
  105. 105. 87Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  106. 106. 88Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  107. 107. 89Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo • Exceso de metáfora
  108. 108. Exceso de metáfora 90Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  109. 109. 3Control y libertad del usuario H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  110. 110. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • Libertad para deshacer y volver atrás 92
  111. 111. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • Libertad para explorar 93
  112. 112. Imposiciones ridículas 94Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  113. 113. ¿Qué estoy copiando? ¿Lo puedo dejar para después? 95Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  114. 114. ¿Sólo puedo agregar CBUs al HomeBanking en días hábiles? 96Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  115. 115. 4Consistencia y estándares H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  116. 116. 99Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  117. 117. 5Prevenir Errores H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  118. 118. bash-3.2$ 102Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  119. 119. bash-3.2$ bin/sync 102Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  120. 120. bash-3.2$ bin/sync bash: bin/sync: No such file or directory
 bash-3.2$ 102Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  121. 121. bash-3.2$ bin/sync bash: bin/sync: No such file or directory
 bash-3.2$ 102Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  122. 122. bash-3.2$ bin/sync bash: bin/sync: No such file or directory
 bash-3.2$ 102Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  123. 123. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • Confirmar antes de ejecutar acciones destructivas no reversibles 103
  124. 124. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • 104
  125. 125. 6Reducir la carga sobre la memoria del usuario H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  126. 126. Este tipo está esperando el Costera
  127. 127. Taller UX: Principios, Reglas y Heurísticas Luciana Ramírez Farías • 108
  128. 128. 110Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  129. 129. 7Atajos, Flexibilidad y Eficiencia H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  130. 130. Taller UX: Principios, Reglas y Heurísticas Luciana Ramírez Farías • Recomendaciones 123
  131. 131. Taller UX: Principios, Reglas y Heurísticas Luciana Ramírez Farías • Recomendaciones 123
  132. 132. Taller UX: Principios, Reglas y Heurísticas Luciana Ramírez Farías • Acciones frecuentes 124
  133. 133. Automatización 125Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  134. 134. Automatización 125Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  135. 135. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • Atajos de teclado (¡sólo para lo frecuente!) 126
  136. 136. 8Estética y Minimalismo H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  137. 137. Taller UX: Principios, Reglas y Heurísticas Luciana Ramírez Farías • 132
  138. 138. Presentación de información 133Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  139. 139. 9Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores. H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  140. 140. Errores erróneos 135Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  141. 141. Errores erróneos 135Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  142. 142. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • 136
  143. 143. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • 137
  144. 144. Taller UX: Principios, Reglas y Heurísticas Jorge Martínez • 138
  145. 145. 139Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  146. 146. 10Ayuda y documentación H E U R Í S T I C A S D E J A K O B N I E L S E N Ilustración: http://www.uxabilidad.com/usabilidad/10- heuristicas-o-principios-basicos-de-usabilidad.html
  147. 147. 141Taller UX: Principios, Reglas y Heurísticas Santiago Bustelo •
  148. 148. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 142
  149. 149. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 143
  150. 150. Taller UX: Principios, Reglas y Heurísticas Damián Calderón • 144
  151. 151. Este obra está bajo una licencia de
 Creative Commons Atribución-CompartirIgual 4.0 Internacional Con el apoyo de ¡Muchas gracias! Principios, Reglas y Heurísticas Santiago Bustelo, Luciana Ramírez Farías, Damián Calderón y Jorge Martínez

×