Diseño de páginas web

1

Principios Básicos de

Diseño de Sitios Web

Ing. Fabio García RamírezTecnología en Sistemas de InformaciónFundación Universitaria Tecnológico Comfenalco Cartagena de Indias 2

ObjetivoConocer acerca de la teoría y las

técnicas de diseño de sitios web.

Principios Básicos de Diseño de Sitios Web


El diseño web



Temática El diseño web. Concepto. Características. Construcción de sitios webs. Ingeniería Web. Requisitos de Calidad. Modelo del proceso de desarrollo web. Principios esenciales de un diseño web eficaz.



El diseño web. Concepto.


Que es? Diseño gráfico

Programación

Cliente/Servidor

Comercio Electrónico


El diseño web. Concepto.Es un campo interdisciplinario muy

centrado en el usuario que incluye influencias de las artes visuales, la tecnología, el contenido y la finalidad.



Características. Contenido(informa o persuade al usuario). Tecnología(da funcionalidad al sitio). Aspectos visuales(forma visual del sitio). Aspectos económicos(beneficios).



Características.Principios Básicos de Diseño de Sitios Web

DiseñadoresUsuarios

Forma(Visual) Función(Tecnología)

Finalidad(Económica)

Contenido


Construcción de sitios webs.Tendencias(errores comunes):

Construir a partir de los aspectos visuales(resulta en un folletoware o panfletoware).

Enfoque tecnológico(diseño arbol de navidad).



Construcción de sitios webs.Errores imperdonables en los sitios webs: Usar gráficas demasiado grandes. Emplear fondos inapropiados. No ofrecerles algo gratuito a los visitantes. No darles motivos para regresar al sitio. No cambiar la apariencia del sitio ocasionalmente. No ofrecer contenido interesante. No llevar un registro de visitantes. No promover el sitio.



Ingeniería Web. Toma prestado muchos de los conceptos y principios básicos de

la Ingeniería del Software, dando importancia a las mismas actividades técnicas y de gestión.

No es un clónico perfecto de la Ingeniería del Software. La filosofía principal es la aplicación de un enfoque disciplinado

para el desarrollo de un sistema basado en computadora. La Ingeniería Web aplica un enfoque genérico que se suaviza con

estrategias, tácticas y métodos especializados. La Ingeniería Web está relacionada con el establecimiento y

utilización de principios científicos, de ingeniería y de gestión, y con enfoques sistemáticos y disciplinados del éxito del desarrollo, empleo y mantenimiento de sistemas y aplicaciones basados en Web de alta calidad.



Requisitos de Calidad. La calidad se refiere a las características mensurables, que se

pueden comparar con estándares conocidos como longitud, color, propiedades eléctricas, maleabilidad, otros.

A nivel de software, existen unas métricas técnicas que proporcionan una manera sistemática de valorar la calidad basándose en un conjunto de reglas claramente definidas.

Las métricas o requisitos de calidad mas relevantes para evaluar la calidad de los sistemas basados en Web son:

a. Usabilidad.b. Funcionalidad. c. Fiabilidad.d. Eficiencia. e. Capacidad de mantenimiento.



Modelo del proceso de desarrollo web.


Especificación y análisisde los requisitos

Diseñode prototipos

Materialización y Pruebas unitarias

Integración y pruebadel sistema

Entrada en funcionamiento,operación y mantenimiento

Definición del problema.Exploración conceptual

Modelo en Cascada


Principios esenciales de un diseño web eficaz. Usted no es el USUARIO. Los usuarios no son diseñadores. Diseñe para el usuario medio, pero tenga en cuenta

las diferencias. La ejecución de un sitio tiene que rayar la perfección. Conoce y respeta las restricciones de la web y del

medio Internet.



Principios esenciales de un diseño web eficaz. Los sitios web deberán respetar los principios GUI siempre

que sean apropiados. La navegación es solamente un medio para conseguir un

resultado final. Los elementos visuales influirán en gran medida en la

percepción inicial del interés del sitio por parte del usuario. No invente interfaces para crear marca. Lo que ve es lo que desea(WYSIWYW).



Principios esenciales de un diseño web eficaz. El valor permanente del sitio viene determinado por

los aspectos visuales, el contenido, la tecnología, la facilidad de empleo y la consecución del objetivo.

No existe una única forma “correcta” de diseño web que se adapte a todos los sitios.

El control debería estar en manos del usuario o al menos debería parecerlo.



Resumen. El diseño web es un campo interdisciplinar que

consta de cuatro elementos principales: contenido, forma, función y finalidad.

El de seguir una metodología, incluso básica, de diseño web puede ser extremadamente útil.

No existe una única forma “correcta” de diseño web que se adapte a todos los sitios.



El proceso de

diseño web



Temática Método web ad hoc. Modelo en cascada. Modelo en cascada modificado. Diseño de aplicación conjunta(JAD). Modelo de proceso IWeb. Enfoque de un proyecto de un sitio web.



Método web ad hoc. Similar al método codificación y prueba. Diseño al vuelo(realizar y publicar). Método informal(diseña según vas avanzando). Planificación escasa y limitada. Adecuado para proyectos pequeños con

escaso mantenimiento.



Modelo en cascada.









Modelo en cascada modificado.








Análisis de riesgos

en “remolino”


Diseño de aplicación conjunta(JAD, Joint Application Design).


El diseñador habla con los clientes para conocer sus requisitos. Realiza el primer prototipo.

El cliente prueba el prototipo y sugiere cambios y ampliaciones. Si es correcto se publica.

1

2

El diseñador prepara un nuevo prototipo.

Volver al paso 2.

3


Modelo de proceso IWebPrincipios Básicos de Diseño de Sitios Web

Formulación

Planificación

Análisis

IngenieríaEvaluación del cliente

Generación de páginas y pruebas

Diseño del contenido

Diseño arquitectónico

Diseño de la interfaz

Producción

Diseño denavegación


Enfoque de un proyecto de un sitio web. Objetivos y problemas. Audiencia – perfil del usuario. Análisis de requisitos. Planificación del sitio. Fase de diseño. Pruebas. Puesta en funcionamiento. Mantenimiento.



Objetivos y problemas.Deben ser claros.Medibles.Para determinarlos se realiza una

“Tormenta de Ideas” (BrainStorming).Deben refinarse.



Objetivos y problemas.Objetivos poco claros: “Proporcionar un mejor servicio al

cliente”. “Conseguir más dinero abriendo un

mercado interactivo”.



Objetivos y problemas.Objetivos bien declarados: Desarrollar un sitio Web de ayuda y soporte técnico que aumente la satisfacción

del cliente, permitiendo un acceso 24/7 para cuestiones comunes y disminuyendo en un 25 por 100 la atención telefónica prestada.

Crear un almacén interactivo de recambios de automóvil que venda directamente al consumidor productos por un valor mínimo de 10.000 dólares al mes.

Desarrollar un sitio Web que proporcione a los potenciales clientes de un restaurante de comida japonesa cierta información importante, tal como horario, menú, ambiente y precios, y les anime a visitar el lugar o a hacer su pedido por teléfono.



Audiencia – perfil del usuario. Cual es la audiencia potencial del sitio y sus motivos para

acceder al sitio. Preguntas básicas tales como: Dónde viven? Que edad tienen? Hombres o

mujeres? Que idioma hablan? Que conocimientos técnicos poseen? Que obtienen del sitio? Que desean ejecutar en el sitio? Cuando visitarán el sitio?

Para la mayoría de los sitios hay muchos tipos de usuarios, cada uno con diferentes características y objetivos.

Se recomienda elaborar un perfil del usuario.



Análisis de requisitos.Clase de contenido a publicar.Cual sería el aspecto del sitio.Tecnología a utilizar.Restricciones técnicas.



Planificación del sitio.Es plasmar en papel las especificaciones del sitio. Puede contener las siguientes secciones:Declaración y análisis de objetivos.Análisis de la audiencia.Requisitos de contenido, técnicos y visuales.Diagrama de la estructura del sitio.Personal requerido.Duración.Presupuesto.



Fase de diseño. Recopile el contenido, antes de abordar el diseño. El diseño visual debe realizarse de arriba abajo(Top-

Down). Realice prototipos en papel o en pantalla. Tenga en cuenta el explorador(browser) a utilizar y las

dimensiones de la pantalla. Realice un sitio simulado.



Pruebas. Los sitios siempre tienen errores, de modo que

pruebe bien su sitio. Las pruebas deben tener en cuenta todos los

aspectos del sitio, incluyendo el contenido, la apariencia visual, la función y la finalidad.

Las pruebas más importantes son las realizadas por el usuario, y deberían realizarse en último lugar.



Puesta en funcionamiento y mantenimiento.El desarrollo de un sitio web es un

proceso continuo: planificación, diseño, desarrollo, entrega y vuelta a empezar.



Resumen. Los diseñadores de sitios Web deben adoptar

una metodología o modelo de procedimiento que les guíe durante el proceso de desarrollo y les ayude a minimizar riesgos, a gestionar la complejidad del proyecto y, en general, a mejorar el resultado final.



Diseño para los

usuarios



Temática Facilidad de empleo. Los usuarios. Características comunes de los usuarios. Entornos del usuario. Tipos comunes de usuarios. Convenios Web. Accesibilidad.



Facilidad de empleo. Es la facilidad con la que un grupo de usuarios

puede utilizar un sitio para conseguir objetivos determinados con efectividad, eficacia y satisfacción en un contexto concreto de empleo(según norma ISO).

Varía tanto como los usuarios que acceden al sitio. Depende del tipo de sitio y de la familiaridad que

tenga el usuario con él.



Facilidad de empleo.Tenga en cuenta las siguientes directrices: Sea consistente(interfaz sencilla de usar). Simplifique al máximo el sitio y sus páginas. Confíe en la acción de reconocer, no en recordar. Intente prevenir o corregir errores. Proporcione información. Concéntrese en la velocidad. No suponga que los usuarios leerán las

instrucciones.



Los Usuarios. Tratar de satisfacer sus necesidades. Tenga en cuenta el usuario común(no irse a los

extremos: novatos o expertos). Los exploradores no utilizan los sitios, los utilizan las

personas. No existe un tipo genérico de persona, pero suelen

tener características físicas similares: visión, memoria y reacción a los estímulos.



Características comunes de los usuarios: Visión. Es la forma en que reciben la información del sitio Web. Existen tres factores que afectan a la forma en que se

percibe el color: Matiz, saturación y tonalidad. Matiz: Grado de similitud entre un color y los colores

básicos(rojo, verde y azul) o algunas de sus combinaciones.

Saturación: Hasta que punto un color difiere del acromático(blanco, gris o negro).

Tonalidad: Hasta que punto un color es más claro o más oscuro que otro bajo las mismas condiciones visuales.



Características comunes de los usuarios: Visión. Evite el uso de texto, gráficos y fondos de matices similares(en

vez de utilizar azul claro y azul oscuro, utilice en su lugar azul y amarillo, o blanco).

Evite combinar texto, gráficos y fondos con saturaciones similares(en vez de utiliza un texto gris sobre un fondo rosado, utilice un texto de color blanco sobre un fondo rosado, o viceversa).

Ponga un contraste alto. Evite el uso de texto, gráficos o fondos de tonalidad similar(nunca utilice texto oscuro sobre fondo oscuro o texto brillante sobre fondo brillante).

Asegúrese que los colores que utilice para diferenciar elementos, tales como vínculos, difieran claramente en dos atributos: matiz y tonalidad(evite los vínculos que cambian de rojo a rosado).



Características comunes de los usuarios: Memoria. Los usuarios tienen tendencia a maximizar las ganancias y a

minimizar el trabajo. El reconocimiento resulta más sencillo que la memorización, de

modo que no obligue a los usuarios a memorizar información. No utilice el mismo color para resaltar los vínculos visitados de

los que no lo han sido todavía. Elabore páginas que incluyan importantes diferencias visuales

con el resto de páginas. Limite el número de opciones de importancia similar, tales como

vínculos, a grupos entre 5 y 9 elementos. Póngase por objetivo la memorización de sólo tres elementos o

páginas secuenciales.



Características comunes de los usuarios: Respuesta y tiempo de reacción. El tiempo que un usuario esperará es

proporcional al beneficio obtenido. Cuando los tiempos de respuesta para la

descarga de páginas sean superiores a 30 segundos, trate de proporcionar al usuario su propia información del progreso, por ejemplo, una barra de progreso del tiempo de descarga.

Esfuércese en conseguir que el usuario conozca lo más importante del contenido de una página en un tiempo máximo de un minuto de carga.



Características comunes de los usuarios: Respuesta y tiempo de reacción. Intente optimizar el acceso por teclado para

todas las páginas y no solamente para las páginas de formulario.

Minimice la distancia que el usuario tiene que desplazar el ratón entre elecciones sucesivas.

Minimice el desplazamiento del ratón entre la zona de actuación en la página principal y el botón Atrás del explorador.



Entornos del usuario. Cuando diseñe para los usuarios piense siempre

desde dónde están accediendo al sitio. Entre los entornos posibles se tienen: Oficina,

Casa, Cibercafé, puesto público(kiosko), PDA(Asistente Personal).



Tipos Comunes de usuarios. Desde el punto de vista de la utilización de un sitio Web,

existen tres tipos de usuarios: novatos, intermedios y expertos.

Un usuario novato es el que tiene poco conocimiento de un sitio, incluso, de cómo funciona la Web. Requiere ayuda extra.

Los usuarios expertos, son los que comprenden muy bien la Web o el sitio. Requieren relativamente pocas ayudas y preferirán hacer menos clics y consumir más.

Los usuarios intermedios, son realmente el grupo más numeroso de usuarios de la Web. Entienden cómo funciona la Web, pero no saben navegar de una manera eficiente.



Tipos Comunes de usuarios. Trate de crear un sitio Web adaptable que

cumpla con los requisitos de los usuarios noveles, de los intermedios y de los expertos.

Diseñe para el usuario intermedio si no es posible desarrollar una interfaz Web adaptable.



Convenios Web. No se desvíe de los convenios utilizados de

forma habitual en el desarrollo de interfaces presentes en los sitios Web más populares.

Algunas normas Web más comunes son: El logotipo situado en la esquina superior

izquierda le permitirá volver a la página principal. Los vinculos de texto se repiten en la parte

inferior de la página. Vínculo para volver a la parte superior de la

página utilizado en páginas largas. Los elementos sobre los que se puede hacer clic

son azules y se encuentran subrayados.



Convenios Web. Los elementos secundarios de exploración, tales

como un plano del sitio o un buscador, se presentan de forma separada al resto de elementos de exploración.



Accesibilidad.El World Wide Web Consortium(W3C) ha promulgado unas cuantas sugerencias para mejorar la accesibilidad(http://www.w3c.org/wai) :Proporcione alternativas equivalentes para los contenidos auditivo y visual.Aclare el uso del lenguaje natural(abreviaturas, definiciones, citas, etc).Garantice que las páginas que utilicen nuevas tecnologías se transforman adecuadamente.Garantice la accesibilidad de las interfaces de usuario incrustadas.Diseñe con independencia de los dispositivos.


http://www.w3c.org/wai


Resumen. La facilidad de empleo es uno de los aspectos de un sitio

que no siempre se advierte a primera vista, pero que influye enormente en la comodidad con que un usuario puede realizar una determinada tarea cuando utiliza el sitio.

Intente crear una interfaz adaptable que pueda ser utilizada por los tres grupos comunes de usuarios(novatos, intermedios y avanzados), con el fin de obtener un sitio funcional.



Tipos de sitios y Arquitectura



TemáticaCategorías generales de sitios Web.Estructura del sitio.Tipos especificos de sitios Web.



Categorías generales de sitios Web. Sitio público: es un sitio cuyo acceso no está

restringido explícitamente a ningún tipo de usuarios. Sitio intranet: es un sitio que está reservado a una

determinada organización y generalmente funciona dentro de una red privada.

Sitio extranet: es un sitio Web al que puede acceder una clase limitada de usuarios a través de Internet.



Categorías generales de sitios Web. Sitios estáticos: es aquel cuyo contenido es relativamente fijo,

en el que los usuarios no pueden modificar ni el aspecto ni el ámbito de los datos que observan.

Sitios interactivos: es aquel en el que los usuarios pueden actuar directamente sobre el contenido del sitio o con otros usuarios del mismo.

Sitios dinámicos: es aquel que sus páginas se generan en el momento de la solicitud por parte del usuario.



Estructura del sitio.Hay dos tipos de estructuras en cualquier sitio Web: Lógica: es la forma como se relacionan entre sí los documentos y define

los vínculos entre documentos. Física: describe dónde se encuentra realmente un documento,

mostrando, por ejemplo, el camino al directorio del documento en un servidor Web o su situación en una base de datos(por ejemplo, c:\inetpub\wwwroot\default.htm).

La estructura lógica de un sitio Web es más importante para el usuario que su estructura física.

Siempre que sea posible, evite dar a conocer la estructura física de los archivos del sitio.



Estructura del sitio(Modelos).Existen cuatro formas de organización lógica de los sitios Web: Lineal: es una estructura secuencial similar a la que sigue la

información impresa(revistas, periódicos, etc). Rejilla: es una estructura lineal doble, en la que sus elementos se

relacionan tanto vertical como horizontalmente. Jerárquica: es la más común en la Web, similar a la estructura de

un árbol. Tela de araña(Web): no sigue ninguna de las estructuras

anteriores y contiene muchos vínculos cruzados y saltos hacia delante.



Estructura del sitio(Modelos).Principios Básicos de Diseño de Sitios Web

Página Principal Página 1 Página 2 Página 3

Página Principal

Página 1

Página 2Página 3

Página 4

Página 5

Lineal

Lineal con alternativas

Página Principal Página 1 Página 2 Página 3

Lineal con opciones



Camisas

Manga Corta

Manga Larga

Pantalones

Rejilla

Lino

Dril

Chaquetas

Cuero

Lana



Empleos

Oferta

Hombres

Demanda

Jerarquía estrecha

Mujeres Ing. de Sistemas Contadores



Página Principal

Servicios NoticiasPortales

Jerarquía ancha

Banca Viajes



Página Principal

Servicios Portales

Jerarquía mixta

Banca

Descargas E-mail Todo en Uno InternacionalNacional



Servicios

Presentación

Personales

Arbol con entrada lineal

CorporativosProductos

Staff

Mision, Vision

Catalogo

OnlinePágina PrincipalVerdadera

Página de entrada o de bienvenida



Servicios

Productos

Web Pura

Mapa del Sitio

Principal

Contactos

Buscador


Tipos específicos de sitios Web.Principios Básicos de Diseño de Sitios Web

Los sitios públicos se pueden clasificar en: Comerciales: su finalidad principal es servir al usuario, de modo

que, de manera directa o indirecta, se beneficie a la empresa(transacción comercial).

Informátivos: su finalidad general es la distribución de información(los de grupos religiosos, organizaciones sin ánimo de lucro, los de noticias, los educativos, sitios del gobierno).

Entretenimiento: su finalidad es simplemente entretener a sus visitantes. Tratan de vender una experiencia agradable.

Navegacionales: es el que tiene como finalidad ayudar a la gente a no perderse en Internet(portales).

Comunidad: su finalidad es crear un punto central para que los miembros de una determinada comunidad se congreguen y se relacionen.


Tipos específicos de sitios Web.


Los sitios públicos se pueden clasificar en: Artístico: su finalidad es inspirar, iluminar o entretener a los

espectadores. Personal: su finalidad es personificar al individuo en la Web.


Resumen. Los sitios Web se pueden clasificar según su

audiencia(públicos, intranet y extranet) o finalidad(comerciales, informativos, personales, artísticos,entretenimiento, navegacionales y comunidad).

La elección de la estructura correcta para un determinado sitio es compleja y puede estar influida por varios factores.


Diseño de páginas web

Presentations & Public Speaking

Transcript of Diseño de páginas web