Skip to main content

Unidad 1

CONCEPTOS DE DISEÑO DE INTERFACES.

1.1 ¿Qué es la Interacción Humano-Computadora (IHC)?

La Interacción Humano-Computadora (IHC) es un campo interdisciplinario que estudia cómo las personas interactúan con las computadoras y otros dispositivos digitales. Su objetivo principal es diseñar sistemas que sean eficientes, efectivos y agradables de usar.
“IHC es el diseño de sistemas computacionales que apoyan a personas para que puedan llevar a cabo sus actividades de manera eficiente y segura.” [Preece et al., 1994]
“IHC es el estudio y práctica de usabilidad. Es sobre el entendimiento, y creación de software y otras tecnologías que la gente querrá utilizar, será capaz de utilizar y encontrará efectivo al usarla.”
[Carroll, 2002]
“No debemos de enfocarnos tanto en la interacción humano-computadora, sino más en la interacción entre humanos a través de la computadora.” [comentario de Terry Winogard]

 ¿Cuales son las metas del IHC?

  • Desarrollar y mejorar la seguridad, utilidad, eficiencia y usabilidad de sistemas basados en computadoras.
  • Incrementar la usabilidad de los sistemas. Fáciles de aprender y fáciles de usar.
Donald Norman. Científico y comunicador americano, es profesor emérito en San Diego y experto en Ciencias de la computación, siendo conocido, principalmente, por sus ensayos y trabajo sobre la Ciencia Cognitiva y la usabilidad.

Según Donald Norman, hay dos principios claves en la usabilidad: Visibilidad y Provisión.

Visibilidad: Los componentes de una interfaz deben:
  • Ser visibles, pero no sobrecargar al usuario.
  • Tener un buen mapeo con los efectos que producen.
  • Tener Feedback.
  • Relación entre los objetivos del usuario, las acciones que debe hacer y los resultados.
Provisión:
Los componentes de una interfaz deben proveer de manera natural su funcionalidad. Se refiere a las propiedades de los objetos que sugieren su uso.
Actividad 1- Evaluación diagnóstica.
Realizar una búsqueda de por lo menos dos artículos sobre:
  1. Diseño de interfaces web.
  2.  Objetivos y características.
Deberá leerlos y posteriormente entrar a la plataforma de Teams en el bloc de notas en cuestionario redacte a manera de evaluación diagnostica un resumen sobre los puntos leídos.

Fases de desarrollo de un sitio web o aplicación.

En un proyecto de Desarrollo Web en lo que corresponde al diseño de una interfaz, comprende las siguientes fases.
  1. Sketch.
  2. Wireframe.
  3. Mockup.
  4. Prototipo.

Sketch

Pensemos en el Sketch como un primer boceto que realizamos para un proyecto digital que queremos crear. Son nuestros primeros trazos sobre una hoja de papel.
Un ejemplo de Proceso de Sketching seria lo siguiente:

  1. Identificación de Requisitos: Antes de comenzar a dibujar, es importante entender los requisitos y objetivos del proyecto.

  2. Dibujo de Bocetos Iniciales: Crear varios bocetos rápidos para explorar diferentes ideas y enfoques.

  3. Revisión y Selección: Revisar los bocetos con el equipo y seleccionar las mejores ideas para desarrollarlas más a fondo.

  4. Refinamiento: Refinar los bocetos seleccionados, añadiendo más detalles y anotaciones según sea necesario.

  5. Validación: Presentar los bocetos refinados a los stakeholders para obtener feedback y realizar ajustes finales.

Un ejemplo de Sketch, esta fase no esta limitada a realizarse a mano, se pueden utilizar softwares de diseño UI u otras herramientas tradicionales. 

Wireframe.

Es una ilustración bidimensional de la interfaz de una página o una aplicación que se centra específicamente en la asignación de espacio y priorización del contenido, las funcionalidades disponibles, y los comportamientos deseados.

Utilidades.
  • Dan prioridad a los contenidos determinando la cantidad de espacio que se va asignar a un elemento dado y donde se encuentra ese elemento.
  • Conectar arquitectura de la información del sitio para su diseño visual, mostrando las conexiones entre las páginas.
  • Clarificar los espacios y formas para la visualización de determinados tipos de información sobre la interfaz de usuario.
  • Determinar la funcionalidad prevista en la interfaz, la cantidad de las funciones disponibles, o el efecto de los distintos escenarios en la pantalla.
Cosas que se deben tener en cuenta a la hora de crear un Wireframe.
  • No utilizar propiedades de estilo.
  • Hacer uso de Tipografía genérica.
El boceto planificado a mano es trasladado a digital con un software dedicado, se especifican mas detalles del proyecto a desarrollar.

Wireframe y rejillas
En el contexto del diseño gráfico una retícula, grilla o rejilla es un instrumento para ordenar los elementos gráficos como el texto y las imágenes.

Diseño con Cajas.
Es el orden de la información presentada a los visitantes, de arriba abajo o de izquierda a derecha. Además, en el caso de las páginas web, una estructura básica muy común es dividir la página en tres zonas, cabecera, cuerpo, y pie.

MockUp

Una composición gráfica completa que ha utilizado el wireframe como plantilla introduciendo todos los elementos gráficos y visuales, convirtiéndose así en un modelo a escala de un producto que se utiliza para demostrar y probar un diseño.

Funciones del MockUp
  • Permite saber qué información existe y donde va.
  • Puede ser utilizado para la implementación del diseño.
  • Es más preciso para los desarrolladores.
  • Es una herramienta flexible.
  • Es más fácil de presentar a los no diseñadores.
Algunas cosas que debemos tener en cuenta.
  • No usar demasiados efectos y detalles.
  • No usar rejillas y no alinear correctamente los elementos.
  • No usar un esquema de color.
Un Mockup puede orientar el diseño antes del desarrollo. 
Prototipo
Un prototipo es un modelo (representación, demostración o simulación) fácilmente ampliable y modificable de un sistema planificado, probablemente incluyendo su interfaz y su funcionalidad de entradas y salidas. Un prototipo:
  • Se puede identificar y operar.
  • Sistemas de navegación.
  • Paleta de colores aplicada.
  • Iconografía.
  • Experiencia de usuario.
  • Servicios de ayuda, búsqueda, interacción.
El prototipo es una versión confirmada del proyecto, esta fase estará sujeta a opiniones de los involucrados del proyecto (feedback) para realizar sus cambios pertinentes.

1.4 ¿Qué es la Arquitectura de la Información?

La arquitectura de la información se refiere a la práctica de decidir cómo organizar, estructurar y etiquetar el contenido de un sitio web o aplicación para que los usuarios puedan encontrar fácilmente la información que necesitan. Es una disciplina que combina principios de diseño, usabilidad y experiencia de usuario.

El uso de Wireframes y prototipos nos ayudan a orientar este componente para la interfaz de usuario.

1.5 Accesibilidad web.

El diseño de los sitios web, aplicaciones y tecnologías digitales de manera que sean utilizables por todas las personas, incluidas aquellas con discapacidades. El objetivo es eliminar las barreras que impiden la interacción o el acceso a la web para personas con diversas discapacidades, como visuales, auditivas, motoras o cognitivas.

Uno de los estándares más reconocidos para la accesibilidad web es la Web Content Accessibility Guidelines (WCAG), desarrollada por el World Wide Web Consortium (W3C). Estas directrices proporcionan recomendaciones sobre cómo hacer que el contenido web sea más accesible.

1.6 Tipografía utilizada en la web.

Algunas de las tipografías comunes usadas en los proyectos son las siguientes:

  1. Sans-serif

  2. Arial

  3. Verdana 

  4. Helvetica

  5. Times New Roman

  6. Georgia

  7. Monospace

  8. Courier New

Herramientas para Tipografía Web

Google Fonts: Una biblioteca gratuita de fuentes web que puedes integrar fácilmente en tu sitio web.

Adobe Fonts: Ofrece una amplia variedad de fuentes de alta calidad que se pueden sincronizar con tus proyectos de diseño.

Font Squirrel: Proporciona fuentes gratuitas y de alta calidad que puedes descargar e integrar en tu sitio web.

1.7 Formularios.

Los formularios son una parte esencial de muchas aplicaciones y sitios web, ya que permiten a los usuarios ingresar y enviar información. Un buen diseño de UI en formularios puede mejorar la experiencia del usuario, aumentar la tasa de conversión y reducir los errores.

  • Algunos de los principios básicos del diseño de formularios son los siguientes:
  • Los formularios deben ser claros y simples. 
  • Agrupa los campos relacionados en secciones lógicas. 
  • Proporciona feedback a los usuarios cuando ingresan información. 
  • Deben ser accesibles para todos los usuarios, incluidos aquellos con discapacidades. 
  • Utiliza los mismos estilos, colores y patrones de diseño para que los usuarios se sientan familiarizados.
Concluyendo esta Unidad, nos espera el desarrollo de un proyecto propio en el que realizaremos su interfaz, conoceremos nuevas herramientas recurrentes y utilidades adicionales de Desarrollo Web. 

Comments

Post a Comment