El Día Mundial de la Usabilidad, es organizado globalmente por la Asociación de Profesionales de la Usabilidad (UPA, por sus siglas en inglés) para fomentar la Usabilidad en el desarrollo de productos y servicios.

Este es el segundo año que en Panamá nos unimos a este movimiento y tendremos un evento totalmente gratuito, con la participación de dos expositores panameños.

Expositores:

CONTEXTO: Una fuerza que nos rodea, penetra en nosotros, y mantiene unida a la galaxia.
Por: Jorge Arango

Aplicaciones de UX en copaair.com
Por: Alberto Attia

Jueves 12 de Noviembre, 2009 – 6:00PM.
Softnet – San Francisco, entre Vía Porras y Calle Andrés Mojica (frente a Heladería Gelatieri)

Es un evento gratuito, patrocinado por Softnet y Los Antojos de Nona.

1. Escalabilidad:
   Muchos sites de e-commerce dan la opción al usuario de guardar su información de pago y de shipping.  ¿Qué pasa cuando el usuario tiene múltiples métodos de pago? o ¿diferentes direcciones para el shipping?

Al desarrollar una aplicación web es importante dimensionar el alcance que va a tener la misma y siempre pensar en las diferentes funciones que podría tener en el futuro de manera que la aplicación sea flexible y permita facilmente agregar estas nuevas funciones.
2. Diseño Visual:
   Las aplicaciones web viven en este mundo extraño de mitad website, mitad aplicación.  Algunas veces algo tan teóricamente simple como incluir una función que parezca una función se vuelve dificil rápidamente.  ¿Lo pones como un botón? ¿lo pones como un link?.   El diseño visual de tu aplicación puede tener un gran impacto en el usuario y no hablo solamente de la parte estética, me refiero a una buena navegación, íconos representativos a las funciones, enlaces, tamaños de fonts, etc. Siempre tomo como buen ejemplo de diseño visual para una aplicación el producto llamado Basecamp de 37signals.com.   Si el diseño visual no es claro y conciso, el usuario se distrae tratando de adivinar que es lo que tiene que hacer para realizar una tarea específica.
3. Comprensión:
   Generalmente las aplicaciones web a menudo ayudan a realizar tareas que están por encima de la experiencia del usuario,  muchas veces guían al usuario a través de un proceso de toma de decisiones que normalmente no podrían realizar por sí mismos.   Si estos toman una decisión incorrecta, esto afecta negativamente su experiencia en el sitio  e inclusive la relación con la empresa.

Hace años atrás trabajé en un banco que por primera vez iba a sacar su banca en línea y nos dimos cuenta que una de las funciones que más soporte requería era la de Pagos a Terceros.  El usuario se confundía cuando la aplicación les decía que para realizar un Pago a Tercero, primeramente debía afiliar el comercio y esto pasaba porque la aplicación no orientaba claramente al usuario lo que debía hacer.  Poco a poco tuvimos que ir mejorando el diseño para esclarecer estas pantallas.
4. Interactividad:
   Una de las grandes diferencias entre una aplicación web y otros tipos de páginas web es que en las aplicaciones el usuario es mucho más interactivo.  En un sitio rico en contenido, los usuarios más que nada hacen click sobre links y ocasionalmente hacen búsquedas. Mientras que en una aplicación web, agregan información, la ordenan, realizan consultas y navegan hacia adelante y atrás entre los resultados de una búsqueda. Entender como es que el usuario administra su tiempo se vuelve crítico.    
    ¿Deberíamos poner todos los campos para agregar la información del usuario en  una sola página larga o deberíamos dividirla en varias páginas? ¿cuál sería el orden 
    lógico para solicitar esta información?   Los usuarios muchas veces cometemos  errores por ejemplo al llenar una información de un formulario y queremos hacer “undo” o echar para atrás para hacer la corrección.  Cosas tan simples como mantener habilitado el botón “back” del browser y las barras del navegador visibles crean una dinámica entre la aplicación y el usuario.  He visto sitios de aplicaciones que ocultan las barras y botones del browser y muchas veces es frustrante para el usuario.
5. Manejo de Cambios:
   Los diseñadores de Facebook han aprendido a las malas que hacer cambios rápidos en la aplicación,  aunque sean grandes mejoras, pueden tener un impacto negativo en usuarios, si estos se hacen incorrectamente.  Todos sabemos que los usuarios se resisten al cambio, pero están dispuestos a aceptarlos cuando se les da el suficiente soporte.   El problema con los cambios rápidos, a menudo es que el usuario ya esta acostumbrado a utilizar la aplicación de cierta forma y el viejo diseño lo condiciona a que las cosas esten de cierta manera.  Aún cuando el cambio sea para su beneficio siempre necesitarán de soporte para ir de lo viejo a lo nuevo.Recientemente los equipos de programadores y diseñadores están comenzando a planear como realizar el proceso de cambios conjuntamente con los propios cambios.  
Al poner atención en como los usuarios perciben esta transición se puede incrementar la adopción de los cambios y construir una relación de lealtad a largo plazo.

   Fuente:  5 Usability Challenges in Web Applications

Ah y la receta del Spooky Cupcake para Halloween, la pueden encontrar aquí.

Este artículo lo escribió: Elsa Canto, quien administra proyectos en Bootstudio y en su tiempo libre trabaja arte mixto sobre canvas.   Sígueme en Twitter!

Queremos invitarlos a nuestra próxima reunión UX Panamá (21 de octubre, 6:00pm):

Tenemos varias presentaciones programadas:

Mapas para Visualización de Datos.
Carlos Gordón

Derecho de propiedad intelectual.
Sandra Guerra

HAPPY HOUR.
MacStore

Miércoles 21 de Octubre, 6:00PM
En el Mac Store de San Francisco.

¿Cómo llegar?
Desde Calle 50: es entrando por la calle de la Farmacia Metro
Desde Vía Porras: es detrás del Restaurante Sorrento

Tendremos un Happy Hour patrocinado por el Mac Store

Nos vemos el miércoles 21.

Los temas de usabilidad, que apuntan hacia mejorar la experiencia del usuario, están íntimamente ligados al contenido, la forma y la funcionalidad. En la más reciente reunión de la comunidad de UX de Panamá hablamos de contenido, con eso nos referirnos no solo al copy, sino también a las fotos, vídeos, metadata.

Por eso arrancamos la reunión con un re-mix de las fotos de flickr y los textos de twitter, pueden verla aquí:

MultiBank estuvo presentando la soluciones de negocios electrónicos que están ofreciendo. Son una interesante opción en banca panameña. Están al tanto de las tendencias actuales y creando oportunidades para quienes quieren poner en marcha tiendas electrónicas locales.

Tito Herrera nos dio muchas luces sobre las herramientas que ofrece la web para fotógrafos tanto para los profesionales como la magia de la colectividad de Flickr y la necesidad de tener copias de seguridad tanto en la tierra como en el cielo. En Palabrerio.com hay un resumen más completo de esta presentación, que empieza así:

Frank Zappa decía que escribir de música es como bailar sobre arquitectura, anoche en la reunión de UXPanama en elMacStore Tito Herrera estuvo sambeando sobre fotografía. »

Raúl Altamar dio muy buenos datos para evitar errores de estilo y de puntuación. Propuso usar los signos de admiración y los puntos suspensivos comedidamente. Para todos los que preguntaron: si, el muchacho es méxicano.

El MacStore fue un anfitrión genial. Es muy posible que los vodka-cranberrys y redbulls del happy hour hayan tenido mucho que ver con lo divertida que quedó está reunión. Además, tengo que admitir que me convencieron de dar el salto a Snow Leopard con su presentación — eso y el hecho de mejorar el desempeño de mi máquina que ahora mismo está muy atorada la pobre.

Si te la perdiste, no te preocupes, en octubre volvemos al MacStore. Si estuviste allí, cuentanos qué te pareció el evento en los comentarios. ¿Qué fue lo qué más te gustó? ¿Conversaste con alguien que está haciendo cosas interesantes? ¿Qué te gustaría ver en el próximo evento?

Más fotos del evento.

—
Este post lo aportó Ana Guardia que escribe y diseña y por ahí dicen que es muy profesional.

No San Francisco, California.  Es por Calle 50: entrando por la calle de la Farmacia Metro.  Ven  acompáñanos el Miercores 23 de Septiembre, desde las 6:00p.m.  Tendremos los siguientes temas y expositores:

La Web como herramienta para un fotografo
Exporsitor: Tito Herrera

Textos para web
Expositor: Raúl Altamar

Presentación de Snow Leopard
Mac Store

Estamos activamente buscando fondos y voluntarios para llevar este programa al resto del país o por lo menos a varios centros más. Contamos con el apoyo de la Fundación InfoPlazas para basarnos en su infraestructura.

Este proyecto busca impulsar a estudiantes a generar contenidos y utilizar herramientas de comunicaciones para conectar, compartir y colaborar. Esperamos que esta experiencia tenga un impacto positivo en su aprendizaje y los lleve a poder optar por las nuevas oportunidades que existen en este campo.

Fotos del taller.

Este es uno de los principales errores que tienen los sitios web. Es cierto que el cliente siempre tiene la razón pero es nuestra labor como profesionales aconsejarle al cliente las opciones mas optimas para el funcionamiento de su sitio.

Lo primero es identificar qué información es mas importante para el cliente y cuál es la mas popular para los usuarios. ¿Qué es lo mas buscado por sus clientes? ¿Cuáles son los problemas actuales que han tenido? Así podemos empezar a establecer la jerarquía de la información que incluiremos en el sitio Web.

Con esta información podemos empezar a crear un sitio que refleje no solo las necesidades del cliente sino del usuario también.

2. Que no se distinga lo mas importante

No todo debe ir en la primera página aunque el cliente diga que todo es importante!!!

Hay muchos sitios en los que no se ve claramente la jerarquía de información. Es importante resaltar lo importante y hacer mas sutil la información mas general. Lo que mencioné en el primer punto es válido aquí también.

En el caso de Restaurant Guide Atlanta todo el texto tiene el mismo tamaño. Algunos links son blancos y otros no, quizás intentando resaltarlos. Todo se ve sobrecargado y es incómodo leer la información.  También repiten la misma información innecesariamente. ¿Por qué no ponen el “logo” arriba? ¿Por qué centrar el texto? ¿Por qué ese color chocolate que recuerda cosas no muy apetitosas?

Quiero que sepan que la sobredosis por información existe y es una muerte muy dolorosa. Por favor, no expongan a más gente a este tipo de atrocidades. Este sitio, heavenworks.com, ni siquiera entra completamente en una resolución de 1680 x 1050.

3. El estilo no es apropiado al cliente o a su audiencia, y no se ve profesional

Esto es un problema muy común. Aquí no se juzga si el diseño se ve cool o si es moderno, etc. Lo que se juzga aquí es si el diseño refleja la imagen que debe llevar el cliente. El diseño de un sitio web para un banco no es el mismo que el de un grupo de rock.

En este ejemplo, Mama’s Cheesies, es un sitio que vende ropa hecha a mano. Aunque sea un negocio casero, no hay excusas para diseñar algo tan desastroso. Para empezar, la imagen del fondo es demasiado chillona y le resta importancia a la información que tiene encima. No entiendo por qué el logo tiene un fondo de color verde opaco, quizás porque al colocar el logo por si solo sobre el fondo, el logo se perdía. El fondo también hace difícil leer el párrafo de Welcome. La foto con los productos está distorsionada, no esta centrada como el resto de la información y esto rompe todo el balance de la página.

El menú esta en el borde izquierdo pero no se nota mucho, primero porque no esta en el lugar donde nos esperamos que este y segundo porque el color del menú con los colores del fondo hacen que se pierda. Creo que por eso usan tanto las letras en negrita para ver si así se notan mas. La mayoría de estos problemas se hubieran solucionado con un fondo menos cargado.

Un ejemplo que sí funciona es Nicholas Deakins:

Aunque este sitio tiene un fondo llamativo, si funciona porque encaja bien con el branding de la compañía y el texto no está directamente encima del fondo. El contenido del sitio tiene su propio fondo blanco para que sea fácil de leer. Son capaces de mantener su personalidad joven y divertida sin sacrificar la información.

4. Muchos colores

Este es otro gran problema. Parece que no saben qué colores escoger y deciden ponerlos todos! Y el resultado es horrible =(

El uso de color en un sitio Web es muy importante porque le da al usuario pistas visuales acerca de la información. Puede servir para resaltar algo o no, para señalar si es un link o no, etc. Por ejemplo, si hacemos que los links sean siempre de un mismo color, es mas fácil para el usuario identificar fácilmente los links sin tener que poner la línea abajo de las palabras. Esto es un reto, porque el color de los  links debe poder leerse claramente sobre los colores de fondo que se usen en el sitio y eso hace que pensemos un poco mas en la paleta de colores que vamos a usar, en vez de simplemente añadir otro color lo que resulta usualmente en un circo de colores en el sitio.

Los siguientes sitios son muy buenos para probar colores y sus combinaciones:

ColorToy 2.0 – The Flash Color Scheme Generator
Este sitio es genial. Puedes agregarle un valor HEX o RGB y el te da 8 colores complementarios al que agregaste. Esto es muy valioso porque puedes buscar colores complementarios al logo de tu cliente, etc.

Color Scheme designer 3
Este es parecido al anterior pero tiene mas opciones. Puedes agregar el Hue, RGB o HEX y puedes ver diferentes resultados de paletas monocromáticas, complementarias, tricromáticas, tetracromáticas, etc. Y tiene una opción para ver un preview en un sitio con colores de tono oscuro y otra con colores claros.

5. Demasiadas animaciones innecesarias

Por alguna razón aún hay personas que piensan que tener un montón de cosas animadas hacen que la página se vea moderna, desafortunadamente no es así. Aparte  de hacer que la página se vea como si la hubieran hecho en los 80, las animaciones tienden a cansar la vista y hacen muy difícil que uno se pueda concentrar en la información que busca o que intenta leer.

El uso de animaciones es un territorio peligroso porque hay una línea muy fina que divide a una animación buena de una mala. Así que hay que tener mucho cuidado.

El sitio Web de la Autoridad de Tránsito y Transporte Terrestre es un ejemplo de una página con animaciones gallas. ¿Es necesario animar esos títulos? ¿Hace que la página se vea mas moderna? ¿Ayuda al usuario en algo? ¿Hace que la página se vea mas atractiva?

Si la respuesta a la mayoría de estas preguntas es no, no lo usen.

Para rematar ni siquiera tienen un dominio, lo que usan es el IP.

6. Mal uso de los Elementos

Regresamos al sitio de la autoridad del tránsito.
Miren los íconos en este menú. Uno es en 3-D, otro en 2-D y monocromático, otro es a colores. Aparte de eso se ven pixelados. La tipografía del segundo menú es mucho mas grande que la del menú principal. Los títulos y subtítulos no mantienen un estilo específico.
Todas estas cosas hacen que no se sienta una continuidad en el diseño y por eso se ve desordenado.

Otro punto muy importante es las tipografías anticuadas. Hay tipografías clásicas como Arial, Helvetica, Times, etc, que no podemos ignorar en web. Pero podemos usar tipografías mas decorativas para resaltar algunas partes de la página. Para esto debemos tener una idea de qué tipografías son las adecuadas para el cliente.

Y tampoco es bueno distorsionar fotos ( o logos, o lo que sea).

No hay excusas para usar íconos sacados de por ahí. Solo necesitan hacer una búsqueda en Google, preferiblemente en inglés. Por ejemplo: free web 2.0 icons .

A continuación un listado de íconos atractivos y gratis:

• www.vector.tutsplus.com
  60 íconos gratis en vector

• www.thedesigncubicle.com
  600 íconos de Twitter y otros medios sociales de internet

• www.smashingmagazine.com
  Collección de íconos, botones y plantillas

7. Que no se entienda de que va el sitio

No estoy segura qué hace este tipo. ¿Es profesor de esa universidad? ¿Qué tiene que ver el panda haciendo volteretas? ¿Por qué no cropearon el logo de arriba? Aquí vemos otro ejemplo de animaciones innecesarias y colores que no combinan y son difíciles de leer sobre el color de fondo. Pero eso no es todo, la foto mide 1440 x 2160 y la achatarona ese tamañito.

El diseño debe ayudar a identificar fácilmente el tema del sitio. El propósito es no darle mas trabajo al usuario. Mientras mas trabas les pongamos menos oportunidad tenemos de que pasen tiempo en nuestros sitios.

8. Mal diseño de menú

Regresamos al mismo tipo. Si hacemos click en cualquiera de las opciones en el menú nos vamos a una página completamente distinta y la única manera de regresar a la página anterior es usando el botón de regreso en el browser.

El menú siempre debe estar visible y en un lugar que sea familiar para el usuario. Por ejemplo, si el menú principal esta en la parte de arriba, debe mantenerse en ese lugar en las otras páginas porque de esa manera el usuario sabe donde encontrar el menú y también porque es más fácil para nosotros a la hora de hacerle cambios.

La única excepción a esta regla es en el Home (página principal), que puede ser un poco diferente a las demás páginas ya que es la carta de presentación. Y claro que si es un website para una promoción de un producto con una audiencia específica se puede hacer algo mas loco, pero hablando en términos generales yo diría que es mejor mantener las cosas organizadas.

9. Validar el website

¿Alguna vez se han encontrado con un sitio que se ve bien en Firefox pero no en Internet Explorer o viceversa? Es porque necesitan validarlo. A veces se necesita hacer un style sheet especial para Explorer (porque Explorer es “especial”).
¿Qué es lo que se valida? HTML, PHP, CSS y los DOCTYPEs.

Este es el W3C Markup Validation Service. Es gratis. Solo escribes el url que quieres validar y te revisa el código.

10. No estar al tanto de las tendencias de diseño

Todos los sitos mencionados aquí pecan de este punto. Y he aquí algunos lugares que nos sirven de referencia para estar al tanto de las nuevas tendencias del diseño de sitios web:

• www.designmeltdown.com
• www.stylecrunch.com
• www.mixcss.com
• www.bittbox.com
• www.designshard.com
• www.net.tutsplus.com
• www.psd.tutsplus.com
• www.tutorial9.net
• www.webdesignerwall.com

• www.webdesignerdepot.com
• http://www.smashingmagazine.com

Con este artículo he intentado abarcar los problemas mas comunes que veo en los sitios web. Sé que hay muchos mas, pero creo que si logramos combatir estos 10, vamos por buen camino.

Escrito por: Marisol López.
Síguela en Twitter: @lofish72

Se debe dejar claro que el rediseño web, conlleva un proceso que muchas veces esta divido en muchas fases, cada una de las cuales tiene tareas, metas y entregables.  Estas fases o etapas puedes ser diferentes para cada persona que se dedique a realizar proyectos web.  Para mí serían:

1. Definición del Proyecto
2. Estructuración y Diseño
3. Implementación y Pruebas
4. Publicación y Mantenimiento

¡Hola a todos!

Queremos invitarlos a nuestra próxima reunión de UX Panamá:

Jueves 27 de agosto, 6:30PM
En el Auditorio de Copa Airlines, que está ubicado en el complejo
Business Park de Costa del Este, Torre Norte, primer piso, 304-2715.

Tenemos una exposición programada:

Construyendo la Mejor Tienda en Línea
Expositor: Frank Kardonski
Subdirector de Comercio Electrónico de Copa Airlines

http://www.copaair.com/
https://www.facebook.com/fgkardonski?ref=ts

Como los eventos anteriores, es un evento gratuito y el coffee break será patrocinado por Copa Airlines

Nos vemos el jueves 27.   No faltes!!!

Tomado de Usability Toolkit.

Escuchar

Ud. requiere información. Tómese tiempo para escuchar, no hablar.

No guíe al usuario en sus respuestas

• No le diga al usuario la respuesta que ud. quiere escuchar. Por ejemplo, no ser tan obvio con preguntas como: Eso fue fácil, ah?
• Existen formas de guiar al usuario de manera sutil. Por ejemplo, a continuación preguntas que permiten al usuario conocer el tipo de respuestas que ud. quiere escuchar. De hecho, dependiendo del tono de voz, ud. puede hacer que los usuarios respondan “sí” o “no”
  • Fue fácil encontrar lo que ud. estaba buscando?
  • Fue eso un problema?

Hacer preguntar neutrales

En vez de guiar al usuario, realice preguntas que sean neutrales. Por ejemplo,

• Cómo le pareció a ud. realizar esa actividad?
• Qué piensa ud. sobre esta pantalla?
• Me pude percatar que cuando ud. estaba haciendo [..], [..] pasó. Qué pensó en ese momento? Cómo se sintió al respecto?

No culpe al usuario

Recuerde que ud. no quiere que sus usuarios se sientan mal porque hicieron algo equivocadamente, si no saber la razón por la cual lo hicieron o no. Sea muy cuidadoso con las preguntas que los usuarios pueden interpretar como que debían haber hecho algo diferente a lo que hicieron. No haga las siguientes preguntas:

• Porqué no leyó el manual primero?
• Ahora, porqué hizo eso?

Dele algunas pistas al usuario

Una manera de hacer que los usuarios hablen mas sobre su experiencia es comentarles sobre lo que ud. observó, para así abrir una oportunidad para que ellos puedan expresarse.

Otra manera de hacer esto, es comentándoles lo siguiente:

“Noté que ud. empezó haciendo [..] y luego [..], y no utilizó el manual. ¿Es esa la manera en la que ud. lo hace normalmente? ¿Qué papel juega el manual en las actividades que ud. realiza, si lo usa?”

Acerca del Autor

Karla Arosemena es Ingeniera de Sistemas con especialización en Tecnologías de Información enfocadas a desarrollo web basado en usuarios e ingeniería de usabilidad. Actualmente labora en la Universidad Tecnológica de Panamá. Su blog es kca7321.blogspot.com.