Diseño para la Web Social

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

Retrato de Laura Pérez Vanmorlegan Laura Pérez Vanmorlegan Buenos Aires Seguidores: 1

Opiniones:
38
Votos:
68
Compartir:
Ilustración principal del artículo Diseño para la Web Social

Ú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.

Retrato de Laura Pérez Vanmorlegan Laura Pérez Vanmorlegan Buenos Aires Seguidores: 1

Opiniones:
38
Votos:
68
Compartir:

Colabora con la difusión de este artículo traduciéndolo

Traducir al inglés Traducir al italiano Traducir al portugués
Código QR de acceso al artículo Diseño para la Web Social

Este artículo no expresa la opinión de los editores y responsables de FOROALFA, quienes no asumen responsabilidad alguna por su autoría y naturaleza. Para reproducirlo, salvo que estuviera expresamente indicado, por favor solicitar autorización al autor. Dada la gratuidad de este sitio y la condición hiper-textual del medio, agradeceremos evitar la reproducción total en otros sitios Web.

Debate

Logotipo de
Mi opinión:

Ingresa con tu cuenta para opinar en este artículo. Si no la tienes, crea tu cuenta gratis ahora.

Retrato de Kavii Tzita Flaz
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
Responder
Retrato de Alejandro Arrojo
77
Alejandro Arrojo
Sep 2011

Un artículo muy útil. excelente aporte!

0
Responder
Retrato de Mielworks! Design Team
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
Responder
Retrato de Joaquín Ortega
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
Responder
Retrato de Lorena Dagdug
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
Responder
Retrato de Daniel Zetune
1
Daniel Zetune
Ago 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
Responder
Retrato de Juan Manuel Agudelo Suarez
0
Juan Manuel Agudelo Suarez
Ago 2011

Un articulo muy interesante!!!

0
Responder
Retrato de Mayra Escalante
0
Mayra Escalante
Ago 2011

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

0
Responder
Retrato de Yaritza Zamora
0
Yaritza Zamora
Ago 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
Responder
Retrato de Ricardo Palmieri
22
Ricardo Palmieri
Ago 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
Responder

Te podrían interesar

Retrato de Dante Claudio Reynoso
Autor:
Dante Claudio Reynoso
Título:
El mercado de las respuestas
Sinopsis:
Los buscadores proponen potentes integraciones. La calidad de sus respuestas influye en cómo pensamos y nos movemos en la red, paranoias incluidas.
Compartir:
Interacciones:
Votos:
15
Opiniones:
7
Seguidores:
52
Ilustración principal del artículo Instagram: el furor por la imagen ubicua
Autor:
Greta Sánchez
Título:
Instagram: el furor por la imagen ubicua
Sinopsis:
La red social de imágenes más exitosa, más allá de los prejuicios sobre su trivialidad, también es una herramienta de promoción, educación e investigación.
Traducciones:
Compartir:
Interacciones:
Votos:
98
Opiniones:
58
Seguidores:
79
Retrato de Gonzalo De La Cuadra Reveco
Autor:
Gonzalo De La Cuadra Reveco
Título:
Comunicación, diseño y accesibilidad
Sinopsis:
Problemáticas y desafios de la comunicación y el diseño a la hora de trabajar la accesibilidad.
Compartir:
Interacciones:
Votos:
61
Opiniones:
21
Seguidores:
36
Retrato de Dante Claudio Reynoso
Autor:
Dante Claudio Reynoso
Título:
Publicidad en las redes sociales
Sinopsis:
Cuando charlamos, ¿tenemos ganas de comprar?
Compartir:
Interacciones:
Votos:
55
Opiniones:
30
Seguidores:
52
Retrato de Dante Claudio Reynoso
Autor:
Dante Claudio Reynoso
Título:
Herramientas para proyectar en los canales sociales
Sinopsis:
Gracias al contacto directo con clientes que «necesitan comunicar» hemos hecho frente a la realidad de los canales sociales. Y el desafío no termina de definirse.
Compartir:
Interacciones:
Votos:
55
Opiniones:
6
Seguidores:
52
Ilustración principal del artículo Marketing de guerrilla vs. desinformación sexual
Autor:
Blue Mercadotecnia
Título:
Marketing de guerrilla vs. desinformación sexual
Sinopsis:
Estrategia BTL de marketing social 
que alcanza grandes resultados con pequeñas inversiones.
Compartir:
Interacciones:
Votos:
90
Opiniones:
43
Seguidores:
18

Próximos cursos online

Desarrollamos para ti los mejores cursos online de actualización profesional, que te permitirán formarte y especializarte de la mano de renombrados especialistas

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 semanas
16 Septiembre

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 semanas
30 Septiembre

Branding Corporativo

Branding Corporativo

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

4 semanas
21 Octubre

Estrategia de Marca

Estrategia de Marca

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

4 semanas
17 Noviembre

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 semanas
3 Febrero