Sebastián Thüer

Comunicación, diseño y tecnología

Diseño Web

2010, el año de la web móvil

· ·

Desde 2005 se viene anunciando que «este» es el año de la web móvil. Las limitaciones de hardware, los problemas de software para asegurar una navegación decente, la falta de una masa crítica de usuarios y los costos planes de datos han sido las principales limitantes para su desarrollo. Sin embargo, la tendencia está cambiando.

Tijs Vrolix tiene una presentación muy interesante con datos concretos donde se destaca la fuerza de las redes sociales y el correo electrónico como principales uso de la web móvil. Si bien todavía el 76% de los usuarios de telefonía móvil no navega por la web, lo interesante es que el 60% afirma que la razón es porque su equipo no lo permite.

Otro dato impactante: Entre 2013 (informe de Gartner) y 2015 (informe de Morgan Stangley) habrá más personas navegando desde dispositivos móviles que desde computadoras de escritorio.

Cambios en el corazón de Google: nueva página de resultados de búsqueda

· ·

Finalmente hoy Google anunció el lanzamiento de su nueva página de resultados de búsquedas en lo que supone uno de los cambios más importantes en el diseño en toda su historia. Esta página -que la gente de marketing llama SERP (Search Engine Result Page) es la piedra basal de Google y cada mínimo cambio tiene mucho estudio detrás.

La nueva versión hace tiempo que estaba en prueba y podía accederse a través de un código que da vueltas por varios blogs.  Lo más significativo es que añade contextualización a las búsquedas porque te permite filtrar el contenido según el tipo de contenidos como fotos, videos, noticias, libros, etc.

A nivel de interfaz de usuario se añada una columna a la izquierda con las opciones de búsqueda para filtrar el contenido. El diseño ayuda a concentrarse en los resultados y mantiene bastante separada la publicidad de los resultados de búsqueda, algo que se agradece y deben haber estudiado con sumo cuidado porque es uno de los principios fundamentales en la interfaz de usuario y su filosofía de experiencia de usuario.

También hay cambios en la caja de búsquedas que es más grante y ahora emplea un tipografía de mayor tamaño. Además, han hecho algunos retoques en el logo de Google con una sombra más próxima y los colores de las letras parecen más claros y brillantes.

Danny Sullivan hace un detallado análisis de los cambios en SearchEngineLand y destaca el notorio parecido que tiene con su rival Bing.

Yo todavía no veo la nueva página por defecto de Google pero con el correr de las horas se irán extendiendo los cambios que ya comenzaron en los datacenters de Estados Unidos.

¿Te gustan los nuevos cambios de Google? ¿Hubieras agregado o quitado algo?

Steve Jobs: Una web abierta para dispositivos cerrados

· ·

Steve Jobs publicó una larga carta abierta sobre Flash donde justifica por qué Apple no usa ni usará esta tecnología en sus dispositivos móviles como iPhone, iPad , iPod. Larga, sobria y clara, el texto es una lectura imprescindible para diseñadores web que quieren saber hacia donde irá la tecnología en los próximos años.

Para Jobs Flash fue pensado para la era de la PC y el mouse, no para los nuevos dispositivos móviles, La nueva generación de dispositivos requieren bajo consumo, interfaz táctil y formatos abiertos. La tecnología de Adobe no cumple ninguno de estos requisitos: Flash es un formato propietario, la mayor parte de las aplicaciones necesita ser reescrita para ser multitouch y tiene un alto consumo de batería.

Las críticas de Jobs

Jobs ataca algunos mitos y señala que la fuerte presencia de Flash en la web se debe especialmente al video: el 75% del video colgado en la web se encuentra en formato Flash. Sin embargo, existen formatos más modernos como H.264 que está disponible en los principales proveedores de video online como YouTube, Vimeo, Netflix, Facebook y otros.

Jobs es especialmente duro con Flash en cuanto a seguridad y rendimiento. Afirma que tuvo uno el peor record de seguridad en 2009 y que es la principal causa por las cuales se cuelgan las Mac. E insiste en la demorada salida de Flash en un smartphone anunciada a inicios de 2009 pero de las cuales no hay novedades todavía.

Abiertos, pero no tanto

La alternativa de Apple y otras empresas frente a Flash es apostar por los estándares: HTML5, CSS 3 y JavaScript. Algo que ya está sucediendo con la creciente presencia de frameworks para JavaScript (jQuery, MooTools, Prototype, etc.) en el diseño de sitios e interfaces online.

Sin embargo, para Apple los formatos abiertos son solo buenos en la web. Sus dispositivos seguirán utilizando tecnología propietaria. El Safari utiliza el motor de código abierto WebKit, como lo hacen casi todos los navegadores excepto Internet Explorer, pero sigue siendo una aplicación cerrada. Igual que los 50.000 juegos de su App Store con los que piensa dar batalla a Flash.

HTML5 en 15 minutos

· ·

Marcin Wichary y Ernest Delgado realizaron una excelente presentación sobre las novedades que trae HTML5 para el desarollo de aplicaciones y sitios web. Muy recomendable de visualizar si no estás al tanto o te interesa tener una visión general de los cambios que se vienen en el diseño web.

Si 2005 marcó la irrupción de Ajax como conjunto de tecnologías para el desarrollo a partir de ahora la palabra clave es HTML5 que viene con CSS3 y y una nueva API de JavaScript. A modo de resumen las principales novadedes son:

JavaScript APIs

  • Almacenamiento del lado del cliente.
  • Comunicación a través sockets y scripts corriendo en segundo plano.
  • Mejoras en la interfaz para simular acciones de escritorio (notifiaciones, arrastrar y soltar, etc.).
  • Geolocalización.

HTML 5

  • Mejor semántica con nuevas etiquetas, microdatos y relaciones entre enlaces.
  • Accesibilidad.
  • Mayor funcionalidad y flexibilida en formularios con web forms 2.0.
  • Mejores funciones multimedia con etiquetas para audio y video.
  • Dibujo en 2D (canvas) y 3D (WebGL).

CSS3

  • Tipografía mejorada: fuentes embebidas, nuevos selectores y manejo de columnas.
  • Nuevos efectos visuales: bordes redondeados, sombras, transparencias, degradados y más.
  • Transiciones, transformaciones de objetos y animaciones.

La presentación lleva el título HTML5* Web Development to the next level y como es de esperarse está realizada en HTML5 con lo cual se puede ver cómo funciona mucho de lo que se explica.  Si el tema te interesa no te olvides de visitar el artículo sobre HTML5 para diseñadores web que publiqué anteriormente.

Diseñando para el Ipad

· ·

El iPad ya está en la calle y algunos sitios web han comenzado el proceso de adaptar sus aplicaciones para que se vean bien en el nuevo gadget de Apple. Pero hay algunos que buscaron anticiparse y quisieron tener sus diseños compatibles apenas se lanzó el producto. Todo un desafío para los diseñadores.

Information Arquitecture ha publicado una interesantísima reseña donde cuentan el proceso de diseño para un dispositivo que en ese momento no existía ¿Cómo testear el diseño y saber si verá bien? ¿Tendrá la tipografía el tamaño suficiente legible o se verá demasiado grande?

La respuesta no está en ningún artilugio sofisticado sino en algo mucho más habitual: pruebas impresas. Así es, imprimieron cientos de pantallas para evaluar la resolución y determinar tamaños, contrastes y la disposición de los elementos.

Compararon las resoluciones y tamaños de la tipografía con otros dispositivos como pantallas de monitores LCD y el iPhone. Como la interfaz es táctil los elementos interactivos deben sobresalir claramente el 3D está recomendado para botones.

Pero como ya he comentado anteriormente, si bien la interfaz táctil es mucho más natural y habitual tiene el problema que la entrada y salida de la información se realiza sobre el mismo soporte. Por lo tanto, hay que minimizar la interacción del usuario tanto como sea posible y pedirle su decisión sólo cuando es imprescindible. Nada de clics obvios solo para aceptar una acción que de todas maneras se ejecutará.

Jeffrey Zeldman hace un buen resumen del texto de Information Arquitecture y nos da algunos elementos claves cuando pensamos en diseñar para el iPad:

  • Minimizar la entrada de datos, maximizar la salida.
  • El tamaño mínimo de un elemento a pulsar es el círculo del dedo índice. El espacio vale oro y no hay que gastarlo en opciones secundarias.
  • Es más fácil transformar una aplicación para el iPad en un sitio web que hacerlo al revés.