Detalles del curso
Amplía tus conocimientos sobre la disciplina de interfaz de usuario o UI. Identifica los factores importantes en el diseño e interacción con los productos y analiza e investiga la relación entre las características del producto y sus usuarios para generar así la mejor facilidad de uso. En definitiva, empieza a crear soluciones verdaderamente centradas en el usuario y sus necesidades.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El diseño de interfaz de usuario, o UI por sus siglas en inglés, es una disciplina enfocada en la estructura y organización visual de contenido para facilitar la legibilidad e interacción entre el usuario y un producto, aplicación o sistema. La implementación correcta de una interfaz de usuario personalizada resulta en una experiencia con enfoque en el usuario para simplificar su uso del producto. Durante este curso de LinkedIn Learning aprenderás las prácticas de buen diseño de UI, conocerás los elementos básicos de arquitectura de información, además de la importancia de analizar y definir el problema a resolver para implementar estrategias visuales como el uso de color, tipografía e imágenes. Finalmente, te explicaré cómo preparar un documento para entrega al equipo de desarrollo. Mi nombre es Lucía Garza Ortegón, soy consultora en diseño de interfaz y experiencia de usuario y te invito a conocer la disciplina de diseño de interfaz para aprender cómo implementarla en tus productos y servicios. ¿Comenzamos?
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El diseño de interfaz se enfoca en desarrollar interfaces o elementos visuales que facilitan la interacción entre usuarios y los dispositivos digitales que utilizan. El diseño de interfaz es importante, ya que se encarga de investigar, planear y desarrollar un producto con enfoque en el usuario tomando en cuenta sus características, además de la interacción que este tiene con elementos físicos o de hardware y elementos lógicos o de software en su uso cotidiano del producto. El resultado de esta investigación es la implementación de un producto que cuente con una interacción cómoda y amigable para el usuario. La manera de lograr que una interfaz funcione correctamente es el evitar enfocarse únicamente en los elementos estéticos del producto como lo son imágenes, colores y fuentes. Este enfoque es limitante, por lo que es importante tomar en cuenta los elementos funcionales del producto como lo son flujo, navegación y accesibilidad. La finalidad de una interfaz de usuario es presentar un producto no solamente agradable a la vista, sino fácil de navegar. El buen diseño de interfaz se caracteriza por el cuidado que se tiene al desarrollar la interacción y el flujo del producto por medio de la creación de una estructura y jerarquía claras. Esto se traduce a una navegación amigable y fácil de entender. Otro factor importante en un buen diseño de interfaz es la implementación correcta de fuentes tipográficas, paleta de color y contraste entre los elementos, utilizando estas herramientas para crear un nivel elevado de legibilidad que facilite la interacción entre el usuario y el producto. En cambio, el mal diseño de interfaz se caracteriza por una carencia de pistas visuales que sirven de guía para que el usuario pueda navegar a través del producto. Otra característica de un mal diseño de interfaz se nota en una jerarquía visual poco clara, lo que puede confundir al usuario y hacer de su experiencia algo frustrante. Finalmente, un manejo de color erróneo, fuentes demasiado grandes o demasiado pequeñas, además del uso de bajo contraste en bloques de texto, limitan la legibilidad del producto, incomodan al usuario y minimizan la eficacia de la interfaz. La idea es que tanto función como estética trabajen a la par para crear un producto de calidad. El objetivo principal del diseño de interfaz es mejorar la interacción entre el usuario y el dispositivo en cualquier producto, sin importar software o hardware.###
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Una interfaz eficiente permite que el usuario interactúe con el producto de manera natural para que su experiencia sea cómoda y agradable, sin importar el tipo de dispositivo que utilice. El dispositivo puede ser un móvil, una tableta o una computadora. Sin importar esto, el usuario debe poder interactuar con el producto de manera sencilla y natural. El uso de etiquetas durante el desarrollo de una interfaz tiene como beneficio el facilitar la navegación del producto y la búsqueda de contenido. Cada elemento incluido en una interfaz puede contar con una etiqueta, ya sea un título, imagen o texto. Las etiquetas deben ser claras para que los usuarios puedan encontrar lo que necesiten rápidamente y navegar a través de la interfaz sin problema. Si el contenido cuenta con las etiquetas correctas y una jerarquía visual clara, los usuarios pueden navegar a través del producto de manera sencilla, conociendo a cada momento en qué sección se encuentran por medio de pistas visuales que los guíen para llegar a su meta. La interacción entre usuario y producto debe ser clara y lo más cercana a la realidad posible. A cada acción que el usuario tome debe existir una reacción. Un ejemplo es el de seleccionar una pestaña o presionar un botón. ¿Qué es lo que el usuario espera después de tomar esa acción? ¿Y cuáles son las pistas visuales de que algo ha sucedido? Si el usuario presiona una pestaña, su expectativa es que la pestaña se vea seleccionada y la información desplegada en pantalla cambie de acuerdo a esa selección. Lo mismo sucede cuando el usuario hace clic en un botón, el usuario espera una reacción. El botón cambia de estado y hay una consecuencia en la pantalla. El diseño de interfaz depende de la relación entre el producto a desarrollar y el hardware o aparato físico que cuenta con ciertas características y limitantes. Estas características y limitantes pueden ser desde el tipo de pantalla o sus puntos de interacción. La variedad y tamaño de pantallas en conjunto con sus respectivos puntos de interacción deben ser tomados en cuenta para desarrollar una interfaz que el usuario pueda entender. Para un usuario no es lo mismo interactuar con una tableta o un móvil por la pantalla táctil o interactuar con una computadora que requiere del uso de un "mouse". Otra de las ventajas de un buen diseño de interfaz es su capacidad de transmitir la personalidad del producto a partir de pistas visuales como lo son el uso de fuentes tipográficas, las paletas de colores, las imágenes e iconos, además del tipo de interacción que el usuario pueda tener con el producto. Estos elementos son los que le otorgan una personalidad al producto, haciéndolo único y diferente.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo antes de comenzar a desarrollar una interfaz de usuario es importante conocer el producto, sus características específicas, sus funciones y si este cuenta con una marca o referencia visual en la cual debemos apoyarnos. En primer lugar, es importante conocer el hardware o aparato físico y software o aplicación sobre la cual será utilizado el producto. También se debe tener conocimiento de los tamaños de pantalla y tipo de interacciones esperadas por el usuario. Esto nos ayuda a definir las ventajas y limitantes a las cuales hay que apegarse dentro del diseño de interfaz para optimizar la experiencia del usuario. En la mayoría de los casos, el producto forma parte de una estrategia de marca, la cual cuenta con un estilo visual particular que se refleja en el uso de paleta de colores, fuentes tipográficas, iconografía específica y estilos. Si el cliente cuenta con una guía de estilo en función a su marca, el desarrollo de la interfaz de usuario deberá apegarse a esas pautas visuales predeterminadas para transmitir los valores, personalidad y estilo que la marca desea proyectar. Durante la planeación es importante recibir retroalimentación del cliente y posibles usuarios, además de trabajar junto con el equipo de desarrollo para definir entregables y formatos.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El diseño de interfaz como tal es la disciplina de resolución de problemas tomando en cuenta los directivos que surgen a partir del comportamiento humano, por lo que podemos decir que el diseño es resolver problemas, no solamente crear imágenes. El comportamiento humano en consecuencia al diseño de interfaz tiene su base en lo que el usuario entiende al observar e interactuar con el producto, además de sus motivos y acciones. ¿Qué es lo que el usuario busca? ¿Para qué? ¿Y cuál es su meta en cuanto a la interacción con el producto? ¿Qué desea resolver? En el proceso del diseño de interfaz es importante entender el por qué las personas o los usuarios reaccionan de cierta manera en relación a lo que ven en pantalla para así predecir las acciones que tomarán de acuerdo a lo observado. Estas predicciones se traducen en elementos gráficos y de flujo que serán implementados en la estructura a desarrollar, buscando siempre facilitar la interacción entre el usuario y el producto. Finalmente, hay que cuestionarse el qué, el cómo, el por qué y para qué del producto a desarrollar. De esa manera, se puede identificar y entender el problema a resolver. Estas preguntas se pueden formular de la siguiente manera. ¿El diseño sirve un propósito? ¿Para qué sirve? ¿Cómo debe ser recibido el diseño, la interfaz, el flujo y la interacción? ¿Por qué es importante tanto para el usuario como para el cliente? Es importante hacer hincapié en que una solución de diseño de interfaz exitosa surge a partir de la definición correcta del problema a resolver.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Para resolver un problema de diseño es importante tomar en cuenta dos factores clave: la forma y la función. La forma tal cual se refiere al cómo se ve el producto. Es estética, es diseño y es jerarquía visual. La función se refiere a la utilidad del producto, para qué es. Se compone de requerimientos, información a desplegar y metas. Hay una frase muy famosa que dice "La forma sigue a la función". Esta se atribuye al arquitecto estadounidense del siglo XX Louis Sullivan y se enfoca en un diseño meramente funcionalista. Claro, al enfocarse únicamente en que la forma o estética del producto se define solo a partir de la función o requerimientos del mismo, resulta en una solución limitada. Un producto de diseño de interfaz desarrollado a partir de este principio tomará en cuenta únicamente lo siguiente, a la función, que es el acto de recopilar los requerimientos del producto a realizar. También tomará en cuenta qué determinará la estética de la interfaz basada únicamente en los requerimientos. El resultado es una interfaz de usuario que cumple con los requerimientos mas no toma en cuenta un factor fundamental: el usuario. Para crear un producto de diseño de interfaz exitoso, este tiene que ser útil, que se refiere a la función, y usable, que se refiere a la experiencia. para que una interfaz de usuario sea exitosa, esta debe tomar en cuenta a su usuario, conociendo características y necesidades del mismo. Es por eso que podemos decir que la función, que se refiere a recopilar los requerimientos del producto a realizar, además de tomar en cuenta las características y necesidades del usuario, resulta en la forma que determina la estética de la interfaz basada en la combinación de requerimientos y necesidades del usuario. Podemos concluir que la forma no solamente sigue a la función, sino que, tomando en cuenta al usuario, ambas trabajan juntas y no en oposición para crear un producto de calidad.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Para resolver un problema de diseño en el desarrollo de interfaz, es importante enfocarse en los resultados y no en las funciones. Esto se refiere a que es mejor entender al usuario y sus expectativas al interactuar con la interfaz. Un elemento a tomar en cuenta cuando se desea generar valor en el desarrollo de la interfaz de usuario es que esta facilite el alcance de metas, que sea conveniente. Las funciones son el medio con el cual se llega al resultado. Para lograr un balance entre función y forma, es importante entender las diferencias y similitudes entre las características técnicas y lógicas de un sistema o modelo de implementación y el entendimiento del proceso mental y emocional del usuario, que se conoce también como modelo mental. El producto creado por los equipos de desarrollo y diseño se conoce como modelo representativo. De acuerdo a Alan Cooper, los modelos representativos que se asimilen más al modelo mental de los usuarios serán los más exitosos, mientras que los modelos representativos más cercanos al modelo de implementación, al contar con características técnicas y de lógica que aumentan su complejidad, pueden confundir a algunos usuarios causando frustración y, como resultado, bajo uso del producto. Con esto podemos concluir que gran parte de la función del diseño de interfaz es acercar el modelo de representación al modelo mental humano, de manera que un usuario común pueda interactuar con el producto de una manera cómoda sin importar la complejidad de su modelo de implementación. Cabe notar que a la mayoría de los usuarios no les importa conocer la funcionalidad del producto a fondo, les importa más la experiencia. Esta experiencia se deriva de las predicciones y expectativas de los usuarios en relación a su interacción con el producto. Entre más acertadas sean esas predicciones, más agradable será la experiencia para el usuario. Otro factor de éxito al desarrollar una interfaz de usuario es el conocer los elementos visuales que diferenciarán al producto de la competencia y le darán un valor agregado. Cada producto es diferente y cuenta con funciones, contenidos y usuarios que varían. Por lo cual, la solución visual debe reflejar esas características. Como ejemplo, una aplicación de juegos de video es diferente a la página de un banco. Es por ello por lo cual su flujo y funcionalidad se adaptan a sus necesidades. Es importante diseñar con un enfoque particular en el usuario, de manera que podamos facilitar su interacción con el producto. Esto nos ayudará a crear un diseño exitoso.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Cuando se diseña la interfaz de usuario en una aplicación, es importante mantener la consistencia a través de las pantallas. Esto se logra por medio del uso de retículas. La retícula, o "grid", se define como un esqueleto o estructura de líneas verticales y horizontales que dividen un espacio en módulos. Estos módulos se utilizan para organizar el contenido. La retícula como tal tiene su origen en el diseño editorial y ha sido utilizada para desplegar información de manera armónica y jerárquica por siglos. Algunos de los beneficios del uso de retículas en el desarrollo de productos digitales son: Consistencia. El uso de retícula permite definir elementos estándares que serán reutilizados a lo largo de la aplicación. Algunos de estos ejemplos son márgenes entre elementos o altura y espacio entre botones. El definir e implementar estas reglas ayudan a mantener una consistencia y armonía entre los elementos visuales. Otro beneficio es la claridad y la coherencia. Esto se logra por medio del uso de simetría, proximidad y continuidad, además de jerarquía y ritmo, lo cual resulta en la presentación de contenido de una manera visualmente coherente. Es importante notar que el uso de retícula agiliza el trabajo de diseño. El definir módulos de tamaño predeterminado conociendo cómo y dónde encaja cada uno de los elementos en una retícula tiene como resultado un proceso de diseño más veloz y eficiente. Otro beneficio es que facilita el desarrollo del producto. El equipo de desarrollo es capaz de sistematizar componentes reutilizables, agilizar la implementación del producto digital cuando se define una retícula que les ayuda a conocer dónde va cada elemento, qué tamaño tiene y cuántos módulos ocupa dentro del espacio establecido. El sistema de retícula en base a ocho puntos toma la cifra de ocho y, utilizando múltiplos y divisibles del mismo, define el espacio y tamaño de los elementos que componen la retícula de acuerdo a ese número. En este ejemplo podemos observar que es de 16 píxeles, que es un múltiplo de ocho. A continuación, la combinación del margen y una de las columnas es de 64 píxeles, otro múltiplo de ocho. Y así sucesivamente. A continuación observemos tres ejemplos de retícula en diferentes resoluciones de pantalla. En primer lugar contamos con una retícula para un móvil en posición vertical. En este caso, dependiendo de la resolución y el tamaño de pantalla, podemos contar con de cuatro a ocho columnas, con un margen de 16 píxeles. En cambio, cuando observamos la misma retícula en la pantalla de una tableta con mayor resolución, podemos contar con una retícula que tiene de ocho a 12 columnas con un margen de 24 píxeles. El aumento en el margen ayuda a mantener la proporción visual en la pantalla. En la siguiente resolución, una computadora portátil, podría ser de 12 columnas o más, 16, 18 o 24 de acuerdo a la resolución de la pantalla. en este caso se continúa con el margen de 24 píxeles. El uso o implementación correcto de retícula durante nuestra etapa en diseño de interfaz es importante para mantener consistencia, claridad y coherencia a través del producto reflejado en sus pantallas.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Las raíces de la arquitectura de información han evolucionado de sistemas de organización relacionados con ciencias bibliotecarias, psicología cognitiva y arquitectura para formar un sistema organizacional enfocado en el manejo y presentación de la información. Es así como se puede estructurar un producto en base a la información a presentar tomando en cuenta sus características. El concepto de arquitectura de información está estrechamente relacionado con la estructura del producto. Se dedica a procesar grandes cantidades de información para categorizarla y organizarla de manera que el contenido cuente con una estructura lógica, legible y de fácil usabilidad. El enfoque en el orden, categorización y jerarquía de la información a presentar dentro de las estructuras de contenido ayudan a conectar los modelos de implementación propios de un sistema con los modelos mentales del usuario. Esto se logra por medio de métodos de orden, etiquetado y visualización de información que buscan acercarse al modelo mental del usuario para mejorar su experiencia con el producto. El resultado es una interfaz de usuario de alta usabilidad.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Dos de los elementos fundamentales en la arquitectura de la información son la estructura y jerarquía del contenido. La estructura divide el contenido en secciones o categorías agrupando elementos de acuerdo a características similares. Por ejemplo, la manera en que un portal de videos separa su contenido dividiéndolo en categorías como drama, suspenso, romance y comedia. En cambio, la jerarquía ordena el contenido de acuerdo a su importancia, creando pistas visuales que ayudan a los usuarios a procesar la información de manera más rápida y eficiente. Por ejemplo, la diferencia entre el título de una sección y el texto informativo. El título suele ser de mayor tamaño, con un color acento y su fuente tipográfica en negrita, mientras que el texto informativo generalmente es de menor tamaño, color neutro y un estilo de fuente ligero. La tensión visual entre estos dos elementos es la que genera una jerarquía visual. Existen varias maneras de crear jerarquía visual, aquí te presentamos tres. La primera es tamaño. Los elementos de mayor tamaño captan la atención de manera rápida e indican la importancia de cada elemento. Un ejemplo es la diferencia de tamaño entre un título principal, un subtítulo y un texto. Otro ejemplo es el de contraste. El impacto del contraste se observa en base a los cambios que existen entre un elemento y otro. Un ejemplo claro es el emplear fuentes en negrita o algún color que genere impacto. Otro ejemplo de jerarquía visual es el de proximidad, que consiste en separar y agrupar elementos. Por ejemplo, entre más cerca se encuentre un elemento del otro, visualmente forman parte del mismo grupo. En cambio, si existe un grado de separación entre elementos, eso significa que forman parte de distintas categorías. El agrupar elementos ayuda al usuario a identificar secciones o zonas comunes dentro del contenido. El uso de estructura y jerarquía en el diseño de una interfaz de usuario es importante para guiar al usuario a través de la información dándole pautas acerca de su estructura.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Al comienzo de cada proyecto es importante identificar los tipos de contenido y las opciones que estarán presentes en la interfaz. En el contexto de arquitectura de información, el principio de objetos define el contenido como un organismo vivo con diferentes atributos y comportamientos. Cada objeto puede tener un tiempo de vida en donde se pregunta: ¿es contenido estático? Por ejemplo, la sección de una página web que muestra el domicilio de un cine local. Esta información no cambia de manera constante. Ahora, en caso de que el contenido sea dinámico o de cambio constante, como las películas, fechas y horarios en la sección de cartelera, que cambian de manera semanal. Los objetos también cuentan con un comportamiento en relación al contenido. Por ejemplo, un botón no cuenta con el mismo comportamiento que una imagen y viceversa. En cambio, los atributos de los objetos se refieren a las características que definen las diferencias y similitudes entre sí. Cada objeto cuenta con atributos que lo identifican. Por ejemplo, un video no tiene las mismas características que una imagen, y ninguno de los dos cuenta con las mismas características de un bloque de texto. Las opciones en el manejo de contenido ayudan al usuario a encontrar lo que busca, por lo que es importante crear productos que ofrezcan opciones con significado claro para los usuarios. Un ejemplo es el utilizar un nombre significativo como "servicios" en vez de un nombre como "nuestros talleres", ya que el segundo no revela lo suficiente y puede ser confuso para el usuario. La variedad de opciones disponibles al usuario deben también enfocarse en una acción en particular. Como ejemplo contamos con un usuario que desea conocer el costo de un servicio que ofrece la compañía, por lo que su proceso consiste en visitar el sitio web de una empresa de talleres. Una vez en el sitio, debe contar con la capacidad de identificar rápidamente y sin distracciones el menú de opciones. Una vez identificado, el usuario puede navegar a través de ese menú hasta encontrar la pestaña de servicios, seleccionar esa pestaña y acceder a la sección de servicios, en donde puede encontrar el servicio que busca. Otra opción para el usuario es entrar al sitio web, contar con la capacidad de identificar de manera rápida la sección de búsqueda, seleccionar esa sección, teclear el nombre del servicio y acceder a una página de resultados en donde puede seleccionar el servicio que desea contratar para obtener más información. Es importante tomar en cuenta que al presentar una cantidad elevada de opciones aumenta la posibilidad de confundir al usuario, ya que ante mayor información a procesar, mayor es el esfuerzo cognitivo por parte del usuario. Al pedirle que procese grandes cantidades de información, puede terminar por frustrarlo si es que no logra su cometido de una manera rápida y eficiente. Esta frustración le lleva a no querer utilizar el producto. Identificar el contenido de manera clara y por medio de objetos es extremadamente útil en el diseño de interfaz al darnos la oportunidad de conocer las características, comportamiento y tiempo de vida de la información que manejamos, mientras que la definición y manejo de opciones nos ayudan a simplificar el flujo del producto impulsando al usuario a interactuar con el producto de manera más sencilla.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Cuando el usuario interactúa por primera vez con un producto, es importante crear un balance entre las pistas visuales que lo guían a través de la experiencia y la información suficiente que le ayuda a encontrar lo que busca. Los ejemplos representan categorías o secciones que se despliegan como palabras clave, imágenes o íconos. Esto ayuda a los usuarios a identificar secciones y categorías del producto de manera ágil y eficiente. Un ejemplo de esto se puede observar en la sección principal de un sitio web. En el área superior derecha el usuario puede observar una imagen o ícono que es una representación visual de una persona. Si el usuario mueve su cursor por encima del ícono, la flecha que representa el cursor se transforma en una mano señalando, lo cual significa que esta sección es un botón. Durante este cambio del cursor que se encuentra encima del ícono, aparece una leyenda o palabra clave que dice "acceder". Durante este proceso el usuario identifica el ícono con la sección de miembros. Al pasar su cursor por encima del ícono se da cuenta de que es un botón y confirma su predicción al ver cómo se despliega la palabra "acceder". La divulgación consiste en demostrar únicamente la información necesaria para que el usuario cuente con una idea de lo que puede encontrar si decide investigar más a fondo. Al limitar la cantidad de información que se despliega, el esfuerzo cognitivo del usuario se reduce, lo que facilita su experiencia. Un ejemplo claro se observa cuando el usuario realiza una búsqueda y la página de resultados solamente muestra título, un extracto de texto y en algunos casos fecha de publicación, divulgando únicamente lo necesario para que el usuario tenga una idea general de lo que trata cada resultado. De esta manera, el usuario puede navegar rápidamente a través de la página de resultados hasta encontrar el que más se acerque a su búsqueda. A partir de esto, el usuario selecciona el resultado para profundizar en la información. Al únicamente divulgar lo necesario en la página de resultados, la interfaz hace que el proceso de búsqueda del usuario sea más corto y eficiente.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo En un producto digital, es importante que el usuario pueda acceder al contenido a partir de diferentes puntos de contacto dentro del producto, además de contar con pistas que señalen las áreas clave en la navegación, ya sea menú o botones. El principio de clasificación múltiple se enfoca en la manera en que los usuarios navegan a través del contenido. Cada usuario puede utilizar un método diferente para completar una tarea. Por ejemplo, para encontrar una sección específica en un sitio web hay usuarios que utilizarán el componente de búsqueda, mientras otros navegarán a través de las secciones de un menú. El principio de navegación enfocada se refiere a la consistencia entre los elementos que forman parte de un menú, lo que sirve como confirmación de que el menú se define por su contenido, no por la sección en donde se despliega. Cuando se desarrolla un producto complejo que cuenta con una amplia variedad de secciones y subsecciones, se recomienda manejar un menú principal que lleve a los usuarios a secciones que cuenten con menús secundarios. De esta manera se reduce el esfuerzo cognitivo del usuario. A partir del principio de clasificación múltiple, en conjunto con el principio de navegación enfocada, se puede crear una interfaz que tenga una estructura en donde existe un menú primario y en caso de que alguna sección cuente con un mayor grado de complejidad esta pueda incluir un menú secundario. Por ejemplo, en una página de servicios de energía se puede observar un menú primario que contiene las pestañas de Casa, Compañía o Productos. Dentro de la pestaña de Productos cuenta con los servicios de Consumidor, Solar o Viento. Al momento de seleccionar una de estas opciones, el usuario es enviado a esa sección específica. De esa manera, un usuario puede navegar a través de un sistema complejo de una forma sencilla y eficiente.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Al diseñar la interfaz de un producto es conveniente tomar en cuenta los principios de puerta de fachada o pistas visuales que indiquen al usuario en dónde se encuentra, además de tomar en cuenta el principio de crecimiento o asumir que el contenido del producto crecerá a la par de sus necesidades. El principio de puerta de fachada se refiere a que el usuario puede acceder al producto desde cualquier punto externo, por lo que es importante que cada sección cuente con la información necesaria que le haga saber al usuario en qué punto del producto se encuentra. Esto se logra por medio del uso de pistas visuales como lo son títulos de sección. También es importante incluir una sección de navegación o menú que permita que el usuario pueda navegar a través del producto. Un ejemplo de puertas de fachada es el caso de un sitio web en donde el usuario puede acceder a cualquier sección del sitio a partir de un buscador. El usuario debe contar con la capacidad de saber en qué parte del sitio se encuentra y navegar a través de él. El principio de crecimiento se refiere al potencial de crecimiento de un producto a través del tiempo. para que una interfaz sea exitosa es importante asumir que su contenido va a crecer, para que su expansión no sea causa de confusión. El contenido debe ser etiquetado de manera correcta y su estructura principal debe estar cuidadosamente definida. Finalmente, es importante contar con una jerarquía visual y de estructura clara que sea eficiente para que, sin importar el tamaño del producto, este sea fácil de navegar. Por ejemplo, contamos con un producto que cuenta con dos secciones principales. Si su estructura y jerarquía es correcta, el agregar nuevas subsecciones o secciones completas no aumenta la complejidad en su navegación.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo En relación al manejo de contenido, para que un producto sea fácil de navegar es importante etiquetarlo de la manera correcta para que el contenido pueda ser organizado en relación a estructura y prioridades del producto. El primer paso consiste en etiquetar el contenido de manera clara. Estas etiquetas deben ser legibles y fáciles de entender, de manera que el usuario pueda notar la diferencia entre un título, liga o botón. El hecho de contar con un contenido etiquetado de acuerdo a sus características también sirve para que el equipo de desarrollo pueda implementar un producto más eficiente y fácil de editar o escalar. Por ejemplo, en este sitio podemos observar la organización por etiquetas de manera clara sin importar el idioma. Podemos observar títulos, un buscador, ligas y botones. Es importante recordar que el contar con etiquetas claramente definidas ayuda a crear una interfaz de usuario altamente funcional. Ya que el contenido haya sido etiquetado, el siguiente paso consiste en organizar la información de acuerdo a su nivel de importancia para crear una jerarquía. Esta jerarquía se encarga de definir la estructura del contenido. Finalmente, es importante notar que una estructura definida de manera lógica que se asimile al modelo mental del usuario fomenta la navegación y hace que la experiencia del usuario sea más placentera. En este ejemplo podemos observar una estructura y jerarquía claras. Contamos con una barra de navegación superior, título de la sección en donde nos encontramos, además de un texto primario. Contamos con tres secciones que definen los servicios y texto secundario que habla de cada uno de los servicios que se ofrecen por sección. Para el usuario, la estructura y jerarquía de esta sección facilitan su navegación a través del producto. El análisis de contenido es la base para poder etiquetar cada una de sus secciones. De esa manera podemos definir la jerarquía que nos llevará a crear una estructura que finalice en un contenido fácil de navegar por parte del usuario.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo En cuanto al manejo del contenido, es importante que el usuario sea capaz de navegar a través del producto de manera cómoda y agradable. Es entonces en donde entran los conceptos de navegación, "wayfinding" y "wireframing". El concepto de navegación habla acerca de cómo el usuario se mueve a través del contenido utilizando los elementos de la interfaz para encontrar lo que necesita. El concepto de "wayfinding" le dice al usuario en qué sección del contenido se encuentra. En cambio, el "wireframing" combina ambos elementos para desplegar la información. El "wireframing" también es conocido como el esqueleto del producto. A continuación, un ejemplo de los conceptos de navegación y "wayfinding". Al navegar a través del sitio podemos notar que la parte superior indica en qué sección del sitio del hotel nos encontramos. De esta manera, el usuario sabe a todo momento en dónde se encuentra y hasta dónde quiere llegar. En el caso de navegación, el usuario puede seleccionar cualquier parte del menú y navegar al punto deseado. La herramienta de búsqueda dentro de la interfaz le permite al usuario encontrar la información que busca de una forma rápida. Esta herramienta es fundamental para productos con contenido dinámico que se encuentran en constante crecimiento, ya que le ayuda al usuario a encontrar lo que busca rápidamente. para que esta herramienta sea eficiente, es importante conocer las características de la información y etiquetarla de manera correcta. después de que el usuario realice una búsqueda, posiblemente se encuentre en una sección con los resultados de la misma. para que le sea más fácil encontrar lo que busca, es importante que esa información se pueda ordenar por diferentes factores, ya sea por relevancia, por fecha, por tema o por sección. para que el usuario pueda navegar a través del contenido de una manera cómoda, es importante que el contenido cuente con una estructura definida. Otro factor clave son los puntos de navegación a través de la interfaz, los cuales guían al usuario en su navegación y hacen de su experiencia algo más placentero. Durante la etapa de planeación se recomienda crear un "wireframe" o maquetar un flujo de producto para confirmar que la navegación es correcta y fácil de entender. También el agregar elementos de "wayfinding" a cada sección guían al usuario a través del producto y evitan su confusión.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los modelos de estructura tienen como función la de organizar la información de acuerdo a las características y funciones del producto. Estos modelos sirven de guía para crear productos desde lo más sencillo hasta lo más complejo. Un modelo de estructura simple es el denominado "single page" o una sola página, en donde todo el contenido se despliega en una sola página. Esta página puede ser corta de una sola pantalla o larga con "scroll" infinito. En caso de que se utilice el "scroll", la navegación consiste en seleccionar partes del menú que nos llevarán específicamente a esa zona de la página. Este modelo de estructura generalmente es utilizado para productos de contenido limitado como lo son páginas promocionales de un solo producto o de un evento. En este ejemplo podemos observar que el modelo presenta únicamente una página, y en algunos casos esta página tiene un menú superior de navegación que llevará al usuario a distintos puntos de ese sitio. El modelo de estructura plano se reconoce porque todas las páginas o secciones se encuentran al mismo nivel, no existe una página que tenga una jerarquía mayor a la otra. La importancia es la misma a través de secciones y, por lo general, se utilizan para pequeños sitios web. Un ejemplo puede ser un sitio que promocione dos o tres viajes diferentes. cada uno de esos elementos cuenta con la misma importancia. Visualmente, el modelo de estructura "flat" o plano muestra cada una de sus secciones al mismo nivel y generalmente la navegación es sencilla, ya que simplemente estamos pasando de una página a la otra. Generalmente son para sitios que cuentan con grados pequeños de información, ya que este modelo no cuenta con la capacidad de presentar grandes cantidades de información y su navegación se vuelve muy compleja. En conclusión, un modelo de estructura organiza el contenido del producto. Cada producto es diferente, cuenta con distintas características y necesidades. Es por eso que es importante elegir el modelo de estructura que vaya de acuerdo al producto. Finalmente, el contenido es lo que dicta el modelo a utilizar. Si cuentas con un producto de mínimo contenido, un modelo plano o de una sola página puede ser una buena solución. En caso de contar con mayor nivel de contenido, será mejor buscar otro tipo de modelo que se adapte más a las necesidades. El modelo de "single page" o de una sola página es útil para el contenido que tiene un solo propósito, no es contenido complejo, no se requiere de gran navegación. El modelo de estructura estilo "flat" o plano cuenta con mayor capacidad de contenido que el modelo de "single page" mas su función es diferente.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los modelos de contenido "index" y "daisy" cuentan con diferentes funciones y características, mas lo que tienen en común es que pueden lidiar con una mayor cantidad de contenido. El modelo de índice consiste en una sección principal y subsecciones. Por lo tanto, contamos con una página o una sección que es de mayor importancia en comparación al resto. La navegación para el modelo de índice consiste en un índice o un menú que se encuentra presente en cada una de las secciones. El modelo de índice puede expandirse de acuerdo al contenido, mas, similar al modelo plano, a mayor contenido mayor complejidad, la cual hace de la interacción con el usuario algo incómodo. A continuación, una representación visual del modelo de índice, en donde contamos con una página principal de inicio que se compone de otras subsecciones. El modelo de contenido "daisy", cuya traducción es margarita, similar a la flor, es útil cuando el producto lleva procesos que inician y terminan en la misma sección. La finalidad de este modelo es el de regresar al origen después de haber terminado una tarea. Estas tareas consisten en procesos definidos que se forman a partir de una serie de pasos. Cuando el usuario termine con el último paso del proceso, este lo llevará de nuevo a la sección de origen, donde puede comenzar nuevamente el proceso. Un ejemplo de un modelo de contenido "daisy" se puede observar en un sitio de correo electrónico, en donde el usuario regresa a la bandeja de entrada cada vez que termina de redactar y enviar un mensaje o cierra uno de sus correos recibidos.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los modelos de contenido o estructura conocidos como de jerarquía estricta y jerarquía multidimensional son capaces de lidiar con mayores cantidades de información sin aumentar su grado de complejidad, ya que pueden separar la información por pasos o procesos que simplifican su navegación. En el caso del modelo de jerarquía estricta, solo se llega a subsecciones o secciones secundarias a partir de la página padre, por lo que no se puede hacer una búsqueda externa para llegar a un punto clave. Esto obliga a que el usuario siga un proceso específico para llegar al contenido. Esta es la razón por la cual es popular en plataformas educativas, ya que para tomar un curso se tiene que seguir el paso uno, el paso dos y el siguiente paso para llegar al final. Aquí contamos con un ejemplo visual de la jerarquía estricta. Contamos con una página o sección primaria. Este es el punto de inicio. A partir de esta sección contamos con tres opciones o secciones secundarias. cada una de estas opciones cuenta con más subsecciones o terciarias. en este caso solamente podemos llegar del inicio al punto E a partir de la sección dos. Lo mismo sucede en este caso, solamente podemos llegar al punto B a partir de esta sección secundaria. El usuario no puede navegar de la página de inicio a una sección terciaria sin haber pasado por una sección secundaria. La jerarquía multidimensional es visualmente similar a la jerarquía estricta mas su navegación es completamente diferente, ya que cada una de su sección primaria, secundaria y terciaria coexisten entre sí. Al contar con jerarquías que coexisten, se puede navegar de una a otra sección del producto sin importar si son secciones primarias, secundarias o terciarias. Este tipo de jerarquía funciona mejor en el caso de que la información cuente con características similares. Es por eso que es popular en sitios de ventas. En el ejemplo visual de la jerarquía multidimensional nos encontramos nuevamente con una página de inicio a partir de la cual podemos accesar a páginas secundarias por las cuales se puede navegar entre sí o regresar a la página de inicio. Las páginas terciarias cuentan también con la capacidad de navegar entre sí al mismo nivel o subir uno o dos o hasta más niveles. Por su naturaleza de niveles y procesos, tanto el modelo de jerarquía multidimensional como el modelo de jerarquía estricta pueden lidiar con grandes cantidades de información, solamente hay que elegir el tipo de modelo de acuerdo a la funcionalidad que se requiere.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de visibilidad en relación al diseño de interfaz consiste en crear una experiencia cómoda para el usuario, informándolo acerca de lo que sucede en el producto por medio de indicadores visuales. Esta información debe ser fácil de reconocer y en algunos casos mostrar una reacción a una acción ya tomada. Un claro ejemplo de visibilidad se puede observar en los botones de una interfaz. Cuando el usuario presiona el botón, este cambia de color, demostrando una reacción a la acción tomada. Lo mismo sucede si vuelve a presionar el mismo botón. De esta manera, el usuario cuenta con un claro indicador visual. Algunas de las estrategias que se pueden tomar en cuenta para implementar el concepto de visibilidad es la de generar una respuesta perceptible con cada acción, como el cambio de color de un botón o el desplazamiento de una diapositiva. También se recomienda contar con tiempos cortos de respuesta, ya que si la respuesta tarda más de ocho a 10 segundos el usuario puede llegar a pensar que el producto no funciona o no está cargando lo que él espera. También es importante que la pauta visual que percibe el usuario sea fácil de reconocer, de manera que pueda indicar verbalmente en qué estado o situación se encuentra. Finalmente, se recomienda evitar "pop-ups" que oculten el estado del sistema y puedan llegar a ser confusos para el usuario.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de relación entre sistema y mundo real consiste en procesar y desplegar la información de manera que el usuario pueda captarla fácilmente. Se recomienda mostrar la información en orden lógico, como en el caso de la cultura occidental, donde se lee de izquierda a derecha y de arriba a abajo. También se recomienda utilizar un lenguaje corto, coloquial y fácil de reconocer por el usuario. Además, en algunos casos puede ser apoyado por imágenes claras y fáciles de entender. En este ejemplo podemos observar tres íconos que cuentan con un nombre. Si se fijan, el nombre es claro y de una sola palabra. Contamos con Música, Videos y Libros. Los íconos simbolizan cada uno de esos elementos. En el caso de música contamos con una nota musical. En el caso de videos contamos con una cámara de video. Y en el caso de libros podemos observar un libro abierto. Finalmente, la idea de relacionar conceptos de sistemas con el mundo real consiste en conectar lo que observamos en pantalla con un objeto o concepto ya existente, aprovechando el conocimiento previo del usuario. Algunas de las estrategias y recomendaciones para aprovechar el principio de relación entre sistema y mundo real es el uso de íconos como pistas visuales que funcionan en base al contexto de algo que el usuario ya conoce. También se recomiendan instrucciones que hagan uso del lenguaje coloquial del usuario, evitando utilizar palabras que puedan tener más de un significado. Otro consejo son los botones que representan las acciones reales, lo cual se traduce en que el diseño del botón simula un elemento del mundo real o ya conocido por el usuario. También es conveniente evitar nombres ambiguos que puedan causar confusión.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de control y libertad para el usuario se enfoca en permitir que él mismo cuente con la opción de modificar o cancelar acciones que haya tomado previamente. De esta manera, es conveniente para el usuario contar con una salida fácil en caso de error, ya sea que haya escrito su nombre de manera incorrecta o haya tomado una acción de manera equivocada. También es importante para el usuario contar con la libertad de editar algún elemento que ya haya creado, por ejemplo una imagen de perfil o su nombre. Uno de los elementos importantes para que el usuario se sienta en control y libertad al navegar a través del producto es la capacidad de regresar a un punto previo de su proceso sin perder de vista lo que busca lograr. Es importante que la interfaz cuente con herramientas como deshacer, rehacer, guardar o regresar en caso de que el usuario requiera hacer un cambio o guardar su avance. Una de las opciones para que el usuario se sienta en control y libertad al interactuar con una interfaz de usuario es la de cancelar acciones en progreso. De esta manera, el usuario puede decidir tomar otro rumbo. Otra estrategia es la de contar con una función para disminuir su preocupación a equivocarse. Otra estrategia es la de agregar una confirmación visual ante acciones con consecuencias drásticas, por ejemplo el decidir eliminar un documento. En el momento en que el usuario seleccione eliminar el documento, debería aparecer una confirmación visual que le pregunte si desea continuar con ese proceso en caso de que el usuario haya seleccionado el botón de eliminar por accidente. Finalmente, para el usuario es importante contar con una sensación de libre navegación a través del producto en donde se encuentre consciente de que puede regresar a continuar con su proceso en cualquier momento.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los principios de consistencia y estándares se enfocan en mantener una interfaz organizada de forma significativa y útil para el usuario. El concepto de consistencia se refiere a mantener un patrón visual similar o consistente a través de las plataformas. en este caso también entra la sección de usabilidad. Esto también tiene que ver con las normas y convenciones utilizadas en la plataforma en donde será revelada la interfaz de usuario. No es lo mismo trabajar para una aplicación creada en un sistema móvil que trabajar en una aplicación creada para web. cada una cuenta con normas y convenciones acordes a su plataforma. La consistencia también sigue convenios establecidos en ciertos íconos y su significado. Estos se relacionan con imágenes que el usuario conoce con anterioridad. Algunos ejemplos son el ícono de música, que generalmente presentan una nota musical, o el ícono de cerrar, que se representa con una equis. Ambos funcionan a través de diferentes plataformas y sistemas. Otro contexto relacionado con la consistencia son los patrones establecidos en ciertos colores. Por ejemplo, algunos usuarios relacionan el color verde con continuar y el color rojo con detenerse. Estos patrones establecidos funcionan a través de diferentes plataformas y se entienden de manera global. Algunos ejemplos relacionados con los patrones de consistencia y estándares definidos tienen que ver con íconos como el que se presenta a continuación. El ícono de estatus, que es encendido y apagado, es un botón o ícono que se puede encontrar a través de varias plataformas y la mayoría de los usuarios sabe lo que significa. Lo mismo el ícono del menú o ícono de hamburguesa, común en las aplicaciones móviles que no cuentan con el espacio para presentar un menú de mayor tamaño. Es a través de esos estándares que los usuarios pueden relacionar imágenes o conceptos conocidos que les sirven de guía para navegar a través de la aplicación sin tener que aprender algo nuevo. Algunas de las estrategias que funcionan en relación a los principios de consistencia y estándares nos hablan acerca de que los campos activos se identifiquen con un elemento visual claro y directo. También se recomienda que las instrucciones y los errores se encuentren en la misma zona del producto en donde se está agregando la información. También es importante asegurarse de que componentes similares cuenten con el mismo comportamiento. De esa manera, cuando un usuario identifique cuál de los componentes es un botón, cuando lo encuentre en otra sección del producto sepa que es un botón y puede hacer algo con él. Al final del día, una interfaz de usuario que maneja bien sus principios en consistencia y estándares será mucho más fácil de navegar por el usuario, ya que este no se enfrentará a una nueva curva de aprendizaje. La idea es aprovechar patrones existentes que hagan de su experiencia algo más placentero.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de diseño que habla acerca de la prevención de errores busca simplificar la experiencia del usuario ante la interfaz por medio de planear y ejecutar un diseño cuidadoso que prevenga errores. Por ejemplo, definir la ubicación y separación entre botones o acciones para evitar que el usuario seleccione una opción incorrecta. Otra estrategia es la de detectar errores potenciales. Esto surge a partir del análisis de la interfaz para encontrar secciones o áreas en donde los conceptos o acciones no sean claros. Finalmente, es importante presentar y definir los errores en caso de que el usuario tome una acción que resulte en un error. El usuario debe contar con la capacidad de ver si alguna acción que ha tomado resultó en un error. Un ejemplo de prevención de errores sería delinear específicamente los elementos y secciones con los que el usuario se puede encontrar. Observemos la diferencia entre un botón primario y un botón secundario. Generalmente, el botón primario es para una acción fundamental y el secundario es para una acción menos importante. Al tener una pista visual de que el buscador está activo, el usuario sabe que puede comenzar a escribir su búsqueda. Una estrategia para evitar errores en una interfaz sería presentar un menú con soluciones lógicas, específicas y excluyentes. Esto se refiere a secciones claramente nombradas que no pueden ser confundidas entre sí. Otra estrategia es asegurarse de que las opciones que cuentan con nombres similares no ejecuten acciones opuestas. Como ejemplo, no es lo mismo cancelar que borrar. Finalmente, en cuanto a un componente en donde el usuario puede escribir, es importante hacerle saber si el número de caracteres es limitado. Para eso se puede desplegar un indicador que le haga saber la cantidad de caracteres que le queda.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de diseño de reconocer antes de recordar se refiere al uso de pautas visuales dentro de la interfaz que el usuario será capaz de reconocer sin entrenamiento previo. De esta manera podemos sacar provecho de la memoria y experiencia del usuario utilizando objetos, acciones y opciones fáciles de identificar. Por ejemplo, símbolos comunes como la equis, que significa cerrar. También el uso de pautas e instrucciones de uso visibles y claras ayuda a disminuir la carga de memoria de los usuarios por medio del uso de elementos fáciles de reconocer. A continuación, unos ejemplos. El rectángulo con la palabra Guardar claramente simboliza un botón, ya que otras aplicaciones e interfaces han utilizado un símbolo similar. En el caso de la sección de opciones, podemos asumir que es un desplegable que será activado al presionar el triángulo invertido en su lado derecho. Finalmente, el uso del título en relación a un texto es fácil de reconocer. Primero, por la cercanía entre el título y el texto. Segundo, la diferencia y contraste entre los dos. Generalmente, un título es más notorio o más grande, el cual se ve acentuado en este caso con el uso de fuente negrita. En el caso de una sección de texto, generalmente se utiliza una fuente legible y de menor tamaño. Una estrategia que podemos utilizar para que el usuario pueda reconocer un elemento en la interfaz sin necesidad de recordar o pensar sería desplegar un elemento para cada paso de la transacción. De esa manera guiamos al usuario y evitamos confusión. Otra estrategia es la de utilizar títulos en cada una de las secciones. De esa manera podemos definir la identidad de cada grupo a través de la interfaz. También podemos utilizar pistas visuales y espacio para identificar y diferenciar los componentes, componentes como un buscador, un editor de texto o un botón. Al diferenciar estos elementos, el usuario puede identificar cada uno de ellos a través de la interfaz. También es importante contar con elementos de acción o selección que sean fáciles de identificar. Como ejemplo, un botón debe ser visualmente diferente al resto del contenido.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de flexibilidad y eficiencia de uso consiste en formar una interfaz que pueda ser utilizada tanto por usuarios novatos como usuarios expertos. Esto se logra enfocándose en adaptar la interfaz a las acciones más frecuentes, en donde los novatos encuentran lo necesario para completar sus metas y los expertos pueden hacer uso de herramientas más avanzadas, como el uso de atajos, que aceleren su interacción. Para crear una interfaz flexible es importante tomar en cuenta algunas estrategias, como el establecer mensajes tanto para usuarios novatos y expertos. Estos mensajes pueden servir de instrucción para los usuarios novatos y de recordatorio para los usuarios expertos. Otra estrategia es la de contar con la capacidad de copiar y pegar información. Esto resulta en una reducción de tiempo en cuanto a la entrada de datos. Finalmente, la estrategia de atajos de teclado ayuda a los usuarios expertos a agilizar sus tareas frecuentes y puede ser un punto de aprendizaje para los usuarios novatos. Finalmente, una interfaz de usuario que cuenta con flexibilidad será más fácil y agradable de usar, además de mostrar una ventaja competitiva ante otros productos.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de estética de diálogos y diseño minimalista se refiere a la implementación de una interfaz que despliegue únicamente la información necesaria, ya que cada unidad irrelevante compite con las demás, lo que puede causar confusión. Además, la competencia reduce la visibilidad de unidades importantes, lo que disminuye la eficiencia de uso de la interfaz. Una estrategia para mantener un diseño minimalista y claro consistiría en mostrar únicamente la información esencial en pantalla. Otra estrategia es el uso de gráficos que se distinguen de acuerdo a su significado conceptual. También cada ícono debe contrastar con respecto a su fondo, de manera que estos sean visibles y fáciles de entender. Finalmente, cada una de las pantallas debe incluir un título corto y claro, ya que los títulos de texto largos suelen ser confusos y en algunos casos confunden al usuario.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los principios de reconocimiento, diagnóstico y recuperación se refieren al proceso mental por el cual pasa un usuario al enfrentarse a un mensaje de error, por lo que es importante asegurarnos de que el mensaje de error sea constructivo y no cause miedo o conflicto en el usuario. El siguiente paso es el indicar exactamente cuál es el problema a resolver para ofrecer una salida al usuario. para que los mensajes de error sean útiles, es fundamental que se expresen en un lenguaje claro, evitando números o códigos que el usuario común no entiende. La excepción a esta regla es si la interfaz desarrollada está dirigida a un grupo experto de usuarios que necesita de los códigos y mensajes específicos para realizar su trabajo. Una de las estrategias a tomar en cuenta en cuanto al manejo de errores es la de informar al usuario acerca del error. También el sugerir la causa del problema para ayudar al usuario a entender en dónde se equivocó. A partir de eso se puede indicar al usuario cuál es la acción a realizar para lograr correcciones. En algunos casos, los errores deben ser redactados de manera que el sistema se encarga del error. Un ejemplo es el presionar Cancelar si el usuario decide no continuar con el proceso. El usuario debe contar con la capacidad de reconocer, diagnosticar y corregir cualquiera de los errores que haya cometido de una manera sencilla y sin estrés.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El principio de ayuda y documentación se refiere a un diseño de interfaz en donde el usuario no necesite documentación o instrucciones para utilizar el producto. Este debe ser diseñado para que el usuario pueda enfocarse en sus tareas dentro del sistema, además de facilitar la navegación y búsqueda de tareas a realizar. En caso de que sea un producto con un alto nivel de complejidad, la interfaz puede incluir una sección de documentación o instrucciones. Una de las estrategias a utilizar para que el usuario no requiera de documentación es que la interfaz cuente con instrucciones que siguen una secuencia de acciones de usuario la cual lo va guiando a través del proceso y no tiene que detenerse a consultar si lo que está haciendo es correcto. Otra estrategia es el uso de ayudas de memoria para comandos y atajos de teclado. Estos pueden aparecer como íconos o indicaciones textuales que ayudan al usuario a continuar con su proceso. Otra estrategia es mantener la información corta, relevante, exacta, completa y comprensible, de manera que el usuario no se vea obligado a navegar a través de documentos extensos que luego llegan a ser confusos. Finalmente, el material instructivo debe ser interpretativo, no complejo. Se pueden utilizar apoyos como íconos y pequeñas frases en texto que vayan guiando al usuario a través de su proceso. Si una interfaz cuenta con pautas claras que sirvan de guía para el usuario, su experiencia será más placentera.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo La clave para crear una interfaz exitosa depende de conocer el problema a solucionar y crear un diseño que cubra esa solución. Para conocer el problema es importante realizar una investigación y, ya que el diseño de interfaz de usuario es el estudio que busca crear productos enfocados en los usuarios y sus necesidades por medio del diseño de interfaz, se busca lograr una experiencia agradable al usuario con un índice bajo de esfuerzo. Y para lograr eso es conveniente realizar una investigación que nos ayude a conocer cómo es que el usuario interactúa con el producto. A partir de eso seremos capaces de determinar las necesidades del producto para después analizar las necesidades del usuario y hacer un comparativo entre los dos. Uno de los factores a tomar en cuenta es la distribución de la información en el producto. Esto depende de la cantidad de información y el tipo de producto que se va a desarrollar. Otro factor a tomar en cuenta es la usabilidad de producto, la cual podemos comprobar por medio de la creación de un "wireframe" o esqueleto. También es importante considerar los puntos de interacción y navegación a través del producto, de manera que el usuario sea capaz de navegar a través del producto sin problema. Otro factor importante es el uso de pautas visuales para el diseño de interfaz. Estas pautas guían al usuario a través de los procesos encontrados en la interfaz. Durante la etapa de investigación es importante darnos el tiempo de conocer el problema a solucionar y la relación que tiene con las necesidades del usuario. De esta manera, nuestro proceso de diseño será más claro y fácil de seguir.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Durante la etapa de investigación es importante detectar y definir las funciones principales del producto. Para lograr eso, comenzaremos por definir las funciones principales del producto. Por ejemplo, el sitio de un hotel tiene como función principal el dar información de sus amenidades y servicios a sus clientes e invitarlos a reservar una de sus habitaciones. Otro factor es el desarrollo de un flujo completo de cada función. Continuaremos por establecer puntos de entrada y salida a través de la interfaz. Finalmente se definirán los casos de éxito y casos de error al completar el flujo. Volviendo al ejemplo del hotel, un caso de éxito puede ser cuando el cliente finaliza su reservación. En cambio, un caso de error se observa cuando el cliente no puede finalizar su reservación. Para definir las funciones principales del producto, es importante conocer algunos de los elementos básicos de la interfaz. Uno de los elementos son los controles de entrada. Estos se pueden definir como el inicio de un flujo. Un ejemplo de control de entrada es cuando un cliente selecciona el botón de reservación dentro de la página de hotel. De esta manera, el cliente comienza el proceso de reservación. Otro elemento de interfaz se conoce como los componentes de navegación. Un ejemplo de componente de navegación es el menú, en donde el usuario puede seleccionar cualquiera de las secciones que desee visitar. Otro componente de navegación puede ser un botón que nos lleve a la siguiente sección y de esa manera navegar a través de la interfaz. Los componentes de información se enfocan en informar al usuario acerca de alguno de los elementos de la interfaz. Un ejemplo de componente de información es un mapa de ubicación para que el usuario sepa exactamente dónde se encuentra el hotel. Otro elemento de la interfaz es el contenedor. Los contenedores se encargan de agrupar los elementos de la interfaz y, como su nombre lo dice, su función es la de contener ciertas secciones de la interfaz. Al tener conocimiento de estos y otros elementos que componen la interfaz de usuario, podemos detectar y comenzar a implementar las funciones principales del producto.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Ya que conocemos el contexto y funciones principales del producto además de las necesidades del usuario, podemos comenzar a definir el problema tomando en cuenta que la definición del problema es clave en el desarrollo del producto, además de no perder el enfoque de conocer las necesidades del usuario. A partir de las necesidades de usuario podemos identificar y describir el problema a resolver. En el caso de que sea un producto complejo que busca resolver una gran cantidad de necesidades a la vez, es conveniente crear una lista de necesidades y enumerarlas de mayor a menor prioridad. Una vez contamos con las necesidades claramente definidas, ha llegado el momento de redactar las características del problema a resolver. Iniciamos el planteamiento del problema preguntándonos qué es. Por ejemplo, "Este problema consiste en...". Esto nos dará el contexto del problema y un punto de partida sobre el cual podemos continuar. La siguiente pregunta se relaciona con el contexto usuario/solución: "Como usuario busco lograr...". Este concepto nos ayuda a agregar una acción al problema que queremos resolver. Finalmente contamos con la validación. Sabemos que el problema ha sido resuelto si sucedió esto. La frase es "Es exitoso si...". por lo que podemos concluir que el planteamiento inicia con "El problema consiste en X", seguido de un contexto usuario/solución, "Como usuario busco lograr esto", finalizando y cerrando con una validación. A continuación mostraremos un ejemplo de problema. Reservar habitaciones en sitios web de hoteles es un proceso lento. Este es nuestro problema. ¿Qué sucede? Que el reservar habitaciones es un proceso lento. A continuación, contexto. "Como usuario deseo completar una reservación en menos de 10 minutos". Aquí estamos combinando contexto, solución con validación. Como usuario yo deseo completar una reservación. Esto se refiere a contexto, usuario, solución. Finalmente, la validación: "en menos de 10 minutos". Yo como usuario sé que he tenido éxito si logro reservar una habitación en menos de 10 minutos. El planteamiento de un problema es el punto de arranque para comenzar a crear un diseño de interfaz con enfoque a una solución específica.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El uso de colores en la interfaz de usuario es uno de los elementos gráficos de mayor impacto, por lo que es necesario tener una noción de lo que es la teoría del color. Una de las características acerca del color es que este cuenta con la capacidad de evocar sensaciones. El manejo de color es fundamental en el diseño de la interfaz, ya que por medio del mismo se comunican características como la personalidad y el estilo relacionados al producto. La teoría del color utiliza como base el círculo cromático, el cual se divide en doce secciones. Estas se agrupan en colores primarios, secundarios y terciarios. A continuación presentamos el círculo cromático y sus características. Como se puede observar, los tres colores primarios son el origen a partir del cual se deriva el resto de los colores. Estos colores son el rojo, el azul y el amarillo. A partir de los colores primarios surgen los tres colores secundarios, que son el resultado de la combinación mitad y mitad de dos colores primarios y se determinan como: el color violeta, que es la combinación de rojo y azul. Continuamos con el color verde, que es la combinación del azul con el amarillo. Y finalizamos con el color secundario naranja, que es la combinación de amarillo con rojo. A partir de los colores primarios y secundarios existen los seis colores terciarios. Estos surgen también de la combinación de colores. La diferencia es que cuentan con diferentes porcentajes de pigmento. Por ejemplo, el color vino cuenta con una mayor proporción de rojo que de color azul, y el color verde limón se acerca más a las tonalidades del amarillo que del azul. El uso de color también puede funcionar para representar emociones y sensaciones, comenzando con dividir el círculo cromático en dos partes. El primer grupo puede ser denominado el de los colores cálidos o aquellos que cuentan con una mayor concentración de rojo y amarillo. La otra mitad se compone de los colores que se denominan fríos o aquellos que cuentan con un mayor porcentaje de azul. Estas características nos pueden ayudar a proyectar una sensación al usuario. Por otro lado, además de causar sensaciones, los colores pueden proyectar emociones. Uno de los ejemplos es el uso del color rojo, rojo naranja y naranja para denotar excitación o emoción. Para proyectar tranquilidad, generalmente se utilizan colores con tonalidad azul, azul verde o violeta. Y para proyectar un ambiente relajante se utilizan los colores verdes, azules claros y violetas claros. El uso de color puede tener un gran impacto en la interfaz, comenzando por usabilidad y legibilidad. En el caso de legibilidad, en el manejo de texto es importante contar con un contraste entre colores que permita la lectura del usuario. En cuanto a usabilidad, el color se puede utilizar como un elemento visual que guíe al usuario. Otro de los impactos es el reconocimiento de marca. Cuando se crea una interfaz de usuario basada en una marca, es importante utilizar los colores de la misma para transmitir la personalidad de la empresa. El color también sirve como guía visual para el usuario. Al utilizar colores intensos, la vista del usuario se ve guiada hacia ellos. Y al utilizar colores un poco más suaves, además de proyectar una sensación de relajamiento, el usuario toma su significado como un elemento secundario. Finalmente, el impacto de color dentro de la estructura de página y flujo se ve proyectado en elementos gráficos como botones y títulos. Por su capacidad de proyectar emociones, sensaciones y características de personalidad, el uso de color es un elemento clave en el diseño de interfaz.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los esquemas de color son la combinación de dos o más colores utilizando el círculo cromático como herramienta. Debemos tomar en cuenta que hay colores que proyectan una sensación estética al usarse en combinación. Estas combinaciones se definen como esquemas de color. Estos esquemas funcionan a partir de combinaciones lógicas que utilizan el círculo cromático como apoyo. A continuación presentaremos algunos ejemplos de esquemas de color. El esquema de color análogo utiliza dos o más colores a la par en un círculo cromático, lo cual generalmente representa un tono tranquilizante a partir de las similitudes de los colores combinados. El esquema de color complementario consiste en el uso de dos colores que se encuentran en puntos opuestos del círculo cromático y pueden ser utilizados para agregar acentos de alto contraste a la interfaz. El esquema de color denominado como tríada utiliza tres colores con la misma separación entre sí dentro del círculo cromático, creando la ilusión de un triángulo. Este esquema también es de alto contraste, mas el uso de tres colores lo hace armónico y menos agresivo que el esquema complementario. Continuamos con el esquema llamado tétrada o esquema cuadrado. Podemos observar que hace uso de cuatro colores espaciados de manera uniforme dentro del círculo cromático. Al ser un esquema más complejo, ya que incluye cuatro colores, se recomienda elegir un solo color dominante y utilizar el resto como acento. El uso de esquemas de colores al diseñar una interfaz ayuda a brindar armonía y personalidad al producto.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El uso de la regla 60-30-10 en cuanto a la implementación del color consiste en implementar el color en proporciones. Generalmente, se recomienda un 60 % del color dominante, un 30 % del color secundario y un 10 % del color acento. El implementar el uso de esta regla ayuda a generar una sensación de balance y armonía en el diseño de la interfaz. Esta proporción también ayuda a guiar la vista del usuario a través de la interfaz. Se recomienda utilizar colores contrastantes para generar un mayor impacto. A continuación presentaremos un ejemplo visual que muestre el resultado de esta proporción. En este ejemplo se puede observar que el color dominante o el color que ocupa el 60 % del espacio es el blanco. El secundario es el morado claro y da algunos acentos, mas no domina la pantalla, creando un balance y funcionando de apoyo. Finalmente, contamos con el 10 % del color acento, el cual se encarga de brindar algunos elementos de contraste. La proporción 60-30- 10 se considera armónica, ya que permite percibir los elementos visuales de la interfaz de manera gradual. El uso adecuado de esta regla ayuda a mantener un balance de colores evitando un diseño saturado y confuso.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El contraste es un principio de diseño que se produce cuando dos elementos son diferentes. Entre más grande sea la diferencia, mayor será el contraste. Cuando se trabaja con contraste, se recomienda que las diferencias sean notorias, de manera que sean llamativas y fáciles de identificar. Cuatro métodos comunes en la creación de contraste son mediante el uso de las diferencias entre color, tamaño, espacio y estilo. Cuando el contraste es obvio, sin importar el método, esa tensión generada por el mismo es lo que hará que la interfaz sea visualmente más interesante.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Cuando se desea crear contraste entre dos o más colores, la clave es el asegurarse de que existe una gran diferencia entre los valores de cada uno de los colores. Un ejemplo de la diferencia entre estos valores se observa en el uso de saturación, en donde un color intenso se opone a uno opaco o de bajo pigmento. Aquí observamos la diferencia entre un rojo y un gris, el rojo siendo el color intenso, el gris siendo el color opaco. Otra manera de crear contraste es por medio de valor, utilizando colores claros junto a colores oscuros. Como en este caso, observamos la oposición entre un color morado oscuro y una variante más clara a su izquierda. También se puede generar contraste por medio del uso de la temperatura del color, utilizando colores cálidos como el naranja junto con colores fríos como el azul. Esa oposición crea una tensión que puede guiar la mirada del usuario a través de la interfaz.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El contraste de tamaño se refiere al contraste entre elementos grandes y elementos pequeños. Su uso ayuda a relacionar y crear prioridad entre los diferentes elementos del diseño, generando una interfaz de mayor impacto, lo que la hace más interesante y dinámica. A continuación veremos algunos ejemplos del contraste por medio de tamaño. Aquí observamos un ejemplo claro de tensión al contar con una figura grande, en este caso el triángulo azul, que toma prioridad y centro. Esta figura es complementada por dos figuras más pequeñas a sus costados, lo cual genera tensión y guía el ojo a la figura central. En cuanto al contraste con tamaño, el concepto de relación puede agrupar o separar diferentes elementos de diseño de acuerdo al tamaño. en este caso podemos observar cuatro elementos separados o relacionar dos y dos de acuerdo al tamaño. En este caso, el mayor tamaño muestra prioridad de un elemento por encima del resto. Esto se observa en la diferencia de tamaño entre un título y un bloque de texto. El concepto de dinamismo se logra con el juego de tamaño y ubicación entre los elementos, lo cual puede dar una sensación de movimiento.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El espacio blanco, conocido como vacío o negativo, juega un papel importante separando y organizando los elementos que forman la interfaz. En relación al espacio, el uso de los conceptos de proximidad y separación crea un contraste asumiendo que los objetos que están más cerca se encuentran relacionados, mientras que al separarlos se da a entender que son secciones distintas. Se recomienda rodear elementos importantes con espacio en blanco para llamar la atención y darles mayor contraste en relación al resto del diseño. A continuación observaremos algunos ejemplos del concepto de contraste por medio de espacio. El uso de contraste de espacio para distribuir los elementos sobre la interfaz crea tensión y puede guiar la vista del usuario hacia llamadas de acción o información fundamental. En este ejemplo, la proximidad entre los elementos los agrupa de manera que el usuario los percibe como uno solo. La separación da a entender al usuario que cada uno de estos elementos pertenece a una sección o categoría diferente. En cambio, el espacio negativo es capaz de darle mayor prioridad a un elemento por encima de los otros, guiando el ojo del usuario específicamente a ese punto.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo El uso de variantes de estilo como contraste en el diseño de interfaz crea puntos de referencia visuales que sirven de guía al usuario. El contraste por medio de estilo se puede implementar de muchas maneras, ya sea con figuras geométricas o ilustraciones que cuenten con elementos de oposición, así como fotografías que consisten en temas y estilos contrastantes. Otro ejemplo claro de contraste por medio de estilos se refleja en el tratamiento de tipografía, ya que al utilizar una fuente en negrita junto a una fuente ligera se genera un contraste entre el peso, dejando que la fuente en negrita llame la atención y la fuente ligera sirva de complemento. Igualmente, al desplegar una fuente pesada y estática junto a una fuente cursiva y dinámica, se crea un contraste no solo en el peso de sus caracteres, sino en el flujo, ya que la fuente pesada denota firmeza estática, mientras que la fuente cursiva denota movimiento. Por otro lado, la combinación de "serif" con fuentes "sans serif" o palo seco genera una tensión entre lo clásico que se reconoce de una fuente "serif" y lo moderno de una fuente "sans serif". El uso de contraste por medio de estilos crea tensión y pausas visuales que, bien manejados, forman un diseño de interfaz dinámico e interesante.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo En el diseño de interfaz se recomienda contar con un conocimiento elemental de lo que es la tipografía para hacer un uso correcto de las fuentes dentro de la interfaz. Una fuente es un carácter que puede ser una letra, un signo o un número, los cuales cuentan con variantes de ancho, ya sean caracteres condensados o extendidos. También tienen variantes de peso. Se pueden observar fuentes livianas, fuentes regulares, fuentes en negra. Por otro lado, contamos con variantes de eje, lo cual se observa en la inclinación de la versión itálica de cada carácter. Los caracteres, signos y números que tienen características en común se agrupan en familias tipográficas, las cuales pueden ser identificadas por esas características visuales. Finalmente, de acuerdo a las variantes en su estilo, las familias se agrupan en categorías de tipografía, las cuales se pueden nombrar "serif", "sans serif" o palo seco, manuscrita o exhibición. A pesar de que estas son las categorías y términos correctos, la mayoría de las personas utilizan el concepto de fuente o tipografía para referirse a los caracteres utilizados en una interfaz.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo La elección de fuentes o familias tipográficas que vayan de acuerdo al diseño de interfaz puede ser complicada, ya que existe una gran cantidad y variedad de familias tipográficas. Es por eso que el enfocarse en una categoría específica de tipografía que vaya de acuerdo al estilo que se desea proyectar puede ahorrar tiempo. Las categorías se dividen a partir de estilos específicos que se comparten a través de familias tipográficas. Por ejemplo, las fuentes tipo "serif" son aquellas que los extremos de cada uno de sus caracteres cuentan con remates o enlaces y adornos. Su forma y presentación permiten que el ojo siga la línea fácilmente, lo cual las hace útiles en grandes bloques de texto. Por su estilo clásico transmiten autoridad y dignidad. En cambio, las fuentes "sans serif" o de palo seco se distinguen por contar con caracteres que no tienen remates o adornos. Están hechas a base de trazos uniformes y su estilo minimalista transmite modernidad y seguridad. Generalmente, se recomiendan en textos medianos a cortos. En contraste, el tipo de fuente manuscrita, como su nombre lo indica, se identifica por contar con caracteres que parecen de caligrafía. Sus trazos varían de finos a gruesos, algunos cuentan con elementos decorativos, y se recomiendan solamente para títulos y textos extremadamente cortos, ya que la variación entre sus trazos finos y cortos hace que se pierda legibilidad. También existen tipos de fuentes conocidas como "display" o de exhibición, las cuales juegan con el peso y forma de sus caracteres para transmitir emociones, épocas y conceptos. Generalmente, ese tipo de estilo otorga mayor personalidad y se recomienda su uso para título. Algunos ejemplos de fuentes conocidas como "display" se pueden observar en el diseño de títulos de películas y series, ya que esas fuentes utilizan el concepto o idea que están promocionando. Finalmente, las familias de fuentes "dingbats" o de símbolos tiene como característica el uso de caracteres que no son encontrados en alfabetos tradicionales. Normalmente se utilizan juegos de caracteres especializados, como lo son matemáticos, decorativos o de señalética. En algunos casos son caracteres ornamentales. Y para el diseño de interfaz existen fuentes de símbolos de uso común, íconos como el de enviar, menú, regresar y demás. cada una de estas categorías cuenta con subcategorías, y familias que tienen variantes en estilo y enfoque pueden ser encontradas a partir de esos filtros.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Por su legibilidad, las fuentes más comunes utilizadas en el diseño de interfaz son las categorías "serif" y "sans serif". Actualmente, las pantallas de los dispositivos más populares despliegan las fuentes de manera clara y correcta, por lo que tanto "serif" como "sans serif" cuentan con un grado similar de legibilidad. Los trazos uniformes de las fuentes "sans serif" pueden cansar la vista de los usuarios si la interfaz de usuario requiere de mucha lectura, mas hay que tomar en cuenta que, debido a que los remates cambian el contorno de las letras en una fuente "serif", existe una mayor posibilidad de problemas de lectura en personas con dislexia. Los tamaños más utilizados para la legibilidad son 13 y 14 píxeles para sitios de lectura corta como algunas redes sociales o sitios de venta. En cambio, los tamaños de 16 y 18 píxeles son útiles para sitios de lectura larga como lo son periódicos y revistas. Las fuentes se recomienda que tengan un color contrastante con el fondo, aunque tradicionalmente las fuentes son de color oscuro o negro ante un fondo blanco. Las líneas de lectura es el largo de una línea de texto y la cantidad de caracteres que esta contiene. Una línea de lectura demasiado corta rompe el ritmo y aumenta la tensión, lo cual puede distraer al usuario. En cambio, una línea de lectura demasiado larga dificulta que el usuario salte de una línea a la siguiente. Generalmente, se recomiendan líneas de lectura de entre 75 y 95 caracteres, ya que de esa manera nos aseguramos de que el usuario pueda leer con velocidad y eficiencia. En cuanto al espacio vertical, generalmente en el diseño de interfaz se recomienda un interlineado de 1 , 5 en proporción al tamaño del texto o mayor. A continuación, algunos ejemplos en cuanto a la longitud de línea de texto. Cuando la longitud de la línea de texto es muy extensa, se le pide al usuario tomar un recorrido muy largo del extremo derecho, en donde termina su lectura, al extremo izquierdo para comenzar a leer la siguiente línea, lo cual hace que su experiencia sea incómoda y pierda el impulso de leer. En cambio, en el caso de texto de longitud media, el usuario cuenta con suficiente espacio para comenzar a comprender lo que está leyendo sin necesidad de cortar su flujo para regresar al inicio de la siguiente línea. En cambio, en el caso de que la línea de texto es demasiado corta, el usuario no termina de conectar con la lectura, ya que se ve interrumpido cada vez que tiene que leer la siguiente línea.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Las "web fonts" son archivos de familias tipográficas que se hospedan en un servidor. Su dirección es un código que las identifica. Este código puede ser agregado a las hojas de estilo o CSS, que, al generar el estilo de la interfaz, despliega las fuentes llamadas por medio del código. Las "web fonts" se dividen en fuentes gratuitas y de código abierto, denominadas "web open font format". Estas fuentes son accesibles y gratuitas a cualquier persona que necesite utilizarlas para un proyecto de interfaz. Por otro lado, también existen fuentes de paga en donde se compra una licencia que le permite acceso al servidor en donde se encuentra hospedada la librería de fuentes. Es en la hoja de estilos CSS en donde se definen los tamaños y estilos de fuentes. En ella existen varias unidades de medidas que aplican a todos los elementos de la interfaz. Una de las más populares se conoce como "em", la cual equivale al tamaño predeterminado de la letra eme. Los navegadores definen de manera predeterminada el tamaño de 16 píxeles, mas esto se puede personalizar en la hoja de estilos. Esta unidad de medida funciona a partir de proporciones. Por lo tanto, Si un em equivale a 16 pixeles, entonces 1, 5 em equivalen a 24 píxeles, y 2 em equivalen a 32 píxeles. El uso correcto de esta unidad de medida ayuda a crear una interfaz con mayor balance en proporciones.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los usuarios reaccionan a elementos visuales de manera diferente que al texto. Es más fácil captar un mensaje o emoción y transmitir una idea de manera rápida y ágil por medio de una imagen. Cuando se utilizan imágenes en el diseño de una interfaz, el significado de las mismas debe ser claro y relacionarse con el producto. Como en este caso, podemos observar que el nombre del producto es H Sport y la imagen que lo acompaña es de alguien corriendo. En cambio, si se utilizan imágenes que no contribuyen al contexto o tema del diseño y son meramente decorativas, estas pueden causar ruido visual y ser una distracción para el usuario. En este ejemplo podemos observar que la chica no muestra ni vestimenta ni ninguna actitud que se relacione con el deporte. En cuanto a calidad de imagen, es importante utilizar una imagen cuya calidad sea proporcional al tamaño de pantalla en la que se va a utilizar. En este ejemplo podemos observar que la imagen cuenta con una buena calidad, ya que se alcanzan a percibir los detalles de la misma. En cambio, en este ejemplo la calidad de la imagen no soporta la resolución de la pantalla, por lo cual disminuye su calidad y hace que la interfaz se vea desagradable e incómoda. Otro consejo para el manejo de imágenes es el no alterar las proporciones de la imagen, ya que esto también disminuye la calidad y da una ilusión de que la imagen ha sido estirada o aplastada. Aquí podemos observar un ejemplo. A la izquierda contamos con la imagen original. Se ve bien, las proporciones están correctas y el mensaje es claro. En cambio, a la derecha, al observar las imágenes alteradas podemos notar que los elementos que componen la imagen han perdido parte de su significado y, además, se perciben de una manera desagradable, ya que esta alteración puede confundir al usuario al no entender a primera vista qué es lo que está observando. También el uso de imágenes o íconos como un medio informativo puede ser complementado al agregar un texto como pie de imagen o un "overlay" o despliegue para que estas cuenten con un contexto y no sean ambiguas. En este ejemplo podemos observar que al pasar el "mouse" por encima de las imágenes, estas cuentan con un nombre que las identifica. También se puede hacer el uso de una imagen primaria que se ubica en la parte superior de la interfaz. Llama la atención y muestra el contenido en contexto. Las miniaturas son imágenes o íconos pequeños e informativos que representan un tema o contexto de la interfaz. Normalmente sirven como objetivos para previsualizar información y al ser seleccionados llevan al usuario a más contenido.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo La diferencia entre imágenes e íconos es fácil de identificar una vez que conocemos las características particulares de cada una. Las imágenes pueden contar una historia al poder mostrar elementos más complejos. Por lo tanto, suelen ser más pesadas y de mayor tamaño. Las imágenes también, en su complejidad, pueden inspirar una sensación o emoción y enviar un mensaje de manera rápida y directa. En cambio, los íconos, al ser una abstracción de concepto, generalmente se despliegan como elementos más pequeños. Al ser una abstracción, los íconos son fáciles de entender y disminuyen el esfuerzo cognitivo del usuario. Su alta visibilidad por medio del contraste sirve como un llamado de atención al usuario. Además, al ser elementos pequeños y estar compuestos por pocos colores, estos pueden ser más ligeros para la carga de interfaz.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Cuando se utilizan fotografías se recomienda el uso del formato JPEG, ya que su calidad y peso pueden ser optimizados para web. Cuando se utilizan íconos que son plastas de color, se recomienda el uso del formato SVG, ya que, al ser en base a vectores, es escalable, lo cual significa que no pierde calidad al ser modificado. Además, es un formato ligero. Cuando se requiere de imágenes de buena calidad que además requieran de contar con transparencia, se recomienda el uso del formato PNG, que en muchos casos puede simular la calidad de la imagen JPEG con el extra de contar con transparencia. Es por eso que este formato puede aumentar el peso de la imagen, por lo cual es recomendado únicamente en caso de necesitar transparencia. Uno de los factores que afecta el tiempo de carga de un sitio web es el peso de las imágenes utilizadas. Generalmente, la definición del peso y la resolución de las imágenes a desplegar dependen del dispositivo en donde se presentará la interfaz de usuario. No es lo mismo la pantalla de un móvil que la pantalla de una computadora portátil. Es por eso que generalmente se recomienda utilizar imágenes cuyo peso sea menor a 200 kilobytes. A continuación veremos algunos ejemplos de formatos y sus diferencias en calidad. En el caso del formato SVG, al estar hecho en base a vectores o plastas de color, resulta en mantener una calidad constante sin importar el tamaño. En cambio, el formato JPEG pierde calidad al querer forzar una imagen de un tamaño menor a uno mayor. Finalmente, aquí contamos con un PNG el cual cuenta con las mismas características que el formato JPEG con la diferencia de que puede ser exportado con transparencia.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Los patrones de diseño son modelos preestablecidos de diseño y flujo que hacen de la interfaz una experiencia de uso fácil y agradable para que así el usuario pueda llamarla "experiencia intuitiva". La sensación de un producto intuitivo proviene de la experiencia previa y el aprendizaje que el usuario ha tenido por medio de la interacción con otros productos o incluso con el mundo real. El uso de patrones nos permitirá reducir la carga cognitiva del usuario, ya que por medio de patrones aprendidos de manera previa la experiencia del usuario se siente como intuitiva y, por ende, aumenta la usabilidad bajando la curva de aprendizaje y mejorando la experiencia de uso.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo para que una solución sea considerada un patrón, debe poseer ciertas características. En primer lugar, una efectividad comprobada al resolver problemas similares en otros productos. Un ejemplo de esto puede ser el menú hamburguesa o los menús que se ubican en la parte superior de los sitios de Internet. En segundo lugar, la solución debe poder ser reutilizable en varios contextos de la interfaz, lo que significa que se puede aplicar como solución a diferentes problemas de diseño en distintas circunstancias. Un ejemplo de esto son los botones. En cualquier diseño de interfaz es fácil reconocer los botones, ya que la mayoría cuenta con diseño, características, formas y colores que los identifican como tal. A continuación observaremos algunos ejemplos de patrones que cubren las características de efectivo y reutilizable. Estos tres sitios son diferentes, mas cuentan con algunas características en común. Uno de los patrones que se puede ver reflejado en estas tres páginas es el menú en la parte superior. Y aunque cada menú es diferente y cuenta con diferentes secciones, el patrón dicta que se encuentra ubicado en la parte superior de la interfaz. Otro ejemplo es la ubicación del logo o marca. en este caso se encuentra en el lado superior izquierdo de la página, y esto se debe a que, por el hecho de que leemos de izquierda a derecha y de arriba a abajo, el primer elemento que se observa es el que se encuentra en la parte superior izquierda, que es donde comenzamos nuestra lectura. El siguiente patrón de diseño tiene que ver con cómo se representa y dónde se ubica la información relacionada con la personalidad de la marca por medio del uso de redes sociales. en este caso existen dos opciones. Uno de los patrones dicta que esta información se encuentra en la parte inferior, mientras que otro prefiere tenerlo más a la vista en la parte superior. En ambos casos, lo que tienen en común son los íconos de cada una de las redes sociales. Aunque los estilos son diferentes, se reconoce de manera perfecta con el uso del logotipo de cada una de las redes sociales, sin necesidad de texto. En cuanto a los patrones de diseño, se recomienda no buscar nuevas soluciones a problemas ya existentes, de esa manera no se obliga a los usuarios a volver a aprender algo que ya conocían. Los patrones de diseño aumentan la usabilidad de nuestro producto digital, debido a que se componen de elementos y procesos que los usuarios ya conocen. Esto reduce su curva de aprendizaje y hace que la interfaz se sienta más intuitiva.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Una manera de encontrar y conocer patrones de diseño existentes es observando plataformas existentes. Estas plataformas cuentan con su propio lenguaje y flujo, conocidos por una gran cantidad de usuarios y comprobados a través del tiempo. A pesar de funcionar a partir de diferentes sistemas operativos, los patrones con los que cuentan son similares. Todas las plataformas consisten en un sistema de íconos, estructuras y componentes que se convierten en patrones de diseño. Algunos de los ejemplos de los patrones de diseño son los componentes de búsqueda. Como se puede observar, un componente de búsqueda puede cambiar de forma, de color e incluso de posición, mas el significado sigue siendo el mismo, por lo que se entiende como un patrón de diseño sin importar la plataforma o el cómo se vea. Otro ejemplo visual de lo que es un patrón de diseño es el uso de botones. Estos cuatro botones que se presentan marcan diferencias de figura, de color e incluso de texto. Contamos con botones planos, botón con sombra e incluso un botón que se ve en tercera dimensión. El usuario llega a entender que estos son botones por su figura y, generalmente, también por sus colores contrastantes. Finalmente, otro patrón de diseño funcional a través de varias plataformas es el ícono de menú o el ícono hamburguesa. La posición de este ícono generalmente es en la parte superior izquierda de la pantalla, mas, solamente con observar la forma de las tres líneas, el usuario entiende perfectamente que ese es un ícono de menú. Así como patrones visuales, también existen patrones de flujo como el patrón de autocompletar. Cuando un usuario comienza a escribir en un componente de texto y en automático, aparecen posibles sugerencias de lo que el usuario está escribiendo. Finalmente, el trabajo de un diseñador ante patrones de diseño es decidir en qué situación se puede crear un nuevo patrón y en qué situación hay que dejar de inventar la rueda. Un balance entre lo que el usuario conoce y lo que está dispuesto a aprender. Es así como logramos soluciones con patrones de diseño.
Si seleccionas líneas de la transcripción en esta sección, irás a la marca de tiempo en el vídeo Una vez creado el diseño, el siguiente paso es compartirlo junto con todas sus características con el equipo de desarrollo. Lo bueno es que actualmente existen aplicaciones de maquetación que cuentan con maneras muy fáciles de compartir documentación y activos como imágenes, íconos, fuentes y colores con el equipo de desarrollo. Aquí observaremos un ejemplo con Adobe X D. Contamos con el diseño del archivo, el nombre y los elementos. Primero hay que asegurarnos de que los elementos como logotipo e imagen están marcados para exportación, que los textos cuentan con el tamaño adecuado. Lo mismo los colores. Una vez hecha esta revisión, es momento de compartir, por lo que seleccionamos Compartir y elegimos Compartir para desarrollo. Una vez terminado de exportar el documento, este se puede ver en la nube, en donde los usuarios pueden dejar comentarios. Este comentario puede ser marcado en el punto necesario, en este caso el texto, donde otros usuarios pueden observarlos. La siguiente sección es la de desarrollo, donde se pueden ver los detalles de la interfaz y descargar los activos. Por ejemplo, el tamaño de la ventana, ubicación e información acerca del texto, el logotipo y la imagen. Estos activos como la imagen también se pueden descargar y elegir el formato en que lo deseamos descargar. Podemos ver el contenido, la apariencia y código de estilo de cada uno de los elementos. Si se requiere ver a gran rasgo qué es lo que contiene el documento, el usuario puede seleccionar la parte exterior al documento y ver los detalles a grandes rasgos: paleta de color, estilo de fuente, activos. Nuevamente puede esconder el panel de desarrollo. De esta manera se puede compartir el diseño de la interfaz con todos sus activos con el equipo de desarrollo, el cual cuenta con la opción de agregar comentarios y actualizaciones con respecto a la interfaz.