0:03 bien Buenos días a todos vamos a iniciar formalmente nuestra nuestro encuentro sincrono de hoy de la asignatura ingeniería web uno del módulo dos vamos a ver en el día de hoy el tema de la interfaz web es interfaz web tema de usabilidad accesibilidad y luego vamos a pasar a una sección de preguntas y respuestas entonces iniciamos Qué es una interfaz web un interfaz web no es más que una interfaz gráfica de usuario a través de la cual todos los usuarios interactúan con la página una interfaz gráfica de usuario es aquella que contiene elementos como son las los votos los las
0:51 listas de desplegables las casillas de verificaciones las sillas de textos todo el contenido con que el usuario puede interactuar en la página web todos esos elementos de interacción le van a permitir a él comunicarse con la página hacer solicitudes por ejemplo cuando le dan clic a algún link que le está haciendo una solicitud de que lo transfiera a ese enlace o cuando le das click al botón enviar o aceptar que le está solicitando la interfaz por favor envía esta información al servidor Entonces es la vía de comunicación del usuario y la hueva todos esos elementos son los que le permiten a él iniciar ese
1:40 ese diálogo para muchos usuarios la interfaz web o la interfaz de cualquier software es el software en sí demuestra si es confiable si tiene calidad de nada sirve que un software tenga la mejor arquitectura el mejor código el código más óptimo y con menos fallo si la interfaz le vende al usuario que no es de calidad un interfaz no amigable tosca poco atractiva le dice al usuario Mira yo soy una aplicación no confiable yo no soy de calidad entonces debemos poner mucho empeño Si
2:25 queremos que nuestra web tenga éxito en la interfaz la interfaz para muchos usuarios lo es todo como dicen todo entra por la vista la apariencia vale la primera apariencia es la que más cuenta pues así es en la web si no la vendemos bien al diseñarlas y la si si su diseño de su interfaz no transmite calidad confiabilidad el usuario no va a durar mucho en esa web y se va a ir a otra que le satisfaga la misma necesidad que tiene no le va a dar la oportunidad de probarla inmediatamente vea la interfaz poco amigable no dura mucho y se va a transferir se va a transferir hacia otra
3:10 entonces es un factor indicativo de calidad y confiabilidad vamos a ver un ejemplo de una interfaz aquí tenemos un formulario donde un usuario puede completar informaciónes sobre sobre él aquí ya tenemos nombres y apellidos documento email y el teléfono fijo celular Luego tenemos selecciona tu programa las primeras los primeros cuatro elementos son casillas de textos o texto si lo vemos en inglés y selecciona tu programa es una lista desplegables desplegable o combobox por su nombre en inglés también vemos debajo un botón un botón que dice enviar ahora
3:56 Ese botón le va a permitir al usuario decirle Mira envía esta esta solicitud que yo estoy completando hacia el servidor y debajo vemos un enlace a términos y condiciones donde el usuario puede ver cuáles son los términos y condiciones que tiene la universidad sobre las informaciones que está enviando luego vemos debajo una casilla de verificación donde el usuario puede marcar que hace que ha leído y aceptado esos términos si no lo marca el formulario no se envía como vemos una casilla de verificación debemos usarla cuando una respuesta es o sea podemos tener múltiples opciones y el usuario puede
4:42 seleccionar más de una de ellas o no seleccionar ninguna que es diferente a lo que son radio bostons como se conocen en inglés o opciones botones de opciones que con ellos solamente se puede seleccionar una opción a la vez que son muy útiles para preguntas cerradas las casillas de textos convienen cuando la La respuesta es abierta el usuario es el único que sabe la respuesta pudiéramos decir no obstante la lista desplegable conviene Cuando tenemos respuestas limitadas y el usuario tiene que adherirse a seleccionar una de ellas por ejemplo en selecciona tu programa él daría clic a la flechita de la derecha y
5:30 seleccionaría el programa de su interés bien Entonces en un interfaz de usuario es eso ese conjunto de elementos de interacción que el usuario va a usar para comunicarse con la web así tenemos más elementos como son los menúes por ejemplo aquí tenemos un menú de navegación uno de navegación permite al usuario trasladarse hacia diferentes secciones de la web o de una página web cualquiera entonces los los menús de navegación tenemos que pueden ser así desplegables a veces los tenemos en la barra lateral izquierda que están como un árbol todos ya desplegados pero todos en resumen hace lo mismo permitir al
6:17 usuario trasladarse hacia diferentes secciones de la web para diseñar interfaces que sean confiables así que le den ese aspecto de calidad cuando el usuario la vea debemos seguir ciertos principios y lineamientos y lineamientos Cuáles principios está el principio de familiaridad el cual nos dice a nosotros como diseñadores que debemos hacer interfaces de usuario que aquellos usuarios que son la mayoría que van a utilizar la web a la cual la web está enfocada deben sentir que conocen esa hueva Desde que la vean que use su idioma use su jerga que
7:05 use elementos en el lenguaje que ellos acostumbran a ver y que ellos se acostumbran a hablar eso va a permitir que el usuario aprenda rápido la interfaz porque ya solo tendrá que aplicar los conocimientos que él tiene en la web ya él sabrá Para qué es la web y aplicará esos conocimientos como de manera natural aparte de la familiaridad debemos velar porque la el diseño de la interfaz sea uniforme es decir que cuando yo diseño una hueva Perdón un formulario que tiene el botón de guardar vamos a suponer como un disquete morado azul
7:54 rojo cualquier color en otra en otro formulario de la web que yo quiera poner otro guardar debo velar porque ese guardarse idéntico con lo anterior debemos mantener un estándar de esa manera cuando el usuario se aprende una parte de la web automáticamente está aprendiendo el resto de ellas y le va a ser fácil y natural Navegar e interactuar con el resto de la hueva entonces uniformidad nos da un aprendizaje en cascada donde el usuario aprendiéndose una parte se aprende un todo debemos velar también que usemos
8:40 comandos botones que actúen como el usuario Espera es decir darle el mini un factor del mínimo sorpresa posible si un usuario que está acostumbrado a usar el botón de limpiar en un formulario sabes que el botón le limpia el formulario y lo deja ahí y luego en otro formulario le da el botón de limpiar y este lo que hace es que lo saca del formulario y lo lleva a otro lado eso le puede crear una especie de shock al usuario porque usted le está enfrentando a una situación no esperada Si todos los botones de limpiar simplemente limpian el formulario cómo será posible que le di a limpiar y me sacó el usuario se quedará pensando qué
9:27 habrá pasado Qué habrá hecho habré dañado algo se quedará asustado tímido temeroso de usar ese otro formulario entonces bajaría la productividad del usuario le crearía temor es posible que si el usuario tiene la opción de irse a otra web lo haga inmediatamente usted dirán Cómo Sería posible que no tenga la opción si estamos hablando de una huevada que es un intranet donde el usuario es un empleado y la tiene que utilizar en su día a día él la va a seguir utilizando porque no le queda de otra pero lo hará temeroso lo hará lentamente y con cuidado y le bajaría la productividad y las y en las empresas no se desea perder productividad entonces
10:14 También es importante en ese mismo tenor que le demos opciones de recuperación de las acciones que pueden hacer es decir si un usuario le da al botón de limpiar para seguir con el mismo ejemplo y este ni siquiera pregunta es verdad que está seguro que desea limpiar el formulario pero ya todos los datos para que él decida Okay sí es cierto y le dé tendríamos una inseguridad también en el usuario Porque si él le topa sin querer a un botón como el de limpiar y deshace un formulario quizás que tenga 50 preguntas que sean de encuesta de un censo por ejemplo y luego del completar las Cincuenta preguntas le topa sin querer porque el mouse Se movió al botón de
11:01 limpiar y pierde todo De seguro que el ese usuario no estará cómodo con la aplicación estará bien alterado Pues que ha perdido mucho trabajo eso Entonces es un principio vital recuperabilidad que él pueda recuperarse de las acciones imagínense que ustedes están llenando un un formulario una factura en una web up Y esa factura es es bien larga de tiene muchos ítems y se va la luz Se fue la luz se apagó un corto se desconectó se apagó la computadora y esa factura no le permite a ustedes cuando ustedes regresen de nuevo a la web que ustedes tengan el trabajo que
11:47 llevaban adelantado guardados eso no no le será grato al usuario mientras que si hace lo contrario y va guardando temporalmente Digamos como hace Amazon usted va guardando en el carrito y usted no ha comprado y usted sale de la web va porque se está esta tarde se tiene que ir tiene que tomar el autobús tiene que irse a la universidad por cualquier caso tiene que salir rápidamente usted no pierde su carrito de compras usted lo tiene ahí almacenado es decir que usted recupera su trabajo hay que valorar el trabajo de los usuarios Hay que cuidarlo protegerlo para que ellos tengan productividad y se sientan gratos en la con la hueva se sientan que esa huevada es su amiga que le resuelve su trabajo su día a día
12:34 entonces así mismo los formularios deben una guía para el para el mismo para el mismo usuario es decir él debe irlegueando Cómo completar cada campo Esto es así por ejemplo en ustedes entran a Gmail punto com y quieren hacer una cuenta se dan se podrán notar que en el formulario le dice debe completar esto así le dan algunos ejemplos muchas veces entonces hace que el usuario no tenga que leer un manual para aprender a usar la la interfase con esto no decimos que no deba leer el manual una web claro siempre va a ser vital le va a explicar todos los pormenores de la huevada sin embargo luego de leer el manual si la interfaz lo guía él se va a
13:20 acordar de todo lo que leyó incluso la vida de la interfaz y será más productivo y recuerden que estaremos diseñando interfaces para internet para la web Perdón para la web y en la web vamos a tener una diversidad de usuarios usuarios de diferentes etnias religiones culturas gustos un sin número de usuarios que desconocemos entonces debemos tratar de enfocarnos Siempre en el tema de usabilidad que lo vamos a ver más adelante y accesibilidad para qué Para velar que al hacer una interfaz amigable va a ser de agrado para la mayoría de los usuarios Sino de todos verdad
14:06 Entonces siempre pensar que no conocemos a nuestros usuarios no del todo entonces debemos tratar de hacer la interfaz que lo guíe y que le permita ser productivo si sea amigable y sea atractiva que entre bien por los ojos porque uno dice que sea agradable la vista que los enamore entonces podemos resumir las ventajas que hemos mencionado en esta gráfica donde se ve que por familiaridad el usuario va a poder aplicar conocimientos previos lo que él ya maneja porque es familiar la aplicación va a tener confianza y va a aprender la interfaz rápida porque ya lo que él sabe lo aplica a la interfaz y con uniformidad como les mencionábamos tenemos un aprendizaje en cascada él se
14:52 aprende una parte y si aprende el resto a la vez porque todo usa el mismo estándar puede aplicar estándares conocidos control C para copiar pues deje que control c sea copiar en la web f1 es la ayuda de f1 sea la ayuda en la web luego tenemos que por mínima sorpresa vamos a obtener una alta tasa de retención del usuario y mayor productividad del mismo como le habíamos mencionado si él empieza a obtener sorpresas de la aplicación donde de un funcionamiento previsto funciona de otra manera no esperar entonces el usuario se puede incomodar y marcharse a la vez de que si hace esto él va a tener miedo de utilizarla cuando la utilice entonces va
15:39 a bajar la productividad se va a poner lenta luego por recuperabilidad le damos sensación de control al usuario seguridad un usuario va a decir okay Aunque yo tengo el control siempre Esto no se va a perder es solo el trabajo que yo haga es está bajo mi control está ahí guardado tiene la seguridad de usar la aplicación y la va a usar se va a sentir a gusto al igual que con guía de usuario que le damos seguridad también porque él sabe lo que está haciendo en la web Le está informando que hace le está ayudando le da confianza y le pone autoaprendizaje cuando él ve esas instrucciones esos ejemplos de cómo llenarlo o de cómo no llenarlo cuando lo llena mal entonces él va a auto aprender
16:25 verdad y no no va a sentir sin desconfianza va a sentirse totalmente confiando confiado de lo que está haciendo y cuando pensamos en diversidad de usuarios pensamos en usabilidad y accesibilidad que es dos temas que vamos a ver en detalle más adelante entonces le dije principios y lineamientos esos principios que esos lineamientos que esos principios que vimos lo lo menciona Ian Somerville en su libro de ingeniería de software y vamos a ver unos lineamientos que no nos propone que en la leyenda en el libro de análisis y diseños como son iniciemos por nosotros acomodarnos a la hora de desarrollar una web
17:11 a la hora de diseñar interfaces web debemos usar herramientas profesionales para nosotros trabajar cómodos y hacer interfaces con más productividad y de mayor calidad herramientas profesionales como son visual Studio dreamwever herramientas que que tienen Editores como mencionamos acá que tú puedes diseñar la interfaz de manera gráfica y Y eso te se te traduce en el código eso nos permite ser más productivos entonces también podemos trabajar en el código y se refleja en en el Wachu bueno da esa versatilidad de nosotros movernos por código por por interfaz por modo
17:58 visual entonces debemos también tener pendiente que no somos lo único diseñadores y que hay más que tienen creatividad Entonces se puede aprender del trabajo de los demás no debemos copiar el trabajo de los demás eso es piratería esos fraude eso no no se hace pero sí podemos aprender viendo ideas que otros implementan en sus en sus diseños de interfaces nosotros podemos aprender cosas que antes no creíamos posible uno dice Oye esto se puede excelente lo voy a implementar entonces debemos estudiar para aprender esos otros sitios web y debemos no solo tomar sitios web a la ligera sino que también
18:44 es importante que de vez en cuando examinemos diseños profesionales que vayamos a esos diseños de esas páginas de profesionales que ya conocemos y y veamos los trabajos que yo hacen y veamos en qué están incursionando ahí vamos a ver cosas novedosas que algún otro profesional ya está implementando y nosotros aún no conocíamos recuérdense que entre todos la creatividad será mayor Me comentan que si se hacen Photoshop si es muy usado diseñar la interfaz en Photoshop muy usado en Photoshop obviamente tenemos mayor potencial en cuanto a diseño Es una herramienta muy potente en cuanto a
19:30 diseño y luego se exporta esa plantilla que hacemos en Photoshop y se exporta html y de ahí terminamos de montar el Website Es una herramienta súper potente es bueno que que aprendan Photoshop Aunque hay personas que son más capaces que en otro en El dominio de esa herramienta pero es bueno que todos conozcamos Cómo manejar Photoshop aunque sea los básicos es muy muy potente y encontraremos un sinnúmero de plantillas compradas gratis de todas en todas las vertiente que vienen en Photoshop Pues bien entonces debemos examinar Ese diseño profesionales que incluso esos diseños profesionales lo podemos encontrar en plantillas que venden podemos comprar plantillas para aprender podemos comprar
20:16 plantillas de otros que que nos parezcan súper interesantes que tengan cosas novedosas y podemos aprender de Cómo se dice no sería ahí en adelante podemos nosotros implementar las partes que nos resultaron interesantes entonces luego de que usted aprendió de esos sitios debe recordar usar lo aprendido porque muchas veces aprendemos herramientas aprendemos de los diseños de otro pero no las implementamos entonces acuérdense de eso úselo aprendido ya lo aprendido en el pasado también de cosas que usted implementó funcionaron que les atrayeron a los usuarios acuérdense de utilizar lo pero no solo analices buenos ejemplos también busquen los malos ejemplos de la web ahí en el material le hacemos referencia al enlace que hace Kendall y
21:03 Kendall en el libro a la página web que es un portal donde colocan páginas web que consideran que tienen interfaces mal diseñadas ahí podemos aprender de los malos ejemplos o sea tomamos los malos ejemplos no para implementarlos sino para no cometer esos errores es importante ver lo bueno y lo malo así sabemos que tomar y qué y qué dejar y la web tiene demasiados recursos señores podemos aprender de la web la web tiene un sinnúmero de de páginas de aprendizajes tiene un sin número de páginas informativas libros en la web podemos entrar a a aprender en páginas
21:48 como udemy ecodaca de mí podemos entrar a a la página de newellsen que era Used que ahora si no me equivoqué en el que siempre hablan de usabilidad en fin podemos Navegar para la web en la web para usarla de manera productiva debemos tratar de implementar eso utilizar los recursos que nos da la web para aprender a implementarlos Y por último no menos importante sino quizás el más vamos a consultar los libros los libros los libros son una fuente rica de información que ya ha sido arbitrada un libro antes de ser publicado ha sido revisado por varias personas
22:33 y un libro es una fuente amplia porque te dice el qué el Cómo y el Por qué son no solamente te dice esta interfaz Está bien diseñada te dice por qué te dice cómo se hace De dónde se origina tenemos una fuente amplia en los libros es detallada la fuente de los libros Entonces los libros siempre siempre hay que hay que consultar siempre hay que consultarlos y luego luego de de aprender todo esto podemos crear nuestra propia plantillas nosotros creando nuestras propias plantillas vamos a lograr productividad vamos a lograr reutilización que es un principio en ingeniería debemos siempre reutilizar componentes ya sean de
23:21 arquitectura de diseño siempre debemos estar velando pues reutilizar Lo bueno que hacemos entonces podemos crear nuestras propias plantillas y debemos siempre un lineamiento crucial que debemos hacer es planificar no se debe trabajar sin planificación no podemos vamos a hacer esta hueva vamos a hacer este diseño vamos a hacer un diseño de interfaz primero que vamos a planificar que vamos a hacer Cuál es la estructura el contenido el texto los enlaces el menú cómo será entonces planificamos nuestra web antes de entrar manos a la obra pero que es la estructura bueno la estructura de una página web básica Siempre será encabezado como lo vemos acá
24:08 encabezado verdad el cuerpo el cuerpo que sería este de acá Perdón ese de acá hasta acá y el pie de página encabezado el encabezado siempre está la información de la empresa logotipo el eslogan y algunas ocasiones tienen algún slide show de de imágenes puede ser de la misma empresa de noticias algún slime atractivo verdad luego tenemos el el menú el menú como parte de a veces del encabezado a veces una barra lateral izquierda y luego tenemos el cuerpo que sería acá y en ese cuerpo podemos tener
24:54 contenido diverso imágenes video audio texto que va a hacer la parte rica para el usuario el contenido y luego tenemos el pie de página aquí al fondo ese pie de página que tiene es muy versátil hay personas que ponen hasta un formulario de contacto bien atractivo los enlaces a veces de las redes sociales están al pie a veces están al lado a veces están flotando el Muchas veces tenemos de menú enlaces importantes de varias secciones lo condensamos en el pie de página para que el usuario también navegue rápidamente hacia esos lugares Entonces
25:40 eso conforme una estructura básica el contenido como le mencionaba es la parte Rica el activo más preciado de nuestra web va Porque es lo que los usuarios van a consumir Entonces eso es contenido según niños eh debe ser escaneable escaneable quiere decir que el usuario pueda rápidamente entender lo que hay ahí mirando rápidamente es como una lectura rápida que hacen los usuarios para ver si les interesa ese contenido cómo hacemos eso ese contenido escaneable lo vamos a ver en breve además de escaneable debe ser simple y contenido no debe ser complejo si es complejo el usuario no lo va a entender no lo va a poder digerir Entonces no va a ser atractivo atractivo
26:27 para ella Entonces qué va a hacer si no es atractivo pues simplemente se va a buscar otro contenido que le resulte atractivo debe ser claro que va de la mano de Simple debe llevar el mensaje claramente que él no tenga que pensar tanto en qué es lo que quiere decir esto sino que lo entienda desde que lo lea eh que que hablemos en un lenguaje ya no es claro eh que no confunde al usuario sino ambigüedades y debe ser bueno obviamente como lo mencioné atractivo bien bien organizado con colores suaves el no llenarlo de colores No llenarlos mucho de imágenes que si lo sobrecargamos Entonces él no va a poder entenderlo saturarlo de video demasiado
27:13 video demasiado sonido debe ser un balance entre las diferentes tipos de contenido que tenemos y con colores que le que le resalten palabras importantes que resulte atractivo a la vista nuevamente Y eso se va a traducir en que sea comprensible por él que sea comprensible no va a entender rápidamente como les mencioné anteriormente no abusen de los videos no abusen de las imágenes no abusen de la multimedia si sobrecargamos la página va a ser más lento su tiempo de descarga y Recuerden que Aunque no aunque hoy en día tenemos conexiones súper rápidas no sabemos si el usuario está utilizando una conexión lenta porque quizás tiene
28:00 este en una en una red pública de esa gratis que limitan la velocidad un dispositivo que puede ser lento puede hacer que tenga una conexión lenta O sea no podemos hacer que el tiempo de carga de nuestra página sea lenta y tampoco podemos hacer que el contenido de deje de ser atractivo si Abusamos de la multimedia es eso es lo que va a ocurrir y hoy en día se se pretende llegar a un sinnúmero de de dispositivos tenemos televisores tenemos móviles tenemos tabletas tenemos la computadora las laptops hay un sinnúmero de de dispositivo a través de los cuales accedemos a la web que debemos pensar en en responsividad la cuevas deben ser
28:47 responsivas es decir que se adapten a los diferentes tipos de pantalla y hay framework que nos ayudan a esto como es el caso del bus que es muy muy bien aceptado Mostrar nos ayuda nos facilita a conseguir esta esta parte de responsabilidad así el el la hueva que diseñemos se va a adaptar a un móvil a una orientación vertical horizontal así como en una laptop así como en una tableta debemos velar porque nuestra web va hoy en día se han responsiva no debe faltar Entonces cómo logramos que el texto sea escaneable pues bien Vamos a para esto debemos Resaltar palabras claves puede
29:36 ser con una negrita puede ser con un color debemos resaltarla a veces hasta la sombreamos Dependiendo el mensaje que queramos llevar debe resaltarse esas palabras claves para que el usuario rápidamente cuando escanea el texto hagan el cerebro haga un enlace en internamente y Y deduzca de qué de qué trata ese contenido Así mismo los subtítulos deben ser significativos debemos escribir subtítulos y títulos que lleven un mensaje claro de lo que trata el contenido cuando el usuario lea un subtítulo sepa inmediatamente De qué trata De qué trata el contenido que está ahí
30:23 entonces escaneando con el subtítulo él sabe si le interesa lo que está detallando ese subtítulo o ese título debemos usar listas con viñetas el usuario entiende que se está enumerando una serie de puntos de conceptos de los elementos que fueren Entonces lo hacemos en una lista y rápidamente el escanea que ahí hay una lista detallando algo que se dice más arriba y lo ayuda a comprender rápidamente no debemos hacer párrafo que sean muy cargados sino que tengan una idea en cada parte para que él escanee rápidamente el el escanea las primeras la primera línea del párrafo entonces ahí va a determinar De qué trata el contenido si hay tres párrafos
31:10 la primera línea de cada párrafo viendo las las palabras resaltadas asociándolo con el subtítulo si hay un detalle de algunas listas Entonces el cerebro trabaja rápidamente y él sabe que están interesantes ese contenido entonces debemos volar que sea una idea Por parte no sobrecargar los y debemos utilizar el estilo de la pirámide invertida que es ese estilo que utilizan como los periódicos que en los primeros párrafos te hablan de de la idea central de lo más importante de lo que trata y luego detallan en lo siguiente por qué Porque así el usuario va a escanear y cuándo es la eso primero párrafos que está la parte más impactante lo más interesante entonces el cerebro le va a indicar Okay Esto es
31:56 lo tuyo Y entonces le va a interesarse por leer los detalles de los demás párrafos eso se utiliza digamos hasta en la película recientemente las últimas películas vienen y te y te inicien en un punto impactante de de de de de de de la película Y luego vienen dos semanas anteriores un año de un año atrás y te llevan como por qué llegó ahí Entonces es como ese punto que el usuario leyendo los primeros párrafos tenga el el Boom del contenido y luego en lo siguiente él sepa que está detallado el Por qué cómo cuándo qué pasó qué ocurrió Entonces ese estilo lo lo enamora de entrada abraza al usuario en el contenido entonces debemos velar porque no
32:44 carguemos el párrafo verdad utilicemos menos palabras que tradicionalmente aquí se recomienda la mitad de palabra que la escritura tradicional entonces en vez de hacer textos muy largos debemos velar porque sean párrafos más pequeños más pequeños para que ese cambio entre más rápido y párrafo cuando lo haga agradablemente con esto lograríamos un el texto escaneable para que nuestro contenido sea atractivo el usuario entonces Debemos hablar del proceso de diseño completo que se va a usar verdad qué sería ese proceso Bueno lo primero es que uno habla con el con el cliente con
33:30 el usuario con el departamento cliente con la persona que que desea la web que tiene la necesidad y uno va a partir de las ideas que tiene esa persona y va a ser un primero Debería ser un primero eh informal en papel que transmita esa idea que captamos del cliente con esto podemos validar que capturamos que entendimos la idea correcta habrá algunas correcciones entonces de ahí haremos un wireframe más detallado en El Paso dos
34:15 hacemos ese wireframe más detallado validando la idea más acabada que obtuvimos y nos lo van a validar y pasaríamos al punto tres el storyboard el storyboard es varios donde demostramos paso por paso el uso de una interfaz es decir tenemos un formulario una web app que hay que enviar encuestas podemos hacer el el formulario con el primer paso donde el usuario elige el tipo de encuesta luego ponemos otro otro wireframe donde se ve el paso siguiente que le trae los elementos hacen otro wireframe donde se completan esas esas esos puntos de la encuesta y mostramos
35:03 dándole click a enviar y se ve Qué pasa cuando se envía Entonces se hace como un storyboard de todo de todos los pasos que era el usuario para completar una tarea eso Entonces uno se reúne lo analiza con con el cliente se validan ideas van a sufrir necesidades nuevas puntos que se quedaron fuera correcciones y de ahí podemos pasar a un prototipo de papel ya más completo es decir como la web Va pero en papel para usarla en papel y entonces de ahí validamos de esos papeles y podemos pasar a un prototipo codificado un prototipo codificado es una web pero ya con con funcionalidades ilimitadas no vamos a tener la hueva funcionando completamente el guardar no va a guardar en la base de datos No
35:48 necesariamente sino que va a asumir que se guardó y lo llevaría a al paso siguiente entonces estaríamos utilizando la web app en el navegador aunque no está guardando no se está almacenando nada pero se ve la funcionalidad que se quiere entonces de Ahí pasamos ya al prototipo de software más completo donde donde tendríamos ya guardar funcionando otras funcionalidades que no teníamos funcionando y digamos que vamos a hacer una primer un primer Release de la web donde está Beta vamos a llamarlo así o Alfa en una Alfa sería donde vamos a
36:34 probar y a terminar de aprobar todos los requerimientos para luego afinar y hacer el lanzamiento final entonces que es un Bueno podemos ver a la izquierda wireframe rápido frame donde podemos hacerlo informalmente a lápiz y papel dibujamos nuestra nuestra interfaz la dibujamos con lápiz o lapicero y podemos validar Aunque es informal es muy poderosa porque permite que tanto el cliente como el como nosotros estamos a cargo de la hueva estemos de acuerdo en que entendimos la idea y ya luego podemos pasar a una herramienta como el balsamic o Flow vicio o cualquier otra que nos permita ya hacer el wireframe
37:20 más elegante más formal y hacerlo totalmente detallado y organizadito como es el de la derecha entonces luego en todo este proceso de diseño debemos velar siempre por los principios que mencionábamos anteriormente Y en el último principio hablamos de usabilidad y accesibilidad vamos a detallar la usabilidad por usabilidad no estamos refiriendo a eso primer punto que tenemos ahí ese primer punto que dice facilidad de uso facilidad de uso es decir que el usuario pueda fácilmente utilizar nuestra web que si fuera posible un niño la
38:06 utilizara que sea fácil que sea amigable Entonces si velamos por usabilidad vamos a tener lo siguiente una interfaz aprendible es decir que el usuario al ver la interfaz por primera vez se la va a encontrar fácil que él mismo la puede usar dice así pero yo puedo usar esto yo yo sé déjame a mí en que yo sé Okay yo sé usar esto vamos a obtener eficiencia que una vez ya se aprendió la interfaz él va a ser más rápido va a lograr mayor productividad eh Porque va a ser más eficiente vamos a lograr que sea memorizable
38:53 memorizable que si el desarrollo utilizar la interfaz por un mes porque estuve enfermo estuvo de vacaciones cuando él regrese o dos meses por tres cuando él regrese a esa interfaz él se la va a seguir encontrando fácil porque se la aprendió porque va a ser memorizable también que vamos a limitar nuestros la posibilidad de errores del usuario eh en cantidad y en calidad o gravedad como mencionamos ahí es decir el usuario al aprenderse la interfaz a saber cómo se usa el va a cometer menos errores quizás ninguno eh Y van los errores que pueda
39:41 cometer van a ser menos graves por qué porque vamos a tener recuperación que era uno de los principios que hablábamos recuperabilidad él va a ser fácil recuperarse Volver atrás hacer un hondure la última que hizo decir que no que no quiere limpiar el formulario Entonces vamos a terminar en placer esa satisfacción que va a tener el usuario de utilizar nuestra web entonces una interfaz usable va a ser del agrado del usuario va a ser va a representar mayor productividad para la empresa mayor productividad del empleado eh No se va a olvidar en el tiempo va a quedarse en la memoria porque es es fácil fue fácil desde la
40:26 primera vez y la usabilidad es medible es medible Es decir nosotros podemos evaluar la usabilidad podemos hacer un grupo podemos hacer un examen con un grupo de usuario recomendable de cinco hacia abajo donde yo utilicen la la web y nosotros podamos ir observando dónde ellos cometen errores qué parte no no son tan claras como pensábamos Recuerden que para el diseñador el programador lo que le hace resulta fácil pero para otros lo que uno creyó fácil resulta ser un mundo complejo entonces hay que velar porque se se mida si realmente es así para los otros usuarios
41:12 entonces tendríamos que medirla analizarla evaluarla evaluarla con un grupo de usuarios no crean que si es usable por usted que la hizo es usable para otros no hay que ver cómo se comporta la interfaz para los otros usuarios en ese sentido vemos que es importante la usabilidad porque el no tener usabilidad podría representar pérdida de usuarios lentitud vas a productividad lo que se traduce en costo para las empresas lo que significa que tendríamos usuarios descontentos tristes que no quisieran utilizar Esa esa interfaz pero si tenemos usabilidad vamos a tener lo opuesto mayor productividad crecimiento popularidad de la huevada
41:59 todo el mundo va a estar feliz de utilizarla usuarios felices es la mejor publicidad posible porque ellos van a hablar de su web y la van a recomendar a otros inmediatamente se puede volver virar en la web entonces tendríamos una popularidad inmensa entonces debemos velar porque sea usable la la interfaz debemos mantenerlo constantemente leyendo sobre usabilidad para ver cosas nuevas que salen en ese tenor de estudios que otros hacen esa página de de nielsen es importante mantener entonces la otra parte que hablábamos era la accesibilidad accesibilidad con esto hablamos de que
42:46 de que la web sea usable pero no usable por un grupo sino pensada para todos y por todos nos referimos a que muchos usuarios tienen algunos impedimentos algunos impedimentos que le que no le permiten trabajar como trabaja cualquier otro usuario Cuáles pueden ser esos impedimentos bueno el no ser capaz de utilizar un teclado o un ratón que no tenga las manos Eh entonces no puede utilizar un Mouse para navegar lo tiene que hacer por vos con una herramienta que le asiste sí Entonces si no pensamos en accesibilidad esa herramienta pudiera no poder navegar por nuestra web Eh puede hacer que un usuario sea ciego completamente O solamente parcial
43:34 que no vea bien o no ve algunos colores entonces hay usuarios que van a utilizar también herramientas asistidas que le van a leer el texto le van a leer el texto y le van a ayudar a utilizar esa hueva debemos pensar en usuario que no pueden escuchar y si ponemos un video quizás no lo puedan consumir O sea no puedan digerirlo A menos que pensemos en accesibilidad y le pongamos que un caption un subtítulo donde él pueda leer aunque no escuche puede ver el video y puede escuchar y puede leer Aunque no pueda Escuchar al igual que un audio no lo va a poder escuchar pero si le ponemos subtítulos lo va a poder leer Pero puede hacer que el impedimento no
44:20 sea físico sino el entorno que estemos en una biblioteca donde no podemos utilizar el audio porque molestamos a otro y no tenemos audífonos entonces deberíamos ponerlo en silencio quizás podamos ver un video estudiando pero entonces el entorno no nos permite escucharlo Entonces está los subtítulos vemos los subtítulos puede hacer que el navegador sea Antiguo y no y no no pueda utilizar bien la página no puede haber el video entonces puede haber muchísimos impedimentos que entorpezcan el uso de nuestra web va para muchos usuarios debemos velar por accesibilidad de ahí viene la importancia de esta Por qué Porque utilizar accesibilidad contemplar accesibilidad velar por este
45:07 en nuestro diseño de interfase se traduce en hacer lo correcto igualdad para todos eh algo que las Naciones Unidas y los Derechos Humanos velan que busquemos igualdad para todos Que no solo sea usable para un grupo de usuarios sino por todos esa persona con discapacidad que son los que quizás se beneficiarían enormemente de la web por ejemplo de aprendizaje porque no pueden ir y trasladarse porque no tienen piernas entonces quieren utilizar la web para aprender desde sus de sus hogares tengan problemas cognitivos un sin número de problemas posibles nosotros le estamos dando la oportunidad de utilizar
45:52 esa web Entonces estamos velando por la igualdad pero si si si aún eso no lo conmueve no lo mueve no lo no lo enfoca hacia la accesibilidad piense en la economía eso se traduce en más dinero más ingresos mayores ganancias porque tenemos un mayor grupo de usuarios que van a entrar a la web tenemos un público tenemos un público más amplio tenemos aumento incremento en las ventas del tráfico web en el tráfico web representa ingresos por publicidad entonces piensa en la parte económica va a ser beneficios para todo persona de todas las edades las personas que estén un poco alfabetizadas nuevos usuarios todos van a poder utilizar su web más fácilmente más rápidamente va a poder
46:38 usarla eh va Si usted piensa en accesibilidad va a estar pensando en adaptabilidad flexibilidad se va a adaptar a que hacia el entorno del usuario es restringido el usuario va a poder poner subtítulos y va a poder usarlo ahí eh le va a dar esa flexibilidad de escuchar de no escuchar de leer entonces a veces no queremos utilizarla Pero también piensa lo siguiente puede ser un requisito de ley tenemos leyes en Estados Unidos en España en Colombia tenemos leyes que hablan sobre esto hay una norma de 56 58 algo por ahí que que que que establece que la parte gubernamental debe ser la oea accesible
47:23 y y debe hacerlo conforme a niveles de de cumplimiento a doble a triple a entonces Te dirán cómo logro la accesibilidad porque es cierto es importante no cómo logró Esto bueno para lograr la accesibilidad por suerte hay un estándar ya que hasta estándar hizo es que del www consortion es que es el accesibilidad el cual dice que la web debe ser perceptible operable entendible robusto por sus iniciales perceptibles que lo que yo vea ahí lo
48:10 lo pueda lo pueda consumir o sea o sea piensa en una persona que que no ve pero el contenido está ahí entonces no es en ese en ese caso en ese ejemplo no es con los ojos que va a ser que va a percibir lo que hay ahí es como una herramienta que debe poder entender lo que está en tu web y si no está bien diseñada pensando en accesibilidad esa herramienta no va a percibir ningún contenido o parte de ese contenido y no enviaría el mensaje correcto que debe hacer o puedo hacer operable si los enlaces no están bien definidos esa herramienta no podrá dar un un clic si lo llamamos así a ese Enlace del menú cuando el usuario le diga clic a tal en las quizás ni sepa que hay un enlace ahí
48:57 no puedo operarla eh el contenido puede hacer que esté todo distorsionado y no se entienda no se entienda que esto es un párrafo que que esto es un encabezado que que eso es una imagen y debe ser robusto robusto para que funcione en cualquier herramienta cualquier medio que se esté accediendo una herramienta asistida por todas partes un dispositivo móvil entonces Debemos entender lo que es huaca Dos punto cero estudiar no es una tarea sencilla no le vamos a mentir es una tarea primero de estudiar el estándar y luego del día a día y velar porque cada parte de la web cumpla con los principios que hay
49:44 pero tampoco es compleja es cuestión de tomar la decisión y empezar a hacer cada elemento del pool cada punto de eso tiene un sinnúmero de pautas que debemos seguir así está organizado huaca entonces en perceptible hay cuatro pautas 22 criterios de éxito que debemos cumplir por operable Tenemos también cuatro pautas y ahí hay 20 criterios de éxito y entendible tiene tres pautas 17 criterios de éxito y robusto una y dos criterios de éxito es decir en cada punto de full vamos a tener pautas y criterios de éxito que podemos como hacer un checklist a ver si lo vamos cumpliendo y en la página de uvaca dos
50:29 punto cero nos guían Cómo conseguirlo también por ejemplo el principio uno de perceptible dice la información y los componentes de la interfaz de usuario deben ser presentables a los usuarios de manera que puedan percibirlos la Pauta uno punto dos dentro de ese mismo principio que tiene cuatro pautas dice el contenido multimedia dependiente del tiempo Qué debe hacer debe proporcionar alternativas sincronizadas para contenidos multimedia sincronizadas dependiente del tiempo dentro de de ese principio tenemos de esa Pauta tenemos el el criterio de el criterio de éxito que dice subtítulos pregrabados es decir el
51:16 subtítulo debe estar a la par sincronizado con con la voz que va en el video entonces ahí estaríamos cumpliendo ese si cumplimos con ese criterio y los demás estaríamos cumpliendo con el principio uno de perceptible entonces así hay una un sin número más de principios pautas y criterios que debemos estudiar y cumplir cada criterio se fijan que dice este dice nivel a hay tres niveles de conformidad nivelada doble a y triple a entonces dependiendo la ley de cada país exige que ciertas ciertos criterios existe exigen que que las páginas cumplan con cierto nivel de conformidad
52:03 el aa para ciertos principios Entonces hasta aquí nuestra nuestra presentación Muchas gracias por su atención vamos
