Diseño visual e interactivo del portal viaje: aplicación de la ingeniería de la usabilidad al portal de carpooling de la universidad de los andes

Texto completo

(1)Diseño visual e interactivo del Portal Viaje: aplicación de la ingeniería de la usabilidad al portal de carpooling de la Universidad de los Andes. Juan S. Navarrete Gallego Universidad de los Andes, Bogotá, Colombia. Jorge Sefair (asesor), Andrés L. Medaglia (co-asesor) Universidad de los Andes, Bogotá, Colombia. RESUMEN: Este trabajo hace parte del desarrollo e implementación del Portal Viaje para la Universidad de Los Andes, un sistema propuesto y desarrollado por el proyecto Viaje, que le permitirá a los miembros de la comunidad uniandina compartir su carro y darle muchos beneficios a la sociedad y al medio ambiente. Este documento y el prototipo final son los últimos pasos en el procedimiento, por esto el foco principal es la creación de un diálogo sin interrupciones entre el usuario y el sitio Web. Para lograr esto, fue necesario el uso de herramientas como la ingeniería de la usabilidad, principios de accesibilidad y otros análisis de comportamientos humanos, con el último fin de presentar al usuario un sitio Web impecable en términos funcionales, estructurales y estéticos. ABSTRACT: This work is part of the development and design of the carpool system “Portal Viaje” for the Universidad de Los Andes community, which was intended and developed by the project Viaje and will bring the possibility of sharing rides between members, help society and environment. This document and the final prototype are the last stages in the procedure. Thus, the focus is on the recreation of a perfect dialogue between the user and the web site. To achieve that, it was strictly necessary the use of tools such as usability engineering, accessibility principles, and other human behaviors analysis, with the final objective of reaching an impeccable site in functional, structural and aesthetic terms. 1 INTRODUCCIÓN La ciudad ha tenido que enfrentarse a muchos conflictos de carácter cultural y social, sin embargo, para muchos de estos, las soluciones implementadas actualmente no han sido suficientes. Tal vez uno de los problemas más evidentes y preocupantes es el de la movilidad, el cual hace necesarias nuevas estrategias de organización que permitan enfrentarlo, no sólo como ciudadanos, sino como ingenieros. Una de las estrategias que ha despertado gran interés académico en varias partes del mundo es la de carpooling (ridesharing), cuyo significado más cercano es el de compartir los viajes. Por esta razón ha de referirse a ella como la estrategia de viajes compartidos. 1.1 ¿Qué es la estrategia de viajes compartidos o carpooling? La estrategia de viajes compartidos es un arma contra el problema de movilidad por el que atraviesan. muchas ciudades del mundo, refiriéndose a éste no solo como un problema del exceso de tráfico e incremento de tiempos muertos debido a la sobreutilización de las vías, sino también desde un punto de vista ecológico, de impacto social, ambiental y hasta psicológico; la movilidad afecta al ciudadano desde muchos aspectos que muchos ignoran sin darse cuenta que la solución está al alcance de todos. Esta herramienta consiste en compartir los medios de transporte entre personas que se dirigen a un destino común, que parten de un destino común ó que comparten algún segmento de su trayecto. En el caso de la comunidad uniandina, tanto el destino como el punto de partida comunes son la Universidad de los Andes. Para la organización de los viajes compartidos se han propuesto diversos modelos matemáticos como soporte a la compleja logística que demanda la conformación de un grupo de viaje, en la cual se deben proponer horarios, rutas, conductores y pasajeros. El proyecto interdisciplinario del portal viaje quiere proponer estas configuraciones a través de un portal.

(2) de Internet que le permitirá a profesores, empleados y estudiantes generar una planeación inmediata de sus grupos de viaje. 1.2 Identificación de la necesidad en la Universidad de los Andes Si se le suma la ubicación central de la universidad y la arquitectura de las vías en esta zona y sus alrededores al gran problema de movilidad de la ciudad, es evidente la necesidad de mecanismos que disminuyan el flujo de tráfico, no sólo por la congestión que se genera, sino por otros problemas que aparecen como consecuencia indirecta. La encuesta realizada por el equipo del portal revela que casi el 37% de los miembros de la Universidad de los Andes tiene carro propio o acceso a un carro particular para viajar hacia la institución. Esta cifra esconde más de un problema frente a los cuales muchos no han querido reaccionar. Por ejemplo, es imposible garantizarle a todo estudiante un cupo en un parqueadero de la institución, muchos tienen que buscar cupos en parqueaderos aledaños e inseguros, que evaden impuestos y en los que se han presentado robos de vehículos o pertenencias que estaban dentro de los mismos, ya que algunas veces deben dejar las llaves. Este es uno de los problemas que cada año será más grave debido al incremento desmesurado del parque automotor, representado en la tendencia de reducción del número de habitantes por vehículo en la ciudad. En el periodo 2006-2007 se presentó un crecimiento del parque automotor del 17.8% (SDM, 2007), lo que refleja la conciencia de transporte orientada al automóvil particular que predomina en Bogotá. Si no se toman acciones para cambiar esta forma de pensar, si las tendencias continúan y no se expanden los corredores viales, la velocidad promedio podría reducirse a 10km/h para el año 2040 (Uniandes, 2008). Los habitantes están actuando para su propio interés, así que lo más importante es generar herramientas y nuevas tecnologías que permitan transformar los patrones de comportamiento de las personas y enseñarles sobre las necesidades que tienen los mismos ciudadanos, sobre la convivencia ciudadana y una conciencia colectiva que les permita convertirse en personas cívicas y entiendan las consecuencias ambientales y sociales que se pueden prevenir desde las actitudes de un solo individuo. 1.2.1 Reseña del contexto: Proyecto Portal Viaje. El Portal Viaje surge como iniciativa de algunos departamentos de la universidad que identificaron los problemas nombrados anteriormente, y que decidieron consolidar un grupo de investigación para luego desarrollar una herramienta que le permitiera a los miembros de la comunidad uniandina aprender a ser mejores ciudadanos, atacando desde diferentes aspectos la cotidianidad de estudiantes, profesores y empleados. En un polo diferente al de las soluciones restrictivas impuestas por el gobierno, por ejemplo el pico y placa, aparecen soluciones que requieren de la participación voluntaria de las personas, una de ellas es la de viajes compartidos, la cuál es la esencia del Portal Viaje. Técnicamente la función del portal es ser un facilitador de información, en el que los usuarios podrán escoger diferentes configuraciones para planear sus viajes hacia y desde la universidad. Es un portal de Internet al cuál tendrán acceso todos los miembros de la comunidad y su complejidad yace en la recomendación apropiada de rutas, pasajeros, conductores y horarios a un usuario particular según sus preferencias. Esencialmente la herramienta se convierte en un medio de contacto entre dos o más miembros de la universidad, y sólo de la universidad, con el fin de garantizar su seguridad, la cuál permitirá planear quiénes deben manejar y cuándo, quiénes serán los pasajeros para cada vehículo y cuál será el horario de llegada y salida para cada participante. Para lograr dar recomendaciones acertadas, el portal se apoyará de modelos matemáticos de optimización que han sido diseñados para este fin. La Universidad de Los Andes no recibirá ningún ingreso por el funcionamiento del portal y, así como se quiere generar una convivencia colectiva y es necesaria la participación voluntaria de miembros de la Universidad, a los que ha de referirse también como ciudadanos, no son responsabilidad de la Universidad los acuerdos a los que lleguen los usuarios ni lo que suceda como consecuencia de estos acuerdos, la única función de la Universidad a través de esta herramienta es poner a disposición de los usuarios los medios necesarios para poder llevar a cabo de manera eficiente la comunicación, actuando como facilitador y administrador del servicio..

(3) 1.2.2 Usuarios potenciales Estudiantes, profesores y empleados de la Universidad de los Andes tendrán acceso al servicio de carpooling. Todos los miembros de la comunidad son usuarios potenciales, ya sea como conductores o pasajeros del sistema. Se entiende que el éxito del portal está estrechamente ligado con la disponibilidad de conductores, personas que compartan su carro con los demás miembros. Según las encuestas realizadas el primer semestre de 2010, se encontró que más del 30% de la comunidad tiene acceso a un vehículo para transportarse desde y hacia la Universidad. Casi el 60% viaja como conductor y en el 35% de los casos viaja sólo el conductor. Según estas cifras, se da claridad sobre la existencia de los recursos, es decir, la oferta potencial de un servicio a la comunidad uniandina. Sin embargo, también es necesario examinar la disponibilidad o voluntad de los conductores. No es suficiente que existan los recursos si no tenemos la disponibilidad de ellos por voluntad de sus facilitadores potenciales. Según la encuesta, el 89.58% de la muestra estaría dispuesta a participar en un sistema de viajes compartidos en el que se publican las rutas, horarios y contribución monetaria, y luego se reciben solicitudes de pasajeros entre los cuales el conductor elije a quiénes llevar. Estas cifras demuestran que es cierto el carácter dominante de los conductores en el portal, y hay que ser realista ya que aunque tanto conductores como pasajeros son la materia prima del sistema, los conductores son los que prestan el servicio. Las cifras hacen evidente que existe la voluntad de participar si los conductores pueden elegir con quién compartir su vehículo. Ahora, los encuestados debían comparar su último medio de transporte con la estrategia de viajes compartidos, respondiendo si creen que este último es mejor, peor ó igual en diferentes aspectos. Los resultados fueron los que se muestran en la Tabla 1. Enfocando las cifras más representativas, se encontró que el 54.5% considera que un sistema de carpooling es más útil en cuanto al mejoramiento de la movilidad de la ciudad, y sólo el 9% piensa que no lo es. De la misma forma actúa el factor de rapidez. Este 54.5% no parece una cifra importante frente al comportamiento de otros factores, sin embargo, cabe anotar que estás respuestas están condicionadas bajo el medio utilizado la última vez para ir a la universidad. En la universidad predominan los medios. de Transmilenio, bus y carro particular con un 39%, 31% y 23% respectivamente. Es satisfactorio pensar que aún cuando el transporte público se lleva las mejores cifras, más del 50% de la muestra considera que compartir el carro resulta mejor para el problema de movilidad. Todas estas cifras justifican tanto la necesidad como el éxito que puede tener un portal de viajes compartidos en la universidad, ya que los recursos existen y están disponibles, además se evidencia la conciencia ciudadana de muchos de los encuestados, y por último, más del 90% de los estudiantes acepta viajar en vehículo de una persona desconocida siempre y cuando sea de la universidad, lo que completa nuestra materia prima para asegurar el funcionamiento del sistema Tabla 1. Resultados Encuesta: Teniendo en cuenta los siguientes aspectos, ¿Considera que el sistema de uso compartido del automóvil sería mejor, peor o igual que el ultimo usado por usted? ______________________________________________ Aspectos. Resultados ______________________________ peor igual mejor NS/NR ______________________________________________ Los deja/recoge 0% 54.5% 36% 9% cerca a su destino. Seguridad 0% 18% 81% 0% Precio 45% 36% 9% 9% Comodidad 0% 0% 100% 0% Limpieza 9% 0% 81% 9% Transporte en Grupo 0% 45% 45% 9% Rapidez 9% 36% 54.5% 0% Salud 9% 36% 45% 9% Contaminación 36% 36% 27% 0% Mejora la movilidad 9% 36% 54.5% 0% Riesgo de demorarme más 36% 9% 36% 18% _____________________________________________. 1.2.3 Beneficios Para identificar los beneficios basta con examinar los daños causados por el uso masivo de vehículos y la conciencia de transporte que se ha apropiado de los ciudadanos. El primer problema es el de movilidad, debido a la subutilización de los vehículos se genera sobreutilización de las vías. Con la estrategia de viajes compartidos es posible lograr disminuir la cantidad de vehículos que transitan diariamente, contribuyendo al mejoramiento del tráfico, esto gracias al incre-.

(4) mento de la ocupación de los medios de transporte que se consideran privados. La implementación de carpooling ha demostrado en otros países que si es posible disminuir el uso individual del automóvil en cifras entre el 20% y más del 50% (Cooper, 2007). El segundo afectado es el medio ambiente. La emisión de partículas contaminantes ha superado sus niveles estándar, comportamiento que coincide con el incremento de vehículos en la capital (Gilbert, 1996). El transporte es el sector más contaminante, muchos piensan que al interior de éste los principales responsables son los buses, y, aunque es evidente que un bus contamina más que un auto, la esencia del transporte es movilizar personas, no medios, por esta razón es mucho más acertado pensar en la contaminación que generan las personas a través del transporte, o más bien, la contaminación que genera cada medio por pasajero transportado. Mientras un autobús transporta 50 personas un vehículo particular de un miembro de la Universidad de los Andes transporta 2 personas en promedio, por esta razón uno de los objetivos del Portal Viaje es lograr maximizar la ocupación de los vehículos que se dirigen hacia la universidad y salen de ésta. Además de los beneficios ambientales y de tránsito para la ciudad, la estrategia de compartir viajes ayuda en la economía de sus participantes, ya que, si lo acuerdan, compartirían los gastos de transporte como lo son la gasolina y parqueaderos. Finalmente existe un beneficio social intangible al que se puede llegar a través de la posibilidad de interactuar con otros miembros de la comunidad. El portal servirá como un nuevo e innovador medio de comunicación y puede servir de excusa para conocer nuevas personas, intercambiar opiniones y conocimientos e integrar disciplinas. Este comportamiento puede ayudarnos a construir una nueva forma de ver a la ciudad y a los que habitan con nosotros, puede transformarse en un medio educativo que promueva actitudes cívicas y relaciones interpersonales que busquen el bienestar de la ciudad, del país, y no sólo el beneficio propio.. 2 DISEÑO DEL PORTAL Desde la evidencia se puede asegurar la necesidad de la creación del portal, el siguiente problema es el diseño del producto final. Se abordará el problema desde dos aspectos: a) la funcionalidad en términos de diseño y b) los requerimientos de los usuarios pa-. ra construir un prototipo final en el que se mostrarán las funcionalidades técnicas dinámicamente. 2.1 Ingeniería de la usabilidad Este término se ha apoderado en los ultimo años del desarrollo de páginas Web. En la era de la información, el auge de las páginas en Internet es evidente, y es claro que para cualquier empresa un clic que se ahorre representa muchos más usuarios satisfechos y por supuesto muchos beneficios. La ingeniería de la usabilidad es el punto más importante a la hora de sumergirnos en el diseño de una página Web y más aún de un sitio Web que tiene un compromiso con el usuario, que debe ser eficiente, verídico, funcional y fácil de usar. Para que un sitio Web sea exitoso se deben entender los comportamientos de las personas en la Internet, por eso muchas veces no es suficiente el trabajo de un diseñador gráfico y un desarrollador, quienes se encargan de la arquitectura del portal, el diseño interactivo y la arquitectura de la información. En este trabajo se integrarán estos roles, unidos al análisis de las tendencias y comportamientos de los navegantes, para lograr un excelente usabilidad Web. Para abordar el tema de usabilidad es necesario aclarar que no existe una verdad absoluta a la hora de diseñar esta clase de productos, sin embargo, a través de la investigación se recrearon una serie de guías o reglas que pueden ayudar en el camino, las cuales se denominaron como principios. Antes de comenzar con el primero, se partió de una base indiscutible: el principio cero, el cual es entender que lo más importante es no hacer pensar al usuario, que el sitio debe conducirlo sin tener que preguntarse nada. Haciendo claridad sobre esto se encadenaron las guías tratadas a continuación. 2.1.1 Primer principio: conducir al usuario Una de las características de las tecnologías Web es que su narrativa es hipertextual, por eso el lenguaje que interpretan los programas navegadores es el HTML (Hyper Text Markup Language), esto quiere decir que el usuario está a la misma distancia y tiempo de cualquier punto de la narración, lo cuál es peligroso ya que si no se hace cuidadosamente, el usuario puede conducir al sitio y, en el caso del Portal Viaje, no es lo que se busca, el sitio debe conducirse a si mismo..

(5) La programación de cada página se hizo en texto plano utilizando varios lenguajes: HTML, XHTML, JavaScript, Java, ActionScript (Flash) y CSS. No se utilizó ningún programa facilitador, lo que resulta bueno no sólo en términos académicos y de aprendizaje, sino como forma de comprender la lógica del lenguaje y la manera como interactúa con el usuario (W3Schools, 2010). Volviendo a la usabilidad, identificar una página buena en estos términos es encontrar una página que se explique a si misma y sea evidente por si sola, los usuarios deben saber como llegar de un punto a otro sin la necesidad de una explicación adicional, sin la necesidad de hacerse preguntas. Lo que se quiere lograr es eliminar la mayor cantidad de posibles preguntas que puedan surgir en la narrativa: ¿Esto es un botón?, ¿Dónde está…?, ¿Para qué es…?, ¿Cómo hago para…?, entre infinitas opciones. Un usuario no tiene porque preguntarse si se puede hacer clic o no en algún elemento de la página, tiene que ser obvio y no demandar ningún tipo de análisis. Para lograr captar cómo identifica un usuario algo en lo que se puede hacer clic y algo en lo que no, así como otros fenómenos, como por ejemplo la ubicación de una barra de navegación, una barra de navegación secundaria, la composición de un formulario, entre otras, el mejor camino es comenzar por observar cómo las personas usan realmente la Web y cómo entienden las cosas por defecto desde que apareció el Internet en el mundo. Es importante tener en cuenta la fisiología de los elementos, así como su ubicación en el tiempo y espacio. Para esto también hay que tener en cuenta que existe una diferencia entre cómo una persona pensaría que usan su página y cómo de verdad se da la interacción. Generalmente se piensa que el usuario va a leer detalladamente cada cosa que está organizada en una página y va a hacer clic después de tomar una decisión. En realidad lo que pasa es que el usuario le da un vistazo rápido a los elementos y hace clic en el primer link que llamé su atención o que estén buscando, hay partes que el usuario ni siquiera nota (Krug, 2006). Por otro lado, dado este comportamiento, los usuarios no optimizan sus necesidades, sólo satisfacen la ecuación, esto quiere decir que harán clic en el primer link que les parezca conveniente, que aparenta ser el camino a donde quieren ir, pero no necesariamente es el mejor, esto lo hacen porque saben que el costo por no escoger el camino óptimo no es significativo par el usuario, pero tal vez para el “negocio” de la página sí.. Para hacer que el usuario entienda las cosas y las lea como el portal quiere fue necesario tener en cuenta algunos aspectos de carácter visual que no se pueden dejar pasar por alto. Es necesario tener en cuenta las relaciones lógicas de la narrativa que queremos dar, por esta razón se trabajó bajo el principio de que toda relación lógica debe componerse en una relación visual, lo que se reduce en: agrupación por colores y formas, jerarquización por contenidos y jerarquización por importancia. Una buena jerarquización visual le ahorra al usuario el trabajo de cargar la página en su cabeza. Por otro lado es importante apropiarse de las convenciones existentes en la sociedad, que todo ser humano ha aprehendido desde la semiología. Por ejemplo para todos es clara la relación entre el significante representado por los colores del semáforo y el significado del concepto de cada uno de ellos, y así fue utilizado en el portal. Además, observando y navegando es fácil notar que existen muchas otras convenciones en términos de diseño Web: la forma de un botón, links subrayados, encabezados, alertas, advertencias, etc. Y si este tipo de elementos, o características asociadas a un elemento, se han convertido en convenciones, es porque funcionan. Otro punto importante a la hora de examinar los contenidos es identificar lo que no es necesario en la página y eliminarlo. Palabras y frases de más sólo causan ruido e intervienen en la lectura total de la página sin generar ningún valor. Por ejemplo, las instrucciones en un sitio Web no deben existir (Krug, 2006), ya es suficiente con que sea evidente por si mismo. Con estos puntos básicos definidos es hora de entrar en el punto más delicado a la hora de conducir al usuario y evitar cualquier posibilidad de desubicarlo: la navegación. Definiendo como nodo a un punto cualquiera en el tiempo y espacio de la narración. Cada nodo está compuesto de diferentes niveles de información y muchos elementos decisivos frente a los cuales el usuario se enfrenta. Observando, navegando y estudiando el comportamiento de algunos usuarios, se pueden identificar los propósitos de una conexión adecuada entre los nodos de la narración. Cómo se nombró anteriormente,.

(6) el usuario, situado en un nodo, está a la misma distancia de cualquier otro, lo que se refiere a la definición de narrativa hipertextual. Para el equipo desarrollador la navegación fue uno de los temas más complejos y fueron necesarias varias reuniones y horas de trabajo en equipo para lograr establecer una orientación evidente para el usuario. Lo primordial es investigar, identificar, experimentar y tener claros los propósitos de la navegación. Podemos reducirlos a un objetivo general: orientar al usuario haciendo evidente la ubicación actual, revelar un poco de contenido e implícitamente actuar cómo las instrucciones del sitio (entendiendo como sitio el conjunto de páginas que conforman la narración), mostrando el comienzo y el camino correcto para llegar a donde se quiere (Krug, 2006). ¿Cómo logramos esto? Desde el comienzo fue clara la necesidad de minimizar la cantidad de clicks en cada página, no sólo en términos de navegación, también en términos de programación, más adelante se mostrarán las acciones que se ejecutan en cada decisión del usuario o evento que genera. Una decisión es un clic, es un conjunto binario de posibilidades donde 1 representa la construcción de un arco entre dos nodos. Refiriéndose a la navegación del usuario como un conjunto de decisiones binarias, el problema que queremos resolver es la minimización de arcos entre el comienzo, o cualquier punto de la narración, y el nodo que representa la satisfacción de una necesidad del usuario; matemáticamente se podría decir que se intenta resolver subjetivamente un problema de ruta más corta en el que intervienen decisiones impredecibles que toma un usuario según la recompensa que espera. Para el equipo de ingenieros el diseño de la navegación basado en la observación, experimentación y utilización de convenciones estándar, fue la herramienta para minimizar la cantidad de decisiones, utilizando la jerarquización, un lenguaje corto, claro y conciso para lograr sugerir al usuario sobre el manejo de su ruta. ¿Qué beneficios concretos trae una buena usabilidad Web? Analizando los impactos a la hora de diseñar y a la hora de probar la interacción del usuario con el sitio, algunos de los beneficios identificados fueron: •. Disminución en los costos de uso: viéndolo desde el punto de vista del usuario, su esfuerzo se minimiza y su actividad se hace eficiente. Entre más fácil de usar, un sitio Web generará más fidelización en los usuarios.. • • •. Disminución en los costos de desarrollo, esto debido la globalización de técnicas y generación de medidas estándar a partir éstas. Reducción de costos de soporte y mantenimiento gracias a que el portal pretende ser un sitio auto-administrativo. Flexibilidad frente a actualizaciones y mejoras: esto es también gracias a la globalización de técnicas, creación de estándares y manejo claro de lenguajes de programación. Una persona interesada en el sitio, que no estuvo familiarizada con el desarrollo del portal, no tendrá tanto trabajo al entender el funcionamiento y funcionalidades del mismo.. 2.1.2 Segundo principio: accesibilidad Muy relacionado con la usabilidad existe el concepto de accesibilidad, el que se refiere a la facilidad de acceso de todas las personas. Esto quiere decir que a la hora de desarrollar páginas Web se deben tener en cuenta todo tipo de individuos que navegan en la Web y, entre ellos, existen algunos con distintos niveles de discapacidad que deben tener acceso a sistemas y servicios prestados en Internet. En el desarrollo de cualquier sitio se debe tener mucho cuidado a la hora de la composición de cada frase, ya que muchas personas discapacitadas no observan la página leyendo sino oyendo y muchas veces se enfocan sólo en las primeras palabras. Para estas personas fue necesario tener en cuenta la accesibilidad para discapacidades cognitivas, la cual podemos traducir como la usabilidad cognitiva, ya que significa facilitar la forma de navegación y de dialogo entre estos usuarios y el porta. Tener en cuenta la usabilidad cognitiva le da valor también a la usabilidad general del lugar, es el simple principio de evaluar el peor escenario, por eso durante el desarrollo del portal se le dio definición a los principio de funcionalidad tratados hasta el momento: diseñar para principiantes. El equipo entiende que existen personas, que navegan en Internet, con distintos niveles de discapacidad, quienes tienen herramientas electrónicas que les permiten transformar lo visual en sonoro, refiriéndose a visual, en este caso, como al texto interpretado desde el archivo plano HTML. Es por esta razón que el uso de imágenes debe tener un soporte escrito en el código del portal. Es decir, si se usa una imagen como un link, detrás de ésta debe existir un texto que la evidencie. Además, así como algunas perso-.

(7) nas apenas le dan un vistazo a los elementos, sin detallarlos, otras, por decirlo de algún modo, le dan un vistazo con los oídos. Es por esto, que las primeras palabras son las más importantes. Sin saber qué porcentaje de la comunidad uniandina tiene algún tipo de discapacidad, es claro que tener en cuenta el concepto de accesibilidad maximiza la usabilidad del portal, aumentando la coherencia del lenguaje, la flexibilidad y la claridad del dialogo usuario-portal, diseñador-portal y desarrolladorportal.. Con respecto a la selección de la fuente y sus estilos se tienen que tener muy en cuenta los siguientes aspectos que sirven como guía para construir un texto fácil de digerir (Ceballos, 2010): • •. 2.1.3 Tercer principio: de la tipografía Muchos expertos aseguran que el manejo de la tipografía puede significar el 90% de la calidad del diseño de una página Web, por esta razón se mencionarán los aspectos que fueron importantes para el diseño del portal. El tema del manejo tipográfico es extenso, y dadas las características del portal, solo se tuvieron en cuenta algunos parámetros. La razón principal por la que no es necesario profundizar en este documento sobre el manejo detallado de la tipografía es debido a que el portal no despliega grandes contenidos de texto como ni párrafos informativos, instrucciones, etc. Los contenidos textuales del portal son pequeñas frases y datos. Los navegadores interpretan los tamaños de la tipografía con base en dos medidas, la primera es a través de los pixeles (px), lo que significa que el tamaño siempre dependerá de la resolución de la pantalla del usuario, por ejemplo, un monitor con una resolución pequeña verá los textos mucho más grandes que uno de alta resolución. La segunda medida corresponde al em (proveniente de la composición fonética de la letra M en inglés), que es la que define los textos en el porta. Esta medida es de carácter relativo, y corresponde a la proporción del ancho y alto de la letra con respecto a los puntos de tamaño que tiene la fuente actual, es decir, si seleccionamos un fuente con 16 puntos de tamaño y decidimos hacer un texto de tamaño 0.25em, en resultado será un texto de 4 puntos (W3Schools, 2010c). Por otro lado también es aconsejable siempre trabajar con escalas en las medidas para lograr una armonía visual, en el portal se usaron las presentadas por Robert Bringhurst, definiendo el tamaño original de la fuente en 16 puntos, sólo se utilizaron las medidas de 2.25em, 1em, 0.875em y 0.75em (Bringhurst, 1992).. • • • • •. Fuentes cuyas formas tengan un acercamiento a las siluetas básicas como el triángulo, el cuadrado y/o el círculo serán más útiles. Justificar el texto no es casi nunca conveniente en la lectura, se generan distancias incoherentes y desiguales, sin embargo hay que saber cuándo sí es necesario. Generalmente lo mejor es alinear el texto hacia la izquierda o la derecha dependiendo de los fines compositivos. Generalmente en tablas de texto la alineación da un mejor resultado si es centrada. Una fuente serifada (serif) será más legible que una fuente sin serifa (sans-serif). Textos en minúsculas son más legibles que textos en mayúsculas. No es bueno tener menos de 6 palabras por renglón en un párrafo. Es importante guardar la relación entre el tamaño y tipo de grosor, una letra pequeña no puede ser gruesa.. 2.2 Requerimientos de los usuarios Con base en las encuestas realizadas se analizaron las necesidades en términos de desarrollo para poder ofrecerle a los usuarios un sistema completo y eficiente. Antes de identificar los aspectos relevantes par la comunidad es importante ver cuáles son las características básicas del portal y su funcionamiento tanto para pasajero como para conductor. 2.2.1 Rol conductor Será identificado con el usuario del correo de la universidad y su nombre, deberá crear, dibujando en un mapa, las rutas que frecuenta, sus vehículos y el cupo que tienen disponible. A la hora de publicar un viaje que va a realizar debe especificar el día de la semana y la hora de llegada ó salida a la universidad. Al conductor llegarán solicitudes de pasajeros quienes desean ser recogidos y compartir el viaje, el conductor deberá aceptarlos escogiéndolos según.

(8) sus preferencias, en este momento deberá realizarse el contacto personal para concretar el viaje compartido, a través del correo electrónico y teléfono celular. 2.2.2 Rol pasajero Así como el conductor, el pasajero será identificado con el usuario del correo de la universidad y su nombre, en este caso deberá crear las ubicaciones, también dibujando en el mapa, o lugares en los que se encuentra antes de salir hacia la universidad ó a los que se dirige al salir de ésta. Deberá buscar viajes que se acomoden a sus preferencias y solicitar el cupo en el vehículo del conductor. Si es aceptado deberá darse el contacto personal para concretar el viaje. 2.2.3 Funcionalidades incorporadas Cómo se dijo anteriormente, se probó que los recursos existen y están disponibles, así como la necesidad de la creación del portal, ahora es necesario evidenciar porque se tomaron las decisiones sobre el funcionamiento de este y los beneficios que se les dará a los usuarios. En primer lugar se examinó la ventana de tiempo en la que se planearán los viajes. Los resultados de las encuestas realizadas en el primer semestre de 2010 muestran que, cuando miembros de la comunidad uniandina planean sus viajes, el 0% lo hace semestral o mensualmente, los planes a largo plazo resultan mucho más riesgosos en términos de cumplimiento debido a que muy pocos participantes tienen un horario estricto, la hora de llegada a la universidad es flexible y aún más la hora de salida, estos factores dependen del día, de la época del semestre, del estado de ánimo, de las actividades que surgen en el día. En cambio, el 46% planea sus viajes diariamente. Por esta razón el portal viaje le permite al usuario planear sus viajes diariamente, y es decisión de éste buscar y/o conformar un viaje sólo para el siguiente día o para tantos días en la semana como decida, es decir, el portal se puede extender a una planeación semanal. En segundo lugar se identificaron las preferencias de un pasajero en el momento en que escoge un medio para ir hacía y desde la universidad. Los resultados fueron claros y se muestra que los factores más importantes son la cercanía, rapidez, hora y precio con. el 33%, 21%, 15% y 11% respectivamente. Con base en estas cifras se implementa el modelo recomendador de viajes para pasajeros, lo que quiere decir que, a la hora de buscar un viaje, deben especificar la importancia que le dan a estos aspectos para que el portal despliegue resultados ordenando descendentemente los viajes publicados según un puntaje calculado con base a los pesos designados a cada factor. Un viaje con puntaje alto significa una mayor recomendación de éste. En tercer lugar fue necesario tener en cuenta lo que es relevante para un usuario uniandino a la hora de escoger un medio para transportarse hacia y desde la universidad, teniendo en cuenta que tiene la posibilidad de hacerlo con un miembro de la comunidad, lo que asegura la seguridad en el sistema. En la encuesta de análisis de cambio en la disposición a participar en el sistema de viaje compartido realizada por el equipo del proyecto, se hace evidente que, dado el transporte junto a un miembro, lo más importante es si éste tiene su carné con el 32% y si es un conductor prudente con el 26%. Esta es una de las razones por las cuales se incorporó un sistema de calificaciones o puntuaciones adoptando la convención de estrellas, que es tan familiar y amigable para todas las personas que han navegado la Web. Las puntuaciones se dan tanto para conductores como para pasajeros, y los resultados de las mismas pueden ser útiles para estudios posteriores sobre la actividad del portal y de los usuarios. El funcionamiento será mencionado con más detalle en la sección 3.4.10. Por último fue estrictamente necesario encontrar un medio de comunicación asequible a los usuarios en todo momento que garantizara la conformación real de los viajes, para esto se decidió utilizar el correo de la universidad y un modo de contacto definido por el usuario. En el momento en que se conforma un viaje en el portal, un correo será enviado a cada parte del acuerdo informando la confirmación, sin embargo no es suficiente con este medio debido al corto plazo en el que se planean los viajes, por lo que es posible que el pasajero no revise su correo antes del viaje. El punto de la comunicación es uno de los más delicados y que pone en juego el éxito del portal, a sabiendas del apoyo de la comunidad con el proyecto y su identidad con la misión del mismo, es necesario asumir que es responsabilidad última del usuario contactarse con su compañero para hacer efectivo el viaje, por esto el portal le dará especial importancia a este aspecto, sugiriendo a los usuarios que el medio de contacto que publiquen sea su celular ya que este es el único que garantiza la.

(9) posibilidad de comunicarse en cualquier momento del día.. 3 PROTOTIPO. Para la incorporación de JavaScript en el portal se experimentaron dos opciones: utilizando la librería jQuery (utilizada en sitios como Google, NBC, CBS, Dell, entre otros) y, utilizando librerías de Scriptaculous (usada por sitios como NASA, Apple, CNN, Gucci, entre otros).. Con lo discutido anteriormente se puede entender de una forma más clara el procedimiento que se llevo a cabo en la construcción del portal. 3.1 Estructura XHTML y accesibilidad Conociendo las reglas universales sobre el uso del lenguaje especificadas por la W3C (World Wide Web Consortium) se configuró cada página según la siguiente estructura mostrada en la Figura 1. Esta forma básica resulta asequible para todo público, inclusive personas con discapacidades pueden obtener una orientación primaria ya que muchos de ellos leen las páginas Web a través de lectores de código que no interpretan la información visualmente, por esta razón es tan importante darle un título a cada página, identificar cada contenedor <div> según su contenido y conservar la jerarquía y agrupación de los elementos correcta. Por ejemplo, existe un banner y una navegación que son globales en el portal, sin embargo también existe una navegación local representada por el identificador links, la cual debe estar dentro de su elemento padre identificado como paginapasajero, lo cual hace claro dónde se encuentra el usuario y qué rol está asumiendo. Con base en esta estructura se configuraron las páginas del sitio, en cada división se estructuró el contenido adecuado, en la mayoría de los casos fueron tablas que presentan los datos necesarios para la planeación de viajes, creación de rutas, ubicaciones, vehículos, etc.. 3.2 Incorporación de herramientas JavaScript JavaScript es una herramienta de programación que le permite a los sitios Web ser más dinámicos, atractivos y estilizados, con la ventaja de ser soportada por los navegadores usuales.. Figura 1. Estructura HTML básica de las páginas.. Después de examinar la documentación de cada una de las librerías y aplicar a las páginas diferentes funciones, se tomó la decisión de utilizar Scriptaclous debido a sus facilidades de uso y la gran diferencia en el tiempo de aprendizaje, por ejemplo, para lograr una animación muy simple utilizando jQuery era necesario incorporar el código que se muestra en la Figura 2. Mientras que para hacer lo mismo con Scriptaculous es suficiente agregar un pequeño código en un evento del elemento HTML como el mostrado en la Figura 3..

(10) tareas de map.reposition() y map.resize() con algunas acciones del usuario como lo es el cambio en el tamaño de una ventana, restauración y maximización de la misma.. Figura 3. Estructura JavaScript bajo la librería Scriptaculous.. Figura 2. Estructura JavaScript bajo la librería jQuery.. Después de examinar detalladamente la documentación de la herramienta se eligieron las siguientes funciones y comportamientos: •. Effect.Morph: esta función permite modificar las características CSS de un elemento, por ejemplo, si en el evento onmouseover de cualquier elemento se incorpora:. Por último, se agregó la librería Cufon, la cual nos permitió darle un toque innovador al sitio, ya que es una herramienta que permite utilizar fuentes que los navegadores no pueden mostrar ya que los computadores usuales no las tienen entre su librería de fuentes (catálogo tipográfico). Para el portal utilizamos una de las fuentes permitidas por el manual de identidad visual de la Universidad de los Andes, que no hace parte de los catálogos tipográficos de Windows y Mac.. 3.3 Incorporación de CSS Este lenguaje es la forma como se le da estilo a cualquier página Web y, en términos de diseño, fue la parte que requirió más tiempo para desarrollar, actualizar, corregir y modificar.. $(this.parentNode).morph(‘color: #000000’),. •. • •. el color de la letra de su elemento padre se cambiará a negro. Effect.Appear le permite a un elemento aparecer sutilmente, es decir cambiando su opacidad según un parámetro de duración del cambio entre la transparencia y la máxima opacidad. Effect.Show y Effect.Hide permiten mostrar y esconder un elemento instantáneamente. El comportamiento Draggable hace posible crear elementos que el usuario pueda arrastrar o mover hacia la posición que quiera, esto se usó principalmente para el sistema de ayuda que se verá más adelante.. Además de estas funciones, fue necesario utilizar algunos códigos para el dibujo de rutas y ubicaciones en los mapas, también se debieron implementar códigos para el manejo y actualización del tamaño del mapa según las proporciones que debe ocupar en la ventana del navegador, para esto se ejecutaban las. A través de esta programación los navegadores interpretan colores, fondos, bordes, tamaños, fuentes, distancias, opacidades, grosores, espacios, y muchos más parámetros, lo que hace complejo este proceso es la integración de todos estos elementos para crear una hoja de estilo que pueda funcionar no sólo en una página sino en varias, que defina la unidad gráfica del sitio y que le de flexibilidad si es necesario hacer modificaciones globales. Antes de comenzar a definir los valores para todos estos parámetros se realizaron algunos bocetos en los que se propusieron algunas configuraciones para el portal, nunca es bueno comenzar a programar CSS sin antes tener un modelo definido, un molde que presente además la paleta de colores a usar. Con respecto a la paleta, fue necesario adoptar la misma exigida en el manual de identidad de la Universidad y, con base en el concepto desarrollado para la identidad visual del sitio en particular, se eligieron los siguientes colores dentro de la paleta institucional:.

(11) • • • • • • •. Pantone Process Black, #000000 Pantone 657, #C1CFE8 Pantone 137, #FF9F00 Pantone 428, #C3C8CD Pantone 295, #002346 Pantone 279, #4189DD White, #FFFFFF. El siguiente paso fue generar todas las imágenes que se necesitan siempre con los propósitos de disminuir el retraso en la interacción con el usuario y disminuir el tiempo de carga de la página, por esta razón se tuvieron en cuenta las técnicas enumeradas a continuación. 3.3.1 Minimización del peso de cada imagen Siempre es importante tener en cuenta el peso de las imágenes en una página Web, para un usuario es molesto esperar a que se cargue una página sea la razón que sea, entre menor peso tenga la parte visual de la página los recursos se podrá utilizar en otros procesos más importantes. Es por esto que a la hora crear un fondo para el sitio, imágenes de carácter compositivo, sistemas de ayuda, fondos para botones, links o cualquier otro elemento es importante que estas imágenes tengan la menor calidad posible sin que eso signifique quitarle calidad gráfica al contenido. Para el portal todas las imágenes fueron exportadas con una resolución de 72 pixeles por pulgada, sin embargo algunas son más pesadas debido a otro tipo de características como cantidad de colores y formato. 3.3.2 Implementación de Sprites La utilización de Sprites es una técnica que se ha implementado desde hace varios años en la mayoría de sitios Web, y sobre todo en aquellos en los que son necesarios cientos de íconos, imágenes y fondos. Esta técnica consiste en consolidar una única imagen que incorpore todas las imágenes que se necesitan en el sitio. El beneficio de esto es que en las casas de los usuarios o en cualquier computador en el que se encuentren, esta imagen cargará una vez y en ese momento aparecerán todas las imágenes del sitio. Web al tiempo y sin retrasos. De lo contrario, si se tienen muchas imágenes diferentes, existe la posibilidad de que las imágenes salgan en tiempos diferentes debido a bajas velocidades de carga de archivos. Después de consolidar la imagen a partir de las demás, a través de CSS especificamos cuál es la ubicación del fondo del elemento dentro de ésta. Este proceso es de extremo cuidado ya que se deben manejar márgenes y tamaños estrictos y exactos. En el caso del portal viaje está técnica no fue utilizada intensivamente debido a que no existe gran cantidad de imágenes para desplegar y, por otro lado, tenemos variedad de formatos que no se pueden mezclar en una misma imagen. Después de completadas estas etapas (spriting y minimización) se procede a generar las hojas de estilo CSS en donde se replicarán las medidas consideradas en los bocetos y se aplicarán las imágenes exportadas a los elementos que las contienen. Cabe justificar algunas de las medidas importantes seleccionadas que no se han mencionado antes. El ancho de las páginas es una de estas, el cual fue seleccionado de 600 pixeles. Esta selección se debe a que no necesitamos toda la pantalla para mostrar la información y además es una consideración en términos de accesibilidad y que con una medida así es posible ajustarse a la mayor cantidad de dispositivos posibles (e.g. iPhone), también teniendo en cuenta que se vea bien en un monitor de resoluciones enormes. Por otro lado hay que explicar cómo fue usada la escala tipográfica nombrada anteriormente, en la Tabla 2 se muestra la relación con la jerarquía y la importancia de la prominencia en cada elemento. Allí se muestra que los niveles más altos en la jerarquía también deben ser prominentes en cuanto al tamaño de la tipografía (por ejemplo la navegación primaria y secundaria), y a éstos se les da una escala de 1em. También se muestra que existen casos en los que es indispensable mostrar un mensaje mucho más prominente a los demás elementos, es por esto que a los mensajes guía se les dio una escala de 2.25em. Sin embargo, cabe aclarar que estos mensajes aparecen muchas veces en una nueva pantalla y en ésta su jerarquía es de nivel 1, como se verá más adelante..

(12) Tabla 2. Escala en em según relación jerárquica y de prominencia por elemento. ______________________________________________ Elementos Jerarquía Prominencia Escala ______________________________________________ Navegación primaria nivel 1 prominente 1 Navegación secundaria nivel 2 prominente 1 Títulos nivel 2 prominente 1 Botones nivel 2 prominente 1 Texto en tablas nivel 4 poco prominente 0.875 Botones en tablas nivel 4 poco prominente 0.875 Mensajes guía nivel 4 muy prominente 2.25 Sistema de ayuda NA poco prominente 0.75 Labels en Formularios nivel 4 prominente 0.875 Input en Formularios nivel 4 poco prominente 0.75 _____________________________________________. 3.4 Convenciones adoptadas y usabilidad. Figura 4. Screen Shot del portal en la página de inicio: Animación Flash. 3.4.1 Página de inicio La página de inicio es en donde los miembros de la comunidad uniandina ingresan al portal usando su usuario y contraseña del correo de la Universidad. Esta página fue desarrollada en flash (Fig 4). Además de los campos de usuario y contraseña necesarios para entrar al sitio, se incluyó un modo interactivo tanto para personas de la comunidad como para personas que llegaron a la página por alguna otra razón (recomendación, curiosidad, etc.). Este modo es un botón, ubicado en la esquina inferior derecha, que le permite al navegante saber de qué se trata el Portal Viaje informándole una breve reseña del mismo (Fig 5).. Figura 5. Screen Shot del portal en la página de inicio: Interacción y descripción del portal. 3.4.2 Ubicación de la navegación En la Figura 6 se muestra como se adopta esta convención. La mayoría de páginas Web con mejor usabilidad poseen una navegación horizontal en la parte superior de la página, esta representa el primer nivel e la jerarquía y es desde donde se desprende la narración, por otro lado agrupa todo el contenido con el cual el usuario debe relacionarse.. Figura 6. Screen Shot del portal en la página de inicio: Enfoque Barra de navegación primaria..

(13) 3.4.3 Ubicación y jerarquización de la navegación local En el segundo nivel de la jerarquía se ubica la navegación secundaria para las páginas del conductor y del pasajero. Su ubicación se justifica bajo una de las convenciones identificadas, en el extremo superior izquierdo del recuadro contenido por la navegación global. Por otro lado la composición tiene que ver con el concepto del diseño del portal (Fig. 7). En la Figura 7 se puede ver que se recrea una de las teorías de la ingeniería de la usabilidad antes nombrada, el carácter de la orientación. Para el usuario es fácil identificar que se encuentra en su rol como conductor y, dentro de éste, se ubica en la página para crear sus rutas. Por otro lado, aún cuando en la navegación local se indica dónde está parado el usuario, es necesario un título, el cuál, en este caso, se presenta justo en el siguiente nivel jerárquico. Aunque no parece tan importante, en términos de usabilidad, lo es, siempre es necesario un título (Krug, 2006).. Figura 7. Screen Shot del portal en la página Mis Rutas: Enfoque Barra de navegación local.. 3.4.4 Agrupación de elementos Está importante herramienta se utilizó en todas las páginas del portal, para mostrar algunos ejemplos y la importancia de la técnica basta con darle un vistazo a las Figuras 8-9. La Figura 8 es sólo un ejemplo de todas las agrupaciones tenidas en cuenta en el diseño del portal. En esta imagen se hace evidente la segmentación aún sin ser explícita. Cabe aclarar que los números dispuestos sobre círculos amarillos no hacen parte de las páginas, han sido situados sobre las imágenes con el fin de ilustrar las explicaciones. Visualmente la página se divide en el grupo 1, cuyo nivel jerárquico es mayor, razón por la cuál el título se expone de una manera diferente. El grupo 2 se divide en otros dos subgrupos, el 2.1 y 2.2, pero es necesario anotar que la división especial implícita entre estos dos subgrupos es mucho menor que la división entre los grupos, esto es captado por el ojo humano y es uno de los comportamientos que trata la teoría de la gestalt, por esto una persona es capaz identificar la estructura visual implícita y la lectura de la página será mucho más fácil, agradable y rápida. Igualmente ocurre con la figura 9.. Figura 8. Screen Shot del portal en la página Mis Rutas: Enfoque agrupaciones.. 3.4.5 Semáforos y Mensajes Teniendo en cuenta al concepto del portal, se busco una forma de relacionar las ofertas ignoradas, pendientes y aceptadas con alguna convención. Los semáforos resultaron una buena solución a este problema. Todos entienden el significado de los colores de un semáforo, así que se usó el semáforo en luz verde para caracterizar las ofertas aceptadas, en luz amarilla para las pendientes y en luz roja para las ignoradas. Los mismos colores se utilizaron para los mensajes del portal, rojo para mensajes de error, amarillo.

(14) para mensajes de advertencia y verde para mensajes de éxito. Por ejemplo: “tu viaje ha sido publicado exitosamente” es un mensaje de éxito, “debes crear una ruta antes de publicar un viaje” es un mensaje de advertencia y “tu viaje no puede crearse debido a que está a menos de 60 minutos de efectuarse” es un mensaje de error. 3.4.6 Convenciones para acciones de eliminar y cerrar Las personas que usan computadores e Internet generalmente entienden que para cerrar o eliminar algo el color rojo puede servir como significante, así como la letra X. Por otro lado a la hora de cerrar, siempre buscarán en botón en alguna de las esquinas superiores. En la Figura 10 se muestra como se adaptó esta convención, en el momento en que un usuario hace clic en a alguna de sus rutas para verla, le aparece la ventana mostrada en la imagen, que podrá cerrar en cualquier momento haciendo clic en el botón rojo situado en la esquina superior derecha.. Figura 9. Screen Shot del portal en la página Mi Perfil: Enfoque agrupaciones. 3.4.7 Diseño de botones Los usuarios de Internet siempre entenderán que un botón debe replicar la esencia del botón físico real creado por el hombre, por esta razón es correcto darle relieve e importancia a estos elementos. La Figura 10 muestra algunos botones del portal, cuya escala de fuente es de 1em y 0.875em y cuyos bordes han sido cambiados de color para simular un relieve. 3.4.8 Notificaciones Portales de correo electrónico y otras páginas web, como Facebook, utilizan un sistema de notificaciones en la página de inicio para indicarle una ruta útil y productiva al usuario. Para el Portal Viaje esto es mucho más importante que para una red social como Facebook ya que el contacto en nuestro portal no solamente es un relación cibernética, sino una relación personal, según esto, aunque el Portal Viaje puede tener características de redes sociales, es mucho más parecido a un sitio web de compra y venta de artículos. Las notificaciones serán links que llevarán al usuario al punto de la página en donde deben revisarlas. Un ejemplo de notificación puede ser actualizar el número de contacto o el aviso de una nueva oferta (Fig. 11).. Figura 10. Screen Shot del portal en la página Mis Rutas: panel de creación de rutas.. 3.4.9 Uso de la imagen del portal como enlace al inicio. Una de las convenciones que ha dominado muchos sitios Web es la función de la imagen de la empresa: enlace al inicio. En este caso no fue de mayor difi-.

(15) cultad darle este toque a las páginas, sin embargo fue importante no eliminar de la navegación el mismo enlace, esto ya que pueden existir personas que no hayan aprehendido esta convención y además pueden pensar que lo que no aparece en la barra de navegación no existe. En la Figura 12 se muestra que existen los enlaces. El enlace al inicio, tanto de la imagen del portal como del texto en la barra de navegación, es importantes ya que le da una sensación de seguridad al usuario, dándole a entender que siempre que quiera va a tener la posibilidad de regresar a donde empezó (Krug, 2006).. Figura 11. Screen Shot del portal en la página de inicio: notificaciones. 3.4.10 Convenciones de orientación Las convenciones de orientación son las que responden a la pregunta ¿Dónde estoy? Para un sitio como el portal fue de gran importancia responder notoriamente esto, por ello siempre van a existir las huellas de los enlaces a los que el usuario dio clic para llegar a donde esta. La Figura 16 muestra claramente que el usuario esta situado en Mis rutas, ya que este elemento de la navegación local se comporta diferente a los otros, los mismo sucede con el elemento de la navegación primaria Yo, Conductor. Esto quiere decir que un usuario que esté parado en Mis Rutas sabe que está contenida en Yo, Conductor, ya que de allí es de donde proviene y en donde está contenida. 3.4.11 Sistema de calificaciones Para calificar tanto usuario como conductor se adoptó el sistema de las estrellas utilizado en la mayoría de sitios Web de compra, la única diferencia es que el sistema del portal sólo le da a posibilidad al usuario de calificar hasta tres estrellas, decisión tomada por el equipo con el argumento de que requiere menos análisis de la persona que califica si solo tiene 3 posibilidades: bueno, regular, malo. En la Figura 13 se muestra como se calificará a un usuario. Es necesario resaltar que solo es posible calificar usuarios con los que se hayan planeado viajes, una vez efectuado el viaje la opción para calificar, ya sea como pasajero o conductor, aparecerá en la tabla de calificaciones correspondiente. En la página de mi perfil también aparecerán las calificaciones propias del usuario, tanto en estrellas como en puntuación numérica (Fig. 14).. Figura 12. Screen Shot del portal: cabezote como enlace a inicio.. Figura 13. Screen Shot del portal en la página Mi perfil: tabla de calificación a pasajeros.. Figura 14. Screen Shot del portal en la página Mi perfil: calificación/puntuación propia..

(16) 4 CASOS DE USO En este punto se pretende mostrar cómo debe ser el diálogo pasajero-portal y conductor-portal en el producto final, con el fin de demostrar la aplicación correcta de los principios de usabilidad. Para cualquier tipo de usuario el primer paso es entrar al portal, por esta razón en las siguientes explicaciones se asumirá que el usuario ya ingresó al sitio. Por otro lado, la primera vez que cualquier usuario entra deberá aceptar un contrato, unos términos bajo los cuales funciona el portal, aceptando, entre otras cosas, que los acuerdos que se realicen serán de su responsabilidad. Antes de comenzar cabe aclarar que todo usuario puede asumir los roles de pasajero y conductor. Todo pasajero es un conductor en potencia. Sin embargo, para fines ilustrativos se seguirán los pasos para cada rol, mas no para cada usuario.. Figura 15. Paso 1: conductor primera vez. 4.1 Caso 1: Conductor por primera vez Paso 1: Al ingresar al sistema el usuario notará, ya que será su única notificación, que debe actualizar su número de contacto o celular para poder concretar los viajes (Fig. 15). Este enlace lo llevará a la página Mi Perfil (Fig. 9), donde conocerá el sistema de calificación (Fig. 13-14), sus preferencias, y la explicación de la función de las mismas. Paso 2: Identificación de la barra de navegación y clic en Yo, conductor, enlace que conduce al primer paso del conductor: Mis rutas. El Conductor decide crear una nueva ruta ya que no tiene ninguna almacenada(Fig. 16). Paso 3: Se despliega el mapa y, como se muestra en la figura 17: 1) el conductor dibuja su ruta, 2) le da un nombre y 3) la guarda. Si se equivoca puede limpiar el mapa o deshacer su ultimo punto; finalmente, 4) tras una creación exitosa de la ruta en conductor cierra el mapa. Las rutas deben terminar o comenzar en la Universidad, de lo contrario el sistema no permitirá la creación y mostrará un mensaje de error. Paso 4: En la página Mis rutas el usuario nota que hay un campo para sus vehículos en el tercer nivel de la jerarquía, pero no tiene ninguno almacenado, así que se decide crear su vehículo, ingresa la placa, el cupo y lo guarda (Fig. 18).. Figura 16. Paso 2: conductor primera vez.

(17) Paso 5: El usuario hace clic en el segundo paso del conductor: Publicar viaje (Fig. 19). Paso 6: El conductor llena el formulario que allí aparece, se dará cuenta que necesita crear una ruta y un vehículo si no lo hizo anteriormente (Fig. 20). Deberá definir el trayecto, es decir, si se moviliza hacia la Universidad ó desde la Universidad y también deberá especificar la hora, la cual está centrada en la Universidad, lo que quiere decir que para un trayecto hacia la universidad, la hora corresponde a la de llegada, y para un trayecto desde la Universidad la hora deberá ser la de salida. En este punto es importante aclarar que en el campo de vehículo aparecerán los carros registrados por el usuario, dato necesario para tener en cuenta la capacidad del viaje que se va a crear, es decir, los pasajeros que se pueden aceptar.. Figura 17. Paso 3: conductor primera vez. A continuación hace clic en publicar viaje y se dirige al último paso del conductor: ¿A quién llevo? Una vez publicado el viaje no se podrán eliminar los parámetros o elementos utilizados para crearla, como por ejemplo el vehículo, además no se podrán aceptar más pasajeros de lo establecido en el cupo.. Figura 18. Paso 4: conductor primera vez. Paso 7: Ubicado en ¿A quien llevo?, el usuario puede revisar las todas las solicitudes recibidas, con la facilidad de poder filtrar las que desea ver. En este caso decide revisar las pendientes, por ejemplo (Fig. 21a). Luego observa los datos de cada usuario y acepta a los pasajeros con los que quiera compartir su carro (Fig. 21b). Si intenta exceder el cupo la pagina informará que no es posible. Al aceptar un pasajero aparecerá un semáforo en verde, el conductor tendrá acceso a su número de contacto, lo apuntará y se comunicará con ellos antes de el viaje (Fig. 21c), es responsabilidad de las dos partes, pasajero y conductor, establecer un contacto personal. Al ignorar un pasajero aparecerá un semáforo en rojo. Paso 8: Después del viaje, el conductor podrá calificar a sus pasajeros en la tabla de calificaciones correspondiente en la página de Mi perfil, las calificaciones pendientes se informarán como notificaciones.. Figura 19. Paso 5: conductor primera vez.

(18) 4.2 Caso 2: Pasajero por primera vez Paso 1: Así como en el caso del conductor el usuario notará que debe actualizar su numero de contacto o celular para poder concretar los viajes la primera vez que ingresa. Paso 2: Identificación de la barra de navegación, clic en Yo, pasajero, cuyo enlace dirige hacia el primer paso del pasajero. Paso 3: Situado allí, en la página llamada Mis ubicaciones, el pasajero hace clic para crear una nueva ubicación, tal como lo hizo el conductor. Los elementos tienen la misma composición y los mismos procedimientos, esto es vital para incrementar la curva de aprendizaje de los usuarios ya que si un usuario es conductor, también sabrá cómo ser pasajero y viceversa.. Figura 20. Paso 6: conductor primera vez. Paso 4: Se despliega el mapa en un panel tal como en la página de Mis rutas (Fig. 17), pero en este caso el usuario dibuja su ubicación, le da un nombre y la guarda. Luego el pasajero cierra la ventana del mapa y continúa en mis ubicaciones. Paso 5: El pasajero pasa al segundo paso: Buscar viajes, dando clic en el enlace de la navegación local. A continuación llena el formulario y da clic en el botón de buscar viajes (Fig. 22a).. Figura 21a. Paso 7: conductor primera vez. Todo usuario tiene unas preferencias definidas para buscar sus viajes, éstas se pueden ver y modificar en la pagina Mi Perfil. Sin embargo, cada que el usuario va a hacer una búsqueda nueva, la página le da la posibilidad de modificar esas preferencias a modo de “búsqueda avanzada”, el cual representa otra de la convenciones aplicadas. Al darle clic al botón de Modificar mis Preferencias, se despliega el menú para la búsqueda avanzada (Fig. 22b). Paso 6: Enseguida revisa los viajes con mayor puntaje que aparecerán en la misma página con el formato presentado en la Figura 23a, luego, haciendo clic en los usuarios que le interesen, se mostrarán sus rutas en un mapa (Fig. 23b).. Figura 21b. Paso 7: conductor primera vez. Paso 7: El usuario solicita el viaje que más le guste haciendo clic en el botón llévame de la fila correspondiente.. Figura 21c. Paso 7: conductor primera vez.

(19) Paso 8: El pasajero hace clic en el paso tres de la navegación local: ¿Quién me lleva? Allí se encontrará con los viajes que ha solicitado en una tabla muy parecida a la de la página ¿A quién llevo? y buscará los semáforos verdes, si no hay ningún semáforo verde abandona el sitio ó se dirige a la navegación primaria para hacer clic en Yo, conductor, en caso de cambiar a este rol. Si hay algún semáforo verde, la solicitud ha sido aceptada por el conductor, el pasajero deberá anotar su número de contacto y se comunicará en algún punto antes de la ejecución del viaje (Fig. 24). Los semáforos rojos representan solicitudes rechazadas y los amarillos solicitudes pendientes. Las solicitudes podrán eliminarse, sólo si no han sido aceptadas, haciendo clic en la x. Paso 9: Después del viaje el pasajero podrá calificar el desempeño del conductor en la tabla correspondiente en la página de Mi perfil. Figura 22a. Paso 5a: pasajero primera vez. 4.3 Caso 3: Pasajero y/o conductor que haya usado el portal Paso 1: En la página de inicio el usuario se enterará de nuevas notificaciones: nuevas solicitudes para viajar, nuevos viajes aceptados y nuevas calificaciones pendientes (Fig. 25). Ya no deberá actualizar su número de contacto y tampoco será necesario crear rutas, ubicaciones, vehículos ni viajes si no es necesario. La creación de nuevos viajes tampoco requiere de nuevas rutas o vehículos, sólo si es necesario un cambio en estos parámetros se deben crear nuevos, sin embargo, no se deben eliminar los antiguos, el sistema los almacena. Paso 2: El usuario revisa cada uno de los enlaces y toma decisiones. Paso 3: Si lo desea puede solicitar o crear nuevos viajes y seguirá el procedimiento que ya conoce.. Figura 22b. Paso 5b: pasajero primera vez.

(20) Figura 23a. Paso 6a: pasajero primíera vez. Figura 25. Paso 1 Pasajero usual. 5 CONCLUSIONES. Figura 23b. Paso 6b: pasajero primera vez. El desarrollo de este documento y del diseño visual e interactivo del portal ha sido una parte esencial del trabajo del equipo del portal viaje y, gracias a éste, se le ha podido dar un toque innovador, agradable y atractivo al sitio. El producto, diseñado con base en las necesidades encontradas en la comunidad, le dio nuevos rumbos al desarrollo del portal y, a través de la ingeniería de la usabilidad, se incorporaron gran cantidad de nuevas funcionalidades y se modificaron algunas otras, ya que ésta nos permitió acercarnos más a los comportamientos que las personas tienen, lo que han aprehendido navegando y lo que necesitan para usar un sitio Web fácilmente. Algunas pruebas presenciales demostraron que los objetivos de la ingeniería de la usabilidad se cumplieron en gran medida con este portal, sin embargo, realizar un sitio Web perfecto es tarea difícil, siempre se van a poder agregar nuevos detalles y nuevas convenciones.. 6 PROMOCIÓN Y PUBLICIDAD. Figura 24. Paso 8: pasajero primera vez. La promoción y publicidad del Portal también está a cargo del proyecto Viaje. Para esto se intervendrán partes estratégicas de la institución con elementos propios del portal y el concepto será el mismo utilizado en la campaña de expectativa realizada a través de la Web, haciendo uso de los mismos tiquetes utilizados virtualmente en la esta página (Fig. 26-30)..

(21) Consistirá en la reproducción masiva de estos tiquetes como adhesivos y repartición de estos a través de diferentes medios, como rollos y volantes, y tendrá lugar la primera semana del segundo semestre de 2010. Los Tickets representan los pasajes de tren usados antiguamente y tendrán mensajes reflexivos sobre datos y cifras ambientales y de movilidad. Las propuestas se muestran en las Figuras 26-30.. resaltar los agradecimientos por la confianza que han depositado en el equipo.. La campaña expectativa Web fue realizada en flash bajo algunos principios de usabilidad, sin embargo la estética y organización fue de carácter intuitivo. La programación en flash se hizo con el lenguaje de ActionScript 2.0 el cuál permite una interacción dinámica y entretenida con el visitante. Usando una herramienta llamada SiteMeter fue posible darle seguimiento a esta campaña y se puede afirmar que los resultados fueron favorables, ya que, siendo el único difusor de información, sólo entre los meses de febrero y abril, se dieron entre 500 y 1000 visitas mensuales, además, investigando el origen de estas visitas se encontraron sitios importantes y frecuentados por todo tipo de personas como Google, Twitter y Facebook.. Figura 27. Tickets Publicidad.. Figura 28. Tickets Publicidad.. Figura 26. Tickets Publicidad. 7 AGRADECIMIENTOS Este trabajo y el desarrollo del Portal Viaje no habrían sido posibles sin el apoyo de todo el grupo del Proyecto Viaje. Es gratificante haber sido parte de ese equipo y lograr una integración de tantas áreas del conocimiento en un producto impecable. Tampoco habría sido posible la ejecución de este proyecto sin la financiación de la Vicerrectoría de Investigaciones de la Universidad de los Andes, caben. Figura 29. Tickets Publicidad..

(22) W3Schools (Ed.) 2010a. Learn JavaScript and Ajax. W3Schools (Ed.) 2010b. Learn CSS. W3Schools (Ed.) 2010c. Learn HTML and CSS.. Figura 30. Tickets Publicidad.. 8 FUTURAS INVESTIGACIONES Para encontrar convenciones particulares del portal y aplicar nuevos detalles que hagan mejor la usabilidad, queda abierta la posibilidad de realizar estudios a través de herramientas como Click Heat, Mouse Trackers, Eye Trackers, entre otras. Cuyos resultados puede llegar a ser muy útiles, sin embargo es necesario que el portal funcione algún tiempo para atrapar los verdaderos efectos y construir nuevos elementos que impacten de manera positiva.. 9 REFERENCIAS Bringhurst, Robert (Ed.) 2005. Elements of typographic style. Ceballos, Lina & Navarrete, Juan Sebastián & Reátiga María Claudia (unpubl) 2010. Tipografía en tres 3 pasos. City: Bogotá. Cooper, C. 2007. Successfully changing individual travel behavior: Applying community-based social marketing to travel choice. Tranposrtation Research Record. 2021: 88-99. Gilbert, A. (Ed.). 1996. The Meda-cty in Latin America. Tokyo: United Nations University Press. 282 p. Krug, Steve (Ed.) 2006. Don´t make me think. Berkeley: New Riders. SDM (Secretaría Distrital de Movilidad de Bogotá). 2007. Cultura y educación en seguridad vial en Bogotá. Presentación en el Seminario Internacional de Seguridad Vial, Noviembre 20, 2007. Disponible en: http://222.mintrasporte.gov.co/, último acceso: Febrero 24, 2009. Uniandes (Universidad de los Andes). 2008. El transporte como soporte al desarrollo – Visión 2040..

(23)