Estudio Intranets 2008

ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS ESTE ES SLO UN EXTRACTO
DEL ESTUDIO ORIGINAL, EL ESTUDIO ORIGINAL CONTIENE 231 PGINAS.
AGRADECIMIENTOS
La recopilacin de datos para la realizacin de este Estudio ha requerido de la colaboracin de corresponsales del CIAT. Agradecimiento especial, por la ayuda brindada para tratar de establecer contacto con funcionarios de otros pases 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 soado con un futuro ideal para m. Las gracias, tambin 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. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 2
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
INDICE
1. INTRODUCCION..................................................................................................................5 1.1. Beneficios Tangibles.....................................................................................................6 1.2. Beneficios Intangibles ...................................................................................................7 1.3. Diseo Visual Web .......................................................................................................7 2. ANTECEDENTES Y METODOLOGAS ...............................................................................9 2.1. Antecedentes................................................................................................................9 2.2. mbito del Estudio ......................................................................................................11 2.3. Metodologa ................................................................................................................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. Diseo 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 Prcticas sugeridas para la Intranet de SUNAT extradas 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 Prcticas sugeridas para la Intranet de SUNAT extradas de del Reporte sobre las 10 mejores intranets a nivel mundial del 2007 ........................................................39 6. BUENAS PRCTICAS EN LA CREACIN DE INTRANETS .............................................40 6.1. Antes de iniciar la creacin de la Intranet ...................................................................40 6.2. Durante la creacin de la Intranet ...............................................................................41 6.3. Despus de creada la intranet ....................................................................................56 7. ERRORES COMUNES EN LAS INTRANETS ...................................................................57 7.1. Antes de iniciar la creacin de la Intranet ...................................................................57 7.2. Durante la creacin 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 Diseo Visual................................................................82 9.2. Conclusiones extradas de las Buenas Prcticas de las Intranets ..............................82 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 3
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 9.3. Conclusiones Especficas extradas 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 Diseo Visual de la Intranet de SUNAT ..................................85 9.6. Conclusiones Finales..................................................................................................86 10. ANEXOS.........................................................................................................................87 10.1. CUADRO COMPARATIVO N 1 DE LA APLICACIN DE BUENAS PRCTICAS ....87 10.2. VENTAJAS DEL USO DEL FORMATO SVG Y SUS POSIBILIDADES .....................91 10.3. EVOLUCIN DE LA WEB ..........................................................................................92 10.4. Estudio del Diseo Visual ...........................................................................................93 10.5. Buenas Prcticas en Intranets ....................................................................................96 10.6. Errores comunes en el Diseo 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. BIBLIOGRAFA............................................................................................................. 108 12. SOBRE LA AUTORA .................................................................................................... 114
2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID
1. INTRODUCCION
Los cambios generados a nivel mundial a causa de la globalizacin han provocado la necesidad de una mayor integracin entre los distintos factores econmicos de los pases con el fin de hacer frente a los distintos retos que implica esta nueva realidad. El desarrollo tecnolgico, las sociedades del conocimiento, la nueva competitividad entre las economas, entre otros factores, obligan a las organizaciones pblicas y privadas a entrar en esta nueva dinmica econmica, poltica y social. El da de hoy, los ciudadanos exigen a sus gobiernos ms y mejores servicios, esta condicin obliga a un mayor compromiso y dedicacin en el quehacer pblico; 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 mtodos que hagan eficiente y eficaz, la actividad de las organizaciones para el logro de objetivos y satisfaccin plena de los ciudadanos. La Administracin Pblica es la accin del poder pblico al aplicar las leyes y cuidar de los intereses pblicos; resulta, por lo tanto, un conjunto de rganos de que se sirve para tal finalidad. Tal como reza la teora, la Administracin Pblica va a necesitar de todo instrumento que le pueda facilitar la relacin con el ciudadano o an con sus propias competencias de interrelacin con otras administraciones. La administracin, como inmensa y compleja Intranet que supone, requiere de software que la impulsen y aligeren las tareas. A raz de la modernizacin de la Administracin Pblica, se quiere obtener estos beneficios utilizando las Tecnologas de Informacin disponibles a nivel mundial 1: Para los organismos pblicos Plazos rpidos de reaccin Para las empresas Para los ciudadanos mejores servicios
ms Agilizacin de los trmites con Ms y la administracin pblicos Mejoras en su competitividad
Reduccin de Costes
Agilizacin y facilitamiento de la burocracia las
Servicios ms accesibles
Mejoras en la relacin sector Participacin activa en privado/pblico decisiones que le afectan
Capacidad de cobertura a una Utilizacin de la Administracin Servicios pblicos accesibles amplia gama de necesidades como motor de incorporacin 24 x 7 de las nuevas tecnologas de la Empresa Fuente: Redes & Telecomunicaciones. N 180, Mayo 2004, pg. 4. Espaa Se requieren de innovaciones que transformen la Administracin Pblica para hacerla ms eficaz, eficiente y cercana a los ciudadanos. En este proceso el empleado pblico ser su principal protagonista, para lo que necesita un entorno favorable para que dicha transformacin permita alcanzar los objetivos marcados.
1
II Congreso Online del Observatorio para la CiberSociedad. Ponencia: Administracin Pblica del Futuro y Bienestar Social. 2004.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Es necesario recoger las necesidades y expectativas de los empleados, ofrecerles el ambiente y las herramientas necesarias para aprovechar la sabidura individual y potenciar as el conocimiento colectivo de la organizacin. La comunicacin interna permite darle una identidad a la organizacin y extender el conocimiento de la cultura corporativa, acercando unidades tradicionalmente estancas de la organizacin y promoviendo el conocimiento y la valoracin recprocos. En la filosofa del nuevo modelo de uso de Internet, el conocimiento debe estar accesible sin restricciones. De forma paralela, en el seno de una organizacin, 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 tcito presente en foros de discusin, artculos de blogs, wikis o comentarios sea identificado, categorizado, mantenido y puesto a disposicin (al menos) de la comunidad que lo gener2. De acuerdo a un estudio realizado por el Delphi Group, el 98% de las instalaciones de intranets dan un Retorno Sobre la Inversin (RSI) favorable, siendo un indicador muy importante en comparacin 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 ao pasado por la International Data Corporation (IDC) acerca del Retorno Sobre la Inversin (RSI) en proyectos de intranets corporativas revela el por qu las implementaciones comunes respaldadas por una decisin estratgica de la compaa estn 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 informacin. Estos ltimos valores son consistentes con otros estudios que afirman que el 80% de la informacin requerida por un empleado no est en lo sistemas de informacin, tpicamente por tratarse de informacin no estructurada o documental. Una intranet pone juntos todos los recursos necesarios bajo un nico Portal Corporativo, brindando estandarizacin y facilidad de uso, permitiendo a los usuarios interactuar con contenidos, aplicaciones, procesos de negocio y otras personas dentro de la Organizacin. La intranet es conducida por un sistema avanzado de herramientas que brinda a usuarios no tcnicos la capacidad de capturar inmediatamente la informacin y entregarla al pblico 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 reduccin de costo del papel debido al traslado de los procesos en lnea. Algunas estadsticas citan que un 18% del material corporativo impreso se vuelve obsoleto despus de 30 das. Imagnese dicho material acumulado despus de 60 o 90 das. Ahora imagnese ese material en lnea, siempre disponible y actualizado.
2 3
Junta de Andaluca Consejera de Salud. Entorno Colaborativo de Trabajo: La Intranet 2.0. 2007. Beneficios de usar una Intranet. InnovaAge.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Implementacin econmica. Fcil de usar: slo apuntar y hacer clic. Basada en estndares abiertos. Ahorro de tiempo y dinero. Mejor informacin, ms rpido. Escalable y flexible. Conexin entre distintas plataformas. Pone la informacin 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 informacin en este nuevo ambiente web tiene un gran impacto. Las Intranets permiten a una Organizacin gastar menos tiempo en cosas que no agregan valor, como la bsqueda de informacin para resolver un problema. La productividad se incrementa a medida que el conocimiento corporativo es ms accesible y la informacin ms precisa. La flexibilidad en el tiempo de entrega del conocimiento se gana a medida que la informacin siempre est a un clic de distancia. Las Intranets abren un espacio en donde las fronteras son ms pequeas y el intercambio de informacin es estimulado. Esto lleva a unos empleados mejor informados y con la habilidad de tomar mejores y ms rpidas decisiones. Al final, se termina logrando una mayor productividad y ms tiempo para incrementar las ganancias. Mejoramiento de la toma de decisiones Construccin de una cultura de colaboracin Procesos de aprendizaje ms fciles Eliminacin de la burocracia Mejoramiento de la calidad de vida en el trabajo 4 Incrementa la creatividad y la innovacin. Aumenta la eficiencia y productividad de la organizacin. Incrementa la reutilizacin del conocimiento y reduce la fuga del "capital del conocimiento". Mejora los tiempos de respuesta al mercado. Posibilita la comunicacin con un nmero extenso de individuos y organizaciones a bajo costo. Mejora la integracin en la cadena de valor mediante la extensin de las aplicaciones de la empresa al Portal Corporativo5.
1.3.
Diseo Visual Web
La interfaz grfica de usuario, desde los bsicos tutoriales, presentaciones, animaciones, intros, aplicaciones, la omnipresente web, hasta el software estn consensuados por criterios diversos de acuerdo a sus objetivos, a los contenidos, su audiencia, y de acuerdo tambin a la aplicacin de ciertas leyes o normas funcionales. Para profundizar, por si mismos los diseos electrnicos o las interfaces grficas de usuarios no son solamente sinnimos de sitios web, animaciones interactivas, o software, sino adems siguen una determinada estructura y secuenciacin de su produccin, (anlisis de requerimientos, objetivos, recopilacin de la informacin, diseo del sistema, implementacin,
4 5
FAQ sobre Intranets. Intranet Total. Beneficios de usar una Intranet. InnovaAge.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS prototipos, etc.); en su navegabilidad e interaccin (control del flujo de informacin y restricciones, guas, mapas conceptuales y semnticos, etc.); en su diseo de contenidos (conceptos a entregar, textos, media, diagramacin, etc.) Adems de ello se encuentran sujetos a estndares internacionales globales (W3C, ISO 13407, IEC 9241, IEC 9126, entre otros); y educacionales en el caso de las interfaces relacionadas con la educacin y e-learning (SCORM, AICC), entre muchos otros parmetros, todos los cuales giran de manera unvoca alrededor de los niveles de encontrabilidad 6, recuperacin, y asimilacin de la informacin que el usuario final busca, facilitado por la aplicacin de procesos muy precisos de interactividad, navegacin, retroalimentacin y la forma en que estos contenidos, por objetivo, deberan o podran 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 diseo en general 7. Cuando la Web era slo contenido textual y gifs animados, en 1996 apareci Flash Macromedia para darle al usuario una experiencia ms generosa a nivel grfico. Sus botones, clips de pelcula, mscaras y programacin en Action Script promovan zonas activas de interaccin. Pero la interaccin de Flash sabe a poco con la intercreatividad y experiencia de usuario que ofrecen las aplicaciones Web 2.0. Si se piensa en contenidos dinmicos, sucede lo mismo. Las clsicas herramientas para producir webs, como Dreamweaver y Flash, ofrecen la posibilidad de crear un diseo complejo de contenidos dinmicos mediante HTML, estilos CSS y programacin, pero tambin se quedan atrs de las aplicaciones diseadas 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.
Encontrabilidad, es un trmino utilizado en la Usabilidad, el cual se refiere a la capacidad de los contenidos digitales a ser encontrados, especialmente a travs de los buscadores. 7 Arquitectura de Informacin: Introduccin al Proceso de Desarrollo en el Diseo de Interfaces de Usuario (Draft). Universidad de Concepcin de Chile. 2004. 8 Planeta Web 2.0. Grupo de Investigacin en Interacciones digitales (GRID) de la Universidad de Vic y a la Facultad Latinoamericana de Ciencias Sociales FLACSO Mxico. 2007.
2. ANTECEDENTES Y METODOLOGAS
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 vlida de apoyo a la gestin de sus procesos administrativos. Posteriormente, Netscape incursiona para indagar qu tan til puede ser el uso de su producto Navigator como una interfaz comn para el acceso de distinto tipo de informacin de una empresa, con lo que comienza a promocionar esta nueva orientacin del Web. Inicialmente exista 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 tambin percibe en el Web un entorno ms imparcial y estndar sobre el cual desarrollar sus productos. Por otra parte, Microsoft reconoce su error estratgico 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 ms eficientemente en esta lnea. Esta situacin, que involucr a tres grandes empresas de software (IBM-Lotus, Microsoft y Novell) da una clara seal a otras empresas similares para desarrollar productos y servicios orientados al Web, pero de manera especial a intranet. En la actualidad, la creacin de productos para intranet ocupa un alto porcentaje de los recursos de investigacin y de desarrollo de las empresas de software. Las empresas ligadas al hardware, tambin han potenciado sus productos para trabajar o soportar aplicaciones de Internet e intranet. Es ms, 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 comunicacin, y ms concretamente de Internet- se plantean sacar provecho de todas las ventajas de la tecnologa Web para mejorar su comunicacin y la colaboracin dentro de su entorno, superando las trabas que hoy presenta Internet en cuanto a su total accesibilidad 10. Sin embargo, muchas grandes corporaciones, han fracasado en este objetivo y actualmente poseen una infraestructura desactualizada, que hace muy difcil cualquier consulta de informacin. Pero el fracaso no se debe tanto a los aspectos relacionados con la infraestructura tcnica sino con aspectos culturales y la poca capacidad de la corporacin para poder gestionarlos. Las intranets suponan originalmente una gran libertad: cada rea de una compaa tendra la facultad de crear y administrar su propio contenido, dentro de una determinada porcin de la Intranet.
Antecedentes Histricos de las Intranets. Universidad de Chile. Sistema de Servicios de Informacin y Bibliotecas (SISIB). 2007.
10
Las Intranets en el Siglo XXI. Universidad Politcnica Salesiana de Ecuador.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Esta metodologa deriv aos ms tarde en un gran desorden. Cada seccin que se navegaba tena un esquema de navegacin y un diseo diferente, lo que resultaba muy frustrante para el usuario medio cuando deba buscar u obtener cierta informacin. Adems es bastante comn que el compromiso de las diferentes reas para actualizar el contenido de la Intranet vare de una entrega absoluta al ms absoluto abandono. Pensar la estructura de contenidos de una Intranet en base a la estructura de la organizacin puede ser muy tentador, despus de todo, los empleados la conocen a la perfeccin y pueden sentirse fcilmente identificados con ella. Lo que deber evaluarse aqu es si reproduciendo la estructura de una organizacin no se est evitando lo que se denomina la navegacin cruzada es decir la posibilidad de que un usuario consulte y navegue por contenidos que quizs 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 diseo centrado en el usuario, metodologas ambas que ayudan a desarrollar interfaces intuitivas, fciles de usar y al servicio de quienes sern 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 compaa. Relevar sus preferencias, las aplicaciones que utilizan cotidianamente, los contenidos que consultan o cmo prefieren obtener la informacin resulta vital para lograr un producto que satisfaga sus necesidades y expectativas11. 2.1.2. Antecedentes del Diseo Visual Web.
Una GUI (Graphics User Interface) es un entorno interactivo entre humano y ordenador, dinmico en el mejor de los casos, pero de todas formas, grfico y visualmente comprensible, a diferencia del arcaico modo textual. El trmino surgi porque la primera interfaz interactiva que una a las computadoras y a los usuarios no era grfico, sino textos y teclado orientados, y normalmente consisti en rdenes que el usuario tena 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 tpica antes que las GUI actuales se posicionaran. Luego hubo un paso intermedio que conecta al usuario con la interfaz de lnea de comandos en donde la GUI era la interfaz tipo men desplegable no grfico que le permiti interactuar usando un ratn 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 visualizacin que dieron al usuario la opcin de elegir comandos, iniciar programas y ver listas de archivos y otras opciones a travs del men descendente. Las selecciones podan activarse, bien a travs del teclado, o bien con el ratn. GUI, actualmente, es una forma de representar la informacin procesada de la computadora de manera visual, concreta y manejable por el usuario final hacindola ms comprensible, ms didctica, ms asimilable, ms usable.
11
Intranets: caos corporativo vs. Usabilidad. C Comunicacin. Argentina. 2005.
10
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Internet o mejor dicho su servicio ms conocido: la WWW, donde se despliegan los sitios web es por omisin una GUI distribuida (puede incluir simultneamente texto, imagen, sonido, video), en ella se pueden visualizar diagramaciones y distribuciones de contenido; se puede insertar sonido, video, grfica, dinamismo, interaccin, navegabilidad, procesar datos en lnea, confirmndola como la GUI por excelencia. 2.1.3. La Arquitectura de la Informacin
Es la disciplina encargada de la fundamentacin, anlisis, planificacin y estudio de la disposicin de los datos contenidos en los sistemas de informacin interactivos. El Information Architecture Institute, define la Arquitectura de la Informacin como: El diseo estructural en entornos de informacin compartida. El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en lnea y software para promover la usabilidad y la buscabilidad12. Una comunidad emergente orientada a aplicar los principios de diseo y la arquitectura en el entorno digital.
2.2.
mbito del Estudio
El presente Estudio pretende reunir las variables ms importantes a la hora de construir una Intranet, poniendo nfasis en el Diseo Visual. Se mostrar Intranets de otros pases como son: Algunos pases miembros del APEC. Algunos pases miembros del CIAT.
Los resultados mostrados como desarrollo del Estudio son usados para demostrar beneficios y ejemplos de mejores prcticas en empresas de gobierno y comerciales, adems identificamos reas donde las Administraciones Tributarias y Aduaneras requieren mejoras o creacin de soluciones. El desarrollo de este Estudio es una gua de referencia para estndares internacionales.
2.3.
Metodologa
Se realiza este estudio, considerndose como una de las Etapas del Mtodo Proyectual basado en la resolucin de problemas de Bruno Munari a aplicarse como parte de la creacin del Diseo Visual de la Intranet de la Superintendencia Nacional de Administracin Tributaria Per. Para la realizacin del presente Estudio se utilizar la tcnica de gestin 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. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID
11
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 2.3.2. Mejor de su Clase: Donde conoceremos segn los Reportes de Nielsen Norman Group: Las 10 mejores Intranets de Gobierno y Sector Pblico a nivel mundial. Las 10 mejores Intranets del 2007 a nivel mundial.
Adems de una revisin de estndares internacionales, lecciones aprendidas, mejores prcticas e investigacin. Las dificultades para la realizacin del Estudio fueron las siguientes: 1. 2. 3. 4. No se encontraron estudios o reportes de Intranets de Administraciones Tributarias. No se encontraron estudios o reportes sobre Diseo Visual de Intranets. Algunas Intranets no cuentan con acceso externo. Ninguna Intranet permite acceder de forma externa a personas que no sean empleados de dicha institucin. 5. No se contaba con presupuesto que permitiera la realizacin de viajes a cada pas miembro del APEC y CIAT para realizar una evaluacin en su misma sede. Debido a que se invit a los pases 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 Prcticas y errores antes de comenzar la creacin de la Intranet.
2.4.
Objetivos del Estudio

Identificar conceptos y mejores prcticas en el diseo 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 Prcticas que se puedan aplicar a la Intranet de la Superintendencia Nacional de Administracin Tributaria SUNAT - Per.
12
3. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL 13

3.1. Participantes
ORGANISMO: Servicio de Impuestos Nacionales. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 30. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 09/2007. ORGANISMO: Secretaria de Ingresos Federales del Brasil. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: Todos los funcionarios de RFB (no especificaron el nmero de empleados). FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: No contestaron. ORGANISMO: Servicios de Impuestos Internos. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 4,000. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 08/2007. 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. ORGANISMO: Servicio de Rentas Internas. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 2500. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 12/2006. ORGANISMO: Agencia Estatal de Administracin 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. ORGANISMO: Superintendencia de Administracin Tributaria. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 2500. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 03/2005 ORGANISMO: Servicio de Aduana y la Oficina de Tarificacin, Ministerio de Finanzas. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 8500. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 07/2007. ORGANISMO: Servicio de Administracin Tributaria. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 30,000. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 01/2008. ORGANISMO: Direccin General de Ingresos (DGI). La DGI cuenta con Sistemas de informacin que se ejecutan dentro de la INTRANET sin embargo no existe a la fecha un portal interno o Intranet con informacin para ser compartida y divulgada entre las reas internas. Los sistemas que actualmente posee son de uso interno para reas: Tributarias, Administrativas, Recursos Humanos, Fiscalizacin, etc. ORGANISMO: Direccin General de Ingresos del Ministerio de Economa y Finanzas. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 424. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 2007. ORGANISMO: Superintendencia de Administracin Tributaria. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 7000. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 12/2001. ORGANISMO: Direccin General de Impuestos DGCI. N DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 15,000. FECHA DEL LTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 04/2006. BOLIVIA
BRASIL
CHILE CHINA HONG KONG ECUADOR
ESPAA
GUATEMALA
JAPN
MXICO
NICARAGUA
PNAMA
PRU
PORTUGAL
13
Revisar el anexo 10.7 donde se muestra el resto de resultados de las encuestas enviadas al CIAT y APEC.
13
3.2.
Sobre el Enfoque Aplicado
VISIBLE SLO EN EL ESTUDIO ORIGINAL S desea obtener mayor informacin, escribir al e-mail de la Consultora: cvasquezdextre@yahoo.es
14
15
16
3.3.
Diseo Centrado al Cliente y/o Usuario14
14
Revisar el Cuadro sobre las Mejores Prcticas en Diseo Visual en Intranets de Administraciones Tributarias en anexo 10.5.1.
17
3.4.
Sugerencias y Recomendaciones
18
4. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL15
15
Revisar el anexo 10.8 donde se ampla la informacin de este reporte.
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 Prcticas sugeridas para la Intranet de SUNAT extradas del Reporte sobre las 10 mejores Intranets de Gobierno a nivel mundial.
29
5. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007 16

5.1.
American Electric Power Estados Unidos
16
Revisar el anexo 10.9 donde se ampla la informacin de este reporte.
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 Prcticas sugeridas para la Intranet de SUNAT extradas de del Reporte sobre las 10 mejores intranets a nivel mundial del 2007
39
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 6.
BUENAS PRCTICAS EN LA CREACIN DE INTRANETS
6.1. Antes de iniciar la creacin de la Intranet

Distinguir entre Sitio web Corporativo e Intranet. Ambas son diferentes en muchos aspectos. Esas diferencias pueden verse reflejadas en el diseo y en el manejo de los procesos. La entidad gubernamental debe elaborar una estrategia general de la intranet y una gua del diseo general. Es importante recordar que a nivel de las plantillas de pginas especficas y caractersticas, tpicamente, cada departamento tiene diferentes necesidades. Elaborar un diseo coherente para integrar muchas intranets. Considerar las necesidades especficas de la organizacin. Una intranet refleja la cultura, estructura, procesos, personal y recursos de la organizacin. Cada intranet debe adaptarse a las necesidades y desafos de la organizacin. Ver el trabajo de la gente. En el diseo de las intranets, no se olvide de que usted ya sabe quines son los usuarios finales. Son la gente que pasa en los pasillos, los empleados sentados a su lado en la Cafetera. Observe cmo se est utilizando y no utilizando la intranet, y donde existen posibilidades de diseo. La intranet puede hacer ms til su trabajo en el da a da. Busque las experiencias de otros organismos. Varios organismos han desarrollado una considerable experiencia en el diseo y manejo de intranets. Compartir experiencias entre los organismos es una manera eficaz de construir y de apoyar la innovacin en la Intranet. Gestor de apoyo a travs de grupos. Los directores de diferentes reas deben participar en la creacin de un diseo global. Participacin de los usuarios y las personas interesadas desde el principio y mantenerlos involucrados a lo largo del proyecto. Planee cuidadosamente y disee en el papel antes de proceder al desarrollo. Una cuidadosa planificacin por adelantado tambin le ayudar a realizar un presupuesto realista. No enfoque la creacin de su intranet, principalmente como un proyecto de tecnologa. 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 ocano" y redisear todos los aspectos de una gran intranet dentro de un apretado calendario y presupuesto. Invertir en la planificacin por adelantado, y luego disear y construir en las etapas de mximo impacto. Enfoque su intranet como un programa continuo en lugar de un proyecto aislado. Realizar una investigacin de usabilidad para determinar los requerimientos del negocio y conocer las necesidades de los usuarios. Emplear tcnicas de usabilidad como: Card Sorting 40
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Estudios de campo Evaluacin heurstica 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 creacin de la Intranet

6.2.1. Estndares Internacionales Realizar muchas evaluaciones de usabilidad y visita a usuarios. Para conocer cmo interactan los usuarios con la Intranet y conocer que es necesario mejorar. Usar directrices de accesibilidad en el diseo de procesos tomando en cuenta al usuario con discapacidad. Imgenes y animaciones. Emplee el atributo Alt (texto alternativo) para describir la funcin de todos los elementos grficos. Mapas de imagen. Cree mapas de tipo cliente y especifique el texto alternativo por zonas activas. Multimedia. Ofrezca subttulos y trascripcin del audio, descripcin de video, y una versin accesible en caso de utilizar formatos no accesibles. Organizacin de las pginas. Utilice encabezados (H1, H2, H3,...), listas y una estructura consistente. Emplee estilos en cascada (CSS) para maquetar y determinar el estilo, donde sea posible. Grficas y esquemas. Resuma su contenido o utilice el atributo longdesc. Marcos (frames) etiqutelos con los atributos title o name. Tablas. Asegrese de que se pueden leer correctamente lnea a lnea. Utilice el atributo summary.
Otros ejemplos de Usabilidad y Accesibilidad en el diseo son: La presentacin de la informacin en cada pgina debe respetar la forma de lectura jerrquica de arriba hacia abajo y de izquierda a derecha. El contraste entre letra (color/tamao) y fondo debe permitir la lectura de manera sencilla, an en los letreros ms pequeos. El color de fondo de las pginas Web debe incorporar colores claros y la letra debe ser de un tono oscuro, lo cual aumenta el contraste y legibilidad, adems de eliminar los problemas de impresin. Mantener mecanismos de interaccin consistentes y cmodos de utilizar desde los diferentes medios de acceso utilizados por los clientes. Mantener un orden lgico de tabulacin en los elementos de la pgina. Proporcionar mensajes de error claros y mecanismos de navegacin para regresar a la pgina 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. 41
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS En caso de utilizar tecnologa no estndar que requiera que los usuarios instalen libreras (plug-ins) adicionales, debe incluirse el enlace a los sitios de los cuales pueden obtenerse, as como instructivos claros sobre cmo realizar su instalacin. Una buena prctica en la maquetacin 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 bsqueda de informacin. Identificar explcitamente el destino de cada enlace. Equilibrar la saturacin de la pgina en cuanto a enlaces tomando en cuenta el nmero de pginas que tendr que acceder el usuario para encontrar el contenido que requiere.
Uso de plantillas en el diseo visual de las pginas 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 bsicamente basan toda la informacin que transmiten sobre textos o a travs de ellos. Botones icnicos: Son aquellos que transmiten su informacin principalmente a travs de una imagen siendo capaces de que la interpretacin que el usuario da a dicha imagen sustituya con xito el mensaje textual que se les podra haber proporcionado. Asimismo, estos pueden disponer de informacin textual, la cual vendra dada por el etiquetado del icono.
Centrndonos en la informacin 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 mayscula, como por ejemplo 'Salvar', 'Buscar', 'Eliminar' ... De este modo, habra que huir de botones con textos tales como Acepta, Accede, etc. 2.- Se recomienda usar el smbolo (...) '...' al final de las etiquetas si la accin requiere ms explicacin para el usuario antes de la accin sea llevada a cabo. Por ejemplo 'Salvar como...' o 'Buscar...'. Estos signos, no deberan aadirse en comandos tales como 'Propiedades', 'Preferencias', 'Configuracin', ya que estos comandos no requieren mayor explicacin que la que ya expresan por medio de su etiquetado. 3.- Se recomienda utilizar siempre trminos breves y representativos. Las frases largas de carcter descriptivo no son
42
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS recomendables. El uso de terminologa ha de abarcar entre dos y tres palabras. 4.- En el caso de que el etiquetado del botn tenga dos o ms palabras, es crtico mantener la consistencia con el espaol. Un error muy comn a la hora de etiquetar botones es importar errores tipogrficos internacionales, la mayora de procedencia anglosajona. De todos ellos, el ms comn es el de entremezclar maysculas y minsculas dentro de una misma frase sin criterio alguno. Hay que hacer notar que si bien en la lengua inglesa no constituye falta de ortografa el comenzar con letra mayscula cada palabra que no sea determinante, adverbio o preposicin dentro de una misma frase, esto constituye una falta de ortografa en castellano. No obstante, poner maysculas a palabras situadas en mitad de frases castellanas se est convirtiendo en costumbre comn. Un empeoramiento de esta situacin lo constituye el situar dichas letras maysculas en algunas palabras de dicha frase y en otras no. Recomendaciones sobre las caractersticas de los botones.
El segundo aspecto a tener en cuenta, cuando se tenga una idea ms clara sobre las cuestiones lingsticas es la funcionalidad de dichos elementos. La funcionalidad de un botn en una interfaz web es casi tan importante como su etiquetado lingstico. El comportamiento de dicho botn proporcionar informacin crtica al usuario y le guiar por su interaccin normal con el sitio web. En aras de una potenciacin de la Accesibilidad de un sitio web, el acceso a las distintas secciones del mismo por medio de botones debera poder hacerse de dos maneras: o Navegando por medio del ratn: Es el uso ms comn por medio del cual interacciona el usuario con los sitios web.
Navegando por medio del teclado: Posibilidad necesaria para aquellas personas que tienen necesidad de hacer uso de los sitios web accesibles debido a algn tipo de discapacidad.
Acorde a estos usos, las recomendaciones que se pueden hacer son: Es crtico etiquetar todos los botones a fin de que el usuario pueda obtener informacin acerca de la funcionalidad sin necesidad de pulsarlos. Adicionalmente, ello posibilitar la navegacin en el caso de que los botones no se carguen, tarden en hacerlo o, directamente, no existan por algn tipo de incompatibilidades con el navegador que est usando. Si el botn es capaz de generar texto, un icono o ambos, es necesario describir grficamente lo que va a suceder. La generacin de texto en la
43
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS pantalla ocultar algunos elementos de la misma y ello podra 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 recomendacin bsica que a primera vista se mantenga la consistencia. Por tanto, hay que tener en cuenta los siguientes puntos: 1.- No usar ms 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 cmodo sistema visual para que la percepcin del sujeto sea capaz de clasificar los elementos que componen una interfaz. 2.- Aquellos botones cuya funcin, a causa de las acciones del sujeto, quede inhabilitada, debern quedar presentes, pero inhabilitados. Un ensombrecimiento de los mismos, ayudar sin duda a clarificar que, a causa de esa accin, el botn ya no est disponible o an no ha sido activado. 3.- En un texto, un botn puede constituir el botn 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 slo en casos excepcionales Cancelar debera ser el botn activado por defecto de una funcin. 4.- Si un botn por defecto slo va a poder ser utilizado una vez, el usuario debe completar un cierto nmero de pasos (por ejemplo, rellenar un nombre de usuario y una contrasea), este botn NUNCA debera activarse hasta que el usuario complete correctamente la tarea en cuestin. No tiene sentido posibilitarle la opcin 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 botn se pulse, hay que dar feedback al usuario que est pulsando el botn. Este feedback admite las animaciones o los sonidos, siempre y cuando ayuden a aclarar al usuario. 2.- La ubicacin de los botones en la interfaz es un aspecto fundamental. Es recomendable que el botn 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 podrn 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.
44
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 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 ms frecuencia o los ms previsibles. Simple e intuitiva interfaz de usuario y arquitectura. En lo posible, los usuarios no deben requerir una formacin previa de cmo 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 utilizacin de marcos o frames. Acceso con un clic. Los usuarios deben ser capaces de obtener los recursos de la pgina con un clic. Esto puede requerir del uso de mens que solo aparecen cuando se sealan con el cursor o desplazarse a travs de listas en las pequeas ventanas para evitar que la pgina sea abrumadora. La regla de los 3 clicks (3 clicks rules) recomienda que no se debera llegar a ninguna informacin clave de un sitio web en ms de tres clicks. La correcta aplicacin 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 informacin. La intranet debe ofrecer a los usuarios tres opciones para obtener la informacin que estn buscando: navegar, buscar o suscribirse. Optimizar el uso de imgenes al utilizar formatos ligeros que no pierdan la calidad de la imagen. El uso de imgenes debe ser un recurso complementario y no ser sustituto del contenido en texto. Es importante vigilar la cantidad de animaciones que incluya el diseo, con el fin de no saturar al usuario y perder su atencin, as como evitar sobrepasar el peso recomendado por pgina. En el caso de los sitios con contenido dinmico, debe contemplarse una imagen o texto alternos cuando no se encuentre disponible o no se logre cargar la imagen o informacin solicitada.
Algunos principios del Diseo centrado en el usuario son: Los usuarios de un sistema frecuentemente juzgan a ese sistema por su interfaz, por lo tanto el diseo 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 sociodemogrfico del usuario y no confundirlo con el del cliente o desarrollador. El control de la aplicacin a nivel de navegacin e interaccin debe estar en manos del usuario, por lo menos aparentemente. Cuanto mayor sea el grado de personalizacin, ms cmodo se sentir el usuario en el entorno de aplicacin. La pgina inicial es lo ms importante atendiendo a razones de lograr audiencia cautiva desde el momento del contacto visual, para ello debe existir coherencia y consistencia del diseo entre 45
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS todas las partes del producto y sus elementos a nivel visual, conceptual, semntico adoptando estilos, cuando es posible y necesario. Los usuarios han de entender el funcionamiento y la estructura de informacin en toda la aplicacin despus de observarla unos pocos segundos. Un diseo de interfaz pobre, inicialmente complejo o incomprensible puede provocar que el usuario huya y probablemente dicho sistema nunca sea usado.
Aplicar diseo de interaccin consistente en decidir dnde y cmo se le dar el control al usuario, por parte del equipo de desarrollo. Definir qu y cmo pasa en cada escena, pantalla o pgina al interactuar el sistema con el usuario. Provocar un dilogo fluido y realmente comunicativo entre el sistema y el usuario. Definir restricciones y privilegios para reforzar conceptos. Elaborar y utilizar metforas. Disear controles para la interaccin. Diseo Grfico
6.2.1.1.
La importancia del buen uso de la Teora del color. Uso del color en la Interfaz. El color tiene un impacto principal sobre la interaccin 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 informacin 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 proliferacin de aplicaciones GUI en PCs, Macs, y Estaciones de trabajo Unix, el examen del color es pertinente a la interaccin humano-computadora (human computer interaction, HCI). El uso de color apropiado puede ayudar a la memoria del usuario y facilitar la formacin 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 desempeo de una aplicacin y disminuir la satisfaccin del usuario. Debido a estos factores, sentimos que el uso efectivo del color en interfaces de computadora es un importante tpico en HCI que requiere ser examinado cuando consideramos el diseo de una interfaz. La gente interacta con su mundo a travs de modelos mentales que ellos han desarrollado. Especficamente, las ideas y las habilidades que traen a su trabajo estn basadas en modelos mentales que ellos desarrollan acerca de ese trabajo. Como diseadores de interfaces, necesitamos ayudar al usuario a desarrollar modelos mentales del sistema que le ayudarn a entender el trabajo, y desarrollar las herramientas de la interfaz que le ayudarn a realizar el trabajo. El uso adecuado del color comunica hechos e ideas ms rpidamente y ms estticamente al usuario. El color tambin puede ayudar a desarrollar modelos mentales eficientes y factibles
46
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS si se siguen las siguientes pautas: simplicidad, consistencia, claridad y lenguaje del color. Mantenga el mensaje sencillo. No sobrecargues el significado del color vinculando ms de un concepto a un solo color17. Los conceptos diferentes debern 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 informacin. Esto ayuda a incrementar el nmero de piezas de informacin que un usuario puede retener en la memoria de corto plazo. Es importante el ser consistente a la hora de "agrupar" informacin. 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 tambin una pauta importante para usar color. Experimentos han mostrado que el tiempo de bsqueda para encontrar una pieza de informacin es disminuido si el color de esta pieza es conocido por anticipado, y si el color slo se aplica a esa pieza. Los colores de interfaz estandarizados debern de ser establecidos y usados a travs del desarrollo. El uso claro y conciso del color puede ayudar a los usuarios a encontrar piezas de informacin ms rpidamente y ms 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 informacin y por el rendimiento de memoria. La esttica 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 informacin acerca de subsistemas y estructuras y para aadir dimensiones de cdigo 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 cdigos de color en mensajes para el usuario podra reducir grandemente la mal interpretacin 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 slo conducir al usuario a mal interpretaciones y a frustraciones. Uso del color en las fotografas. Aunque la mayor parte de la tomas se realizan hoy en colores, existe la opcin de presentar las fotografas en blanco y negro (en realidad, grises) e, incluso, en blanco y negro real (fotos de 1 bit). En algunos casos, las fotografas en blanco y negro o en escalas de grises pueden ser ms 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.
47
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Puede suceder que contemos slo con fotografas 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 fotografas antiguas. Uso del color en ilustraciones. En el caso de las ilustraciones el uso del color debe supeditarse a la intencin comunicativa. La ilustracin puede utilizarse porqu no se cuenta con una fotografa (en reemplazo), en cuyo caso el color debe ser lo ms realista posible (adecuado al estilo grfico de la ilustracin). Pero las ilustraciones se usan tambin para simplificar y sintetizar la imagen. En ese caso el color debe ser usado con prudencia, para mantener la sntesis buscada. Si se trata de identificar elementos, el color de los mismos debe ser convencional. Uso del color en grficos y diagramas. El color cumple aqu el papel auxiliar comunicativo, ayudando a reconocer las distintas partes del grfico o diagrama, a identificarlas claramente y a interpretarlas.
Considerar las reglas de Composicin Fotogrfica a la hora de elegir imgenes para la Intranet. Algunas de ellas son:
Centro de Inters Cada fotografa tiene (o debera tener) un centro de inters. De qu es la foto? Es una fotografa de su novia? Es una fotografa de las pirmides de Egipto? Debera ser obvio para cualquiera que mire una fotografa saber de qu es la foto. Es lo que se denomina el centro de inters. Aunque se denomine centro, el centro de inters 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 composicin, ya que es la ms importante. Simplemente decide antes de disparar el motivo sobre el que quieres tomar la fotografa. Todo lo que hay que hacer a partir de ah es enfocar el elemento sobre el que queremos centrar el inters.
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", asegurndonos que se convierte de este modo en el centro de atencin. Adems, de este modo eliminamos posibles elementos que resten atencin. 48
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Es un fallo demasiado comn el querer sacar demasiadas cosas en una nica foto. Al final, lo que conseguimos es que no quede demasiado claro qu es lo que queramos ensear. Ante la duda de si algo debe salir o no en la foto, mejor quitarlo. Lneas Las lneas son un elemento de importancia vital en las artes visuales. Las lneas nos aportan formas y contornos. Con las lneas dirigimos la mirada del espectador de una parte de la foto a otra. Cuando vayas avanzando en el mundo de la fotografa podrs comprobar cmo las lneas son uno de los elementos ms eficaces a la hora de dirigir la mirada de quien contempla nuestras fotos hacia donde queremos que mire. Las lneas horizontales, verticales y diagonales son elementos compositivos que aportan significado a las imgenes. Un tipo especial de lneas son las lneas convergentes. Son las lneas paralelas que, por el efecto de la distancia, acaban convergiendo en un mismo punto. Flujo Despus de las lneas, podemos tratar el flujo. El flujo es el modo en el que la mirada del espectador se desplaza de una parte de la fotografa a otra. Una manera de definir el flujo de una fotografa es mediante el uso de lneas. Pueden ser horizontales, verticales, diagonales, convergentes o divergentes. A veces el flujo creado por las lneas es ntido y claro, como los laterales de un edificio que convergen hacia el cielo), o pueden ser menos obvias. Sin embargo, la mirada del espectador debera ser capaz de recorrer los elementos de una parte a otra de la imagen. El flujo crea la ilusin de movimiento (o ausencia de movimiento si se desea). Las lneas diagonales se consideran generalmente ms "dinmicas", mientras que las lneas horizontales y verticales se consideran ms "estticas". Un equilibrio cuidadoso de elementos estticos y dinmicos dar un sentido global de movimiento a tus fotografas. Direccin La direccin es similar al flujo. Tambin crea la ilusin de movimiento. Si hay algo en la fotografa que parezca estar en movimiento, tiene una direccin en la que se mueve. Un ejemplo de esto son las luces de peatones de un semforo. Cuando est en rojo para los peatones, la figura representa un peatn inmvil, con las piernas juntas y los brazos bajados. Visualmente, no tiene ninguna apariencia de estar en movimiento. Sin embargo, la figura del peatn en verde que permite cruzar tiene una direccin en la cual se est moviendo. La direccin en fotografa se puede crear de muchas maneras. Una figura a punto de cruzar una calle puede transmitir movimiento aunque la veamos 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 49
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS esttica y no se muevan sus brazos y sus pies, porque podemos imaginarla un segundo despus cruzando la calle. Del mismo modo, un coche que aparece cortado en el lado izquierdo de una fotografa en la que solo se ve su parte delantera, podemos imaginarlo un segundo despus al lado derecho de la foto.
Repeticin La repeticin de algn elemento (unos globos, unos pjaros), dan un sentido de relacin de distintas partes de una imagen. Por ejemplo, una bandada de pjaros pueden estar movindose en grupo por el aire, definiendo formas interesantes en el cielo y aadiendo informacin sobre la direccin de la fotografa. En algunas ocasiones puede aportar factores psicolgicos, como el sentido de la unin y el compaerismo.
Grupos de Tres Parece existir una percepcin especial de los nmeros impares en fotografa, 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 esttica, y cuatro elementos pueden resultar demasiados para distribuir.
50
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Por algn motivo que no se explicar, a las personas nos gusta el nmero 3. En fotografa suele funcionar la agrupacin de tres elementos como centro de inters.
Regla de los Tercios Ya escribimos un artculo que explicaba la regla de los tercios con ms detalle. Si nos fijamos en obras de arte en cualquier museo, podremos comprobar que si dividimos un cuadro en cuadrculas de igual tamao de 3 x 3, las cuatro intersecciones de las cuadrculas dentro del cuadro marcan los puntos de inters. Trazando esta cuadrcula imaginaria sobre la mayora de las obras nos daremos cuenta de que elementos fundamentales del cuadro recaen sobre esas intersecciones: ventanas y puertas, ojos, lneas de horizonte, picos de montaas, etc. Est comprobado que llevando nuestro punto de inters a uno de esos cuatro puntos conseguimos una imagen mucho ms interesante.
Espacio Negativo
51
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Se considera espacio negativo los grandes espacios vacos, normalmente en blanco o negro, dentro de una fotografa, normalmente a un lado.
El alejamiento del elemento central de la imagen, rellenando el resto de la foto de un espacio vaco nos permite transmitir una informacin adicional de soledad, aislamiento o calma a la imagen. Aunque no es un recurso que vayamos a utilizar habitualmente, no est de ms conocerlo. Est enfrentada a la regla de composicin 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 aplicacin otros elementos compositivos como los colores o las lneas. 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 inters. 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
52
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS utilicemos a la hora de hacer fotografas, conseguiremos mayor o menor nitidez en el fondo.
Enmarcado Existen elementos que pueden ayudar a poner un marco al centro de inters de la foto. Algunos de estos elementos son muy claros, tapando completamente parte de la foto, como puertas, ventanas o puentes. Otros actan de una forma menos clara, simplemente orientando nuestra vista. Es el caso de las seales de trfico o las ramas de los rboles, etc. Cualquier elemento que "encierre" el centro de inters nos permitir enmarcar la foto, dirigiendo la atencin hacia el elemento deseado.
Curvas en S Las curvas en "S" son un elemento muy recurrente en fotografa. Est relacionado con la sensualidad. Tambin transmiten movimiento y ayudan a conducir la mirada. En la vida cotidiana encontramos muchos recursos que nos permiten aplicar curvas en S en nuestras fotografas. Una carretera, un camino, el curso de un ro, etc. Son elementos visuales muy potentes que dan inters a la fotografa.
53
Los detalles y el entorno como significadores En la fotografa del nio (A), podemos apreciar que est contento, que se divierte en lo que parece un automvil de juguete. Los elementos que aparecen al fondo no son suficientes para identificar el contexto. La segunda fotografa (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 rincn 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 operacin sabe que la fotografa es en una calesita, por lo que los elementos de fondo de la primera (A) le pueden parecer suficientes para identificar la situacin. El lectordestinatario no sabe previamente de que se trata, y necesita elementos para interpretar (decodificar, comprender).
54
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS La intranet debe contar con una Identidad grfica que transmita el sentido de pertenencia institucional a los trabajadores. Deben incluir combinaciones de colores institucionales.
La imagen grfica seleccionada para el sitio no debe afectar su funcionamiento ni incrementar los tiempos de carga y recarga del mismo.
Considerar la teora de Composicin en la Obra de Arte para dibujos e ilustraciones. Se toma en cuenta la organizacin del Campo Visual: La forma, el color, la textura. Las leyes compositivas como: la simetra, la ley de compensacin de la balanza, etc.
6.2.2.Contenido
Considere una estructura de intranet apropiada. El uso de tcnica de arquitectura de la informacin, ayuda a determinar la estructura ms adecuada para el sitio. Fcil orientacin. El contenido debe ser visible en la primera pgina. No debe ser necesario recurrir al mapa de sitio. Garantizar la cantidad de contenidos. Proporcionar al personal, la informacin que necesita para sus funciones. Los contenidos publicados deben contemplar los siguientes elementos de comunicacin: Uso de lenguaje simple, claro y directo, que permita a los lectores concentrarse en el mensaje y comprenderlo de manera fcil 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, ortografa y redaccin correctas. En caso de hacer uso de traduccin de trminos en idiomas diferentes al espaol, o los acuados por el uso, debe ser clara y exacta de acuerdo al contexto con el fin de reducir las acepciones mltiples
La intranet debe mostrar las polticas de uso del mismo y/o confidencialidad de la informacin en l publicada, los trminos y condiciones bajo los cuales se preste algn servicio, as como las exclusiones aplicables.
Recomendaciones para la organizacin de contenidos en una pgina web: Organice el texto con dos o tres niveles de titulares (segn la complejidad y extensin). Use listas numeradas y vietas 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 informacin que no sea central. 55 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Separe los prrafos. Si es necesario cree un ndice de contenido que facilite la navegacin del conjunto. Identifique fragmentos poco relevantes y seprelos del texto central. En ocasiones deber redactar de nuevo el cuerpo del texto en forma resumida con vnculos al resto de los fragmentos. Utilice un esquema de pirmide invertida de manera que lo ms importante quede en la parte superior de la pgina y luego agregue profundidad. El contenido en cada pgina debe abarcar entre el 50% y 80% del espacio disponible (tener en cuenta el espacio que utiliza el navegador). La barra de navegacin debe mantenerse por debajo del 20% del espacio.
6.2.3.Comunicaciones
Asciese con el equipo de Comunicaciones. Ya que pueden proporcionarle noticias e informacin corporativa.
6.3. Despus 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 polticas, guas y estndares relacionados a las actividades de la intranet. Creacin del Manual de Estndares Grficos o Estilos. Debe contemplar diversos aspectos como: ortografa, tipografa, diseo de la pgina, iconos, estructura de encabezados, etc. Tmese un tiempo para medir el ROI. Hacer una pausa para medir el tiempo que los usuarios requieren para realizar una tarea, tanto antes y despus de un diseo. Conocer se hubo un ahorro financiero, y una ganancia.
56
7. ERRORES COMUNES EN LAS INTRANETS18

7.1. Antes de iniciar la creacin 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 pginas web corporativas son las principales herramientas de relacin con los clientes finales, por lo que son consideradas por los empresarios como los canales clave para la generacin de ingresos. Este hecho provoca el denominado efecto eclipse, lo que significa que los entornos orientados a procesos de gestin interna quedan eclipsados por la pgina web, principal fuente de ingresos de la empresa. Efecto Cajn de Sastre: el 58% de empresas estudiadas afirman haber iniciado la programacin de su Intranet sin haber definido de forma concreta qu contenidos y servicios iban a albergar. Esta falta de conceptualizacin provoca el llamado efecto cajn de sastre, que unido al crecimiento descontrolado de los contenidos obliga a los responsables a disear la Intranet a medida que se crece, lo que provoca ineficiencias y errores de navegacin 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 creacin de la Intranet

7.2.1. Diseo Visual
Pobre diseo de pginas. En algunas intranets, los usuarios se enfrentan a un mar de enlaces. En varias intranets haba tanta informacin que los usuarios se vieron obligados a desplazarse por cinco o ms pginas. En algunas de las presentaciones haba mucho texto y muchos enlaces y los usuarios no tenan ninguna oportunidad de encontrar lo que estaban buscando. Los diseadores a menudo creen que si no ofrecen informacin o vnculos 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 estn en el nivel superior, los usuarios sufren de sobrecarga de informacin.
Visualizacin: errores a evitar en el empleo de color en la pantalla del ordenador. La utilizacin de colores demasiado saturados. Utilizar una paleta de colores extensa. Poco contraste de contenidos y elementos de lectura: Existe una tendencia de diseo de presentar en contenidos, los textos en tonos grisceos sobre fondo blanco, lo que genera algunos problemas de legibilidad. ejemplo
18
Ver el cuadro de resumen en el anexo 10.6
57
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS incorrecto, texto verde sobre fondo amarillo; ejemplo correcto: texto negro sobre fondo claro. Errores comunes a considerar en la fotografas antes de colocarlas en la Intranet. Reflejos del flash sobre el fondo. Hay veces que utilizamos el flash de la cmara sin darnos cuenta de que por detrs del objeto que estamos fotografiando hay una superficie que refleja la luz del flash. El caso ms obvio es el de un espejo, pero existen otro tipo de superficies que pueden reflejar la luz. Estos reflejos producen, desde una mala medicin de la luz del flash, oscureciendo toda la foto en el peor de los casos, hasta la aparicin de una zona en la foto quemada por la exposicin 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 fotografa con flash. Ojos rojos Cuando llegue a sus manos una fotografa con personas o animales con ojos rojos, slo hay que realizar la correccin con algn 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 58
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS queremos fotografiar para, por ejemplo, contrarrestar la sombra provocada por estar situado el sujeto a contraluz. Uno de los problemas tpicos que se puede producir con esta tcnica se produce cuando la iluminacin 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 hubiramos sacado el elemento en primer plano de otra fotografa y lo hubiramos "recortado y pegado" en la foto.
Lneas que deberan ser horizontales o verticales pero no lo son. Muchas veces tenemos en nuestras fotos lneas de referencia que son claramente horizontales o verticales, como por ejemplo la lnea del horizonte, mucho ms visible cuando estamos haciendo fotografas en el mar. Lo cierto es que, a simple vista, es muy complicado hacer estas fotos bien, porque una inclinacin de tan solo un par de grados har que el resultado de nuestra foto no sea el esperado por haber quedado torcidas estas lneas de referencia. Antes del retoque
59
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Despus del Retoque
Lneas torcidas en edificios. Este es un defecto que normalmente viene provocado por la propia cmara, o para ser ms exactos, por la ptica de la cmara. Tambin 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 lneas verticales de las paredes tienden a cerrarse en su parte superior, en lugar de ir paralelas al borde de la fotografa. En algunos casos se puede corregir con software especfico, cuando el efecto no es demasiado acusado. Las ltimas versiones de Adobe Photoshop cuentan con una utilidad especfica para ello. Tambin se puede realizar una leve correccin de la perspectiva con Adobe Photoshop. Antes del Retoque
60
Despus del Retoque
Esquinas oscurecidas por el uso incorrecto de algn filtro u objetivo (vieteo). El efecto de vieteo o vieteado se produce en ciertos objetivos con algunas focales extremas, o utilizados en combinacin con algn filtro, y el resultado es el oscurecimiento de las esquinas de la fotografa. Es un recurso que se puede aplicar de manera artificial para ayudar a centrar la atencin del espectador en el centro de la foto, pero en general se considera un defecto de la fotografa. Tambin hay algunas aplicaciones que permiten corregirlo y algunos programas de retoque que permiten lograr este efecto.
Cielos anormalmente azules por el uso de algn filtro. Existen filtros que afectan a la luz que pasa a travs del objetivo, influyendo en el modo en que quedan recogidos los colores. Hay filtros especficos que afectan al color del cielo, realzando los tonos azules recogidos. Hay que hacer un uso cuidadoso de este tipo de filtros, porque una variacin excesiva de lo tonos del cielo sobre los que estamos acostumbrados a ver en la vida diaria puede traspasar la lnea invisible que marca la diferencia entre algo llamativo y algo definitivamente errado. Imgenes 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. 61
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS La profundidad de campo bien empleada debe ser aquella que nos permita resaltar aquello en lo que queramos que se centre la atencin del espectador; ni ms ni menos.
Los errores ms comunes en la navegacin son: Navegacin que no es ni coherente ni persistente. Algunas intranets se basaron en caractersticas tales como un ndice de A-a-Z o un mapa del sitio. Tales caractersticas fueron dadas a veces con enlaces en la pgina principal. Esto estara bien, salvo que en varias intranets el men principal desaparece por completo en varias pginas, y caractersticas como la A-aZ fueron el nico ndice de navegacin 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 pestaas en una sola pgina, una barra de color en otro, en otros botones en la misma intranet. En algunos casos, los diseadores optaron por temas en categoras, lo que obliga a los usuarios a pasar por demasiadas pginas que tienen vnculos, pero no descripciones. A travs de la tarjeta de clasificacin y estudios de usabilidad, se puede determinar la mejor manera de clasificar y nombrar a los mens y los enlaces para que los usuarios sepan dnde buscar subpginas. En los mens de navegacin, mejor texto que imgenes. Ya sabemos que dreamweaver lo hace fcil, pero creme, los problemas son muy superiores a los beneficios. Un flujo de navegacin bien pensado con subsecciones siempre es mejor que utilizar mens desplegables. Mens de conexin en cascada. La gente tiene problemas al utilizar los mens que vuelan. Todava vea con mltiples diseos de muchos mens en cascada, algunos de los cuales incluso en cascada en varios niveles. Mejores opciones existen, como por ejemplo, ampliar los mens en el lugar, simplemente disminuyendo el nmero de opciones de men. No mantener la funcionalidad lgica del botn Atrs del navegador. Este es un principio bsico en usabilidad. El visitante sabe que pulsando ese botn, va a volver a la pgina anterior que estaba visitando, no rompas esta regla.
62
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS No cambiar el color de enlaces visitados. Una buena presentacin de la navegacin realizada en el pasado ayuda a entender la situacin actual. Conociendo las localizaciones de tu pasado y presente, resulta ms fcil decidir cul es el siguiente paso. Los enlaces son un factor fundamental en el proceso de navegacin. 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 ms importante, conocer que pginas han visitado ya libera a los usuarios de volver sin intencin a volver a visitar pginas 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 desorientacin en los test de usabilidad. Enlaces ocultos: Hay gente a la que no le gustan los enlaces subrayados, pero tampoco hay que esconderlos con imgenes 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 informacin o ninguna para volver a la seccin anterior puede hacer que abandone de inmediato la web. Capas que se superponen: Hay que tener cuidado con mens desplegables o capas que se mueven ya que pueden superponer con otras capas de la web y quedar ocultas tras estas o taparlas. Navegacin dinmica: Al igual que la navegacin con arrastre, est muy bien en pequeos aspectos para dar un toque moderno, pero la gente est acostumbrada a una navegacin clsica. Mens desplegables: Los usuarios suelen sacar el cursor del men y este se cierra inmediatamente, lo que genera una situacin muy incmoda, por lo que si se ponen por lo menos que no sean pequeos y difciles de navegar. No incluir un enlace activo a la pgina de portada en la misma pgina de portada. Este es un caso especial de una directiva que se aplica a todas las pginas de los sitios web o intranet: nunca tengas un enlace que apunte a la pgina actual. (Un botn para refrescar los valores de las acciones u otra informacin cambiante es otra cosa y deben ser presentados como un botn, preferiblemente que un enlace, dado que stos no nos llevan a otro lugar.) El enlace activo a la pgina actual causa 3 problemas: o o o Si los usuarios hacen clic en l, ser una absoluta prdida de tiempo para ellos dirigirse a la misma pgina. Peor, tales enlaces le provocan a los usuarios la duda de si ellos realmente estn en la ubicacin que piensan estar. La peor de todas, si los usuarios siguen estos enlaces estarn confundidos en sus nuevas ubicaciones, especialmente si la pgina es desplazada a la parte superior.
El enlace a la pgina de portada en la propia pgina de portada resulta, normalmente, de usar una barra de navegacin universal que incluye el "home" como una opcin. Eso est bien. Pero cuando los usuarios estn 63
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS en la pgina que es presentada en la barra de navegacin, debes desactivar las opciones del enlace y resaltar ste, tal es la manera de indicar que esa es la ubicacin actual. No limitar la utilizacin de marcos o frames debido a que ocasionan problemas: La direccin URL es la del frameset (archivo que contiene informacin sobre el conjunto de marcos utilizados) en vez de la pgina de contenido. Dejan de funcionar los marcadores: favoritos, historial, copiado de URLs y pegado de otros documentos y e-mails. Lo anterior impide la difusin boca a boca de los URLs. Roban espacio valioso de la pantalla a expensas de contenido. Se complica el proceso de impresin. Confunden a los motores de bsqueda en la creacin de los ndices. Las pginas externas vistas dentro de un marco se ven diferentes al diseo original. Si la pgina de destino tambin est diseada con marcos el problema de usabilidad se agrava.
Los errores ms comunes a la hora de disear una pgina web considerando a las personas con discapacidades visuales. Los problemas habituales en la accesibilidad son: Colocar imgenes 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 pginas. Los sonidos no subtitulados y las imgenes no descritas. La ausencia de informacin alternativa para los usuarios a los marcos (frames) o a los programas incrustados (scripts). Pobres contraste entre el texto y el fondo de pgina.
Disear pginas muy largas con grficos pesados, animaciones y componentes. Sobrecarga visual: Prrafos enteros en negrita o frases completas que son enlaces no contribuyen a la navegacin y sobrecargan la pgina. Los errores ms comunes en el uso de la tipografa son:
Utilizar tamaos de letra inferiores a los perfectamente visibles. Usar muchos formatos de texto en todo el sitio y hacer de su sitio un catlogo de fuentes. Deben usa las mismas fuentes, tamaos, 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 mayora de los navegadores. Estas son Geneva, Verdana, Arial, Times New Roman y Courier.
Texto parpadeante. Hace difcil la atencin a cualquier otro elemento de la pgina. 64 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID
Textos deslizantes. Leer un texto que se mueve es incmodo, marea, produce fatiga y no permite fijar la atencin 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 impresin. El texto debe soportar escaneabilidad, use trucos bien documentados: o o o o o o Sub cabeceras Listas Destaque palabras claves Prrafos cortos La pirmide invertida Un estilo de escritura simple
Tamao de fuente fija. Los CSS desafortunadamente dan el poder a los sitios web de deshabilitar la opcin de los navegadores de "cambiar el tamao de la fuente" y especificar un tamao 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 aos. Respete las preferencias del usuario y djeles cambiar el tamao del texto segn lo necesiten. Adems, especifique el tamao de las fuentes en trminos relativos -- no como un nmero absoluto de pxeles.
Los errores a la hora de colocar grficos o imgenes en una pgina web: Usar grficos slo para decorar la pgina de portada y no para que muestren contenidos reales. Por ejemplo, utilice fotos de personas las cuales tengan una conexin obvia con el contenido, opuesto a utilizar modelos o fotos comunes. Grficas ilustrativas pueden distraer a los usuarios del contenido crtico.
Sobre los errores en animaciones: Colocar animaciones innecesarias. Al tiempo que retrasan la visualizacin de la pgina, distraen la atencin del usuario al igual que el texto parpadeante. Si todo las pginas web estn 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. Mralo 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 diseo de iconos en sistemas, aplicables tambin a los iconos para pginas web son: Insuficiente diferenciacin entre iconos. Muchas veces en un set de iconos tenemos muchos que se parecen y es bastante difcil distinguir uno de otro. Si no lees las leyendas que lo acompaan, fcilmente te equivocars. 65
Iconos de la seccin de Utilidades en Mac OSX. Siempre me confundo y lanzo la aplicacin que no toca. Este problema se hace ms gordo cuando los iconos son de tamao reducido.
El problema se agrava ms cuando se reduce el tamao de los iconos. Demasiados elementos en un mismo icono. Cuanto ms simple sea el icono, mejor. Es preferible mantener el nmero de elementos dentro del icono al mnimo. Sin embargo, los diseadores de Microsoft, inspirados por el nuevo formato de los iconos de Windows Vista, decidieron hincharlos para justificar el hinchado presupuesto. Cada icono representa una minihistoria con una trama. El problema es que al hacerlos pequeos es imposible saber que representan. Incluso con el tamao correcto ya cuesta saber que significan. Elementos innecesarios. Un icono debe ser fcil de leer. Cuantos menos elementos tenga, mejor. Y es mejor an si la imagen entera es relevante, no slo una parte de ella. Por lo tanto tienes que prestar atencin al contexto donde se encuentran los iconos. Echa un vistazo a estos iconos de bases de datos por ejemplo:
66
A primera vista, todo parece bien. Pero si este programa (o una barra de herramientas) trabaja solo con bases de datos, podemos ( y deberamos ) eliminar la parte innecesaria.
El sentido no se ha perdido y los iconos son mucho ms distinguibles. Aqu tenemos un ejemplo real de elementos innecesarios en iconos de BeOS 5:
Los signos de verificacin aqu son absolutamente superfluos. Por cierto, por qu estn en rojo?. Carencia de una misma lnea de diseo en un set de iconos. Una lnea de diseo de dice cuando un conjunto de elementos tiene algo en comn, 67
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS colores, estilos, perspectiva, tamao, dibujo o cualquier propiedad que los identifique como una unidad. Si hay solo unos pocos iconos, es fcil para el diseador mantener en la cabeza estas reglas para ir creando otros con la misma lnea de diseo. Pero si se trata de una cantidad mucho mayor, como iconos en un sistema operativo, ya no es slo un diseador el que se encarga de la tarea, sino varios, y es entonces cuando tiene que existir unas instrucciones comunes de cmo disear 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 pequeos. El progreso no se detiene: las interfaces han ganado potencia y ahora son capaces de mostrar objetos semi-transparentes, usar ms 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 pequeos de 1616 o ms an. Por ejemplo, tomemos el gestor de aplicaciones de RedHat 9:
La perspectiva en iconos tan pequeos es innecesaria e incluso contraproducente. Y este es el gestor de aplicaciones de Windows XP:
68
Como norma, los iconos en Windows XP tienen 2 pxel de sombra en negro, pero en tamaos como 1616 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. Metforas demasiado originales. Lo que se muestra en un icono es un compromiso entre reconocimiento y originalidad. Antes de desarrollar una metfora para el icono (imagen) es una buena idea como han solucionado el problema los dems. Tal vez la mejor solucin no es la ms original, sino ms bien la adopcin a una solucin 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 eleccin 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 solucin acertada. Nacionalidades o caractersticas sociales no es estn 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 caractersticas nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un pas a otro. Si nos dicen que tenemos que dibujar un icono para trabajar con correo electrnico, tiene perfecto sentido usar la metfora real de un buzn de correo por ejemplo:
69
Estas imgenes son cortesa del artculo de la wikipedia titulado Post box. La respuesta puede encontrarse en el manual sobre la creacin de iconos para MacOSX. Usa elementos universales que las personas reconocen fcilmente. Evita centrar la atencin en un aspecto secundario del elemento. Por ejemplo, para un icono de correo, un buzn rural sera menos reconocible que un sello de correos La idea de usar un sello est bien, pero el uso del halcn de cola roja en la imagen, es sin duda cuestionable. Sin embargo, no slo tienes que tener presente las caractersticas nacionalesEsto me recuerda algo divertido. Una vez, necesitbamos un icono que representara un filtro de datos, que a menudo se usa la metfora de un embudo. Se seala 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! Imgenes de elementos de la interfaz dentro de los iconos. El manual sobre la creacin de iconos para MaxOSX nos advierte:Evita el uso de elementos de la interfaz Aqua en tus iconos, podran 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 atencin 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 comn en iconos de programas. Es evidente que la primera cosa que te viene a la mente cuando trabajas sobre un icono de una aplicacin es adaptar el logotipo del programa al tamao 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 localizacin. En segundo lugar, si el icono es pequeo 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. 70 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID
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 tamaos grandes todo se ve bien, pero en realidad los iconos son pequeos y con un nmero de pxeles limitados, as que cuando reduzcamos el tamao y pasemos de vector-mapa de pxeles, el antialiasing suavizar los bordes.
7.2.2.
Contenido
Carencia de Informacin en la pgina principal. Algunas intranets no ofrecen ningn tipo de noticia o informacin en la pgina de inicio. Slo enlaces. Esto no crea una buena primera impresin. Tambin se pierde la oportunidad de llegar rpidamente a los usuarios con anuncios importantes.
No hacer fcil el acceso a los contenidos recientes de la pgina principal. En general, los usuarios recuerdan cuando ellos han visto algo interesante en la pgina de portada. Sin embargo, a menos que la pgina muestre una lista de los contenidos recientes y ofrezca un enlace a ellos, los usuarios no tendrn la posibilidad de encontrar lo que estn buscando de sus visitas ulteriores.
7.2.3.
Desarrollo
Cdigo prehistrico reemplazable con CSS. En muchos casos se pueden ver cosas, como en la Web de correos de Espaa, donde utilizan el tag <font> con una clase de CSS para hacer las letras en negrita, lo hace de esta forma:
71
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS <p><font class="txtNegrita">Lugares y medios de exposicin.</font><br/> En las Jefaturas Provinciales de Correos y Telgrafos, Ceuta y Melilla</p> Cuando deberan haber hecho: <h3>Lugares y medios de exposicin</h3> <p>En las Jefaturas Provinciales de Correos y Telgrafos, 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 podran usar el tag <b> o el tag <strong> para dar ms significado semntico al asunto: <p>Junto a este viaje al pasado, el <font class="txtNegrita">Museo Postal y Telegrfico</font> abre una ventana al futuro con la exposicin de una maqueta del satlite Hispasat.</p> Ntese la cantidad de veces que tendrn que escribir en cada documento la clase class="txtNegrita" en cada pgina donde requieran negritas y ttulos, si comparamos class="txtNegrita" con la cantidad de caracteres que pueda llevar escribir los elementos de un ttulo 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 intiles podran ahorrar hasta 1 MB de caracteres de atributos basura, caracteres de ms a toda la totalidad de documentos. El ejemplo correcto sera: <p>Junto a este viaje al pasado, el <strong>Museo Postal y Telegrfico</strong> abre una ventana al futuro con la exposicin de una maqueta del satlite Hispasat.</p> Y en la plantilla de CSS ponerle el color o el tipo de letra que desees. Olvidarse de la semntica, los documentos son una pila de informacin sin clasificarEso mismo, una pila de informacin sin clasificar, la semntica es una de las reas de los estndares Web que ms importancia tiene que haber en las pginas que ofrecen contenidos y servicios pblicos, de hecho en todas las pginas debera haber un mnimo de semntica, uno de los problemas que observo es que muchas empresas grandes que tienen suficiente dinero para hacer estas cosas bien, lo hacen al revs, cuando la semntica no slo nos permite darle un significado esto es un ttulo", esto es un prrafo", esto es una cita sino tambin que nos dan clasificacin y jerarqua dentro de un documento, por ende puede retornar ms beneficios. La jerarqua viene de los elementos como los ttulos, listas, definiciones, y la clasificacin nos permite editar esas jerarquas desde CSS, en pocas palabras que, a mejor jerarquizado y clasificado est el cdigo, ms fcil es controlarlo con un CSS. Ejemplo horrendo de la Web de Correos de Espaa, para hacer un ttulo y un prrafo utilizan todo este cdigo: <tr valign="bottom"> <td height="24 valign="bottom"><a href="/identidad/ class="TitSeccionBold">Una nueva imagen, una nueva identidad</a></td> </tr> <tr> 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 72
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS <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 redisea su marca y todos sus elementos clave de identificacin visual <a href="/00/img/nuevaimg.avi class="txtLink">Ver vdeo</a></td> </tr> Como podemos apreciar en el cdigo, prevalecen las ganas de armarlo todo en el mismo documento de HTML, cuando podra estar mucho ms limpio, semntico y controlado por unas pocas reglas de CSS. Podramos 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 redisea su marca y todos sus elementos clave de identificacin visual. <a href="/00/img/nuevaimg.avi class="txtLink">Ver vdeo</a></p></div> Notan la cantidad de caracteres, imgenes y cdigo mal utilizado que he ahorrado? y en el CSS, cre una regla para que no se tengan que repetir ni usar ms 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 cdigo de HTML coherente, no deber escribir ms cdigo de ms en el HTML, ni clases, ni usar imgenes para hacer lneas o subrayados en los ttulos, tampoco usarn imgenes 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 ms peso en la pgina Es comn en desarrollo comentar ciertas partes de un cdigo, en programacin 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 lnea, el servidor Web procesa la pgina, y el cdigo comentado, envindolo al ordenador cliente, de modo que el mismo navegador es el que no procesa este cdigo comentado. Un error bsico es utilizar los comentarios de HTML para comentar largas porciones de cdigo HTML, los comentarios de HTML estn hechos para realizar ayudas, o para hacer anotaciones. El problema comienza cuando se comenta 10 lneas de cdigo en HTML ste sigue apareciendo y siendo procesador por el servidor, debera comentar esto con otro tipo de lenguaje, de modo que sea procesado directamente en el servidor Web y no en el navegador. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 73
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Ejemplo de una porcin de cdigo 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 lnea de alta velocidad. Disponible en ms de 35 oficinas distribuidas por todo el territorio.</td> </tr>> Esto nos ahorra tener que enviarle al ordenador cliente, cdigo que nunca procesar e utilizar, unos cuantos KB menos de peso en cada pgina. Esto se logra no utilizando los comentarios normales de HTML  sino utilizando algn lenguaje de scripting normal como PHP o ASP. Otra de las cosas que se recomienda es no comentar largas porciones de cdigo, sino directamente borrarlas o extraerlas a otro documento de repositorio. Utilizar hojas de estilo en lnea o embebidas en los documentos. Un factor importante en los documentos Web debe ser la separacin del contenido de la presentacin, 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 pginas institucionales vemos como embeben el cdigo de las hojas de estilos en la cabecera, en vez de tener 1 hoja de estilos externa con la informacin para la estructura y posicionamiento de los elementos principales, y otra hoja de estilos que vara de seccin en seccin, 1 para todas las pginas, con la informacin mnima, y la otra es una informacin nica para realizar un posicionamiento de un elemento o algo que se encuentre en 2 o 3 pginas, aqu estamos dividiendo recursos, y economizando trabajo. Algo comn que vemos en la Web de Correos de Espaa y el diario El Pas: <head> <style> 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 74
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS .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> Ntese 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 pgina, tendr que descargarse y procesar esta porcin de cdigo, que es poco si, pero cuenten unos 70 documentos, y hagan el clculo de cuantos KiloBytes llevan sumando. En la Web de Correos, se pueden observar cosas como porciones masivas de cdigo CSS en todos los documentos, no slo ubicada entre los elementos sino en el medio del documento mismo, cosa que no est permitido, ni es una prctica muy sana Tampoco es sano ver que un tag bold tiene estilos en lnea, por ejemplo, observamos en la pgina del diario El Pas: <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 cdigo de HTML que se procesa una y otra vez, se enva y se descargar cada vez que alguien requiere la pgina, No es mejor asignarle una clase especial a ese tipo de mdulos? Y de esta manera se aprovecha todas las clases en mltiples pginas a tener que cargar en lnea siempre la misma cantidad de cdigo? Esto est mal. Mapa Web del sitio. Para qu hace falta una pgina con un millar de enlaces? El usuario no puede encontrar lo que busca? Entonces eso sucede por 2 factores: o o Pgina mal organizada Posee un buscador que no hace nada til.
Est claro, en el 100% de los casos noto que el mapa del sitio es algo intil, no ayuda en nada, el usuario no tiene por qu mirar entre un millar de enlaces, no hace falta, tampoco le ofrece la solucin instantnea. La solucin es un buen buscador, de modo que ni bien entro a un sitio, no tengo que estar 1 hora inspeccionando una pgina con 700 enlaces. Nada mejor que un buen buscador y una buena arquitectura de la informacin. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 75
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Estos son algunos errores comunes en CSS.
Uso innecesario del valor 0 El cdigo 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 razn de hacer esto es si necesita cambiar estos valores ms tarde. Si no declarar estas unidades no tiene sentido. Los pxeles cero son iguales que los puntos cero. Sin embargo, line-height puede no tener unidad. Por eso es vlido 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 cdigos de colores. No escribir el cdigo de esta manera: color: #ffffff; background-color:#000000; border:1px solid #ee66aa;
Los valores duplicados pueden ser omitidos. Escribiendo los cdigos de esta manera: color:#fff; 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 76
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS background-color:#000; border:1px solid #e6a; Por supuesto esto no debes hacerlo con cdigos como este! color: #fe69b2; Evitar repeticiones de cdigo innecesario. Evita usar varias lneas 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; Podramos resumirlo en una nica lnea esta: border:1px solid #00f; La duplicacin es necesaria con los estilos en cascada. En los estilos en cascada es aceptable repetir el mismo cdigo para un elemento dos veces, si significa evitar la repeticin 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 lneas, uso slo dos: border:1px solid #00f; border-left:1px solid #f00; En este caso primero definimos todos los "borders" con el mismo color pero ms tarde para ahorrarnos dos lneas de cdigo redefinimos el "border" izquierda a otro color, de esta manera hemos ahorrado dos lneas de cdigo. El ejemplo malgastando espacio quedara 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 pgina pues estamos definiendo el "border" izquierda dos veces, pero la carga de este proceso es insignificante. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 77
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Los estilos invlidos 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 ningn espacio. Especificar los colores sin usar palabras. Definir los colores usando las palabras que lo definen no es una buena idea puesto que estaramos confiando en el navegador para que el interprete que color y cdigo debe aplicar. Las tonalidades para un mismo nombre de color cambian mucho de un navegador a otro. Es una buena prctica especificar siempre el color por su cdigo hexadecimal. Ej.: utilizar "#fff" en lugar de blanco. Agrupar estilos idnticos Es comn ver los estilos escritos una y otra vez con el mismo cdigo, an cuando el estilo es igual. Sera conveniente agruparlos y as optimizaramos espacio: h1, p, #footer, .intro { font-family:Arial,Helvetica,sans-serif; } Tambin nos har mucho ms fcil la tarea de actualizar el cdigo.
78
8. LAS INTRANETS DEL FUTURO

8.1. Elementos de la Intranet del Futuro Modelo 1
Los grficos que se incluyen son slo referenciales y sirven para ayudar a conceptualizar los elementos que conformaran el diseo de las Intranets futuras. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 79
8.2. Elementos de la Intranet del Futuro Modelo 2
En el Anexo 2 encontrar ms informacin acerca del formato SVG.
80
8.3. Elementos de la Intranet del Futuro. Modelo 3
Imgenes 3D del Juego de video Evil under sun y markonens@hotmail.com
81
9. CONCLUSIONES
9.1. Conclusiones del Estudio de Diseo Visual.
9.1.1. Intranets de Administraciones Tributarias y Aduaneras 19
Las Cinco Buenas Prcticas ms usadas por este rubro de Intranets son: 1. Los Estndares de Accesibilidad. 2. El buen uso del Color en las Interfaces. 3. El buen uso de las fuentes y tipos de letra en el diseo de las pginas. 4. Los Estndares de Usabilidad. 5. La facilidad de la navegacin mediante barras de navegacin y enlaces fciles 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 Prcticas ms usadas por la Intranets ganadoras en general son: 1. Los Estndares de Usabilidad. 2. El adecuado uso del color. 3. El uso de Hojas de Estilo CSS o Plantillas para mantener el diseo en las pginas de su Intranet.
9.2. Conclusiones extradas de las Buenas Prcticas de las Intranets 21

9.2.1. Antes de Iniciar la creacin de la Intranet
Distinguir Sitios web corporativos de Intranets, para lograrlo deber elaborar una estrategia general de la Intranet considerando las necesidades especficas de la organizacin, de los directivos y de los usuarios, as como, las metas que deber cumplir. Para ello, apyese en las experiencias de otros organismos y realice una Investigacin de Usabilidad. Cree un nombre a la Intranet que identifique a los trabajadores con su Institucin.
19
Revisar Cuadro de Buenas Prcticas en Diseo Visual de las Administraciones Tributarias y Aduaneras en anexo 10.4.1. 20 Revisar los cuadros de Buenas Prcticas en Diseo Visual en los anexos 10.4.2 y 10.4.3. 21 Buenas Prcticas en Intranets descritas en tem 6. Tambin puede visualizar el cuadro de resumen que se encuentra el anexo 10.5.4
82
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 9.2.2.Durante la creacin de la Intranet
9.2.2.1.
Diseo Visual
Seguir las pautas establecidas en los estndares internacionales globales como: W3C, referido a Estndares Web. ISO 13407, referido a Procesos en el Diseo centrado en el usuario. IEC 9241-11, referido a la Gua de Usabilidad IEC 9126, referido a Ingeniera de Software, etc. Los educacionales en el caso de la interfaces relacionadas con educacin y e-learning (SCORM, AICC). Los conceptos de Arquitectura de la Informacin y Diseo de Interaccin.
Considerar la creacin de un Diseo Flexible y Arquitectura para la escalabilidad de la Intranet. Colocar la opcin de Agregar a Favoritos, en cada pgina, que sea de inters del usuario. Por ello, cada pgina contar con una URL propia y exclusiva. Permitir la Personalizacin, formando Comunidades o Perfiles de Usuario, para evitar el exceso de contenido en la Intranet. Considerar las Reglas de Composicin Fotogrfica y optimizar el uso de las imgenes. Considerar las Reglas de Composicin del Arte para los dibujos e Ilustraciones que se requieran en la Intranet. Considerar los conceptos de Semitica y Sealtica para la creacin de iconos. Tomar en cuenta que cada elemento visual de la pgina de la Intranet como: mens, botones, iconos, fotos, letras, etc. Tiene consideraciones especficas, mencionadas en este Estudio. Que deben complementarse con conceptos de Comunicacin Visual e Identidad Corporativa. Crear una simple e intuitiva interfaz de usuario y arquitectura. Aadir enlaces en los elementos que sean necesarios, tomando en cuenta las recomendaciones para el uso de enlaces mencionados en las Buenas Prcticas de este Estudio.
9.2.2.2.
Contenido
Identificar al Editor lder y a los Editores de apoyo, capacitarlos y centralizar en ellos la edicin del contenido, facilitndoles herramientas que simplifiquen su trabajo. Seguir las recomendaciones para la organizacin de contenidos contemplando sus elementos de comunicacin. Muestre las polticas de uso y su confidencialidad de la Intranet.
Establezca una denominacin convencional para los archivos descargables. 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID
83
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 9.2.2.3. Comunicaciones
Crear una Estrategia de Comunicacin en conjunto con el rea de comunicaciones para el lanzamiento de la Intranet y comunique los beneficios de la estandarizacin. Despus de creada la Intranet
9.2.3.
9.2.3.1.
Gestin
Mida el ROI de la Intranet. 9.2.3.2. Diseo
Pruebas de Usabilidad para perfeccionar la Intranet. Atender las notificaciones rpidamente. Cree un Manual de Estndares Grfico o Estilos. 9.2.3.3. Contenido
Supervisar la produccin de contenido y revisarlos antes de su publicacin. Capacitar al personal para afrontar las posibles emergencias que puedan surgir en la Intranet.
9.3. Conclusiones Especficas extradas de Administraciones Tributarias y Aduaneras.
los
Doce
Casos
de
84
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, significara ser visualizado en nuevos aparatos o artculos 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 ms resaltantes que conformarn est Intranet Futura se encuentran: 1. La Bsqueda de Informacin utilizando Inteligencia Artificial unida a la Web Semntica que permitir la bsqueda de archivos multimedia (audio, animaciones y video) adems de la bsqueda 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 algn funcionario o al transporte de la Institucin. 4. Capacitacin utilizando herramientas multimedia (audio, animaciones y video). 5. Realizacin de cursos, tutoriales educativos por medio de la creacin de mundos virtuales de enseanza parecidos a Second Life. 6. Aplicaciones de reas internas o por procesos de la Organizacin. 7. Herramientas de Escritorio como Agenda Institucional y Personal, Reloj Mundial para conocer la hora de algn pas donde se encuentre el funcionario para coordinar una posible reunin o entrevista. Editores de Texto, Hoja de Clculo, etc. que puede ser visualizada desde la Intranet. 8. La implementacin de aplicaciones Killer que animen a los usuarios a usar la nueva intranet.
Se destaca que en el caso del Diseo 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 estticos. Tambin se puede masificar en el futuro el uso del 3D para la creacin de mundos virtuales.
9.5. Conclusiones sobre el Diseo Visual de la Intranet de SUNAT
85
9.6. Conclusiones Finales

Siga las Buenas Prcticas mencionadas en este Estudio y verifique que durante y despus de creada la Intranet, no se cometan los errores comunes mencionados en este Estudio. La Usabilidad es estratgica en una empresa u organismo. Es an muy comn escuchar comentarios y preguntas como: Qu es ms importante, la usabilidad o el diseo?, o Este cliente no busca usabilidad, sino diseo. Ambos comentarios demuestran una falta de claridad a la hora de interpretar y entender la usabilidad. Independientemente de estilo grfico que se desee conseguir en una web, la usabilidad es un elemento crtico a tener en cuenta desde el comienzo de la primera idea, desde que se empieza a pensar en la creacin de una web, y durante todo el proceso de diseo 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 Obsesin por el Diseo, de Tom Peters. Entre muchas otras cosas, Peters explica que para la mayor parte de las personas, diseo significa apariencia, cuando el diseo es el alma fundamental de una creacin humana. Peters habla del diseo no slo como la parte grfica o aspecto (o look & feel) de un producto (incluida una web), sino como la definicin funcional de dicho producto. Es decir, el diseo del producto es estratgicamente clave para la empresa que lo produce. No se puede elegir entre diseo o usabilidad, ya que cualquier Intranet, independientemente del tipo de diseo grfico, necesita de una capacidad para ser usado por un usuario final especfico ante un contexto especfico. Las Intranets en un futuro prximo se convertirn en el escritorio de trabajo de los empleados de una institucin o empresa, poco a poco dejaremos de lado los software de escritorio u otros, para encontrar sistemas que estn integrados a la Intranet, que se activan y funcionan desde la Intranet, efectuando desde un documento hasta presentaciones, grabaciones de video y voz, gestin de proyectos y muchsimas ms funciones especficas de los procesos y servicios de cada Institucin. La personalizacin ser un requisito indispensable con opciones de configuracin de temas en el diseo de la pgina as como el grado de importancia que tendr cada opcin en la interfaz de su Intranet. Trasladaremos nuestras oficinas a nuestro hogar y realizaremos reuniones virtuales. Podremos trabajar cmodamente 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 opcin ingresar, adems 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 continan realizndose en el campo de la Inteligencia Artificial.
86
10.
ANEXOS
10.1. CUADRO COMPARATIVO N 1 DE LA APLICACIN DE BUENAS PRCTICAS

10.1.1. Leyenda
INTRANETS T RIBUTARIAS 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 Administracin Tributaria Espaa I7= Superintendencia de Administracin Tributaria Guatemala I8= Servicio de Aduana y la Oficina de Tarificacin, Ministerio de Finanzas Japn I9= Servicio de Administracin Tributaria Mxico I10= Direccin General de Ingresos del Ministerio de Economa y Finanzas Panam I11= Superintendencia de Administracin Tributaria Per I12= Direccin General de Impuestos DGCI - Portugal L AS 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 L AS 10 MEJORES INTRANETS
A
N IVEL 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 PUNTUACIN 0 = Su Intranet NO realiza esta Buena Prctica 1 = Su Intranet SI realiza esta Buena Prctica -- = Este dato no aparece en el Reporte de Norman Nielsen Group 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 87
88
10.1.2. Conclusiones Generales de la autora extradas del Cuadro Comparativo N 1 de las Buenas Prcticas sobre los 32 casos de Intranets expuestos en este Estudio.
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 pginas de diseo grfico): es escalable, compacto, con formas siempre editable a travs de curvas Bzier, con contornos suavizados, transparencias, y capaz de incluir, si es preciso, bitmaps. El tamao de los SVG es muy compacto. El texto que incluyen es editable: admite las fuentes escalables ms 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 grfico se puede calibrar con los sistemas estndar de gestin 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 estndares actuales de la web y --lo que es ms importante-- con los futuros. Soporte de hojas de estilo CSS. Esto significa que con las hojas de estilo podemos modificar, de la forma ms poderosa y fcil, incluso los grficos de las pginas web! El control y poder creativo que esto supone es insuperable. Ser posible crear pginas con una riqueza tipogrfica y de layout sin precedentes, sin sacrificar la accesibilidad del contenido escrito. Puede incluir cdigo (scripts) que modifican el grfico dinmicamente en funcin de las necesidades. Al ser XML, es un formato extensible: los fabricantes podrn adoptarlo como formato nativo de sus aplicaciones, aadiendo las caractersticas especficas que deseen, pero siempre mantendr la compatibilidad bsica y universal con toda aplicacin que reconozca el formato. Admite efectos como sonido, efectos visuales al hacer clic o mover el ratn, etiquetas informativas... Puede generarse dinmicamente en un servidor web como respuesta a instrucciones de Java, JavaScript, Perl o XML. Por ejemplo, pueden crearse al momento grficos de excelente calidad con las cotizaciones de bolsa en tiempo real; un reloj analgico, con minutos y segundos, requiere slo 2K de cdigo. SVG puede llegar a simplificar extraordinariamente el "workflow" para la web. En una aplicacin nica se podr generar casi todo el contenido de las pginas, y convertirse en un formato universal: todos los programas podrn abrir todo tipo de ficheros. Los grficos SVG no sern, como hasta ahora, una versin mutilada de un grfico que ha
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS pasado por varias aplicaciones. Se ahorraran conversiones, pasos de un programa a otro, tareas de optimizar, cambiar de tamao, etc. Los grficos SVG, como en este ejemplo de un mapa de Viena, pueden generarse dinmicamente en un servidor, a partir de los datos solicitados por el visitante (ver la direccin del ejemplo ms abajo.) A diferencia de otros formatos grficos, 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 cdigo de un svg. Est escrito en xml; los diferentes componentes del grfico se identifican en cada carpeta (por ejemplo, rect, polygon...) y los parmetros figuran al lado. Este formato parece el sueo de todos los diseadores hecho realidad. Ciertamente, las posibilidades estn ah. Pero an hay un largo camino a recorrer. Las soluciones --o los apaos-- actuales (html + flash) tienen vigencia asegurada durante unos aos. De momento, Flash ofrece mucha ms interactividad, una implantacin creciente y facilidad de uso. Casi el 80% de los navegadores pueden ver pelculas 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 grficos para la web. De hecho, tcnicamente 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 situacin 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 diseo web. Ver algunos ejemplos de lo que aportar SVG a la web nos abre los ojos a ideas sorprendentes.
10.3. EVOLUCIN DE LA WEB
92
10.4. Estudio del Diseo Visual

10.4.1. Intranets de Administraciones Tributarias y Aduaneras
10.4.2.
Las Diez mejores Intranets de Gobierno a nivel mundial
94
10.4.3.
Las Diez Mejores Intranets a nivel mundial del 2007
95
10.5. Buenas Prcticas en Intranets

10.5.1. Administraciones Tributarias y Aduaneras
96
10.5.2.
Las Diez Mejores Intranets de Gobierno
97
10.5.3.
Las Diez Mejores Intranet a nivel mundial del 2007
98
10.5.4.
Buenas Prcticas en el Diseo Visual extradas de otras fuentes.
1.
Otros estndares de Accesibilidad como: Etiquetas Alt en imgenes, animaciones y mapas de img. Ofrecer una descripcin o transcripcin del audio y video. Atributo longdesc. Algunos estndares de Usabilidad como: Lectura jerrquica de arriba hacia debajo y de izquierda a derecha. Contraste de letras y colores de fondo adecuado. Orden lgico de tabulacin. Claros mensajes de error. Utilizacin de tablas. Uso efectivo de botones. Aplicar Teora del Color y lograr simplicidad, consistencia y claridad en su uso. Considerar las Reglas de Composicin Fotogrfica como: Centro de Inters, rellenar el encuadre, lneas, flujo, direccin, repeticin, etc. Nombrar a los enlaces de manera descriptiva y usarlo slo donde sea necesario.
6. Acceder a las pginas con un mximo de 3 clics. 7. Considerar las Reglas Composicin del Arte para los dibujos e Ilustraciones. 8. Considerar los conceptos de Semitica y Sealtica para creacin de iconos. 9. Diseo Flexible, Interfaz simple e intuitiva que permita la escalabilidad de la Intranet. 10. Utilizar conceptos de Comunicacin Visual e Identidad Corporativa. 11. Optimizar el uso de imgenes, audio y videos. 12. Seguir las pautas establecidas en los estndares internacionales globales como: W3C, referido a Estndares Web. ISO 13407, referido a Procesos en el Diseo centrados en el usuario. IEC 9241-11, referido a la Gua de Usabilidad. Los conceptos de Arquitectura de la Informacin y Diseo de Interaccin.
2.
3.
4.
5.
99
10.6. Errores comunes en el Diseo Visual de Intranets
1. Pobre Diseo de pginas: Muchos enlaces, demasiados niveles (ms de 5 clics), sobrecarga de informacin. 2. Mal empleo del color: Muchos colores, demasiados saturados. 3. Errores en las fotografas: Reflejos del Flash, ojos rojos, lneas torcidas y desniveladas, efecto de vieteo. 4. Errores en la navegacin: Desaparicin de mens en pg. Interiores. Preferir texto a imgenes en el men. Uso de mens desplegables o en cascada Que no funcione la opcin Atrs del navegador. No cambiar el color de los enlaces al visitar la pg. Enlaces ocultos, zonas sin salida, no incluir un enlace al inicio de la Intranet. No limitar el uso de marcos o frames. 5. Disear pginas muy largas, con grficos y animaciones pesadas. 6. Colocar grficos slo para decorar la pgina y no para mostrar un contenido real.
7. Mal uso de la Tipografa. Tamaos 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 diferenciacin entre iconos. Demasiados elementos en un mismo icono o elementos innecesarios. Carencia de una misma lnea de diseo en un set de iconos. Perspectivas y sombras innecesarias. Metforas demasiado originales que no se entienden. No tomar en cuenta las caractersticas propias de cada pas. Imgenes de los elementos de la interfaz dentro de los iconos. Texto dentro de los iconos. 10. Crear una sobrecarga visual.
100
10.7. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL

10.7.1. Participantes
BOLIVIA BRASIL CHILE CHINA HONG KONG ECUADOR ESPAA GUATEMALA JAPN MXICO NICARAGUA PNAMA PRU PORTUGAL
Organismo: Servicio de Impuestos Nacionales Organismo: Secretaria de Ingresos Federales del Brasil Organismo: Servicios de Impuestos Internos Organismo: Departamento de Aduanas e Impuestos de Hong Kong Organismo: Servicio de Rentas Internas Organismo: Agencia Estatal de Administracin Tributaria Organismo: Superintendencia de Administracin Tributaria Organismo: Servicio de Aduana y la Oficina de Tarificacin, Ministerio de Finanzas Organismo: Servicio de Administracin Tributaria Organismo: Direccin General de Ingresos (DGI) Organismo: Direccin General de Ingresos del Ministerio de Economa y Finanzas Organismo: Superintendencia de Administracin Tributaria Organismo: Direccin General de Impuestos - DGCI
10.7.2.
Grado de satisfaccin de los usuarios de la intranet
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 10.7.3. Servicios adicionales que posee su Intranet
102
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 10.7.4. Arquitectura, Plataforma y Soporte
103
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 10.7.5. Sobre el servicio
104
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS 10.7.6. Buenas Prcticas a nivel de Organizacin
105
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.
BIBLIOGRAFA
Ponencia: Administracin Pblica del Futuro y Bienestar Social Autor: Francisco Jos Climent Fernndez Evento: II Congreso Online del Observatorio para la CiberSociedad Web: http://www.cibersociedad.net/congres2004/index_es.html Ao: 2004 Documento: Entorno Colaborativo de Trabajo: La Intranet 2.0 Autores: A. Carmona Ramos, M. Bernal, J. Cerero, J. Garca Len, V. Gonzlez Andrs, L. Ivez Jimnez, R. La, G. Lpez Ibez, E. Lora, C. Mndez Martnez, E. Puerto, M. Ruiz Ramos, J. Trancoso. Organizacin: Junta de Andaluca Consejera de Salud Ao: 2007 Artculo: Beneficios de usar una Intranet Autor: Gustavo Gretter Organizacin: InnovaAge Web: http://www.innovaage.com/innovanet/macros/TextContent.jsp?contentid=77&version=1&channe lid=1 Artculo: FAQ sobre Intranets Autor: Juan Fernando Zuluaga C. Organizacin: Intranet Total Web: http://www.intranettotal.com/referencia/faq.htm Libro: Arquitectura de Informacin: Introduccin al Proceso de Desarrollo en el Diseo de Interfaces de Usuario (Draft). Autor: Juan Carlos Pantoja Ibaez. Editorial: Universidad de Concepcin. Chile Ao: 2004 Libro: Planeta Web 2.0 Autor: Cristbal Cobo Roman y Hugo Pardo Kuklinski Editorial: Grupo de Investigacin en Interacciones digitales (GRID) de la Universidad de Vic y a la Facultad Latinoamericana de Ciencias Sociales FLACSO Mxico. Ao: 2007 Artculo: Antecedentes Histricos de las Intranets Autor: Patricio Pastor H. Organizacin: Universidad de Chile. Sistema de Servicios de Informacin y Bibliotecas (SISIB) Web: http://www.innovaage.com/innovanet/macros/TextContent.jsp?contentid=76&version=1&channe lid=1 Ao: 2007 Artculo: Las Intranets en el siglo XXI Autor: Pedro Romn Gravn y Purificacin Toledo Morales Organizacin: Universidad Politcnica Salesiana de Ecuador Web: http://www.sol.edu/portal/modules.php?name=News&file=article&sid=64 Artculo: Intranets: caos corporativo vs. Usabilidad Autor: Juan Manuel Carraro Organizacin: C Comunicacin. Argentina Web: http://www.ccomunicacion.com.ar/site/Newsletters/newsletterv31_junio2005.htm 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 108
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Ao: 2005 Reporte: Ten Best Goverment Intranets Autores: Kara Pernice, Mathew Schwartz, y Jakob Nielsen Organizacin: Nielsen Norman Group Ao: 2003 Reporte: Intranet Design Annual 2007 Autores: Kara Pernice, Mathew Schwartz, y Jakob Nielsen Organizacin: Nielsen Norman Group Ao: 2007 Reporte: Corporate Intranets Best Practices Report Autores: Shiv Singh, Ray Velez y the Enterprise Solutions Practice at Avenue A| Razorfish. Organizacin: Avenue A| Razorfish. Ao: 2006 Gua: Designing and Managing an Intranet Better Practice Checklist Autores: Information Management Office - Australian Goverment Organizacin: Australian Goverment Ao: 2004 Artculo: Standards for Good Intranet and Extranet Design Autor: Dave Pollard Organizacin: Blogs Dave Pollard Web: http://blogs.salon.com/0002007/2007/01/04.html#a1742 Ao: 2007 Gua: Becoming a Citizen Centered Government Through Best Practices in Web Managment Autor: The Performance Institute Organizacin: The Performance Institute Ao: 2005 Gua: Disposiciones Generales para Sitios Web Institucionales de la UNAM Autor: Consejo Asesor de Computo Organizacin: Universidad Nacional Autnoma de Mxico Ao: 2007 Artculo: La empresa del futuro Autor: Sr. Galdos Organizacin: Redel al Da Web: http://www.redelaldia.org/ver.php3?id_article=33&var_recherche=la+empresa+del+futuro Ao: 2005 Artculo: Etapas de la creacin de la pgina web Autor: Alicia Garca de Len Organizacin: Universidad de la Repblica. Montevideo Uruguay. Ao: 2002 Gua: Manual de Estilo y Diseo de sitios y pginas web Autor: Departamento de Comunicaciones Organizacin: Instituto Nacional de Tecnologa Agropecuaria - Argentina Ao: 2002 Libro: Website Management Autores: Oscar Garca Lzaro y Graciela Pineda Gonzlez Organizacin: Instituto de Comercio Electrnico y Marketing Directo Ao: 2002 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 109
Artculo: Diseo accesible de pginas web. Autor: Carlos Egea Garca. Organizacin: Grupo de expertos del seminario de iniciativas sobre Discapacidad y Accesibilidad en la red. Artculo: El 75 % de las grandes empresas tienen descuidada su Intranet. Autor: King eClient Organizacin: King eClient Web: http://www.king-eclient.com/?q=es/sobre-King-eClient/historia Artculo: Diez Errores en el Diseo Web y Redaccin Comercial que debes evitar a toda costa Autor: Daniel Levy Organizacin: Emarketing Latino Web: http://www.emarketinglatino.com/articulos/errores-de-diseno-web.html Ao: 2006 Artculo: Errores comunes en el diseo de sitios web Autor: Eduardo Manchn Organizacin: Alzado.org Web: http://www.alzado.org/articulo.php?id_art=49 Ao: 2003 Artculo: Los 10 mayores errores del diseo web Autor: Jakob Nielsen Organizacin: WebTaller Web: http://www.webtaller.com/maletin/articulos/los_10_mayores_errores_del_diseno_web.php Artculo: 10 Mistakes in Icon Design Autor: Denis Kurtunov Organizacin: TurboMilk Web: http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/ Ao: 2008 Artculo: Errores y soluciones en diseo web: las pginas de entrada y el botn atrs Autor: NERV Organizacin: NERV Web: http://www.nerv.es/blog/errores-y-soluciones-en-diseno-web-las-paginas-de-entrada-y-elboton-atras/ Ao: 2008 Artculo: Errores y soluciones en diseo web: las pginas de entrada y el botn atrs Autor: NERV Organizacin: NERV Web: http://www.nerv.es/blog/errores-y-soluciones-en-diseno-web-las-paginas-de-entrada-y-elboton-atras/ Ao: 2008 Artculo: 10 Usability Nightmares You Should Be Aware Of Autor: Smashing Magazine Organizacin: Smashing Magazine Web: http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-beaware-of/ Ao: 2007 Artculo: The Ten Most Violated Homepage Design Guidelines Autor: Jacob Nielsen Organizacin: USE IT 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 110
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Web: http://www.useit.com/alertbox/20031110.html Ao: 2003 Artculo: 25 errores comunes en los desarrollos web Autor: WebTaller Organizacin: WebTaller Web: http://www.webtaller.com/maletin/articulos/25_errores_comunes_en_los_desarrollos_web.php Artculo: 16 errores a evitar en el desarrollo web Autor: TXEN Organizacin: TXEN Web: http://txen.es/2007/05/25/ciencia/informatica/16-errores-a-evitar-en-el-desarrollo-web/ Ao: 2007 Artculo: Lista para comprobar si un sitio web es usable Autor: Frank Tarifa Mengibar Organizacin: Blog Accesibilidad, Usabilidad y Estndares Web Web: http://accesibilidadweb.blogspot.com/2008/01/lista-para-comprobar-si-un-sitio-webes.html Ao: 2008 Artculo: Siete Errores de Accesiblidad Autor: Christian Heilmann Organizacin: Digital Web Magazine Web: http://usalo.es/131/siete-errores-de-accesibilidad/ Ao: 2006 Artculo: Tcnicas y Herramientas para Usar Color en el Diseo de la Interfaz de una Computadora Autor: Peggy Wright, Diane Mosser-Wooley, y Bruce Wooley Organizacin: Association for Computing Machinery Web: http://www.acm.org/crossroads/espanol/xrds3-3/color.html Ao: 1999 Artculo: Las 13 Reglas de Composicin Fotogrfica Fundamentales que Deberas Conocer Autor: DZOOM Organizacin: Blog DZOOM Web: http://www.dzoom.org.es/noticia-1479.html Ao: 2006 Artculo: 8 Fallos Comunes que pueden Estropear tus Fotos Autor: DZOOM Organizacin: Blog DZOOM Web: http://www.dzoom.org.es/noticia-1616.html Ao: 2007 Artculo: Empleo del color Autor: Luis Villa Organizacin: Alzado.org Web: http://www.dzoom.org.es/noticia-1616.html Ao: 2003 Artculo: 10 errores comunes en los css Autor: Tu Funcin Organizacin: Tu Funcin Web: http://www.tufuncion.com/errores-css Ao: 2006 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 111
Artculo: Recomendaciones de Usabilidad para el uso efectivo de botones en desarrollos Web Autor: Daniel P. Uriol Organizacin: Web Taller Web: http://www.webtaller.com/maletin/articulos/recomendaciones-usabilidad-uso-efectivobotones-desarrollos-web-3.php Libro: Comunicacin Visual y Tecnologa de Grficos en computadora. Autor: Juan Carlos Asinsten Organizacin: Educar Ministerio de Educacin, Ciencia y Tecnologa de Argentina Artculo: Los prximos 2 aos. Autor: Dan Tynan Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edicin: Marzo 2008. Web: http://www.pcworld.com.pe Artculo: Conexiones a muy alta velocidad. Es VSL una realidad? Autor: Arantxa Herraz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edicin: Febrero 2008 Web: http://www.pcworld.com.pe Artculo: Principios Usabilidad: La regla de los tres clicks Autor: Jos Mrquez Organizacin: Blog Usndolo.com Web: http://www.usandolo.com/principios-de-usabilidad-la-regla-de-los-3-clicks/ Ao: 2007 Artculo: Ms opciones con los telfonos mviles del futuro Autor: Glenn Fleishman Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edicin: Marzo 2008. Web: http://www.pcworld.com.pe Artculo: Negocios en Second Life: realidad o ficcin? Autor: Arantxa Herranz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edicin: Diciembre 2007. Web: http://www.pcworld.com.pe Artculo: Dilogos entre hombre y mquina Autor: Arantxa Herranz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edicin: Diciembre 2007. Web: http://www.pcworld.com.pe Artculo: Interfaz De Usuario: Una Mirada Al Futuro Con Jeff Han Video Autor: Robin Good Organizacin: Blog Robin Good Ao: Diciembre 2006. Web: http://www.masternewmedia.org/es/2006/08/21/interfaz_de_usuario_una_mirada.htm 2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID 112
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS Artculo: Usabilidad Estratgica Autor: Alfonso de la Nuez Organizacin: Xperience Consulting Ao: 2002 URL: http://www.xperienceconsulting.com/imagenesup/Usabilidad%20estrategica.pdf Artculo: The visual design of Web 2.0 Autor: Pxel Acress Organizacin: Pxel Acres Ao: 2006 Web: http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/ Artculo: Web 2.0 Desing Style Guide Autor: Web Design for Scratch Organizacin: Web Design for Scratch Web: http://webdesignfromscratch.com/web-2.0-design-style-guide.cfm
113
12.
SOBRE LA AUTORA
CARMEN ELIZABETH VSQUEZ DEXTRE Ingeniera de Sistemas y Diseadora Publicitaria con ms de una dcada de experiencia. Actualmente se desempea como consultora y es especialista en diseo orientado a Internet. Posee estudios de Postgrado, como un Diplomado en Marketing realizado en la Universidad Ricardo Palma, un Diplomado en Gestin de Pequeas Empresas en la Universidad San Ignacio de Loyola, ambos en Lima Per, una Especializacin en Video y Tecnologas On Line y Off Line realizado en el Media Centre d'Art i Disseny de ESDI (Barcelona - Espaa), entre otros. Ha trabajado en ms de 100 proyectos para Internet que incluyen sitios web, e-commerce, emarketing, e-publicity, cds, entre otras piezas grficas y multimedia para empresas de comunicaciones como: Grupo Panamericana de Radio S.A., Empresa Editora El Comercio S.A. y Grupo RRP S.A. Adems de trabajar en proyectos para empresas privadas nacionales y extranjeras, as como, gubernamentales: Servicio de Administracin Tributaria SAT y este estudio desarrollado para la Superintendencia de Administracin Tributaria SUNAT a travs del Centro Interamericano de Administraciones Tributarias CIAT. Pgina web: http://www.carmenelizabeth.com e-mail: cvasquezdextre@yahoo.es Celular: (51) 99347-5876
114

Estudio Intranets 2008

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Estudio Intranets 2008

Uploaded by

Copyright:

Available Formats

ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS ESTE ES SLO UN EXTRACTO

DEL ESTUDIO ORIGINAL, EL ESTUDIO ORIGINAL CONTIENE 231 PGINAS.

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

ms Agilizacin de los trmites con Ms y la administracin pblicos Mejoras en su competitividad

Agilizacin y facilitamiento de la burocracia las

Mejoras en la relacin sector Participacin activa en privado/pblico decisiones que le afectan

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Diseo Visual Web

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Las Intranets en el Siglo XXI. Universidad Politcnica Salesiana de Ecuador.

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Intranets: caos corporativo vs. Usabilidad. C Comunicacin. Argentina. 2005.

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

mbito del Estudio

Objetivos del Estudio

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

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

CHILE CHINA HONG KONG ECUADOR

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Sobre el Enfoque Aplicado

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Diseo Centrado al Cliente y/o Usuario14

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

4. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL15

Revisar el anexo 10.8 donde se ampla la informacin de este reporte.

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Defense Finance and Accounting Services Estados Unidos

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Department for Transport Reino Unido

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Department for Victorian Communities Australia

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

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

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Federal Reserve Bank of Richmond Estados Unidos

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

London Undergroup Reino Unido

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

National Research Council of Canada Industrial Research Assistance Program

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Senate Republican Conference Estados Unidos

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Workplace Safety and Insurance Board of Ontario Canada

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

5. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007 16

American Electric Power Estados Unidos

Revisar el anexo 10.9 donde se ampla la informacin de este reporte.

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

Comcast Estados Unidos

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

The Dow Chemical Company Estados Unidos

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

5.5. Infosys Technologies Limited India

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID

5.6. JPMorgan Chase & Co. Estados Unidos

2008 Carmen Elizabeth Vsquez Dextre Consultora CIAT - BID