1. Título / Tema del sitio Web elegido
El título del sitio es Muchocine.net, “Critica independiente de cine en cartelera”.
El tema del sitio es la crítica cinematográfica de las películas que se exhiben en cartelera y de clásicos del cine.
2. Descripción global del sitio
Muchocine.net es una página web que recoge críticas de diversas fuentes de internet como blogs o webs de cine, y las recopila y organiza para que podamos acceder a ellas de forma sencilla y eficaz.
Muchocine.net fue un proyecto que nació en = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />2005. A pesar de mis esfuerzos personales por mantener un diseño coherente, Muchocine presenta muchas lagunas en términos de diseño, arquitectura de la información y usabilidad, así como de accesibilidad.
3. Planteamiento general del trabajo
La web de muchocine lleva en funcionamiento dos años. Por tanto es una web en cierta medida "madura", pero es necesario un nuevo diseño general de la usabilidad y accesibilidad de la misma.
Por tanto el objetivo del trabajo es hacer un rediseño integral de las partes más importantes y más leídas del portal para mejorar la experiencia de usuario tanto de lectores como de críticos.
4. Mapa de contenidos
La web se divide en las siguientes zonas:
- Portada: Donde tienen cabida las últimas críticas publicadas así como otros elementos de actualidad destacados. La filosofía de la portada es destacar aquello que tenga más importancia o peso editorial siempre desde el prisma de la crítica cinematográfica.
- Críticas: En esta zona tienen cabida todas las críticas listadas por varios criterios de ordenación:
- Cronológico "Últimas críticas"
- Por autor "Críticas de autor"
- Por género:
- Acción
- Animación
- Ciencia Ficción
- Comedia
- Documental
- Drama
- Suspense
- Terror
- Por orden alfabético: Desde la "A" a la "Z"
- Agenda: En esta zona tienen cabida todas aquellas informaciones que sean relevantes en el mundo del cine. De momento se dividen en tres categorías:
- Pases de prensa: Notas de prensa e invitaciones a actos y estrenos de películas en las cuales se pueden apuntar nuestros críticos para asistir y confirmar asistencia.
- Noticias: Noticias enviadas por nuestros críticos a la sección Agenda.
- Opiniones: Opiniones vertidas por nuestros críticos a la sección de Agenda.
- Foros: Los foros son en cierta parte independientes de todo el contenido y son administrados por una tercera persona. La tecnología utilizada es la conocida plataforma de foros PHPBB. La organización de la secciones de momento no está nada clara y se está debatiendo todavía en los mismos foros.
- Críticos: La zona de críticos es el listado oficial de participantes en MuchoCine. Los críticos que escriben están listados en base a tres criterios:
- Los más activos del mes: es decir, los críticos que más películas han criticado en el plazo de un mes
- Los especialistas: es decir, aquellos que tienen algún tipo de contenido especial en muchocine.net
- Listado de críticos ordenado por número de reseñas: Listado completo de todos los críticos ordenado por el número total de reseñas que ha escrito cada uno.
Especiales: Los especiales son agrupaciones de críticas con un texto introductorio coordinadas por un crítico usuario de MuchoCine. En principio se pueden hacer especiales de todas las temáticas que sean precisas.
RSS: Es el espacio dedicado a la sindicación en todas sus formas. RSS, OPML y contenido sindicable para las webs de los usuarios de MuchoCine.
- Ayuda: Página dedicada a clarificar el objetivo y definición de MuchoCine, así como las condiciones legales del portal.
5. Estructura de una página modelo
La página modelo es la página de críticas de cine, la cual tiene la siguiente estructura:
· Cabecera:
· Logotipo. El logo consta de búho que es la mascota de MuchoCine. El búho significa el que observa desde lo alto, el sabio, el analítico, el que no pierde de vista nada. Debajo del logotipo hay una línea de texto que define claramente qué es muchocine: "Crítica independiente de cine en cartelera".
· Caja de búsqueda de películas. Caja de búsqueda lo suficientemente amplia para buscar frases o títulos de películas sin problemas.
· Enlaces importantes:
· ¿Qué es MuchoCine?
· ENVIAR CRITICA
· Contacto
· Menú horizontal
· Portada
· Críticas
· Agenda
· Foros
· Críticos
· Especiales
· RSS
· Cuerpo del texto
· Columna central:
· Crítica
· Cartel
· Crítico
· Perfil, nombre y enlace a web
· Lo mejor
· Lo peor
· Últimas críticas
· La más valorada
· La menos valorada
· Trailer
· Especiales (si los hay)
· Enlace a género
· Columna lateral
· Imágenes de carátulas relacionadas con género
· Enlace a películas relacionadas con el género
· Pie de página
· Enlaces a las principales secciones
· Aviso legal, copyright, etc
Otra de las páginas que más importancia tiene en muchocine es la página de portada que cuenta con los siguientes elementos:
· Cabecera:
· Logotipo. El logo consta de búho que es la mascota de MuchoCine. El búho significa el que observa desde lo alto, el sabio, el analítico, el que no pierde de vista nada. Debajo del logotipo hay una línea de texto que define claramente qué es muchocine: "Crítica independiente de cine en cartelera".
· Caja de búsqueda de películas. Caja de búsqueda lo suficientemente amplia para buscar frases o títulos de películas sin problemas.
· Enlaces importantes:
· ¿Qué es MuchoCine? Objetivo y definición del proyecto muchocine
· ENVIAR CRITICA
· Contacto
· Menú horizontal
· Portada
· Críticas
· Agenda
· Foros
· Críticos
· Especiales
· RSS
· Regleta clasificación alfabética
· Módulo "En portada"
· Foto
· Texto
· Cuerpo de portada
· Primera columna
· Preestrenos
· Estrenos en cartelera
· Segunda columna
· Las críticas más valoradas
· Especiales de Muchocine
· Tercera columna
· Últimas críticas recibidas
· Los críticos más activos
· Últimos mensajes del foro de cine
· Pie de página
· Enlaces a las principales secciones
· Aviso legal, copyright, etc
6. Herramientas de desarrollo
· TAW, Bobby y Hera serán los servicios que utilice para evaluar automáticamente la accesibilidad del sitio.
· Lynx, Multiple Explorer, Opera y Firefox serán los navegadores que utilice para verificar manualmente la accesibilidad al sitio.
· HTML Kit para el diseño y la programación de las páginas web, es un programa gratuito para editar archivos html y php. Dicho programa viene con un sistema de FTP incluido muy cómodo de usar ya que sólo tenemos que abrir los archivos desde el servidor y al editarlos directamente el programa se encarga de subir el archivo actualizado a la dirección web.
7. Descripción de las tecnologías utilizadas
Se ha requerido PHP versión 4 para desarrollar las páginas de muchocine y también la base de datos MySQL para guardar en tablas todos los datos relacionados con la web.
Las plantillas están en PHP y los datos se guardan en una base de datos MySQL. Distintas rutinas y métodos de acceso a datos que dispone PHP nos permiten recuperar contenido de la base de datos de manera sencilla.
La versión utilizada en muchocine de CSS es la 2.0.
8. Planificación temporal
Puesto que la web ya está creada y lo que vamos a realizar es un rediseño de la web, y no una creación desde cero, las fases previas o de creación de la web no serán tratadas tan a fondo puesto que el trabajo de diseño y programación ya está realizado (diseño de interfaces, creación de contenido textual, tratamiento de imágenes y programación de scripts y CSS).
Fases | Días |
Preliminares | 1 |
Evaluación de la usabilidad (Test Heurístico) | 4 |
Pruebas de usuario | 6 |
Evaluación de la Accesibilidad | 2 |
Ajustes finales | 2 |
Preliminares: definición de objetivos y público objetivo.
El objetivo del rediseño será hacer la web más accesible y usable a todos los usuarios de muchocine. Esto significa varias cosas, por un lado que la interacción de los críticos de muchocine con la web sea mucho más agradable y se lleve a cabo de forma natural. Por otro lado, se ha de facilitar la lectura y funcionalidad de la página a los miles de lectores que cada día se pasean por el portal. Por tanto, en orden de preferencia deberíamos separar los lectores de los críticos que alimentan la web de muchocine.
Dividimos los usuarios de la web en dos grandes grupos:
· Críticos de muchocine: Colaboran activamente con la web e interactúan con el interfaz de envío de críticas. Es necesario diseñar algún sistema que les retenga o al menos les recuerde que deben publicar su crítica no solo en su blog sino también en Muchocine. También sería conveniente facilitarles la labor al enviar críticas, suavizar el diseño de los formularios y hacer más agradable su colaboración con el portal.
· Lectores de muchocine
· Lectores puntutales: Suponen el 90% de los visitantes y suelen venir desde Google para ver una crítica puntual de alguna película de actualidad. No conocen MuchoCine.net y su tiempo de estancia suele ser corto.
· Lectores habituales: Son aficionados al cine y suelen tener Muchocine como enlace favorito o vienen directamente de enlaces de otras bitácoras de cine que nos apunten.
Evaluación de la usabilidad
• Test Heurístico. Es necesario que primeramente sea la persona experta en usabilidad la que evalúe los posibles errores que pueden encontrar los usuarios en la página mediante el test heurístico. Se evaluará si se cumplen los 10 principios heurísticos de Jakob Nielsen. Aspectos a tener en cuenta:
· La frecuencia con la que ocurre el problema: ¿es muy probable o no?
· Su impacto cuando ocurre: ¿los usuarios se podrán recuperar fácilmente del error?
· La persistencia del problema: ¿va a ocurrir solo una vez, y cuando el usuario se lo aprenda no ocurrirá más, o aparecerá repetidamente cada vez que realicemos un acción?
• Test de Usabilidad. Los pasos que seguiremos para llevar a cabo el test de usabilidad son los siguientes:
· Planificación: El objetivo de este test será hacer la web más usable a todos los usuarios de muchocine, tanto a los usuarios habituales o críticos de cine que publican críticas como a los lectores habituales que no interaccionan con la web, pero si leen los artículos que envían los primeros.
· Desarrollar los escenarios: debemos decidir qué tareas consideramos más relevantes y preparar escenarios que nos permitan evaluarlas en el tiempo del test.
· Conseguir participantes que representen lo más fielmente posible nuestros usuarios potenciales (o actuales). Puede resultar interesante que los participantes sean seleccionados por empresas expertas en esta tarea, y, además, generar una base de datos para futuras pruebas.
· Realizar el test de la forma más objetiva y no-intrusiva posible:
1. Que interaccione con el usuario un experto.
2. Que observadores expertos escuchen, observen y tomen notas.
3. Informar a los usuarios de su tarea: que no están siendo evaluados, sino que nos están ayudando a probar y mejorar el sitio. Deben realizar tareas reales.
4. Animar a los usuarios a que hablen en alto mientras prueban el sitio, para saber qué están pensando, cuáles son los problemas que se encuentran, etc. Fomentar que expresen sus reacciones. Si el test lo realizan dos o más usuarios a la vez, es más fácil que hablen en alto si se fomenta el diálogo entre ellos.
5. Escuchar de la forma menos intrusiva posible, evitando guiar. Para ello tenemos que tener cuidado también con las preguntas que hagamos, para no coartar las respuestas que nos den.
6. Tomar notas cuidadosamente, considerando sobre todo el comportamiento del usuario
El plazo estimado para desarrollar todas estas tareas será de 4 días.
Pruebas de usuario
Las pruebas de usuario consistirán en:
· Card sorting: Para decidir la importancia de todos los elementos de portada y para decidir la importancia de todos los elementos del menú horizontal que se repite en la navegación de la página.
· Test a los usuarios. Deben poder ser enviados por correo electrónico ante la imposibilidad de estar en su propio contexto.
Evaluación de la Accesibilidad
La evaluación de la accesibilidad consistirá en dos fases, la automática y la manual. Primero llevaré a cabo la fase automática y luego la manual para corregir errores.
· Validación automática:
· TAW
· Bobby
· Hera
· Validación manual
· Opera (modo usuario sin imágenes)
· Lynx
· Firefox 2
· Internet Explorer 6 y 7
Ajustes finales
Los ajustes finales me llevarán aproximadamente 2 días. Consistirán en comprobar de nuevo la web de modo general para ver inconsistencias o quizá alguna duplicidad en enlaces. Es probable que sea necesario hacer de nuevo el test heurístico de nuevo para comprobar que todas las condiciones se cumplen.
9. Diseño del sitio Web
Aunque el sitio web ya está desarrollado, creo que es necesario hacer el seguimiento de las siguientes consideraciones. Marco con un OK las condiciones que se cumplen:
1.- Consideraciones en el diseño de la página principal
· Debemos crear una primera impresión positiva de nuestra web. La web crea una primera impresión positiva. OK
· Debe contener, en una cantidad limitada de texto:
· 1. Acceso a las opciones principales. OK
· 2. Anuncios con las últimas actualizaciones de la página. OK
· 3. Información sobre el objetivo de la página web. OK
2.- Consideraciones de diseño sobre el hardware y software disponible:
· Asegurar la compatibilidad con todos los navegadores y sus versiones: Hay que considerar que en la actualidad no solamente se utiliza Microsoft Internet Explorer, sino también, aunque en menor medida, otros como Netscape Navigator u Ópera. En este sentido lo óptimo es seguir las recomendaciones de W3C para que sea portable, y probarlo en distintos sistemas operativos y versiones de los navegadores. OK
· Diseñar para distintos monitores y resoluciones de pantalla: Al igual que ocurría con los navegadores, podemos tener usuarios cuya pantalla o tarjeta gráfica no sea demasiado moderna, y nuestros diseños deben verse correctamente también en esos casos. OK
· Minimizar el tiempo de descarga de la página (reduciendo su tamaño, especialmente el de las imágenes), ya que no todos los usuarios tendrán conexión a internet rápida. Avisar si hay algún temporizador (time-out) programado. Si el usuario debe esperar, proporcionarle la realimentación adecuada, y también si los tiempos de descarga van a ser elevados. OK
3.- Consideraciones de diseño para optimizar la experiencia del usuario:
· Proporcionar un enlace a un documento que se pueda imprimir ya que muchos usuarios prefieren ese formato. Desarrollar páginas que se impriman correctamente. OK
· Reducir la carga cognitiva necesaria para utilizar la página: situar los elementos para que el usuario pueda localizarlos fácilmente, y procurar que no sea necesario memorizar el contenido de una página para comprender/utilizar la siguiente. OK
· Mostrar la información en el orden correcto: si es secuencial, en orden cronológico, y si no lo es, escribir primero la información más relevante. OK
· Mostrar la información siguiendo formatos conocidos (por ejemplo, para las direcciones y los horarios) y procurar que el usuario no tenga que realizar conversiones entre ellos, (visualizando las temperaturas en grados celsius y fahrenheit, por ejemplo). OK
· No mostrar ventanas (pop-ups) o gráficos sin consentimiento del usuario. OK
· Estandarizar las secuencias de tareas similares, aunque tengan que realizarse en distintos momentos, ya que el usuario las puede aprender. OK
· Utilizar el vocabulario de nuestros usuarios: cuanto más sencillo sea, mayor cantidad de personas podrán entender la información. Deberíamos considerar incluso mostrarla en varios idiomas. OK
4.- Consideraciones de diseño en el formato de la página
1. Dividir el texto en partes manejables: escribiendo secciones cortas, párrafos cortos (incluso de una frase), frases cortas, y utilizando cuando sea conveniente tablas, listas, fotos y ejemplos. Un texto que en papel es muy fácil de leer puede resultar muy denso en pantalla. OK
2. Situar la información dependiendo de su importancia:
· Los elementos importantes deben estar en la parte central superior. OK
· Estructurar las páginas de forma que permitan realizar comparaciones y detectar diferencias, tendencias y relaciones fácilmente. OK
3. Utilizar muchas cabeceras:
· Ayudan a fragmentar el texto, y facilitan al usuario una lectura rápida para localizar la información. Además, si se utiliza color o negrita, la página resultará más interesante. OK
· Que sean útiles, que transmitan de forma concisa la información relevante. OK
· Utilizar las cabeceras para generar un "índice" de hipervínculos que situemos al principio del documento para permitir al usuario localizar rápidamente lo que le interese. OK
4. Escribir el contenido "de forma visual":
· Utilizar bien el espacio en blanco, para que se pueda apreciar fácilmente la estructura del documento (que no genere confusión al pensar que no haya más texto, pero que nos permita separar los distintos fragmentos de información). OK
· Resumir: debemos revisar el documento hasta conseguir expresar la misma información con el mínimo número de palabras posible. OK
· Usar listas de viñetas o numeradas para los procesos en los que haya varios pasos secuenciales implicados. OK
· Incluir la información en tablas resumen. OK
· Dar ejemplos. OK
· Utilizar iconos o pequeñas imágenes para localizar fácilmente cierta información (un teléfono al lado del número, por ejemplo), o gráficas en vez de enumerar los datos. En estos casos no debemos olvidar el texto alternativo. OK
5. Alinear los elementos visualmente en la página, vertical u horizontalmente. OK
10. Metodología de Evaluación
Evaluación de la Usabilidad (Test Heurístico)
Analizamos heurísticamente la página mediante el método de evaluación tradicional de los 10 principios de Jakob Nielsen para identificar en esta primera etapa, posibles errores o problemas en el interfaz o experiencia de usuario.
1. El usuario debe ser informado de estado del sistema en un tiempo razonable. Debe conocer su ubicación, por ejemplo, con el logotipo de la empresa en todas las páginas, títulos de página autoexplicativos, utilizando rastros de migas (breadcrumbs), etc.
Las pestañas del menú de cabecera de muchocine son bastante indicativas del lugar donde se encuentra el usuario, sin embargo pueden surgir problemas cuando hay una navegación interna y quizá sería necesario en páginas de segundo o tercer nivel utilizar rastros de migas para informar al usuario en qué punto se encuentra. La cabecera está formada por un logotipo y un buscador que se repiten a todos los niveles para mantener la coherencia de navegación e indicar al usuario que sigue en muchocine.
Debajo del logotipo se encuentra la frase "Crítica independiente de cine en cartelera" ya que el nombre del web, Muchocine, no es lo suficientemente explicativo para, de un primer vistazo, ver que se trata de una web dedicada a críticas de cine.
Debajo de la caja de búsqueda también tenemos un enlace "¿Que es muchocine?" que amplía la información a usuarios noveles en la web sobre qué es muchocine, los objetivos de la página, cómo contactar y otras cuestiones para aclarar el concepto del portal. Estos cambios se introdujeron hace unos meses porque la mayoría de compañeros de trabajo les encantaba la página pero no entendían qué era aquello que tenían delante, ni siquiera se fiaban de que yo la hubiera realizado, así que maté dos pájaros de un tiro poniendo el enlace de ayuda/faq en la parte superior de la cabecera.
Tarea 1: Estudiar la viabilidad de los rastros de migas.
Mediante las encuestas de usabilidad que hemos tenido con los usuarios de muchocine no he observado la necesidad de crear este sistema que por otra parte puede ser algo redundante y ocupar demasiado espacio en una web donde la navegación ya viene dada mediante los menús horizontales superiores. Si bien es cierto que hay secciones o niveles de profundidad en los que sería muy útil una barra de navegación al estilo de los rastros de migas, las páginas vistas de estos niveles no suponen ni siquiera un 5% de las páginas vistas del website, por tanto no se le puede dar prioridad.
2. El sistema debe seguir las convenciones del mundo real, y utilizar un lenguaje adaptado al usuario, y no al contrario.
Dado que el público objetivo de muchocine en principio son críticos de cine, y también lectores "apasionados" por el séptimo arte, se han incluido en la portada y en la ficha de cada crítica algunas palabras técnicas del mundo del cine como:
"Preestrenos": Críticas de cine elaboradas antes del estreno de una película.
"Cartelera": Refiriéndose a las películas que se están proyectando en los cines actualmente.
"Estrenos": Películas de reciente aparición en la cartelera.
"Trailer": Vídeo promocional de las películas que todavía no han salido a la cartelera.
Géneros de cine: Acción, Animacíón, Documental, Ciencia Ficción, Comedia, Drama, Western. Son géneros que abarcan la mayoría de las películas y son fácilmente reconocibles por todo buen amante del cine.
3. El usuario debe tener el control y libertad. Debe existir siempre una salida abierta en cualquier punto de un proceso, y no deben iniciarse de forma automática acciones que el usuario no haya ordenado explícitamente.
En principio muchocine.net no fuerza a los lectores a hacer acciones determinadas y tampoco tiene controles que se activen sin su permiso. Por esta parte, muchocine es una página bastante limpia en la lectura. Sin embargo existen varios problemas. Uno de ellos es el sistema de envío de críticas. Una vez enviada la crítica de cine, el crítico no puede rectificar la crítica con posterioridad.
Tarea 2: Estudiar la viabilidad de editar a posteriori las críticas enviadas por los usuarios.
Es un problema de una costosa solución técnica ya que debería reprogramar todas las páginas de envío y autorizar a cada usuario con una sesión diferente. De momento este problema no genera demasiado "impacto" ni ocurre con demasiada "frecuencia", por tanto, no se tratará como prioridad de momento. De 2800 críticas de cine recibidas, menos de 30 han vuelto a ser editadas por sus respectivos autores a pesar de haberles enviado el enlace al correo de la crítica pertinente y visionar cómo quedaba online. Por tanto esta medida es algo que podemos dejar para una futura segunda fase de rediseño.
4. Debemos ser consistentes en la página con el vocabulario que utilicemos, (que la misma palabra siempre signifique lo mismo aunque sea en páginas o contextos diferentes), y seguir los estándares de las plataformas utilizadas. Por ejemplo: las mismas acciones deben llevar a los mismos sitios (enlaces, combinaciones de teclas, etc.) y el aspecto general de una aplicación o servicio (presentación, elementos de diseño) debe ser similar en sus distintas páginas/pantallas.
Encontramos problemas de distinto calado:
· Las estrellas de valoración de las películas cambian de formato según en qué pantallas, es necesario cambiarlas según la funcionalidad que represente:
· Valoración del crítico: es la valoración que el crítico le da a la película criticada.
· Valoración del lector: es la valoración que el lector da a las críticas enviadas a muchocine.
· La plataforma de foros es independiente de la plataforma de críticas. Aunque conservan mismas cabeceras y mismo aspecto, los foros tienen "vida propia" puesto que están implementados en una plataforma independiente que tiene difícil integración con las críticas. En principio esto no era así y los foros estaban integrados en las críticas pero los usuarios querían más capacidades multimedia y a cambio tuvimos que pagar el precio de la poca integración de esta plataforma de foros. Un ejemplo, antes se podía valorar en el foro desde la ficha de crítica, y ahora es imposible ya que existe una jerarquía dada por un administrador de foros y no hay posibilidad de crear un foro por cada película criticada.
Tarea 3: Unificar el formato de las estrellas de valoración.
Se ha procedido a diferenciar dos tipos de estrellas. Las rojas, que corresponden a las valoraciones que el propio crítico otorga a una película. Y las amarillas, que corresponden a la valoración que otorga el lector a cada una de las críticas de muchocine.
Tarea 4: Viabilidad de integrar plataforma de foros y críticas.
La plataforma de foros está basada en PHPBB y la plataforma de muchocine es un desarrollo propio con su propia plataforma de foros. Tras la queja de varios usuarios de muchocine sobre la precariedad de la antigua plataforma, se cambió de herramienta de foros y optamos por PHPBB por ser un estándar en muchos sitios web. El problema de PHPBB es que tiene difícil integración con el sistema de críticas de muchocine. Pongo un ejemplo. En el antiguo foro, cada vez que se publicaba una crítica, automáticamente se abría un foro para que todos hablaran sobre esa película. Con la actual plataforma PHPBB esto no es posible, al menos en una primera fase de instalación. Sin embargo con PHPBB hemos ganado en flexibilidad de moderación, antes no teníamos herramienta de moderación. También se ha ganado en capacidades multimedia: smileys, adjuntar fotos, enlaces automáticos, BBCODE. Y también hemos ganado en personalización, ya que ahora cada usuario tiene su propio perfil con las contribuciones que hace en el foro.
5. Debemos prevenir errores, con diseños cuidadosos, y presentándole al usuario opciones de confirmación antes de realizar acciones irreversibles.
Cuando tecleamos una dirección dentro del dominio muchocine.net y obtenemos un error, una pantalla en inglés y en blanco y negro nos dice que no se ha encontrado la página en el servidor de muchocine. Es necesario cambiar este tipo de presentación a una página más amable y que además de informar del error ofrezca posibilidades al usuario que se ha equivocado.
Tarea 5: Diseñar páginas de error más amigables.
Se han cambiado los diseños de las páginas de error haciendo el diseño mucho más acorde con la página e informando al usuario que caiga en una de ellas cómo puede ayudarnos a solucionar este error. También se le ofrece una serie de alternativas a la navegación como son las listas de las críticas más valoradas por los usuarios, los críticos más activos y las críticas más recientes publicadas en muchocine. Se ha insertado en el pie de la página el contador para que estas páginas también cuenten en las estadísticas.
6. Diseñar de forma que se reduzca la carga cognitiva necesaria para utilizar la página: que el usuario no tenga que memorizar nada, sino que pueda reconocer las opciones, y acceder rápidamente a un sistema de ayuda: reconocer es mejor que recordar.
Existen una sección en el menú horizontal que a los lectores novatos les puede despistar un poco. Es la sección RSS. El concepto de RSS es todavía demasiado desconocido para los lectores de cine y va dirigido más bien a los críticos que quieran poner un snippet o código en su web para que puedan tener las últimas críticas enviadas a muchocine sin necesidad de entrar en la web.
Tarea 6: Clarificar la sección RSS del menú horizontal.
Se ha procedido a aclarar el contenido de la sección RSS mediante el uso de texto alternativo "recibe las últimas críticas de muchocine mediante RSS". También se ha usado texto alternativo para aclarar todas las secciones que hay en el menú horizontal. Por ejemplo, en la sección CRITICAS se ha añadido el texto alternativo "últimas críticas publicadas".
7. Mantener la página flexible y de uso eficiente, utilizando, por ejemplo, aceleradores para los usuarios expertos, que los principiantes no percibirán. De esta forma ambos grupos tendrán acceso óptimo. Permitir a los usuarios personalizar sus acciones más frecuentes.
En la parte superior de cada página, debajo del buscador y en negrita se encuentra uno de los enlaces más importantes para seguir manteniendo la página con vida: ENVIAR CRÍTICAS. Hace un tiempo en cada reseña o crítica había un enlace directo que decía "envía tu crítica de esta película", pero no era suficiente ya que no daba oportunidad de escribir otra crítica que no fuera esa misma. Además el enlace sólo figuraba en la ficha de la crítica. Con ENVIAR CRÍTICAS en la parte del menú superior aparece en todas las páginas por lo que es mucho más fácil enviar críticas desde cualquier parte de la web.
8. Utilizar un diseño minimalista, incluyendo la mínima cantidad posible de información, para que la información menos relevante no reduzca la visibilidad de la más importante. Debemos ajustarnos a las demandas del usuario, jerarquizar la información en orden de prioridad, y no ofrecer todos los detalles a la vez.
En el diseño de la plantilla de la crítica se hace hincapié en el titular de la crítica y debajo un enlace para leer más críticas de esa misma película. La información relevante es el titular de la crítica, por eso se aumenta el tamaño del texto para darle más relevancia en la zona superior de la página. Es fundamental la línea que hay debajo del titular en la que dice "más críticas sobre esta película" ya que una vez leído el titular de la crítica al lector puede interesarle seguir leyendo otras. Este enlace es un ancla dentro de la propia página para que el efecto de click y destino sea inmediato.
La portada está demasiado sobrecargada de información. Es algo que no facilita la comprensión del sitio y que llega a "apabullar" a los usuarios nuevos que visitan el portal. Por tanto sería conveniente aligerar un poco el peso de tanta información en portada para colocarla en sus respectivas secciones.
Tarea 7: Aligerar carga de información de la portada.
Se ha reducido la carga de la portada reduciendo de 10 estrenos en cartelera a 6 para que la página no haga tanto scroll vertical.
9. Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de los errores, proporcionándoles información del error en forma de texto (no código) e indicándoles cómo solucionarlo.
Es más o menos lo indicado en el punto número cinco. Se hace necesario cambiar el error que sale en pantalla por otro de tipo más amable y que además de informar del error ofrezca posibilidades al usuario de navegar por otras zonas aunque se haya equivocado.
10. Incluir ayuda y documentación fácil de usar, concisa y directa, centrada en las tareas que el usuario quiera realizar, adaptadas al contexto en el que se encuentre, y no demasiado extensa.
La ayuda de muchocine está completamente descontextualizada por lo que conviene darle un poco de contexto y ampliarla para que resulte algo más útil en el momento en que se está consultando. De momento es sólo un texto de buenas intenciones, que dice el objetivo de la página y más o menos cómo pueden colaborar con muchocine. A partir de este momento debemos hacer una ayuda para cada tipo de usuario; el usuario lector y el usuario que envía críticas y es activo con la web de muchocine.
Tarea 8: Remodelar la página de ayuda y situarla en contexto.
La página de ayuda ha sido rediseñada de forma que responda a las preguntas más frecuentes de los dos tipos de usuarios que tenemos en el portal, los lectores y los críticos. Por un lado se informa al lector de todas las posibilidades de la página y por otro lado se informa al crítico de algunas normas o situaciones que suelen ser problemáticas y suelen preguntar bastante a través de correo o de los foros.
Se han incluido en las secciones de CRITICOS y en la FICHA de cada crítica, enlaces contextuales a la ayuda de forma contextual.
Pruebas de usuario
Las pruebas de usuario consistirán en:
· Encuesta a los usuarios. La encuesta consta de 4 bloques dedicados a los aspectos de usabilidad más importantes del portal: las búsquedas en Google, la portada, las búsquedas internas y la ficha de crítica. No debe llevar más de 10 minutos rellenarlo y ha sido elaborado para que pueda ser enviado por correo electrónico a nuestros críticos de cine, con instrucciones claras y sencillas para que pueda ser completado sin dificultades adicionales.
· Card sorting. La prueba de card sorting consta de 12 cartas, cada una de ellas relacionada con una sección o zona de muchocine. La prueba se realizará a los lectores de muchocine y con esta prueba ellos serán los que decidirán la relevancia del contenido en portada. Las cartas de la prueba son las siguientes:
· Estrenos
· Peliculas Recomendadas
· Preestrenos
· Críticas más valoradas
· Críticas menos valoradas
· Últimas críticas
· Especiales de cine
· Noticias de cine
· Opiniones de cine
· Críticos más activos
· Últimos foros
· Pases de prensa
· Críticas de Preestrenos
· Críticas de Estrenos
La prueba consiste en
1. Dividir estas 12 cartas en dos grupos de 6 cartas cada uno: aspectos del cine que te interesan y aspectos del cine que no te interesan.
2. Una vez el encuestado haya separado las cartas en estos dos grandes grupos se le pedirá que ordene de mayor a menor importancia las cartas de los aspectos que más le interesan del cine y después ordenará los que menos le interesan. Es necesario informar sobre el contenido de cada carta para que no haya equívocos a la hora de ordenar sus preferencias. Se tomará nota de los resultados de la ordenación y seguiremos con el siguiente paso:
3. Ordenación por parejas de las cartas. Deben hacer 6 parejas con las 12 cartas que ellos crean que son similares o guarden alguna relación.
ENCUESTA A USUARIOS
Ante todo me gustaría resaltar la dificultad de hacer encuestas a usuarios que no tienes delante de la pantalla del ordenador ya que las conclusiones del estudio son mucho menos relevantes, y no se puede saber de primera mano las impresiones o el impulsos del usuario al navegar por el website. La mayoría de ellos (a pesar de haberlo avisado previamente) suponen que el test es una prueba personal que tienen que pasar con buena nota y por eso se esmeran más y por este motivo los resultados del test no son todo lo reveladores que cabría.
El test se ha realizado a 7 personas por email que han colaborado con la web y se ha publicitado en la portada de la misma página de Muchocine. El éxito de participación ha sido bastante grande teniendo en cuenta que en este tipo de convocatorias los lectores de muchocine no suelen ser demasiado participativos.
Resultados de la encuesta de usuarios
Google |
Criticas cine | A (5) | D (2) | | | |
Shrek 3 | D (4) | B (1) | A (1) | C (1) | |
Portada |
Interesante | A (6) | C (1) | | | |
Estrenos | A (6) | B (1) | | | |
Foros | A (4) | B (2) | | | |
Ultimas criticas | A (6) | B (0) | | | |
Buscar |
David Lynch | D (4) | C (2) | B(1) | | |
Psicosis | A (5) | B (2) | | | |
Letra B | A (6) | B (1) | | | |
Shrek 3 | B (5) | A (2) | | | |
Ficha de las críticas |
Director Potter | B (5) | D (1) | A (1) | | |
Valoración Potter | A (6) | B (1) | | | |
Valoración Lectores | A (4) | B (2) | C (1) | | |
Ficha personal | A (5) | B (2) | | | |
Genero Acción | A (3) | B (3) | | | |
Todas criticas | A (5) | B (2) | | | |
· Google: Por lo general los resultados son bastante dispersos. Aunque la mayoría de los encuestados coincide en que "criticas de cine" son los términos por los que buscarían un portal de críticas en Google de criticas de cine, hay bastante diversidad de opiniones sobre todo en los comentarios. En general, aunque buscarían por esos términos, no hacen esa búsqueda en Google ya que suelen ir directamente a portales "de confianza" para leer críticas de cine.
· Portada: En términos generales los contenidos que hay en portada son "interesantes" para la mayoría de los encuestados. Sin embargo se deben considerar las siguientes observaciones:
· El uso del menú superior horizontal es mayoritario por parte de todos los encuestados. Una minoría accede a los foros mediante la columna de la derecha, al igual que una minoría accede a los especiales mediante el contenido que hay en la portada. De los datos se extrae que la navegación por pestañas de muchocine es cómoda y funciona eficazmente para los encuestados.
· Hay usuarios que no pinchan en el nombre de la película de la sección "en portada" por no llevar enlace y sin embargo si lo hacen en el nombre de la persona que critica la película porque va con enlace subrayado. Solución: subrayar el nombre de la película que aparece en "en portada" o en su defecto darle un efecto de iluminación cada vez que se pase el ratón por encima. Con ello quedará patente que es un enlace y es clicable. He quitado el enlace subrayado de la persona que envía la crítica para no incentivar el click en esa zona.
· La mayoría de usuarios piensan que la portada está demasiado sobrecargada de información. Algunos apuntan que secciones como Especiales, o los ultimos mensajes de los foros sobrecargan la portada y deberían estar reflejados dentro de sus correspondientes secciones. Solución: Rediseñar la portada aportando menos contenido pero más relevante. Se ha acortado la portada en 1/3 del espacio, quitando 4 críticas de estreno y dejándolas en 6 en vez de 10. Lo mismo se ha hecho con los últimos foros de portada y los especiales.
· Buscar en la página: La mayoría de los encuestados ha considerado satisfactoria la búsqueda de contenidos en muchocine. Estas son algunas de las observaciones:
· Sólo uno de los siete encuestados ha logrado encontrar la forma de buscar las críticas de un determinado director de cine. Todos los demás encuestados consideraban "imposible" encontrar las críticas de cine de las películas de David Lynch. Solución: En cada ficha de crítica el director sale enlazado para ver todas las películas criticadas existentes.
· Una de las principales dificultades a la hora de utilizar el buscador han sido los números de las versiones de película. Por ejemplo la búsqueda de Shrek Tercero, es correcta si la escribimos literalmente pero no ofrece resultados si lo buscamos por Shrek 3. Solución: Una posible solución para paliar este defecto sería buscar sólamente por la primera palabra insertada en la búsqueda, eliminando artículos y preposiciones. Sin embargo esto podría tener alguna consecuencia negativa a la hora de buscar grandes sagas como Harry Potter pues los resultados no serían exactos.
· Uno de los problemas que comentaban varios encuestados en la página de resultados y en la de búsqueda alfabética es que no entendían el porqué aparecen ciertas personas con sus críticas antes que otras. En realidad es un problema técnico ya que la película no tiene entidad propia en la BD y la query refleja un group by por película. Por tanto la primera que sale pertenece a un autor en concreto, el primero que la publicó. Solución: Explicar este hecho en pantalla o directamente no mostrar el autor de la película en los resultados y hacer que el enlace vaya a una lista con todas las críticas.
· La búsqueda debe ser de todas las críticas y debe ir de lo general a lo específico, según uno de los encuestados. Razón no le falta, ya que la anterior ordenación no es del todo "lógica" y es necesario explicarlo en pantalla, circunstancia que resta bastantes puntos en términos de usabilidad.
· Ficha de la crítica: En la ficha de la crítica no he encontrado demasiados problemas. Sin embargo también encontramos alguna que otra sugerencia:
· Las estrellas de valoración están lejos de la crítica y es necesario girar la cabeza a la derecha para ver la valoración que el crítico le otorga. Solución: integrar las estrellas de valoración junto con el nombre de la película.
· La valoración del crítico y la valoración de los lectores a la crítica son conceptos muy diferentes y no se distinguen del todo bien. Solución: Distinguir mediante el uso de iconos diferentes la idea de crítica de cine y valoración de una crítica de cine.
· Los encuestados han tenido alguna dificultad al buscar el enlace al perfil del crítico así como el enlace a las películas del mismo género. Solución: Hacer un pequeño apartado llamado “búsquedas relacionadas” donde se agrupen las búsquedas que tienen relación con la crítica que se está leyendo en ese momento.
CARD SORTING
Se ha relizado la encuesta a 3 lectores habituales de revistas y contenido de cine que no conocían previamente muchocine. Los resultados del card sorting han sido sorprendentes.
Resultados del card sorting.
Pos. | Aspectos que interesan a los lectores |
#1 | Estrenos (3) | | | |
#2 | Preestrenos (2) | Películas recomendadas | | |
#3 | Películas recomendadas | Preestrenos | Noticias de cine | |
#4 | Críticas + val. (2) | Ultimas criticas | | |
#5 | Críticas + val. | Opiniones de cine | Criticas – val. | |
#6 | Opinones de cine | Ultimos foros | Ultimas criticas | |
Pos. | Aspectos que no interesan a los lectores |
#7 | Especiales de cine | Noticias de cine | Película recomendada | |
#8 | Noticias de cine | Críticas + val. | Especiales de cine | |
#9 | Opiniones de cine | Especiales de cine | Ultimas criticas | |
#10 | Criticos + activos (3) | | | |
#11 | Ultimos foros (2) | Criticas – valoradas | | |
#12 | Pases de prensa (3) | | | |
· Los estrenos de cine es el contenido que más interesa a los lectores encuestados. Por ello hemos situado dicho contenido en la zona alta de la portada de muchocine.
· Los pases de prensa no interesan en absoluto a ninguno de los 3 lectores encuestados. Por tanto, los pases de prensa es un contenido que queda excluído de la portada.
· Los preestrenos interesan como contenido de portada, pero su significado no está siendo bien entenido por 2 de los 3 lectores encuestados, que no son capaces de describir el significado de la palabra correctamente. Por tanto, hemos evitado en la página de portada hablar de “preestrenos” por ser un concepto difícil de entender.
· Las críticas más valoradas son uno de los contenidos que más valoran los lectores. Sin embargo cabe destacar que en la prueba de encontrar las parejas, en ninguna ocasión han relacionado la carta “críticas + valoradas” con “película/s recomendadas”, siendo este contenido incluso mejor valorado que el primero. Por tanto “críticas + valoradas” pasa a denominarse RECOMENDAMOS, por ser muchocine una comunidad de críticos que pretende ser una guía de las buenas películas que hay en cartelera, y dejamos atrás el término “criticas + valoradas” por considerarlo demasiado “técnico” y poco reconocible para el público general.
· Curiosamente el contenido de “últimos foros” está peor valorado que “opiniones de cine”, cuando en principio no tendrían porqué ser contenidos tan dispares. Teniendo en cuenta este resultado se ha reducido el número de últimos nuevos foros desplegados en pantalla y se ha situado en la zona de la portada menos relevante, la tercera columna de la parte inferior derecha.
Evaluación de la Accesibilidad
He logrado una accesibilidad de nivel 1 tanto en la portada como en la ficha de cada crítica. A continuación se describen los principales problemas que he encontrado y la solución que se ha tomado.
Evaluación de la portada de muchocine
Evaluación automática con TAW.
Principales problemas encontrados:
· Faltan los atributos ALT de algunas imágenes. Solucionado: He aplicado el atributo ALT a todas las imágenes de la portada.
· El documento debe ser leído con o sin hoja de estilos sin necesidad de que se modifique la presentación. Solucionado: He guardado todos los atributos de los DIV dentro de la hoja de estilos y los he llamado mediante el identificador "class".
· El javascript que hay de Google Analytics a pie de página debe ser leído por navegadores que no tengan activado javascript. Solucionado: He aplicado la etiqueta NOSCRIPT para navegadores que no dispongan de javascript.
Evaluación manual con el navegador OPERA MODO USUARIO.
El navegador Opera ofrece una opción llamada modo usuario en la cual desactiva las hojas de estilo y nos permite navegar sin ellas para apreciar cómo lo vería un navegador de texto de tipo Lynx. Con el modo usuario en on y con las imágenes desactivadas, el documento ha conseguido mantener la estructura de navegación sin problemas.
Evaluación manual con el navegador LYNX.
Es necesario hacer un pequeño cambio en la portada ya que aparece por duplicado en la sección de preestrenos "crítica de película" y "crítica de película", cuando en realidad uno de ellos es la imágen de la carátula de esa película y el otro es el enlace a dicha película. Esto también ocurre en la sección de estrenos y en la sección de especiales. Solucionado: he cambiado "critica de película XXX " por "cartel de la película XXX", para que la navegación sin imágenes tenga más sentido.
Evaluación manual con navegadores EXPLORER.
En Explorer no hemos encontrado ninguna dificultad incluso omitiendo tamaños y estilos de fuentes y colores. El diseño no es perfecto pero el documento sigue estando correctamente estructurado y se lee sin problemas.
Evaluación manual con navegador FIREFOX.
En Firefox la portada no presenta la imágen de 100x600 pixels que mostramos en el lateral izquierdo de la pantalla. Solucionado: El código en la plantilla de CSS estaba mal formado, he optado por la formula background-repeat: repeat-y; que es la que se adapta a los tres navegadores estándar: Opera, Explorer y Firefox. Para que encaje con Opera, hemos tenido que añadir a la etiqueta body la etiqueta html delante para que Opera entienda que body forma parte de la jerarquía de etiquetas del documento.
Evaluación de la ficha de crítica de muchocine
Evaluación automática con TAW.
Principales problemas encontrados:
· Faltan los atributos ALT de algunas imágenes. Solucionado: He aplicado el atributo ALT a todas las imágenes de la portada.
· El documento debe ser leído con o sin hoja de estilos sin necesidad de que se modifique la presentación. Solucionado: He guardado todos los atributos de los DIV dentro de la hoja de estilos y los he llamado mediante el identificador "class".
· El javascript que hay de Google Analytics a pie de página debe ser leído por navegadores que no tengan activado javascript. Solucionado: He aplicado la etiqueta NOSCRIPT para navegadores que no dispongan de javascript.
· Me he asegurado de que los enlaces a archivos javascript en la Línea 16: <script type="text/javascript" language="javascript" src="http://www.muchocine.net/ajaxstarrater/js/behavior.js"> y en la línea 17: <script type="text/javascript" language="javascript" src="http://www.muchocine.net/ajaxstarrater/js/rating.js"> no entorpezcan la navegación de la página en navegadores de texto o sin hoja de estilos. Solucionado: estos javascript son sólo de presentación y no entorpecen la lectura en navegadores de sólo texto o en navegadores sin hojas de estilo.
Evaluación manual con el navegador OPERA MODO USUARIO.
Encontramos varios problemas:
El titular de la crítica está situado por debajo de los detalles de la ficha del crítico. En un navegador moderno todo encaja y cobra sentido pero en navegadores con las hojas de estilo desactivadas la estructura no es lógica. Solucionado: he colocado por encima del texto de la crítica la caja de la ficha de perfil del usuario, aplicándole un margin-top de 20px. De este modo en navegadores de texto o con las hojas de estilo desactivadas se distingue una estructura más coherente.
El valor del alt de la crítica tiene el mismo valor que la valoración de la misma, por ejemplo, el icono de la estrella tiene un alt "muy buena" y la valoración también es "muy buena". Solucionado: El alt de las estrellas tomará los siguientes valores: "1 estrella", "2 estrellas", etc para que al navegar el texto cobre sentido y se pueda leer "Valoración Muy Buena 4 estrellas", en vez de "Valoración Muy Buena Muy Buena".
El icono de las comillas en el titular, cuando no puedes ver imágenes, no se puede ver. Solucionado: He escondido el texto de la comilla con display:hidden y por encima le he puesto un span cuyo background es el icono gráfico de las comillas. De esta forma en navegadores textuales sale la comilla de texto y en navegadores modernos sale la comilla gráfica.
El titular de la crítica no tiene la suficiente entidad. Solucionado: He aplicado al titular un h2 que se sitúa en importancia justo por debajo del nombre de la película que está marcado como h1. En navegadores de texto el titular ahora se ve más grande y cobra importancia y en navegadores modernos al aplicar un estilo, se ve exactamente igual que el que tenía antes.
He simplificado el método de previsualización del cartel de la película. Anteriormente cuando pasabas el ratón sobre el cartel se abría una ventanita con el cartel más grande pero con este método surgía un problema de visualización en Firefox y además duplicaba los textos alternativos. Solucionado: he simplificado la visualización del cartel de la película y ahora se llama "cartel de xxx", en vez de "critica de xxx".
Evaluación manual con el navegador LYNX.
En el navegador Lynx sólo he podido encontrar un problema en la navegación, en el LINK HREF de la sección HEADER el enlace estaba mal referenciado y el título no era el correcto. Solucionado: cambiando el enlace y el título.
Evaluación manual con navegadores EXPLORER.
En Explorer no hemos encontrado ninguna dificultad incluso omitiendo tamaños y estilos de fuentes y colores. El diseño no es perfecto pero el documento sigue estando correctamente estructurado y se lee sin problemas.
Evaluación manual con navegador FIREFOX.
En Firefox como dije anteriormente he tenido problemas con el sistema de ampliación de la carátula y finalmente he tenido que simplificar el sistema y dejar un enlace de "ver cartel" que enlaza directamente con el cartel en tamaño completo de la película. Solucionado: He simplificado el sistema de ampliación de cartel que se basaba en css y lo he dejado en una imagen con un enlace a la imagen grande.
Ajustes finales
A continuación se recoge en una tabla todas las modificaciones y cambios realizados en muchocine a raíz del estudio pruebas de usuario, de usabilidad y de accesibilidad.
