clase7 diseñode interacciónblackberry–iphone

Desarrollo de Aplicaciones para Móviles

Diseño de Interacción Iphone - Blackberry

Convenciones de interacción de iPhone

¿Cómo diseñamos una aplicación para iPhone?

Veamos algunas estrategias que se pueden utilizar para poner en practica una idea, revisar opciones de diseño, y generar una aplicación que le resulte útil al usuario


Enumerar todas las características que pueden interesarle al usuario

Determinar quiénes son los usuarios

Filtrar la lista de características a través de la definición de la Audiencia


Estrategia de diseño de la aplicación

Supongamos que la idea inicial es desarrollar una aplicación que ayuda a la gente en el supermercado.

Confeccionamos la siguiente lista de posibles puntos a tener en cuenta:

Creación de listas de articulos a adquirir

Comparar los precios

Localización los supermercados.

Anotar recetas

Obtener y utilizar cupones

Exploración de diferentes tipos de cocina

Encontrar sustituciones de ingredientes


Determinar quienes son los usuarios

Sabemos que apuntamos a usuarios de smartphones, interesados en aplicaciones de interaccion simple y alto rendimiento, pero ademas, debemos establecer que los distingue y que es lo mas importante para ellos.

.Siguiendo con nuestro ejemplo de compras de supermercado, es

posible que pregunte si sus usuarios:

¿Cocinan en casa o prefiere los platos preparados?

¿Están interesados en los descuentos, o creen que los cupones no valen la pena?

¿Compran pequeñas cantidades con frecuencia o hacen una compra mensual?

¿Quieres mantener varias listas en curso para diferentes propósitos o simplemente quieren recordar algunas cosas para comprar?

¿Prefieren marcas específicas, o alternativas?


Filtrar la lista de acuerdo a la definición de la Audiencia

Basados en las respuestas anteriores, supongamos que las siguientes caracteristicas, son las que describen mejor a su publico objetivo:

• Quieren un ayuda memoria.• Les gusta cocinar en casa

• Son ahorrativos.


Establecemos la funcionalidad de la aplicación a desarrollar y a quien va dirigida.

Para nuestro ejemplo podria ser:

"Una lista de compras para gente que le gusta cocinar sin gastar demasiado."


Ya sabemos que hace la aplicación y a quien va dirigida. ahora hay que hacer

que la aplicación se vea como si hubiera sido diseñado expresamente para un dispositivo basado en IOS.


Patrones de diseño que siguen las aplicaciones nativas de iOS.

- Botones, selectores, y deslizadores utilizados para accionar las aplicaciones iOS. - Estructura de aplicación fácil de navegar.

- Las aplicaciones de iOS a menudo utilizan animaciones precisas y fluidas para mostrar los resultados de las acciones del usuario. Indicadores de actividad, barra de estado, alertas y advertencias, son utilizadas por iOS para interactuar con el usuario. - Las aplicaciones deben funcionar bien tanto en iPhone como en iPadA su vez, si está pensando en desarrollar una aplicación que se ejecuta en el iPhone y el iPad, es necesario adaptar el diseño a cada dispositivo.


Aplicaciones iOS desde la web:

Si viene desde la web, es necesario asegurarse de dar al usuario una experiencia de aplicación de iOS, no una experiencia en la web.

Recuerde, la gente puede visitar su sitio web en sus dispositivos basados en iOS utilizando Safari en iOS.

.


Estrategias que pueden ayudar a los desarrolladores web crear una aplicación iOS:

- Enfoque la aplicación. Los usuarios de iOS esperan que la aplicación haga lo que anuncia, y quieren ver el resultado en forma inmediata.

- Asegúrese de que su aplicación le permita a los usuarios hacer algo.

- No intente reproducir paradigmas de diseño de interfaz de usuario web en su aplicación iOS. Familiaricese con los elementos de interfaz de usuario y los patrones que iOS utiliza para mostrar contenido.


Estrategias que pueden ayudar a los desarrolladores web crear una aplicación iOS:

- La mayoría de los sitios web muestran la información más importante en la mitad superior de la página. Para dispositivos basados en iOS, utilice el desplazamiento, ya que si reduce el tamaño de fuente, divs, etc con el objetivo que toda la info se vea en una sola pantalla, probablemente, resulte que la información es poco legible y el diseño no se ajuste al estandar.

- Los sitios web suelen mostrar un icono que enlaza con la página de inicio en la parte superior de cada página web. Las aplicaciones de iOS no incluyen páginas de inicio, por lo que este comportamiento no es necesario, en su lugar le permiten a los usuarios desplazarse entre aplicaciones utilizando la barra de estado..


Personalización a medida de la tarea

Utilizando el SDK de iOS, puede personalizar la interfaz de usuario de su aplicación tanto o tan poco como usted elija.

Por ejemplo, imaginemos una aplicación que permite realizar llamadas telefónicas.Ahora imaginemos que en lugar de un teclado, la aplicación muestra un dial.

El dial está diseñado para que los usuarios puedan saber de inmediato cómo usarlo.

El dial se comporta de forma realista, gira y reproduce los sonidos originales. Sin embargo, el uso del disco giratorio es mucho menos eficiente que el uso del

teclado, motivo por el cual, este diseño termina siendo un obstáculo para el usuario, a pesar de su atractivo diseño:


Personalización a medida de la tarea

Utilizando el SDK de iOS, puede personalizar la interfaz de usuario de su aplicación tanto o tan

poco como usted elija.

Por ejemplo, imaginemos una aplicación que permite realizar llamadas telefónicas.

Ahora imaginemos que en lugar de un teclado, la aplicación muestra un dial.

El dial está diseñado para que los usuarios puedan saber de inmediato cómo usarlo.

El dial se comporta de forma realista, gira y reproduce los sonidos originales.

Sin embargo, el uso del disco giratorio es mucho menos eficiente que el uso del teclado, motivo por el cual, este diseño termina siendo un obstáculo para el usuario, a pesar de su atractivo diseño:


Esta aplicación, simula un ‘nivel de carpintero’ , el usuario la reconoce, sabe cómo utilizar la herramienta física e inmediatamente sabe cómo utilizar la

aplicación.

La aplicación podría haber mostrado su información sin una representación grafica tan realista pero esto habría hecho que la aplicación fuese menos

intuitiva y más difícil de usar.:


La Transición a la IOS

Las personas utilizan dispositivos basados en iOS de manera muy diferente de las que usan computadoras de escritorio y portátiles, y tienen diferentes expectativas acerca de la experiencia del usuario. La transición de software desde una pc a un dispositivo basado en IOS rara vez es una tarea sencilla.


- Crear una experiencia interactiva y atractiva que atrae a la gente y les permita acceder a los contenidos que le interesa de forma rápida y sencilla.

-El mayor porcentaje de usuarios (por lo menos el 80 por ciento) utilizan un número muy limitado de funciones en una aplicación, mientras que sólo un

pequeño porcentaje (no más del 20) utilizar todas las características (80x20)


De correo en el escritorio para correo en el iPhone

El correo es una de las aplicaciones más visibles, utilizada y apreciado en Mac OS X.

Es un programa muy potente que permite a los usuarios crear, recibir, dar prioridades, y almacene correo electrónico, realizar un seguimiento de los elementos de acción y eventos, y crear notas e invitaciones.


De correo en el escritorio para correo en el iPhone

Correo en el iPhone se centra en la funcionalidad principal de correo en el escritorio, ayudando a la gente para recibir, crear, enviar y organizar sus mensajes.

Ofrece esta funcionalidad condensada en una interfaz de usuario adaptada a la experiencia móvil.

La aplicación de correo en iPhone, no es mejor que el correo en el escritorio, sino que es correo, rediseñado para usuarios móviles


El correo en el iPhone innova la interfaz de usuario en varios aspectos clave.

-Distintas Pantallas.

Cada pantalla muestra un aspecto del correo:Lista de cuentasLista de buzones de correoLista de mensajesVisualización de mensajes


-Navegación fácil y predecible. Cada pantalla muestra un título que le indica al usuario dónde están, y un botón de retroceso que hace que sea fácil para ellos volver sobre sus pasos.

Controles sencillos. Redactar un mensaje de correo electrónico y comprobar la existencia de uno nuevo son las acciones primarias que el usuario puede ser que desee tomar en cualquier contexto, el correo en el iPhone lo hace accesible en múltiples pantallas.


Diferentes tipos de información para diferentes tareas.

• Cuando el usuario elimina un mensaje, se anima el icono de la papelera.

• Cuando envia un mensaje, pueden ver su progreso.

• Cuando finaliza el envío, se puede oír un sonido distintivo.


Desde el navegador de escritorio de Safari en iOS

Basadas en estándares web se muestran correctamente en dispositivos basados en iOS.

Teclado de Safari en iOS. Cuando un teclado y el asistente de formulario son visibles, Safari en el iPhone muestra su página web en la zona de debajo del campo de texto URL y por encima del teclado y el asistente de formulario.


.

En Safari en el escritorio, aparecerá un menú emergente que contiene un gran número de pantallas partidas como lo hace en una aplicación de Mac OS X,

En Safari en iOS, un menú pop-up se muestra con elementos nativos, lo que proporciona una experiencia de usuario mucho mejor.


Los usuarios de iOS están acostumbrados a las listas de aplicaciones nativas, por lo que al ver las listas de aplicaciones web, son más propensos a pensar que el contenido de la web es una aplicación

Convenciones de interacción de Blackberry

Botones

• El usuario, pulsa el boton para iniciar la accion.

• Tener en cuenta:• - Utilice etiquetas claras y concisas.

- Utilice las etiquetas de una sola palabra que sea posible. - Utilice los verbos que describen la acción asociada, como en "Cancelar", "Eliminar", o "Guardar".

• Use un icono en lugar de texto


Check box

• Utilizada cuando los usuarios pueden seleccionar varios elementos u opciones. Los Usuarios simplemente deben tocar en una casilla de verificación para activarla o desactivarla.

• También puede utilizar las casillas de verificación para permitir a los usuarios elegir entre una lista de opciones. Estas cajas de verificación requieren etiquetas.


Radio button

• Utilice los radio button botones de radio para indicar un conjunto de opciones mutuamente excluyentes, pero relacionados.

• Utilice los botones de radio para indicar un conjunto de opciones mutuamente excluyentes, pero relacionados. Los usuarios pueden seleccionar una opción en un grupo. Los usuarios tocan un botón de radio para activarla o desactivarla .


Toggle Switecs

• Usted puede usar interruptores de palanca para la mayoría de las opciones binarias.

• Por ejemplo, puede utilizar un interruptor de palanca para una opción que puede encenderse y apagarse.

• Los usuarios pueden aprovechar la opción alternativa o arrastre el control deslizante hacia la izquierda o derecha para cambiar el estado del interruptor


Text field

Si los usuarios necesitan para escribir en su aplicación, puede incluir campos de texto de entrada.

Un teclado virtual aparece en la pantalla cuando el usuario toque un campo de texto. Los usuarios pueden ocultar el teclado, toque la pantalla fuera del campo de texto o pulsando la tecla Descartar teclado en el teclado


Text field

Los usuarios pueden tocar y mantener el dedo sobre el texto para resaltar una palabra o una serie de personajes.

Alternativamente, los usuarios pueden seleccionar un bloque de texto al tocar la pantalla en dos lugares al mismo tiempo


Media control

Los usuarios pueden reproducir, pausar, o pasar a la canción siguiente o anterior o el vídeo pulsando el control específico.

Los usuarios pueden adelantar o retroceder una canción o un vídeo arrastrando un dedo sobre la barra.

Llos usuarios pueden ajustar el volumen arrastrando un dedo sobre el control deslizante de volumen.

Creación de una plantilla de pagina basica

Vamos a construir la primer pagina utilizando jQuery Mobile, para lo cual vamos a seguir los siguientes pasos:

• Creamos un proyecto para android en phonegap, tal como fue explicado en el tutorial de la clase 4 – Phonegap.

• Creamos la siguiente pagina html:


<!DOCTYPE html> <html>

<head> <title>My Page</title> <meta name="viewport" content="width=device-width, initial-

scale=1"> <link rel="stylesheet"

href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" /><script src="http://code.jquery.com/jquery-1.7.1.min.js"></script><script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-

1.1.0.min.js"></script></head>

<body> <div data-role="page">

<div data-role="header"><h1>Proyecto JQ</h1>

</div><div data-role="content">

<p>Hello world</p></div>

</div></body></html>


Ejecutamos el codigo en phonegap y obtenemos el resulltado adjunto

Jquery mobile - Creacion de paginas multiples

• Source: multipage-template.html

• Atributos jquery-mobile: jquery-mobile.doc

Jquery mobile - Creacion de paginas multiples

Atributos Page – jquery mobile

Container with data-role="page"data-add-back-btntrue | false (auto add back button, header only)data-back-btn-textstringdata-back-btn-themeswatch letter (a-z)data-close-btn-textstring (text for the close button, dialog only)data-dom-cachetrue | falsedata-fullscreentrue (used in conjunction with

fixed toolbars) Deprecated in 1.1 - use on header and footer instead.data-overlay-themeswatch letter (a-z) - overlay theme when the page is

opened in a dialogdata-themeswatch letter (a-z)data-titlestring (title used when page is shown)

http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html

Jquery mobile - Creacion de una lista

• Source: index-lista-basica.html

Jquery mobile - Creacion de una lista anidada

• Source: index-listas-anidadas.html

Jquery mobile - Creacion de una lista anidada

Jquery mobile - Creacion de una lista numerada

• Source: index-lista-numerada.html

Jquery mobile - Creacion de una lista ordenada alfabeticamente

• Source: index-lista-alfabetica.html

Jquery mobile - Creacion de una lista con filtro de busqueda

• Source: index-lista-search.html

Jquery mobile - Creacion de una lista con formato de texto

• Source: index-lista-texto.html

Jquery mobile - Creacion de una lista con imagenes

• Source: index-imagenes.html

Jquery mobile - Creacion de un formulario

• Source: index-formulario.html

Jquery mobile - Creacion de listas con recuadros

• Source: index-listas-con-bordes.html

Jquery mobile – Listas con cambios esteticos

• Source: index-mas-listas.html

Jquery mobile – Listas con cambios esteticos


• Source: index-slider.html

FEEDBACK

¿Alguna duda?

¿Preguntas?

La próxima clase vamos a ver:

Almacenamiento local

• Local storage• Session storage

clase7 diseñode interacciónblackberry–iphone

Documents