estudio intranets 2008 carmenelizabeth.com

ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL

DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS

2008 © Carmen Elizabeth Vásquez Dextre

Consultoría CIAT - BID

2

ESTE ES SÓLO UN EXTRACTO DEL ESTUDIO ORIGINAL, EL ESTUDIO ORIGINAL

CONTIENE 231 PÁGINAS.

AGRADECIMIENTOS

La recopilación de datos para la realización de este Estudio ha requerido de la colaboración de

corresponsales del CIAT. Agradecimiento especial, por la ayuda brindada para tratar de

establecer contacto con funcionarios de otros países y de esta forma enriquecer el estudio.

Gracias a todas las organizaciones que colaboraron respondiendo el Cuestionario y

exponiendo sus casos en este Estudio.

Gracias, a la persona que me dio la vida, mi querida madre, quien siempre ha soñado con un

futuro ideal para mí.

Las gracias, también para alguien necesario en mi vida, como es, mi esposo Dante Antiporta

Pomacaja, en él, siempre encuentro un consejo y una palabra de aliento, gracias por

apoyarme.





3

INDICE

1. INTRODUCCION.................................................................................................................. 5

1.1. Beneficios Tangibles..................................................................................................... 6 1.2. Beneficios Intangibles ................................................................................................... 7 1.3. Diseño Visual Web ....................................................................................................... 7

2. ANTECEDENTES Y METODOLOGÍAS ............................................................................... 9 2.1. Antecedentes ................................................................................................................ 9 2.2. Ámbito del Estudio ...................................................................................................... 11 2.3. Metodología ................................................................................................................ 11 2.4. Objetivos del Estudio .................................................................................................. 12

3. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL ............................................................................................. 13

3.1. Participantes ............................................................................................................... 13 3.2. Sobre el Enfoque Aplicado ......................................................................................... 14 3.3. Diseño Centrado al Cliente y/o Usuario ...................................................................... 17 3.4. Sugerencias y Recomendaciones .............................................................................. 18

4. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL .......................... 19 4.1. Defense Finance and Accounting Services – Estados Unidos ................................... 20 4.2. Department for Transport – Reino Unido .................................................................... 21 4.3. Department for Victorian Communities – Australia ..................................................... 22 4.4. Department of Veterans Affairs Mid-Atlantic Health Care Network – Estados Unidos 23 4.5. Federal Reserve Bank of Richmond – Estados Unidos .............................................. 24 4.6. London Undergroup – Reino Unido ............................................................................ 25 4.7. National Research Council of Canada – Industrial Research Assistance Program .... 26 4.8. Senate Republican Conference – Estados Unidos ..................................................... 27 4.9. Workplace Safety and Insurance Board of Ontario – Canada .................................... 28 4.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas del Reporte sobre las 10 mejores Intranets de Gobierno a nivel mundial. ........................................................... 29

5. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007 ................................... 30 5.1. American Electric Power – Estados Unidos ................................................................ 30 5.2. Comcast – Estados Unidos ........................................................................................ 31 5.3. DaimlerChvsler AG – Alemania .................................................................................. 32 5.4. The Dow Chemical Company – Estados Unidos ........................................................ 33 5.5. Infosys Technologies Limited – India .......................................................................... 34 5.6. JPMorgan Chase & Co. – Estados Unidos ................................................................. 35 5.7. Microsoft Corporation – Estados Unidos .................................................................... 36 5.8. National Geographic Society – Estados Unidos ......................................................... 37 5.9. The Royal Society for the Protection of Birds – Reino Unido...................................... 38 5.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas de del Reporte sobre las 10 mejores intranets a nivel mundial del 2007 ........................................................ 39

6. BUENAS PRÁCTICAS EN LA CREACIÓN DE INTRANETS ............................................. 40 6.1. Antes de iniciar la creación de la Intranet ................................................................... 40 6.2. Durante la creación de la Intranet ............................................................................... 41 6.3. Después de creada la intranet .................................................................................... 56

7. ERRORES COMUNES EN LAS INTRANETS ................................................................... 57 7.1. Antes de iniciar la creación de la Intranet ................................................................... 57 7.2. Durante la creación de la Intranet ............................................................................... 57

8. LAS INTRANETS DEL FUTURO........................................................................................ 79 8.1. Elementos de la Intranet del Futuro – Modelo 1 ......................................................... 79 8.2. Elementos de la Intranet del Futuro – Modelo 2 ......................................................... 80 8.3. Elementos de la Intranet del Futuro. Modelo 3 ........................................................... 81

9. CONCLUSIONES ............................................................................................................... 82 9.1. Conclusiones del Estudio de Diseño Visual. ............................................................... 82 9.2. Conclusiones extraídas de las Buenas Prácticas de las Intranets .............................. 82





4

9.3. Conclusiones Específicas extraídas de los Doce Casos de Administraciones Tributarias y Aduaneras. ......................................................................................................... 84 9.4. Conclusiones sobre el futuro de las Intranets ............................................................. 85 9.5. Conclusiones sobre el Diseño Visual de la Intranet de SUNAT .................................. 85 9.6. Conclusiones Finales.................................................................................................. 86

10. ANEXOS......................................................................................................................... 87 10.1. CUADRO COMPARATIVO N° 1 DE LA APLICACIÓN DE BUENAS PRÁCTICAS .... 87 10.2. VENTAJAS DEL USO DEL FORMATO SVG Y SUS POSIBILIDADES ..................... 91 10.3. EVOLUCIÓN DE LA WEB .......................................................................................... 92 10.4. Estudio del Diseño Visual ........................................................................................... 93 10.5. Buenas Prácticas en Intranets .................................................................................... 96 10.6. Errores comunes en el Diseño Visual de Intranets ................................................... 100 10.7. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL ........................................................................................ 101 10.8. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL ................ 106 10.9. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007 ......................... 107

11. BIBLIOGRAFÍA ............................................................................................................. 108 12. SOBRE LA AUTORA .................................................................................................... 114





5

1. INTRODUCCION

Los cambios generados a nivel mundial a causa de la globalización han provocado la

necesidad de una mayor integración entre los distintos factores económicos de los países con

el fin de hacer frente a los distintos retos que implica esta nueva realidad.

El desarrollo tecnológico, las sociedades del conocimiento, la nueva competitividad entre las

economías, entre otros factores, obligan a las organizaciones públicas y privadas a entrar en

esta nueva dinámica económica, política y social.

El día de hoy, los ciudadanos exigen a sus gobiernos más y mejores servicios, esta condición

obliga a un mayor compromiso y dedicación en el quehacer público; para poder cumplirlo es

necesario innovar y dar mayor calidad a los productos y servicios que se ofrecen al ciudadano -

cliente mediante el uso de herramientas y métodos que hagan eficiente y eficaz, la actividad de

las organizaciones para el logro de objetivos y satisfacción plena de los ciudadanos.

La Administración Pública es la acción del poder público al aplicar las leyes y cuidar de los

intereses públicos; resulta, por lo tanto, un conjunto de órganos de que se sirve para tal

finalidad.

Tal como reza la teoría, la Administración Pública va a necesitar de todo instrumento que le

pueda facilitar la relación con el ciudadano o aún con sus propias competencias de

interrelación con otras administraciones. La administración, como inmensa y compleja Intranet

que supone, requiere de software que la impulsen y aligeren las tareas.

A raíz de la modernización de la Administración Pública, se quiere obtener estos beneficios

utilizando las Tecnologías de Información disponibles a nivel mundial1:

Para los organismos públicos Para las empresas Para los ciudadanos

Plazos de reacción más

rápidos

Agilización de los trámites con

la administración

Más y mejores servicios

públicos

Reducción de Costes Mejoras en su competitividad Agilización y facilitamiento de

la burocracia

Servicios más accesibles Mejoras en la relación sector

privado/público

Participación activa en las

decisiones que le afectan

Capacidad de cobertura a una

amplia gama de necesidades

Utilización de la Administración

como motor de incorporación

de las nuevas tecnologías de la

Empresa

Servicios públicos accesibles

24 x 7

Fuente: Redes & Telecomunicaciones. Nº 180, Mayo 2004, pág. 4. España

Se requieren de innovaciones que transformen la Administración Pública para hacerla más

eficaz, eficiente y cercana a los ciudadanos. En este proceso el empleado público será su

principal protagonista, para lo que necesita un entorno favorable para que dicha transformación

permita alcanzar los objetivos marcados.

1 II Congreso Online del Observatorio para la CiberSociedad. Ponencia: Administración Pública del Futuro

y Bienestar Social. 2004.





6

Es necesario recoger las necesidades y expectativas de los empleados, ofrecerles el ambiente

y las herramientas necesarias para aprovechar la sabiduría individual y potenciar así el

conocimiento colectivo de la organización.

La comunicación interna permite darle una identidad a la organización y extender el

conocimiento de la cultura corporativa, acercando unidades tradicionalmente estancas de la

organización y promoviendo el conocimiento y la valoración recíprocos.

En la filosofía del nuevo modelo de uso de Internet, el conocimiento debe estar accesible sin

restricciones. De forma paralela, en el seno de una organización, el conocimiento corporativo

generado en ella debe estar igualmente disponible en cualquier momento, por cualquier

empleado y desde cualquier parte.

Es un reto para los gestores de los espacios colaborativos hacer que el conocimiento tácito

presente en foros de discusión, artículos de blogs, wikis o comentarios sea identificado,

categorizado, mantenido y puesto a disposición (al menos) de la comunidad que lo generó2.

De acuerdo a un estudio realizado por el Delphi Group®, el 98% de las instalaciones de

intranets dan un Retorno Sobre la Inversión (RSI) favorable, siendo un indicador muy

importante en comparación con otras aplicaciones, como por ejemplo CRM en donde éste valor

alcanza solamente un 60%. Del mismo estudio se desprende que el 22% de las firmas

encuestadas reportaron un RSI de entre el 22% y el 50%, mientras que un 18% reportaron un

RSI superior al 100%.

Otro estudio realizado el año pasado por la International Data Corporation (IDC) acerca del

Retorno Sobre la Inversión (RSI) en proyectos de intranets corporativas revela el por qué las

implementaciones comunes respaldadas por una decisión estratégica de la compañía están

alcanzando un RSI mayor al 1000 por ciento. En el mismo estudio, se expone que un empleado

promedio consume entre el 25% y 30% de su tiempo buscando información. Estos

últimos valores son consistentes con otros estudios que afirman que el 80% de la información

requerida por un empleado no está en lo sistemas de información, típicamente por tratarse de

información no estructurada o documental.

Una intranet pone juntos todos los recursos necesarios bajo un único Portal Corporativo,

brindando estandarización y facilidad de uso, permitiendo a los usuarios interactuar con

contenidos, aplicaciones, procesos de negocio y otras personas dentro de la Organización. La

intranet es conducida por un sistema avanzado de herramientas que brinda a usuarios no

técnicos la capacidad de capturar inmediatamente la información y entregarla al público

objetivo en forma oportuna3.

1.1. Beneficios Tangibles

Los beneficios tangibles, aquellos que los directivos pueden tomar en sus manos, se resumen

abajo. Un buen ejemplo de un beneficio tangible es la reducción de costo del papel debido al

traslado de los procesos en línea. Algunas estadísticas citan que un 18% del material

corporativo impreso se vuelve obsoleto después de 30 días. Imagínese dicho material

acumulado después de 60 o 90 días. Ahora imagínese ese material en línea, siempre

disponible y actualizado.

2 Junta de Andalucía – Consejería de Salud. Entorno Colaborativo de Trabajo: La Intranet 2.0. 2007.

3 Beneficios de usar una Intranet. InnovaAge.





7

Implementación económica.

Fácil de usar: sólo apuntar y hacer clic.

Basada en estándares abiertos.

Ahorro de tiempo y dinero.

Mejor información, más rápido.

Escalable y flexible.

Conexión entre distintas plataformas.

Pone la información a ser controlada por los usuarios.

1.2. Beneficios Intangibles

Pero no solamente es el ahorro del papel lo que beneficia a la empresa. Lo que se logra con la

información en este nuevo ambiente web tiene un gran impacto. Las Intranets permiten a una

Organización gastar menos tiempo en cosas que no agregan valor, como la búsqueda de

información para resolver un problema. La productividad se incrementa a medida que el

conocimiento corporativo es más accesible y la información más precisa. La flexibilidad en el

tiempo de entrega del conocimiento se gana a medida que la información siempre esté a un clic

de distancia. Las Intranets abren un espacio en donde las fronteras son más pequeñas y el

intercambio de información es estimulado. Esto lleva a unos empleados mejor informados y con

la habilidad de tomar mejores y más rápidas decisiones. Al final, se termina logrando una

mayor productividad y más tiempo para incrementar las ganancias.

Mejoramiento de la toma de decisiones

Construcción de una cultura de colaboración

Procesos de aprendizaje más fáciles

Eliminación de la burocracia

Mejoramiento de la calidad de vida en el trabajo 4

Incrementa la creatividad y la innovación.

Aumenta la eficiencia y productividad de la organización.

Incrementa la reutilización del conocimiento y reduce la fuga del "capital del conocimiento".

Mejora los tiempos de respuesta al mercado.

Posibilita la comunicación con un número extenso de individuos y organizaciones a bajo costo.

Mejora la integración en la cadena de valor mediante la extensión de las aplicaciones de la empresa al Portal Corporativo5.

1.3. Diseño Visual Web

La interfaz gráfica de usuario, desde los básicos tutoriales, presentaciones, animaciones, intros,

aplicaciones, la omnipresente web, hasta el software están consensuados por criterios diversos

de acuerdo a sus objetivos, a los contenidos, su audiencia, y de acuerdo también a la

aplicación de ciertas leyes o normas funcionales.

Para profundizar, por si mismos los diseños electrónicos o las interfaces gráficas de usuarios

no son solamente sinónimos de sitios web, animaciones interactivas, o software, sino además

siguen una determinada estructura y secuenciación de su producción, (análisis de

requerimientos, objetivos, recopilación de la información, diseño del sistema, implementación,

4 FAQ sobre Intranets. Intranet Total.

5 Beneficios de usar una Intranet. InnovaAge.





8

prototipos, etc.); en su navegabilidad e interacción (control del flujo de información y

restricciones, guías, mapas conceptuales y semánticos, etc.); en su diseño de contenidos

(conceptos a entregar, textos, media, diagramación, etc.)

Además de ello se encuentran sujetos a estándares internacionales globales (W3C, ISO 13407,

IEC 9241, IEC 9126, entre otros); y educacionales en el caso de las interfaces relacionadas con

la educación y e-learning (SCORM, AICC), entre muchos otros parámetros, todos los cuales

giran de manera unívoca alrededor de los niveles de encontrabilidad6, recuperación, y

asimilación de la información que el usuario final busca, facilitado por la aplicación de procesos

muy precisos de interactividad, navegación, retroalimentación y la forma en que estos

contenidos, por objetivo, deberían o podrían eventualmente ser asumidos o asimilados por la

audiencia. En ello se basa tanto la eficacia o pertinencia del contenido a entregar y evaluar,

como la eficacia del proceso de diseño en general7.

Cuando la Web era sólo contenido textual y gifs animados, en 1996 apareció Flash

Macromedia para darle al usuario una experiencia más generosa a nivel gráfico. Sus botones,

clips de película, máscaras y programación en Action Script promovían zonas activas de

interacción. Pero la interacción de Flash sabe a poco con la intercreatividad y experiencia de

usuario que ofrecen las aplicaciones Web 2.0. Si se piensa en contenidos dinámicos, sucede lo

mismo. Las clásicas herramientas para producir webs, como Dreamweaver y Flash, ofrecen la

posibilidad de crear un diseño complejo de contenidos dinámicos mediante HTML, estilos CSS

y programación, pero también se quedan atrás de las aplicaciones diseñadas en Ajax, Ruby on

Rails o BitTorrent10 para los productos Web 2.0. Interfaz con la capacidad de acceso en todo

lugar y momento a los servicios web, con la usabilidad, familiaridad y sencillez de las interfaces

de los sistemas operativos8.

6 Encontrabilidad, es un término utilizado en la Usabilidad, el cual se refiere a la capacidad de los

contenidos digitales a ser encontrados, especialmente a través de los buscadores. 7 Arquitectura de Información: Introducción al Proceso de Desarrollo en el Diseño de Interfaces de Usuario

(Draft). Universidad de Concepción de Chile. 2004. 8 Planeta Web 2.0. Grupo de Investigación en Interacciones digitales (GRID) de la Universidad de Vic y a

la Facultad Latinoamericana de Ciencias Sociales – FLACSO México. 2007.





9

2. ANTECEDENTES Y METODOLOGÍAS

2.1. Antecedentes

La primera experiencia de Intranet de que se tenga noticia surge en 1992 cuando ingenieros de

Sun MicroSystems ven en el uso del Web una alternativa válida de apoyo a la gestión de sus

procesos administrativos. Posteriormente, Netscape incursiona para indagar qué tan útil puede

ser el uso de su producto Navigator como una interfaz común para el acceso de distinto tipo de

información de una empresa, con lo que comienza a promocionar esta nueva orientación del

Web.

Inicialmente existía la idea de los beneficios de una intranet, pero no así las herramientas para

desarrollar productos que permitieran poner en marcha este nuevo esquema de hacer las

cosas al interior de las empresas. Diversas empresas de software dieron un paso importante

encaminado al desarrollo de sistemas para Trabajo en Grupo; Lotus, con su producto Notes, en

1995, coloca de moda el concepto de Groupware y también percibe en el Web un entorno más

imparcial y estándar sobre el cual desarrollar sus productos. Por otra parte, Microsoft reconoce

su error estratégico al no priorizar dentro de sus planes de desarrollo la importancia de Internet

y las potencialidades que ella ofrece, por lo que cambia su estrategia y complementa sus

productos para trabajar de manera "natural" en esta red. Finalmente Novell, adapta su

producto Netware para trabajar más eficientemente en esta línea. Esta situación, que involucró

a tres grandes empresas de software (IBM-Lotus, Microsoft y Novell) da una clara señal a otras

empresas similares para desarrollar productos y servicios orientados al Web, pero de manera

especial a intranet.

En la actualidad, la creación de productos para intranet ocupa un alto porcentaje de los

recursos de investigación y de desarrollo de las empresas de software. Las empresas ligadas

al hardware, también han potenciado sus productos para trabajar o soportar aplicaciones de

Internet e intranet. Es más, se supone que la mitad de lo que hoy se desarrolla en ambiente

Web está orientado a intranet79.

Las Intranets surgen cuando las empresas - ante el auge de las autopistas de la comunicación,

y más concretamente de Internet- se plantean sacar provecho de todas las ventajas de la

tecnología Web para mejorar su comunicación y la colaboración dentro de su entorno,

superando las trabas que hoy presenta Internet en cuanto a su total accesibilidad10.

Sin embargo, muchas grandes corporaciones, han fracasado en este objetivo y actualmente

poseen una infraestructura desactualizada, que hace muy difícil cualquier consulta de

información.

Pero el fracaso no se debe tanto a los aspectos relacionados con la infraestructura técnica sino

con aspectos culturales y la poca capacidad de la corporación para poder gestionarlos. Las

intranets suponían originalmente una gran libertad: cada área de una compañía tendría la

facultad de crear y administrar su propio contenido, dentro de una determinada porción de la

Intranet.

9 Antecedentes Históricos de las Intranets. Universidad de Chile. Sistema de Servicios de Información y

Bibliotecas (SISIB). 2007.

10 Las Intranets en el Siglo XXI. Universidad Politécnica Salesiana de Ecuador.





10

Esta metodología derivó años más tarde en un gran desorden. Cada sección que se navegaba

tenía un esquema de navegación y un diseño diferente, lo que resultaba muy frustrante para el

usuario medio cuando debía buscar u obtener cierta información. Además es bastante común

que el compromiso de las diferentes áreas para actualizar el contenido de la Intranet varíe de

una entrega absoluta al más absoluto abandono.

Pensar la estructura de contenidos de una Intranet en base a la estructura de la organización

puede ser muy tentador, después de todo, los empleados la conocen a la perfección y pueden

sentirse fácilmente identificados con ella. Lo que deberá evaluarse aquí es si reproduciendo la

estructura de una organización no se está evitando lo que se denomina la “navegación

cruzada” es decir la posibilidad de que un usuario consulte y navegue por conten idos que

quizás no tengan que ver directamente con su propia área pero que pueden resultarle útiles de

todos modos.

2.1.1. La usabilidad como factor diferenciador

Frente a este panorama, por cierto bastante desalentador, la usabilidad y el diseño centrado en

el usuario, metodologías ambas que ayudan a desarrollar interfaces intuitivas, fáciles de usar y

al servicio de quienes serán sus usuarios finales, arrojan un poco de luz sobre el futuro de las

Intranets corporativas.

Para empezar, las Intranets tienen que estar pensadas para sus usuarios, al igual que un sitio

Web. Pero aquí los usuarios son los empleados de una compañía. Relevar sus preferencias,

las aplicaciones que utilizan cotidianamente, los contenidos que consultan o cómo prefieren

obtener la información resulta vital para lograr un producto que satisfaga sus necesidades y

expectativas11.

2.1.2. Antecedentes del Diseño Visual Web.

Una GUI (Graphics User Interface) es un entorno interactivo entre humano y ordenador,

dinámico en el mejor de los casos, pero de todas formas, gráfico y visualmente comprensible, a

diferencia del arcaico modo textual. El término surgió porque la primera interfaz interactiva que

unía a las computadoras y a los usuarios no era gráfico, sino textos y teclado orientados, y

normalmente consistió en órdenes que el usuario tenía que recordar y respuestas de la

computadora que eran muy breves, pero potentes, desplegadas en una amenazadora pantalla

negra con letras blancas; la tradicional interfaz del sistema operativo DOS es un ejemplo de la

interfaz del “usuario-computadora” típica antes que las GUI actuales se posicionaran. Luego

hubo un paso intermedio que conecta al usuario con la interfaz de línea de comandos en donde

la GUI era la interfaz tipo “menú desplegable no gráfico” que le permitió interactuar usando un

ratón en lugar de teclear órdenes desde el teclado, recordemos las versiones de Windows de la

1 a la 2. Esta interfaz fue el tipo de visualización que dieron al usuario la opción de elegir

comandos, iniciar programas y ver listas de archivos y otras opciones a través del menú

descendente. Las selecciones podían activarse, bien a través del teclado, o bien con el ratón.

GUI, actualmente, es una forma de representar la información procesada de la computadora de

manera visual, concreta y manejable por el usuario final haciéndola más comprensible, más

didáctica, más asimilable, más usable.

11

Intranets: caos corporativo vs. Usabilidad. C Comunicación. Argentina. 2005.





11

Internet o mejor dicho su servicio más conocido: la WWW, donde se despliegan los sitios web

es por omisión una GUI distribuida (puede incluir simultáneamente texto, imagen, sonido,

video), en ella se pueden visualizar diagramaciones y distribuciones de contenido; se puede

insertar sonido, video, gráfica, dinamismo, interacción, navegabilidad, procesar datos en línea,

confirmándola como la GUI por excelencia.

2.1.3. La Arquitectura de la Información

Es la disciplina encargada de la fundamentación, análisis, planificación y estudio de la

disposición de los datos contenidos en los sistemas de información interactivos. El Information

Architecture Institute, define la Arquitectura de la Información como:

El diseño estructural en entornos de información compartida.

El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y la buscabilidad12.

Una comunidad emergente orientada a aplicar los principios de diseño y la arquitectura en el entorno digital.

2.2. Ámbito del Estudio

El presente Estudio pretende reunir las variables más importantes a la hora de construir una

Intranet, poniendo énfasis en el Diseño Visual.

Se mostrará Intranets de otros países como son:

Algunos países miembros del APEC.

Algunos países miembros del CIAT.

Los resultados mostrados como desarrollo del Estudio son usados para demostrar beneficios y

ejemplos de mejores prácticas en empresas de gobierno y comerciales, además identificamos

áreas donde las Administraciones Tributarias y Aduaneras requieren mejoras o creación de

soluciones.

El desarrollo de este Estudio es una guía de referencia para estándares internacionales.

2.3. Metodología

Se realiza este estudio, considerándose como una de las Etapas del Método Proyectual

basado en la resolución de problemas de Bruno Munari a aplicarse como parte de la creación

del Diseño Visual de la Intranet de la Superintendencia Nacional de Administración Tributaria –

Perú.

Para la realización del presente Estudio se utilizará la técnica de gestión empresarial llamada

BENCHMARKING del tipo:

2.3.1. Competitivo: Donde trataremos de conocer otras intranets del mundo en el mismo rubro. Para ello se elaboró un Cuestionario a modo de encuesta.

12

Buscabilidad (Findabiliby), la cualidad de ser localizable o navegable.





12

2.3.2. Mejor de su Clase: Donde conoceremos según los Reportes de Nielsen Norman

Group:

Las 10 mejores Intranets de Gobierno y Sector Público a nivel mundial.

Las 10 mejores Intranets del 2007 a nivel mundial.

Además de una revisión de estándares internacionales, lecciones aprendidas, mejores

prácticas e investigación.

Las dificultades para la realización del Estudio fueron las siguientes:

1. No se encontraron estudios o reportes de Intranets de Administraciones Tributarias. 2. No se encontraron estudios o reportes sobre Diseño Visual de Intranets. 3. Algunas Intranets no cuentan con acceso externo. 4. Ninguna Intranet permite acceder de forma externa a personas que no sean empleados

de dicha institución. 5. No se contaba con presupuesto que permitiera la realización de viajes a cada país

miembro del APEC y CIAT para realizar una evaluación en su misma sede. Debido a que se invitó a los países miembros del CIAT y APEC a participar de este estudio, quedando con ellos, en el compromiso de remitirles los resultados del estudio. Se incluye en el contenido algunas Buenas Prácticas y errores antes de comenzar la creación de la Intranet.

2.4. Objetivos del Estudio

Identificar conceptos y mejores prácticas en el diseño de las Intranets a nivel mundial.

Definir las tendencias en materia de Intranets, tomando como referencia a las grandes instituciones, que se reconozcan como ejemplo en ese aspecto.

Recomendar Buenas Prácticas que se puedan aplicar a la Intranet de la Superintendencia Nacional de Administración Tributaria – SUNAT - Perú.





13

3. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL13

3.1. Participantes BOLIVIA ORGANISMO: Servicio de Impuestos Nacionales.

N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 30. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 09/2007.

BRASIL ORGANISMO: Secretaria de Ingresos Federales del Brasil. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: Todos los funcionarios de

RFB (no especificaron el número de empleados). FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: No contestaron.

CHILE ORGANISMO: Servicios de Impuestos Internos. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 4,000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 08/2007.

CHINA – HONG

KONG ORGANISMO: Departamento de Aduanas e Impuestos de Hong Kong. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 5000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 01/2008.

ECUADOR ORGANISMO: Servicio de Rentas Internas. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 2500. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 12/2006.

ESPAÑA ORGANISMO: Agencia Estatal de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: Todos los trabajadores de la AEAT, unos 27.000 aproximadamente. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: Está previsto hacer un cambio importante en su estructura a lo largo de 2008, hemos incluido algunos aspectos en el cuestionario.

GUATEMALA ORGANISMO: Superintendencia de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 2500. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 03/2005

JAPÓN ORGANISMO: Servicio de Aduana y la Oficina de Tarificación, Ministerio de Finanzas. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 8500. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 07/2007.

MÉXICO ORGANISMO: Servicio de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 30,000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 01/2008.

NICARAGUA ORGANISMO: Dirección General de Ingresos (DGI).

La DGI cuenta con Sistemas de información que se ejecutan dentro de la INTRANET sin embargo no existe a la fecha un portal interno o Intranet con información para ser compartida y divulgada entre las áreas internas. Los sistemas que actualmente posee son de uso interno para áreas: Tributarias, Administrativas, Recursos Humanos, Fiscalización, etc.

PÁNAMA ORGANISMO: Dirección General de Ingresos del Ministerio de Economía y Finanzas. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 424. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 2007.

PÉRU ORGANISMO: Superintendencia de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 7000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 12/2001.

PORTUGAL ORGANISMO: Dirección General de Impuestos – DGCI. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 15,000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 04/2006.

13

Revisar el anexo 10.7 donde se muestra el resto de resultados de las encuestas enviadas al CIAT y APEC.





14

3.2. Sobre el Enfoque Aplicado

VISIBLE SÓLO EN EL ESTUDIO ORIGINAL

Sí desea obtener mayor información, escribir al e-mail de la Consultora:

[email protected]

mailto:[email protected]





15



[email protected]






16



[email protected]






17

3.3. Diseño Centrado al Cliente y/o Usuario14



[email protected]

14

Revisar el Cuadro sobre las Mejores Prácticas en Diseño Visual en Intranets de Administraciones Tributarias en anexo 10.5.1.






18

3.4. Sugerencias y Recomendaciones



[email protected]






19

4. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL15



[email protected]

15

Revisar el anexo 10.8 donde se amplía la información de este reporte.






20

4.1. Defense Finance and Accounting Services – Estados Unidos



[email protected]






21

4.2. Department for Transport – Reino Unido



[email protected]






22

4.3. Department for Victorian Communities – Australia



[email protected]






23

4.4. Department of Veterans Affairs Mid-Atlantic Health Care Network – Estados Unidos



[email protected]






24

4.5. Federal Reserve Bank of Richmond – Estados Unidos



[email protected]






25

4.6. London Undergroup – Reino Unido



[email protected]






26

4.7. National Research Council of Canada – Industrial Research Assistance Program



[email protected]






27

4.8. Senate Republican Conference – Estados Unidos



[email protected]






28

4.9. Workplace Safety and Insurance Board of Ontario – Canada



[email protected]






29

4.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas del Reporte sobre las 10 mejores Intranets de Gobierno a nivel mundial.



[email protected]






30

5. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 200716

5.1. American Electric Power – Estados Unidos



[email protected]

16

Revisar el anexo 10.9 donde se amplía la información de este reporte.






31

5.2. Comcast – Estados Unidos



[email protected]






32

5.3. DaimlerChvsler AG – Alemania



[email protected]






33

5.4. The Dow Chemical Company – Estados Unidos



[email protected]






34

5.5. Infosys Technologies Limited – India



[email protected]






35

5.6. JPMorgan Chase & Co. – Estados Unidos



[email protected]






36

5.7. Microsoft Corporation – Estados Unidos



[email protected]






37

5.8. National Geographic Society – Estados Unidos



[email protected]






38

5.9. The Royal Society for the Protection of Birds – Reino Unido



[email protected]






39

5.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas de del Reporte sobre las 10 mejores intranets a nivel mundial del 2007



[email protected]






40

6. BUENAS PRÁCTICAS EN LA CREACIÓN DE INTRANETS

6.1. Antes de iniciar la creación de la Intranet

Distinguir entre Sitio web Corporativo e Intranet. Ambas son diferentes en muchos

aspectos. Esas diferencias pueden verse reflejadas en el diseño y en el manejo de los procesos.

La entidad gubernamental debe elaborar una estrategia general de la intranet y una guía del diseño general. Es importante recordar que a nivel de las plantillas de páginas específicas y características, típicamente, cada departamento tiene diferentes necesidades.

Elaborar un diseño coherente para integrar muchas intranets.

Considerar las necesidades específicas de la organización. Una intranet refleja la

cultura, estructura, procesos, personal y recursos de la organización. Cada intranet debe adaptarse a las necesidades y desafíos de la organización.

Ver el trabajo de la gente. En el diseño de las intranets, no se olvide de que usted ya

sabe quiénes son los usuarios finales. Son la gente que pasa en los pasillos, los empleados sentados a su lado en la Cafetería. Observe cómo se está utilizando y no utilizando la intranet, y donde existen posibilidades de diseño. La intranet puede hacer más útil su trabajo en el día a día.

Busque las experiencias de otros organismos. Varios organismos han desarrollado

una considerable experiencia en el diseño y manejo de intranets. Compartir experiencias entre los organismos es una manera eficaz de construir y de apoyar la innovación en la Intranet.

Gestor de apoyo a través de grupos. Los directores de diferentes áreas deben

participar en la creación de un diseño global.

Participación de los usuarios y las personas interesadas desde el principio y

mantenerlos involucrados a lo largo del proyecto.

Planee cuidadosamente y diseñe en el papel antes de proceder al desarrollo. Una

cuidadosa planificación por adelantado también le ayudará a realizar un presupuesto realista.

No enfoque la creación de su intranet, principalmente como un proyecto de tecnología. Tratarlo como un problema de negocios y de comunicaciones.

No trate de hacer todo lo que esté a la vez. Muchas empresas tratan de "hervir el

océano" y rediseñar todos los aspectos de una gran intranet dentro de un apretado calendario y presupuesto. Invertir en la planificación por adelantado, y luego diseñar y construir en las etapas de máximo impacto.

Enfoque su intranet como un programa continuo en lugar de un proyecto aislado.

Realizar una investigación de usabilidad para determinar los requerimientos del

negocio y conocer las necesidades de los usuarios. Emplear técnicas de usabilidad como:

Card Sorting





41

Estudios de campo

Evaluación heurística

Encuestas

Pruebas de usuario en la antigua intranet.

Accesibilidad.

Determinar las metas de la intranet.

Darle un nombre a la Intranet y establecer claramente la marca de la intranet. Esto

puede ayudar a distinguir a la intranet del sitio web de la empresa y de otros recursos.

6.2. Durante la creación de la Intranet

6.2.1. Estándares Internacionales

Realizar muchas evaluaciones de usabilidad y visita a usuarios. Para

conocer cómo interactúan los usuarios con la Intranet y conocer que es necesario mejorar.

Usar directrices de accesibilidad en el diseño de procesos tomando en cuenta al usuario con discapacidad.

Imágenes y animaciones. Emplee el atributo Alt (texto alternativo) para

describir la función de todos los elementos gráficos.

Mapas de imagen. Cree mapas de tipo cliente y especifique el texto

alternativo por zonas activas.

Multimedia. Ofrezca subtítulos y trascripción del audio, descripción de

video, y una versión accesible en caso de utilizar formatos no accesibles.

Organización de las páginas. Utilice encabezados (H1, H2, H3,...), listas y una estructura consistente. Emplee estilos en cascada (CSS) para maquetar y determinar el estilo, donde sea posible.

Gráficas y esquemas. Resuma su contenido o utilice el atributo longdesc.

Marcos (frames) etiquételos con los atributos title o name.

Tablas. Asegúrese de que se pueden leer correctamente línea a línea.

Utilice el atributo summary.

Otros ejemplos de Usabilidad y Accesibilidad en el diseño son:

La presentación de la información en cada página debe respetar la forma de lectura jerárquica de arriba hacia abajo y de izquierda a derecha.

El contraste entre letra (color/tamaño) y fondo debe permitir la lectura

de manera sencilla, aún en los letreros más pequeños.

El color de fondo de las páginas Web debe incorporar colores claros y la

letra debe ser de un tono oscuro, lo cual aumenta el contraste y legibilidad, además de eliminar los problemas de impresión.

Mantener mecanismos de interacción consistentes y cómodos de utilizar desde los diferentes medios de acceso utilizados por los clientes.

Mantener un orden lógico de tabulación en los elementos de la página.

Proporcionar mensajes de error claros y mecanismos de navegación para

regresar a la página anterior.

Los sitios Web que utilicen documentos descargables para publicar sus

contenidos deben informar al usuario el peso del archivo y tiempo estimado de descarga a fin de que el usuario decida si es conveniente acceder a ellos.





42

En caso de utilizar tecnología no estándar que requiera que los usuarios instalen librerías (plug-ins) adicionales, debe incluirse el enlace a los sitios de los cuales pueden obtenerse, así como instructivos claros sobre cómo realizar su instalación.

Una buena práctica en la maquetación es utilizar tablas y evitar en

medida de lo posible el uso de "marcos" –frames– o “capas” –layers–.

El uso de enlaces debe apegarse a los siguientes puntos:

Los enlaces deben ser descriptivos, de modo que simplifiquen la búsqueda de información.

Identificar explícitamente el destino de cada enlace.

Equilibrar la saturación de la página en cuanto a enlaces tomando en cuenta el número de páginas que tendrá que acceder el usuario para encontrar el contenido que requiere.

Uso de plantillas en el diseño visual de las páginas tratando de unificar

la imagen de la intranet.

Recomendaciones de Usabilidad para el uso efectivo de botones en

desarrollos web.

Recomendaciones sobre el texto contenido por los botones.

Principalmente, existen dos tipos de botones en los entornos web:

Botones textuales: Son aquellos que básicamente basan toda la información que transmiten sobre textos o a través de ellos.

Botones icónicos: Son aquellos que transmiten su información principalmente a través de una imagen siendo capaces de que la interpretación que el usuario da a dicha imagen sustituya con éxito el mensaje textual que se les podría haber proporcionado. Asimismo, estos pueden disponer de información textual, la cual vendría dada por el etiquetado del icono.

Centrándonos en la información textual transmitida por los botones textuales, existen varias recomendaciones a tener en cuenta:

1.- Es necesario etiquetar todos los botones con verbos

imperativos. Estos etiquetados han de tener siempre la primera

letra en mayúscula, como por ejemplo 'Salvar', 'Buscar', 'Eliminar' ...

De este modo, habría que huir de botones con textos tales como

“Acepta”, “Accede”, etc.

2.- Se recomienda usar el símbolo (...) ó '...' al final de las etiquetas

si la acción requiere más explicación para el usuario antes de la

acción sea llevada a cabo. Por ejemplo 'Salvar como...' o

'Buscar...'. Estos signos, no deberían añadirse en comandos tales

como 'Propiedades', 'Preferencias', 'Configuración', ya que estos

comandos no requieren mayor explicación que la que ya expresan

por medio de su etiquetado.

3.- Se recomienda utilizar siempre términos breves y

representativos. Las frases largas de carácter descriptivo no son





43

recomendables. El uso de terminología ha de abarcar entre dos y

tres palabras.

4.- En el caso de que el etiquetado del botón tenga dos o más

palabras, es crítico mantener la consistencia con el español. Un

error muy común a la hora de etiquetar botones es importar errores

tipográficos internacionales, la mayoría de procedencia

anglosajona. De todos ellos, el más común es el de entremezclar

mayúsculas y minúsculas dentro de una misma frase sin criterio

alguno. Hay que hacer notar que si bien en la lengua inglesa no

constituye falta de ortografía el comenzar con letra mayúscula cada

palabra que no sea determinante, adverbio o preposición dentro de

una misma frase, esto constituye una falta de ortografía en

castellano. No obstante, poner mayúsculas a palabras situadas en

mitad de frases castellanas se está convirtiendo en costumbre

común. Un empeoramiento de esta situación lo constituye el situar

dichas letras mayúsculas en algunas palabras de dicha frase y en

otras no.

Recomendaciones sobre las características de los botones.

El segundo aspecto a tener en cuenta, cuando se tenga una idea más

clara sobre las cuestiones lingüísticas es la funcionalidad de dichos

elementos. La funcionalidad de un botón en una interfaz web es casi

tan importante como su etiquetado lingüístico. El comportamiento de

dicho botón proporcionará información crítica al usuario y le guiará por

su interacción normal con el sitio web.

En aras de una potenciación de la Accesibilidad de un sitio web, el

acceso a las distintas secciones del mismo por medio de botones

debería poder hacerse de dos maneras:

o Navegando por medio del ratón: Es el uso más común por medio del cual interacciona el usuario con los sitios web.

o Navegando por medio del teclado: Posibilidad necesaria para aquellas personas que tienen necesidad de hacer uso de los sitios web accesibles debido a algún tipo de discapacidad.

Acorde a estos usos, las recomendaciones que se pueden hacer son:

Es crítico etiquetar todos los botones a fin de que el usuario pueda obtener

información acerca de la funcionalidad sin necesidad de pulsarlos.

Adicionalmente, ello posibilitará la navegación en el caso de que los

botones no se carguen, tarden en hacerlo o, directamente, no existan por

algún tipo de incompatibilidades con el navegador que está usando.

Si el botón es capaz de generar texto, un icono o ambos, es necesario

describir gráficamente lo que va a suceder. La generación de texto en la





44

pantalla ocultará algunos elementos de la misma y ello podría propiciar a

que el usuario se pierda. Es mejor advertir antes que subsanar.

Con respecto a la apariencia que se les debe dar a los botones dentro de

una interfaz, la recomendación básica que a primera vista se mantenga la

consistencia. Por tanto, hay que tener en cuenta los siguientes puntos:

1.- No usar más de uno o dos anchos para los botones que componen

una interfaz y, en cualquier caso, usar siempre el mismo alto. Ello

ayudará a proporcionar un cómodo sistema visual para que la

percepción del sujeto sea capaz de clasificar los elementos que

componen una interfaz.

2.- Aquellos botones cuya función, a causa de las acciones del sujeto,

quede inhabilitada, deberán quedar presentes, pero inhabilitados. Un

ensombrecimiento de los mismos, ayudará sin duda a clarificar que, a

causa de esa acción, el botón ya no está disponible o aún no ha sido

activado.

3.- En un texto, un botón puede constituir el botón por defecto de una

interfaz. Para ello, tiene que estar resaltado con un borde distinto y

debe volverse de la misma manera cuando el sujeto regrese a la citada

interfaz. Generalmente, este tipo de botones suelen ser los etiquetados

con las funciones “Aceptar”, “Adelante”, “Siguiente”, etc. Tan sólo en

casos excepcionales “Cancelar” debería ser el botón activado por

defecto de una función.

4.- Si un botón por defecto sólo va a poder ser utilizado una vez, el

usuario debe completar un cierto número de pasos (por ejemplo,

rellenar un nombre de usuario y una contraseña), este botón NUNCA

debería activarse hasta que el usuario complete correctamente la tarea

en cuestión. No tiene sentido posibilitarle la opción de pulsado si va a

conducirlo a un error de la herramienta.

Con respecto a la apariencia que los botones han de tener con

respecto a la interfaz global del sitio web, se han de tener en cuenta los

siguientes puntos:

1.- Cada vez que un botón se pulse, hay que dar feedback al

usuario que está pulsando el botón. Este feedback admite las

animaciones o los sonidos, siempre y cuando ayuden a aclarar al

usuario.

2.- La ubicación de los botones en la interfaz es un aspecto

fundamental. Es recomendable que el botón con mayor posibilidad

de ser pulsado sea mostrado en primer lugar. En este sentido, hay

que tener en cuenta que las pautas de lecto escritura occidentales

podrán ayudar en esto, ya que los usuarios leen de izquierda a

derecha y de arriba abajo. Estas pautas nos van a proporcionar las

reglas a seguir acorde a las ponderaciones en importancia

otorgadas.





45

3.- En el caso de que la interfaz tenga ciertas particularidades, por

medio de las cuales no sea posible dotar al sitio web de

indicadores claros de pulsado, puede ser aconsejable introducir

alguna pista que enfatice los botones usados con más frecuencia o

los más previsibles.

Simple e intuitiva interfaz de usuario y arquitectura. En lo posible, los

usuarios no deben requerir una formación previa de cómo usar el sitio.

Cada recurso debe tener su propia URL exclusiva, que los usuarios

puedan guardar como favorito. Esto significa evitar en lo posible la utilización de marcos o frames.

Acceso con un clic. Los usuarios deben ser capaces de obtener los

recursos de la página con un clic. Esto puede requerir del uso de menús que solo aparecen cuando se señalan con el cursor o desplazarse a través de listas en las pequeñas ventanas para evitar que la página sea abrumadora. La regla de los 3 clicks (3 clicks rules) recomienda que no se debería llegar a ninguna información clave de un sitio web en más de tres clicks. La correcta aplicación de este principio produce en el usuario una experiencia positiva, ese usuario probablemente volverá a nuestro sitio web recordando que una vez pudo cumplir su objetivo satisfactoriamente.

Acomodar diversas formas de encontrar la información. La intranet

debe ofrecer a los usuarios tres opciones para obtener la información que están buscando: navegar, buscar o suscribirse.

Optimizar el uso de imágenes al utilizar formatos ligeros que no pierdan

la calidad de la imagen.

El uso de imágenes debe ser un recurso complementario y no ser sustituto del contenido en texto.

Es importante vigilar la cantidad de animaciones que incluya el diseño, con el fin de no saturar al usuario y perder su atención, así como evitar sobrepasar el peso recomendado por página.

En el caso de los sitios con contenido dinámico, debe contemplarse una imagen o texto alternos cuando no se encuentre disponible o no se logre cargar la imagen o información solicitada.

Algunos principios del Diseño centrado en el usuario son:

Los usuarios de un sistema frecuentemente juzgan a ese sistema por su interfaz, por lo tanto el diseño de interfaz de usuario debe tomar en cuenta las expectativas, necesidades, experiencias y capacidades de los usuarios del sistema a distribuir, conocer exactamente el nivel sociodemográfico del usuario y no confundirlo con el del cliente o desarrollador.

El control de la aplicación a nivel de navegación e interacción debe estar en manos del usuario, por lo menos aparentemente.

Cuanto mayor sea el grado de personalización, más cómodo se sentirá el usuario en el entorno de aplicación.

La página inicial es lo más importante atendiendo a razones de lograr audiencia cautiva desde el momento del contacto visual, para ello debe existir coherencia y consistencia del diseño entre





46

todas las partes del producto y sus elementos a nivel visual, conceptual, semántico adoptando estilos, cuando es posible y necesario.

Los usuarios han de entender el funcionamiento y la estructura de información en toda la aplicación después de observarla unos pocos segundos. Un diseño de interfaz pobre, inicialmente complejo o incomprensible puede provocar que el usuario huya y probablemente dicho sistema nunca sea usado.

Aplicar diseño de interacción consistente en decidir dónde y cómo se le

dará el control al usuario, por parte del equipo de desarrollo.

Definir qué y cómo pasa en cada escena, pantalla o página al interactuar el sistema con el usuario.

Provocar un diálogo fluido y realmente comunicativo entre el sistema y el usuario.

Definir restricciones y privilegios para reforzar conceptos.

Elaborar y utilizar metáforas.

Diseñar controles para la interacción.

6.2.1.1. Diseño Gráfico

La importancia del buen uso de la Teoría del color.

Uso del color en la Interfaz. El color tiene un impacto principal sobre la

interacción humano-computadora: si no positivo, entonces negativo. De acuerdo a Murch, un investigador en factores humanos bien conocido, "El color puede ser una herramienta poderosa para mejorar la utilidad de un despliegue de información en una amplia variedad de áreas si el color es usado adecuadamente. Inversamente, el uso inapropiado del color puede seriamente reducir la funcionalidad de un sistema de despliegue". El color es un componente principal en las GUIs. Debido a la proliferación de aplicaciones GUI en PCs, Macs, y Estaciones de trabajo Unix, el examen del color es pertinente a la interacción humano-computadora (human computer interaction, HCI). El uso de color apropiado puede ayudar a la memoria del usuario y facilitar

la formación de modelos mentales efectivos. Como Murch expresó arriba,

el uso efectivo del color puede ser una herramienta poderosa. Sin

embargo, el uso inefectivo del color puede degradar el desempeño de una

aplicación y disminuir la satisfacción del usuario. Debido a estos factores,

sentimos que el uso efectivo del color en interfaces de computadora es un

importante tópico en HCI que requiere ser examinado cuando

consideramos el diseño de una interfaz.

La gente interactúa con su mundo a través de modelos mentales que ellos

han desarrollado. Específicamente, las ideas y las habilidades que traen a

su trabajo están basadas en modelos mentales que ellos desarrollan

acerca de ese trabajo. Como diseñadores de interfaces, necesitamos

ayudar al usuario a desarrollar modelos mentales del sistema que le

ayudarán a entender el trabajo, y desarrollar las herramientas de la interfaz

que le ayudarán a realizar el trabajo. El uso adecuado del color comunica

hechos e ideas más rápidamente y más estéticamente al usuario. El color

también puede ayudar a desarrollar modelos mentales eficientes y factibles





47

si se siguen las siguientes pautas: simplicidad, consistencia, claridad y

lenguaje del color.

Mantenga el mensaje sencillo. No sobrecargues el significado del color

vinculando más de un concepto a un solo color17. Los conceptos diferentes

deberán usar colores diferentes. Mantener el mensaje simple se relaciona

con la siguiente pauta, la cual es consistencia.

El color puede ser usado para codificar o agrupar piezas de información.

Esto ayuda a incrementar el número de piezas de información que un

usuario puede retener en la memoria de corto plazo. Es importante el ser

consistente a la hora de "agrupar" información. Evita cambiar el significado

de los colores para diferentes pantallas en la interfaz. Por ejemplo, una

interfaz de base de datos que evaluamos cambia su color de fondo a azul

cada vez que aparecen los campos en la pantalla que no pueden ser

actualizados. Esto se hace para toda pantalla aplicable en el paquete y de

esa manera proporciona continuidad y consistencia para el usuario.

La claridad es también una pauta importante para usar color. Experimentos

han mostrado que el tiempo de búsqueda para encontrar una pieza de

información es disminuido si el color de esta pieza es conocido por

anticipado, y si el color sólo se aplica a esa pieza. Los colores de interfaz

estandarizados deberán de ser establecidos y usados a través del

desarrollo. El uso claro y conciso del color puede ayudar a los usuarios a

encontrar piezas de información más rápidamente y más eficientemente. El

aprendizaje puede ser grandiosamente aumentado con el color. El color ha

probado ser superior al blanco y negro por la efectividad en el tiempo de

proceso de información y por el rendimiento de memoria. La estética y lo

atractivo de la interfaz son inherentemente aumentados por el uso del

color.

La usabilidad del sistema puede ser aumentada empleando colores para

agrupar información acerca de subsistemas y estructuras y para añadir

dimensiones de código a la interfaz. De hecho, los errores en

entendimiento y el uso de la interfaz pueden ser realmente reducidos

usando color para dar claridad a los significados y conceptos del sistema.

El utilizar códigos de color en mensajes para el usuario podría reducir

grandemente la mal interpretación y las respuestas incorrectas. El rojo es

un buen color para alertar a un usuario hacia un error. El amarillo es

apropiado para un mensaje de advertencia, y el verde para mostrar un

progreso positivo. El usar verde para mensajes de error y el rojo para

mensajes de estado positivo sólo conducirá al usuario a mal

interpretaciones y a frustraciones.

Uso del color en las fotografías. Aunque la mayor parte de la tomas se

realizan hoy en colores, existe la opción de presentar las fotografías en blanco y negro (en realidad, grises) e, incluso, en blanco y negro real (fotos de 1 bit). En algunos casos, las fotografías en blanco y negro o en escalas de grises

pueden ser más expresivas que las del color.

17

Norman, D. Some Observations on Mental Models. In Mental Models D. Genter and A. Stevens, eds.

Lawrence Erlbaum Associates, 1983, pp. 7-14.





48

Puede suceder que contemos sólo con fotografías en blanco y negro para

nuestro documento. En ese caso puede utilizarse así como las obtuvimos,

o tonalizarse tipo sepiado, con lo que se obtiene efectos muy interesantes,

sobre todo si se trata de fotografías antiguas.

Uso del color en ilustraciones. En el caso de las ilustraciones el uso del

color debe supeditarse a la intención comunicativa. La ilustración puede utilizarse porqué no se cuenta con una fotografía (en reemplazo), en cuyo caso el color debe ser lo más realista posible (adecuado al estilo gráfico de la ilustración). Pero las ilustraciones se usan también para simplificar y sintetizar la imagen. En ese caso el color debe ser usado con prudencia, para mantener la síntesis buscada. Si se trata de identificar elementos, el color de los mismos debe ser convencional.

Uso del color en gráficos y diagramas. El color cumple aquí el papel

auxiliar comunicativo, ayudando a reconocer las distintas partes del gráfico o diagrama, a identificarlas claramente y a interpretarlas.

Considerar las reglas de Composición Fotográfica a la hora de elegir imágenes para la Intranet. Algunas de ellas son:

Centro de Interés

Cada fotografía tiene (o debería tener) un centro de interés. ¿De qué es la

foto? ¿Es una fotografía de

su novia? ¿Es una

fotografía de las pirámides

de Egipto? Debería ser

obvio para cualquiera que

mire una fotografía saber de

qué es la foto. Es lo que se

denomina el centro de

interés.

Aunque se denomine

centro, el centro de interés

no tiene que ser

necesariamente el objeto

que esté en el centro de la

foto ni ser el objeto que ocupa la mayor parte de la imagen.

Es la primera regla de una buena composición, ya que es la más

importante. Simplemente decide antes de disparar el motivo sobre el que

quieres tomar la fotografía. Todo lo que hay que hacer a partir de ahí es

enfocar el elemento sobre el que queremos centrar el interés.

Rellenar el Encuadre (Fill the frame)

Esta regla puede parecer bastante obvia, pero lo cierto es que muchas

veces fallamos al aplicarla. Si queremos contar algo en una foto, ocupemos

la mayor parte con ese "algo", asegurándonos que se convierte de este

modo en el centro de atención. Además, de este modo eliminamos posibles

elementos que resten atención.





49

Es un fallo demasiado común el querer sacar demasiadas cosas en una

única foto. Al final, lo que conseguimos es que no quede demasiado claro

qué es lo que queríamos enseñar. Ante la duda de si algo debe salir o no

en la foto, mejor quitarlo.

Líneas

Las líneas son un elemento

de importancia vital en las

artes visuales. Las líneas nos

aportan formas y contornos.

Con las líneas dirigimos la

mirada del espectador de una

parte de la foto a otra.

Cuando vayas avanzando en el mundo de la fotografía podrás comprobar

cómo las líneas son uno de los elementos más eficaces a la hora de dirigir

la mirada de quien contempla nuestras fotos hacia donde queremos que

mire. Las líneas horizontales, verticales y diagonales son elementos

compositivos que aportan significado a las imágenes.

Un tipo especial de líneas son las líneas convergentes. Son las líneas

paralelas que, por el efecto de la distancia, acaban convergiendo en un

mismo punto.

Flujo Después de las líneas, podemos tratar el flujo. El flujo es el modo en el que

la mirada del espectador se desplaza de una parte de la fotografía a otra.

Una manera de definir el flujo de una fotografía es mediante el uso de

líneas. Pueden ser horizontales, verticales, diagonales, convergentes o

divergentes. A veces el flujo creado por las líneas es nítido y claro, como

los laterales de un edificio que convergen hacia el cielo), o pueden ser

menos obvias. Sin embargo, la mirada del espectador debería ser capaz de

recorrer los elementos de una parte a otra de la imagen.

El flujo crea la ilusión de movimiento (o ausencia de movimiento si se

desea). Las líneas diagonales se consideran generalmente más

"dinámicas", mientras que las líneas horizontales y verticales se consideran

más "estáticas". Un equilibrio cuidadoso de elementos estáticos y

dinámicos dará un sentido global de movimiento a tus fotografías.

Dirección

La dirección es similar al flujo. También crea la ilusión de movimiento. Si

hay algo en la fotografía que parezca estar en movimiento, tiene una

dirección en la que se mueve.

Un ejemplo de esto son las luces de peatones de un semáforo. Cuando

está en rojo para los peatones, la figura representa un peatón inmóvil, con

las piernas juntas y los brazos bajados. Visualmente, no tiene ninguna

apariencia de estar en movimiento. Sin embargo, la figura del peatón en

verde que permite cruzar tiene una dirección en la cual se está moviendo.

La dirección en fotografía se puede crear de muchas maneras. Una figura a

punto de cruzar una calle puede transmitir movimiento aunque la veamos





50

estática y no se muevan sus brazos y sus pies, porque podemos imaginarla

un segundo después cruzando la calle. Del mismo modo, un coche que

aparece cortado en el lado izquierdo de una fotografía en la que solo se ve

su parte delantera, podemos imaginarlo un segundo después al lado

derecho de la foto.

Repetición

La repetición de algún elemento (unos globos, unos pájaros), dan un

sentido de relación de distintas partes de una imagen.

Por ejemplo, una bandada de pájaros pueden estar moviéndose en grupo

por el aire, definiendo formas interesantes en el cielo y añadiendo

información sobre la dirección de la fotografía.

En algunas ocasiones puede aportar factores psicológicos, como el sentido

de la unión y el compañerismo.

Grupos de Tres

Parece existir una percepción especial de los números impares en

fotografía, y en especial de los grupos de tres elementos.

Un único elemento puede transmitir soledad o aislamiento, con dos

elementos una foto puede quedar demasiado bien equilibrada y

estática, y cuatro elementos pueden resultar demasiados para

distribuir.





51

Por algún motivo que no se explicar, a las personas nos gusta el

número 3. En fotografía suele funcionar la agrupación de tres

elementos como centro de interés.

Regla de los Tercios Ya escribimos un artículo que explicaba la regla de los tercios con

más detalle. Si nos fijamos en obras de arte en cualquier museo,

podremos comprobar que si dividimos un cuadro en cuadrículas de

igual tamaño de 3 x 3, las cuatro intersecciones de las cuadrículas

dentro del cuadro marcan los puntos de interés.

Trazando esta cuadrícula imaginaria sobre la mayoría de las obras

nos daremos cuenta de que elementos fundamentales del cuadro

recaen sobre esas intersecciones: ventanas y puertas, ojos, líneas

de horizonte, picos de montañas, etc. Está comprobado que

llevando nuestro punto de interés a uno de esos cuatro puntos

conseguimos una imagen mucho más interesante.

Espacio Negativo





52

Se considera espacio negativo los grandes espacios vacíos,

normalmente en blanco o negro, dentro de una fotografía,

normalmente a un lado.

El alejamiento del elemento central de la imagen, rellenando el

resto de la foto de un espacio vacío nos permite transmitir una

información adicional de soledad, aislamiento o calma a la imagen.

Aunque no es un recurso que vayamos a utilizar habitualmente, no

está de más conocerlo. Está enfrentada a la regla de composición

consistente en rellenar el encuadre.

Frente/Fondo

El contenido del frente y del

fondo de una foto es

importante. Tanto en el fondo

como en el frente tienen

aplicación otros elementos

compositivos como los

colores o las líneas.

Lo importante en el frente y

en el fondo es que no haya

demasiados detalles que

puedan distraer la vista del

espectador del centro de

interés.

La mejor herramienta con la

que contamos para marcar la

diferencia entre el frente y el fondo de nuestras fotos es la

profundidad de campo. Gracias a la apertura del diafragma que





53

utilicemos a la hora de hacer fotografías, conseguiremos mayor o

menor nitidez en el fondo.

Enmarcado

Existen elementos que pueden ayudar a poner un marco al centro

de interés de la foto.

Algunos de estos elementos son muy claros, tapando

completamente parte de la foto, como puertas, ventanas o puentes.

Otros actúan de una forma menos clara, simplemente orientando

nuestra vista. Es el caso de las señales de tráfico o las ramas de

los árboles, etc.

Cualquier elemento que "encierre" el centro de interés nos permitirá

enmarcar la foto, dirigiendo la atención hacia el elemento deseado.

Curvas en S

Las curvas en "S" son un elemento muy recurrente en fotografía.

Está relacionado con la sensualidad. También transmiten

movimiento y ayudan a conducir la mirada.

En la vida cotidiana encontramos muchos recursos que nos

permiten aplicar curvas en S en nuestras fotografías. Una

carretera, un camino, el curso de un río, etc. Son elementos

visuales muy potentes que dan interés a la fotografía.





54

Los detalles y el entorno como significadores En la fotografía del niño (A), podemos apreciar que está contento,

que se divierte en lo que parece un automóvil de juguete. Los

elementos que aparecen al fondo no son suficientes para identificar

el contexto.

La segunda fotografía (B) con un recorte menor; muestra

claramente que está en una calesita.

La tercera (C) muestra la toma completa original, en que la resulta

molesto el elemento desenfocado del rincón inferior derecho, y

sobra el espacio a la izquierda de la barra.

No hay que confundirse al seleccionar lo que se va a recortar: el

que realiza esta operación sabe que la fotografía es en una

calesita, por lo que los elementos de fondo de la primera (A) le

pueden parecer suficientes para identificar la situación. El lector-

destinatario no sabe previamente de que se trata, y necesita

elementos para interpretar (decodificar, comprender).





55

La intranet debe contar con una Identidad gráfica que transmita el

sentido de pertenencia institucional a los trabajadores. Deben incluir combinaciones de colores institucionales.

La imagen gráfica seleccionada para el sitio no debe afectar su funcionamiento ni incrementar los tiempos de carga y recarga del mismo.

Considerar la teoría de Composición en la Obra de Arte para dibujos e ilustraciones. Se

toma en cuenta la organización del Campo Visual: La forma, el color, la textura. Las leyes compositivas como: la simetría, la ley de compensación de la balanza, etc.

6.2.2. Contenido

Considere una estructura de intranet apropiada. El uso de técnica de

arquitectura de la información, ayuda a determinar la estructura más adecuada para el sitio.

Fácil orientación. El contenido debe ser visible en la primera página. No

debe ser necesario recurrir al mapa de sitio.

Garantizar la cantidad de contenidos. Proporcionar al personal, la

información que necesita para sus funciones.

Los contenidos publicados deben contemplar los siguientes elementos

de comunicación:

Uso de lenguaje simple, claro y directo, que permita a los lectores concentrarse en el mensaje y comprenderlo de manera fácil y sencilla.

Uso de palabras apropiadas al contexto del contenido y al perfil de la comunidad a la que está enfocado el contenido.

Estructura gramatical, ortografía y redacción correctas.

En caso de hacer uso de traducción de términos en idiomas diferentes al español, o los acuñados por el uso, debe ser clara y exacta de acuerdo al contexto con el fin de reducir las acepciones múltiples

La intranet debe mostrar las políticas de uso del mismo y/o

confidencialidad de la información en él publicada, los términos y condiciones bajo los cuales se preste algún servicio, así como las exclusiones aplicables.

Recomendaciones para la organización de contenidos en una página

web:

Organice el texto con dos o tres niveles de titulares (según la complejidad y extensión).

Use listas numeradas y viñetas para organizar conjuntos de elementos.

Si la lista es muy larga clasifique los ítems.

Resalte las palabras importantes.

Utilice reforzadores.

Saque fuera del cuerpo del texto información que no sea central.





56

Separe los párrafos. Si es necesario cree un índice de contenido que facilite la navegación del conjunto.

Identifique fragmentos poco relevantes y sepárelos del texto central.

En ocasiones deberá redactar de nuevo el cuerpo del texto en forma resumida con vínculos al resto de los fragmentos.

Utilice un esquema de pirámide invertida de manera que lo más importante quede en la parte superior de la página y luego agregue profundidad.

El contenido en cada página debe abarcar entre el 50% y 80% del espacio disponible (tener en cuenta el espacio que utiliza el navegador). La barra de navegación debe mantenerse por debajo del 20% del espacio.

6.2.3. Comunicaciones

Asóciese con el equipo de Comunicaciones. Ya que pueden proporcionarle noticias e información corporativa.

6.3. Después de creada la intranet

Realizar un seguimiento continuo a la intranet. Realice mediciones y

determine el valor de la intranet.

Mantener un registro continuo del contenido.

Establecer políticas, guías y estándares relacionados a las actividades

de la intranet.

Creación del Manual de Estándares Gráficos o Estilos. Debe

contemplar diversos aspectos como: ortografía, tipografía, diseño de la página, iconos, estructura de encabezados, etc.

Tómese un tiempo para medir el ROI. Hacer una pausa para medir el tiempo que los usuarios requieren para realizar una tarea, tanto antes y después de un diseño. Conocer se hubo un ahorro financiero, y una ganancia.





57

7. ERRORES COMUNES EN LAS INTRANETS18

7.1. Antes de iniciar la creación de la Intranet

Del estudio realizado por King eClient se desprende que los principales factores que frenan el

desarrollo de las Intranets son:

Efecto Eclipse: las páginas web corporativas son las principales herramientas de

relación con los clientes finales, por lo que son consideradas por los empresarios como los canales clave para la generación de ingresos. Este hecho provoca el denominado efecto eclipse, lo que significa que los entornos orientados a procesos de gestión interna quedan eclipsados por la página web, principal fuente de ingresos de la empresa.

Efecto Cajón de Sastre: el 58% de empresas estudiadas afirman haber iniciado la

programación de su Intranet sin haber definido de forma concreta qué contenidos y servicios iban a albergar. Esta falta de conceptualización provoca el llamado efecto cajón de sastre, que unido al crecimiento descontrolado de los contenidos obliga a los responsables a diseñar la Intranet a medida que se crece, lo que provoca ineficiencias y errores de navegación y poca eficacia de la web interna.

Efecto Parche: debido a los efectos anteriormente comentados, las Intranets se

han convertido en entornos sobresaturados para las posibilidades con las que fueron concebidas. Todos estos efectos y sus consecuencias acaban redundando en entornos no útiles y a menudo poco atractivos.

7.2. Durante la creación de la Intranet

7.2.1. Diseño Visual

Pobre diseño de páginas. En algunas intranets, los usuarios se enfrentan a un

mar de enlaces. En varias intranets había tanta información que los usuarios se vieron obligados a desplazarse por cinco o más páginas. En algunas de las presentaciones había mucho texto y muchos enlaces y los usuarios no tenían ninguna oportunidad de encontrar lo que estaban buscando. Los diseñadores a menudo creen que si no ofrecen información o vínculos en el nivel superior, entonces la gente nunca va a encontrarlas. En realidad, la verdad suele ser lo contrario. Si usted ofrece demasiadas opciones que están en el nivel superior, los usuarios sufren de sobrecarga de información.

Visualización: errores a evitar en el empleo de color en la pantalla del ordenador.

La utilización de colores demasiado saturados.

Utilizar una paleta de colores extensa.

Poco contraste de contenidos y elementos de lectura: Existe una tendencia de diseño de presentar en contenidos, los textos en tonos grisáceos sobre fondo blanco, lo que genera algunos problemas de legibilidad. ejemplo

18

Ver el cuadro de resumen en el anexo 10.6





58

incorrecto, texto verde sobre fondo amarillo; ejemplo correcto: texto negro sobre fondo claro.

Errores comunes a considerar en la fotografías antes de colocarlas en la

Intranet.

Reflejos del flash sobre el fondo.

Hay veces que utilizamos el flash de la

cámara sin darnos cuenta de que por

detrás del objeto que estamos

fotografiando hay una superficie que

refleja la luz del flash. El caso más

obvio es el de un espejo, pero existen

otro tipo de superficies que pueden

reflejar la luz. Estos reflejos producen,

desde una mala medición de la luz del

flash, oscureciendo toda la foto en el

peor de los casos, hasta la aparición de

una zona en la foto quemada por la

exposición de luz muy fuerte como el

menor de los problemas.

Por eso, es muy importante observar el

tipo de fondo que nos encontramos a la

hora de hacer una fotografía con flash.

Ojos rojos

Cuando llegue a sus manos una fotografía con personas o animales con ojos

rojos, sólo hay que realizar la corrección con algún programa de retoque.

Flash de relleno demasiado fuerte, que hace demasiado obvio el uso del flash. El flash no es solo un elemento para utilizar por la noche. Hay muchas ocasiones

en las que, con luz natural, conviene utilizar el flash en una modalidad denominada

"flash de relleno", que sirve para iluminar el elemento en primer plano que





59

queremos fotografiar para, por ejemplo, contrarrestar la sombra provocada por

estar situado el sujeto a contraluz.

Uno de los problemas típicos que se puede producir con esta técnica se produce

cuando la iluminación del flash es excesiva, creando un contraste excesivo y poco

natural entre el sujeto en primer plano y el fondo, en el que parece que hubiéramos

sacado el elemento en primer plano de otra fotografía y lo hubiéramos "recortado y

pegado" en la foto.

Líneas que deberían ser horizontales o verticales pero no lo son.

Muchas veces tenemos en nuestras fotos líneas de referencia que son claramente

horizontales o verticales, como por ejemplo la línea del horizonte, mucho más

visible cuando estamos haciendo fotografías en el mar. Lo cierto es que, a simple

vista, es muy complicado hacer estas fotos bien, porque una inclinación de tan solo

un par de grados hará que el resultado de nuestra foto no sea el esperado por

haber quedado torcidas estas líneas de referencia.

Antes del retoque





60

Después del Retoque

Líneas torcidas en edificios.

Este es un defecto que normalmente viene provocado por la propia

cámara, o para ser más exactos, por la óptica de la cámara. También se

puede ver incrementado por el ángulo o la perspectiva que estemos dando

a la foto. Se conoce como efecto barrilete, y se puede apreciar con facilidad

cuando fotografiamos edificios y las líneas verticales de las paredes

tienden a cerrarse en su parte superior, en lugar de ir paralelas al borde de

la fotografía.

En algunos casos se puede corregir con software específico, cuando el

efecto no es demasiado acusado. Las últimas versiones de Adobe

Photoshop cuentan con una utilidad específica para ello. También se puede

realizar una leve corrección de la perspectiva con Adobe Photoshop.

Antes del Retoque





61

Después del Retoque

Esquinas oscurecidas por el uso incorrecto de algún filtro u objetivo (viñeteo).

El efecto de viñeteo o viñeteado se

produce en ciertos objetivos con

algunas focales extremas, o

utilizados en combinación con algún

filtro, y el resultado es el

oscurecimiento de las esquinas de la

fotografía. Es un recurso que se

puede aplicar de manera artificial

para ayudar a centrar la atención del

espectador en el centro de la foto,

pero en general se considera un

defecto de la fotografía.

También hay algunas aplicaciones que permiten corregirlo y algunos programas de

retoque que permiten lograr este efecto.

Cielos anormalmente azules por el uso de algún filtro.

Existen filtros que afectan a la luz que pasa a través del objetivo, influyendo en el

modo en que quedan recogidos los colores. Hay filtros específicos que afectan al

color del cielo, realzando los tonos azules recogidos. Hay que hacer un uso

cuidadoso de este tipo de filtros, porque una variación excesiva de lo tonos del

cielo sobre los que estamos acostumbrados a ver en la vida diaria puede traspasar

la línea invisible que marca la diferencia entre algo llamativo y algo definitivamente

errado.

Imágenes con demasiada o muy poca profundidad de campo.

Sobra decir que una profundidad de campo mal empleada, ya sea por exceso o por

defecto, puede estropear una bonita foto.





62

La profundidad de campo bien

empleada debe ser aquella que nos

permita resaltar aquello en lo que

queramos que se centre la atención del

espectador; ni más ni menos.

Los errores más comunes en la navegación son:

Navegación que no es ni coherente ni persistente. Algunas intranets se

basaron en características tales como un índice de A-a-Z o un mapa del sitio. Tales características fueron dadas a veces con enlaces en la página principal. Esto estaría bien, salvo que en varias intranets el menú principal desaparece por completo en varias páginas, y características como la A-a-Z fueron el único índice de navegación que ofrece. En otros casos, un menú principal estuvo generalmente disponible, pero la estructura y el contenido cambiado al azar. Por ejemplo, el menú principal aparece como pestañas en una sola página, una barra de color en otro, en otros botones en la misma intranet. En algunos casos, los diseñadores optaron por temas en categorías, lo que obliga a los usuarios a pasar por demasiadas páginas que tienen vínculos, pero no descripciones. A través de la tarjeta de clasificación y estudios de usabilidad, se puede determinar la mejor manera de clasificar y nombrar a los menús y los enlaces para que los usuarios sepan dónde buscar subpáginas.

En los menús de navegación, mejor texto que imágenes. Ya sabemos que dreamweaver lo hace fácil, pero créeme, los problemas son muy superiores a los beneficios.

Un flujo de navegación bien pensado con subsecciones siempre es mejor que utilizar menús desplegables.

Menús de conexión en cascada. La gente tiene problemas al utilizar los

menús que vuelan. Todavía veía con múltiples diseños de muchos menús en cascada, algunos de los cuales incluso en cascada en varios niveles. Mejores opciones existen, como por ejemplo, ampliar los menús en el lugar, simplemente disminuyendo el número de opciones de menú.

No mantener la funcionalidad lógica del botón “Atrás” del navegador.

Este es un principio básico en usabilidad. El visitante sabe que pulsando ese botón, va a volver a la página anterior que estaba visitando, no rompas esta regla.





63

No cambiar el color de enlaces visitados. Una buena presentación de la

navegación realizada en el pasado ayuda a entender la situación actual. Conociendo las localizaciones de tu pasado y presente, resulta más fácil decidir cuál es el siguiente paso. Los enlaces son un factor fundamental en el proceso de navegación. Los usuarios pueden excluir links que resultaron infructuosos en anteriores visitas. Al contrario, pueden volver a visitar enlaces que les resultaron útiles. Lo que es más importante, conocer que páginas han visitado ya libera a los usuarios de volver sin intención a volver a visitar páginas ya visitadas. Estos beneficios solo funcionan si suponemos lo siguiente: los usuarios pueden diferenciar entre los enlaces visitados y los no visitados, ya que pueden diferenciarlos por el color. Cuando los enlaces visitados no cambian de color, los usuarios demuestran mayor desorientación en los test de usabilidad.

Enlaces ocultos: Hay gente a la que no le gustan los enlaces subrayados,

pero tampoco hay que esconderlos con imágenes o algo similar, por lo menos hemos de destacarlos del resto del texto y contenido.

Zonas sin salida: Llevar al usuario a una web o menú con poca

información o ninguna para volver a la sección anterior puede hacer que abandone de inmediato la web.

Capas que se superponen: Hay que tener cuidado con menús

desplegables o capas que se mueven ya que pueden superponer con otras capas de la web y quedar ocultas tras estas o taparlas.

Navegación dinámica: Al igual que la navegación con arrastre, está muy

bien en pequeños aspectos para dar un toque moderno, pero la gente está acostumbrada a una navegación clásica.

Menús desplegables: Los usuarios suelen sacar el cursor del menú y este

se cierra inmediatamente, lo que genera una situación muy incómoda, por lo que si se ponen por lo menos que no sean pequeños y difíciles de navegar.

No incluir un enlace activo a la página de portada en la misma página de portada. Este es un caso especial de una directiva que se aplica a todas las páginas de los sitios web o intranet: nunca tengas un enlace que apunte a la página actual. (Un botón para refrescar los valores de las acciones u otra información cambiante es otra cosa y deben ser presentados como un botón, preferiblemente que un enlace, dado que éstos no nos llevan a otro lugar.) El enlace activo a la página actual causa 3 problemas:

o Si los usuarios hacen clic en él, será una absoluta pérdida de tiempo para ellos dirigirse a la misma página.

o Peor, tales enlaces le provocan a los usuarios la duda de si ellos

realmente están en la ubicación que piensan estar.

o La peor de todas, si los usuarios siguen estos enlaces estarán confundidos en sus nuevas ubicaciones, especialmente si la página es desplazada a la parte superior.

El enlace a la página de portada en la propia página de portada resulta, normalmente, de usar una barra de navegación universal que incluye el "home" como una opción. Eso está bien. Pero cuando los usuarios estén





64

en la página que es presentada en la barra de navegación, debes desactivar las opciones del enlace y resaltar éste, tal es la manera de indicar que esa es la ubicación actual.

No limitar la utilización de marcos o frames debido a que ocasionan problemas:

La dirección URL es la del “frameset” (archivo que contiene información sobre el conjunto de marcos utilizados) en vez de la página de contenido.

Dejan de funcionar los marcadores: favoritos, historial, copiado de URLs y pegado de otros documentos y e-mails.

Lo anterior impide la difusión boca a boca de los URLs.

Roban espacio valioso de la pantalla a expensas de contenido.

Se complica el proceso de impresión.

Confunden a los motores de búsqueda en la creación de los índices.

Las páginas externas vistas dentro de un marco se ven diferentes al diseño original.

Si la página de destino también está diseñada con marcos el problema de usabilidad se agrava.

Los errores más comunes a la hora de diseñar una página web considerando a las personas con discapacidades visuales. Los problemas habituales en la accesibilidad son:

Colocar imágenes sin texto alternativo.

Ausencia de texto alternativo para los puntos sensibles de los mapas de imagen.

El uso incorrecto de los elementos estructurales en las páginas.

Los sonidos no subtitulados y las imágenes no descritas.

La ausencia de información alternativa para los usuarios a los marcos (frames) o a los programas incrustados (scripts).

Pobres contraste entre el texto y el fondo de página.

Diseñar páginas muy largas con gráficos pesados, animaciones y componentes.

Sobrecarga visual: Párrafos enteros en negrita o frases completas que son

enlaces no contribuyen a la navegación y sobrecargan la página.

Los errores más comunes en el uso de la tipografía son:

Utilizar tamaños de letra inferiores a los perfectamente visibles.

Usar muchos formatos de texto en todo el sitio y hacer de su sitio un catálogo de fuentes. Deben usa las mismas fuentes, tamaños, paleta de colores, etc., a lo largo y ancho de su intranet. Usar solo las llamadas “Web safe fonts” que son las fuentes que se ven de la misma manera en la gran mayoría de los navegadores. Estas son Geneva, Verdana, Arial, Times New Roman y Courier.

Texto parpadeante. Hace difícil la atención a cualquier otro elemento de la

página.





65

Textos deslizantes. Leer un texto que se mueve es incómodo, marea, produce fatiga y no permite fijar la atención en otros elementos.

Texto no escalable. Un muro de texto es mortal para la experiencia

interactiva. Intimidante. Aburrido. Doloroso de leer. Escriba para la lectura online, no para la impresión. El texto debe soportar escaneabilidad, use trucos bien documentados:

o Sub cabeceras o Listas o Destaque palabras claves o Párrafos cortos o La pirámide invertida o Un estilo de escritura simple

Tamaño de fuente fija. Los CSS desafortunadamente dan el poder a los

sitios web de deshabilitar la opción de los navegadores de "cambiar el tamaño de la fuente" y especificar un tamaño de fuente fija. El 95% de las veces, esta letra fija es enana, reduciendo la capacidad de lectura para la mayor parte de la gente mayor de 40 años. Respete las preferencias del usuario y déjeles cambiar el tamaño del texto según lo necesiten. Además, especifique el tamaño de las fuentes en términos relativos -- no como un número absoluto de píxeles.

Los errores a la hora de colocar gráficos o imágenes en una página web:

Usar gráficos sólo para decorar la página de portada y no para que muestren contenidos reales. Por ejemplo, utilice fotos de personas las cuales tengan una conexión obvia con el contenido, opuesto a utilizar modelos o fotos comunes. Gráficas ilustrativas pueden distraer a los usuarios del contenido crítico.

Sobre los errores en animaciones:

Colocar animaciones innecesarias. Al tiempo que retrasan la

visualización de la página, distraen la atención del usuario al igual que el texto parpadeante.

Si todo las páginas web están completamente hechas en flash, DESPIDE a tus desarrolladores. Flash es solo una herramienta, una maravillosa y poderosa herramienta para mostrar animaciones, video, interfaces, carritos de compra etc… Eso NO QUIERE DECIR que necesites crear toda la web en flash. Míralo de esta manera, hasta Adobe (los que venden el software Flash y tienen los derechos legales) no tienen toda su web hecha en flash.

Los errores comunes en el diseño de iconos en sistemas, aplicables también a los iconos para páginas web son:

Insuficiente diferenciación entre iconos. Muchas veces en un set de

iconos tenemos muchos que se parecen y es bastante difícil distinguir uno de otro. Si no lees las leyendas que lo acompañan, fácilmente te equivocarás.





66

Iconos de la sección de Utilidades en Mac OSX. Siempre me confundo y lanzo la aplicación

que no toca. Este problema se hace más gordo cuando los iconos son de tamaño reducido.

El problema se agrava más cuando se reduce el tamaño de los iconos.

Demasiados elementos en un mismo icono. Cuanto más simple sea el icono, mejor. Es preferible mantener el número de elementos dentro del icono al mínimo. Sin embargo, los diseñadores de Microsoft, inspirados por el nuevo formato de los iconos de Windows Vista, decidieron hincharlos para justificar el hinchado presupuesto. Cada icono representa una mini-

historia con una trama. El problema es

que al hacerlos pequeños es imposible

saber que representan. Incluso con el

tamaño correcto ya cuesta saber

que significan.

Elementos innecesarios. Un icono

debe ser fácil de leer. Cuantos menos elementos tenga, mejor. Y es mejor aún si la imagen entera es relevante, no sólo una parte de ella. Por lo tanto tienes que prestar atención al contexto donde se encuentran los iconos. Echa un vistazo a estos iconos de bases de datos por ejemplo:





67

A primera vista, todo parece bien.

Pero si este programa (o una barra de herramientas) trabaja solo con bases de

datos, podemos ( y deberíamos ) eliminar la parte innecesaria.

El sentido no se ha perdido y

los iconos son mucho más

distinguibles.

Aquí tenemos un ejemplo real

de elementos innecesarios en

iconos de BeOS 5:

Los signos de verificación aquí son absolutamente superfluos. Por cierto, ¿por

qué están en rojo?.

Carencia de una misma línea de diseño en un set de iconos. Una línea

de diseño de dice cuando un conjunto de elementos tiene algo en común,





68

colores, estilos, perspectiva, tamaño, dibujo o cualquier propiedad que los identifique como una unidad. Si hay solo unos pocos iconos, es fácil para el diseñador mantener en la cabeza estas reglas para ir creando otros con la misma línea de diseño. Pero si se trata de una cantidad mucho mayor, como iconos en un sistema operativo, ya no es sólo un diseñador el que se encarga de la tarea, sino varios, y es entonces cuando tiene que existir unas instrucciones comunes de cómo diseñar los iconos.

Una multitud de estilos en el archivo shell32.dll de Windows XP. Estos son

los iconos por defecto sugeridos al usuario.

Perspectiva y sombras innecesarias en iconos pequeños. El progreso

no se detiene: las interfaces han ganado potencia y ahora son capaces de mostrar objetos semi-transparentes, usar más colores y ahora la tendencia está en hacerlos en 3D. ¿Pero es realmente útil para todos? ¡No siempre! Sobre todo si estamos hablando de iconos pequeños de 16×16 o más aún. Por ejemplo, tomemos el gestor de aplicaciones de RedHat 9:

La perspectiva en iconos tan pequeños es innecesaria e incluso

contraproducente.

Y este es el gestor de aplicaciones de Windows XP:





69

Como norma, los iconos en Windows XP tienen 2 píxel de sombra en

negro, pero en tamaños como 16×16 la sombra aparece demasiado grande

y hace a los iconos parecer sucios. El libro de direcciones ( Address Book )

se lleva la peor parte en este set.

Metáforas demasiado originales. Lo que se muestra en un icono es un

compromiso entre reconocimiento y originalidad. Antes de desarrollar una metáfora para el icono (imagen) es una buena idea como han solucionado el problema los demás. Tal vez la mejor solución no es la más original, sino más bien la adopción a una solución existente. Un ejemplo de excesiva originalidad es el icono de la papelera de OS/2 Warp 4, que en realidad no es una papelera sino una trituradora de papel.

Otro de los problemas con la elección de una trituradora es que no hay

ninguna que se le parezca. El icono parece una impresora con un pulpo

escondido dentro. Lo que está claro es que no es una solución acertada.

Nacionalidades o características sociales no es están teniendo en cuenta. Siempre es necesario tener en cuenta las condiciones en las que

el icono se va a mostrar. Un aspecto importante en este caso es el de las características nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un país a otro. Si nos dicen que tenemos que dibujar un icono para trabajar con correo electrónico, tiene perfecto sentido usar la metáfora real de un buzón de correo por ejemplo:





70

Estas imágenes son cortesía del artículo de

la wikipedia titulado “Post box“.

La respuesta puede encontrarse en el manual

sobre la creación de iconos para MacOSX.

“Usa elementos universales que las personas

reconocen fácilmente. Evita centrar la

atención en un aspecto secundario del

elemento. Por ejemplo, para un icono de

correo, un buzón rural sería menos

reconocible que un sello de correos”

La idea de usar un sello está bien, pero el uso del halcón de cola roja en la

imagen, es sin duda cuestionable.

Sin embargo, no sólo tienes que tener presente las

características nacionales…Esto me recuerda algo divertido.

Una vez, necesitábamos un icono que representara un filtro

de datos, que a menudo se usa la metáfora de un embudo.

Se señala como esto:

La respuesta del cliente fue la siguiente: “¡No entiendo porque para un filtro me

dibujas un icono con forma de vaso de Martini!

Imágenes de elementos de la interfaz dentro de los iconos. El manual sobre la creación de iconos para MaxOSX nos advierte:”Evita el uso de elementos de la interfaz Aqua en tus iconos, podrían confundirse con la propia interfaz.” Puedes hacer clic en uno de los radiobuttons representados pero en

realidad lo que has clicado es el icono entero.

Este por ejemplo es un interesante ejemplo de la interfaz de OmniWeb:

Presta atención a los botones anterior y siguiente, que botones tan raros

con leyendas debajo. Sin embargo no son botones, ¡son iconos!

Texto dentro de los iconos. Este error es muy común en iconos de programas. Es evidente que la primera cosa que te viene a la mente

cuando trabajas sobre un icono de una aplicación es adaptar el logotipo del programa al tamaño del icono. ¿Cual es el problema en insertar texto dentro del icono?. En primer lugar, está directamente relacionada con el idioma y por tanto impide la localización. En segundo lugar, si el icono es pequeño es imposible leer el texto. En tercer lugar, en el caso de los iconos de las aplicaciones, el texto se repite en el nombre del programa.

http://209.85.135.104/translate_c?hl=en&langpair=en%7Ces&u=http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIcons/chapter_14_section_5.htmlhttp://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIcons/chapter_14_section_5.html

http://209.85.135.104/translate_c?hl=en&langpair=en%7Ces&u=http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIcons/chapter_14_section_5.htmlhttp://developer.apple.com/documentation/UserExperience/Conceptual/OSXHIGuidelines/XHIGIcons/chapter_14_section_5.html





71

Dibujando fuera del marco de trabajo. Por regla general, este problema

se produce si has dibujado el icono en un programa de tratamiento vectorial. Con tamaños grandes todo se ve bien, pero en realidad los iconos son pequeños y con un número de píxeles limitados, así que cuando reduzcamos el tamaño y pasemos de vector-mapa de píxeles, el anti-aliasing suavizará los bordes.

7.2.2. Contenido

Carencia de Información en la página principal. Algunas intranets no ofrecen

ningún tipo de noticia o información en la página de inicio. Sólo enlaces. Esto no crea una buena primera impresión. También se pierde la oportunidad de llegar rápidamente a los usuarios con anuncios importantes.

No hacer fácil el acceso a los contenidos recientes de la página principal.

En general, los usuarios recuerdan cuando ellos han visto algo interesante en la página de portada. Sin embargo, a menos que la página muestre una lista de los contenidos recientes y ofrezca un enlace a ellos, los usuarios no tendrán la posibilidad de encontrar lo que están buscando de sus visitas ulteriores.

7.2.3. Desarrollo

Código prehistórico reemplazable con CSS. En muchos casos se pueden ver cosas,

como en la Web de correos de España, donde utilizan el tag <font> con una clase de CSS para hacer las letras en negrita, lo hace de esta forma:

72

<p><font class="txtNegrita">Lugares y medios de exposición.</font><br/>

En las Jefaturas Provinciales de Correos y Telégrafos, Ceuta y Melilla…</p>

Cuando deberían haber hecho:

<h3>Lugares y medios de exposición</h3> <p>En las Jefaturas Provinciales de Correos y Telégrafos, Ceuta y Melilla…</p>

Otro ejemplo mal aplicado lo podemos ver en la Web de correos, cuando quieren hacer

una negrita o un énfasis en una palabra utilizan de nuevo el tag <font> con una clase,

cuando podrían usar el tag <b> o el tag <strong> para dar más significado semántico al

asunto:

<p>Junto a este viaje al pasado, el <font class="txtNegrita">Museo Postal y

Telegráfico</font> abre una ventana al futuro con la exposición de una maqueta del

satélite Hispasat.</p>

Nótese la cantidad de veces que tendrán que escribir en cada documento la clase

class="txtNegrita" en cada página donde requieran negritas y títulos, si comparamos

class="txtNegrita" con la cantidad de caracteres que pueda llevar escribir los elementos

de un título por ejemplo notaremos un ahorro tremendo de caracteres como por

ejemplo <h3></h3> son 9 caracteres contra 18 caracteres de class="txtNegrita" si se

quitaran todas estas clases inútiles podrían ahorrar hasta 1 MB de caracteres de

atributos basura, caracteres de más a toda la totalidad de documentos.

El ejemplo correcto sería:

<p>Junto a este viaje al pasado, el <strong>Museo Postal y Telegráfico</strong> abre

una ventana al futuro con la exposición de una maqueta del satélite Hispasat.</p>

Y en la plantilla de CSS ponerle el color o el tipo de letra que desees.

Olvidarse de la semántica, los documentos son una pila de información sin clasificar…Eso mismo, una pila de información sin clasificar, la semántica es una de

las áreas de los estándares Web que más importancia tiene que haber en las páginas que ofrecen contenidos y servicios públicos, de hecho en todas las páginas debería haber un mínimo de semántica, uno de los problemas que observo es que muchas empresas grandes que tienen suficiente dinero para hacer estas cosas bien, lo hacen al revés, cuando la semántica no sólo nos permite darle un significado “esto es un título", “esto es un párrafo", “esto es una cita” sino también que nos dan clasificación y jerarquía dentro de un documento, por ende puede retornar más beneficios.

La jerarquía viene de los elementos como los títulos, listas, definiciones, y la

clasificación nos permite editar esas jerarquías desde CSS, en pocas palabras que, a

mejor jerarquizado y clasificado esté el código, más fácil es controlarlo con un CSS.

Ejemplo horrendo de la Web de Correos de España, para hacer un título y un párrafo

utilizan todo este código:

<tr valign="bottom">

<td height="24″ valign="bottom"><a href="/identidad/” class="TitSeccionBold">Una

nueva imagen, una nueva identidad</a></td>

</tr>

<tr>

http://www.correos.es/





73

<td height="6″ valign="top"><img src="/comun/img/lin_g_sep_largo.gif” width="310″

height="1″></td>

</tr>

<tr class="txtNormal">

<td height="25″ valign="top” class="txtNormal"> Correos rediseña su marca y todos sus

elementos clave de identificación visual <a href="/00/img/nuevaimg.avi”

class="txtLink">Ver vídeo</a></td>

</tr>

Como podemos apreciar en el código, prevalecen las ganas de armarlo todo en el

mismo documento de HTML, cuando podría estar mucho más limpio, semántico y

controlado por unas pocas reglas de CSS.

Podríamos mejorarlo de esta forma, en el HTML:

<div id="contenido"><h2><a href="/identidad/" class="TitSeccionBold">Una nueva

imagen, una nueva identidad</a></h2>

<p>Correos rediseña su marca y todos sus elementos clave de identificación visual. →

<a href="/00/img/nuevaimg.avi” class="txtLink">Ver vídeo</a></p></div>

¿Notan la cantidad de caracteres, imágenes y código mal utilizado que he ahorrado?

…y en el CSS, creó una regla para que no se tengan que repetir ni usar más clases

indebidamente:

#contenido h2 { color: #ccc; font: 1em Arial, Verdana, sans-serif; border-bottom: 1px solid #ccc; margin: 0 0 0px 0; } #contenido p { font: 1em Arial, Verdana, sans-serif; color: #000; }

Con esta simple regla de CSS y un código de HTML coherente, no deberé escribir más

código de más en el HTML, ni clases, ni usar imágenes para hacer líneas o

“subrayados” en los títulos, tampoco usarán imágenes transparentes para “acomodar”

elementos (uno entre otro o para separarlos), por que con el uso debido de CSS se

puede controlar el posicionamiento de cada elemento que se encuentre en el

documento.

HTML comentado, es igual a más peso en la página

Es común en desarrollo comentar ciertas partes de un código, en programación puede

incluso ahorrar mucho tiempo por que cuando se comenta no se borran cosas, o

simplemente se comentan para probar cosas… pero en HTML, cuando se comenta una

línea, el servidor Web procesa la página, y el código comentado, enviándolo al

ordenador cliente, de modo que el mismo navegador es el que no procesa este código

comentado.

Un error básico es utilizar los comentarios de HTML para comentar largas porciones de

código HTML, los comentarios de HTML están hechos para realizar ayudas, o para

hacer anotaciones.

El problema comienza cuando se comenta 10 líneas de código en HTML éste sigue

apareciendo y siendo procesador por el servidor, debería comentar esto con otro tipo

de lenguaje, de modo que sea procesado directamente en el servidor Web y no en el

navegador.

74

Ejemplo de una porción de código encontrada en la web de correos:

 <!–<td height="24″ valign="bottom"> <a href="/01/02/0102_b.asp” onclick="javascript:pulseExt(’men01′);” class="TitSeccionBold"> Cartas Certificadas</a> </td> </tr> <tr> <td height="6″ valign="top"><img src="/comun/img/lin_g_sep.gif” width="310″ height="1″></td> </tr> <tr> <td class="txtNormal” height="25″ valign="top">Para enviar con total tranquilidad sus comunicaciones especialmente importantes, con entrega bajo firma.</td> </tr> <tr> <td height="5″><img src="/comun/img/pix_fondo.gif” width="1″ height="1″></td> </tr>–> <!– 5–> <!–<tr> <td height="24″ valign="bottom"> <a href="/00/04/0004.asp” class="TitSeccionBold"> Acceso a Internet</a> </td> </tr> <tr> <td height="6″ valign="top"><img src="/comun/img/lin_g_sep.gif” width="310″ height="1″></td> </tr> <tr> <td class="txtNormal” height="25″ valign="top">Acceda a internet mediante línea de alta velocidad. Disponible en más de 35 oficinas distribuidas por todo el territorio.</td> </tr>–> Esto nos ahorra tener que enviarle al ordenador cliente, código que nunca procesará e

utilizará, unos cuantos KB menos de peso en cada página. Esto se logra no utilizando

los comentarios normales de HTML  sino utilizando algún lenguaje de scripting

normal como PHP o ASP.

Otra de las cosas que se recomienda es no comentar largas porciones de código, sino

directamente borrarlas o extraerlas a otro documento de repositorio.

Utilizar hojas de estilo en línea o embebidas en los documentos. Un factor importante

en los documentos Web debe ser la separación del contenido de la presentación, de

modo que el HTML sea para contener y el CSS para presentar, por eso, utilizar hojas

de estilos embebidas en el mismo documento no es sano.

En muchas páginas institucionales vemos como embeben el código de las hojas de

estilos en la cabecera, en vez de tener 1 hoja de estilos externa con la información para

la estructura y posicionamiento de los elementos principales, y otra hoja de estilos que

varía de sección en sección, 1 para todas las páginas, con la información mínima, y la

otra es una información única para realizar un posicionamiento de un elemento o algo

que se encuentre en 2 o 3 páginas, aquí estamos dividiendo recursos, y economizando

trabajo. Algo común que vemos en la Web de Correos de España y el diario El País:

<head>

<style>





75

.TA

{

scrollbar-3dlight-color:#666666;

scrollbar-arrow-color:#666666;

scrollbar-base-color:#666666;

scrollbar-darkshadow-color:#666666;

scrollbar-face-color:#e2e2e2;

scrollbar-highlight-color:#e2e2e2;

scrollbar-shadow-color:#c0bebe

}

</style>

</head>

Nótese que este error solo hace que un documento de HTML contenga caracteres que

no se puedan cachear de ninguna forma tradicional, de hecho cada vez que el usuario

recurra a esta página, tendrá que descargarse y procesar esta porción de código, que

es poco si, pero cuenten unos 70 documentos, y hagan el cálculo de cuantos KiloBytes

llevan sumando.

En la Web de Correos, se pueden observar cosas como porciones masivas de código

CSS en todos los documentos, no sólo ubicada entre los elementos sino en el medio

del documento mismo, cosa que no está permitido, ni es una práctica muy sana…

Tampoco es sano ver que un tag bold tiene estilos en línea, por ejemplo, observamos

en la página del diario El País:

<div id="lClipping" class="TA" style="overflow: auto; position: absolute; left: 0px; top:

0px; width: 187px; height: 208px; z-index: 5; visibility: hidden;"></div>

Algo bien hecho hubiera sido como esto (aprovechando que utilizan el id “lClipping")

<div id="lClipping" class="TA"></div>

Esto es código de HTML que se procesa una y otra vez, se envía y se descargar cada

vez que alguien requiere la página, ¿No es mejor asignarle una clase especial a ese

tipo de módulos? ¿Y de esta manera se aprovecha todas las clases en múltiples

páginas a tener que cargar en línea siempre la misma cantidad de código? Esto está

mal.

Mapa Web del sitio. ¿Para qué hace falta una página con un millar de enlaces? ¿El

usuario no puede encontrar lo que busca? Entonces eso sucede por 2 factores:

o Página mal organizada o Posee un buscador que no hace nada útil.

Está claro, en el 100% de los casos noto que el mapa del sitio es algo inútil, no ayuda

en nada, el usuario no tiene por qué mirar entre un millar de enlaces, no hace falta,

tampoco le ofrece la solución instantánea.

La solución es un buen buscador, de modo que ni bien entro a un sitio, no tengo que

estar 1 hora inspeccionando una página con 700 enlaces. Nada mejor que un buen

buscador y una buena arquitectura de la información.





76

Estos son algunos errores comunes en CSS.

Uso innecesario del valor 0

El código siguiente no necesita la unidad especificada si el valor es cero.

padding:0px 0px 5px 0px;

En su lugar puede ser escrito de esta manera:

padding:0 0 5px 0;

De la misma manera es igual para otros estilos. Ej.:

margin:0;

No malgaste espacios agregando unidades tales como px, pt, em, etc, cuando el valor

es cero. La única razón de hacer esto es si necesita cambiar estos valores más tarde.

Si no declarar estas unidades no tiene sentido. Los píxeles cero son iguales que los

puntos cero.

Sin embargo, line-height puede no tener unidad. Por eso es válido lo siguiente:

line-height:1;

De cualquier manera puede utilizar una unidad en concreto como em si lo deseas.

Los colores en formato hexadecimal necesitan una almohadilla

Esto está mal:

color: ea6bc2;

Debe ser:

color: #ea6bc2;

O esto otro:

color: rgb (234.107.194);

Valores duplicados en los códigos de colores.

No escribir el código de esta manera:

color: #ffffff;

background-color:#000000;

border:1px solid #ee66aa;

Los valores duplicados pueden ser omitidos. Escribiendo los códigos de esta manera:

color:#fff;





77

background-color:#000;

border:1px solid #e6a;

¡Por supuesto esto no debes hacerlo con códigos como este!

color: #fe69b2;

Evitar repeticiones de código innecesario.

Evita usar varias líneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar

los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente

no es necesario:

border-top:1px solid #00f;

border-right:1px solid #00f;

border-bottom:1px solid #00f;

border-left:1px solid #00f;

Podríamos resumirlo en una única línea esta:

border:1px solid #00f;

La duplicación es necesaria con los estilos en cascada.

En los estilos en cascada es aceptable repetir el mismo código para un elemento dos

veces, si significa evitar la repetición mencionada en el punto arriba. Por ejemplo,

digamos que tenemos un elemento donde solamente es diferente el "border" izquierda.

En vez de poner cada "border" escrito usando cuatro líneas, uso sólo dos:

border:1px solid #00f;

border-left:1px solid #f00;

En este caso primero definimos todos los "borders" con el mismo color pero más tarde

para ahorrarnos dos líneas de código redefinimos el "border" izquierda a otro color, de

esta manera hemos ahorrado dos líneas de código.

El ejemplo malgastando espacio quedaría así:

border-top:1px solid #00f;

border-right:1px solid #00f;

border-bottom:1px solid #00f;

border-left:1px solid #f00;

Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la

página pues estamos definiendo el "border" izquierda dos veces, pero la carga de este

proceso es insignificante.





78

Los estilos inválidos no hacen nada.

Un ejemplo es suficiente para explicar este error:

padding:auto

Este estilo solo puede ser aplicado a width y height pero no a padding.

Espacio perdido.

Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque

a algunos les encanta condensar todo, no dejando ningún espacio.

Especificar los colores sin usar palabras. Definir los colores usando las palabras que lo definen no es una buena idea

puesto que estaríamos confiando en el navegador para que el interprete que

color y código debe aplicar. Las tonalidades para un mismo nombre de color

cambian mucho de un navegador a otro.

Es una buena práctica especificar siempre el color por su código hexadecimal.

Ej.: utilizar "#fff" en lugar de blanco.

Agrupar estilos idénticos

Es común ver los estilos escritos una y otra vez con el mismo código, aún

cuando el estilo es igual.

Sería conveniente agruparlos y así optimizaríamos espacio:

h1, p, #footer, .intro {

font-family:Arial,Helvetica,sans-serif;

}

También nos hará mucho más fácil la tarea de actualizar el código.





79

8. LAS INTRANETS DEL FUTURO 8.1. Elementos de la Intranet del Futuro – Modelo 1

Los gráficos que se incluyen son sólo referenciales y sirven para ayudar a conceptualizar los

elementos que conformaran el diseño de las Intranets futuras.





80

8.2. Elementos de la Intranet del Futuro – Modelo 2

En el Anexo 2 encontrará más información acerca del formato SVG.





81

8.3. Elementos de la Intranet del Futuro. Modelo 3

Imágenes 3D del Juego de video Evil under sun y [email protected]





82

9. CONCLUSIONES

9.1. Conclusiones del Estudio de Diseño Visual.

9.1.1. Intranets de Administraciones Tributarias y Aduaneras19

Las Cinco Buenas Prácticas más usadas por este rubro de Intranets son:

1. Los Estándares de Accesibilidad.

2. El buen uso del Color en las Interfaces.

3. El buen uso de las fuentes y tipos de letra en el diseño de las páginas.

4. Los Estándares de Usabilidad.

5. La facilidad de la navegación mediante barras de navegación y enlaces

fáciles de identificar y usar.

9.1.2. 10 Mejores Intranets de Gobierno a nivel mundial y las 10 Mejores Intranets a nivel mundial del 200720.

Las 3 Buenas Prácticas más usadas por la Intranets ganadoras en general son:

1. Los Estándares de Usabilidad.

2. El adecuado uso del color.

3. El uso de Hojas de Estilo CSS o Plantillas para mantener el diseño en las

páginas de su Intranet.

9.2. Conclusiones extraídas de las Buenas Prácticas de las Intranets21

9.2.1. Antes de Iniciar la creación de la Intranet

Distinguir Sitios web corporativos de Intranets, para lograrlo deberá elaborar una estrategia general de la Intranet considerando las necesidades específicas de la organización, de los directivos y de los usuarios, así como, las metas que deberá cumplir. Para ello, apóyese en las experiencias de otros organismos y realice una Investigación de Usabilidad.

Cree un nombre a la Intranet que identifique a los trabajadores con su Institución.

19

Revisar Cuadro de Buenas Prácticas en Diseño Visual de las Administraciones Tributarias y Aduaneras en anexo 10.4.1. 20

Revisar los cuadros de Buenas Prácticas en Diseño Visual en los anexos 10.4.2 y 10.4.3. 21

Buenas Prácticas en Intranets descritas en ítem 6. También puede visualizar el cuadro de resumen que se encuentra el anexo 10.5.4





83

9.2.2. Durante la creación de la Intranet

9.2.2.1. Diseño Visual

Seguir las pautas establecidas en los estándares internacionales globales como:

W3C, referido a Estándares Web.

ISO 13407, referido a Procesos en el Diseño centrado en el usuario.

IEC 9241-11, referido a la Guía de Usabilidad

IEC 9126, referido a Ingeniería de Software, etc.

Los educacionales en el caso de la interfaces relacionadas con educación y e-learning (SCORM, AICC).

Los conceptos de Arquitectura de la Información y Diseño de Interacción.

Considerar la creación de un Diseño Flexible y Arquitectura para la escalabilidad de la Intranet.

Colocar la opción de Agregar a Favoritos, en cada página, que sea de interés del usuario. Por ello, cada página contará con una URL propia y exclusiva.

Permitir la Personalización, formando Comunidades o Perfiles de Usuario, para evitar el exceso de contenido en la Intranet.

Considerar las Reglas de Composición Fotográfica y optimizar el uso de las imágenes.

Considerar las Reglas de Composición del Arte para los dibujos e Ilustraciones que se requieran en la Intranet.

Considerar los conceptos de Semiótica y Señalética para la creación de iconos.

Tomar en cuenta que cada elemento visual de la página de la Intranet como: menús, botones, iconos, fotos, letras, etc. Tiene consideraciones específicas, mencionadas en este Estudio. Que deben complementarse con conceptos de Comunicación Visual e Identidad Corporativa.

Crear una simple e intuitiva interfaz de usuario y arquitectura.

Añadir enlaces en los elementos que sean necesarios, tomando en cuenta las recomendaciones para el uso de enlaces mencionados en las Buenas Prácticas de este Estudio.

9.2.2.2. Contenido

Identificar al Editor líder y a los Editores de apoyo, capacitarlos y centralizar en ellos la edición del contenido, facilitándoles herramientas que simplifiquen su trabajo.

Seguir las recomendaciones para la organización de contenidos contemplando sus elementos de comunicación.

Muestre las políticas de uso y su confidencialidad de la Intranet.

Establezca una denominación convencional para los archivos descargables.





84

9.2.2.3. Comunicaciones

Crear una Estrategia de Comunicación en conjunto con el Área de comunicaciones para el lanzamiento de la Intranet y comunique los beneficios de la estandarización.

9.2.3. Después de creada la Intranet

9.2.3.1. Gestión

Mida el ROI de la Intranet.

9.2.3.2. Diseño

Pruebas de Usabilidad para perfeccionar la Intranet.

Atender las notificaciones rápidamente.

Cree un Manual de Estándares Gráfico o Estilos.

9.2.3.3. Contenido

Supervisar la producción de contenido y revisarlos antes de su publicación.

Capacitar al personal para afrontar las posibles emergencias que puedan surgir en la Intranet.

9.3. Conclusiones Específicas extraídas de los Doce Casos de Administraciones Tributarias y Aduaneras.



[email protected]






85

9.4. Conclusiones sobre el futuro de las Intranets

El futuro de las Intranets está inevitablemente ligado a cambiar de soporte, actualmente las podemos visualizar en laptops y pcs, algunas interfaces sencillas pueden visualizarse en los celulares. Su futuro es ser omnipresente o persuasive, significaría ser visualizado en nuevos aparatos o artículos de uso cotidiano como: espejos, relojes o hasta en el zapato recordando la parodias de los primeros celulares en la serie El Super Agente 86.

Entre los elementos más resaltantes que conformarán está Intranet Futura se encuentran:

1. La Búsqueda de Información utilizando Inteligencia Artificial unida a la Web Semántica que permitirá la búsqueda de archivos multimedia (audio, animaciones y video) además de la búsqueda de contenido.

2. Visitas virtuales a las sedes de Empresa u Organismo para conferencias, reuniones o charlas para funcionarios que se encuentran en distintos lugares.

3. Uso de aplicativos GPS para localizar a algún funcionario o al transporte de la Institución.

4. Capacitación utilizando herramientas multimedia (audio, animaciones y video). 5. Realización de cursos, tutoriales educativos por medio de la creación de

mundos virtuales de enseñanza parecidos a Second Life. 6. Aplicaciones de áreas internas o por procesos de la Organización. 7. Herramientas de Escritorio como Agenda Institucional y Personal, Reloj

Mundial para conocer la hora de algún país donde se encuentre el funcionario para coordinar una posible reunión o entrevista. Editores de Texto, Hoja de Cálculo, etc. que puede ser visualizada desde la Intranet.

8. La implementación de aplicaciones Killer que animen a los usuarios a usar la nueva intranet.

Se destaca que en el caso del Diseño Visual tendremos un uso masificado de archivos MNG en lugar de los actuales formatos GIF y JPG. Y el formato SVG (Scalable Vector Graphic) para los JPG y GIF estáticos. También se puede masificar en el futuro el uso del 3D para la creación de mundos virtuales.

9.5. Conclusiones sobre el Diseño Visual de la Intranet de SUNAT



[email protected]






86

9.6. Conclusiones Finales

Siga las Buenas Prácticas mencionadas en este Estudio y verifique que durante y después de creada la Intranet, no se cometan los errores comunes mencionados en este Estudio.

La Usabilidad es estratégica en una empresa u organismo. Es aún muy común escuchar comentarios y preguntas como: “¿Qué es más importante, la usabilidad o el diseño?”, o “Este cliente no busca usabilidad, sino diseño”. Ambos comentarios demuestran una falta de claridad a la hora de interpretar y entender la usabilidad. Independientemente de estilo gráfico que se desee conseguir en una web, la usabilidad es un elemento crítico a tener en cuenta desde el comienzo de la primera idea, desde que se empieza a pensar en la creación de una web, y durante todo el proceso de diseño y desarrollo. La usabilidad no debe considerarse como un control de calidad. Una Intranet puede tener una buena usabilidad y ser

de pobre calidad (debido a otros factores que influencian la calidad, como puede ser, por ejemplo, la calidad del contenido). Sin embargo, no es posible considerar a una Intranet de alta calidad si es pobre en Usabilidad. En el libro “La Obsesión por el Diseño”, de Tom Peters. Entre muchas otras

cosas, Peters explica que “para la mayor parte de las personas, “diseño” significa

apariencia, cuando el diseño es el alma fundamental de una creación humana.”

Peters habla del diseño no sólo como la parte gráfica o aspecto (o “look & feel”) de

un producto (incluida una web), sino como la definición funcional de dicho producto.

Es decir, el diseño del producto es estratégicamente clave para la empresa que lo

produce.

No se puede elegir entre diseño o usabilidad, ya que cualquier Intranet,

independientemente del tipo de diseño gráfico, necesita de una capacidad para ser

usado por un usuario final específico ante un contexto específico.

Las Intranets en un futuro próximo se convertirán en el escritorio de trabajo de los empleados de una institución o empresa, poco a poco dejaremos de lado los software de escritorio u otros, para encontrar sistemas que están integrados a la Intranet, que se activan y funcionan desde la Intranet, efectuando desde un documento hasta presentaciones, grabaciones de video y voz, gestión de proyectos y muchísimas más funciones específicas de los procesos y servicios de cada Institución. La personalización será un requisito indispensable con opciones de configuración de temas en el diseño de la página así como el grado de importancia que tendrá cada opción en la interfaz de su Intranet. Trasladaremos nuestras oficinas a nuestro hogar y realizaremos reuniones virtuales. Podremos trabajar cómodamente en cualquier parte del mundo, sin necesidad de estar presente en el local de la empresa.

Trabajar la Intranet se convertirá en algo muy confortable, ya que mediante instrucciones por voz podremos indicarle a la computadora en que aplicativo de la Intranet queremos trabajar, a que opción ingresar, además de dictarle los datos para el llenado de un formulario. Conforme los avances se van desarrollando e implementando cada persona podrá tener un chip insertado en alguna parte del cuerpo que le permita identificarse, transmitiendo sus pensamientos e instrucciones a la computadora, a un celular inteligente o a cualquier aparato, las investigaciones continúan realizándose en el campo de la Inteligencia Artificial.





87

10. ANEXOS 10.1. CUADRO COMPARATIVO N° 1 DE LA APLICACIÓN DE BUENAS

PRÁCTICAS

10.1.1. Leyenda

INTRANETS TRIBUTARIAS

I1= Servicio de Impuestos Nacionales – Bolivia

I2= Secretaria de Ingresos Federales del Brasil

I3= Servicios de Impuestos Internos – Chile

I4= Departamento de Aduanas e Impuestos de Hong Kong

I5= Servicio de Rentas Internas – Ecuador

I6= Agencia Estatal de Administración Tributaria – España

I7= Superintendencia de Administración Tributaria – Guatemala

I8= Servicio de Aduana y la Oficina de Tarificación, Ministerio de Finanzas – Japón

I9= Servicio de Administración Tributaria – México

I10= Dirección General de Ingresos del Ministerio de Economía y Finanzas – Panamá

I11= Superintendencia de Administración Tributaria – Perú

I12= Dirección General de Impuestos – DGCI - Portugal

LAS 10 MEJORES INTRANETS GUBERNAMENTALES

I1= Defense Finance and Accounting Services – Estados Unidos

I2= Department for Transport – Reino Unido

I3= Department for Victorian Communities – Australia

I4= Department of Veterans Affairs Mid- Atlantic Health Care Network – Estados Unidos

I5= Federal Reserve Bank of Richmond – Estados Unidos

I6= Government Offices of Sweden – Suecia

I7= London Undergroup – Reino Unido

I8= National Research Council of Canada – Industrial Research Assistance Program

I9= Senate Republican Conference – Estados Unidos

I10= Workplace Safety and Insurance Board of Ontario - Canada

LAS 10 MEJORES INTRANETS A NIVEL MUNDIAL

I1= American Electric Power – Estados Unidos

I2= Comcast – Estados Unidos

I3= DaimlerChvsler AG – Alemania

I4= The Dow Chemical Company – Estados Unidos

I5= Infosys Technologies Limited – India

I6= JPMorgan Chase & Co – Estados Unidos

I7= Microsoft Corporation – Estados Unidos

I8= National Geographic Society – Estados Unidos

I9= The Royal Society for the Protection of Birds – Reino Unido

I10= Volvo Group - Suecia

PUNTUACIÓN

0 = Su Intranet NO realiza esta Buena Práctica

1 = Su Intranet SI realiza esta Buena Práctica

-- = Este dato no aparece en el Reporte de Norman Nielsen Group





88



[email protected]


10.1.2. Conclusiones Generales de la autora extraídas del Cuadro

Comparativo N° 1 de las Buenas Prácticas sobre los 32 casos de Intranets expuestos en este Estudio.



[email protected]


10.2. VENTAJAS DEL USO DEL FORMATO SVG Y SUS POSIBILIDADES

Tiene todas las ventajas asociadas a un formato vectorial (las que comentamos en las páginas

de diseño gráfico): es escalable, compacto, con formas siempre editable a través de curvas

Bézier, con contornos suavizados, transparencias, y capaz de incluir, si es preciso, bitmaps.

El tamaño de los SVG es muy compacto.

El texto que incluyen es editable: admite las fuentes escalables más comunes, como TrueType

o Type 1. Esto supone una diferencia enorme con los actuales GIF o JPG: el texto que

contienen se puede editar, seleccionar, ser indexado por los buscadores.

La calidad de color es excelente; el color del gráfico se puede calibrar con los sistemas

estándar de gestión de color.

El fichero SVG no es binario: se trata de un fichero de texto normal y corriente. Esto significa

que se puede editar incluso en el Bloc de notas, y sus contenidos se pueden indexar, buscar.

Es compatible con los estándares actuales de la web y --lo que es más importante-- con los

futuros.

Soporte de hojas de estilo CSS. Esto significa que con las hojas de estilo podemos modificar,

de la forma más poderosa y fácil, ¡incluso los gráficos de las páginas web! El control y poder

creativo que esto supone es insuperable.

Será posible crear páginas con una riqueza tipográfica y de layout sin precedentes, sin

sacrificar la accesibilidad del contenido escrito.

Puede incluir código (scripts) que modifican el gráfico dinámicamente en función de las

necesidades.

Al ser XML, es un formato extensible: los fabricantes podrán adoptarlo como formato nativo de

sus aplicaciones, añadiendo las características específicas que deseen, pero siempre

mantendrá la compatibilidad básica y universal con toda aplicación que reconozca el formato.

Admite efectos como sonido, efectos visuales al hacer clic o mover el ratón, etiquetas

informativas...

Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java,

JavaScript, Perl o XML. Por ejemplo, pueden crearse al momento gráficos de excelente calidad

con las cotizaciones de bolsa en tiempo real; un reloj analógico, con minutos y segundos,

requiere sólo 2K de código.

SVG puede llegar a simplificar

extraordinariamente el

"workflow" para la web. En

una aplicación única se podrá

generar casi todo el contenido

de las páginas, y convertirse

en un formato universal: todos

los programas podrán abrir

todo tipo de ficheros. Los

gráficos SVG no serán, como

hasta ahora, una versión

mutilada de un gráfico que ha





92

pasado por varias aplicaciones. Se ahorraran conversiones, pasos de un programa a otro,

tareas de optimizar, cambiar de tamaño, etc.

Los gráficos SVG, como en este ejemplo de un mapa de Viena, pueden generarse

dinámicamente en un servidor, a partir de los datos solicitados por el visitante (ver la dirección

del ejemplo más abajo.)

A diferencia de otros formatos gráficos, el contenido de un archivo SVG es texto normal. Esto

significa que puede editarse incluso con un bloc de notas. Aquí tenemos un ejemplo del código

de un svg. Está escrito en xml; los diferentes componentes del gráfico se identifican en cada

carpeta (por ejemplo, rect, polygon...) y los parámetros figuran al lado.

Este formato parece el sueño de todos los diseñadores hecho realidad. Ciertamente, las

posibilidades están ahí. Pero aún hay un largo camino a recorrer. Las soluciones --o los

apaños-- actuales (html + flash) tienen vigencia asegurada durante unos años. De momento,

Flash ofrece mucha más interactividad, una implantación creciente y facilidad de uso. Casi el

80% de los navegadores pueden ver películas flash. Así, ¿Se trata de una batalla perdida antes

de comenzar? ¿Sucederá lo mismo que con el formato PNG? Pese a sus excelentes

cualidades, PNG no ha llegado a imponerse a los GIF o JPG, que son la norma en los gráficos

para la web. De hecho, técnicamente es superior en algunos aspectos, pero sigue con las

limitaciones de un formato bitmap, cosa que ha dificultado que llegara a ser utilizado de forma

habitual.

La situación con los SVG es algo diferente, porque no pretende sustituir un formato que

funciona perfectamente como el de Flash, sino abrir todo un nuevo mundo de posibilidades en

el diseño web. Ver algunos ejemplos de lo que aportará SVG a la web nos abre los ojos a ideas

sorprendentes.

10.3. EVOLUCIÓN DE LA WEB

10.4. Estudio del Diseño Visual

10.4.1. Intranets de Administraciones Tributarias y Aduaneras


Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]


ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES

TRIBUTARIAS Y ADUANERAS



94

10.4.2. Las Diez mejores Intranets de Gobierno a nivel mundial








95

10.4.3. Las Diez Mejores Intranets a nivel mundial del 2007








96

10.5. Buenas Prácticas en Intranets

10.5.1. Administraciones Tributarias y Aduaneras








97

10.5.2. Las Diez Mejores Intranets de Gobierno








98

10.5.3. Las Diez Mejores Intranet a nivel mundial del 2007








99

10.5.4. Buenas Prácticas en el Diseño Visual extraídas de otras fuentes.

1. Otros estándares de Accesibilidad como: • Etiquetas Alt en imágenes, animaciones y

mapas de img. • Ofrecer una descripción o transcripción del

audio y video. • Atributo longdesc.

2. Algunos estándares de Usabilidad como:

• Lectura jerárquica de arriba hacia debajo y de izquierda a derecha.

• Contraste de letras y colores de fondo adecuado.

• Orden lógico de tabulación. • Claros mensajes de error. • Utilización de tablas. • Uso efectivo de botones.

3. Aplicar Teoría del Color y lograr simplicidad,

consistencia y claridad en su uso.

4. Considerar las Reglas de Composición Fotográfica como: Centro de Interés, rellenar el

encuadre, líneas, flujo, dirección, repetición, etc.

5. Nombrar a los enlaces de manera descriptiva y usarlo sólo donde sea necesario.

6. Acceder a las páginas con un máximo de 3 clics.

7. Considerar las Reglas Composición del Arte para los dibujos e

Ilustraciones. 8. Considerar los conceptos de Semiótica y Señalética para

creación de iconos.

9. Diseño Flexible, Interfaz simple e intuitiva que permita la escalabilidad de la Intranet.

10. Utilizar conceptos de Comunicación Visual e Identidad Corporativa.

11. Optimizar el uso de imágenes, audio y videos.

12. Seguir las pautas establecidas en los estándares

internacionales globales como:

W3C, referido a Estándares Web.

ISO 13407, referido a Procesos en el Diseño centrados en el usuario.

IEC 9241-11, referido a la Guía de Usabilidad. Los conceptos de Arquitectura de la Información y Diseño de Interacción.





100

10.6. Errores comunes en el Diseño Visual de Intranets

1. Pobre Diseño de páginas: Muchos enlaces,

demasiados niveles (más de 5 clics), sobrecarga de información.

2. Mal empleo del color: Muchos colores, demasiados saturados.

3. Errores en las fotografías: Reflejos del Flash, ojos rojos, líneas torcidas y desniveladas, efecto de viñeteo.

4. Errores en la navegación:

• Desaparición de menús en pág. Interiores. • Preferir texto a imágenes en el menú. • Uso de menús desplegables o en cascada • Que no funcione la opción Atrás del

navegador. • No cambiar el color de los enlaces al visitar

la pág. • Enlaces ocultos, zonas sin salida, no incluir

un enlace al inicio de la Intranet. • No limitar el uso de marcos o frames.

5. Diseñar páginas muy largas, con gráficos y animaciones pesadas.

6. Colocar gráficos sólo para decorar la página y no para mostrar un contenido real.

7. Mal uso de la Tipografía.

• Tamaños de letra ilegibles. • Usar distintos tipos de fuente y diferentes a los

convencionales. • Texto parpadeante, deslizante, no escalable.

8. Errores en animaciones. • Colocar animaciones innecesarias. • Crear toda la Intranet en flash.

9. Errores en los iconos.

• Poca diferenciación entre iconos. • Demasiados elementos en un mismo icono o elementos

innecesarios. • Carencia de una misma línea de diseño en un set de

iconos. • Perspectivas y sombras innecesarias. • Metáforas demasiado originales que no se entienden. • No tomar en cuenta las características propias de cada

país. • Imágenes de los elementos de la interfaz dentro de los

iconos. • Texto dentro de los iconos.

10. Crear una sobrecarga visual.

10.7. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL

10.7.1. Participantes

BOLIVIA Organismo: Servicio de Impuestos Nacionales

BRASIL Organismo: Secretaria de Ingresos Federales del Brasil

CHILE Organismo: Servicios de Impuestos Internos

CHINA– HONG KONG

Organismo: Departamento de Aduanas e Impuestos de Hong Kong

ECUADOR Organismo: Servicio de Rentas Internas

ESPAÑA Organismo: Agencia Estatal de Administración Tributaria

GUATEMALA Organismo: Superintendencia de Administración Tributaria

JAPÓN Organismo: Servicio de Aduana y la Oficina de Tarificación, Ministerio de Finanzas

MÉXICO Organismo: Servicio de Administración Tributaria

NICARAGUA Organismo: Dirección General de Ingresos (DGI)

PÁNAMA Organismo: Dirección General de Ingresos del Ministerio de Economía y Finanzas

PÉRU Organismo: Superintendencia de Administración Tributaria

PORTUGAL Organismo: Dirección General de Impuestos - DGCI

10.7.2. Grado de satisfacción de los usuarios de la intranet



[email protected]






102

10.7.3. Servicios adicionales que posee su Intranet



[email protected]






103

10.7.4. Arquitectura, Plataforma y Soporte



[email protected]






104

10.7.5. Sobre el servicio



[email protected]






105

10.7.6. Buenas Prácticas a nivel de Organización



[email protected]






106

10.8. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL



[email protected]






107

10.9. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007



[email protected]






108

11. BIBLIOGRAFÍA

Ponencia: Administración Pública del Futuro y Bienestar Social Autor: Francisco José Climent Fernández Evento: II Congreso Online del Observatorio para la CiberSociedad Web: http://www.cibersociedad.net/congres2004/index_es.html Año: 2004 Documento: Entorno Colaborativo de Trabajo: La Intranet 2.0 Autores: A. Carmona Ramos, M. Bernal, J. Cerero, J. García León, V. González Andrés, L. Iváñez Jiménez, R. Laó, G. López Ibáñez, E. Lora, C. Méndez Martínez, E. Puerto, M. Ruiz Ramos, J. Trancoso. Organización: Junta de Andalucía – Consejería de Salud Año: 2007 Artículo: Beneficios de usar una Intranet Autor: Gustavo Gretter Organización: InnovaAge Web: http://www.innovaage.com/innovanet/macros/TextContent.jsp?contentid=77&version=1&channelid=1 Artículo: FAQ sobre Intranets Autor: Juan Fernando Zuluaga C. Organización: Intranet Total Web: http://www.intranettotal.com/referencia/faq.htm Libro: Arquitectura de Información: Introducción al Proceso de Desarrollo en el Diseño de Interfaces de Usuario (Draft). Autor: Juan Carlos Pantoja Ibañez. Editorial: Universidad de Concepción. Chile Año: 2004 Libro: Planeta Web 2.0 Autor: Cristóbal Cobo Romaní y Hugo Pardo Kuklinski Editorial: Grupo de Investigación en Interacciones digitales (GRID) de la Universidad de Vic y a la Facultad Latinoamericana de Ciencias Sociales – FLACSO México. Año: 2007 Artículo: Antecedentes Históricos de las Intranets Autor: Patricio Pastor H. Organización: Universidad de Chile. Sistema de Servicios de Información y Bibliotecas (SISIB) Web: http://www.innovaage.com/innovanet/macros/TextContent.jsp?contentid=76&version=1&channelid=1 Año: 2007 Artículo: Las Intranets en el siglo XXI Autor: Pedro Román Graván y Purificación Toledo Morales Organización: Universidad Politécnica Salesiana de Ecuador Web: http://www.sol.edu/portal/modules.php?name=News&file=article&sid=64 Artículo: Intranets: caos corporativo vs. Usabilidad Autor: Juan Manuel Carraro Organización: C Comunicación. Argentina Web: http://www.ccomunicacion.com.ar/site/Newsletters/newsletterv31_junio2005.htm





109

Año: 2005 Reporte: Ten Best Goverment Intranets Autores: Kara Pernice, Mathew Schwartz, y Jakob Nielsen Organización: Nielsen Norman Group Año: 2003 Reporte: Intranet Design Annual 2007 Autores: Kara Pernice, Mathew Schwartz, y Jakob Nielsen Organización: Nielsen Norman Group Año: 2007 Reporte: Corporate Intranets Best Practices Report Autores: Shiv Singh, Ray Velez y the Enterprise Solutions Practice at Avenue A| Razorfish. Organización: Avenue A| Razorfish. Año: 2006 Guía: Designing and Managing an Intranet – Better Practice Checklist Autores: Information Management Office - Australian Goverment Organización: Australian Goverment Año: 2004 Artículo: Standards for Good Intranet and Extranet Design Autor: Dave Pollard Organización: Blog´s Dave Pollard Web: http://blogs.salon.com/0002007/2007/01/04.html#a1742 Año: 2007 Guía: Becoming a Citizen – Centered Government Through Best Practices in Web Managment Autor: The Performance Institute Organización: The Performance Institute Año: 2005 Guía: Disposiciones Generales para Sitios Web Institucionales de la UNAM Autor: Consejo Asesor de Computo Organización: Universidad Nacional Autónoma de México Año: 2007 Artículo: La empresa del futuro Autor: Sr. Galdos Organización: Redel al Día Web: http://www.redelaldia.org/ver.php3?id_article=33&var_recherche=la+empresa+del+futuro Año: 2005 Artículo: Etapas de la creación de la página web Autor: Alicia García de León Organización: Universidad de la República. Montevideo – Uruguay. Año: 2002 Guía: Manual de Estilo y Diseño de sitios y páginas web Autor: Departamento de Comunicaciones Organización: Instituto Nacional de Tecnología Agropecuaria - Argentina Año: 2002 Libro: Website Management Autores: Oscar García Lázaro y Graciela Pineda González Organización: Instituto de Comercio Electrónico y Marketing Directo Año: 2002





110

Artículo: Diseño accesible de páginas web. Autor: Carlos Egea García. Organización: Grupo de expertos del seminario de iniciativas sobre Discapacidad y Accesibilidad en la red. Artículo: El 75 % de las grandes empresas tienen descuidada su Intranet. Autor: King eClient Organización: King eClient Web: http://www.king-eclient.com/?q=es/sobre-King-eClient/historia Artículo: Diez Errores en el Diseño Web y Redacción Comercial que debes evitar a toda costa Autor: Daniel Levy Organización: Emarketing Latino Web: http://www.emarketinglatino.com/articulos/errores-de-diseno-web.html Año: 2006 Artículo: Errores comunes en el diseño de sitios web Autor: Eduardo Manchón Organización: Alzado.org Web: http://www.alzado.org/articulo.php?id_art=49 Año: 2003 Artículo: Los 10 mayores errores del diseño web Autor: Jakob Nielsen Organización: WebTaller Web: http://www.webtaller.com/maletin/articulos/los_10_mayores_errores_del_diseno_web.php Artículo: 10 Mistakes in Icon Design Autor: Denis Kurtunov Organización: TurboMilk Web: http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/ Año: 2008 Artículo: Errores y soluciones en diseño web: las páginas de entrada y el botón atrás Autor: NERV Organización: NERV Web: http://www.nerv.es/blog/errores-y-soluciones-en-diseno-web-las-paginas-de-entrada-y-el-boton-atras/ Año: 2008 Artículo: Errores y soluciones en diseño web: las páginas de entrada y el botón atrás Autor: NERV Organización: NERV Web: http://www.nerv.es/blog/errores-y-soluciones-en-diseno-web-las-paginas-de-entrada-y-el-boton-atras/ Año: 2008 Artículo: 10 Usability Nightmares You Should Be Aware Of Autor: Smashing Magazine Organización: Smashing Magazine Web: http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/ Año: 2007 Artículo: The Ten Most Violated Homepage Design Guidelines Autor: Jacob Nielsen Organización: USE IT

http://www.useit.com/alertbox/20031110.html





111

Web: http://www.useit.com/alertbox/20031110.html Año: 2003 Artículo: 25 errores comunes en los desarrollos web Autor: WebTaller Organización: WebTaller Web: http://www.webtaller.com/maletin/articulos/25_errores_comunes_en_los_desarrollos_web.php Artículo: 16 errores a evitar en el desarrollo web Autor: TXEN Organización: TXEN Web: http://txen.es/2007/05/25/ciencia/informatica/16-errores-a-evitar-en-el-desarrollo-web/ Año: 2007 Artículo: Lista para comprobar si un sitio web es usable Autor: Frank Tarifa Mengibar Organización: Blog Accesibilidad, Usabilidad y Estándares Web Web: http://accesibilidadweb.blogspot.com/2008/01/lista-para-comprobar-si-un-sitio-web-es.html Año: 2008 Artículo: Siete Errores de Accesiblidad Autor: Christian Heilmann Organización: Digital Web Magazine Web: http://usalo.es/131/siete-errores-de-accesibilidad/ Año: 2006 Artículo: Técnicas y Herramientas para Usar Color en el Diseño de la Interfaz de una Computadora Autor: Peggy Wright, Diane Mosser-Wooley, y Bruce Wooley Organización: Association for Computing Machinery Web: http://www.acm.org/crossroads/espanol/xrds3-3/color.html Año: 1999 Artículo: Las 13 Reglas de Composición Fotográfica Fundamentales que Deberías Conocer Autor: DZOOM Organización: Blog DZOOM Web: http://www.dzoom.org.es/noticia-1479.html Año: 2006 Artículo: 8 Fallos Comunes que pueden Estropear tus Fotos Autor: DZOOM Organización: Blog DZOOM Web: http://www.dzoom.org.es/noticia-1616.html Año: 2007 Artículo: Empleo del color Autor: Luis Villa Organización: Alzado.org Web: http://www.dzoom.org.es/noticia-1616.html Año: 2003 Artículo: 10 errores comunes en los css Autor: Tu Función Organización: Tu Función Web: http://www.tufuncion.com/errores-css Año: 2006

http://www.useit.com/alertbox/20031110.html

http://accesibilidadweb.blogspot.com/2008/01/lista-para-comprobar-si-un-sitio-web-es.html





112

Artículo: Recomendaciones de Usabilidad para el uso efectivo de botones en desarrollos Web Autor: Daniel P. Uriol Organización: Web Taller Web: http://www.webtaller.com/maletin/articulos/recomendaciones-usabilidad-uso-efectivo-botones-desarrollos-web-3.php Libro: Comunicación Visual y Tecnología de Gráficos en computadora. Autor: Juan Carlos Asinsten Organización: Educar – Ministerio de Educación, Ciencia y Tecnología de Argentina Artículo: Los próximos 2 años. Autor: Dan Tynan Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Marzo 2008. Web: http://www.pcworld.com.pe Artículo: Conexiones a muy alta velocidad. ¿Es VSL una realidad? Autor: Arantxa Herraz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Febrero 2008 Web: http://www.pcworld.com.pe Artículo: Principios Usabilidad: La regla de los tres clicks Autor: José Márquez Organización: Blog Usándolo.com Web: http://www.usandolo.com/principios-de-usabilidad-la-regla-de-los-3-clicks/ Año: 2007 Artículo: Más opciones con los teléfonos móviles del futuro Autor: Glenn Fleishman Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Marzo 2008. Web: http://www.pcworld.com.pe Artículo: Negocios en Second Life: ¿realidad o ficción? Autor: Arantxa Herranz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Diciembre 2007. Web: http://www.pcworld.com.pe Artículo: Diálogos entre hombre y máquina Autor: Arantxa Herranz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Diciembre 2007. Web: http://www.pcworld.com.pe Artículo: Interfaz De Usuario: Una Mirada Al Futuro Con Jeff Han – Video

Autor: Robin Good

Organización: Blog Robin Good

Año: Diciembre 2006.

Web: http://www.masternewmedia.org/es/2006/08/21/interfaz_de_usuario_una_mirada.htm

http://www.masternewmedia.org/es/2006/08/21/interfaz_de_usuario_una_mirada.htm





113

Artículo: Usabilidad Estratégica

Autor: Alfonso de la Nuez

Organización: Xperience Consulting

Año: 2002

URL: http://www.xperienceconsulting.com/imagenesup/Usabilidad%20estrategica.pdf

Artículo: The visual design of Web 2.0

Autor: Píxel Acress

Organización: Píxel Acres

Año: 2006

Web: http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/

Artículo: Web 2.0 Desing Style Guide

Autor: Web Design for Scratch

Organización: Web Design for Scratch

Web: http://webdesignfromscratch.com/web-2.0-design-style-guide.cfm





114

12. SOBRE LA AUTORA

CARMEN ELIZABETH VÁSQUEZ DEXTRE

Ingeniera de Sistemas y Diseñadora Publicitaria con más de una década de experiencia.

Actualmente se desempeña como consultora y es especialista en diseño orientado a Internet.

Posee estudios de Postgrado, como un Diplomado en Marketing realizado en la Universidad

Ricardo Palma, un Diplomado en Gestión de Pequeñas Empresas en la Universidad San

Ignacio de Loyola, ambos en Lima – Perú, una Especialización en Video y Tecnologías On Line

y Off Line realizado en el Media Centre d'Art i Disseny de ESDI (Barcelona - España), entre

otros.

Ha trabajado en más de 100 proyectos para Internet que incluyen sitios web, e-commerce, e-

marketing, e-publicity, cds, entre otras piezas gráficas y multimedia para empresas de

comunicaciones como: Grupo Panamericana de Radio S.A., Empresa Editora El Comercio S.A.

y Grupo RRP S.A. Además de trabajar en proyectos para empresas privadas nacionales y

extranjeras, así como, gubernamentales: Servicio de Administración Tributaria – SAT y este

estudio desarrollado para la Superintendencia de Administración Tributaria – SUNAT a través

del Centro Interamericano de Administraciones Tributarias – CIAT.

Página web: http://www.carmenelizabeth.com

e-mail: [email protected]

Celular: (51) 99347-5876
