Karteikarten
Ohne Titel
Karten in diesem Stapel (47)
- 1ESTRUCTURACION DE DISEÑO COLOR: Mejora la estética y funciona para destacar y organizar para codificar información. No tiene una función estética o emocional., cuando el color es usado de forma incorrecta puede ocasionar graves problemas de usabilidad. NUMERO DE COLORES
Se debe limitar el número de colores diferentes alrededor de cinco colores dependiendo de la complejidad del diseño.
Cuando el color se utiliza para codificar algún significado, conforme aumenta el número de colores (y significados) diferentes, se reduce su utilidad para esta función. - 2CODIFICACION DE INFORMACION El color resulta un recurso muy útil para reforzar el significado de ciertos elementos de la interfaz, diferentes culturas asocian a determinados colores. La recomendación lógica es no incurrir en contradicciones que puedan interferir en la interpretación automática (intuitiva) del mensaje. CODIFICACION DE INFORMACION
Otra forma es incluir leyendas que especifiquen qué significa cada color.
Este uso se apoya en el principio de la Gestalt determina que aquellos elementos que comparten atributos gráficos (como el color) son percibidos intuitivamente como pertenecientes a un mismo grupo. - 3CODIFICACION DE INFORMACION Existe un considerable porcentaje de personas que no pueden ver alguno/s de los colores (rojo, verde, azul y amarillo) o incluso ninguno (visión monocromática). Aproximadamente el 4% de la población presenta alguna deficiencia visual cromática (8% en hombres y 1% en mujeres). La información visual codificada mediante el color no debe ser esencial, si lo es debe ser codificada de forma redundante, utilizando otros recursos para codificar la misma información.
- 4COMBINACION DE COLORES La teoría sobre los procesos oponentes: la visión canaliza el color en tres canales diferentes: uno codifica la luminancia (blanco-negro) y otros dos el color (rojo-verde y azul-amarillo). Es una teoría que surge de la existencia de pares de colores que no pueden verse al mismo tiempo: rojo-verde, azul-amarillo y negro-blanco (acromático). No son visibles, por ejemplo, el verde rojizo o el azul amarillento.
- 5Una consecuencia de esta teoría es la recomendación general de evitar la combinación de colores incompatibles (rojo, verde, azul y amarillo), principalmente de los puros o saturados. El color mas usado por diseñadores es el negro por neutralSATURACION
El uso de colores saturados es especialmente recomendable cuando se quiere destacar visualmente algún elemento sobre el resto.
Los colores saturados provocan fatiga visual, por lo que hay que usarlos con cautela. - 6EFICIENCIA Cada segundo ahorrado al usuario mejora su experiencia de uso. . Esta inmediatez, se encuentran tras el éxito de productos como los de Google. Para ello el sistema o producto debe responder a cada acción del usuario en el menor tiempo posible, idealmente de forma instantánea
Conforme más eficientemente pueda el usuario completar su tarea interactiva, mayor será su satisfacción y valoración del producto. - 7MINIMIZAR EL NUMERO DE CAMPOS: Solicitar al usuario solo los datos imprescindibles, algo con muchos campos, requiere más esfuerzo, y desmotiva VALORES POR DEFECTO: Establecer como valor por defecto aquel que la mayoría de usuarios seleccionarán.TAMAÑO DE LOS CAMPOS DE TEXTO:
Si el campo es muy pequeño y no de forma cómoda, exigirá más esfuerzo al usuario y provocará que cometa errores.
ALINEACION DE ETIQUETAS: Cuando las etiquetas se encuentran próximas a los campos, para el usuario es menos costoso relacionarlos visualmente.
- 8ORGANIZACION DE LOS CAMPOS Los formularios con los campos en varias columnas son más complejos de completar que los de una única columna. LEY DE FITTS: conforme menor es el área de clicks de un elemento del formulario, mayor es el esfuerzo y tiempo requerido para accionarlo. LEY DE HICKS: Reducir al mínimo el número de opciones por campo.
CAPTCHAS: Son, especialmente los de tipo 're-captchas', complejos e incómodos de resolver, por lo que deben utilizarse métodos más sencillos para el usuario. - 9Validación instantánea: Una vez que el usuario complete un campo se debe validar el dato introducido y advertirle en caso de que no sea correcto, en lugar de esperar a que complete todo el formulario para realizar la validación y listarle todos los errores cometidos. Ayuda contextual: Cuando el usuario pueda dudar acerca del significado de un campo o sobre cómo introducir los datos, se debe ofrecer ayuda contextual.
- 10SUGERENCIAS AUTOMATICAS: Cuando el listado de opciones a elegir en un campo de selección sea grande, y el usuario conozca a priori el término o palabras que forman la opción, resulta más recomendable utilizar un campo de texto que, cuando el usuario comience a escribir, ofrezca automáticamente qué opciones coinciden con el texto introducido. ERROR HUMANO
La primera función de todo buen diseño es evitar o prevenir el error humano. - 11Los usuarios cometen errores, cuando usan un producto interactivo su prioridad es la eficiencia, lograr sus objetivos lo más rápido posible, y eso implica que no atiendan a cada detalle de la interfaz ni piensen detenidamente cada acción que llevan a cabo. El diseño debe prevenir que el usuario cometa errores, y ofrecer vías de solución, ya que son la mayor causa de frustración en el usuario y por tanto de experiencias negativas. Como sugiere Norman, esos errores no deberían ni siquiera considerarse errores del usuario, sino errores del sistema o simplemente mal diseño.
- 12MEDIDAS PARA EVITAR EL ERROR HUMANO ORIENTAR AL USUARIO: Ofrecer ayuda contextual, mediante breves explicaciones o tooltips, reduce la probabilidad de error. ADVERTIR Y SOLICITAR CONFIRMACION: Cuando el usuario realice una acción que pueda tener consecuencias irreversibles, se le debe advertir y solicitar confirmación. Conforme mayor sea la gravedad de las posibles consecuencias, con mayor fuerza deberemos atraer la atención del usuario sobre la elección
- 13PROTEGER EL TRABAJO DEL USUARIO: Siempre que sea técnicamente posible es recomendable guardar automáticamente los datos o información introducida por el usuario para evitar que, si se produce un fallo técnico, se pierda. PERMITIR DESHACER: Uno de los mecanismos más eficaces para evitar las consecuencias negativas de un error humano, es permitir al usuario deshacer en cualquier momento los cambios realizados.
- 14SOLUCION AUTOMATICA DE ERRORES: Existe una gran cantidad de posibles errores que puede cometer el usuario y que es posible detectar y solucionar de forma automática. Siempre resultará más recomendable dar solución a estos errores que advertir al usuario de los mismos y obligarle a rectificarlos. MENSAJES DE ERROR COMPRENSIBLES: Cuando no sea posible evitar un error (humano o del sistema), se debe informar al usuario en un lenguaje claro y comprensible, e idealmente ofreciendo solución al problema. En estos mensajes el producto no debe culpar al usuario de lo que su diseño no ha sido capaz de prevenir.
- 15ESTETICA Un diseño estético es percibido como más fácil de usar.Existe una correlación entre estética y usabilidad percibida, el usuario ante un diseño bello o atractivo lo prejuzga automáticamente como más fácil de usar. La estética además da emociones positivas, y es la cualidad del diseño que de forma más inmediata impacta en el usuario.
- 16Esto implica que, para ofrecer una experiencia de usuario satisfactoria, debemos prestar especial atención a la estética. Aunque no existen directrices o recomendaciones infalibles para que un diseño resulte estético, sí hay ciertos conceptos relacionados de interés. PROPORCION AUREA
En el diseño de interfaces los usos más comunes de la proporción áurea suelen ser para determinar el ancho y proporción entre dos columnas (cuando una es mayor que la otra), o en la proporción entre el ancho y el alto de rectángulos - 17BALANCE El balance como concepto aplicado al diseño busca, al igual que en la física, igualar la tensión entre elementos. Un diseño balanceado es percibido como más estético, transmite armonía. Una forma de lograr un diseño balanceado es a través de la simetría, en la que los elementos a cada lado del eje central tienen el mismo peso visual. Pero también es posible alcanzar el balance en diseños asimétricos. Para ello hay que jugar con el peso visual de los elementos hasta lograr un estado de equilibrio entre ambos lados del eje central. El peso visual de un elemento viene determinado por su tamaño, color, intensidad, proximidad a otros elementos o margen.
- 18ESPACIOS EN BLANCO Al diseñar tenemos la tendencia natural a ocupar todo el espacio, rellenando cada hueco en blanco, y de este modo incrementando sin necesidad su complejidad, la carga visual y cognitiva del usuario. El espacio en blanco o espacio negativo (no necesariamente el color debe ser blanco) se refiere al espacio y márgenes entre elementos de la interfaz. Este espacio en blanco permite una exploración visual más calmada, pero también, incrementa la simplicidad, elegancia y apariencia estética del diseño.
- 19FOTOGRAFIA Las fotografías tienen una gran capacidad para comunicar y evocar emociones, y un impacto directo en la estética del diseño. Una mala o descuidada utilización puede provocar desconfianza en el usuario, trasmitir poca profesionalidad o entorpecer la interacción y exploración visual del usuario. Entre los errores más comunes en productos digitales se encuentra utilizar fotografías sin función más allá de la puramente ornamental; fotografías de un tamaño tan reducido que las hace ilegibles; o fotografías de personas que se perciben como artificiales, en las que es difícil verse identificado o que atraigan la atención,
- 20CUDLEY propone un checklist sencillo para determinar la efectividad: 1. Legibilidad y credibilidad 1.1. ¿Puede verse claramente la foto? Aspectos a evaluar: foco, composición, exposición, calidad y tamaño. 1.2. ¿La foto parece creíble? Aspectos a evaluar: profesionalidad, adecuación (al contexto y marca), verosimilitud y relevancia. 2. ¿Qué mensajes comunica la foto?
Aspectos a evaluar: Qué se quiere comunicar, qué comunica y qué debería comunicar para satisfacer las necesidades del usuario. - 213. UTILIDAD Y EFICACIA 3.1. ¿La fotografía provoca la respuesta emocional deseada? Aspectos a evaluar: deseo, aspiración, estética, calma, entretenimiento y otras emociones. 3.2. ¿La fotografía ayuda o facilita al usuario su tarea?
Aspectos a evaluar: ¿Sirve a un propósito? ¿Educa sobre algo o provoca pensar de forma diferente acerca de un tema? ¿Instruye sobre cómo hacer algo? ¿Es constructiva? ¿Ayuda a prevenir el error humano? - 223.3. ¿Tiene la fotografía algún impacto en el comportamiento del usuario? Aspectos a evaluar: ¿La fotografía dirige eficazmente la mirada del usuario? ¿Es capaz de cambiar la opinión del usuario? ¿Provoca que el usuario desee el producto o contenidos de la fotografía? ¿Comunica el mensaje a su público objetivo? GESTALT
En una interfaz visualmente usable los elementos están organizados, relacionados y agrupados de forma lógica e inmediatamente reconocible. - 23Cuando miramos un diseño, automática e inconsciente organizamos aquello que estamos viendo, identificando relaciones de agrupación, coordinación, continuidad y orden entre los elementos. Como diseñadores, podemos hacer uso de las conocidas como leyes de la Gestalt. LEY DE PROXIMIADAD: Los elementos próximos entre sí, y distanciados del resto, son percibidos conjuntamente.
LEY DE SIMILITUD: Los elementos que comparten características visuales (forma, color, tamaño, orientación, textura) - 24LEY DE CIERRE: Nuestra mente tiende a completar formas inacabadas. Ley de simetría: Los formas asimétricas son percibidas más dificultosamente y como incompletas. LEY DE CONTINUACION: La atención visual tiende a seguir instintivamente la dirección espacial de los elementos. Cuanto más suaves sean los cambios de dirección más fácilmente serán percibidos y agrupados conjuntamente los elementos.
- 25LEY DE CONEXION: Elementos conectados por otros elementos (como líneas) son percibidos como una misma unidad. RELACION FIGURA - FONDO: Hace referencia a que nuestro cerebro procesa cada objeto como figura o como fondo, pero nunca como ambos al mismo tiempo.
- 26Las leyes de la Gestalt nos sirven de guía sobre cómo comunicar visualmente relaciones de agrupación entre elementos, cuantos más principios se usen conjuntamente para comunicar las mismas relaciones de agrupación, más fácilmente serán percibidas por el usuario.Por el contrario, si varios principios operan de forma opuesta, las relaciones denotadas por alguno de los principios pueden verse anuladas por las de otro de los principios.
- 27ICONOS Los iconos aportan visualidad y pueden llegar a ser mucho más fácilmente reconocidos e interpretados que los rótulos textuales. Los iconos son un tipo de elemento casi omnipresente en las interfaces gráficas de usuario.En ocasiones se utilizan con fines puramente ornamentales, sin aportar sentido o función. Sin embargo, bien ideados y diseñados, pueden facilitar el uso y comprensión del producto significativamente. Un icono útil es aquel cuyo sentido o función resulta fácil y directamente interpretable.
- 28La interpretación de un icono implica establecer una relación o correspondencia entre representación (forma gráfica) y representado (función o significado). Estas relaciones de correspondencia podemos clasificarlas en cuatro categorías: LITERAL: El icono presenta similitud directa con lo representado.
Ejemplo: el uso de un icono con forma de mapa para representar o enlazar, precisamente, un mapa geográfico. - 29METAFORICA: Analogía entre representación y representado. Ejemplo: un icono en forma de papelera para identificar la función eliminar. ARBITRARIA - CONVENCIONAL: La relación está basada en una convención social.
Por ejemplo, el uso de un icono con forma de casa para identificar la página de inicio de un sitio web. El tiempo y la frecuencia con la que son usados, las convierte en relaciones arbitrarias-convencionales. - 30METONIMICA: Basada en la asociación mental que se produce entre la representación y lo representado debido a que la primera presenta una relación literal con algo que es parte, causa o consecuencia de lo representado. Ejemplo: El uso de la forma de una cámara para representar una galería fotográfica. En principio el uso de cualquiera de estas relaciones puede ser perfectamente válida entre representación y representado. No obstante el tipo de relación más recomendable, porque es precisamente la que el usuario va a resolver de forma más rápida y precisa, es la de tipo arbitrario- convencional,
- 31Cuando el símbolo utilizado forma parte del vocabulario de símbolos conocidos previamente por el usuario. Por supuesto, las relaciones arbitrarias-convencionales pueden cambiar con el tiempo, algo que también debemos tener en consideración.¿ICONOS PLANOS O VOLUMETRICOS?
Los ICONOS PLANOS o esquemáticos se perciben más simples y elegantes. Son especialmente recomendables cuando el tamaño o resolución en donde se va a mostrar el icono son reducidos - 32Los ICONOS VOLUMETRICOS o con mayor realismo, son recomendables cuando la relación representado-representación no es convencional. Otra situación es cuando lo que buscamos en el icono es que destaque o se diferencie.Por ejemplo en el diseño del icono que identificará la propia aplicación buscamos que se diferencie de los iconos de otras aplicaciones con las que pueda compartir espacio en pantalla.
- 33UBICACION Cuando utilizamos cotidianamente un mismo producto o aplicación, usamos almacenar en nuestra memoria información que nos posibilita un uso más eficiente.Por ejemplo, podemos asociar mentalmente determinada función a la forma de un icono, a una combinación de teclas (teclas de acceso rápido), o incluso al nombre exacto de la opción en el menú
- 34La ubicación de los elementos en la interfaz debe ser consistente a lo largo de todo el producto. Es decir, el que en diferentes partes o pantallas del producto aquellos controles con una misma función cambien de posiciónINTELIGENCIA COLECTIVA
La arquitectura de información y las posibilidades de navegación de un producto pueden enriquecerse significativamente a partir de la actividad agregada de sus usuarios. - 35ETIQUETADO SOCIAL (Tagging) proceso distribuido en el que los usuarios, con el objetivo de describir un recurso, le asignan palabras clave (tags). Por recursos nos referimos a cualquier elemento digital, como por ejemplo la dirección (URL) de una página web, una fotografía, un vídeo CLASIFICACION POR CONCENSO
Los propios usuarios son los que debaten y definen la taxonomía completa de categorías del producto, así como la clasificación de cada contenido en relación a esta taxonomía. El ejemplo más claro y conocido es el de la propia Wikipedia. - 36SISTEMAS DE VALORACION Cuando se permite a los usuarios valorar o puntuar un determinado contenido o recurso, obtenemos una información de gran valor que podemos utilizar. Son los propios usuarios los que definen, cuál es el grado de interés o utilidad de cada recurso. Estos sistemas de valoración pueden complementarse, además, con sistemas de aviso de contenidos inadecuados. De esta forma la comunidad de usuarios no sólo es la que determina la relevancia de los contenidos, sino que incluso se corresponsabiliza en la regulación de los mismos.
- 37COLABORACION IMPLICITA No siempre es necesaria la participación explícita o consciente de los usuarios, ya que su propio comportamiento interactivo usando el producto también nos ofrece una gran cantidad de información. Por ejemplo, en numerosos comercios (como Amazon) solemos encontrar “Los clientes que compraron este producto también compraron:”. Es el conjunto de usuarios del portal el que, a través de sus compras, establece relaciones de similitud entre productos que pueden utilizarse por productos relacionados.
- 38Otro ejemplo es cuando el número de visitas que recibe una página es utilizado para determinar su relevancia (popularidad), por ejemplo en periódicos u otras publicaciones digitales. JERARQUIA VISUAL
Los diferentes elementos que forman la interfaz deben destacarse visualmente en base a su relevancia para el usuario, sus objetivos y tarea interactiva.
La atención de las personas es selectiva, solo podemos centrar nuestro entendimiento en una parte de lo que percibimos, mientras ignoramos el resto. - 39El diseño no debe distraer o interrumpir innecesariamente la atención del usuario, ni se puede esperar que el usuario perciba ni atienda a todos y cada uno de los contenidos y elementos que lo forman.LEGIBILIDAD E INTELIGIBIDAD
La legibilidad de los textos tiene un enorme impacto en la accesibilidad del producto, la inteligibilidad lo tiene en su usabilidad. - 40La mayor parte de las brechas de interacción tienen su origen en el lenguaje, en la incapacidad del sistema para comunicar al usuario de forma clara y comprensible de qué opciones dispone en cada momentoLEGIBILIDAD E INTELIGIBIDAD
Fuente tipográfica
Tamaño de la Fuente
Contraste
Interlineado o espacio entre líneas
Longitud de la línea
Estilos tipográficos
Mayúsculas - 41LEGIBILIDAD E INTELIGIBIDAD Concisión Predecible Vocabulario de los usuarios Consistencia Precisión Formas verbales Preguntas Estándares de facto TonoMAPEO NATURAL
El mapeo natural se produce cuando el usuario es capaz de predecir la función de cada elemento interactivo de forma natural.
Mapeo es un término técnico que se refiere a la relación entre nuestras acciones y el resultado obtenido. - 42MAPEO NATURAL Utilizar etiquetas e iconos descriptivos que no permitan diversas interpretaciones. Por ejemplo, un enlace en una página web con el texto “Haz clic aquí” no posibilita el mapeo natural, no podemos predecir cuál será el resultado de hacer clicOrganizar y agrupar visualmente los elementos de la interfaz de tal forma que quede clara cuál es su relación:
Ejemplo: Un panel de control del audio, con dos controles para el volumen de cada altavoz.. El mapeo natural implica que el control izquierdo se refiera al altavoz izquierdo, y el otro control al altavoz derecho, nunca al contrario. - 43Utilizar metáforas de interacción que resulten familiares y reconocibles por los usuarios: El éxito de la manipulación directa como estilo de interacción, como veíamos, se basaba precisamente en lo natural que resultaba su uso, ya que el usuario puede predecir fácilmente el resultado de sus acciones. ORDENACION
La ordenación de opciones o información debe definirse en base a la representación de la necesidad de la información del usuario. - 44Los diferentes contenidos y opciones deben ordenarse de tal forma que se facilite al usuario la consecución de su tarea, la localización del contenido buscado en cada momento.ORDENACION
Ordenación alfabética
Ordenación geográfica
Ordenación cronológica - 45RELEVANCIA Es la forma más eficaz de ordenar información es por su relevancia o importancia para el usuario La relevancia de un contenido u opción está determinada por el grado en el que facilita al usuario la consecución de sus objetivos.En la mayoría de ocasiones se puede aplicar la conocida como regla 80/20, que determina que aproximadamente el 80% de los usuarios o de su tiempo usando el producto, necesitan o están interesados en el 20% de los contenidos o funcionalidades del producto.
- 46USABILIDAD La usabilidad es un atributo de calidad de un producto que se refiere sencillamente a su facilidad de uso. No se trata de un atributo universal, ya que un producto será usable si lo es para su audiencia específica y para el propósito específico con el que fue diseñado. USABILIDAD
La usabilidad tiene dos dimensiones, la dimensión objetiva o inherente, y la dimensión subjetiva o aparente.
La dimensión objetiva es la que se puede medir mediante la observación
La dimensión subjetiva, en cambio, se basa en la percepción del usuario
- 47USABILIDAD Satisfacción: ¿Cómo de agradable y sencillo le ha parecido al usuario la realización de las tareas?Lo interesante de esta doble dimensión es que en ocasiones un producto puede ser subjetivamente usable, pero no serlo objetivamente (y viceversa).
El atractivo visual de un producto hace que el usuario lo perciba como más fácil de usar, aún cuando no lo sea.
Informationen
- Beschreibung
- Karteikarten am Ohne Titel, erstellt von Fer Figueroa am 08/08/2022.
- Erstellt von
- Fer Figueroa
- Aufrufe
- 3
- Bewertung