Mamuso (linkedin, twitter) viene a explicarnos cómo aterrizar las pantallas.
Hoy vamos a construir cosas. «Hello screen». Pantallas pequeñas, cuando le compensa hacer un prototipo y cuando no. Tienes que tener un fin para ponerte a hacer un protipito, los prototipos nos son gratuitos. Pero sí es verdad que cuanto antes hagas uno, antes te das cuenta de que falla.
Mamuso nos cuenta cómo llegó en diseño industrial y nos recomienda Como Nacen Los Objetos – Bruno Munari. Luego nos cuenta qué es Arduino, donde trabajó y nos pone de ejemplo la radio que diseñó Jordi Parra:
Displaying information on the device from Jordi Parra on Vimeo.
Un prototipo es algo que le ayuda a Mamuso a responder preguntas y plantear preguntas nuevas: «Te hace explorar cosas que ni siquiera te has planteado». Además, es un medio para comunicar ideas, a veces la gente no se lee la documentación y es más fácil sentarse con ellos y el prototipo. También es un recurso para recoger feedback de usuarios, nos pone el ejemplo de los seguros para el automóvil. Para móviles desde luego es imprescindible: «cóño, qué peque
- Prototipado para pantallas grande = bueeeno, vale
- Prototipado para pantallas pequeñas = imprescindible
Sistemas:
PAPEL: Mamuso nos insiste que en prototipos pasemos siempre por papel y rotuladores, es un lenguaje universal y compatible. «El papel y el boli es totalmente imbatible».
GALERIA MOVIL: Qué es lo siguiente más barato? Se pueden hacer las pantallas a ordenador, se hace una captura, se pasa por edición simplemente para ajustar la resolución y se ponen en la galería de imágenes del móvil, es baratísimo y no cuesta nada, y es el sistema más práctico más fácil.
COLLAGES: «Los auto-complete se hacen con papel vegetal».
POGÜERPOINT. El siguiente es el sistema más desaprovechado: el keynote-powerpoint, hay un montón de cosas que podéis hacer (keynote para móvil emula incluso con gestos).
HTML-CSS-JS. Lo que se llama frontend. Esto enfocado a UX nos va a contar los principios, pero a veces te lías a hacer cosas y te pasas. Html Doctype, cabecera y después etiquetas de estructura. CSS se encarga de pintar cómo se ve, tenemos un selector donde y le decimos que caractarísticas tiene. Javascript se encarga de las acciones.
«Maquetar es hacer cajas». Cada caja es [dibujo de cajas padding, margin, etc]
«El png transparente es de modernos, de gafapastas, todo el mundo lo sabe»
Maquetar es una mierda por esto:
chrome, firefox, explorer, opera, safari
solamente el debugging ya cuesta una ojo de la cara.
«Deberían tipificar el miedo que tienes a abrir tu maqueta en explorer»
En móviles solemos pensar en Iphone, android, blackberry, windowsphone. Aunque en realidad 21 navegadores, 15 OS y 14 fabricantes.
En tuenti el móvil que trae más tráfico es el Nokia 5310, no puedes obligar a nadie a comprarse un smartfon, así que para la web movilal final segmentaron.
Las cosas que hay que saber del CSS: Position y float. El mantra. Si más o menos entiendes como funciona vas bien….
CSS3
transition – animation
background gradients (que dejarán de estar de moda cuando se extienda)
hsl hlsa rgba Los colores tradicionales no han sido muy personalizables.
attribute selectors: «Píntame con el fondo azul los elementos impares»
Redefinir atributos de esa web según el tamaño del dispositivo o de la posición. Esto era una técnica de gafapastas. Hay un sitio donde tienen ejemplos que es http://mediaqueri.es/. Una web seria que lo ha implementado es The Boston Globe. Complica la vida al diseñador de interacción pero facilita la vida al maquetador. También aquí hablamos del bootstrap de twitter.
JS
function ahoy () {
document.getElementById(«wadus»).className = «odd»;
}
Hay gente que no sabe JS pero sabe usar jquery u otros similares. El proceso debería ser inverso, pero para mostrar y ocultar una capa usas cuarenta capas de JS.
Aquí también hay debate, porque aquí el perfil se mezcla de los ingenieros de verdad con diseñadores «que quieren ser ingenieros». La discusión también viene por rapidez versus
y finalmente:
HTML 5
El problema que tiene es el nombre. Son unas cuantas etiquetas nuevas y una pila de apis que son JS
Grad and drop
Storage
Geoposicionamiento
Websockets
Webmorkers
….
Pero te das cuenta de que tu base de navegadores sólo soporta eso el 15% y no puedes hacerlo.
Lego vamos a ver tab, que está basado en fireworks. Y que nos va a servir muchísimo para tener un prototipo muerto antes de empezar.
[Descanso]
Mamuso nos enseña ahora ejemplos de prototipos en imágenes para el móvil. También nos enseña un caso en el que se complicaron mucho la vida y moló mucho, querían testar el send delivery, y había una idea que no tenían claro si funcionaba y se dijo «necesito ver esto funcionando», así que hicieron algo que pudiesen testear en un móvil de verdad, un framework con respuestas de Cleverbot para que pareciese un chat de verdad.
Tap no es una herramienta que sea especialmente popular. No hace falta ser un genio para usarla y lo único que tienes que hacer es cuadrados grandes y . Flexible, gratis y tienes prácticamente de todo. Podemos definirle un icono para la aplicación (que si tienes varias versiones de las pruebas va muy bien), decirle en qué pantalla empieza.
Hemos pasado a los postits
Ahora Mamuso nos explica cómo funciona Tap. Cómo lincar. Nos ha pedido que hagamos primero en papel porque tres personas pegándose sobre un pepel es agresivo pero tres personas pegándose sobre un ordenador es mucho peor.
La librería lo que va a hacer por nosotros va a ser exportar todos los enlaces que hemos puesto, con todas las imágenes.
Usuario, sites, tap.. y ahí está.
¿Para qué estamos haciendo el export?
Embark es una aplicación en Estados Unidos que te soluciona el problema de ir de un sitio a otro. Siempre te da aire fresco estar trabajando en algo y ver otra gente que lo ha resuelto bien.
Ahora abrimos el fireworks y pegamos las imágenes como pantallas. Luego nos bajamos el archivo de PNG de la web de Tab y lo abrimos con fireworks. Copiamos y pegamos los botones, Command+T para redimensionar. Luego lo guardamos como dreamweaver y lo abrimos en safari para verlo.
Apuntes de UX 