KeCLab by King-eClient

¡Estrenamos sección! Con este post empezamos una nueva categoría, KeConcept. En ella encontrarás vocabulario utilizado en nuestro sector con el que nosotros ya nos hemos familiarizado aunque la mayoría de usuarios lo desconocen. Nuestro objetivo es conseguir acercar nuestro mundo tanto a suscriptores de nuestro blog como a los que acaben de descubrirnos.

Misión: Distinguir entre wireframe y grid

En el mundo online, se entiende por wireframe la esquematización sin ningún elemento gráfico de una página web o aplicación móvil. De este modo, se centra la atención en la arquitectura de la información sin desviar la atención con elementos visuales como colores, tipografías, imágenes, textos, etc.

Pero como una imagen vale más que mil palabras, aquí tenéis un ejemplo made in King-eClient.

El Wireframe es el paso previo al diseño y se utiliza como herramienta de comunicación entre el equipo que se ocupa de la arquitectura de la información y el equipo de diseño.

Lo habitual es hacer un wireframe para cada tipología de contenido. De este modo en nuestra web tendríamos un wireframe para la Home, otro para los servicios, otro para nuestros clientes, y así sucesivamente.

Esta herramienta también puede utilizarse en procesos de tests de usabilidad antes que la web o app empiece a diseñarse.

Cuando hablamos de Grid, hacemos referencia a la división del espacio de aquello que queremos diseñar, en columnas de igual anchura, respetando siempre el mismo margen entre ellas. El grosor de estas divisiones se define en función del elemento más pequeño que contendrá el diseño.

Estas divisiones sirven para estructurar los elementos dentro de la página o app de manera que quede destacado aquello que es más relevante. Como vemos en el ejemplo inferior, hay muchos tipus de distribución de los elementos. En la imagen central se presentan distintos modos de colocar los módulos:

En definitiva, la diferencia entre Wireframe y Grid es que el primero es un esbozo de lo que será la web o app y en el Grid se detallan las proporciones de cada uno de los elementos definidos en el Wireframe.

Uno de los primeros pasos que se ha de dar cuando se crea una empresa es crear la marca. El éxito de la empresa dependerá en parte de ella.

Hay aspectos que hacen que un logotipo sea único y esos mismos aspectos también pueden hacer que sea uno del montón. En éste post vamos a recoger algunas de las claves a la hora de crear una marca, darte ejemplos de lo que se debe y no se debe hacer.

Naming: Dar nombre a algo o crear nombres nuevos puede parecer algo muy simple al principio, pero el naming es todo un mundo.

La primera regla en el mundo del naming es crear nombres con pocos caracteres, sencillos y sobretodo originales. A veces puede ser interesante jugar con una rima, con pocas letras, o con letras que se repiten. Lo que queremos al final es que la gente no se olvide de nosotros, así que ha de ser fácil de recordar sin dejar de ser original. Por ejemplo si el nombre de nuestra marca es “Hermanos Sánchez”, va ser complicado recordar un apellido tan común, posiblemente caigamos en la duda de si era Gómez, Sánchez, García o Martínez.

A veces aún teniendo en cuenta estas reglas, existen otros contratiempos. El idioma suele ser uno de ellos, sobre todo cuando la empresa pretende internacionalizarse. Si desde un principio se tiene en cuenta este factor y se utilizan nombres simples nos ahorraremos muchos problemas de pronunciación. A la derecha encontraréis algunos ejemplos de éstos problemas.

El diseño: Para que un diseño tenga personalidad el diseñador ha de recibir un conjunto de inputs o de ideas para que no todo se base en hacer un logotipo “bonito”. En cuanto a diseño, tenemos que tener en cuenta los siguientes elementos:

• El color. El color tiene mucho que ver con la personalidad de la marca y al igual que el nombre, la combinación de colores también ha de ser simple. En éste punto puede ser muy útil la psicología del color.
• La tipografía,  siempre es bueno hacer uso de tipografías no muy complejas para que el logotipo sea legible en las dimensiones más reducidas. Y sobretodo es importante escoger una tipografía afín a la personalidad o al carácter de la empresa. Aquí tienes un buen ejemplo de catálogo tipográfico en dónde verás el amplio abanico de tipos que puedes encontrar.
• La forma. Las formas que componen el imagotipo han de ser simples e icónicas, cuanto más simple, más pregnante será la marca, por lo tanto, más fácilmente recordable. El círculo o el punto son las formas más simples existentes. Por lo tanto, son también las más fáciles de recordar, seguidas por el cubo y el triángulo.

El concepto. Si no hay un concepto detrás el logotipo no tendrá la suficiente personalidad y no logrará ser diferente y destacar del resto. La marca ha de representar algo; una idea, una actividad. Lo que no es aconsejable es que la idea o concepto supere al aspecto estético. Ambas partes han de estar en equilibrio.Si esto no es así, pueden darse errores como el del logotipo de las olimpiadas de Londres 2012.

Éste es un buen ejemplo del abuso de la importancia del logotipo en detrimento de la estética. Por eso, muy a pesar del trabajo de los diseñadores, se ha de tener muy en cuenta lo “bonito” que al fin y al cabo va a ser lo que llegue al público.

El triunfo o el fracaso depende de muchos factores pero si tienes en cuenta todos estos elementos a la hora de crear tu imagen de marca ya estas un paso más cerca del éxito.

Post by: Diana Yuste.

Los días 11 y 12 de mayo se celebró en Salamanca el Primer Encuentro de Profesionales de la Experiencia de Usuario en España. En este primer congreso se han abordado algunas de las temáticas relacionadas con los aspectos más importantes del sector. Las ponencias y las mesas redondas profundizaron sobre la realidad con la que conviven los profesionales en el día a día.

Uno de los temas estrellas fue el diseño para las tabletas. Se transmitió la importancia de realizar diseños usables que mejoren la experiencia de usuario, respetando las características y peculiaridades del soporte a la hora de la conceptualización. No romper las metáforas del mundo físico permitirá estar más cerca de esa sensación de realismo que buscamos en todo diseño.

Una visión interesante, aportada durante las jornadas, es la posibilidad de utilizar la tecnología para trasladar la conectividad y lo digital a los elementos físicos que nos rodean en la vida cotidiana. El objetivo: mejorar la vida para personas dependientes.

Lo que quedó claro es que en este mundo de la usabilidad y la UX existen muchas más dudas que certezas y que la simplicidad ayudará a enfocar mejor el producto, una opinión generalizada entre los profesionales de este campo. La mayor dificultad es que en el camino para llegar a esa simplicidad no nos olvidemos de lo esencial.

En estas jornadas, se analizó el concepto de prototipo y la necesidad de transmitir su importancia para cumplir los objetivos planteados en cualquier proyecto. Los tres principales usos del wireframe son la exploración, la comunicación y la evaluación.

En este primer encuentro también se profundizó en las barreras de uso y accesibilidad para las personas con alguna discapacidad sobre los que hablamos en nuestro último post, así como el desarrollo de una red social para un colectivo con discapacidad intelectual.

¿Y qué pasa cuando el usuario tiene que hacer algo aburrido o laborioso? En este caso, los profesionales tenemos el reto de hacerlo divertido y con una mejor experiencia de usuario.

A lo largo de los dos días, se debatió sobre los perfiles UX y hacia donde va nuestra profesión. Multidisciplinar, es la característica más demandada a los profesionales. Unos profesionales que, por otra parte, son poco conocidos en las Pymes y poco demandados más allá de Madrid y Barcelona.

Y como en todo evento de estas características no podía faltar la polémica, protagonizada en esta ocasión por la conveniencia o no de seguir realizando test de usuarios, los planes de formación propuestos para abordar la materia y algunas de las funciones que tenemos que desarrollar o los conocimientos que tenemos que aportar.

Sin duda, este primer encuentro servirá para dar a conocer mejor nuestra labor y cómo influye positivamente en las empresas a nivel de estrategia y negocio.

A esta meta ayudará la excelente organización y el éxito de convocatoria en la primera edición, a la que han asistido más de 400 profesionales.

Puedes encontrar más información sobre el evento en la web de UXSpain  y en su blog.

Post by Jose Miguel

¿Por qué todo el mundo habla de Pinterest? ¿Qué tiene esta red social que nos ha conquistado a todos?

Pinterest ha llegado con fuerza en un momento en el que es difícil que algo nos sorprenda  en tema de redes sociales. Después de meses oyendo hablar de esta nueva plataforma todos hemos tenido curiosidad en crear un perfil y ver “qué se cuece en Pinterest” y hemos visto como día a día iba creciendo a pasos de gigante.

Pero si nos estás leyendo y todo esto te suena a chino, la única explicación que se nos ocurre es que acabes de llegar de un retiro espiritual, sin wifi, sin 3G, sin smartphones… ¡pero no te preocupes! cuando acabes de leer este post te quedará todo un poco más claro y puede que seas uno de esos nuevos usuarios a los que les ha entrado el gusanillo de crearse un perfil y empezar a hacer “repins” sin parar. ¿Qué es eso de los “repins”? Paciencia… ¡sigue leyendo!

Primera pregunta: ya sabemos que es una red social, pero… ¿Qué nos ofrece de nuevo Pinterest? En pocas palabras: compartir imágenes con otros usuarios, de forma sencilla y divertida. Pero si eso es todo… ¿por qué se ha convertido en este fenómeno social? ¿Por qué las marcas también quieren estar en Pinterest? A continuación te damos algunos datos que ayudan a explicarlo, a conocer qué es y en qué se ha convertido esta nueva plataforma a priori con un funcionamiento tan fácil:

- Pinterest lleva funcionando desde 2010 y ya ha conseguido estar entre las 100 páginas con más tráfico.

-  La revista Time la eligió como uno de los 50 mejores sitios de 2011.

- El número de usuarios no para de crecer. Hoy tiene casi 5 millones de registrados (para no repetir usuarios), un millón y medio de visitas únicas al día, con una media de 15 minutos de tiempo de visita en la página.

- Entre septiembre y diciembre de 2011 el tráfico se multiplicó por 4, llegando a más de 7 millones de visitantes únicos, alcanzando en el mes de enero los 11,7 millones de visitantes únicos solo en EEUU.

- La mayoría de usuarios son mujeres y la franja de edad está entre los 18 y 34 años.

- El tiempo medio de visita en la página es de 98 minutos por usuario (lo que la convierte en la tercera red social en tiempo invertido después de Facebook y Tumblr).

- Según datos de ComsCore, desde mayo de 2011 hasta enero de 2012, Pinterest ha crecido un 1.348% en nuestro país, con 62.000 visitas el pasado mes de enero.

Si ya utilizas redes sociales como Facebook y Twitter, el funcionamiento de Pinterest teresultará muy familiar: podemos conectarnos a través de nuestras cuentas de Facebook y Twitter y, cómo no, publicar links en ellas; podemos etiquetar a otros usuarios, comentar y decir que nos gustan otras publicaciones, hacer “repins” (reenlazar imágenes) de lo que publiquen otros usuarios, etc. Además, desde tu página web y tu blog la gente podrá hacer “pin” de tus imágenes (enlazarlas en sus perfiles), al añadir el botón “Pin It” y compartirlo en sus perfiles de una forma muy fácil. Además puedes incluir el botón “Follow Me” en tu página, para conectarla con tu cuenta.

Pero, ¿qué es lo más interesante para las empresas o para promocionar tú tienda online? Pues aquí está la gran diferencia con otras redes sociales como tumblr, y es que después de ver como varias marcas cerraban sus tiendas en facebook, Pinterest está considerada por muchos expertos como una buena herramienta de comercio electrónico.

Por ejemplo, que estás en la enésima página web de tiendas de decoración  en tu búsqueda del sofá perfecto para tu salón y por fin lo encuentras. Después de visitar tantos sitios distintos, olvidarás fácilmente en cuál de ellos estaba este precioso sofá así que sólo tienes que clicar en “Pin it” y guardar la imagen en el cajón que elijas de tu Pinterest (en este caso podría ser, por ejemplo, decoración) para que cuando quieras ir a comprarlo puedas recuperar el enlace al clicar en la imagen guardada en tu Pinterest.

Tiendas online, marcas, revistas y otros negocios con amplio contenido gráfico, no han tardado en abrirse un perfil y empezar a compartir sus imágenes. Por citar un ejemplo, la revista Glamour.com ha conseguido más de 385.000 referencias únicas desde Pinterest en enero, una cifra que seguro que anima a muchas otras revistas online a crear su propio perfil.

Pero Pinterest tiene mucho más que imágenes: cuenta con una sección de vídeos, que aunque todavía no es tan conocida, seguro que en muy poco tiempo empezará a despuntar.

Por otra parte, hace unos días, y gracias a Cooltabs, ya podemos incluir en nuestra página de Facebook el contenido que generamos en Pinterest. Aquí os dejamos el link donde nos explican cómo hacerlo.

Aunque seguro que los usuarios agradecen que por ahora no tenga espacios publicitarios, nos preguntamos si pasará mucho tiempo antes de que los banners y anuncios acompañen al resto de imágenes. El tiempo lo dirá…

No sabemos si os ha resultado tan interesante como para que en estos momentos sigáis leyendo este post o ya estéis investigando por vuestra cuenta el universo Pinterest, pero si queréis saber más sobre el tema, aquí os dejamos algunos de los artículos que hemos visto por la red últimamente y creemos os pueden interesar.

- Pinterest como metáfora de un mundo enfermo, por Enrique Dans

- Los usuarios más seguidos

- Los pinterest de moda

- Y una infografía muy interesante

- 56 ideas para promocionar tu marca

Antes de despedirnos queremos agradecer este post a nuestra compañera de la oficina de Madrid Lorena Garcia @Lg_chin.

Si a ti también te apasiona Pinterest, ¡comparte tus comentarios con nosotros!

Sobre el papel, en oriente de derecha a izquierda y en occidente de izquierda a derecha. Pero cuando se trata de la pantalla, ¿hacia dónde se dirigen nuestros ojos? Para descubrir la respuesta se ha creado la tecnología del Eyetracking. La máquina registra tanto el movimiento ocular como el tiempo que los ojos enfocan a un mismo punto de la pantalla.

Ahora que Facebook ha anunciado que para finales de mes timeline se aplicará también a las páginas y que ya esta disponible para aquellos que quieran empezar a probarlo, en King-eClient  hemos querido usar la técnica del Eyetracking para respondernos una duda: ¿Qué es lo que más miramos del perfil antiguo de Facebook y qué es lo que más nos llama la atención en el nuevo timeline o biografía?  En el siguiente video veréis los resultados de este Eyetracking realizado con voluntarios, 5 chicos y cinco chicas de entre 25 y 35 años.

Las conclusiones a las que hemos llegado son:

• El contenido en el nuevo timeline llama más la atención a los usuarios y es más fácil de recordar gracias a la disposición de los elementos
• La opción de colocar el contenido en la parte central de la página ofrece la oportunidad de focalizar la atención de los usuarios en estas publicaciones. Así, recomendamos:
• Todo el contenido publicado que marquemos como eventos destacables de la historia corporativa, aparecerá centrado. Recomendamos utilizar esta nueva herramienta para mostrar los momentos importantes de la empresa desde su constitución hasta las nuevas inversiones. Con este paso, conseguimos humanizar la marca y enriquecer la biografía.
• Compartir información sobre los nuevos empleados es importante para dar una imagen de crecimiento.
• Compartir los premios y reconocimientos que reciba la empresa dará a conocer al público la calidad de nuestro trabajo.
• La cabecera del timeline es el primer elemento al que se dirigen los ojos de los usuarios por tanto proporciona una primera impresión de la empresa. Es importante escoger una buena imagen que represente la marca como el logo o los productos o una imagen que transmita los valores que definen la empresa.
• El mapa que aparece justo debajo de la cabecera es una manera muy visual de geolocalizar las tiendas y/o oficinas de la empresa.
•  Con timeline podemos multiplicar por dos el tamaño de las fotografías publicadas que más nos gusten para conseguir más visibilidad.
• Con timeline perdemos información sobre nuestras amistades por falta de visibilidad pero ganamos en información personal.

Fuentes: clasesdeperiodismo.com, Facebook

Nos acompaña sigilosamente a diario. En el metro, en el autobús, dentro del aeropuerto. Nos indica las distintas secciones de un museo o por dónde salir en caso de emergencia. Nos explica de forma clara el ininteligible sistema de votación norteamericano o el inexplicable gasto del Gobierno en la industria armamentística.

Nos brinda bonitas composiciones cromáticas y una gran variedad de formas y tamaños. Estudiando con atención y trabajando con precisión suiza nos llega a traducir idiomas tan complicados como la estadística.

La infografía representa de manera visual y sintetizada todo tipo de información, combinando tipografía y elementos icónicos.

Una buena definición sería la que el doctor en Comunicación Valero Sancho realizó:

“Aportación informativa, realizada con elementos icónicos tipográficos, que permite o facilita la comprensión de los acontecimientos, acciones o cosas de la actualidad o algunos de sus aspectos más significativos, y acompaña o sustituye al texto informativo”.

En una sociedad rápida, sobresaturada e inmensamente llena de impactos siempre viene bien que nos echen un cable y nos muestren de forma entendible la información que en muchos casos puede ser complicada, inaccesible, simple o aburrida . Y aunque la infografía no llegua al término de ciencia ni podemos encontrar su significado en la R.A.E, como diría Victor Hugo en referencia a la belleza, es tan útil como lo útil.

Algunos trabajos destacados en infografía:

• 35MM
• TN5 Digital Life
• Participant Media
• Datavisualization

Y las webs de algunos de los mejores grafistas:

• Harry Beck
• Gerd Arntz
• Otl Aicher

Si quieres compartir otros ejemplos o debatir sobre las posibilidades de la infografía, deja tu comentario.

DCU, más allá de la usabilidad y la user experiencie

Los aparatos o las indicaciones confusas pueden frustrar al usuario o hacerle sentir que está fallando en algo. Sin embargo, el problema está en el mismo proceso o diseño, que no ha sido creado teniendo siguiendo criterios de DCU.

Por eso, la metodología del Diseño Centrado en el Usuario (DCU o UCD en inglés, de User Centered Design) sitúa al individuo en el centro del diseño y del desarrollo de una aplicación o página web.

En el DCU se agrupan distintas técnicas, como el test de usuarios, la evaluación heurística, el card sorting, el eyetracking o el prototipado, entre otros. En la siguiente presentación explicamos más detalles de esta metodología de trabajo, decisiva para el éxito de una web: