El nuevo iPad Mini es un nuevo reto al diseño web

Apple presentó hoy el iPad mini, que tiene el mismo número de pixeles que el iPad más grande. Pensarías que esto es bueno porque significa que las aplicaciones y sitios web no cambian de tamaño. Pero eso solo es en número de pixeles, en centímetros son bastante más pequeños que en un iPad grande. Esto quiere decir que los dedos tienen más oportunidad de tocar otra cosa, ciertos elementos serán más difíciles de ver y el texto aparecerá más pequeño.

Vamos a tener que echarnos otro clavado a los media queries para ver si podemos solucionar esto.

Como hacer una buena versión móvil de tu sitio

Todos nosotros conocemos la importancia de tener un sitio móvil estos días, es decir, un sitio que sea accesible desde un listófono, o incluso desde un celular básico que ya casi todos vienen con algún tipo de navegador. Y por supuesto los iPhones, iPads, iPods, iPuds y lo que venga después.

Lo bueno es que gracias a desarrollos como html5, css3, mejores pantallas en los móviles y motores como webkit, construir un sitio que se adapte a las dimensiones de un móvil es más fácil que nunca.

Lo malo es que eso no basta para crear un buen sitio móvil. Para que sea bueno tendrá que ir más allá de adaptar la resolución a la pantalla y cargar una nueva hoja de estilos para que se vea bien en el espacio reducido. Tenemos que pensar sobre que es lo más probable que el usuario quiera hacer y dejárselo lo más fácil y rápido posible.

Mirando a un vaso desechable en vez del sitio web

“¡Al diablo! Está más fácil encontrar la información en el vaso” Foto de Ed Yourdon

Por ejemplo, en un sitio para restaurantes en la versión de escritorio tal vez quieras poner fotos para mostrar el ambiente, los platillos, el estilo del lugar, etc. lo cual está muy bien cuando el usuario está pensando en a donde llevar a la novia a cenar al día siguiente o planeando una comida de negocios tranquilamente en su casa u oficina.

En la calle, con el móvil en la mano y un portafolios en la otra o esperando a que se ponga la luz verde, el usuario probablemente estará en una situación muy distinta: quiere saber que hay de comer, que tan lejos está del restaurante y si es necesario llamar para hacer una reservación. Todo eso con una sola mano, en una pantallita y con prisa. Así que si nos ponemos a enseñarle fotos y escondemos el número de teléfono en el pie de la página lo más probable es que sí se acuerde de nosotros pero no de una buena manera.

Esto no quiere decir que no puedas tener estas cosas en tu sitio móvil, pero será mejor dejarlas en un apartado secundario, a uno o dos clics de distancia, mientras que la primera pantalla se la dejamos a la información que el usuario realmente está buscando y las acciones que queremos que tome (llamar y hacer una reservación, por ejemplo).

El truco está en ponerse en los zapatos del usuario y la mejor manera de hacerlo es agarrar algunos cuantos (de preferencia desconocidos que cumplan el perfil de nuestro mercado meta) y pedirles que nos ayuden a probar un sitio. Y si puede ser en su hábitat natural (la calle, el taxi, el café), mejor. Y si tienen todos dispositivos diferentes, mejor.

Ya que los elegimos les pedimos que lleven a cabo una serie de acciones: hacer una reservación, encontrar el menú del día, hacer una orden, pedir más información, es decir, las acciones que a nosotros nos interesa más que nuestros usuarios lleven a cabo.

Mientras las hacen les pediremos que nos digan lo que piensan, que están haciendo y por que lo están haciendo sin darles nosotros ninguna ayuda.

Este es un tipo muy básico de prueba pero nos ayudará muchísimo a darnos cuenta como se comporta nuestro sitio web móvil y donde necesitamos corregir o hacer más fácil su uso. Literalmente hacer estas pruebas representan un mundo de diferencia.

¿Tienes alguna otra sugerencia o pregunta sobre sitios web móviles? ¡Déja un comentario!

La vida secreta de las ligas

Por estos días se llevó a cabo la conferencia An Event Apart que reúne a muchos de los mejores desarrolladores y diseñadores del mundo web para compartir sus experiencias, mejores prácticas y opiniones sobre hacia donde va todo esto.

Jeremy Keith ha estado blogueando en vivo varias de las pláticas, y esta que dio Jared Spool me ha parecido de las mejores opiniones que se han expresado en torno al web. Tanto, que voy a hacer algo que casi nunca hago: traducir. Sé que es la percepción de Jeremy de lo que se habló, pero me parece un documento imperdible para cualquiera que se dedique o se quiera dedicar seriamente a la web.

Puedes ver el original en el sitio de Jeremy, así como sus transcripciones de otras charlas.

La charla se llama “La vida secreta de las ligas”. Comienza hablando de una de las científicas más prometedoras de los Estados Unidos: Lisa Simpson. Un día se le cayó un diente, lo puso en un tazón y después, cuando lo examinó bajo el microscopio, descubrió a una civilización dedicada a lo suyo, todos los ciudadanos con sus vidas íntimas.

El web es así.

Justo antes de que el gobierno estuviera por cerrar por falta de fondos, Jared estaba viendo las noticias y la manera en que actualizaban sus ligas. Jared sugiere que la organización de CNN debería ser así:

  1. La noticia más importante.
  2. La segunda noticia más importante.
  3. La tercera noticia más importante.
  4. Una noticia irrelevante pero entretenida.
  5. La nota sobre Charlie Sheen.

    Pero las cosas no funcionan así. Es el contenido de las ligas lo que determina su importancia. La vida secreta de las ligas consiste en llevar los visitantes hacia su contenido.

    Comparen el viejo diseño de CNN con el nuevo. El diseño visual es diferente, pero la esencia subyacente es la misma. Las ligas funcionan de la misma manera.

    Todos los sitios de noticias reportaban sobre el inminente cierre del gobierno, con ligas que decían cosas diferentes pero hacían la misma cosa.

    Jared ha estado trabajando en la web desde 1995. Todo este tiempo se la ha pasado observando la manera en que los usuarios usan los sitios. El patrón que ha visto es que el contenido se comunica con el usuario a través de las ligas. Todo gira alrededor de las ligas. Son la esencia de la comunicación.

    Esto nos lleva hasta una teoría que se manejaba en el Xerox PARC: si hubiera que modelar el comportamiento de los usuarios cuando buscan información sería muy similar al de un zorro siguiendo un rastro. Los usuarion son informívaros.

    Esto lo podemos ver en sitios de educación. El contenido puede ser diferente pero las ligas son las mismas.

    Todos hemos sufrido la batalla del dueño del sitio, que quiere darle prioridad al contenido en que los usuarios no tienen interés.

    El sitio de Walgreens es un ejemplo interesante. Una quinta parte de los visitantes siguen la liga de Fotos, 16% se van a la búsqueda. La tercera liga más importante es la de reordenar prescripciones. La cuarta es la liga de la farmacia. La quinta es la de buscar tiendas físicas. Estas cinco ligas suman el 59% del tráfico total, pero sólo ocupan 3.8% de la página.

    Esto viola la Ley de Fitts:

    La velocidad a la que un usuario puede encontrar su objetivo es proporcional al tamaño del blanco e indirectamente proporcional a la distancia de ese blanco

    Básicamente, mientras más grande y más cerca esté, más fácil de atinarle. El sitio de Walgreens viola esto. Claro, se vería muy feo si la liga para Fotos ocupara la quinta parte de la página, pero el punto es este: hay un montón de cosas que el negocio le enjareta al usuario.

    Otro ejemplo de la Ley de Fitts son esos enormes anuncios que aparecen de repente con unos botones de “Cerrar” muy pequeños.

    Debes llevar a tus usuarios hacia su objetivo deseado. Dales ligas que comuniquen el rastro de lo que buscan de manera comprensible. Haz que la distribución de tu sitio refleje los deseos del usuario.

    Volvamos a un sitio educacional: La Estatal de Ohio. La gente llega a un sitio por una variedad de razones. Mucha gente no va simplemente a ver como luce (excepto nosotros). La gente va a al sitio de la Estatal de Ohio para informarse sobre cursos y horarios. El texto de estas ligas se llaman palabras detonantes: inician una acción del usuario. Cuando se hace correctamente, las palabras detonantes llevan al usuario a su meta deseada.

    Es difícil saber cuando has dejado un buen rastro de información. Pero es fácil saber cuando ese rastro es malo. El comportamiento de los usuarios te lo hará saber: usan el botón para regresar, saltan de página en página y usan la búsqueda.

    Jared ha visto los mismos patrones en cientos de sitios que ha visto como usa la gente. Tomaban todas las series de clics que tuvieron éxito y todas las que fallaron. Durante 15 años ha habido una tasa constante de 58% de fallas. Es muy impactante.

    Uno de los patrones que emergen de las series de clics que fallan es la presencia del botón para regresar. Si un usuario lo aprieta la tasa de fallas para esa serie de clics aumenta al 80%. Si el usuario lo usa dos veces, sube al 98%.

    El botón para regresar es el botón de la muerte.

    El usuario usa el botón para regresar cuando pierden el rastro, igual que un zorro volviendo sobre sus pasos. Pero los zorros tienen éxito porque los conejos son estúpidos y regresan a donde viven y comen. Así que el zorro puede regresar a ese lugar y esperarlo. Los usuarios regresan a la página anterior con la esperanza que haya cambiado de algún modo.

    Pon atención al botón de regresar. El usuario te está diciendo que ha perdido el rastro.

    Otro comportamiento es saltar, de atrás a adelante en una página de “galería” con una lista de ligas a esas páginas. Los saltos tienen una tasa de falla de 89%. Existe el mito que en sitios de catálogos que a los usuarios les gusta saltar para comparar productos, pero no es verdad. Mientras más saltos es menos probable que el usuario encuentre lo que busca y haga la compra.

    Los usuarios rastrean una página buscando las palabras detonantes. Si la encuentran le hacen clic pero si no comenzarán a buscar. Así funciona en 99% de los sitios, Amazon es una excepción. Y eso porque Amazon ha hecho un gran trabajo enseñando a los usuarios que en la página inicial no hay absolutamente nada útil.

    Algunos sitios tratan de imitar a Google y ponen nada más una caja de búsqueda. No hagas eso.

    Un nombre más adecuado para la caja de búsqueda sería ITPL: Inventa Tu Propia Liga. ¿Qué es lo que la gente escribe en esta caja? ¡Palabras detonantes!

    Consejo: Tus bitácoras de búsqueda están completamente llenos de palabras detonantes. ¿Los has revisado últimamente? Los usuarios te están diciendo cuales deberían ser esas palabras detonantes. Si sigues de donde vienen las búsquedas incluso sabrás en que páginas debes poner esas palabras detonantes.

    Lo más importante es entender que la gente no quiere hacer una búsqueda. Hay un mito que dice que a algunas personas les gusta buscar. Es el diseño del sitio lo que los obliga a buscar. La tasa de falla para una búsqueda es 70%.

    Jared imagina un experimento que se llama “experimento de la leche en el Super 7”. Imaginemos que a alguien se le acaba la leche. Los llevamos al Super 7 y les damos dinero para comprar leche. En el 100% de los casos debería haber un compra de leche.

    Eso es lo que Jared hacer con los sitios. Le da a la gente dinero para comprar un producto, los lleva al sitio y les pide que compren un producto. Idealmente la tasa de compra debe ser de 100%. Pero aún el sitio con mejor desempeño -The Gap- obtuvo apenas 66%. El peor nada más 6%.

    La variable más importante que contribuyó a este patrón fue el número de páginas visitadas por compra. En Gap.com se realizaron compras a razón de 11.9 páginas. Los peores sitios tuvieron 51 páginas por compra. ¿Y sabes qué patrones vieron en los peores? Uso del botón para regresar, saltos, y búsqueda.

    Dale a los usuarios lo que quieren. Páginas que nosotros diríamos que están abarrotadas, no lo están para un el usuario si ese es el contenido que quieren. El revoltijo es subjetivo dependiendo de cuanto te interesa el contenido.

    Es difícil mostrar buenos ejemplos del rastro de información porque no estmos buscando algo específico. El buen diseño es invisible. Uno no nota el aire acondicionado cuando está bien ajustado, sólo cuando está muy frío o muy caliente. No notamos el buen diseño.

    Las ligas viven en secreto para verse bien y seguirse viendo como ligas. Hace tiempo existía la creencia que las ligas debían ser azules y subrayadas. Nuestra elección no pudo haber sido peor. ¿Quién lo decidió? No fueron diseñadores. Fueron astrofísicos en el CERN. Sucede que el azul es el color más difícil de percibir. Los hombres comienzan a perder la habilidad para verlo alrededor de los 40 años. Las mujeres a los 55 porque son mejores. Y el subrayado altera la geometría de la palabra, haciendo la lectura más lenta.

    Afortunadamente hemos avanzado y ahora podemos tener “ligas de color”. Pero a veces vamos demasiado lejos, como el LA Times, en el que es muy difícil sabes que es una liga y que no. Los usuarios tienen que mover el ratón de un lado para otro para ver si el navegador les enseña el dedo.

    Usa un vocabulario consistente. Muestra claramente que ligas llevan a una página diferente y cuales producen una acción en la misma página.

    Confundimos a los usuarios con cosas que parecen ligas pero no lo son.

    Las ligas viven secretamente para hacer lo que el usuario espera.

    Crea tus ligas sabiamente. No pongas ligas a artículos relacionados en la mitad del artículo que alguien está leyendo.

    No uses la navegación de carne misteriosa. Los usuarios no mueven el ratón sino hasta que saben que quieren hacer clic en algo, así que no escondas las ligas detrás de un mouseover. Para cuando esas ligas se revelen será demasiado tarde: el usuario ya habrá decidido en lo que va a hacer clic. Los menús volantes son lo peor.

    Algunos de los ejemplos de ligas favoritas de Jeff son “Cosas que nuestros abogados nos obligaron a poner”, “Menos opciones” y “Todo lo demás”.

    En resumen, esto es lo que nuestras ligas quieren hacer en secreto:

    • Llevar al usuario a su objetivo deseado
    • Dejar el rastro correcto
    • Verse bien sin dejar de verse como liga
    • Hacer lo que el usuario espera

Thanks Jeremy for providing such a fabulous summary of the talk.

Haz un catálogo de la tipografía en tu computadora

wordmark.it es una página donde puedes ver como se verán las palabras que escribas con las distintas tipografías que tengas instaladas en tu computadora.

Es muy útil para saber que tipografías tienen caracteres acentuados

Puedes cambiar el contraste del fonto, cambiar el tamaño de las letras y hacer una selección para compararlas lado a lado.

Es una aplicación bastante útil si haces cualquier cosa que tenga que ver con tipografía.

En el futuro los diseñadores web podrían desaparecer

Por lo menos eso dice este artículo de opinión en la revista Smashing y que ha causado reacciones entre casi todos los diseñadores de renombre. En lo personal dudo mucho que el papel del diseñador deje de tener relevancia al corto o mediano plazo.

El argumento central de la columna editorial se centra en que lo más importante de la web son los datos y el contenido; conforme estos datos se liberan para poder presentarse en cualquier dispositivo (listófono, tableta, televisión, reloj despertador, cafetera, yoyo, etc.) el diseño en cada sitio dejará de ser relevante ya que la interfaz principal será la del dispositivo donde estés viendo la información.

El problema con el artículo es que olvida dos cosas: 1) La web como la conocemos hoy, con páginas y sitios, no va a desaparecer; y 2) el fin de esa información y datos es impulsar a quien la consume a que haga algo.

El primer punto es más fácil de abordar. Estos dispositivos nuevos no vienen a reemplazar a la web, sino a hacerla más accesible, más disponible y más flexible. Si acaso el papel del diseñador (y el sufrido desarrollador esclavizado tras bambalinas sin esperar reconocimiento) será más importante, ya que necesitará la experiencia y conocimiento para hacer que la información pueda adaptarse a los diferentes dispositivos y las circunstancias en que se estén usando.

El segundo tiene que ver con lo que debería ser la finalidad de todo sitio web. La información que ponemos (por lo menos si buscamos trascender de lo meramente personal) generalmente busca un objetivo: aumentar ventas, conseguir votos, concientizar, crear presión social, etc. Este objetivo debe quedar claro en los consumidores y además les debemos dar un camino que ellos puedan seguir fácilmente para aumentar las probabilidades de que nuestra audiencia haga lo que queremos.

Más o menos lo que Ryan Carson quiso dar a entender con su tweet y el post de “Ser Profesional de UX no es un trabajo de verdad”.

Los diseñadores y desarrolladores irán cambiando la manera en que resuelven los problemas de información de un paradigma centrado en el navegador o el dispositivo a un paradigma centrado en la experiencia de usuario y lo que queremos que haga.

Es algo que ya estamos viendo pero que va a cobrar cada vez más relevancia.

Webfonts

Ayer fue un día muy emocionante para todo lo que tiene que ver con diseño web.

En su conferencia para desarrolladores Google presentó un sistema de incrustación de tipografía en una página. En realidad se trata de @font-face solo que servido a traves de los servidores de google.

Google lo ha hecho muy fácil para los diseñadores, apenas hay que añadir una línea para ligar una hoja de estilos desde sus servidores para poder usar lo básico:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

Google se encarga de ver que navegador está pidiendo el estilo y manda el archivo apropiado para cada uno. No tienes que preocuparte por nada más para poder usar tipografía en cualquier navegador moderno, incluso IE6.

Si quieres más control hay un montón de funcionalidad que puedes usar con javascript a través de WebFont Loader, que es una biblioteca de funciones con el que puedes cargar la tipografía y controlar como, donde y cuando se muestran.

No es la primera vez que se hace esto y apenas es una versión beta. Se puede decir que Font Squirrel y Typekit hacen lo mismo y mejor. Font Squirrel inlcuso tiene un generador que permite usar una gran variedad de tipografías. De hecho, en esta comparación puedes ver como en general los otros dos servicios se ven mejor.

Una de las desventajas del sistema de Google es que no es posible visualizarlas en iPad o iPhone por el momento. Pero conociendo a Google es seguro que este servicio será mejorado continuamente, agregarán tipografía y funciones. En cosa de unos meses puede haber cambiado enormemente.

Las tipografías disponibles son pocas, limitadas necesariamente por tener que ser de uso libre, pero han hecho una buena selección. No sería extraño que Google estuviera en pláticas con algunas fundidoras tipográficas o diseñadores para licenciar o crear nuevos tipos.

Seguro habrá una gran adopción en la inmensa cantidad de diseñadores y desarrolladores que no han querido usar un método como Cufon o sIFR, aunque el segundo por lo menos tiene las ventajas de poder usar cualquier tipografía sin problemas de licencias.

La iPad y el diseño web

Steve Jobs llamó a la nueva iPad “el aparato definitivo para navegar en la web”, algo así. Claro, está por verse que pasará pero lo más seguro es que la iPad se venda muy bien sobre todo en un segmento del mercado más o menos afluente y que de pronto se encontrará con que tiene en sus manos una nueva manera de acceder a la información de la red: desde cursos y videos de gatitos en Youtube, blogs, foros y aplicaciones en línea.

Todo esto tendrá un impacto en los diseñadores y desarrolladores de sitios. Aunque el iPad es un aparato muy flexible con una resolución generosa para un dispositivo portátil, no deja de ser más pequeña que un monitor normal en estos días. Además que se puede voltear para cambiar la orientación.

Por lo que hemos visto en el iPhone esto no será gran limitante pero de todos modos querrás hacer tu sitio adaptable a las diferentes resoluciones del iPad. Por ejemplo, aunque es posible que el iPad haga un zoom automático para meter la página en su pantalla conservando todas las proporciones, tal vez no quieras conservar las proporciones y sea más importante mantener un área con cierto ancho.

O tal vez quieras hacer ciertos elementos y contenido más prominentes en la pantalla del iPad de lo que son en una pantalla de escritorio. Esto implica diseños líquidos y flexibles, el diseñador tendrá que pensar en términos de distintas resoluciones y orientaciones. Es algo que algunos hacían hace un par de años pero con las nuevas funcionalidades de zoom se dejó de hacer. Ahora va a rescatarse.

Afortunadamente el iPad incluye un gran navegador con soporte para HTML5, CSS3 y JavaScript por lo que hacer estas cosas no representará gran dificultad técnica. De hecho, si eres de los que sigue las mejores prácticas de desarrollo web probablemente no tengas que hacer absolutamente nada.

Lo más complicado será cambiar la mentalidad del diseñador, sobre todo aquellos que no entienden bien el medio en que se están desenvolviendo. En más apuros estarán los diseñadores que no saben hacer sitios flexibles o que no se molestan en aprender html (esa cosa que sale cuando le aprietas en vista de código en el Dreamweaver). Si sus clientes se comienzan a dar cuenta que su sitio no se ve bien en el iPad (a ver si friegan igual que como cuando no se ve en IE6) muchos van a tener que ponerse al día de manera acelerada.

Más color de hormiga la tendrán los flasheros. Por flashero no me refiero a todos los desarrolladores de flash, sino nada más a los que todo lo hacen con flash sin consideración por la accesibilidad y usabilidad del sitio.

El iPad, hasta donde sabemos ahora, no soportará Flash. Así que si has hecho un sitio que sea puro Flash o que tenga elementos importantes, como la navegación, hecha en Flash, no se verá nada o será inutilizable para quienes tengan un iPad.

A lo mejor no te importa mucho, pero tus clientes van a estar perdiendo clientes y visitantes, así que no les va a agradar (ok, a los que se den cuenta), y finalmente te va a repercutir.

En las filas de Adobe no están nada contentos y culpan a Apple de la falta de soporte para Flash. No dudo que tengan parte de razón, sobre todo cuando señalan que el iPad no puede ser el dispositivo definitivo para navegar por la red si no soporta Flash.

Para bien o para mal Flash es parte importante de la red y pasará mucho tiempo antes que HTML5 alcance una presencia suficiente para desbancarlo (y que se desarrolle un IDE con el que los diseñadores puedan trabajar de un modo parecido a que lo hacen en Flash).

Adobe dice que no hay por que temer, la versión CS5 te permitirá crear una aplicación lista para iPhone simplemente haciendo click en “Save As…”, pero una aplicación no es un sitio web y habría que ver que tan bien se implementa esta característica.

Por lo pronto los fans de Flash están haciendo trinchera, pero si el iPad es tan exitoso como el iPod a mí me parece que no les quedará otra que admitir derrota y aprender estándares si no quieren ser arrollados por la Appleanadora.

El diseñador británico Andy Clarke está de acuerdo conmigo, por lo menos en la parte sobre el diseño líquido.

Tendencías en el diseño de menús de navegación. Vía @boaglinks

The navigation menu is perhaps a website’s single most important component. Navigation gives you a window onto the website designer’s creative ability to produce a functional yet visually impressive element that’s fundamental to most websites. Because of their value to websites, navigation menus are customarily placed in the most visible location of the page, and thus can make a significant impact on the visitor’s first impression.Showcase Of Modern Navigation Design Trends – Smashing Magazine

Una galería de ejemplos de algunas tendencias en técnicas de navegación en sitios web. Por lo menos sirve de inspiración.

Genera tu tipografía para web con la ardilla tipográfica

Desde hace un rato que se pueden incrustar tipografías en sitios usando @font-face de manera que no es necesario tener que conformarse con las pocas familias que se consideran “seguras” para crear un sitio. Pero sigue habiendo algunas dificultades, por ejemplo, Internet Explorer usa el formato eot mientras otros navegadores usan ttf. Esto quiere decir que necesitas ambos formatos para asegurarse que todos los visitantes puedan ver la tipografía que elegiste y además hace la creación de la hoja de estilos algo más complicado.

La Ardilla Tipográfica viene al rescate con un Generador que te permite subir la tipografía que tengas en tu computadora y te devuelve los archivos que necesitas, incluyendo el css para poder usarlo en el sitio.

El generador de tipografías de la Ardilla Tipográfica.

Recuerda que no todas las licencias de tipografía amaparan el uso para internet, así que asegúrate que lo puedes hacer.

Arrastra y comparte artículos en tu blog

We’ve all seen the brilliant functionality on Mashable where news stories and interesting articles can be shared to social networking sites; the functionality is driven by the images accompanying the articles; you click and hold on an image and can then drag it into a toolbar to share it.Drag to Share – Nettuts+

Si son visitantes del blog Mashable tal vez se hayan dado cuenta de una nueva funcionalidad para compartir un artículo en varias redes sociales simplemente arrastrando una imagen hacia el icono de la red social y soltándolo ahí. Dan Wellman nos enseña como hacer lo mismo en nuestro blog usando jQuery.

Pelearán a dos de tres caídas: Diseñadores Gráficos contra Expertos en Usabilidad

En la historia del universo hay muchas peleas eternas entre enemigos acérrimos: luz vs oscuridad, bien vs el mal, Coca-Cola vs Pepsi, Amiga vs Atari ST, Mac vs PC, etc. Hoy mismo Cybergus me recordó con un twitt de una más: Diseñadores Gráficos vs Expertos en Usabilidad.

Verán ustedes, en el principio de los tiempos, como por 1997 inició una pelea sobre el objetivo de la incipiente World Wide Web. De un lado estaban aquellos que abogaban por una red gráfica de cosas bonitas, brillantes y llamativas, que atrajeran la atención y causaran deleite y placer en los visitantes. Sus herramientas favoritas eran Flash, los tatuajes y pastas baratas para alucinar.

Por el otro lado estaban aquellos que insistían que los sitios deberían ser rápidos, utilizables, navegables y su objetivo debería ser permitir al visitante llegar y ¡zaz, pum, bam! hacer lo que tuvieran que hacer y seguir con sus actividades diarias sin volver a pensar más en el sitio. Sus herramientas favoritas eran cuadernos de notas, una calculadora y un cuarto para entrevistas.

Representando al lado de la lógica y la usabilidad estaba Jakob Nielsen, gurú de la accesibilidad y autor de varios libros populares sobre el tema. Del lado de la web como objeto de arte y pasiones desatadas estaba una agencia llamada Kioken Design que ya se murió aunque sus miembros más vocales andan todavía regados por ahí, en especial Joshua Davis que por alguna razón se convirtió en parte muy visible de la agencia.

Aunque en un principio parecería que ganaron los del lado de la medición y la usabilidad ante todo, en realidad no es así. En aquellos tiempos, por allá del año 2000, no existía lo que hoy conocemos como banda ancha, por lo que los sitios altamente gráficos eran muy difíciles de cargar. Tampoco habían surgido las tecnologías que grupos como el WCAG y el WaSP nos han dado (Bueno, ambos existían, pero no habían cobrado ninguna fuerza todavía). Encima de eso los navegadores estaban enfrascados a una lucha a muerte por establecerse como los únicos medios de acceso a internet.

Desde entonces hasta ahora han surgido cambios muy importantes: Flash ha incorporado muchas mejoras orientadas a la accesibilidad y usabilidad; los navegadores siguen (o tratan de seguir) los estándares acordados por el grupo WHATWG; los lenguajes en el servidor como php y .net han madurado y se han vuelto sumamente sofisticados; tecnologías como RSS, JSON, Ajax y el surgimiento de lo que se ha dado en llamar Web 2.0 o Web Social ha hecho el intercambio de información más importante que nunca; y el ancho de banda del navegador promedio se ha multiplicado muchísimas veces al mismo tiempo que la web se ha liberado de la computadora de escritorio. Todavía más importante es el hecho que ahora se comprende mucho mejor al medio y hay mucha gente ahora que no pasó por otros tipos de desarrollo de software o de diseño gráfico sino que se ha formado únicamente en web.

Lo que todo esto quiere decir es que ya no es más necesario una separación entre la forma y la función de un sitio web. Usando tecnologías modernas es perfectamente posible tener un sitio que se vea y se sienta bien que al mismo tiempo pueda usarse fácilmente, responda rápido a las demandas del usuario y pueda ser usado por personas con incapacidades físicas e indexado por Google. Construyendo un sitio correctamente es posible servir la información del mismo a un navegador común y corriente, una interfaz en Flash, un iPhone, una aplicación hecha en Silverlight o a un widget en Facebook.

La capa de presentación ha quedado completamente separada de la del contenido, por lo que se puede pensar en satisfacer la funcionalidad y la forma del sitio sin sacrificios. Ahora hay gente especializada en comprender y fusionar ambos conceptos para construir una experiencia usable y accesible para los visitantes.

De hecho la pelea nunca fue tal. Si en ese entonces se hubieran comprendido mejor las limitaciones de la web como medio tanto diseñadores como desarrolladores hubieran sido capaces de crear sitios más utilizables y estéticos. Esa dicotomía hoy es aún más falsa, sobre todo cuando la funcionalidad de la web se ha ensanchado y explorado más a fondo. Lo más irónico es que sigue la misma pelea de siempre. Todavía hay gente discutiendo si se debe dar prioridad a la usabilidad o al diseño cuando es posible y necesario hacer ambas cosas.

La ardilla tipográfica: tipos para usar en web

Font Squirrel is your best resource for FREE, hand-picked, high-quality, commercial-use fonts. Even if that means we send you elsewhere to get them.Font Squirrel | Download Hundreds of Free @font-face Fonts

Ahora que todos los navegadores actualizados pueden hacer uso de @font-face para mostrar tipografías distintas a las de siempre el problema se ha vuelto encontrar archivos que podamos usar en nuestro sitio sin incurrir en violaciones de licencias. La ardilla tipográfica ha reunido una buena colección de tipografías que permiten su uso en la web y que puedes incluir ya mismo en tu sitio. El paquete de cada tipografía incluye el formato .eot compatible con Internet Explorer, lo cual es una gran ventaja.

Optimiza tu sitio para el iPhone

In this first of two articles on bringing your content to the iPhone, I’ll explain what your options are and give you some guidance for tuning your site and making changes that enhance your users’ experience. In the second part of this series, I’ll examine some of the pitfalls and problems with this new web development environment.A List Apart: Articles: Put Your Content in My Pocket

A estas alturas existen millones de usuarios que acceden a internet por medio del iPhone. Esto significa pantalla pequeña, con alta resolución y uno de los mejores navegadores del mercado. Para que tu sitio sea más útil y agradable de usar para esos usuarios trata de seguir las recomendaciones de este artículo de A Lista Apart.

35 sitios de ayuda para hacer bosquejos de tu sitio

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.35 Excellent Wireframing Resources | Developer’s Toolbox | Smashing Magazine

Tal como dice ahí arribita, el hacer bosquejos de los sitios en los que vamos a trabajar antes de agarrar el photoshop o escribir código es una de las cosas más importantes. Los bosquejos nos permiten prevenir problemas, considerar cosas que no habíamos visto y darnos una mejor definición de lo que nuestro sitio debe incluir y lo que no.

Por cierto, si eres diseñador, recuerda compartir tus bosquejos con tu desarrollador quien también te puede hacer sugerencias y le sirve para empezar a trabajar en cosas que pueden ser más complicadas.

Mitos mitoteros del diseño de interfaces

So, let me entertain you with a list I compiled of my favorite ‘User Experience myths’. Then perhaps you, like many UX folks, will have some myths of your own to shareCarsonified » Top 10 UX Myths

Un excelente artículo que aparece en Think Vitamin sobre las cosas que creemos saber sobre diseño de interfaces intuitivas, amigables y sencillas. Como el de “nada debe estar a más de tres clics de distancia” o “todo debe estar sobre la orilla de pantalla” (¿todavía hay quienes se crean ése?)

Imprescindible para todo diseñador o desarrollador. ¿Hay algún mito que te haya tocado desmitificar?

Diseño para daltónicos: cinco herramientas de accesibilidad

If you are designing, or re-designing your web site, it is time well spent running your website through the color accessibility tools below to ensure that your site can be seen correctly by as many people as possible.Making Your Web Colors Visible For All – Five Color Accessibility Tools

Me gusta este tipo de artículos porque yo mismo soy daltónico. Como tal te puedo decir que me caga sobremanera tener que adivinar los colores en mapas, gráficas e interfaces para saber que demonios me están tratando de decir o donde tengo que picar.

Estas herramientas te ayudarán a crear un sitio que, como dice Jennifer Farley, me va a permitir usar tu sitio sin echar pestes. ¿Qué que te importa? Bueno, alrededor del 8% de la población padece algún tipo de ceguera al color, eso puede representar muchísima gente y mientras más gente pueda usar tu sitio, pues mejor ¿no? (A menos que sea un sitio que hable en contra de los daltónicos, en cuyo caso estas herramientas te ayudarán a asegurarte que no podamos leerlo)

Reblog this post [with Zemanta]

5 Herramientas para mejorar la accesibilidad de tu sitio

Improve Accessibility. Here are some tools you may find useful increase accessibility, a constant battle that UX designers have to face5 Web Accessibility Improvement Tools | UX Booth

Smashing se saca otro 10 con esta lista de 5 herramientas para mejorar la accesibilidad de tu sitio a personas con distintas discapacidades. Desde un simulador de daltonismo hasta un analizador de textos y otro de imágenes.

En lo que se muere: Guía para diseño web en IE6

In this comprehensive article, you’ll learn some of the best methods for supporting IE6, including proper targeting, specific hacks, image support, box models, floats, and everything in between.Definitive Guide to Taming the IE6 Beast

Pues a pesar de los muchos esfuerzos y campañas para matar a IE6 de manera humana en vez de tener que verlo arrastrar sus miserias tratando de interpretar correctamente los estándares de desarrollo web y fallando de manera patética, todavía queda muchísima gente que por una razón u otra, ya sea por su propia voluntad o por imposición, siguen usando Internet Explorer 6. Tal vez estén expiando alguna horrible acción de una vida pasada.

Bueno, en lo que esa gente se avispa y actualiza su navegador es posible que tengamos que crear páginas que se vean bien en IE6 (en este caso es el diseñador expiando los horribles pecados de vidas pasadas). Afortunadamente después de tantos años de estar batallando, la mayoría de las deficiencias de IE6 son conocidas y hay todo un arsenal de técnicas para arreglarlos y conseguir que funcione de manera más o menos decente y que seguro todos hemos usado una, dos o tres de estas en algún momento.

Vía Leeanne Lowe me entero que Jeff Starr ha recopilado estas técnicas y armó una Guía Definitiva para IE6. Es un maravilloso documento de referencia y soporte que creo se va a convertir en esencial para todo desarrollador y diseñador, por lo menos hasta que IE6 deje de patalear.