Diseño integral

DISEﾃ前 INTEGRAL Proyecto de desarrollo de aplicaciones para Windows Phone y S40

Liliana Clausell, Claudia Gindic Abraham Ibﾃ｡ﾃｱez

ÍNDICE

3

INTRODUCCIÓN

5

BRIEF

7

MARCO TEÓRICO SISTEMA OPERATIVO WINDOWS PHONE Y S40 SISTEMA METRO DE MICROSOFT HEURÍSTICA APLICACIONES

15

APLICACIÓN PARA WINDOWS PHONE 17

MARCO CONCEPTUAL PROPUESTA DE LA APLICACIÓN ESQUEMA DE LA APLICACIÓN DESCRIPCIÓN DE LA APLICACIÓN USOS COMPETENCIAS EN EL MERCADO VENTAJAS ANTE LA COMPETENCIA

25

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE DESCRIPCIÓN DEL DISEÑO PROPUESTAS DE LOGOTIPO LOGOTIPO FINAL EVALUACIONES HEURÍSTICAS Y RESULTADOS CAMBIOS IMPLEMENTADOS DISEÑO FINAL

41

MANUAL DE USO DE LA APLICACIÓN

ÍNDICE

43

APLICACIÓN PARA S40 45

MARCO CONCEPTUAL DESCRIPCIÓN DE LA APLICACIÓN USOS COMPETENCIAS EN EL MERCADO VENTAJAS ANTE LA COMPETENCIA

49

PROCESO DE DISEÑO PARA LA APLICACIÓN DE S40 DESCRIPCIÓN DEL DISEÑO EVALUACIONES HEURÍSTICAS Y RESULTADOS CAMBIOS IMPLEMENTADOS DISEÑO FINAL

55

MANUAL DE USO DE LA APLICACIÓN

57 CONCLUSIONES

PUBLICACIONES EN EL MARKET PLACE

59 FUENTES CONSULTADAS

INTRODUCCIÓN

INTRODUCCIÓN

El proyecto que se presenta, fue realizado por alumnos de 8º semestre de las carreras diseño industrial, diseño interactivo y diseño gráfico en la clase de Diseño Integral, (Diseño Vlll) durante el periodo de Otoño 2012 en la Universidad Iberoamericana, Ciudad de México. Éste proyecto nace de un convenio entre Nokia y la UIA. Trata sobre la realización de aplicaciones para teléfonos con sistemas operativos Windows Phone y S40.

Lo que Nokia pretende al traer éste proyecto a la universidad es generar más ventas con las aplicaciones que se creen dentro del curso, y poder encontrar nuevas ideas y probablemente nuevos mercados en donde sus aplicaciones puedan llegar a tener mayor público.

Dentro los objetivos principales de éste curso estan enseñar a los alumnos a desarrollar nuevas ideas de creatividad e innovación para poder crear la mejor solución ante un problema de diseño. Para ésto es necesario unir multiples disciplinas por lo cual la Universidad Iberoamericana imparte dentro de éste curso.

4

BRIEF

2

BRIEF

DespuĂŠs de la alianza de Nokia con Microsoft para poder implementar el sistema operativo Windows Phone 7 y 8 en los aparatos Smartphone, Nokia se ve en la necesidad de ofrecer una variedad de aplicaciones atractivas en el Marketplace y de ĂŠsta manera poder incrementar las ventas del Windows Phone, ante el IPhone y Android.

6

MARCO TEÓRICO

MARCO TEÓRICO

Un Smartphone (teléfono inteligente) es un teléfono celular construido sobre una plataforma informática móvil, con una mayor capacidad de computación y conectividad que un teléfono móvil convencional.

El término «smart (inteligente)» hace referencia a la capacidad. De acuerdo con The Competitive Intelligence Unit (fecha), durante el primer trimestre de 2012, el mercado móvil en México alcanzó 95.1 millones de usuarios, de los cuales el 15.5% usan teléfonos inteligentes (14.7 millones).

Su adopción ha mostrado un avance importante al crecer 26% respecto al año anterior, principalmente por el continuo descenso de los precios de la tecnología pero también por una mayor disponibilidad de equipos avanzados, la expansión en la oferta de planes de datos y el atractivo social de contar con un dispositivo de alta tecnología.

Del total de smartphones existentes en el país, 64% pertenecen al esquema de postpago, en el que los usuarios pagan menores precios por el equipo, ya que los operadores cuentan con un contrato que asegura sus ingresos, pudiendo subsidiar el costo del Smartphone. Por otro lado, el 36% restante son usuarios de prepago, quienes pagan un mayor precio por el equipo. Muchos de estos usuarios poseen equipos de segunda mano ya que casi dos terceras partes de los dueños de un teléfono inteligente vende o regala su equipo al adquirir un modelo más avanzado, lo que también ha impulsado el rápido incremento en la tenencia de estos dispositivos.

Entre los atributos preferidos por el mercado se reportan la capacidad para acceder a Internet. En el país, 91% de los dueños de estos dispositivos se conectan a Internet por medio de redes WiFi, mientras que el 51% tiene un plan de datos móviles con el que pueden tener acceso a la red desde cualquier lugar y en todo momento.

Unas de las principales ventajas que conlleva el ser propietario de un Smartphone en lugar de un teléfono móvil convencional es la facilidad que tienen éstos para realizar diferentes tareas con la ayuda de las aplicaciones móviles.

Según datos de Google, se descargan 18 aplicaciones por Smartphone. En promedio, un usuario es capaz de pagar por un total de siete aplicaciones.

Sistema operativo Windows Phone y s40 Nokia ofrece dos tipos de Smartphone: Windows Phone y s40. El sistema operativo s40 únicamente permite al usuario instalar aplicaciones de Java, y no aplicaciones nativas mientras que el de Windows Phone tiene un sistema operativo que permite desarrollar aplicaciones nativas de cualquier tipo.

8

MARCO TEÓRICO

Sistema Metro de Microsoft El sistema Metro es un sistema que exige llevar un diseño nítido y limpio, libre de excesos gráficos y dando énfasis en la tipografía de tal forma que sea funcional y atractivo para el usuario.

El sistema Metro es un modelo de diseño inspirado en íconos usados mundialmente para los sistemas de transporte.

9

En éste sistema por lo general se hace uso del diseño tipo panorama o pivot que se explicarán a continuación.

Se entiende por diseño Pivot cuando el usuario navega en una aplicación creada en distintas pantallas, en donde para ver la información tiene que navegar en cada pantalla de forma individual.

MARCO TEÓRICO

Por otro lado, a diferencia del estilo Pivot, el estilo Panorama está diseñado para permitir al usuario ver toda la información en una megapantalla, en lugar de acceder a cada pantalla por separado; en el diseño panorama únicamente recorre la vista para ver la información próxima.

Metro usa una animación natural constante en la transición de pantallas que responden a las necesidades del usuario y ocasionan una interfaz responsiva y activa para éste.

10

MARCO TEÓRICO

Heurística Se entiende por heurística como un conjunto de reglas desarrolladas a lo largo del tiempo por medio de la observación, las cuales indican lo que es óptimo para ser usado.

Se puede decir también que las heurísticas son métodos formales para predecir cómo el usuario se comporta y cómo debemos diseñar para ellos una interfaz adecuada.

En éste caso, una Heurística es una forma de medir si se cumplen las diez reglas fundamentales que cualquier aplicación interactiva debería de cumplir.

Lista de heurísticas: - Visibilidad del estatus del sistema: ¿Dónde se encuentra el usuario? Ésto es hacer entender al usuario lo que está pasando en el momento, e indicarle si el teléfono esta pensado, si está corriendo su aplicación, monstrandole el recorrido que ha llevado a cabo. Notificar el espacio que se ha usado en la memoria con cada aplicación, dar la opción de guardar los cambios, hacer saber a los usuarios qué pasara después de haber elegido una opción. Hacerlo saber que el proceso se terminó exitosamente.

11

-Lenguaje familiar: Hablar el mismo lenguaje que el usuario, por ejemplo utilizar el mismo sistema para regresar, para adelantarse, para aceptar, eliminar, etc. Hacer funcionar a la aplicación lógicamente. Usar categorías comunes y reconocibles para el usuario, por ejemplo las listas para seleccionar una ciudad, una opción a elegir, etc.

-Control y libertad del usuario: Dar la posibilidad al usuario para poder salir de la página siempre. Dar opción de poder continuar pero también cancelar o regresar a la página previa. Que el usuario no se sienta comprometido y con la seguridad de poder errar sin problema, libertad de explorar.

-Consistencia y estándares: El sistema tiene que cumplir el mismo tipo de estilo. Es importante la coherencia para evitar confusiones en el usuario.

Utilizar nombres consistentes, familiares y usando la terminología natural del usuario.

MARCO TEÓRICO

-Prevención de errores: Hay algunos casos en los que encontrarse con un caso de error es inevitable como el fallo de la red inalámbrica. Otros errores se pueden llegar a prevenir si la lógica de uso de la aplicación ha sido llevada a cabo correctamente. Para elegir la opción “continuar” lo ideal es poner un botón llamado “continuar” y no otra cosa. No hacer al usuario tener que investigar cuál es el botón correcto a presionar para hacer lo que quiere hacer.

-Reconocimiento más que el recuerdo: Reconocimiento por parte del usuario de las posibles condiciones que pueden generar un error, siendo específicos de lo que debe de realizar para él mismo prevenirlo. A su vez es importante diseñar para evitar. Evitar confusiones y dar seguridad al usuario de lo que está seleccionando con vistas previas, cuando sea posible.

-Flexibilidad y eficiencia de uso: Cualquier software bien diseñado y desarrollado debe ser eficiente y fácil de usar. Dar opciones de atajos, y también opciones de llegar a la opción deseada por medio de un recorrido más largo y específico. Dar únicamente las opciones necesarias y no mostrar exceso de información.

-Diseño estético y minimalista: Utilizar una ubicación de la información estratégicamente.

Brindar claridad y simpleza visual al usuario. Pensar claramente cómo no hacer al usuario contestar preguntas dobles, recaudar el máximo de información con el menor numero de preguntas. Es importante dar una buena primera impresión al usuario, mostrándole la interfaz mínima y precisa.

-Ayude a los usuarios a reconocer, diagnosticar y recuperarse de los errores: Dar a entender al usuario precisamente el error que cometió y cómo resolverlo. Se debe ofrecer una forma de llegar a la solución del problema de forma inmediata al indicar el error ocurrido.

-Ayuda al usuario y documentación: Cada sistema debe incluir junto con la ayuda y la documentación adecuada para ayudar al usuario a lograr un buen manejo del sistema. Mostrar los pasos para lograr realizar algo. Ayudar de una manera clara.

12

MARCO TEÓRICO

Aplicaciones Una aplicación (aplicación nativa o app móvil) es aquella que al utilizarla no nos remite a una página web, sino que funciona por si misma. Una aplicación web (webapp) nos envía a una página web, con la cual funciona.

Aplicación: Es un programa diseñado exclusivamente para un Smartphone y busca añadir funcionalidad al dispositivo móvil aprovechando todas las características del mismo. Son similares a cualquier programa de computador y están diseñadas para funcionar bajo cierto sistema operativo y correr de manera independiente cumpliendo una función especifica.

App móvil: Una App móvil es una aplicación que es descargada desde el Apple Store, Google Play, Marketplace o BlackBerry App World . La aplicación se instala en el teléfono, consume espacio y accede a recursos del teléfono como contactos, cámara, GPS, etc.

13

WebApp: Una WebApp es una aplicación que es accedida por los usuarios sobre una red como el Internet o Intranet. El término también puede referirse a una aplicación de software computarizado que es codificado en un navegador soportado por programación-lenguaje como JavaScript combinado a una interpretación de navegador como HTML. En conclusión, una Webapp es como diseñar un navegador que acceda a un sitio web específico.

MARCO TEÓRICO

App móvil Funciona offline u online

WebApp Necesita de internet

Requiere diseño especifico para cada plataforma (la interfaz cambia ligeramente para cada mercado)

Es mas fácil de adaptar a cada plataforma (es independiente del sistema operativo del cual se ejecuta)

Requiere descargar actualizaciones para su funcionalidad

Se actualiza automáticamente

14

APLICACIÓN PARA WINDOWS PHONE

MARCO CONCEPTUAL

MARCO CONCEPTUAL

La investigación realizada en el presente trabajo gira en torno a la necesidad de poder ubicar a una persona con exactitud en un determinado momento. Esta necesidad se ve reflejada en el hecho de que familiares o padres de familia pueden requerir ubicar a sus hijos cuando tan fuera de casa, para gerentes de empresas que necesitan ubicar en donde están sus empleados en procesos de repartición de productos, de ventas casa por casa, etc.

Realmente no existe en el mercado un dispositivo construido para satisfacer esta necesidad.

Tomando lo anterior en cuenta, se podría diseñar un a aplicación para un teléfono móvil que aprovechando las características de estos dispositivos se pueda satisfacer esta necesidad latente.

Se busca brindar a los usuarios: • Seguridad • Tranquilidad • Certeza • Confianza • Información • Localización • Simplicidad • Practicidad • Funcionalidad • Creación de base de datos

El usuario meta al cual se dirige la aplicación es aquella persona interesada en el rastreo de un tercero.

Se considera que será usada por personas de clases sociales: A/B(clase alta) y C+(clase media alta) A/B: Clase Alta – Es el segmento con el más alto nivel de vida. El perfil del jefe de familia de estos hogares está formado básicamente por individuos con un nivel educativo de Licenciatura o mayor. Viven en casas o departamentos lujosos con todas las comodidades.

C+: Clase Media Alta – Este segmento incluye a aquellos que sus ingresos y/o estilo de vida es ligeramente superior a los de clase media. El perfil del jefe de familia de estos hogares está formado por individuos con un nivel educativo de Licenciatura. Generalmente viven en casas o departamentos propios algunos de lujo y cuentan con todas las comodidades.1

1 AMAI, 2004, Clasificación de niveles socioeconómicos en México según la AMAI, Disponible en: http://www.fergut.com/wordpress/e-marketing/ clasificacion-de-niveles-socioeconomicos-en-mexico-segun-la-amai/

18

MARCO CONCEPTUAL

Propuesta de la aplicación En base a lo explicado anteriormente, se decidió diseñar una aplicación que permita enviar mensajes para mostrar la ubicación del usuario a un máximo de tres contactos previamente elegidos. El envío se puede programar para que sea único, o ser reenviado en automático cada treinta minutos. ¿Cómo funciona?

1.

2.

3.

4.

5.

Abrir la aplicación Redactar el mensaje Eligir contactos Elegir tipo de envió (mandar inmediato o cada 30 minutos) El mensaje y geolocalización serán enviados

19

MARCO CONCEPTUAL

Esquema de la aplicación

Abrir aplicación

Redactar mensaje

Elegir contactos

Elegir tipo de envío (mandar cada 30 min)

El mensaje y la localización serán enviados

20

MARCO CONCEPTUAL

Descripción de la aplicación I´m at es una aplicación que funciona por medio del envío programado y automatizado de mensajes con texto y ubicación geográfica a los contactos que sean establecidos.

El usuario redactará el contenido del mensaje a enviar, colocará el medio por el cual será enviado (sms o mail), programará el temporizador para que el mensaje sea enviado automáticamente o manualmente, y seleccionará los contactos a quienes desea enviar el mensaje.

Al momento de enviarlo, el móvil registrará automáticamente su ubicación geográfica que se adjuntó al mensaje.

Tiene distintos usos; rastreo de personal, rastreo de la ubicación de productos de la empresa, registro de zonas recorridas, etc.

Después de haber sido estudiado al mercado al cual se dirige ésta aplicación, los resultados muestran que no existe una aplicación que envíe la geolocalización adjunta a un mensaje de manera continua, aunque la competencia indica que existen otras aplicaciones que hacen uso de la geolocalización.

21

MARCO CONCEPTUAL

Usos Los posibles usos de la aplicación son los siguientes: 1. Una compañía que tiene trabajadores dedicados a la venta fuera de oficinas que quiera o necesite saber los lugares frecuentados por sus vendedores.

2. Para jefes de compañías que busquen conocer la ubicación de sus productos al momento de su distribución.

3. Padres de familia que desen conocer qué lugares recorrió el chofer contratado, y en dónde se encuentra cuando sus hijos están con él.

4. Usuarios que quieran enviar la dirección exacta de su ubicación para poder reunirse con más familia o amigos.

5. Usuarios que buscquen crear una base de datos que registre los lugares que ha recorrido y su dirección exacta para poder volver a frecuentar el lugar.

6. Padres de familia de un menor que desean conocer la ubicación de su hijo al estar fuera de casa.

22

MARCO CONCEPTUAL

Competencias en el mercado La competencia, en general, son las aplicaciones que permiten al usuario conocer su ubicación geográfica.

Los más usados y comunes son los siguientes: Google Maps - envío de ubicación vía mensaje (para todas las plataformas) Mandar ubicación del usuario por medio de Google Maps (funciona para otros sistemas operativos).

SeekDroid Anti Theft and Security (para la plataforma Android) Posee tanto una versión gratuita como una paga.

SeekDroid nos ofrece muchas características que nos pueden ayudar a encontrar un Smartphone perdido: -Acceder a un sitio web donde podemos localizar al celular vía GPS. -Apagar la alarma.

-Bloquearlo e incluso hasta hacer una limpieza remota tanto de la SD Card (Tarjeta de Memoria SD) interna como la externa.

La aplicación funciona incluso si la tarjeta SIM fue excluida de teléfono.

23

Foursquare (para todas las plataformas) Se basa en los “ingresos” que van haciendo los usuarios marcando los puntos en donde se encuentran en cada momento.

Se puede recomendar puntos favoritos, así como leer las opiniones del resto de personas que han pasado por allí, Gowalla (para todas las plataformas) Es muy similar a Foursquare. El concepto sigue siendo el de utilizar la geolocalización para jugar y alcanzar premios. Se ganan puntos visitando esos lugares.

Waze (para todas las plataformas) Se basa en compartir el trazado de los conductores que conduzcan con la aplicación activada, de esta forma los problemas que vayan encontrando en las carreteras, atascos, accidentes, tramos peligrosos, etc podrán ser consultados por otros.

Facebook Places (para todas las plataformas) Etiquetar nuestra posición y los lugares en donde nos encontramos en cada momento será una nueva posibilidad dentro del ecosistema de Facebook.

MARCO CONCEPTUAL

Ventajas ante la competencia Dentro de las comptencias investigadas, se pudieron destacar las siguientes características: 1. Se ofrece una fácil localización, predeterminada.

2. Selección de determinados contactos.

3. Uso de un temporizador.

4. Aunar un mensaje de texto al envío de la ubicación geográfica.

24

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Descripción del diseño El tipo de diseño que se usará en la aplicación con respecto a las pantallas será tipo Pivot.

Se utilizarán gráficos con el estilo Metro, caracterizados por su sencillez.

La interfaz será igualmente sencilla, predecible al usuario para evitar confusiones y errores.

Dentro del diseño del logotipo de la aplicación se buscó que fuera amigable con el usuario, utilizando una tipografía redonda sans serif para que no resultara agresiva hacia el público al que va dirigido.

Los colores utilizados en el logo fueron azules pretendiendo reflejar seriedad, sencilles y limpieza. El azul es un color sobrio entre los tonos fríos, y transmite seriedad, confianza y tranquilidad principalmente. Por éstas razones se decidió usar éste color dentro del logotipo junto con un círculos que remite a íconos de ubicación.

Se realizó un diseño de interfaz sencillo con solo una pantalla para evitarle confusiones al usuario y facilitarle la navegación dentro de la aplicación. Además se planeó seguir con la sencillez del estilo Metro para que de ésta manera no perdiera su escencia.

26

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Propuestas de Prototipos En el transcurso del desarrollo de bocetaje se crearon varias propuestas hasta llegar con las soluciones mas acertadas tomando en cuenta a el usuario meta y mercado hacia el que va dirigida la aplicación.

Propuesta seleccionada:

Desarrollo de propuestas para el logotipo:

Propuestas de color:

27

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Logotipo final Finalmente se seleccionó un logotipo que demostrara sencilles, seguridad, limpieza y armonía junto con el contenido del telefono Nokia Lumia con sistema Windows Phone.

La tipografía elegida, fue “Arial Rounden MT Bold”, una tipografía clara y limpia sin problemas de legibildad para que se puediera disntinguir de entre las demás íconos de aplicaciones existentes en el Market Place de Nokia Windows Phone.

Los colores elegidos, como se mencionó anteriormente, fueron una gama de azules ya que remiten limpieza, seriedad, sencilles y es un color neustro para el público en general.

No es molesto para la vista del usuario, ya que dentro de la pantalla del teléfono, se puede distinguir bien por el contraste que hace con el fondo y junto con los demás íconos.

28

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Evaluación heurística con los usuarios Con éste análisis se buscó obtener información objetiva del usuario y su interfaz con la aplicación.

Para la elaboración de estas pruebas se contó con 15 usuarios con un perfil que responde a las siguientes características: Edad: entre 21 y 53 años.

Formación: estudios universitarios o de preparatoria.

Antigüedad de navegación: entre 2 y 10 años.

El objetivo de este estudio es evaluar la eficiencia, eficacia y satisfacción con la que los usuarios usan la aplicación.

La evaluación consiste en un cuestionario y la observación de los mismos.

Se les pidió que realizaran las siguientes tareas: 1.

Abrir la aplicación 2.

Redactar el texto del mensaje 3.

Seleccionar los contactos a enviar 4.

Seleccionar la opción para mandar un único mensaje 5.

Seleccionar la opción de auto envío cada treinta minutos

29

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Los resultados fueron:

Tareas

Personas que lograron realizarla

Personas que no lograron realizarla

Abrir la apliación

15

0

Redactar el texto del mensaje

15

0

Seleccionar los contactos a enviar

15

0

Seleccionar la opción para mandar único mensaje

14

1

Seleecionar la opcion de autoenvío cada 30 minutos

13

2

30

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

El grado de satisfacción se evaluó mediante el siguiente cuestionario: 1. ¿Le parecen amigables los colores e iconos de la aplicación?

2. ¿Le pareció que la tipografía y su color son legibles?

3. ¿Siente temor al poder presionar un botón erróneamente?

4. ¿Le fue fácil saber en dónde se debía redactar el texto del mensaje?

5. ¿Le pareció sencillo seleccionar a los contactos para enviar el mensaje?

6. ¿Le fue fácil definir cómo se manda un único mensaje y cómo se auto envían los mensajes cada treinta minutos?

7. ¿Le parece que fueron demasiados pasos para lograr completar el envío?

31

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Preguntas

Si

No

Mas o menos

¿Le parecen amigables los colores e íconos de la aplicación?

15

0

0

¿Le pareció que la tipografía y su color son lo legibles?

15

0

0

¿Siente temor al poder presionar un botón erroneamente?

3

10

2

¿Le fue fácil saber en dónde se debía redacatar el texto del mensaje?

14

0

1

¿Le pareció sencillo seleccionar a los contactos para enviar el mensaje?

13

1

1

¿Le fue fácil definier como se manda un único mensaje y cómo se autoenvían los mensajes cada 30 minutos?

12

1

2

¿Le parece que son demasiados pasos para lograr completar el envío?

11

1

3

32

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Se calificó por medio de la observación, si los usuarios podían realizar las tareas requeridas con facilidad.

Se calificaron las respuestas del cuestionario aplicado con el fin de conocer la satisfacción de las personas. Las opciones de las respuestas fueron sí, no y más o menos.

El nivel de satisfacción se calificó como: - Muy satisfactoria - Algo satisfactoria - Nada satisfactoria

33

Gráfica de satisfacción: 85.7% muy satisfechos 8.6% algo satisfechos 5.7% nada satisfechos

85.7%

5.7% 8.6%

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Cambios Implementados Al inicio del proyecto, se pensó hacer uso de un temporizador el cual se programaba para poder auto enviar el mensaje en un determinado tiempo, pero debido a que la versión gratuita para programarlo no contaba con un temporizador de este tipo se hizo uso de un temporizador fijo de treinta minutos.

Con respecto al diseño de la aplicación se adaptó el color del texto de acuerdo a los fondos de cada pantalla para facilitar la legibilidad.

El fondo se programó para que automáticamente cambiara a determinadas horas del día, representando de esta manera, por medio del uso de colores, el momento del día en el que se encuentra el usuario.

34

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Diseño Final Después de la evaluación con el usuario (heurísitcas) se pensó darle un giro a la aplicación para que fuera mas atractiva para el usuario, para que no fuera tan seria y para que tuviera un poco de mayor dinamismo junto a otras aplicaciónes relacionadas con el tema dentro del Market Place.

Se decidió crear un fondo distinto para representar los tres horarios del día: mañana, tarde y noche.

Cada fondo contiene una ciudad en la parte inferior de la pantalla, representando que el usuario puede estar en cualquier parte de una ciudad.

El logotipo juega una doble función, ya que se encuentra centrado en la superior de la pantalla para que atraiga la atencion del usuario y así éste lo recuerde constantemente, mientras que por otro lado pueda representar a el sol y la luna dependiendo de la hora del día.

35

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Pantalla de portada para la aplicación

Pantalla de Día

36

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Pantalla de Tarde

37

Pantalla de Noche

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

38

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

39

PROCESO DE DISEÑO PARA LA APLICACIÓN DE WINDOWS PHONE

Como se explicó anteriormente, cada pantalla tendra un fondo diferente dependiendo de la hora del día en el cual se encuentre programado el mensaje a enviar.

Los colores fueron seleccionados con respecto a los colores y tonalidades del día, tarde y noche para que cada una pudiera tener una caracteristica diferente y asi la aplicación pudiera tener una idenidad propia y poder diferenciarse de las demás aplicaciones existentes en el mercado.

La idea de crear una ciudad con tonalidades diferentes fue presisamente para darle una idenidad propia a la aplicación y hacer que tenga un atractivo extra hacia el usuario para que éste se interese por la aplicación y la descargue a su telefono.

Finalmente ese es el proposito y meta final de éste proyecto, hacer que la gente baje aplicaciones de Windows Phone para tener mas seguidores dentro del mercado.

40

MANUAL DE USO PARA LA APLICACIÓN

MANUAL DE USO PARA LA APLICACIÓN

El uso de la aplicación constara de los siguientes pasos:

1

2 Abrir aplicación

3

Redactar mensaje

Elegir contactos

4

5

Elegir tipo de envío (mandar cada 30 min)

El mensaje y la localización serán enviados

42

APLICACIÓN PARA S40

MARCO CONCEPTUAL

MARCO CONCEPTUAL

Descripción de la aplicación Esta aplicación fue diseñada con el fin de dar a conocer tanto a mexicanos como turistas los lugares mas hermosos que el país posee. La aplicación hace uso de imágenes y una pequeña reseña de cada lugar, incluyendo su ubicación.

Los lugares recomendados no son los que se sugieren comunmente, sino, de manera general por otras aplicaciones similares o en el Internet.

Se buscó incluir lugares que su historia fuera interesante tanto de ser visitada, como de ser leída dentro de los textos de la aplicación.

La intención es fomentar el turismo y mostrar lugares poco populares de México.

Usos 1. La aplicación puede ser usada como base informativa, que narra los datos generales de determinado lugar.

2. También se busca fomentar el turismo y aumentar la visita de los mexicanos a lugares nunca antes recurridos.

3. Aumentar el conocimiento del propio país y explotar las maravilla que el mismo posee.

46

MARCO CONCEPTUAL

Competencias en el mercado La competencia directa que se encontró fue la siguiente: Tour Mexico Tour México es un guía turística en México que le ayudará al usuario a identificar todos los lugares de interés, la lista de los principales destinos, lugares de alojamiento, entretenimiento, playas, las empresas y mucho más. La aplicación funciona offline, por lo tanto, no hay necesidad de acceso a internet. Ésta aplicación tiene datos de logística, como las tasas de alojamiento, los mejores lugares para visitar, etc.

La aplicación resulta de gran utilidad como guía de excursión para cualquier persona que visite México tanto como para estancias vacacionales y de negocios.

Destination Mexico Esta aplicación tiene como objetivo dar todo tipo de información para experiencias que una nación rica en historia, tradición, cultura y belleza natural. Todo esto es posible a través de tu teléfono, con destino México

47

Mexico: Rough Guides Gran valor, guía de viaje a México por Rough Guides.

Todo lo que necesitas saber: desde los mejores restoranes y lugares de compras, hasta lugares que tienes que visitar, clima y transporte.

Mexico City Bienvenido a tu guía de la ciudad “Lonely Planet”! ¿Qué mejor que información de viaje que cabe en tu bolsillo y no ocupa ningún espacio en tu maleta? Ésta guía te proporciona recomendaciones por el autor de Lonely Planet en que visitar y hacer, donde comer, comprar y estar en la ciudad. A demás información de viaje esencial, almacenada en tu teléfono celular

MARCO CONCEPTUAL

Ventajas ante la Competencia Entre la comptenecia se pudo destacar las siguientes características que ésta aplicación puede tener a compración de las del mercado: 1. Diferenciación ante las otras al tratar especificamente sobre México.

2. Única aplicación en español 3. El mercado principal que se maneja dentro de ésta son mexicanos.

4. Es la única aplicación que tiene como objetivo, además de dar a conocer nuevos y diferentes lugares, culturizar a el usuario.

48

PROCESO DE DISEÑO DE LA APLICACIÓN S40

PROCESO DE DISEÑO DE LA APLICACIÓN S40

Descripción del diseño Los colores utilizados dentro del diseño fueron verde, magente y café debido a que son colores del folklor mexicano.

El verde y el magenta son colores complementarios entre si, por lo tanto ayudan a que el el interior de la aplicación sea armónica y amigabale a la vista el usuario.

El logotipo consta solamente de la tipografía con un fondo blanco para que no haya ningun tipo de ruido visual dentro de la pantalla del teléfono.

Se utilizará como primer pantalla imágenes de los diferentes lugares para atraer al usuario y que éste se interese en ellos.

Se incluyeron muchas imágenes, ya que ésto hace mas atractiva la aplicación.

50

PROCESO DE DISEÑO DE LA APLICACIÓN S40

Evaluaciones Heurísticas y Resultados Con éste análisis se buscó obtener información objetiva del usuario y su interfaz con la aplicación.

Para la elaboración de estas pruebas se contó con 15 usuarios con un perfil que responde a las siguientes características: Edad: entre 19 y 58 años.

Formación: estudios universitarios y de preparatoria.

Antigüedad de navegación: entre 2 y 10 años.

La evaluación consiste en un cuestionario y la observación de los mismos.

Se les pidió que realizaran las siguientes tareas: 1.

Abrir la aplicación 2.

Navegar dentro de ella

51

El grado de satisfacción se evaluó mediante el siguiente cuestionario: 1. ¿Le parecen amigables los colores e iconos de la aplicación?

2. ¿Le pareció que el texto es legible?

3. ¿Las imágenes utilizadas le parecen descriptivas y atractivas?

4. ¿Considera que es fácil navegar hasta encontrar el destino deseado?

5. ¿Le pareció sencillo aprender a usar la aplicación?

PROCESO DE DISEÑO DE LA APLICACIÓN S40

Se calificó por medio de la observación, si los usuarios podían realizar las tareas requeridas con facilidad.

Se calificaron las respuestas del cuestionario aplicado con el fin de conocer la satisfacción de las personas.

Las opciones de las respuestas fueron sí, no y más o menos.

El nivel de satisfacción se calificó como: - Muy satisfactoria - Algo satisfactoria - Nada satisfactoria Porcentajes de satisfacción: 91.6% muy satisfechos 6.7% algo satisfechos 1.7% nada satisfechos

52

PROCESO DE DISEÑO DE LA APLICACIÓN S40

Cambios implementados La aplicación nace para ser una base de datos tan extensa como sea posible sobre los lugares turísticos en Mexico, y por razones de diferenciación ante la competencia; se decidió incluir principalmente lugares poco populares, concurridos o visitados por la mayoría de la gente.

Diseño Final Al ver que el logotipo era muy similar a otros logotipos mexicanos existentes por los colores que se habían seleccionado, se decidió cambiar a otros tonos para que éste se diferenciara de los demás.

Finalmente se utilizaron verde y café ya que estos colores remiten a tierra y naturaleza y van de la mano con el concepto de lugares turisticos que por lo general en éste caso, son zona arqueológicas, boscosas, platas, lagos y rios.

53

PROCESO DE DISEÑO DE LA APLICACIÓN S40

54

MANUAL DE USO PARA LA APLICACIÓN

MANUAL DE USO PARA LA APLICACIÓN

El uso de la aplicación constará de los siguientes pasos:

1

2 Abrir aplicación

3

Seleccionar un imágen

4

Leer contenido de la pantalla

Seleccionar ir adelante o atrás por medio de las flechas

56

CONCLUSIONES

CONCLUSIONES

Tomando en cuenta los principales objetivos del proyecto, se concluye que los resultados son positivos ya que el proyecto se desarrolló y terminó existosamente porque cumple con satisfacer los objetivos inicialmente planteados.

Por medio de recursos técnicos y gracias a la interactividad de cada persona del equipo, se logró terminar con el proyecto a tiempo y cumplir el objetivo principal que fue la realización de aplicaciones para teléfonos con sistemas operativos Windows Phone y S40.

Se cree que las dos aplicaciones podrán tener un gran éxito dentro del mercado de Nokia Windows Phone ya que se cumplió con el marco teórico y marco conceptual investigados, así como con cada proceso de diseño y heurísticas planteadas.

Finalmente el diseño de las dos aplicaciones son armoniosas entre sí y cumplen con la funcionalidad de composición y color.

También, gracias a la sección de cambios implementados, se pudo llegar a un mejor resultado dado a que junto con los resultados de las heurísticas, se pudieron ver fallas y errores para asi mejorarlos y crear un mejor resultado.

58

FUENTES CONSULTADAS

FUENTES CONSULTADAS

Fundación Wikimedia, Inc. (2012). Teléfono inteligente.

Recuperado de: http://es.wikipedia.org/wiki/Tel%C3%A9fono_inteligente

Fundación Wikimedia, Inc. (2012). Web applicattion.

Recuperado de: http://en.wikipedia.org/wiki/Web_application

Karina Rodríguez. (2012). El uso del smartphone en México.

Recuperado de: http://www.pcworld.com.mx/Articulos/23186.htm

Nuria Rubio Carrión. (2006). Javascript. Recuperado de: http://perso.wanadoo.es/javascript_12/

Fundación Wikimedia, Inc. (2012). Aplicación web.

Recuperado de: http://es.wikipedia.org/wiki/Aplicaci%C3%B3n_web Fundación Wikimedia, Inc. (2012). Teléfono inteligente.

Recuperado de: Teléfono inteligente - Wikipedia, la enciclopedia libre Jack Nielsen. (2005). Ten Usability Heuristics. Recuperado de: www.useit.com/papers/heuristic/heuristic_list.html Jack Nielsen. (2005). Heuristic Evaluation. Recuperado de: http://www.useit.com/papers/heuristic/

Fundación Wikimedia, Inc. (2012). Page orientation.

Recuperado de: http://en.wikipedia.org/wiki/Page_orientation David Pérez Rodríguez. App Móvil versus Sitio Web Móvil.

Recuperado de: http://www.socialmediatfe.com/2012/06/05/webapp/ MobileBurn.com and Michael F. Oryl Jr..(2012). What is “S40”.

Recuperado de: http://www.mobileburn.com/definition.jsp?term=S40 Iusacell S.A. de C.V.. (2011). Nokia Lumia 800. Recuperado de: http://www.iusacell.com.mx/equipos/detalle_equipo. php?id_equipo=77

60

FUENTES CONSULTADAS

BY JCANEZ. (2012). En Defensa del S40. Recuperado de: http://conversaciones.nokia.com/tag/series-40/ Fernando Gutiérrez (2004). Clasificación de niveles socioeconómicos en México según la AMAI. Recuperado de: http://www.fergut.com/wordpress/e-marketing/clasificacion-de-niveles-socioeconomicos-en-mexico-segun-la-amai/ Alerta en Línea. (2011). Aplicaciones móviles: Qué son y cómo funcionan. Recuperado de: http://www.alertaenlinea.gov/articulos/s0018-aplicaciones-m%C3%B3viles-qu%C3%A9-son-y-c%C3%B3mo-funcionan Nokia. (2012). Nokia Nearby. Recuperado de: http://store.ovi.com/content/309930?clickSource=related%2Bcontent&contentArea=applications&pos=3

61