2. Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones 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. 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 info@arquinauta.es Página 2

5. ¿Se percibe fácilmente?

6. ¿Es fácil de navegar?

7. ¿Es accesible para dispositivos que navegan con teclado?

8. En este caso, ¿es correcta la jerarquía y orden de los elementos?

10. ¿Y en caso de olvidar contraseña o nombre de usuario?

11. ¿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 Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

12. 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 Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

13. Slideshare www.slideshare.com Situación y forma El 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 accesibilidad Se 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 utilidades En 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. Página 5 Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

14. Last.fm www.last.fm Página 6 Situación y forma Acceso 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 accesibilidad Su 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 utilidades Se muestran ayudas para recuperar la contraseña y registrarse en el site. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

15. Flickr www.flickr.com Página 7 Situación y forma La 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 Yahooy password para acceder. Claridad y accesibilidad Se visualiza de forma rápida y fácil. Es sencillo navegar con el teclado y acceder a la pantalla de Sign In. Ayudas y utilidades Se 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

16. Bubok www.bubok.com Página 8 Situación y forma Enlace de acceso al área privada mediante “lightbox”. El enlace se sitúa a la derecha del logo. Una vez en el “lightbox”, requiere de emaily contraseña para acceder al área privada. Claridad y accesibilidad No 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 utilidades Recordatorio de contraseña yregistro rápido disponibles junto al acceso o Log In. Opción de “recordarme” disponible. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

17. iStockphoto www.istockphoto.com Página 9 Situación y forma Botó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 accesibilidad El Log In es accesible mediante teclado, aunque resulta muy difícil, ya que no tiene focus. Ayudas y utilidades Se muestran enlaces de ayuda para recuperar nombre de usuario y password, así como opciones de registro y recomendaciones o tipspara acceder correctamente. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

18. del.icio.us http://del.icio.us Página 10 Situación y forma Dispone de un botón destacado para la página de entrada en la parte superior derecha. Al pasar a la página de acceso, requiere nombre de usuario y password. Claridad y accesibilidad Aunque 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 utilidades Se 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

19. Youtube http://www.youtube.com Página 11 Situación y forma Se muestra un enlace de acceso al área privada 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 accesibilidad Aunque 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 utilidades Se ofrecenenlaces para recuperar nombre de usuario y contraseña, así como registro en el site o registro mediante la cuenta de Google. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

20. Google http://www.google.com Página 12 Situación y forma El 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 accesibilidad Semuestra 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 utilidades Se 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 passworden el ordenador desde el que se accede. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

21. Twitter http://www.twitter.com Página 13 Situación y forma Se 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 accesibilidad Se 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 utilidades Se muestran ayudas para recuperar el password o usar Twitter desde le teléfono. Ofrece la opción de recordar al usuario. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

22. Blogger http://www.blogger.com Página 14 Situación y forma El acceso se encuentra en la parte superior derecha, disponible mediante formulario con nombre de usuario (email) y contraseña. Claridad y accesibilidad Se puede navegar y accederfácilmente mediante teclado, ya que muestra el “focus” y el orden de los elementos es correcto. Ayudas y utilidades Se 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

23. Página 15 Allmusic http://www.allmusic.com Situación y forma Se 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 accesibilidad Se puede navegar perfectamente con el teclado, ya que elfocus es visible y el orden de los elementos correcto. Ayudas y utilidades Se ofrecen diversasayudas 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

24. Mobile me http://www.me.com Página 16 Situación y forma Se muestra, de formadestacada, 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 accesibilidad El 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 utilidades Se muestran ayudas para recuperar la contraseña, registrarse en el servicio para probarlo e información de ayuda. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

25. WOLPY http://www.wolpy.com Página 17 Situación y forma El acceso al área privada se muestraen la parte superior derecha, mediante un formulario con nombre de usuario y contraseña. Claridad y accesibilidad Se puede navegar y visualizar el focus claramentepara 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 utilidades Nose muestran ayudas o utilidades junto a los campos de acceso al área privada. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

26. WordPress http://www.wordpress.com Página 18 Situación y forma El acceso al área privada se aprecia claramente. Se encuentra en la parte superior izquierda, justoencima del logo o imagen corporativa. Se piden nombre de usuario y password para acceder. Claridad y accesibilidad Tras 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 utilidades Junto a los campos de acceso se muestran ayudas y utilidades como recordar al usuario o recordar password. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

27. VIRB http://www.virb.com Página 19 Situación y forma Se muestra unbotó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 accesibilidad Se puede navegar mediante el teclado, aunque no se visualiza elfocus. En la pantalla de acceso la situación es similar, aunque los campos de acceso si muestran el focus. Ayudas y utilidades Se muestran opciones para recordar contraseña y recuperar password, así como acceder mediante Open ID. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

28. Hotmail http://www.hotmail.com Página 20 Situación y forma Se 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 accesibilidad La navegación con el teclado se realiza de forma cómoda y sencilla, mostrándose el focus en todo momento. Ayudas y utilidades Se 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

29. Veer http://www.veer.com Página 21 Situación y forma El 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 accesibilidad Se navega de forma sencillay 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 utilidades Se muestran diversas ayudas como recuperación de contraseña, registro y los beneficios del mismo. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

30. Myspace http://www.myspace.com Página 22 Situación y forma El acceso al área privada se encuentra en la página inicial, destacadoen el columna derecha. Se requieren correo y contraseña para acceder. Claridad y accesibilidad Se puede navegar y acceder fácilmente con el teclado al área privada, ya que se muestra el focusen el campo “correo”. Ayudas y utilidades Además de la posibilidad de recuperar contraseñay recordar los datos del usuario, se permite registrarse al usuario en la pestaña de la misma caja. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

31. LinkedIn http://www.linkedin.com Página 23 Situación y forma El 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 accesibilidad Se 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 utilidades Se 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

32. Facebook http://www.facebook.com Página 24 Situación y forma El 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 accesibilidad El 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 utilidades Se muestran opciones de “recordarme” y recuperació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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

33. ODEO http://www.odeo.com Página 25 Situación y forma El 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 accesibilidad Se 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 utilidades En la página de acceso se muestran diversas ayudas como recordar al usuario, resetear contraseña o crear una nueva cuenta. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

34. Digg http://www.digg.com Página 26 Situación y forma Se 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 accesibilidad Se 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 utilidades Se 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: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

35. Technorati http://www.technorati.com Página 27 Situación y forma El 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 accesibilidad Se puede navegar mediante el teclado, los elementos están en un orden correcto, aunque al no mostrarse el focus resulta muy complicado. Ayudas y utilidades Se muestra la opción para recuperar el password. Junto a la caja de acceso, se muestra el formulario completo de registro. Rating: Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

36. Mejores prácticas Lo más destacado Mejor solución accesible WordPress.com Una 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. Página 28 Mejor solución tecnológica Digg.com Usando 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.com Una 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. Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones

37. Conclusiones Introducción > Criterios > Análisis > Mejores Prácticas > 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 usabilidad para 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 inicio 11 webs redirigen al usuario a una segunda página 4 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 teclado 12 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 necesaria Las mejores prácticas muestran tips de acceso y navegación junto al log-in Conclusión final Uno 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

38. Conclusiones Introducción > Criterios > Análisis > Mejores Prácticas > Conclusiones Los datos al descubierto Página 30 X = Situación en la que se encuentra el acceso a la web. V= Aplicado correctamenteR= Aplicado de forma regularM = Mal aplicado

39. Creación del documento Sobre Arquinauta 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 info@arquinauta.es o bien en la web de Arquinauta, www.arquinauta.es. 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 Sobre nosotros Arquinauta Consulting www.arquinauta.es • info@arquinauta.es Ausiàs Marc 26, 5è-57, 08010 Barcelona • Tel. 93 342 89 48 Página 31