¿Qué es el diseño de interfaz de usuario?

Méndez González Cristhian Ricardo Raygoza Gallegos Luis Rodrigo Orozco Vázquez Víctor Eduardo
¿Qué es el diseño de interfaz de usuario?
El diseño de interfaz de usuario o ingeniería de la interfaz es el diseño de computadoras, aplicaciones,
máquinas, dispositivos de comunicación móvil, aplicaciones de software, y sitios web enfocado en la
experiencia de usuario y la interacción.
Normalmente es una actividad multidisciplinar que involucra a varias ramas es decir al diseño y el
conocimiento como el diseño gráfico, industrial, web, de software y la ergonomía; y está implicado en un
amplio rango de proyectos, desde sistemas para computadoras, vehículos hasta aviones comerciales.
Su objetivo es que las aplicaciones o los objetos sean más atractivos y además, hacer que la interacción con
el usuario sea lo más intuitiva posible, conocido como el diseño centrado en el usuario. En este sentido las
disciplinas del diseño industrial y gráfico se encargan de que la actividad a desarrollar se comunique y
aprenda lo más rápidamente, a través de recursos como la gráfica, los pictogramas, los estereotipos y la
simbología, todo sin afectar el funcionamiento técnico eficiente.
¿Qué es el wireframes?
También conocido como un esquema de página o plano de pantalla, es una guía visual que representa el
esqueleto o estructura visual de un sitio web.
El wireframe esquematiza el diseño de página u ordenamiento del contenido del sitio web, incluyendo
elementos de la interfaz y sistemas de navegación, y cómo funcionan en conjunto.2 Usualmente este
esquema carece de estilo tipográfico, color o aplicaciones gráficas, ya que su principal objetivo reside en la
funcionalidad, comportamiento y jerarquía de contenidos.
En otras palabras, se enfoca en “qué hace la pantalla, no cómo se ve.”
Los esquemas pueden ser dibujados con lápiz y papel o esquemas en una pizarra, o pueden ser producidos
con medios de diseño de aplicaciones de software libre o comercial.
Maqueta
En diseño gráfico impreso y artes gráficas en general, un modelo de cómo va a ser el producto impreso. En
una maqueta debe ir, de forma expresa o implícita, todo lo necesario para que el producto se realice hasta
el final.
En las maquetas anteriores a la existencia del diseño con ordenador y la autoedición,
el maquetador disponía todos los elementos pintándolos de forma esquemática en un boceto usualmente
a tamaño real. Allí indicaba por escrito al taller todo lo necesario para la composición tipográfica,
distribución de textos, imágenes y manchas de color y, si era necesario, adjuntaba los artes finales. La
precisión y concisión en las indicaciones eran esenciales.
Con la aparición del diseño digital con ordenador, lo que se proporciona es el documento final, dispuesto y
preparado para su impresión final, todo lo más a falta de recibir el contenido definitivo. Así, el texto puede
ser falso (como un latinajo "Lorem ipsum…) y las imágenes carecer de la resolución necesaria (ser de "baja
resolución" sólo para maquetar), pero el diseño y el documento no variarán salvo por el hecho de que el
texto tendrá sentido y las imágenes pasarán a tener la calidad necesaria para su impresión. Una maqueta
puede ser así una colección de modelos para producción (lo que en España se llama coloquialmente un
"monstruo" (dummy)) o un documento individual que sólo necesita ser editado para estar listo (ambos
son lay-out).
Ampliando el concepto, una maqueta es también un modelo tridimensional del objeto que va a ser impreso
(en España eso se suele llamar un "mono" (mock-up)). Por ejemplo: La maqueta de una caja
de embalaje puede presentarse sin plegar o acompañarse de un modelo ya cortado y plegado para que
el cliente y el impresor vean cómo debe quedar terminado. Ambos se pueden considerar "maquetas",
aunque la verdadera maqueta es el documento digital.
El término "maquetador" se suele usar expresamente para referirse al diseñador gráfico especializado en la
producción de maquetas para productos impresos multipágina, especialmente libros o prensa.
Protocolo
Un repaso por la etimología del término protocolo nos lleva de manera inmediata a protocollum, un vocablo
latino. Éste, a su vez, deriva de un concepto de la lengua griega. Lo concreto es que, en nuestro idioma, un
protocolo es un reglamento o una serie de instrucciones que se fijan por tradición o por convenio.
Versión beta
Es una versión de software que ha pasado la etapa de prueba interna, denominada “Alpha” y ha sido
lanzada a los usuarios para pruebas públicas. Beta del software suele ser un prototipo del producto final
destinado al lanzamiento público.
Por qué realizar diagramas, wireframes y maquetas antes de diseñar
una interfaz
El porqué de realizar estos métodos son para poder tener un mejor manejo del proyecto, ver
cómo se va realizando paso a paso, teniendo en consideración todas las funciones y aplicaciones
que se quieren manejar, se debe tener en cuenta para la presentación del mismo con el cliente, de
aquí podemos (a nuestro parecer) realizar la planeación de cómo se presentara el proyecto al
mismo.
También teniendo en cuenta las necesidades tanto del usuario (público en general) como del
cliente, podremos llevara a cabo la mejor planificación posible del proyecto para llevarlo a cabo de
la mejor manera posible.
Diagramas de flujo de una aplicación
Muestra el desarrollo de la aplicación de manera gráfica.
A continuación se muestra un ejemplo de un diagrama de flujo.
Wireframes de una pantalla de aplicación
Elemento de interfaz
La interfaz del programa, tal y como está después de instalado, tiene los siguientes elementos, enumerados
de arriba abajo.





El menú de la aplicación.
La barra de herramientas de acceso rápido.
La cinta de opciones.
El área de dibujo.
La barra de estados.
Cada una, a su vez, con sus propios elementos y particularidades.
Jerarquía de elementos de interfaz
El diseño de interfaces es el proceso de diseñar la representación física de la interfaz tal y como los usuarios
la verán en sus pantallas. El objetivo del diseño de interfaces visuales es comunicar una funcionalidad, y ésto
se consigue diseñando u ordenando los elementos visuales que mejor reflejen lo que hace nuestra
aplicación y como se puede operar con ella.
Crear el look and feel de un producto no es el primer objetivo del diseño de interfaces, es un componente
más de ése trabajo. El principal objetivo es la comunicación: comunicar para ayudar a los usuarios a
entender cómo funciona el producto.
Hay determinados elementos clave para el diseño visual. El diseño en éste caso consiste en seleccionar las
tipos apropiadas, calibrar cada elemento y después combinarlos todos de una manera que tenga sentido, y
podamos dar una facilidad de uso para las diferentes funcionalidades de nuestra aplicación.
Principales bloques del diseño visual de interfaces.
Maquetación y posicionamiento:
La maquetación proporciona estructura a todos los elementos de la interfaz. También define la jerarquía y por
tanto las relaciones entre los diferentes elementos.
Agrupar una serie de elementos y posicionarlos más juntos indica una relación entre ellos (por ejemplo
etiquetas debajo de iconos ).
El posicionamiento puede mejorar también el flujo visual. Por ejemplo posicionar las etiquetas encima de los
campos de texto en lugar de a la izquierda, permite al usuario una lectura más fácil y cómoda puesto que el
recorrido de los ojos será en vertical en lugar de zig-zag.
Forma y tamaño:
La forma se puede usar para diferenciar elementos. Por ejemplo modificando las siluetas de los iconos para
hacerlos más fáciles y rápidos de reconocer.
El tamaño también se puede usar para indicar importancia, siendo los elementos más grandes, los más
significativos.
También puede mejorar la usabilidad de los controles clickables (ley de Fitts, que dice que cuanto más grande
es un control, más rápido se puede manejar el mouse). Hacer los controles más habituales de nuestra
interfaz más grandes, facilitará la tarea de los usuarios y mejorará la eficiencia de la interfaz.
Color:
El color es útil para varios propósitos. Puede atraer la atención, por ejemplo mediante el contraste con el
color de fondo.
Puede expresar significado, por ejemplo el rojo y el verde. Uno significa peligro o parada mientras que otro
significa éxito o invitación a proceder. De ésta manera el rojo se reserva para los mensajes de error y viceversa.
El color también puede destacar relaciones, por ejemplo estableciendo un código con botones y barras de
herramientas para ayudar al usuario.
Habrá que tener en cuenta también las connotaciones culturales del color, y los tipos de discapacidades
relacionados con el color. Es decir no dejar que todo el significado de la interfaz se transmita por los colores,
porque algunas personas no lo distinguirán.
Contraste:
La tonalidad que tiene algo en relación a los elementos que le rodean, afectará a la usabilidad de la interfaz.
La clave es el contraste. Bajar el contraste de algunos elementos permitirá fundirlos con el fondo
permitiendo a los usuarios diferenciar entre los más importantes.
Textura:
Mediante la textura podemos comunicar funcionalidades. La utilización correcta de las texturas la cualidad
que comunica al usuario como algo está concebido para ser usado. Por ejemplo utilizar efecto de relieve para
los scrolls, o esquinas cuarteadas para las ventanas que se pueden cambiar de tamaño.
Herramientas para crear un wireframes
Mockingbird, Lovely Charts, Cacoo, Gliffy, Lumzy, Mockflow, Pencil Project, SimpleDiagrams, Denim,
Website y Wireframe
www.glosariografico.com/maqueta
http://definicion.de/protocolo/#ixzz3mx7Xm0eR
http://www.ehowenespanol.com/version-beta-hechos_256284/
http://www.aulaclic.es/autocad-2012/t_2_1.htm
http://desarrolloparaweb.blogspot.mx/2010/01/elementos-clave-para-el-diseno-visual.html
http://www.uxabilidad.com/usabilidad/10-herramientas-gratis-para-realizar-wireframes-online.html