diseÑo de interfaz grÁfica para el sitio web sigma … · 2019. 11. 25. · necesaria de...

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

Estrategia de negocio

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

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/

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 j

diseÑo de interfaz grÁfica para el sitio web sigma … · 2019. 11. 25. · necesaria de...

Documents