Unidad 11 PRESENTACIÓN. DISEÑO DEL SITIO
1
Contenido
Presentación. Diseño del sitio .......................................................... 3 Introducción ............................................................................................ 3 Conceptos básicos de diseño web ............................................................ 4 Estructuras de navegación ................................................................................... 4 Organizar la información ..................................................................................... 6 Elementos de navegación .................................................................................... 8 Identificación del Sitio. El logotipo .......................................................................10 Identificación de la página ..................................................................................11 Usabilidad ........................................................................................................12 Accesibilidad.....................................................................................................13
Elementos clave de la interfaz de una tienda virtual ...................... 14 Recomendaciones básicas de diseño de sitios comerciales .................... 15
Diseño Web para tiendas de OsCommerce ..................................... 18 Características del diseño web de OsCommerce .................................... 18 Módulo “Cajas” ...................................................................................... 22 Estructura de navegación de OsCommerce ............................................ 23
Práctica ......................................................................................... 25 Añadir el logo de su tienda .................................................................... 25
2
Presentación. Diseño del sitio Introducción En este capítulo abordaremos cómo se presenta al público (diseño del sitio web) nuestra tienda online. A la hora de implantar un negocio en Internet también es necesario decidir cuál será el aspecto de nuestra tienda, la imagen que queremos dar a nuestros clientes. Hasta ahora hemos estudiado la funcionalidad, la lógica de la aplicación, pero nos falta la parte de presentación que se refiere al diseño web.
Comenzaremos repasando los conceptos fundamentales aplicables al diseño de cualquier sitio web para continuar explicando la estructura de la aplicación OsCommerce, la parte de presentación. El diseño de nuestro sitio web será “el escaparate” de nuestro comercio que debemos cuidar con detalle. Una de las características fundamentales para alcanzar el éxito en un negocio en Internet es el diseño de su presentación, el front-end de su tienda.
3
Conceptos básicos de diseño web Estructuras de navegación No es lo mismo una estructura de navegación para un sitio que desea publicar información al estilo de un libro formado por capítulos, que se adapta bastante bien tanto a una estructura lineal como a una jerárquica, que un sitio donde se expone un tutorial, donde es más apropiada una estructura de tipo lineal. Tipos de estructuras de navegación web
Secuencial o lineal: Es la forma más simple de organizar la información. La información fluye de forma natural, con un orden lógico línea.
Este tipo de estructura suele funcionar para sitios pequeños; a medida que el sitio se vuelve más complejo, necesita una estructura mayor.
Estructura jerárquica: es quizá la mejor manera de organizar información compleja. Este tipo de estructura está especialmente adaptada para los sitios Web, que siempre parten de una única página de inicio como son las tiendas online.
4
La mayor parte de los usuarios están familiarizados con los diagramas jerárquicos, y les resulta fácil de comprender el esquema de navegación.
Estructura en Red (también llamada Web): Estas estructuras imponen pocas restricciones en el patrón de la información.
En este caso el objetivo es imitar el pensamiento asociativo y la libre circulación de ideas; los usuarios siguen sus intereses en una secuencia única para cada usuario del Sitio.
Estructura mixta: Los estudios de "funcionalidad" indican que los usuarios recuerdan mejor la información con este tipo de estructura (jerárquica con enlaces cruzados del tipo estructura Web), puesto que la estructura jerárquica resulta demasiado restrictiva y la no lineal ofrece demasiada información y lleva a la confusión.
5
Organizar la información Los pasos básicos para organizar la información son: 1. Dividir la información en unidades lógicas. 2. Establecer una jerarquía por orden de importancia y generalidad. 3. Utilizar esta jerarquía para establecer relaciones entre las piezas de información. 4. Analizar el sistema estética y funcionalmente. La mayor parte de la información disponible en la web consiste en pequeñas piezas de información (bloques) que se leen de forma no secuencial. Según estudios realizados mucho antes de que la web se inventase, los usuarios prefieren pequeñas piezas de información que se pueden hojear y localizar rápidamente.
Esta manera de organizar la información es especialmente válida para la web por los siguientes motivos:
Los usuarios no leen las páginas en pantalla, las miran por encima. Si son largas saltarán a otra página web.
Las pequeñas piezas de información son perfectas para los enlaces. Quien pulsa un enlace espera encontrar información específica relacionada con el tema que estaba viendo, no un libro entero de información que filtrar.
6
No es necesario subdividir la información demasiado o los usuarios se cansarán de pulsar enlaces. El máximo para una Web con documentos de referencia es de 1 a 3 páginas de información impresa.
Un formato uniforme para organizar y presentar la información permite a los usuarios aplicar su experiencia anterior con el sitio a la hora de explorarlo y buscar información, permitiéndoles en cierta manera, adivinar como está organizada la información.
Los bloques de información pequeña y concisa se adaptan mejor a la visualización en pantalla que sólo permite ver una pequeña parte de documentos grandes.
Las páginas muy largas tienden a desorientar al usuario, puesto que al avanzar a lo largo del documento el usuario se ve obligado a recordar la situación de elementos que ya no se pueden ver en pantalla (por ejemplo, una barra de navegación en la parte superior ayudará al usuario a no perderse en el sitio web).
Arquitectura de la información ¿Qué es la arquitectura de la información? Según Rosenfeld y Morville la arquitectura de la información se define y caracteriza por:
Clarificar la misión y visión del sitio, equilibrando las necesidades del patrocinador y las necesidades de la audiencia.
Determinar el contenido y funcionalidad que el sitio va a tener.
Especificar
cómo
los
usuarios
van
a
encontrar
la
información al definir su organización, navegación, etiquetado y sistemas de búsqueda.
Mapear. Cómo se va a adaptar el sitio al cambio y crecimiento en el tiempo.
7
Elementos de navegación Los elementos de navegación, son los que permiten al usuario moverse por nuestro sitio y encontrar la información que se busca. Con un sistema de navegación consistente y predecible, se ayudará al usuario a hacerse una idea de la organización del sitio. La interacción más básica de cualquier usuario es pulsar enlaces para moverse a través de la información. De modo que una interfaz de navegación debe dar respuesta a estas preguntas básicas:
¿Dónde estoy? Debido a la naturaleza de los hipertextos un usuario puede pasar de una página web a otra sin transición. Es imprescindible que el usuario sepa en todo momento dónde se encuentra y cómo volver a un punto anterior, especialmente si está visitando una tienda para comprar varios productos.
¿Quién me está contando todo esto?: Es una cuestión que se da por supuesta demasiadas veces. Siempre hay que decirle al usuario quién ha creado la página.
¿Qué es esto? Todos los documentos necesitan títulos claros que capten la atención del usuario. El título del documento es normalmente el primer elemento que los navegadores visualizan. Un título ambiguo o que cree confusión no ayudará en nada a los usuarios cuando pretendan recordar la página que han visitado.
¿Dónde he estado? Tenemos que evitar que el usuario navegue en círculo porque no puede distinguir qué partes ha visitado y cuáles no. Los Navegadores incorporan unas características que ayudan al usuario a saber dónde han estado y por donde han venido: el botón atrás, la lista de páginas visitadas (historial) y la carpeta de favoritos.
¿Dónde puedo ir? Esta pregunta parece fácil de responder con los elementos de navegación y cualquier otro enlace que haya en el documento. Siempre, claro está que estén claramente identificados como tales.
¿Cuándo? En la web hay millones de páginas no actualizadas, ayude a sus visitantes a saber si su información es actual o tiene 10 años, incorporando la fecha.
8
Una buena navegación intenta contestar todas las preguntas del usuario mediante la utilización de una navegación consistente, ayudas a la navegación como las direcciones URL, etiquetas de página y páginas de referencia.
Guías de navegación Independientemente de si se trata de un sitio personal o de un gran sitio de comercio electrónico, siempre hay que decirle al visitante dónde está y quién ha creado la página. Y hay que decirle dónde está, tanto en relación con el resto del "mundo" como en relación con nuestro propio sitio. A veces, al usuario le resulta difícil saber dónde está puesto que no tiene puntos de referencia. Para saber dónde están los usuarios cuentan no solo con las direcciones URL, sino también con los nombres de las páginas, los colores, los logotipos, las llamadas "migas de pan". Tenga en cuenta que los usuarios siguen pocas veces los patrones de navegación que pretenden los diseñadores. Pueden llegar a cualquier documento de su sitio desde cualquier otro sitio: buscadores, favoritos, boca a boca. Por eso, ubicarlos inmediatamente resulta crucial.
Direcciones URL La dirección URL (Uniform Resurce Locator) definen las posiciones de las páginas. Y precisamente por ello no conviene "secuéstralas", quitando las barras de herramientas de los navegadores o utilizando marcos. Una dirección como ésta le dice al usuario exactamente dónde está.
http://www.compañía/productos/telefonos/modvh7.html Esta ventaja se pierde con las páginas generadas dinámicamente que suelen aparecer así:
http://www.compañia.com/main/actu.asp?ref=NOT19322&tipo=econ
9
Utilice direcciones sencillas y fáciles de recordar siempre que se posible, para mejorar la navegación.
La etiqueta <Title>. Barra de título del navegador La etiqueta <title> es lo primero que se ve en el navegador y debe indicar los contenidos de la página. Utilice un título sencillo y claro. Además es precisamente este título el que se guardará en la carpeta de favoritos, por ello es muy importante que esté bien definido y sobre todo, que no sea ambiguo.
Identificación del Sitio. El logotipo Como no sabemos desde dónde viene nuestro visitante y el primer documento que vea de nuestro sitio puede no ser la página principal, hay que poner en todas las páginas el nombre del sitio, el Logotipo. La identificación representa al sitio entero y, como tal, ocupa el lugar más alto en la jerarquía lógica. El mejor lugar para poner el Logotipo es (para páginas occidentales que se leen de izquierda a derecha) la parte superior izquierda de la pantalla, porqué ahí es dónde se dirige instintivamente la mirada. Por convención, este logotipo suele incluir un enlace a la página del sitio pero no todo el mundo sabe por qué. Es aconsejable utilizar los atributos "title" (en el enlace) y alt (en la imagen) para indicar a los usuarios que pulsando sobre el logotipo podrán ir a la página principal.
10
Identificación de la página Ya hemos visto la etiqueta <title> pero esto no es suficiente, todas las páginas tienen que tener un nombre, que debe estar situado de forma que enmarque el contenido y debe ser prominente. Además, tiene que corresponderse con el enlace que ha llevado a esa página. Si el nombre no se corresponde, puede perder la confianza del usuario puesto que los enlaces no conducen a dónde apuntan. En las barras de navegación hay que llegar a soluciones para poner el nombre de la página a la que apunta el enlace. Puesto que no caben nombres largos, por lo menos deben parecerse lo más posible. Por ejemplo, un enlace que apunte a una página con el nombre "Arquitectura de la Información", en la barra de navegación de debería poner “Arquitectura”.
Barras de ubicación o "migas" Esta característica se está convirtiendo en una convención y cada vez aparece en más sitios. Muestran el camino desde la página principal.
La barra de navegación También se puede indicar la posición en la navegación principal del sitio, por ejemplo, dando un color distinto al enlace de la página en la que nos encontramos ahora. En sitios web de ecommerce esta es una característica fundamental, ya que el usuario navega mucho en nuestra tienda buscando el o los productos que necesite, información de precios o especificaciones técnicas de servicios y si se siente “perdido” abandonará nuestro sitio.
11
Mapas y ayudas Incluso en sitios bien estructurados y con funciones de búsqueda, los usuarios a veces no encuentran lo que buscan. Para enseñarles el camino están los mapas, que deben ser accesibles desde cualquier página del sitio.
Mapas de navegación Los mapas, básicamente, pueden ser gráficos o texto. Los primeros representan gráficamente la estructura de la página proporcionando una visión de conjunto; los segundos representan la estructura con vínculos de texto, utilizando tamaños y sangrías para mostrar la estructura.
Sistemas de ayuda No son muchos los sitios que disponen de ella, sin embargo es un elemento muy útil para explicar a los usuarios cómo funcionan las etiquetas, qué representa cada icono, cómo se navega. Especialmente necesarios son los sistemas de ayuda en las páginas de comercio electrónico en las que muchas veces, el usuario se enfrenta con aplicaciones web complejas que no siempre está seguro de saber utilizar.
Glosario Cuando se utilizan vocabularios específicos de una rama del conocimiento o de la industria es conveniente añadir glosarios de los términos utilizados; de esta forma proporcionamos la definición de palabras que quizá no estén claros.
Usabilidad Para J. Márquez usabilidad es: “Usabilidad, palabra que por cierto no existe en castellano, es la condición o propiedad de un servicio o producto para ser fácilmente utilizado. Digamos que es como la ergonomía, la adaptabilidad de los objetos al ser humano”
12
Aunque podemos encontrar muchas definiciones de usabilidad, unas más formales y otras menos, la idea básica es simple: ¿De qué sirve una web si nadie la visita porque no sabe utilizarla?
Accesibilidad Para la World Wide Web en su “Web Accesibility Initiative” nos dice que: “Accesibilidad
significa
independientemente
de
acceso su
a
la
web,
capacidad”
PARA
TODO
EL
MUNDO,
(http://www.w3.org/Talks/WAI-
Intro/slide3-0.html). Tim Berners-Lee, director del W3C e inventor de la web: "la potencia del World Wide Web radica en su universalidad. Un aspecto esencial es el acceso de todos, independientemente de su discapacidad."
13
Elementos clave de la interfaz de una tienda virtual La interfaz de nuestra tienda dará al visitante la información más significativa y atractiva de nuestro negocio. Un correcto diseño deberá responder a todas las preguntas que constituyen nuestra estrategia comercial:
¿A qué público nos dirigimos? ¿Qué atributo de nuestros productos queremos resaltar?
14
Debe imaginarse lo que un visitante espera encontrar en su tienda y decidir los bloques de información que debe incluir. No obstante, son imprescindibles: Una descripción de su negocio. Una descripción completa de los productos y servicios, incluyendo características, beneficios, precios, especificaciones y fotografías. Testimonios, estudios de casos de éxito o de clientes que ya han usado sus productos o servicios. Una sección de preguntas frecuentes (FAQ) que se anticipe y responda a todas las inquietudes de sus clientes. Diseñe un plan de la estructura de su sitio enfocado a enseñar a su cliente lo que tiene que saber para tomar la decisión de comprar y que lo pueda hacer de forma rápida. Cree un mapa del sitio que permita al cliente saber cómo está distribuida la información y como puede ir de una página a la siguiente. Utilice herramientas de seguimiento que cuantifiquen la actividad del sitio para que pueda saber si sus intenciones en el diseño están realmente obteniendo los resultados esperados.
Recomendaciones básicas de diseño de sitios comerciales Con un plan consistente estará preparado para construir su sitio de comercio electrónico. Muchos negocios recurren a empresas profesionales de diseño Web para construir sus sitios. Pero si su presupuesto es limitado, existen herramientas que le permiten construir una tienda en línea sin tener conocimientos profundos de diseño Web.
15
Las siguientes recomendaciones le permitirán construir un sitio que sea no solamente atractivo sino fácil de usar para los clientes y obviamente fácil para realizar compras. •
Examine con cuidado sus sitios favoritos de comercio electrónico. No dude en adaptar las características de sus sitios favoritos para aumentar la efectividad del suyo. Piense en las dificultades o confusiones que tuvo al visitar un sitio y trate de evitar que ocurra también en su tienda.
•
La página de entrada (página principal) es su primera impresión (o la última). Es imprescindible dar “muy buena primera impresión” a sus visitantes. Asegúrese de presentar claramente los elementos que sus clientes buscan con frecuencia:
o
El nombre de la compañía, su logo y su eslogan destacados en forma prominente. Aproveche la oportunidad para establecer su identidad de marca.
o
Un vínculo a "Quiénes somos" o "Nuestra empresa", para que los clientes conozcan rápidamente su trayectoria.
o
Un menú del sitio con las secciones básicas. Mantenga este menú consistentemente en cada página del sitio para facilitar la navegación.
o
Una sección de "Novedades" que presente las noticias, anuncios y promociones de productos. Esta sección debe estar actualizada con frecuencia para promover visitas repetidas de los clientes.
o
Información de contacto. Facilite a sus clientes encontrar su número de teléfono o fax, dirección de correo electrónico o postal.
o
Informe de sus condiciones de servicio y política de privacidad que describen claramente la forma como usted tratará la información personal de su cliente.
16
•
Facilite la exploración de su sitio. A medida que usted construye su sitio, trate de reducir al mínimo el número de clics entre la página principal y el lugar en donde se encuentra el botón "comprar". Entre cuatro y seis es un buen número.
Haga que sus enlaces tengan sentido de manera que los visitantes sepan lo que tienen que hacer en cada momento para encontrar lo que buscan.
No deje que sus botones de navegación resalten demasiado en el diseño de su sitio. Resalte la información de su producto.
Simplifique el diseño. Mantenga la misma estructura de colores y fuentes que su tienda utiliza en otras comunicaciones como folletos y correspondencia comercial.
•
Asegúrese que las imágenes y gráficos tienen el propósito de complementar y no de distraer o confundir al cliente de su objetivo de realizar la compra.
•
Haga que su texto sea fácil de leer. Los textos negros en fondo blanco pueden no ser terriblemente originales, pero son menos agresivos a los ojos que las letras naranjas en fondo púrpura.
•
Compruebe los tiempos de descarga de su tienda para que sean lo más cortos posible. Pruebe las páginas para asegurarse de que no están recargadas de imágenes que retrasan la descarga de las mismas. Las encuestas demuestran que la mitad de los navegantes abandonan las páginas que tardan tiempo en descargar. Sus páginas deben descargar en menos de 12 segundos. Si su sitio es comercial, debe ser rápido de cargar.
17
Diseño Web para tiendas de OsCommerce Características del diseño web de OsCommerce En
cualquier
aplicación
web
se
distinguen
dos
elementos
importantes,
la
funcionalidad y el diseño como hemos mencionado en la introducción de este capítulo. A continuación presentamos cómo está estructurada la parte de presentación de OsCommerce. La estructura básica de la tienda OsCommerce es muy sencilla y se contiene cinco áreas o zonas principales. La vista pública o front-end de la tienda OsCommerce tiene la siguiente estructura.
La página que carga la portada, tal como se ve en la imagen superior, es la generada por el archivo catalog/index.php.
18
Esta página consulta la base de datos para obtener información de los productos que hay en el catálogo y sus datos, para mostrarlos en la página. Podemos modificar el diseño, la presentación de esta página sin cambiar su funcionalidad. En el archivo index.php se realizan las llamadas a todos los componentes presentes en la página del catálogo de OsCommerce. Está dividido en cinco distintas partes y cada sección llama a otros archivos que contienen el código de una zona determinada del catálogo. Las partes mencionadas son: Cabecera (header): Incluye el logo del comercio y los botones Ver Cesta, Realizar Pedido y Mi Cuenta. Columna izquierda (columnLeft): Incluye enlaces a la home, novedades, búsqueda rápida, mapa de familias o categorías de productos, menú de fabricantes y enlaces a páginas libres. Columna derecha (columnRight): Incluye las cajas de cesta, historial de pedidos, los más vendidos, ofertas, comentarios, selección de idioma y de moneda, información del fabricante y recomendar a un amigo. Zona de contenidos (bodyContent): Es la zona dedicada a presentar la información de cada página. Pie (footer): Incluye fecha, información de peticiones y banners. Cada uno de los bloques de información que se encuentran en las zonas laterales y que OsCommerce les denomina Cajas, son módulos que podremos configurar de forma sencilla y sin necesidad de programación. El módulo Cajas se explicará más adelante. Los paneles laterales, la cabecera y el pie se mantienen fijos mientras que en la zona central se presentarán las distintas páginas de la tienda, los productos, la cesta del cliente, el pedido, etc.
19
No obstante, si necesitamos cambiar el estilo, color de fondo, tipo de fuente, u otra característica de diseño, podemos hacerlo modificando la hoja de estilos de la aplicación OsCommerce. Con algunos conocimientos de programación de hojas de estilos será suficiente. Una hoja de estilos es un archivo que almacena información de las características de elementos que componen las páginas web. Por ejemplo, en una hoja de estilos se puede establecer que el fondo del encabezado del sitio web sea de color azul, de esta forma definiremos en un único sitio el color de un elemento que se repetirá a lo largo de muchas páginas. Veamos un ejemplo de OsCommerce. La hoja de estilos se encuentra en el directorio catalog/stylesheet.css, tiene el siguiente aspecto:
Fijémonos en el bloque de código que comienza con la palabra body. Las líneas de código que se ven a continuación indican a todo el sitio web (a toda la tienda) que la parte llamada body va a tener un fondo color blanco (#fff = color blanco), el texto color negro, el margen será 0 pixeles y la letra tendrá un tamaño de 11 pixeles será de la familia Lucila Grande, Lucila Sans, Verdana, Arial o sans-serif.
20
Si quisiéramos cambiar el color de fondo del elemento body a azul bastaría modificar la línea de código,
background: #00f;
El resultado sería el siguiente, todo el elemento body se ha coloreado de azul. Ha sido suficiente una modificación en un único archivo para que se ejecute en todo el sitio web.
Acabamos de comprobar que se puede cambiar el aspecto de nuestra tienda OsCommerce sin modificar su funcionalidad, de forma sencilla y con apenas conocimientos de HTML y CSS. Todo el aspecto gráfico de la tienda es personalizable, cada una de sus partes pueden cambiarse utilizando adecuadamente la hoja de estilos o el lenguaje de programación.
21
Módulo “Cajas” Este módulo nos permite cambiar de posición los bloques de información (llamados Cajas) situados en los paneles laterales (columnas izquierda y derecha).
Todos los módulos tienen los mismos parámetros de configuración.
Enable <<nombre del módulo>>: si seleccionamos True estará a la vista y con False estará oculto en el front-end de la tienda.
Content Placement: si seleccionamos Right Column se situará el módulo en la zona lateral derecha, mientras que si elegimos Left Column se situará a la izquierda.
Sort Order: se indicar el orden en el que se mostrará dicho módulo. El valor numérico más pequeño se mostrará antes que el más grande.
Para configurar los parámetros de cada módulo hay que pulsar sobre el botón Editar. Para eliminar el módulo del panel de Administración se debe pulsar sobre el botón – Quitar Módulo.
22
Estructura de navegación de OsCommerce El esquema que muestra la imagen siguiente describe la estructura de navegación de la tienda OsCommerce.
23
PRÁCTICA
24
Práctica En la práctica siguiente tiene que añadir el logo de su tienda online. Debe realizar un diseño de texto o imagen de 200 x 50 pixeles (aprox.) e incorporar al diseño del sitio para sustituirlo por el que viene por defecto. En esta práctica se pide: Añadir el logo de su tienda.
Añadir el logo de su tienda Prepare una imagen para colocar como logo de su tienda de tamaño similar al logo de OsCommerce y con formato PNG. El logo de OsCommerce tiene 200 píxeles de ancho por 50 píxeles de alto y se almacena en el directorio, C:/wamp/www/oscommerce/catalog/images/store_logo.png En el directorio images se almacenan todas las imágenes pero en este caso no tendrá que guardar en esa carpeta su nuevo logo puesto que en la instalación en local lo hace de forma automática. Para cambiar el logo debe ir a Administración>Configuración>Logo Tienda
Suba su nuevo logo con el botón, Seleccionar archivo, y termine pulsando sobre el botón Grabar.
25
Actualice la vista pública de su tienda y verá su logo en la cabecera de la página. Le mostramos un ejemplo:
26