Diseñar y codificar una aplicación integrada de Facebook: Teoría

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Durante estas series estaré echando un vistazo a lo que existe tras la interfaz de usuario (UI) de Facebook y, durante el proceso, te mostraré cómo crear tu propia app de Facebook para un blog a través de un feed RSS.

Lo ames o lo odies, Facebook ha llegado a formar parte integral de la vida de la gente. Para muchos es una herramienta que nos permite estar en contacto con nuestros amigos, compartir fotos o planear nuestras noches de fiesta con nuestros colegas. Sin embargo, detrás de la interacción social existe una compleja estructura de UI cuidadosamente planificada que ha sido modificada y remodificada.

En los primeros días de Facebook nunca fui fan de su “aburrido aspecto” y siempre sentí que tenía el potencial para mucho más en términos de diseño. Sin embargo, solo ahora que mis conocimientos y experiencia como diseñador UI han progresado cuando me doy cuenta de que es precisamente debido a la simplicidad de Facebook y a su facilidad de uso lo que le ha permitido a alcanzar semejante éxito. Su diseño es ciertamente algo que debería ser admirado.

Introducción

En esta serie de tutoriales, voy a evaluar la UI de Facebook a través de una serie de casos de estudio, investigación, implementación y análisis, de manera que entiendas cómo sus principios de diseño puedan ayudarte a crear una app con el aspecto nativo de Facebook. Quería crear algo que espero que sea útil para los lectores de Tuts+ y piensen “Sería genial si pudiese mostraros como convertir el blog de vuestra web en una app nativa de Facebook”. Bueno chicos, habéis tenido suerte porque eso es exactamente lo que pienso hacer durante los próximos 3 artículos. ¡Así que pégate a mí, hazte una taza de té y diseña felizmente!

Una breve historia sobre el diseño UI de Facebook

Desde sus inicios, la simplicidad ha sido uno de los principios de Facebook

En febrero de 2004 thefacebook.com abrió sus puertas a los estudiantes de Harvard antes de abrir posteriormente al público el 26 de septiembre de 2006. El concepto global del sitio se mantiene similar a su estado original. Todavía tiene la cabecera azul, el limpio fondo blanco, las columnas laterales con titulares en pestañas y el mismo tipo de fuente que usa hoy en día, la Lucida Grande. Por supuesto han cambiado muchas cosas desde los primeros días. Mark Zuckenberg ha madurado y el sitio también lo ha hecho. Es difícil entender cuál fue el proceso mental de Zuckenberg durante los primeros días de Facebook pero parece que su principal preocupación se concentró más en la funcionalidad que en la UI. Zuckenberg proporciona algunas pistas sobre sus reflexiones respecto al diseño:

Desde su encarnación, en Facebook, se ha lanzado más dinero que sentido común. Con esto vinieron las mejoras en el diseño de Facebook; poco a poco, pedazo a pedazo. Facebook actualiza su UI regularmente, normalmente en fases y con frecuencia es recompensado con críticas antes de ser eventualmente apreciado por la mayoría.

Los beneficios de diseñar nativamente

¿Entonces, por qué querrías diseñar tu app como Facebook? La forma en la que diseñes tu app de Facebook depende totalmente de ti. Algunos de vosotros optaréis por un diseño nativo y otros diseñaréis algo totalmente nuevo que, con suerte, se complemente con Facebook. No existe una forma correcta o incorrecta de diseñar tu app pero esperamos que tras comprender la lógica que sustenta el diseño de Facebook tengas más oportunidades de éxito.

Familiaridad

Quizá la mayor ventaja de diseñar de forma nativa sea que el diseño ya le resultará familiar a tus usuarios. No tendrán que aprender un nuevo concepto de UI desde cero, ya estarán familiarizados con la forma de funcionar de Facebook.

Seguridad

Acompañando a la familiaridad viene la seguridad. Tus usuarios no se sentirán inseguros ni incómodos en un entorno que ya conocen en contraposición a la extrañeza que genera un diseño foráneo dentro del propio Facebook. Si estás valorando la venta de artículos a través de tu app, esta sensación de seguridad probablemente propicie más altos ratios de conversión entre tus usuarios.

Como diseñadores tenemos el deseo natural de crear algo nuevo y excitante, de forma que seguir las pautas del estilo de Facebook podría no resultarte directamente atractivo, ¿pero qué pasaría si quisieses retarte a ti mismo y diseñar algo siguiendo el estilo de Facebook pero para lo cual este no tiene creado un estilo directamente? ¿Te has preguntado alguna vez qué aspecto tendría una tabla de datos con el estilo de Facebook? Rétate y crea algo que todavía no exista. Te aseguro que este reto puede ser tan divertido como crear un concepto totalmente nuevo desde cero.

facebook app the nebefits of designing native

Principios de diseño de Facebook

Muchas grandes organizaciones disponen de un manual corporativo o guía de estilo de imagen de marca. Facebook expuso sus normas de estilo en los principios de diseño de Facebook. Aunque son vagos y se pueden interpretar de muy distintas formas, te ayudan a entender lo que Facebook está intentando conseguir a través del diseño de su sitio web. Tal y como cita el propio Facebook:

Existen ciertas creencias que aquí en Facebook abrazamos, ciertas cualidades a las que intentamos aspirar en nuestro trabajo. Es lo que nos permite debatir si algo “Es Facebook” o “No es Facebook”, es lo que nos permite evaluar si cualquier cosa que estemos diseñando puede mejorarse.

La declaración de misión de Facebook dice que pretenden crear un mundo más abierto y esto tiene una fuerte influencia en el diseño. La UI de Facebook debe funcionar para todas las culturas, a través de todos los continentes del globo en cualquier idioma. Esto no significa que tengas que traducir tu app a cada idioma del planeta, pero es algo a tener en cuenta a la hora de crear tu app.

Cosas a evitar

Asegúrate de leer la documentación de la graph API y asegúrate también de que lo que pretendes conseguir es viable. Por ejemplo, cuando se me ocurrió por primera vez el concepto de crear esta app de blog, pensé que sería una buena idea incluir las imágenes de la vista previa junto a las publicaciones del blog. Sin embargo, y desafortunadamente, el feed RSS de Feedburner (desde donde extraeremos nuestro feed) no trae la url para la previsualización de imágenes. Esto refuerza la idea de que deberías planificar tu app cuidadosamente. Cuanto más planifiques, más te simplificarás la vida. No hay nada peor que el haber diseñado y codificado tu app en HTML/CSS para acabar descubriendo que lo que pretendía hacer no está disponible o no es viable.

Otra cosa que merece la pena destacar es que nunca debes confundir a la gente con falsos elementos de interfaz de usuario de Facebook como un botón Me gusta, Facebook te penalizará por esto y es algo que podría dar como resultado que tu app sea suspendida.

Asegúrate de que diseñas una app dentro de un máximo de 760px de anchura, o si pretendes poner tu app en una página, que esta no sea más ancha de 520px.

El boceto

Como ocurre con cualquier buen sitio web, es importante planificar las cosas. Hace mucho tiempo que pasaron esos días en los que era aceptable empezar tu sitio web en un editor de código y crear tu sitio. Hoy en día puedes ahorrarte un montón de dolores de cabeza y tiempo realizando bocetos. Esta representación gráfica de tu app te puede ayudar a planificar la navegación, las rutas y la información presente que más beneficios aporte a tus usuarios. Te proporciona la oportunidad de analizar y evaluar tus decisiones sin estar influenciado por el diseño. Afortunadamente para nosotros, a día de hoy existen un montón de opciones de software y recursos para ayudarnos a crear bocetos en cuestión de minutos.

Si nos fijamos en el boceto de nuestra app de Facebook, podrás ver cómo la hemos planeado:

Las rutas y flujos que los usuarios van a tomar dentro de nuestra app.
Las dimensiones aproximadas para asegurarnos de que estamos trabajando con una escala correcta, y de que nuestra app se adaptará a Facebook.
Tamaños de fuentes aproximadas. Esto puede ser útil como guía cuando planifiquemos más adelante nuestro CSS. Normalmente no haría esto al crear el boceto de un sitio pero en este caso en el que queremos que nuestros estilos sean realmente simples, esto puede servir como una buena guía para los estilos básicos como las etiquetas h1, h2, de los titulares, etc.
La ubicación más lógica para nuestro contenido. Observa como todos los artículos del blog han sido colocados a la izquierda. Esto lo hemos hecho así para dirigir al usuario directamente a nuestro contenido tan pronto aterricen en tu app.

Navegación

Hasta hace poco nunca me gustó realmente el sistema de navegación de Facebook. Siempre he sentido que nuestras apps quedan ocultas y que no existe ninguna dirección u organización clara de ellas. Afortunadamente las cosas han mejorado últimamente y han simplificado la navegación de la página de inicio. Esto nos proporciona una gran ventaja a los desarrolladores de apps, ya que hace que el acceso a nuestras apps sea más fácil y más directo desde la página de inicio.

Facebook dice:

Estamos haciendo que sea más fácil para tus usuarios acceder y reanudar las aplicaciones que usan con mayor frecuencia. Las aplicaciones de la plataforma tienen ahora la misma oportunidad condición efectiva en la página de inicio. Pueden ocupar las posiciones actualmente disponibles en el panel de aplicaciones, en el panel de juegos, y en el panel de fotos, dependiendo de con qué aplicaciones interactúe más el usuario.

Colores

Así que lo primero que habrás notado es que Facebook usa el azul como uno de sus colores base principales. Es una razonable decisión por parte de Facebook. ¿Te has preguntado alguna vez por qué existen tantos sitios web (Twitter, Facebook, LinkedIn, PayPal, etc.) que usan el azul como su color primario? Esto se debe a que el azul es el color más universalmente aceptado. En muchas distintas culturas el azul se asocia con sentimientos religiosos, trayendo paz o se piensa que mantiene los malos espíritus lejos. El azul es un color con el que la mayoría de nosotros nos hemos familiarizado inconscientemente; es el color del cielo y del mar. Universalmente lo hemos llegado a asociar con la calma. Facebook parece haber encontrado el equilibrio adecuado con su cabecera azul y su limpio fondo blanco, ya que demasiado azul podría evocar emociones de frialdad, tristeza y depresión.

Echa un vistazo arriba y podrás ver algunos de los restantes colores que Facebook utiliza en su sitio.

Fuentes/Tipografía

Facebook todavía mantiene la fuente originaria que usó el día de su lanzamiento, la fuente sans-serif Lucida Grande. A esta fuente le siguen una serie de fuentes alternativas. Si echamos un vistazo al CSS de Facebook, podemos ver directamente la familia completa de fuentes como ves a continuación:

1	font-family: "lucida grande",tahoma,verdana,arial,sans-serif;

Algunos consideran que la fuente, diseñada por Charles Bigelow y Kris Holmes, refleja minimalismo, formalidad y calidad. Cualidades todas que la convierten en la elección perfecta para la red social más grande.

El texto de los párrafos de Facebook tiene 11px con una altura de línea de 16px. Esto le proporciona una buena proporción de alrededor 1.5 permitiéndole ser muy legible e incluso espaciado. La altura de línea es extremadamente importante para el texto cuando estás trabajando en diseños limpios y minimalistas. Si no aciertas con la altura de línea correcta para tu texto, esto podría convertir un buen diseño en uno simplemente aceptable. Estos son los atributos de fuentes que hemos decidido usar en nuestra app de blog.

Campos de entrada del usuario

Al examinar los campos de entrada de usuario de Facebook podemos descubrir cuáles serían los más adecuados para el tipo de app que estamos creando. Generalmente Facebook tiene cinco tipos de campos de entrada. Estos son los siguientes:

Status Update (actualización de estado)
Sign Up (registro)
Comments (comentarios)
Search (búsqueda)
Login (inicio de sesión)

Si tus usuarios tuviesen que registrar alguna información en tu app, quizá una dirección de correo electrónico para un concurso, la opción más obvia para que estos introduzcan sus datos sería el empleo del tipo de campo de entrada de registro. Estos son una buena opción para este tipo de cosas, ya que estos amplios campos atraen a los usuarios y ayudarán a la conversión de nuevos registros. Si tu app incluye un campo de búsqueda, ¿por qué intentarías reinventar la rueda? ¿Por qué no usar el estilo de campo de búsqueda de Facebook? Tus usuarios lo relacionarán con la búsqueda nativa de Facebook y sabrán de inmediato que les sirve para encontrar aquello que estén buscando. Cuando estás diseñando una app, son estos tipos de detalles lo que contribuirá a la facilidad de uso y eventualmente, ¡le proporcionarán de mayores posibilidades de éxito!

Otra opción sería lo que hemos hecho en nuestra app de blog para Facebook creando una ligera alteración no esté presente en Facebook. Observa como en el anterior diagrama tanto los campos de comentarios e inicio de sesión tienen un espaciado de 3px, bueno, pues nosotros hemos añadido esto y hemos usado el borde del campo de entrada de las actualizaciones. El uso de este tipo de combinación, todavía se adapta bien al diseño y sigue dando la sensación de ser un elemento nativo, ya que estamos ampliando la hoja de estilos de Facebook pero manteniéndonos dentro de sus pautas.

Piensa de forma minimalista

El objetivo de Facebook respecto a su diseño consiste en que este actúe como un lienzo en blanco en el cual los usuarios puedan sentirse cómodos. Esto tiene sentido, ya que el diseño no debería ser intrusivo en relación con lo que los usuarios pretendan hacer cuando estén usando tu app. Facebook cree lo siguiente:

Un espacio minimalista y bien iluminado fomenta la participación y la comunicación honesta y transparente.

Como diseñadores, en ocasiones es difícil dar marcha atrás. Estamos tan acostumbrados a crear diseños usando gradientes, sombras y esquinas redondeadas que en ocasiones olvidamos los diseños más sencillos pueden resultar ser los más eficaces. Ser capaces de conseguir esto puede ser una tarea con frecuencia complicada, pero es algo que cualquier diseñador UI debería dominar y ser capaz de lograr. Peter Soyer escribió un interesante artículo sobre el diseño minimalista. Si necesitas algunas ideas o inspiración para este tipo de cosas definitivamente deberías consultar este artículo que revisa 60 diseños web limpios y minimalistas para obtener inspiración.

O, por supuesto, siempre puedes echar u vistazo a Facebook y ver qué elementos puedes extraer de sus actuales limpios diseños.

Piensa con consistencia

Algo que quizá no hayas notado antes cuando navegabas en Facebook es la cantidad de patrones que usa Facebook dentro del diseño de su interfaz de usuario. Esto fomenta la familiaridad del usuario con su diseño. Facebook explica cómo funciona esto. Facebook explica cómo funciona esto.

Al adoptar el uso de patrones reconocemos que nuestra usabilidad ha mejorado increíblemente cuando partes similares se expresan de formas similares. Nuestras interacciones hablan a los usuarios con una única voz, construyendo confianza. Reduce, reutiliza, no rediseñes.

En la app de nuestro blog puedes ver que hemos adoptado estos ideales de Facebook y hemos reutilizado partes como los encabezados de pestañas de la columna lateral. Esto desglosa la información para nuestros usuarios y les permite escanear el contenido para encontrar lo que están buscando.

facebook app Design principles think consistent

Piensa de forma humanista

La parte central de Facebook es la interacción social. Los usuarios ya no se limitan a escribir en sus ordenadores; están interactuando y conectando con la gente que conocen. Van a Facebook porque quieren estar rodeados de sus amigos. La tecnología y el diseño deberían estar en un segundo plano y no interferir en esto. La tecnología y el diseño deben permanecer en segundo plano y no restar importancia a esto. Con frecuencia es buena idea intentar hacer tu app más humana e interactiva. Afortunadamente para nosotros, Facebook nos ofrece su graph API, la cual nos permite hacer que nuestra app sea más interactiva y conectarla con su potente social graph.

Hablaremos más sobre la graph API en los próximos tutoriales que forman parte de esta serie. Facebook también ofrece sencillos medios para incorporar este tipo de interacciones usando cualquiera de sus plugins sociales como el botón me gusta, el botón enviar, los comentarios y algunos otros más.

Hacerla adaptable/actualizable

Estoy seguro de que todos habréis notado que Facebook no actualiza su apariencia y características con frecuencia. Esto es algo que no solo molesta a los usuarios, sino que puede incluso molestarnos a nosotros como diseñadores y desarrolladores. Esto sucede así porque tiene la capacidad de arruinar todo el duro trabajo que hemos llevado a cabo. Por qué no prepararnos para lo peor de manera que si Facebook realiza cualquier actualización inesperada estemos preparados para adoptarla. Según mi propia experiencia, la clave de esto está en hacer que los elementos sean reusables y tengan aplicados estilos sencillos.

Por supuesto, nunca sabemos cuando ni como va a actualizarse Facebook, puede suceder cuando menos te lo esperes y darte una patada en el trasero. Tanto es así que mientras estaba en medio de la redacción del tutorial que acompaña esta serie, Facebook actualizó la página de su aplicación canvas haciendo que tuviese que rehacer parte de mi diseño. ¡Gracias Facebook!

¡Ponerlo todo en acción!

Si echas un vistazo a los archivos .PSD que acompañan este tutorial serás capaz de comprobar como algunos de los puntos que hemos tocado hoy están relacionados con nuestro diseño. Nuestro diseño tiene estilos similares a los de Facebook mientras al mismo tiempo mantiene su propia singularidad. Hemos cogido prestados y seguido los principios de diseño de Facebook de manera que nuestra app tenga un aspecto similar a Facebook. Algunos de los elementos que hemos adoptado para nuestra app son los siguientes:

El filtro de la barra de búsqueda: Inspirado por la barra de búsqueda original de Facebook.
Texto de párrafo: Con los mismos estilos que el de Facebook. Es uno de los aspectos más importantes para que la app parezca nativa.
Pestañas de página: Aunque no son exactamente iguales a las originarias de Facebook, todavía las evocan.
Pestañas de cabeceras: Las pestañas de las cabeceras tienen el mismo estilo que las de Facebook.
Imagen de usuario y de perfil: Para continuar con la preferencia de Facebook por la interacción humana, hemos incluído esto para hacer nuestra app más personal.
Estilos sencillos:

Mi estudio personal

Al principio de 2011 dirigí tres grupos de debate con usuarios habituales de Facebook para descubrir aspectos sobre sus hábitos de uso dentro de Facebook. Algunos resultados me sorprendieron, aunque eran relevantes para la aplicación en la que estaba involucrado. Es importante entender que Facebook cuenta con una extensa base de usuarios y que no deberías apoyarte en exceso sobre la información que he recogido, sino que deberías conducir tu propia investigación en base a tus propios criterios y perfil demográfico de tu usuario objetivo.

Todos los usuarios que entrevisté dijeron que invertían al menos entre 30 minutos a una hora en Facebook todos los días. Sorprendió que la mayoría de la gente quería que nuestra app tuviese el mismo aspecto que Facebook, y que todos dijeron que se sentirían más seguros comprando artículos en una app a través de PayPal que pagando a través de una tarjeta de crédito. Así que esto podría ser algo a tener en cuenta en el futuro si te estás planteando vender cualquier cosa a través de tu app.

Conclusión

El estilo de interfaz de usuario de Facebook y la psicología detrás de él es definitivamente algo que debe ser admirado. Es uno de los sitios web con más éxito de todos los tiempos y el motivo de esto se debe en parte a que toman las decisiones correctas cuando se trata de su diseño. Piénsalo, ¿tendría Facebook el mismo éxito si el color primario de su lienzo fuera negro? Es difícil juzgar en qué medida su éxito se debe a sus decisiones en relación a la interfaz de usuario, pero creo que definitivamente merece algo de crédito en ello.

Al adoptar y tomar prestadas ideas de los principios de diseño simples pero eficaces de Facebook e incorporarlos a tu propia aplicación, estoy seguro de que esta tendrá la mejor oportunidad posible de convertirse en un éxito.

En la siguiente parte del tutorial vamos a ver cómo codificar nuestra aplicación de blog, Pasando archivos .PSD a HTML y CSS. Así que hasta entonces, ¡Disfrutad diseñando amigos!