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 iPad
A 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 cuentas
Lista de buzones de correo
Lista de mensajes
Visualizació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"></scri
pt>
</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-textstring
data-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 dialog
data-themeswatch letter (a-z)
data-titlestring (title used when page is shown)

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

numerada.html

Jquery mobile - Creacion de una lista ordenada
alfabeticamente

alfabetica.html

Jquery mobile - Creacion de una lista con filtro
de busqueda

search.html

Jquery mobile - Creacion de una lista con
formato de texto

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

recuadros

Jquery mobile – Listas con cambios esteticos

• Source: index-mas-
listas.html

Jquery mobile – Listas con cambios esteticos

recuadros

• 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

Más contenido relacionado

Destacado (20)

Similar a Clase7 diseñode interacciónblackberry–iphone (20)

Más de Christian Cabrera (7)

Clase7 diseñode interacciónblackberry–iphone