Ven y acompáñanos este jueves 20 de mayo desde las 6:00p.m. en el Edif. 234, salón 200 del AEP (Acelerador de Empresas) en Ciudad del Saber, tendremos los siguientes temas y expositores:

Panagamers.com
Por: Demóstenes García G.
Demóstenes es un joven de 22 años, Estudiante de Ing. Electrónica y desarrollador web en su empresa como emprendedor: Pixmat Studios. Es además el encargado de desarollo de Panagamers.com: una comunidad de amantes de la tecnología y juegos de vídeo en Panamá.

Imagen + Información = Infografía
Por: Nelson Fernández
Nelson es Venezolano, nacido en Maracaibo, ciudad donde inicio su carrera en los diarios como Diseñador Gráfico, inicialmente trabajó en Critíca, un diario pequeño y luego formó parte del Diario Panorama, el diario más importante de la ciudad y donde laboró durante nueve años ininterrumpidos. Durante su permanencia en Panorama, ganó varios premios tanto nacionales como internacionales. Los ultimos años en el diario ocupó el cargo de Jefe del Departamento de Arte, trabajó en la creación del departamento de arte e infografía, ademas tuvo la oportunidad de trabajar como colaborador en el diario St. Pete Times en Florida. Al regresar a Venezuela y gracias a la recomendacion de Jeff Goertzen, lleguó a Panamá. Labora en EPASA, hace ya siete años y ha logrado varios premios internacionales, entre ellos dos medalla de plata de la SND, un premio de la SIP, Sociedad Interamericana de Prensa. Ha tenido la oportunidad dictar charlas y talleres de Diseño Gráfico e Infografía en varias partes del mundo.

Te esperamos, no faltes!

La segunda reunión del año tendrá la presentación de una gran historia, acompañada de una excelente comida:

“Degusta Panamá” por Cristobal Cortés.

Cristobal es Ingeniero Industrial de la USMA, se ha dedicado durante los últimos 6 años a la asesoría de inversiones en bolsa y por las noches ofrece entrenamientos a las personas que quieran licenciarse de broker. Además de todo esto, es el director de Degusta Panamá, http://www.degustapanama.com la guía de restaurantes #1 del país y tambien con su familia abrió el restaurante Brava Pizza y Espuma.
Te esperamos, no faltes!

Tendremos los siguientes temas y expositores:

“Social Media” por Juan Cruz Soares Gache.
Juan es el director regional de Social Snack, en donde SEO, SEM, Campañas de Marketing Online y proyectos creativos e innovadores.

“Del Amor, Beatles, Apple, Canopy Tower y Otros Demonios” por Carlos R. Anguizola Typaldos
El Lic. Anguizola trabajó junto a Banco General y lideró su Website www.bgeneral.com, por 5 años.  Hoy se dedica a desarrollar distintos negocios, entre ellos a sido representante de la marca Corbis en Panamá, está asociado a la empresa de Digital Signage FuturAd, es editor de la revista Surfos y crea equipos Web para distintos clientes, donde ejerce la posición de Project Manager.

Te esperamos, no faltes!  recuerda que es graaaaatis!

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