Please enable JavaScript.

Coggle requires JavaScript to display documents.

DISEÑO DE INTERFACES COMO TRABAJO MULTIDISCIPLINARIO - Coggle Diagram

- - - - la aplicación práctica de la disciplina de la interacción persona-ordenador (IPO), la usabilidad y la experiencia de usuario. La misma definición es válida para el DCU siempre que se incluya el concepto de proceso y se haga hincapié en los métodos que se utilizan en el DCU para situar en el centro de las distintas etapas de diseño al usuario final.
        
        El diseño centrado en el usuario (DCU1) es:
        
        Como su nombre indica:
        
        Una aproximación al diseño de productos y aplicaciones que sitúa al usuario en el centro de todo el proceso.
        
        Así, podemos entender el DCU:
        
        Como una filosofía cuya premisa es que para garantizar el éxito de un producto,:
        
        4 more items...
- - - - El comportamiento de los elementos de una aplicación debe ser constante y predecible. La consistencia supone la fijación de unas constantes representaciones a lo largo de una aplicación, de manera que el mismo tipo de información llegue al usuario siempre de idéntica forma.
        
        La consistencia también se refiere a la experiencia de usuario.
        
        Se facilita el uso de una aplicación cuando se respetan los conceptos de diseño que se han convertido en estándares en el entorno cultural del usuario.
        
        La consistencia debe respetarse en:
        
        Acciones: para tareas similares, el usuario debe poder ejecutar la misma secuencia de acciones.
        
        Terminología: los conceptos utilizados en menús, contenido, ayuda, etc., deben mantenerse a lo largo de toda la aplicación.
        
        Elementos gráficos: la retícula, la gama de colores, la aplicación de tipografía y otros elementos gráficos deben mantenerse constantes en todo el sistema.
        
        La importancia de mantener la consistencia varía según el tipo de aplicación. Mediante a ello se expone en una lista lo que son los primeros elementos que exigen mayor vigilancia de la consistencia que los últimos:
        
        Interpretación del comportamiento del usuario: Por ejemplo, los atajos de teclado deben mantener su significado.
        
        Estructuras invisibles: Se refiere a acciones asociadas de manera no visible a elementos de la interfaz. Por ejemplo: si el usuario puede redimensionar la ventana de la aplicación arrastrando su contorno, este control mantenerse siempre (no sería coherente que unas veces pudiera hacerlo y otras veces no, sin que exista un elemento grafico que lo indique).
        
        Pequeñas estructuras visibles: Se refiere a los iconos barras de desplazamiento, etc., que deben mantener su apariencia. Generalmente, la posición de estos elementos en pantalla también debe respetarse.
        
        Elementos de diseño: Es decir, el estilo visual que define la aplicación.
        
        Un conjunto (o suite) de productos: Se refiere a un conjunto de aplicaciones que forman parte del mismo sistema (Microsoft Office, por ejemplo, es una suite compuesta Excel, Word, Power Point, y otras utilidades). La consistencia debe mantenerse entre todas las aplicaciones que forman parte de la suite, aunque con las variaciones adecuadas para favorecer la flexibilidad de funciones.
        
        Instalaciones: Deben preverse las variaciones que pueda sufrir la aplicación al distribuirse. Por ejemplo, si se utilizan fuentes que dependan del sistema del usuario, no deberían existir variaciones importantes según las condiciones de instalación.
        
        Plataforma: Se refiere al mantenimiento de la consistencia en plataformas distintas, como Apple/Windows.
- - - - Interfaz de voz (VUI): Se trata de programas capaces de identificar e interpretar el habla. El ejemplo más claro que tenemos es el reciente auge de las inteligencias artificiales, como Siri, que se controlan por medio de la voz.
      - Interfaz de texto: Se utiliza principalmente en el ámbito de la programación de sistemas operativos y es la evolución de la interfaz de línea de comando primitiva que usaban los primeros programas de computadora.
      - Interfaz cerebro-ordenador: Es el tipo de interfaz más innovadora que existe hasta el momento, y aunque aún no cuenta con muchas aplicaciones cotidianas, se está utilizando para controlar prótesis biónicas y dar instrucciones sencillas a un software por medio de las ondas cerebrales.
      - Interfaz natural: Se le llama así al tipo de interfaz que identifica e interpreta acciones naturales del ser humano, como movimientos y expresiones faciales. Un ejemplo de ello son los videojuegos con interfaz kinética.
      - Persona a persona (Interfaces persona a persona): Permiten la comunicación entre los usuarios: Chats, Skype, Messenger, PTT (presione para hablar), etc.
      - Persona a programa (Interfaces persona a programa): El humano entra en contacto con el sistema e interactúa con él, juegos, programas, SIRI, ALEXA, Google Home.
      - Programa a programa (Interfaces programa a programa): Brindan soluciones al usuario a las mejoras la comunicación entre los diferentes programas o aplicaciones de un sistema, Google Play, Google Photos, Adobe Capture, ES File, etc.
- - - - Para lograrlo es fundamental contar con un diseñador de interfaces que esté involucrado desde la definición estratégica del proyecto:
        
        El medio con que el usuario interactúa con la plataforma debe incluir elementos que lo guíen a realizar las acciones que se plantearon como parte de los objetivos. De esta forma, un buen diseño es decisivo para obtener una alta tasa de conversiones:
        
        Las tareas principales que realizamos en esta primera fase de diseño son:
        
        Identidad visual: Interpretación y adaptación de manuales de norma gráficas.
        
        Diseño según soportes: Aplicación e integración de elementos según los aparatos en los que el usuario usará la plataforma. Dependiendo del proyecto, puede ser móviles, televisores y/o computadores de escritorio.
        
        Diseño de información: Síntesis de información, interpretación de jerarquías y conceptos en el diseño gráfico.
        
        Al momento de programar la interfaz, las tareas más importantes son:
        
        Full responsive: Crear un diseño que se adapte a las distintas pantallas.
        
        Accesibilidad web: Seguir las normas de accesibilidad que consideran alternativas para incrementar los potenciales usuarios.
        
        SEO: Incluir las etiquetas, plugins y código necesario para la optimización para motores de búsqueda.
        
        Validación: Cumplir con los estándares HTML/CSS para garantizar una correcta visualización y aseguran el buen funcionamiento del sitio.
        
        Compatibilidad cross browser: Asegurar la visualización y funcionamiento adecuado del sitio en los distintos navegadores disponibles.
        
        Cuando las plataformas son difíciles de usar o sus contenidos presentan barreras para ser accedidos, las métricas evidencian el mal funcionamiento. todos estos aspectos para crear plataformas con el mayor nivel de accesibilidad y usabilidad posible, siempre pensando en ofrecer una experiencia de usuario óptima.
- - - - De este modo, incorpora dos partes vitales:
        
        La primera es
        
        la prueba de usabilidad que depende del estudio psicológico del público objetivo:
        
        El uso del procedimiento.
        
        Los requisitos del usuario.
        
        El modelo del usuario.
        
        Otro es para:
        
        Asociar la psicología de la industria.
        
        La ergonomía.
        
        La psicología cognitiva y otros campos de principios fundamentales ampliamente utilizados en el comportamiento del diseño.
  - - - La facilidad de operación o acceso de un sitio web o un producto:
        
        Este es un subcampo de diseño de UX:
        
        User Experience o Experiencia del Usuario.
  - - - Desde el punto de vista de los desarrolladores, la usabilidad es:
        
        Una regla vital para decidir el logro de un sistema:
        
        Y, desde el punto de vista del gerente, la baja facilidad de uso de los productos disminuirá en gran medida la productividad y la gente no estará lista para comprar sus artículos. Después de todo, cada elemento que tenga poca facilidad de uso simplemente desperdiciará su energía y tiempo.
- - - - La idea es que:
        
        las personas tengan contacto con productos digitales de una manera:
        
        Intuitiva.
        
        Objetiva.
        
        Simple.
      - Para esto:
        
        El diseñador busca formas de predecir cómo las personas interactuarán con el sistema al que le está dando "forma":
        
        Si bien es un área relativamente nueva, aquellos que desean invertir profesionalmente en Diseño de Interacción necesitan conocer varios campos de estudio:
        
        que van desde:
        
        El conocimiento en diseño.
        
        Y programación hasta el procesamiento de datos.
  - - - Pero también:
        
        Se ocupa de otras áreas:
        
        Cómo:
        
        El diseño de información, que es responsable de diseñar cómo se debe almacenar y organizar la información generada en los sistemas.
        
        Entonces se puede decir que el diseño UX:
        
        Es un área de estudio más amplia para entregar sistemas "utilizables" a los usuarios.
- - - - Puede decirse que los colores en una interfaz son los semáforos de la experiencia de usuario. Como ya dijimos en aquel post:
        
        Los colores transmiten emociones que se trasladan a la interfaz cuando los usamos. Además, hay unas convenciones de color más o menos universales que no conviene romper.
        
        Ya que también en el aspecto o en al área de los colores comprender la psicología del color es un factor clave para poder determinar una paleta de colores que funcione correctamente en nuestros productos digitales.
        
        Los colores elegidos para el diseño de una interfaz en un producto digital son un componente de gran impacto psicológico en los usuarios y en la propia experiencia de estos con el producto digital.
  - - - Tiene un impacto importante en las emociones humanas y que debe de haber un propósito al elegirlos. La elección de un color dentro de una interfaz digital puede influir y mucho en las decisiones de los usuarios:
        
        Cambiar los colores a los botones que influyen en los objetivos principales de un producto, suele ser de las pruebas más habituales en los test A/B cuando se aplican dentro de un proceso de CRO. Es por ello que la clave para definir una paleta de color en un sitio web, una app o cualquier producto digital está en habilidad de manipular un color, solo elegirlo.
        
        Pero para que esto sea posible, hay que tomar una serie de decisiones que no son meramente emocionales y subjetivas:
        
        Si bien no hay reglas ni normas para construir una buena interfaz de usuario, sí existen recomendaciones basadas en la teoría del color y las sensaciones que estos producen:
        
        Como ya hemos dicho:
        
        Para darle una identidad a nuestro sitio, es necesario crear:
        
        2 more items...
        
        Y para lograr esto es que se definen los colores que actuarán a lo largo de todo el sitio.
        
        Existe una regla que viene del mundo del diseño de interior:
        
        1 more item...
- - - - Inicialmente, se utilizaban las fuentes típicas que los usuarios tenían instaladas en sus dispositivos:
        
        Actualmente, gracias a que los navegadores soportan la directiva, es posible utilizar casi cualquier tipo de tipografía sin necesidad de que esté instalada en el dispositivo:
        
        A continuación, puedes ver algunas recomendaciones que hay que tener en cuenta a la hora de elegir la tipografía para un sitio web:
        
        Establecer un interlineado de 1,5 puntos por el tamaño de la letra.
        
        No abusar de los subrayados ya que suelen utilizarse para los hipervínculos.
        
        Elegir un buen contraste entre el fondo y la letra.
        
        Nunca escribir todo en mayúsculas porque ralentiza la lectura. Se debe utilizar solo para destacar mensajes cortos como títulos, subtítulos o conceptos importantes.
        
        Utilizar fuentes legibles.
        
        Los espacios en blanco entre párrafos ayudan a descansar la mirada y a mejorar la concentración gracias a la mejor comprensión de la separación entre ellos. Así pues, es necesario añadir un poco más de espaciado entre párrafos y no dejar la misma separación que con el interlineado.
        
        Utilizar fuentes legibles.
        
        La longitud recomendada para un párrafo está comprendida entre 45 y 75 caracteres. (aunque esto puede depender del tamaño de la pantalla).
        
        Es aconsejable no utilizar textos de menos de 12 px.
        
        Aunque existen muchas clases de letras, a continuación, se verán las más destacadas:
        
        Script: Los tipos de letra Script se basan en los trazos fluidos parecidos a la escritura a mano. Las versiones más formales transmiten elegancia, mientras que las más casuales se utilizan para conceptos creativos.
        
        Decorative: Son tipografías diseñadas con fines específicos, sin tener especialmente en cuenta la legibilidad. Presentan una gran carga expresiva, son atractivas y con mucha personalidad.
        
        Sans Serif: El tipo de letra Sans Serif no incluye ninguna proyección al final de los trazos de las formas de las letras. Transmite modernidad, seguridad, alegría y, en ciertas ocasiones, neutralidad o minimalismo.
        
        Monospaced: En los tipos de letra monoespaciales cada letra ocupa la misma cantidad de espacio horizontal en la pantalla. Se suelen utilizar para la representación de código informático o de texto escrito mediante una máquina de escribir.
        
        Serif: El tipo de letra Serif incluye una ligera proyección que termina los trazos de las formas de las letras (llamadas Serif). Es tradicional, seria, respetable, institucional o corporativa.
- - - - El diseño de la pantalla puede entenderse como la concepción y creación de la interfaz gráfica de usuario (GUI en sus siglas en inglés):
        
        La disposición de los ítems pantalla es de gran relevancia. Esto se refiere principalmente al layout:
        
        El concepto de la arquitectura de información se presenta en detalle:
        
        Puesto que:
        
        La ubicación de items como:
        
        Texto.
        
        Encabezados.
        
        Navegación.
        
        Así como:
        
        Subencabezados.
        
        Imágenes.
        
        Vídeos.
        
        Iconos.
        
        Y otros contenidos de la interfaz de usuario es un factor importante.
        
        Por ende, el diseño de la pantalla tiene que ver:
        
        Con la composición de los múltiples items y contenidos, y su apariencia en su respectiva interfaz.
  - - - En muchas otras apps que disponen como elemento central la interacción del usuario en distintos tamaños de pantalla. Estos formatos de salida múltiples son un desafío para los diseñadores, puesto que el contenido se mostrará en distintas pantallas:
        
        Esto además significa que deben tenerse en cuenta y explotarse ciertas restricciones y posibilidades.
        
        Las características y los posibles patrones de interacción deben ser soportados por las propiedades gráficas del medio. A la vez, la impresión general de la pantalla debe satisfacer ciertos requerimientos estéticos:
        
        Por ejemplo, los items de las pantallas deben tener proporciones que tengan un efecto estético en el observador o usuario. Dicha estética está a su vez asociada a la interfaz de usuario y está de forma directa relacionada con aspectos como el diseño web, la usabilidad o la experiencia del usuario:
        
        Por ejemplo, los items de las pantallas deben tener proporciones que tengan un efecto estético en el observador o usuario. Dicha estética está a su vez asociada a la interfaz de usuario y está de forma directa relacionada con aspectos como el diseño web, la usabilidad o la experiencia del usuario:
        
        Disponen que cumplir con las normas de diseño de la pantalla y además:
        
        Prestar atención los factores:
        
        2 more items...
- - - - Cada uno tiene una serie de características específicas que lo hacen más o menos atractivo al público en cuanto al diseño y manejo de su sistema operativo:
        
        Para que se hayan podido construir cada uno:
        
        De estos sistemas operativos:
        
        Así como:
        
        Páginas web.
        
        Apps móviles.
        
        Esto es a lo que llamaremos interfaz gráfica:
        
        O lo que en un término más coloquial podría ser:
        
        El menú principal del programa.
        
        A partir de esto:
        
        1 more item...
        
        Se ha tenido que pasar por un proceso de construcción en base a estándares para el diseño de interfaces gráficas establecidos por cada compañía.
- - - - La posibilidad de que un producto o servicio web pueda ser accedido y usado por:
        
        El mayor número posible de personas, indiferentemente de las limitaciones propias del individuo o de las derivadas del contexto de uso:
        
        Además, la accesibilidad no sólo implica la necesidad de facilitar acceso, sino también la de facilitar el uso:
        
        La distinción entre usabilidad, facilidad de uso, y accesibilidad, un diseño será accesible cuando sea usable para:
        
        Más personas en más situaciones o contextos de uso, posibilitando a todos:
        
        De forma eficiente y satisfactoria.
        
        La realización.
        
        Los usuarios.
        
        Y consecución de tareas.