NUEVOS MEDIOS

1. ENFOQUES DE DISEÑO

DOS DISEÑOS, DOS SITIOS

Buenas experiencias móviles requieren un diseño diferenciado del que es necesario para satisfacer usarios de PC de escritorio. Dos diseños, dos sitios, y enlaces cruzados para que todo funcione.

Jakob Nielsen

Artículo completo

Puntos clave webs diferenciadas:

• Sitio web separada optimizada para móviles.
• Rederidigir usuarios que visiten el sitio web al sitio web móvil.
• Enlazar sitio web móvil y sitio web completo entre ellos.
• ...y mejor, hacer una app.

Críticas

Los móviles no son menos, sino más. Los móviles tienen superpoderes

Josh Clark

Es importante:

• No confundir contexto con intención.
• No asumir más de la cuenta sobre el tamaño:
  • No implica menos inform.
  • No implica menos funcion.

Contra-estrategias:

• Enfatizar, no eliminar.
• Confiar en el concepto de progressive- enhancement (Mejora progresiva), y no tanto en el de Graceful degradation.  
• Usar técnicas adaptativas (Responsive Web Design)

RESPONSIVE WEB DESIGN

Ethan

Marcotte

Artículo seminal en A list apart

En que se basa:

• El diseño se adapta al tamaño y orientación de la pantalla, y al dispositivo que se esté utilizando.
• El contenido es el mismo, cambian los estilos.

Como se logra:

• Grilla fluida: Columnas en porcentaje que cambian de forma flexible con el tamaño del dispositivo.
• Imágenes flexibles: Tamaño fluído de imágenes basadas en porcentaje.
• Media Queries: Herramienta de CSS3 que detecta las características del dispositivo (tamaño, resolución etc.) y lanza una hoja de estilos apropiada.

ADAPTATIVE CONTENT

Karen

Mc Grane

Artículo en A list apart

Planteamiento:

• El contenido precede a la plataforma.
• Es más que móvil.
• El contenido es un formato que permite ser compartido y distribuido en cualquier plataforma.
• ...plataforma que controlas, actualmente o en el futuro.
• El contenido debe imponerse al chrome.

MOBILE FIRST

Luke

Wrobleski

Text

Tres buenas razones para empezar por el móvil

Principios:

• Empezar pequeño, y mejorar hacia arriba.
• Empezar por defecto con lo esencial.
• Buscar oportunidades de mejora.

Puntos clave:

• Te fuerza a focalizar y priorizar tus productos teniendo en cuenta las reestricciones inherentes al diseño de móviles.
• Te permite ofrecer experiencias inovadoras basandote en las nuevas capacidades propias de los dispositivos móviles.

2. BUENAS PRÁCTICAS DE DISEÑO

JERARQUIZACIÓN DE INFORMACIÓN

ESTRUCTURAR LA INTERFACE

iOS

AndroidA

CONTENIDO PRIMERO, NAVEGACIÓN DESPUÉS

CENTRARSE EN LO IMPORTANTE

DESTACAR FUNCIONES ESPECÍFICAS DEL MOVIL

SIMPLIFICAR LA INTERFACE

PRESENTACIÓN PROGRESIVA DE INFORMACIÓN

Técnicas:

• Controlar la complejidad mostrando la información necesaria en cada momento.
• Acordeón.
• Carrusel.

La revelación progresiva difiere las características avanzadas o rara vez utilizadas a una pantalla secundaria, para que las interfaces sean más fáciles de aprender y los errores menos

Jakob Nielsen

La claridad se impone a la densidad

Josh Clark

Acordeón

Carrousel

NAVEGACIÓN CLARA Y MINIMALISTA

Pestañas/Menús

Drawer menú

FORMULARIOS SIMPLES

La regla general es limitar el uso de formulario en contextos móviles.

Josh Clark

RECOMENDACIONES FINALES

Puntos clave:

• Los breackpoints determinan cambios en el diseño de la interface, incluyendo cambios en layout (columnas)
• Suelen establecerse uno (full+mobile) o dos breakpoints (full+tablet+smartphone). 

Establecer breakpoints y reducir columnas

Puntos clave:

• En los títulos se suele reducir el tamaño de las fuentes y su grosor.
• En los textos de los párrafos, el tamaño y el grosor se aumenta.

Ajustar tamaños de fuentes

Puntos clave:

• Los espacios en blanco innecesario deben ser reducidos o eliminados.
• El contenido innecesario también debe ser suprimido.

Ajustar espacios en blanco y contenido innecesarios