análisis de acceso al área privada o de usuario de 23 webs

Ausiàs Marc, 26, 5è-5708010 BarcelonaTel. 93 342 89 48www.arquinauta.es

Barcelona, Noviembre de 2009 Accesibilidad

Arquitectura de la información

Análisis de Usabilidad

Consultoría

Concepto estratégico

Extranet

Internet

Intranet

PDA

Prototipos

U-Test

WAP

Análisis de entrada a 23 websAcceso al área privada o de usuario

http://www.arquinauta.es/

Análisis de entrada a 23 webs

© Copyright Arquinauta Consulting 2009

Hemos tenido en cuenta la usabilidad, accesibilidad y tecnologías usadas, sin olvidar al usuario, verdadero protagonista de la web.

Este análisis ha sido concebido con el fin de evaluar el acceso al área privada o de usuario de distintas webs, y obtener unas conclusiones sólidas de la situación actual de la red, para así optimizar y mejorar la situación de los usuarios en internet.

Para ello, hemos analizado los aspectos prácticos y funcionales de 23 webs de carácter internacional seleccionadas al azar y según relevancia.

Además de este documento, existen una serie de monográficos donde se evalúan distintas webs y los factores y elementos que las conforman para su correcto uso.

Puedes consultar más documentos de análisis web en Slideshare:http://www.slideshare.net/arquinauta/

Para más información puedes dirigirte a [email protected]

Introducción Contenidos

Introducción

Criterios del análisis

Las webs analizadas

Análisis

Mejores prácticas

Conclusiones

Sobre Arquinauta

2

3

4

5 - 27

28

29

31

Este es un análisis de usabilidad realizado por Arquinauta, donde evaluamos los mejores accesos al área privada de 23 webs de carácter internacional y distinta índole.

Página 2

Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

http://www.slideshare.net/arquinauta/

http://www.slideshare.net/arquinauta/

mailto:[email protected]




Criterios del análisis

Hemos tenido en cuenta distintos factores como la situacióny forma de los elementos de acceso, la navegabilidad, accesibilidad y ayudas que se muestran en las distintas páginas de acceso, así como la relevancia de los mismos.

Creemos que es importante unificar los criterios de acceso y estandarizarlos para facilitar la entrada de los usuarios al área personal o privada de cada web, así como mantener la cantidad de métodos de acceso como username, mails, etc. estandarizados mediante unas normas generales, para no generar confusión al acceder a la web. Un medio para conseguirlo es pedir un email y no un nombre de usuario, o bien usar OpenID o servicios similares.

Por otro lado, la seguridad es un factor fundamental. Todos los sites analizados son seguros y mantienen unas normas básicas de seguridad. Ninguno muestra la contraseña en ningún momento, por lo que esta posibilidad o factor no se contempla dentro del análisis.

En ningún caso se han analizado otras páginas que no sean las relativas al área de acceso de las webs seleccionadas. La selección de web se ha realizado por relevancia y de forma objetiva.

Preguntas que nos hemos realizado

Situación y forma- ¿Dónde se encuentra el acceso al área privada? - ¿Cómo se accede?, ¿Mediante un botón, enlace o

formulario con campos?

Claridad y accesibilidad- ¿Es visible el acceso o se ha de buscar? - ¿Se percibe fácilmente?- ¿Es fácil de navegar?- ¿Es accesible para dispositivos que navegan con teclado? - En este caso, ¿es correcta la jerarquía y orden de los

elementos? - ¿Qué campos se piden, email o nombre de usuario?

Ayudas y utilidades- ¿Qué opciones de ayuda se muestran para el acceso?- ¿Y en caso de olvidar contraseña o nombre de usuario?- ¿Se muestra alguna utilidad que aporte valor?

Acerca del Rating: Los rating o puntuaciones otorgados, son una media de la suma de todos los valores analizados.

Análisis de acceso al área privada de 23 webs

Página 3




Webs analizadas

Slideshare - http://www.slideshare.com

Last.fm - http://www.last.fm

Flickr - http:// www.flickr.com

Bubok - http:// www.bubok.com

iStockPhoto - http:// www.istockphoto.com

Delicious - http://del.icio.us

Youtube - http://www.youtube.com

Google - http://www.google.com

Twitter - http://www.twitter.com

Blogger - http://www.blogger.com

Allmusic - http://www.allmusic.com

me.com - http://www.me.com

Wolpy - http://www.wolpy.com

Wordpress - http://www.wordpress.com

Virb - http://www.virb.com

Hotmail - http://www.hotmail.com

Veer - http://www.veer.com

Myspace - http://www.myspace.com

Linkedin - http://www.linkedin.com

Facebook - http://www.facebook.com

ODEO - http://www.odeo.com

Digg - http://www.digg.com

Technorati - http://www.technorati.com

Análisis de acceso al área privada de 23 webs

Página 4


http://www.slideshare.com/

http://www.last.fm/

http://www.last.fm/

http://www.flickr.com/

http://www.last.fm/

http://www.bubok.com/

http://www.last.fm/

http://www.istockphoto.com/

http://del.icio.us/

http://www.youtube.com/

http://www.google.com/

http://www.twitter.com/

http://www.blogger.com/

http://www.allmusic.com/

http://www.me.com/

http://www.wolpy.com/

http://www.wordpress.com/

http://www.virb.com/

http://www.hotmail.com/

http://www.veer.com/

http://www.myspace.com/

http://www.linkedin.com/

http://www.facebook.com/

http://www.odeo.com/

http://www.digg.com/

http://www.technorati.com/



Slideshare

Situación y formaEl acceso se encuentra en la parte superior derecha, disponible mediante formulario con usuario y contraseña.Se requiere “nombre de usuario y password” para entrar.

Claridad y accesibilidadSe visualiza de forma rápida y sencilla, destacado gráficamente.Es accesible mediante teclado, aunque carece de “focus” y resulta difícil de entender la situación del cursor.

Ayudas y utilidadesEn la misma caja se muestran opciones para recuperar la contraseña, y el registro en la web. Ofrece la opción de recordar al usuario.

www.slideshare.com

Página 5

Rating:






Last.fmwww.last.fm

Página 6

Situación y formaAcceso al área privada mediante un enlace en la parte superior derecha. Con el accedemos a una página donde se muestran los campos de acceso, “nombre de usuario y contraseña” para acceder.

Claridad y accesibilidadSu situación es visible, aunque cuesta localizarlo las primeras veces que se accede a la web. Carece de “focus”. Una vez en la página de Log In, el cursor se sitúa en el campo de usuario, siendo más sencilla la navegación mediante teclado.

Ayudas y utilidadesSe muestran ayudas para recuperar la contraseña y registrarse en el site.

Rating:


http://www.last.fm/



Flickrwww.flickr.com

Página 7

Situación y formaLa forma de acceso al área personal o privada es mediante un enlace en la parte superior derecha de la web, para dar paso a una página de acceso o Log In. Una vez en la pantalla de Sign In, requiere ID de Yahoo y password para acceder.

Claridad y accesibilidadSe visualiza de forma rápida y fácil. Es sencillo navegar con el teclado y accedera la pantalla de Sign In.

Ayudas y utilidadesSe muestra información contextual acerca de Yahoo y Flickr.Opciones de Ayuda (Help) y recuperación de contraseña.Se muestra la opción de permanecer registrado durante 2 semanas para no tener que volver a pasar por el acceso al área privada.

Rating:






Bubokwww.bubok.com

Página 8

Situación y formaEnlace de acceso al área privada mediante “lightbox”. El enlace se sitúa a la derecha del logo. Una vez en el “lightbox”, requiere de email y contraseña para acceder al área privada.

Claridad y accesibilidadNo es muy accesible, ya que no es posible registrarse con JavaScript desactivado. En contraposición, es muy fácil de navegar con el teclado.

Ayudas y utilidadesRecordatorio de contraseña y registro rápido disponibles junto al acceso o Log In. Opción de “recordarme” disponible.

Rating:






iStockphotowww.istockphoto.com

Página 9

Situación y formaBotón de acceso al área privada en la parte superior derecha de la página de inicio. Se localiza de forma sencilla y rápida. Una vez en la página de acceso, requiere “Nombre de usuario y password” para acceder.

Claridad y accesibilidadEl Log In es accesible mediante teclado,aunque resulta muy difícil, ya que no tiene focus.

Ayudas y utilidadesSe muestran enlaces de ayuda para recuperar nombre de usuario y password, así como opciones de registro y recomendaciones o tips para acceder correctamente.

Rating:






del.icio.ushttp://del.icio.us

Página 10

Situación y formaDispone de un botón destacado para lapágina de entrada en la parte superior derecha. Al pasar a la página de acceso, requiere nombre de usuario y password.

Claridad y accesibilidadAunque es fácil acceder mediante el teclado, no se visualiza el focus para tener constancia de la situación del cursor en la web. Una vez en la página de acceso, el cursor se sitúa en el campo de acceso“Username”

Ayudas y utilidadesSe muestran ayudas para recuperar el password, aunque al enviarlo también se ofrece el nombre de usuario.Se ofrecen enlaces de “Ayuda”(Help) y registro, así como enlaces de información sobre el servicio.Permite “mantenerte registrado durante 2 semanas en este ordenador”.

Rating:


http://del.icio.us/



Youtubehttp://www.youtube.com

Página 11

Situación y formaSe muestra un enlace de acceso al áreaprivada del usuario en la parte superior derecha de la web, fácilmente localizable. Una vez en la página de acceso, se piden nombre de usuario y password para poder entrar al área privada.

Claridad y accesibilidadAunque no se muestra el focus del cursor, se puede navegar mediante el teclado y acceder a la página de entrada. Una vez aquí, el cursor se sitúa en el nombre de usuario.

Ayudas y utilidadesSe ofrecen enlaces para recuperar nombre de usuario y contraseña, así como registro en el site o registro mediante la cuenta de Google.

Rating:





Googlehttp://www.google.com

Página 12

Situación y formaEl acceso al área privada se muestra en la parte superior derecha, mediante un enlace. Una vez en la página de acceso, se han de proporcionar el correo electrónico y password.

Claridad y accesibilidadSe muestra el focus, aunque la jerarquía de navegación prioriza al buscador. Una vez en la página de acceso, el cursor se sitúa en el campo del email.

Ayudas y utilidadesSe muestra un enlace con la leyenda “No puedo acceder a mi cuenta”. Bajo el mismo se ofrece la posibilidad de crear una nueva cuenta en Google.Permite recordar usuario y password en el ordenador desde el que se accede.

Rating:





Twitterhttp://www.twitter.com

Página 13

Situación y formaSe muestra un botón de acceso al área privada. Cuando hacemos seleccionamos el botón, se abre una caja con opciones para introducir el nombre de usuario o email y el password.

Claridad y accesibilidadSe puede navegar mediante el teclado, y se muestra el focus, aunque no permite pasar a la caja de acceso al área privada. A los usuarios con JavaScript desactivado se les redirige a la antigua pantalla de acceso al servicio.

Ayudas y utilidadesSe muestran ayudas para recuperar el password o usar Twitter desde le teléfono. Ofrece la opción de recordar al usuario.

Rating:





Bloggerhttp://www.blogger.com

Página 14

Situación y formaEl acceso se encuentra en la parte superior derecha, disponible mediante formulariocon nombre de usuario (email) y contraseña.

Claridad y accesibilidadSe puede navegar y acceder fácilmente mediante teclado, ya que muestra el “focus” y el orden de los elementos es correcto.

Ayudas y utilidadesSe muestra posibilidad de recuperar la contraseña, aunque queda muy oculto y nada claro. Permite recordar al usuario una vez ha accedido al sistema.Se muestran diversas opciones de registro y creación de blogs, así como la explicación de que es un blog y sus funciones.

Rating:





Allmusichttp://www.allmusic.com

Página 15

Situación y formaSe ofrece un botón de acceso y registro a la web en la parte superior derecha, junto al menú. Los campos de acceso demandados son email y password.

Claridad y accesibilidadSe puede navegar perfectamente con el teclado, ya que el focus es visible y el orden de los elementos correcto.

Ayudas y utilidadesSe ofrecen diversas ayudas como recuperación de contraseña, FAQ, Contacto o registro en el sistema.

* Nota: Actualmente el Login al área privada ha desaparecido y se puede visualizar todo el contenido de forma pública hasta nuevo aviso.Mantenemos este Slide como caso de estudio.

Rating:





Mobile mehttp://www.me.com

Página 16

Situación y formaSe muestra, de forma destacada, un acceso al área privada en la parte central derecha de la home. Los campos requeridos son nombre de usuario y password. Es importante destacar que esta home está orientada a facilitar el acceso de los usuarios al área privada.

Claridad y accesibilidadEl objeto de la home es facilitar la entrada a los usuarios. Se puede navegar de forma sencilla y fácil. Se muestra el focus en todo momento.

Ayudas y utilidadesSe muestran ayudas para recuperar la contraseña, registrarse en el servicio para probarlo e información de ayuda.

Rating:


http://www.me.com/



WOLPYhttp://www.wolpy.com

Página 17

Situación y formaEl acceso al área privada se muestra en la parte superior derecha, mediante un formulario con nombre de usuario y contraseña.

Claridad y accesibilidadSe puede navegar y visualizar el focusclaramente para acceder al área privada. No así la navegación a través de sus elementos, pues el focus desaparece al dejar de lado los formularios.

Ayudas y utilidadesNo se muestran ayudas o utilidades junto a los campos de acceso al área privada.

Rating:





WordPresshttp://www.wordpress.com

Página 18

Situación y formaEl acceso al área privada se aprecia claramente. Se encuentra en la parte superior izquierda, justo encima del logo o imagen corporativa. Se piden nombre de usuario y password para acceder.

Claridad y accesibilidadTras la carga inicial, el focus está en el nombre de usuario. Es fácil y sencillo navegar mediante el teclado, ya que se muestra el focus en todo momento.

Ayudas y utilidadesJunto a los campos de acceso se muestran ayudas y utilidades como recordar al usuario o recordar password.

Rating:





VIRBhttp://www.virb.com

Página 19

Situación y formaSe muestra un botón de acceso al área privada en la parte superior central de la web, para dar paso a una pantalla de acceso. Los campos requeridos son email y password.

Claridad y accesibilidadSe puede navegar mediante el teclado, aunque no se visualiza el focus. En la pantalla de acceso la situación es similar, aunque los campos de acceso si muestran el focus.

Ayudas y utilidadesSe muestran opciones para recordarcontraseña y recuperar password, así como acceder mediante Open ID.

Rating:





Hotmailhttp://www.hotmail.com

Página 20

Situación y formaSe muestran los campos de acceso en la parte central derecha de la página. Cabe destacar que es una pantalla de acceso propiamente dicha. Los campos requeridos son Windows Live ID o email y contraseña.

Claridad y accesibilidadLa navegación con el teclado se realiza de forma cómoda y sencilla, mostrándose el focus en todo momento.

Ayudas y utilidadesSe muestran distintas utilidades para recuperar contraseña, recordar datos y contraseña en el equipo en el que se encuentra el usuario, incluso para “utilizar seguridad mejorada”, así como la posibilidad de registrarse en el servicio y características del mismo.

Rating:





Veerhttp://www.veer.com

Página 21

Situación y formaEl acceso al área privada se muestra en la parte superior derecha de la web, mediante un enlace. Una vez en la página de acceso, se requiere email y contraseña.

Claridad y accesibilidadSe navega de forma sencilla y cómoda con el teclado, tanto en la página principal como en la de acceso. El focus se muestra en todo momento, y el orden de los elementos es correcto.

Ayudas y utilidadesSe muestran diversas ayudas como recuperación de contraseña, registro y los beneficios del mismo.

Rating:





Myspacehttp://www.myspace.com

Página 22

Situación y formaEl acceso al área privada se encuentra en la página inicial, destacado en el columnaderecha. Se requieren correo y contraseña para acceder.

Claridad y accesibilidadSe puede navegar y acceder fácilmente con el teclado al área privada, ya que se muestra el focus en el campo “correo”.

Ayudas y utilidadesAdemás de la posibilidad de recuperar contraseña y recordar los datos del usuario, se permite registrarse al usuario en la pestaña de la misma caja.

Rating:





LinkedInhttp://www.linkedin.com

Página 23

Situación y formaEl acceso al área privada se encuentra en la parte superior derecha de la página, mediante un enlace a la página de acceso. Una vez en la pantalla de acceso se piden email y contraseña para acceder.

Claridad y accesibilidadSe puede navegar mediante el teclado y acceder a la página de ingreso, aunque no se muestra el focus y resulta un tanto incómodo. Una vez en la página de ingreso, el cursor se sitúa en el campo de correo electrónico.

Ayudas y utilidadesSe muestran ayudas para recuperar contraseña y un enlace para unirse a Linkedin, así como novedades del sistema a la izquierda de la caja de acceso.

Rating:





Facebookhttp://www.facebook.com

Página 24

Situación y formaEl acceso al área privada se encuentra en la parte superior derecha de la web. Se piden correo electrónico y password para acceder.

Claridad y accesibilidadEl cursor se sitúa en el correo electrónico de acceso para poder entrar en el sistema. Se puede navegar con facilidad con el teclado.

Ayudas y utilidadesSe muestran opciones de “recordarme” yrecuperación de contraseña en caso de olvido. A su vez se facilita el registro en la web para usuarios no pertenecientes a la comunidad.

Rating:





ODEOhttp://www.odeo.com

Página 25

Situación y formaEl acceso se encuentra en la parte superior derecha de la web representado mediante un enlace. Una vez en la página de acceso se piden nombre de usuario y contraseña.

Claridad y accesibilidadSe puede navegar y acceder mediante el teclado, aunque no se muestra el focus. Una vez en la página de acceso, no se muestra el focus menos en los elementos de formulario, incluyendo los elementos de acceso al área privada, nombre de usuario y password.

Ayudas y utilidadesEn la página de acceso se muestran diversasayudas como recordar al usuario, resetearcontraseña o crear una nueva cuenta.

Rating:





Digghttp://www.digg.com

Página 26

Situación y formaSe muestra un enlace de acceso al área privada en la parte superior central de la web, junto al logo. Una vez seleccionado, se muestra una ventana estilo “lightbox” con los campos de acceso “nombre de usuario de Digg” y password.

Claridad y accesibilidadSe puede navegar fácilmente con el teclado. El focus se muestra de forma muy visual y accesible. Al seleccionar el enlace de acceso, se abre la ventana emergente con los campos y el cursor en el nombre de usuario.El sistema responde a la perfección incluso con JavaScript desactivado.

Ayudas y utilidadesSe muestran las ayudas habituales; recordar usuario, recuperar username o password o crear nueva cuenta. Además, permite usar la cuenta de Facebook para entrar en Digg.

Rating:





Technoratihttp://www.technorati.com

Página 27

Situación y formaEl acceso se encuentra en la parte superior derecha de la web, representada mediante un enlace. Una vez accedemos, nos dirige a una página con el acceso y registro. Resulta un tanto confuso, ya que en una primera instancia destaca más el registro que el acceso. Los campos que se piden son Nombre de usuario y password.

Claridad y accesibilidadSe puede navegar mediante el teclado, los elementos están en un orden correcto, aunque al no mostrarse el focus resulta muy complicado.

Ayudas y utilidadesSe muestra la opción para recuperar el password. Junto a la caja de acceso, se muestra el formulario completo de registro.

Rating:





Mejores prácticas

Mejor solución accesible

WordPress.comUna de las webs con acceso más sencillo y fácil que hemos encontrado en el análisis. El cursor se sitúa desde un primer momento en el log-in, facilitando el acceso al site.

Lo más destacado

Página 28

Mejor solución tecnológica

Digg.comUsando tecnología JavaScript, permite al usuario acceder al sistema sin necesidad de saltar o cambiar de página. En caso de tener JavaScrpt desactivado, da acceso a una segunda página de registro.

Solución más usada

Yahoo.comUna de las soluciones más usadas es la página de log-in con distintos tips o puntos de interés sobre el servicio. Útil y efectivo a su vez, ya que ayuda tanto al usuario como a la compañía que lo utiliza.




Conclusiones

Existen diversidad de métodos de entrada a las distintas webs. La mayor parte de ellas responde a las necesidades de cada empresay sus usuarios, así como a las limitaciones que cada sistema pueda tener.

Nos hemos fijado especialmente en la accesibilidad y la usabilidadpara obtener las mejores practicas así como las más comunes.

El estado general de la web en cuanto a métodos de acceso al área privada es bastante bueno, ofreciendo todas ellas entradas claras y fácilmente visibles.

La tendencia marca que la mayor parte de los accesos están en la parte superior derecha de la pantalla, dando paso a una segunda página de Log in, aunque también es muy común mostrar los campos de acceso o formularios en la primera página, generalmente en el header o cabecera.

Datos de interés:

Métodos de acceso

8 webs muestran el acceso en la página de inicio11 webs redirigen al usuario a una segunda página4 webs usan métodos similares a lightbox o JavaScript

En cuanto a la accesibilidad de los accesos analizados, es significativo que casi la mitad de las webs no permiten la

navegación mediante el teclado o es muy difícil hacerlo dado que no se percibe el “focus” o situación del cursor.

Datos de interés:

Claridad y Accesibilidad

11 webs no muestran el focus al navegar con el teclado12 webs permiten navegar y acceder al área privada o de usuario mediante el teclado

Respecto a las ayudas y utilidades, cabe destacar que todas las webs analizadas, a excepción de alguna, muestran ayudas y utilidades a la hora de entrar al área privada o de usuario.

Datos de interés:

Ayudas y utilidades

La mayoría de webs analizadas muestran las ayudas necesariaLas mejores prácticas muestran tips de acceso y navegación junto al log-in

Conclusión finalUno de los puntos débiles que se han encontrado en el análisis es la diversidad de métodos de acceso; el uso de mail, nombre de usuario y Open ID, indistintamente, generando así una nueva identidad en cada sistema, dando paso a un debate sobre la forma de estandarizar el acceso a las áreas privadas, para así no generar tanta confusión en los usuarios.


Las tendencias de las webs analizadas

Página 29



Conclusiones


Los datos al descubierto

Página 30

Web Lugar o Situación del Log In o acceso Claridad y accesibilidad Ayudas y Utilidades

Nombre URL Pag. inicio Segunda pág. Otros Claridad Accesibilidad Ayudas Utilidades

Slideshare http://www.slideshare.com x V M V V

Last.fm http://www.last.fm x R M V M

Flickr http://www.flickr.com x V V V V

Bubok http://www.bubok.com x R M V V

iStockPhoto http://www.istockphoto.com x V M V V

Delicious http://del.icio.us x V M V V

Youtube http://www.youtube.com x V M V V

Google http://www.google.com x V R V V

Twitter http://www.twitter.com x V M V V

Blogger http://www.blogger.com x V V V V

Allmusic http://www.allmusic.com x R V V V

me.com http://www.me.com x V V V V

Wolpy http://www.wolpy.com x V R M M

Wordpress http://www.wordpress.com x V V V M

Virb http://www.virb.com x R M V V

Hotmail http://www.hotmail.com x V V V V

Veer http://www.veer.com x R V V V

Myspace http://www.myspace.com x V V V V

Linkedin http://www.linkedin.com x V M V V

Facebook http://www.facebook.com x V V V V

ODEO http://www.odeo.com x V M V V

Digg http://www.digg.com x V V V V

Technorati http://www.technorati.com x V M V M

X = Situación en la que se encuentra el acceso a la web. V = Aplicado correctamente R = Aplicado de forma regular M = Mal aplicado



http://www.last.fm/

http://www.last.fm/




http://del.icio.us/

http://del.icio.us/











http://www.me.com/

http://www.me.com/

























Creación del documento

Este documento ha sido creado tras realizar varios trabajos para aerolíneas de ámbito internacional. Por motivos de confidencialidad, sus datos no figuran en este documento.

“Análisis de 12 aerolíneas internacionales. Proceso de compra” es parte de una colección de monográficos.

Para saber más puedes contactar con nosotros en [email protected] o bien en la web de Arquinauta, www.arquinauta.es.

Sobre Arquinauta

Somos un equipo joven de consultores expertos en diseño de interacción y usabilidad, especializados en analizar, mejorar y crear espacios digitales sencillos de utilizar.

Nuestro foco es entender al usuario y diseñar para él. Creemos en la experiencia on-line y pensamos que la belleza de una web radica en su sencillez.

Introducción > Criterios > Análisis > Conclusiones

Página 31

Arquinauta Consulting

www.arquinauta.es • [email protected]

Ausiàs Marc 26, 5è-57, 08010 Barcelona • Tel. 93 342 89 48

Sobre nosotros

mailto:[email protected]


análisis de acceso al área privada o de usuario de 23 webs

Technology