PDF de programación - Diseño de Interfaz de usuario - Visual Studio 2005

DISEÑO DE INTERFAZ DEL USUARIO

VISUAL STUDIO 2005



www.s-ejecutive.com


Temario



1.

Introducción ............................................................................................................ 3

2. Diseño Web vs Diseño Tradicional ............................................................................ 4

3. Tecnologias tradicionales ......................................................................................... 6

4. Tecnologias web ......................................................................................................13

5. Reglas para diseñar interfaces de usuarios ..............................................................16

6. Tecnicas en el diseño de una interfaz grafica del usuario amigable .........................19

7. Consideraciones practicas en el diseño de una interfaz web ...................................20

8. Analisis de los usuarios y su entorno .......................................................................23

9. Análisis y diseño de la interfaz del usuario ..............................................................24

10. Temas de diseño .....................................................................................................26

11. Conclusiones ...........................................................................................................29

12. Introducción a Visual Studio ....................................................................................30



www.s-ejecutive.com



1.

Introducción general



El tema de las interfaces hombre maquina se han configurado como una de las áreas de
investigación críticas para el desarrollo de la sociedad de la información. No en vano, la interfaz de
usuario regula la interacción entre ambos elementos del sistema.

Esta interfaz tiene que ser amigable, la amigabilidad se refiere a su facilidad de uso. Esa facilidad
de uso es relativa al tipo de usuario; pero de una manera general podemos decir que una interfaz
es tanto más amigable cuanto más fácil de usar resulta para una mayor proporción de usuarios de
una población dada. Esta facilidad de uso está muy relacionada con otro concepto, el de
interactividad. Una interfaz es interactiva si dialoga con el usuario, si le proporciona feedback
comunicativo.

El diseño de la interacción toma prestados muchos conceptos y modelos de las disciplinas de
ergonomía, semiótica, inteligencia artificial, ciencia cognitiva y teatro.

La interfaz de usuario es un medio de comunicación entre una persona usuaria de un sistema
informático y este último, refiriéndose, en particular, al empleo de los dispositivos de entrada/salida
con software de soporte. Entre los ejemplos se pueden citar el uso de un ratón con gráficos en
mapa de bits y la utilización de ventanas.

Concepto de interfaz gráfica del usuario

Las interfaces de usuario han pasado por al menos 3 ciclos durante los últimos quince años: desde
la interfaz de texto, pasando por el interfaz gráfica de usuario, hasta llegar a la interfaz web y esta
tendencia continua avanzando rápidamente.

Las primitivas interfaces de usuario requerían que éste trabajase bajo las condiciones del
ordenador, se tenia que especificar cada acción y subrutina que el ordenador iba a ejecutar.

Se introdujeron, los iconos, las graficas. Dispositivos de entrada unidireccionales (teclado/raton).
Se empezaron a utilizar metáforas en el diseño (escritorio) y se creó el termino GUI. Hoy, se
producen resultados, tras la entrada de caracteres y un simple click con el ratón.

Los sistemas operativos, los navegadores, incorporan una serie de comandos y subrutinas que
permiten que un comando invoque muchas acciones, requieren un nivel alto de interaccion, lo que
no es viable sin las GUI.

La definición de una interfaz gráfica de usuario se ha ampliado considerablemente. En un primer
momento, eran menus e iconos en el ordenador, algo puramente funcional.

Actualmente, las interfaces de CD-ROM y WWW están salpicadas de interfaces gráficas de usuario
que se basan en la metáfora del documento y el escritorio, con páginas izquierda y derecha,
índices, portadas y otros elementos que intentan imitar el medio impreso.

Una interfaz grafica de usuario, es donde coinciden el diseño de la interacción y el de la interfaz.



www.s-ejecutive.com



2. Diseño Web vs Diseño Tradicional(Diseño de la interacción)



El diseño para la web es diferente del diseño tradicional de interfaces para software; principalmente
porque el diseñador de web tiene que dar el control y compartir la IU con los usuarios y con el
software/hardware del cliente.

También hay similitudes entre ambos diseños: al nivel más básico, ambos sistemas son
interactivos, son diseños de software y no son diseños de objetos físicos. En el diseño tradicional
de una interfaz gráfica de usuario (GUI), se puede controlar cada pixel de la pantalla: como
presentar una caja de dialogo, para que en todas las pantallas de los usuarios sean exactamente la
misma. Se sabe para qué un sistema se está diseñando, las fuentes de las letras que están
instaladas, el tamaño de la pantalla y se tiene la guía de estilo del vendedor que nos dice las reglas
para combinar las distintas interacciones. En la web, todos estos supuestos fallan. Los usuarios
pueden acceder a la web con ordenadores, una gran variedad, pero también podrían acceder
usando WebTV, teléfonos, tablets o incluso TV´s. en el diseño tradicional, la diferencia de tamaño
de pantalla entre un ordenador personal y un Workstation tiene un factor 6. En la web,
encontramos un factor 100 entre las pantallas de los teléfonos móviles y las workstations y un
factor aun mayor entre las diferentes velocidades de conexión (1000 entre módems y T-3)

Cualquier diseño web parecerá muy diferente en cada uno de estos dispositivos: claramente
WYSIWYG(lo que ves es lo que obtienes) está muerto. Cuanto mas especializado sea el
dispositivo o cuanto mas baja sea su gama, más estrictos serán los requerimientos para el web. La
única manera de hacer esto es que los diseñadores den el control y que dejen que la presentación
de sus páginas sea determinada por un conjunto de especificaciones de página y de preferencias
en el dispositivo del cliente.

Hacer un diseño de interfaz de usuario diferente para cada plataforma es bastante complicado. Es
recomendable separar significado y presentación y usar hojas de estilo para especificar la
presentación, pero haciendo mas hincapié en el contenido informacional que en las interacciones.
El diseño satisfactorio de cualquier tipo de interacción para el medio informático requiere equilibrar
la viabilidad tecnológica con la integridad del contenido.

Un buen elemento de interaccion tiene una construcción invisible y una interfaz grafica de usuario
eficaz. Un diseñador debe integrar el diseño de la interaccion en una estructura de contenido; sin
contenido, el diseño de la interacción es solo un desfile de formas parpadeantes.

Una interfaz gráfica de usuario, es donde coinciden el diseño de la interacción y el de la interfaz.
Una interfaz es sólo la manifestación visual de “inter” actividades; sólo es un aspecto del diseño d e
interacción, no el mismo diseño de la interacción.

Objetivos cambiantes

Una interfaz gráfica de usuario puede ser tan simple como un icono que parpadee o tan compleja
como unos grandes almacenes en internet. En un diseño tradicional de GUI, el diseñador puede
controlar todas las peticiones del usuario. Puede deshabilitar opciones de los menus en el estado
actual, decolorándolas- si aparecen con letra oscura, se ponen en gris claro-, y puede mostrar una
ventana de dialogo para que el usuario conteste cuestiones. En el web, el usuario controla su
navegación por las paginas. Puede tomar “caminos” no previstos por el diseñador: por ejemplo,
pueden “saltar” a cualquier pagina de un sitio web desde un motor de búsqueda sin haber pasado
por la pagina principal.

www.s-ejecutive.com





Los diseñadores de webs necesitan acomodarse a la navegación controlada por los usuarios. Por
supuesto, se puede forzar a los usuarios a pasar por ciertas páginas, antes de acceder a otras. Por
ejemplo, antes de descargar un programa se puede obligar al usuario a registrarse. Pero, para
evitar esa sensación de dominio, es mejor diseñarlo con libertad de movimientos y por ejemplo,
poner un logotipo(unido a la página principal) en cada pagina que proporciona el contexto y
navegación a los usuarios que han entrado al sitio web en cualquier pagina del mismo.

El factor costo



El factor costo aun cuando se encuentra al final de este modulo, viene siendo uno de los
principales factores a considerar pues son muy cambiantes los costos de desarrollo entre estos
ámbitos. Por un lado tenemos un diseño para GUI tradicional en el que una vez habiendo elegido
ésta tecnología debemos elegir entre una gran cantidad de opciones. Todas éstas vienen siendo
elementos que representan un costo considerable para el desarrollo, no obstante el costo de la
plataforma también debemos considerar la base de datos sobre la que trabajaremos; en este tenor
hay también una gran variedad de opciones con fluctuación considerable en costos.

En cambio si nos enfocamos o hemos decidido realizar una GUI en web el factor costo solo
afectará e