domingo, 10 de mayo de 2009

Diseño web. Briefing y benchmarking II

  1. Navegación principal destacada. Este criterio evalúa la colocación de los menús de navegación en un sitio destacado y “esperado”. Los usuarios de estos sitios no tienen poque ser usuarios avanzados así que la navegación ha de ser estándar. Epicurious, Allrecipes y Delices tienen colocados los menús en sitios convencionales aunque con ligeras diferencias. Allrecipes es el que mejor cumple los estándares, uno arriba y otro a la izquierda. Epicurious también coloca uno arriba y el segundo a la izquierda aunque debajo de otras informaciones lo que hace que casi desaparezca de la primera pantalla, si bien están disponibles en los desplegables del menú superior. Recetae utiliza otra forma de clasificación y de navegación, aunque está clara la forma de navegación. En Karlosnet el que hay en la parte superior está cercado por dos banners lo que hace que la posición destacada se pierda; el que hay en la parte izquierda está debajo de una foto del cocinero, por qué? lo conoce todo el mundo? o sólo en España?.
  2. Buscador propio. Este criterio evalúa la inclusión de un buscador propio ya que se considera muy apropiado para estos sitios por su posible extensión y porque contiene información muy específica, muy susceptible de ser encontrada por este sistema. Todos tienen buscador, los mejores los de Allrecipes y Recetae que busca en todo su contenido no se limita a las recetas como en el de Epicurious y Karlosnet. Delices no posee buscador propio sino que es google.
  3. Caja del buscador amplia y bien situada. Todos los buscadores, excepto el de Karlosnet, son lo sufientemente amplios para las búsquedas, están situados en sitios bastante accesibles y son visibles. El de Karlosnet es el más pequeño, está en un sitio que no es el convencional y además se confunde con el resto. El de Recetae también esta colcado en un sitio no habitual pero resalta lo suficiente al tener un área más grande.
  4. Elementos más importantes en un primer vistazo. Se considera que en un sitio de este estilo, lo más importante son los accesos a recetas, la participación social y la recuperación de información, por lo tanto han de estar accesibles en la primera pantalla (810 px) o haciendo un pequeño scroll (1000 px). Delices es el que no cumple o muy escasamente este criterio, ya que no se ve prácticamente nada de interés, sólo el buscador. El resto en esos primeros pantallazos tienen acceso tanto a recetas como a los foros donde participar como a los buscadores.
  5. Título de la página. Este criterio hace referencia al título de la ventana, se valora este criterio por dos motivos, por un lado por usabilidad, por otro lado, porque influye en la localización y posicionamiento de google. Se valora que tenga el nombre de la empresa y que contenga alguna palabra clave que sea susceptible de ser utilizada en un buscador para encontrar el sitio. Karlosnet no cumple ninguno de los dos requisitos, utiliza una frase descriptiva apoyada en la fama, en su país, del cocinero. Delices utliza unicamente la palabra clave (receta/recetas). Los otros tres son los que mejor solucionan este criterio ya que usan los dos recursos, quizás Recetae tendría que ser más “expresivo”, ya que se queda un poco corto.
  6. Anuncios en periferia. Se valora porque la gente evita la publicidad y los artículos que estén a su alrededor pueden verse influenciados. Recetae no tiene con lo cual no se valora. Karlosnet tiene una publicidad muy agresiva, parece que sólo quiere ganar dinero a cualquier precio, la cabecera es una mezla de banners y logotipos, tiene dos columnas de banners a la derecha, un banner enmedio del contenido, otro banner a la izquierda. Delices pone los anuncios que tiene enmedio, antes que las recetas. En el caso de Allrecipes y Epicurious curiosamente en la home sólo disponen un poco de publicidad en la derecha y es en los siguientes niveles cuando incluye publicidad en cabecera.
  7. Registrarse como usuario. En este criterio se valora que en la opción de registrarse no se mencione únicamente, sino que se añadan los beneficios de registrarse. Los que mejores aplican este criterio son Epicurious y Recetae, Allrecipes no lo aplica en la home si no en el siguiente nivel, y Karlosnet y Delices directamente no lo aplican.
  8. Comunidad o foros con vínculos específicos. Como se estima que la participación social es muy importante, este criterio valora que el vínculo a las comunidades o foros este en lugar visible, y que no se haga exclusivamente de una manera literal, sino que se añadan unos vínculos a los temas que más se debatén en los foros o cualquier otra idea que exprese participación. Los que peor utilizan este recurso son, nuevamente, Karlosnet y Delices, en ambos casos sólo existe un vínculo literal en el menú. En el caso de Recetae es el que más importancia le da al hecho de registrarse ya que lo coloca en un lugar prefente y muy destacado. Allrecipes lo coloca también en el primer pantallazo en un menú específico. El que hace una utilización más intensiva es Epicurious que también lo coloca en una zona destacada, pero además en la home pero más abajo tiene su propia sección con algunos temas.
  9. Utilización de etiquetas «h1, h2...» Este criterio se valora por dos motivos: demuestra una metodología a la hora de ordenar la información lo que favorece la accesibilidad del sitio; por otro lado, es otro de los criterios que utilizan los buscadores a la hora de realizar el posicionamiento. El único que hace utilización plena de este recurso es Epicurious, Recetae y Allrecipes no utilizan «h1» pero sí las siguientes, y Karlosnet y Delices no utilizan ninguna.
  10. Separación información-diseño. Este criterio afecta a la accesibilidad de las páginas y a la versatilidad gráfica del diseño. Los dos que realmente separan los dos ámbitos son Epicurious y Recetae. Karlosnet no utiliza las clases, sigue utilizando las tablas, etc... Allrecipes y Delices utilizan clases, aunque siguen utilizando tablas aunque mezcladas con etiquetas «div».
  11. Utilización de palabras clave. Es un criterio exclusivamente para posicionamiento en buscadores. Los dos peores son Karlosnet y Recetae que se mueven en el rango 10-15, después está Allrecipes 15-20, y finalmente Delices y Epicurious en el rango 20-25.
  12. Multimedia. En esta época de web 2.0 y con menos limitaciones técnicas se valora la inclusión de vídeos, podcasts... Sólo incluyen vídeos Delices, Epicurious y Recetae. Aunque en el primero son sólo unos extractos de una cadena de documentales.
  13. Web 2.0. Este es un criterio de apreciación personal, e intenta valorar la intención en adapatarse a la nueva web, mayor participación del usuario, nuevos medios, etc... en definitiva que no sea un mero escaparate. Todos los sitios tienen una comunidad o foro, todos dejan subir y compartir recetas, en la mayoria se pueden hacer comentarios de las recetas, algunos dejan subir vídeos. Karlosnet dispone de un foro con diversos temas en los que se pueden incluir recetas. No dispone de la posiblidad de comentar las recetas de la empresa pero se pueden comentar las de los usaurios através de los foros. Delices es la que es menos participativas ya que unicamente se pueden compartir recetas y comentarlas. Epicurious dispone la posibilidad de compartir y comentar recetas, subir vídeos, además tiene foros... Recetae dispone la posibilidad de compartir fotos y videos de las recetas. Allrecipes sólo dispone de la posiblidad de compartir las recetas.

En la tabla adjunta se ofrecen las distintas valoraciones para los cuatro sitios web analizados

Diseño web. Card-sorting

El card-sorting u ordenación de tarjetas consiste en que un grupo de personas agrupan y asocian entre sí un número predeterminado de tarjetas etiquetadas con las diferentes categorías temáticas del sitio web.
Las personas que participan en este procedimiento tienen que ser potenciales usuarios de nuestro sitio web, y cuantas personas participen, 5 mínimisimo, más fiables serán los resultados obtenidos. La «tarjeta» ha de tener el nombre real del servicio y se le puede acompañar una descripción real del servicio, no tienen que ser frases de marketing. Es recomendable que no se le presenten más de 70 tarjetas por usuario. También ha de ser de una duración determinada, para unas 40 tarjetas unos 20 minutos.
La mecánica consiste en entregar las tarjetas, barajadas, a los participantes y han de agruparlas por similaridad. ¿Cómo se agrupan? Se puede hacer de dos formas. La primera, se les da los grupos, número y denominación, en los que tiene que agruparlas. En este caso hablaríamos de un card-sorting cerrado. La segunda forma de agruparlos es dejarlo a total discrecionalidad de los usuarios, tanto en número como en cuanto a denominación, preguntando en este caso la denominación de los grupos que han formado. En este caso hablaríamos de un card-sorting cerrado.
Existen aplicaciones informáticas de card-sorting: web-sort, EZSort, cardswort, etc...
Se pueden realizar dos tipos de análisis de los datos. Un análisis cualitativo, que consiste en anotar todas las dificultades, dudas, preguntas, con las que se encuentra el usuario. Se puede anotar que tarjetas agrupa con más rapidez, etc...
El segundo tipo de análisis que se realiza es el cuantitativo, y consiste en el procesamiento estadístico de los datos obtenidos por todos los usuarios.
De toda esta técnica se consigue aproximarse a cómo ven los usuarios la organización de nuestro sitio web, reduciéndose la incertidumbre.
A continuación os muestro un ejemplo de card-sorting realizado para este proyecto con 10 usuarios.

De este diagrama se ven cuáles son las agrupaciones que se forman en los seis grupos que yo quiero que haya.
Un resultado que a mí me ha llamado la atención, en este caso concreto, es que la categoría de «grandes chefs» se ha colocado con las categorías de «técnicas avanzadas», «técnicas básicas», etc... Cuando yo como promotor del sitio la habría puesto junto a las categorías de «restaurante más votado», «buscar restaurante», etc... Lo que demuestra que estaba equivocado, los usuarios lo ven en otro lugar.

Diseño web. Arquitectura de la Información I

Como he comentado anteriormente la arquitectura de la información consiste en organizar los contenidos para que el usuario pueda manejarlos, navegar por ellos y satisfacer sus necesidades de información. Es decir, incluye los sistemas de organización y estructuración de los contenidos, los sistemas de rotulado y etiquetado de dichos contenidos (naming) y los sistemas de navegación y recuperación de la información.
Todo esto se logra a través del análisis, descripción, indiziación y clasificación de los contenidos de nuestro sitio web mediante una serie de herramientas y conceptos. Así para la indiziación de contenidos podríamos utilizar los metadatos, categorías, taxonomías, palabras claves, etc.
Para el proyecto que estamos estudiando y de todo lo que llevamos expuesto sacaríamos un «arbol» web, en este caso derivado del card-sorting, como el siguiente:

Del cual hemos desarrollado, un poco, la parte de las recetas.

Diseño web. Arquitectura de la Información II

Recuperación de información
Debido a la amplitud del sitio sólo se va tratar la recuperación de la información en las secciones de las fichas técnicas de las recetas, los vinos y los restaurantes.

Facetado
Para implementar los sistemas de recuperación de la información se facetarán tanto las recetas, como los vinos y restaurantes, y se asignarán a los elementos las categorías correspondientes a sus facetas.
En las recetas se asignan las siguientes facetas: Ingrediente principal, ingrediente secundario, país/región, tipo de plato, temporada, dificultad, método de cocción, tiempo de preparación, dietas especiales, votación. La indización en este caso la realizará el usuario cuando publique su receta, y se le indicará cuáles son obligatorias y cuáles son opcionales. En este caso todas las facetas tienen unas categorías cerradas y se le presentará al usuario en forma de menú desplegable.
Para los vinos se crean las siguientes facetas: Añada, color, tipo, uva, país/región, bodega, puntuación.
Restaurante: Ciudad, precio, puntuación, tipo. En este caso la indización también la realizara el usuario, siendo todas las facetas de categorías cerradas, excepto en el caso de la bodega, que por la imposibilidad de poder abarcarlas todas se le ofrecerá una caja de texto para que incluya el nombre de la bodega.
También para los restaurantes se han creado unas facetas: Tipo de cocina, precio, país, ciudad y puntuación. Al igual que en los dos casos anteriores la indización la realizará el usuario. La faceta “ciudad” es muy amplia así que se utilizará una caja de texto para que el usuario pueda indizarla.
A todos los recursos habría que añadir los metadatos de título/nombre y fecha.

Sistemas de recuperación de la información
Para la recuperación de información se utilizará tanto sistemas de búsqueda como de navegación.
  • sistemas de búsqueda:
    • sistema tradicional de consulta a base de datos por solicitud del usuario mediante palabras clave introducidas por él. Se ofrecerá en todo el sitio web en la esquina superior derecha y consistira en una caja de texto para introducir las palabras clave y un botón de buscar.
    • Sistema de consulta a base de datos por solicitud del usuario mediante criba por categorias de facetas sugeridas por gestor del sitio. Se ofrecerá en la home y en cada una de las páginas principales de las secciones de recetas, vinos y restaurantes.
  • sistema de navegación: sistema de directorios organizado según las facetas y categorías de los elementos. Se ofrecerá en las secciones de recetas, vinos y restaurantes.
En el cuadro adjunto os muestro una relación más detallada de las facetas y sus categorías para recetas, vinos y restaurantes.

Diseño web. Wireframes I

Ya hemos llegado a la última fase de nuestro proyecto, los wireframes. Éstos no son más que un bocetado de nuestro sitio web con explicaciones sobre las funciones a realizar, que se presenta al cliente. Es aquí donde aplicaremos gráficamente todos los pasos que hemos dado anteriormente.
El boceto que se puede realizar es con el resultado final, es decir ya diseñado, y así el maquetador puede empezar su trabajo; o por el contrario, puede ser un esquema gráfico de cómo va ser nuestro sitio. Dependiendo de que opción hayamos elegido es aquí donde podremos dar rienda suelta a nuestra imaginación y a nuestros conocimientos como diseñadores gráficos.

En el proyecto que estamos viendo el bocetado está casi completo, el sitio web tendría un aspecto similar al que veis.


Home
  1. Area de navegación. Está dividida en dos partes, en la primera, a la izquierda, incluiremos las secciones más importantes para el usuario y cada sección tendrá un menú desplegable con sus respectivas secciones. En la segunda parte, a la derecha, se dará acceso a las secciones del sitio web con un uso menos intensivo.
  2. Buscador. Buscador en flash de recetas o vino o restaurante en el que se efectúa un filtrado según dos características.
  3. Area de Comunidad. Área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios.
  4. Área de noticias. Sección en el que se ofrece periódicamente un resumen de una receta, un vino y un restaurante. Estarán directamente vinculados con su ficha técnica desarrollada. El resumen se acompaña con una serie de iconos que ofrecen un resumen de las características y que corresponden a una categoría de las facetas de cada elemento.
  5. Área de recursos. Sección actualizada periódicamente de pequeños recursos.
  6. Área histórica. Sección en el que se enumeran los elementos de recetas, vinos y restaurantes publicados en el último mes, para que el usuario que no realiza una visita periódica frecuenta pueda consultar las novedades.

Diseño web. Wireframes II



Home zona recetas
  1. Area de navegación. Está dividida en dos partes, en la primera, a la izquierda, incluiremos las secciones más importantes para el usuario y cada sección tendrá un menú desplegable con sus respectivas secciones. En la segunda parte, a la derecha, se dará acceso a las secciones del sitio web con un uso menos intensivo.
  2. Buscador. Buscador en flash de recetas o vino o restaurante en el que se efectúa un filtrado según dos características. Aquí podemos apreciar la labor de los arquitectos de la información.
  3. Area de Comunidad. Área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios.
  4. Área de contenido. En esta sección se ofrecerá:
    • Receta de la semana: Breve descripción con las características plasmadas mediante iconos.
    • Receta más votada o comentada: Breve descripción con las características plasmadas mediante iconos.
    • El menu de la semana: Breve descripción del menú que hay para la semana. Se dará acceso a algunas fichas técnicas de las recetas. También se dará acceso a menus de dietas especiales (para celíacos, diabetes...)
  5. Acceso a las recetas y los menus del mes

Buscar receta y resultado


  1. Area de Comunidad. Se mantiene esta área porque se considera de máxima importancia. Es un área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios. Este contenido se puede variar a lo largo del sitio: cambiando las noticias de los foros y “lo más votado” por “lo más comentado”, “lo más nuevo”...
  2. Buscador. Se mantiene el buscador por si el usuario equivocó los crierios de búsqueda o quiere cambiarlos.
  3. Resultados de búsqueda. Se muestran los resúltados de la búsqueda según parámetros deseados por el usuario. En los resultados se muestra: el título de la receta, descripción, características de la receta, representado mediante iconos y que se corresponden con las facetas de la receta. Estas características las habrá introducido el usuario cuando haya publicado la receta. Se ofrece la posibilidad de ccambiar el criterio para ordenar los resultados de la muestra.
  4. Publicidad.

Diseño web. Wireframes III


Ficha técnica de receta

  1. Area de Comunidad. Se mantiene esta área porque se considera de máxima importancia. Es un área en la que el usuario puede registrarse o darse de alta. Además se ofrece noticias de la comunidad como preguntas más activas de los foros y contenido más votado por los usuarios. Este contenido se puede variar a lo largo del sitio: cambiando las noticias de los foros y “lo más votado” por “lo más comentado”, “lo más nuevo”...
  2. Menú de Ficha Técnica. Menú para navegar por las distintas secciones de la receta: receta, comentarios, imágenes y vídeos. Estos menúa aparecerán si existe contenido para ellos.
  3. Ficha Técnica. Área de conternido de la receta. Se mantienen los iconos que describen las características de la receta. Se divide en dos secciones ingredientes y elaboración. En la sección ingredientes se añaden dos botones para añadir éstos a una lista de la compra que será acumulativa con los ingredientes de las distintas recetas que haya elegido el cliente, para poder imprimirla de una vez.
  4. Área interactiva. Área en el que el usuario podrá incluir un comentario a la receta, votar la receta, y añadir a una lista personal en la que se incluirán todas las recetas que quiera el usuario.