Web 2

88 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
88
En SlideShare
0
De insertados
0
Número de insertados
1
Acciones
Compartido
0
Descargas
0
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Web 2

  1. 1. WEB 2.0 Y ELDISEÑO WEB
  2. 2.  Cuenta la historia1, en nuestro caso, la Wikipedia, que la primera web fue publicada en el año 1991 por Tim Bernérs-Lee. El padre de la World Wide Web elaboró un documento informático que rompía con lo anterior porque contenía hipervínculos, es decir, ofrecía posibilidad de ir a otro texto al pulsar sobre una palabra. Trece años después, en el año 2004, el descubrimiento de Berners -Lee se reinventó, y no porque cambiara de un día para otro, sino porque, como suele ocurrir en el mundo de Internet, alguien le puso un nuevo nombre: Web 2.02.
  3. 3. DISEÑO Y WEB 2.0 La llegada de la Web 2.0 ha supuesto una revolución en el diseño, tanto en lo que se refiere a la concepción artística como en las interfaces. El usuario adquiere un nuevo papel dentro del soporte, ya que deja de ser un “escaneador” de contenidos para ser el que elige, el que participa e incluso el que crea esos contenidos. Desde el punto de vista visual este nuevo modo de hacer webs ha supuesto una estandarización. Mientras en la Web 1.0 los diseñadores realizaban páginas sin apenas base previa, ya que existían pocas referencias de diseño digital, la Web 2.0 ha supuesto el nacimiento de los estilos.
  4. 4. El nacimiento de estos estilos viene derivado al mismo tiempo de lacreación de nuevos perfiles profesionales: diseñador gráfico web. Laspáginas 1.0 fueron dibujadas por diseñadores que provenían del mundode los carteles, prensa y papelería, sin embargo las 2.0 han sidopensadas por creadores especializados en diseño de webs.Las páginas han evolucionado, pero los usuarios más. Cada día son másexigentes a la hora de elegir el tiempo que pasan en cada site.Gracias a esta demanda el diseño2.0 se ha visto obligado a incluir como disciplina no sólo la elecciónde formas y colores, sino también a pensar en el individuo que va ainteraccionar. Así nace la Usabilidad, un término que también surgiócuando alguien le puso nombre, en concreto fue Jacob Nielsen.
  5. 5. ESTILO 2.0 La Web 2.0 ha supuesto la creación de una serie de clichés de diseño, de elementos comunes, que configuran un estilo propio, hasta el punto de que a la hora de abordar el diseño de una página se habla del grado de aplicación del arquetipo 2.0 que debe tener. Aunque existen unas características concretas, que abordaremos a continuación, podemos definir el diseño 2.0 como una conjunción de estilos cuya máxima es la sutileza y la combinación de elementos dispares. Grandes masas con volumen, utilizando técnicas de 3D, a la vez que figuras planas; pequeños detalles de luz o degradados delicados, con grandes tipografías. Siguiendo el ar tículo “How to destroy the Web 2.0 look”3, de Elliot Jay Stocks, podemos definir las siguientes características:
  6. 6. 1- Uso de colores vibrantes y contrastados: además de por criteriospuramente estéticos, la Web 2.0 se caracteriza por el uso colorescon mucho contrasteque facilitan la jerarquización de lainformación y, por lo tanto, la lectura. Colores contrastados pero, almismo tiempo, en menor número.En ninguna web se suelen emplear más de dos colores, uno deellos habitualmente oscuro como el negro o gris, junto a otro másvivo como el verde o el azul y, aumentando la variedadcromática, diferentes tramas de estos dos colores.Como si se tratara de una identidad corporativa tradicional, losdiseñadores seleccionan los colores y los aplican a todos loselementos de la web: iconos, menús, efectos de los enlaces, etc.
  7. 7. 2- Badges: se trata de una serie de botones con forma de chapas oplacas.Consiste en una estrella con bordes redondeados y que habitualmentese utilizan para atraer la atención sobre un precio, una promoción o “ungran mensaje de Beta”4, es decir, indica que se trata de una versión nodefinitiva de la web.
  8. 8. 3- Brillos, destellos y reflejos: tanto loslogotipos como las barras de menú y losdistintos elementos de las composicionescuentan con destellos de luz y pequeñaszonas sobreexpuestas, que aportan volumena los diseños. Al mismo tiempo, las webs sellenan de objetos con un reflejo de él mismosobre su base.
  9. 9. 4.Bordes redondeados: la llegada dela Web 2.0 ha supuesto el fin de lasesquinas, dando paso a un nuevoarquetipo en el que todos los bordesson redondeados. Bien sea a travésde los programas de diseño o através de las hojas de estilo CSS;incluso han surgido una grancantidad de aplicaciones online queredondean los diseños por nosotros.
  10. 10. 5- Degradados: sin duda es una delas técnicas visuales que más hancalado entre dos diseñadores deWeb 2.0. Más pronunciados o mássutiles, los gradientes de color sonempleados desde los fondos de laspáginas hasta los favicones, lospequeños iconos que se muestranjunto a la dirección web en elnavegador de Internet.4 What
  11. 11. 6- Líneas diagonales: se empleanespecialmente en los fondos de laspáginas y en los de los titulares, comomotivos decorativos que se repiten. Estospatrones rayados se componenhabitualmente de un color y una tramade este, es decir, una versión más oscurao más clara de la misma. El contrastesiempre es leve para no dificultar lalectura ni centrar la atención sobreelementos decorativos
  12. 12. 7- Desenfoques: se hacenespecialmente patentes en lassombras. En lugar de ser sombrasduras, los diseñadores utilizanleves desenfoques.
  13. 13. 8- Logotipos reflejados: durante un tiempose convirtieron prácticamente en unestándar los logotipos reflejados, de formaque según va separándose el dibujo delreflejo va desenfocándose como si se tratarade papel mojado.
  14. 14.  1 . S i m p l i ci d a d : “ e n i g u a l d a d d e c o n d i c i o n e s l a s o l u c i ó n m á s s e n c i l l a e s p r o b a b l e me n te l a c o r r e c t a ” 6 . E s te p r i n c i p i o , c o n o c i d o c o m o e l d e l a N av a j a d e O c c a m , s e h a c o nv e r t i d o e n l a b a s e d e l d i s e ñ o . B u s c a r l a o p c i ó n q u e h a g a l a n av e g a c i ó n m á s s e n c i l l a y q u e ex i j a n m e n o s e s f u e r z o a l o s u s u a r i o s , ev i t a n d o l a s i n te r fe r e nc i a s d e e l e m e n to s s u p e r fl uo s y o to r g a n d o u n a m ayo r importancia a aquellos en los que queremos que fijen su a te n c i ó n . E s t a s i m p l ic i d a d h a te n i d o c o m o c o n s e c ue n c i a t a m b i é n q u e e l c o l o r b l a n c o a d q u i e r a u n m ayo r p r o t a g o ni s m o : a n a d i e l e a s u s t a ya v e r u n a p á g i n a c o n f o n d o b l a n c o ( G o o g l e e s b l a n c o ) y, e n g e n e r a l , h a p a s a d o d e p r o p o rc i o n a r s e n s a c i ó n d e w e b p o c o trabajada a otra de web clara y ordenada. 2 . D i s e ñ o c e n t r a d o : m i e n t r a s e n l a w e b 1 . 0 to d o e l c o n te n i d o s e alineaba a la izquierda, las páginas 2.0 siempre están c e n t r a d a s , m e j o r a n d o l a v i s u a l i z a c i ó n d e l o s c o n te n i d o s e n c u a l q ui e r t i p o d e r e s o l uci ó n d e e s c r i to r i o . 3 . M e n o s c o l um n a s : a n te s l a p á g i n a s s e e s t r u c t ur a b a n e n u n m ayo r n ú m e r o d e c o l um n a s , i m i t a n d o t a l v e z e l e s t i l o d e l o s p e r i ó d ic o s ; e l d i s e ñ o a c t u a l t i e n d e h a c i a d o s , e n e l c a s o d e l o s b l o g s , y t r e s e n e l c a s o d e l a s p á g i n a s c o n u n m ayo r v o l u m e n d e c o n te n i d o .
  15. 15. 4. Separar la navegación: aunque siempre fueron distintas la zona superiory la inferior, ahora se marca más visualmente. Al mismo tiempo, cada áreaestá claramente definida para un tipo de navegación o de interacción y unaserie de contenidos.5. Navegación simple: el concepto de Usabilidad en sí mismo. Organizar lapágina para que el usuario navegue intuitivamente y sepa para qué sirvecada elemento y con cuáles puede interactuar.6. Tipografías más grandes: tras un período en el que la tendencia eraemplear fuentes pequeñas, como indicativo de elegancia, se ha pasado aun modelo en el que se consigue que las fuentes grandes también seanvisualmente atractivas. Los sites pueden ser bonitos y a la vez respetar losprincipios de la usabilidad.
  16. 16. 7. Leads en negrita: en general, la negrita se ha convertido en el modo máseficiente de destacar la información sin recurrir a colores que ensucien laidentidad corporativa de la página. Esto, unido a la necesidad dejerarquizar los contenidos, ha derivado en los tagline, es decir, frases queresumen el contenido de la página o de la empresa, así como entradillasque esquematizan los servicios o contenidos de la entidad o de laaplicación.8. Iconos atractivos: han dejado de ser un elemento auxiliar del diseñopara convertirse en un componente prioritario. En general, se puede decirque la principal característica del diseño 2.0 es la sutilidad, los pequeñosdetalles, y por ello los iconos son uno de los campos de acción másinteresantes para los diseñadores.
  17. 17. FUTURO DEL DISEÑO 2.0 Hablar de diseño implica en general referirse a una estandarización, hablar de escuelas, de tendencias, de modos de actuar generalizados, pero, al mismo tiempo, de ruptura y originalidad. Todos los movimientos ar tísticos se caracterizan porque mucha gente hace lo mismo, hasta que alguien lo rompe y crea algo más innovador. Por esta razón la Web 2.0 está generando un movimiento en contra de estos estándares. Precisamente el ar tículo citado anteriormente, How to destroy the Web 2.0 look”7, de Elliot Jay Stocks, se ha constituido en un referente para este movimiento. Para el autor “los clichés de diseño siempre han existido. Lo impor tante es conocerlos, saber por qué existen y cómo evitarlos”. “Hay que enseñar a las masas que el look Web 2.0 es un término sin significado. El Web 2.0 es un concepto… no un diseño estético.”
  18. 18.  Este diseñador, al igual que muchos otros, apuestan por utilizar las tendencias actuales estéticas actuales como base para los nuevos cánones web, creando sites en los que no aparezca ninguno de los clichés. No obstante, y a pesar de esa aparente disidencia visual, es evidente que los diseños que rompen con el estándar contienen características de las citadas anteriormente, ya que mientras la Web 2.0 continúe siendo vanguardia los internautas seguirán utilizándolo como referencia para saber si les gusta o no una página.
  19. 19. E VO L U C I Ó N T E C N O L Ó G I C A ( Y S U U S O ) 3 . 4 . 1 N AV E G A D O R N av e g a d o r e s w e b 3 . 4 . E v o l uc i ó n te c n o l ó g ic a ( y s u u s o ) 3 . 4 . 1 N av e g a d o r U n n av e g a d o r e s u n p r o g r a m a q u e s e u t i l i z a p a r a a c c e d e r a l a w e b . D e s d e e l p r i m e r ex p l o r a d o r, l l a m a d o N C S A M o s a i c d e p r i n c i p i o d e l o s n o v e n t a h a s t a h oy, l a ev o l uc i ó n h a s i d o e s p e c t a c ul ar. N et s c a pe c o n s i g uió s e r e l n av e g a d o r d e r e f e r e n c i a d e s d e e l 1 9 9 4 h a s t a que, en el año 1 9 97 , M i c r o s o f t i n t r o d ujo e l I n te r n et E x p l o r e r e n e l S i s te m a O p e r a t i vo W i n d ow s 9 8 . El dominio que ejerció IE fue tal que el desarrollo web se orientó to t a l me n te a l a v i s u a l i z a c ió n e n e s te n av e g a d o r. N a c i e r o n f r a s e s c o m o “ O p t i m i z a d o p a r a I n te r n et E x p l o r e r ” , q u e v e n í a a s i g n i fi c a r e n m u c h o s casos que si no usabas el Explorador de Windows, no ibas o poder ver la p á g i n a o a l g u n o s s e r v i c i o s n o i b a n a f u n c i o n a r. A pesar de que las estadísticas actuales nos dicen que IE sigue c a m i n a n d o , l a s c o r r i e n te s a l te r n a t i va s v a n a b r i é n d o s e p a s o . O p e r a a b r i ó e l c a m i n o y, h oy e n d í a , M o z i l l a F i r e Fox e s t á h a c i e n d o “ p u p a ” a l d o m i n i o de IE con cuotas del 20% en algunos países europeos. L o s o t r o s n av e g a d o r e s H oy e n d í a ex i s te n o t r a s a p l i c ac i o n e s q u e e s t á n g a n a n d o i m p o r t a n c i a c o m o s o n l o s n av e g a d o r e s p a r a m ó v i l e s y p a r a P DA , l o s n av e g a d o r e s d e s ó l o tex to … .
  20. 20. 3.5. FLASH L o s a r c h i v o s e l a b o r a d o s c o n e l p r o g r am a d e a n i m a c i ó n 2 D p o r ex c e l e n c ia e n e l c a m p o w e b , F l a s h , h a n p a s a d o d e s e r l a s o l u c i ó n d e f i n i t iv a c u a n d o d e s e a m o s h a c e r u n a w e b v i s u a l m en te a t r a c t i va , a u n a p o s i c ió n m u c h o m á s d i s c r et a . D u r a n te a l g ú n t i e m po m u c h a s p á g i n a s c o n s i s t í a n e n u n g r a n a r c h i vo d e F l a s h q u e c o n te n í a to d o s l o s m e n ú s , tex to s , f o to s , et c . E s to s u p o n e u n g r a n p r o b l em a d e a c c e s i b il id a d , ya q u e c u a l q ui e r a q u e v i s i te l a p á g i n a d e s d e u n n av e g a d o r n o g r á f i c o , c o m o p u e d e n l o s l e c to r e s p a r a p e r s o n a s c i e g a s , o m u c h o s m ó v i l e s y P DA , no veían nada. L o m i s m o s u c e d e c o n l o s b u s c a d o r e s d e I n te r n et , q u e c u a n d o r e c o r r e n l a s p á g i n a s l o c a l i z a n d o p a l a b r a s e n f u n c i ó n d e l a s c u a l e s i n d ex a r l a w e b , n o e n c o n t r a b a n n a d a . Y c o m o c a d a d í a e s m á s ev i d e n te m e n te q u e s i n o e s t á s e n l o s b u s c a d o r e s , c o m o G o o g l e o Ya h o o , n o ex i s te s , n o t i e n e s e n t i d o d a r l e to d a l a r e s p o n s a b i l id a d a u n archivo de Flash. Ta m b i é n e s t u v o d e m o d a c r e a r i m p r e s i o n a n te s i n t r o d ucc i o n e s e n F l a s h p a r a r e c i b i r a l o s i n te r n a u t a s , a l g o q u e e s t á p r á c t i c am e n te e r r a d i c a d o d e to d a s l a s w e b s 2 . 0 . ¿ Po r q u é s e p a r a r a n u e s t r o v i s i t a n te d e l p r o d uc to u n c l i c m á s ? L a u t i l iz a c ió n d e e s te t i p o d e a n i m a c i on e s h a p a s a d o c o m o d e c í am o s a u n a p o s i c ió n s e c u n d a r i a , q u e e s e n a n i m a c i o n e s e n l a s c a b e c e r a s d e l a s w e b s , e n l o s b a n n e r s o p a r a i l u s t r a r n o t i c i a s . C o m o u n i n g r e d i e n te m á s d e l d i s e ñ o , p e r o n o c o m o p l a to ú n i c o
  21. 21. 3.6. AJAX El término AJAX ( Asynchronous JavaScript And XML), al igual que el de Web 2.0, no es ningún invento, ni un gran avance tecnológico, es el nombre que se le puso a una serie de técnicas y combinación de tecnologías ya existentes. Poco a poco se ha conver tido en una palabra de moda, que popularizó Jesse James Garrett en su ar tículo “Ajax: A New Approach to Web Applications” 8. El ejemplo que popularizó el uso de esta tecnología fue como casi siempre, al hablar de web hoy en día, de la mano de Google, con sus aplicaciones GMaps y Gmail. De repente, el usuario descubrió que los contenidos de las páginas podían actualizar se de una manera más amable, sin tener que sopor tar la recarga de completa de la página. Se actualizaba solamente lo que el usuario quería. El uso de Ajax ha supuesto una revolución en el concepto de interacción del usuario con la página web. Ya podemos mover las ventanas a nuestro gusto y ponerlas en donde nos apetezca, eliminarlas de la vista o añadir nuevas ventanas con nuestras RSS favoritas en ser vicios como Netvives o Igoogle.
  22. 22. 3.7. EL INTERNAUTA 2.0 ¿Qué evolucionó antes? ¿El internauta o la web? Como en el famoso caso del huevo y la gallina, no está claro quién nació antes, pero parece evidente que con el surgimiento de las aplicaciones 2.0 los usuarios comenzaron a exigirlas. Entre una web donde ver vídeos y otra donde además de ver vídeos puedo comentarl o, compar tirlo y subir los míos propios, el usuario elegirá siempre la segunda opción. Atrás queda aquella web 1 .0 donde los internautas eran meros espectadores que perdían más tiempo buscando que utilizando los sites y que simplemente leían texto con hiper víncul os. Manuel Lavín, director de consultoría eBusiness de Adesis Netlife , define así al internauta 1 .0 en su ar tículo “ Web 2.0: Por fin alguien al otro lado de la pantalla” 9: 1 . Utiliza IE para navegar por la Web 2. Accede siempre desde su PC 3. Se conecta por módem 4. Se fija más en la espectacularidad de la Web que en los contenidos 5. Es un usuario pasivo que sólo asimila informaci ón 6. Sólo interactúa para realizar compras, ver el mail y obtener información
  23. 23. MIENTRAS ASIGNA ESTAS CARACTERÍSTICAS  1 . U t i l i z a I E , F i r eALO p e r a , S a f a r i … f ox , INTERNAUTA 2.0:  2 . A c c e d e d e s d e s u P C , P DA , B l a c k b e r r y, T V, W I I …  3. Se conecta por GPRS, ADSL, Cable…  4 . B u s c a l a o p e r a t i va e n l a s p á g i n a s  5 . G e n e r a i n f o r m a c ió n : B l o g s , p á g i n a s p e r s o n a l e s …  6 . P u b l i c a c o n te n i d o , l o o r d e n a …  Te n i e n d o e n c u e n t a e s to s a s p e c to s , p o d e m o s e l a b o r a r u n l i s t a d o d e l a s n e c e s i d a d e s d e l i n te r n a u t a 2 . 0 y q u e te n d r á n u n p a p e l f u n d a m e n t al a l a hora de diseñar una página:  - L o s u s u a r i o s s o n m á s ex i g e n te s . H a s t a l a l l e g a d a d e l a We b 2 . 0 e l i n te r n a ut a a c c e d í a a u n a p á g i n a , l a ex p l o r a b a , v a l o r a b a s i a l g ú n c o n te n i d o l e i n te r e s a b a y, s i n o , s e i b a .  E l u s u a r i o d e I n te r n et d e h oy e n d í a , p o r e l c o n t r a r i o , o f r e c e m u c h a s m e n o s p o s i b i li d a d e s a l o s s i te s . E n t r a , y s i n o v e n a d a q u e l e i n te r e s e , s e v a . G r a c i a s a h e r r a m i e n t a s c o m o G o o g l e A n a l y t i cs 10 p o d e m o s a l f i n c o n o c e r c ó m o e s l a ex p e r i e n c ia d e n av e g a c i ó n d e n u e s t r o s v i s i t a n tes . S e t r a t a d e u n a a p l i c a c ió n d e e s t a d í s t ic a s q u e n o s o f r e c e to d o s l o s d a to s s o b r e l a s p e r s o n a s q u e a c c e d e n a n u e s t r a p á g i n a y, p o r l o t a n to , a n u e s t r o s c l i e n te s . Po d e m o s s a b e r c u á n to t i e m p o e s t á n , c u á n t a s p á g i n a s v e n , c u á n to s s e f r u s t r a n y a b a n d o n a n e l s i te e n l a p á g i n a d e i n i c i o , c ó m o n o s e n c o n t r a ro n , d e d ó n d e v i e n e n , q u e n av e g a d o r u s a n … e s d e c i r, p o d em o s t r a t a r l o s d e t ú a t ú q u e e n e l f o n d o e s l a e s e n c i a d e l 2 . 0 .
  24. 24.  Los usuarios saben dónde está o debería estar cada botón . Los menús están en la par te superior y/o en la izquierda, y el logo que abre la pantalla es un enlace a la página de inicio. El paso de los años ha hecho que los internautas conoz can una serie de convenci ones sobre cómo se diseñan las páginas, por lo que si no se respetan se frustrará y se irá. Lo mismo sucede con la iconografía, se han creado una serie de símbolos univer sales como puede ser el de RSS que deben respetar se si queremos que sean efectivos. - Los usuarios no quieren diseñar. Hasta hace poco cuando alguien diseñaba una página web era porque abría un programa de retoque fotográfico , de diseño vectorial o de programaci ón. Eso ya no es así. Cuando hoy en día alguien quiere, por ejemplo, hacer su blog, piensa en con qué lo va a llenar, qué va a escribir, a quién se va a dirigir, y el diseño se lo deja a Wordpress. Gracias al fenómeno de las plantillas el usuario no pierde tiempo programand o o diseñando y coge un diseño ya elaborado por otros, lo aplica, y puede tener una página per sonal moderna sin necesidad de manejar más herramientas que el procesad or de textos y el navegad or de Internet. - Los usuarios quieren par ticipar: la Web 2.0 es a menudo considerada como la“web colaborati va” ya que su base es que los usuarios empiezan a opinar, a juzgar y a decir lo que les gusta y lo que no. Esto implica que los diseñadores tengan en cuenta la presencia de estas herramientas: módulos para comentari os, que muchas veces hacen que la página contenga “kilómetros” de scroll hacia abajo, espacios para que el usuario pueda compar tir la página a través de del.icio.us, Menéame o Technorati , etc.
  25. 25. LOS USUARIOS QUIEREN CREAR: este el objetivo último de la Web 2.0. Un internauta que crea contenidos y que, por lo tanto, no se encuentra ante una página diseñada con mejor o peor resultado, sino ante una interface. No se trata de hacer una aplicación amable por fuera y dura por dentro, sino que es necesario poner a la vista las entrañas de la web para que nuestro visitante suba documentos, organice vídeos o retoque fotos. Y cada una de estas entrañas debe estar diseñada cumpliendo unos principios
  26. 26. 3.8. INTERFACES PARA UN INTERNAUTA 2.0 3.8.1. USABILIDAD  El considerad o gran gurú de la Usabilidad, Jacob Nielsen, la definió así en el año  2003: “El atributo de calidad que mide lo fáciles que son de usar las inter faces Web”11 .  Se trata en una disciplina cuyo objetivo es facilitar la interacci ón del usuario y, por esta razón, es lógico que naciera o, más bien, cobrara fuerza, con la llegada de la Web 2.0. Si el mundo web se sustenta en que los internautas par ticipen, es necesario estudiar qué es lo que los estimula.  De ahí el nacimiento de una nueva profesión inexistente hasta hace poco: los exper tos en Usabilidad, per sonas especializadas en la interacci ón entre los ordenad ores y las per sonas y, concretamente, entre los sitios web y los internautas de hoy en día. Para hacernos idea de cómo funciona, podemos ver los cinco componentes con los que Jacob Nielsen mide la usabilidad 1 2:  - Aprendizaje: ¿es fácil para los usuarios emplear las utilidades básicas de una web la primera vez que se encuentran con ella?  - Eficacia: una vez que el diseño ya les es familiar, ¿cuánto tardan en aprender a realizar las tareas?  - Memorizaci ón: cuándo los usuarios vuelven al diseño después de un período sin utilizarlo, ¿cuánto tardan en reestablecer la habilidad? Errores: ¿cuántos errores cometen los usuarios, cómo de graves son, y cuánto tardan en reponer se de estos errores?  - Satisfacci ón: ¿es agradable interactuar con el diseño?
  27. 27. 3.8.2. PRINCIPIOS DE LA USABILIDAD E d u a r d o M a n c h ó n , c o - f u n d a d o r d e P a n o r a m i o , i n te r p r e t a y e s q u e m a t i z a l o s p r i n c i p i o s d e l a U s a b i l i d a d d e B r u c e To g n a z z i n i 1 3 y q u e , a s u v e z , e s t a b a n basados en gran medida en los principios heurísticos de Jacob Nielsen: 1 . A n t i c i p a c i ó n , e l s i t i o we b d e b e a n t i c i p a r s e a l a s n e c e s i d a d e s d e l u s u a r i o . 2 . A u to n o m í a , l o s u s u a r i o s d e b e n te n e r e l c o n t r o l s o b r e e l s i t i o w e b . L o s u s u a r i o s s i e n t e n q u e c o n t r o l a n u n s i t i o we b s i c o n o c e n s u s i t u a c i ó n e n u n e n to r n o a b a r c a b l e y n o i n fi n i t o . 3 . L o s c o l o r e s h a n d e u t i l i z a r s e c o n p r e c a u c i ó n p a r a n o d i fi c u l t a r e l a c c e s o a l o s u s u a r i o s c o n p r o b l e m a s d e d i s t i n c i ó n d e c o l o r e s ( a p r ox . u n 1 5 % d e l to t a l ) . 4 . C o n s i s te n c i a , l a s a p l i c a c i o n e s d e b e n s e r c o n s i s te n t e s c o n l a s e x p e c t a t i v a s d e l o s u s u a r i o s , e s d e c i r, c o n s u a p r e n d i z a j e p r e v i o . 5 . E f i c i e n c i a d e l u s u a r i o , l o s s i t i o s we b s e d e b e n c e n t r a r e n l a p r o d u c t i v i d a d d e l u s u a r i o , n o e n l a d e l p r o p i o s i t i o we b . Po r e j e m p l o , e n o c a s i o n e s t a r e a s c o n m ayo r n ú m e r o d e p a s o s s o n m á s r á p i d a s d e r e a l i z a r p a r a u n a p e r s o n a q u e otras tareas con menos pasos, pero más complejas. 6 . Re v e r s i b i l i d a d , u n s i t i o we b h a d e p e r m i t i r d e s h a c e r l a s a c c i o n e s r e a l i z a d a s 7. L ey d e F i t t s i n d i c a q u e e l t i e m p o p a r a a l c a n z a r u n o b j e t i v o c o n e l r a t ó n e s t a e n f u n c i ó n d e l a d i s t a n c i a y e l t a m a ñ o d e l o b j e t i v o . A m e n o r d i s t a n c i a y m ayo r t a m a ñ o m á s f a c i l i d a d p a r a u s a r u n m e c a n i s m o d e i n te r a c c i ó n . 8 . Re d u c c i ó n d e l t i e m p o d e l a te n c i a . H a c e p o s i b l e o p t i m i z a r e l t i e m p o d e e s p e r a d e l u s u a r i o , p e r m i t i e n d o l a r e a l i z a c i ó n d e ot r a s t a r e a s m i e n t r a s s e c o m p l e t a l a p r e v i a e i n fo r m a n d o a l u s u a r i o d e l t i e m p o p e n d i e n t e p a r a l a finalización de la tarea. 9 . A p r e n d i z a j e , l o s s i t i o s we b d e b e n r e q u e r i r u n m í n i m o p r o c e s o d e aprendizaje y deben poder ser utilizados desde el primer momento. 13 MANCHÓN,
  28. 28. 10. El uso adecuado de metáforas facilita el aprendizaje de un sitioweb, pero un uso inadecuado de estas puede dificultar enormemente elaprendizaje.11. La protección del trabajo de los usuarios es prioritario, se debeasegurar que los usuarios nunca pierden su trabajo como consecuenciade un error.12. Legibilidad, el color de los textos debe contrastar con el del fondo, yel tamaño de fuente debe ser suficientemente grande.13. Seguimiento de las acciones del usuario. Conociendo yalmacenando información sobre su comportamiento previo se ha depermitir al usuario realizar operaciones frecuentes de manera másrápida.14. Interfaz visible. Se deben evitar elementos invisibles de navegaciónque han de ser inferidos por los usuarios, menús desplegables,indicaciones ocultas, etc.3.8.3. Usabilidad frente al diseño
  29. 29. 3.8.3. USABILIDAD FRENTE AL DISEÑO La Usabilidad se desarrolla con la par te izquierda del cerebro y representa la razón y la acción lógica; por lo tanto se corresp onde con Mar te. Por su par te, el Diseño reside en la par te derecha del cerebro y se identifica con lo emocional y la acción intuitiva, así que se corresp ond e con Venus. Esta teoría, desarrollada por Cur t Cloninger en su ar tículo “ Usability exper ts are from Mar s, graphic designer s are from Venus”14 es una muestra de la lucha aparentemente existente entre diseño y Usabilidad. Decimos aparentemente porque el paso del tiempo ha demostrad o que ninguna web puede prescindir de la Usabilidad, porque el usuario se frustra y se va si no sabe manejar la inter face y, al mismo tiempo, si algo no es atractivo visualmente para el internauta es difícil que se desarrolle como producto: no se diferenciaría de los demás, parecería anticuado, nadie recordaría la web, etc. Por lo tanto se trata de dos disciplinas que se necesitan una a la otra. El diseño necesita que la Usabilidad le diga cómo navega el usuario, y la Usabilidad necesita que el diseño le ayude a jerarquizar la información, a organizar contenid os y, en conjunto, a mejorar el producto.
  30. 30. 3.8.4 ARQUITECTURA DE LA INFORMACIÓN “El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información”. Así definieron Louis Rosenfield y Peter Morville esta disciplina en su libro “ Information Architecture for the World Wide Web: Designing Large-Scale Web Sites”. Tomando como punto de partida el artículo de Iain Barker titulado “What is information architecture?”15, podemos definir los siguientes como los pasos necesarios para una arquitectura de la información acertada: 1. Entender el contenido de la web, determinar los servicios que se ofrecen y a quién está dirigida la web. 2. Realizar estudios de card sorting. Se trata de un ejercicio que consiste en utilizar a usuarios potenciales de nuestra para web para que organicen el contenido a través de fichas, ordenándolo según sus esquemas mentales. Esto hace que la estructura resultante se adecúe más a lo que el internauta espera encontrarse. 3. Elaborar un borrador del árbol de la web, agrupando la información y estableciendo jerarquías. 4. Evaluar la correspondencia entre nuestro árbol y los resultados del card sorting. 5. Crear el mapa del sitio. 6. Definir las funcionalidades de la página y cómo se llega a ellas. 7. Contrastar la organización de la información que hemos propuesto con el resto de miembros del equipo. 8. Elaborar el wireframe que le pasaremos al departamento de diseño y al de programación. Los beneficios de organizar la información correctamente son vitales para que el site funcione: - Los clientes pasarán más tiempo navegando - Mejorará la imagen de marca, ya que percibirán la página positivamente y no se frustrarán por no encontrar lo que buscan. - Aumenta su fidelidad, es más probable que vuelvan.
  31. 31. 3.9. ESTÁNDARES El verdadero triunfo de la Web 2.0 ha sido el triunfo de los estándares web, un término a veces poco conocid o entre los internautas pero con una impor tancia vital para el desarroll o web. Se define como el “conjunto de recomendaci ones dadas por el World Wide Web Consor tium (W3C) y otras organizaci ones internacionales acerca de cómo crear e interpretar documentos basados en el Web” (Alexis Bellido)16. Es decir, son las normas que permiten que las webs se puedan visionar no sólo en Internet Explorer o Mozilla Firefox, sino también en los navegadores para per sonas ciegas o dispositivos móviles como PDA o teléfonos móviles, así como para los internautas que utilizan velocidades de transferencia baja. “El poder de la web está en su univer salidad. El acceso a la web para todos, independientemente de su discapacid ad, es un aspecto esencial.” Esta frase de Tim Berner s -Lee representa a la per fección lo que suponen los estándares web: que la red no suponga una brecha con ningún colectivo por no disponer al cien por cien de sus sentidos, ni por navegar en un sopor te distinto a un plasma de 17”. Derivado de los estándares nació el concepto de accesibilidad , orientado precisamente a integrar en la web a las per sonas con minusvalías mentales o físicas.
  32. 32. 3.9.1 CCS Las hojas de estilo en cascada ( Cascading Style Sheets, CSS) son un lenguaje u s a d o p a r a d e fi n i r l a p r e s e n t a c i ó n d e u n d o c u m e n t o e s t r u c t u r a d o e s c r i to e n H T M L o X M L . C o n s i s te e n u n o o v a r i o s d o c u m e n to s e n l o s q u e s e e s c r i b e n l a s c a r a c te r í s t i c a s q u e v a a te n e r c a d a u n o d e l o s e l e m e n t o s d e l a p á g i n a : t i t u l a r e s , p á r r a fo s , c o l u m n a s , e n l a c e s , e t c . , d e m o d o q u e a fe c t a n o p u e d e n a f e c t a r a l c o n j u n to d e l s i te . L a s p r i n c i p a l e s v e n t a j a s p a r a u s a r C C S s o n 17: 1- Es más sencillo realizar cambios globales: si queremos realizar un cambio e n e l d i s e ñ o , c o m o p u e d e s e r l a d i s t a n c i a e n t r e l a s foto s e l te x to , e l c o l o r d e los hiper vínculos o el tamaño de los titulares, será más sencillo hacerlo en las C S S ya q u e b a s t a r á c o n m o d i fi c a r u n a r c h i v o y n o p á g i n a p o r p á g i n a . 2 - E l e s t i l o d e l s i te s e m a n t i e n e e n to d a s u e x te n s i ó n : s a l v o q u e m a r q u e m o s l o c o n t r a r i o , to d a s l a s p á g i n a s te n d r á n e l t i t u l a r y l o s p á r r a fo s e n e l m i s m o f o r m a to , l o s m i s m o m á r g e n e s e n t r e l o s e l e m e n t o s , e t c . 3 - E l s i te e s m á s a c c e s i b l e , ya q u e p u e d e n d e fi n i r s e e s t i l o s p a r a c a d a t i p o d e n av e g a d o r. P u e d e n c r e a r s e d i s t i n t o s fo r m a to s p a r a q u e c a d a n av e g a d o r l o i n te r p r e t e c o m o l e s e ñ a l e m o s . 4 - R á p i d a d e s c a r g a : e n g e n e r a l l a s p á g i n a s s o n m á s l i g e r a s , ya q u e to d a l a información de estilo está en los archivos CSS, que cargamos al acceder al s i te , y n o h ay q u e c a r g a r u n o s e s t i l o s c a d a v e z q u e c a m b i a m o s d e p á g i n a . 5- Separación del diseño y la programación. Los dos pueden trabajar en la web s i n i n te r f e r i r u n o e n e l t r a b a j o d e l ot r o . 6 - E s t á o p t i m i z a d o p a r a b u s c a d o r e s : h ay m e n o s c ó d i g o e n l o s a r c h i v o s y r e s u l t a m á s f á c i l p a r a e l b u s c a d o r e n c o n t r a r p a l a b r a s c l av e . 7 - E l u s u a r i o p u e d e u s a r s u s p r o p i a s n o r m a s d e e s t i l o : a l g u n o s n av e g a d o r e s d e I n te r n e t p e r m i t e n p e r s o n a l i z a r l a s C S S d e l a s p á g i n a s , p o r l o q u e s o n e l l o s quienes eligen cómo visionarlas.
  33. 33. 3.9.2 XHTML El XHTML (Lenguaje de Marcado de Hipertexto Extensible) es el lenguaje de marcado pensado para sustituir al HTML, pero aún le queda camino por recorrer. Cuando se daba por muerto el HTML 4.0 surge una nueva revisión del W3C el HTML 5.0 lo que hace que seguramente convivan durante un largo periodo de tiempo ambos. El XHTML es una versión más estricta del código HTML para conseguir reducir las posibilidades de su uso y que la interpretación por los distintos dispositivos sea más simple, y que pequeños dispositivos, con menor capacidad que los ordenadores de mesa tradicionales puedan soportar, como los móviles. Las principales ventajas que aportan son: • La compatibilidad con navegadores antiguos • La independencia del diseño. Pudiendo adoptar presentaciones distintas según el dispositivo. • Facilidad de edición del código y su mantenimiento • Mejoras de rendimiento.
  34. 34. . 3.10. CONCLUSIONES• N o e s t á c l a r o d e d o n d e p r o v i n o e l e s t i l o 2 . 0 . N o s r e c u e r d a e l e m e n to s m u y d i s p a r e s : d e s d e l a p o r t a d a d e l d i s c o Tu b ul a r B e l l s d e M i ke O l d f i el d , h a s t a l o s r e f l e j o s d e l a s o b r a s d e Roy L i c h te n s te i n o l a s s i l u et a s c o n t r a s t a d a s d e Ke i t h H a r i n g . Pe r o l o q u e s í e s t á c l a r o q u e e s t a f o r m a d e d i s e ñ a r e s t á t r a s p a s a n d o l o s l í m i te s d e l a s p a n t a l l a s d e o r d e n a d o r, p a r a c o nv e r t ir s e e n u n r e f e r e n te d e l d i s e ñ o d i g i t a l c o m o s e a p r e c i a , p o r e j e m p l o , e n l o s g r a f i s m o s d e te l ev i s i ó n .• To d a l a i m a g e n c o r p o r a t i va d e l a s c a d e n a s , d e s d e l o s p r i n te r s c o n e l nombre de los presentadores hasta las ráfagas entre programas o los g r á f i c o s ex p l i c a t i vo s d e l a s n o t i c i a s , l a p a n t a l l a v a l l e n á n d o s e d e d e g r a d a d o s , r e f l e j o s y d e m á s . ¿ S u p o n d r á l a 6 3 A s o c i ac i ó n N a c i o n al d e E m p r e s a s d e I n te r n et , A N E I• t r a n s i c i ó n a te l ev i s i ó n d i g i t al l a m i s m a r ev o l uc ió n v i s u a l q u e p a r a l a w e b f u e e l a u m e n to d e l a r e s o l uc ió n y d e l a n c h o d e b a n d a ?• C o m o c o n c l us i ón , p o d e m o s r e s u m i r to d o l o ex p u e s to h a s t a a h o r a e n q u e e l d i s e ñ o We b 2 . 0 p r o n to e s t a r á p a s a d o d e m o d a . C u a n d o l a s n o r m a s d e u n e s t i l o e s t á n t a n c l a r a s , e s p o r q ue e l s i g u i e n te p a s o s e r á s u r e d e f i n i ci ó n . E l d i s e ñ o s u p o n e e n g r a n m e d i d a r o m p e r l o s c á n o n e s , a s í q u e d e b e m o s e s t a r p r e p a r a d o s p a r a l a l l e g a d a d e l a p r ó x i m a te n d e n c i a .• U n n u ev o m o d o d e h a c e r w e b s , d o n d e s e i m p o n g a u n o s n u ev o s h á b i to s d e n av e g a c i ó n p o r p a r te d e l o s u s u a r i o s y q u e n o s o b l i g ue a r e d e f i ni r l a usabilidad, el• a s p e c to v i s u a l y, e n c o n j u nto , l a i n te r a c c i ó n .

×