Diseño para la Web Social

Claves para diseñar sitios Web sociales que brinden una interfaz de usuario fácil de usar.

Laura Pérez Vanmorlegan Buenos Aires
Followers:
1
Comments:
38
Votes:
68
Compartir:

Últimamente las redes sociales internas y personalizadas se han vuelto un recurso más que útil para empresas y organizaciones, reemplazando muchas veces a las intranets o wikis. Estas Webs Sociales se acercan cada vez más al concepto de «aplicación», por la cantidad de funcionalidades e interacciones que ofrecen. La usabilidad es crucial en cada diseño, especialmente en los sitios con gran cantidad de funciones y usuarios. Es importante proporcionar a los usuarios de una buena interfaz de usuario (GUI, Graphic User Interface), con una relación intuitiva entre lo que desean hacer y la función de la aplicación que permite concretarlo.

La usabilidad es parte de una buena interfaz de usuario y determina la facilidad con que un usuario es capaz de realizar todas las funciones proporcionadas por el sitio. Algunas de las características que el diseñador deber tomar en cuenta para este tipo de desarrollos son las siguientes:

Simpleza y foco en el usuario

Los sitios web social media suelen ser simples en cuanto al uso de color y gráficos. La paleta de colores suele consistir en uno o dos tintes predominantes, con variaciones de grises y medios tonos. Los gráficos también son muy sencillos. Se aplican recursos de animación para rotar textos, imágenes y enlaces que solo se manifiestan al pasar con el puntero por sobre un elemento.

Los diseños muy protagonistas no son útiles para este tipo de sitios, ya que la atención del usuario está centrada en sus conversaciones e interacciones, y un diseño muy llamativo distraería su atención. 


Facebook tiene un diseño muy sencillo con una paleta de colores limitada que no distrae al usuario.

Personalización y ponderación de contenidos

Conviene mostrar sólo lo relevante para el usuario y ocultar aquella información que no necesita en el momento preciso de cada interacción. Las personalización de páginas es una técnica muy poderosa que se utiliza para ofrecer solo contenidos relevantes para cada usuario. Los sistemas de recomendación se utilizan a menudo para proporcionar a los usuarios información que es muy probable que les resulte de interés o satisfaga sus expectativas.


En Quora menos es más, se busca mostrar poca información pero adecuada a lo que busca el usuario.

Buscador prominente

Al haber tanta información disponible para el usuario, la búsqueda se vuelve un elemento fundamental de navegación. Es importante que el buscador devuelva resultados de todas las categorías de contenidos: páginas informativas, contactos, grupos, etc. El lugar más habitual para ubicar el buscador es en el área superior derecha de la página ya que, por convención, los usuarios esperan encontrarlo ahí. Una funcionalidad muy utilizada son las sugerencias de auto-completar (live search results and filtering). A medida que el usuario escribe en una caja de búsqueda, aparecen sugerencias de palabras clave en un drop-down. Esto ahorra mucho tiempo al usuario.


En Quora, al igual que en muchas redes sociales, el buscador es el elemento protagonista de navegación. El usuario necesita encontrar lo que busca con el menor esfuerzo posible.

Formularios breves y sencillos

Los formularios Web son probablemente el elemento de diseño más importante para los sitios social media. Los formularios se utilizan en todo, desde el inicio de sesión hasta la búsqueda, registro de usuarios, responder a un mensaje o agregar contenidos. Dado que los formularios son muy importantes, deben ser fáciles de usar. Esto es especialmente importante para el formulario de registro (el primer contacto del sitio con el usuario), porque si es complicado de usar disminuirá la cantidad de usuarios registrados en el sitio.

Para un formulario de fácil uso es clave pedir la menor cantidad de información posible, y que el usuario complete los detalles una vez que registrado. El objetivo del usuario al registrarse es probar lo antes posible la aplicación para comprobar si es de su interés. Si se encuentra con que tiene que proveer su número de teléfono, dirección, películas favoritas, etc., puede que se aburra antes de completar todo el formulario, o muchas veces puede no tener intenciones de proveer tanta información personal.


Registrarse como usuario en twitter lleva solo unos segundos.

Botones call-to-action

Las aplicaciones sociales contienen muchas funciones que deben ser comunicados de alguna forma. En consecuencia, los botones y enlaces deben ser colocados casi en cada página (una forma de inscripción es probablemente la única excepción razonable). Algunos enlaces están relacionados con la navegación y algunos permiten al usuario realizar funciones específicas de la aplicación. Los botones se utilizan a menudo para animar a los usuarios a que tomen acciones, mientras que los enlaces son a menudo más pasivos y sutiles. Los botones suelen ser también más grandes, más vivos y más memorables. No importa qué tarea realice un botón, tiene que ser muy visible e invitar a hacer click. El layout de la página social media debe tener en cuenta cuáles son las acciones más interesantes y/o frecuentes para el usuario. Por ejemplo, buscar a un amigo, escribir una actualización, mandar un mensaje, etc. Estas opciones deben estar más destacadas que el resto, para que el usuario no tenga que perder tiempo buscándolas.


Twitter cuenta con un menu con pocas opciones. Sin embargo, han decidido destacar la opción más utilizada: escribir un nuevo tweet, con un icono (a la derecha) para que sea rápidamente identificable.

Espacios en blanco y buena separación entre elementos

Uno de los desafíos en el diseño de interfaces social media es cómo organizar y presentar varios bloques de información. Para que el contenido sea legible, «escaneable« y fácil de leer, los bloques de contenido tienen que estar claramente separados. De hecho, separar los elementos de un diseño es una de las maneras más eficaces para lograr una interfaz de usuario limpia con la que el usuario pueda interactuar cómodamente. A veces conviene utilizar misceláneas (como líneas, puntos, etc.) para separar, destacar en tamaño y color los títulos, o envolver las «cajas» de texto con un color de fondo o bordes de color.


A diferencia de otros sitios, Twitter tiene una buena separación entre los tweets, con una simple linea divisora. El aire entre los ítems, ademas de la estructura y diferencia de jerarquía de textos ayuda a la lectura.

Fotos de avatar

A los usuarios de redes sociales les gusta ver a otros usuarios. Ver una foto al lado de un texto o un nombre, humaniza e identifica la acción. Ver la propia foto, ayuda a que el usuario se apropie de la aplicación u la asuma como un recurso que le pertenece, en el que tiene su propio lugar.

Proveer posibilidades de multiconexión

Cuando las redes sociales comenzaron, la mayoría de la gente sólo agregaba como amigos a otras personas que conocían en la vida real. Pero como las redes sociales han crecido se han convertido en una manera de conocer gente nueva. Conviene permitir que los usuarios puedan encontrarse entre sí sobre la base de intereses comunes. La posibilidad de que personas desconocidas puedan llegar a conectarse e interactuar amplía el potencial de crecimiento de las aplicaciones y ayuda a mantenerlas en movimiento.

Followers:
1
Comments:
38
Votes:
68
Compartir:

38 Comments

Comment

This article does not express the opinion of the editors and managers of FOROALFA, who assume no responsibility for its authorship and nature. To republish, except as specifically indicated, please request permission to author. Given the gratuity of this site and the hyper textual condition of the Web, we will be grateful if you avoid reproducing this article on other websites. Published on 21/07/2011.

You may be interested

Blue Mercadotecnia
Idioma:
ES
Author:

Blue Mercadotecnia

Title:

Marketing de guerrilla vs. desinformación sexual

Share:
Interactions:
Votes:
90
Comments:
43
Followers:
17
Camilo Vera
Idioma:
ES
Author:

Camilo Vera

Title:

Debate: Adiós Google Reader, ¿bienvenido Atchus?

Share:
Interactions:
Votes:
0
Followers:
0
Vero Orso
Idioma:
ES
Author:

Vero Orso

Title:

¿Cómo no pensar en diseño adaptable?

Share:
Interactions:
Votes:
75
Comments:
40
Followers:
65
Paulo Lucia
Idioma:
ES
Author:

Paulo Lucia

Title:

¿Diseñas sitios web o folletos web?

Share:
Interactions:
Votes:
30
Comments:
13
Followers:
11
Julián Ortiz
Idioma:
ES
Author:

Julián Ortiz

Title:

Facebook y Twitter, el país más poderoso del mundo

Share:
Interactions:
Votes:
9
Comments:
4
Followers:
23
Luis Correa
Idioma:
ES
Author:

Luis Correa

Title:

Comunicabilidad y usabilidad

Share:
Interactions:
Votes:
31
Comments:
9
Followers:
16
My opinion:

Login with your account to comment on this article. If you do not have it, create your free account now.

0
Kavii Tzita Flaz
Mar 2012

Es interesante conocer respecto al diseño de redes sociales, pues al ser usuario de ellas m doy cuenta que todo el contenido de éste artículo es real y que navegamos en ellas de manera inconsciente o bien como dice... que todo sea intuitivo... y por supuesto es elemental sólo lo que el usuario necesita... excelente!

0
Reply
77
Alejandro Arrojo
Sep 2011

Un artículo muy útil. excelente aporte!

0
Reply
0
Mielworks! Design Team
Sep 2011

Gracias por tus consideraciones, hace tiempo rediseñamos un portal de búsqueda de empleo y aprendimos sobre «el campo de batalla» un montón de lecciones sobre usabilidad y accesibilidad, fueron meses intensos, de aprendizaje sobre este nuevo medio.

0
Reply
0
Joaquín Ortega
Sep 2011

Perfectamente desglozadas las características que deben tener las redes sociales. Sencillamente nadie pasara tiempo tratando de decifrar como usar tal o cual página.

Ahí creo que es donde falló Google al querer entrar en las redes sociales. Antes del recientemente creado G+ lo intento en Buzz y Wave, y simplemente no tuvieron la difusion ni la popularidad necesaria por aspectos como estos, la gente no se sentía comoda ahí. Y también es parte del gran éxito que ha tenido Facebook.

0
Reply
0
Lorena Dagdug
Sep 2011

Interesante artículo y como ejercicio de diseño para adolescentes, una oportunidad al vincularse con su medio predilecto..

0
Reply
1
Daniel Zetune
Aug 2011

Estoy totalmente de acuerdo con el articulo, me parece que cada vez es mas obvio que en cuanto a la vida de redes sociales es primordial el diseño efectivo, es decir una nueva red estilo facebook tiene poco tiempo limite para ser exitosa y «ponerse de moda» y esto se logra principalmente (además de otros importantes aspectos) con la simplicidad, algo así como el ver por primera vez el bello y organizado escritorio de tu nueva macbook jajaja.

0
Reply
0
Juan Manuel Agudelo Suarez
Aug 2011

Un articulo muy interesante!!!

0
Reply
0
Mayra Escalante
Aug 2011

Hare un dibujo sobre este articulo para la clase de Diseño, muy bien explicado y directo al punto. :)

0
Reply
0
Yaritza Zamora
Aug 2011

Para mí esa es la clave: «humanizar», apropiarse de la aplicación, dar el sentido de pertenencia y de tener su propio lugar en la red.

0
Reply
21
Ricardo Palmieri
Aug 2011

Laura: Es un estupendo artículo. En particular, lo que comentás sobre los formularios breves y sencillos. Algunos profesionales creen que conviene pedir muchos datos para tener una base de datos enriquecida. La realidad es que cuanto más se le pide al visitor, menos da. La solución para llegar a esa base ampliada es, una vez que se consiguen los datos mínimos, ir solicitando otros de manera progresiva, a cambio de artículos de interés y demás incentivos.

0
Reply
0
Claudia Rosalía Aldana Mojica
Aug 2011

A mi me gusta mucho el diseño web, concuerdo que en cuanto sean menos los elementos gráficos y más limpia se vea la página más personas entederán cómo usarla y les resultará más fácil e interesante, yo he tenido muchos problemas con varias páginas porque piden muchas cosas, no les entiendo o me aburren, no resultan muy funcionales. Los puntos que se manejaron en éste artículo me ayudarán más a pulir el diseño web, después de todo no estoy tan perdida :)

0
Reply
0
Omar Tiraboschi
Aug 2011

Es excelente.

Muy interesante tener observaciones como las tuyas Laura sobre un tema que está ocurriendo exactamente en este momento

0
Reply
0
Paul Jimenez
Aug 2011

Excelente artículo, cabe destacar que las redes sociales que han decaido en los ultimos años (Myspace y Hi5), cometieron el error de permitir a los usuarios personalizar los diseños de sus perfiles a su antojo. Esto volvio la navegación en un caos y por tanto se perdio en gran medida la experiencia de usuario.

0
Reply
75
Angélica Vásquez Cárdenas
Aug 2011

Una buena interacción entre usuario-producto debe ser primordial; por ésto, en cada proyección de diseño que realicemos, tenemos la responsabilidad de implicar a los actores involucrados que participan del dispositivo a desarrollar. Pienso que éstas herramientas que se han mostrado en el artículo son muy útiles, pero debemos seguir forjando una alta comunicación en nuestros procesos de diseño.

A seguir construyendo!

0
Reply
2
Alfonso Llerena
Aug 2011

Muy buen artículo, me agrado mucho el discurso y la sencillez de las palabras, los conceptos planteados bien pueden se utilizados en otras piezas de diseño

Me gustó !

0
Reply
0
Norman Benzoni
Aug 2011

Excelente artículo, todo lo que esta relacionado con usabilidad merece la pena leerlo ya que cada ves más es una necesidad real tanto para las empresas que para el usuario final. En fin espero escribas muchos más artículos de ese tipo que me parecen muy útil para un profesional del sector.

0
Reply
22
Victor Leyva
Aug 2011

Buen articulo, pero estas recomendaciones no solo se aplican a diseño web social, de hecho un buen diseño radica en lo objetivo y practico del mismo, solo hay que tener en cuenta a quien estamos diseñando, pues no es lo mismo un pagina para un bar que una sitio para una institución educativa por ejemplo, tambien te falto lo importante que es la ergonomía cognitiva a la hora de diseñar.

0
Reply
0
Dirk Silvera
Aug 2011

De mucha importancia este artículo, y lo que nos muestran para usar mucho mejor los elementos de usabilidad y las Social Maedia bien aplicadas al WebDesign.

0
Reply
0
Isabel Gonçalves
Aug 2011

Excelente artículo. Gracias por compartirlo.

0
Reply
3
Claudio Fernando Gaitan
Jul 2011

Muy buen articulo, es hora de que los diseñadores tambien seamos programadores, el mundo nos propone ese desafio, porque en la tecnologia web e interactiva esta el futuro

0
Reply
30
Luis Jaime Lara Perea
Jul 2011

¿podemos usar la palabra ergonomía en lugar de usabilidad?

0
Reply
1
Pedro Enrique Ayala
Jul 2011

Cada medio tiene su sintaxis visual y es cierto, al tener un espacio de comunicación limitado es necesario jerarquizar el contenido y pensar en el usuario para su diseño. Me resultó interesante el articulo.

0
Reply
0
Martin Mariano Angeli
Jul 2011

Muy buen articulo!!!

Es cierto, la usabilidad es fundamental, debe ser directa y no hacer que el usaurio tenga que estar mucho tiempo buscando cada aplicacion.

0
Reply
0
Carlos Díaz
Jul 2011

fascinante

0
Reply
0
Laura Perez Vanmorlegan
Jul 2011

Agrego algunos principios que deberian tenerse en cuenta:

Estructura: organizar la interfaz con sentido. Reusar patrones existentes. Agrupar contenidos similares.

Simplicidad: Diseño simple, comunicar de forma clara, proveer atajos… Visibilidad: Que sea rápido para el usuario encontrar como hacer una acción, sin distraerlo. Dar información, sin abrumar.

Feedback: informar a los usuarios sobre acciones, cambios de estado, errores, excepciones, y otra info de interés de forma clara y no ambigua.

Tolerancia: el usuario comete errores. Que tu diseño no lo promueva.

Reuso: reusar lo que hagamos!

0
Reply
0
María José Cabrera
Jul 2011

Que opinan ustedes del futuro de éste tipo de medios como publicitarios?

0
Reply
0
Andrés Yazde
Jul 2011

Buena comparación! Saludos

0
Reply
3
Martin Uanini
Jul 2011

buen artículo, es un tópico que se viene mentando hace rato en catedrales del desarrollo web como smashingmagazine & six revisions . Son premisas claras y sencillas pero de una efectividad crucial. saludos!

0
Reply
80
Rodolfo Álvarez
Jul 2011

Excelente enfoque el diseño del interface social eliminar complicaciones que es «ecológico» y esto va en serio

Existe demasiado ruido pixelar!! y estos ejemplos que pones Laura son cada vez más útiles para el usuario, que sin dudas deberá acostumbrarse al minimalismo visual práctico es la información clara y directa para obtener la acción directa, ¿no es acaso lo que se busca?

Esta debe ser la WEB 2.0.1 (Menos ruido pixelar).

Saludos y felicitaciones.

0
Reply
1
Grace Arévalo
Jul 2011

muy buen tema, es verdad que cada vez los usuarios buscan que las interfaces sean más fáciles de usar y más llamativas que las de sus «competidores» por decirlo así.

Muy bien explicado.

0
Reply
0
Paul Medina
Jul 2011

Este articulo esta genial y muy acorde a nuestros tiempos... es cierto muchas empresas y freelance estan recurriendo a este tipo de recursos, creandose así lo que se llama «Social Media Marketing«

0
Reply
0
Juan Carlos Buitrago Var
Jul 2011

Un buen material pedagógico!

0
Reply
0
Leandro Aquino
Jul 2011

Me encantó el artículo!

0
Reply
0
Luis Antonio Vinueza
Jul 2011

Bastante bien estructurado el artículo, y concuerdo que cada vez es más notorio que el diseño del interfaz es un recurso dicidor al momento de le elección de una red social.

0
Reply
0
Fidel Romero
Jul 2011

Además de toda esta información tan acertada y muy importante, hay otro factor clave que quisiera agregar y que se refiere a la HOMOGENEIDAD en los componentes que conforma las webs de redes sociales. Cada uno de ellos mantiene una coherencia entre sí logrando un único fin, comunicar un mensaje que representa a la empresa o pers0na.

0
Reply
0
Edvin Pacheco
Jul 2011

exacto buen articulo la verdad es un tema importante, y ver ciertas cosas importantes en una re social

0
Reply
0
Melisa Tonini
Jul 2011

Muy interesante el articulo. La usabilidad y la simpleza es lo que busca el usuario cuando maneja redes sociales. Ademas muy interesantes las características bien explicadas por separado. Felicitaciones!

0
Reply

Upcoming online courses

Branding Corporativo

Branding Corporativo

Cómo planificar, construir y gestionar la marca de empresas e instituciones

4 weeks
17 Septiembre

Estrategia de Marca

Estrategia de Marca

15 claves para programar el diseño de símbolos y logotipos de alto rendimiento

4 weeks
29 Octubre

Relecturas del Diseño

Relecturas del Diseño

Una inmersión en el discurso sobre el diseño para despejar sus nociones más controvertidas: creatividad, innovación, arte, tecnología, función social...

4 weeks
28 Enero 2019

Branding: Diseñador y Cliente

Branding: Diseñador y Cliente

Tratar con el cliente, hacer presupuestos y planificar las etapas de la creación de una marca

3 weeks
22 Abril 2019

Auditoría de Marca

Auditoría de Marca

Taller de práctica profesional: análisis, diagnóstico y programa de marca sobre casos reales

6 weeks
22 Junio 2019