DISEÑO DE INTERFAZ GRÁFICA PARA EL SITIO WEB SIGMA...

DISEÑO DE INTERFAZ GRÁFICA PARA EL SITIO WEB SIGMA MÓVIL S.A

EDWIN LEAL MARTINEZ

UNIVERSIDAD AUTÓNOMA DE OCCIDENTE

FACULTAD DE COMUNICACIÓN SOCIAL DEPARTAMENTO DE CIENCIAS DE LA COMUNICACIÓN PROGRAMA DISEÑO DE LA COMUNICACIÓN GRÁFICA

SANTIAGO DE CALI 2012

DISEÑO DE INTERFAZ GRÁFICA PARA EL SITIO WEB SIGMA MÓVIL S.A

EDWIN LEAL MARTINEZ

Proyecto de Grado para optar al título de Diseñador de la Comunicación Gráfica

Director Andres Felipe Perdomo

Diseñador Gráfico y Web

UNIVERSIDAD AUTONÓMA DE OCCIDENTE FACULTAD DE COMUNICACIÓN SOCIAL

DEPARTAMENTO DE CIENCIAS DE LA COMUNICACIÓN PROGRAMA DISEÑO DE LA COMUNICACIÓN GRÁFICA

SANTIAGO DE CALI 2012

3

Nota de aceptación:

Aprobado por el Comité de Grado en cumplimiento de los requisitos exigidos por la Universidad Autónoma de Occidente para optar al título de Diseñador de la Comunicación Gráfica.

ANDRES AGREDO ____________________________________ Jurado

JAIME LOPEZ ____________________________________ Jurado

Santiago de Cali, 6 de Noviembre de 2012

4

CONTENIDO

Pág.

RESUMEN INTRODUCCIÓN 7 1. FORMULACIÓN DEL PROBLEMA 9 1.1 PREGUNTA DE INVESTIGACIÓN 9 1.2 SISTEMATIZACIÓN DE LA PREGUNTA DE INVESTIGACIÓN 10 2 JUSTIFICACIÓN 11 3. OBJETIVO 12 3.1 OBJETIVO GENERAL 12 3.2 OBJETIVOS ESPECÍFICOS 12 4. MARCO DE REFERENCIA 14 4.1 MARCO TEÓRICO 14 4.1.1 Acerca del benchmarkin 16 4.1.2 Interfaz gráfica de usuario 17 4.1.3 Arquitectura de información y usabilidad 23 4.2 MARCO CONTEXTUAL 26 4.2.1 Análisis sitio actual sigmamóvil 27 4.2.1.1 Mapa del sitio actual 27 4.2.1.2 Plantilla general 29

5

4.2.1.3 Recursos gráficos 31 4.2.1.4 Tipologías y estilos 33 4.2.1.5 Despliegue de contenidos y textos claves 33 4.2.2 Análisis de la competencia 38 4.2.2.1 Gerente de negocios 39 4.2.2.1 Cyclelogic 49 4.2.2.2 Élibom 56 4.2.2.3 Exintaya 61 4.2.2.4 Constact contact 66 4.3 MARCO CONCEPTUAL 74 5. PROCESO DE DESARROLLO DEL SITIO 92 5.1 PLANIFICACIÓN DEL SITIO 92 5.2 ARQUITECTURA DE LA INFORMACIÓN 93 5.3 DISEÑO DEL SITIO 95 5.5 MARKETING 98 5.6 RASTREO EVALUACIÓN Y MANTENIMIENTO 100 5.7 URL DE PRUEBA 101 6. METODOLOGÍA 102 7. CRONOGRAMA DE ACTIVIDADES 104 8. RECURSOS 105

6

9 CONCLUSIONES 106 10. RECOMENDACIONES 107 BIBLIOGRAFÍA 108 ANEXOS 109

7

LISTA DE ANEXOS

Pág.

Anexo A. Brief 95 Anexo B. Encuesta test de usabilidad 97 Anexo C. Resultados encuestas 100 Anexo D. Manual de estilo web 131

8

RESUMEN En el presente trabajo se diseñó la interfaz gráfica para el sitio web Sigma Móvil S.A que sirve cómo medio de promoción y difusión de sus servicios tecnológicos. En la primera fase del proyecto de realizó el análisis del sitio Web actual seguido de la indagación de fuentes bibliográficas. Acto seguido se definió la arquitectura de información, mapa del sitio y mapa de navegación para asi empezar a desarrollar la nueva interfaz gráfica de usuario. En la tercera fase del proyecto se realizó un test de usabilidad para evaluar con usuarios reales si el diseño propuesto cumplia con los requerimientos. El proyecto se desarrolló mediante herramientas cualitativas y cuantivas para el analisis de las entrevistas realizadas a clientes actuales y potenciales. Palabras claves: Arquitectura de información, Interfaz Gráfica, Usabilidad, Sitio web, Bechmarking.

9

INTRODUCCIÓN

“El desorden y la confusión son siempre fracasos del diseño, no atributos de la información”. 1 Edward Tufte, 1997, entrevista.

En el actual ambiente digital es importante para las compañías mantener alineada su estrategia comercial con las tendencias de consulta, búsqueda y consumo de información, servicios y productos de los usuarios de internet. La web 2.0 ha traído retos al mundo digital y al sistema de portales corporativos en la creación de estrategias integrales con alto nivel de usabilidad, navegación, funcionalidades y transaccionalidad para liberar procesos operativos de las empresas y además, con un nivel semántico y de interacción con redes sociales en las que el usuario de internet es cada vez más evolucionado, competente y con niveles más altos de exigencia y demanda. Los servicios comerciales de las empresas encuentran en internet un aliado natural de su negocio sobre el que deben tener acción y control. Estas acciones no se limitan a la publicación de catálogos de servicios sino a mayores niveles de comunicación, múltiples ayudas y recursos multimediales, tutoriales, secuencias, contenidos de alta indexación y atractivos para los usuarios de buscadores, comunicación personalizada, e-mailing de segmento, mini-sitios y estrategias específicas de producto. Campañas totalmente medibles, trazables y verificables que entregan resultados a corto, mediano y largo plazo acerca de la fidelización de los clientes y captación de nuevos usuarios. El presente trabajo surge del interés por abordar desde el campo del diseño de la comunicación gráfica, el proceso de creación y el desarrollo del sitio Web basada en la interfaz gráfica de usuario, en particular la producción de un sitio Web Sigma Móvil S.A. En él se pretende indagar sobre las características del proceso de desarrollo para la Web y aplicarlas a la realización efectiva de un sitio. __________________________________________________________________ 1 LYNCH, Patrick J. Sara HORTON. Principios de diseño básicos para la creación de sitios web, Barcelona, Ediciones Gustavo Gili, 2000, p. 9

10

El interés de este proyecto es además posicionar a Sigma Móvil S.A en un nuevo espacio de comunicación con características singulares. La Web permite poner en circulación mensajes a escala global, facilita el acceso a la información y viabiliza el contacto de las empresas con su portafólio de servicios. El sitio Web de Sigma Móvil S.A se plantea, entonces, como un medio para promover la interacción empresa-usuario. La Web permite poner en circulación mensajes a escala global, facilita el acceso a la información y viabiliza el contacto de las empresas con su portafólio de servicios. El sitio Web de Sigma Móvil S.A se plantea, entonces, como un medio para promover la interacción empresa-usuario. Llevar adelante el desarrollo del sitio Web para Sigma Móvil S.A implica considerar diferentes dimensiones para abordar la problemática envuelta en la creación de un sitio Web. La primera de ellas está orientada a conocer los criterios y principios del diseño Web de acuerdo con las características del medio.

11

1. FORMULACIÓN DEL PROBLEMA A pesar de la gran herramienta tecnológica que tiene Sigma Móvil S.A su interfaz gráfica actual no incorpora metáforas para la interacción, que son el uso de imágenes y conceptos para trasmitir funciones y significados a la pantalla del ordenador siendo para ellos un punto negativo a la hora de captar futuros clientes. Establecido esto es necesario crear un nuevo diseño centrado en el usuario para asi ampliar sus expectativas de ventas y el uso de los servicios ofrecidos. Diseñar una nueva interfaz grafica eficiente que transmita los lineamientos comerciales de la empresa Sigma Móvil S.A a usuarios, clientes, nuevos clientes con el fin de fidelizar, promover, y ampliar la cobertura de sus servicios. Se mostrarán particularidades gráficas como: Mapa del sitio, look and feel, contenidos gráficos y textos de todo el portal, tipografía, código cromático, formatos, estuctura de la información, iconos consistentes y claros, diagramas y gráficos de identidad, para así proporcionarle al usuario final la confianza necesaria de encontrar, sin una excesiva pérdida de tiempo el contenido que desea encontrar. Concluyendo, el propósito del proyecto es diseñar una nueva interfaz gráfica para asi unificar los servicios e incrementar por medio de esta, la participacion del mercado de la empresa Sigma Móvil S.A. 1.1 PREGUNTA DE INVESTIGACIÓN ¿Cómo implementar un nuevo sitio web para Sigma Móvil S.A alineado con el objetivo comercial de la compañía, como un canal de contacto continuo con clientes actuales y potenciales, mediante una interfaz gráfica de usuario? 1.2 SITEMATIZACIÓN DE LA PREGUNTA DE INVESTIGACIÓN • ¿Cuáles son las partes del sitio Web actual que necesitan diseño y/o rediseño

web para Sigma Móvil S.A? • ¿Qué elementos se deben tener en cuenta para el diseño de una interfaz

gráfica de usuario ? • ¿Qué criterios se van a aplicar para proporcionar una continuidad visual a cada

una de las páginas del sitio web para Sigma Móvil S.A? • ¿Cuál y que tipo de información o secciones se van a destacar y/o a mostrar

en el sitio web para Sigma Móvil S.A? • ¿Cuáles serian las características visuales y de diseño gráfico?

12

2. JUSTIFICACIÓN “La interfaz, por definición, el área de comunicación entre el hombre y la máquina. La interfaz se genera entre el ser humano y un artefacto virtual (caso de las herramientas del ciberespacio), o entre el hombre y un artefacto real.” 2

El diseño de una nueva interfaz gráfica para Sigma Móvil S.A nos ayudará a aterrizar la idea central, materializarla y construir los mensajes que permiten la comunicación usuario-sistema. Para ello, se necesita partir de una base teórica y profundizar en ella para discernir cada uno de los elementos que la conforman para luego dar soluciones. Teniendo en cuenta que una buena interfaz gráfica nos serviría para captar, interpretar y traducir la información en códigos visuales e incluso auditivos que el usuario reconozca, de esto dependerá el éxito que tenga el proyecto, es decir, si la interacción, facilidad de uso (usability) y manejo del mensaje visual, logran la inmersión e interacción del usuario con la interfaz, se cumplirá el objetivo de la misma. La elaboración de una interfaz gráfica usuario de para Sigma Móvil S.A, permite definir las necesidades de usuarios potenciales, facilitar al usuario un acceso directo a la información requerida con el minimo de pasos posibles y en un tiempo más corto. Por eso una continuidad visual y unas normas gráficas de diagramación permite que la navegacion sea intuitiva, sencilla, predecible, flexible, consistente y coherente. __________________________________________________________________ 2 ROYO Javier. Diseño Digital. Diseño digítal en la interfaz gráfica de usuario. Barcelona. 2008. P. 115 GG.

13

3. OBJETIVOS 3.1 OBJETIVO GENERAL. Diseñar un nuevo sitio web para Sigma Móvil S.A alineado con el objetivo comercial de la compañía, como un canal de contacto continuo con clientes actuales y potenciales mediante una interfaz gráfica de usuario. 3.2 OBJETIVOS ESPECIFICOS. • Diagnosticar el sitio web actual: funcionalidad, “usabilidad”, accesibilidad,

visual, contenidos, recursos gráficos, tipologías, estilos, títulos y/o textos de viñetas, íconos, marcos y demás que contemple todo lo referente a una interfaz gráfica.

• Realizar un brief de la compañía que defina el trabajo a efectuar, la asignación

de recursos con los que se contará y los medios y soportes que se utilizarán para llegar, de una manera más eficiente y económica a la meta fijada.

• Analizar las estrategias web de diferentes compañías del sector para

establecer diferentes tendencias, mejores prácticas y recomendaciones para el despliegue de la nueva información.

• Crear los diseños gráficos de las diferentes páginas del sitio web para validar

mediante un test de usabilidad la apariencia y la interactividad del portal y facilitar así la implementación posterior de todas las soluciones.

• Diseñar el manual de estilo web como guía para futuras actualizaciones y

punto de partida para nuevo desarrollos por parte del equipo de Sigma Móvil S.A.

14

4. MARCOS DE REFERENCIA 4.1 MARCO TEÓRICO “La Interfaz Gráfica de Usuario en un sistema informático que incorpora: ágiles metáforas para la interacción, uso de imágenes y conceptos para transmitir funciones y significados a la pantalla del ordenador, caracteristicas visuales detalladas de cada uno de los elementos de la interfaz gráfica y la secuencia funcional de interacciones en el tiempo que proporciona singularidad y apariencias especiales de lo sitios web con sus relaciones de enlaces de hipertexto.” 3

Elementos fundamentales que la configuran, como puede ser la barra de tareas, o el menú “Dock” de Macintosh, tiene una historia propia que contar, y corresponde a muchas indagaciones y pruebas de diseño, el haber llegado a su actual definición conceptual, formal y funcional. Las interfaces gráficas han pasado de convertirse, de un artefacto tecnológico con propiedades interactivas que posibilita la interacción con el ordenador, a constituirse como artefacto inteligente capaz de orientar al usuario y provocarse cambios a sí misma, en relación a los datos tomados de éste. Esto abre un nuevo ámbito de investigación dentro del contexto de las interfaces que tienen que ver con la adición de inteligencia. Los sitios web se diferencian de los libros y otros documentos en algo crucial: Los enlaces de hipertexto permiten que el usuario pueda acceder a una pagina web sin ningún tipo de preámbulo. Es por esta misma razón que las páginas de una web deben tener mucha mas autonomía que las páginas de un libro convencional. Esto significa que, generalmente, sus encabezamientos y pies de página deberán ser mas informativos y elaborados que en las páginas impresas. _______________________________________________________________________________ 3. LYNCH, Patrick J. Sara HORTON. Principios de diseño básicos para la creación de sitios web, Barcelona, Ediciones Gustavo Gili, 2000, p. 11 4.1.1 Acerca del “benchmarking”

15

Según expresa Michael J. Spendolini, “el “Benchmarking” es un proceso sistemático y continuo para evaluar los productos y servicios, los procesos de trabajo y los resultados económicos de las organizaciones que son reconocidas como las de mejores prácticas con el propósito de realizar evaluaciones y cambios en la propia organización“ 4

El objetivo del “benchmarking” es generar un impacto positivo de reflexión, motivación y transformación en la organización al compararse con los mejores del mercado. Se pueden establecer varios tipos de “benchmarking” en función de diversos aspectos como: el proceso que se estudia y objetivos del análisis. La clasificación más utilizada es la que atiende a la relación existente con la empresa u organización que participa en el estudio. De esta manera se distingue entre: Benchmarking interno: permite identificar los estándares de desarrollo interno de una organización. Estimula las comunicaciones internas y la solución conjunta de problemas. Benchmarking competitivo: comprende la identificación de productos, servicios y procesos de trabajo de los competidores directos de su organización. Es de utilidad cuando se busca posicionar los productos de la organización en el mercado. Benchmarking funcional (genérico): comprende la identificación de productos, servicios y procesos de trabajo de organizaciones que podrían ser o no ser competidoras directas de una organización. El “Benchmarking” permite analizar las estrategias web de diferentes compañías del sector para establecer y determinar tendencias, mejores prácticas y recomendaciones para el despliegue de información. _______________________________________________________________________________ 4 Michael J. SPENDOLINI. Benchmarking. Bogotá, Norma, 2005, p. 43 Inicialmente se analizarán las estrategias web de diferentes compañías del sector para establecer y conocer tendencias, mejores prácticas y recomendaciones para

16

el despliegue del canal por parte en aspectos como herramientas de contacto y capacitación. Para realizarlo, se utilizarán las cuatro variables de estudio mencionadas anteriormente, en este orden: • Facilidad de uso • Servicios que presta (funcionalidad) • Diseño gráfico • Estrategia de negocio 1.1.2 Interfaz gráfica de usuario

El concepto de la interfaz, nace en el año 1973 en el centro de investigación Xerox Alto, donde se parte con el objetivo básico de encontrar un modelo óptimo de interacción persona- ordenador, pasa por un proceso de comienzo y de madurez donde se definen sus elementos básicos, para acabar convirtiéndose en un producto de consumo estético dentro de los sistemas interactivos, donde la interfaz más allá de un medio de interacción óptimo, se transforma en un objeto inteligente abierto a los procesos de configuración por parte del usuario. La etimología de la palabra interfaz está compuesta por dos vocablos; “Inter” que proviene del latín inter, y significa, “entre o en medio”, y “Faz” proviene del latín faci que significa “superficie, vista o lado de una cosa”. Por lo tanto una traducción literal del concepto de la palabra interfaz atendiendo a su etimología, podría ser superficie, vista, o lado mediador. “La interfase vuelve accesible el carácter instrumental de los objetos y el contenido comunicativo de la información” 5 El concepto de interfase se desarrolla en un ambiente informático, cuyo entorno puede describirse con términos como: computación gráfica, multimedios,hipermedios interactivos, ciberespacio, realidad virtual y telepresencia. Este mismo autor formula siete características esenciales sobre el diseño, entre las cuales cita: “El diseño se dirige hacia la interacción entre el usuario y el artefacto. El dominio del diseño es el dominio de la interfase” 6 _______________________________________________________________________________ 5 Gui BONSIEPE. Del objeto a la interfase. Buenos Aires, Ediciones Infinito, 2000, p. 17 6 Ibid p. 23

17

En el contexto de la interacción persona-ordenador, la interfaz de usuario, es el espacio que media la relación de un sujeto y un ordenador o sistema interactivo; siendo la ventana de un sistema informático, que posibilita a una persona interactuar con él. La interfaz gráfica de usuario como tal, exige por parte del usuario, una serie de condicionantes fisiológicas, y necesita del uso de dispositivos que permitan poner en contacto al sujeto con el sistema tecnológico; llamados dispositivos de interfaz humano, como el ratón, teclado o la pantalla (caso “touch screen”) que permiten a través de las posibilidades fisiológicas del sujeto, producir parte de la interacción con la interfaz y por lo tanto parte fundamental de la misma, siendo un método de interacción. Se trata de un proceso mediante el cual, un sujeto, se acerca a un sistema tecnológico con el que interacciona a través de los signos inscritos en dicha superficie; es decir, un proceso interactivo, que requiere de una serie de requisitos cognitivos básicos por parte del sujeto, como percibir, decodificar, memorizar, decidir y navegar a través de la interfaz gráfica. Por lo tanto, la interfaz sólo cobraría sentido, cuanto el sujeto es capaz de comprender el significado y el proceso de interacción, y sus facultades cognitivas son capaces de interpretar adecuadamente los signos que se producen sobre la interfaz y usarlas adecuadamente. Scolari plantea la necesidad de hablar de las metáforas de la interfaz y no de las definiciones de la misma. Las metáforas son importantes a la hora de comprender la realidad que nos rodea, siendo muy útiles al momento de aprender un nuevo concepto. 7

Definir un término abstracto e invisible puede ser una tarea tediosa tanto para quien lo defina como para quien lo tiene que interpretar y comprender. Es por ello que este autor, al referirse a las interfaces, lo hará en términos metafóricos para poder facilitar la comprensión de aquellas. El poder descriptivo de cada metáfora ayudará a reconocer los rasgos distintivos de las interacciones. _______________________________________________________________________________ 7 SCOLARI, Carlos Alberto Elementos para una teoría de la Comunicación Digital Interactiva. Barcelona, Editorial Gedisa 2004 Pag. 318

18

Scolari plantea la existencia de cuatro tipos de metáforas: • Metáfora conversacional (Interface como diálogo persona-ordenador): una de

las concepciones más difundidas; según esta metáfora los seres humanos y las computadoras son considerados como socios de un diálogo. Ambas partes (persona y ordenador) actúan como emisores y receptores simultáneamente. La conversación se llevaba adelante, básicamente, sobre sistemas alfanuméricos.

• Metáfora instrumental (Interface como extensión o prótesis del cuerpo del

usuario): La superación de los sistemas alfanuméricos se dió a través de la aparición de interfaces gráficas “user-friendly”, esto es, entornos gráficos denominados WIMP (Windows, Icons, Mouse, Pointer) que se impusieron desde 1984.

Los objetos interactivos logrados a través de estas interfaces fomentaron la idea de manipulación directa de los objetos ubicados en la pantalla como si se trataran de herramientas tangibles. Metáfora superficial (Interfase como superficie osmótica que separa y permite el intercambio hombre - computadora): Existe para muchos una concepción bastante arraigada que consideran al diseño (en particular, al diseño de interfase) un proceso cosmético, como algo que “acompañaba” al producto o servicio principal. Metáfora espacial (Interfase como entorno de interacción hombre - computadora): Esta metáfora considera a la interfaz como el espacio en donde toman lugar las interacciones entre un usuario, una acción o finalidad y un artefacto o utensilio. Las interfaces siempre existieron, pero en la actualidad, y bajo entornos informáticos y digitales, han alcanzado una mayor relevancia. La invasión de nuevos medios de comunicación, como son los dispositivos móviles trajo la renovación de las prácticas discursivas, haciendo hincapié en la interactividad entre las personas, como es el caso de la interfaz móvil. 1.1.3 Elementos de la interfaz gráfica de usuario

Internet es un medio de comunicación donde la interfaz tiene un papel fundamental en el entorno gráfico. Una vez definida la interfaz de usuario como espacio que media la relación de un sujeto, un ordenador o sistema interactivo, se produce una interrelación entre el usuario, sistema o el dispositivo, permitiendo a

19

este (usuario) manejar o interactuar en función de lo que busca. Desde este inicio, no todos las interfaces gráficas de usuario tienen los mismos elementos; pero sí todas buscan definir de algún modo la gramática interactiva que subyace en la relación con el ordenador. Los elementos de la interfaz suponen dentro de los procesos interactivos, elementos simbólicos que están inscritos en los lenguajes visuales que operan en los sistemas de comunicación de los humanos. Desde esta perspectiva la interfaz ha generado su propia gramática de representación e interacción, suponiendo actualmente un modelo que debe ser aprendido por cualquier persona dispuesta a intercambiar información con un sistema binario. Barras de navegación, íconos, menúes, ventanas (propios de un sistema de relación entre usuarios e interfaz) y dispositivos externos (estos últimos, integrantes de los hardwares donde el humano introduce información al ordenador), designan los primeros elementos interactivos para relacionarse con los ordenadores o sistemas. Para facilitar el proceso entre usuarios y sistemas UI (Interfaz gráfica de usuario), se aplica “la metáfora de escritorio”, que consiste en representar recursos, elementos y funciones del sistema informático como ficheros, datos y archivos, a través de íconos sobre los cuales es posible el asumir de una forma virtual, la relación de trabajador en el entorno de la oficina. Esta es la comparación más global y primaria de las que gobierna la interfaz gráfica de usuario. El escritorio es la primera metáfora, representa el espacio de trabajo donde se manipula, se mueve, y organiza la información. En base a la metáfora del espacio-escritorio se desarrollan el resto de las comparaciones, como son las carpetas, los documentos, las herramientas, lápices y tinteros. Esta comparación establece un recurso potente que posibilita al usuario compenetrarse de forma intuitiva (al ser relativo a la realidad), a través de signos propios del lenguaje del sistema que facilitan la relación del humano con su entorno laboral. Este reconocimiento a través del lenguaje visual permite la manipulación del espacio generando la orientación sobre qué tipo de objeto es y qué acciones pueden realizarce sobre él; y la relación lógica entre datos que serían complicadas de expresar, comprender y ejecutar. La clave está en la consistencia en el diseño, como proceso mediante el cual se establece a la hora de estructurar la información como elementos de navegación en la interfaz, con un orden común y coherente; sea ésta para ser visualizada desde un computador o desde un dispositivo móvil. De este modo, el usuario sólo

20

tiene que aprender una sola vez dónde localizar las acciones en los menús, y aunque se produzca un cambio en la aplicación, sepa localizarlos sin problemas, si se maneja el mismo concepto. La consistencia en el diseño de interfaces, es un elemento muy importante porque reduce la curva de aprendizaje del sistema por parte del usuario. Junto a este apartado, las ventanas, los iconos y los menue ́s, son elementos interactivos, que pertenecen a la parte simbólico-lingüística de la interfaz. Pero también cabe mencionar que para que estas funciones se lleven a cabo, se encuentra la interfaz humana o física del interfaz gráfico. Los dispositivos de interfaz humana son los diseñados para conectar alguna parte del cuerpo del ser humano con la interfaz gráfica; permitiendo introducir directamente y en tiempo real, información de orientación y acción al ordenador sincronizado simultáneamente con una interfaz gráfica. Existen diferentes tipos de interfaces humanas los cuales han sido desarrollados paralelamente a lo largo de la historia de la interfaz gráfica. Los más importantes han sido, el teclado, el ratón de ordenador, el cursor táctil, la tableta gráfica, Joystick y Touch screen. Estos representan en la interfaz gráfica gestos físicos y movimientos, como apuntar, pulsar, arrastrar, tocar y mover de forma metafórica que de otro modo sería muy complejo simular. La interfaz humana y la interfaz gráfica de usuario, están interconectadas de un mismo paradigma de interacción, donde se necesitan uno al otro indispensablemente para que la interacción con el sistema se realice adecuadamente. 4.1.4 Arquitectura de información y usabilidad El diseño estructural de lo sistemas de información, recuperación y presentación de la información mediante el diseño de ambientes intuitivos hace parte de la Arquitectura de información (AI), disciplina que nace a finales de la década de los 90 como respuesta a la gran cantidad y complejidad de los sistemas de información basados en internet.

21

4.1.5 Arquitectura tradicional vs Arquitectura de información. La arquitectura tradicional crea los planos que van a ser utilizados por los contructores los cuales levantarán zonas que serán visitadas por personas. Como en todos los espacios públicos, gran parte de los visitantes ingresan a ellos por primera vez, lo cual hace que dicho espacio debe ser altamente intuitivo. “La gran diferencia de la arquitectrua tradicional a la de información es que los espacios digitales son intangibles y las referencias en pantalla deben ser concretas para la orientación del usuario” 8 La AI también guarda una estrecha relación con la biblioteconomía; aprovechando el conocimiento establecido en cuanto a organización y gestión de información y profundizando en las áreas de categorización y metadatos. En otros de los artículos por Cristofol Rovira y Lluis Codina sobre “sistemas de navegacion” señalan que el diseño de navegación hace parte de la arquitectura de la información, disciplina más amplia encargada de proponer principios prácticos para la estructuración, etiquetado y navegacion de páginas y sitios Web. Ambas disicplinas se nutren, entre otras cosas, de resultados obtenidos por los estudios de usabilidad. Para Rosenfeld y Morville, “la arquitectura de la información es la disciplina emergente encargada del etiquetado y del diseño estructural de espacios de información digital para facilitar la realización de tareas y el acceso a los contenidos de forma intuitiva.” 9

Garrett apunta en la misma dirección indicando que la arquitectura de la información se ocupa de la creación de los esquemas de organización y navegación que permitan a los usuarios moverse a través de un sitio Web con eficiencia y eficacia. Ahora bien, en el proceso de diseño y creación de una sede Web, Rosenfeld y Morville identifican una “zona gris” en la que es muy difícil identificar las fronteras entre las distintas disciplinas implicadas: arquitectura de la información, diseño de interacción, diseño de la información, diseño gráfico e ingeniería de la Usabilidad: ____________________________________________________________________________ 8 FLEMING, Jennifer Designing the user Experience. O’Relly 1998 Pag. 85 9 Rosenfeld, L Morville, P. Information Architecture for the Wolrd Wide Web. Sabastopol (Canada), O’Reilly 2002 Pag. 318

22

Garret da un paso más proponiendo un esquema general del papel de cada una de estas disciplinas, estableciendo la interrelación entre ellas en el contexto de lo que él denomina ¨experiencia de usuario¨. Para Garret, en concreto, el diseño de navegación depende de la arquitectura de la información, se implementa al mismo tiempo que el diseño de la interfaz y antes que el diseño gráfico. Garret propone un esquema (Ver figura1, página 23) de una de estas disciplinas, relacionandolas entre ellas denominandolas “experiencia de usuario”. Para Garret, en concreto, el diseño de navegacion depende de la arquitectura de la información, se implementa al mismo tiempo que el diseño de la interfaz y antes que el diseño gráfico. Figura 1. Diagrama experiencia de usuario según Garrett

Fuente: Garret, James. The Elements of User Experience. 1 ed. New York: Aiga, 2008. p. 118.

23

4.2 MARCO CONTEXTUAL Sigma Móvil es una empresa de consultoría de la ciudad de Cali (Valle del Cauca), que realiza implementación e integración de soluciones de mercadeo y publicidad mediante tecnología digital. Sus servicios en el mercado incluyen comunicación a través de mensajes de texto SMS Masivo, Marketing móvil y Email marketing. Sigma Móvil se estableció en Colombia en Agosto de 2008, con el esfuerzo de inversionistas colombianos y suecos, para atender los productos y servicios de valor agregado que se podrían ofrecer al creciente volumen y alta penetración de los teléfonos móviles en Colombia. Según la Superintendencia de Industria y Comercio, en el país la penetración de la telefonía móvil se acerca cada vez más al 100%. En Colombia se calcula que hay 44 millones de habitantes y la entidad estima que los abonados a la telefonía móvil ya llegan a 42,32 millones. El tercer trimestre de 2010 mostró un crecimiento del 1,42% frente al mismo período del año pasado. En 10 años, la penetración de líneas celulares pasó del 10 al 92,9%. La plataforma técnica fue diseñada e implementada por Sigma Móvil con un gran talento humano y tecnológico en colaboración y experiencia de accionistas suecos lo que la hace muy moderna y flexible. En Latinoamérica las conexiones a Internet aumentaron en un 23% siendo ahora 99.3 millones a febrero de 2010, Colombia es el país que presentó el mayor crecimiento con un 36%, esto gracias a que paso de tener en febrero de 2009 7.5 millones de conexiones a tener en febrero de 2010, 10.2 millones. Los colombianos cada vez nos conectamos más, ya sea para leer el periódico, buscar información, leer blogs o ingresar a las redes sociales, que según el estudio de ComScore en el caso de Twitter, aumentó su presencia en Latinoamérica 13 veces, si lo comparamos con la medición anterior. Sigma Móvil empresa Colombiana en su proceso de incremento de la participación del mercado busca con el crecimiento reciente de telefonia celular ampliar y mejorar sus horizontes a través de la internet por medio de herramientas como el diseño y la comunicación.

24

4.2.1. Análisis sitio actual Sigmamóvil 4.2.1.1. Mapa del sitio actual Seción Subsección Nivel 3 Home

Qué es Quién lo utiliza Cómo se utiliza Planes y Modalidades Información Técnica Más Información Legales Acceso

SMS Masivo

Suscripción Qué es Campañas Información Técnica Más Información Legales

Marketing Móvil

Acceso

Servicios

Contenidos Noticias

SMS MASIVO MARKETING MOVIL Acceso Plataformas CONTENIDOS Y APLICACIONES

Nosotros Contacto Encuesta Resultados Buscador

Analisis • En este mapa de sitio hay una categorización inicial en el primer nivel de

navegación que no direcciona sobre el tipo de negocio que Sigma Móvil cubre es bastante estándar como planteamiento de secciones iniciales.

25

• El segundo nivel da a conocer los servicios de Sigma Móvil enunciándolos y el acceso a aplicativos propios de los servicios.

• En tercer nivel se presenta la información que puede ser de mayor interés para el público interesado en los servicios de la compañía con algunos recursos estáticos que no son muy ilustrativos al nivel de complejidad que el portafolio de la compañía requiere.

• La información descriptiva de los servicios podría contener lo necesario para

ubicar al cliente en el detalle de lo que está buscando pero su presentación le resta contundencia al mensaje.

• Para algunos casos estos contenidos son muy extensos y en otros, las gráficas

no le aportan ideas resumidas e impactantes del servicio como se esperaría de un gráfico o imagen que acompañe al texto, así esta pueda ser su intención.

• El “scroll” interno para leer los contenidos hace que la información se vea

extensa incluso a pesar de los íconos y bullets que la separan.

• El mapa de sitio de la manera en la que está planteado hace que la navegación

se torne repetitiva para el visitante y que pierda interés en el portal por no crear una identidad con sus necesidades.

• Para los visitantes, bien sea que se clasifiquen como clientes potenciales y

clientes actuales, es necesario construir espacios con llamados de atención y potencializar dichas zonas de impacto con mensajes cortos y directos, con ilustraciones que desde la primera visualización den una idea llamativa de lo que la compañía ofrece y que les permita establecer un vínculo con la empresa.

• Es necesario hacer un mayor aprovechamiento del home y del primer

pantallazo para dar a conocer el enfoque de negocio de la compañía. En la versión actual se pierde todo el primer pantallazo y los espacios laterales.

26

4.2.1.2. Plantilla general Figura 2. Header (Cabezote)

Fuente: Sitio Web Sigma Móvil S.A [en línea]. Santiago de Cali: Sigma Móvil, 2011 [consultado 08 de Noviembre de 2011]. Disponible en Internet: https://www.sigmamovil.com/

Figura 3. Pie de página (footer)


27

Figura 4: Inicio (Home page)


El actual portal de Sigma Móvil S.A es consistente en el uso de 3 colores básicos azul, gris y negro como parte de su estilo gráfico, lo que le da un estilo conservador al portal. Tiene un “header” y un “footer” común para toda la página que ocupa gran parte del espacio relevante del portal, un fondo azul para todo el portal y los contenedores de contenidos y/o funcionalidades van con fondo blanco. Maneja además algunos módulos con fondos degradados para etiquetas y separadores de sección con líneas rectas. Análisis • El uso de colores está limitado a la gama de colores del logo hasta el punto de

lograr monotonía en la visualización del portal, las imágenes de apoyo y similares no lograr romper el diseño general. Si bien son aplicaciones limpias de los colores básicos de línea gráfica dejan que todos los elementos se vean en el mismo nivel y no destaquen para la interacción.

• Es recomendable enriquecer el diseño general con el uso de otras gamas de colores que rompan un poco la monotonía del portal elementos con usos de colores más fuertes.

28

• Se puede trabajar en un diseño que imprima seriedad a la compañía pero sin necesidad de sacrificar su portafolio de servicios en el uso, los servicios de la compañía en el área de apoyo a actividades de mercadeo y por ubicarse en el segmento de servicios en comunicaciones deben mostrarse como opciones entretenidas y distintas, deben establecerse destaques intencionales que pretendan guiar la atención del visitante.

• Por el hecho de emplear una plantilla base para toda la presentación del portal la navegación en diferentes niveles se hace imperceptible, la sensación del visitante cuando ingresa a ver más información a niveles internos es que nunca abandonó la página principal lo que hace su experiencia monótona y poco usable.

4.2.1.3. Recursos gráficos Todas las secciones presentan la misma distribución de recursos gráficos manteniendo una sola imagen sobre todas las navegaciones. Algunas secciones se complementan con imágenes instructivas sobre algunos aspectos del contenido para reforzarlo. Algunos servicios como SMS Masivo que cuenta con 3 tutoriales acerca del funcionamiento de algunos de sus procesos internos. (Ver figura 5 página 36) Figura 5: tutorial (SMS masivo) Fuente: Sitio Web Sigma Móvil S.A [en línea]. Santiago de Cali: Sigma Móvil, 2011 [consultado 08 de Noviembre de 2011]. Disponible en Internet: https://www.sigmamovil.com/smsmasivo

29

Análisis • La imagen principal no cambia sin importar si la temática es distinta lo que

despista mucho al visitante.

• Las imágenes que complementan la información se despliegan directamente en el espacio del contenido mismo extendiendo verticalmente más el sitio Web.

• Algunas imágenes no tienen concepto ni manejo estético.

• Cuando se elige montar en zonas de contenido todas las imágenes de apoyo y

que éstas se mantienen fijas sin ofrecer mayor interacción, se arriesga a perder la atención del visitante y se pierde la oportunidad de ilustrar mejor los contenidos.

4.2.1.4. Tipologías y estilos El sitio web mantiene unidad en la presentación de títulos, subtítulos y textos en general, hace uso del azul para todos los títulos y contenidos, con aplicaciones (sobre fondo blanco) y tipos de fuente de sistema variados como arial y helvética. Análisis • Si bien es importante mantener unidad en los estilos de etiquetas, también es

importante manejar tamaños y otros colores para generar ritmo visual. Para el caso del sitio Web actual el uso de tipologías es bastante estático.

• En los recursos gráficos tampoco varía el uso de tipologías, colores y etiquetas.

• Se denota uso de algunos elementos para acompañar los contenidos pero se

quedan cortos en complementar la información.

30

• Para enriquecer la tipología de un portal es válido acompañar los títulos y/o textos de viñetas, íconos, objetos, marcos, cajas y recursos similares que la hagan más agradable y mantengan la jerarquía de los contenidos.

4.2.1.5. Despliegue de contenidos y textos claves El sitio tiene una única manera de mostrar sus contenidos. Los textos varían en extensión, dependiendo de la sección, pero se mantienen en presentación. Análisis • Los contenidos están homogenizados en su presentación.

• Las zonas de contenido con claras y sólo algunas son extensas

• La información es buena para resumir de lo que se trata cada servicio e incluso

en 3er nivel de detalle llega a lo que un cliente potencial puede requerir.

• Algunas secciones se quedan cortas como es el caso de Marketing Móvil para

enriquecer sus ejemplos de aplicación de servicios.

• Aunque se intenta hacer uso de textos claves a manera de “copies”

publicitarios como: “El medio publicitario y de comunicación más económico, directo y sencillo de usar” estos no son apropiados y/o pertinentes para presentar una sección y describirla, se prestan más para manejo de mensajes complementarios.

• La información técnica no es muy manejable en términos de casos y ejemplos

lo que hace que se quede corto.

• Existe una dualidad con respecto a la presentación de servicios y es que en el menú se presentan como servicios y en la interna se llaman productos y servicios.

31

• Sigma Móvil utiliza un menú lateral presente en todas las secciones que mantiene el acceso fácil a productos y servicios, este tipo de recursos es válido pero su uso en la zona de impacto lo convierte en paisaje para el usuario navegador.

• Los contenidos de contacto son muy breves y escasos en el portal lo que

dificulta la posibilidad de oportunidades claras de negocio.

• Por el tipo de mercado y de negocio que maneja Sigma Móvil resulta

imperativo manejar una serie de casos aplicados y ejemplos que permitan que el cliente se identifique con el producto y vea utilidad en las opciones de negocio a través de dispositivos móviles.

• La presentación de la información es muy corta y poco entretenida, los

elementos que acompañan la información no permiten mayor profundidad en el detalle de negocio de Sigma Móvil.

• El contenido es uno de los elementos más importantes de un portal, los textos,

llamados de relevancia, copies, sus palabras claves son tan importantes como los elementos gráficos e ilustraciones que los acompañan.

• Los textos permiten que el portal logre posicionarse en buscadores que son el

medio natural de llegada de los visitantes a los sitios web que ofrezcan los servicios que ellos buscan. Por otro lado, las imágenes deben ser complementarias, deben enfatizar y/o llamar la atención sobre algo que se debe detallar con mucho texto.

• Deben contar en breve lo que la empresa necesite decir y quiera que sea el

centro de atención para después entrar en un nivel de detalle técnico que permita que el visitante se construya una idea clara de lo que le está frente a él.

• Es necesario además manejar un método de razonamiento sobre la lectura del

portal. Debido al manejo técnico y especializado de temas de aplicaciones y soluciones móviles es viable que el razonamiento sea inductivo en términos de personalizar ejemplos de las aplicaciones de manera clara y precisa o hacer llamados relevantes que permitan poner en contexto el negocio de la compañía desde otro punto de vista.

32

• Dado el promedio de tiempo que los lectores de internet se mantienen en una página, los contenidos deben construirse de una manera entretenida, breve y directa.

• La titulación y manejo de términos debe ser precisa para la industria y

enriquecer el volumen de palabras claves para mejorar el posicionamiento en resultados de búsqueda relevantes.

• Los contenidos deben ser manejados con un lenguaje simplificado y atractivo

para mantener al visitante interesado en el portal, también deben ir acompañados de imágenes interesantes que permitan enriquecerse con más información y ubicarse fácilmente en el tema.

• Un portal en términos de contenido debe basarse en permitir la interacción y la

búsqueda de información innata del usuario de internet, que no está a la espera de lo que le ofrezcan sino que está activamente participando de cada página que visita y configurando la información a su gusto.

Funcionalidades Se identifican algunas funcionalidades en el portal como: Figura 6: Zona de contáctenos Fuente: Sitio Web Sigma Móvil S.A [en línea]. Santiago de Cali: Sigma Móvil, 2011 [consultado 08 de Noviembre de 2011]. Disponible en Internet: https://www.sigmamovil.com/contactenos

33

Figura 7: Tutoriales para funcionamiento de SMS Masivo.

Fuente: Sitio Web Sigma Móvil S.A [en línea]. Santiago de Cali: Sigma Móvil, 2011 [consultado 08 de Noviembre de 2011]. Disponible en Internet: https://www.sigmamovil.com/smsmasivo.html • Aunque el sitio cuenta con algunas funcionalidades básicas, éstas son escasas

para el nivel de interacción que se requiere por el tipo de producto y negocio que maneja Sigma Móvil.

• Las funcionalidades están muy ocultas lo que les resta relevancia.

• Se debe considerar que contar con funcionalidades es un modo de enriquecer

la experiencia del usuario de internet a través de un portal dinámico, entretenido, que brinde soluciones, ofrezca valor agregado y se haga interesante.

• Para las tendencias web 2.0 y 3.0 las funcionalidades deben ser destacadas, la

idea es que los portales demuestren todas las posibilidades interactivas que ofrecen para sus usuarios. Esto redunda en posicionamiento y en viralidad de la compañía, servicios y posibilidades.

• Para el caso de Sigma Móvil es muy importante contar con múltiples ejemplos,

animaciones, tutoriales, zonas de contacto exclusivo para sus clientes que le ofrezcan privilegios y denoten una solidez tecnológica.

34

4.2.2 Análisis de la competencia Como parte del proceso de definición del nuevo portal para sigmamovil.com es de gran consideración evaluar algunos portales de empresas en el sector de mercado, el planteamiento de sus canales digitales, la propuesta y forma de comunicación, y elementos de interacción con los visitantes. Se han seleccionado cinco sitios web, los cuales fueron el resultado del brief de requerimientos ( ver anexo B ) : • Gerente de negocios ( www.gerentedenegocios.com/ ) • Cyclelogic ( www.cyclelogic.com/ ) • Élibom ( www.elibom.com/ ) • Existaya ( www.existaya.com/ ) • Constant contact ( www.constantcontact.com/ ) Analizar en cuatro aspectos los portales enunciados: 1. Facilidad de uso, 2. Servicios que presta, 3. Diseño gráfico y 4. Estrategia de negocio, para evaluar la tendencia digital del mercado. • Facilidad de uso: está relacionada directamente con los criterios y estándares

de usabilidad: qué tan fácil es de usar, cuál es la profundidad y la amplitud de su arquitectura de información, cómo es el manejo de jerarquías de información, la amabilidad de la interfaz, la rotulación y las áreas de contenido, los modos de interacción con el usuario.

• Servicios que presta (funcionalidad): lo que un usuario puede hacer en el

portal, qué acciones se pueden realizar en el portal o con el sistema (p.e. consultas, transacciones, etc.). De esta categoría se derivan igualmente sub categorías de atributos funcionales que hacen parte de las variables de estudio.

• Diseño gráfico (presentación visual): impacto gráfico, coherencia con los

atributos de marca (logos y en general elementos gráficos que acompañan a todas sus comunicaciones), elementos gráficos destacables y forma en que refuerza el posicionamiento. Se puede enfatizar en el manejo cromático de los elementos visuales, buscando establecer tendencias de presentación para aplicarlas acordemente en el desarrollo posterior de los portales.

35

• Estrategia de negocio: Incluye aspectos como los objetivos buscados por cada compañía al implementar diferentes conjuntos de funcionalidad en sus portales, el tipo de sinergias que han establecido con terceros para enriquecer los ofrecimientos y continuar con el desarrollo del canal, la disposición de usuarios a usar las soluciones Web. Las estadísticas, la información de los usuarios y del ciclo de vida serán estimadas de forma indirecta pues el comportamiento de cada solución web es información confidencial de cada compañía.

4.2.2.1 Análisis del sitio gerente de negocios (www.gerentedenegocios.com) Facilidad de uso La facilidad de uso está relacionada directamente con los criterios y estándares de usabilidad: qué tan fácil es de usar, cuál es la profundidad y la amplitud de su arquitectura de información, cómo es el manejo de jerarquías de información, la amabilidad de la interfaz, la rotulación y las áreas de contenido, los modos de interacción con el usuario. Al cargar la URL de la compañía Gerente de Negocios a través de un navegador observamos que nos arroja a la página de inicio, la cual está en idioma español. Presenta una distribución que ayuda al visitante a identificar fácilmente los menúes a los cuales se puede acceder. La página carga de forma rápida y no presenta errores durante este proceso. La plataforma está distribuida para que el visitante se sienta a gusto navegando entre las diferentes secciones.

36

Figura 7: Inicio (Home page). Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com En la parte superior “header”, se visualiza la imagen de la empresa con su logo. Tiene un fondo que va rotando a medida que va mostrando diferentes mensajes que para ellos es de importancia, ya que están indicando sus logros más significativos. Esto puede ser interesante ya que el usuario de forma indirecta se está enterando de aspectos que pueden atraer su interés a estar con la compañía o generarle cierta confianza por su crecimiento. Para la interacción de los usuarios, el portal presenta sus opciones de navegación principalmente a través de un menú superior que a través de colores identifica en qué sección se está navegando. (ver figura 8)

37

Figura 8: Inicio (Home page). Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com Al rollover (ver figura 9) o paso del mouse sobre cada una de las secciones indicadas, se despliega automáticamente el menú de sus secciones internas. Las subsecciones o secciones de tercer nivel se navegan desde este menú a través de un ícono que lo indica, este indicador no necesariamente es un estándar que el usuario reconozca directamente en un menú. Figura 9: Menú de navegación (Ejemplo rollover). Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com El manejo de este menú permite que se acceda a una subsección automáticamente a medida que se va ubicando el mouse sobre cada pestaña, lo que ubica fácilmente al usuario en la opción que desea y le da un recorrido por las diferentes del portal como de la compañía. El portal no cuenta con Mapa de Sitio lo que impide medir el nivel de complejidad del sitio y la jerarquía de sus contenidos. Para efectos de este análisis la arquitectura y jerarquía del sitio se ha definido así:

38

• Home • Nuestra compañía

Nosotros Seguridad de la Información Política de confidencialidad Política Anti-Spam Marketing de Permiso

• Nuestros Servicios Master Base® Master Base® ST Master Base® PRO SMS mensajes de Texto Admin. Eventos

• Nuestros Clientes • Soporte

Sistema de Solicitudes Tipos de soporte

• Contáctenos A nivel de etiquetado el sitio mantiene consonancia con la forma de identificar sus secciones, subsecciones y contenidos. Se utiliza la misma tipología y color, manteniendo los del logo de la empresa, con fondos blancos y contenidos en los colores grises oscuros y naranjas, lo que permite que el visitante se ubique fácilmente. Maneja gráficos relacionados con los ítems de cada llamado, es decir, que los íconos que acompañan a la sección o subsección tienen que ver con su contenido y contenidos descriptivos complementarios como bajantes para todos los títulos. Las zonas de contenido del portal se identifican de la siguiente manera: Figura 10: Zona destacados (home) Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 13 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com

39

• Zona para otros destacados de la compañía que respaldan su propuesta estratégica como: seguridad, tecnología y reporte de abuso.

• Módulo de funcionalidades propias del portal como: newsletter, opinión y cursos.

• Zona destacada para acceso exclusivo de clientes, soporte y servicio en línea

Figura 11: Página interna 1 (Nuestra compañia).

Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com/nosotros

40

• Zona para gráficos relacionados con la sección, breves e icónicos. • Zona de menú secundario. • Zona animada para rotar opciones de servicios • Zona de desarrollo de contenido Figura 12: Página interna 2 (Contáctenos).

Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com/contactenos • Zona para gráficos y descripción de la sección. • Zona para rotar opciones de servicios. • Zona de desarrollo de contenido. Gracias a su barra de menú superior (Ver figura 13) los visitantes llegan fácilmente a la información sin importar en el nivel en el que se encuentre.

41

Figura 13: Menú de navegación

Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com

Servicios que presta En este aparte se releva todas las funcionalidades de interacción que aparecen en el portal, que hacen de la visita del usuario una mejor experiencia interactiva y que le generan la sensación de estar recibiendo atención por parte de la compañía. Para el portal de Gerente de Negocios se encontraron las siguientes funcionalidades: Chat: se hace un contacto directo con la empresa mediante el uso de la aplicación Skype. Ya sea por mensajes en pantalla tipo chat o por llamada a través del servicio mencionado. Hace que el cliente tenga un contacto directo con la compañía y pueda solicitar la información que requiera para poder conocer en detalle sus servicios y adaptación a sus necesidades. Solicitud de Demo: se le da al cliente la oportunidad de acceder a este servicio para evaluar su calidad. Ayuda a que el cliente sienta confianza en la herramienta que va a adquirir. Aunque las condiciones de uso del demo son bastante claras para acceder al demo es necesario diligenciar un formulario bastante extenso, lo que podría causar un poco de incomodidad al usuario o hacerlo desistir. Es aconsejable usar un formulario simplificado y en posteriores contactos conseguir más información a través de otro tipo de actividades llamativas. Formulario de contáctenos: Un recurso habitual en todos los sitios web y se obtiene por diferentes grados de complejidad, en este caso es la funcionalidad básica.

42

Soporte: permite ver la información sobre los diferentes tipos de soporte con que cuenta la compañía describiéndolos los enlaces a las opciones de contacto no funcionan. Carece de un buscador para ubicar más rápidamente contenidos. Encuesta. Cuenta con un llamado para diligenciar una encuesta de opinión que no está funcional pues arroja un error. Inscripción a eventos: cuenta con un espacio para suscripción a eventos de la compañía según disponibilidad. Para registrarse el portal permite un registro en línea. Son cursos presenciales.

Diseño Gráfico Se trata de evaluar el impacto gráfico, coherencia con los atributos de marca, elementos gráficos destacables y forma en que refuerza el posicionamiento. • Gerente de Negocios basa su portal en una gama de naranjas, grises y

blancos que constituyen los colores principales de su logo. (Ver figura 14) Figura 14: Logotipo (Gerente de Negocios)

Fuente: Sitio Web Gerente de negocios [en línea]. Santiago de Cali: Gerente de negocios, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.gerentedenegocios.com • Para mantener consonancia con los colores de su logo utilizan el naranja para

identificar selecciones, por ejemplo de secciones, los contenidos de texto en las secciones se manejan en la gama de los grises, con su fondo blanco, lo que ayuda a resaltar mejor éstos, sin salirse de los propios del logo.

• El sitio mantiene unidad en el fondo, en la distribución de los contenidos y en el

uso de los colores sobre los destacados.

43

• Mantienen una rotación de imágenes en puntos específicos, como en el header y los banners animados que rotan al lado que a partir de fotos con texturas y algunos elementos que se alinean con la propuesta gráfica del portal en general. Para acompañar estas imágenes se utiliza iconografía afín con lo que se describe, franjas y sombras que le dan profundidad a los diseños en zonas de impacto.

• En la sección de clientes se genera scroll para poder conocerlos a todos. Sin

embargo tienen una franja en la parte superior en la cual están pasando todos los logos de los clientes con una animación constante. El recurso de usar los logos es bastante atractivo porque las marcas reconocidas pueden reconocerse fácilmente lo que brinda prestigio.

Estrategia de negocio Este portal se puede considerar de baja-media complejidad es un portal que se apoya en recursos gráficos que lo hacen lucir más funcional de lo que verdaderamente es. Hace un buen uso de las zonas de impacto usa animaciones sin embargo que no son sensibles al clic. Sus contenidos son bastante explicativos y breves los mensajes son cortos y directos. Pero carecen de ilustraciones que permitan entender de qué se trata su servicio en profundidad. Su enfoque de negocio parece residir en su posicionamiento general de la compañía y darse a conocer en transmitir experiencia y soporte sobre sus servicios a través de herramientas que parecen agregar valor. No está enfocado en ofrecer una visión detallada de sus servicios o de ejemplarizar cómo funcionan, sus cifras intentan mostrar un poco el valor de su gestión pero se quedan cortas para el gran detalle. 4.2.2.2 Análisis del sitio cyclelogic ( www.cyclelogic.com/ ) Facilidad de uso Al cargar la URL de la compañía CYCLELOGIC a través de un navegador lleva a la página de inicio, que por defecto está en español. Tiene la opción de

44

seleccionar entre 3 idiomas, español, inglés y portugués, lo que crea en el visitante una sensación que la compañía tiene una amplia cobertura y que está interesada en que este pueda acceder a sus servicios en su propio idioma. También en la parte inferior aparece la opción de seleccionar el idioma. (Ver figura 15 página 54) Al seleccionar alguno, la página presenta cierta demora para actualizar los contenidos. Pasa a pantallazo en blanco y luego si aparece la página en el idioma seleccionado. La distribución y su ambiente permanecen estables a pesar del cambio de idioma, lo cual hace que el portal tenga consistencia entre las diferentes versiones. Aunque la selección y visualización del portal se puede hacer en varios idiomas, no todas las zonas quedan en el idioma seleccionado. Algunas de estas que son destacables, permanecen en español, lo cual hace que el visitante pierda cierta confianza en la cobertura de sus posibles servicios. Figura 15: Página de inicio (Home page)

Fuente: Sitio Web Cyclelogic [en línea]. Santiago de Cali: Cyclelogic, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.cyclelogic.com En la parte superior, header, se visualiza la imagen de la empresa con su logo. En una zona de impacto elegida para un banner de autopauta se trata de emplear una imagen relacionada con el negocio de móviles sin mayor detalle del servicio específico que se está ofreciendo. En este “banner” rotan contenidos que informan

45

sobre los servicios que ofrecen y sobre ciertos datos que pueden ser de interés para posicionar a la compañía, a manera de copy directo pero no son llamados a la acción. (Ver figura 16) Figura 16: Tipos de contenidos (Banner) Fuente: Sitio Web Cyclelogic [en línea]. Santiago de Cali: Cyclelogic, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.cyclelogic.com Para la interacción de los usuarios, el portal presenta sus opciones de navegación a través de botones de llamados ubicados en la parte superior derecha. No muestra ningún menú desplegable al ubicarse sobre alguno de ellos, pero dentro de las secciones que tienen subsecciones aparece un menú de su contenido, ubicado en otra zona del portal. No presenta menús adicionales que ayuden a llegar por otro lado a un punto determinado. El portal no cuenta con Mapa de Sitio lo que impide medir el nivel de complejidad del sitio y la jerarquía de sus contenidos. Para efectos de este análisis la arquitectura y jerarquía del sitio se ha definido así: • Inicio • La Empresa Historia Staff Donde Estamos • Unidades de Negocio

46

Mobile Marketing Plataformas Conectividad Producto

• Contacto A nivel de etiquetamiento el sitio mantiene consonancia con la forma de identificar sus secciones, subsecciones y contenidos. Se utiliza la misma tipología y color, manteniendo los del logo de la empresa, con fondos negros y contenidos en los colores grises oscuros y rojos, generando cierta uniformidad para su navegación. No presenta gráficos adicionales en secciones ni subsecciones. En ciertos puntos rotan imágenes de los que están relacionando con lo que están resaltando y en otros solo texto. Las zonas de contenido del portal se identifican de la siguiente manera: Figura 17: Página de inicio (Home page)

Fuente: Sitio Web Cyclelogic [en línea]. Santiago de Cali: Cyclelogic, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.cyclelogic.com

47

Figura 18: Página interna (Quienes somos, Historia) Fuente: Sitio Web Cyclelogic [en línea]. Santiago de Cali: Cyclelogic, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.cyclelogic.com/quienesosmos Figura 19: Página interna (Mobile Marketing)

Fuente: Sitio Web Cyclelogic [en línea]. Santiago de Cali: Cyclelogic, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.cyclelogic.com/obilemarketing

48

Para el portal de Cyclelogic se encontraron las siguientes funcionalidades: • Selección de idioma: se encuentra en 2 partes del portal para que el usuario

pueda acceder al idioma deseado. Tiene la opción entre 3, pero como mencionamos anteriormente no todo cambia al nuevo idioma. Mantiene en español varias zonas.

• Formulario de contáctenos, que es un recurso habitual en todos los sitios web y se obtiene por diferentes grados de complejidad, en este caso es la funcionalidad básica.

• Contenidos: presenta al visitante explicación de cada uno de los productos y servicios.

• Carece de un buscador para ubicar más rápidamente contenidos.

Diseño Gráfico Se trata de evaluar el impacto gráfico, coherencia con los atributos de marca, elementos gráficos destacables y forma en que refuerza el posicionamiento. • Cyclelogic basa su portal en una gama de negros, grises y rojos que

constituyen los colores principales de su logo. Figura 20: Logotipo

Fuente: Sitio Web Cyclelogic [en línea]. Santiago de Cali: Cyclelogic, 2011 [consultado 10 de Octubre de 2011]. Disponible en Internet: https://www.cyclelogic.com

49

• No utilizan colores para identificar la selección de alguna sección o subsección. El menú inicial de las secciones está en color gris con fondo negro. En las subsecciones o nivel 2 usan el color rojo. En las subsecciones identifican la que se está seleccionando con un cursor blanco al lado derecho del nombre de la sección.

• El sitio mantiene unidad en el fondo, en la distribución de los contenidos y en el uso de los colores sobre los destacables.

• Mantienen una rotación de imágenes en puntos específicos, como en la

sección de Mobile Marketing.

• El uso de la gama de colores es bastante limitada y básica en este portal en

general, no se usan texturas, degradados, iconografía.

• El portal tiene una gran desventaja al mantener un fondo negro que hace que

la lecturabilidad sea bastante difícil, lo que lleva a abandonar la página.

• La página además no cuenta con recursos gráficos interactivos que permitan

enriquecer los contenidos. Estrategia de negocio

Este portal se puede considerar de baja complejidad, es un portal que no denota una actualización constante y/o refrescamiento de sus contenidos. Las zonas de impacto son estáticas y no muestran mensajes directos para sus visitantes. El enfoque de negocio de esta compañía en términos de su canal digital se basa en mostrar y ratificar sus aliados y su cobertura aunque las zonas para mostrarlo sean espacios muy pequeños que cuentan muy poco. No se hace un despliegue detallado de sus productos y/o su aplicación y el foco es disperso para la gran variedad de tipos de clientes que pueden tener y aplicaciones que se les puede dar a sus productos. El posicionamiento que quieren lograr parece ser el simple reconocimiento de su existencia y de sus acuerdos previos, así como hablar de cómo se han destacado en el mercado sin ofrecer mayor detalle a sus clientes o vincularlos con pruebas que demuestren la experiencia y cubrimiento.

50

4.2.2.3 Análisis del sitio élibom ( www.elibom.com/ ) Facilidad de uso

Al ingresar al portal ÉLIBOM se abre la página de inicio, que por defecto está en idioma español. (Ver figura 21) Tiene la opción de seleccionar cambio de idioma al inglés. Esto ayuda a que el sitio tenga mayor acceso de visitantes y puedan tener mayor número de usuarios. Figura 21: Logotipo, Selección de idioma

Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com El cambio de idioma se hace de forma rápida y casi imperceptible al visitante. No genera pantallazos de carga y todos los textos quedan en el nuevo idioma. El portal permanece en los 2 idiomas de manera uniforme en distribución y sus contenidos. En cuanto a su distribución tenemos que en la parte superior, header, se visualiza la imagen de la empresa con su logo. Debajo de este logo aparece una imagen relacionada con los servicios que presta la compañía. En la misma zona destaca una breve descripción del enfoque del negocio de la compañía y de lo que se dedica a hacer como negocio. Esto hace que el usuario conozca el negocio de la compañía y cuál es el objetivo de sus productos. (Ver figura 22) Figura 22: Descripción enfoque de negocio

Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com

51

Para la interacción de los usuarios, el portal presenta sus opciones de navegación a través de botones de llamados ubicados en la parte superior izquierda, bajo el logo de la empresa. También tiene en el footer los llamados a las secciones. No muestra ningún menú desplegable al ubicarse sobre alguno de ellos, y dentro de las secciones no hay subsecciones imitando las opciones de contenido. Debido a que no maneja mucha información el llamado a cada sección se puede manejar con el clic en cualquiera de los 2 menús. El portal no cuenta con Mapa de Sitio lo que impide medir el nivel de complejidad del sitio y la jerarquía de sus contenidos. Para efectos de este análisis la arquitectura y jerarquía del sitio se ha definido como a continuación revelando un nivel muy bajo de complejidad y un desaprovechamiento del canal y de sus posibilidades en el mundo digital. • Élibom | sms • Precios & cobertura • Desarrolladores • Ayuda & Soporte

A nivel de etiquetamiento el sitio mantiene consonancia con la forma de identificar sus secciones y contenidos. Se utiliza la misma tipología y color, a pesar que no utiliza el azul del logo de la empresa; en el área del menú superior se maneja un azul un poco más suave que mantiene cierta sobriedad. Los otros colores que utiliza están en los fondos con el blanco y los contenidos con grises oscuros, generando cierta uniformidad para su navegación. Figura 23: Página de inicio (Home page) Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com

52

Figura 24: Página de interna (Desarrolladores) Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com/desarrolladores Servicios que presta Para el portal de ÉLIBOM se encontraron las siguientes funcionalidades: • Selección de idioma: se encuentra en 2 partes del portal para que el usuario

pueda acceder al idioma deseado. Tiene la opción entre inglés y español. • Login: para clientes que han creado su usuario se da el servicio de acceso a

correo e información específica de cada usuario. • Prueba gratis: para los nuevos usuarios y posibles clientes es un formulario

para poder tener acceso y hacer uso de su servicios como una muestra de lo que pueden hacer desde su plataforma.

• Ayuda y soporte: se le ofrece al usuario la facilidad de ser atendido por el

departamento de soporte, mediante el uso de la página para solucionar las posibles novedades que se le presenten.

53

• Desarrolladores: es una sección específica donde dan las instrucciones de código para que los clientes puedan conectar el servicio de SMS a sus propias aplicaciones a través de webservices y/o http.

• Carece de un buscador para ubicar más rápidamente contenidos. Diseño Gráfico

Se trata de evaluar el impacto gráfico, coherencia con los atributos de marca, elementos gráficos destacables y forma en que refuerza el posicionamiento. • ÉLIBOM basa su portal en una gama de blancos, grises y algo de azules, que

aunque no son los colores que constituyen su logo, ofrecen al visitante una sobriedad para el manejo de sus contenidos. (Ver figura 25)

Figura 25: Logotipo


• Los colores que utilizan para las secciones están uniformes entre ellas.

• El sitio mantiene unidad en el fondo, en la distribución de los contenidos y en el uso de los colores sobre los destacables.

• Las zonas para destacar no manejan grandes recursos visuales que les permita acompañar los contenidos con valor agregado y mejoras visuales. No hay elementos de multimedia, ni interactivos en el portal.

54

Estrategia de negocio

Este portal se puede considerar de baja complejidad no muestra ni denota una alta rotación de contenidos y/o textos de valor agregado de algún tipo dentro del mercado. Su enfoque de negocio parece residir en comunicar su servicio de SMS, la muestra gratis y registrar clientes potenciales a través de dicha funcionalidad, comunicar su información de costos para adquirir su producto estrella SMS 4.2.2.4 Análisis del sitio exintaya ( www.exintaya.com/ ) Facilidad de uso

Al cargar la URL de la compañía EXISTAYA y llegar a la página de inicio, que por defecto está en español sin opción alguna de multilenguaje. En cuanto a su distribución tenemos que en la parte superior, “header”, hacia la izquierda se visualiza la imagen de la empresa con su logo. En esta misma zona en la parte media aparece el enfoque que quiere mostrar la empresa de los servicios que presta y un buscador directamente vinculado con Google. (Ver figura 26) Figura 26: Cabezote (Header)

Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com Debajo del header, está el menú principal a las secciones del portal. Bajo éste, aparece una zona de impacto en la que se hace uso de “banners en los que muestran algunas ventajas del manejo de publicidad digital (uno de sus productos) y que pretende generar identidad con el público objetivo. (Ver figura 27)

55

Figura 27: Cabezote (Banners) Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com El menú se muestra resaltado en naranja muestra los submenús a secciones de 2º nivel. (Ver figura 28) Figura 28: Menú de navegación

Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com Internamente al navegar por las secciones se genera demasiado scroll por el volumen de contenido que se está publicando. Esto hace que el usuario pierda cierta información importante, pierda el interés o que abandone el sitio rápidamente. No es una tendencia actual que los sitios Web corporativos y de servicios hagan uso de tanto espacio y generen tanto scroll. (Ver figura 29) Figura 29: Scroll en cáda una de las páginas

56


No hace uso de menús adicionales que ayuden a llegar por otra vía a determinado contenido de interés. El portal cuenta con Mapa de Sitio en la parte inferior que solo tiene un llamado a ciertas secciones, cuyos nombres no coinciden con los que se muestran en el menú superior o inferior. Hace llamados y está identificado con este nombre aunque no propiamente se esté manejando este esquema para el resto del portal, este mapa de sitio es más como un menú de destacados. Para efectos de este análisis la arquitectura y jerarquía del sitio se ha definido así: • Inicio • Google Adwords

Cómo funciona Medición en línea

• Email Marketing Cómo funciona Acceso al sistema • Redes Sociales • Diseño Web Diseño Web Catálogo de diseños • Hosting & Dominios • Blog • Contáctenos A nivel de etiquetamiento el sitio mantiene consonancia con la forma de identificar sus secciones y contenidos. Aunque manejan información en exceso, el contenido de cada sección está relacionado con el identificador de la sección. Se utiliza la misma tipología y color en todas las secciones, incluida la del Blog que no es propia, sino que es un llamado a otro sitio que sube esta información. Los colores que utiliza están basados en los del logo con textos en grises, fondos blancos y textos que se resaltan en naranja. El sitio cuenta con un recurso particular que un símbolo para identificar a la compañía y que se trata de un personaje ilustrado en 3d presente en todas las

57

secciones del portal y acompañado de elementos alusivos a la sección que se está visitando. (Ver figura 30) Figura 30: Personaje ilustrado en 3d.

Fuente: Sitio Web Elibom [en línea]. Santiago de Cali: Elibom, 2011 [consultado 09 de Octubre de 2011]. Disponible en Internet: https://www.elibom.com Las zonas de contenido del portal se identifican de la siguiente manera: Figura 31: Página de inicio (Home page).


58

Páginas Internas 1, 2 ,3 La distribución es muy similar a la identificada en el HOME, anteriormente descrita. Presenta zonas de contenidos similares y hay algunas que se repiten. Son demasiado extensas en contenidos, lo que pudo haberse reducido estos en subsecciones de llamados de interés o en zonas que los clientes requieran ver. Servicios que presta En este portal se identificaron las siguientes posibilidades y funcionalidades de interacción y servicio: • Presentación de producto: son presentaciones que se muestran con la

aplicación slideshare que presentan los productos y sus ventajas.

• Llámanos ahora: funcionalidad para chat o para dejar mensaje en formulario. • Solicitar cotización: formulario para que a través de la web se obtenga una

idea de costos para sus servicios.

• Video: se trata de ejemplos en video embebidos en el canal de youtube para

mostrar cómo funcionan sus productos.

• Medición en línea de resultados: Descargable en pdf que permite ver un

ejemplo de las estadísticas que obtiene el cliente al usar algunos de sus servicios.

• Caso de éxito en video: video testimonial de una experiencia de campaña con

uno de sus clientes.

• Barra de herramientas para compartir: es una barra gratuita que permite la

conexión rápida a diferentes opciones como redes sociales y el posterior posteo de la información de la página elegida, lo que para el ejemplo de facebook permitiría crear un post en el muro de la persona que ingresó a su cuenta. También permite enviar por email, imprimir o twitear el mensaje. Esta funcionalidad está habilitada para el blog de la compañía.

59

• Catálogo web: se trata de una serie de plantillas predeterminadas para

diseños de portales web, tiendas virtuales y diseños en flash. La funcionalidad de compra no está disponible para hacerlo en línea y arroja un error. El formulario no funciona tampoco.

• Blog: es un espacio para postear contenidos de interés y actualizar dicha

información cuenta con las funcionalidades de blog tradicionales.

• Contáctenos: formulario, datos de contacto y mapa de google para ubicar a la

empresa.

• API de FB y Twitter: para mostrar las actividades en redes sociales de la

compañía.

Diseño Gráfico

Se trata de evaluar el impacto gráfico, coherencia con los atributos de marca, elementos gráficos destacables y forma en que refuerza el posicionamiento. • El diseño del portal es básicamente una sola plantilla según la distribución de

contenidos presentada que se adapta para todas las secciones del portal, basada en el negro, el gris, el naranja y el blanco alineado con su logo y recursos gráficos del mismo.

• Hace uso de recursos como cajas y módulos con sombras grises para diferenciar contenidos y/o líneas divisorias similares a las de su logo. El uso de estos recursos sin embargo es muy básico y limitado para las posibilidades actuales del diseño.

• Sus zonas de impacto si cuentan con un uso de mayores recursos visuales

atractivos y que pueden generar identidad entre los visitantes.

60


Es un portal de media complejidad por el volumen de recursos que maneja y porque se ha preocupado por acompañar la información básica de su catálogo y oferta con otro serie de recursos que puede atraer la atención de sus clientes potenciales. El foco de negocio parece estar dedicado a promocionar sus diferentes productos y servicios como parte importante para sus posibles clientes, tratando de crear la necesidad de éstos y de comunicar sus ventajas competitivas en el mercado. A razón de esto su nombre. Si bien se podría decir es un portal bastante extenso y su diseño no lo favorece, sí cuenta con herramientas y recursos de valor para generar lazos de identidad de sus clientes con sus productos y uso de los mismos. 4.2.2.5 Análisis del sitio constact (www.constantcontact.com/) Facilidad de uso La facilidad de uso está relacionada directamente con los criterios y estándares de usabilidad: qué tan fácil es de usar, cuál es la profundidad y la amplitud de su arquitectura de información, cómo es el manejo de jerarquías de información, la amabilidad de la interfaz, la rotulación y las áreas de contenido, los modos de interacción con el usuario. La navegación del portal está basado en diferentes herramientas como: menú principal, menú intermedio, módulo de footer 2.0, filtros, layers para menús específicos y menús complementarios: Figura 31: Menú de navegación (Home page).

Fuente: Sitio Web Constant [en línea]. Santiago de Cali: Constant, 2011 [consultado 11 de Octubre de 2011]. Disponible en Internet: https://www.constantcontact.com/

61

Figura 32: Menú complementario Fuente: Sitio Web Constant [en línea]. Santiago de Cali: Constant, 2011 [consultado 11 de Octubre de 2011]. Disponible en Internet: https://www.constantcontact.com/ Figura 33: Navegación por filtros

Fuente: Sitio Web Constant [en línea]. Santiago de Cali: Constant, 2011 [consultado 11 de Octubre de 2011]. Disponible en Internet: https://www.constantcontact.com/ Figura 35: Opciones de comunidad


62

El portal cuenta con una estructura bastante compleja y amplia que se evidencia en su mapa de sitio. Pero a pesar de esta todos los contenidos y jerarquías que manejan hasta 3er nivel y un vínculo constante de todas las secciones con sus contenidos complementarios. A nivel de etiquetamiento el sitio maneja múltiples modos de presentar sus títulos, llamados y destaques dependiendo de la sección que pretenda dar a conocer sin perder identidad en su diseño. Se observa un alto contenido de copies y contenidos de tipo publicitarios que permiten que la titulación sea más llamativa y natural al visitante. Muchos de estos títulos llamativos no son etiquetas editables sino que se han acompañado de iconografía y bullets alusivos a la temática que presentan como son llamados a la acción y botones. Figura 35: Página de inicio (Home page)


63

Figura 36: Página de interna (Email Marketing) Fuente: Sitio Web Constant [en línea]. Santiago de Cali: Constant, 2011 [consultado 11 de Octubre de 2011]. Disponible en Internet: https://www.constantcontact.com/emailmarketing.html Servicios que presta

En este aparte se releva las funcionalidades de interacción que aparecen en el portal, que hacen de la visita del usuario una mejor experiencia interactiva y que le generan la sensación de estar recibiendo atención por parte de la compañía. Por la gran variedad de funcionalidades que presenta este portal se enumerarán las más relevantes para estudio. Para el portal de Constant Contact se encontraron las siguientes funcionalidades de interés: • Todo el portal contiene elementos y opciones para llegar a funcionalidades de

interacción atractivas para el usuario y de valor agregado para dar a conocer mejor sus productos y servicios como por ejemplo: llamados a la acción para free trials, guías sobre el uso del producto, layer de redes sociales, ubicador de sedes, líneas de atención, tours, live demos, soluciones por tipo de negocio.

• Línea de atención: llamado para las líneas de atención en USA y para otras regiones, a veces se conecta con skype.

64

• Llamados para contenido de valor agregado, en este caso un video sobre cómo escribir contenido atractivo al usar aplicaciones como las ofrecidas por la empresa y finaliza con opción de suscripción a news con tips similares.

• Free-trials: a través de un formulario se logra la suscripción para que un

usuario interesado logre acceder a muestras de los servicios: event marketing, email marketing y online survey.

• Learning Center: Es una sección exclusiva en la que se accede a: demos que son tours guiados a través de los servicios. Buscador de recursos útiles para conocer y utilizar los diferentes servicios como demos, artículos, webinars y tutoriales. También refiere: blog, podcasts, mejores prácticas.

• Layer de redes sociales: es una capa que está presente en todo el portal sin

generar scroll o ruido que permite ver los últimos tweets, brinda acceso a aplicaciones útiles para el uso de redes sociales (una de estas aplicaciones de propiedad de la compañía), conecta las notas de valor agregado sobre el uso de redes sociales. También permite acceder a las diferentes redes sociales de la compañía.

• Test Drive interactivo: son presentaciones interactivas para aprender a usar

paso a paso alguno de los productos. Se abren en una ventana independiente y permiten que el usuario use la herramienta de manera guiada para saber qué debe hacer hasta lograr lo que desea conseguir.

• Tutoriales: son presentaciones en multimedia que permiten saber cómo usar

los productos paso a paso en formato de presentación.

• Guides: son guías descargables en PDF que traen la información de interés

para el uso de las aplicaciones, leer resultados de los productos que se están empleando y manuales para cada servicio.

• Contenidos de valor: si bien no constituyen en sí una funcionalidad las guías

paso a paso también están presentes en el cuerpo del contenido y se convierten como tal en una herramienta de interacción.

65

• Otros recursos multimedia: se trata de otros recursos de interacción que enriquecen el contenido como historias de clientes en video y ejemplos de los productos que han empleado los clientes con detalle de cómo lo lograron y qué alcanzaron.

• Producto “Go Social”: es un servicio más que un producto en sí, aunque hay

una aplicación que ofrecen para redes sociales, pero que además les ha permitido enriquecer su oferta de instructivos, artículos, webinars y tutoriales para brindarles a sus clientes valor agregado.

• Blog: se trata de un espacio que no se destaca tanto como sus otros recursos

en el que se postean artículos de interés para lograr el aprovechamiento de los servicios de la compañía.

• Community: es una sección especial para que sus clientes ingresen a la comunidad de la compañía y se retroalimenten de sus experiencias, lo que les ha sido de mayor uso, los resultados de sus campañas, que cuenten cómo hacen uso de las aplicaciones de la compañía y tópicos similares.

• Market Place: es una sección para que el usuario de acuerdo con sus necesidades encuentra aplicaciones y/o soluciones no necesariamente de la compañía que le permitan mejorar sus prácticas según el tipo de negocio.

• En segundos niveles dan a conocer si los productos se deben adquirir o cómo

conseguirlos.

• Localizador: es una sección para que el usuario encuentre oficinas o

representantes de la compañía cerca a su ubicación geográfica.

• Live and recorded webinars: se trata de todos los seminarios web que tiene la

compañía a disposición de sus clientes actuales y/o potenciales. Algunos de estos eventos son recurrentes y se programan semanalmente.

66

Diseño Gráfico Se trata de evaluar el impacto gráfico, coherencia con los atributos de marca, elementos gráficos destacables y forma en que refuerza el posicionamiento. • Constant contact basa su línea gráfica en una gama de naranjas, azules y

blancos que constituyen los colores principales de su logo. Pero se vale de otros recursos para contrastar y llamar la atención sobre llamados y módulos complementarios como el verde, para sombras y botones. ( Ver figura 37)

Figura 37: Logotipo Fuente: Sitio Web Constant [en línea]. Santiago de Cali: Constant, 2011 [consultado 11 de Octubre de 2011]. Disponible en Internet: https://www.constantcontact.com/ • El sitio hace uso de los colores del logo para tipografías, títulos y contenidos.

• Las barras y menúes complementarios que pueden reconocerse como

módulos de contenido siempre cuentan con un trabajo particular de diseño. En el ejemplo se usa como un estilo de flecha que conduce al precio de los servicios y productos.

• Estilos gráficos para enmarcar menúes y zonas de impacto siempre se valen

de figuras con siluetas que rompen las formas geométricas. • Para destacar ventajas y contenidos de los productos se usa iconografía. • Formato de Header y footer plantilla básica. • Formatos para módulos de contenidos relacionados.

67


Este portal se puede considerar de alta complejidad que se apoya en múltiples recursos multimedia, gráficos y fotográficos para dar a conocer sus productos, ventajas, ofrecer contenido de valor agregado, establecer identificación del usuario visitante con sus productos. Sus contenidos están constantemente buscando la forma de que su visitante se fidelice: 1) manejando perfiles de interés que maneja identidad 2) disponiendo herramientas de ayuda significativas para el visitante 3) destacando sus precios y ventajas. Su enfoque de negocio va más allá de dar a conocer sus productos, aunque éstos se encuentren en el primer pantallazo, para brindar solución, asesoría y acompañamiento a los pequeños negocios y que éstos sientan la necesidad de hacer uso de las herramientas y aplicaciones que tienen para ofrecer.

4.3 MARCO CONCEPTUAL

ADOBE DREAMWEAVER: Es una aplicación en forma de estudio destinado a la construcción y edición de sitios y aplicaciones web basados en estándares. Es el más utilizado en el sector del diseño y la programación web gracias a su funcionalidad y a su integración con otras herramientas y programas, como Adobe Flash; actualmente, también por el soporte de los estándares del World Wide Web Consortium. ADOBE FLASH: Es una aplicación en forma de estudio de animación que trabaja sobre “fotogramas” y está destinado a la producción y entrega de contenido interactivo. El lenguaje que utiliza es el ActionScript, que está orientado a objetos que permiten ampliar las funciones que el programa ofrece en sus paneles de diseño, además de la creación de animaciones o películas con gran contenido interactivo. La extensión de los archivos flash .swf puede aparecer en una página web para ser vista en un navegador. No obstante, este tipo de archivos suele aparecer como animaciones en páginas web, integrándose en otros programas como el Adobe Dreamweaver y en sitios web multimedia. AJAX: Son las siglas de lo que en inglés se llama Asyunchronous JavaStrip and XML. Se trata de una técnica de desarrollo web para crear aplicaciones que se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se

68

mantiene la comunicación asíncrona (sin correspondencia temporal) en el sentido de que los datos adicionales se requieren del servidor y se cargan en un segundo plano, sin interferir al comportamiento de la página. Esta tecnología permite aumentar la interactividad, velocidad y usabilidad en las aplicaciones, gracias a la posibilidad de realizar cambios sobre las páginas sin necesidad de recargarlas. JavaScript es el lenguaje interpretado en el que normalmente se efectúan las funciones de llamada de Ajax, mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. APLICACIÓN: Cualquier programa informático que se ejecute en un sistema operativo y que haga una función específica para un usuario. Suele resultar una solución informática para la automatización de ciertas tareas complicadas como pueden ser la contabilidad, la redacción de documentos, o la gestión de inventarios. Algunos ejemplos de los programas de aplicación más comunes son los procesadores de textos, hojas de cálculo, y base de datos. En función de las tareas que desempeñe la aplicación, será más general o más específica. Cuanto más general es, más casos puede abarcar, pero a veces es más interesante una aplicación específica, ya que está desarrollada casi a medida del usuario y suele ofrecer más soluciones para un mismo problema. Las compañías más comerciales desarrollan paquetes de aplicaciones, es decir, agrupan una serie de programas de distinta naturaleza para satisfacer al mayor número de usuarios. El ejemplo más claro lo encontramos en Microsoft Office. APLICACIONES WEB: Aplicaciones que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador. Es decir, es una aplicación software que se codifica en un lenguaje soportado por los navegadores web en la que se confía la ejecución al navegador. Las aplicaciones web son populares debido a la facilidad para actualizar y mantenerlas sin tener que distribuir e instalar software a miles de usuarios. Algunos ejemplos son los webmails, weblog o tiendas en línea. Una página Web puede contener elementos que permiten la comunicación activa entre el usuario y la información, accediendo a los datos de modo interactivo, como rellenar y enviar formularios, participar en juegos, etc. BANNER:Imagen o animación situado en una página web que contiene, en la mayoría de los casos, publicidad. Se crean a partir de imágenes en formato JPEG, GIF o FLASH y suelen ser muy llamativos, con colores y animaciones que llaman la atención del internauta para que cliquee sobre ellos. BASE DE DATOS: Una base de datos consiste en una organización sistemática de una serie de contenidos pertenecientes al mismo ámbito o contexto y que son almacenados para su posterior búsqueda y uso. Los Sistemas de Bases de Datos permiten guardar los documentos, pero su función principal es la rápida recuperación de los mismos, empleando el menor tiempo y esfuerzo posible. El software dedicado al almacenamiento y recuperación de la información se

69

denomina SGBD (Sistemas Gestores de Bases de Datos), que sirve de interfaz entre la base de datos, el usuario y las aplicaciones que la utilizan. Algunos de los datos que se almacenan cada día se encuentran protegidos por las leyes de varios países. Por ejemplo en España, los datos personales se encuentran protegidos por la Ley Orgánica de Protección de Datos de Carácter Personal (LOPD). Básicamente, existen dos tipos de bases de datos: • Estáticas, donde los datos no pueden modificarse, sino que las bases de datos

son de sólo lectura y consulta. • Dinámicas, donde los datos almacenados pueden (y deben) modificarse y

actualizarse.

BMP: BMP es la extensión correspondiente a los archivos BitMaP o Mapa de Bits. Es el formato de archivos gráficos de Windows. Son archivos gráficos de gran tamaño. Puede guardar imágenes de hasta 24 bits (16,7 millones de colores). Este tipo de gráficos se diferencian de los vectoriales en que, al aumentarles de tamaño, pierden calidad. Tampoco son recomendables para introducirlos en páginas web, debido a su gran tamaño en relación a su resolución. Normalmente esta extensión suele transformarse en otras más comprimidas, como JPG o PNG. BROWSER / NAVEGADOR: Es una Aplicación software que se utiliza para la visualización multimedia de las páginas web, comúnmente escritas con el lenguaje HTML, desde cualquier parte del mundo y por Internet. Cualquier browser o navegador permite visualizar texto, imágenes, vídeo, animaciones, links... todos los objetos colocados en la página web. Durante los últimos años se han desarrollado multitud de navegadores, como el Mosaic, que fue el primero en extenderse masivamente gracias a que era compatible con UNIX, Windows y Macintosh. Más tarde entró en escena Netscape Navigator, que sustituyó a Mosaic debido a sus mayores capacidades y velocidad. La comunicación entre el servidor web y el navegador se produce, normalmente, gracias al protocolo HTTP. Aparte de visualizar las páginas con todos sus componentes, ofrecen otros servicios como el almacenamiento de datos o la organización de nuestras páginas web favoritas. Ejemplos de navegadores actuales son el Firefox (competidor más importante de Internet Explorer), Internet explorer (propiedad de Windows que desbancó a Netscape Navigator), Opera, Mozilla (desarrollado por los creadores de Netscape) o Safari entre otros. BYTE: Es una unidad básica de almacenimiento de información cuyo valor son 8 bits. Los bytes de 8 bits a menudo se llaman octetos en contextos formales como los estándares industriales, así como en Redes Informáticas y Telecomunicaciones para evitar confusiones sobre el número de bits implicados. Un kilobyte equivale, a 1024 bytes, un megabyte son 1024 kilobytes, y así sucesivamente.

70

COMUNICACIÓN INTERACTIVA: Es aquella en que el receptor puede regular el flujo de la información. Esta capacidad para tomar decisiones depende de la estructuración de la información proporcionada por el medio. La revolución tecnológica ha contribuido en este nuevo modelo de comunicación desarrollado principalmente en Internet, cuya característica más importante y que lo diferencia de los medios de comunicación tradicionales es la interactividad entre emisor y receptor. Ésta se consigue a través de herramientas como: foros, chats, correo electrónico, juegos en red, tests, plataformas de redes sociales (Facebook o Twitter), etc. COOKIE: Una cookie es un archivo pequeño de información que contiene datos del usuario, a partir de una lectura de las rutas de navegación que utilizan los navegadores. Por precaución es recomendable borrar los cookies cada cierto tiempo. COPYRIGHT: En castellano, derecho de autor. Es el conjunto de normas y principios que regulan los derechos morales y patrimoniales que la ley concede a los autores por el solo hecho de la creación de una obra literaria, artística o científica, publicada o no. Para que una obra tenga la protección del derecho de autor no se necesita ninguna formalidad, es decir, no se requiere de la inscripción en un registro, los derechos de autor nacen con la creación de la obra. De todas formas es muy recomendable inscribir las obras en el registro de la propiedad intelectual, para otorgarle una protección extra contra posibles copias ilegales. Son objeto de protección las obras originales, del campo literario, artístico y científico, cualquiera que sea su forma de expresión, soporte o medio. Entre otras: Libros, folletos y otros escritos; obras dramáticas o dramático-musicales; obras coreográficas y las pantomimas; composiciones musicales con o sin letra; obras musicales y otras grabaciones sonoras; obras cinematográficas y otras obras audiovisuales; obras de dibujo, pintura, arquitectura, escultura, grabado, litografía; obras fotográficas; ilustraciones, mapas, planos, croquis y obras plásticas relativos a la geografía, a la topografía, a la arquitectura o a las ciencias; programas informáticos; entrevistas y páginas web. Por su parte, el titular de los derechos de autor goza de derechos exclusivos respecto de: • Reproducir la obra en copias o fonogramas.

• Preparar obras derivadas basadas en la obra.

• Distribuir copias o fonogramas de la obra al público vendiéndolas o haciendo

otro tipo de transferencias de propiedad tales como alquilar, arrendar o prestar dichas copias.

71

• Presentar la obra públicamente, en el caso de obras literarias, musicales, dramáticas y coreográficas, pantomimas, películas y otras producciones audiovisuales.

• Mostrar la obra públicamente, en el caso de obras literarias, musicales,

dramáticas coreográficas,

• pantomimas, obras pictóricas, gráficas y esculturales, incluyendo imágenes

individuales de películas u otras producciones audiovisuales.

• En el caso de grabaciones sonoras, interpretar la obra públicamente a través

de la transmisión audiodigital.

Los autores de una obra colectiva son co-dueños del derecho de autor de dicha obra a menos que haya un acuerdo que indique lo contrario. La legislación sobre derecho de autor cambia en función del país. Por ejemplo, en España, la Ley de Propiedad Intelectual afirma que los derechos de explotación de una obra duran toda la vida del autor y 70 años después de su muerte. CSS: Acrónimo de Cascading Style Sheets y traducido al castellano como “hojas de estilos en cascada”. Es un lenguaje artificial usado para definir la presentación de un documento estructurado escrito en HTML o XML. El fin de este nuevo mecanismo es separar la estructura de un documento de su presentación, lo que proporciona la posibilidad de añadir estilos (fuentes, colores) a los documentos web. CSS proporciona tres tipos de estilos a una página web: • Hoja de estilo interna: es una hoja de estilo que está incrustada dentro de un

documento HTML. Se puede copiar la hoja de estilo de una página a otra, por lo que se separa la información del estilo del código HTML. Se utiliza cuando se quiere proporcionar alguna característica a una página web en un simple fichero.

• Hoja de estilo externa: es una hoja de estilo que está almacenada en un

archivo diferente de donde se almacena el código HTML de la página web. Separa completamente las reglas de formateo para la página HTML de la estructura básica de la página, por lo que es la manera más potente de programar.

72

• Estilo en línea: es un método para insertar el lenguaje de estilo de página dentro de una etiqueta HTML. A nivel de código, supone una tarea larga y tediosa por lo que su uso es ocasional.

DISEÑO WEB: Consiste en una actividad, normalmente laboral, que consiste en la creación, desarrollo e implementación de páginas web. Realizar una tarea como esta requiere conocimientos de diseño gráfico, programación web, navegabilidad, interactividad, manejo de información y comunicación y conocimientos sobre posicionamiento web. Dentro de un diseño web puede haber multitud de elementos, como texto, imágenes, vídeos, links, cuestionarios, formularios... cada vez más mejorados con la tecnología aplicada a páginas web. Los documentos que componen las páginas web pueden estar creados siguiendo varias tecnologías, como los archivos de texto en HTML, utilizando programas exclusivos de creación de páginas web (como los gestores de contenido) o mediante lenguajes de programación, haciendo uso de software como Dreamweaver. Para realizar un buen diseño web, se siguen las siguientes etapas (obviando las relacionadas con el cálculo de los presupuestos y etapas administrativas): • Diseño visual:

Consiste en tener una idea clara de cómo se ordenan los elementos y la información dentro de la página web antes de comenzar a programar. Programación: Se refiere a crear la interactividad de la página web, creando enlaces internos, haciendo que funcionen los botones y que los formularios lleguen a una base de datos. La página web debe tener un dominio que no esté registrado anteriormente, estar alojada en un servidor y estar indexada en un buscador como Google, para que los usuarios puedan encontrarla fácilmente.

GESTOR DE CONTENIDOS WEB: También llamados CMS (Content Manager System), son programas informáticos que permiten crear y modificar los contenidos (o información) de una página web. En su origen fueron muy útiles para sitios web que requerían de actualizaciones continuas, como periódicos o revistas on line, pero hoy en día resulta importante para cualquier web de una empresa, persona o grupo, puesto que da una muy buena imagen a los clientes que la página web esté continuamente al día, ofreciendo nuevos contenidos, noticias de interés o, simplemente, actualizando fotografías. Hooping posee su propio gestor de contenidos, Actualizer web, el cual permite a nuestros clientes crear y poner al día información como: textos, imágenes, noticias, catálogos, vídeos, cuestionarios, añadir temas y subtemas dentro de las secciones principales, colocar enlaces externos, internos, a documentos o a correos electrónicos, gestionar los formularios que se encuentran dentro de la web, enviar newsletters a los clientes de una forma ilimitada.

73

HIPERTEXTO: Son documentos con un sistema de navegación basada en los links entre ellas. Se trata, en la mayoría de los casos, de un texto en el que, haciendo clic sobre él, te lleva a otro sitio de información, normalmente una página web. No necesariamente tienen que ser textos, cualquier tipo de objeto puede contener un hipertexto, como por ejemplo, una imagen. Un uso muy común del hipertexto se lleva a cabo en las presentaciones de Power Point, en las que se colocan para mostrar información adicional a las de las viñetas, como por ejemplo, un texto en otro formato, ampliar una fotografía, visionar un vídeo o acceder a una página web. HOJAS DE ESTILO: Son un conjunto de instrucciones que se ocupan de los aspectos de formato y de la presentación de los contenidos: colores y fondos, tipo, fuente y tamaño de las letras, etc. que se asocian a los archivos de texto. Los aspectos visuales y la composición del texto se presentan de manera distinta en las hojas de estilo, por lo que resulta más fácil el tratamiento de los contenidos. Constituyen una parte fundamental de los lenguajes de marcas para edición digital: LaTeX, XML y XHTML. HTML: # Acrónimo de Hyper Text Markup Language. El html es un lenguaje de marcas hipertextuales, un lenguaje diseñado para estructurar textos para generar páginas web. Gracias a Internet y a los navegadores web, el html se ha convertido en el formato más fácil para la creación de páginas web debido a su sencillez. Se escribe en forma de "etiquetas", rodeadas por corchetes angulares (<,>). Este lenguaje también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script que puede afectar el comportamiento de navegadores web y otros procesadores de HTML. El código HTML, normalmente está formado por atributos y contenido (aunque hay algunos elementos que no tienen ontenido). Cada atributo y contenido tiene ciertas restricciones para que se considere válido al documento HTML. Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado entre las dos etiquetas. Para generar código HTML simplemente debe usarse cualquier editor de textos básico: el Bloc de Notas de Microsoft o Gedit de Linux, pero también existe software especializado como Microsoft Front Page o Dreamweaver, que ayudan a visualizar mejor los diferentes códigos de la página web, así como a comprobar los cambios en tiempo real del diseño web en general. ICONO: Es una imagen gráfica de tamaño reducido que pretende simplificar la información destinada al usuario. Poseen un diseño intuitivo muy útil en la realización de páginas web. El mundo de la informática está repleto de iconos. No hace falta irse muy lejos, la pantalla principal de los escritorios posee, por ejemplo, el icono de una papelera, lo cual da a entender quie sirve para dejar ahí los documentos que queremos eliminar. También hay iconos en forma de carpeta,

74

que significa que dentro de ellos se encuentran archivos ordenados de una determinada manera. Los iconos son uno de los elementos que más se cuidan a la hora de desarrollar la interfaz de una aplicación, ya que el usuario no se sentirá cómodo si no entiende de forma sencilla e intuitiva los iconos que le ofrecen. Básicamente, dentro de un diseño web o de otra aplicación informática, existen tres tipos de iconos: los de programas (identifican el software instalado), iconos de acceso directo, de carpetas o de documentos (permiten diferenciar visualmente la extensión de un documento, con qué programa puede ser abierto). De todas formas, cualquier aplicación informática actualmente tiene su propio icono representativo. IMAGEN RASTERIZADA: También llamada bitmap (mapa de bits), es un fichero de datos representado por puntos de color o píxeles (denominada raster) que se puede visualizar en un monitor de ordenador, papel o cualquier otro dispositivo de representación. Este tipo de imágenes se caracterizan por su altura y anchura (en pixels) y por su profundidad en color (en bits por pixel) que determina el número de colores distintos que se pueden almacenar en cada pixel y que determina la calidad del color de la imagen y la resolución de la misma, dando lugar al tamaño de la imagen. Este formato de imagen suele emplearse para la toma de fotografías digitales y capturas de vídeo. IMAGEN VECTORIAL: Es una imagen digital formada por objetos geométricos independientes unos de los otros (polígonos, líneas, etc.) y definidos cada unos de ellos por distintos atributos matemáticos de forma, posición, color, etc. Este tipo de imágenes es diferente a las imágenes formadas por pixels (bitmap). A diferencia de éstas, en los gráficos vectoriales se puede ampliar y reducir el tamaño de la imagen sin que ésta pierda calidad. Normalmente, el tamaño de los archivos de las imágenes vectoriales es menor y ocupan menos espacio en disco que un fichero en mapa de bits. Además, cada objeto dentro de la imagen se puede modificar sin atender al conjunto de la misma. INTERFAZ: Es el conjunto de signos y herramientas que se ofrecen en pantalla al usuario. Los diseñadores del programa crean esta "parte visible" que permite al usuario establecer una comunicación con la aplicación, mediante las herramientas que puede utilizar para manejarla. Una buena interfaz de un diseño web debe ser intuitiva y permitir al usuario identificar con facilidad sus componentes mediante la utilización de símbolos, iconos o cualquier tipo de objeto que sirva para que el usuario entienda mejor el software. Dentro de la informática, hay otros ámbitos donde se utiliza el término interfaz: • Conjunto de comandos y/o métodos que permiten la intercomunicación de un

programa con cualquier otro o entre partes (módulos) del propio programa. De hecho, los periféricos son controlados por interfaces.

75

• En el Lenguaje de programación C++, una interfaz de personas es la parte del interfaz informático que permite la circulación correcta y sencilla de información entre varias aplicaciones y entre el propio programa y el monousuario.

• Dentro del hardware, una interfaz es el puerto (circuito físico) a través del que

se envían o reciben señales desde un sistema o subsistemas hacia otros. JPEG: Son las siglas en inglés de Joint Photographic Experts Group. Es el formato de archivo más común para almacenar y transmitir imágenes en Internet por ser, además, un método de compresión. Es también el más utilizado por las cámaras fotográficas digitales y otros dispositivos de captura de imagen. LINK/VINCULO: Apuntadores hipertexto que sirven para saltar de una información a otra, o de un servidor web a otro, cuando se navega por Internet. Se utilizan cuando, por ejemplo, en un texto de una página web se hace referencia a información relacionada que se encuentra en otra página web o en cualquier tipo de documento. Los datos pueden visualizarse de diferentes maneras: mediante un agente de navegación, mostrarlo como parte del documento referenciador o guardarlo localmente. Un navegador web normalmente muestra los links de alguna forma distintiva, por ejemplo con un color, letra o estilo diferente. El puntero del ratón también puede cambiar para indicar el enlace. También se especifica cuándo un link todavía no ha sido visitado (normalmente en azul) y cuando ya ha sido utilizado (en color púrpura). Cuando el usuario activa el enlace el navegador mostrará el destino del enlace. Si el destino no es un archivo HTML, se puede activar otro programa para abrir el archivo. MAPA WEB: Es una lista de las páginas de un sitio web a la que pueden acceder los usuarios. Puede ser tanto un documento en cualquier formato usado como herramienta de planificación, como una página que lista las páginas de una web de manera jerárquica. Esto ayuda al posicionamiento en buscadores de un sitio asegurándose de que todas sus páginas puedan ser encontradas. Además, es útil para la navegación de los visitantes ya que ofrece una vista general de la distribución del contenido en el sitio web. NAVEGABILIDAD WEB: Es la facilidad para desplazarse por las páginas de un sitio web. Esta fluidez se consigue mediante un conjunto de recursos y estrategias de navegación diseñadas para conseguir un resultado óptimo en la localización de la información y en la orientación para el usuario. Para una navegación óptima las interfaces deben ayudar a responder las siguientes preguntas: ¿Dónde estoy? ¿Dónde he estado?

76

¿Dónde puedo ir? PÁGINA WEB: Una página web es un documento escrito en lenguaje HTML procesado a su vez por el navegador web. Las páginas web se diseñan para ser accedidas fundamentalmente a través de Internet o la World Wide Web (www). El secreto básico de su funcionamiento son los enlaces, que conectan unas páginas web con otras, constituyendo una red universal. Las páginas web pueden consistir en archivos de texto estático sin más, o pueden ser dinámicas, es decir, tener permiso para acceder a bases de datos que le permitan extraer información que pueda ser presentada al visitante dependiendo de determinados criterios. Ejemplo de esto son páginas realizadas con gestores de contenido o CMS. Estos sistemas permiten cambiar el contenido de la página web sin tener que utilizar un programa de ftp para subir los cambios. Desde sus orígenes, cada vez se ha podido agregar más contenido, diseño y programación a las páginas web, desde el simple texto hasta todo tipo de archivos multimedia, como música, vídeos, imágenes estáticas o animadas, links de todo tipo, animaciones Flash, presentaciones Shockwave, etc. Aparte de su contenido, un buen diseño web, atractivo y moderno, proporciona una de las claves de éxito de las páginas web. Para ello, las empresas de diseño web, como Hooping, utilizan las últimas tecnologías web para ofrecer las mejores páginas web posibles. PLUGIN: En castellano se le llama complemento. Programas que se agregan a un navegador web para realizar funciones determinadas. Es una ampliación de las funciones del navegador. Esta aplicación adicional (normalmente muy específica) es ejecutada por la aplicación principal e interactúan por medio de la API. Resultan muy prácticos ya que permiten expandir las posibilidades de un programa, de forma que no afecte a lo ya instalado. La forma más común en que un plugin se manifiesta, es cuando se intenta abrir un archivo que tiene una extensión que nuestro sistema no tiene instalada. Normalmente se pone a disposición del usuario un enlace para poder conseguir ese complemento. POSICIONAMIENTO WEB: Es el resultado de la recopilación de información en la base de datos de grandes motores de búsqueda de Internet, como Google o Yahoo, por el uso de algoritmos en el software. Gracias a la optimización para motores de búsqueda, se permite ajustar la información de las páginas web para que aparezcan en una posición y categoría alta (primeras posiciones) dentro de la página de los resultados de determinados términos en el buscador. El posicionamiento es un trabajo amplio que incluye al código de programación, al diseño y a los contenidos. RED SOCIAL: Se trata de un concepto muy amplio, pero, dentro del mundo de las nuevas tecnologías, una red social es una nueva forma de interacción y comunicación entre los miembros de la sociedad. Son diferentes portales web (generalistas o dedicados a un colectivo concreto) en los que un usuario se crea un perfil y puede compartir con sus "amigos" (otras personas que tienen su propio

77

perfil y que se van agregando en función de amistad o interés) todo tipo de información: personal, gustos y aficiones, fotografías, vídeos, publicaciones... por otra parte también se interactúa ofreciendo la posibilidad de agregar comentarios sobre las publicaciones que comparten los demás, así como enviar mensajes públicos o privados. Son sistemas horizontales (todos los usuarios se encuentran al mismo nivel) y totalmente abiertos al público. Una persona puede entrar en una Red Social por sí mismo o recibiendo la invitación de un amigo. En función de la tecnología aplicada sobre cada red social, los usuarios pueden tener acceso a unos servicios u otros. El problema de este tipo de aplicaciones es la vulneración, en ocasiones, de los derechos de imagen de las personas. Continuamente se publican imágenes o información privada sin consentimiento de la persona implicada, por lo que todavía se están definiendo los límites para poder crear una legislación aplicada exclusivamente a ellas. En España, Facebook y Tuenti son las redes sociales generalistas más populares, pero existen otras, generales o no, conocidas a nivel mundial como My Space, Badoo, Xing, Yahoo! grupos, Flickr, Fotolog, Linkedln, Twitter o Windows Live Spaces. RESOLUCION DE PANTALLA: Cantidad de pixeles que se pueden representar en la pantalla a lo ancho y a lo alto. Viene representada por pixeles horizontales X pixeles verticales. El píxel es la unidad mínima de información que se puede presentar en pantalla, de forma generalmente rectangular. La resolución de pantalla depende de la tarjeta gráfica. WEB 2.0: Se refiere a una páginas de Internet que utilizan una serie de aplicaciones que proporcionan servicios interactivos en red y permiten al usuario tener el control de sus datos. El término Web 2.0 se refiere a una segunda generación en el desarrollo de tecnología web que se basa en comunidades de usuarios, como son los blogs o las redes sociales (Facebook, Tuenti, etc.). WEB SITE: Es el conjunto de páginas web relacionadas en un mismo dominio. La unión de las páginas web genera un espacio interrelacionado, con un mismo significado contextual. Todos los sitios web públicamente accesibles constituyen una gigantesca "World Wide Web" de información. A las páginas de un sitio web se accede desde un URL raíz común llamado home o portada, que normalmente reside en el mismo servidor físico. Los URL organizan las páginas en una jerarquía, aunque los hiperenlaces entre ellas controlan cómo el lector percibe la estructura general y cómo el tráfico web fluye entre las diferentes partes de los sitios. WIKI: Es un sitio web cuyas páginas pueden ser editadas por múltiples personas a través del navegador web. Los usuarios pueden crear, modificar o borrar un texto que comparten y que tiene un título único. Éste se convierte en un “link” a la página web si la palabra se escribe dentro de un lugar wiki. La principal ventaja de estos sitios es que permite crear y mejorar las páginas de forma instantánea a través de una interfaz muy sencilla pero dando libertad al usuario.

78

WORLD WIDE WEB CONSORTIUM: Puede verse también abreviado como W3C. Es una asociación internacional que produce recomendaciones para la Red Global Mundial (la Web). Esta compañía está dirigida por Tim Berners-Lee, creador de URL, HTTP y HTML que son tecnologías fundamentales sobre las que se basa la Web. XHTML: Acrónimo en inglés de eXtensible Hypertext Markup Language. Es el lenguaje marcado nuevo pensado para sustituir al HTML como estándar para las páginas web. En su versión 1.0, el XHTML es la interpretación XML de HTML por lo que tiene básicamente las mismas funcionalidades pero cumple las especificaciones más estrictas de XML. Este nuevo lenguaje ha sido, al igual que el XML, desarrollado por el W3 Consortium con el objetivo de lograr una web semántica, donde la presentación y la información estén claramente separadas. XML: Es el lenguaje desarrollado por el W3 Consortium para permitir la descripción de información contenida en internet a través de lenguaje propio, de tal forma que el creador estructure la información conforme a sus necesidades. Surgió por la necesidad que tenía la empresa de almacenar grandes cantidades de información. Es extensible, después de diseñado y puesto en producción, es posible extender XML con la adición de nuevas etiquetas, de modo que se pueda continuar utilizando sin complicación alguna.

79

5. PROCESO DE DESARROLLO DEL SITIO 5.1 PLANIFICACIÓN DEL SITIO Esta etapa incluye los objetivos y las metas para el sitio web, se empezará a recoger la información para someterla a análisis, conocer los recursos que son requeridos. la caracterización de su público, la selección y conformación del equipo de trabajo. De la claridad con la que se logre determinar cada uno de estos aspectos depende en gran medida la posibilidad de desarrollar un sitio efectivo. Como ocurre con todo producto comunicacional, antes de pensar en las características del producto, es necesario establecer cuál es su finalidad. 5.1.2 Caracterización del público Se puede clasificar de varias formas los usuarios de un sitio Web. Una de las más extendidas es la relación con el nivel de conocimiento acerca de la Web, el uso de servicios como buscadores en línea, soporte, correo electrónico, y la frecuencia con que se conecta a internet. Este tipo de clasificación es importante para conocer el nivel de complejidad de un sitio Web, es decir, si el mismo está destinado a usuarios expertos, principiantes o intermedios. La clasificación de usuarios propuesta se basa en los clientes actuales de Sigma Móvil S.A y los que aún no son clientes pero son potenciales. A continuación se hace un analisis de los principales grupos. • Clientes actuales de Sigma Móvil S.A. Conocen el servicio, hacen uso de

uno o más servicios, reciben información frecuente de sus estados de cuenta y saben como ingresar a la plataforma para hacer uso de ella.

• Clientes potenciales. Con mayor grado de posibilidad que no conozcan los

servicios o la empresa, y que los servcios que se ofrecen por parte de Sigma Móvil S.A sean de gran utilidad para captar nuevos clientes.

Esta clasificación muestras dos grupos de usuarios con claras diferencias. Puesto que se plantea un sitio Web con idéntica imagen institucional para ambos, es

80

importante evitar la utilizacion de nombres, siglas o términos que puedan presentar dificultad en su compresión para el público en general. 5.2 ARQUITECTURA DE LA INFORMACIÓN Uno de los aspectos mas importantes el desarrollo de un sitio es la organización de los contenidos. Establecer una estructura informativa implica dividir el contenido en unidades lógicas, determinar jerarquías entre las diferentes unidades, realizar vínculos en las diferentes jerarquías, y trasladar las diferentes unidades jerárquicas y sus vínculos a una estructura de navegación funcional y estética. Estructura de la navegación Lynch y Horton apuntan que la estructura de navegación del sitio deberá privilegiar la facilidad del acceso a la información. Por ello se propone una organización de tipo jerárquica que facilita la división de contenidos, permite darle un orden lógico a la información, y es la estructura dentro de la cual los usuarios se sienten más cómodos. 10

La estructura de navegación siguiente (Ver figura 39 página 73) y a modo de ejemplo se presenta un sitio compuesto por una página de inicio, tres secciones que a su vez se dividen en 4 cuatro subsecciones, y páginas con contacto, nosotros, noticias, registro, y cuenta. Como se observa en el esquema, cada página tiene retorno a la página de inicio en forma directa. Desde cualquier sección se puede ir a otra, pero las subsecciones enlazan solo con las secciones y no con otras subsecciones. Las páginas que contienen contacto, nosotros, registro y cuenta permanecen siempre visibles en todo el sitio Web. Esta estructura facilita al usuario ubicarse en una sección y profundizar en su recorrido, con la posibilidad de retornar a la página principal o pasar a otra sección en cualquier momento. Por ejemplo, un recorrido a desarrollar por el usuario podría iniciarse visualizando la página de inicio en su navegador, luego pasa a la sección 1 para recorrer sus diferentes partes -A, B, C y D-, posteriormente dirigirse a la sección 3, y finalmente retornar a la página principal. _______________________________________________________________________________ 10 Lynch, Patrick J. Sara Horton. Principios de diseño básicos para la creación de sitios web, Barcelona, Ediciones Gustavo Gili, 2000, p. 25

81

Una de las principales ventajas de esta estructura es que no se precisa volver a la página de inicio cada vez que se decida cambiar de sección. Por otra parte, la división en secciones y subsecciones permite al usuario ubicarse dentro de diferentes niveles de jerarquía. Figura 39. Estructura de navegación

5.3 DISEÑO DEL SITIO En esta fase el sitio empieza a tener forma, se define la retícula de la página, los elementos que la definirán y las líneas maestras a nivel gráfico de la Web en su

82

conjunto. Mediante la selección del repertorio de elementos gráficos, su combinación y ubicación se ayuda a transmitir gráficamente una idea o concepto. En la presentación del diseño gráfico del modelo de sitio Web para el Sigma Móvil S.A se diferencias dos aspectos. En primer lugar, creemos que es necesario identificar las bases a partir de las cuales construir el diseño, y pensar hacia dónde orientarlo. En segundo término, presentar a partir de ello una propuesta concreta de diseño. (Ver figura 40) Figura 40. Mapa de navegación del sitio Web Sigma Móvil Bases para el diseño gráfico Definir las bases para el diseño gráfico del modelo de sitio Web para Sigma Móvil S.A requiere conocer el contexto dentro del cual se inserta el mismo. En este sentido, es importante señalar dos puntos: a) Sigma Móvil ya hace uso de logotipo; b) el sitio web a desarrolar debe contemplar la línea gráfica del logotipo de Sigma Móvil. Por ello creemos necesario que el nuevo diseño debe recoger algunos aspectos que están presentes en la marca o logotipo.

83

Propuesta de diseño La propuesta que se expone a continuación está basada en el desarrollo de una página Web para Sigma Móvil S.A. (Ver figura 41 página 75) Como ejemplo se ha tomado la seccion “Email Marketing” que contiene la información del servicio, precios, crear cuenta y acceso a la plataforma. Figura 41. Página modelo del sitio Web Sigma Móvil

Figura 42. Cabecera

84

La cabecera está formada por 14 elementos: a) Logotipo de la empresa b) Botón de inicio c) Email Marketing d) SMS Masivo e) Mobile Marketing f) Redes sociales g) Buscador de contenido h) Registro i) Ingresar j) Soporte k) Nosotros y Contáctenos. El logotipo es el elementos gráfico que identifica a la empresa, en la mayoria de las investigaciones que se hicieron a otros sitios semejantes se concluyó que la disposición del logotipo es en la parte superior izquierda. Los botones de navegación tienen estados diferentes para cada sección de la página, se tomaron como referencia la gama cromática del logotipo de sigma. En este caso en particular la sección seleccionada es color violeta la cual contrasta con los otros elementos que componen la cabecera. 5.4 CONSTRUCCIÓN Es la etapa donde se desarrollan las páginas de acuerdo con criterios definidos con anterioridad, y el último lugar donde pueden corregirse errores y o realizarse modificaciones si los resultados obtenidos no son los esperados. De acuerdo con la envergadura y características del proyecto, la construcción de un sitio puede requerir la intervención equipos de trabajo, especialistas,coordinadores, directores, o productores ejecutivos. La cantidad de personas varía de acuerdo con la complejidad del sitio abordado. Un sitio personal, la página de una agrupación, o un sitio informativo de un pequeño comercio son proyectos que pueden ser llevados adelante sin complicaciones por una sola persona. La construcción del sitio Web para Sigma Móvil S.A puede considerarse como un proyecto de mediana complejidad y de tipo empresarial. Las tareas a desarrollar son a) digitalización de la información; b) traslado de la información a la página siguiendo las normas de diseño ya definidas; c) realizar los enlaces y corroborar su correcto funcionamiento; y d) revisión y corrección final de los contenidos. El tiempo de ejecución de estas tareas depende del número de personas que se encarguen de llevarlas a cabo, y del tiempo que tengan asignado a esta tareas. En este caso el equipo de apoyo por parte de Sigma Móvil para la selección de material, es el departamento de mercadeo el cual se compone de 3 personas. La

85

parte de ingeniería se compone de 2 personas que son las que ayudan a aterrizar si las opciones de diseño o son viables a la hora de hacer el montaje. 5.5 MARKETING El marketing de un sitio Web consiste en organizar las estrategias de su difusión para darlo a conocer al público potencialmente interesado en él. Pueden distinguirse dos tipos de estrategias diferenciadas: a) “on-line”, donde se utiliza Internet como medio de difusión y se emplean las herramientas disponibles en la red; b) off-line, que apela a las estrategias tradicionales del marketing. 5.6 RASTREO EVALUACIÓN Y MANTENIMIENTO Un sitio web desactualizado, con noticias sin vigencia, enlaces que no funcionan produce en el usuario la sensación de abandono y poca seriedad por parte de la empresa. Esto quiere decir que un sitio que no esté siendo evaludado constantemente corre el riesgo de perder nuevos clientes. Evaluación del sitio Administrar y mantener actualizado un sitio no es solo renovar la información publicada en él. Supone corregir errores de organización y diseño, colocar información que no está en el sitio y es reclamada por los usuarios, y eliminar aquellos elementos que puedan provocar confusión. Nada de esto es posible sino existe una evaluación del sitio. De acuerdo con las características del sitio Web Sigma Móvil S.A se propone realizar dos tipos de evaluaciones: • Imagen corporativa. Es importante mantenener la continuidad visual de la

marca con la propuesta de diseño presentada para el sitio Web de Sigma Móvil S.A.

• De efectividad. Se busca medir el grado de entendimiento del usuario en la

navegación del sitio. Este tipo de evaluación puede realizarse haciendo encuestas de usabilidad del sitio con clientes actuales o potenciales.

Mantenimiento. La información, los aspectos funcionales y estéticos, y los vínculos de un sitio requieren de su mantenimiento continuo (Lynch y Horton,

86

2000). Llevar adelante esta tarea implica necesariamente asignar esta responsabilidad a una persona o un grupo de ellos. Si se considera la magnitud del sitio Web de Sigma Móvil S.A, es probable que una sola persona sea suficiente en esta función. Lynch y Horton remarcan la necesidad de mantener los estándares gráficos y editoriales que posee el sitio, con la cual la persona que realice el mantenimiento debe tener un conocimiento de ellos. En general, se recomienda asignar esta función a alguien que haya participado del proceso de desarrollo del sitio por la estrecha relación que tiene con él. 11 5.7 URL DE PRUEBA Sigma Móvil ya cuenta con un proveedor de hosting y su dominio ya se encuentra registrado, es por esta razon que el sitio de prueba se encuentra en el siguiente URL: http://www.elealdesigns.com/web_test2/index.html _______________________________________________________________________________ 11 Lynch, Patrick J. Sara Horton. Principios de diseño básicos para la creación de sitios web, Barcelona, Ediciones Gustavo Gili, 2000, p. 36

87

6. METODOLOGÍA

6.1. TIPO DE ESTUDIO Y DISEÑO GENERAL • Identificación del problema.

Por medio de una investigación cualitativa se hará el diagnóstico actual del sitio web de Sigma Móvil S.A, ya que al hacerlo nos dará y nos ampliará el panorama de las partes del sitio que necesitan ser diseñadas o rediseñadas.

• Recolección de datos.

Recolectar información y conceptos claves sobre la interfaz gráfica de usuario a través de fuentes bibliográficas y sitios Web para sustentar la propuesta.

• Análisis del contexto.

Se realizará un documento (“Brief”) que resume el análisis que hace el cliente de los requerimientos y lo incorpora en ideas aterrizadas para el nuevo sitio Web. El documento incluye objetivos del nuevo proyecto, definición de públicos, formas de interacción de éstos, secciones, elementos visuales, funcionalidades, etc

• Taxonomía de la información.

J. Lyons apunta “después de haber identificado y categorizado todos los elementos de la información, se disponen en una taxonomía o jerarquía” 12

• “Mockup”, Prototipo, bosquejo.

Posteriormente se elaborará el boceto análogo ( Mockup ) que servirá de guía para el proceso final de diseño.

• Digitalización y aplicaciones.

Después de que los bocetos han sido aprobados por el cliente, se inicia el proceso de corte y armado del HTML (maquetación).

_______________________________________________________________________________ 12 Charles J. Lyons. Guía esencial de diseño Web . Madrid, Editorial Pearson 2001, p. 46

88

• Evaluación.

En esta fase final del proyecto se someterá el sitio Web a una prueba de funcionalidad , en caso de que hayan errores de funcionamiento, se llevarán a cabo las respectivas correciones.

89

7. CRONOGRAMA DE ACTIVIDADES Figura 43. Cronograma de actividades

90

8. RECURSOS Talento humano: Andres Perdomo (Director TRABAJO DE GRADO), Javier Mojica (Co-Director de trabajo de grado), Edwin Leal Martinéz (Realizador del proyecto), Francia Lasso Ronderos (Jefe de mercadeo Sigma Móvil S.A), Héctor Lasso Ronderos (Jefe de ingeniería Sigma Móvil S.A). Recursos financieros: Hosting própio de prueba: $250.000 Diseño sitio Web: $2.500.000 Gastos de transporte: $150.000 Papelería: $100.000 1 Caja de Cd’s: $15.000 Total: $3.000.000 Millones de pesos

91

9. CONCLUSIONES

Con el diseno del sitio web de Sigma Móvil S.A se clarifico que la estetica visual juega un papel fundamental a la hora de posicionar un producto final, pero no podemos dejar a un lado temas como la arquitectura de información, usabilidad, accesibilidad, que son elementos claves para una optima comunicación. Durante el desarrollo del proyecto se identificó en primera instancia que el prototipo inicial no cumplió con las expectativas ya que la información ofrecida era netamente técnica, esto hizo que el proyecto tomara más tiempo del indicado inicialmente. Después que haber analizado las falencias del prototipo inicial se concluyo que la interfaz diseñada era estéticamente viable, pero en información el usuario final no tenia claro si el servicio le podía servir. En la segunda parte del proyecto se desarrollo una nueva interfaz gráfica que se concentro mas en la parte publicaría haciendo uso de mensajes cortos e imágenes que hacían alusión al mercado objetivo. Los resultados del test de usabilidad fueron positivos y esto llevó a que el servicio que ofrece Sigma Móvil S.A fuera entendido desde el usuario mas experto hasta el de menor grado de conocimiento. De esta forma se puede concluir que la interfaz gráfica de usuario sirve como medio para la comunicación con un sistema. El diseñador cumple una función primordial como materializador y constructor de mensajes. Todo proyecto de diseño implica un proceso pensado y conciente que puede tener variaciones; todo depende de diversos factores entre ellos del cambio y evolución que tenga el medio electrónico-digital para lograr que ésta sea eficaz, de fácil uso y memorización y que incluso provoque emociones en el usuario, en beneficio directo del mismo.

92

10. RECOMENDACIONES

Durante el proceso de diseño del sitio Web para Sigma Móvil S.A. se establecieron una serie de tareas para mejorar el mercadeo y la publicidad las cuales son: • Uso de Google Adwords • Uso de redes sociales cómo Twitter, Facebook, Youtube y Linkedin. • Publicidad en medios impresos cómo volantes, pendones, avisos en revistas

de uso masivo y tarjetas de presentación.

93

BIBLIOGRAFÍA

BONSIEPE, Gui. Del objeto a la interfase. Mutaciones del diseño. Buenos Aires: Infinito, 1998. 123 p. Comisión de Regulación de Comunicaciones República de Colombia [en línea]. Bogotá: Comisión de regulación 2011. [consultado 04 de Octubre, 2010]. Disponible en Internet http://www.crt.gov.co/ CHARLES. Lyons. Guía esencial de diseño Web . Madrid: Pearson 2001, 23 p. GARRET, James. The Elements of User Experience, User-Centered Disign for the web. New York: AIGA. 2003. 67 p. LYNCH, Patrick; HORTON, Sarah. Principios de Diseño Básicos para la Creación de Sitios Web. Barcelona: Gustavo Gili. 2000. 154 p. NIELSEN, Jacob . Usabilidad. Diseño de sitios Web. Madrid: Pearson Educación. 2000. 56p. No solo usabilidad, Revista multidisciplinary sobre diseño, personas y tecnología [en línea]. [consultado 04 de Octubre, 2010]. http://www.nosolousabilidad.com/articulos/historia_arquitectura_informacion.htm ROSENFELD, L. Morville, P. Information Architecture for the World Wide Web. Canada: O’Reilly, 1998. 89 p. User Interface Design Tips, Techniques, and Principles. [en línea]. New York: User Interface Design. [consultado 24 de Octubre, 2010]. Disponible en Internet http://www.agilemodeling.com/essays/agileUsability.htm VENN, Jeffrey. Arte y ciencia del diseño web. Barcelona: Prentice Hall, 2001. 93 p.

94

ANEXOS

Anexo A. Brief

Razón social: Sigma Móvil S.A NIT: 900.235.458-3 Teléfono – Fax: (2) 661 83 30 – 661 57 08 Dirección: Av 4 Nte # 6N – 67 Of 806 – 205 Cali 1. Cuéntenos brevemente ¿qué es? y ¿a qué se dedica su compañía? SigmaMóvil es una compañía Fundada en el año 2008 por documento privado, inscrita en la Cámara de Comercio de Cali. Queremos ser consultores, implementadores e integradores de soluciones de mercadeo y publicidad que utilicen formas avanzadas de la tecnología digital y agreguen valor a nuestros clientes. Dentro de éstos se destacan comunicación a través de mensajes de texto SMS, Marketing Móvil distribución de contenidos de información y entretenimiento para dispositivos móviles así como también aplicaciones para móviles, E-mail marketing, Bluetooth Marketing. 2. ¿A qué segmento de la población está dirigido su negocio? Nuestro mercado meta se encuentra en el departamento de mercadeo y relaciones públicas de todas las empresas prestadoras de servicios y productos, que deseen comunicarse con sus clientes, empleados, proveedores o socios de negocios, de manera rápida, efectiva y económica. Entre nuestra experiencia se puede destacar acuerdos con empresas del sector financiero, comerciales, de servicios e industriales, así como campañas políticas. 3. ¿Cuáles son sus principales competidores?

95

CYCLELOGIC GERENTE DE NEGOCIOS ÉLIBOM EXINTAYA CONSTACT CONTACT 4. ¿Cuáles son los objetivos del proyecto? Captar clientes pequeños de forma masiva directamente desde nuestra página web. Presentando tarifas, medios de pago y formularios de suscripción, para llevar al cliente a ingresar a nuestras plataformas, o a que nos de su información para contactarlo. Tener una presentación de nuestra empresa, productos y servicios, clara, sencilla, directa y efectiva. Que nuestro sitio web transmita nuestra capacidad como empresa de tecnología de utilizar los medios digitales de comunicación. Que podamos publicar en el sitio guías de uso de nuestras plataformas y que permita a nuestros clientes darnos retroalimentación por estos medios. Para los SMS masivos, que los usuarios finales puedan aprobar la recepción de mensajes en sus celulares originados por nuestros clientes, y que también puedan reportar los casos de abuso. Que los usuarios finales de eMail marketing puedan reportar casos de SPAM o abuso por parte de nuestros clientes. 5. Haga una breve descripción del proyecto, cómo lo ha visualizado o cómo lo tiene en mente: Un sitio web interactivo, con conexión directa a nuestros servicios y que permita a nuestros clientes, en unos pocos clicks estar utilizando nuestras plataformas. Y que para los clientes existentes sea una fuente de información importante.

96

6. ¿Tiene alguna idea del estilo gráfico y/o diseño que prefiere para el proyecto? Dinámico, preciso y conciso http://portal.colombitrade.com/web/guest/home es una idea simplificada de lo que queremos http://www.getresponse.com/ la parte superior (header) nos parece sencillo y bien enfocado. Queremos algo similar en esa zona. La sección de tarifas debe ser sencilla, parecida a la de BigCommerce o similares. Debe ser un punto más de arranque para la venta de los servicios. 7. ¿Quiénes serán los usuarios de la aplicación? ¿de qué manera quiere que interactúen con ésta? Hay 3 tipos de usuarios del sitio web: • Clientes existentes de nuestros servicios que podrán tener acceso a

información de nuestras plataformas.

• Prospectos de cliente o empresas interesadas, que son usuarios que han llegado a nuestra página buscando información sobre los servicios que prestamos. A estos visitantes queremos convertirlos en nuestros clientes, dándoles la opción de inscribirse directamente y obtener acceso a nuestra plataforma. Para los usuarios interesados en Email Marketing, les podemos dar un tour, ya sea en video o en imágenes, de nuestro sistema y les pedimos que registren su información para contactarlos y poderles ofrecer una solución a su medida. Queremos captar cuantos clientes sea posible.

• Personas que han recibido correos o mensajes de texto de nuestros clientes, y que quieren reportarlos porque violan las condiciones de uso de nuestros servicios. Queremos que esas personas se vayan del sitio web con la idea de que nuestro servicio es serio y responsable y que nos tomamos estos mensajes muy en serio. Queremos comunicar con claridad que tenemos una política fuerte sobre el abuso de nuestros servicios.

8. Háblenos un poco de las secciones que conformarán el sitio cuántas serán, de qué se trata cada una, y cómo cree que deban funcionar para el visitante.

97

La página de inicio debe ser sencilla sin demasiado texto y que resalte nuestros productos o líneas de productos. Con una línea gráfica moderna, estilo páginas web 2.0, con encabezados animados sin demasiadas transiciones, y que contengan elementos gráficos de llamada a la acción (ejemplo: getresponse.com). No queremos flash o animaciones pesadas, y preferimos fondos abstractos con imágenes grandes relacionadas con nuestros productos. Que el cliente tenga a un click la información que necesita, como tarifas, suscripción a nuestros servicios, etc. La zona de tarifas debe ser sencilla, con explicaciones en línea o a través de layers superpuestos cuando el cliente desea obtener explicaciones de condiciones o detalles de los servicios incluidos en la tarifa. En la página de tarifas debe haber botones o elementos de llamado a la acción para que los clientes puedan registrarse y tengan acceso a las plataformas si es posible. En el caso de Email marketing, podemos dar un tour rápido terminando en una página de registro para que el cliente sea contactado posteriormente. 9. ¿Tiene Ud. algún tipo de requerimiento especial, recomendación o inquietud relacionada con la solución, algo que no hayamos mencionado? Queremos que se puedan recibir pagos en línea. Actualmente tenemos una cuenta con PagosOnline y tenemos un desarrollo para los pagos en línea que está conectado a nuestra plataforma de SMS Masivo, la idea sería conectar el proceso de compra con el sistema de pagos. Es decir, que la página web inicie el proceso, y los pagos se hagan dentro del sitio web de SMS masivo, Email Marketing y Mobile Marketing. Anexo B. Encuesta test de usabilidad Nombre: Edad: Profesión: Cargo actual: Empresa o institución: ITEM I (Clave: Si / Medianamente / No)

98

Identidad S M N ¿Por la información que se ofrece en pantalla, es posible saber a qué institución o empresa corresponde el sitio? ¿Relaciona usted los colores predominantes en el sitio web con la institución o empresa? ¿Le parece el sitio serio y confiable? ¿Distingue alguna imagen que represente a la institución? ¿Se ofrece información y es fácil de encontrar números o direcciones?

ITEM 2 (Clave: Si / Medianamente / No) Contenido S M N ¿Le parece adecuada la selección de contenidos destacados en la portada ? ¿Al ver la portada del sitio, pudo distinguir de una sola mirada cuál era el contenido más relevante que se ofrecía? ¿Los textos usados en los contenidos de los enlaces son suficientemente descriptivos de lo que se ofrece en las páginas hacia las cuales se accede a través de ellos?

¿La informacion se le ofreció de manera simple? ¿Le fue facil encontrar la informacion requerida? ITEM 3 (Clave: Si / Medianamente / No) Navegación S M N ¿Se distingue facilmente la forma en que navega por el sitio? ¿Existen elementos de navegacion dentro de las páginas, que le permitan saber exactamente dónde se encuentra dentro de este sitio y cómo volver atrás sin usar los botones del navegador?

¿Les es facil volver a la pagina inicio desde otro punto del sitio? ¿Recuerda haber visto o encontrado el mapa del sitio? ¿Logra distinguir los botones y enlaces? ¿La información que se le ofrece en pantalla le parece adecuada para entender dónde está ubicado en cualquier momento?

¿Se ha sentido perdido dentro del sitio? ¿Los elementos del sitio le ayudan a orientarse? ITEM 4

99

(Clave: Si / Medianamente / No) Gráfica Web S M N ¿Le pareció adecuada la forma en que se muestran las imágenes en el sitio web? ¿Las imágenes grandes se demoraron más de lo esperado? ¿Se fijó si el sitio tenía gráficas con animaciones? ¿Le llamaron la atención las animaciones? ¿Recuerda si el sitio tenía banners (avisos) publicitarios? ¿Considera que gráficamente el sitio está equilibrado? ¿Considera que gráficamente el sitio está muy simple? ¿Considera que gráficamente el sitio está recargado? ITEM 5 (Clave: Si / Medianamente / No) Búsqueda S M N ¿Utiliza normalmente un buscador al acceder a un sitio web? ¿Distinguió si en este sitio se ofrecía un buscador? ¿Le fue facil encontrarlo? ITEM 6 (Clave: Si / Medianamente / No) Utilidad S M N ¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio? ¿Cree que los contenidos y servicios que se ofrecen en este sitio son de utilidad para su caso personal? Comentarios adicionales ____________________________________________________________________________________________________________________________________

100

Anexo C. Resultados encuestas Cuadro 1. Resultados

¿La información que se ofrece en pantalla, es posible saber a qué institución o empresa corresponde el sitio?

Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

101

Cuadro 2. Resultados

¿Relaciona los colores predominantes en el sitio web con la institución o empresa?


TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

9

10

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

102


¿Le parece el sitio serio y confiable? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

103


¿Distingue alguna imagen que represente (logotipo) a la institución? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

104


¿Se ofrece información y es fácil de encontrar números o direcciones? Respuesta Código Frecuencia Porcentaje SI 1 11 91.67% NO 2 1 8.33% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

105


¿Le parece adecuada la selección de contenidos destacados en la portada ?


TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

106


¿Al ver la portada del sitio, pudo distinguir de una sola mirada cuál era el contenido más relevante que se ofrecía?


TOTAL 12 100.00%

0

2

4

6

8

10

12

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

107


¿Los textos usados en los contenidos de los enlaces son suficientemente descriptivos de lo que se ofrece en las páginas hacia

las cuales se accede a través de ellos? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

108


¿La informacion se le ofreció de manera simple? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

109


¿Le fue facil encontrar la informacion requerida? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

110


¿Se distingue facilmente la forma en que navega por el sitio? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

111


¿Existen elementos de navegacion dentro de las páginas, que le permitan saber exactamente dónde se encuentra dentro de este sitio y

cómo volver atrás sin usar los botones del navegador? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

112


¿Les es facil volver a la pagina inicio desde otro punto del sitio? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

113


¿Recuerda haber visto o encontrado el mapa del sitio? Respuesta Código Frecuencia Porcentaje SI 1 3 25.00% NO 2 7 58.33% MEDIANAMENTE 3 2 16.67%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

114


¿Logra distinguir los botones y enlaces? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

115


¿La información que se le ofrece en pantalla le parece adecuada para entender dónde está ubicado en cualquier momento?


TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

116


¿Se ha sentido perdido dentro del sitio? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

117


¿Los elementos del sitio le ayudan a orientarse? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

118


¿Le pareció adecuada la forma en que se muestran las imágenes en el sitio web?


TOTAL 12 100.00%

0

2

4

6

8

10

12

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

119


¿Las imágenes grandes se demoraron más de lo esperado? Respuesta Código Frecuencia Porcentaje SI 1 0 0.00% NO 2 11 91.67% MEDIANAMENTE 3 1 8.33%

TOTAL 12 100.00%

0

2

4

6

8

10

12

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

120


¿Se fijó si el sitio tenía gráficas con animaciones? Respuesta Código Frecuencia Porcentaje SI 1 3 25.00% NO 2 7 58.33% MEDIANAMENTE 3 2 16.67%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

121


¿Le llamaron la atención las animaciones? Respuesta Código Frecuencia Porcentaje SI 1 3 25.00% NO 2 6 50.00% MEDIANAMENTE 3 3 25.00%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

9

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

122


¿Recuerda si el sitio tenía banners (avisos) publicitarios? Respuesta Código Frecuencia Porcentaje SI 1 3 25.00% NO 2 6 50.00% MEDIANAMENTE 3 3 25.00%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

123


¿Considera que gráficamente el sitio está equilibrado? Respuesta Código Frecuencia Porcentaje SI 1 8 66.67% NO 2 0 0.00% MEDIANAMENTE 3 4 33.33%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

9

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

124


¿Considera que gráficamente el sitio está muy simple? Respuesta Código Frecuencia Porcentaje SI 1 1 8.33% NO 2 8 66.67% MEDIANAMENTE 3 3 25.00%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

9

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

125


¿Considera que gráficamente el sitio está recargado? Respuesta Código Frecuencia Porcentaje SI 1 0 0.00% NO 2 11 91.67% MEDIANAMENTE 3 1 8.33%

TOTAL 12 100.00%

0

2

4

6

8

10

12

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

126


¿Utiliza normalmente un buscador al acceder a un sitio web? Respuesta Código Frecuencia Porcentaje SI 1 5 41.67% NO 2 5 41.67% MEDIANAMENTE 3 2 16.67%

TOTAL 12 100.00%

0

1

2

3

4

5

6

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

127


¿Distinguió si en este sitio se ofrecía un buscador? Respuesta Código Frecuencia Porcentaje SI 1 12 100.00% NO 2 0 0.00% MEDIANAMENTE 3 0 0.00%

TOTAL 12 100.00%

0

2

4

6

8

10

12

14

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

128


¿Le fue facil encontrarlo? Respuesta Código Frecuencia Porcentaje SI 1 11 91.67% NO 2 0 0.00% MEDIANAMENTE 3 1 8.33%

TOTAL 12 100.00%

0

2

4

6

8

10

12

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

129


¿Tras una primera mirada, le queda claro cuál es el objetivo del sitio? Respuesta Código Frecuencia Porcentaje SI 1 9 75.00% NO 2 0 0.00% MEDIANAMENTE 3 3 25.00%

TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

9

10

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

130


¿Cree que los contenidos y servicios que se ofrecen en este sitio son de utilidad para su caso personal?


TOTAL 12 100.00%

0

1

2

3

4

5

6

7

8

9

SI NO MEDIANAMENTE

Frecuencia

SI

NO

MEDIANAMENTE

DISEÑO DE INTERFAZ GRÁFICA PARA EL SITIO WEB SIGMA...

Documents

Transcript of DISEÑO DE INTERFAZ GRÁFICA PARA EL SITIO WEB SIGMA...