Diseo de Interfaz

Las interfaces grficas de Usuario hoy en da se desarrollan bajo estndares de usabilidad, pero este concepto deja fuera otras perspectivas tericas que son tan importantes como la usabilidad, estas son la percepcin visual la psicologa cognitiva, la semitica y la retrica de la imagen como actores importantes de la comunicacin y laidentificacin del usuario con el sitio.

Debemos tener en cuenta estos tres pilares:

UsabilidadNavegabilidadAccesibilidad

La fuerte masificacin del fenmeno internet, ha provocado en nuestra sociedad un cambio de los hbitos y conductas en relacin a cmo interactuamos con las dems personas y cmo reaccionamos con nuestro entorno. La lgica de la evolucin de la especie humana apunta a que mayor tecnologa mejor calidad de vida, ms simplificada y con ms tiempo disponible para realizar cualquier actividad recreacional que nos permita liberarnos del estrs diario, pero resulta que a veces las cosas no se dan en esa lgica, se nos impone un sistema donde hemos tenido que internalizar ms informacin, aprender a desenvolvernos en nuevos ambientes tecnolgicos y generar nuevos cdigos de comunicacin para lograr vincularnos con ms personas de diversas culturas.

Es en este contexto que internet como ente mediador de objetos de comunicacin nos presenta diferentes soportes de interfaces grficas de usuarios con fines distintos segn su uso, los que pueden ser: comerciales, educativos, de interaccin o presentacin, entretencin o simplemente como bitcoras de informacin; en consecuencia y sinimportar el uso que cada usuario da a internet, el punto de encuentro entre el hombre y la informacin es la interfaz grfica de usuario.

Las interfaz grfica de usuario aparece como el elemento de enlace entre los contenidos digitales y el usuario final a quien est dirigido el mensaje, pero esta mediacin en sus orgenes se basaba en una presentacin estandarizada y soportada por los cdigos de programacin, hoy en da los recursos informticos han permitido acercar la informacin de forma ms amigable a las personas, las computadoras dejaron de ser una ficcin, son parte de nuestro accionar diario, determinan nuestras actividades y pareciera que ya no podemos prescindir de ellas. Es aqu donde quiero exponer una idea acerca de los fenmenos que se producen en la interaccin humano computador y cmo cada vez sehumaniza ms las instancias de desarrollo informtico.

La Usabilidad por la Usabilidad

La usabilidad es un concepto que engloba a una serie de mtricas y mtodos que buscan hacer que un sistema sea fcil de usar y de aprender.Al hablar de sistema la referencia se hace a cualquier dispositivo que tenga que ser operado por un usuario. En esta categora caen los sitios web, aplicaciones de software, hardware, etc.

La definicin de usabilidad conforme a la norma ISO 9241, parte 11 dice: la usabilidad es el rango en el cual un producto puede ser usado por unos usuarios especficos para ]- apuntes1

alcanzar ciertas metas especificadas con efectividad, eficiencia y satisfaccin en un contexto de uso especificado . De hecho, la usabilidad no se limita a sistemas computacionales exclusivamente, sino que es un concepto aplicable a cualquier elemento en el cual se va a producir una interaccin entre un humano y un dispositivo.

En el caso de los sistemas de computadoras, la usabilidad va a abarcar desde el proceso de instalacin de la aplicacin hasta el punto en que el sistema sea utilizado por el usuario, incluyendo tambin el proceso de mantenimiento.

La usabilidad tiene cinco atributos definidos:

1. Facilidad de aprendizaje.

Cunto le toma al usuario tpico de una comunidad aprender la manera en cmo se usan los comandos relevantes a un conjunto de tareas? Se refiere a qu tan rpido el usuario va a aprender a usar un sistema con el cual no haba tenido contacto previamente. Este punto se refiere a la consecucin de tareas bsicas por parte de un usuario novato.

2. Velocidad de desempeo.

Cunto le toma a un usuario completar un grupo de tareas especficas (benchmark tasks)? Una vez que el usuario ha aprendido a utilizar el sistema, se va a ponderar el lograr la velocidad con que puede completar una tarea especfica.

3. Tasas de error por parte de los usuarios.

Cuntos y qu errores comete la gente al ejecutar un grupo de tareas especficas? Este apartado apunta hacia los errores cometidos por el usuario. Este atributo se refiere a aquellos errores que comete el usuario al utilizar el sistema. Una aplicacin ideal evitara que el usuario cometiera errores y funcionara de manera ptima a cualquier peticin por parte del usuario. En la prctica esto difcilmente se logra. Es vital que una vez que se produzca un error el sistema se lo haga saber rpida y claramente a los usuarios, le advierta sobre la severidad del mismo y le provea de algn mecanismo para recuperarse de ese error.

4. Retencin sobre el tiempo.

Qu tan bien recuerdan los usuarios la manera en cmo funciona el sistema despus de una hora, un da o una semana? Cuando un usuario ha utilizado un sistema tiempo atrs, y tiene la necesidad de utilizarlo nuevamente la curva de aprendizaje debe de ser significativamente menor que el caso del usuario que nunca haya utilizado dicho sistema. Esto es de primordial importancia para aplicaciones usadas intermitentemente.

5. Satisfaccin subjetiva.

Qu tanto le gustaron a los usuarios los distintos atributos del sistema? Este atributo se refiere a la impresin subjetiva del usuario respecto al sistema.

Se sugiere adems los siguientes atributos:

Control: Los usuarios deben sentir que tienen el control por sobre la aplicacin, y no al revs. ]- apuntes2

Habilidades: Los usuarios deben sentir que el sistema apoya, complementa y realza sus habilidades y experiencia - el sistema tiene respeto por el usuario.

Privacidad: El sistema ayuda a los usuarios a proteger su informacin o la de sus clientes.

Es muy importante sealar que los atributos antes mencionados van a tener una ponderacin acorde a la actividad que se quiera realizar con un sistema. Algunos sistemas darn una mayor importancia a ciertos atributos por sobre algunos otros. Todo depender de las caractersticas de la audiencia objetivo y de las circunstancias en las cuales se usar la aplicacin.

La usabilidad se refiere a la capacidad de un software o sistema interactivo de ser comprendido, aprehendido, usado fcilmente y atractivo para un usuario, en condiciones especficas de uso. Tambin es la efectividad, eficiencia y satisfaccin con la que un producto permite alcanzar sus objetivos especficos .

En usabilidad la mxima a seguir es hacer accesibles los contenidos a la mayor cantidad de pblicos posibles, logrndolo a travs de una simplificacin en el diseo de la interfaz.En resumen, los apologistas de Nielsen dirn no a los frames, no al uso de pelculas flash, no al uso de botoneras complejas, y en el enfoque alternativo se permitir un uso ms libre de la tecnologa, siempre y cuando sirva a los fines de comunicacin de los contenidos.

Y... Accesibilidad?

La accesibilidad est "de moda". Pero no nos engaemos. A pesar de todo, la web "siempre ha sido accesible". Sin un mnimo de accesibilidad y estndares, internet no sera lo que hoy conocemos. Pero ese mnimo basado en estadsticas de servidor no es suficiente: la era de Microsoft Explorer y el MacHTML llega a su fin.

El huracn Katrina en EE.UU. ha puesto de manifiesto la importancia de la accesibilidad: la informacin a los ciudadanos acerca de las tareas de rescate tena un sitio web: FEMA.

Este sitio web estaba diseado para Explorer 6, con lo que usuarios que utilizaban otros navegadores (Safari, Firefox) o plataformas (Mac OS, Linux) quedaban excluidos de informacin de vital importancia. Y mira que hay leyes obligando a ser accesibles.

Disear un sitio web accesible es relativamente sencillo si se parte de un mnimo de conciencia de lo que supone la web a nivel de servicio y se sigue un mnimo de metodologa y especializacin en el diseo, desarrollo y mantenimiento de sitios accesibles.

Conciencia: conocimiento del significado de Internet para la sociedad. Cultura de usuario real no ocasional y solidaridad a la hora de plantear el diseo de un sitio web. No es para el usuario de negocio, el diseador, no es para el desarrollador es para otras personas que muchas veces no conocemos.

Metodologa: Un sitio web es un servicio o un conjunto de servicios que tiene su razn de ser en los objetivos de su propietario y las necesidades de los usuarios. El diseo

]- apuntes3

centrado en el usuario tiene en cuenta el interfaz del sitio: desde su estructura, funcionamiento y apariencia hasta el cdigo con el que se construye.

Especializacin: el diseo centrado en el usuario es un proceso iterativo y contnuo. No se termina en un prototipo con una capa grfica o en unas plantillas HTML. Hay que garantizar que la integracin de esas plantillas en una plataforma se haga de manera cuidadosa y siguiendo unos estndares mnimos. Para ello es necesario equipos especializados y conocedores de las buenas prcticas de desarrollo front.

Asegura que todo el equipo es consciente de las implicaciones de un front cuidadosamente diseado y construido. Realiza controles una vez integrado y disea una poltica de mantenimiento de niveles de accesibilidad.

Etapas del diseo WebEstas son algunas etapas que se sugieren para disear eficientemente un sitio; es conveniente no comenzar a escribir ninguna lnea de cdigo HTML antes de completar las primeras etapas.

1. Delimitacin del temaEsta es la etapa crucial, se define de qu se va a tratar el Web, que cosas se incluirn y qu no. Tambin es el momento para definir tanto las audiencias (normalmente es mas de una) y los objetivos (intentando priorizar entre objetivos primarios y secundarios).Si no se evala adecuadamente la cantidad de tiempo que se dispone contra la cantidad de tiempo requerida para elaborar un sitio de la magnitud deseada, el resultado puede ser desastroso. Muchos proyectos Web fracasan porque comienzan a crecer y crecer sus especificaciones, sin que haya detrs un trabajo ordenado de delimitacin de contenidos.Obsrvese lo siguiente: la mayora de los sitios que son premiados con distinciones como "Lo mejor de ...", "La mejor pgina de la semana ...", "Top 5% del Web", son sitios que se dedican a temas muy especficos. La gente no quiere un montn de sitios que tengan referencias a otros lugares, la gente lo que busca es el contenido.

2. Recoleccin de la informacinEn esta etapa se recolecta la informacin que se va a poner en el Web, de acuerdo a la especificacin hecha en la etapa anterior. Es conveniente asociarse con alguien como un "proveedor de contenido", puesto que como mencion antes hay mucha gente que si bien le tiene aversin a los computadores y que dispone de valiossima e interesante informacin. Las organizaciones en general producen grandes cantidades de informacin, tambin en esta etapa hay que delimitar cuanta de la informacin histrica, que ya no es relevante, ser incluida en el sitio web, por ejemplo, se puede definir que la informacin de mas de 3 aos de antigedad no ser incluida, etc.

3. Inclusin y descripcinUna vez que tenemos la informacin que ir en el sitio, comenzamos una clasificacin apropiada . Aqu hay que encontrar un adecuado balance entre la linealidad y la jerarquizacin.Es importante aqu no centrarse en una nica forma de clasificar los documentos. Una serie de descriptos tienen que ser definidos. Ademas, un mismo documento puede pertenecer a varios valores de un mismo descripto. Si nos encontramos en esta etapa discutiendo sobre si un elemento de informacin va en una u otra parte, es que estamos cometiendo un error: debe ir en todas las partes donde un usuario razonable esperara encontrarlo. ]- apuntes4

4. EstructuracinEn este punto se estructura la manera en que se unen las diferentes pginas, de acuerdo a la agregacin de contenidos realizada en la etapa anterior. Se provee de ayudas para la navegacin, de enlaces que permitan la jerarquizacin que diseamos y de enlaces entre elementos de una misma jerarqua si se desea.

5. Diseo y estilo grficoUn estilo grfico adecuado puede ser algo importantsimo a la hora de hacer que la persona que nos visita se sienta cmoda, y como una manera de alivianar el contenido y hacerlo ms digerible. Un sitio por mas contenido que tenga si no tiene un buen diseo difcilmente lograra un lugar destacado entre otros sitios del mismo tipo.Otro punto importante en la etapa de definicin de la parte grfica, es intentar en lo posible mantener una cierta coherencia grfica, y atreverse a innovar en cuanto a ella.

7. Ensamble finalEn este punto concretamos el diseo, con los ltimos enlaces que sean necesarios e incorporamos el estilo grfico a las pginas, se ensambla el sitio con una portada que sea capaz de presentar en una sola pgina fsica al menos lo ms relevante del sitio, se instalan links hacia la pgina personal del autor y/o su direccin de correo electrnico.

8. TesteoFinalmente, es necesario revisar la coherencia general del sitio, que no hayan links "rotos" que no conduzcan a ninguna parte; revisar la redaccin y ortografa de las pginas, hacer los ajustes necesarios para separar las pginas que sean demasiado extensas en pginas ms pequeas.Para esta etapa, lo mejor es tratar de buscar usuarios que vayan a utilizar el sitio en la practica, y si eso no es posible, ponerse en el lugar de las personas que vean los documentos, y seguir los pasos que suponemos que ellos seguirn.

Mencionando algunos puntos importantes a tener en cuenta en medio de tods estos procesos:

El Eye Tracking http://www.useit.com/eyetracking/y la Organizacin de la Informacin http://bvs.sld.cu/revistas/aci/vol12_6_04/aci04604.htm

...vamos a trabajar con CSS, para que nos sirven.

1.- Separacin del contenido y presentacin.Las hojas de estilo generalmente se encuentran en archivos separados del cdigo principal (html, por ejemplo). Esto nos va a permitir que en un equipo de trabajo, programador y diseador puedan realizar sus tareas de forma independiente aunque paralela, sin correr el riesgo de que haya interferencias entre ambos, y ello no alterar el resultado final.

2.- Flexibilidad.Podramos comparar las hojas de estilo con la ropa que guardamos en nuestros cajones. Nosotros somos los mismos, pero dependiendo de la temporada variamos nuestra apariencia.

]- apuntes5

En el caso de las hojas de estilo sucede lo mismo: podemos cambiar en cualquier momento alguna parte o la totalidad del diseo de nuestras pginas con slo modificar nuestra hoja de estilo, sin que ello suponga modificar el contenido.

3.- Unificacin del diseo de las pginas del sitio.Un sitio web, ya sea dinmico o esttico, suele estar formado por unas cuantas pginas. Mantener una misma apariencia se puede volver una tarea pesada y tediosa si tenemos que copiar y pegar cdigo cada vez que creemos una pgina nueva, o que deseemos modificar una misma cosa en todas.

Enlazando a cada una de nuestras pginas nuestras hojas de estilo, agilizamos este proceso y minimizamos el trabajo.

4.- Optimizacin de los tiempos de carga y de trfico en el servidor.Al haber dividido contenido y apariencia obtenemos archivos ms ligeros, y esto nos reporta dos beneficios: por un lado, reducimos notablemente los tiempos de carga del sitio en el navegador. A esto debemos unir la capacidad de ste para mantener nuestra hoja de estilo en cach.

Por otro lado, reducimos el volumen de trfico de nuestro servidor, que siempre es de agradecer, tanto si disfrutamos de servicios gratuitos en que solemos tener cuotas muy reducidas, como si pagamos por tener alojamiento propio.

5.- Precisin o elasticidad.Desde el momento en que usemos CSS, el tamao y posicionamiento de los elementos que formen nuestras pginas podr ser exacto. Podremos indicarle al navegador en qu pxel debe colocar sta o aqulla imagen, o qu alto y ancho deber mostrar.

Pero al mismo tiempo, podremos emplear medidas variables o relativas que nos permitan expandir el contenido hasta ocupar la totalidad de la ventana de navegacin a nuestro antojo, o contraerla a slo una parte de la misma, con independencia de la resolucin de pantalla del usuario.

6.- Accesibilidad y estructuracin.La combinacin de CSS y marcadores descriptivos va a posibilitar que nuestra pgina se vea correctamente con o sin hoja de estilos, puesto que en cualquier caso, la informacin se mantendr estructurada y ordenada.

Esto supone que podr ser accesible sin ningn tipo de problemas tanto por navegadores antiguos o sin soporte para CSS, como para personas con algn tipo discapacidad.

7.- Limpieza del cdigo fuente.Si escribimos una hoja de estilo independiente, el cdigo fuente de nuestra web va a resultar menos farragoso y agilizaremos las tareas de localizacin de las lneas que busquemos.

8.- Compatibilidad y continuidad.Las reglas establecidas por la especificacin CSS-1 fijaron los estndares del diseo, y se mantienen y respetan en la CSS-2. Es de prever que en el nivel 3 suceder lo mismo con respecto a su predecesor.

]- apuntes6

Pero lo realmente interesante es que los navegadores que no soporten CSS-3 no tendrn problemas a la hora de asimilar el contenido CSS puesto que siempre les quedar la compatibilidad de CSS-2, o la CSS-1 en su caso. La compatibilidad de las especificaciones CSS anteriores estar siempre garantizada.

9.- Estandarizacin frente a especificaciones propietarias.La adopcin de estndares por la W3C ofrece la ventaja de la compatibilidad del cdigo entre los diferentes navegadores web. El uso de soluciones propietarias, como es el caso de muchas etiquetas o patrones usadas por Microsoft.

En su interpretacin de lo que es y no es CSS, dificulta la creacin de pginas web, porque supone tener que escribir dos cdigos distintos para obtener un mismo resultado, en funcin del tipo de navegador que use el visitante.

El uso del estndar CSS de la W3C evitar visualizaciones incorrectas de nuestras pginas en distintos navegadores.

10.- Permite la diferenciacin de estilos para imprimir / visualizar en pantalla.El uso de CSS nos va a permitir tambin maquetar separadamente el contenido de nuestra web para ser mostrado en pantalla o para ser impreso.

Tengamos en cuenta que las necesidades y propiedades de un folio de papel y de un monitor nunca van a ser las mismas, y gracias a CSS podremos determinar cmo queremos que se imprima lo que mostramos en la pantalla, manteniendo siempre una apariencia limpia, ordenada y agradable visualmente.

Hay que disear webs medibles, optimas y con un buen toque de Diseo. Un diseador grfico con un fuerte manejo web, tiene las de ganar, entre un desarrollador y un programador web, sepamos usarlo a favor y no en contra.

El diseador Grfico NO es un diseador web

La Ctedra

]- apuntes7