ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
2
ESTE ES SÓLO UN EXTRACTO DEL ESTUDIO ORIGINAL, EL ESTUDIO ORIGINAL
CONTIENE 231 PÁGINAS.
AGRADECIMIENTOS
La recopilación de datos para la realización de este Estudio ha requerido de la colaboración de
corresponsales del CIAT. Agradecimiento especial, por la ayuda brindada para tratar de
establecer contacto con funcionarios de otros países y de esta forma enriquecer el estudio.
Gracias a todas las organizaciones que colaboraron respondiendo el Cuestionario y
exponiendo sus casos en este Estudio.
Gracias, a la persona que me dio la vida, mi querida madre, quien siempre ha soñado con un
futuro ideal para mí.
Las gracias, también para alguien necesario en mi vida, como es, mi esposo Dante Antiporta
Pomacaja, en él, siempre encuentro un consejo y una palabra de aliento, gracias por
apoyarme.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
3
INDICE
1. INTRODUCCION.................................................................................................................. 5
1.1. Beneficios Tangibles..................................................................................................... 6 1.2. Beneficios Intangibles ................................................................................................... 7 1.3. Diseño Visual Web ....................................................................................................... 7
2. ANTECEDENTES Y METODOLOGÍAS ............................................................................... 9 2.1. Antecedentes ................................................................................................................ 9 2.2. Ámbito del Estudio ...................................................................................................... 11 2.3. Metodología ................................................................................................................ 11 2.4. Objetivos del Estudio .................................................................................................. 12
3. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL ............................................................................................. 13
3.1. Participantes ............................................................................................................... 13 3.2. Sobre el Enfoque Aplicado ......................................................................................... 14 3.3. Diseño Centrado al Cliente y/o Usuario ...................................................................... 17 3.4. Sugerencias y Recomendaciones .............................................................................. 18
4. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL .......................... 19 4.1. Defense Finance and Accounting Services – Estados Unidos ................................... 20 4.2. Department for Transport – Reino Unido .................................................................... 21 4.3. Department for Victorian Communities – Australia ..................................................... 22 4.4. Department of Veterans Affairs Mid-Atlantic Health Care Network – Estados Unidos 23 4.5. Federal Reserve Bank of Richmond – Estados Unidos .............................................. 24 4.6. London Undergroup – Reino Unido ............................................................................ 25 4.7. National Research Council of Canada – Industrial Research Assistance Program .... 26 4.8. Senate Republican Conference – Estados Unidos ..................................................... 27 4.9. Workplace Safety and Insurance Board of Ontario – Canada .................................... 28 4.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas del Reporte sobre las 10 mejores Intranets de Gobierno a nivel mundial. ........................................................... 29
5. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007 ................................... 30 5.1. American Electric Power – Estados Unidos ................................................................ 30 5.2. Comcast – Estados Unidos ........................................................................................ 31 5.3. DaimlerChvsler AG – Alemania .................................................................................. 32 5.4. The Dow Chemical Company – Estados Unidos ........................................................ 33 5.5. Infosys Technologies Limited – India .......................................................................... 34 5.6. JPMorgan Chase & Co. – Estados Unidos ................................................................. 35 5.7. Microsoft Corporation – Estados Unidos .................................................................... 36 5.8. National Geographic Society – Estados Unidos ......................................................... 37 5.9. The Royal Society for the Protection of Birds – Reino Unido...................................... 38 5.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas de del Reporte sobre las 10 mejores intranets a nivel mundial del 2007 ........................................................ 39
6. BUENAS PRÁCTICAS EN LA CREACIÓN DE INTRANETS ............................................. 40 6.1. Antes de iniciar la creación de la Intranet ................................................................... 40 6.2. Durante la creación de la Intranet ............................................................................... 41 6.3. Después de creada la intranet .................................................................................... 56
7. ERRORES COMUNES EN LAS INTRANETS ................................................................... 57 7.1. Antes de iniciar la creación de la Intranet ................................................................... 57 7.2. Durante la creación de la Intranet ............................................................................... 57
8. LAS INTRANETS DEL FUTURO........................................................................................ 79 8.1. Elementos de la Intranet del Futuro – Modelo 1 ......................................................... 79 8.2. Elementos de la Intranet del Futuro – Modelo 2 ......................................................... 80 8.3. Elementos de la Intranet del Futuro. Modelo 3 ........................................................... 81
9. CONCLUSIONES ............................................................................................................... 82 9.1. Conclusiones del Estudio de Diseño Visual. ............................................................... 82 9.2. Conclusiones extraídas de las Buenas Prácticas de las Intranets .............................. 82
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
4
9.3. Conclusiones Específicas extraídas de los Doce Casos de Administraciones Tributarias y Aduaneras. ......................................................................................................... 84 9.4. Conclusiones sobre el futuro de las Intranets ............................................................. 85 9.5. Conclusiones sobre el Diseño Visual de la Intranet de SUNAT .................................. 85 9.6. Conclusiones Finales.................................................................................................. 86
10. ANEXOS......................................................................................................................... 87 10.1. CUADRO COMPARATIVO N° 1 DE LA APLICACIÓN DE BUENAS PRÁCTICAS .... 87 10.2. VENTAJAS DEL USO DEL FORMATO SVG Y SUS POSIBILIDADES ..................... 91 10.3. EVOLUCIÓN DE LA WEB .......................................................................................... 92 10.4. Estudio del Diseño Visual ........................................................................................... 93 10.5. Buenas Prácticas en Intranets .................................................................................... 96 10.6. Errores comunes en el Diseño Visual de Intranets ................................................... 100 10.7. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL ........................................................................................ 101 10.8. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL ................ 106 10.9. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007 ......................... 107
11. BIBLIOGRAFÍA ............................................................................................................. 108 12. SOBRE LA AUTORA .................................................................................................... 114
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
5
1. INTRODUCCION
Los cambios generados a nivel mundial a causa de la globalización han provocado la
necesidad de una mayor integración entre los distintos factores económicos de los países con
el fin de hacer frente a los distintos retos que implica esta nueva realidad.
El desarrollo tecnológico, las sociedades del conocimiento, la nueva competitividad entre las
economías, entre otros factores, obligan a las organizaciones públicas y privadas a entrar en
esta nueva dinámica económica, política y social.
El día de hoy, los ciudadanos exigen a sus gobiernos más y mejores servicios, esta condición
obliga a un mayor compromiso y dedicación en el quehacer público; para poder cumplirlo es
necesario innovar y dar mayor calidad a los productos y servicios que se ofrecen al ciudadano -
cliente mediante el uso de herramientas y métodos que hagan eficiente y eficaz, la actividad de
las organizaciones para el logro de objetivos y satisfacción plena de los ciudadanos.
La Administración Pública es la acción del poder público al aplicar las leyes y cuidar de los
intereses públicos; resulta, por lo tanto, un conjunto de órganos de que se sirve para tal
finalidad.
Tal como reza la teoría, la Administración Pública va a necesitar de todo instrumento que le
pueda facilitar la relación con el ciudadano o aún con sus propias competencias de
interrelación con otras administraciones. La administración, como inmensa y compleja Intranet
que supone, requiere de software que la impulsen y aligeren las tareas.
A raíz de la modernización de la Administración Pública, se quiere obtener estos beneficios
utilizando las Tecnologías de Información disponibles a nivel mundial1:
Para los organismos públicos Para las empresas Para los ciudadanos
Plazos de reacción más
rápidos
Agilización de los trámites con
la administración
Más y mejores servicios
públicos
Reducción de Costes Mejoras en su competitividad Agilización y facilitamiento de
la burocracia
Servicios más accesibles Mejoras en la relación sector
privado/público
Participación activa en las
decisiones que le afectan
Capacidad de cobertura a una
amplia gama de necesidades
Utilización de la Administración
como motor de incorporación
de las nuevas tecnologías de la
Empresa
Servicios públicos accesibles
24 x 7
Fuente: Redes & Telecomunicaciones. Nº 180, Mayo 2004, pág. 4. España
Se requieren de innovaciones que transformen la Administración Pública para hacerla más
eficaz, eficiente y cercana a los ciudadanos. En este proceso el empleado público será su
principal protagonista, para lo que necesita un entorno favorable para que dicha transformación
permita alcanzar los objetivos marcados.
1 II Congreso Online del Observatorio para la CiberSociedad. Ponencia: Administración Pública del Futuro
y Bienestar Social. 2004.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
6
Es necesario recoger las necesidades y expectativas de los empleados, ofrecerles el ambiente
y las herramientas necesarias para aprovechar la sabiduría individual y potenciar así el
conocimiento colectivo de la organización.
La comunicación interna permite darle una identidad a la organización y extender el
conocimiento de la cultura corporativa, acercando unidades tradicionalmente estancas de la
organización y promoviendo el conocimiento y la valoración recíprocos.
En la filosofía del nuevo modelo de uso de Internet, el conocimiento debe estar accesible sin
restricciones. De forma paralela, en el seno de una organización, el conocimiento corporativo
generado en ella debe estar igualmente disponible en cualquier momento, por cualquier
empleado y desde cualquier parte.
Es un reto para los gestores de los espacios colaborativos hacer que el conocimiento tácito
presente en foros de discusión, artículos de blogs, wikis o comentarios sea identificado,
categorizado, mantenido y puesto a disposición (al menos) de la comunidad que lo generó2.
De acuerdo a un estudio realizado por el Delphi Group®, el 98% de las instalaciones de
intranets dan un Retorno Sobre la Inversión (RSI) favorable, siendo un indicador muy
importante en comparación con otras aplicaciones, como por ejemplo CRM en donde éste valor
alcanza solamente un 60%. Del mismo estudio se desprende que el 22% de las firmas
encuestadas reportaron un RSI de entre el 22% y el 50%, mientras que un 18% reportaron un
RSI superior al 100%.
Otro estudio realizado el año pasado por la International Data Corporation (IDC) acerca del
Retorno Sobre la Inversión (RSI) en proyectos de intranets corporativas revela el por qué las
implementaciones comunes respaldadas por una decisión estratégica de la compañía están
alcanzando un RSI mayor al 1000 por ciento. En el mismo estudio, se expone que un empleado
promedio consume entre el 25% y 30% de su tiempo buscando información. Estos
últimos valores son consistentes con otros estudios que afirman que el 80% de la información
requerida por un empleado no está en lo sistemas de información, típicamente por tratarse de
información no estructurada o documental.
Una intranet pone juntos todos los recursos necesarios bajo un único Portal Corporativo,
brindando estandarización y facilidad de uso, permitiendo a los usuarios interactuar con
contenidos, aplicaciones, procesos de negocio y otras personas dentro de la Organización. La
intranet es conducida por un sistema avanzado de herramientas que brinda a usuarios no
técnicos la capacidad de capturar inmediatamente la información y entregarla al público
objetivo en forma oportuna3.
1.1. Beneficios Tangibles
Los beneficios tangibles, aquellos que los directivos pueden tomar en sus manos, se resumen
abajo. Un buen ejemplo de un beneficio tangible es la reducción de costo del papel debido al
traslado de los procesos en línea. Algunas estadísticas citan que un 18% del material
corporativo impreso se vuelve obsoleto después de 30 días. Imagínese dicho material
acumulado después de 60 o 90 días. Ahora imagínese ese material en línea, siempre
disponible y actualizado.
2 Junta de Andalucía – Consejería de Salud. Entorno Colaborativo de Trabajo: La Intranet 2.0. 2007.
3 Beneficios de usar una Intranet. InnovaAge.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
7
Implementación económica.
Fácil de usar: sólo apuntar y hacer clic.
Basada en estándares abiertos.
Ahorro de tiempo y dinero.
Mejor información, más rápido.
Escalable y flexible.
Conexión entre distintas plataformas.
Pone la información a ser controlada por los usuarios.
1.2. Beneficios Intangibles
Pero no solamente es el ahorro del papel lo que beneficia a la empresa. Lo que se logra con la
información en este nuevo ambiente web tiene un gran impacto. Las Intranets permiten a una
Organización gastar menos tiempo en cosas que no agregan valor, como la búsqueda de
información para resolver un problema. La productividad se incrementa a medida que el
conocimiento corporativo es más accesible y la información más precisa. La flexibilidad en el
tiempo de entrega del conocimiento se gana a medida que la información siempre esté a un clic
de distancia. Las Intranets abren un espacio en donde las fronteras son más pequeñas y el
intercambio de información es estimulado. Esto lleva a unos empleados mejor informados y con
la habilidad de tomar mejores y más rápidas decisiones. Al final, se termina logrando una
mayor productividad y más tiempo para incrementar las ganancias.
Mejoramiento de la toma de decisiones
Construcción de una cultura de colaboración
Procesos de aprendizaje más fáciles
Eliminación de la burocracia
Mejoramiento de la calidad de vida en el trabajo 4
Incrementa la creatividad y la innovación.
Aumenta la eficiencia y productividad de la organización.
Incrementa la reutilización del conocimiento y reduce la fuga del "capital del conocimiento".
Mejora los tiempos de respuesta al mercado.
Posibilita la comunicación con un número extenso de individuos y organizaciones a bajo costo.
Mejora la integración en la cadena de valor mediante la extensión de las aplicaciones de la empresa al Portal Corporativo5.
1.3. Diseño Visual Web
La interfaz gráfica de usuario, desde los básicos tutoriales, presentaciones, animaciones, intros,
aplicaciones, la omnipresente web, hasta el software están consensuados por criterios diversos
de acuerdo a sus objetivos, a los contenidos, su audiencia, y de acuerdo también a la
aplicación de ciertas leyes o normas funcionales.
Para profundizar, por si mismos los diseños electrónicos o las interfaces gráficas de usuarios
no son solamente sinónimos de sitios web, animaciones interactivas, o software, sino además
siguen una determinada estructura y secuenciación de su producción, (análisis de
requerimientos, objetivos, recopilación de la información, diseño del sistema, implementación,
4 FAQ sobre Intranets. Intranet Total.
5 Beneficios de usar una Intranet. InnovaAge.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
8
prototipos, etc.); en su navegabilidad e interacción (control del flujo de información y
restricciones, guías, mapas conceptuales y semánticos, etc.); en su diseño de contenidos
(conceptos a entregar, textos, media, diagramación, etc.)
Además de ello se encuentran sujetos a estándares internacionales globales (W3C, ISO 13407,
IEC 9241, IEC 9126, entre otros); y educacionales en el caso de las interfaces relacionadas con
la educación y e-learning (SCORM, AICC), entre muchos otros parámetros, todos los cuales
giran de manera unívoca alrededor de los niveles de encontrabilidad6, recuperación, y
asimilación de la información que el usuario final busca, facilitado por la aplicación de procesos
muy precisos de interactividad, navegación, retroalimentación y la forma en que estos
contenidos, por objetivo, deberían o podrían eventualmente ser asumidos o asimilados por la
audiencia. En ello se basa tanto la eficacia o pertinencia del contenido a entregar y evaluar,
como la eficacia del proceso de diseño en general7.
Cuando la Web era sólo contenido textual y gifs animados, en 1996 apareció Flash
Macromedia para darle al usuario una experiencia más generosa a nivel gráfico. Sus botones,
clips de película, máscaras y programación en Action Script promovían zonas activas de
interacción. Pero la interacción de Flash sabe a poco con la intercreatividad y experiencia de
usuario que ofrecen las aplicaciones Web 2.0. Si se piensa en contenidos dinámicos, sucede lo
mismo. Las clásicas herramientas para producir webs, como Dreamweaver y Flash, ofrecen la
posibilidad de crear un diseño complejo de contenidos dinámicos mediante HTML, estilos CSS
y programación, pero también se quedan atrás de las aplicaciones diseñadas en Ajax, Ruby on
Rails o BitTorrent10 para los productos Web 2.0. Interfaz con la capacidad de acceso en todo
lugar y momento a los servicios web, con la usabilidad, familiaridad y sencillez de las interfaces
de los sistemas operativos8.
6 Encontrabilidad, es un término utilizado en la Usabilidad, el cual se refiere a la capacidad de los
contenidos digitales a ser encontrados, especialmente a través de los buscadores. 7 Arquitectura de Información: Introducción al Proceso de Desarrollo en el Diseño de Interfaces de Usuario
(Draft). Universidad de Concepción de Chile. 2004. 8 Planeta Web 2.0. Grupo de Investigación en Interacciones digitales (GRID) de la Universidad de Vic y a
la Facultad Latinoamericana de Ciencias Sociales – FLACSO México. 2007.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
9
2. ANTECEDENTES Y METODOLOGÍAS
2.1. Antecedentes
La primera experiencia de Intranet de que se tenga noticia surge en 1992 cuando ingenieros de
Sun MicroSystems ven en el uso del Web una alternativa válida de apoyo a la gestión de sus
procesos administrativos. Posteriormente, Netscape incursiona para indagar qué tan útil puede
ser el uso de su producto Navigator como una interfaz común para el acceso de distinto tipo de
información de una empresa, con lo que comienza a promocionar esta nueva orientación del
Web.
Inicialmente existía la idea de los beneficios de una intranet, pero no así las herramientas para
desarrollar productos que permitieran poner en marcha este nuevo esquema de hacer las
cosas al interior de las empresas. Diversas empresas de software dieron un paso importante
encaminado al desarrollo de sistemas para Trabajo en Grupo; Lotus, con su producto Notes, en
1995, coloca de moda el concepto de Groupware y también percibe en el Web un entorno más
imparcial y estándar sobre el cual desarrollar sus productos. Por otra parte, Microsoft reconoce
su error estratégico al no priorizar dentro de sus planes de desarrollo la importancia de Internet
y las potencialidades que ella ofrece, por lo que cambia su estrategia y complementa sus
productos para trabajar de manera "natural" en esta red. Finalmente Novell, adapta su
producto Netware para trabajar más eficientemente en esta línea. Esta situación, que involucró
a tres grandes empresas de software (IBM-Lotus, Microsoft y Novell) da una clara señal a otras
empresas similares para desarrollar productos y servicios orientados al Web, pero de manera
especial a intranet.
En la actualidad, la creación de productos para intranet ocupa un alto porcentaje de los
recursos de investigación y de desarrollo de las empresas de software. Las empresas ligadas
al hardware, también han potenciado sus productos para trabajar o soportar aplicaciones de
Internet e intranet. Es más, se supone que la mitad de lo que hoy se desarrolla en ambiente
Web está orientado a intranet79.
Las Intranets surgen cuando las empresas - ante el auge de las autopistas de la comunicación,
y más concretamente de Internet- se plantean sacar provecho de todas las ventajas de la
tecnología Web para mejorar su comunicación y la colaboración dentro de su entorno,
superando las trabas que hoy presenta Internet en cuanto a su total accesibilidad10.
Sin embargo, muchas grandes corporaciones, han fracasado en este objetivo y actualmente
poseen una infraestructura desactualizada, que hace muy difícil cualquier consulta de
información.
Pero el fracaso no se debe tanto a los aspectos relacionados con la infraestructura técnica sino
con aspectos culturales y la poca capacidad de la corporación para poder gestionarlos. Las
intranets suponían originalmente una gran libertad: cada área de una compañía tendría la
facultad de crear y administrar su propio contenido, dentro de una determinada porción de la
Intranet.
9 Antecedentes Históricos de las Intranets. Universidad de Chile. Sistema de Servicios de Información y
Bibliotecas (SISIB). 2007.
10 Las Intranets en el Siglo XXI. Universidad Politécnica Salesiana de Ecuador.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
10
Esta metodología derivó años más tarde en un gran desorden. Cada sección que se navegaba
tenía un esquema de navegación y un diseño diferente, lo que resultaba muy frustrante para el
usuario medio cuando debía buscar u obtener cierta información. Además es bastante común
que el compromiso de las diferentes áreas para actualizar el contenido de la Intranet varíe de
una entrega absoluta al más absoluto abandono.
Pensar la estructura de contenidos de una Intranet en base a la estructura de la organización
puede ser muy tentador, después de todo, los empleados la conocen a la perfección y pueden
sentirse fácilmente identificados con ella. Lo que deberá evaluarse aquí es si reproduciendo la
estructura de una organización no se está evitando lo que se denomina la “navegación
cruzada” es decir la posibilidad de que un usuario consulte y navegue por conten idos que
quizás no tengan que ver directamente con su propia área pero que pueden resultarle útiles de
todos modos.
2.1.1. La usabilidad como factor diferenciador
Frente a este panorama, por cierto bastante desalentador, la usabilidad y el diseño centrado en
el usuario, metodologías ambas que ayudan a desarrollar interfaces intuitivas, fáciles de usar y
al servicio de quienes serán sus usuarios finales, arrojan un poco de luz sobre el futuro de las
Intranets corporativas.
Para empezar, las Intranets tienen que estar pensadas para sus usuarios, al igual que un sitio
Web. Pero aquí los usuarios son los empleados de una compañía. Relevar sus preferencias,
las aplicaciones que utilizan cotidianamente, los contenidos que consultan o cómo prefieren
obtener la información resulta vital para lograr un producto que satisfaga sus necesidades y
expectativas11.
2.1.2. Antecedentes del Diseño Visual Web.
Una GUI (Graphics User Interface) es un entorno interactivo entre humano y ordenador,
dinámico en el mejor de los casos, pero de todas formas, gráfico y visualmente comprensible, a
diferencia del arcaico modo textual. El término surgió porque la primera interfaz interactiva que
unía a las computadoras y a los usuarios no era gráfico, sino textos y teclado orientados, y
normalmente consistió en órdenes que el usuario tenía que recordar y respuestas de la
computadora que eran muy breves, pero potentes, desplegadas en una amenazadora pantalla
negra con letras blancas; la tradicional interfaz del sistema operativo DOS es un ejemplo de la
interfaz del “usuario-computadora” típica antes que las GUI actuales se posicionaran. Luego
hubo un paso intermedio que conecta al usuario con la interfaz de línea de comandos en donde
la GUI era la interfaz tipo “menú desplegable no gráfico” que le permitió interactuar usando un
ratón en lugar de teclear órdenes desde el teclado, recordemos las versiones de Windows de la
1 a la 2. Esta interfaz fue el tipo de visualización que dieron al usuario la opción de elegir
comandos, iniciar programas y ver listas de archivos y otras opciones a través del menú
descendente. Las selecciones podían activarse, bien a través del teclado, o bien con el ratón.
GUI, actualmente, es una forma de representar la información procesada de la computadora de
manera visual, concreta y manejable por el usuario final haciéndola más comprensible, más
didáctica, más asimilable, más usable.
11
Intranets: caos corporativo vs. Usabilidad. C Comunicación. Argentina. 2005.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
11
Internet o mejor dicho su servicio más conocido: la WWW, donde se despliegan los sitios web
es por omisión una GUI distribuida (puede incluir simultáneamente texto, imagen, sonido,
video), en ella se pueden visualizar diagramaciones y distribuciones de contenido; se puede
insertar sonido, video, gráfica, dinamismo, interacción, navegabilidad, procesar datos en línea,
confirmándola como la GUI por excelencia.
2.1.3. La Arquitectura de la Información
Es la disciplina encargada de la fundamentación, análisis, planificación y estudio de la
disposición de los datos contenidos en los sistemas de información interactivos. El Information
Architecture Institute, define la Arquitectura de la Información como:
El diseño estructural en entornos de información compartida.
El arte y la ciencia de organizar y rotular sitios web, intranets, comunidades en línea y software para promover la usabilidad y la buscabilidad12.
Una comunidad emergente orientada a aplicar los principios de diseño y la arquitectura en el entorno digital.
2.2. Ámbito del Estudio
El presente Estudio pretende reunir las variables más importantes a la hora de construir una
Intranet, poniendo énfasis en el Diseño Visual.
Se mostrará Intranets de otros países como son:
Algunos países miembros del APEC.
Algunos países miembros del CIAT.
Los resultados mostrados como desarrollo del Estudio son usados para demostrar beneficios y
ejemplos de mejores prácticas en empresas de gobierno y comerciales, además identificamos
áreas donde las Administraciones Tributarias y Aduaneras requieren mejoras o creación de
soluciones.
El desarrollo de este Estudio es una guía de referencia para estándares internacionales.
2.3. Metodología
Se realiza este estudio, considerándose como una de las Etapas del Método Proyectual
basado en la resolución de problemas de Bruno Munari a aplicarse como parte de la creación
del Diseño Visual de la Intranet de la Superintendencia Nacional de Administración Tributaria –
Perú.
Para la realización del presente Estudio se utilizará la técnica de gestión empresarial llamada
BENCHMARKING del tipo:
2.3.1. Competitivo: Donde trataremos de conocer otras intranets del mundo en el mismo rubro. Para ello se elaboró un Cuestionario a modo de encuesta.
12
Buscabilidad (Findabiliby), la cualidad de ser localizable o navegable.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
12
2.3.2. Mejor de su Clase: Donde conoceremos según los Reportes de Nielsen Norman
Group:
Las 10 mejores Intranets de Gobierno y Sector Público a nivel mundial.
Las 10 mejores Intranets del 2007 a nivel mundial.
Además de una revisión de estándares internacionales, lecciones aprendidas, mejores
prácticas e investigación.
Las dificultades para la realización del Estudio fueron las siguientes:
1. No se encontraron estudios o reportes de Intranets de Administraciones Tributarias. 2. No se encontraron estudios o reportes sobre Diseño Visual de Intranets. 3. Algunas Intranets no cuentan con acceso externo. 4. Ninguna Intranet permite acceder de forma externa a personas que no sean empleados
de dicha institución. 5. No se contaba con presupuesto que permitiera la realización de viajes a cada país
miembro del APEC y CIAT para realizar una evaluación en su misma sede. Debido a que se invitó a los países miembros del CIAT y APEC a participar de este estudio, quedando con ellos, en el compromiso de remitirles los resultados del estudio. Se incluye en el contenido algunas Buenas Prácticas y errores antes de comenzar la creación de la Intranet.
2.4. Objetivos del Estudio
Identificar conceptos y mejores prácticas en el diseño de las Intranets a nivel mundial.
Definir las tendencias en materia de Intranets, tomando como referencia a las grandes instituciones, que se reconozcan como ejemplo en ese aspecto.
Recomendar Buenas Prácticas que se puedan aplicar a la Intranet de la Superintendencia Nacional de Administración Tributaria – SUNAT - Perú.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
13
3. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL13
3.1. Participantes BOLIVIA ORGANISMO: Servicio de Impuestos Nacionales.
N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 30. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 09/2007.
BRASIL ORGANISMO: Secretaria de Ingresos Federales del Brasil. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: Todos los funcionarios de
RFB (no especificaron el número de empleados). FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: No contestaron.
CHILE ORGANISMO: Servicios de Impuestos Internos. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 4,000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 08/2007.
CHINA – HONG
KONG ORGANISMO: Departamento de Aduanas e Impuestos de Hong Kong. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 5000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 01/2008.
ECUADOR ORGANISMO: Servicio de Rentas Internas. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 2500. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 12/2006.
ESPAÑA ORGANISMO: Agencia Estatal de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: Todos los trabajadores de la AEAT, unos 27.000 aproximadamente. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: Está previsto hacer un cambio importante en su estructura a lo largo de 2008, hemos incluido algunos aspectos en el cuestionario.
GUATEMALA ORGANISMO: Superintendencia de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 2500. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 03/2005
JAPÓN ORGANISMO: Servicio de Aduana y la Oficina de Tarificación, Ministerio de Finanzas. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 8500. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 07/2007.
MÉXICO ORGANISMO: Servicio de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 30,000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 01/2008.
NICARAGUA ORGANISMO: Dirección General de Ingresos (DGI).
La DGI cuenta con Sistemas de información que se ejecutan dentro de la INTRANET sin embargo no existe a la fecha un portal interno o Intranet con información para ser compartida y divulgada entre las áreas internas. Los sistemas que actualmente posee son de uso interno para áreas: Tributarias, Administrativas, Recursos Humanos, Fiscalización, etc.
PÁNAMA ORGANISMO: Dirección General de Ingresos del Ministerio de Economía y Finanzas. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 424. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 2007.
PÉRU ORGANISMO: Superintendencia de Administración Tributaria. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 7000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 12/2001.
PORTUGAL ORGANISMO: Dirección General de Impuestos – DGCI. N° DE FUNCIONARIOS QUE UTILIZA LA INTRANET: 15,000. FECHA DEL ÚLTIMO CAMBIO ESTRUCTURAL EN LA INTRANET: 04/2006.
13
Revisar el anexo 10.7 donde se muestra el resto de resultados de las encuestas enviadas al CIAT y APEC.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
14
3.2. Sobre el Enfoque Aplicado
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
15
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
16
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
17
3.3. Diseño Centrado al Cliente y/o Usuario14
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
14
Revisar el Cuadro sobre las Mejores Prácticas en Diseño Visual en Intranets de Administraciones Tributarias en anexo 10.5.1.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
18
3.4. Sugerencias y Recomendaciones
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
19
4. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL15
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
15
Revisar el anexo 10.8 donde se amplía la información de este reporte.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
20
4.1. Defense Finance and Accounting Services – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
21
4.2. Department for Transport – Reino Unido
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
22
4.3. Department for Victorian Communities – Australia
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
23
4.4. Department of Veterans Affairs Mid-Atlantic Health Care Network – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
24
4.5. Federal Reserve Bank of Richmond – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
25
4.6. London Undergroup – Reino Unido
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
26
4.7. National Research Council of Canada – Industrial Research Assistance Program
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
27
4.8. Senate Republican Conference – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
28
4.9. Workplace Safety and Insurance Board of Ontario – Canada
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
29
4.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas del Reporte sobre las 10 mejores Intranets de Gobierno a nivel mundial.
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
30
5. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 200716
5.1. American Electric Power – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
16
Revisar el anexo 10.9 donde se amplía la información de este reporte.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
31
5.2. Comcast – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
32
5.3. DaimlerChvsler AG – Alemania
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
33
5.4. The Dow Chemical Company – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
34
5.5. Infosys Technologies Limited – India
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
35
5.6. JPMorgan Chase & Co. – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
36
5.7. Microsoft Corporation – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
37
5.8. National Geographic Society – Estados Unidos
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
38
5.9. The Royal Society for the Protection of Birds – Reino Unido
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
39
5.10. Buenas Prácticas sugeridas para la Intranet de SUNAT extraídas de del Reporte sobre las 10 mejores intranets a nivel mundial del 2007
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
40
6. BUENAS PRÁCTICAS EN LA CREACIÓN DE INTRANETS
6.1. Antes de iniciar la creación de la Intranet
Distinguir entre Sitio web Corporativo e Intranet. Ambas son diferentes en muchos
aspectos. Esas diferencias pueden verse reflejadas en el diseño y en el manejo de los procesos.
La entidad gubernamental debe elaborar una estrategia general de la intranet y una guía del diseño general. Es importante recordar que a nivel de las plantillas de páginas específicas y características, típicamente, cada departamento tiene diferentes necesidades.
Elaborar un diseño coherente para integrar muchas intranets.
Considerar las necesidades específicas de la organización. Una intranet refleja la
cultura, estructura, procesos, personal y recursos de la organización. Cada intranet debe adaptarse a las necesidades y desafíos de la organización.
Ver el trabajo de la gente. En el diseño de las intranets, no se olvide de que usted ya
sabe quiénes son los usuarios finales. Son la gente que pasa en los pasillos, los empleados sentados a su lado en la Cafetería. Observe cómo se está utilizando y no utilizando la intranet, y donde existen posibilidades de diseño. La intranet puede hacer más útil su trabajo en el día a día.
Busque las experiencias de otros organismos. Varios organismos han desarrollado
una considerable experiencia en el diseño y manejo de intranets. Compartir experiencias entre los organismos es una manera eficaz de construir y de apoyar la innovación en la Intranet.
Gestor de apoyo a través de grupos. Los directores de diferentes áreas deben
participar en la creación de un diseño global.
Participación de los usuarios y las personas interesadas desde el principio y
mantenerlos involucrados a lo largo del proyecto.
Planee cuidadosamente y diseñe en el papel antes de proceder al desarrollo. Una
cuidadosa planificación por adelantado también le ayudará a realizar un presupuesto realista.
No enfoque la creación de su intranet, principalmente como un proyecto de tecnología. Tratarlo como un problema de negocios y de comunicaciones.
No trate de hacer todo lo que esté a la vez. Muchas empresas tratan de "hervir el
océano" y rediseñar todos los aspectos de una gran intranet dentro de un apretado calendario y presupuesto. Invertir en la planificación por adelantado, y luego diseñar y construir en las etapas de máximo impacto.
Enfoque su intranet como un programa continuo en lugar de un proyecto aislado.
Realizar una investigación de usabilidad para determinar los requerimientos del
negocio y conocer las necesidades de los usuarios. Emplear técnicas de usabilidad como:
Card Sorting
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
41
Estudios de campo
Evaluación heurística
Encuestas
Pruebas de usuario en la antigua intranet.
Accesibilidad.
Determinar las metas de la intranet.
Darle un nombre a la Intranet y establecer claramente la marca de la intranet. Esto
puede ayudar a distinguir a la intranet del sitio web de la empresa y de otros recursos.
6.2. Durante la creación de la Intranet
6.2.1. Estándares Internacionales
Realizar muchas evaluaciones de usabilidad y visita a usuarios. Para
conocer cómo interactúan los usuarios con la Intranet y conocer que es necesario mejorar.
Usar directrices de accesibilidad en el diseño de procesos tomando en cuenta al usuario con discapacidad.
Imágenes y animaciones. Emplee el atributo Alt (texto alternativo) para
describir la función de todos los elementos gráficos.
Mapas de imagen. Cree mapas de tipo cliente y especifique el texto
alternativo por zonas activas.
Multimedia. Ofrezca subtítulos y trascripción del audio, descripción de
video, y una versión accesible en caso de utilizar formatos no accesibles.
Organización de las páginas. Utilice encabezados (H1, H2, H3,...), listas y una estructura consistente. Emplee estilos en cascada (CSS) para maquetar y determinar el estilo, donde sea posible.
Gráficas y esquemas. Resuma su contenido o utilice el atributo longdesc.
Marcos (frames) etiquételos con los atributos title o name.
Tablas. Asegúrese de que se pueden leer correctamente línea a línea.
Utilice el atributo summary.
Otros ejemplos de Usabilidad y Accesibilidad en el diseño son:
La presentación de la información en cada página debe respetar la forma de lectura jerárquica de arriba hacia abajo y de izquierda a derecha.
El contraste entre letra (color/tamaño) y fondo debe permitir la lectura
de manera sencilla, aún en los letreros más pequeños.
El color de fondo de las páginas Web debe incorporar colores claros y la
letra debe ser de un tono oscuro, lo cual aumenta el contraste y legibilidad, además de eliminar los problemas de impresión.
Mantener mecanismos de interacción consistentes y cómodos de utilizar desde los diferentes medios de acceso utilizados por los clientes.
Mantener un orden lógico de tabulación en los elementos de la página.
Proporcionar mensajes de error claros y mecanismos de navegación para
regresar a la página anterior.
Los sitios Web que utilicen documentos descargables para publicar sus
contenidos deben informar al usuario el peso del archivo y tiempo estimado de descarga a fin de que el usuario decida si es conveniente acceder a ellos.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
42
En caso de utilizar tecnología no estándar que requiera que los usuarios instalen librerías (plug-ins) adicionales, debe incluirse el enlace a los sitios de los cuales pueden obtenerse, así como instructivos claros sobre cómo realizar su instalación.
Una buena práctica en la maquetación es utilizar tablas y evitar en
medida de lo posible el uso de "marcos" –frames– o “capas” –layers–.
El uso de enlaces debe apegarse a los siguientes puntos:
Los enlaces deben ser descriptivos, de modo que simplifiquen la búsqueda de información.
Identificar explícitamente el destino de cada enlace.
Equilibrar la saturación de la página en cuanto a enlaces tomando en cuenta el número de páginas que tendrá que acceder el usuario para encontrar el contenido que requiere.
Uso de plantillas en el diseño visual de las páginas tratando de unificar
la imagen de la intranet.
Recomendaciones de Usabilidad para el uso efectivo de botones en
desarrollos web.
Recomendaciones sobre el texto contenido por los botones.
Principalmente, existen dos tipos de botones en los entornos web:
Botones textuales: Son aquellos que básicamente basan toda la información que transmiten sobre textos o a través de ellos.
Botones icónicos: Son aquellos que transmiten su información principalmente a través de una imagen siendo capaces de que la interpretación que el usuario da a dicha imagen sustituya con éxito el mensaje textual que se les podría haber proporcionado. Asimismo, estos pueden disponer de información textual, la cual vendría dada por el etiquetado del icono.
Centrándonos en la información textual transmitida por los botones textuales, existen varias recomendaciones a tener en cuenta:
1.- Es necesario etiquetar todos los botones con verbos
imperativos. Estos etiquetados han de tener siempre la primera
letra en mayúscula, como por ejemplo 'Salvar', 'Buscar', 'Eliminar' ...
De este modo, habría que huir de botones con textos tales como
“Acepta”, “Accede”, etc.
2.- Se recomienda usar el símbolo (...) ó '...' al final de las etiquetas
si la acción requiere más explicación para el usuario antes de la
acción sea llevada a cabo. Por ejemplo 'Salvar como...' o
'Buscar...'. Estos signos, no deberían añadirse en comandos tales
como 'Propiedades', 'Preferencias', 'Configuración', ya que estos
comandos no requieren mayor explicación que la que ya expresan
por medio de su etiquetado.
3.- Se recomienda utilizar siempre términos breves y
representativos. Las frases largas de carácter descriptivo no son
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
43
recomendables. El uso de terminología ha de abarcar entre dos y
tres palabras.
4.- En el caso de que el etiquetado del botón tenga dos o más
palabras, es crítico mantener la consistencia con el español. Un
error muy común a la hora de etiquetar botones es importar errores
tipográficos internacionales, la mayoría de procedencia
anglosajona. De todos ellos, el más común es el de entremezclar
mayúsculas y minúsculas dentro de una misma frase sin criterio
alguno. Hay que hacer notar que si bien en la lengua inglesa no
constituye falta de ortografía el comenzar con letra mayúscula cada
palabra que no sea determinante, adverbio o preposición dentro de
una misma frase, esto constituye una falta de ortografía en
castellano. No obstante, poner mayúsculas a palabras situadas en
mitad de frases castellanas se está convirtiendo en costumbre
común. Un empeoramiento de esta situación lo constituye el situar
dichas letras mayúsculas en algunas palabras de dicha frase y en
otras no.
Recomendaciones sobre las características de los botones.
El segundo aspecto a tener en cuenta, cuando se tenga una idea más
clara sobre las cuestiones lingüísticas es la funcionalidad de dichos
elementos. La funcionalidad de un botón en una interfaz web es casi
tan importante como su etiquetado lingüístico. El comportamiento de
dicho botón proporcionará información crítica al usuario y le guiará por
su interacción normal con el sitio web.
En aras de una potenciación de la Accesibilidad de un sitio web, el
acceso a las distintas secciones del mismo por medio de botones
debería poder hacerse de dos maneras:
o Navegando por medio del ratón: Es el uso más común por medio del cual interacciona el usuario con los sitios web.
o Navegando por medio del teclado: Posibilidad necesaria para aquellas personas que tienen necesidad de hacer uso de los sitios web accesibles debido a algún tipo de discapacidad.
Acorde a estos usos, las recomendaciones que se pueden hacer son:
Es crítico etiquetar todos los botones a fin de que el usuario pueda obtener
información acerca de la funcionalidad sin necesidad de pulsarlos.
Adicionalmente, ello posibilitará la navegación en el caso de que los
botones no se carguen, tarden en hacerlo o, directamente, no existan por
algún tipo de incompatibilidades con el navegador que está usando.
Si el botón es capaz de generar texto, un icono o ambos, es necesario
describir gráficamente lo que va a suceder. La generación de texto en la
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
44
pantalla ocultará algunos elementos de la misma y ello podría propiciar a
que el usuario se pierda. Es mejor advertir antes que subsanar.
Con respecto a la apariencia que se les debe dar a los botones dentro de
una interfaz, la recomendación básica que a primera vista se mantenga la
consistencia. Por tanto, hay que tener en cuenta los siguientes puntos:
1.- No usar más de uno o dos anchos para los botones que componen
una interfaz y, en cualquier caso, usar siempre el mismo alto. Ello
ayudará a proporcionar un cómodo sistema visual para que la
percepción del sujeto sea capaz de clasificar los elementos que
componen una interfaz.
2.- Aquellos botones cuya función, a causa de las acciones del sujeto,
quede inhabilitada, deberán quedar presentes, pero inhabilitados. Un
ensombrecimiento de los mismos, ayudará sin duda a clarificar que, a
causa de esa acción, el botón ya no está disponible o aún no ha sido
activado.
3.- En un texto, un botón puede constituir el botón por defecto de una
interfaz. Para ello, tiene que estar resaltado con un borde distinto y
debe volverse de la misma manera cuando el sujeto regrese a la citada
interfaz. Generalmente, este tipo de botones suelen ser los etiquetados
con las funciones “Aceptar”, “Adelante”, “Siguiente”, etc. Tan sólo en
casos excepcionales “Cancelar” debería ser el botón activado por
defecto de una función.
4.- Si un botón por defecto sólo va a poder ser utilizado una vez, el
usuario debe completar un cierto número de pasos (por ejemplo,
rellenar un nombre de usuario y una contraseña), este botón NUNCA
debería activarse hasta que el usuario complete correctamente la tarea
en cuestión. No tiene sentido posibilitarle la opción de pulsado si va a
conducirlo a un error de la herramienta.
Con respecto a la apariencia que los botones han de tener con
respecto a la interfaz global del sitio web, se han de tener en cuenta los
siguientes puntos:
1.- Cada vez que un botón se pulse, hay que dar feedback al
usuario que está pulsando el botón. Este feedback admite las
animaciones o los sonidos, siempre y cuando ayuden a aclarar al
usuario.
2.- La ubicación de los botones en la interfaz es un aspecto
fundamental. Es recomendable que el botón con mayor posibilidad
de ser pulsado sea mostrado en primer lugar. En este sentido, hay
que tener en cuenta que las pautas de lecto escritura occidentales
podrán ayudar en esto, ya que los usuarios leen de izquierda a
derecha y de arriba abajo. Estas pautas nos van a proporcionar las
reglas a seguir acorde a las ponderaciones en importancia
otorgadas.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
45
3.- En el caso de que la interfaz tenga ciertas particularidades, por
medio de las cuales no sea posible dotar al sitio web de
indicadores claros de pulsado, puede ser aconsejable introducir
alguna pista que enfatice los botones usados con más frecuencia o
los más previsibles.
Simple e intuitiva interfaz de usuario y arquitectura. En lo posible, los
usuarios no deben requerir una formación previa de cómo usar el sitio.
Cada recurso debe tener su propia URL exclusiva, que los usuarios
puedan guardar como favorito. Esto significa evitar en lo posible la utilización de marcos o frames.
Acceso con un clic. Los usuarios deben ser capaces de obtener los
recursos de la página con un clic. Esto puede requerir del uso de menús que solo aparecen cuando se señalan con el cursor o desplazarse a través de listas en las pequeñas ventanas para evitar que la página sea abrumadora. La regla de los 3 clicks (3 clicks rules) recomienda que no se debería llegar a ninguna información clave de un sitio web en más de tres clicks. La correcta aplicación de este principio produce en el usuario una experiencia positiva, ese usuario probablemente volverá a nuestro sitio web recordando que una vez pudo cumplir su objetivo satisfactoriamente.
Acomodar diversas formas de encontrar la información. La intranet
debe ofrecer a los usuarios tres opciones para obtener la información que están buscando: navegar, buscar o suscribirse.
Optimizar el uso de imágenes al utilizar formatos ligeros que no pierdan
la calidad de la imagen.
El uso de imágenes debe ser un recurso complementario y no ser sustituto del contenido en texto.
Es importante vigilar la cantidad de animaciones que incluya el diseño, con el fin de no saturar al usuario y perder su atención, así como evitar sobrepasar el peso recomendado por página.
En el caso de los sitios con contenido dinámico, debe contemplarse una imagen o texto alternos cuando no se encuentre disponible o no se logre cargar la imagen o información solicitada.
Algunos principios del Diseño centrado en el usuario son:
Los usuarios de un sistema frecuentemente juzgan a ese sistema por su interfaz, por lo tanto el diseño de interfaz de usuario debe tomar en cuenta las expectativas, necesidades, experiencias y capacidades de los usuarios del sistema a distribuir, conocer exactamente el nivel sociodemográfico del usuario y no confundirlo con el del cliente o desarrollador.
El control de la aplicación a nivel de navegación e interacción debe estar en manos del usuario, por lo menos aparentemente.
Cuanto mayor sea el grado de personalización, más cómodo se sentirá el usuario en el entorno de aplicación.
La página inicial es lo más importante atendiendo a razones de lograr audiencia cautiva desde el momento del contacto visual, para ello debe existir coherencia y consistencia del diseño entre
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
46
todas las partes del producto y sus elementos a nivel visual, conceptual, semántico adoptando estilos, cuando es posible y necesario.
Los usuarios han de entender el funcionamiento y la estructura de información en toda la aplicación después de observarla unos pocos segundos. Un diseño de interfaz pobre, inicialmente complejo o incomprensible puede provocar que el usuario huya y probablemente dicho sistema nunca sea usado.
Aplicar diseño de interacción consistente en decidir dónde y cómo se le
dará el control al usuario, por parte del equipo de desarrollo.
Definir qué y cómo pasa en cada escena, pantalla o página al interactuar el sistema con el usuario.
Provocar un diálogo fluido y realmente comunicativo entre el sistema y el usuario.
Definir restricciones y privilegios para reforzar conceptos.
Elaborar y utilizar metáforas.
Diseñar controles para la interacción.
6.2.1.1. Diseño Gráfico
La importancia del buen uso de la Teoría del color.
Uso del color en la Interfaz. El color tiene un impacto principal sobre la
interacción humano-computadora: si no positivo, entonces negativo. De acuerdo a Murch, un investigador en factores humanos bien conocido, "El color puede ser una herramienta poderosa para mejorar la utilidad de un despliegue de información en una amplia variedad de áreas si el color es usado adecuadamente. Inversamente, el uso inapropiado del color puede seriamente reducir la funcionalidad de un sistema de despliegue". El color es un componente principal en las GUIs. Debido a la proliferación de aplicaciones GUI en PCs, Macs, y Estaciones de trabajo Unix, el examen del color es pertinente a la interacción humano-computadora (human computer interaction, HCI). El uso de color apropiado puede ayudar a la memoria del usuario y facilitar
la formación de modelos mentales efectivos. Como Murch expresó arriba,
el uso efectivo del color puede ser una herramienta poderosa. Sin
embargo, el uso inefectivo del color puede degradar el desempeño de una
aplicación y disminuir la satisfacción del usuario. Debido a estos factores,
sentimos que el uso efectivo del color en interfaces de computadora es un
importante tópico en HCI que requiere ser examinado cuando
consideramos el diseño de una interfaz.
La gente interactúa con su mundo a través de modelos mentales que ellos
han desarrollado. Específicamente, las ideas y las habilidades que traen a
su trabajo están basadas en modelos mentales que ellos desarrollan
acerca de ese trabajo. Como diseñadores de interfaces, necesitamos
ayudar al usuario a desarrollar modelos mentales del sistema que le
ayudarán a entender el trabajo, y desarrollar las herramientas de la interfaz
que le ayudarán a realizar el trabajo. El uso adecuado del color comunica
hechos e ideas más rápidamente y más estéticamente al usuario. El color
también puede ayudar a desarrollar modelos mentales eficientes y factibles
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
47
si se siguen las siguientes pautas: simplicidad, consistencia, claridad y
lenguaje del color.
Mantenga el mensaje sencillo. No sobrecargues el significado del color
vinculando más de un concepto a un solo color17. Los conceptos diferentes
deberán usar colores diferentes. Mantener el mensaje simple se relaciona
con la siguiente pauta, la cual es consistencia.
El color puede ser usado para codificar o agrupar piezas de información.
Esto ayuda a incrementar el número de piezas de información que un
usuario puede retener en la memoria de corto plazo. Es importante el ser
consistente a la hora de "agrupar" información. Evita cambiar el significado
de los colores para diferentes pantallas en la interfaz. Por ejemplo, una
interfaz de base de datos que evaluamos cambia su color de fondo a azul
cada vez que aparecen los campos en la pantalla que no pueden ser
actualizados. Esto se hace para toda pantalla aplicable en el paquete y de
esa manera proporciona continuidad y consistencia para el usuario.
La claridad es también una pauta importante para usar color. Experimentos
han mostrado que el tiempo de búsqueda para encontrar una pieza de
información es disminuido si el color de esta pieza es conocido por
anticipado, y si el color sólo se aplica a esa pieza. Los colores de interfaz
estandarizados deberán de ser establecidos y usados a través del
desarrollo. El uso claro y conciso del color puede ayudar a los usuarios a
encontrar piezas de información más rápidamente y más eficientemente. El
aprendizaje puede ser grandiosamente aumentado con el color. El color ha
probado ser superior al blanco y negro por la efectividad en el tiempo de
proceso de información y por el rendimiento de memoria. La estética y lo
atractivo de la interfaz son inherentemente aumentados por el uso del
color.
La usabilidad del sistema puede ser aumentada empleando colores para
agrupar información acerca de subsistemas y estructuras y para añadir
dimensiones de código a la interfaz. De hecho, los errores en
entendimiento y el uso de la interfaz pueden ser realmente reducidos
usando color para dar claridad a los significados y conceptos del sistema.
El utilizar códigos de color en mensajes para el usuario podría reducir
grandemente la mal interpretación y las respuestas incorrectas. El rojo es
un buen color para alertar a un usuario hacia un error. El amarillo es
apropiado para un mensaje de advertencia, y el verde para mostrar un
progreso positivo. El usar verde para mensajes de error y el rojo para
mensajes de estado positivo sólo conducirá al usuario a mal
interpretaciones y a frustraciones.
Uso del color en las fotografías. Aunque la mayor parte de la tomas se
realizan hoy en colores, existe la opción de presentar las fotografías en blanco y negro (en realidad, grises) e, incluso, en blanco y negro real (fotos de 1 bit). En algunos casos, las fotografías en blanco y negro o en escalas de grises
pueden ser más expresivas que las del color.
17
Norman, D. Some Observations on Mental Models. In Mental Models D. Genter and A. Stevens, eds.
Lawrence Erlbaum Associates, 1983, pp. 7-14.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
48
Puede suceder que contemos sólo con fotografías en blanco y negro para
nuestro documento. En ese caso puede utilizarse así como las obtuvimos,
o tonalizarse tipo sepiado, con lo que se obtiene efectos muy interesantes,
sobre todo si se trata de fotografías antiguas.
Uso del color en ilustraciones. En el caso de las ilustraciones el uso del
color debe supeditarse a la intención comunicativa. La ilustración puede utilizarse porqué no se cuenta con una fotografía (en reemplazo), en cuyo caso el color debe ser lo más realista posible (adecuado al estilo gráfico de la ilustración). Pero las ilustraciones se usan también para simplificar y sintetizar la imagen. En ese caso el color debe ser usado con prudencia, para mantener la síntesis buscada. Si se trata de identificar elementos, el color de los mismos debe ser convencional.
Uso del color en gráficos y diagramas. El color cumple aquí el papel
auxiliar comunicativo, ayudando a reconocer las distintas partes del gráfico o diagrama, a identificarlas claramente y a interpretarlas.
Considerar las reglas de Composición Fotográfica a la hora de elegir imágenes para la Intranet. Algunas de ellas son:
Centro de Interés
Cada fotografía tiene (o debería tener) un centro de interés. ¿De qué es la
foto? ¿Es una fotografía de
su novia? ¿Es una
fotografía de las pirámides
de Egipto? Debería ser
obvio para cualquiera que
mire una fotografía saber de
qué es la foto. Es lo que se
denomina el centro de
interés.
Aunque se denomine
centro, el centro de interés
no tiene que ser
necesariamente el objeto
que esté en el centro de la
foto ni ser el objeto que ocupa la mayor parte de la imagen.
Es la primera regla de una buena composición, ya que es la más
importante. Simplemente decide antes de disparar el motivo sobre el que
quieres tomar la fotografía. Todo lo que hay que hacer a partir de ahí es
enfocar el elemento sobre el que queremos centrar el interés.
Rellenar el Encuadre (Fill the frame)
Esta regla puede parecer bastante obvia, pero lo cierto es que muchas
veces fallamos al aplicarla. Si queremos contar algo en una foto, ocupemos
la mayor parte con ese "algo", asegurándonos que se convierte de este
modo en el centro de atención. Además, de este modo eliminamos posibles
elementos que resten atención.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
49
Es un fallo demasiado común el querer sacar demasiadas cosas en una
única foto. Al final, lo que conseguimos es que no quede demasiado claro
qué es lo que queríamos enseñar. Ante la duda de si algo debe salir o no
en la foto, mejor quitarlo.
Líneas
Las líneas son un elemento
de importancia vital en las
artes visuales. Las líneas nos
aportan formas y contornos.
Con las líneas dirigimos la
mirada del espectador de una
parte de la foto a otra.
Cuando vayas avanzando en el mundo de la fotografía podrás comprobar
cómo las líneas son uno de los elementos más eficaces a la hora de dirigir
la mirada de quien contempla nuestras fotos hacia donde queremos que
mire. Las líneas horizontales, verticales y diagonales son elementos
compositivos que aportan significado a las imágenes.
Un tipo especial de líneas son las líneas convergentes. Son las líneas
paralelas que, por el efecto de la distancia, acaban convergiendo en un
mismo punto.
Flujo Después de las líneas, podemos tratar el flujo. El flujo es el modo en el que
la mirada del espectador se desplaza de una parte de la fotografía a otra.
Una manera de definir el flujo de una fotografía es mediante el uso de
líneas. Pueden ser horizontales, verticales, diagonales, convergentes o
divergentes. A veces el flujo creado por las líneas es nítido y claro, como
los laterales de un edificio que convergen hacia el cielo), o pueden ser
menos obvias. Sin embargo, la mirada del espectador debería ser capaz de
recorrer los elementos de una parte a otra de la imagen.
El flujo crea la ilusión de movimiento (o ausencia de movimiento si se
desea). Las líneas diagonales se consideran generalmente más
"dinámicas", mientras que las líneas horizontales y verticales se consideran
más "estáticas". Un equilibrio cuidadoso de elementos estáticos y
dinámicos dará un sentido global de movimiento a tus fotografías.
Dirección
La dirección es similar al flujo. También crea la ilusión de movimiento. Si
hay algo en la fotografía que parezca estar en movimiento, tiene una
dirección en la que se mueve.
Un ejemplo de esto son las luces de peatones de un semáforo. Cuando
está en rojo para los peatones, la figura representa un peatón inmóvil, con
las piernas juntas y los brazos bajados. Visualmente, no tiene ninguna
apariencia de estar en movimiento. Sin embargo, la figura del peatón en
verde que permite cruzar tiene una dirección en la cual se está moviendo.
La dirección en fotografía se puede crear de muchas maneras. Una figura a
punto de cruzar una calle puede transmitir movimiento aunque la veamos
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
50
estática y no se muevan sus brazos y sus pies, porque podemos imaginarla
un segundo después cruzando la calle. Del mismo modo, un coche que
aparece cortado en el lado izquierdo de una fotografía en la que solo se ve
su parte delantera, podemos imaginarlo un segundo después al lado
derecho de la foto.
Repetición
La repetición de algún elemento (unos globos, unos pájaros), dan un
sentido de relación de distintas partes de una imagen.
Por ejemplo, una bandada de pájaros pueden estar moviéndose en grupo
por el aire, definiendo formas interesantes en el cielo y añadiendo
información sobre la dirección de la fotografía.
En algunas ocasiones puede aportar factores psicológicos, como el sentido
de la unión y el compañerismo.
Grupos de Tres
Parece existir una percepción especial de los números impares en
fotografía, y en especial de los grupos de tres elementos.
Un único elemento puede transmitir soledad o aislamiento, con dos
elementos una foto puede quedar demasiado bien equilibrada y
estática, y cuatro elementos pueden resultar demasiados para
distribuir.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
51
Por algún motivo que no se explicar, a las personas nos gusta el
número 3. En fotografía suele funcionar la agrupación de tres
elementos como centro de interés.
Regla de los Tercios Ya escribimos un artículo que explicaba la regla de los tercios con
más detalle. Si nos fijamos en obras de arte en cualquier museo,
podremos comprobar que si dividimos un cuadro en cuadrículas de
igual tamaño de 3 x 3, las cuatro intersecciones de las cuadrículas
dentro del cuadro marcan los puntos de interés.
Trazando esta cuadrícula imaginaria sobre la mayoría de las obras
nos daremos cuenta de que elementos fundamentales del cuadro
recaen sobre esas intersecciones: ventanas y puertas, ojos, líneas
de horizonte, picos de montañas, etc. Está comprobado que
llevando nuestro punto de interés a uno de esos cuatro puntos
conseguimos una imagen mucho más interesante.
Espacio Negativo
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
52
Se considera espacio negativo los grandes espacios vacíos,
normalmente en blanco o negro, dentro de una fotografía,
normalmente a un lado.
El alejamiento del elemento central de la imagen, rellenando el
resto de la foto de un espacio vacío nos permite transmitir una
información adicional de soledad, aislamiento o calma a la imagen.
Aunque no es un recurso que vayamos a utilizar habitualmente, no
está de más conocerlo. Está enfrentada a la regla de composición
consistente en rellenar el encuadre.
Frente/Fondo
El contenido del frente y del
fondo de una foto es
importante. Tanto en el fondo
como en el frente tienen
aplicación otros elementos
compositivos como los
colores o las líneas.
Lo importante en el frente y
en el fondo es que no haya
demasiados detalles que
puedan distraer la vista del
espectador del centro de
interés.
La mejor herramienta con la
que contamos para marcar la
diferencia entre el frente y el fondo de nuestras fotos es la
profundidad de campo. Gracias a la apertura del diafragma que
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
53
utilicemos a la hora de hacer fotografías, conseguiremos mayor o
menor nitidez en el fondo.
Enmarcado
Existen elementos que pueden ayudar a poner un marco al centro
de interés de la foto.
Algunos de estos elementos son muy claros, tapando
completamente parte de la foto, como puertas, ventanas o puentes.
Otros actúan de una forma menos clara, simplemente orientando
nuestra vista. Es el caso de las señales de tráfico o las ramas de
los árboles, etc.
Cualquier elemento que "encierre" el centro de interés nos permitirá
enmarcar la foto, dirigiendo la atención hacia el elemento deseado.
Curvas en S
Las curvas en "S" son un elemento muy recurrente en fotografía.
Está relacionado con la sensualidad. También transmiten
movimiento y ayudan a conducir la mirada.
En la vida cotidiana encontramos muchos recursos que nos
permiten aplicar curvas en S en nuestras fotografías. Una
carretera, un camino, el curso de un río, etc. Son elementos
visuales muy potentes que dan interés a la fotografía.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
54
Los detalles y el entorno como significadores En la fotografía del niño (A), podemos apreciar que está contento,
que se divierte en lo que parece un automóvil de juguete. Los
elementos que aparecen al fondo no son suficientes para identificar
el contexto.
La segunda fotografía (B) con un recorte menor; muestra
claramente que está en una calesita.
La tercera (C) muestra la toma completa original, en que la resulta
molesto el elemento desenfocado del rincón inferior derecho, y
sobra el espacio a la izquierda de la barra.
No hay que confundirse al seleccionar lo que se va a recortar: el
que realiza esta operación sabe que la fotografía es en una
calesita, por lo que los elementos de fondo de la primera (A) le
pueden parecer suficientes para identificar la situación. El lector-
destinatario no sabe previamente de que se trata, y necesita
elementos para interpretar (decodificar, comprender).
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
55
La intranet debe contar con una Identidad gráfica que transmita el
sentido de pertenencia institucional a los trabajadores. Deben incluir combinaciones de colores institucionales.
La imagen gráfica seleccionada para el sitio no debe afectar su funcionamiento ni incrementar los tiempos de carga y recarga del mismo.
Considerar la teoría de Composición en la Obra de Arte para dibujos e ilustraciones. Se
toma en cuenta la organización del Campo Visual: La forma, el color, la textura. Las leyes compositivas como: la simetría, la ley de compensación de la balanza, etc.
6.2.2. Contenido
Considere una estructura de intranet apropiada. El uso de técnica de
arquitectura de la información, ayuda a determinar la estructura más adecuada para el sitio.
Fácil orientación. El contenido debe ser visible en la primera página. No
debe ser necesario recurrir al mapa de sitio.
Garantizar la cantidad de contenidos. Proporcionar al personal, la
información que necesita para sus funciones.
Los contenidos publicados deben contemplar los siguientes elementos
de comunicación:
Uso de lenguaje simple, claro y directo, que permita a los lectores concentrarse en el mensaje y comprenderlo de manera fácil y sencilla.
Uso de palabras apropiadas al contexto del contenido y al perfil de la comunidad a la que está enfocado el contenido.
Estructura gramatical, ortografía y redacción correctas.
En caso de hacer uso de traducción de términos en idiomas diferentes al español, o los acuñados por el uso, debe ser clara y exacta de acuerdo al contexto con el fin de reducir las acepciones múltiples
La intranet debe mostrar las políticas de uso del mismo y/o
confidencialidad de la información en él publicada, los términos y condiciones bajo los cuales se preste algún servicio, así como las exclusiones aplicables.
Recomendaciones para la organización de contenidos en una página
web:
Organice el texto con dos o tres niveles de titulares (según la complejidad y extensión).
Use listas numeradas y viñetas para organizar conjuntos de elementos.
Si la lista es muy larga clasifique los ítems.
Resalte las palabras importantes.
Utilice reforzadores.
Saque fuera del cuerpo del texto información que no sea central.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
56
Separe los párrafos. Si es necesario cree un índice de contenido que facilite la navegación del conjunto.
Identifique fragmentos poco relevantes y sepárelos del texto central.
En ocasiones deberá redactar de nuevo el cuerpo del texto en forma resumida con vínculos al resto de los fragmentos.
Utilice un esquema de pirámide invertida de manera que lo más importante quede en la parte superior de la página y luego agregue profundidad.
El contenido en cada página debe abarcar entre el 50% y 80% del espacio disponible (tener en cuenta el espacio que utiliza el navegador). La barra de navegación debe mantenerse por debajo del 20% del espacio.
6.2.3. Comunicaciones
Asóciese con el equipo de Comunicaciones. Ya que pueden proporcionarle noticias e información corporativa.
6.3. Después de creada la intranet
Realizar un seguimiento continuo a la intranet. Realice mediciones y
determine el valor de la intranet.
Mantener un registro continuo del contenido.
Establecer políticas, guías y estándares relacionados a las actividades
de la intranet.
Creación del Manual de Estándares Gráficos o Estilos. Debe
contemplar diversos aspectos como: ortografía, tipografía, diseño de la página, iconos, estructura de encabezados, etc.
Tómese un tiempo para medir el ROI. Hacer una pausa para medir el tiempo que los usuarios requieren para realizar una tarea, tanto antes y después de un diseño. Conocer se hubo un ahorro financiero, y una ganancia.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
57
7. ERRORES COMUNES EN LAS INTRANETS18
7.1. Antes de iniciar la creación de la Intranet
Del estudio realizado por King eClient se desprende que los principales factores que frenan el
desarrollo de las Intranets son:
Efecto Eclipse: las páginas web corporativas son las principales herramientas de
relación con los clientes finales, por lo que son consideradas por los empresarios como los canales clave para la generación de ingresos. Este hecho provoca el denominado efecto eclipse, lo que significa que los entornos orientados a procesos de gestión interna quedan eclipsados por la página web, principal fuente de ingresos de la empresa.
Efecto Cajón de Sastre: el 58% de empresas estudiadas afirman haber iniciado la
programación de su Intranet sin haber definido de forma concreta qué contenidos y servicios iban a albergar. Esta falta de conceptualización provoca el llamado efecto cajón de sastre, que unido al crecimiento descontrolado de los contenidos obliga a los responsables a diseñar la Intranet a medida que se crece, lo que provoca ineficiencias y errores de navegación y poca eficacia de la web interna.
Efecto Parche: debido a los efectos anteriormente comentados, las Intranets se
han convertido en entornos sobresaturados para las posibilidades con las que fueron concebidas. Todos estos efectos y sus consecuencias acaban redundando en entornos no útiles y a menudo poco atractivos.
7.2. Durante la creación de la Intranet
7.2.1. Diseño Visual
Pobre diseño de páginas. En algunas intranets, los usuarios se enfrentan a un
mar de enlaces. En varias intranets había tanta información que los usuarios se vieron obligados a desplazarse por cinco o más páginas. En algunas de las presentaciones había mucho texto y muchos enlaces y los usuarios no tenían ninguna oportunidad de encontrar lo que estaban buscando. Los diseñadores a menudo creen que si no ofrecen información o vínculos en el nivel superior, entonces la gente nunca va a encontrarlas. En realidad, la verdad suele ser lo contrario. Si usted ofrece demasiadas opciones que están en el nivel superior, los usuarios sufren de sobrecarga de información.
Visualización: errores a evitar en el empleo de color en la pantalla del ordenador.
La utilización de colores demasiado saturados.
Utilizar una paleta de colores extensa.
Poco contraste de contenidos y elementos de lectura: Existe una tendencia de diseño de presentar en contenidos, los textos en tonos grisáceos sobre fondo blanco, lo que genera algunos problemas de legibilidad. ejemplo
18
Ver el cuadro de resumen en el anexo 10.6
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
58
incorrecto, texto verde sobre fondo amarillo; ejemplo correcto: texto negro sobre fondo claro.
Errores comunes a considerar en la fotografías antes de colocarlas en la
Intranet.
Reflejos del flash sobre el fondo.
Hay veces que utilizamos el flash de la
cámara sin darnos cuenta de que por
detrás del objeto que estamos
fotografiando hay una superficie que
refleja la luz del flash. El caso más
obvio es el de un espejo, pero existen
otro tipo de superficies que pueden
reflejar la luz. Estos reflejos producen,
desde una mala medición de la luz del
flash, oscureciendo toda la foto en el
peor de los casos, hasta la aparición de
una zona en la foto quemada por la
exposición de luz muy fuerte como el
menor de los problemas.
Por eso, es muy importante observar el
tipo de fondo que nos encontramos a la
hora de hacer una fotografía con flash.
Ojos rojos
Cuando llegue a sus manos una fotografía con personas o animales con ojos
rojos, sólo hay que realizar la corrección con algún programa de retoque.
Flash de relleno demasiado fuerte, que hace demasiado obvio el uso del flash. El flash no es solo un elemento para utilizar por la noche. Hay muchas ocasiones
en las que, con luz natural, conviene utilizar el flash en una modalidad denominada
"flash de relleno", que sirve para iluminar el elemento en primer plano que
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
59
queremos fotografiar para, por ejemplo, contrarrestar la sombra provocada por
estar situado el sujeto a contraluz.
Uno de los problemas típicos que se puede producir con esta técnica se produce
cuando la iluminación del flash es excesiva, creando un contraste excesivo y poco
natural entre el sujeto en primer plano y el fondo, en el que parece que hubiéramos
sacado el elemento en primer plano de otra fotografía y lo hubiéramos "recortado y
pegado" en la foto.
Líneas que deberían ser horizontales o verticales pero no lo son.
Muchas veces tenemos en nuestras fotos líneas de referencia que son claramente
horizontales o verticales, como por ejemplo la línea del horizonte, mucho más
visible cuando estamos haciendo fotografías en el mar. Lo cierto es que, a simple
vista, es muy complicado hacer estas fotos bien, porque una inclinación de tan solo
un par de grados hará que el resultado de nuestra foto no sea el esperado por
haber quedado torcidas estas líneas de referencia.
Antes del retoque
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
60
Después del Retoque
Líneas torcidas en edificios.
Este es un defecto que normalmente viene provocado por la propia
cámara, o para ser más exactos, por la óptica de la cámara. También se
puede ver incrementado por el ángulo o la perspectiva que estemos dando
a la foto. Se conoce como efecto barrilete, y se puede apreciar con facilidad
cuando fotografiamos edificios y las líneas verticales de las paredes
tienden a cerrarse en su parte superior, en lugar de ir paralelas al borde de
la fotografía.
En algunos casos se puede corregir con software específico, cuando el
efecto no es demasiado acusado. Las últimas versiones de Adobe
Photoshop cuentan con una utilidad específica para ello. También se puede
realizar una leve corrección de la perspectiva con Adobe Photoshop.
Antes del Retoque
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
61
Después del Retoque
Esquinas oscurecidas por el uso incorrecto de algún filtro u objetivo (viñeteo).
El efecto de viñeteo o viñeteado se
produce en ciertos objetivos con
algunas focales extremas, o
utilizados en combinación con algún
filtro, y el resultado es el
oscurecimiento de las esquinas de la
fotografía. Es un recurso que se
puede aplicar de manera artificial
para ayudar a centrar la atención del
espectador en el centro de la foto,
pero en general se considera un
defecto de la fotografía.
También hay algunas aplicaciones que permiten corregirlo y algunos programas de
retoque que permiten lograr este efecto.
Cielos anormalmente azules por el uso de algún filtro.
Existen filtros que afectan a la luz que pasa a través del objetivo, influyendo en el
modo en que quedan recogidos los colores. Hay filtros específicos que afectan al
color del cielo, realzando los tonos azules recogidos. Hay que hacer un uso
cuidadoso de este tipo de filtros, porque una variación excesiva de lo tonos del
cielo sobre los que estamos acostumbrados a ver en la vida diaria puede traspasar
la línea invisible que marca la diferencia entre algo llamativo y algo definitivamente
errado.
Imágenes con demasiada o muy poca profundidad de campo.
Sobra decir que una profundidad de campo mal empleada, ya sea por exceso o por
defecto, puede estropear una bonita foto.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
62
La profundidad de campo bien
empleada debe ser aquella que nos
permita resaltar aquello en lo que
queramos que se centre la atención del
espectador; ni más ni menos.
Los errores más comunes en la navegación son:
Navegación que no es ni coherente ni persistente. Algunas intranets se
basaron en características tales como un índice de A-a-Z o un mapa del sitio. Tales características fueron dadas a veces con enlaces en la página principal. Esto estaría bien, salvo que en varias intranets el menú principal desaparece por completo en varias páginas, y características como la A-a-Z fueron el único índice de navegación que ofrece. En otros casos, un menú principal estuvo generalmente disponible, pero la estructura y el contenido cambiado al azar. Por ejemplo, el menú principal aparece como pestañas en una sola página, una barra de color en otro, en otros botones en la misma intranet. En algunos casos, los diseñadores optaron por temas en categorías, lo que obliga a los usuarios a pasar por demasiadas páginas que tienen vínculos, pero no descripciones. A través de la tarjeta de clasificación y estudios de usabilidad, se puede determinar la mejor manera de clasificar y nombrar a los menús y los enlaces para que los usuarios sepan dónde buscar subpáginas.
En los menús de navegación, mejor texto que imágenes. Ya sabemos que dreamweaver lo hace fácil, pero créeme, los problemas son muy superiores a los beneficios.
Un flujo de navegación bien pensado con subsecciones siempre es mejor que utilizar menús desplegables.
Menús de conexión en cascada. La gente tiene problemas al utilizar los
menús que vuelan. Todavía veía con múltiples diseños de muchos menús en cascada, algunos de los cuales incluso en cascada en varios niveles. Mejores opciones existen, como por ejemplo, ampliar los menús en el lugar, simplemente disminuyendo el número de opciones de menú.
No mantener la funcionalidad lógica del botón “Atrás” del navegador.
Este es un principio básico en usabilidad. El visitante sabe que pulsando ese botón, va a volver a la página anterior que estaba visitando, no rompas esta regla.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
63
No cambiar el color de enlaces visitados. Una buena presentación de la
navegación realizada en el pasado ayuda a entender la situación actual. Conociendo las localizaciones de tu pasado y presente, resulta más fácil decidir cuál es el siguiente paso. Los enlaces son un factor fundamental en el proceso de navegación. Los usuarios pueden excluir links que resultaron infructuosos en anteriores visitas. Al contrario, pueden volver a visitar enlaces que les resultaron útiles. Lo que es más importante, conocer que páginas han visitado ya libera a los usuarios de volver sin intención a volver a visitar páginas ya visitadas. Estos beneficios solo funcionan si suponemos lo siguiente: los usuarios pueden diferenciar entre los enlaces visitados y los no visitados, ya que pueden diferenciarlos por el color. Cuando los enlaces visitados no cambian de color, los usuarios demuestran mayor desorientación en los test de usabilidad.
Enlaces ocultos: Hay gente a la que no le gustan los enlaces subrayados,
pero tampoco hay que esconderlos con imágenes o algo similar, por lo menos hemos de destacarlos del resto del texto y contenido.
Zonas sin salida: Llevar al usuario a una web o menú con poca
información o ninguna para volver a la sección anterior puede hacer que abandone de inmediato la web.
Capas que se superponen: Hay que tener cuidado con menús
desplegables o capas que se mueven ya que pueden superponer con otras capas de la web y quedar ocultas tras estas o taparlas.
Navegación dinámica: Al igual que la navegación con arrastre, está muy
bien en pequeños aspectos para dar un toque moderno, pero la gente está acostumbrada a una navegación clásica.
Menús desplegables: Los usuarios suelen sacar el cursor del menú y este
se cierra inmediatamente, lo que genera una situación muy incómoda, por lo que si se ponen por lo menos que no sean pequeños y difíciles de navegar.
No incluir un enlace activo a la página de portada en la misma página de portada. Este es un caso especial de una directiva que se aplica a todas las páginas de los sitios web o intranet: nunca tengas un enlace que apunte a la página actual. (Un botón para refrescar los valores de las acciones u otra información cambiante es otra cosa y deben ser presentados como un botón, preferiblemente que un enlace, dado que éstos no nos llevan a otro lugar.) El enlace activo a la página actual causa 3 problemas:
o Si los usuarios hacen clic en él, será una absoluta pérdida de tiempo para ellos dirigirse a la misma página.
o Peor, tales enlaces le provocan a los usuarios la duda de si ellos
realmente están en la ubicación que piensan estar.
o La peor de todas, si los usuarios siguen estos enlaces estarán confundidos en sus nuevas ubicaciones, especialmente si la página es desplazada a la parte superior.
El enlace a la página de portada en la propia página de portada resulta, normalmente, de usar una barra de navegación universal que incluye el "home" como una opción. Eso está bien. Pero cuando los usuarios estén
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
64
en la página que es presentada en la barra de navegación, debes desactivar las opciones del enlace y resaltar éste, tal es la manera de indicar que esa es la ubicación actual.
No limitar la utilización de marcos o frames debido a que ocasionan problemas:
La dirección URL es la del “frameset” (archivo que contiene información sobre el conjunto de marcos utilizados) en vez de la página de contenido.
Dejan de funcionar los marcadores: favoritos, historial, copiado de URLs y pegado de otros documentos y e-mails.
Lo anterior impide la difusión boca a boca de los URLs.
Roban espacio valioso de la pantalla a expensas de contenido.
Se complica el proceso de impresión.
Confunden a los motores de búsqueda en la creación de los índices.
Las páginas externas vistas dentro de un marco se ven diferentes al diseño original.
Si la página de destino también está diseñada con marcos el problema de usabilidad se agrava.
Los errores más comunes a la hora de diseñar una página web considerando a las personas con discapacidades visuales. Los problemas habituales en la accesibilidad son:
Colocar imágenes sin texto alternativo.
Ausencia de texto alternativo para los puntos sensibles de los mapas de imagen.
El uso incorrecto de los elementos estructurales en las páginas.
Los sonidos no subtitulados y las imágenes no descritas.
La ausencia de información alternativa para los usuarios a los marcos (frames) o a los programas incrustados (scripts).
Pobres contraste entre el texto y el fondo de página.
Diseñar páginas muy largas con gráficos pesados, animaciones y componentes.
Sobrecarga visual: Párrafos enteros en negrita o frases completas que son
enlaces no contribuyen a la navegación y sobrecargan la página.
Los errores más comunes en el uso de la tipografía son:
Utilizar tamaños de letra inferiores a los perfectamente visibles.
Usar muchos formatos de texto en todo el sitio y hacer de su sitio un catálogo de fuentes. Deben usa las mismas fuentes, tamaños, paleta de colores, etc., a lo largo y ancho de su intranet. Usar solo las llamadas “Web safe fonts” que son las fuentes que se ven de la misma manera en la gran mayoría de los navegadores. Estas son Geneva, Verdana, Arial, Times New Roman y Courier.
Texto parpadeante. Hace difícil la atención a cualquier otro elemento de la
página.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
65
Textos deslizantes. Leer un texto que se mueve es incómodo, marea, produce fatiga y no permite fijar la atención en otros elementos.
Texto no escalable. Un muro de texto es mortal para la experiencia
interactiva. Intimidante. Aburrido. Doloroso de leer. Escriba para la lectura online, no para la impresión. El texto debe soportar escaneabilidad, use trucos bien documentados:
o Sub cabeceras o Listas o Destaque palabras claves o Párrafos cortos o La pirámide invertida o Un estilo de escritura simple
Tamaño de fuente fija. Los CSS desafortunadamente dan el poder a los
sitios web de deshabilitar la opción de los navegadores de "cambiar el tamaño de la fuente" y especificar un tamaño de fuente fija. El 95% de las veces, esta letra fija es enana, reduciendo la capacidad de lectura para la mayor parte de la gente mayor de 40 años. Respete las preferencias del usuario y déjeles cambiar el tamaño del texto según lo necesiten. Además, especifique el tamaño de las fuentes en términos relativos -- no como un número absoluto de píxeles.
Los errores a la hora de colocar gráficos o imágenes en una página web:
Usar gráficos sólo para decorar la página de portada y no para que muestren contenidos reales. Por ejemplo, utilice fotos de personas las cuales tengan una conexión obvia con el contenido, opuesto a utilizar modelos o fotos comunes. Gráficas ilustrativas pueden distraer a los usuarios del contenido crítico.
Sobre los errores en animaciones:
Colocar animaciones innecesarias. Al tiempo que retrasan la
visualización de la página, distraen la atención del usuario al igual que el texto parpadeante.
Si todo las páginas web están completamente hechas en flash, DESPIDE a tus desarrolladores. Flash es solo una herramienta, una maravillosa y poderosa herramienta para mostrar animaciones, video, interfaces, carritos de compra etc… Eso NO QUIERE DECIR que necesites crear toda la web en flash. Míralo de esta manera, hasta Adobe (los que venden el software Flash y tienen los derechos legales) no tienen toda su web hecha en flash.
Los errores comunes en el diseño de iconos en sistemas, aplicables también a los iconos para páginas web son:
Insuficiente diferenciación entre iconos. Muchas veces en un set de
iconos tenemos muchos que se parecen y es bastante difícil distinguir uno de otro. Si no lees las leyendas que lo acompañan, fácilmente te equivocarás.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
66
Iconos de la sección de Utilidades en Mac OSX. Siempre me confundo y lanzo la aplicación
que no toca. Este problema se hace más gordo cuando los iconos son de tamaño reducido.
El problema se agrava más cuando se reduce el tamaño de los iconos.
Demasiados elementos en un mismo icono. Cuanto más simple sea el icono, mejor. Es preferible mantener el número de elementos dentro del icono al mínimo. Sin embargo, los diseñadores de Microsoft, inspirados por el nuevo formato de los iconos de Windows Vista, decidieron hincharlos para justificar el hinchado presupuesto. Cada icono representa una mini-
historia con una trama. El problema es
que al hacerlos pequeños es imposible
saber que representan. Incluso con el
tamaño correcto ya cuesta saber
que significan.
Elementos innecesarios. Un icono
debe ser fácil de leer. Cuantos menos elementos tenga, mejor. Y es mejor aún si la imagen entera es relevante, no sólo una parte de ella. Por lo tanto tienes que prestar atención al contexto donde se encuentran los iconos. Echa un vistazo a estos iconos de bases de datos por ejemplo:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
67
A primera vista, todo parece bien.
Pero si este programa (o una barra de herramientas) trabaja solo con bases de
datos, podemos ( y deberíamos ) eliminar la parte innecesaria.
El sentido no se ha perdido y
los iconos son mucho más
distinguibles.
Aquí tenemos un ejemplo real
de elementos innecesarios en
iconos de BeOS 5:
Los signos de verificación aquí son absolutamente superfluos. Por cierto, ¿por
qué están en rojo?.
Carencia de una misma línea de diseño en un set de iconos. Una línea
de diseño de dice cuando un conjunto de elementos tiene algo en común,
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
68
colores, estilos, perspectiva, tamaño, dibujo o cualquier propiedad que los identifique como una unidad. Si hay solo unos pocos iconos, es fácil para el diseñador mantener en la cabeza estas reglas para ir creando otros con la misma línea de diseño. Pero si se trata de una cantidad mucho mayor, como iconos en un sistema operativo, ya no es sólo un diseñador el que se encarga de la tarea, sino varios, y es entonces cuando tiene que existir unas instrucciones comunes de cómo diseñar los iconos.
Una multitud de estilos en el archivo shell32.dll de Windows XP. Estos son
los iconos por defecto sugeridos al usuario.
Perspectiva y sombras innecesarias en iconos pequeños. El progreso
no se detiene: las interfaces han ganado potencia y ahora son capaces de mostrar objetos semi-transparentes, usar más colores y ahora la tendencia está en hacerlos en 3D. ¿Pero es realmente útil para todos? ¡No siempre! Sobre todo si estamos hablando de iconos pequeños de 16×16 o más aún. Por ejemplo, tomemos el gestor de aplicaciones de RedHat 9:
La perspectiva en iconos tan pequeños es innecesaria e incluso
contraproducente.
Y este es el gestor de aplicaciones de Windows XP:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
69
Como norma, los iconos en Windows XP tienen 2 píxel de sombra en
negro, pero en tamaños como 16×16 la sombra aparece demasiado grande
y hace a los iconos parecer sucios. El libro de direcciones ( Address Book )
se lleva la peor parte en este set.
Metáforas demasiado originales. Lo que se muestra en un icono es un
compromiso entre reconocimiento y originalidad. Antes de desarrollar una metáfora para el icono (imagen) es una buena idea como han solucionado el problema los demás. Tal vez la mejor solución no es la más original, sino más bien la adopción a una solución existente. Un ejemplo de excesiva originalidad es el icono de la papelera de OS/2 Warp 4, que en realidad no es una papelera sino una trituradora de papel.
Otro de los problemas con la elección de una trituradora es que no hay
ninguna que se le parezca. El icono parece una impresora con un pulpo
escondido dentro. Lo que está claro es que no es una solución acertada.
Nacionalidades o características sociales no es están teniendo en cuenta. Siempre es necesario tener en cuenta las condiciones en las que
el icono se va a mostrar. Un aspecto importante en este caso es el de las características nacionales. Las tradiciones culturales, el entorno y los gestos pueden diferir radicalmente de un país a otro. Si nos dicen que tenemos que dibujar un icono para trabajar con correo electrónico, tiene perfecto sentido usar la metáfora real de un buzón de correo por ejemplo:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
70
Estas imágenes son cortesía del artículo de
la wikipedia titulado “Post box“.
La respuesta puede encontrarse en el manual
sobre la creación de iconos para MacOSX.
“Usa elementos universales que las personas
reconocen fácilmente. Evita centrar la
atención en un aspecto secundario del
elemento. Por ejemplo, para un icono de
correo, un buzón rural sería menos
reconocible que un sello de correos”
La idea de usar un sello está bien, pero el uso del halcón de cola roja en la
imagen, es sin duda cuestionable.
Sin embargo, no sólo tienes que tener presente las
características nacionales…Esto me recuerda algo divertido.
Una vez, necesitábamos un icono que representara un filtro
de datos, que a menudo se usa la metáfora de un embudo.
Se señala como esto:
La respuesta del cliente fue la siguiente: “¡No entiendo porque para un filtro me
dibujas un icono con forma de vaso de Martini!
Imágenes de elementos de la interfaz dentro de los iconos. El manual sobre la creación de iconos para MaxOSX nos advierte:”Evita el uso de elementos de la interfaz Aqua en tus iconos, podrían confundirse con la propia interfaz.” Puedes hacer clic en uno de los radiobuttons representados pero en
realidad lo que has clicado es el icono entero.
Este por ejemplo es un interesante ejemplo de la interfaz de OmniWeb:
Presta atención a los botones anterior y siguiente, que botones tan raros
con leyendas debajo. Sin embargo no son botones, ¡son iconos!
Texto dentro de los iconos. Este error es muy común en iconos de programas. Es evidente que la primera cosa que te viene a la mente
cuando trabajas sobre un icono de una aplicación es adaptar el logotipo del programa al tamaño del icono. ¿Cual es el problema en insertar texto dentro del icono?. En primer lugar, está directamente relacionada con el idioma y por tanto impide la localización. En segundo lugar, si el icono es pequeño es imposible leer el texto. En tercer lugar, en el caso de los iconos de las aplicaciones, el texto se repite en el nombre del programa.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
71
Dibujando fuera del marco de trabajo. Por regla general, este problema
se produce si has dibujado el icono en un programa de tratamiento vectorial. Con tamaños grandes todo se ve bien, pero en realidad los iconos son pequeños y con un número de píxeles limitados, así que cuando reduzcamos el tamaño y pasemos de vector-mapa de píxeles, el anti-aliasing suavizará los bordes.
7.2.2. Contenido
Carencia de Información en la página principal. Algunas intranets no ofrecen
ningún tipo de noticia o información en la página de inicio. Sólo enlaces. Esto no crea una buena primera impresión. También se pierde la oportunidad de llegar rápidamente a los usuarios con anuncios importantes.
No hacer fácil el acceso a los contenidos recientes de la página principal.
En general, los usuarios recuerdan cuando ellos han visto algo interesante en la página de portada. Sin embargo, a menos que la página muestre una lista de los contenidos recientes y ofrezca un enlace a ellos, los usuarios no tendrán la posibilidad de encontrar lo que están buscando de sus visitas ulteriores.
7.2.3. Desarrollo
Código prehistórico reemplazable con CSS. En muchos casos se pueden ver cosas,
como en la Web de correos de España, donde utilizan el tag <font> con una clase de CSS para hacer las letras en negrita, lo hace de esta forma:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
72
<p><font class="txtNegrita">Lugares y medios de exposición.</font><br/>
En las Jefaturas Provinciales de Correos y Telégrafos, Ceuta y Melilla…</p>
Cuando deberían haber hecho:
<h3>Lugares y medios de exposición</h3> <p>En las Jefaturas Provinciales de Correos y Telégrafos, Ceuta y Melilla…</p>
Otro ejemplo mal aplicado lo podemos ver en la Web de correos, cuando quieren hacer
una negrita o un énfasis en una palabra utilizan de nuevo el tag <font> con una clase,
cuando podrían usar el tag <b> o el tag <strong> para dar más significado semántico al
asunto:
<p>Junto a este viaje al pasado, el <font class="txtNegrita">Museo Postal y
Telegráfico</font> abre una ventana al futuro con la exposición de una maqueta del
satélite Hispasat.</p>
Nótese la cantidad de veces que tendrán que escribir en cada documento la clase
class="txtNegrita" en cada página donde requieran negritas y títulos, si comparamos
class="txtNegrita" con la cantidad de caracteres que pueda llevar escribir los elementos
de un título por ejemplo notaremos un ahorro tremendo de caracteres como por
ejemplo <h3></h3> son 9 caracteres contra 18 caracteres de class="txtNegrita" si se
quitaran todas estas clases inútiles podrían ahorrar hasta 1 MB de caracteres de
atributos basura, caracteres de más a toda la totalidad de documentos.
El ejemplo correcto sería:
<p>Junto a este viaje al pasado, el <strong>Museo Postal y Telegráfico</strong> abre
una ventana al futuro con la exposición de una maqueta del satélite Hispasat.</p>
Y en la plantilla de CSS ponerle el color o el tipo de letra que desees.
Olvidarse de la semántica, los documentos son una pila de información sin clasificar…Eso mismo, una pila de información sin clasificar, la semántica es una de
las áreas de los estándares Web que más importancia tiene que haber en las páginas que ofrecen contenidos y servicios públicos, de hecho en todas las páginas debería haber un mínimo de semántica, uno de los problemas que observo es que muchas empresas grandes que tienen suficiente dinero para hacer estas cosas bien, lo hacen al revés, cuando la semántica no sólo nos permite darle un significado “esto es un título", “esto es un párrafo", “esto es una cita” sino también que nos dan clasificación y jerarquía dentro de un documento, por ende puede retornar más beneficios.
La jerarquía viene de los elementos como los títulos, listas, definiciones, y la
clasificación nos permite editar esas jerarquías desde CSS, en pocas palabras que, a
mejor jerarquizado y clasificado esté el código, más fácil es controlarlo con un CSS.
Ejemplo horrendo de la Web de Correos de España, para hacer un título y un párrafo
utilizan todo este código:
<tr valign="bottom"><!-- 1-->
<td height="24″ valign="bottom"><a href="/identidad/” class="TitSeccionBold">Una
nueva imagen, una nueva identidad</a></td>
</tr>
<tr>
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
73
<td height="6″ valign="top"><img src="/comun/img/lin_g_sep_largo.gif” width="310″
height="1″></td>
</tr>
<tr class="txtNormal">
<td height="25″ valign="top” class="txtNormal"> Correos rediseña su marca y todos sus
elementos clave de identificación visual <a href="/00/img/nuevaimg.avi”
class="txtLink">Ver vídeo</a></td>
</tr>
Como podemos apreciar en el código, prevalecen las ganas de armarlo todo en el
mismo documento de HTML, cuando podría estar mucho más limpio, semántico y
controlado por unas pocas reglas de CSS.
Podríamos mejorarlo de esta forma, en el HTML:
<div id="contenido"><h2><a href="/identidad/" class="TitSeccionBold">Una nueva
imagen, una nueva identidad</a></h2>
<p>Correos rediseña su marca y todos sus elementos clave de identificación visual. →
<a href="/00/img/nuevaimg.avi” class="txtLink">Ver vídeo</a></p></div>
¿Notan la cantidad de caracteres, imágenes y código mal utilizado que he ahorrado?
…y en el CSS, creó una regla para que no se tengan que repetir ni usar más clases
indebidamente:
#contenido h2 { color: #ccc; font: 1em Arial, Verdana, sans-serif; border-bottom: 1px solid #ccc; margin: 0 0 0px 0; } #contenido p { font: 1em Arial, Verdana, sans-serif; color: #000; }
Con esta simple regla de CSS y un código de HTML coherente, no deberé escribir más
código de más en el HTML, ni clases, ni usar imágenes para hacer líneas o
“subrayados” en los títulos, tampoco usarán imágenes transparentes para “acomodar”
elementos (uno entre otro o para separarlos), por que con el uso debido de CSS se
puede controlar el posicionamiento de cada elemento que se encuentre en el
documento.
HTML comentado, es igual a más peso en la página
Es común en desarrollo comentar ciertas partes de un código, en programación puede
incluso ahorrar mucho tiempo por que cuando se comenta no se borran cosas, o
simplemente se comentan para probar cosas… pero en HTML, cuando se comenta una
línea, el servidor Web procesa la página, y el código comentado, enviándolo al
ordenador cliente, de modo que el mismo navegador es el que no procesa este código
comentado.
Un error básico es utilizar los comentarios de HTML para comentar largas porciones de
código HTML, los comentarios de HTML están hechos para realizar ayudas, o para
hacer anotaciones.
El problema comienza cuando se comenta 10 líneas de código en HTML éste sigue
apareciendo y siendo procesador por el servidor, debería comentar esto con otro tipo
de lenguaje, de modo que sea procesado directamente en el servidor Web y no en el
navegador.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
74
Ejemplo de una porción de código encontrada en la web de correos:
<!--<tr> <!-- 4--> <!–<td height="24″ valign="bottom"> <a href="/01/02/0102_b.asp” onclick="javascript:pulseExt(’men01′);” class="TitSeccionBold"> Cartas Certificadas</a> </td> </tr> <tr> <td height="6″ valign="top"><img src="/comun/img/lin_g_sep.gif” width="310″ height="1″></td> </tr> <tr> <td class="txtNormal” height="25″ valign="top">Para enviar con total tranquilidad sus comunicaciones especialmente importantes, con entrega bajo firma.</td> </tr> <tr> <td height="5″><img src="/comun/img/pix_fondo.gif” width="1″ height="1″></td> </tr>–> <!– 5–> <!–<tr> <td height="24″ valign="bottom"> <a href="/00/04/0004.asp” class="TitSeccionBold"> Acceso a Internet</a> </td> </tr> <tr> <td height="6″ valign="top"><img src="/comun/img/lin_g_sep.gif” width="310″ height="1″></td> </tr> <tr> <td class="txtNormal” height="25″ valign="top">Acceda a internet mediante línea de alta velocidad. Disponible en más de 35 oficinas distribuidas por todo el territorio.</td> </tr>–> Esto nos ahorra tener que enviarle al ordenador cliente, código que nunca procesará e
utilizará, unos cuantos KB menos de peso en cada página. Esto se logra no utilizando
los comentarios normales de HTML <!-- --> sino utilizando algún lenguaje de scripting
normal como PHP o ASP.
Otra de las cosas que se recomienda es no comentar largas porciones de código, sino
directamente borrarlas o extraerlas a otro documento de repositorio.
Utilizar hojas de estilo en línea o embebidas en los documentos. Un factor importante
en los documentos Web debe ser la separación del contenido de la presentación, de
modo que el HTML sea para contener y el CSS para presentar, por eso, utilizar hojas
de estilos embebidas en el mismo documento no es sano.
En muchas páginas institucionales vemos como embeben el código de las hojas de
estilos en la cabecera, en vez de tener 1 hoja de estilos externa con la información para
la estructura y posicionamiento de los elementos principales, y otra hoja de estilos que
varía de sección en sección, 1 para todas las páginas, con la información mínima, y la
otra es una información única para realizar un posicionamiento de un elemento o algo
que se encuentre en 2 o 3 páginas, aquí estamos dividiendo recursos, y economizando
trabajo. Algo común que vemos en la Web de Correos de España y el diario El País:
<head>
<style>
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
75
.TA
{
scrollbar-3dlight-color:#666666;
scrollbar-arrow-color:#666666;
scrollbar-base-color:#666666;
scrollbar-darkshadow-color:#666666;
scrollbar-face-color:#e2e2e2;
scrollbar-highlight-color:#e2e2e2;
scrollbar-shadow-color:#c0bebe
}
</style>
</head>
Nótese que este error solo hace que un documento de HTML contenga caracteres que
no se puedan cachear de ninguna forma tradicional, de hecho cada vez que el usuario
recurra a esta página, tendrá que descargarse y procesar esta porción de código, que
es poco si, pero cuenten unos 70 documentos, y hagan el cálculo de cuantos KiloBytes
llevan sumando.
En la Web de Correos, se pueden observar cosas como porciones masivas de código
CSS en todos los documentos, no sólo ubicada entre los elementos sino en el medio
del documento mismo, cosa que no está permitido, ni es una práctica muy sana…
Tampoco es sano ver que un tag bold tiene estilos en línea, por ejemplo, observamos
en la página del diario El País:
<div id="lClipping" class="TA" style="overflow: auto; position: absolute; left: 0px; top:
0px; width: 187px; height: 208px; z-index: 5; visibility: hidden;"></div>
Algo bien hecho hubiera sido como esto (aprovechando que utilizan el id “lClipping")
<div id="lClipping" class="TA"></div>
Esto es código de HTML que se procesa una y otra vez, se envía y se descargar cada
vez que alguien requiere la página, ¿No es mejor asignarle una clase especial a ese
tipo de módulos? ¿Y de esta manera se aprovecha todas las clases en múltiples
páginas a tener que cargar en línea siempre la misma cantidad de código? Esto está
mal.
Mapa Web del sitio. ¿Para qué hace falta una página con un millar de enlaces? ¿El
usuario no puede encontrar lo que busca? Entonces eso sucede por 2 factores:
o Página mal organizada o Posee un buscador que no hace nada útil.
Está claro, en el 100% de los casos noto que el mapa del sitio es algo inútil, no ayuda
en nada, el usuario no tiene por qué mirar entre un millar de enlaces, no hace falta,
tampoco le ofrece la solución instantánea.
La solución es un buen buscador, de modo que ni bien entro a un sitio, no tengo que
estar 1 hora inspeccionando una página con 700 enlaces. Nada mejor que un buen
buscador y una buena arquitectura de la información.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
76
Estos son algunos errores comunes en CSS.
Uso innecesario del valor 0
El código siguiente no necesita la unidad especificada si el valor es cero.
padding:0px 0px 5px 0px;
En su lugar puede ser escrito de esta manera:
padding:0 0 5px 0;
De la misma manera es igual para otros estilos. Ej.:
margin:0;
No malgaste espacios agregando unidades tales como px, pt, em, etc, cuando el valor
es cero. La única razón de hacer esto es si necesita cambiar estos valores más tarde.
Si no declarar estas unidades no tiene sentido. Los píxeles cero son iguales que los
puntos cero.
Sin embargo, line-height puede no tener unidad. Por eso es válido lo siguiente:
line-height:1;
De cualquier manera puede utilizar una unidad en concreto como em si lo deseas.
Los colores en formato hexadecimal necesitan una almohadilla
Esto está mal:
color: ea6bc2;
Debe ser:
color: #ea6bc2;
O esto otro:
color: rgb (234.107.194);
Valores duplicados en los códigos de colores.
No escribir el código de esta manera:
color: #ffffff;
background-color:#000000;
border:1px solid #ee66aa;
Los valores duplicados pueden ser omitidos. Escribiendo los códigos de esta manera:
color:#fff;
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
77
background-color:#000;
border:1px solid #e6a;
¡Por supuesto esto no debes hacerlo con códigos como este!
color: #fe69b2;
Evitar repeticiones de código innecesario.
Evita usar varias líneas cuando lo puedes conseguir con una sola. Por ejemplo, al fijar
los bordes, algunas veces se debe hacer por separado pero en casos como el siguiente
no es necesario:
border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;
Podríamos resumirlo en una única línea esta:
border:1px solid #00f;
La duplicación es necesaria con los estilos en cascada.
En los estilos en cascada es aceptable repetir el mismo código para un elemento dos
veces, si significa evitar la repetición mencionada en el punto arriba. Por ejemplo,
digamos que tenemos un elemento donde solamente es diferente el "border" izquierda.
En vez de poner cada "border" escrito usando cuatro líneas, uso sólo dos:
border:1px solid #00f;
border-left:1px solid #f00;
En este caso primero definimos todos los "borders" con el mismo color pero más tarde
para ahorrarnos dos líneas de código redefinimos el "border" izquierda a otro color, de
esta manera hemos ahorrado dos líneas de código.
El ejemplo malgastando espacio quedaría así:
border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #f00;
Obviamente supuestamente este ahorro de carga supone un retraso en la carga de la
página pues estamos definiendo el "border" izquierda dos veces, pero la carga de este
proceso es insignificante.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
78
Los estilos inválidos no hacen nada.
Un ejemplo es suficiente para explicar este error:
padding:auto
Este estilo solo puede ser aplicado a width y height pero no a padding.
Espacio perdido.
Por supuesto es sabio dejar un cierto espacio para mantenerlo legible, aunque
a algunos les encanta condensar todo, no dejando ningún espacio.
Especificar los colores sin usar palabras. Definir los colores usando las palabras que lo definen no es una buena idea
puesto que estaríamos confiando en el navegador para que el interprete que
color y código debe aplicar. Las tonalidades para un mismo nombre de color
cambian mucho de un navegador a otro.
Es una buena práctica especificar siempre el color por su código hexadecimal.
Ej.: utilizar "#fff" en lugar de blanco.
Agrupar estilos idénticos
Es común ver los estilos escritos una y otra vez con el mismo código, aún
cuando el estilo es igual.
Sería conveniente agruparlos y así optimizaríamos espacio:
h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}
También nos hará mucho más fácil la tarea de actualizar el código.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
79
8. LAS INTRANETS DEL FUTURO 8.1. Elementos de la Intranet del Futuro – Modelo 1
Los gráficos que se incluyen son sólo referenciales y sirven para ayudar a conceptualizar los
elementos que conformaran el diseño de las Intranets futuras.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
80
8.2. Elementos de la Intranet del Futuro – Modelo 2
En el Anexo 2 encontrará más información acerca del formato SVG.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
81
8.3. Elementos de la Intranet del Futuro. Modelo 3
Imágenes 3D del Juego de video Evil under sun y [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
82
9. CONCLUSIONES
9.1. Conclusiones del Estudio de Diseño Visual.
9.1.1. Intranets de Administraciones Tributarias y Aduaneras19
Las Cinco Buenas Prácticas más usadas por este rubro de Intranets son:
1. Los Estándares de Accesibilidad.
2. El buen uso del Color en las Interfaces.
3. El buen uso de las fuentes y tipos de letra en el diseño de las páginas.
4. Los Estándares de Usabilidad.
5. La facilidad de la navegación mediante barras de navegación y enlaces
fáciles de identificar y usar.
9.1.2. 10 Mejores Intranets de Gobierno a nivel mundial y las 10 Mejores Intranets a nivel mundial del 200720.
Las 3 Buenas Prácticas más usadas por la Intranets ganadoras en general son:
1. Los Estándares de Usabilidad.
2. El adecuado uso del color.
3. El uso de Hojas de Estilo CSS o Plantillas para mantener el diseño en las
páginas de su Intranet.
9.2. Conclusiones extraídas de las Buenas Prácticas de las Intranets21
9.2.1. Antes de Iniciar la creación de la Intranet
Distinguir Sitios web corporativos de Intranets, para lograrlo deberá elaborar una estrategia general de la Intranet considerando las necesidades específicas de la organización, de los directivos y de los usuarios, así como, las metas que deberá cumplir. Para ello, apóyese en las experiencias de otros organismos y realice una Investigación de Usabilidad.
Cree un nombre a la Intranet que identifique a los trabajadores con su Institución.
19
Revisar Cuadro de Buenas Prácticas en Diseño Visual de las Administraciones Tributarias y Aduaneras en anexo 10.4.1. 20
Revisar los cuadros de Buenas Prácticas en Diseño Visual en los anexos 10.4.2 y 10.4.3. 21
Buenas Prácticas en Intranets descritas en ítem 6. También puede visualizar el cuadro de resumen que se encuentra el anexo 10.5.4
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
83
9.2.2. Durante la creación de la Intranet
9.2.2.1. Diseño Visual
Seguir las pautas establecidas en los estándares internacionales globales como:
W3C, referido a Estándares Web.
ISO 13407, referido a Procesos en el Diseño centrado en el usuario.
IEC 9241-11, referido a la Guía de Usabilidad
IEC 9126, referido a Ingeniería de Software, etc.
Los educacionales en el caso de la interfaces relacionadas con educación y e-learning (SCORM, AICC).
Los conceptos de Arquitectura de la Información y Diseño de Interacción.
Considerar la creación de un Diseño Flexible y Arquitectura para la escalabilidad de la Intranet.
Colocar la opción de Agregar a Favoritos, en cada página, que sea de interés del usuario. Por ello, cada página contará con una URL propia y exclusiva.
Permitir la Personalización, formando Comunidades o Perfiles de Usuario, para evitar el exceso de contenido en la Intranet.
Considerar las Reglas de Composición Fotográfica y optimizar el uso de las imágenes.
Considerar las Reglas de Composición del Arte para los dibujos e Ilustraciones que se requieran en la Intranet.
Considerar los conceptos de Semiótica y Señalética para la creación de iconos.
Tomar en cuenta que cada elemento visual de la página de la Intranet como: menús, botones, iconos, fotos, letras, etc. Tiene consideraciones específicas, mencionadas en este Estudio. Que deben complementarse con conceptos de Comunicación Visual e Identidad Corporativa.
Crear una simple e intuitiva interfaz de usuario y arquitectura.
Añadir enlaces en los elementos que sean necesarios, tomando en cuenta las recomendaciones para el uso de enlaces mencionados en las Buenas Prácticas de este Estudio.
9.2.2.2. Contenido
Identificar al Editor líder y a los Editores de apoyo, capacitarlos y centralizar en ellos la edición del contenido, facilitándoles herramientas que simplifiquen su trabajo.
Seguir las recomendaciones para la organización de contenidos contemplando sus elementos de comunicación.
Muestre las políticas de uso y su confidencialidad de la Intranet.
Establezca una denominación convencional para los archivos descargables.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
84
9.2.2.3. Comunicaciones
Crear una Estrategia de Comunicación en conjunto con el Área de comunicaciones para el lanzamiento de la Intranet y comunique los beneficios de la estandarización.
9.2.3. Después de creada la Intranet
9.2.3.1. Gestión
Mida el ROI de la Intranet.
9.2.3.2. Diseño
Pruebas de Usabilidad para perfeccionar la Intranet.
Atender las notificaciones rápidamente.
Cree un Manual de Estándares Gráfico o Estilos.
9.2.3.3. Contenido
Supervisar la producción de contenido y revisarlos antes de su publicación.
Capacitar al personal para afrontar las posibles emergencias que puedan surgir en la Intranet.
9.3. Conclusiones Específicas extraídas de los Doce Casos de Administraciones Tributarias y Aduaneras.
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
85
9.4. Conclusiones sobre el futuro de las Intranets
El futuro de las Intranets está inevitablemente ligado a cambiar de soporte, actualmente las podemos visualizar en laptops y pcs, algunas interfaces sencillas pueden visualizarse en los celulares. Su futuro es ser omnipresente o persuasive, significaría ser visualizado en nuevos aparatos o artículos de uso cotidiano como: espejos, relojes o hasta en el zapato recordando la parodias de los primeros celulares en la serie El Super Agente 86.
Entre los elementos más resaltantes que conformarán está Intranet Futura se encuentran:
1. La Búsqueda de Información utilizando Inteligencia Artificial unida a la Web Semántica que permitirá la búsqueda de archivos multimedia (audio, animaciones y video) además de la búsqueda de contenido.
2. Visitas virtuales a las sedes de Empresa u Organismo para conferencias, reuniones o charlas para funcionarios que se encuentran en distintos lugares.
3. Uso de aplicativos GPS para localizar a algún funcionario o al transporte de la Institución.
4. Capacitación utilizando herramientas multimedia (audio, animaciones y video). 5. Realización de cursos, tutoriales educativos por medio de la creación de
mundos virtuales de enseñanza parecidos a Second Life. 6. Aplicaciones de áreas internas o por procesos de la Organización. 7. Herramientas de Escritorio como Agenda Institucional y Personal, Reloj
Mundial para conocer la hora de algún país donde se encuentre el funcionario para coordinar una posible reunión o entrevista. Editores de Texto, Hoja de Cálculo, etc. que puede ser visualizada desde la Intranet.
8. La implementación de aplicaciones Killer que animen a los usuarios a usar la nueva intranet.
Se destaca que en el caso del Diseño Visual tendremos un uso masificado de archivos MNG en lugar de los actuales formatos GIF y JPG. Y el formato SVG (Scalable Vector Graphic) para los JPG y GIF estáticos. También se puede masificar en el futuro el uso del 3D para la creación de mundos virtuales.
9.5. Conclusiones sobre el Diseño Visual de la Intranet de SUNAT
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
86
9.6. Conclusiones Finales
Siga las Buenas Prácticas mencionadas en este Estudio y verifique que durante y después de creada la Intranet, no se cometan los errores comunes mencionados en este Estudio.
La Usabilidad es estratégica en una empresa u organismo. Es aún muy común escuchar comentarios y preguntas como: “¿Qué es más importante, la usabilidad o el diseño?”, o “Este cliente no busca usabilidad, sino diseño”. Ambos comentarios demuestran una falta de claridad a la hora de interpretar y entender la usabilidad. Independientemente de estilo gráfico que se desee conseguir en una web, la usabilidad es un elemento crítico a tener en cuenta desde el comienzo de la primera idea, desde que se empieza a pensar en la creación de una web, y durante todo el proceso de diseño y desarrollo. La usabilidad no debe considerarse como un control de calidad. Una Intranet puede tener una buena usabilidad y ser
de pobre calidad (debido a otros factores que influencian la calidad, como puede ser, por ejemplo, la calidad del contenido). Sin embargo, no es posible considerar a una Intranet de alta calidad si es pobre en Usabilidad. En el libro “La Obsesión por el Diseño”, de Tom Peters. Entre muchas otras
cosas, Peters explica que “para la mayor parte de las personas, “diseño” significa
apariencia, cuando el diseño es el alma fundamental de una creación humana.”
Peters habla del diseño no sólo como la parte gráfica o aspecto (o “look & feel”) de
un producto (incluida una web), sino como la definición funcional de dicho producto.
Es decir, el diseño del producto es estratégicamente clave para la empresa que lo
produce.
No se puede elegir entre diseño o usabilidad, ya que cualquier Intranet,
independientemente del tipo de diseño gráfico, necesita de una capacidad para ser
usado por un usuario final específico ante un contexto específico.
Las Intranets en un futuro próximo se convertirán en el escritorio de trabajo de los empleados de una institución o empresa, poco a poco dejaremos de lado los software de escritorio u otros, para encontrar sistemas que están integrados a la Intranet, que se activan y funcionan desde la Intranet, efectuando desde un documento hasta presentaciones, grabaciones de video y voz, gestión de proyectos y muchísimas más funciones específicas de los procesos y servicios de cada Institución. La personalización será un requisito indispensable con opciones de configuración de temas en el diseño de la página así como el grado de importancia que tendrá cada opción en la interfaz de su Intranet. Trasladaremos nuestras oficinas a nuestro hogar y realizaremos reuniones virtuales. Podremos trabajar cómodamente en cualquier parte del mundo, sin necesidad de estar presente en el local de la empresa.
Trabajar la Intranet se convertirá en algo muy confortable, ya que mediante instrucciones por voz podremos indicarle a la computadora en que aplicativo de la Intranet queremos trabajar, a que opción ingresar, además de dictarle los datos para el llenado de un formulario. Conforme los avances se van desarrollando e implementando cada persona podrá tener un chip insertado en alguna parte del cuerpo que le permita identificarse, transmitiendo sus pensamientos e instrucciones a la computadora, a un celular inteligente o a cualquier aparato, las investigaciones continúan realizándose en el campo de la Inteligencia Artificial.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
87
10. ANEXOS 10.1. CUADRO COMPARATIVO N° 1 DE LA APLICACIÓN DE BUENAS
PRÁCTICAS
10.1.1. Leyenda
INTRANETS TRIBUTARIAS
I1= Servicio de Impuestos Nacionales – Bolivia
I2= Secretaria de Ingresos Federales del Brasil
I3= Servicios de Impuestos Internos – Chile
I4= Departamento de Aduanas e Impuestos de Hong Kong
I5= Servicio de Rentas Internas – Ecuador
I6= Agencia Estatal de Administración Tributaria – España
I7= Superintendencia de Administración Tributaria – Guatemala
I8= Servicio de Aduana y la Oficina de Tarificación, Ministerio de Finanzas – Japón
I9= Servicio de Administración Tributaria – México
I10= Dirección General de Ingresos del Ministerio de Economía y Finanzas – Panamá
I11= Superintendencia de Administración Tributaria – Perú
I12= Dirección General de Impuestos – DGCI - Portugal
LAS 10 MEJORES INTRANETS GUBERNAMENTALES
I1= Defense Finance and Accounting Services – Estados Unidos
I2= Department for Transport – Reino Unido
I3= Department for Victorian Communities – Australia
I4= Department of Veterans Affairs Mid- Atlantic Health Care Network – Estados Unidos
I5= Federal Reserve Bank of Richmond – Estados Unidos
I6= Government Offices of Sweden – Suecia
I7= London Undergroup – Reino Unido
I8= National Research Council of Canada – Industrial Research Assistance Program
I9= Senate Republican Conference – Estados Unidos
I10= Workplace Safety and Insurance Board of Ontario - Canada
LAS 10 MEJORES INTRANETS A NIVEL MUNDIAL
I1= American Electric Power – Estados Unidos
I2= Comcast – Estados Unidos
I3= DaimlerChvsler AG – Alemania
I4= The Dow Chemical Company – Estados Unidos
I5= Infosys Technologies Limited – India
I6= JPMorgan Chase & Co – Estados Unidos
I7= Microsoft Corporation – Estados Unidos
I8= National Geographic Society – Estados Unidos
I9= The Royal Society for the Protection of Birds – Reino Unido
I10= Volvo Group - Suecia
PUNTUACIÓN
0 = Su Intranet NO realiza esta Buena Práctica
1 = Su Intranet SI realiza esta Buena Práctica
-- = Este dato no aparece en el Reporte de Norman Nielsen Group
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
88
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
10.1.2. Conclusiones Generales de la autora extraídas del Cuadro
Comparativo N° 1 de las Buenas Prácticas sobre los 32 casos de Intranets expuestos en este Estudio.
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
10.2. VENTAJAS DEL USO DEL FORMATO SVG Y SUS POSIBILIDADES
Tiene todas las ventajas asociadas a un formato vectorial (las que comentamos en las páginas
de diseño gráfico): es escalable, compacto, con formas siempre editable a través de curvas
Bézier, con contornos suavizados, transparencias, y capaz de incluir, si es preciso, bitmaps.
El tamaño de los SVG es muy compacto.
El texto que incluyen es editable: admite las fuentes escalables más comunes, como TrueType
o Type 1. Esto supone una diferencia enorme con los actuales GIF o JPG: el texto que
contienen se puede editar, seleccionar, ser indexado por los buscadores.
La calidad de color es excelente; el color del gráfico se puede calibrar con los sistemas
estándar de gestión de color.
El fichero SVG no es binario: se trata de un fichero de texto normal y corriente. Esto significa
que se puede editar incluso en el Bloc de notas, y sus contenidos se pueden indexar, buscar.
Es compatible con los estándares actuales de la web y --lo que es más importante-- con los
futuros.
Soporte de hojas de estilo CSS. Esto significa que con las hojas de estilo podemos modificar,
de la forma más poderosa y fácil, ¡incluso los gráficos de las páginas web! El control y poder
creativo que esto supone es insuperable.
Será posible crear páginas con una riqueza tipográfica y de layout sin precedentes, sin
sacrificar la accesibilidad del contenido escrito.
Puede incluir código (scripts) que modifican el gráfico dinámicamente en función de las
necesidades.
Al ser XML, es un formato extensible: los fabricantes podrán adoptarlo como formato nativo de
sus aplicaciones, añadiendo las características específicas que deseen, pero siempre
mantendrá la compatibilidad básica y universal con toda aplicación que reconozca el formato.
Admite efectos como sonido, efectos visuales al hacer clic o mover el ratón, etiquetas
informativas...
Puede generarse dinámicamente en un servidor web como respuesta a instrucciones de Java,
JavaScript, Perl o XML. Por ejemplo, pueden crearse al momento gráficos de excelente calidad
con las cotizaciones de bolsa en tiempo real; un reloj analógico, con minutos y segundos,
requiere sólo 2K de código.
SVG puede llegar a simplificar
extraordinariamente el
"workflow" para la web. En
una aplicación única se podrá
generar casi todo el contenido
de las páginas, y convertirse
en un formato universal: todos
los programas podrán abrir
todo tipo de ficheros. Los
gráficos SVG no serán, como
hasta ahora, una versión
mutilada de un gráfico que ha
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
92
pasado por varias aplicaciones. Se ahorraran conversiones, pasos de un programa a otro,
tareas de optimizar, cambiar de tamaño, etc.
Los gráficos SVG, como en este ejemplo de un mapa de Viena, pueden generarse
dinámicamente en un servidor, a partir de los datos solicitados por el visitante (ver la dirección
del ejemplo más abajo.)
A diferencia de otros formatos gráficos, el contenido de un archivo SVG es texto normal. Esto
significa que puede editarse incluso con un bloc de notas. Aquí tenemos un ejemplo del código
de un svg. Está escrito en xml; los diferentes componentes del gráfico se identifican en cada
carpeta (por ejemplo, rect, polygon...) y los parámetros figuran al lado.
Este formato parece el sueño de todos los diseñadores hecho realidad. Ciertamente, las
posibilidades están ahí. Pero aún hay un largo camino a recorrer. Las soluciones --o los
apaños-- actuales (html + flash) tienen vigencia asegurada durante unos años. De momento,
Flash ofrece mucha más interactividad, una implantación creciente y facilidad de uso. Casi el
80% de los navegadores pueden ver películas flash. Así, ¿Se trata de una batalla perdida antes
de comenzar? ¿Sucederá lo mismo que con el formato PNG? Pese a sus excelentes
cualidades, PNG no ha llegado a imponerse a los GIF o JPG, que son la norma en los gráficos
para la web. De hecho, técnicamente es superior en algunos aspectos, pero sigue con las
limitaciones de un formato bitmap, cosa que ha dificultado que llegara a ser utilizado de forma
habitual.
La situación con los SVG es algo diferente, porque no pretende sustituir un formato que
funciona perfectamente como el de Flash, sino abrir todo un nuevo mundo de posibilidades en
el diseño web. Ver algunos ejemplos de lo que aportará SVG a la web nos abre los ojos a ideas
sorprendentes.
10.3. EVOLUCIÓN DE LA WEB
10.4. Estudio del Diseño Visual
10.4.1. Intranets de Administraciones Tributarias y Aduaneras
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
94
10.4.2. Las Diez mejores Intranets de Gobierno a nivel mundial
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
95
10.4.3. Las Diez Mejores Intranets a nivel mundial del 2007
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
96
10.5. Buenas Prácticas en Intranets
10.5.1. Administraciones Tributarias y Aduaneras
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
97
10.5.2. Las Diez Mejores Intranets de Gobierno
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
98
10.5.3. Las Diez Mejores Intranet a nivel mundial del 2007
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora: [email protected]
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
99
10.5.4. Buenas Prácticas en el Diseño Visual extraídas de otras fuentes.
1. Otros estándares de Accesibilidad como: • Etiquetas Alt en imágenes, animaciones y
mapas de img. • Ofrecer una descripción o transcripción del
audio y video. • Atributo longdesc.
2. Algunos estándares de Usabilidad como:
• Lectura jerárquica de arriba hacia debajo y de izquierda a derecha.
• Contraste de letras y colores de fondo adecuado.
• Orden lógico de tabulación. • Claros mensajes de error. • Utilización de tablas. • Uso efectivo de botones.
3. Aplicar Teoría del Color y lograr simplicidad,
consistencia y claridad en su uso.
4. Considerar las Reglas de Composición Fotográfica como: Centro de Interés, rellenar el
encuadre, líneas, flujo, dirección, repetición, etc.
5. Nombrar a los enlaces de manera descriptiva y usarlo sólo donde sea necesario.
6. Acceder a las páginas con un máximo de 3 clics.
7. Considerar las Reglas Composición del Arte para los dibujos e
Ilustraciones. 8. Considerar los conceptos de Semiótica y Señalética para
creación de iconos.
9. Diseño Flexible, Interfaz simple e intuitiva que permita la escalabilidad de la Intranet.
10. Utilizar conceptos de Comunicación Visual e Identidad Corporativa.
11. Optimizar el uso de imágenes, audio y videos.
12. Seguir las pautas establecidas en los estándares
internacionales globales como:
W3C, referido a Estándares Web.
ISO 13407, referido a Procesos en el Diseño centrados en el usuario.
IEC 9241-11, referido a la Guía de Usabilidad. Los conceptos de Arquitectura de la Información y Diseño de Interacción.
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES
TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
100
10.6. Errores comunes en el Diseño Visual de Intranets
1. Pobre Diseño de páginas: Muchos enlaces,
demasiados niveles (más de 5 clics), sobrecarga de información.
2. Mal empleo del color: Muchos colores, demasiados saturados.
3. Errores en las fotografías: Reflejos del Flash, ojos rojos, líneas torcidas y desniveladas, efecto de viñeteo.
4. Errores en la navegación:
• Desaparición de menús en pág. Interiores. • Preferir texto a imágenes en el menú. • Uso de menús desplegables o en cascada • Que no funcione la opción Atrás del
navegador. • No cambiar el color de los enlaces al visitar
la pág. • Enlaces ocultos, zonas sin salida, no incluir
un enlace al inicio de la Intranet. • No limitar el uso de marcos o frames.
5. Diseñar páginas muy largas, con gráficos y animaciones pesadas.
6. Colocar gráficos sólo para decorar la página y no para mostrar un contenido real.
7. Mal uso de la Tipografía.
• Tamaños de letra ilegibles. • Usar distintos tipos de fuente y diferentes a los
convencionales. • Texto parpadeante, deslizante, no escalable.
8. Errores en animaciones. • Colocar animaciones innecesarias. • Crear toda la Intranet en flash.
9. Errores en los iconos.
• Poca diferenciación entre iconos. • Demasiados elementos en un mismo icono o elementos
innecesarios. • Carencia de una misma línea de diseño en un set de
iconos. • Perspectivas y sombras innecesarias. • Metáforas demasiado originales que no se entienden. • No tomar en cuenta las características propias de cada
país. • Imágenes de los elementos de la interfaz dentro de los
iconos. • Texto dentro de los iconos.
10. Crear una sobrecarga visual.
10.7. DOCE CASOS DE INTRANETS DE ADMINISTRACIONES TRIBUTARIAS Y ADUANERAS A NIVEL MUNDIAL
10.7.1. Participantes
BOLIVIA Organismo: Servicio de Impuestos Nacionales
BRASIL Organismo: Secretaria de Ingresos Federales del Brasil
CHILE Organismo: Servicios de Impuestos Internos
CHINA– HONG KONG
Organismo: Departamento de Aduanas e Impuestos de Hong Kong
ECUADOR Organismo: Servicio de Rentas Internas
ESPAÑA Organismo: Agencia Estatal de Administración Tributaria
GUATEMALA Organismo: Superintendencia de Administración Tributaria
JAPÓN Organismo: Servicio de Aduana y la Oficina de Tarificación, Ministerio de Finanzas
MÉXICO Organismo: Servicio de Administración Tributaria
NICARAGUA Organismo: Dirección General de Ingresos (DGI)
PÁNAMA Organismo: Dirección General de Ingresos del Ministerio de Economía y Finanzas
PÉRU Organismo: Superintendencia de Administración Tributaria
PORTUGAL Organismo: Dirección General de Impuestos - DGCI
10.7.2. Grado de satisfacción de los usuarios de la intranet
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
102
10.7.3. Servicios adicionales que posee su Intranet
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
103
10.7.4. Arquitectura, Plataforma y Soporte
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
104
10.7.5. Sobre el servicio
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
105
10.7.6. Buenas Prácticas a nivel de Organización
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
106
10.8. LAS DIEZ MEJORES INTRANETS DE GOBIERNO A NIVEL MUNDIAL
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
107
10.9. LAS DIEZ MEJORES INTRANETS A NIVEL MUNDIAL DEL 2007
VISIBLE SÓLO EN EL ESTUDIO ORIGINAL
Sí desea obtener mayor información, escribir al e-mail de la Consultora:
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
108
11. BIBLIOGRAFÍA
Ponencia: Administración Pública del Futuro y Bienestar Social Autor: Francisco José Climent Fernández Evento: II Congreso Online del Observatorio para la CiberSociedad Web: http://www.cibersociedad.net/congres2004/index_es.html Año: 2004 Documento: Entorno Colaborativo de Trabajo: La Intranet 2.0 Autores: A. Carmona Ramos, M. Bernal, J. Cerero, J. García León, V. González Andrés, L. Iváñez Jiménez, R. Laó, G. López Ibáñez, E. Lora, C. Méndez Martínez, E. Puerto, M. Ruiz Ramos, J. Trancoso. Organización: Junta de Andalucía – Consejería de Salud Año: 2007 Artículo: Beneficios de usar una Intranet Autor: Gustavo Gretter Organización: InnovaAge Web: http://www.innovaage.com/innovanet/macros/TextContent.jsp?contentid=77&version=1&channelid=1 Artículo: FAQ sobre Intranets Autor: Juan Fernando Zuluaga C. Organización: Intranet Total Web: http://www.intranettotal.com/referencia/faq.htm Libro: Arquitectura de Información: Introducción al Proceso de Desarrollo en el Diseño de Interfaces de Usuario (Draft). Autor: Juan Carlos Pantoja Ibañez. Editorial: Universidad de Concepción. Chile Año: 2004 Libro: Planeta Web 2.0 Autor: Cristóbal Cobo Romaní y Hugo Pardo Kuklinski Editorial: Grupo de Investigación en Interacciones digitales (GRID) de la Universidad de Vic y a la Facultad Latinoamericana de Ciencias Sociales – FLACSO México. Año: 2007 Artículo: Antecedentes Históricos de las Intranets Autor: Patricio Pastor H. Organización: Universidad de Chile. Sistema de Servicios de Información y Bibliotecas (SISIB) Web: http://www.innovaage.com/innovanet/macros/TextContent.jsp?contentid=76&version=1&channelid=1 Año: 2007 Artículo: Las Intranets en el siglo XXI Autor: Pedro Román Graván y Purificación Toledo Morales Organización: Universidad Politécnica Salesiana de Ecuador Web: http://www.sol.edu/portal/modules.php?name=News&file=article&sid=64 Artículo: Intranets: caos corporativo vs. Usabilidad Autor: Juan Manuel Carraro Organización: C Comunicación. Argentina Web: http://www.ccomunicacion.com.ar/site/Newsletters/newsletterv31_junio2005.htm
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
109
Año: 2005 Reporte: Ten Best Goverment Intranets Autores: Kara Pernice, Mathew Schwartz, y Jakob Nielsen Organización: Nielsen Norman Group Año: 2003 Reporte: Intranet Design Annual 2007 Autores: Kara Pernice, Mathew Schwartz, y Jakob Nielsen Organización: Nielsen Norman Group Año: 2007 Reporte: Corporate Intranets Best Practices Report Autores: Shiv Singh, Ray Velez y the Enterprise Solutions Practice at Avenue A| Razorfish. Organización: Avenue A| Razorfish. Año: 2006 Guía: Designing and Managing an Intranet – Better Practice Checklist Autores: Information Management Office - Australian Goverment Organización: Australian Goverment Año: 2004 Artículo: Standards for Good Intranet and Extranet Design Autor: Dave Pollard Organización: Blog´s Dave Pollard Web: http://blogs.salon.com/0002007/2007/01/04.html#a1742 Año: 2007 Guía: Becoming a Citizen – Centered Government Through Best Practices in Web Managment Autor: The Performance Institute Organización: The Performance Institute Año: 2005 Guía: Disposiciones Generales para Sitios Web Institucionales de la UNAM Autor: Consejo Asesor de Computo Organización: Universidad Nacional Autónoma de México Año: 2007 Artículo: La empresa del futuro Autor: Sr. Galdos Organización: Redel al Día Web: http://www.redelaldia.org/ver.php3?id_article=33&var_recherche=la+empresa+del+futuro Año: 2005 Artículo: Etapas de la creación de la página web Autor: Alicia García de León Organización: Universidad de la República. Montevideo – Uruguay. Año: 2002 Guía: Manual de Estilo y Diseño de sitios y páginas web Autor: Departamento de Comunicaciones Organización: Instituto Nacional de Tecnología Agropecuaria - Argentina Año: 2002 Libro: Website Management Autores: Oscar García Lázaro y Graciela Pineda González Organización: Instituto de Comercio Electrónico y Marketing Directo Año: 2002
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
110
Artículo: Diseño accesible de páginas web. Autor: Carlos Egea García. Organización: Grupo de expertos del seminario de iniciativas sobre Discapacidad y Accesibilidad en la red. Artículo: El 75 % de las grandes empresas tienen descuidada su Intranet. Autor: King eClient Organización: King eClient Web: http://www.king-eclient.com/?q=es/sobre-King-eClient/historia Artículo: Diez Errores en el Diseño Web y Redacción Comercial que debes evitar a toda costa Autor: Daniel Levy Organización: Emarketing Latino Web: http://www.emarketinglatino.com/articulos/errores-de-diseno-web.html Año: 2006 Artículo: Errores comunes en el diseño de sitios web Autor: Eduardo Manchón Organización: Alzado.org Web: http://www.alzado.org/articulo.php?id_art=49 Año: 2003 Artículo: Los 10 mayores errores del diseño web Autor: Jakob Nielsen Organización: WebTaller Web: http://www.webtaller.com/maletin/articulos/los_10_mayores_errores_del_diseno_web.php Artículo: 10 Mistakes in Icon Design Autor: Denis Kurtunov Organización: TurboMilk Web: http://turbomilk.com/truestories/cookbook/criticism/10-mistakes-in-icon-design/ Año: 2008 Artículo: Errores y soluciones en diseño web: las páginas de entrada y el botón atrás Autor: NERV Organización: NERV Web: http://www.nerv.es/blog/errores-y-soluciones-en-diseno-web-las-paginas-de-entrada-y-el-boton-atras/ Año: 2008 Artículo: Errores y soluciones en diseño web: las páginas de entrada y el botón atrás Autor: NERV Organización: NERV Web: http://www.nerv.es/blog/errores-y-soluciones-en-diseno-web-las-paginas-de-entrada-y-el-boton-atras/ Año: 2008 Artículo: 10 Usability Nightmares You Should Be Aware Of Autor: Smashing Magazine Organización: Smashing Magazine Web: http://www.smashingmagazine.com/2007/09/27/10-usability-nightmares-you-should-be-aware-of/ Año: 2007 Artículo: The Ten Most Violated Homepage Design Guidelines Autor: Jacob Nielsen Organización: USE IT
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
111
Web: http://www.useit.com/alertbox/20031110.html Año: 2003 Artículo: 25 errores comunes en los desarrollos web Autor: WebTaller Organización: WebTaller Web: http://www.webtaller.com/maletin/articulos/25_errores_comunes_en_los_desarrollos_web.php Artículo: 16 errores a evitar en el desarrollo web Autor: TXEN Organización: TXEN Web: http://txen.es/2007/05/25/ciencia/informatica/16-errores-a-evitar-en-el-desarrollo-web/ Año: 2007 Artículo: Lista para comprobar si un sitio web es usable Autor: Frank Tarifa Mengibar Organización: Blog Accesibilidad, Usabilidad y Estándares Web Web: http://accesibilidadweb.blogspot.com/2008/01/lista-para-comprobar-si-un-sitio-web-es.html Año: 2008 Artículo: Siete Errores de Accesiblidad Autor: Christian Heilmann Organización: Digital Web Magazine Web: http://usalo.es/131/siete-errores-de-accesibilidad/ Año: 2006 Artículo: Técnicas y Herramientas para Usar Color en el Diseño de la Interfaz de una Computadora Autor: Peggy Wright, Diane Mosser-Wooley, y Bruce Wooley Organización: Association for Computing Machinery Web: http://www.acm.org/crossroads/espanol/xrds3-3/color.html Año: 1999 Artículo: Las 13 Reglas de Composición Fotográfica Fundamentales que Deberías Conocer Autor: DZOOM Organización: Blog DZOOM Web: http://www.dzoom.org.es/noticia-1479.html Año: 2006 Artículo: 8 Fallos Comunes que pueden Estropear tus Fotos Autor: DZOOM Organización: Blog DZOOM Web: http://www.dzoom.org.es/noticia-1616.html Año: 2007 Artículo: Empleo del color Autor: Luis Villa Organización: Alzado.org Web: http://www.dzoom.org.es/noticia-1616.html Año: 2003 Artículo: 10 errores comunes en los css Autor: Tu Función Organización: Tu Función Web: http://www.tufuncion.com/errores-css Año: 2006
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
112
Artículo: Recomendaciones de Usabilidad para el uso efectivo de botones en desarrollos Web Autor: Daniel P. Uriol Organización: Web Taller Web: http://www.webtaller.com/maletin/articulos/recomendaciones-usabilidad-uso-efectivo-botones-desarrollos-web-3.php Libro: Comunicación Visual y Tecnología de Gráficos en computadora. Autor: Juan Carlos Asinsten Organización: Educar – Ministerio de Educación, Ciencia y Tecnología de Argentina Artículo: Los próximos 2 años. Autor: Dan Tynan Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Marzo 2008. Web: http://www.pcworld.com.pe Artículo: Conexiones a muy alta velocidad. ¿Es VSL una realidad? Autor: Arantxa Herraz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Febrero 2008 Web: http://www.pcworld.com.pe Artículo: Principios Usabilidad: La regla de los tres clicks Autor: José Márquez Organización: Blog Usándolo.com Web: http://www.usandolo.com/principios-de-usabilidad-la-regla-de-los-3-clicks/ Año: 2007 Artículo: Más opciones con los teléfonos móviles del futuro Autor: Glenn Fleishman Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Marzo 2008. Web: http://www.pcworld.com.pe Artículo: Negocios en Second Life: ¿realidad o ficción? Autor: Arantxa Herranz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Diciembre 2007. Web: http://www.pcworld.com.pe Artículo: Diálogos entre hombre y máquina Autor: Arantxa Herranz Revista: PC World Editorial: Empresa Editora El Comercio S.A. Edición: Diciembre 2007. Web: http://www.pcworld.com.pe Artículo: Interfaz De Usuario: Una Mirada Al Futuro Con Jeff Han – Video
Autor: Robin Good
Organización: Blog Robin Good
Año: Diciembre 2006.
Web: http://www.masternewmedia.org/es/2006/08/21/interfaz_de_usuario_una_mirada.htm
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
113
Artículo: Usabilidad Estratégica
Autor: Alfonso de la Nuez
Organización: Xperience Consulting
Año: 2002
URL: http://www.xperienceconsulting.com/imagenesup/Usabilidad%20estrategica.pdf
Artículo: The visual design of Web 2.0
Autor: Píxel Acress
Organización: Píxel Acres
Año: 2006
Web: http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20/
Artículo: Web 2.0 Desing Style Guide
Autor: Web Design for Scratch
Organización: Web Design for Scratch
Web: http://webdesignfromscratch.com/web-2.0-design-style-guide.cfm
ESTUDIO DE MEJORES PRACTICAS Y TENDENCIAS FUTURAS EN EL DISEÑO VISUAL
DE INTRANETS INSTITUCIONALES DE ORGANIZACIONES TRIBUTARIAS Y ADUANERAS
2008 © Carmen Elizabeth Vásquez Dextre
Consultoría CIAT - BID
114
12. SOBRE LA AUTORA
CARMEN ELIZABETH VÁSQUEZ DEXTRE
Ingeniera de Sistemas y Diseñadora Publicitaria con más de una década de experiencia.
Actualmente se desempeña como consultora y es especialista en diseño orientado a Internet.
Posee estudios de Postgrado, como un Diplomado en Marketing realizado en la Universidad
Ricardo Palma, un Diplomado en Gestión de Pequeñas Empresas en la Universidad San
Ignacio de Loyola, ambos en Lima – Perú, una Especialización en Video y Tecnologías On Line
y Off Line realizado en el Media Centre d'Art i Disseny de ESDI (Barcelona - España), entre
otros.
Ha trabajado en más de 100 proyectos para Internet que incluyen sitios web, e-commerce, e-
marketing, e-publicity, cds, entre otras piezas gráficas y multimedia para empresas de
comunicaciones como: Grupo Panamericana de Radio S.A., Empresa Editora El Comercio S.A.
y Grupo RRP S.A. Además de trabajar en proyectos para empresas privadas nacionales y
extranjeras, así como, gubernamentales: Servicio de Administración Tributaria – SAT y este
estudio desarrollado para la Superintendencia de Administración Tributaria – SUNAT a través
del Centro Interamericano de Administraciones Tributarias – CIAT.
Página web: http://www.carmenelizabeth.com
e-mail: [email protected]
Celular: (51) 99347-5876
Top Related