metodo lombard visual engineering

Evento "Del Design Thinking al Design Doing" - Método Lombard

Nuestra diseñadora Laura Martínez fue ayer a la conferencia "Del Design Thinking al Design Doing o cómo convertir una idea en una start-up" organizada por Experience_Lab en el Movistar Centre.

La charla fue introducida por Xavier Verdaguer (creador del Imagine) y Julie Chrysler (directora del Imagine Africa) estaba enfocada principalmente en explicar el Método Lombard de Innovación Disruptiva. Para explicar este método, contó con diferentes Dreamers (participantes de diferentes ediciones del Imagine Express). Cada uno de ellos explicó una de las fases del método Lombard poniendo como ejemplo su proyecto presentada en alguna edición del Imagine.

El Método Lombard es un proceso de aprendizaje que nace de los principios del emprendimiento y la innovación disruptiva. Fue desarrollado por el equipo de Imagine desde 2011, principalmente en Sillicon Valley. Lombard está estructurado en 4 fases: Identificar el problema,  generar valor, prototipar y comunicar la idea. La metodología ayuda a generar las actitudes que llevan a innovar como puede ser aplazar el juicio o ver los errores como parte del proceso.

El nombre del método viene de la calle Lombard de San Francisco, famosa por su pendiente y sus 8 curvas muy pronunciadas, que permiten allanar la pendiente y que de ese modo los coches puedan circular por esa calle.

1 Calle, 8 Curvas, 4 Fases, 1 sólo método.

A continuación vamos a explicar las 4 fases del Método Lombard explicada por cada uno de los Dreamers.

1. Identificar el problema

Esta fase consiste en identificar o replantear el problema, ya que uno de los grandes errores en creatividad es que enseguida nos ponemos a pensar soluciones, pero es básico volver a plantear el problema y ponerlo en duda.

Malwine Steinbok, participante del Imagine 2014 del que nació "Wesura". Su equipo del Imagine Express 2014 tenían el reto de crear un seguro que ayudara a disminuir el riesgo de siniestro. A partir de ahí vieron que realmente podría haber un problema de confianza de las aseguradoras. La solución que propusieron fue "Wesura", un seguro colaborativo basado en la confianza, en el que los usuarios pueden unirse con sus amigos y familiares para proteger sus pertenencias haciendo que la desconfianza de las aseguradoras hacia los que reclaman el robo sea validada por la comunidad del reclamante

 

2. Generar valor

Esta fase consiste en generar ideas pero que aporten en todo momento valor para los usuarios. Se tiene que buscar ideas disruptivas ya que vivimos en un momento en el que ya no funcionan las ideas convencionales.

La dreamer Diana Ballart nos presentó el proyecto "Chupachip", que consiste en cambiar disruptivamente la forma en la que se detecta la diabetes en niños. Lo que hicieron fué crear un caramelo que los niños, al chuparlo y generar saliva, detectaba si tenían diabetes a través de un mecanismo.

metodo lombard fase 2 visual engineering

 

3. Prototipar

Esa fase consiste en el prototipaje. Si se tiene una idea se debe probar lo antes posible aunque sea en fase beta.

Marc Gaixas nos presentó el proyecto "Fly me to the moon". El problema que se plantearon es que mucha gente terminaba guardando las cenizas de sus seres queridos en casa y tuvieron la idea de crear un prototipo que lo que hiciera fuera llevar las cenizas a 30.000 metros de altura y esparcirlas en el cielo cumpliendo el tópico de "llévame a la luna".

El prototipo que crearon fue un globo aerostático en el que llevara una urna biodegradable. Después de varias pruebas, alguna de ellas fallida, las primeras cenizas con las que lanzaron el prototipo fueron las de Neko, el gato de uno de los miembros del equipo.

metodo lombard fase 3 visual engineering

 

4. Comunicar la idea

Una buena idea, si no se comunica bien, no sirve para nada. Todos los emprendedores deben saber comunicar y ocuparse de hacerlo.

Adrià Curran es un médico que investiga sobre anafilaxia, una reacción alérgica grave. Participó en el Imagine 2013 junto con otra médico Anna Sala y crearon "AnAPPhylaxis".

A través del inyector de adrenalina, una carcasa inteligente y la aplicación móvil, "AnAPPhylaxis" es capaz de detectar el nivel de alergia que está afectando a tu cuerpo y ayuda a evitar hechos trágicos. Lala aplicación móvil, que está conectada a lacarcasa inteligente, es capaz de avisar al paciente si se ha olvidado el inyector de adrenalina en casa, si ésta no está conservado en la temperatura adecuada o si no está en buen estado. Además, con solo abrir la carcasa del inyector, la app avisa a los contactos de emergencia del paciente y les indica su estado y ubicación. Por último, la app abre automáticamente un vídeo explicativo de como inyectar la adrenalina al paciente, de modo que si el paciente está inconsciente, cualquier persona pueda asistirlo de forma rápida.

Ellos, como médicos especializados en el tema y conociéndolo en profundidad, supieron comunicar muy bien su idea y por eso ganaron la edición del Imagine2013. Cuando sabes de lo que hablas sabes comunicarlo bien.

metodo lombard fase 4 visual engineering

 

Imagine Africa 2018

Por último Mamadou Korka nos habló del Imagine Africa 2018. Mamadou és un chico senagalés que vino a Europa hace unos diez años. Ahora, convertido en un dreamer, quiere hacer realidad su sueño: hacer el Imagine en Africa. Quiere poder dar esa oportunidad a gente nativa africana y contribuir así en el desarrollo de Africa.

It always seems imposible until it's done (Nelson Mandela)


penalización algorítmica google visual engineering

Penalización algorítmica de Google

Una penalización algorítmica es cuando un algoritmo detecta que tu sitio incumple las directrices del buscador en cierto grado y automáticamente te aplica una sanción.

¿Qué es el algoritmo de Google?

El algoritmo de Google es la forma que tiene el buscador de posicionar las páginas ante una búsqueda, es decir, es lo que decide si sales primero o en quinta página.

google-ranking-factors visual engineering

El problema viene cuando vemos que el algoritmo cambia unas 500 veces al año (cada 17.5 horas) y resulta difícil seguirle la pista.

Los cambios en el Algoritmo se orientan en dos aspectos:

  • Limpiar de la SERP (Search Engine Results Page) los resultados poco relevantes y spammy
  • Adaptarse a las necesidades de los usuarios y a las circunstancias del momento
  • Acercarse cada vez más a un buscador semántico

Actualmente nos encontramos con los siguientes cambios que se aplicaron en el algoritmo:

  • Panda
  • Penguin
  • Colibrí
  • Pigeon
  • Búho
  • Otros factores

Penalización algorítmica: PANDA

Se centra en la calidad del contenido. Su aparición proviene principalmente de la proliferación de webs con poco contenido, contenido duplicado, malware,.. También es importante conseguir tener contenido que sea compartible. Fue lanzado por primera vez el 23 de febrero del 2011.

Penalización algorítmica google panda visual engineering

Penalización algorítmica: PENGUIN

Se centra en la calidad de los enlaces. Google Penguin está destinado a filtrar de la SERP aquellas webs cuyo portfolio de links recibidos de otras webs no es natural, que sea spam o que no aporte nada al usuario. Es importante también conseguir enlaces en fuentes de calidad. Fue lanzado por primera vez el 24 de Abril del 2012.

Penalización algorítmica penguin google visual engineering

Penalización algorítmica: HUMMINGBIRD O COLIBRÍ

Colibrí NO es realmente un algoritmo que PENALIZA como Panda y Penguin, sino que tiene el objetivo de humanizar más el navegador que ya de por sí lo es. Es decir, trata de comprender y facilitar la búsqueda del usuario. Fue lanzado el 20 de Agosto del 2013.

Penalización algorítmica google-hummingbird-visual engineering

Penalización algorítmica: PIGEON

Se especializa en ofrecer una mejor experiencia en los resultados de las búsquedas locales. Busca priorizar los resultados de los sitios Web locales y los negocios más cercanos a la ubicación del usuario. Fue lanzado el 24 de Julio de 2014.

Penalización algorítmica Pigeon-google visual engineering

Penalización algorítmica: BÚHO

Éste es el algoritmo más reciente que salió justo el año pasado, en el 2017. Su trabajo consiste en aumentar la calidad y la autoridad del contenido. Filtra aquel contenido que pueda ser engañoso, lo que dice ser y no es, lo invasivo y lo que es inoportuno. Integra lo interesante con lo adecuado y por supuesto, también penaliza.

Penalización algorítmica owl google visual engineering

NOTA: Una sanción algorítmica sólo puede ser levantada nuevamente por el mismo algoritmo del filtro. No es posible una intervención manual por parte de un empleado de Google.

Penalización algorítmica: OTROS FACTORES

Otros factores que también afectan al algoritmo son:

  • Pirate: Google vigila y evita posicionar aquellas páginas que sean piratas o aquellas que tengan infracciones de derechos de autor. Se trata de aquellas páginas que contienen libros, películas y música que tienen contenido pirateado.

  • Mobile friendly: Una de las claves más importantes es la navegación en dispositivos móviles, de cara un futuro inmediato, y al presente. Es importante que toda web esté adaptada al móvil o a cualquier dispositivo portátil. Google premia enormemente en cuanto a posicionamiento, que nuestra web cumpla con estos estándares de navegación móvil.

  • Búsqueda por voz: Es una de las características en auge. Estas búsquedas suelen ser cortas, sencillas y precisas. Aquí es donde radica la importancia de que nuestra web, sea accesible a este tipo de búsquedas, pues el número de las mismas a las que accederemos, se verá incrementado, con el paso del tiempo.

  • Seguridad: Es conocido, que Google premia la seguridad, tanto es así, que sin ir más lejos, navegar por sitios web sin protocolo HTTPS, será visto por Chrome como sitio no seguro, y esto repercutirá directamente, en las visitas que podamos obtener, estamos hablando de potenciales clientes que no queremos perder. De ese modo, los sitios web sin HTTPS perderán posiciones, o incluso, desaparecerán de las primeras páginas de resultado.

  • Redes sociales: Otro gigante de internet, son las redes sociales: Youtube, Twitter, Facebook e Instagram, pueden ser, y deberían ser, nuestros grandes aliadas a la hora del marketing, y a la hora de posicionarnos en las búsquedas. Cada vez toma más fuerza la publicidad online, y estas plataformas, cuentan con su sistema de anuncios; tenemos que aprovechar esta oportunidad.

Por último, como ya hemos visto anteriormente, también existe otro tipo de penalización de Google,  la penalización manual, que nos puede imponer una sanción y en ese caso es mucho más difícil de resolver. Pero antes, si quieres saber qué sucede con las penalizaciones y cómo prevenirlas, accede aquí.


google-penalización-manual

Penalización manual de Google

En un post anterior os hablamos de las distintas penalizaciones de Google que podían hacer que nuestra web pasara de tener una posición competitiva en los buscadores a desaparecer de ellos. Existen dos tipos de penalización: manual y algorítmica. Hoy vamos a hablar de una de ellas: la penalización manual.

Se entiende bajo penalización manual, la intervención activa de un empleado de Google como por ejemplo, del departamento de Search Quality o Webspam. Los empleados de Google someten a los sitios web a un análisis manual si se sospecha que han violado las directrices según Webmaster de Google.

Los siete casos que se muestran a continuación pueden ser una de las razones por las que se ha producido una intervención manual y, por consiguiente, la imposición de una sanción por parte de Google:

  • Spam generados por los usuarios
  • Texto oculto (que está visible para los rastreadores pero no para los usuarios) y/o spam de palabra claves
  • Spam puro
  • Contenido superficial de poco o ningún valor para el usuario
  • Backlinks no naturales
  • Enlaces no naturales de tu sitio Web a otro
  • Backlinks no naturales – impacto de página

Dependiendo de la extensión y la valoración de la infracción, se definirá un período de sanción, en el cual el sitio Web esta sujeto al castigo (mínimo 30 días).

QUÉ SUCEDE SI HE RECIBIDO UNA PENALIZACIÓN MANUAL

Si tu sitio Web fue penalizado por Google de forma manual, esto se comunicará al webmaster sancionado mediante Google Webmaster Tools (ahora Google Search Console) donde se puede obtener información acerca de las medidas manuales tomadas en "Manual Actions":

Resultado de imagen de google search console manual action

Si hay una sanción se verá de la siguiente forma:

penalización manual google visual engineering

CÓMO SOLUCIONAR UNA PENALIZACIÓN MANUAL

Si se recibe un aviso de que se ha puesto una sanción manual debido a una “infraccción XY”:

  1. Se debe ser activo y revisar el dominio y su contenido con respecto a las directrices de calidad de búsqueda.
  2. Una vez corregido, puede solicitarse a Google la llamada Reconsideration Request (Request a Review) que es una solicitud de una nueva revisión manual del sitio Web.

Ver qué incluir en una solicitud de reconsideración:

Cosas que se recomiendan en una solicitud:

  • Usa un tono agradable, educado y respetuoso.
  • Acepta la responsabilidad.
  • Si fue la agencia SEO que contrataste, menciónala.
  • Explica una por una las medidas correctoras que hayas tomado.
  • Incorpora documentación que lo respalde, como emails y capturas de pantalla.
  • Menciona el archivo Disavow si la has usado.
  • Deja claro que te comprometes a cumplir las reglas a partir de ahora.

Una vez solicitada, se obtiene en primer lugar una confirmación de que se ha recibido la solicitud para la reconsideración por parte de Google. Unos días o máximo unas semanas más tarde se obtiene una respuesta junto con la EVALUACIÓN DEL CASO en cuestión por parte de Google.

Por ejemplo:

penalización manual google visual engineering

 

Como se puede observar arriba, no hay ninguna garantía de éxito de poder anular la sanción, se trata de una decisión de los empleados de Google.

Por otro lado, existe la penalización algorítmica que es más fácil de solucionar pero pueden existir muchos más motivos para recibir una sanción. Pero antes, si quieres saber qué sucede con las penalizaciones y cómo prevenirlas, accede aquí.


5 principios en diseño ux visual engineering

5 principios del diseño UX

Existen 5 principios del diseño UX que todo diseñador tiene que tener en cuenta:

  • Consistencia
  • Affordance
  • Predictability
  • Feedback
  • Learnability

Consistencia

El primero de los 5 principios del diseño UX es la consistencia. La consistencia es la coherencia entre los elementos de un conjunto. Cada uno de los elementos responde a una acción o función, y cada uno debe cumplir la suya, no la de otro elemento, y debe estar a la misma onda que los demás elementos.

La mayoría de veces la interacción de los usuarios con los elementos viene dada por reglas o normas que el usuario ya conoce, ya sea por aprendizaje interno o externo.

Ejemplo Google docs

En el caso de Google Docs para iPhone, el look & feel que usan es el de Android. Esto tiene un motivo claro, y es que Google Docs es de Google, al igual que Android. Es por este motivo que usan el estilo y los gestos de Android.

Pero aquí es cuando entra la duda si es del todo correcto, ya que los usuarios de iPhone están acostumbrados a unas interacciones distintas que los usuarios de Android, y esto puede llevar a confusión.

google docs principios del diseño UX visual engineering

Affordance

El segundo de los 5 principios en el diseño UX es el affordance. El affordance son las características perceptibles del objeto que hacen que tenga un aspecto intuitivo a la hora de saber como usarlo. Es decir, es la cualidad de cada uno de los elementos que les permite realizar su función.

Un caso típico donde no se cumple el principio de affordance seria cuando hay un botón que no parece un botón, es decir, que no parece clicable. Eso hace que el usuario se confunda y deje de hacer la acción.

Predictability

El tercero de los 5 principios del diseño UX es la predictability. Predictability quiere decir que todos los aspectos de la interacción del diseño deberían cumplir con las expectativas de que pasará. Si puedes predecir de forma minuciosa lo que pasará en una interacción es porque la acción es clara, lógica y entendible.

Es decir, si hay un botón que pone IR A LA HOME, cuando el usuario clicara, tendría que ir a parar directamente a la home. Si en vez de ir a la home se fuera a parar a otra sección, no se estaría cumpliendo el principio de predictability.

Feedback

Es el penúltimo de los 5 principios en el diseño UX. El feedback consiste en dar al usuario una razón por la cual ha pasado una acción. El usuario quiere saber el motivo si algo deja de funcionar. Cuando esto no pasa, se está incumpliendo el principio de feedback. Esto puede provocar que el usuario se sienta perdido en el uso de una interfaz, y que no sepa por donde seguir.

Un caso típico es cuando un usuario está logueado en una plataforma bancaria. Si durante un período de tiempo el usuario no interactúa con la interfaz, por razones de seguridad, la sesión del usuario se cierra de forma automática. Esta es una buena práctica ya que evita dejar abierta la sesión en los navegadores. El problema es que no da ninguna información, con lo cual, no cumple el principio de feedback. Esto se solucionaría simplemente añadiendo un texto donde ponga: "Se ha cerrado la sesión por seguridad".

Learnability

Finalmente, el último de los 5 principios del diseño UX es la learnability. La learnability es la curva de aprendizaje que tiene una acción para un usuario. Si la curva es menor, significa que el usuario va a usar correctamente la interfaz con un menor tiempo. A veces las interfaces innovan dificultando una acción con un nuevo comportamiento, ya sea un gesto nuevo en mobile…

Si es una acción que no es imprescindible, no pasa nada si el usuario no lo sabe usar, ya que puede descubrirlo con el tiempo. Aún así, no todos los usuarios son expertos, y a veces está bien poner un tip para ayudarles a que lo descubran con el tiempo.

Esas acciones "escondidas" crean un engagement con la marca, y es por eso que a veces las grandes marcas juegan con esto.

 

Fuente: Laura Martínez, diseñadora UI/UX de Visual Engineering.


penalizaciones de google-blog-visual-engineering

Penalizaciones de Google y buenas prácticas

Las penalizaciones de Google son la peor pesadilla de todo webmaster. Un día puedes estar arriba, disfrutando de una posición ultra-competitiva, y al día siguiente has desaparecido completamente de los resultados de búsqueda.

¿TE HA PENALIZADO GOOGLE?

Cuando alguien se encuentra con una pérdida repentina del tráfico en su web, lo primero que se nos ocurre pensar es que nos han penalizado. ¡Pero no siempre es así! Puede ser debido a: fluctuaciones en los resultados del buscador, las tendencias de búsqueda cambian, tus competidores te ganan, o por un problema con el archivo robots.txt.

Primero debes descartar cualquiera de estas posibilidades y si es así, entonces sí te debes plantearte una penalización.

¿CÓMO SABES SI HAS CAÍDO EN UNA DE LAS PENALIZACIONES DE GOOGLE?

Éstos son los síntomas comunes de las penalizaciones de Google:

  • El tráfico orgánico procedente de Google se reduce
  • El sitio pierde visibilidad para algunas o todas las palabras clave
  • Ciertas páginas desaparecen de los resultados de búsqueda
  • El dominio deja de aparecer al buscarlo por su nombre
  • El dominio se desindexa del buscador

Estos síntomas no aparecen por casualidad. Generalmente, Google impone sanciones por:

  • Crear enlaces artificiales para potenciar los rankings
  • Recargar las páginas de palabras clave para aumentar la relevancia
  • Copiar contenidos de otras páginas
  • Llenar el pie de página de enlaces sin relación
  • Hacer intercambios excesivos de enlaces
  • Comprar o vender enlaces
  • Emplear textos ocultos
  • Mostrar un contenido al buscador y otro diferente al usuario

penalizaciones de google visual engineering

TIPOS DE PENALIZACIONES DE GOOGLE

Penalizaciones de Google manuales

Se inician por dos razones:

  • Tu sitio ha disparado una señal de alarma
  • Alguien ha enviado un informe de spam.

Tras esto un miembro del buscador revisa tu sitio y, si es pertinente, aplica una acción manual. Posteriormente recibes una notificación a través de Search Console.

Es el caso más grave y costoso de recuperar.

Penalizaciones de Google algorítmicas

Un algoritmo detecta que tu sitio incumple las directrices del buscador en cierto grado y automáticamente te aplica una sanción (ej: -20 posiciones en el ranking). Constantemente se revisa el algoritmo, así que hay que ser flexibles a los cambios.

Existen 4 cambios en el algoritmo importantes:

  • PANDA: Se centra en la calidad del contenido. Su aparición proviene principalmente de la proliferación de webs con poco contenido, contenido duplicado, malware,.. Fue lanzado por primera vez el 23 de febrero del 2011.
  • PENGUIN: Se centra en la calidad de los enlaces. Google Penguin está destinado a filtrar de la SERP aquellas webs cuyo portfolio de links recibidos de otras webs no es natural. Fue lanzado por primera vez el 24 de Abril del 2012.
  • COLIBRÍ: Colibrí NO es realmente un algoritmo que PENALIZA como Panda y Penguin, sino que tiene el objetivo de humanizar más el navegador que ya de por sí lo es. Es decir, trata de comprender y facilitar la búsqueda del usuario. Fue lanzado el 20 de Agosto del 2013.
  • PIGEON: Se especializa en ofrecer una mejor experiencia en los resultados de las búsquedas locales. Busca priorizar los resultados de los sitios Web locales y los negocios más cercanos a la ubicación del usuario. Fue lanzado el 24 de Julio de 2014.

Aquí no recibes ningún tipo de notificación, pero es más fácil de solucionar.

Es importante que sepas cuál es tu caso ya que el procedimiento para recuperarse varía. Si Google te ha mandado un mensaje a través de Search Console no hay duda de que te ha penalizado manualmente.

penalizaciones de google visual engineering

BUENAS PRÁCTICAS PARA EVITAR LAS PENALIZACIONES DE GOOGLE

Existen buenas prácticas para developers a la hora de desarrollar webs para evitar que su página quede penalizada por Google.

  • Web adaptative (PIGEON)
  • No crear una web spam o con el mismo contenido que otra web (PENALIZACIÓN MANUAL o PANDA)
  • Si es un negocio local, registrarte en Google My Business y en algunos directorios de localización tipo Yelp (PIGEON)
  • Indicar en el “Meta-Title” tu localización (PIGEON)
  • No crear texto oculto y/o spam de palabra claves (PENALIZACIÓN MANUAL)
  • Evitar el keyword stuffing: abuso excesivo de palabras clave (PANDA)
  • No crear enlaces no naturales de tu sitio Web a otro (PENALIZACIÓN MANUAL)
  • No crear enlaces recíprocos ni de mala calidad (PENGUIN)
  • Crear una página de "Preguntas frecuentes" (COLIBRÍ)

 

Fuente: Laura Ares, CM de Visual Engineering.


menu hamburguesa visual engineering

Análisis del menú hamburguesa en diseño de interfaz

El menú hamburguesa es un botón que normalmente se sitúa en una esquina de la parte superior de la interfaz gráfica, y que se usa como menú donde guardar enlaces o categorías para facilitar la navegación. La forma consiste en tres líneas horizontales paralelas, que sugieren una lista. Se llama hamburguesa por su similitud con las capas de una hamburguesa.

Ha sido muy usado durante los últimos años en el mundo web y móvil, y se ha vuelto un icono del diseño de interfaces. Pero últimamente se está cuestionando su utilidad, e incluso las últimas tendencias en diseño sugieren que éste desaparecerá en un futuro no muy lejano. Eso es debido a que no es muy útil a nivel de usabilidad ya que esconde acciones que podrían ser principales en un menú y obliga al usuario a tener que hacer varios clics para acceder a cualquier opción, retardando el tiempo de llegada a la acción.

PROS

  • Es reconocido por los usuarios como un menú, ya que se ha usado mucho últimamente.
  • Ocupa poco espacio en la pantalla, y eso puede ser útil en interfaces pequeñas.
  • Es minimalista estéticamente y hace que el diseño sea más limpio.

CONTRAS

  • Como está escondido, obliga al usuario a hacer un clic más para acceder a él.
  • Suelen ser como un cajón donde poner categorías, y la mayoría de veces se extiende demasiado, dificultando la acción o la búsqueda de cosas.
  • Es poco usable, y a veces las interfaces que usan este menú buscan más la estética que la usabilidad.
  • Esconde contenido y acciones, haciendo que no sea visible, y eso hace que el usuario pueda perderse.

MENÚ HAMBURGUESA EN EL MÓVIL

Si nos fijamos en el móvil, como las pantallas son de tamaño más reducido, el objetivo principal del menú hamburguesa es conseguir que la navegación sea lo más fluida posible ocupando el mínimo espacio posible de la pantalla. Es por eso que durante los últimos años se ha estado usando, ya que se escondía la navegación y dejaba libre la pantalla. Pero de esta forma también se escondían acciones principales que el usuario usaba a menudo.

Por este motivo, últimamente se están usando como alternativa tabs para las acciones principales, visibles en la pantalla para que el usuario pueda acceder a ellas en cualquier momento. Y si hay acciones secundarias, pensar en alternativas, como sí que podría
ser el menú hamburguesa en este caso, o las acciones de la barra de navegación, o las acciones flotantes en el caso de Android.

Pensando también en la ergonomía del móvil, la parte inferior de la pantalla es donde es más fácil acceder con el dedo. Es por eso que se sugiere poner las acciones principales en la parte inferior, como podrían ser los tabs, y las acciones secundarias en la parte superior, donde el usuario tiene que acceder un menor número de veces.

menu hamburguesa en el movil visual engineering
Ejemplo diseñadora Laura Martínez: App Amazon

MENÚ HAMBURGUESA EN LA WEB

En la web cambia un poco ya que normalmente los tamaños de la pantallas son más grandes y hay más espacio. Es por eso que
raramente se necesita un menú hamburguesa, ya que las acciones principales se pueden poner directamente a la vista sin necesidad de esconderlas, facilitando así el clic del usuario.

Se sugiere como buena práctica reducir el número de categorías, intentando llegar a un máximo de seis categorías principales. Estas categorías podrían ocupar la parte superior de una web, sin causar problemas de espacio al usuario.

menu hamburguesa en web visual engineering

En los pocos casos en que tendría sentido usar un menú hamburguesa en web sería cuando el contenido de la web es excesivo. En este caso sí sería necesario esconder los demás links en un menú secundario, que podría ser el menú hamburguesa. Aún así, dificulta la navegación del usuario, que si no están bien categorizadas las opciones dentro del menú de navegación.

Actualmente, los usuarios están bastante familiarizados en hacer scroll, y esto podría ser una alternativa. Simplemente poner el contenido a continuación, y usar un menú visible para facilitar el acceso a las distintas secciones específicas. Estas páginas son las nombradas landing pages, donde todo el contenido está en un scroll, sin necesidad de clics. Son útiles para webs de presentación con poco contenido y podrían ser una gran alternativa al menú hamburguesa.


sketch app blog visual engineering

Evento "SKETCH APP PARA JEDIS"

Hace unos días nuestros diseñadores fueron al evento de "Sketch app para Jedis" presentado por Carlos Alberto Rodriguez Behning en Transformabcn.

Como bien conocen nuestros diseñadores, Sketch App permite crear diseños, para móvil y web, con una agilidad y flexibilidad que muchas otras apps no habían ofrecido hasta el momento, y por eso se ha convertido en una herramienta indispensable en nuestra empresa.

Nuestros diseñadores trabajan día a día con este software, por eso es importante que conozcan todas las novedades y técnicas que puede ofrecer. Así, fueron a ese evento y allí aprendieron nuevos consejos más avanzados de Sketch y cómo diseñar colaborativamente con Dropbox y por qué es bueno hacerlo.

Algunos de los consejos que aprendieron fueron:

  • Limitar un símbolo. Son los Artboards de los símbolos que definirán sus límites, aún cuando las formas que estén dentro los superen. Pero puedes hacer que un Artboard tenga el mismo tamaño de su contenido seleccionándolo y eligiendo la opción “Resize to fit” en el Inspector
  • Redimensionar con la herramienta "scale" para que el objeto no pierda su forma original ni quede desproporcionado.
  • Combinar en un solo símbolo todos los estados de una barra de navegación. El truco, para ocultar capas de texto, es usar un [espacio] como el valor en el overrides de la capa a ocultar.
  • Utilizar un icono u otro elemento que actúe como un “placeholder” debajo de la imagen que será visible sólo en los casos en los que se mantenga la imagen original transparente. De ese modo servirá para simular que se está cargando la imagen real en vez de mostrarse como un elemento vacío.

En cuanto a trabajar conjuntamente Sketch y Dropbox, las claras ventajas que tiene es que permite a los diseñadores trabajar a la vez en el mismo proyecto sin afectar al otro y que todos los cambios se van sincronizando al momento de forma que todos pueden ver a tiempo real los cambios que se van aplicando en el diseño.

Finalmente, hicieron un ejemplo práctico para poder comprobar esas ventajas y aprender a trabajar con estas dos herramientas. Y además, uno de nuestros diseñadores ganó una licencia de Sketch para un año. ¡Felicidades!


Evento #UXRETAIL

Evento #UXRETAIL organizado por UX Academy

Ayer, nuestros diseñadores tuvieron la oportunidad de asistir al evento #UXRETAIL, organizado por UX Academy, en el Mobile World Center.

En el evento #UXRETAIL hubieron dos grandes ponentes: Laia Grassi y Adrià Montiel, ambos especializados en la experiencia de usuario en el mundo del retail.

#UXRETAIL: Laia Grassi

Laia Grassi empezó contando todas las novedades que había en el mercado. Entre estas comentó como Alexa de Amazon estaba empezando a estar presente en el sector del automóvil o como Facebook empezó a introducir el retail en su plataforma, así como también habló de Magic Leap y del Prime Air de Amazon.

Una vez comentadas las novedades, se centró en el tema de la experiencia del usuario en la que dio bastante énfasis que la experiencia tiene que ser omnicanal.

¿Qué significa esto?

El usuario tiene que tener siempre la misma experiencia, independientemente del dispositivo en el que navegue o incluso de si la experiencia es online u offline, ya que los usuarios pasan de un canal a otro continuamente.

Un dato curioso es que el 82% de clientes usan la app cuando están en la tienda: miran los objetos online y los comparan con la offline. Nos mostró el caso de Ikea, empresa para la cual trabaja y diseña la aplicación móvil. Cuando la diseñaron, pensaron en el potencial que tenía el hecho de que los usuarios llevaran la app cuando estaban dentro del establecimiento, y incluyeron distintas funcionalidades, como usar el escáner de productos a través de la cámara del móvil, lanzar ofertas específicas o mostrar el mapa de la tienda.

Destacó la importancia de no caer en errores típicos cuando se diseña para plataformas digitales. Es muy importante para el usuario, que la experiencia sea lo más fácil y óptima posible y que no resulte molesta. Por eso hay muchos pequeños detalles que los diseñadores deben considerar como por ejemplo si realmente se necesita un formulario de registro obligatorio, o si introducir un pop-up que pueda ser intrusivo. Si se tienen en cuenta todos estos detalles se puede conseguir que no sólo sea una experiencia amena sino que incluso resulte agradable y sorprendente.

#UXRETAIL: Adrià Montiel

“La venta no termina cuando el cliente paga, sino cuando vuelve”

Adrià Montiel es el Product Owner de Mango, por eso con su gran experiencia se centró en contar de primera mano cómo se debería diseñar una app para el sector del retail.

Entre muchos datos, nuestros diseñadores destacaron algunas de ellas de las que hablaremos a continuación.

Destacó que no es lo mismo la moda que la ropa básica. Según él, la moda es diferenciación y por ello las apps deben ser bonitas y que aporten valor a la moda y a la marca.

Aun así, se debe considerar también su conversión. Ya puede ser una app que tenga un gran diseño que si no aporta conversión, no es óptima. Se debe buscar un equilibrio entre ambos aspectos. En un market place, las reviews ayudan, pero para un retail de moda puede perder el sentido.

El producto debe ser aspiracional, por eso hay que considerar las fotos grandes, que sean visibles y atractivas.

Otro aspecto muy importante en el retail que quizás algunos no lo consideran significante es el "buscador". Es realmente imprescindible y puede afectar mucho a la conversión si el usuario tiene dificultades para localizarlo.

Además, nos contó algunas novedades, como el Echo Look y el On Demanding Apparel de Amazon:

  • Echo Look es un gadget con micrófono y altavoz que usa el asistente virtual Alexa. Tiene una cámara capaz de hacer fotos y vídeos que usa inteligencia artificial. Su objetivo es decirte si la ropa que llevas conjunta y si vas a la moda. Realiza un lookbook de tu ropa que sirve para sugerirte futuras compras en función de tu estilo.

  • On Demanding Apparel es un software que hace que una vez la gente ha comprado un elemento, automatice la producción de éste consiguiendo que sea lo más eficiente posible.

Por último, insistió en que no se debe olvidar las tiendas físicas y se tiene que buscar experiencias para que la gente no deje de ir.

 


zeplin visual engineering

ZEPLIN, UN SOFTWARE INDISPENSABLE EN NAPPTILUS

En nuestra empresa los diseñadores trabajan día a día con los developers. Para poder desempeñar bien el desarrollo de un proyecto es muy importante que tengan una comunicación muy activa. Existen dos software de diseño que facilitan este diálogo: Sketch y Zeplin.

Estas dos software de diseño indispensables en Napptilus permiten que los diseñadores y developers puedan estar al día de todos los cambios que se van desarrollando a lo largo del proyecto.

A continuación vamos a detallar la funcionalidad de Zeplin.

zeplin software indispensable napptilus

ZEPLIN

Zeplin es un software que permite incorporar los diseños hechos con Sketch cogiendo la guía de estilo, y que permite exportar los iconos de forma automatizada. En resumen, es el intermediario de nuestros diseñadores y developers.

Para nuestros diseñadores, ha sido top ya que les ha ahorrado muchas horas en la implementación de los diseños. A continuación vamos a contar cómo lo hacían anteriormente para justificar la gran solución que ha supuesto la aparición de esta herramienta:

Uno de los puntos a destacar es el intercambio de recursos, es decir, cómo informar a los developers de la tipografia que has utilizado y cómo son los iconos que has enviado. Se trata de problemas diarios en los que puedes dedicar muchas horas.  Antes de Zeplin, una vez diseñada una plantilla se exportaba en formato PNG y se pasaba al desarrollador. Además, se adjuntaba una hoja de estilo donde explicaba la tipografía de cada uno de los elementos y los colores, entre otras especificaciones. Finalmente, se tenía que exportar manualmente cada uno de los iconos, con formato @1x, @2x y @3x para iOS, y en hdpi, mdpi, xhdpi, xxhdpi i xxxhdpi para Android.

Ahora, con la aparición de Zeplin, eso ha quedado totalmente obsoleto. Ahora todo es tan fácil como diseñar en Sketch, marcar para qué plataforma estás diseñando (Android, iOS o web), señalar los iconos y subirlo a Zeplin. Una vez allí, el developer podrá ver la tipografía, los colores, descargarse automáticamente todas las medidas y la posibilidad de mostrar la navegación de las pantallas. Además, en las últimas actualizaciones también han incorporado la funcionalidad de control de versiones.

Y por último, permite hacer comentarios en cada pantalla de manera que si el developer tiene alguna duda o el diseñador quiere comentarle alguna cosa a él, pueden escribirlo directamente y mantener una comunicación activa.

zeplin software indispensable napptilus

Conoce la herramienta de Sketch en el siguiente enlace.


sketch visual engineering

SKETCH, UN SOFTWARE DE DISEÑO INDISPENSABLE EN NAPPTILUS

En nuestra empresa los diseñadores trabajan día a día con los developers. Para poder desempeñar bien el desarrollo de un proyecto es muy importante que tengan una comunicación muy activa. Existen dos software de diseño que facilitan este diálogo: Sketch y Zeplin.

Estos dos software de diseño indispensables en Napptilus permiten que los diseñadores y developers puedan estar al día de todos los cambios que se van desarrollando a lo largo del proyecto.

Hoy vamos a detallar la funcionalidad de Sketch.

SKETCH

Sketch es un software de diseño específico para diseño vectorial y se utiliza principalmente para diseñar tanto interfaces gráficas y móviles, como también logotipos e iconos.

Se trata de un software de pago y para utilizarlo es necesario comprar licencias a un precio de unos 100€ que tienen una duración de un año.

Nuestros diseñadores primero utilizaban el software de Adobe Photoshop, también de pago, pero con la aparición del Sketch concluyeron que éste era mucho más concreto y más eficaz cuando se trata de interfaces móviles y web. Como ya hemos comentado antes, éste último es un software para realizar diseño vectorial mientras que Photoshop no, y es ahí donde notaron la diferencia al momento de enviar recursos gráficos a los developers ya que Sketch, al ser vectorial, permite ajustar el tamaño sin afectar a la calidad.

Ofrece una interfaz más limpia, de fácil exportación y tiene más herramientas para conseguir al detalle todos los diseños planteados. También ofrece plantillas básicas de Android y iOS basadas en guías de estilo de ambas plataformas.

Por último tiene la opción de instalar muchos plugins que permiten desde generar contenido y imágenes de forma automática hasta exportar diseños a plataformas como Zeplin.

Además, Sketch es el software de moda en cuanto al diseño de interfaces y ha ganado muchos usuarios a lo largo del último año.

sketch software diseño napptilus

El próximo día os contaremos cómo funciona Zeplin.