Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Proyecto "iFlower"

No description
by

Karen Plata

on 5 October 2012

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Proyecto "iFlower"

Proyecto iFlower Diseño de Interfaz Gráfica basado
en la Experiencia de Usuario por Karen Ivette Plata Reyes Efecto que se produce en la interacción entre un producto y el usuario

Percepción del usuario
Positiva = Éxito
Negativa = Fracaso Experiencia de Usuario (UX) Aplicación móvil (app)
Software diseñado para dispositivos móviles que llevan a cabo una tarea específica. Aplicaciones para dispositivos móviles Este proyecto de investigación representa una pequeña muestra del mundo de oportunidades en donde el diseñador gráfico tiene la opción de ejercer la profesión. Además se aprecia que el quehacer del diseñador gráfico no tiene fronteras, los elementos gráficos que se generan hablan de una cultura, pero hoy en día la globalización permite que se adapten a diferentes culturas, teniendo un alcance extraordinario. Conclusiones Diseño de la interfaz gráfica basado en la experiencia de usuario de la aplicación para iPad Proyecto "iFlower" Antecedentes = UX + Interfaz Gráfica Proyecto "iFlower" Experiencia satisfactoria La estructura y diseño impactan directamente en la UX Pensando en la percepción que se quiere generar Objetivo Meta Garrett Kuniavsky Jacob Gube Desarrollador Web Humano - Sistema Cómo se siente una persona cuando se enfrenta a un sistema Humano - Dispositivo De acuerdo al dispositivo dependerá la forma en la que se implementará la UX Humano - Producto Persona tiene contacto con el producto y tiene que trabajar con él. Garrett Sitios Web / Apps producto de
"autoservicio" ingenio + experiencia Obstáculos en el entendimiento del funcionamiento del Sitio Web / App USUARIO FRUSTRADO Qué es lo que quieren y necesitan las personas (futuros usuarios) Calidad
UX Ventaja
Competitiva = Información clara
Diseño centrado en el usuario
Decisiones conscientes del diseñador Problema!
Centrarse en la estética y la marca, olvidando la necesidad del cliente. Autores El objetivo de la experiencia de usuario es facilitar el trabajo a las personas y ayudarlos a eficientar tiempos y a cometer menos errores, esto significa que siempre se debe optar por herramientas que resulten sencillas y naturales para el usuario. Importancia de la UX Guber, 2010 Elementos de la experiencia de usuario Acercamiento a cada plano El plano de estrategia se integra por las necesidades del usuario y los objetivos del sitio. Usabilidad No me hagas pensar! Claro
Obvio
Intuitivo
Fácil de entender El plano de alcance se divide en las especificaciones funcionales; refiriéndose al conjunto de funciones de un producto y los requerimientos de contenido; es la descripción de varios elementos de contenido que serán requeridos. El plano de estructura se divide en el diseño de la interacción; permite saber cómo responderá el sistema al usuario, y la arquitectura de la información; permite saber como se ordenaran los contenidos. El plano de Esqueleto se encarga de refinar la estructura que previamente se realizó, para ello es necesario identificar los tres componentes de este plano:
Diseño de la información
Diseño de la interfaz
Diseño de la navegación El plano de la superficie constituye el diseño visual, que es resultado final de cómo lucirá el producto terminado. Es en esta parte en donde el diseño generado cumplirá los objetivos de todos los planos. Proceso de Diseño Web de Goto y Cotler Fase 2 Fase 5 Fase 3 Fase 4 Fase 1 Definir el proyecto Desarrollar la estructura del sitio Diseño de la interfaz visual Construir e integrar Lanzamiento y mantenimiento Garret + Goto y Cotler = Sistema operativo específico Software se descarga de la Web Combina elementos de las app nativas con Web Diseñar para un dispositivo móvil de acuerdo a Warner y LaFontaine (2010) es una tarea compleja, ya que se debe diseñar para diferentes públicos y dispositivos móviles. nativos digitales y emigrantes digitales Razones por las que las personas utilizas la Web móvil:
- Conectarse con sus amigos y grupos sociales
- Ahorrar tiempo o dinero
- Matar el tiempo Diferentes dispositivos móviles iPhone iPad BlackBerry Google Android Palm Symbian Windows móvil Tableta desarrollada por Apple Inc.
“teléfono inteligente” (smartphone) y una computadora portátil, enfocado más al acceso que a la creación de aplicaciones y temas. Target: centrado en los usuarios y además les permite decidir cómo y dónde se van a utilizar sus productos.
Resolvió por primera vez las necesidades de los usuarios.
Apple transformó la tecnología de compleja a fácil. iPad domina el 97.2% de todo el tráfico de las tabletas en EE.UU.
El 70% la usa frente a la TV, mientras que el 57% en la cama. Principios de la interfaz humana Diseño para los usuarios Estrategias de diseño para una aplicación Lineamientos de la experiencia de usuario para dispositivos IOS Características de la plataforma Consideraciones para diseñar la interfaz para una aplicación con sistema operativo IOS: iPad Tamaño de la pantalla 768 x 1024 píxeles Las apps de IOS se caracterizan por ser fáciles de usar e intuitivas para el usuario Una buena interfaz de usuario sigue los principios de diseño de la interfaz humana, los cuales se centran en la forma de pensar y trabajar de los usuarios, dejando a un lado las capacidades de los dispositivos. Integridad estéticaConsistenciaManipulación directaFeedbackMetáforasControl de usuario Crear una declaración de definición para la aplicación
Personalización para cada tarea
Diseño de prototipo Enfocarse en la tarea principal
Incrementar el contenido que a las personas les interesa
Pensar de arriba hacia abajo
Generar una guía lógica para las personas
Hacer el uso de la aplicación fácil y obvio
Añadir realismo
Jerarquía de la información Terminología centrada en el usuario
Entrada de usuario
Minimizar gestión de ficheros de operaciones
Permiten la colaboración y conectividad
Ajustes de la app
Marcar apropiadamente
Entre otros... Target
Escenarios
Menús contextuales
Puntos de vista modal Lineamientos para la creación de imagen y personalización del ícono para la aplicación Un ícono es una pequeña imagen que se muestra en la pantalla de un dispositivo y representa un objeto que puede ser manipulado por el usuario. Usar la imaginación universal para que la gente reconozca fácilmente los elementos.
Evocar la simplicidad.Utilizar el color y la sombra con prudencia para ayudar al ícono a contar su historia.
Evitar el uso de texto en itálicas.Crear una versión estilizada de la materia en lugar de utilizar una foto.
Evitar el uso de los elementos de la interfaz de IOS.
No usar replicas del hardware de Apple para el diseño.
No reusar íconos de IOS en la interfaz.
Diseñar íconos realistas representa evocar con precisión elementos reales.
Utilizar transparencias cuando tenga sentido hacerlo. Recomendaciones para diseñar el ícono de una aplicación retomado del Manual de Interfaz Humana de Apple Íconos de la apps Atractivo visualmente para que el usuario lo identifique inmediatamente.
Se coloca en la pantalla de inicio y se toca para iniciar la app.
Debe transmitir la esencia del propósito de la aplicación, ser claro en su significado.
Debe ser cuidadosamente diseñado para conocer el impacto que puede percibirse por personas de diferentes culturas. Imágenes de lanzamiento Una imagen de lanzamiento se muestra cuando la aplicación se ha seleccionado y desaparece cuando la aplicación está lista para ejecutarse. El uso de esta imagen de lanzamiento refuerza la experiencia de usuario. Las medidas de las imágenes de lanzamiento para iPad son las siguientes:

Retrato / Vertical 768 x 1004 píxeles
Paisaje / Horizontal 1024 x 748 píxeles Metodología del proyecto 5. Diseño visual de la interfaz 3. Desarrollar la estructura de la aplicación 2. Definir el proyecto 1. Recopilación de información Desarrollo del proyecto Demola es una plataforma de innovación abierta y funcional, reconocida a nivel internacional para estudiantes y empresas. En Demola, los estudiantes universitarios desarrollan conceptos de productos y servicios de demostración junto con las empresas y crean nuevas soluciones a problemas reales. Metso es un proveedor global de tecnología y servicios a clientes en las industrias de proceso, incluyendo la minería, la construcción, pulpa y papel, energía, petróleo y gas.La empresa tiene presencia a nivel global - en todo el mundo emplean a cerca de 30,000 profesionales con sede en más de 50 países para lograr la sostenibilidad y la rentabilidad de los clientes en todo el mundo. Crear una aplicación que pueda identificar diferentes flores y árboles por medio de una imagen y crear una extensa base de datos para la búsqueda de la imagen (color, forma, lugar [lago, pantano, por carretera])

El proyecto “iFlower” fue un pretexto derivado de las necesidades de la empresa Metso Corporation para mejorar sus procesos industriales, por lo que además de competir en el mercado como una aplicación de identificación de flores, podrá reflejarse como una solución a un problema real; la tecnología de las cámaras que se utilizan para la visión de máquinas automáticas sirven para diferentes aplicaciones industriales, por ejemplo, la detección de defectos en el papel a mitad de la producción. Se prevé que la resolución de alta definición y cámaras a color van a sustituir las cámaras VGA en escala de grises que se utilizan actualmente. Necesidades del usuario Objetivo de la aplicación Target Ventajas competitivas Después de realizar este prototipo se tuvo una idea más amplia sobre el diseño de la interacción, la arquitectura y el diseño de la información, el diseño de la navegación y finalmente dio pauta para empezar a diseñar la interfaz a través de la experiencia de usuario. Estructura Prototipo Concepto Tipografía Logotipo de la aplicación Uso del color Íconos Ícono de la aplicación Íconos de la pantalla principal Íconos para personalizar la postal Logotipo final Imagen de lanzamiento Uso del color Pantalla principal (Home screen) Captura de pantallas de la app "flowrz" Imagen de lanzamiento Pantalla principal Pantalla "My Postcards" Primer paso en "Create Postcard" Segundo paso en "Create Postcard" Pantalla para introducir texto en "Create Postcard" Tercer paso en "Create Postcard" Pantalla de identificación en "Browse" Pantalla para escribir comentarios sobre la app "Feedback" La interfaz gráfica y los gráficos diseñados para esta aplicación cumplieron las necesidades de "Metso". Finalmente es importante recordar que el diseño de cualquier proyecto gráfico debe estar centrado en el usuario, siempre buscando generarle experiencias satisfactorias. Gracias! Mtra. Flor de María Gómez Ordoñez Hermila Navarrete García
Antonio González García Directora de tesina Revisores A todos los que creen en mí. Presentación de Tesina Octubre 2012
Full transcript