Usabilidad y tecnolog&iacute;a para entender la web

5 Comentarios

Enero 14, 2008

Guías de estilo en formato Wiki

Tema: Usabilidad, Diseño Web
» Se lee en 121 segs

Wiki

Luego de unas merecidas vacaciones “Blogueras” volvemos a comentar una que otra cosa en Usándolo.com. Para comenzar el año me gustaría hacer unos apuntes sobre la creciente tendencia a crear Guías de estilo utilizando plataformas de wiki.

Desde mediados del año pasado vengo oyendo con más fuerza esta tendencia, dejar de lado el clásico entregable en word o PPT y pasar a plataformas que brinden más recursos para la utilización e implementación de Guías de estilo. El objetivo de utilizar este recurso es potenciar el fenómeno colaborativo a la hora de crear aplicaciones, el paradigma del wiki radica en la capacidad de intervenir el la evolución de una Guía de estilo, la cual se comprende como un elemento vivo que debe crecer y adaptarse a los requerimientos de desarrollo.

Ventajas

Es ubicuo, el acceso se puede limitar a la red de la empresa o hacerse pública, los programados ya no tiene que ir buscando e indagando sobre las nuevos cambios.
La información está centralizada y el control de cambios es transparente para el programador/diseñador.
Las Guías de estilo en formato clásico tienden a perderse y traspapelarse, y es allí donde comienzan los problemas de inconsistencia.
Si creas una metadata de los componentes, el buscador de la wiki es una herramienta vital para ahorrar tiempo y en programación/diseño el tiempo se paga y mucho.
Sólo necesitas un navegador para acceder a la información, cuando estas programando/ mientas menos recurso consuma tu ordenar mejor, con una wiki basta tener abierto tu framework preferido y un navegador (que por lo regular siempre lo tienes abierto). Con los formatos clásico tienes que abrir el word, el ppt y consume recursos. Disminuyes la posibilidades que tu ordenador colapse.
El uso del hipervínculo, creo que no hace falta reflexionarlo. Eso si para que todo vaya bien debes hacer una buena arquitectura.
El buscador. Eso si, hace falta una buena indexación.
Las mejores plataformas wiki son OpenSource
Se puede integrar con la intranet de la empresa

Desventajas

La instalación, si la red de la empresa no tiene los recursos para instalar un servidor web o es difícil por la burocracia entonces las wiki es un verdadero problema.
Debes definir muy bien los roles porque se puede complicar mucho el tema colaborativo.
Cuesta un poco más de dinero y esfuerzo que el clásico entregable, puesto que requiere programación, diseño integración, AI, Indexación, etc… No es poner el word en formato web, es mucho más.
Requiere ancho de banda, requiere un poco de mantenimiento como toda web.
Algunos perfiles requiere un poco de experiencia en entornos de edición colaborativa

Ejemplos

Aquí propongo algunos ejemplos online

Plataformas más utilizadas

2 Comentarios

Diciembre 27, 2007

usandolo.com el Blog del día

Tema: Usabilidad, Diseño Web, Web World
» Se lee en 1 segs

El próximo 31 de diciembre, para cerrar bien el año, Usandolo.com será nombrado el Blog del Día, el día de fin de año saldrá publicada la entrevista que me han realizado como parte de la iniciativa de la gente de blogdeldia.org, dedicados a seleccionar y entrevistar blogger.

No os perdáis la entrevista.

Con esto me despido hasta el año que viene.

¡Feliz año nuevo!

Tags:Diseño Web, Usabilidad, Web World

Diciembre 17, 2007

¿Habéis visto el nuevo site de la BBC?

Tema: Usabilidad, Diseño Web
» Se lee en 1 segs

BBC beta

Personalmente considero que será el nuevo paradigma de la customización. Una homepage basada completamente en widgets permite al usuario tener el control de lo que desea ver. Es una apuesta bastante arriesgada, pero que considero que puede tener resultados positivos. Los componente se presentan muy fáciles de usar aunque apuntan a usuarios avanzados, no veo muy claro los low users moviendo cajitas, que por otro lado no tienen porque hacerlo…

Encuentro muy positivo que empresas tan grades como la BBC apuesten por este tipo de modelos. Ahora esperemos a ver cómo se plantea la web por dentro…

link: bbc.co.uk

2 Comentarios

Noviembre 5, 2007

No siempre lo bonito es bueno….

Tema: Usabilidad, Diseño Web
» Se lee en 1 segs

Hoy me gustaría compartir con vosotros una cita de Alan Coper coautor de About Face, literatura obligada para el diseño de interacciones.

“No importa cuán bonita, no importa cuán guay sea tu interfaz, sería mejor si fuera un poco menos de todo lo anterior”.- Alan Cooper

“No matter how beautiful, no matter how cool your interface, it would be better if there were less of it”. — Alan Cooper

Aquí algunas web que cumplen este principio:

www.zune.net
Zune

Icebreakers.la
ice

Julio 9, 2007

¿Buscas inspiración? Aquí mi top 10

Tema: Diseño Web
» Se lee en 1 segs

Inspiration

¿Alguna vez de has plantado ante tu Photoshop o tu Illustrator o lo que uses para diseñar y no sabes por dónde comenzar a pintar? ¿has leído el briefing 20 veces y no terminas de inspirarte? ¿Tienes un timming apretado y vas a tope?

Para estos momentos en los que las ideas están borrosas, echo mano de mi TOP 10 de inspiración. Eso sí ante todo Be unique my friend! Mira, compara, deconstruye y vuelvelo a construir.

Se aceptan sugerencias para hacerlo crecer…

Caution: El orden de los factores no altera el producto

Recomiendo suscribirse al RSS para no siempre estar al día.

Tags:Diseño Web, inspiration

Julio 9, 2007

Ajax, Ajax y más Ajax

Tema: Diseño Web
» Se lee en 1 segs

Ajax
Una vez más la gente de Smashing Magazine nos sorprende con recopilaciones, esta vez nos trae 80 scripts de Ajax que debemos tener siempre a la mano.

Desde autocompletadores pasando por menús hasta efectos visuales, vale la pena echarle un vistazo.

Link: 80+ AJAX-Solutions For Professional Coding

Tags:Ajax, Diseño Web

Junio 12, 2007

mobileOK, los estándares que faltaban

Tema: Usabilidad, Diseño Web
» Se lee en 61 segs

W3C Mobile Web Best Practices

Una vez más la percepción selectiva vuelva a jugar una de las suyas. Hoy Fran Tarifa, nos cometa los avances del W3C en temas de validación y estándares para dispositivos móviles.

El World Wide Consortium, a principios del mes de Junio, publicó el último draft del W3C mobileOK Basic Tests 1.0. Documento que tiene como objetivo exponer las best practices en cuanto a desarrollo de web para móviles. En este sentido el grupo de desarollo del W3C propone en un su blog una pequeña lista de validadores recomendados:

checker (Beta) del W3C
Validador online de mobile-readiness desarrollado por .Mobi
TAW mobileOK Basic Validador de accesibilidad T.A.W, desarrollado por los asturianos de la Fundación CTIC

Una vez presentados a los candidatos me gustaría hacer comentarios sobre pequeñas pruebas que he realizado en cada uno de ellos.

Validador de .Mobi

Muy completo
Aporta información extra como precio estimado de conexión, velocidad estimada de conexión para los tres sistemas GPRS, 3G y WiFi.
Simuladores según modelos más utilizados (Nokia y Sony Ericsson)
Incluye pruebas para aspectos como Autorefreshing, Caching, Estilo y más
Interfaz muy amigable
Requiere conocimientos sobre los estándares, aunque es más intuitivo
Va por la versión 1.0.4
Puede le que falte un poco de precisión, pero en cuanto esté el documento definitivo del W3C seguro que se ajustará más

W3C Mobile Web Best Practices checker

Aún está en beta
Es similar a los validadores regulares del W3C
No sólo se limita a indicar errores si no también comenta los aciertos
Es muy estricto. Ojo, eso ya está muy bien
Requiere conocimientos sobre los estándares
Es el punto de partida para cualquier análisis sobre websites para dispositivos móviles

Validador W.A.I

Es muy claro en sus respuestas y definiciones
Requiere conocimientos sobre los estándares
Es muy preciso
No sólo se limita a indicar errores si no también comenta los aciertos

En conclusión, considero que los tres validadores se complementan sin lugar a duda. Esta información debe incluirse en cualquier análisis y/o informe que se realice a sitios web para móviles.

Creo que no me cansaré de repetirlo, El futuro está en los dispositivos móviles y para llegar sanos y salvos a esa batalla no hay que perder de vista los estándares.

Vía: Accesibilidad, Usabilidad y Estandares Web

Junio 10, 2007

¿Liquidos o 960px, qué hacemos?

Tema: Usabilidad, Diseño Web
» Se lee en 1 segs

Liquid Layout

Los purista de la usabilidad, es decir los gurus, cuando analizan el ancho de un sitio web suelen recomendar los diseños líquidos es decir width: 100%. ¿Por qué? porque son precavidos, porque intuían que las resoluciones de los monitores tenderían a aumentar cada vez más dejando obsoleto al clásico 800 x 600.
Hace mucho tiempo que vengo viendo en las famosas webs 2.0 dos constates: Layouts líquidos o fijo a 960px y esta semana me he topado vía Rudeworks>>Xybernéticos un par de disertaciones muy interesantes sobre el tamaño.
Ahora bien, ¿Qué hacemos con todas nuestras web de 760px? ¿migramos a 960px o directamente las hacemos liquidas? Yo creo que la respuesta está bastante clara… haberlas echo a liquidas desde un principio.

Los monitores probablemente seguirán creciendo de tamaño, pero este crecimiento se detendrá por temas de espacio físico pero la batalla se librará en los dispositivos móviles, con lo cual, lo suyo sería ir al diseño liquido que se adapte a todas las resoluciones.

BTW: En usandolo.com tan sólo un 7 % de los usuarios utilizan resolución de pantalla de 800×600.

Mayo 8, 2007

Websites de película: usabilidad de cine

Tema: Usabilidad, Diseño Web
» Se lee en 421 segs

Sumario

Ejercicio de análisis heurístico aplicado a websites de películas. De los resultados se proponen mejoras en 10 aspectos.

Usabilidad en websites de películas
El Ejercicio
Los “estándares”
Los Resultados
Conclusiones

Este post es un poco largo, por ello he preparado una versión PDF

Usabilidad en websites de películas

Un componente que siempre acompaña toda película es su sitio web, unos más llamativos que otros, pero siempre están presentes. En estos días me ha llamado la atención el tema de la usabilidad en los websites de películas. La verdad es que existe poca documentación al respecto y considero que es un nicho interesante sobre todo porque muchas películas está hechas pensado en el “usuario”, en este caso espectador, por lo general las productoras saben bien el target y el perfil de la gente que consumirá la película.

Ahora bien, en el caso que nos compete, Internet, considero que no siempre los websites de las películas están pensados desde el punto de vista del usuario, a nivel de estructura y visualización de contenido. Para desarrollar un poco más esta idea he realizado un ejercicio heurístico para ver si nos podemos aproximar a una idea de usabilidad en este tipo de websites, porque tienen sus propias particularidades. Más o menos su estructura está basada en lo mismo, con más o menos “features” pero son básicamente iguales en estructura. El truco está en hacer diseños atrevidos y alucinantes, evidentemente valiéndose de Flash.

El Ejercicio

Para realizar este ejercicio he tomado 5 websites de las películas que se encuentran en el Box-Office local. El planteamiento es identificar posibles puntos para mejorar la experiencia del usuario. El diseño del ejercicio está compuesto por una batería de 25 preguntas, que se puntúan 1 si el factor es Sí y 2 si el factor es No.

Existen factores convenidos en el diseño de este tipo de websites y la principal es que SIEMRPE es en Flash, es muy raro que se diseñe en HTML/CSS por más recurso que esta última técnica pueda aportar, la grandilocuencia del Flash se impone.

Pequeña aclaratoria: Como la mayoría de las películas vienen de holywood, estos websites están en inglés. En algunos casos existen versiones regionales (España, Francia, Latino América, etc) y otros suelen ser un poco diferentes de la versión original, por esta razón me he decantado por la V.O. Esto no es un estudio ni lo pretende ser, es un ejercicio orientativo.

Los “estándares”

Diseño en Flash
Su tamaño mínimo es 1024
Fondo negro
El video, la imágenes y el audio son los protagonistas
El botón de apagar el sonido suele estar abajo a la derecha
Siempre encontrarás el/los trailers, el Cast & Crew, una sinopsis y la fecha de estreno. Es lo mínimo que suelen tener
Accesibilidad 0 (cero)
Requieren el plug-in del Adobe Flash Player, como mínimo el 7 (vamos por el 9)
Todas tienen intro, a veces innecesario.
Suelen desplegarse en pantalla completa.

Cuando un usuario va al sitio web de una película su prioridad es ver el o los trailers y tener una idea de lo qué trata el film. Luego quizá quiera descargar algo sobre la película, un fondo de pantalla, algunos iconos o el cartel de la película.

Los Resultados

Aquí una tabla con los resultados, más adelante conclusiones que posiblemente nos ayuden si algún día tenemos la suerte de desarrollar el website para alguna película.

Websites involucrados en el ejercicio:

P1: Spiderman 3
P2: Premonition
P3: Sunshine
P4: 300
P5: Number 23

Factores/Película	P1	P2	P3	P4	P5
Tiempo de carga >10seg	2	1	2	2	1
¿Funciona sin scroll 1024?	2	2	2	2	2
¿La barra de scroll (si se necesita) es difícil de identificar?	1	2	1	2	2
¿Pop up ?	1	2	2	2	2
¿Existe intro o directamente se carga el site?	1	1	1	1	2
¿La navegación por el site es lenta?	1	1	1	2	2
¿La navegación está rotulada?	2	1	1	2	2
¿El usuario está informado de dónde está navegando?	1	1	1	2	1
¿Hay posibilidades y/o formas de ir atrás?	1	1	1	1	1
¿El trailer está en homepage?	1	1	1	1	1
¿El preload aporta información o solo es un counter?	1	1	1	1	2
¿El video se pixela y hace difícil verlo?	2	2	1	2	2
¿El trailer es autorun?	1	2	2	1	2
¿Los controles de video están visibles/accesibles?	2	1	2	2	1
¿El botón para apagar el audio está visible y fácil de encontrar?	1	1	2	2	2
¿Existen opciones de resolución del video?	2	1	2	2	1
¿Información sobre la película está rotulada como About the film o The movie?	2	2	1	2	1
Tiene más de 3 niveles de navegación	2	2	1	2	2
¿La sinopsis de la película forma parte del menú principal?	2	1	2	1	2
¿En un primer vistazo se puede intuir el tema de la película?	2	1	2	1	1
¿Las fechas de estreno están disponibles y rotuladas como Release Dates?	2	1	1	1	1
¿Los textos son dificiles de leer?	1	1	1	2	1
¿El tamaño del texto es inferior a los 12 ptos?	1	1	1	1	1
¿Existen versiones regionales del sitio web?	2	1	1	2	2
¿Está bien logrado el contraste de colores?	2	2	1	2	1
Total	38	33	34	36	38
Porcentaje Total De Cumplimiento	76	66	68	72	76

Conclusiones

1.- Trailer ausente en el HomePage

Parto de la hipótesis que el usuario va al website de la película en busca del trailer, aunque ningunas de las webs implicadas presenta el trailer en el homepage.

2.- Desperdiciando el tiempo de carga de la película flash

5 de 6, utilizan el clásico sistema de porcentaje de carga. Este es un tiempo valioso, que no debería desperdiciarse. Es posible que al usuario no le interese saber este dato. Pero se puede acompañar de mensajes cortos, de micro animaciones que mantengan la expectativa y creen la necesidad de llegar destino porque saben que les espera algo bueno. El % no dice mucho. Un ejemplo interesante es el de Number 23, si bien no dice nada, hace juego de imágenes.

3.- El video es el Rey

Partiendo de este principio, no torturemos la compresión. Digamos que es oportuno ser bastante exigente con este tema.

4.- Convención en la ubicación de los botones de control de sonido

No hay nada que cause más estrés al usuario que perder el control del site. Si este comienza a sonar y el video se inicia con ruido, explosiones, etc… el usuarios es capaz hasta de desconectar los altavoces de raíz o dale al botón de power del ordenador, en un intento desesperado por acallar los ruidos (he visto casos).

En este sentido, recomendaría, no escatimar en el tamaño del On/Off ni en el icono utilizado para silenciar el website. El usuario lo agradecera y más si se ha escaqueado un momento en su trabajo para mirar esta web y resulta que comienza a sonar estridentemente, el jefe fija la mirada en el empleado y adiós felicidad. Mala experiencia.

5.- Ofrecer opciones en cuanto a calidad/tamaño del video

No todos tenemos un super Imac core duo con conexión de 20 megas, ya con el flash se sacrifica a un grupo de usuarios con mala conexión a Internet y encima que se ha esperado lo suyo para ver el trailer resulta que pasa algo. Al final el usuario se va a youtube que es más fácil y los videos descargan más rápido. Mal.

6.- El texto, el talón de Aquiles de los diseñadores

Cuando se habla de Flash no sé porque extraña razón siempre se piensa en las fuentes más pequeñas que el monitor pueda resistir 8, 9, 10 puntos, si se quiere que nadie lea ¡que no se ponga texto! Pero es un esfuerzo enorme leer fuentes tan pequeñas y más sabiendo de entrada el fondo, por lo regla, va a ser negro. Las fuentes de 12 puntos también tienen su magia y son un reto de diseño. Al final que pasa, el usuario preferirá leer la sinopsis en el blog de Extracine o escuchar la critica el Palomitas , porque el Cast lo verán mejor en IMDB

7.- Intros con sentido

Una web de una película es un intro en si misma, es una animación por esencia, porque tengo que esperar a que spiderman termine de echar telarañas cuando lo que quiero ver es el trailer. No estoy en desacuerdo con la animación ni mucho menos, pero considero que se ha de ser prudente. Por ejemplo en la web de Premunitions tenemos una intro juguetona con hojas otoñales cayendo, las cuales me consiguieron desesperar, haced la prueba.

El principio del “no al intro” aplica para todo, el usuario tiene un tarea que cumplir en el website y no es precisamente ver el intro.

8.- Velocidad de carga de la película

Cuando se crea un proyecto en Flash siempre se toma en consideración este aspecto y surge la pregunta ¿se han de colocar preloader en cada sección? O ¿se hace una carga general del sitio? Pues esto es fundamental.

9.- La navegación es crucial

Como sabemos nuestro querido botón del navegador, en Flash no sirve de nada. Con lo cual el menú siempre debe estar presente y permitir ir atrás, adelante, a dónde queramos desplazarnos. Quizá incluir breadcrumbs no sería mala idea.

10.- Creatividad más aún

Si sabemos que este tipo de sitios web tiene la misma estructura Trailers, Cast, Downloas, Release Dates. Entonces cómo innovar. Allí está el truco, yo comenzaría con un poco de usabilidad.