Categorías
Diseño

¿Qué es diseño?

El origen del texto es una clase que impartí a los alumnos de la Escuela de Alta Gestión de la Universidad Pablo de Olavide en la que hablamos de estrategia. Presentación resumen en SlideShare.

¿Qué tienen en común los productos de Dieter Rams para Braun, los de Jonathan Ive para Apple y una jugada de Zidane? Son creaciones tan inspiradoras que descubres que la mejor definición de diseño es un diseño en sí. Con la misma certeza asumes que la conceptualización que proporciona el lenguaje es necesaria para entender la realidad. Saber qué haces, cómo y por qué es fundamental.

Categorías
Diseño

Propuesta de rediseño para Twitter

He hecho un rediseño para explicar visualmente cómo me gustaría que fuera Twitter en 2011 (incluyendo funcionalidades). Es un ejercicio por diversión. Sé que desde fuera se ve todo más fácil. Ir a capturas directamente.

El iPad ha hecho mucho daño a la experiencia de usuario en la web. #newtwitter, que según dicen fue un concepto muy personal de Evan Williams, y los blogs de Gawker son dos ejemplos palmarios. Varios meses después de su implantación, Twitter sigue permitiendo la opción de usar la clásica interfaz y el tráfico de Gawker ha bajado de forma alarmante.

Admiro el trabajo de Evan Williams, Jack Dorsey y de todo el equipo de @design, pero la experiencia de #newtwitter es como un puñetazo en el estómago.

Categorías
Diseño YouAre

Retomando el blog personal. La excusa: YouAre Theme

Después de 3 años, coindiciendo con el Blog Day retomo el blog personal en nuevo dominio. Si me acabas de conocer… mi perfil profesional y una selección de anotaciones que considero interesantes.

Desde 2003 a 2006, tuve el blog en http://www.ideasapiens.com/blogs/is (no hay nada). El detonante para abandonarlo fue que vendí Ideasapiens a Junglebox (Aprendemas.com), aunque la razón real fue la frustración que me generaban los CMS existentes para publicar. Desde entonces, dejé Barcelona para volver a Sevilla. Se popularizaron las redes sociales, los vídeos on line, el concepto de identidad digital, la web mobile…

Nos embarcamos en YouAre, en EBE

Retomo el blog teniendo la certeza de que escribiré muy de vez en cuando y ciñéndome a reflexiones en torno a la industria web, el emprendizaje y al diseño de interfaces.

He aprovechado para reunir posts de Bitacoras.org, Librodeblogs y Blogs Media publicados entre 2003 y 2008.

YouAre Theme

La excusa para retomar el blog es el lanzamiento de YouAre WordPress Theme. Funciona a partir de WordPress 2.8+. Tiene licencia GPL y una lista de features nada común en themes gratuitos.

YouAre Theme entra dentro de la estrategia de promocionar YouAre a través del desarrollo de aplicaciones y complementos que potencien tu identidad real y profesional. Paralelamente, nos aporta una visibilidad en cuanto a marca y enlaces entrantes muy apreciable.

YouAre Theme

YouAre Theme · LIVE DEMO · Download YouAre Theme

El panel de administración es lo más destacable. Hemos visto centenares de Themes y ninguno nos satisfacía. Nos basamos en algunos themes pero tuvimos que programar casi todo nuevo.
No soy programador. Con Movable Type, años atrás, hacía lo que fuera gracias a la excelente documentación que tienen y a Smarty.

A WordPress aún no le había metido mano en serio, y menos aún con el fin de empaquetar, y he disfrutado tunéandolo, aunque sigo pensando que Movable Type para según qué cosas es más versátil.

PD: Muchos enlaces internos de los posts antiguos apuntan al antiguo blog personal alojado en Ideasapiens. Durante la semana, lo arreglaré.

Categorías
Experiencia de usuario YouAre

YouAre y los pequeños detalles

Una de las ventajas de un producto como YouAre que tiene como inspiración a Twitter, Facebook, Tumblr… es que detectamos necesidades no resueltas que solucionamos en nuestra aplicación mejorando notablemente la experiencia de usuario.

Si además, estos servicios están desarrollados desde una perspectiva anglocéntrica, aunque YouAre esté inglés, nuestro campo de mejora aumenta al optimizar la usabilidad para las peculiaridades de ciertos idiomas.

Una selección de pequeños detalles perceptibles exteriormente:

  • Filtro de actualizaciones por tipo de contactos
  • Si escribes o pegas una URL no descuenta caracteres
  • Conocimiento de la URL que ha sido acortada.

    Cuando se publica una URL mayor de 50 caracteres se acorta automáticamente con nuestro servicio dando como resultado una URL de este tipo (http://micurl.com/0hupfc). Si dentro de YouAre, sitúas el cursor en ese enlace y desvías tu mirada a la parte inferior izquierda de tu navegador verás el enlace fuente.
    Es muy útil para saber si realmente te interese clickar, si es contenido NSFW

  • Muchos idiomas tienen tildes. En YouAre no descuentan caracteres.

    Es una opción muy demandada en Twitter que desespera a muchos usuarios.

  • Mismos resultados de búsqueda cuando la palabra clave lleve o no lleve tilde.

    Cuando buscas a alguien o alguna ciudad que contiene tilde y la escribes sin tildes, el buscador no filtra los contenidos y te muestra ambos resultados. Por ejemplo, si buscas «José», el buscador de YouAre también te mostrará los usuarios que se llaman Jose (sin tilde) y a la inversa.

    Aunque parece un detalle sin relevancia, los buscadores de relevantes aplicaciones sociales solo te muestran lo que hayas escrito, causando que los usuarios o ciudades cuyos nombres tienen tilde sean más «invisibles», ya que los usuarios no acostumbrados a escribir tildes en aplicaciones de uso global son mayoría.

  • URL’s amigables.

    A pesar de ser un factor muy extendido y nada novedoso, pocas redes sociales lo cuidan. En YouAre los permalinks son muy al estilo blog:
    http://youare.com/username/yyyy/mm/dd/idnum.

    Con este formato de URL será muy fácil llevar un registro ordenado de tu identidad y de lo qué hiciste cualquier día o mes. Igual de amigables son las URL’s de archivos por tipologías: http://youare.com/username/videos, los directorios geográficos: http://youare.com/country/city, y la de los resultados de búsqueda: http://youare.com/search/name.

  • Borrado de contenidos sin necesidad de que se cargue una página nueva, por tanto se hace más rápido.
  • Link para imprimir tu Curriculum Vitae en el acceso de profile. Un detalle tan sencillo que es muy útil por si se estás en un proceso de selección de candidatos para algún puesto de trabajo.
  • Si publicas links con extensión .pdf y .zip te saldrá un icono informándote.
  • En el email que te informa de que tienes un nuevo seguidor se incluye la bio de 140 caracteres de ese usuario. De esa forma, si no lo conoces, tienes más datos para ver si te aporta valor añadido a tu red.
  • Cuando haces una reply no es requisito indespensable que el post comience con @username.
  • Vídeos de principales servicios con autoreproducción. Siguiendo la filosofía de ahorro máximo de clicks, cuando publicas un vídeo y vas al permalink para verlo no hará falta clickar en play, se autoreproducirá.
  • QR Code para cada actualización

Las personas que ya están en YouAre echan en falta un buscador de contenidos, que al tener el acceso de Web Life, también nos acerca a funcionalidades de FriendFeed, pero estamos en pre-temporada y esa opción sí que conlleva un estudio más a largo plazo (y recursos).

Categorías
Blogs Media Diseño

La web corporativa de Blogs Media

En estos más de 2 años que empezamos con Blogs Media, además de trabajar para los clientes y crear nanomedios hemos tenido poco tiempo para dedicar a nuestra web corporativa toda la atención que se merecía en cuanto a aspecto y contenidos. ¡Al fin tenemos una web en condiciones!

Gabriel se ha cambiado de piso y ha sido padre de Claudia. David también ya vive solo, entre otras aventuras, y yo he vuelto a Sevilla, he co-escrito algún que otro libro y co-organizado algún que otro congreso.

Categorías
Experiencia de usuario Internet Libros

Curso de Blogs IV (2). Cómo enlazar bien: reglas tácitas

Segunda parte de la cuarta entrega del capítulo extra y online del libro «Blogs». Curso práctico de blogs: diseño, redacción de posts, reglas tácitas para enlazar…

En la redacción de contenidos online, enlazar correctamente y utilizar los enlaces para ilustrar con información complementaria son cuestiones prioritarias para fidelizar al lector. Enlazar bien es credibilidad. La pedagogía del hipertexto: compartir, debatir, aplicar lo aprendido en tu vida laboral o personal, es la constante que originó y popularizó los blogs.

«Enlazar bien supone credibilidad»

¿Quién o qué mide la correción de qué se enlaza y cómo enlazar? El sentido común. Cualquier demanda de información que genere la lectura, satisfácela. Añadirá valor al contenido. Te dará a conocer en otros blogs, especialmente si haces trackback, que amplificará el debate en otras bitácoras.

¿Qué se enlaza?

Si la información que quieres enlazar tiene web/fuente oficial, es preferible. Estarán actualizadas y el contenido será fiable:

  1. Nombre propios de personajes del presente: actualidad, celebridades, anónimos (con referencia online: blog, perfil en red social…). En el caso de los profesionales del cine se ha convertido en una práctica estandarizada enlazar a su perfil en IMDB (el sitio por antonomasia de la industria del cine).
  2. Nombre propios de personajes históricos, conceptos técnicos/científicos, acontecimientos históricos… La entrada en la Wikipedia es la opción más fiable a la hora de reseñar material hasta hace pocos años propiedad de las enciclopedias cuyo destino hoy día es coleccionar ácaros en las estanterías de casa.
  3. Organizaciones: empresas, instituciones, medios de comunicación… Si las citas varias veces, enlázalas sólo la primera vez. Si hablas de su historia, orígenes, resultados, un segundo enlace a estos contenidos que supuestamente se encontrarán en la web corporativa o en la Wikipedia completarán la información.
  4. Productos. Si es una película, la ficha en imdb.com (que mencionamos anteriormente) y un enlace a un tráiler de gran calidad de imagen será suficiente. Si es un libro, un enlace a Amazon o alguna otra tienda de libros (por ej, la más barata). Si enlazas un gadget, además de la información oficial y de compra, incluye un vídeo. Lo visual siempre complementa muy bien la información. Y por supuesto, sea cual sea el producto, algún enlace que opine a favor o en contra, es recomendable.

Sintaxis: ¿qué palabras se enlazan?

Belén Sanz, en Formas recomendadas de enlazar en las bitácoras, abundaba en algunos detalles que no por sencillos son intrascendentes. Al contrario, elevan la valoración y credibilidad de tu blog de manera imediata.

Por favor, no enlaces el «haga click aquí». El «aquí» está vacío de información. Enlaza palabras clave.

Presta atención a dónde y cómo situar los enlaces en cada frase. No utilices el recurso de «Más información aquí» o «Haga click aquí» y enlaces esa frase. Es una frase vacía de contenido.

En el predicado de la frase, los objetos directos/indirectos, lo complementos circunstanciales y los adjetivos son los elementos que tienen mayo dosis de contenidos/información, y no el tiempo verbal. Sanz daba el siguiente ejemplo:

«El Gobierno ha anunciado la convocatoria de elecciones»

Es habitual después de esa frase, abrir el blockquote para reproducir parte de esa noticia, pero antes hay enlazar en esa frase.
¿Qué parte de la frase enlazamos para ver la noticia? ¿En el verbo de la acción («ha anunciado»)? o ¿en el objeto directo? («convocatoria de elecciones»)?

En mi opinión, lo importante es el objeto directo. Es mucho más informativo que el verbo. Si enlazamos «ha anunciado», no aclaramos qué está ocurriendo, puede haber anunciado quién sea lo que sea, pero si enlazamos «convocatoria de elecciones», estamos informando del asunto de la noticia, del motivo.

Enlazar documentos con extensiones .pdf, .doc…

Si enlazas documentos con extensiones diferentes a los de una web común, como archivos de Word (.doc, .rtf), PowerPoint (.ppt) o .pdf que necesitan de mayor memoria del PC, añade el tipo de extensión al lado del término enlazado. El lector podrá decidir si hace click o no. Si no está señalizado y su navegación se ralentiza o cuelga, lo defraudarás por decirlo eufemísticamente.

Igual sucede con los contenidos que se consultan bajo suscripción de pago o de usuario y que no están accesible al primer vistazo.

Atributo title de los enlaces

El atributo para titular los enlaces también es eficaz para dar pistas del contenido que se encontrarán cuando hagan click, además de sus beneficios en posicionamiento en buscadores. Por ejemplo:

<a title=»palabra enlazada o info complementaria» href=»URL»>texto enlazado</a>

Diseño de los enlaces

La apariencia de los enlaces se personaliza desde la CSS. Las normas tradicionales de usabilidad, basadas en la experiencia y test de usuarios, recomiendan que los enlaces se presenten subrayados en azul, al tiempo que se diferencien entre los enlaces no visitados y los ya clickados (visitados).

En CSS, los parámetros de los enlaces son:

a, atributos del enlace nuevo
a:visited, atributos del enlace visitado
a:hover, atributos del enlace al pasar el cursor por el texto enlazado
a:active, atributos del enlace en el momento de clickar

Conclusión

*Párrafo final del capítulo práctico.

Actualmente hay millones de personas que tienen un blog o que han creado uno en algún momento de su vida poniendo de relieve, igual que lo hizo el Manifiesto Cluetrain cuando proclamó que el mercado son conversaciones, que se acabaron los púlpitos y los discursos verticales. La cultura del hipertexto supone credibilidad y democratización de las jerarquías.

La web 2.0 es participación. El ecosistema en el que cualquier ciudadano puede alzar la voz y ser escuchado, valorado personal y profesionalmente… de forma inmediata. Si además esta coyuntura se construye con la implantación de tecnologías que como resultado de su uso generalizado se crean nuevos estándares para el desarrollo de la innovación y de nuevos productos hasta ahora inimaginables, la revolución acaba de empezar. Como dijimos en la primera parte del libro, si Guttenberg levantara la cabeza…

Categorías
Experiencia de usuario Libros

Curso de Blogs III. Organizar accesos y contenidos

Retomamos el capítulo extra del libro, que hemos reservado para su publicación on line.

Portada libro Blogs Después de repasar las premisas para planificar la estructura de un blog y analizar la relevancia de los estándares web, en esta entrega inauguramos la faceta práctica.

Hablaremos de las conclusiones del Eyectrack III, cómo podemos extrapolarlas a un blog, la jerarquía de contenidos en la plantilla, y finalmente la información recomendable a incluir en los accesos principales.

Cómo organizar la información en un weblog

En septiembre de 2004, el Poynter Institute, en colaboración con Estlow Center for Journalism & New Media y la firma Eyetools daba a conocer los resultados de la tercera versión de un estudio que lleva años desarrollando bautizado como Eyetrack, literalmente, seguimiento del ojo.

Categorías
Estándares Libros

Curso de Blogs II: Weblogs y estándares web, una pareja explosiva

Segunda parte del capítulo práctico del libro «Blogs». Si en la primera entrega hablábamos del mapa de accesos de un blog y las premisas que teníamos que tener en cuenta para personalizarlos, hoy profundizaremos en la relación de los blogs con los estándares web.

Portada libro Blogs Es un texto, que recomendamos especialmente a los profesionales del desarrollo web y empresas con presencia en Internet que aún no conocen las ventajas de la construcción de páginas usando estándares web. Sabemos que a muchos lectores este texto les puede resultar técnico pero lo importante es que conozcan su relevancia para comprender todo lo que acontece en la Red. Si tienes un blog y quieres personalizarlo también te resultará muy útil saber qué haces ya que en sucesivas entregas te explicaremos cómo «codear» los listados de ítems en tus anotaciones, cómo citar extractos de textos ajenos…

Categorías
Experiencia de usuario Libros

Curso de Blogs I: Accesos y premisas para personalizarlos

Capítulo extra y online de «Blogs». Curso práctico de blogs: diseño, redacción de posts, reglás tácitas para enlazar…

¿Estás leyendo el libro y te has decidido a crear un blog? ¿Eres un desarrollador web y un cliente te ha encargado uno para su web corporativa? ¿Sabes cómo escribir anotaciones para fidelizar a tu audiencia?

Portada libro Blogs

Reseñados los accesos en el capítulo 1, en esta guía práctica profundizaremos durante varias semanas en cómo presentarlos, la información recomendada a incluir, las disciplinas y lenguajes de programación que los optimizan así como las reglas tácitas, ampliamente extendidas, a tener en cuenta para redactar buenos contenidos que se podrían englobar en un objetivo universal: satisfacer al instante cualquier demanda de información que genere la lectura.

Recordar que no sabemos si este manual se podrá incluir en futuras ediciones o si habrá otra editorial interesada para su publicación. Lo que sí sabemos, es que se liberará para que cualquier persona pueda utilizarlo gratuitamente como material de formación en clases universitarias y grupos de trabajo.

Categorías
Experiencia de usuario Libros Weblogs

Arquitectura weblog

Índice del capítulo extra y online del libro «Blogs». Curso práctico de blogs: diseño, redacción de posts, reglas tácitas…

Portada libro Blogs Cuando comenzamos la planificación del libro, la idea inicial fue que cada autor no excediera de las 25-30 páginas por capítulo. Resultó imposible y no precisamente por los contenidos adicionales como el glosario o las entrevistas. Nos «calentamos». Mucho que contar y sin aburrir teniendo en cuenta que el lector -seguramente- no ha profundizado en ellos y que la mayoría quieren descubrirlos bien para uso personal, educativo o empresarial.

Al final, un libro de 300 páginas en el que tuvimos que reservar para su publicación on line el capítulo práctico dirigido a profesionales del desarrollo web, empresas que quieren bloguear e internautas sin grandes conocimientos técnicos. Un difícil equilibrio que creemos haber conseguido:

Índice

Semanalmente publicaremos una entrega.

No sabemos si se podrá incluir en sucesivas ediciones. Si no es posible, la intención es liberarlo como material de formación para utilizar en clases y grupos de trabajo.