Diseño Web - Unidad 1

DISEO WEB
UNIDAD 1 INTRODUCCIN Y PRINCIPIOS DE ESTILO
Catedrtico: Ing. Manuel Vergel Escamilla

Correo: manuel_vergel@hotmail.com
Villahermosa, Tabasco, Mxico. 2014
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
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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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

MANUEL VERGEL ESCAMILLA.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

INTERFAZ MODO TEXTO Y MODO GRFICO
a) Modo texto
b) Modo Grfico
Source: NIO, J. (2004). SISTEMAS OPERATIVOS MONOPUESTO, INFORMATICA Y
COMUNICACIONES. MCGRAW HILL.
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.

Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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
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

Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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. .
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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.
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
Versin: 1 (12-sep-2014)

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.

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.
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
1.1.4 DISEO WEB

EJEMPLOS

Versin: 1 (12-sep-2014)

EJEMPLOS

Versin: 1 (12-sep-2014)

EJEMPLOS

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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%.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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%.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)
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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)
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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)
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).
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)
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

Versin: 1 (12-sep-2014)
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.

Versin: 1 (12-sep-2014)
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.

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)
6) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NAVEGACIN GLOBAL CONSISTENTE

Impacto

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)
7) DIRECTRICES DE ARQUITECTURA DE INFORMACIN NAVEGACIN DE CONTEXTO

Impacto

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

TAGLINE
Impacto

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)

UBICACIN DEL LOGOTIPO
Impacto

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

INTERFACES EN MOVIMIENTO
Impacto

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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;

Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

ANCHO DEL CUERPO DE TEXTO
Impacto
120 cpl
70 cpl
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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).
Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

TEXTO SUBRAYADO
Impacto

Versin: 1 (12-sep-2014)

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;

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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:

Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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...
Versin: 1 (12-sep-2014)

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" />

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

Impacto

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)
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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.
Versin: 1 (12-sep-2014)

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.

Versin: 1 (12-sep-2014)

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.
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.
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.
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

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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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.

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.

Versin: 1 (12-sep-2014)
1.3 DISEO WEB

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.
Versin: 1 (12-sep-2014)
1.3 DISEO WEB

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.

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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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
Versin: 1 (12-sep-2014)
1.3 DISEO WEB
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

Idioma

Diseño Web - Unidad 1

Cargado por

Información del documento

Descripción:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Descripción:

Copyright:

Formatos disponibles

Diseño Web - Unidad 1

Cargado por

Descripción:

Copyright:

Formatos disponibles

DISEO WEB

UNIDAD 1 INTRODUCCIN Y PRINCIPIOS DE ESTILO

Catedrtico: Ing. Manuel Vergel Escamilla

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

Source: Programacin en Basic .Net

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

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

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

Concluye diciendo que la interface hace posible la accin eficaz para

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.1 QU ES UNA INTERFAZ?

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.2 EVOLUCIN DE LA INTERFAZ DE

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

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo

1.1.2 EVOLUCIN DE LA INTERFAZ DE

Catedrtico: Ing. Manuel Vergel Escamilla

Asignatura: Diseo Web

Unidad: 1 Introduccin y principios de estilo