Examen LC3 2013: Aplicación de Calendario

De Casiopea


Smart-calendar-logo.png


TítuloExamen LC3 2013: Aplicación de Calendario
Tipo de ProyectoProyecto de Curso
Palabras Claveaplicación, móvil, diseño de interfaz, examen
Período2013-2013
AsignaturaLenguaje Computacional 3
Del CursoLC3 2013
CarrerasDiseño Gráfico
Alumno(s)Camila Valenzuela, Josefina Borja, Franco Baldassare, Caterina Da Silva, Javiera Rojas
ProfesorJorge Barahona

Brief

Crear una aplicación simple para smartphone, de temática a elección, en donde se apliquen todos los conceptos estudiados a lo largo del trimestre, los cuales son:

  1. Estrategia
  2. Comportamiento de las personas
  3. Arquitectura de la Información
  4. Diseño de Interacción
  5. Diseño de Interfaz

Se da una semana para su desarrollo hasta el Diseño Front. Se realiza una presentación de 10 minutos mostrando todos el proceso de diseño. Entregar un reporte con la metodología utilizada de manera que cualquier persona pueda entender el proceso.

Objetivos de la aplicación

General

  • Crear una aplicación que tenga la capacidad de ordenar las actividades de las personas.

Específicos

  • Que tenga la capacidad de ordenar el tiempo en base a meses, semanas, días y horas.
  • Poder complementar los eventos con datos específicos como el clima, georreferenciación, contactos, etc.
  • Poder compartir la actividad con otro usuario que tenga la aplicación.

Benchmark y Análisis FODA

Para comenzar a plantear un proyecto de cualquier tipo, deben analizarse trabajos que se hayan hecho antes con el mismo objetivo. Hacemos una selección de algunas de las aplicaciones de Calendario y estudiamos sus contenidos e interacciones, además de realizar un Análisis FODA. Esta es una metodología de estudio de proyectos, la cual distingue sus características internas (Debilidades y Fortalezas) y su situación externa (Amenazas y Oportunidades).

iCal

iCal es una aplicación de calendario personal hecha por Apple para los computadores con sistema operativo Mac OS X. Almacena seguimiento de eventos y citas, permite múltiples vistas de calendario (como calendarios "domésticos", de "oficina" y "para niños") para identificar rápidamente conflictos de horarios y tiempo libre. Está integrado con MobileMe, por lo que los calendarios pueden ser compartidos por Internet. Se puede 'suscribir' a otros calendarios para mantener el contacto con amigos. Además, permite la recepción de notificaciones de próximos eventos tanto en la pantalla, por correo electrónico, SMS o buscapersonas.

Los calendarios personales, así como los que se está suscrito, aparecen en la lista de calendarios de iCal. Tiene tres modos de ver el calendario: Día, Semana y Mes. Los eventos se muestran como un pop-up dentro del calendario sólo con los datos que se le han configurado y con la opción de editarlos. Al editarlos, se muestran las opciones que no se han configurado y todos los campos se vuelven editables, los cuales son:

  • Nombre
  • Localización
  • (Si es durante) Todo el día: Sí/No
  • Desde (fecha y hora)
  • Hasta (fecha y hora)
  • Repetir: No, Todos los días, Todas las semanas, Todos los meses, Todos los años, Editar
  • Mostrar como: Ocupado/Libre
  • Calendario (al que pertenece)
  • Alarma: (xx) minutos antes
  • Invitados
  • Añadir archivo adjunto
  • Url
  • Notas

Tiene amplitud de configuración de visualización del tiempo del calendario. Puede adoptar varios tipos de calendarios externos. Tiene un buscador preciso de eventos pasados. Cuenta también con un Listado de Tareas Pendientes incorporado, a las cuales se les pueden asignar tags, como prioridad, fecha de entrega, calendario al que pertenece, para luego ordenarlos según esas características. Cuenta además con un widget para el Dashboard del Mac, la cual presenta de manera resumida las actividades del día seleccionado.


Análisis FODA

Fortalezas

  • Tiene amplitud de configuración de visualización del tiempo del calendario
  • Puede adoptar varios tipos de calendarios externos
  • Tiene un buscador preciso de eventos pasados
  • Cuenta con un Listado de Tareas Pendientes incorporado
  • Tiene un widget para el Dashboard

Oportunidades

  • Al venir preinstalada en todos los OS X, es una aplicación muy usada y conocida

Debilidades

  • Tiene un poco de dificultad de uso
  • Interfaz poco sensible para el usuario

Amenazas

  • La gente prefiere encontrar sus propias aplicaciones que se ajusten más a su personalidad, que el uso de las que vienen por defecto

Calendario (Android)

El calendario Android ofrece una manera práctica de llevar un registro de las eventos que el usuario puede necesitar que se le recuerde, ya que puede establecer recordatorios que le avisará a través del teléfono o de su cuenta de correo electrónico. El calendario de Android es bastante fácil de usar y funciona igual que muchos programas de calendario. La aplicación de calendario debe ser similar para la mayoría de las versiones del sistema operativo Android.

Puede visualizar el calendario en días, semanas y meses. Las tareas programadas se muestran con puntos en el mes. Si decide semanal o diaria se ve más detalle y será más fácil ver lo que se ha programado.

Para crear un nuevo evento hay que mantener apretado un momento en el día en que desea y se despliegan algunas opciones. Al seleccionar la opción que dice Nuevo evento, se pueden completar los detalles del evento, incluyendo cosas como el nombre, la fecha, la hora, la duración y la ubicación. También tiene la opción de agregar a otros calendarios Android si es que se tiene más de un calendario. Incluso hay una opción para que sea un evento se repita si es necesario. Por último, puede programar recordatorios o varios recordatorios. Si se desea ver los elementos que se han programado de una sola vez, se pueden ver pulsando el botón de menú y luego elegir Agenda, la cual muestra todos los eventos futuros.

Análisis FODA

Fortalezas

  • Rápido y fácil de entender
  • Interfaz simple y limpia

Oportunidades

  • Al venir preinstalada en todos los teléfonos Android, es una aplicación muy usada y conocida

Debilidades

  • Es muy básica
  • No permite mucha personalización de los eventos

Amenazas

  • La gente prefiere encontrar sus propias aplicaciones que se ajusten más a su personalidad, que el uso de las que vienen por defecto

Eventos en Facebook Versión Móvil

Facebook tiene la opción dentro de su gran espectro de aplicaciones internas, la función de organizar Eventos, la cual funciona bastante bien. Por lo que decidimos estudiarla en su formato móvil.

La pantalla principal consta de tres pestañas, la primera son los eventos futuros y es la información que aparece enseguida; la segunda, los eventos pasados; y la tercera, sólo de cumpleaños. Todas estas se ordenan por listas ordenadas por fecha: desde el presente al futuro (próximos eventos y cumpleaños) y del presente al pasado (eventos pasados).

Las páginas de eventos son bastante simples dentro de su complejidad: constan de una portada, título, respuesta a la invitación, lugar (con o sin georreferencia), Hora de inicio y término, tipo de evento (público o sólo con invitación), Más detalles (customizables por los anfitriones), los Anfitriones, las respuestas de los invitados (van, quizás, no van), para luego poner todos los comentarios de los invitados del evento.

Ponerle una dirección georreferenciada al evento tiene la gracia de que sale un complemento de cómo estará el clima ese día, aportando con información valiosa para los invitados y anfitriones.


Análisis FODA

Fortalezas

  • Parte de Facebook
  • Fácil de usar
  • Interfaz y datos heredados de Facebook

Oportunidades

  • Todos lo usan, inclusive si no están en facebook tienen acceso a las invitaciones de eventos

Debilidades

  • Sólo permite crean eventos sociales, no ordenar acontecimientos personales ni organizar los tiempos del usuario

Amenazas

  • Es fácilmente reemplazable y no todos lo utilizan de manera correcta

Week Calendar

Esta aplicación de calendario se basa en ser muy completa y sencilla de usar. Su logo hace énfasis al tradicional calendario de hojas en el cual se arrancan, por otro lado tiene un diseño amable, redondeado y con colores agradables.

Lo primero que se muestra es una barra superior donde se encuentra el menú desplegable, un icono de “store”, la numeraciòn de la semana del año, mes y año y un símbolo “add”. Forma: Botón Menú, botón tienda, Fecha (semana, mes, año), botón "plus".

Menú: El menú presenta un menú superior de color rojo con un contraste de fondo gris oscuro y letras blancas, con el botón atrás, la sección elegida y el boton de cierre (x). El despliegue de contenidos siempre se muestra en forma de lista.

Ofrece el servicio de seleccionar alguna clase de topic como: holidays, nature, sport, o weather: luego debes seleccionar el país específico y aparece alguna clase de calendario del lugar.

Botón (+) Plus: Se abre una ventana con el menú superio rojo, “añadir evento” en letras blancas, un submenú horizontal paralelo al primero, con dos botones: “x cancelar” y “Hecho”. Luego te entregan una plantilla de relleno con Título, lugar, empieza, termina,repetir, calendario, invitar, alerta, color personalizado, disponibilidad y notas.

Calendario: El calendario se muestra por una semana a primera vista cruzándose con las horas del día (cifras cerradas). Además se hace una clasificación de colores en las celdas: blancas durantes las horas que se consideran día, celeste claro para las que se consideran de noche o madrugada y celeste oscuro para el día en que se encuentra uno.

Interacción con el usuario: Se basa en un sistema de arrastre de actividades: estas no son dependientes del día ni la hora en que se programaron sino que con el dedo puedes re modificar sin necesidad de entrar al cuadro de programar el evento, los datos como hora y fecha.

Por otro lado la interacción no se queda solamente dentro de tu calendario, esta aplicación busca complementarla con otros usuarios que la usen, de esta manera se puede compartir el evento de manera sencilla agregando el e-mail de la otra persona.

Para mayor personalización del interfaz, te da la opción de poder seleccionar el color tanto de la aplicación en sí como de las actividades programadas de tal manera que puedas crear relaciones de tipos de tarea por color, o bien por simple gusto.

Arquitectura de Información: En sí tiene un orden muy claro. Sin embargo hay términos que no se relacionan a nada produciendo lagunas, en la que el usuario no saben para que es la opción. Así mismo hay accesos que están restringidos ya que hay que pagar y no te puedes dar por enterado para qué sirven. Ejemplo: Local (my calendar), sports, weather, nature, holidays, tuitea tu amor.(cada color es un nivel diferente)

Arquitectura de información


Análisis FODA

Fortaleza

  • Es un calendario ordenado en 7 días de la semana.
  • Es simple de utilizar.
  • El arrastre de los botones hace más rápido el acceso a que sean modificados.

Oportunidades

  • Da la posibilidad de relacionarse con otras personas, a través de las invitaciones a compartir dichos eventos.
  • Es perfecto para moverse dentro del contexto de empresas y de la vida de jóvenes universitarios.

Debilidades

  • Tiene problemas en el momento de invitar a compartir un evento ya que la tipografía no se marca.
  • No se pueden aprovechar al máximo sus aplicaciones por falta de claridad

Amenazas

  • Si otro calendario es diseñado mejorando la capacidad de compartir la información, puede ser desplazado de los favoritos.

Any.Do Cal

  1. Pantalla de Inicio:
    1. Al entrar a la aplicación la primera pantalla muestra el día "Hoy", con el mes y el año en el que estamos.
    2. Bajo esto se encuentra una barra con las fechas y días de la semana en la que nos encontramos y se marca la fecha de "hoy".
    3. Bajo la barra de la semana se encuentra el listado de tareas del día. Cada tarea contiene (de izquierda a derecha) la hora de inicio, el nombre y un punto de color que indica a qué calendario pertenece, ya que se pueden visualizar varios calendarios a la vez (trabajo, personal, cumpleaños, etc).
    4. En la esquina superior derecha se encuentran los íconos de "configuración" y "agregar nuevo evento".
  2. Calendario del Mes:
    1. Al deslizar hacia abajo la barra con las fechas de la semana se despliega el calendario correspondiente al mes.
    2. Para avanzar o retroceder entre un mes y otro se debe deslizar el calendario hacia la izquierda o la derecha respectivamente.
    3. El día "hoy" destaca en color rojo y podemos apretar las distintas fechas y ver los eventos que correspondan a esos días.
    4. Los eventos se visulaizan bajo el calendario.
  3. Día Siguiente:
    1. Al deslizar hacia la irquierda la pantalla inicial se puede avanzar por los días.
    2. El día siguente es nombrado no por la fecha sino como "mañana" ("tomorrow").
  4. Agregar Evento:
    1. Para agregar un nuevo evento debemos apretar sobre el símbolo "+" que se encuentra en la esquina superior derecha de la pantalla.
    2. Al hacer esto aparece una nueva pantalla en la que podemos poner un nombre al evento, agregar la hora de inicio y la hora de término o marcar que el evento ocupará todo el día.
  5. Cambiar Hora:
    1. Por defecto, las opciones de hora se basan en la hora que es al momento de crear el evento. Éste tendría una duración de 1 hr.
    2. Cuando ya hemos agregado el nombre y pasamos a modificar la hora aparece un botón verde en la pantalla de "añadir".
  6. Editar Evento:
    1. Luego de "añadir" el evento opcionalmente podemos agregar más información. En esta pantalla aparece el la fecha, el nombre y la hora del evento que hemos creado y bajo este aparecen los íconos de "personas", "lugar", "nota", "recordatorio", "repetir" y "eliminar".
  7. Agregar Personas:
    1. Al ingresar a la opción para añadir personas al evento ya estamos agregados como "yo" y la aplicación nos pregunta "quién más?"
  8. Agregar Lugar:
    1. La opción del lugar nos pregunta "dónde?" y por defecto encontramos unos botones de lugares como "casa", "trabajo", "restaurant", etc.
  9. Agregar Nota:
    1. La opción nota nos lleva a una pantalla con un recuadro para escribir más amplio que los anteriores, proponiendo un espacio para "párrafos" más que para "listado" o elementos individuales como esran los casos anteriores.
  10. Recordar Evento:
    1. Esta opción nos dice "recuérdame antes del evento" y, a diferencia de las demás, tiene a su lado una "x" para eliminar el recordatorio.
    2. Hay varios botones para elegir el tiempo del recordatorio ("15 min antes", "una hr antes", etc).
    3. El último botón nos permite personalizar el tiempo.
  11. Repetir Evento:
    1. Esta pantalla es similar a la de “recordar evento”, pero las opciones que aquí se muestran son “no repetir”, “repetir a diario”, “repetir semanalmente”, “repetir cada dos semanas” etc.
  12. Eliminar Evento:
    1. Aquí se muestran los botones “cancelar” y “eliminar”, este último destacado en color rojo.
    2. A diferencia de la pantalla de la opción de “recordar evento” en que la opción de “cancelar” se encontraba en una “x” al lado del texto, en este caso la acción “cancelar” se encuentra en un botón.
  13. Configuración: Dentro de la configuración podemos modificar los siguientes ítems:
    1. Visible Calendars: Podemos elegir los calendarios que queremos que sean visibles en la aplicación (trabajo, personal, cumpleaños, etc.)
    2. Default Calendar: Elegimos el calendario predeterminado.
    3. Default Reminders: Elegimos los recordatorios predeterminados (15 min antes, 1 hr antes, 2 hr antes, etc.)
    4. Week Start: Podemos escoger si la semana comienza un día lunes o un domingo.
    5. Feedback: Aquí tenemos la opción de puntuar la aplicación, compartirla, aportar ideas, etc.
    6. Photo Theme: Podemos elegir las fotos que queremos que se vean de fondo en nuestro recorrido por la aplicación. Esto la hace más personalizable.
    7. App Icon Badge: Podemos elegir que el ícono de notificación de la app que aparece en la esquina del ícono para entrar a esta nos muestre el la fecha en la que estamos o las invitaciones que tenemos pendientes. O podemos simplemente suprimirlo.
    8. Conect with Any.DO: Es compatible y se puede conectar con esta aplicación de gestión de tareas (to do list) creada por los mismos desarrolladores.
  14. Evento: (Imágenes 14, 15 y 16)
    1. Cuando entramos a algún evento la pantalla nos muestra secciones con la información que este contiene y al final los íconos para agregar más información.
    2. La parte superior nos muestra la fecha, el nombre y las hora en que se realizará el evento.
    3. En segundo lugar se muestra una sección con las personas que participarán en el evento y opciones para agregar a más gente.
    4. La tercera sección muestra el nombre y un mapa del lugar en que se realizará el evento. Al lado se encuentra el ícono de geolocalización “Navigate”.
    5. Posteriormente se muestra la “nota” de información complementaria del evento. Las secciones tienen un espacio definido, por lo que si la nota es más extensa que este espacio hay que ingresar a la sección para verla completa.
    6. Si no hay más información, abajo están los íconos para agregarla.

Arquitectura de la Información

Mapa de Contenidos Any.do CAL

Análisis FODA

Fortalezas

  1. Es intuitivo y fácil de usar.
  2. Se pueden compartir eventos con distintas personas y a traves de distintos medios (facebook, correo electrónico)
  3. Se pudee sincronizar con una aplicación de tareas ("Any.DO")
  4. Es perzonalizable por medio de fotografías, lo que permite a la persona apropiarse de la aplicación.
  5. Muestra en tiempo libre (free time) que hay entre una actividad y otra.

Oportunidades

  1. Ampliarse al mercado de otros sistemas operativos ya que actualmente solo está disponible para IOS.

Debilidades

  1. Se puede visualizar el calendario por meses, pero no por años, por lo que para ir a un mes lejano debo avanzar uno a uno por todos los meses.

Amenazas

aCalendar-Android

aCalendar es una aplicación para Smartphone, que ofrece la organización de eventos y actividades por día, con alarmas recordatorias. El usuario puede navegar a meses anteriores y próximos, por lo que puede editar los contenidos a largo plazo. El modo de uso es bastante parecido al resto de las aplicaciones, lo que facilita el aprendizaje en el usuario. Para agregar eventos solo se debe presionar largo en el día que se quiere, del mismo modo si se presiona largo sobre el mes que esta en la caja derecha inferior, dirige a la fecha del día. Por otro lado la visualización puede ser por día, por semana o por mes. También entrega información sobre las fases del calendario lunar. Posee 48 colores por calendario y por evento. Tiene recurrencia flexible, por ejemplo cada tres semanas; los cumpleaños y aniversarios son con fotografías del addressbook del Smartphone, y se puede editar pantalla completa y tamaños tipográficos. Por ultimo, usa la sincronización nativa del calendario Android.

Análisis FODA

Fortalezas

  • Es de uso fácil y simple.
  • La creación de eventos bastante completa, abarcando todo tipo de actividad.

Oportunidades

  • Puede ser descargado en cualquier Smarphone.

Debilidades

  • La interfaz es bastante débil, en la manera de visualizar los contenidos.

Amenazas

  • Hay mejores aplicaciones de este tipo.

Arquitectura de la Información y Prototipado

Personas y Escenarios

Para comenzar con el diseño de contenidos, primero se tiene que tener claro para quiénes se está diseñando, cuáles son sus realidades y necesidades. Los personajes y la creación de escenarios son técnicas que facilitan ponerse en el lugar del usuario y diseñar la aplicación adecuadamente para este.

Según el libro About Face de Alan Cooper pueden existir hasta 6 tipos de personajes dentro de todo proyecto: primarias, secundarias, suplementarias, clientes, a las que se le da servicio (served) y negativas. Aquí hacemos uso de algunos de estos personajes para ejemplificar el uso del sitio.

Primario: Adulto Joven

Las personas primarias representan el objetivo principal para el diseño de una interfaz.

Ejecutivo.png
  • Persona: Sebastián Alfaro
  • Ocupación: Ejecutivo de marketing en de la empresa Gasco.
  • Edad: 28 años.

Descripción: Sebastián trabaja en la semana de 8:00 a 19:00, por su cargo en la empresa tiene constantes reuniones y actividades en distintos lugares de la región. Es por esto que pasa la mayor parte del tiempo fuera de la su oficina. Para organizarse, en su escritorio tiene una agenda donde anota todas sus reuniones y actividades, a su vez utiliza la aplicación de calendario que viene en su Smartphone, donde activa los recordatorios para no olvidar las cosas por hacer.

Escenario: Es martes por la mañana, Sebastián llega a la oficina a las 8:00, lo primero que hace es revisar su agenda. Tiene una reunión a las 11:00 con los dueños de la empresa, y a las 16:00 tiene visita a terreno en Quilpué donde están realizando un nuevo proyecto. Luego revisa el calendario en su Smartphone para ver si tiene las actividades del día, con la información necesaria. Ocurre que al ingresar a la aplicación le resulta poco amigable, ya que para la visualización de contenidos por día tiene que hacer scroll, ya que aparecen ordenados por hora, donde están en lista las 24 horas. Para él sería bastante más accesible si los contenidos estuviesen ordenados por evento y visibles a primera vista, sin tener que hacer scroll.

Secundario: Madre

Un personaje secundario está en su mayoría satisfecho con la interfaz del personaje principal, pero tiene necesidades específicas adicionales que se pueden acomodar sin alterar la capacidad del producto para servir a la persona primaria.

  • Persona: Claudia Morales
  • Ocupación: Profesora escolar.
  • Edad: 43 años.
Profesora-historia.png

Descripción: Claudia es madre de dos hijos y profesora de Historia del colegio Seminario San Rafael. Dentro de sus actividades cotidianas, asiste a reuniones de trabajo, va a buscar a los hijos al colegio, y se junta con sus amigas. También por las tardes realiza talleres extra-programáticos en el colegio. Sus días son bastantes atareados y por lo general trata de recordar todas las cosas que tiene que hacer, a veces se ayuda con su Smartphone, donde anota eventos que podría olvidar.

Escenario: Es miércoles por la tarde y está ocupada en tareas de la casa, uno de sus hijos está invitado a la casa de un compañero y lo tiene que ir a buscar. Mientras está preocupada de todas las cosas que tiene que realizar, en su Smartphone suena una alarma y lee “cumpleaños Rosita”, recuerda que debe llamar a una buena amiga de infancia que cumple 44 años, lo había olvidado por completo. Por estar tan ocupada decide llamar a su amiga al regreso de ir a buscar a su hijo, pero en la aplicación no encuentra ninguna opción para repetir la alarma más tarde, y debe editar en evento.

Secundario: Adulto joven

  • Persona: Camila Durán
  • Ocupación: estudiante de la Universidad de Valparaíso.
  • Edad: 20 años.
Enfermeria-.png

Descripción: Camila es estudiante de enfermería, va en tercer año y ella utiliza su Smartphone para anotar sus horarios de clases, fecha de exámenes y tareas. Además organiza sus días a través de la aplicación de calendario, anota los cumpleaños de sus amigos, fiestas y todo lo que tiene que realizar en la semana. Le encanta estar actualizando su aplicación de calendario.

Escenario: Es sábado por la mañana y tiene una lista de cosas por realizar para este día, lo primero que hace es revisar su calendario para recordar todo lo que tiene que hacer en la semana y tratar de adelantar estudios, ya que está en semana de exámenes. Además tiene un cumpleaños en la noche, por lo que tiene que ir al mall a comprar un regalo. Ella cada día debe ingresar a la aplicación para revisar lo que tiene que realizar, pero cree que su funcionamiento no es el mejor ya que la visualización le parece un poco incómoda, y dentro de la aplicación falta una sincronización del horario con los eventos extraordinarios.

Suplementario: Adulto

Sus necesidades están totalmente representados por una combinación de personas primarias y secundarios y están completamente satisfechos con la solución que ideamos para uno de nuestros usuarios.

  • Persona: Juan Escobar
  • Ocupación: Abogado.
  • Edad: 57 años.
Abogado-.png

Descripción: Juan trabaja tres veces a la semana en el Congreso, y el resto en la notaría. Debido a su oficio sus días son de muchas diligencias, papeleos y trámites, a su vez diariamente debe atender reuniones. Por lo general debe viajar a Santiago una vez cada 15 días. Para organizarse utiliza una libreta que lleva siempre el bolsillo, pues no confía mucho en la tecnología, no sabe cómo ocuparla y no sabe utilizar las aplicaciones de su Smartphone.

Escenario: Son las 7 de la mañana del día viernes, está apurado por salir de la casa ya que debe viajar a Santiago para ir a tomarse un examen en la clínica Santa María. Busca su libreta antes de salir y no recuerda donde la ha dejado. Le pide a su hijo que le ayude a buscarla, pero no la encuentran por ningún lado, como él está apurado no puede seguir perdiendo tiempo. Su hijo le explica la fácil que sería si el utilizara la aplicación de calendario que posee su Smartphone, pero Juan como solo lo ocupa para llamadas y mensajes de texto, no sabe que existe dicha aplicación. Finalmente el hijo le explica en breves minutos el funcionamiento la aplicación de calendario.

Concepto de la Aplicación

A partir del Benchmark, elegimos los conceptos más usados por las aplicaciones revisadas anteriormente. Se pensó el diseñó en siete pantallas distintas:

  1. Pantalla por día:
    • Encabezado: Fecha (Ej.: Lunes 24 de Agosto de 2013)
    • Icono Clima (Ícono, Temperatura Máxima y Mínima)
    • Listado de las horas del día (aparecen las horas que no se consideran parte del día con una leve sombra)
    • Caja de evento: Hora de Inicio y nombre del evento
    • Considerar que los eventos que duran todo el día son el primer evento en aparecer arriba de que comienzan las horas del día 00:00
  2. Pantalla por semana:
    • Encabezado: Mes y Año
    • Lista de días de lunes a domingo (Ej.: Lu20, Ma21, Mi23, Ju24, Vi25, Sa26, Do27)
    • Icono Clima Max/Min (en la misma columna y solo para los 7 días siguientes)
    • Actividad todo el día aparecen entre Clima y (00:00hrs)
    • Vista de actividades paralela de actividades por semana
    • Horas que se consideran noche, levemente oscurecidas (fondo)
    • Eventos arrastrables para cambiarlos de día
    • Cambio de semana arrastrando el mapa (izquierda o derecha)
  3. Pantalla por mes:
    • Encabezado: Mes y año
    • Se muestran el mes completo en filas (5 filas son 35 días); los días extra pertenecientes al mes anterior y al mes siguiente, se muestran oscurecidos y si la persona desea, puede hacer click, donde automáticamente cambiará al mes siguiente
    • Cada casillero lleva su número de día de la fecha
  4. Pantalla editar evento: Esta pantalla te permite rellenar todos estos aspectos y poder crear tu evento. Los datos obligatorios son: nombre de evento, fecha de inicio, fecha de termino y seleccionar categoría por color.
    • Nombre
    • Localización
    • Todo el día: Sí/No
    • Desde (fecha y hora)
    • Hasta (fecha y hora)
    • Repetir: No, Todos los días, Todas las semanas, Todos los meses, Todos los años, Editar
    • Mostrar como: Ocupado/Libre
    • Calendario
    • Recordatorio: (xx) minutos antes
    • Añadir archivo adjunto
    • URL
    • Invitados
    • Descripción
    • Eliminar/Cancelar
  5. Pantalla Evento: Muestra solamente los datos rellenados por el usuario al crear el evento.
  6. Pantalla menú: Este es un menú horizontal que se despliega desde abajo de la pantalla. Consta de seis botones:
    • Hoy
    • Día
    • Semana
    • Mes
    • Crear evento
    • Ajustes
  7. Pantalla Ajustes:
    • Editar tipo de evento
    • Suscribirse a calendario
    • ¿Cuándo comienza la semana?
    • ¿A qué hora comienza el día?
    • ¿A qué hora termina el día?
    • Cambiar tono de alarma
    • Seleccionar zona horaria
    • Sincronizar con e-mail
    • Ayuda

Mapa de Contenidos

Un mapa de contenidos especifica todos los contenidos que se quieren incluir en un sitio web, organizados y definidos con detalle. Ayuda a una mejor compresión y visualización del contenido, mostrando las secciones, los documentos y sus relaciones.

El mapa de contenidos no es necesariamente cada página que contiene la aplicación, sino cómo los contenidos de éste se relacionan entre sí. De esta manera, tomamos los conceptos de las páginas que definimos anteriormente para comenzar a unirlos entre ellos.

Calendario2.jpg

Mapa de Navegación

Los mapas de navegación proporcionan una representación esquemática de la estructura del sitio, indicando los principales conceptos incluídos en el espacio de la información y las interrelaciones que existen entre ellos. A pesar de que la definición se parezca mucho a la de un mapa de contenidos, son muy distintas, ya que en éste nos enfocamos en la organización de las páginas y cómo funcionarán los hipervínculos dentro de la aplicación.

Calendario.jpg

Viaje de Usuarios

Ocupamos las partituras de interacción o viajes de usuarios, para proponer un sistema de notación gráfica para formalizar los flujos de interacción en una plataforma o servicio digital.

Las partituras de interacción, descomponen el dialogo entre la persona y el servicio en tres distintas capas horizontales:

1. Acciones del usuario:la intencionalidad del usuario expresada en sus acciones concretas


———————— línea de interacción ————————

2. Contacto directo: los elementos de interfaz que permiten al usuario ejecutar tales acciones


———————— línea de interacción interna ————————

3. Proceso: las funciones que permiten al sistema (servidor) dar respuesta en el diálogo con el usuario

Cada módulo de interacción se compone como un compás o patrone de interacción en esta partitura. Estos compases permiten ensamblarse para verificar la lógica y la calidad de la experiencia en determinados escenarios de uso, así como detectar inconsistencias o puntos críticos en el servicio.

Se ocuparon los cuatro usuarios creados en persona y escenario, para que a partir de ellos se crearan distintos casos según su perfil de uso con la aplicación.


Usuario Primario

Usuario primario 1.png

Usuario Secundario

Usuario secundario 1.png

Usuario Secundario

Usuario secundario 2.png

Usuario Suplementario

Usuario sumplentario 1.png


Wireframes de Baja Intensidad

Los wireframes de baja intensidad tienen pocos detalles y son rápidos de producir. Ayudan a un equipo de proyecto a colaborar más efectivamente debido a que son más abstractos, usando rectángulos y etiquetas para representar el contenido.

Para hacer este primer acercamiento visual a la aplicación, utilizamos Pidoco, una herramienta de prototipado que permite la navegabilidad en la maqueta. Basándonos en lo estudiado previamente en el mapa de contenidos y de navegación, creamos wireframes para cada una de las páginas de la aplicación. Pueden verse en línea en este Link.

Usabilidad

Testeo de Wireframes

Pruebas

Las pruebas que se realizaron a los usuarios fueron cinco, con ellas pudimos ver el el funcionamiento real de los wireframes propuestos en base al benchmark. Estas fueron:

  1. Revisar evento día lunes 26 de Agosto.
  2. Editar el evento del día lunes 26 de agosto y guardar los cambios.
  3. Cambiar el modo de ver el calendario a mensual.
  4. Revisar la configuración de la aplicación.

Para la realización de estas pruebas participaron cuatro personas basadas en nuestros arquetipos.

Macarena Álamos

Macarena Álamos
  • Arquetipo: Adulto Joven.
  • Edad: 26 años.
  • Ocupación: Ayudante de Diseño Gráfico, de la Universidad Católica de Valparaíso.

Macarena es una persona que bajo un régimen académico cumple horarios y labores relacionadas con el curso de Diseño Gráfico en el cual trabaja. Además trabaja para el Taller de ediciones Gráficas, el cual también tiene múltiples encargos.

Alejandra Arriagada

Alejandra Arriagada
  • Arquetipo: Madre
  • Edad: 46 años.
  • Ocupación: Asistente administrativa en Clínica Dental.

Alejandra se desempeña como Asistente administrativa de tiempo completo en Viña del Mar, es madre de dos niñas, que ya están en la universidad, y dueña de casa. Además, debe cuidar y ayudar a su madre que se encuentra bastante débil de salud, en los quehaceres de su hogar y sus tratamientos médicos. No cuenta con una empleada que la ayude con las labores de su casa, por lo que debe recurrir a su capacidad multifacética para lograr organizar sus tiempos.

Alejandro Baldassare

Alejandro Baldassare
  • Arquetipo: Adulto
  • Edad: 53 años
  • Ocupación: Arquitecto independiente

Alejandro, es un arquitecto independiente que debido a su ocupación tiene múltiples tareas como reuniones con clientes, ir a cotizar materiales, viajes a las diferentes obras que realiza, reuniones con ingenieros y con la municipalidad. Debido a estas razones, se creemos que tiene la capacidad de poder acceder a la aplicación y ser un usuario que pueda depender de esta.

Josefina Baldassare

Josefina Baldassare
  • Arquetipo: Adulto Joven
  • Edad: 20 años
  • Ocupación: Estudiante de Sicología UAI

Josefina como estudiante debe estudiar para nueve ramos en el semestre y cada ramo tiene sus pruebas en fechas y horas determinadas. Además consta de trabajos grupales y eventos externos como cumpleaños o fiestas.

Desarrollo

Chart 1 (3).png
Chart 2.png

En el desarrollo de este procedimiento se puede observar que los resultados son altos. Sin embargo, hay que tener en cuenta ciertos factores: Los tiempos consideran tiempos no manejables como el uso del internet móvil del teléfono. Tambien hubo tiempo de retraso debido a que la pantalla se achicaba automáticamente al cambiar de pantalla y era necesario ampliarla cada vez.

Dentro del desarrollo nos dimos cuenta que las personas sin querer erraban al clickear sin su voluntad producto de lo diminuto del botón, por otro lado, algunos preferían ver la aplicación en colores, pensando en que eso les ayuda a encontrar algún botón.

Resultados

  • El mayor problema que se pudo detectar fue que el menú no era tan accesible. De manera que se debe re-pensar donde será ubicado.
  • Se puede observar que para Alejandra, no fue sencillo llegar a la configuración ya que no lo relacionaba al menú.
  • Es necesario aumentar el tamaño de las tipografías no siempre leían correctamente.
  • Se debe aumentar el tamaño de botones y pensarlos de que son botones táctiles.

Evaluación Heurística

Se tomo la decisión que el estudio de Heurística debía ser realizado tras la creación de la maqueta que iba a ser realizada en base a la prueba con usuarios. De tal manera se podía reconocer las fallas de la maqueta y complementarla con el estudio de de datos obtenido desde las pruebas de usuarios.

Lenguaje y Redacción Fue aprobado el sitio con un 97%. No presenta problemas de lenguaje, usando un código el cual maneja el usuario.

Identidad No se evidencia la identidad de la aplicación durante se mantiene en funcionamiento. Como objetivo se busca una aplicación clara y que deje la información del tipo de soporte en la sección de ayuda.

Rotulado El porcentaje de aprobación es de un 27%, sin embargo, el sitio está enfocado a ofrecer la información justa sobre el contenido de la aplicación dejando al margen la información sobre quién crea esta aplicación, por lo tanto no es malo.

Accesibilidad En general está bien, sin embargo se necesita modificar los espacios y tipografías con el fin de que pueda ser leído por cualquier usuario.

Estructura y Navegación Tiene un 100% de aprobación, demostrando cercanía al usuario, optando por una simplificación del contenido logrando una comunicación rápida y clara.

Lay-out de la página Este aspecto fue aprobado con un 96%, logrando crear espacios bien definidos y creando canales de comunicación efectivos

Conclusión de Resultados

  • Hay un choque entre el estudio Heurístico y la prueba con usuarios, ya que no se considero la posibilidad de que la persona pueda tener mala visión.
  • El estudio Heurístico deja de lado las herramientas multimedia como imágines y videos, debido a que no es lo primordial. Por otro lado el botón alt, no existe en los smartphones.
  • Tampoco tiene la facultad de clickear la imagen ya que se necesita información clara y concisa de lectura rápida.
  • La transmisión de compartir eventos, es personal vía e-mail y posible de realizar en la ventana de los eventos. Por ende la, información del usuario es protegida bajo los parámetros del servidor de correos.
  • La información sobre la aplicación y datos de la empresa, puede ser obtenida desde el menú de configuración en la sección "ayuda".

Diseño de Interfaz

Rediseño de Wireframes

A partir de las pruebas de usuario y el estudio heurístico realizado a la primera maqueta de la aplicación, aplicamos correcciones a éstos para pasar al diseño de interfaz. Se puede revisar una versión navegable de esta segunda maqueta en este Link.

Diseño Front

En diseño web, la visualización del usuario navegante por un lado es llamado front-end y el back-end es la parte que procesa la entrada desde el front-end. La idea general es que el front-end sea el responsable de recolectar los datos de entrada del usuario, que pueden ser de muchas y variadas formas, y procesarlas de una manera conforme a la especificación que el back-end pueda usar.

Tipografía

Elegimos la familia tipográfica Roboto para desarrollar esta aplicación. Fue creada para Android y todas sus variantes fueron liberadas para su descarga y uso gratuito.

Roboto La usamos para escribir los números de las fechas, los campos editables y la rótulado de las páginas. Se puede ver la familia tipográfica completa de Roboto en GoogleFonts.

EXLC3-2013-Interfaz-roboto.png

Roboto Slab Fue ocupada para el logo y los menúes de navegación. Se puede ver la familia tipográfica completa de Roboto Slab en GoogleFonts.

EXLC3-2013-Interfaz-robotoslab.png

Paleta de Colores

Creamos una paleta de 5 colores en base a estudios sicológicos sobre los efectos del color en las personas (Link). De esta manera, elegimos los colores para que fuesen amigables con el usuario, independiente de su sexo y edad.

  • Naranjo: #F9A032 (Resalte)
  • Celeste: #2198B8 (Logo, menú y detalles)
  • Gris: #A7A7B7 (Días pasados y de otro mes)
  • Fondo: #C4CCCC
  • Texto: #424251

EXLC3-2013-Interfaz-paletadecolores.png

Íconos

Elegimos dos colecciones de íconos para utilizar en nuestro diseño de interfaz, ambos son libres para uso comercial y no son muy distintos uno del otro, por lo que funcionan bien en conjunto.

Secret Pixels Icons

Retina Display Icons

Pantallas

Todo el estudio previo se plasma en el diseño de interfaces que se encuentra a continuación.