• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Proporción · Ergonomía y anatomía en interfaces modernas
 

Proporción · Ergonomía y anatomía en interfaces modernas

on

  • 13,244 views

Las interfaces y sus proporciones han cambiado en poco tiempo. El "aire" (white space) y la tipografía han jugado un papel especial, pero también podríamos decir que la interacción háptica y el ...

Las interfaces y sus proporciones han cambiado en poco tiempo. El "aire" (white space) y la tipografía han jugado un papel especial, pero también podríamos decir que la interacción háptica y el propio dedo han provocado cambio.

Statistics

Views

Total Views
13,244
Views on SlideShare
6,444
Embed Views
6,800

Actions

Likes
25
Downloads
108
Comments
2

16 Embeds 6,800

http://lapersonnalite.com 6291
http://fffck.com 441
http://translate.googleusercontent.com 22
http://lanyrd.com 16
http://enekopalencia.tumblr.com 8
http://storify.com 7
http://paper.li 3
https://twitter.com 2
http://presentacion.org 2
http://grou.ps 2
http://www.lapersonnalite.com. 1
http://a0.twimg.com 1
http://themelee.grou.ps 1
http://www.melzoo.com 1
http://twitter.com 1
http://webcache.googleusercontent.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Proporción · Ergonomía y anatomía en interfaces modernas Proporción · Ergonomía y anatomía en interfaces modernas Presentation Transcript

    • Proporción. Ergonomía & anatomía en interfaces modernas(o sobre cómo el oxígeno y las letritas cuentan)
    • 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.
    • ¿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 espaciospublicitarios de una publicación of ine.
    • The Fold - Miedo al scroll -“¿Y dónde se corta la página? Uff, quiero que entre todo sin hacer scroll.”. ¿En qué navegador? ¿Qué resolución de monitor tienes? ¿Con ventana maximizada o no? Pues bien, ya no hay tanto miedo al scroll. MATERIAL DE AUTODEFENSA: http://www.thereisnopagefold.com/ http://whereisthefold.com/
    • The Fold - Miedo al scroll - EN LA PÉRDIDA DEL MIEDO AL SCROLL HAN COLABORADO: •Monitores con mayor resolución. •Dispositivos hápticos (iPhone & HTC) y tabletas (iPad). •Ajax con el in nite scroll (Google Images lo ha popularizado).Vaaaale... reconozcámoslo. Aún hay clientes con antiguas convenciones. (En el mismo pack suelen ir otras muchas ideas anquilosadas y viejunas)
    • The Fold - Miedo al scroll - TÉCNICAS QUE AYUDAN EN EL SCROLLING:•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 enque se encuentra (% de carga, nº de página, nº de artículos (14 de 27),etc.)
    • Barra libre: Ancha es CastillaCon más resolución (ancho/alto) y la pérdida de miedo al scroll obtenemos: •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). ¿A qué nos lleva esto?
    • ...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)
    • 2 T DOS ELEMENTOS CLAVE: 2Tipografía & Gestión del O
    • Tipografía Web “El texto es la interfaz.” Suena raro, pero en gran medida lo es.Web Design is 95% Typography October 19, 2006 by Oliver Reichenstein. Information Architects. INTERESANTE LECTURA:http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period/
    • Tipografía LA ESCALA TIPOGRÁFICA: ABUELAS, MAMÁS E HIJAS“Five simple steps to better typography” 13 de abril de 2005 by Mark Boulton. PARA JUGAR Y COMPRENDER: http://lamb.cc/typograph/ ¿OS INTERESA EL TEMA? Buscad ‘typographic scale’ y ‘typographic vertical rythm’ en Google.
    • Tipografía¿Dicen algo al respecto las WCAG 2.0?80 caracteresANCHO DE COLUMNASEl criterio de conformidad 1.4.8(nivel AAA) indica que el ancho deun bloque de texto no debe sermayor de 80 caracteres.1.5RITMO VERTICALEn este criterio de conformidad tambiénse especi ca que el espacio entre líneas(interlineado) debe ser, al menos, unespacio y medio dentro de los párrafos yel espacio entre párrafos, al menos, de 1.5veces mayor que el espacio entre líneas.
    • fig. 1 - Ejemplo de ritmo vertical en base al baseline grid. ARTÍCULO en “A list apart” 9 de Abril, 2007 Setting Type on the Web to a Baseline Grid by Wilson Miner ¿OS INTERESA EL TEMA?Buscad ‘baseline grid’ en Google.
    • O 2Espacio blanco = Oxígeno = Relax.“Podemos aprovechar más el espacio. Hay demasiados huecos blancos.” Mejor legibilidad. Menos ruido adyacente. Mejor comprensión. Menos stress.
    • Si combinamos un buen grid system con un buen ritmo vertical de la tipografía podemos obtener buenos resultados. Eso sí... LA REALIDAD DEL DÍA A DÍA ES MÁS COMPLICADA.NO SIEMPRE TENEMOS EL CONTROL SOBRE LOS RESULTADOS FINALES (MANTENIMIENTO).
    • 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?
    • Ley de Fitts ACIERTA CON EL LINK, LLEGA HASTA ÉL.fig. 1 - Disponer los enlaces en bloque fig. 2 - Crear bloques enteros como enlaces ayuda a llegar antes a los enlaces. simpli ca la labor de alcanzar el enlace. fig. 3 - Controles escondidos hasta Reduce el que realmente se interactúa con el elemento. Se reduce esfuerzo del el ruido, aunque en ocasiones puede no llegar a ser usable. usuario.
    • Forms EN EL PASADO (a veces muy PRESENTE aún) www.aranzadi-zientziak.org www.lurraldebus.net www.gipuzkoa.netApretados. Sin aire. Estrechos. Cansinos para el ratón.
    • FormsINVITAR A UNA EXPERIENCIA DE USUARIO AGRADABLE. Parece una tasca.
    • Ley de Fitts GIMNASIA PARA EL RATÓN, LOS OJOS Y LOS DEDITOS A BLa ley de Fitts dice, básicamente, que el tiempo paracompletar un movimiento rápido de un punto A a unpunto B depende de la distancia y el tamaño delpunto B.
    • Forms ACTUALIDAD INPUTS TEXTAREAS SELECTS BUTTONS + ampliosMás fácil clicar sobre ellos. Sin hacer puntería. Textos más grandes » Facilitamos la legibilidad y revisión de datos introducidosCon 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 Ejemplos: http://patterntap.com/tap/collection/forms
    • Botones LLEGARON LOS ‘SEXY BIG BUTTONS’ fig. 1 - Proporción generosa del cursor respecto al botón. Fácil de clicar.Son más grandes. Más fáciles de clicar. Es fácil apuntar hacia ellos. Es cómodo posicionarse. Ejemplos: http://houseofbuttons.tumblr.com/
    • 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/
    • 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.
    • 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
    • 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.
    • Ya que hablamos de botones...¿Cómo ha influido el iPhone/iPad? (Vaaale. También el HTC.) Un gran paso en la ergonomía de la interacción.
    • El dedo. DE COMO LAS ZARPAS HAN AYUDADO AL RATÓN.AUNQUE PAREZCA INCREÍBLE, QUIZÁ...La interacción háptica (y sus gestures) Y por tracción delhan de nido las proporciones del botón resto de elementospara interfaces de móvil y de escritorio. de las interfaces.
    • El dedo. EL DEDO QUE HACE UNA GESTURE ES EL DEDO QUE DOMINA EL UI DESIGNfig. 1 - DISEÑO DE UI DE APP DE fig. 2 - DISEÑO DE WEBSITE DE APP fig. 3 - DISEÑO DE WEBSITE IPHONE PARA IPHONE CORPORATIVO Trasvase de proporciones del diseño de elementos de la UI: Del móvil a la pantalla.
    • Responsive design.(O como nos adaptamos al medio para sobrevivir)
    • ¿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/
    • ¿Qué es eso? EJEMPLOS INTERESANTES:http://mediaqueri.es/ http://www.nytimes.com/chrome/
    • ¿Cómo se logra?Con las CSS Media Queries de CSS3
    • 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 <img/ > 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.
    • HEMOS LLEGADO AL FINAL. :)¿Hablamos? PRESENTADO POR:Goio Telletxea & Ana Malagon TWITTER: @maxkuri & @lapersonnalite E-MAIL: goio@lapersonnalite.com Visit us: www.lapersonnalite.com Write us: hq@lapersonnalite.com