Slide 1

Slide 1 text

Proporción. Ergonomía & anatomía en interfaces modernas (o sobre cómo el oxígeno y las letritas cuentan)

Slide 2

Slide 2 text

El Origen del Mal. Venimos de dispositivos con pantallas pequeñas. (a pesar de que ahora los smarthphones (iPhone, HTC, etc.) en auge constante no sean demasiado grandes) Necesitábamos condensar el contenido. Apretarlo.

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

¿Y qué provocaba esto? •Paddings estrechos » Falta de aire. •Márgenes apretados » Di cultad para discernir bloques de contenido. •Textos de tamaño minúsculo » Cansa la vista a ciertos usuarios. •Interlineados apretados » Di culta la legibilidad. Cuadro clínico: Ansiedad. Cansancio. No estamos gestionando los espacios publicitarios de una publicación of ine.

Slide 9

Slide 9 text

“¿Y dónde se corta la página? Uff, quiero que entre todo sin hacer scroll.”. The Fold - Miedo al scroll - Pues bien, ya no hay tanto miedo al scroll. MATERIAL DE AUTODEFENSA: http://www.thereisnopagefold.com/ http://whereisthefold.com/ ¿En qué navegador? ¿Qué resolución de monitor tienes? ¿Con ventana maximizada o no?

Slide 10

Slide 10 text

Vaaaale... reconozcámoslo. Aún hay clientes con antiguas convenciones. •Monitores con mayor resolución. •Dispositivos hápticos (iPhone & HTC) y tabletas (iPad). •Ajax con el in nite scroll (Google Images lo ha popularizado). EN LA PÉRDIDA DEL MIEDO AL SCROLL HAN COLABORADO: (En el mismo pack suelen ir otras muchas ideas anquilosadas y viejunas) The Fold - Miedo al scroll -

Slide 11

Slide 11 text

•Menús persistentes, que literalmente ‘se pegan’ (sticky menus). Ejemplo: http://lookslikegooddesign.com/ •Links ‘scrolling back to top’ •En la técnica del ‘in nite scrolling’, informar al usuario del punto en que se encuentra (% de carga, nº de página, nº de artículos (14 de 27), etc.) TÉCNICAS QUE AYUDAN EN EL SCROLLING: The Fold - Miedo al scroll -

Slide 12

Slide 12 text

•Columnas de contenido más anchas. •Mayores márgenes verticales entre elementos. •Tipografía con un cuerpo mayor. •Mayor interlineado en textos. •Poder jugar con más ‘aire’ (‘white space’ o ‘negative margin’ en inglés). Con más resolución (ancho/alto) y la pérdida de miedo al scroll obtenemos: Barra libre: Ancha es Castilla ¿A qué nos lleva esto?

Slide 13

Slide 13 text

...a obtener una buena legibilidad. ¿No se trataba de eso? Ofrecer una buena experiencia en la lectura, compresión y digestión de contenido. Sin stress, sin tensión, sin ruido. Hay aplicaciones que han surgido a raíz de esto. (http://www.instapaper.com / http://www.readability.com)

Slide 14

Slide 14 text

Tipografía & Gestión del O DOS ELEMENTOS CLAVE: 2 2 T

Slide 15

Slide 15 text

Web Design is 95% Typography October 19, 2006 by Oliver Reichenstein. Information Architects. “El texto es la interfaz.” INTERESANTE LECTURA: http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/ Suena raro, pero en gran medida lo es. Tipografía Web

Slide 16

Slide 16 text

Tipografía ¿OS INTERESA EL TEMA? Buscad ‘typographic scale’ y ‘typographic vertical rythm’ en Google. PARA JUGAR Y COMPRENDER: http://lamb.cc/typograph/ “Five simple steps to better typography” 13 de abril de 2005 by Mark Boulton. LA ESCALA TIPOGRÁFICA: ABUELAS, MAMÁS E HIJAS

Slide 17

Slide 17 text

Tipografía ANCHO DE COLUMNAS El criterio de conformidad 1.4.8 (nivel AAA) indica que el ancho de un bloque de texto no debe ser mayor de 80 caracteres. 80 caracteres 1.5 ¿Dicen algo al respecto las WCAG 2.0? RITMO VERTICAL En este criterio de conformidad también se especi ca que el espacio entre líneas (interlineado) debe ser, al menos, un espacio y medio dentro de los párrafos y el espacio entre párrafos, al menos, de 1.5 veces mayor que el espacio entre líneas.

Slide 18

Slide 18 text

fig. 1 - Ejemplo de ritmo vertical en base al baseline grid. ¿OS INTERESA EL TEMA? Buscad ‘baseline grid’ en Google. 9 de Abril, 2007 Setting Type on the Web to a Baseline Grid by Wilson Miner ARTÍCULO en “A list apart”

Slide 19

Slide 19 text

Espacio blanco = Oxígeno = Relax. “Podemos aprovechar más el espacio. Hay demasiados huecos blancos.” Mejor legibilidad. Menos ruido adyacente. Mejor comprensión. Menos stress. O2

Slide 20

Slide 20 text

Si combinamos un buen grid system con un buen ritmo vertical de la tipografía podemos obtener buenos resultados. LA REALIDAD DEL DÍA A DÍA ES MÁS COMPLICADA. NO SIEMPRE TENEMOS EL CONTROL SOBRE LOS RESULTADOS FINALES (MANTENIMIENTO). Eso sí...

Slide 21

Slide 21 text

Beneficios de una buena gestión del aire: •Reduce la carga cognitiva a los usuarios. •Hace perceptible la información. •El usuario escanea la página. Dividir el área de contenidos en piezas de información digeribles. Hasta el elemento más básico de información. •Establece mejores relaciones entre bloques. Refuerza la estructuras jerárquicas y su complejidad. Bien, guay Goio... ¿pero dónde podemos notarlo?

Slide 22

Slide 22 text

Ley de Fitts ACIERTA CON EL LINK, LLEGA HASTA ÉL. Reduce el esfuerzo del usuario. fig. 1 - Disponer los enlaces en bloque ayuda a llegar antes a los enlaces. fig. 2 - Crear bloques enteros como enlaces simpli ca la labor de alcanzar el enlace. fig. 3 - Controles escondidos hasta que realmente se interactúa con el elemento. Se reduce el ruido, aunque en ocasiones puede no llegar a ser usable.

Slide 23

Slide 23 text

Forms EN EL PASADO (a veces muy PRESENTE aún) Apretados. Sin aire. Estrechos. Cansinos para el ratón. www.aranzadi-zientziak.org www.lurraldebus.net www.gipuzkoa.net

Slide 24

Slide 24 text

Forms INVITAR A UNA EXPERIENCIA DE USUARIO AGRADABLE. Parece una tasca.

Slide 25

Slide 25 text

Ley de Fitts GIMNASIA PARA EL RATÓN, LOS OJOS Y LOS DEDITOS La ley de Fitts dice, básicamente, que el tiempo para completar un movimiento rápido de un punto A a un punto B depende de la distancia y el tamaño del punto B. A B

Slide 26

Slide 26 text

Forms ACTUALIDAD INPUTS TEXTAREAS SELECTS BUTTONS + amplios Ejemplos: http://patterntap.com/tap/collection/forms Textos más grandes » Facilitamos la legibilidad y revisión de datos introducidos Con mucho más aire (padding) » Los bordes no molestan en la lectura de los elementos. Se airean eldsets. Con cierto volumen » Se diferencian (hundiéndose) del resto de la interfaz Más fácil clicar sobre ellos. Sin hacer puntería.

Slide 27

Slide 27 text

Botones LLEGARON LOS ‘SEXY BIG BUTTONS’ Son más grandes. Más fáciles de clicar. Ejemplos: http://houseofbuttons.tumblr.com/ Es fácil apuntar hacia ellos. Es cómodo posicionarse. fig. 1 - Proporción generosa del cursor respecto al botón. Fácil de clicar.

Slide 28

Slide 28 text

Botones CONQUÍSTAME CON ESTILO. PIROPOS, GANCHOS, INCITACIONES... Mayor peso en el copywriting y en la conversión. (Efecto del marketing aplicao en los ‘Call to action’) Lectura: http://psd.fanextra.com/articles/the-principles-of-great-call-to-action-buttons/

Slide 29

Slide 29 text

Botones PON GUAPOS A TUS BOTONES. Mayor cuidado en los acabados. (brillos, sombras, volumen, redondeces, etc.) SE BUSCA: •Captar la atención en un primer escaneo visual del contenido. •Mayor contraste frente al resto de elementos textuales. •Enfatizar las llamadas a la acción.

Slide 30

Slide 30 text

Botones I LIKE ‘TRAVELO’ BUTTONS. Más fácil gracias a CSS (especialmente a CSS3). (text-shadow, box-shadow, border-radius, RGBA, etc.) SE BUSCA: •Menor dependencia grá ca sobre bitmaps. •Construcción más sencilla. Más fácil de mantener. •Mayor versatilidad. Reutilización. Rapidez de ejecución. Control en el desarrollo. Ejemplo: http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba

Slide 31

Slide 31 text

Botones ¿QUÉ TAL ESTÁS AMIGO BOTÓN? La correspondencia isomór ca. (En definitiva, conciencia de cada estado de la interacción) “The relationship between the appearance of a visual form and a comparable human behavior” SE BUSCA: •Mayor conciencia de cada estado de la interacción sobre el botón. •Se establece una relación con el mundo físico del botón. (comportamiento conocido) •Ayuda a establecer una relación causa/consecuencia de las acciones.

Slide 32

Slide 32 text

¿Cómo ha influido el iPhone/iPad? Un gran paso en la ergonomía de la interacción. Ya que hablamos de botones... (Vaaale. También el HTC.)

Slide 33

Slide 33 text

El dedo. DE COMO LAS ZARPAS HAN AYUDADO AL RATÓN. La interacción háptica (y sus gestures) han de nido las proporciones del botón para interfaces de móvil y de escritorio. AUNQUE PAREZCA INCREÍBLE, QUIZÁ... Y por tracción del resto de elementos de las interfaces.

Slide 34

Slide 34 text

El dedo. EL DEDO QUE HACE UNA GESTURE ES EL DEDO QUE DOMINA EL UI DESIGN Trasvase de proporciones del diseño de elementos de la UI: Del móvil a la pantalla. fig. 3 - DISEÑO DE WEBSITE CORPORATIVO fig. 2 - DISEÑO DE WEBSITE DE APP PARA IPHONE fig. 1 - DISEÑO DE UI DE APP DE IPHONE

Slide 35

Slide 35 text

Responsive design. (O como nos adaptamos al medio para sobrevivir)

Slide 36

Slide 36 text

¿Cuándo se empieza a hablar de esto? Responsive Web Design 25 de Mayo, 2010 by Ethan Marcotte. Artículo en “A list apart” INTERESANTE LECTURA: http://www.alistapart.com/articles/responsive-web-design/

Slide 37

Slide 37 text

¿Qué es eso? EJEMPLOS INTERESANTES: http://mediaqueri.es/ http://www.nytimes.com/chrome/

Slide 38

Slide 38 text

¿Cómo se logra? Con las CSS Media Queries de CSS3

Slide 39

Slide 39 text

Eso mola... bueno, no tanto para móviles. PROBLEMAS: •Se ignora el contexto móvil. Y ya es un trabajo en sí mismo el adaptar la CSS. Así que quizá debamos pensar en aplicaciones nativas. •CSS Media Queries no están soportados por todos los navegadores. •Pensar la diferencia entre un dedo y un cursor al interactuar. •Malo para la descarga en soportes móviles porque para de nir el comportamiento (CSS) necesitas más líneas. •Si no declaras ancho/alto de imágenes y dejas que el navegador escale ( uid images) no evitas que se descargue la imagen en tamaño grande. Y además exige más CPU. •Usar media queries para ocultar imágenes no sirve. Si ocultas las no evitar descargarlas. Si usas background-image no evita que algunos navegadores como Safari se las descarguen. Hay trucos pero no es ideal. •CSS no evita que el HTML y los javascript pesen. Funciona bien para mails en móviles. CSS Media Queries son soportados por iPhone, Android y Palm que usan Webkit.

Slide 40

Slide 40 text

¿Hablamos? Visit us: www.lapersonnalite.com Write us: [email protected] Goio Telletxea & Ana Malagon PRESENTADO POR: TWITTER: @maxkuri & @lapersonnalite E-MAIL: [email protected] HEMOS LLEGADO AL FINAL. :)