Download principios basicos del diseño web

INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
PRINCIPIOS BASICOS DEL DISEÑO WEB
Un diseñador web siempre debe procurar realizar webs claros y fácilmente navegables
por el usuario que visita el sitio, de manera que disponga de la información que le
quiere hacer llegar de una manera clara y sencilla.
El diseño web es una técnica que se basa en una serie de reglas que sirven para crear
algo que resulte útil y atractivo a la vez.
El proceso inicial para hacerlo implica elegir un tipo determinado de audiencia y unos
objetivos claros.
Durante la planificación de un proyecto, debe tenerse en cuenta que es muy probable
que exista algo similar en la web, lo que hace que el diseñador se vea obligado a hacer
un buen diseño para poder competir. El diseño web tiene dos partes bien diferenciadas:
la funcionalidad o usabilidad y la estética. Ambas son imprescindibles, ya que una
página funcional pero con mala estética no atraerá la atención de posibles usuarios o
visitantes, mientras que una página muy bonita pero que funciona mal hará que los
visitantes que lleguen atraídos por la buena estética del sitio no regresen a él por no
encontrar lo que necesitan o les resulte difícil.
Y de la mano del diseño puramente gráfico del sitio, va toda una planificación de los
contenidos del sitio, las estructura de los menús, cómo será la interacción con el
usuario, rutas de navegación, arquitectura de información y en definitiva, todo un
diálogo que ha de establecerse entre el sitio web y el visitante, que debe pensarse y
planificarse para que éste ultimo entiende de qué va el sitio y sepa usarlo y lo sabe
hacer cualquiera (usabilidad). El diseño web es mucho más que darle color y estilo a
una página web.
La Organización Internacional para la Estandarización (ISO) ofrece dos definiciones de
usabilidad:
ISO/IEC 9126:
“La usabilidad se refiere a la capacidad de un software de ser comprendido, aprendido,
usado y ser atractivo para el usuario, en condiciones específicas de uso”
ISO/IEC 9241:
“Usabilidad es la eficiencia y satisfacción con la que un producto permite alcanzar
objetivos específicos a usuarios específicos en un contexto de uso específico”
La distinción entre usabilidad – facilidad de uso – y accesibilidad, es difícil y en muchos
casos innecesaria. Además, la accesibilidad debe ser entendida como parte de y al
mismo tiempo requisito para la usabilidad, puesto que la accesibilidad no sólo implica la
necesidad de facilitar acceso, sino también la de facilitar el uso.
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
En informática, la usabilidad está muy relacionada con la accesibilidad, hasta el punto
de que algunos expertos consideran que una forma parte de la otra o viceversa. Uno de
estos expertos es Jakob Nielsen, el cual definió la usabilidad en el 2003 como “un
atributo de calidad que mide lo fáciles de usar que son las interfaces web”. Otra
definición clarificadora es la de Redish (2000), para quien es preciso diseñar sitios web
para que los usuarios sean capaces de “encontrar lo que necesitan, entender lo que
encuentran y actuar apropiadamente… dentro del tiempo y esfuerzo que ellos
consideran adecuado para esa tarea”.
La usabilidad implica hacerse preguntas como las siguientes, que pueden responderse
realizando análisis de usuarios / visitantes y tareas al planificar un proyecto web:
¿Quiénes son los usuarios, cuáles sus conocimientos, y qué pueden aprender?
¿Qué quieren o necesitan hacer los visitantes?
¿Cuál es la formación general de los usuarios?
¿Cuál es el contexto en el que el visitante está trabajando?
¿Qué debe dejarse a la máquina? ¿Qué al usuario?
Otras consideraciones incluyen:
¿Pueden realizar fácilmente sus tareas previstas? Por ejemplo, ¿pueden realizar las
tareas previstas a la velocidad esperada?
¿Cuánta preparación necesitan los visitantes?
¿Qué documentación u otro material de apoyo están disponible para ayudar al usuario?
¿Puede éste hallar las respuestas que buscan en estos medios?
¿Cuáles y cuántos errores cometen los usuarios cuando interactúan con el producto?
¿Puede el visitante recuperarse de los errores? ¿Qué ha de hacer para ello? ¿Ayuda el
producto a recuperarse de los errores? Por ejemplo, ¿muestra el sofware mensajes de
error informativos y no amenazantes?
¿Se han tomado medidas para cubrir las necesidades especiales de los usuarios con
discapacidades? (Es decir, ¿se ha tenido en cuenta la accesibilidad?)
Todos estos temas te permitirán, además, fidelizar visitas, es decir, hacer que tus
visitantes vuelvan una y otra vez, puesto que al ponerles fácil la navegación por tu sitio
mejorarás mucho la imagen de tu web.
PRINCIPIOS BÁSICOS EN LOS QUE SE BASA LA USABILIDAD
Facilidad de Aprendizaje: facilidad con la que nuevos usuarios desarrollan una
interacción efectiva con el sistema o producto. Está relacionada con la sintetización,
familiaridad, la generalización de los conocimientos previos y la consistencia.
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
Flexibilidad: relativa a la variedad de posibilidades con las que el usuario y el sistema
pueden intercambiar información. También abarca la posibilidad de diálogo, la
multiplicidad de vías para realizar la tarea, similitud con tareas anteriores y la
optimización entre el usuario y el sistema.
Robustez: es el nivel de apoyo al usuario que facilita el cumplimiento de sus objetivos.
Está relacionada con la capacidad de observación del usuario, de recuperación de
información y de ajuste de la tarea al usuario.
PRINCIPIOS QUE RIGEN EL DISEÑO WEB
Balance – Es el equilibrio que debe existir entre los diferentes elementos que
componen la página. Imágenes y texto, elementos grandes y pequeños, zonas oscuras
y claras, etc., deben estar balanceadas de forma tal que la página no solo resulte
atractiva, sino que además logre enfocar la atención del usuario sobre aquellos
elementos que nos interesa que lo haga.
Contraste – El contraste es una forma de distinguir los elementos que deseamos
resaltar. Diferencias en la tipografía, diferencias en las formas (círculos, cuadrados,
rectángulos, etc.), diferencias de tamaño (una imagen más grande con otras más
pequeñas, por ejemplo), texturas y fondos diferentes, etc., son algunos de los
contrastes que pueden emplearse para enfocar la atención del usuario sobre los
elementos más importantes de la página
Énfasis – Es una forma de distinguir algo dentro de un elemento. Un ejemplo de esto
es lo que sucede con este texto, donde los títulos se encuentran resaltados así como
algunas palabras o frases, de forma que facilita la comprensión de lo que se quiere
transmitir.
Repetición o ritmo – El ritmo o repetición es una forma de establecer patrones con los
que se ordenan los elementos de la página. Si los elementos de una página web siguen
un patrón determinado, es mucho más sencillo para las personas comprender el
contenido y acceder a la mayor parte del mismo en poco tiempo. Este punto es clave
para mantener la usabilidad del sitio.
Proximidad o unidad – Este concepto se refiere a colocar juntos o próximos los
elementos que estén relacionados, formando unidades visuales que brindan coherencia
al contenido de la página.
UTILIDAD DE LOS PRINCIPIOS DE DISEÑO WEB
El diseño de una página web debe hacer que el usuario que ingresa a la misma sea
guiado hacia la información que nos interesa que vea.
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
El logo de una página web suele colocarse en el extremo superior izquierdo debido a
que hay estudios que indican que ese es el sitio que miran los internautas cuando
ingresan a la página, y al que vuelven a mirar para saber dónde están. Además, los
logotipos suelen ser grandes y llamativos. De ahí en más, el usuario debería ser guiado
mediante una secuencia de pasos por las zonas del documento que nos interesa que
vea.
La atención que prestan quienes navegan por internet a cada página que visitan es
apenas de unos pocos segundos, por lo que cada instante que el usuario de la página
desvíe su atención de lo que nos interesa comunicar, estaremos perdiendo la
oportunidad de mostrarle lo que realmente nos interesa que vea. Un aspecto importante
a tener en cuenta es la legibilidad y la amenidad de los contenidos aplicados en el
diseño.
Esta atención sobre las partes esenciales del contenido es la meta que debe seguir
todo diseño. En los breves segundos que el usuario presta atención antes de irse de la
página, el diseño debe lograr que se quede y guiarlo por el contenido de la página para
cumplir los objetivos de la misma.
Otra misión importante del diseño web es colaborar en convencer al usuario de la
página que el servicio o el producto ofrecido es lo que necesita o le conviene. Para ello
es necesario que el diseño web se ajuste a los requerimientos del producto o servicio,
sin descuidar los principios del diseño.
QUE SE DEBE EVITAR EN UN DISEÑO WEB
- Evitar animaciones de bienvenida al sitio web.
- Evitar el abuso de banners dinámicos en la web.
- Evitar mostrar el contenido abriendo nuevas ventanas del navegador.
- Evitar la sobrecarga visual de una página.
- Evitar crear elementos cuyo aspecto es similar a publicidad.
QUE DEBO TENER EN CUENTA PARA UN DISEÑO WEB
- Marcar los enlaces ya visitados por el usuario (Media)
- Uso correcto de pestañas o Tabs (Alta)
- Presentación visible de las opciones disponibles (Muy alta)
- Diseño adaptado a la velocidad media de conexión (Media)
- Distribución de las opciones y de la información (Alta)
- Aspecto de la página y diseño imprimible (Alta)
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
RESUMEN EN 3 ETAPAS PARA EL DISEÑO DE UNA WEB
1. Planteamiento de objetivos para tu página web
Esta etapa es muy importante y con frecuencia se pasa por alto. Se trabaja en el papel
para plantearnos el proyecto y qué queremos conseguir al realizar nuestra web. La
planificación de tu web debe incluir:
- Breve descripción de los contenidos de la página, su título principal, etc.
- Finalidad que persigo al hacerla (informar, hacer negocio, entretener, etc.)
- Páginas parecidas a la mía, qué puedo ofrecer yo que no tengan ellas para atraer a mi
público objetivo, etc.
- Hardware, software, documentación que necesito para realizarla y de qué dispongo
realmente.
- Describir cuál es mi publico objetivo, nivel informático, idiomas, intereses, problemas
físicos, etc. para adaptar la página a sus características.
- Dónde se va a visualizar la web; navegadores más utilizados, plugins, elementos
específicos, etc.
2. Estructurar el contenido de la página
Es conveniente que dibujemos un organigrama con todas las partes del sitio web,
distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros objetos
multimedia que se consideren pertinentes, mediante el cual ir creando la estructura de
la página web. Antes de empezar a desarrollar tu página web en el ordenador, debes
tener muy claro cuáles serán sus contenidos, su estructura, el nombre de la página, etc.
cosas que no se deben hacer sobre la marcha para evitar rectificaciones innecesarias,
trabajo inútil y pérdidas de tiempo. Hay varias maneras de estructurar el contenido de
una web:
- En árbol: Esta estructura está compuesta por una página principal que enlaza con
otras páginas, las cuales, a su vez, enlazan con otras páginas de nivel inferior. De esta
manera se agrupan las páginas web en niveles, de tal modo que para llegar del primero
al último se debe pasar por todos los intermedios. Esta estructura es poco navegable si
tenemos una web con muchas páginas, porque para ver las páginas de otra rama
tenemos que retroceder hasta la página principal, haciendo la navegación muy pesada.
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
- En lista: Esta estructura es la opuesta a la anterior. En ella no existe página principal
ya que todas están en el mismo nivel. Para llegar a la última página hay que recorrer
todas las anteriores. Es una estructuración muy adecuada para la presentación de
manuales o aplicaciones donde el usuario deba recorrer forzosamente una serie de
páginas web para conseguir su objetivo.
- Mixta: Esta estructura es una combinación de las dos anteriores. Las páginas están
jerarquizadas en niveles, los cuales a su vez están conectados entre sí en forma de
lista. Esta estructura es mucho más navegable y práctica, puesto que permite poder
desplazarse de rama en rama sin necesidad de volver a la página principal para
hacerlo.
- En red: Esta estructura supone que todas las páginas de la web están conectadas
entre sí, por lo que es una estructura más compleja y menos ordenada. Su ventaja es
que desde cada página podemos ir a cualquier otra del sitio. No obstante, requiere
mucha planificación para evitar ofrecer al visitante un caos de enlaces innecesarios.
Una vez tengas claro lo que quieres hacer y su estructura básica puedes empezar a
recopilar información para confeccionar cada sección de tu página web. Por ejemplo,
puedes haber decidido hacer una web sobre Ferrari, y en cuanto a su diseño querer
colocar un menú a la izquierda con las secciones principales, un cuerpo central con el
contenido de la sección y una última columna a la derecha donde insertar tu publicidad.
No obstante, puede ocurrir fácilmente que al buscar información sobre su escudería
encuentres tanta y tan diversa que llegues a la conclusión de que es más cómodo para
los visitantes colocar un menú de navegación específico de la sección en la izquierda y
el principal en la derecha para que puedan navegar por la sección con rapidez. Por lo
que si ya hiciste la página definitiva de la sección llamada escudería, tendrás que
retocarla para adaptarla a tus nuevas necesidades, lo que supone un gasto de tiempo y
esfuerzo innecesario.
3. Diseñar la página web
Una vez tengas hecha la estructura, recopilada bastante información y completado el
contenido de varias secciones, tienes suficiente material como para saber con más
precisión lo que quieres, por lo que puedes empezar a diseñar gráficamente cada una
de las páginas de tu web, indicando los elementos interactivos y gráficos que van a
intervenir en cada una. Para esto, y fundamentalmente para manejar los vínculos entre
documentos, se creó el lenguaje HTML. El HTML es un lenguaje de marcación
diseñado para estructurar textos y presentarlos en forma de hipertexto, que es el
formato estándar de las páginas web. Por último buscar una empresa de hosting o
alojamiento de tu sitio.
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
CRITERIOS PARA EVALUAR UN SITIO
Hay varios tipos de criterios para evaluar un sitio web, muchos de ellos dependen del
objetivo que persigue la página o del punto de vista a evaluar. A continuación se
abordan los aspectos más relevantes.
- Usabilidad: Se refiere a la experiencia que tiene un usuario cuando interactúa con
páginas de la web. Un sitio web es usable cuando de una manera clara, un usuario
entiende el contenido y navega por el web de una forma cómoda y sencilla.
Un buen diseño web debe contener un buen menú o algún buen sistema de navegación
por la página que se mantenga constante en todas y cada una de las páginas que
conforman la web. Este sistema ha de ser fácilmente accesible.
- Accesibilidad: Completo acceso participativo a la información contenida en el sitio sin
ningún tipo de impedimento.
- Compatibilidad: Que la web se vea igual o similar con todos los navegadores. No
todos los navegadores interpretan el código HTML y CSS de la misma manera, eso
puede ocasionar que el resultado nos sea el mismo.
- Código (Validez, Semántica): Páginas apropiadamente estructuradas sin código
inválido. Un buen diseño web debe contener todos sus enlaces funcionando a la
perfección. Debe seguir estándares web.
- Credibilidad (Utilidad): Es importante para los temas de usabilidad y debe reflejar
que el sitio está diseñado por una organización o personas reales, honestas y su
información es confiable, debe ser fácil de usar, útil, que se pueda contactar, actualizar
el contenido frecuentemente, restringir contenido promocional y evitar errores en la
funcionalidad del sitio.
- Encontrabilidad (SEO): Capacidad de los contenidos digitales de ser encontrados, en
especial a través de buscadores.
- Estética (Adecuación al perfil): Usabilidad y estética. Un buen diseño web debe
contener texto e imágenes en proporciones iguales.
El sitio debe parecer estéticamente agradable, un balance entre armonía y simetría en
las formas, los colores suaves, los bordes con transiciones suaves, los degradados, etc.
La combinación perfecta de colores sería aquella que usara toda la gama de tonos de
un color concreto unida a otros dos o tres colores diferentes.
Debe contener una variación, como máximo, de tres tipos de fuentes diferentes. Cargar
una web de muchos tipos de fuente diferentes dificulta la lectura de su contenido. El
tamaño tampoco debería superar los 14 puntos, a no ser que se trate de un
encabezado o un título. También tenemos que tener en cuenta que una web no es un
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.
INSTITUTO DE EDUCACION TECNICA PROFESIONAL INTEP
libro, por lo que fuentes del tipo Times resultan muy cansadas de leer. Para subsanar
ese inconveniente se recomiendan redonditas del tipo de Arial o Verdana.
Un buen diseño web debe contener al menos dos o tres imágenes por página.
Recordemos que las páginas completas de texto resultan cansadas de leer.
Por otro lado los recursos contrarios podrían dificultar la usabilidad del sitio, aunque
pueden ser estéticamente agradables, son excesivamente llamativos y genera la
llamada "ceguera a los banners" o "insensibilización a este tipo de recursos".
- Persuasión: Convertir los usuarios en clientes. Tener la capacidad de convencer a los
visitantes.
- Información Precisa: Un buen diseño web debe contener el texto que dice o
pretende contener.
- Peso y tiempo de carga: Un buen diseño web no debe superar los 100 Kilobytes.
Toda aquella página que los supere tardaría excesivamente en cargarse con lo que el
internauta podría cansarse y cerrar la ventana antes de ver la web.
- Uso de tecnologías: Cada sitio tiene un diseño optimo que encaja perfectamente con
su temática, requerimientos y tipo de visitantes. Usar las herramientas correctas que no
afecte la accesibilidad a la página y tener en cuenta el diseño para personas con
discapacidad.
LISTA DE CHEQUEO (CHECKLIST) PARA LA EVALUACION DE SITIOS WEB
Actividad a realizar: Ingresa y evalúa los requisitos de tu web en el enlace para acceder
a la guía en forma de checklist para la evaluación heurística en base a dimensiones
como: identidad, lenguaje y redacción, accesibilidad, layout, elementos multimedia...
http://www.nosolousabilidad.com/articulos/heuristica.htm
Técnico Profesional en Sistemas e Informática Internet e informática. Docente: Ana Milena Bueno H.