Un cubo gigante podría estar llegando a tu ciudad para ayudarte a cargar tu celular. La firma de diseño italiana TºRED colaborando con la institución de investigación sobre energía Ricerca Sistema Energetico crearon e-QBO, un cubo modular personalizable que colecta energía del sol para proveer de energía a lugares públicos. Durante el día los paneles solares producen energía y la almacenan en paquetes de baterías, los cuales luego pueden ser usados por cualquiera para cargar sus dispositivos electrónicos y proveer de Wi-Fi.
El diseño es esencialmente un cubo hecho de madera y acero con paneles solares y luces LED en el exterior pero puede ser expandido o minimizado dependiendo en cuantos paneles solares sean utilizados para construirlo. Cada panel fotovoltaico o PV panel mide un metro cuadrado, el bloque puede ser tan pequeño como para que una persona se pueda sentar encima o tan grande como para convertirse en un espacio habitable.
Erica Marson, vice presidente y administradora general en TºRED dice que toma poco esfuerzo instalar uno en casi cualquier lugar. Esto significa que e-QBO puede ser instalado por unas cuantas semanas para un evento específico y ser desmantelado y moverlo a otro lugar. Con un cubo de 5×5 costando $150,000 podría ser caro para un solo uso pero las ciudades podrían potencialmente invertir en uno y moverlo de lugar en lugar.
Desde que el primer prototipo e-QBO fue construído el año, TºRED ha instalado otros en varias ubicaciones como Piazza San Fedele en Milan y en un sitio arqueológico en Sicilia. El diseño generó mucha atención el mes pasado en el World Future Energy Summit en Abu Dhabi y la ciudad italiana de Piacenza ha ordenado un e-QBO para usarlo como un cubo de información para la Expo 2015. TºRED está en conversaciones con un resort turístico en el Líbano para desarrollar un versión más grande del e-QBO con espacio interno para 200 metros cuadrados.
Infragistics realizó un «webinar» como seminario pero en web, ¿mmm, webinario?
«Size Matters: Designing for small screens» o «El tamaño importa: Diseñando para pantallas pequeñas». Por Kevin H. Richardson, PhD es Senior User Experience Architect en Infragistics.
Para ver el vídeo (en inglés) aquí.
¿Diseñar sin re-diseñar?
Para poder hacer un diseño y no tener que estar volviendo a diseñar porque el tamaño de pantalla cambió, la resolución, la forma, etc. Es usar lo siguiente:
Responsive Design o Diseño que reacciona. Composiciones fluidas que escalan para encajar en las diferentes resoluciones de varios dispositivos.
Modificar de manera programática un diseño original para que encaje el tamaño y resolución del dispositivo.
Presume que los usuarios necesitan la misma aplicación/sitio web/funcionalidad pero organizada de manera diferente.
Las soluciones programáticas no resuelven la utilidad. Intentan resolver el problema de los diferentes tamaños y resoluciones de pantalla, y que se pueda usar.
Diseño que reacciona = pantalla que reacciona.
Grillas fluidas y re-dimensionar imágenes.
Un bien diseñado sistema de grilla o rejilla podrá…
Organizar contenido.
Hace que los diseños sean más atractivos.
Crear una experiencia de usuario consistente.
Presentará un interfaz que es más utilizable.
Diseñar usando grillas no es una nueva teoría
Ayuda a crear un ritmo visual que los usuarios pueden fácilmente seguir.
El desarrollo es simplificado.
El problema de las imágenes.
El mayor problema del diseño que reacciona son las imágenes.
Se requiere de técnicas para re-dimensionar las imágenes proporcionalmente.
Escalar las imágenes para encajar en las composiciones (fuerza bruta).
Ocultar y revelar porciones de las imágenes (cortar y escalar al 100%).
Crear imágenes compuestas que se deslicen. (múltiples imágenes que se sobreponen, cortar y escalar capas individuales y volver a apilar).
Texto, legibilidad y tipos de pantallas.
La Ergonomía. Se encarga de como «encajar» entre el usuario, equipo y ambiente.
La ergonomía se encarga de ir más allá del Sistema Operativo y el factor de forma.
La visión humana tiene límites, separados del dispositivo y que cambian con el tiempo.
Las manos humanas y el tamaño de la punta de los dedos se pueden medir.
Legibilidad del Texto.
El 97% de los sitios web no pasan la evaluación de Forrester, empresa de investigación. O 45 sitios web de 1500.
Los sitios web frecuentemente fallan la evaluación de Forrester en legibilidad del texto.
Legibilidad del texto ha sido un gran problema en sitios web por muchos años.
Factores de la legibilidad.
Tamaño de las fuentes, tipo de las fuentes, color de las fuentes
Contraste.
Longitud de la línea.
Alineamiento y Orientación del texto.
Separación entre líneas de texto (leading en inglés).
Espacio entre caracteres (kerning en inglés).
El tamaño importa.
El papel hacía las cosas más simple.
La resolución de la «pantalla» era constante.
El texto era medido en milímetros/pulgada o puntos (1/72 ó 0.014 de pulgada).
Los titulares impresos podían ser de 72 puntos (1 pulgada).
Las pantallas hacen las cosas más complicadas.
La resolución de la pantalla varía en píxeles y en densidad.
Las fuentes aún son etiquetadas en «puntos» pero estos puntos ya no son constantes.
Las fuentes que tienen el mismo tamaño en puntos podrían tener un diferente tamaño en la pantalla.
Mide el texto en pantalla en milímetros NO en puntos de fuente o píxeles.
Un milímetro es un tamaño constante.
El tamaño de las fuentes y de píxel varía por dispositivo (resolución).
iPhone 5 y iPad Mini (326 ppi).
iPad Air (264 ppi).
Laptop (108 ppi).
Legibilidad del texto está determinado por muchos factores.
Distancia de la persona a la pantalla (500mm/Escritorio, 300mm/dispositivo de mano).
Tamaño de la pantalla (en diagonal, en pulgadas).
Resolución de la pantalla (píxeles por pulgada).
Tamaño de la letra en pantalla (altura de la letra en mayúsculas).
Retinas y pantallas. ISO 9241-303.
Altura de la letra de 20 a 20 minutos de arco es preferido para la mayor cantidad de actividades.
La mínima altura de la letra debe ser 16 minutos de arco.
1 minuto de arco = 1/60° que es igual a 0.0167° que es igual al umbral de la percepción.
¿Qué es una «pantalla retina»?
Es una marca registrada de Apple
Pantallas con densidades de píxeles tan altas que un ojo humano con visión de 20/20 no puede notar la pixelación a una distancia típica de lectura (> 54 píxeles por grado).
Fórmula de Retina: distancia (pulgadas) por resolución (ppi) por 0.01745. El resultado debe ser mayor de 54.
Tamaño del Texto.
¿Cuántos píxeles son necesario para una letra en mayúsculas de 0.09 pulgadas?
Esto depende de la resolución de la pantalla y el tamaño del monitor.
Ratio de Aspecto
5:4
16:10
Resolución de pantalla
1280 x 1024
1680 x 1050
Dimensión de la pantalla
14.8″ x 11.9″ (19″ diagonal)
16.8″ x 10.5″ (20″ diagonal)
Densidad del píxel
1024 pxls / 11.8″ = 86ppi
1050 pxls / 10.5″ = 100ppi
# de píxeles para una letra de 0.09″
86ppi x 0.09″ = 7.74 u 8 pxls
100ppi x 0.09″ = 9 pxls
Directrices para el tamaño del texto.
Laptop (108ppi)
17″, 1600×900 pxls, 500mm distancia
10 pxls = 0.09″ x 108ppi
Kiosko (69ppi)
32″, 1080×1920 pxls, 500mm distancia
6 pxls = 0.09″ x 69ppi
iPhone 5 (326ppi, 68ppd)
4″, 1136×640 pxls, 300mm distancia
18 pxls = 0.06″ x 326ppi
iPad Air (264ppi, 55ppd)
9.7″, 2048×1536 pxls, 300mm distancia
15 pxls = 0.06″ x 264ppi
iPad Mini Retina (326ppi, 68ppd)
7.9″, 2048×1536 pxls, 300mm distancia
18 pxls = 0.06″ x 326ppi
Sala de Control (52ppi, 90ppd)
42″, 1920×1080 pxls, 2500mm distancia
24 pxls = 0.46″ x 52ppi
Sony Smart Watch (176ppi)
1.6″, 220×176 pxls, 300mm distancia
10 pxls = 0.06″ x 176ppi
Sony 4K Ultra HD TV (68ppi)
64.5″, 3840×2160 pxls, 3000mm distancia
40 pxls = 0.58″ x 68ppi
Dispositivos Android.
PPI varía mucho (148ppi – 469ppi) es como el salvaje oeste de los dispositivos.
Las pantallas varían en tamaño mucho (3.7″ – 10.1″).
Android «Scale-Independent Pixels» o Píxeles independientes de la escala.
Micro, 12sp* = 1.9mm.
Small, 14sp* = 2.2mm.
Medium, 18sp* = 2.9mm.
Large, 22sp* = 3.5mm.
La letra escalará correctamente para cada dispositivo.
Dispositivos Táctiles: El tamaño (todavía) importa.
El tamaño se mide en milímetros no píxeles.
Un milímetro es un tamaño constante.
El tamaño de píxel varía por dispositivo.
La pantalla del dispositivo objetivo debe considerar:
Tamaño del dedo.
Tamaño de la pantalla.
Resolución de la pantalla.
¿Por qué?
Precisión y satisfacción del usuario.
Objetivos táctiles.
Factores que contribuyen a la precisión.
Tamaño del objetivo.
Tamaño del dedo.
Ubicación en el objetivo.
El objetivo táctil se refiere a algún componente de la interfaz que tiene que reaccionar al tacto. Ejemplo: botones, listas, menúes, etc.
Tamaños de objetivos táctiles.
Incrementar el tamaño del objetivo es la más efectiva manera de incrementar la facilidad de uso del sistema.
Un botón debe tener 9mm x 9mm (ancho y altura) con una separación de 2mm.
Un botón ancho de 20mm x 7mm (ancho y altura).
Tamaño de un elemento 60 – 100% el tamaño del objetivo táctil.
En la conferencia TechEd 2011, Billy Hollis hizo esta presentación: http://channel9.msdn.com/Events/TechEd/NorthAmerica/2011/DPR209. Donde presenta muchos ejemplos sobre como mejorar nuestras aplicaciones utilizando principios de diseño. Seguro que alguno de nosotros ha caído en algunos de estos errores.
En esta aplicación se ven muchos botones todos del mismo tamaño y con enigmáticos íconos.
La aplicación no aplica los siguientes principios:
Principio de Pareto (regla 80/20) Rudamente 80% de los efectos se deben al 20% de las causas. En este caso se usa para indicar que 80% de la interacción de esa pantalla se debe a sólo 20% de esos botones.
Ley de Fitt: La cantidad de tiempo requerida para ubicar y usar una opción es menor si la opción es más grande. (Botones más grandes para opciones más usadas.)
Ley de Hick: La cantidad de tiempo requerida para ubicar y usar una opción es mayor si el usuario tiene que escoger de muchas opciones.
Como anécdota menciona que Microsoft mantenía en la pared una lista de las 10 opciones más solicitadas para su software Office. Durante años esas opciones estaban en el producto sólo que los usuarios no podían encontrarlas.
La aplicación se ve muy llena, muy ocupada.
La gente prefiere espacios abiertos (efecto sabana «savanah»)
Esta aplicación hace buen uso del espacio libre. Aunque no se nota muy bien en la imagen la aplicación hace uso de gradientes o degradés que genera un color más natural ya que el mundo no está hecho de colores sólidos. La aplicación se nota más natural aunque la gente no pueda decir a que se debe. La parte de arriba es más clara que la parte de abajo puesto que es lo que vemos en la naturaleza.
Está tienda en Park Avenue en Nueva York, muestra productos muy exclusivos y la vitrina muestra espacios libres
Insta a preguntarnos el valor de los productos mostrados en esta otra tienda, cuya ventana está realmente llena a reventar.
Las animaciones ayudan a hacer las transiciones más naturales. Las cosas en el mundo real no desaparecen y luego aparecen en otra ubicación, simplemente hacen una transición o desplazamiento.
El efecto Estética-Usabilidad. Los usuarios creen que el software más atractivo es más usable, se sienten mejor con él y le dan más tiempo. La gente es atraída por la belleza (razón por la cual las revistas muestran en la portada gente atractiva)
Mostrar progresivamente (Progressive Disclosure), se basa en mostrar la información mínima necesaria y luego ir mostrando más detalle conforme el usuario lo requiera. Por ejemplo utilizar un popup o ventana flotante que muestre más información cuando pasemos el ratón sobre un elemento. Si muestras una grilla no pongas todos los atributos de la tabla en él ya que atiborras al usuario de información que no necesariamente tiene que ver en ese momento.
Principios de Diseño Contextuales para Táctil (touch)
Poner los menús de selección en la parte de abajo.
Brazo de gorila (Gorilla Arm), efecto fisiológico de usar pantallas táctiles en escritorios, el brazo se cansa al tener que alcanzar la pantalla.
Léxico de gestos. No todos conocemos todos los gestos como por ejemplo pellizcar «pinch», se usa para aproximar en una pantalla táctil.
Blog en Español 