Pac2 dim

PROTOTIPADO FUNCIONAL RESPONSIVE PARA SMATPHONE

UOC

DISEﾃ前 DE INTERFICIES MULTIMEDIA Charo Sﾃ｡nchez Lﾃｳpez

prototipado funcional responsive para smatphone

ÍNDICE

NUEVO ÁRBOL DE CONTENIDO………………………………………………………….. 2 WIREFRAMES PARA SMATHPHONE…………………………………………………… 3-9 CARACTERÍSTICAS FUNDAMENTALES DE LOS WIREFRAMES PARA SMARTPHONE. 9-10 FACTORES TENIDOS EN CUENTA PARA LOS NUEVOS WIREFRAMES…………….. 10-11 OPINIÓN PERSONAL…………………………………………………………………… 11

Página 1

prototipado funcional responsive para smatphone

NUEVO ร RBOL DE CONTENIDO

Pรกgina 2

prototipado funcional responsive para smatphone

WIREFRAMES PARA SMATHPHONE

Pรกgina 3

prototipado funcional responsive para smatphone

Pรกgina 4

prototipado funcional responsive para smatphone

Pรกgina 5

prototipado funcional responsive para smatphone

Pรกgina 6

prototipado funcional responsive para smatphone

Pรกgina 7

prototipado funcional responsive para smatphone

Pรกgina 8

prototipado funcional responsive para smatphone

CARACTERÍSTICAS FUNDAMENTALES DE LOS WIREFRAMES PARA SMARTPHONE

•

• • • • • •

• • • •

Logotipo: En la página de inicio el Logo es más grande que en el resto de páginas, en las cuales se mantiene pero con una medida más pequeña.

En la cabecera de todas las páginas se incluye un buscador, un icono para el carro de compra y otro para volver al home, facilitando al usuario estas tareas básicas e importantes desde cualquier pantalla.

Tipografía de medidas grandes.

Botones de grandes dimensiones.

Se suprimen los desplegables.

Imágenes: Al tratarse de una tienda de muebles, las imágenes de producto son muy importantes, por lo que se mantiene una imagen de cada producto en el catálogo pero se suprimen los banners que aparecen en la versión escritorio.

Textos: Se utilizarán textos más cortos, para las descripciones del producto y las páginas de diseñadores. El usuario que utiliza un dispositivo móvil para comprar muebles no se entretendrá en hacer una lectura amplia de un diseñador, pero se incluirá la acción con un “ver más” por si desea hacerlo.

Se mantiene el menú de acceso al final de cada página relacionada con el menú principal y en las páginas de compra, también se mantiene un menú al final para acceder a todas ellas y se destaca el botón para continuar la compra.

Se incluye un botón de retorno con un icono, para el “Home”, para que en cualquier momento de manera simple y rápida el usuario pueda volver al inicio.

En el pie de página se incluirán un link a una página con todos los términos legales, contacto y mapa web.

Los botones de acceso a las redes sociales sólo aparecen en el “Home" y en las páginas de catálogo ya que en el resto no se consideran relevantes.

Como aspectos a mejorar he suprimido o más bien refundido, algunas páginas ya qué, en mi opinión, en el proceso de compra son demasiadas pantallas las que tiene que recorrer el usuario hasta finalizarla. Se han refundido en cuatro en lugar de las seis de la versión escritorio.

También se ha suprimido la página listado filtrado alfabético, por considerar que ya existía un listado alfabético y finalmente las páginas de Diseñador, de primer nivel y las de Diseñadores, de segundo nivel se convierten en una sola a modo de lista ordenada alfabéticamente por el nombre del diseñador.

FACTORES QUE SE HAN TENIDO EN CUENTA PARA CREAR LOS NUEVOS WIREFRAMES

Para poder adaptar la web de Mobelstore a los requerimientos de una aplicación para móvil y que el usuario a la hora de interactuar con el dispositivo lo haga de la manera más fácil posible, es necesario modificar ciertos aspectos.

Página 9

prototipado funcional responsive para smatphone

Son varías las características que diferencian una aplicación para móvil de una para escritorio, pero la principal es el hecho de utilizar una pantalla táctil en lugar de un teclado y un ratón. El usuario debe utilizar sus dedos, en lugar de un puntero para lo cual deberemos diseñar unos botones grandes que con un solo toque le dirijan a la página deseada.

La pantalla tendrá que permitir la rotación de la aplicación cuando el usuario de la vuelta al dispositivo.

Las imágenes se agrandarán al presionar sobre ellas y en todos los formularios aparecerá, también al presionar un teclado alfanumérico que permitirá al usuario escribir.

Se ha procurado que los wireframes con scroll den la sensación de continuidad, no dejando espacios en blanco al final de la primera pantalla.

OPINIÓN PERSONAL

El realizar esta práctica me ha permitido tomar consciencia de la necesidad de adaptar las aplicaciones a los dispositivos móviles. Hasta ahora mi experiencia con los dispositivos móviles ha sido poca, pero lo que sí sé, es que de manera inconsciente cuando consultaba una web no adaptada, acababa por salir de ella, muchas veces sin conseguir lo que buscaba, debido a lo complicado que a veces resulta intentar recorrer una gran pantalla con un pequeño dispositivo.

En adelante, a la hora de diseñar una web tendré en cuenta estos conceptos para tratar de acercarme más a los usuarios de Smartphone y ofrecerles todo lo que permite un diseño responsive.

Página 10