Está en la página 1de 270

DISEO WEB

UNIDAD 1 INTRODUCCIN Y PRINCIPIOS DE ESTILO

Catedrtico: Ing. Manuel Vergel Escamilla


Correo: manuel_vergel@hotmail.com
Villahermosa, Tabasco, Mxico. 2014

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1 INTERFAZ
Cuando se habla de Sitios Web, se denomina interfaz al conjunto de
elementos de la pantalla que permiten al usuario realizar acciones sobre
el sitio web que est visitando. Por lo mismo, se considera parte de la
interfaz a sus elementos de identificacin, de navegacin, de contenidos
y de accin.

Source: Programacin en Basic .Net


Luis Miguel Blanco

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


Etimolgicamente la palabra interfaz es una palabra compuesta, Inter
proviene del latn, y significa, entre o en medio, y Faz proviene del
latn facies, y significa superficie, vista o lado de una cosa. Por lo tanto
una traduccin literal del concepto de interfaz atendiendo a su
etimologa, podra ser superficie, vista, o lado mediador.

Source: ALLIEY, A. M. (2009). DISEO DE LA INTERFAZ GRAFICA WEB EN FUNCION


DE LOS DISPOSITIVOS MOVILES. BUENOS AIRES: DGSCA, UNAM.

EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


En el contexto de la interaccin persona-ordenador, hablamos de
interfaz de usuario, para referirnos de forma genrica al espacio que
media la relacin de un sujeto y un ordenador o sistema interactivo. El
interfaz de usuario, es esa ventana mgica de un sistema informtico,
que posibilita a una persona interactuar con l.
El interfaz de usuario, es esa ventana mgica de un sistema
informtico, que posibilita a una persona interactuar con l.

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


EJEMPLOS DE INTERFACES

Source: INTERFAZ DE WII U, WINDOWS 8 Y NEED FOR SPEED


MANUEL VERGEL ESCAMILLA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


Basada en la opinin de Bonsiepe, Ana Milagro menciona que La
interface vuelve accesible el carcter instrumental de los objetos y el
contenido comunicativo de la informacin.

Concluye diciendo que la interface hace posible la accin eficaz para


una determinada tarea, siendo el tema principal del diseo.

Source: ALLIEY, A. M. (2009). DISEO DE LA INTERFAZ GRAFICA WEB EN FUNCION


DE LOS DISPOSITIVOS MOVILES. BUENOS AIRES: DGSCA, UNAM.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


Cuando hablamos de interfaz grfica de usuario, el concepto es an ms
especfico en cuanto que interfaz grfico de usuario al contrario que el
concepto de interfaz tiene una localizacin determinada y definida: Si
el interfaz etimolgicamente supone la cara o superficie mediadora, el
interfaz grfico de usuario, supone un tipo especfico de interfaz que
usa metforas visuales y signos grficos como paradigma interactivo
entre la persona y el ordenador.

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


Segn Lizbeth Luna la interfaz
grfica de usuario son todos
los elementos grfico que nos
ayudan a comunicarnos con
un sistema.

Source: GONZALEZ, L. L. (2004). EL DISEO DE INTERFAZ GRAFICA DE USUARIO


PARA PUBLICACIONES DIGITALES. DGCA, UNAM.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


Para Jess Nio, la interfaz es la forma en que el usuario se comunica con
el sistema operativo.
Este autor la divide en dos tipos:
1. Modo texto: consiste en comunicarse mediantes comandos.
2. Modo grfico: es la forma de comunicarse por medio de botones,
iconos y ventanas.

Source: NIO, J. (2004). SISTEMAS OPERATIVOS MONOPUESTO, INFORMATICA Y


COMUNICACIONES. MCGRAW HILL.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.1 QU ES UNA INTERFAZ?


INTERFAZ MODO TEXTO Y MODO GRFICO

a) Modo texto

b) Modo Grfico
Source: NIO, J. (2004). SISTEMAS OPERATIVOS MONOPUESTO, INFORMATICA Y
COMUNICACIONES. MCGRAW HILL.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
Ana Milagro menciona que el motivo de su nacimiento est basado en la
bsqueda de un mtodo de interaccin amigable con los ordenadores,
que superase la interfaz de lnea de comandos.

Source: ALLIEY, A. M. (2009). DISEO DE LA INTERFAZ GRAFICA WEB EN FUNCION


DE LOS DISPOSITIVOS MOVILES. BUENOS AIRES: DGSCA, UNAM.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
La interfaz, nace en el ao 1973 en
el centro de investigacin Xerox
Alto, donde se parte con el objetivo
bsico de encontrar un modelo
ptimo de interaccin personaordenador.

Equipo de Xerox
Source: ALLIEY, A. M. (2009). DISEO DE LA INTERFAZ GRAFICA WEB EN FUNCION
DE LOS DISPOSITIVOS MOVILES. BUENOS AIRES: DGSCA, UNAM.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
El autor Carlos Marrero dice que desde los aos cuarenta, se haba
trazado de forma terica, modelos de ordenadores personales que
deban servir para almacenar, editar y compartir informacin de forma
sencilla. No fue hasta la llegada de los aos setenta, cuando se empez a
trabajar en el desarrollo de dicho modelo interactivo y se formalizaran los
primeros modelos de ordenadores personales como elementos
multimedia, capaces de representar informacin textual y visual, dando
la posibilidad de interactuar con ella de forma amigable.

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
Carlos Marrero menciona que Alan Kay, matemtico y bilogo
molecular, fue otro de los investigadores que hizo aportaciones al
contexto de la informtica y especialmente a la interfaz grfica de
usuario. Sus aportaciones estn relacionadas con el lenguaje orientado a
objetos, Smaltalk, desarrollado en el centro de investigacin Xerox Parc,
uno de los fundamentos tecnolgicos que posibilitara la posterior
implementacin de una interfaz grfica de usuario basada en la
representacin de iconos. Parte de estas investigaciones daran lugar a la
primera interfaz grfica de usuario.
Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION
SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
En el ao 1973, de mano del centro de
investigacin Xerox Parc 65 nacera el primer
ordenador que incluira la primera interfaz
grfica de la historia. El Xerox Alto sera
diseado por un equipo formado por Ed
McCreight, Chuck Thacker, Butler Lampson,
Bob Sproull, y Dave Boggs.

Equipo Xerox Parc 65


Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION
SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
El Xerox Alto posea una interfaz grfica rudimentaria
en blanco y negro, con la que se poda interaccionar
con un ratn. Los botones serian presentados a travs
de formas textuales, de un modo muy simple. No fue
implantado ningn sistema de ventanas en este
modelo. La interfaz grfica no presentaba elementos
icnicos, ni pestaas, ni barras de desplazamiento en
la navegacin de la informacin.
Equipo de Xerox Alto

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
El segundo periodo de la evolucin histrica de las interfaces graficas
est unido a la revolucin de los ordenadores personales surgida en el
ao 1981. Para interfaz grfica, este periodo significa su implementacin
definida en los hogares y oficinas de trabajo.
A partir del ao 1981 se produce el despliegue industrial definitivo de
la venta de ordenadores personales y su implantacin definitiva en
todas las esferas de la infraestructura social de los pases desarrollados.

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.2 EVOLUCIN DE LA INTERFAZ DE


USUARIO (IU)
Se introduce el ordenador personal en
el mercado (PC), y su xito estar en
gran parte condicionado por la
capacidad de la interfaz grfica de
facilitar la interaccin con los
ordenadores.

Equipo PC
Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION
SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


La interfaz grfica de usuario,
desde el lado del objeto, es ms
que el dispositivo de un sistema
informtico, un rea funcional tan
importante como por ejemplo ser la
carrocera si se tratase de un coche.

Equipo Xerox Star


Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION
SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Un sistema necesita normalmente varios
mecanismos para accionar, funcionar, e
interrelacionarse con el entorno, desde un punto
de vista sintctico la interfaz grfica de usuario,
no es ms que una parte del sistema, desde la
cual es posible realizar cambios sobre ste.

Promocional Xerox 8010

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Por lo tanto el anlisis sintctico de la interfaz, nos aleja de la definicin
conceptual y nos acerca a la realidad objetual de la interfaz, como parte
fsica del sistema informtico.
Desde esta perspectiva, la interfaz grfica, tiene peso, medidas,
localizacin fsica, limitaciones tecnolgicas y propiedades, que habra
que analizar y describir.

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


La interfaz es un dispositivo fsico, que como tal, exige por parte del
usuario, una serie de condicionantes fisiolgicas y supone, el uso de
dispositivos que permitan poner en contacto al sujeto con el sistema
tecnolgico.
Estos dispositivos, que sern reseados ms adelante, son los llamados
dispositivos de interfaz humano, como el ratn o el teclado, dispositivos
que permiten a travs de las posibilidades fisiolgicas del sujeto,
producir parte de la interaccin con la interfaz grfica de usuario y por
lo tanto, parte fundamental de la misma.
Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION
SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Los signos necesitan al menos dos condiciones bsicas para poder
funcionar como tales, por un lado un soporte donde poder manifestarse
(un medio o canal a travs del cual los signos pueden circular y
manifestarse), y por otro lado una persona capaz de interpretar y dotar
de sentido dichos signos. Para ello es necesario la existencia de una
superficie fsica, un medio fsico.

Source: EXPOSITO, C. M. (2004). INTERFAZ GRAFICA DE USUARIO APROXIMACION


SEMIOTICA Y COGNITIVA.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Cuando hablamos de rea fsica y rea simblica, estamos,
hablando, de algn modo, de dos dimensiones reconocibles que tiene
cualquier artefacto, esto es, su dimensin fsica de soporte (en un cuadro
es el lienzo, en una pelcula es el negativo, etc.) y su dimensin
simblica, que es aquella que hace referencia al significado concreto
que es interpretado por un sujeto, capaz de percibir, decodificar y
entender los signos inscritos en el medio fsico.

Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA


(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Debido a su enorme penetracin, la primera idea que viene a la mente
al pensar en una computadora, es quizs la computadora personal (de
escritorio o porttil) en la cual la interaccin se da a travs de
dispositivos como el teclado, el ratn y la pantalla. Estos dispositivos
son las interfaces fsicas de la computadora.

Source: INCERAD., J. (s.f.). NUEVAS INTERFACES Y SUS NUEVAS APLICACIONES EN


LA TECNOLOGIA DE LA INFORMACION Y COMUNICACIONES. MEXICO :
INSTITUTO TECNOLOGICO AUTONOMO DE MEXICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Debido a la importancia y sofisticacin de nuestro sentido de la vista, las
pantallas (o unidades de desplegado visual) son la interfaz ms comn
para desplegado de informacin en las computadoras actuales y en una
gran cantidad de dispositivos electrnicos como telfonos mviles,
agendas personales, cmaras fotogrficas y consolas de videojuegos.

Source: INCERAD., J. (s.f.). NUEVAS INTERFACES Y SUS NUEVAS APLICACIONES EN


LA TECNOLOGIA DE LA INFORMACION Y COMUNICACIONES. MEXICO :
INSTITUTO TECNOLOGICO AUTONOMO DE MEXICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE


Existe un avance importante en las tecnologas utilizadas para la
fabricacin de pantallas, desde los cinescopios con tubos de rayos
catdicos, hasta las actuales pantallas de cristal de cuarzo lquido y de
plasma. Sin embargo, estos dispositivos presentan algunas limitaciones,
particularmente en los mbitos del cmputo mvil y ubicuo, debido a su
fragilidad, consumo de energa y tamao de la pantalla.

Source: INCERAD., J. (s.f.). NUEVAS INTERFACES Y SUS NUEVAS APLICACIONES EN


LA TECNOLOGIA DE LA INFORMACION Y COMUNICACIONES. MEXICO :
INSTITUTO TECNOLOGICO AUTONOMO DE MEXICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.3 INTERFAZ DE HARDWARE

Aplicacin de la Ergonoma

La ergonoma es la ciencia que estudia cmo


adecuar la relacin del ser humano con su
entorno. Una de sus ramas, la ergonoma
fsica, estudia las posturas ms apropiadas
para realizar las tareas del hogar y del
puesto de trabajo, para el manejo de cargas
y materiales y para los movimientos
repetitivos, entre otros aspectos.
Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA
(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Cuando los seres humanos y los
ordenadores interactan lo hacen a
travs de un medio o interfaz, que es el
punto en el que seres humanos y
ordenadores se ponen en contacto,
transmitindose
entre
ambos
componentes del sistema informacin:
rdenes, seales, y respuestas.
Interaccin del usuario con el IPAD
Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA
(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Para que un sistema interactivo cumpla sus objetivos su interfaz tiene
que ser usable y, adems, debido a la generalizacin del uso de los
ordenadores, accesible a la mayor parte de la poblacin humana.
Los especialistas en Ergonoma del Software han acuado dos
neologismos para medir la adecuacin de una aplicacin a las
capacidades y limitaciones de los usuarios: la Usabilidad y la
Accesibilidad.

Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA


(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE FOTWARE


Satisfaccin
Es la percepcin de agrado y actitud positiva hacia el uso del producto.
Es decir, cul es la percepcin del usuario frente a la facilidad de uso
del producto?

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE FOTWARE


Accesibilidad
Es el grado en el que todas las personas pueden utilizar un o visitar un
lugar o acceder a un servicio, independiente de su capacidades fsicas,
cognitivas y tcnicas. Relacionado a Internet se refiere a qu tan apto se
encuentra contenido de un sitio para ser interpretado por todos los
usuarios independientemente de sus limitaciones
fisiolgicas y
tecnolgicas.

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE FOTWARE


Accesibilidad web.
Segn la oficina espaola de la W3C (World Wide Web Consortium) la
accesibilidad es:
Acceso universal a la Web, independientemente del tipo de hardware,
software, infraestructura de red, idioma, cultura, localizacin geogrfica y
capacidades de los usuarios.

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Usabilidad
Facilidad con que las personas pueden utilizar una herramienta u objeto
fabricado por otras personas con el fin de alcanzar un objetivo en
concreto. En el diseo Web, se refiere exclusivamente a que tan
beneficiosa es la experiencia de uso de una interfaz grfica interactiva.

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Facilidad de aprendizaje: define en cunto tiempo un usuario, que
nunca ha visto una interfaz, puede aprender a usarla bien y realizar
operaciones bsicas.
Facilidad y Eficiencia de uso: determina la rapidez con que se pueden
desarrollar las tareas, una vez que se ha aprendido a usar el sistema.
Facilidad de recordar cmo funciona: se refiere a la capacidad de
recordar las caractersticas y forma de uso de un sistema para volver a
utilizarlo a futuro.
Source: GOBIERNO DE CHILE MINISTERIO SECRETARA GENERAL DE GOBIERNO
GUA PARA DESARROLLO DE SITIOS WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Frecuencia y gravedad de errores: plantea el apoyo que se le entrega a
los usuarios para apoyarlos cuando deban enfrentar los errores que
cometen al usar el sistema.
Satisfaccin subjetiva: indica lo satisfechos que quedan los usuarios
cuando han empleado el sistema, gracias a la facilidad y simplicidad de
uso de sus pantallas.

Source: GOBIERNO DE CHILE MINISTERIO SECRETARA GENERAL DE GOBIERNO


GUA PARA DESARROLLO DE SITIOS WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


La relacin entre accesibilidad y usabilidad es un tema ampliamente
discutido, no obstante, la usabilidad es una caracterstica que depende
fundamentalmente del contexto y los usuarios involucrados; mientras que
la accesibilidad plantea un reto mucho ms amplio y tiene una
orientacin a abarcar la mayor parte de usuarios y condiciones
posibles.

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 DISEO WEB


EJEMPLOS

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


EJEMPLOS

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


EJEMPLOS

Source: RICARDO CASTILLO


RESPONSIBE WEB DESIGN DISEO WEB ADAPTATIVO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


La Usabilidad de un sistema es una medida de su utilidad, facilidad de
uso, facilidad de aprendizaje y apreciacin del usuario para una tarea,
un usuario y un contexto dado. Es fundamental seguir principios
ergonmicos para minimizar la carga cognoscitiva en el operador. Una
aplicacin usable es la que permite que el usuario se concentre en su
tarea y no en la aplicacin.

Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA


(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Interfaz de Software: Encargada de la interpretacin de cdigos y de
las seales de control.
Source: ROMERAL, J. L., & JOSEP, B. (1997). AUTOMATAS PROGRAMABLES.
MARCOMBO.

La interfaz de usuario ms popular consiste en la representacin grfica


de programas como iconos seleccionados a travs del ratn que se
ejecutan en ventanas desplegadas en la pantalla de la computadora.

Source: INCERAD., J. (s.f.). NUEVAS INTERFACES Y SUS NUEVAS APLICACIONES EN


LA TECNOLOGIA DE LA INFORMACION Y COMUNICACIONES. MEXICO :
INSTITUTO TECNOLOGICO AUTONOMO DE MEXICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Los comandos y opciones de los programas pueden ser seleccionados a
travs de mens dispuestos en secciones especficas de las ventanas.
Esta interfaz, conocida comnmente como WIMP (Windows iconsmouse-pointer), ha sido sumamente exitosa por ms de 20 aos, un
perodo sorprendentemente largo cuando se habla de TICs.

Source: ROMERAL, J. L., & JOSEP, B. (1997). AUTOMATAS PROGRAMABLES.


MARCOMBO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


La longevidad de las interfaces WIMP se debe, entre otros, a dos factores
principales. La abstraccin permiti que la computadora pudiera ser
utilizada prcticamente por cualquier persona sin tener que ser experta
en computacin; se trata de una interfaz centrada en el usuario.

Source: INCERAD., J. (s.f.). NUEVAS INTERFACES Y SUS NUEVAS APLICACIONES EN


LA TECNOLOGIA DE LA INFORMACION Y COMUNICACIONES. MEXICO :
INSTITUTO TECNOLOGICO AUTONOMO DE MEXICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


La Serie ISO/IEC 9126, considera que Usabilidad, se refiere a la
capacidad con la que un producto puede ser comprendido, aprendido,
utilizado y ser atractivo para el usuario, en condiciones especficas de
uso. Por lo tanto, la usabilidad depende no slo del producto sino
tambin del usuario, en tanto que un producto no es en ningn caso
intrnsecamente usable pues slo tendr la capacidad de ser usado en
un contexto particular y por usuarios particulares.

Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA


(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


En la primera parte, la norma define un modelo de calidad de los
programas establecido de acuerdo a la funcionalidad,
fiabilidad,
eficiencia, mantenimiento, movilidad y modos de uso. En particular remite
a
un conjunto de atributos relacionados con el aprendizaje, la
comprensin y la operatividad, especficamente con el esfuerzo
necesitado para el uso y la valoracin individual de tal uso establecido
por un conjunto de usuarios.

Source: RODRIGUEZ, S., & DIAS, Z. (s.f.). INTRODUCCION A LA INFORMATICA


(CODIGO 116)- GUIA INSTRUCCIONAL. CARACAS,VENEZUELA:
UNIVERSIDAD NACIONAL ABIERTA. .

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


La usabilidad es uno de los
componentes para que un sitio sea
exitoso y forma parte de la analoga
del iceberg en el que aparecen
tambin la calidad del contenido, la
accesibilidad,
el mantenimiento
efectivo y la optimizacin de los
buscadores, entre otros aspectos.
Source: D, R. (s.f.). INTERFACES GRAFICAS DE USUARIOS - ESTUDIO DE UNA GUIA
PARA LA EVALUACION ERGONIMICA. MENDOZA: UNIVERSIDAD NACIONAL
DE CUYO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Esta analoga permite saber lo que hay atrs de la creacin de una
pgina web, no solamente lo que ve en la red el usuario final. La
usabilidad lleg con la innovacin del diseo para internet y con sta
aparecieron programas de cmputo para crear fcilmente un sitio
usable. Todos los programas permiten de una forma rpida realizar
pginas interactivas. A estos sistemas se les ha llamado gestores de
contenido

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Nielsen (2003a) plantea diez (10) principios bsicos, que ya son
paradigmticos en estas prcticas:
1. VISIBILIDAD DEL ESTADO DEL SISTEMA, para informar a los
usuarios permanentemente sobre lo que est pasando en cada
momento.
2. CONEXIN ENTRE EL SISTEMA Y EL MUNDO REAL, para
hablar el lenguaje transparente de los usuarios y no emplear
lenguajes propios.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


3. CONTROL Y LIBERTAD POR PARTE DEL USUARIO, para facilitar
siempre opciones de salida y movilidad al usuario
4. CONSISTENCIA Y ESTNDAR, consistencia y estndar, para evitar
que el usuario no encuentre distintas palabras, situaciones o acciones
que signifiquen lo mismo.
5. PREVENCIN DE ERRORES, para evitar que un problema aparezca
por primera vez.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


6. FLEXIBILIDAD Y
EFICIENCIA DE USO, para introducir
aceleradores en la interaccin con el usuario que
sern
normalmente utilizados por usuarios avanzados.
7. DISEO ESTTICO Y MINIMALISTA, para evitar informacin
redundante y presentar slo informacin que sea relevante y
necesaria.
8. AYUDA PARA RECONOCER, DIAGNOSTICAR Y RECUPERAR AL
USUARIO DE ERRORES, para presentar mensajes de error con
lenguaje llano indicando el problema y sugiriendo una solucin de
forma constructiva.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


9. AYUDA Y DOCUMENTACIN, para proveer de asistencia y
documentos de forma simple y concisa (aunque lo aconsejable es
que un sistema sea utilizado lo ms intuitivamente posible, sin
documentacin accesoria).
10.RECONOCIMIENTO ANTES DE VOLVER A REITERAR o
completar tareas, para evitar que el usuario tenga que recordar
informacin de una parte del dilogo en otra

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Realizar una estructura con toda la informacin y elementos
recopilados. Es recomendable realizar un boceto para poder visualizar
de manera ms clara todos los elementos que se incluirn (texto,
imgenes, botones, hipervnculos), no olvidar los bocetos de las pginas
con las que estar enlazada.

Source: GABRIELA BUSTOS ROJO (2012).


TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


La interfaz de usuario de una aplicacin Web, es lo que causa
la primera impresin de dicha aplicacin. Aunque la
aplicacin tenga un valioso contenido y ofrezca sofisticados
servicios y funcionalidades, si el diseo de su interfaz es pobre
no ser utilizada por los usuarios finales.

Source: RAFAEL ALVAREZ CUERVO, J. R. (2005). INTRODUCCION AL DISEO


PARAMETRICO CON AUTODESK MECHANICAL DESKTOP. EDIUNO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE


Experiencia de Usuario:
disciplina que se dedica a estudiar la manera en que las
personas usan las interfases y a mejorar la usabilidad de los
sistemas para aumentar su satisfaccin general.

Source: GOBIERNO DE CHILE MINISTERIO SECRETARA GENERAL DE GOBIERNO


GUA PARA DESARROLLO DE SITIOS WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE

FACETAS DE LA EXPERIENCIA DEL USUARIO


Facetas de la Experiencia del Usuario
til: Es necesario preguntarnos si nuestros productos y sistemas son
tiles, y aplicar nuestro conocimiento para definir soluciones
innovadoras que apoyan la utilidad.
Usable: Corresponde a la facilidad de uso o Usabilidad sigue siendo
un aspecto fundamental, necesario pero no suficiente, por lo que se
debe complementar con las dems facetas.

Source: GOBIERNO DE CHILE MINISTERIO SECRETARA GENERAL DE GOBIERNO


GUA PARA DESARROLLO DE SITIOS WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE

FACETAS DE LA EXPERIENCIA DEL USUARIO


Deseable: Si bien los sitios deben ser eficientes, en particular con el
uso de medios ms complejos (imgenes, sonidos, animaciones), esto
se debe equilibrar con los dems valores del diseo emocional.
Encontrable: Los Sitios Web deben ser navegables y permitir que los
usuarios puedan encontrar lo que necesitan.
Accesible: Los Sitios Web deben ser asequibles a las personas con
discapacidades (ms de 10% de la poblacin). Para los Sitios Web de
Gobierno ya es un requisito normativo.
Source: GOBIERNO DE CHILE MINISTERIO SECRETARA GENERAL DE GOBIERNO
GUA PARA DESARROLLO DE SITIOS WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.1.4 INTERFAZ DE SOFTWARE

FACETAS DE LA EXPERIENCIA DEL USUARIO


Creble: La credibilidad es uno de los factores ms importantes de
tener en cuenta y por ello se deben revisar los elementos de diseo
afectan la confianza que nos tienen los usuarios.
Valioso: Las facetas ayudan a determinar los aspectos que llevan a que
nuestros sitios ofrezcan valor para nuestros usuarios.

Source: GOBIERNO DE CHILE MINISTERIO SECRETARA GENERAL DE GOBIERNO


GUA PARA DESARROLLO DE SITIOS WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


Directriz: es una frase corta de no ms de dos renglones que en forma
muy clara y concreta, transmite informacin sobre la pauta a cumplir.
Ejemplo: Diferencie claramente los vnculos visitados de los vnculos
sin visitar.

Impacto: es una escala de 1 a 5 que mide la importancia del


cumplimiento de la directriz, donde 1 significa menor impacto y 5
significa una directriz de gran impacto en la facilidad de uso de un sitio
web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


Una directriz en el mbito de la usabilidad es un conjunto de
instrucciones cuyo objetivo es orientar en la creacin de sitios web
eficaces, efectivos y satisfactorios para los usuarios. Aunque son de
obligatorio cumplimiento, tienen la caracterstica particular de que
dependern del contexto de uso, es decir, de las caractersticas
particulares en que el usuario desarrollar su tarea.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


BENEFICIOS DE UN SITIO WEB USABLE

1. Disminucin de los costos de produccin: Los tiempos y costos


de desarrollo pueden ser reducidos, evitando rediseos y
minimizando los cambios en posteriores fases.

2. Reduccin de los costos de soporte y mantenimiento: Los sitios


web fciles de usar requieren menos mantenimiento, entrenamiento
y soporte.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


BENEFICIOS DE UN SITIO WEB USABLE

3. Disminucin de los costos de uso: La usabilidad aplicada a sitios


web disminuye el esfuerzo y permite a los usuarios disponer de una
variedad msamplia de tareas. Mientras que los sistemas difciles de
usar reducen el bienestar, la salud y la motivacin.
4. Reduccin de los costos de aprendizaje: Un sitio web usable est
organizado de manera que se adapta de forma ideal al modelo
mental de sus usuarios, reduciendo de esta forma el tiempo
necesario para su aprendizaje.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


BENEFICIOS DE UN SITIO WEB USABLE

5. Aumento en las ventas. Un sitio web ms usable permite un mejor


marketing debido a la mejor imagen del propio sitio. Por ser ms
comprensible es ms vendible.
6. Menor soporte al cliente: Los sistemas usables son ms fciles de
aprender y de usar, comportando un menor costo de implantacin y
de mantenimiento.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


BENEFICIOS DE UN SITIO WEB USABLE

5. Usuarios ms satisfechos: cuando un usuario ha realizado su tarea


con el mnimo de esfuerzo posible, el sitio tendr como resultado
directo la satisfaccin de los usuarios.
6. Fidelidad en los usuarios: un sitio usable incrementa la posibilidad
de un mayor uso, tanto en frecuencia como en cobertura de
funcionalidades usadas y pginas web vistas.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

CASO REAL DE LA APLICACIN DE LA USABILIDAD


Caso IBM: incremento en ventas del 400%
En abril de 1999, la prestigiosa revista InfoWorld present un informe
(Battery, 1999) donde mostraba cmo el sitio web de IBM, con un
tamao de ms de 1 milln de pginas internas tena graves problemas de
navegacin. Luego de ser rediseadas 150 mil pginas internas y
contemplando criterios de usabilidad, el sitio increment el trfico en
120% y las ventas en un 400%.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

CASO REAL DE LA APLICACIN DE LA USABILIDAD


Caso La Caixa: nmero de acceso triplicado.
En el ao 2002, la entidad financiera La Caixa (Espaa) redise su
intranet, con el fin de mejorar su productividad. A partir de un modelo
de Diseo Centrado en el Usuario (DCU), los profesionales de
usabilidad lograron triplicar el nmero de acceso de los empleados,
generando as un notable incremento en el nmero de transacciones
realizadas.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

CASO REAL DE LA APLICACIN DE LA USABILIDAD


El Acuario de Georgia: 70% de entradas vendidas a travs de la
web.

A travs del sitio web www.georgiaaquarium.org, el Acuario de Georgia


vende en lnea un promedio del 70% de todos los billetes, cifra lo
suficientemente elevada teniendo en cuenta el promedio de venta de
entradas en lnea en acuarios y zoolgicos de los Estados Unidos: 8 10%.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


ARQUITECTURA DE LA INFORMACIN (AI)

El trmino "Arquitectura de la Informacin" (AI) fue utilizado por


primera vez por Richard Saul Wurman en 1975, quien la define como:

El estudio de la organizacin de la informacin con el objetivo de


permitir al usuario encontrar su va de navegacin hacia el conocimiento y
la comprensin de la informacin.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


ARQUITECTURA DE LA INFORMACIN (AI)

Si se tiene en cuenta exclusivamente a la AI en el campo de la Web, una


de las definiciones que Louis Rosenfeld y Peter Morville ofrecen en su
libro "Information Architecture for the World Wide Web 2nd Edition",
puede resultar de ms fcil comprensin:

El arte y la ciencia de estructurar y clasificar sitios web e intranets con el


fin de ayudar a los usuarios a encontrar y manejar la informacin.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


ARQUITECTURA DE LA INFORMACIN (AI)

La Arquitectura de Informacin de un sitio es uno de los aspectos ms


importantes en la experiencia del usuario. Jakob Nielsen, resume este
hecho en la siguiente frase:
Si el consumidor no puede encontrar el producto, no podr comprarlo.

Y esencialmente esa es la tarea de la Arquitectura de Informacin,


permitir a los usuarios hallar lo que buscan de la manera ms fcil
posible.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


ARQUITECTURA DE LA INFORMACIN (AI)

Para cumplir dicha tarea, el Arquitecto de Informacin debe encargarse,


entre otras cosas, de:
1. Estudiar e identificar las necesidades de los usuarios, lo que esperan
del sitio web.
2. Organizar, clasificar y estructurar la informacin del sitio, de acuerdo
con las necesidades de los usuarios.
3. Definir los rtulos y etiquetas que se emplearn en el sitio web y hacer
que correspondan adecuadamente al lenguaje y necesidades de los
usuarios.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


ARQUITECTURA DE LA INFORMACIN (AI)

4. Desarrollar los entregables necesarios para comprender y justificar


los resultados del proceso de Arquitectura de Informacin. Entre
esos entregables se encuentran:
Anlisis de necesidades de los usuarios y objetivos del sitio.
Anlisis de arquetipos de usuario, estudios de personajes y escenarios de
uso.

Resultados de investigaciones y pruebas con usuarios.


Mapas de navegacin, mapas de sitio o blueprints.
Prototipos de baja resolucin, maquetas o wireframes.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


ARQUITECTURA DE LA INFORMACIN (AI)

La gran cantidad de informacin que se genera en lnea cada da,


requiere de ser organizada, estructurada y comprendida a fin de poder
sacarle provecho. Es por esta y por otras razones que la Arquitectura de
Informacin se proyecta como una disciplina muy importante en la
constitucin de sitios web y entornos de contenidos digitales.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


Debe tener:
A. Ser claras e intuitivas, dando al usuario una sensacin de control,
para que puedan comprobar la amplitud de sus opciones y utilizarlas
para alcanzar sus objetivos.
B. No deben afectar al usuario con el propio funcionamiento interno de
la aplicacin. El trabajo del usuario debe irse guardando
continuamente y se debe permitir que el usuario deshaga acciones.
C. Se debe conseguir un mximo rendimiento solicitando la mnima
informacin posible al usuario.

Source: RAFAEL ALVAREZ CUERVO, J. R. (2005). INTRODUCCION AL DISEO


PARAMETRICO CON AUTODESK MECHANICAL DESKTOP. EDIUNO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - ARQUITECTURA DE INFORMACIN


Impacto
Objetivos del portal web: Defina claramente los objetivos del sitio
web.
Personajes y escenarios: Elabore estudios de personajes y
escenarios de uso.
Necesidades de los usuarios: Identifique claramente las
necesidades de sus usuarios.
Evaluacin constante. Realice evaluaciones constantes de la
evolucin del sitio y la capacidad para atender las necesidades de
sus usuarios.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - ARQUITECTURA DE INFORMACIN


Impacto
Evaluacin de la Arquitectura de Informacin. Realice pruebas
con usuarios para verificar la Arquitectura de Informacin del sitio.
Navegacin global consistente: Proporcione una navegacin
global visible y consistente a lo largo del sitio web.
Navegacin de contexto: Proporcione una navegacin de
contexto siempre que sea necesario.
Ruta tipo directorio. Disee y proporcione una ruta de tipo rbol.
URL limpios: Use URL limpios en todo el sitio web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - ARQUITECTURA DE INFORMACIN


Impacto
Ubicacin del usuario: Ayude a los usuarios a reconocer su
ubicacin dentro del sitio.
Tagline: Defina y muestre en su sitio una tagline clara y til para los
usuarios.
Enlaces bien formulados: Formule enlaces claros, sencillos y sin
ambigedades.
Memoria a corto plazo: Disee teniendo en cuenta las
limitaciones de memoria de los usuarios.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERFAZ DE USUARIO


Impacto
Ubicacin del logotipo: Ubique el logotipo en el mismo lugar en
todas las pginas y vinclelo con la pgina de inicio.
Diseo ordenado y limpio: Disee pginas web que sean
consideradas ordenadas y limpias por los usuarios.
Interfaces en
movimiento.

movimiento.

Evite

disear

interfaces

en

Contenido que parece publicidad: Evite que los contenidos y


elementos importantes de su sitio sean confundidos con
publicidad.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERFAZ DE USUARIO


Impacto
Contraste en brillo y color: Verifique que el texto y las imgenes
de texto tengan suficiente contraste de brillo y color con el fondo.
Informacin transmitida a travs de color. Toda la informacin
transmitida a travs de color, est tambin disponible sin color.
Justificacin del texto: Evite la alineacin justificada del texto de
prosa al margen izquierdo y derecho a la vez.
Ancho del cuerpo de texto: Utilice un ancho promedio entre 60 y
80 cpl (caracteres por lnea) para el cuerpo de texto.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERFAZ DE USUARIO


Impacto
Fuentes tipogrficas comunes: Asigne fuentes tipogrficas
universales desde la hoja de estilo CSS para todos los textos.
Texto subrayado: Evite usar texto subrayado, a menos que sea un
hipervnculo.
Uso adecuado del espacio en blanco: Utilice el espacio en blanco
para generar relaciones entre los elementos y contenidos de la
pgina.
Desplazamiento horizontal: Use un diseo de pgina que no
genere desplazamiento horizontal.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERFAZ DE USUARIO


Impacto
Vnculo a la pgina de inicio: Habilite el acceso a la pgina de
inicio, mediante hipervnculo en el logotipo y con un vnculo de
texto rotulado como Inicio.
Tareas clave en la pgina de inicio: Enfoque claramente todos
los elementos de la pgina de inicio en las tareas clave de los
usuarios.
Contenidos de ejemplo en la pgina de inicio: Disee en la
pgina de inicio contenidos que ejemplifiquen con claridad el
resto del sitio web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERFAZ DE USUARIO


Impacto
Hojas de estilo para diferentes formatos: Asigne estilos para
lectura en pantalla e impresin en papel.
Independencia de navegador: Disee el sitio web
independientemente del navegador.
Vnculos visitados: Diferencie claramente los vnculos visitados
de los vnculos sin visitar.
Calidad del cdigo: Verifique que el cdigo HTML y CSS de su
sitio cumpla estndares.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERACCIN


Impacto
Campos obligatorios: Distinga
obligatorios de los opcionales.

claramente

los

campos

Asociacin de etiquetas y campos: Asocie claramente las


etiquetas con los campos de formulario.
Validacin dinmica de datos: Proporcione una validacin
dinmica de datos, antes de que el usuario enve un formulario.
Error de pgina no encontrada: Disee e implemente una pgina
especfica para el error de pgina no encontrada (404).
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERACCIN


Impacto
Ventanas emergentes. No despliegue ventanas no solicitadas por
el usuario.
Botn atrs: Verifique que el botn atrs nunca deje de funcionar
dentro del sitio.
Tiempo de carga de las pginas: Optimice su sitio para asegurar
que el tiempo de carga de sus pginas sea mnimo.
Ejemplos en los campos de formulario: Proporcione ejemplos
en los campos de formulario que sean de difcil comprensin.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES - DISEO DE INTERACCIN


Impacto
Pginas de confirmacin: Redacte pginas de confirmacin
claras e informativas.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


LISTA DE DIRECTRICES - BSQUEDA

Impacto
Motor de bsqueda y ubicacin: Provea un motor de bsqueda
interno en todas las pginas y ubquelo preferiblemente en la
parte superior derecha.
Bsquedas con trminos familiares y errores de digitacin:
Permita las bsquedas con trminos familiares para los usuarios y
contemple los errores de digitacin.
Sugerencias de bsqueda: Incluya en las pginas de resultados
sugerencias para ayudar al usuario a encontrar lo que busca.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


LISTA DE DIRECTRICES - BSQUEDA

Impacto
Ubicacin en los 10 primeros resultados. Sea fcil de encontrar
en los 10 primeros resultados de los motores de bsqueda para
frases y palabras clave relacionadas con su entidad.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

LISTA DE DIRECTRICES PRUEBAS DE USABILIDAD


Impacto
Evaluacin heurstica: Realice evaluaciones heursticas para
detectar los problemas de Usabilidad ms evidentes.
Test de Usuario: Realice pruebas con usuarios y mejore la
usabilidad del sitio web con base en los resultados.
Diseo y evaluacin iterativos: Realice mltiples evaluaciones a
lo largo del proceso de diseo y desarrollo.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


LISTA DE DIRECTRICES CONTENIDO

Impacto
Contenido til: Provea contenido til.
Pirmide invertida. Utilice el esquema de pirmide invertida
para escribir contenidos en su sitio.
Ttulos y encabezados: Escriba ttulos y encabezados claros, y
asegrese de que sean semnticamente correctos.

Listas: Prefiera el uso de listas ordenadas, listas sin orden y listas


de definiciones, en vez de prrafo en prosa.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


LISTA DE DIRECTRICES CONTENIDO

Impacto
Escaneado de contenido: Estructure el contenido para que pueda
ser fcilmente escaneado por cualquier tipo de usuario.
Vnculos rotos: Asegrese de que no existan vnculos rotos.
Contenido encontrable: Escriba contenido que sea fcilmente
encontrado por los usuarios.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

1) DIRECTRICES DE ARQUITECTURA DE INFORMACIN OBJETIVOS DEL PORTAL WEB


Impacto
Asegrese de que los objetivos del sitio web estn bien definidos, para
ello debe existir un documento en el cual se plasmen dichos objetivos y
se presenten tambin los antecedentes y el proceso de definicin.
Revise los objetivos y verifique que sean claros, concretos y sin
ambigedades. Transmita los objetivos a todos los miembros del Equipo
Web y cualquier otra persona relacionada con el portal. En caso de no
existir este documento, la directriz se dar por no cumplida.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

2) DIRECTRICES DE ARQUITECTURA DE INFORMACIN PERSONAJES Y ESCENARIOS


Impacto
Es una metodologa de anlisis basada en la definicin de personajes
ficticios en los que se reflejan las necesidades de los usuarios del sitio.
En el estudio se plantean casos de uso reales, en los que se narra cul
sera el proceso que sigue el usuario desde que formula su necesidad
hasta su llegada al sitio web.
Se debe de considerar las necesidades de un usuario real y no ver a este
como parte de un conjunto abstracto e indefinido.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

3) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NECESIDADES DE LOS USUARIOS


Impacto
Los usuarios pueden ser agrupados de acuerdo con sus caractersticas;
identificar roles o grupos de usuario permite definir necesidades que
atiendan a la mayor parte de usuarios y centrarse en lo ms probable en
vez de todo lo posible. Para recopilar dichas necesidades se pueden
usar los siguiente recursos:
1. Encuestas con los futuros usuarios del sitio.
2. Entrevistas personales a los usuarios.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

4) DIRECTRICES DE ARQUITECTURA DE INFORMACIN EVALUACIN CONSTANTE


Impacto
Las siguientes son solo algunas de las evaluaciones que pueden
realizarse en un sitio web y que permiten tener una idea del xito,
impacto y facilidad de uso.
1. Test con usuarios
2. Evaluacin de las pginas ms visitadas
3. Encuestas a usuarios
4. Pruebas A/B
Google Analytics
Google Website Optimizer

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

5) DIRECTRICES DE ARQUITECTURA DE INFORMACIN EVALUACIN DE LA ARQUITECTURA DE INFORMACIN


Impacto
Tree Testing. Este test para probar estructuras de sitio. El usuario recibe
una tarea, y se le presenta el mapa del sitio para que intente encontrar lo
que busca. La clave del test est en mostrar la estructura del sitio por
niveles de jerarqua, con lo que es posible medir el porcentaje de
usuarios que llegaron directamente al objetivo, el porcentaje de
retrocesos, entre otros.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

5) DIRECTRICES DE ARQUITECTURA DE INFORMACIN EVALUACIN DE LA ARQUITECTURA DE INFORMACIN


Impacto
Test de 5 segundos. El principio de este test es ver cmo reaccionan los
usuarios en un margen de tiempo reducido. Los test de 5 segundos
presentan al usuario opciones y exigen una respuesta antes del tiempo
estipulado. Es usado para comprobar por ejemplo rtulos a usar en las
categoras, o incluso para identificar qu elementos de la interfaz son
memorizados con mayor facilidad.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

6) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NAVEGACIN GLOBAL CONSISTENTE


Impacto
Est compuesta generalmente por las categoras principales o por el
denominado men principal del sitio web. El usuario de saber a
dnde dirigirse y lo que puede hacer dentro del sitio.
Verifique que el sistema de navegacin global es consistente a lo largo
del sitio. Para ello, asegrese de que existe un men principal (o global)
que aparece en la mayora de las pginas del sitio y que adems
preserva su estructura, los nombres de sus enlaces, y el orden de los
mismos.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

6) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NAVEGACIN GLOBAL CONSISTENTE


Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

7) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NAVEGACIN DE CONTEXTO


Impacto
Verifique que existe una navegacin contextual en todas las pginas que
lo requieren. Para ello, visite aquellas secciones principales y verifique
que el men contextual muestra las pginas y subsecciones que
pertenecen a la seccin principal actual.
El men de navegacin contextual tambin debera aparecer en las
pginas internas o de mayor profundidad del sitio. En este caso, debe
ser lo suficientemente claro para indicar, al usuario, exactamente en qu
seccin y subseccin se encuentra.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

7) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NAVEGACIN DE CONTEXTO


Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

8) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


RUTA TIPO DIRECTORIO
Impacto
La ruta tipo directorio es una lista de enlaces que se ubica
generalmente en la parte superior de la pgina y que muestra la ruta
que ha seguido el usuario hasta el lugar dnde se encuentra.
Aunque es probable que el usuario haya ingresado a una pgina interna
a travs de un motor de bsqueda, la ruta tipo rbol muestra tambin la
jerarqua de contenidos del sitio y funciona como un mecanismo de
navegacin auxiliar.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

8) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


RUTA TIPO DIRECTORIO
Impacto
Navegue
por
varias
pginas
internas del sitio y compruebe que
en ellas se muestra la ruta de rbol.
Verifique
que
sea
visible,
reconocible, y que corresponda
fielmente a la jerarqua de
contenidos del sitio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

9) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


URL LIMPIOS
Impacto
Un esquema de URL limpios tiene las siguientes caractersticas:
1. Corresponde a la jerarqua del sitio
2. No incluye caracteres especiales como $, &, ?,= entre otros

Presentar los URL de una manera limpia y ordenada puede ayudar al


usuario a reconocer su ubicacin dentro del sitio, incluso puede
convertirse en un mecanismo de navegacin que permita al usuario
visitar la seccin anterior en jerarqua.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

9) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


URL LIMPIOS
Impacto
Ejemplos de URL limpias en los sitios Visit Norway, Discovery Channel,
CNN.com y National Geographic.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

10) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


UBICACIN DEL USUARIO
Impacto
Ingrese a varias pginas de su sitio y asegrese de que en todo
momento se muestra su ubicacin actual a travs de los diversos
sistemas de navegacin. Asegrese de que la navegacin global, de
contexto, ruta tipo directorio y URL sean coherentes con la jerarqua y
ubicacin que tiene la pgina actual dentro de todo el sitio.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

10) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


UBICACIN DEL USUARIO
Impacto
Algunos de los mecanismos de navegacin que pueden indicar al
usuario en dnde se encuentra son:
Navegacin global: Mostrar la seccin principal a la cual pertenece la pgina actual.
Navegacin de contexto: Mostrar la sub seccin o subsecciones a la cuales pertenece la
pgina actual.

Ruta tipo directorio: Muestra al usuario el camino que debera recorrer para llegar
desde la pgina de inicio hasta su ubicacin actual.
URL limpia: Una direccin clara tambin da una idea al usuario de las secciones a las
cuales pertenece la pgina donde se encuentra.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

10) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


UBICACIN DEL USUARIO
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

11) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


TAGLINE
Impacto
Cercirese de que su sitio web cuenta con una tagline clara y til
para los usuarios. Para ello verifique que existe un estudio de tagline en
el cual justifique la frase escogida, tomando como base los objetivos del
sitio y las necesidades de lo usuarios.
Verifique que la tagline se ubique cerca al identificador del sitio, dnde
esperan encontrarla la mayora de usuarios, y verifique que aparece
tambin junto al ttulo de la pgina principal.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

11) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


TAGLINE
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

12) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


ENLACES BIEN FORMULADOS
Impacto
Por su importancia en la experiencia de usuario, los enlaces deben ser
claros, reconocibles y sin lugar a ambigedades. Algunas sugerencias
a tener en cuenta para garantizar buenos enlaces son:
a) Usar ttulos de enlaces significativos, que indiquen claramente el
contenido al cual conducen.
b) Emplear un lenguaje sencillo y cercano al usuario en la formulacin
de enlaces.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

12) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


ENLACES BIEN FORMULADOS
Impacto
c) No usar terminologa tcnica ni lenguaje especializado.

d) No usar palabras como haga clic, el usuario ya sabe que los


enlaces son para hacer clic en ellos.
e) Utilizar en el enlace las palabra mnimas necesarias para que el
usuario
f) comprenda su propsito. Los enlaces cortos son ms fciles de
escanear y leer.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

12) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


ENLACES BIEN FORMULADOS
Impacto
Ejemplos de enlaces mal formulados:
Ir a la seccin de noticias
Haga click aqu para descargar el instructivo de impuesto predial
Para ingresar al sistema de trmites en lineas haga click aqu

Los mismos ejemplos con correcciones:


Visite nuestra seccin de Noticias
Descargar el instructivo de impuesto predial
Ingresar al sistema de trmites en lnea
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

13) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


MEMORIA A CORTO PLAZO
Impacto
La memoria a corto plazo de los seres humanos, llamada tambin
memoria operativa, es definitivamente limitada. Algunos estudios
concuerdan en que su capacidad de almacenar elementos oscila
entre 7 (2) elementos durante 10 segundos si no se repasa.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

13) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


MEMORIA A CORTO PLAZO
Impacto
Recomendaciones:

a) Presentar los elementos de navegacin de forma consistente,


evitando que el usuario tenga que recordarlos y permitindole
consultarlos siempre que sea necesario.
b) Hacer que los enlaces cambien de color cuando se visitan, de ese
modo el usuario podr saber en qu pginas ha estado sin recurrir a
su memoria.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

13) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


MEMORIA A CORTO PLAZO
Impacto
Recomendaciones:

c) Disear interfaces sencillas, que faciliten la recordacin y no


sobrecarguen la memoria del usuario.
d) Suministrar recordatorios visibles, de aquella informacin que el
usuario siempre debe tener presente. Un ejemplo es la informacin
de si el usuario se encuentra o no logueado en el sitio.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

13) DIRECTRICES DE ARQUITECTURA DE INFORMACIN


MEMORIA A CORTO PLAZO
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

14) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


UBICACIN DEL LOGOTIPO
Impacto
Hay estndares que se imponen por la reiteracin en el uso. Se le
denominan estndares de facto. Uno de ellos es la ubicacin del
logotipo que identifica un sitio web, que en Occidente se impuso en la
parte superior izquierda.

A travs de la observacin. Ingrese al sitio y luego navegue en las


pginas internas. Revise la ubicacin del logotipo e intente hacer clic en
l. Si la pgina de destino es la pgina de inicio, el criterio ser
satisfactorio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

14) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


UBICACIN DEL LOGOTIPO
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

15) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


DISEO ORDENADO Y LIMPIO
Impacto
Efectivamente, diseos desordenados y confusos producen frustracin
en el usuario al impedirle encontrar informacin fcilmente.
Es claro que cuando los ciudadanos visitan un sitio web, necesitan
encontrar una informacin concreta o realizar un trmite (o servicio). Toda
la informacin que se interponga, puede considerarse ruido, incluso
estorbo.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

15) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


DISEO ORDENADO Y LIMPIO
Impacto
El siguiente es un claro ejemplo de un
diseo limpio y ordenado. Se ha tomado del
Portal Oficial de Nueva Zelanda; al ingresar,
se encuentra un encabezado que va ms
all de una imagen decorativa: busca
ubicar en el mapamundi, un pas que para
muchos puede ser difcil de localizar.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

16) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INTERFACES EN MOVIMIENTO
Impacto
Las posibilidades de movimiento de elementos de las interfaces, a
partir de tecnologas como Flash, animaron a algunos diseadores a
proponer pginas web ms llamativas visualmente, por la misma
novedad que supone la diferencia.

Sin embargo, este recurso conlleva dificultades, particularmente en la


facilidad de uso y en la accesibilidad. El siguiente es un claro ejemplo,
a travs de un sitio de venta de repuestos para computadores.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

16) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INTERFACES EN MOVIMIENTO
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

17) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTENIDO QUE PARECE PUBLICIDAD
Impacto
Uno de los principios de usabilidad que ms han sido demostrados a
partir de la experimentacin es la llamada ceguera a los banners, que
no es otra cosa sino la prevencin que ha desarrollado el usuario a
cualquier elemento que parezca publicidad.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

17) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTENIDO QUE PARECE PUBLICIDAD
Impacto
El usuario desarrolla con la navegacin patrones y conductas que le
ayudan a defenderse de los elementos no deseados por ejemplo
ventanas emergentes y la publicidad es as como sistemticamente
ignora aquello que se mueve o quiera llamar forzosamente su atencin.
Estudios realizados con tcnicas como el eyetracking han demostrado
que el texto plano llama ms la atencin del usuario que los
elementos en movimiento.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

17) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTENIDO QUE PARECE PUBLICIDAD
Impacto
Un estudio de Eyetraking de
Nielsen Norman Group, en el
que se evidencia la "ceguera
a los banner".

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

18) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTRASTE EN BRILLO Y COLOR
Impacto
Un deficiente contraste afectar la legibilidad de los textos y, por lo
tanto, significar una barrera de acceso a la informacin por parte de
algunas personas con dificultades visuales.
Sin embargo, es necesario aclarar que cualquier persona,
independientemente de sus capacidades visuales, tendr problemas al
usar textos poco contrastados en situaciones como mala calibracin del
monitor, incidencia directa de la luz solar o, simplemente, un desgaste
en las lmparas de un proyector
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

18) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTRASTE EN BRILLO Y COLOR
Impacto
Existen mltiples herramientas para
verificar el contraste exigido para cumplir
con esta directriz, la gran mayora libres
para usar. Puede descargar e instalar el
programa Colour Contrast Analyzer.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

19) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INFORMACIN TRANSMITIDA A TRAVS DE COLOR
Impacto
Debido a que un porcentaje de la poblacin (8% de hombres y 1% de
mujeres) tienen una percepcin visual diferente, llamado daltonismo, el
diseo de las pginas web debe asegurar que cuando se transmita
informacin a travs del color, se provean mecanismos alternativos
para que toda la poblacin entienda.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

19) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INFORMACIN TRANSMITIDA A TRAVS DE COLOR
Impacto
Esta medida beneficiara no solo a la poblacin con daltonismo, sino
tambin a personas que utilicen pantallas con deficiencia cromtica,
monocromticas o en condiciones donde la percepcin de luz pueda
verse alterada.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

19) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INFORMACIN TRANSMITIDA A TRAVS DE COLOR
Impacto
Esta medida beneficiara no solo a la poblacin con daltonismo, sino
tambin a personas que utilicen pantallas con deficiencia cromtica,
monocromticas o en condiciones donde la percepcin de luz pueda
verse alterada.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


JUSTIFICACIN DEL TEXTO
Impacto
El diseo tipogrfico que contempla la alineacin justificada (margen
derecho e izquierdo al mismo tiempo), es una prctica habitual en la
industria de los impresos (libros, revistas, folletos).

Justificar un texto de prosa puede generar problemas de legibilidad y el


gris tipogrfico ser difcil de conseguir.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


JUSTIFICACIN DEL TEXTO
Impacto
A travs de la observacin, el evaluador puede determinar en las
principales pginas web del sitio si existe texto justificado. Tambin
podr hacerlo a partir de una bsqueda en la hoja de estilo CSS de la
regla:
text-align: justify;

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


JUSTIFICACIN DEL TEXTO
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

21) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


ANCHO DEL CUERPO DE TEXTO
Impacto
El cpl es una medida de cuntos caracteres por lnea tiene una caja
tipogrfica. Cul es el cpl ideal para la lectura del cuerpo de texto en
la web? Diversos autores han realizado investigaciones en este sentido,
con conclusiones variadas:
1. Dyson y Kipping (1998) 80-100 cpl
2. Dawn Shaikh (2004) 95 cpl
3. Garca y Short (2002) 60-80 cpl
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


ANCHO DEL CUERPO DE TEXTO
Impacto

120 cpl

70 cpl
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

22) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


FUENTES TIPOGRFICAS COMUNES
Impacto
En el diseo grfico de libros, revistas o cualquier publicacin impresa,
el maquetador puede seleccionar entre un listado muy extenso de
tipografas. Cuando el documento sale impreso, las tipografas, los
tamaos, los mrgenes, los espacios y todos los elementos usados por el
maquetador quedarn iguales, como los diseo, en su computadora.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


FUENTES TIPOGRFICAS COMUNES
Impacto
Qu ocurre si el usuario no tiene instalada la fuente asignada por el
diseador? El navegador mostrar la informacin, pero con otra
fuente tipogrfica. Ah es donde se pierde cierto control del diseo.
Por lo tanto esta directriz busca fomentar el uso de aquellas fuentes
tipogrficas universales, es decir, que se encuentran instaladas en
prcticamente todos los computadores, en cualquier sistema operativo
(Windows, Linux o Macintosh).
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


FUENTES TIPOGRFICAS COMUNES
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

23) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


TEXTO SUBRAYADO
Impacto
En sus inicios, los navegadores diferenciaban los textos de enlace, a
travs del subrayado y el color (azul). De esta manera, los usuarios se
acostumbraron a que cuando observaban un texto subrayado y azul,
significaba que era un enlace.
Con el invento de las hojas de estilo en cascada CSS, los diseadores
pudieron quitarle a los enlaces el subrayado y, adems, ponerle
subrayado a los textos (aunque no fueran enlaces). El resultado: un
usuario confundido, que no diferencia un enlace de un texto normal.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


TEXTO SUBRAYADO
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


TEXTO SUBRAYADO
Impacto
El evaluador podr hacerlo de forma manual por cada una de las
pginas ms importantes, revisando si todos los subrayados
corresponden a hipervnculos o no.
Es posible tambin, a travs de la barra Web Developer Toolbar, abrir
todas las hojas de estilo en cascada y realizar una bsqueda de la regla:
text-decoration: underline;

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

24) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


USO ADECUADO DEL ESPACIO EN BLANCO
Impacto
El espacio en blanco es tan importante como el contenido. No se trata
de espacio desaprovechado, por el contrario, un buen diseo contiene
el espacio en blanco suficiente para garantizar la comprensin y
legibilidad.
El espacio en blanco no se refiere exclusivamente a los espacios que no
tienen color, sino a aquellos que no presentan ningn tipo de contenido.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


USO ADECUADO DEL ESPACIO EN BLANCO
Impacto
Su uso efectivo se refiere a respetar el espaciado entre los grupos de
informacin, y con esto, ayudar al usuario a entender las relaciones que
existen entre los elementos que componen la interfaz.
Los sitios que no proveen espacio entre sus elementos, generalmente
lucen congestionados e impiden al usuario decidir fcilmente a dnde
ir.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

20) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


USO ADECUADO DEL ESPACIO EN BLANCO
Impacto
Visite las pginas de su sitio web y
asegrese de que el espacio en
blanco es usado de manera eficiente.
Un usuario debera poder identificar
rpidamente y sin dificultad, los
diferentes bloques o grupos de
contenido que componen la interfaz.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

25) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


DESPLAZAMIENTO HORIZONTAL
Impacto
La resolucin mnima para monitores de computador que debe
tenerse en cuenta en la actualidad para los sitios del Estado
colombiano, es de 1024 x 768 pixeles. Sobre esta medida, el diseador
debe probar su diseo para que en ningn navegador aparezca la barra
de desplazamiento horizontal.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

25) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


DESPLAZAMIENTO HORIZONTAL
Impacto
Por ello se sugiere una medida de 960
pixeles
de
ancho,
que
encaja
perfectamente
en
la
resolucin
establecida en esta directriz y que no
generar barra de desplazamiento
horizontal:

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

25) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


DESPLAZAMIENTO HORIZONTAL
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

26) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


VNCULO A LA PGINA DE INICIO
Impacto
Una gran cantidad de visitantes de los sitios web, ingresan a travs de
motores de bsquedas, vnculos y marcadores, a pginas internas
directamente, evitando pasar por la pgina de inicio. Dado que muchos
usuarios querrn ir a la pgina de inicio, es conveniente habilitar este
hipervnculo en cualquier pgina interna.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

26) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


VNCULO A LA PGINA DE INICIO
Impacto
Normalmente, este enlace debe estar asociado al logotipo, por una parte
(los usuarios esperan este comportamiento en el logotipo). Sin embargo,
es aconsejable habilitar un hipervnculo con el rtulo inicio de
forma totalmente explcita.
No es buena idea usar otros rtulos como portada, principal,
home, que pueden ser ms creativos, pero que no transmiten con la
misma rapidez el mensaje que la palabra que la gente ya asocia a la
accin:Inicio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

26) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


VNCULO A LA PGINA DE INICIO
Impacto
A travs de la observacin, el evaluador
debe recorrer las principales pginas
del sitio web y verificar si el logotipo
tiene hipervnculo al inicio y si existe
un claro rtulo con la palabra Inicio
que de igual forma est vinculado a la
pgina principal del sitio web.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

27) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


TAREAS CLAVE EN LA PGINA DE INICIO
Impacto
Un usuario ingresa a un sitio web estatal porque claramente necesita una
consultar una informacin o realizar un trmite o servicio en lnea. Todo
lo dems, estorba.
Para sustentar esta tesis, se sugiere realizar un ejercicio mental, muy
simple. Piense en el sitio web que usted utiliza cada vez que decide
buscar informacin. Google? Seguramente, la interfaz de Google
est enfocada en esa labor concreta que usted realizar.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

27) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


TAREAS CLAVE EN LA PGINA DE INICIO
Impacto
Para evaluar si esta directriz se
cumple en el sitio, solicite la
documentacin que exista sobre la
planeacin del sitio web (Gua web o
estudio de personajes y escenarios de
uso), donde haya quedado claramente
cules son las tareas clave ms
prioritarias que debe satisfacer el sitio
web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

28) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTENIDOS DE EJEMPLO EN LA PGINA DE INICIO
Impacto
La pgina de inicio debe servir como la puerta de entrada para el
resto de contenidos del sitio web, por supuesto, sin convertirse en una
la cartelera de moda donde cada departamento busca colgar su
informacin.
Para ello est la directriz sobre la importancia de priorizar las tareas
ms importantes. Pero tambin ser muy importante mostrar en la
pgina de inicio algn contenido que ejemplifique el resto de
contenidos internos del sitio web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

28) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CONTENIDOS DE EJEMPLO EN LA PGINA DE INICIO
Impacto
El evaluador a travs de la
comprensin de la estructura del
sitio web y preferiblemente a
partir de la lectura de los
documentos de la planeacin del
sitio web (Arquitectura de
Informacin), determinar si esta
directriz se cumple o no.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

29) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


HOJAS DE ESTILO PARA DIFERENTES FORMATOS
Impacto
Gracias a las hojas de estilo en cascada, CSS es posible dar apariencia
grfica a mltiples salidas de la informacin:
1. Diseo para pantalla
2. Diseo para impresin en papel
3. Diseo para dispositivos de mano
4. Diseo para braile
5. entre otros...
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

29) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


HOJAS DE ESTILO PARA DIFERENTES FORMATOS
Impacto
Esta directriz busca que el diseador asigne estilos como mnimo
para lectura en pantalla y para impresin en papel. Puede hacerlo,
vinculando dos hojas de estilo diferentes, y arcndoles un atributo
media apropiado, as:
Para pantalla:
<link rel="stylesheet" href="pantalla.css" type="text/css" media="screen" />

Para impresin:
<link rel="stylesheet" href="impresion.css" type="text/css" media="print" />

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

29) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


HOJAS DE ESTILO PARA DIFERENTES FORMATOS
Impacto
Navegue varias pginas del sitio
web y desde su navegador vaya al
men Archivo > Imprimir. No es
necesario gastar papel y tinta en
esta prueba, simplemente
previsualice y determine si los
estilos estn optimizados para
impresin o no.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

30) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INDEPENDENCIA DE NAVEGADOR
Impacto
No es conveniente disear pensando solo en un navegador. Esto ocurre
con mucha frecuencia en sitios web que, inclusive, avisan de manera
abierta que el sitio est optimizado para Internet Explorer.

El problema aparece cuando un usuario no utiliza dicho navegador,


bien porque no le interesa, o bien porque tiene una plataforma diferente
(Linux o Macintosh), donde dicho navegador no funciona.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

30) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


INDEPENDENCIA DE NAVEGADOR
Impacto
Asegrese de que el sitio
funciona, en cualquier navegador
de acuerdo a como fue concebido
originalmente por el equipo de
desarrollo.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

31) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


VNCULOS VISITADOS
Impacto
Mostrar el usuario el camino que ha recorrido es un elemento que
disminuye la posibilidad de error y mejora la navegacin. Para el
visitante la pregunta donde he estado? es clave, no solo para encontrar
rpidamente el contenido que fue til la primera vez, sino para evitar las
pginas que no correspondieron con lo que ste esperaba.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

31) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


VNCULOS VISITADOS
Impacto
En la mayora de los casos los navegadores incluyen por defecto la
convencin estndar (color prpura). Generalmente los diseadores
que fallan en esta directriz sobre escriben este valor incluyendo una
regla en las hojas de estilo como:
a:visited {
color: #000 //En este caso el color prpura por defecto fue
sobre escrito por el color negro

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

31) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


VNCULOS VISITADOS
Impacto
No diferenciar los vnculos
visitados de los vnculos sin
visitar es uno de los errores de
usabilidad
identificados
por
varios
autores
como
muy
frecuentes, pero a su vez, es un
problema muy fcil de corregir.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

32) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CALIDAD DEL CDIGO
Impacto
Codificar de acuerdo con los estndares es en principio una forma de
garantizar que el sitio web se ver adecuadamente en la mayora de
navegadores y dispositivos. Escribir cdigo vlido no solo es un
indicador de calidad, sino una clara manifestacin de que quien disea
el sitio hace un esfuerzo por generar un sitio interoperable y accesible.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

32) DIRECTRICES DE DISEO DE INTERFAZ DE USUARIO


CALIDAD DEL CDIGO
Impacto
Verifique que el cdigo HTML y CSS de
su sitio no contiene errores de validacin
y se hace conforme los estndares
emitidos por la W3C. Para ello ingrese a
las herramientas de validacin oficiales,
ingrese el URL de su sitio, y verifique que
el cdigo sea vlido.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

33) DIRECTRICES DE DISEO DE INTERACCIN


CAMPOS OBLIGATORIOS
Impacto
Uno de los elementos que puede afectar la experiencia de usuario es una
mala sealizacin de los campos de formulario. El usuario se ha
habituado a encontrar una convencin para aquellos campos que son
requeridos, por eso en ocasiones los campos sin sealizacin pueden ser
interpretados como opcionales.

No llenar un campo obligatorio desencadena en una pgina de error por


ausencia de datos, un formulario con demasiados campos podra llegar a
generar tantas pginas de error como para causar el abandono.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

33) DIRECTRICES DE DISEO DE INTERACCIN


CAMPOS OBLIGATORIOS
Impacto
Asegrese de que todos los campos obligatorios en sus formularios estn
etiquetados y son distinguibles de los opcionales. Incluso de ser posible,
provea mecanismos de validacin dinmicos que eviten que el usuario deje
vaco un campo requerido antes de enviar el formulario.
La convencin generalmente utilizada para sealar estos campos
consiste en un asterisco de color en la parte superior derecha de la
etiqueta del campo. Sin embargo, proveer mecanismos mucho ms visibles
nunca est dems, podra reducir el tiempo de interpretacin y mejorar la
experiencia del usuario.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)

DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

33) DIRECTRICES DE DISEO DE INTERACCIN


CAMPOS OBLIGATORIOS
Impacto
Visite todas las pginas de
su sitio que contengan
formularios y verifique que
todos
los
campos
obligatorios se sealan con
claridad.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

34) DIRECTRICES DE DISEO DE INTERACCIN


ASOCIACIN DE ETIQUETAS Y CAMPOS
Impacto
Para que el usuario tenga una interaccin fluida con los formularios se
hace necesario que conozca los datos que el sistema espera que ingrese
en cada campo. Un adecuado rotulado de los campos de formulario,
permite una lectura rpida y un ingreso gil de la informacin.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

34) DIRECTRICES DE DISEO DE INTERACCIN


ASOCIACIN DE ETIQUETAS Y CAMPOS
Impacto
Cuando no es clara a primera vista la asociacin entre el campo y su
etiqueta, se pueden desencadenar errores por datos ingresados en los
lugares incorrectos; errores que pueden afectar en alguna medida la
experiencia del usuario y su percepcin general del portal.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

34) DIRECTRICES DE DISEO DE INTERACCIN


ASOCIACIN DE ETIQUETAS Y CAMPOS
Impacto
Para disear etiquetas asociadas claramente con los campos pueden ser
tiles los siguientes criterios:
1. Ubique las etiquetas de los campos en la parte superior: los usuarios
realizan generalmente una lectura vertical del formulario.
2. Reserve un espacio en blanco considerable para separar unos
campos de otros.
3. Cuando emplee listas de seleccin no provea etiquetas, haga que el
valor predeterminado del campo sea la etiqueta.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

34) DIRECTRICES DE DISEO DE INTERACCIN


ASOCIACIN DE ETIQUETAS Y CAMPOS
Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

35) DIRECTRICES DE DISEO DE INTERACCIN


VALIDACIN DINMICA DE DATOS
Impacto
Los lenguajes de programacin ejecutados del lado del cliente pueden
beneficiar mucho la experiencia de los usuarios al diligenciar formularios.
Proporcionar una validacin dinmica en lnea antes de enviar el
formulario completo hace ms sencillo el flujo de trabajo y evita al
usuario errores innecesarios.

Proporcione a sus campos obligatorios una validacin en lnea, que


despliegue inmediatamente un mensaje en caso que el usuario no
ingrese datos, o los ingrese de manera incorrecta.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

35) DIRECTRICES DE DISEO DE INTERACCIN


VALIDACIN DINMICA DE DATOS
Impacto
Este principio de retroalimentacin
permite al usuario conocer el efecto
de sus acciones de manera
inmediata, y puede mejorar la
percepcin general del sitio.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

35) DIRECTRICES DE DISEO DE INTERACCIN


VALIDACIN DINMICA DE DATOS
Impacto
Visite las pginas de su sitio que contengan formularios e intente
abandonar los campos obligatorios sin llenarlos. El sistema debera ser
capaz de reproducir una alerta sutil que recuerde la ausencia de datos.
Verifique que el sistema funciona de manera similar al ingresar datos
incorrectos, en el caso de direcciones de correo y nmeros, provea
mensajes que indiquen inmediatamente si los datos no fueron ingresados
del modo correcto.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

36) DIRECTRICES DE DISEO DE INTERACCIN


ERROR DE PGINA NO ENCONTRADA
Impacto
Que no exista ningn tipo de error cundo los usuarios interactan con un
sitio web es algo difcil de garantizar. Un simple enlace mal formulado, una
URL que cambia, un dato ingresado de manera incorrecta e incluso una
accin equivocada del usuario pueden desencadenar en un error.
Un error comn es el de pgina no encontrada, conocido a veces por su
cdigo (404). Es un error que aparece cundo el usuario intenta ingresar
a una pgina del sitio que no existe o ha sido eliminada.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

36) DIRECTRICES DE DISEO DE INTERACCIN


ERROR DE PGINA NO ENCONTRADA
Impacto
Teniendo en cuenta que este tipo de error aparece cundo el usuario
est buscando algo, es de vital importancia generar una pgina que
gestione este error de manera personalizada e inteligente. El propsito
debe ser el de orientar de nuevo al usuario, proveerle opciones de
contenido similares, e incluso generar un mensaje que minimice el
impacto en el usuario.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

36) DIRECTRICES DE DISEO DE INTERACCIN


ERROR DE PGINA NO ENCONTRADA
Impacto
Las pginas de error pueden ser aprovechadas para llevar al usuario a
contenidos que lo orienten, como el mapa del sitio o los artculos de
ayuda, siempre teniendo en cuenta no realizar una redireccin
automtica sino dejando en claro que la pgina solicitada no existe.
Una pgina de error personalizada puede indicar al usuario la
preocupacin de sus propietarios por proveer un sitio web de calidad,
y una experiencia satisfactoria.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

36) DIRECTRICES DE DISEO DE INTERACCIN


ERROR DE PGINA NO ENCONTRADA
Impacto
Dirjase a una URL errnea en su sitio y
verifique que la pgina de error (404) ha
sido personalizada. Asegrese de que esta
pgina indica que el contenido que busca no
se encuentra en el sitio, y que proporciona
opciones para que el usuario retome la
navegacin
o
encuentre
contenidos
relacionados.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

37) DIRECTRICES DE DISEO DE INTERACCIN


VENTANAS EMERGENTES
Impacto
En la Web, es necesario garantizar al usuario el control de la interaccin. A
diferencia de las aplicaciones de escritorio, en Internet el usuario se mueve
por voluntad propia, explora los sitios que desea, abandona los sitios que
no le satisfacen, y activa los eventos que necesita.
Las ventanas emergentes son uno de los errores que intervienen
directamente con la voluntad del usuario y que causan mayor molestia.
De hecho, los fabricantes de navegadores se han preocupado por incluir
bloqueadores de ventanas emergentes por razones de seguridad y de
comodidad con el usuario.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)

DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

37) DIRECTRICES DE DISEO DE INTERACCIN


VENTANAS EMERGENTES
Impacto
Las ventanas no solicitadas se interpretan muchas veces como
publicidad fraudulenta, y en la mayora de las ocasiones los usuarios las
cierran a la primera oportunidad. Muchos usuarios las califican de
molestas.
Incluir elementos de contenido o aplicaciones en ventanas emergentes
siempre constituye un riesgo, ya sea porque el navegador puede
bloquearlo por interpretarlo como publicidad o incluso, puede que el
usuario cierre la ventana sin siquiera ver su contenido.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

37) DIRECTRICES DE DISEO DE INTERACCIN


VENTANAS EMERGENTES
Impacto
Los usuarios que no cuentan con amplia experiencia en Internet no tienen
la facilidad para trabajar con mltiples ventanas o pestaas, esto les
impone una barrera para volver en sus pasos y entender en qu momento
se ha abierto una nueva ventana de navegacin.

Dirjase a las pginas y secciones ms visitadas y ms importantes de su


sitio, navguelas y asegrese de que no se generan en ellas ventanas
no solicitadas o emergentes.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

38) DIRECTRICES DE DISEO DE INTERACCIN


BOTN ATRS
Impacto
El botn ms utilizado en el navegador web es el botn atrs. Es apenas
natural pensarlo ya que en la interaccin con la web el usuario
constantemente est explorando y volviendo en sus pasos.
Este importante botn se encuentra en el navegador por una razn simple:
constituye la funcionalidad que permite al usuario deshacer sus
acciones. Tambin genera confianza en el usuario, sin importar el sitio web
al que ingrese el usuario o lo perdido que pueda llegar a verse, siempre
podr volver en sus pasos hasta el inicio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

38) DIRECTRICES DE DISEO DE INTERACCIN


BOTN ATRS
Impacto
Pese a la relevancia de este botn en el da a da del usuario de Internet,
algunos sitios inhabilitan esta funcionalidad. Algunos eventos en los
que frecuentemente se evidencia este error son:
Generacin de ventanas emergentes en los que se eliminan los controles
del navegador por completo.
Enlaces internos que se abren en nuevas pestaas, para algunos usuarios
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

38) DIRECTRICES DE DISEO DE INTERACCIN


BOTN ATRS
Impacto
El concepto de pestaa no est claro, al abrirse una nueva intentan ir
atrs pero no lo consiguen.
Errores de programacin que causan que al usar el botn atrs, el
usuario sea redirigido al mismo lugar donde ya se encuentra
entrando en un ciclo infinito.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

38) DIRECTRICES DE DISEO DE INTERACCIN


BOTN ATRS
Impacto
Explore las pginas y secciones ms relevantes de su sitio web y aquellas
que reciben ms visitas. Asegrese de que el botn atrs siempre
funciona y que cumple su cometido, es decir que conduce a la pgina
inmediatamente anterior.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

38) DIRECTRICES DE DISEO DE INTERACCIN


BOTN ATRS
Impacto
Un sitio web que tarda demasiado tiempo en cargar eventualmente puede ser
abandonado por el usuario. La respuesta rpida de un sitio est relacionada
con la necesidad que tiene el visitante de recibir una respuesta a sus
acciones en un tiempo prudente.
Las pginas que tardan demasiado en cargar pueden dar la impresin de que
se encuentran fuera del aire, y los usuarios que tengan conexiones a internet
demasiado lentas podran decidir buscar en algn otro sitio que les
proporcione lo que buscan sin esperas.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

39) DIRECTRICES DE DISEO DE INTERACCIN


TIEMPO DE CARGA DE LAS PGINAS
Impacto
El rendimiento es tambin un factor que aporta a la experiencia de
usuario. Un portal rpido es percibido en algunas ocasiones como un
portal ms fcil de utilizar.
Google decidi incluir en su algoritmo de ordenamiento para el motor
bsqueda, el tiempo que tardan los sitios web en cargar.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

39) DIRECTRICES DE DISEO DE INTERACCIN


TIEMPO DE CARGA DE LAS PGINAS
Impacto
La razn la resumieron en las siguientes palabras:

Los sitios rpidos producen usuarios felices, y hemos visto en


nuestros estudios que cuando un sitio responde lentamente, los
visitantes gastan menos tiempo en l.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

39) DIRECTRICES DE DISEO DE INTERACCIN


TIEMPO DE CARGA DE LAS PGINAS
Impacto
Google y Yahoo, ofrecen herramientas para evaluar el rendimiento de
una pgina, y obtener recomendaciones. Estas herramientas son
gratuitas y estn disponibles en lnea.
Verifique que el desarrollo de su sitio ha contemplado la optimizacin
para reducir los tiempos de carga. Para esto, genere un reporte de los
anlisis de rendimiento realizados, y los cambios efectuados con base
en los resultados.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

40) DIRECTRICES DE DISEO DE INTERACCIN


EJEMPLOS EN LOS CAMPOS DE FORMULARIO
Impacto
Los ejemplos son una forma sencilla y clara de orientar al usuario. El
visitante entiende claramente la forma de diligenciar un formulario a travs
de ejemplos, especialmente en aquellos campos que requieren algn
formato especial.
Puede utilizar una corta descripcin de ejemplo bajo la etiqueta del
campo, para indicar al usuario cmo llenarlo. Asegrese de aplicar el estilo
grfico adecuado, para que el ejemplo se entienda como una informacin
auxiliar y el usuario pueda omitirla con facilidad si no la necesita.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

40) DIRECTRICES DE DISEO DE INTERACCIN


EJEMPLOS EN LOS CAMPOS DE FORMULARIO
Impacto
En el siguiente ejemplo, es posible ver
cmo el formulario cuenta con un
sistema de validacin automtico, en
tiempo real, y adicionalmente logra
ejemplificar cada uno de los campos
del formulario.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

40) DIRECTRICES DE DISEO DE INTERACCIN


EJEMPLOS EN LOS CAMPOS DE FORMULARIO
Impacto
Cercirese de que aquellos campos que deben ser diligenciados de
forma especial, o que pueden ser confusos cuentan con un ejemplo que
clarifique el modo en que un usuario debe llenar dicho campo. Verifique
que el estilo grfico utilizado muestra la informacin de ejemplo como
algo auxiliar, y que no se confunde fcilmente con la etiqueta del campo.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

41) DIRECTRICES DE DISEO DE INTERACCIN


PGINAS DE CONFIRMACIN
Impacto
Uno de los principios claves para garantizar una buena experiencia de
usuario es la retroalimentacin. La interaccin entre una persona y el
ordenador se constituye en un dilogo, por tanto el usuario espera del
computador una respuesta a cada accin realizada. Una buena
retroalimentacin es fundamental para que el usuario conozca en
todo momento el estado del sistema, y adems obtenga la seguridad
de que ste se encuentra en funcionamiento.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

41) DIRECTRICES DE DISEO DE INTERACCIN


PGINAS DE CONFIRMACIN
Impacto
En las aplicaciones interactivas es especialmente importante que exista
la retroalimentacin. En general cada accin que realice el usuario
debe mostrar un resultado claro y visible. Las pginas de confirmacin
son un caso particular de una accin que realiza el aplicativo para
retroalimentar al usuario. Un portal web que proporcione mecanismos
de interaccin debera proporcionar mensajes de confirmacin a
todas aquellas acciones en las que el usuario espera un respuesta.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

41) DIRECTRICES DE DISEO DE INTERACCIN


PGINAS DE CONFIRMACIN
Impacto
Asegrese de que el sitio web
provee pginas de confirmacin
para las acciones ms frecuentes de
los usuarios. Para ello, llene los
formularios que ofrece el sitio y
verifique que existe una pgina de
confirmacin con un mensaje claro.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


42) DIRECTRICES DE BSQUEDA
MOTOR DE BSQUEDA Y UBICACIN
Impacto

Aquellos usuarios que no usan las estructuras de navegacin del portal


o prefieren encontrar directamente lo que buscan, se ven beneficiados
de la presencia de un buscador interno.
Proveer este mecanismo alternativo de navegacin es vital para
muchos usuarios, y su presencia puede contribuir mucho para que el
usuario encuentre lo que busca. Un estndar de facto para la ubicacin
del cajn de bsqueda es en la parte superior derecha.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


42) DIRECTRICES DE BSQUEDA
MOTOR DE BSQUEDA Y UBICACIN
Impacto

Para que el cajn de bsqueda sea til, tambin es importante


garantizar que el tamao sea suficiente para que el usuario
introduzca frases completas. Algunos estudios estn de acuerdo en que
un tamao adecuado es 27 caracteres, sin embargo este tamao puede
crecer en funcin de los usuarios y el propsito del sitio.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


42) DIRECTRICES DE BSQUEDA
MOTOR DE BSQUEDA Y UBICACIN
Impacto

Asegrese de que en todas las pginas de su sitio se ofrece un motor de


bsqueda interno, verifique que est ubicado en la parte superior
derecha y que tenga un ancho mnimo de 27 caracteres.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


43) DIRECTRICES DE BSQUEDA

BSQUEDAS CON TRMINOS FAMILIARES Y ERRORES DE DIGITACIN

Impacto
En un sistema es inevitable que se produzcan errores, y en las consultas
a motores de bsqueda los errores de digitacin son quizs los ms
frecuentes. Aparte de los errores que se pueden producir cuando el
usuario introduce su consulta, tambin es posible que el usuario cometa
errores ortogrficos, escriba mal una palabra, o se refiera en trminos
diferentes a un mismo contenido.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


43) DIRECTRICES DE BSQUEDA

BSQUEDAS CON TRMINOS FAMILIARES Y ERRORES DE DIGITACIN

Impacto
Los motores de bsqueda internos deben tener la capacidad de
adaptarse a la forma como consultan los usuarios, deben permitir el
uso de trminos familiares, e incluso contemplar los errores de
ortografa y digitacin ms frecuentes.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


43) DIRECTRICES DE BSQUEDA

BSQUEDAS CON TRMINOS FAMILIARES Y ERRORES DE DIGITACIN

Impacto

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


44) DIRECTRICES DE BSQUEDA
SUGERENCIAS DE BSQUEDA
Impacto

Es probable que para un usuario resulte difcil traducir su necesidad en


una consulta. Tambin es frecuente que en las bsquedas el usuario
cometa errores de digitacin, ortografa, sintaxis entre otros.
Las sugerencias de bsqueda son una ayuda efectiva para los
usuarios. Aparecen para corregir las consultas que el usuario escribe
mal, pero tambin para orientar al usuario con resultados similares a lo
que consult.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

45) DIRECTRICES DE BSQUEDA


UBICACIN EN LOS 10 PRIMEROS RESULTADOS
Impacto
Los contenidos y recursos de un sitio web solo sern tiles si los
usuarios a los que se dirigen son capaces de encontrarlos.
Cada vez es ms comn que los usuarios prefieran acudir a un motor
de bsqueda que a una pgina directamente; por esta razn, los sitios
deben asegurar su presencia en los diez primeros resultados de
bsqueda, para todas las consultas relacionadas.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

45) DIRECTRICES DE BSQUEDA


UBICACIN EN LOS 10 PRIMEROS RESULTADOS
Impacto
Una estadstica en el 2006 demostr que tan solo el 7% de los usuarios
hojean los enlaces de la segunda pgina de resultados de un motor de
bsqueda. Si un sitio web no aparece en la primera pgina de resultados,
est perdiendo visitas y sobre todo la oportunidad de ayudar al usuario.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

45) DIRECTRICES DE BSQUEDA


UBICACIN EN LOS 10 PRIMEROS RESULTADOS
Impacto
La prctica ms bsica para garantizar que un sitio web aparezca como
resultado de una bsqueda, es titular adecuadamente los contenidos
para correspondan con la forma en la que buscan los usuarios.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

46) DIRECTRICES DE PRUEBAS DE USABILIDAD


EVALUACIN HEURSTICA
Impacto
La evaluacin Heurstica es una metodologa de evaluacin sin
participacin de los usuarios, propuesta por Molich y Nielsen en 1990.
Esta evaluacin, es realizada por un grupo de expertos con base en una
serie de principios, previamente establecidos, llamados principios
heursticos. Los principios deben estar fundamentados en el
conocimiento desarrollado por expertos en Usabilidad, respecto a la
forma como los usuarios usan la web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

46) DIRECTRICES DE PRUEBAS DE USABILIDAD


EVALUACIN HEURSTICA
Impacto
De all la importancia de considerar las directrices y los estndares de
facto como un elemento clave al momento de evaluar sin la presencia
del usuario.
Evaluar el impacto que generan en el usuario los errores de Usabilidad.
Escoger profesionales en Usabilidad para llevar a cabo la Evaluacin.

Incluir en el equipo de evaluacin ms de un experto.


Calificar tambin la frecuencia con que aparecen los errores.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
El Test de Usuario es la prueba ms representativa del Diseo
Centrado en el Usuario (DCU). Consiste bsicamente en solicitar a un
usuario que realice una tarea, o intente descifrar un sitio web, y observar
su comportamiento.
Los datos recopilados de la observacin de varios usuarios permiten
medir en varios aspectos el nivel de usabilidad y la experiencia que
tienen los usuarios al interactuar con el sitio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Realizar un test con usuarios cuanto antes y constantemente.

Las pruebas de usuario son ms efectivas cuando se realizan


constantemente y durante todo el proceso de diseo y desarrollo.
Aunque en muchos proyectos se tiende a pensar que es necesario tener
un producto final para poder probarlo, los beneficios de las pruebas de
usuario son mayores en las etapas tempranas, sobre todo por la
posibilidad de reducir costos en implementaciones fallidas.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
No es necesario un laboratorio.

Para hacer pruebas de usuario no se requiere un laboratorio


avanzado. An en una prueba sencilla se pueden obtener datos e
informacin til para mejorar un sitio web.
Las pruebas podrn realizarse en cualquier entorno en que el usuario se
sienta
cmodo, donde exista la posibilidad de tomar notas y
simplemente observar la forma como el usuario se comporta frente al
sitio web.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Llevar a cabo una grabacin de las pruebas, aunque no es
ndispensable, facilita mucho la labor de anlisis y permitira al
equipo revisar las pruebas una y otra vez para aprovecharlas. Se
puede hacer uso de herramientas computacionales que permita la
grabacin de la pantalla, e incluso hay software que permite capturar
imgenes de la cmara, con lo cual se pueden registrar las expresiones
del usuario durante el test.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Se trata de probar el sitio no a los usuarios.

El usuario es el actor principal del diseo. No se trata de probar si un


usuario es capaz de utilizar o no el portal; por el contrario, las pruebas
buscan identificar la capacidad que tiene el sitio para responder a las
necesidades de sus usuarios.
El facilitador o la persona que conduce la prueba debe asegurarse de
dejarle claro al usuario, antes de comenzar el test, que la intencin no es
probar sus capacidades, sino la efectividad del sitio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Establecer adecuadamente las tareas y preguntas.

Para obtener resultados satisfactorios es importante que las tareas y


preguntas que se realizarn durante el test, correspondan adecuadamente
con las necesidades y objetivos de los usuarios previamente identificados
en las fases de planeacin del sitio web.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Definir previamente los criterios de medicin.

Los resultados de un test de usuario podran clasificarse genricamente


como cuantitativos y cualitativos. Son resultados cualitativos las
conclusiones que puede hacer el equipo de desarrollo al observar la
prueba y que son difciles de cuantificar.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Por ejemplo el usuario no ve el botn de registro, su color similar al
fondo hace que pase desapercibido. Tambin lo son los comentarios
de los usuarios, que muchas veces se solicitan para tener una medida de
satisfaccin.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
No es necesario probar con grandes cantidades de usuarios.

En los orgenes de las pruebas de usuario, se tena la idea de que su costo


era elevado debido a la gran cantidad de usuarios que deban
reclutarse.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Jakob Nielsen realiz una serie de planteamientos en los que defini lo
que l llamaba la Ingeniera de Usabilidad de Descuento (Discount
Usability Engineering), con la cual se podan obtener la gran mayora de
los resultados, al distribuir de forma eficiente la inversin en pruebas
de usuario a travs de todo el proceso de diseo.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
En resumen, los estudios de Nielsen demuestran que es mucho ms eficiente
realizar varias rondas de prueba con 5 usuarios, que hacer pruebas al final
con una gran cantidad de usuarios.
Una prueba debera contar con al menos tres usuarios para identificar cerca
del 70% de los errores de usabilidad; extender la muestra a cinco usuarios
permitira una cifra cercana al 85%. A medida que se agreguen ms usuarios
se irn descubriendo ms errores, pero en una menor proporcin debido a que
se ver la repeticin de los errores anteriores una y otra vez.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Seleccionar adecuadamente los usuarios.

Las pruebas sern ms cercanas a la realidad en la medida que se


pruebe con usuarios reales. Un error sera llevar a cabo pruebas con
personas que pertenecen al equipo web, esto debido a que su
participacin en el diseo limita completamente su capacidad de
comportarse como un usuario convencional.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Deberan seleccionarse personas que pertenezcan al pblico objetivo
al que se dirige el sitio web. La informacin de los de perfiles de
usuario identificados en la fase de diseo, as como los estudios de
personajes y escenarios son claves en la definicin de la muestra.

Incluir entre los participantes a personas de diversos gneros y


orgenes podra segn el caso generar resultados cercanos a la
realidad y nutrir mucho ms las pruebas de usuario.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Es una excelente idea que el equipo de desarrollo e incluso los
tomadores de decisin observen las pruebas.
El informe final de las pruebas de usuario jams podra reemplazar la
experiencia de ver las pruebas en vivo. Mientras sea posible hacer que
el equipo web e incluso los tomadores de decisin observen las
pruebas debe intentarse.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Entre mayor nmero de personas observen una prueba de usuario, es
mayor la probabilidad de que ningn error pase desapercibido. Sin
embargo, la presencia de ms de un observador puede llegar a
incomodar al usuario. Siempre se puede hacer uso de la tecnologa de
grabacin para que un grupo de personas observen remotamente la
prueba desde otra lugar evitando generar al usuario cualquier distraccin
o molestia.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
El equipo que lleva a cabo las pruebas no debe estar compuesto
necesariamente por expertos.
Si bien la conduccin de unas pruebas de usuario por parte de expertos
puede generar mejores resultados, la mayora de las observaciones de
las pruebas de pueden ser comprendidas y aprovechadas por
cualquier miembro del equipo de desarrollo.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

47) DIRECTRICES DE PRUEBAS DE USABILIDAD


TEST DE USUARIO
Impacto
Los conocimientos de un experto resultan tiles para encontrar
errores que quizs no sean identificables a simple vista, no obstante, la
presencia de un experto no puede ser excusa para no hacer las pruebas.
Con prctica, una persona que tenga buenas capacidades de
comunicacin podra orientar efectivamente un test de usuario.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES

48) DIRECTRICES DE PRUEBAS DE USABILIDAD


DISEO Y EVALUACIN ITERATIVOS
Impacto
Garantice que en todo el proceso de diseo y desarrollo del sitio web se
realicen pruebas y evaluaciones de usabilidad para mejorar el diseo
de forma iterativa. Genere un plan de pruebas y evaluaciones, en el que
se especifiquen el tipo de pruebas y fases del diseo en las que se
realizarn dichas pruebas.
Asegrese de que las decisiones de cambios crticos o importantes en
el sitio web, estn argumentadas slidamente en pruebas realizadas con
usuarios.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


49) DIRECTRICES DE CONTENIDO
CONTENIDO TIL
Impacto

Por contenido debe entenderse toda la informacin proporcionada


a travs del sitio, en cualquier formato (textos, audios, videos,
imgenes, PDF, infografas, entre otros).
Lejos de entrar en la polmica sobre la trillada frase el contenido es el
Rey, la utilidad de los contenidos forma parte esencial de un sitio web
del Estado.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


49) DIRECTRICES DE CONTENIDO
CONTENIDO TIL
Impacto

Revise la documentacin de Arquitectura de Informacin del sitio y


determine si las necesidades de contenido de los usuarios son
satisfechas en el desarrollo del sitio actual.
En caso de no existir documentacin, el evaluador deber establecer las
necesidades para evaluar la utilidad del contenido.
Verifique que los contenidos correspondan, adems, al lenguaje de los
usuarios, que sean fciles de comprender y directos.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


50) DIRECTRICES DE CONTENIDO
PIRMIDE INVERTIDA
Impacto

Asegrese de que los textos de su sitio web son directos y exponen


las ideas ms importantes al principio. Verifique que no haya un uso
excesivo de texto de relleno, y que se emplea la estructura de pirmide
invertida para estructurar la informacin.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


51) DIRECTRICES DE CONTENIDO
TTULOS Y ENCABEZADOS
Impacto

Los ttulos empleados en el contenido son un factor importante para facilitar al


usuario su comprensin. El uso adecuado del titulado, adems de proveer una
rpida idea de las ideas que se quieren transmitir, facilita el escaneo de texto.
Cuando se trata de contenidos digitales, los ttulos deben ser especialmente
claros y directos. No se trata de generar textos con juegos de palabras, o
metforas que puedan resultar difciles de entender, por el contrario, resulta
mas eficiente el uso de lenguaje sencillo y cercano al usuario.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


51) DIRECTRICES DE CONTENIDO
TTULOS Y ENCABEZADOS
Impacto

Verifique que los contenidos de su sitio contienen ttulos claros y


directos, que ayudan a comprender rpidamente la informacin.
Adems cercirese que los ttulos se usan de forma adecuada a nivel
semntico y estructural.
En general es deseable que las pginas con grandes cantidades de
informacin sean divididas en sub-secciones y tituladas de forma
adecuada.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


52) DIRECTRICES DE CONTENIDO
LISTAS
Impacto

Identifique en el cuerpo del texto si hay agrupaciones de elementos


que sean susceptibles de estructurar en cualquiera de los tres formatos
de lista disponibles en HTML. Verifique si se estn utilizando las
etiquetas adecuadas para cada tipo de lista:
<ol>, <ul> y <dl>.
Listas ordenadas, Listas sin orden especfico y Listas de definiciones

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


53) DIRECTRICES DE CONTENIDO
ESCANEADO DE CONTENIDO
Impacto

El modo en que la gente lee las pginas web no es palabra por


palabra. En cambio, escanean la pgina saltando palabras y oraciones.
Nielsen plantea en su columna AlertBox que en una investigacin que
realiz sobre cmo lee la gente, encontr que el 79% de usuarios de la
prueba escaneaba y saltaba visualmente de bloque en bloque.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


53) DIRECTRICES DE CONTENIDO
ESCANEADO DE CONTENIDO
Impacto

Esta forma de lectura exige que el texto est formateado de tal


manera que se resalten las palabras e ideas clave, dejando en un plano
inferior toda aquella informacin complementaria, que ser leda por el
usuario, una vez identifique a travs del escaneo que efectivamente esta
pgina responde a su necesidad informativa.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


53) DIRECTRICES DE CONTENIDO
ESCANEADO DE CONTENIDO
Impacto

Se sugiere entonces utilizar enfatizar palabras y frases a travs de


las etiquetas <em> (nfasis) y <strong> (nfasis fuerte). Sin
embargo, la mejor forma de estructurar el contenido, ser precisamente
el uso de las etiquetas adecuadas de HTML. Por ejemplo, los
encabezados <h1>, las listas desordenadas <ul>, los prrafos <p>, las
citas en bloque <blockquote>, las tablas <table>, etc.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


53) DIRECTRICES DE CONTENIDO
ESCANEADO DE CONTENIDO
Impacto

Ser funcin del diseador de interfaz ajustar el diseo de cada


etiqueta, en funcin del estilo grfico del sitio web y potenciarlo para
lograr un diseo con armona que facilite el escaneo inicial de un
usuario.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


54) DIRECTRICES DE CONTENIDO
VNCULOS ROTOS
Impacto

Los vnculos rotos son aquellos que no tienen una ruta vlida, bien sea
porque se encuentra mal formada o porque el URL de destino dej de
existir. Suele pasar frecuentemente cuando erradamente se toma la
decisin de modificar los URL de un sitio web, debido a cambios en el
software de gestin de contenidos (CMS), o por medidas de
posicionamiento en motores de bsqueda (SEO) o por simplemente un
rediseo del sitio web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


54) DIRECTRICES DE CONTENIDO
VNCULOS ROTOS
Impacto

Utilice validadores automticos


de vnculos rotos, como el del
W3C para establecer el nmero de
vnculos no disponibles que tiene
determinada pgina. Realice este
mismo procedimiento con una
muestra de pginas internas del
sitio web.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


55) DIRECTRICES DE CONTENIDO
CONTENIDO ENCONTRABLE
Impacto

Es evidente que la mayora de usuarios de internet usa los motores de


bsqueda como mecanismo principal de navegacin. Sin importar cuan
buenos sean los contenidos de un sitio web, si no es posible
encontrarlos es como si no existieran. El posicionamiento en buscadores
es sin duda un tema amplio y que puede involucrar una gran cantidad
de variables.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.2 PRINCIPIOS Y DIRECTRICES


56) DIRECTRICES DE CONTENIDO
CONTENIDO ENCONTRABLE
Impacto

Verifique que los contenidos de sus sitios estn optimizados para ser
encontrados en motores de bsqueda. Para ello, consulte las
principales frases empleadas por los usuarios para buscar sus
contenidos, e intente incluirlas de forma armnica en los contenidos de
su sitio. Utilice todo tipo de informacin relacionada con la forma como
buscan los usuarios, ya sean estadsticas de google, historial de
bsquedas en su sitio, o cualquier otra, que le permita optimizar los
ttulos y el lenguaje empleado en su sitio.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB


A) IMPORTANCIA

En la actualidad, el diseador grfico ha tenido que incursionar de


manera contundente en la comunicacin por la web, ya que su dominio
sobre el conocimiento del color, tipografas, simetras, espaciados y un
sinfn de cosas que la gente comn desconoce, hace que el diseador
grfico sea indispensable para el xito de lo que se quiere comunicar.

El diseador web tiene la misin de enlazar al usuario con el mundo


informativo de manera eficaz y agradable.
Source: GABRIELA BUSTOS ROJO (2012).
TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB


A) IMPORTANCIA

La hipermedia permite, adems de tener acceso a la informacin,


satisfacer los requerimientos y gustos de millones de navegantes. Por lo
tanto es primordial tener un criterio de diseo antes de crear un sitio.
Considerando lo anterior, para disear pginas web es necesario
conocer varias disciplinas tales como: informtica, comunicacin, diseo
y ciberntica. Debe enfatizarse en el hecho de que la presentacin de la
informacin por s sola no garantiza el xito del mensaje, precisa de
comunicacin, y esta a su vez de un buen diseo para cumplir con el
objetivo.
Source: GABRIELA BUSTOS ROJO (2012).
TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB


A) IMPORTANCIA

Un mal diseo tiene las siguientes caractersticas:

No saber lo que se quiere comunicar.


Falta de conocimiento del significado psicolgico de los elementos.
El favoritismo por lo esttico.
La no valoracin de lo funcional o viceversa

Source: GABRIELA BUSTOS ROJO (2012).


TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Antes de proyectar o disear una pgina web, es necesario seguir los
siguientes lineamientos en la etapa de creacin:

En primer lugar, es necesario hacer un anlisis de la informacin que


contendr la pgina. Esto es, hay que informarse perfectamente sobre
la temtica del contenido.

Source: GABRIELA BUSTOS ROJO (2012).


TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Analizar el sector a quien ser dirigido el mensaje y poder identificar
qu tipo de sensaciones e ideas queremos transmitir, para lo cual
contamos con recursos como el uso de tipografas, el color y la
composicin, para que todo esto se produzca de una manera clara y
concisa.

Source: GABRIELA BUSTOS ROJO (2012).


TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Debemos fijar los objetivos que queremos alcanzar: es decir, que
debemos definir si lo que se quiere es educar, informar, vender, etc.

Ya con los objetivos definidos, es importante recopilar los elementos


que contendr nuestra pgina, como son textos, imgenes, grficas,
etc., todo el material grfico que sea necesario para poder, entonces
organizarlos.

Source: GABRIELA BUSTOS ROJO (2012).


TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Realizar una estructura con toda la informacin y elementos
recopilados. Es recomendable realizar un boceto para poder visualizar
de manera ms clara todos los elementos que se incluirn (texto,
imgenes, botones, hipervnculos), no olvidar los bocetos de las pginas
con las que estar enlazada.

Source: GABRIELA BUSTOS ROJO (2012).


TEORIAS DEL DISEO GRFICO

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Al reconocer las particularidades del usuario destinatario, el sitio web
ajusta su discurso y los recursos aplicados, elaborando y reelaborando las
estrategias comunicacionales.
Este permanente reajuste es lo que le permitir pulir los procesos de
contacto, encuentro e interaccin. Imaginemos que el sitio web sobre
apicultura se interesa en captar pblico adulto para vender un curso de
capacitacin en lnea: qu palabras no podran faltar en un anuncio
publicitario? Qu palabras estaran completamente de ms?
Source: JULIETA ELIZABETH SANTOS
COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Poner en funcionamiento un sitio web requiere la puesta en relacin de
varios elementos. Ya mencionamos que el punto de partida es la
seleccin de un tema acotado y bien definido sea este comercial,
educativo, informativo, etc., la identificacin de los intereses ligados al
tema y el reconocimiento de los usuarios con quienes deseamos
establecer contacto.

Source: JULIETA ELIZABETH SANTOS


COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Para clasificar y agregar informacin al sitio es importante elegir
criterios razonables. Es esperable de un sitio web que tenga distintas
secciones y subsecciones, donde el usuario acceda a cuerpos de
informacin agrupados por afinidad, especificidad y pertinencia.
No existe una forma nica de clasificar los documentos, pero s es
importante que el usuario pueda decodificar rpidamente el criterio
que se aplica al sitio.

Source: JULIETA ELIZABETH SANTOS


COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
La estructura del sitio web es lo que facilita al usuario visualizar la
jerarquizacin de contenidos, recorrer los enlaces sugeridos y transitar
por las pginas y secciones, de acuerdo con los sentidos que desea
imprimir a su navegacin.

Qu diseo y estilo grfico sern ms apropiados al tema y los


usuarios?
Sobre gustos, no hay nada escrito, dice el refrn.
Source: JULIETA ELIZABETH SANTOS
COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Quien planifica un sitio web debe asumir que la belleza del sitio no le
garantizar la calidad de contenidos; y por el contrario, un sitio con
excelentes materiales sin un formato y diseo adecuados difcilmente
resultar atractivo para los usuarios.

La pregunta sobre qu queremos comunicar debe responderse con


claridad, pues la respuesta habla de la identidad del sitio.

Source: JULIETA ELIZABETH SANTOS


COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
La identificacin de los propsitos y objetivos del sitio permitir a
su creador/a realizar una evaluacin sistemtica del crecimiento,
desarrollo y xito del sitio.
Un diseo puede ser fantstico, pero si el contenido es obsoleto el usuario
rpidamente abandonar la visita. Si hay que priorizar: se debe
jerarquizar el contenido por sobre el diseo.

Source: JULIETA ELIZABETH SANTOS


COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Todo sitio debe ser actualizado con frecuencia, agregando entradas y
contenidos de forma sistemtica.
Esto es algo que los usuarios detectan rpidamente:
1. Una pgina abandonada es como un diario viejo.
2. La pgina web debe ser de rpida navegacin, fcil de cargar, y
mostrar informacin pertinente al tema.
3. Una vez que est habilitado el sitio, es recomendable comprobar
que sea compatible con varios navegadores.
Source: JULIETA ELIZABETH SANTOS
COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

B) ESTRUCTURA Y PLANIFICACIN
Para dinamizar la pgina, reforzar el vnculo con los usuarios y ganar
nuevos visitantes, es recomendable crear un boletn que informe a los
usuarios frecuentes sobre las novedades del sitio: nuevas entradas,
secciones, promociones, vnculos con otras instituciones o enlaces de
inters, etctera.

Source: JULIETA ELIZABETH SANTOS


COMO PLANIFICAR Y DISEAR UN SITIO WEB

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

C) DISEO DE INTERFAZ DE USUARIO


El diseo de interfaz de usuario en el terreno web es el diseo de sitios
web enfocado en la experiencia de usuario y la interaccin.
El diseo de interfaz involucra las disciplinas y conceptos propios del
diseo, y los dirige a proporcionar al usuario interfaces tiles y
atractivas. El papel de la interfaz en los sitios web es fundamental, ya
que es este el mecanismo por medio del cual el usuario recupera,
consulta e interacta con la informacin.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

C) DISEO DE INTERFAZ DE USUARIO


A diferencia de un diseador grfico convencional, el Diseador de
Interfaz debe comprender los estndares de facto y los conceptos
propios de la usabilidad y accesibilidad para hacer de la interfaz un
elemento que favorezca al usuario y lo conduzca efectivamente hacia lo
que necesita.
Los usuarios gastan la mayor parte del tiempo en otros sitio web,
razn por la cual el diseador debe entender que el respeto por los
estndares es clave para facilitar la comprensin y uso del sitio web por
parte de quien lo visita.
Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)
DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

C) DISEO DE INTERFAZ DE USUARIO


Un buen diseador de interfaz tiene la capacidad de comprender con
precisin las necesidades de los usuarios, y hacer del diseo un elemento
que aporte a la experiencia de usuario y el cumplimiento de sus
objetivos, independientemente de sus preferencias o necesidades
personales.

Source: MARIO CARVAJAL JUAN SAAB (ASTROLABIO)


DIRECTRICES DE USABILIDAD PARA SITIOS WEB DEL ESTADO COLOMBIANO.

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

Normas mnimas para facilitar el acceso va conexin telefnica


La visualizacin de los sitios web depende de la transmisin de datos
entre dos computadores, por lo que es importante optimizar la cantidad
de informacin que se enva entre ambos, de tal manera que quien la
recibe pueda verla adecuadamente.

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

1. Peso de las Pginas


Los sitios web deben tener un peso mximo permitido por pgina que no
supere una cantidad razonable de kilobytes (kb) que impidan su
visualizacin. En este sentido, lo razonable depender directamente del tipo
de sitio que se est desarrollando y de la conexin con la que cuente la mayor
parte de los usuarios.

Por ejemplo, si se trata de un sitio dedicado a usuarios de regiones extremas


que tienen una conexin muy lenta, 50 kb ser un tamao considerable,
respecto de si se compara eso con usuarios que se conecten en una ciudad del
centro del pas.
Source: STEVE KRUG
NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

Las normas internacionales al respecto indican que un usuario no


esperar ms de:
a) 5 segundos para que aparezca algo visible en la pantalla
b) 10 segundos para que aparezca algo legible en la pantalla
c) 30 segundos hasta hacer un click hacia otra parte del sitio o hacia
otro sitio

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

2. Diagramacin de las Pginas


Aunque existen nuevas tecnologas para la diagramacin de las pginas
web (como las Hojas de Cascadas de Estilo o CSS), lo habitual es que los
contenidos que se muestran se dispongan en tablas con el fin de que
cada elemento ocupe el lugar que se le ha asignado dentro de la
pgina.

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

Al respecto se recomienda construir una estructura de presentacin de


los contenidos que se pueda fragmentar en varias tablas.
Source: STEVE KRUG
NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

Uso de Imgenes de background


Una tecnologa muy popular que se puso de moda en el ao 1996
cuando el software Netscape Navigator lo implement, fue el uso de
imgenes como fondos o backgrounds de las pginas web.
Salvo casos en que sea estrictamente necesario, esta prctica debe ser
dejada de lado porque su nico efecto es el de agregar un paso
excesivo a los sitios, afectando el tiempo de descarga y acceso a la
informacin.
Source: STEVE KRUG
NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS MNIMAS PARA FACILITAR EL ACCESO VA CONEXIN TELEFNICA

Uso de meta tags Adecuados


Los meta tags son marcas en lenguaje html que van en la parte
superior del cdigo fuente de cada pgina, a travs de las cuales se
entrega a los sistemas de indexacin y bsqueda, la informacin mnima
para hacer una correcta indexacin del contenido que incluye.

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS PARA INCORPORAR ELEMENTOS GRFICOS Y MULTIMEDIALES

Cuando en un Sitio Web se incorporan elementos grficos y


multimedia, se deben seguir normas muy concretas para evitar que su
peso afecte el desempeo de la pgina cuando sea solicitada por los
usuarios del Sitio Web.
Optimizar el peso de las imgenes: se debe bajar al mximo posible el
peso de las imgenes; cuando esto no sea posible hacerlo por su
tamao, se debe reducir el nmero de colores disponibles y la
resolucin (72 dpi es la norma).
Source: STEVE KRUG
NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS PARA INCORPORAR ELEMENTOS GRFICOS Y MULTIMEDIALES

Elegir el formato adecuado: ante un mismo tamao de imagen, el peso


vara dependiendo de si son procesadas para desplegarse en formato
GIF respecto del formato JPG. Normalmente una imagen con colores
planos (como un icono) tendr un peso menor si se guarda en GIF
respecto de si es guardada en JPG. Lo contrario ocurrir con una imagen
con muchos colores diversos (como una foto). Se recomienda probar
ambos formatos para determinar el ptimo.

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS PARA INCORPORAR ELEMENTOS GRFICOS Y MULTIMEDIALES

Ubicacin de imgenes: se recomienda usar un solo directorio para


almacenar las imgenes repetidas, tales como los iconos y otros
elementos grficos que son utilizados en diferentes pginas del sitio. Al
ubicarlos en un directorio nico se puede aprovechar la funcin de
cach del programa visualizador para mejorar el rendimiento de las
pginas. Para efectos de seguridad, se recomienda impedir que un
programa visualizador pueda ver el contenido de dicho directorio o
cualquier otro dentro del sitio.

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS PARA INCORPORAR ELEMENTOS GRFICOS Y MULTIMEDIALES

Usar el atributo ALT en imgenes: en el cdigo HTML se debe usar el


atributo ALT (texto alterno) en las imgenes para que ste se
despliegue antes que las imgenes y facilite de esta forma la
comprensin del contenido a los usuarios.
Imgenes con alto y ancho: las imgenes (dibujos, fotos, iconos,
botones) deben tener tamao para el ancho y el alto, para que el
programa visualizador pueda dejar reservado el espacio para dicho
contenido antes de que se realice su despliegue visual.
Source: STEVE KRUG
NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS PARA INCORPORAR ELEMENTOS GRFICOS Y MULTIMEDIALES

Ofrecer plug-ins: cuando se utilizan archivos multimediales que


requieren el uso de plugins (programas visualizadores especiales) para
revisarlos, se recomienda poner el programa para ser bajado u ofrecer un
enlace a lugares donde obtenerlo.
Esto es especialmente vlido en sitios que ofrecen presentaciones de
portada en tecnologa Flash, las cuales deben ser anunciadas para que
el usuario tenga la opcin de verlas o avanzar directo al sitio.

Source: STEVE KRUG


NO ME HAGA PENSAR

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Versin: 1 (12-sep-2014)

1.3 DISEO WEB

RECOMENDACIONES DE BUENAS PRCTICAS

NORMAS PARA INCORPORAR ELEMENTOS GRFICOS Y MULTIMEDIALES

Indicar el peso de los archivos: cuando se ofrecen elementos grficos


o audiovisuales para que sean bajados al computador personal por el
usuario (especialmente en Video, Audio, Flash u otros), se recomienda
indicar el peso de los mismos, con el objeto de ofrecerle informacin
til para efectuar la operacin.

Source: STEVE KRUG


NO ME HAGA PENSAR

También podría gustarte