(NUI) Natural User Interface – Diseñando con gestos en espacio aéreo

El movimiento de las manos es uno de los gestos más naturales e intuitivos, basta recordar a personas con las que hemos mantenido una conversación u observado mientras lo hacen y también nosotros mismo lanzando gestos de forma natural e intuitiva para comunicar o apoyar una idea.

starkHace un par de meses hemos estado metidos de cabeza diseñando y LUCHANDO con Leap Motion, personalmente esta tecnología me ha impresionado harto, si bien el lugar donde las personas interactuan con este tipo de interfaces es en las películas (Taller de Tony Stark) ahora estamos mas cerca de llevarlas a la realidad, eso si a menor escala y producciones complejas que son más efectista.

Leap Motion permite interactuar con la interfaz en un espacio aéreo sin tener contacto físico, sin usar un mouse, teclado, wacom, ni un gamepad, nuestro objetivo principal es definir como input gestos. Leap Motion cuenta con una bilbioteca de gestos básicos y testeados, cercanos a los que acostumbramos a realizar en otras interfaces y que han formando hábitos, aprendizaje y comprensióin. La comprensibilidad es fundamental para generar una NUI (Natural User Interface).

Elon Musk es el fundador de PayPal, Tesla Motors y SpaceX.
Herramienta de diseño interactivo: El uso de NX, un controlador Leap Motion y su propia gama de pantallas diseñadas a medida, SpaceX está explorando métodos de ingenieria para acelerar el flujo de trabajo mediante el diseño 3D. (y además es super cool!).
 

Heurísticas de LEAPMOTION

  1. Algunos gestos están muy bien definidos, otros son mucho más difícil de leer. Desde una perspectiva de producción, lo difícil es detectar estos gestos con un alto grado de precisión.
  2. Ergonomía. Teniendo en cuenta las limitaciones del cuerpo humano, el lugar de uso, y el contexto para la interacción, ¿cuáles son los problemas ergonómicos? ¿Alguien puede realizar esta interacción mientras se está relajado, o crea una tensión innecesaria? ¿El uso repetido de gestos puede convertirse estresante? ¿La interacción requiere un movimiento poco natural?.
  3. Dada la interacción configurada en una aplicación, ¿Son las transiciones claras y fáciles de aprender? ¿Qué tan fácil es detectarlas? ¿Qué sucede en el caso de las transiciones ambiguas?.
  4. El feedback puede tomar un montón de formas; visual, audio o háptica . La falta de información necesaria en la interfaz puede hacer fracasar una interacción.

 

Gestos predefinidos

gesture basic

  • Swipe: Movimiento lineal con la mano y dedos.
  • Circle: Dibujar un circulo en el aire.
  • Screen Tap: Movimiento como si pulsara sobre la pantalla.
  • Key Tap: Movimiento como si pulsara un botón de un teclado.

Además se puede obtener información como:

Hands: Información de las manos, la identidad (derecha o izquierda), la posición, orientación, velocidad, una lista con los dedos asociados a la mano…
Arm: Información del brazo, tamaño, orientación…
Fingers:  Información de cada dedo de una mano, son identificados por nombre y se puede obtener la dirección y posición. Además podemos obtener información de cada uno de los huesos:
Bone: Describe la posición y orientación de cada uno de los huesos de la mano.

See more at:

Uso de grillas en Diseño Web

grillas everywhere

Muchas cosas usan grillas, no las vemos, pero están ahí, sosteniendo el diseño, estas son usadas por diseñadores de interiores, industriales, urbanistas, arquitectos, diseñadores de impresión, ux, web, moda, etc… Las grillas en el diseño web proporcionan organización visual, continuidad, relación de piezas entre si, estética, control del proyecto y comodidad para el usuario. Por otra parte, también nos a ayuda en la producción ya que no se comienza de cero, reduciendo tiempos en el desarrollo. Existen frameworks de grillas como Bootstrap960 Grid System y Blueprint.

Un acercamiento al Uso de grillas en Diseño Web

Uso de grillas en Diseño Web

Márgenes
Los márgenes definen el límite del contenido del sitio, estos pueden no ser iguales en todo el sitio (pero normalmente son consistentes entre las páginas).

Rejas
Las rejas dividen el espacio interior de la página en partes uniformes, es el espacio en “blanco” entre las grillas. Estás pueden ser organizadas de forma horizontal, vertical o ambas.

Grillas
Este es el lugar donde se coloca el contenido ya sean textos y/o imágenes. Estos determinan la ubicación y el tamaño, pero debemos saber que si tenemos una grafica que se sale de una grilla, no significa que no se pueda hacer (mas adelante lo menciono).

¿Si diseño mis sitios con grillas, se va a ver igual? que FOME.

¡No! esta es una pregunta que tenemos por desconocimiento de esta técnica, en este layout tenemos las grillas, esto es sólo una parte del diseño en general, estas no son para rellenar con algo, sino para ayudar a la organización de los espacios. Si tenemos esta parte resuelta tendremos tiempo para centrarnos en otras cosas como el color, texturas, tipografías, etc.. (Ver ejemplo: cada diseño tiene una estructura de grillas similar (3 columnas), donde la comunicación y el diseño visual son distintos.

flourish

knowledgepharmacy

Cabrillo Coastal

Salirse de la grilla.

Otro ejemplo para demostrar lo mencionado anteriormente (salirse de la grilla, siempre y cuando la comunicación lo amerite).

Highrise

La página de tarifas de Highrise es un buen ejemplo. El plan “Plus” es el plan más popular y conveniente, por lo que para llamar la atención le han dado más importancia aumentándolo de tamaño con respecto a los otros.

Consideraciones

Una vez que tengamos lista nuestras grillas, nosotros como diseñadores somos quienes tomamos la decisión de cómo salir de esta cuando esto lo amerite. Esto en ningún caso significa que estamos usando malas prácticas. Los elementos pueden cruzar desde una columna a otra columna, hasta las podemos extender del inicio al final de la grillas.  “Personalmente creo que esta técnica no es necesaria para proyectos chicos.”

 

Proporción áurea en el Diseño Web

La belleza es una característica de una persona, animal, lugar, objeto o idea que proporciona una experiencia perceptual de placer, significado, o satisfacción. La belleza es estudiada como parte de la estética, la sociología, la psicología social y la cultura. Como una creación cultural, la belleza ha sido muy comercializada. Una “belleza ideal” es una entidad que es admirada, o posee características ampliamente atribuidas a la belleza en una cultura particular, para la perfección.” – descripción desde Wikipedia.

Siempre  he esquivado las matemáticas (también ilustración, pero no entra al caso) me aburrían mucho las encontraba cuadradas, fomes y pensaba que no me servirían en el futuro.

Sin embargo es raro descubrir que la mayoría de los diseños mas bellos, obras de arte, objetos e incluso personas tienen en común las matemáticas,esta teoría llamada proporción áurea, también conocida como razón áurea, razón dorada, media áurea y divina proporción, es un número irracional, φ = (1+√5)/2 ≈ 1.61803…  Y es considerada como la proporción perfecta. El ser humano ha demostrado una preferencia elemental y subconsciente por la estética de la proporción áurea. Normalmente elegimos como bellas las formas que respetan esta proporción, por encima de las que no lo hacen. Leonardo Da Vinci utilizó la proporción áurea con la Gioconda. Las pirámides de Egipto también fueron construidas manteniendo la proporción áurea y hasta la Torre Eiffel mantiene esta proporción.

mona lisa proporción aurea

Implementación en la Web

Para el contenido

Usar la proporción áurea es fácil. Podemos diseñar un sitio usando la proporción áurea con anchos fijos o flexibles. Por ejemplo partamos con la resolución mas usada 1024×768 entonces aplicamos esta proporción para 960px  se divide por 1.62, y el resultado “para este caso”, es593px este será el ancho del área de contenido y para sacar el el ancho del sidebar es (960-593= 367px).

Esta regla y formula no sólo sirve para definir el ancho o la proporción del contenido del sitio web, también se puede aplicar para la altura  y cualquier área o parte del sitio y así encontrar la proporción perfecta. Implementación en la Web 1

Implementación en la Web 2

Para el texto

Si el texto es de cuerpo 12 hay que multiplicarlo por 1,618  y obtendrá un tamaño de texto para el título de 19. La proporción áurea es un lenguaje que la mente entiende y al interactuar con ella, las ideas parecieran ser más eficaces. pero no hay para que adherirse a ella exactamente, con el principio básico es suficiente.

Estudios de comportamiento

Por otra parte hay estudios que han comprobado la existencia de patrones de lectura F, E o L . El cuadrante superior izquierdo recibe la mayor atención y luego el usuario desplaza su mirada hacia la izquierda y abajo. El primer estudio fue realizado por del Poynter Institute, en 1990 (www.poynter.org). Entonces… La organización de los elementos tienen que seguir esta tendencia. Aplicando la proporción áurea dividimos la web en bloques. 

Rectangulo Dorado: es un rectángulo que posee una proporcionalidad entre sus lados igual a la razón aúrea.

regla aurea
Descarga este archivo en EPS
Mira!
Empresas grandes entienden la importancia de contratar a un diseñador web o estudios de diseño experimentados en UX.

fastcompany

  1. Contenido principal.
  2. El sidebar se ajusta a la relación de 1/3 y el artículo destacado bajo el menú es aproximadamente 1/3 del tamaño de la publicidad que esta abajo.

Caso 2: Twitter.com

5034817688_458e4b75f1_b
El Director Creativo de Twitter Doug Bowman afirma en su Flickr que el diseño de Twitter  está basado en la llamada “sección áurea”.

Conclusión

La proporción áurea busca la armonía de las partes, donde cada crecimiento y/o decrecimiento de una figura brinda una relación de orden proporcional brindando una experiencia perceptual de placer, significado, o satisfacción.

Recursos:

Calculadora de proporción divina

Phicalculator

On-screen ruler and grid

 

Estudios:

Estudio sentido de la belleza innata

La mano y el pie

Applying the Golden Ratio to Web Layouts and Objects

Grillas de diseño para móviles

La estética visual del diseño y la organización a veces caen en diferentes categorías. Relaciones tipográficas y espacios en la pantalla, se vuelve cada vez más difícil La or, tener el control de estos es de suma importancia sobre todo en proyectos grandes, entonces es necesario y útil el uso de grillas en el diseño en el sitio web.

Hace un par de meses diseñe una grilla para iPhone 4/4s, con el fin de ser usado de forma personal, pero cada vez la ocupo mas en mi lugar de trabajo fulltime.

Recurso en PSD para el uso de grillas de diseño para móviles.

A continuación, pueden descargar un archivo ZIP que contiene dos PSD uno para la IPhone 4/4s pantalla retina y otro para el iPhone 3G. Hay varios elementos separados por capas, Puedes usar este recurso libremente en cualquier proyectos, personal o comercial.

IPhone, 3G, 3GS (320×480) 

Grilla IPhone 3 copia

 

Phone 4 Retina Display (640×960) 

Grilla IPhone 4 copia