PLANIFICACIN PARA LA CREACIN DE UN SITIO WEB Objetivo de la unidad

Con el estudio de esta unidad usted ser competente para:

Describir los aspectos importantes que debe planificarse en la creacin de un Sitio Web.

Introduccin a Diseo Web

. Creacin de un Sitio Web

.! Introduccin "a satisfaccin del usuario final es el objetivo perse#uido por cualquier Sitio Web colocado en Internet$ esta satisfaccin se basa en la calidad % utilidad de los contenidos % servicios. &or lo tanto es importante que el diseo de la aplicacin se base en la consecucin de los objetivos perse#uidos por el usuario. 'n buen diseo deber ser fcil de usar$ intuitivo que no requiera que el usuario deba aprender a utili(arlo. &ara poder ase#urar un buen diseo debe de planificarse la creacin del sitio para llevar t)cnicas$ procedimientos % m)todos que ase#uren las necesidades del usuario. .* 'sabilidad % accesibilidad +ntes de comen(ar la planificacin de un sitio debemos tener claros los conceptos de usabilidad % accesibilidad. 'sabilidad si#nifica ,facilidad de uso,$ la definicin ms e-tendida$ que es ofrecida por la ISO$ % que define usabilidad como el ,#rado de eficacia$ eficiencia % satisfaccin con la que usuarios espec.ficos pueden lo#rar objetivos espec.ficos$ en conte-tos de uso espec.ficos,. &ara que un sitio se considere con usabilidad$ el usuario debe de emplear poco tiempo para conse#uir la tarea que desee$ adems de sentir satisfaccin de sus necesidades en el uso del mismo$ la usabilidad de una aplicacin debe ser entendida siempre en relacin con la forma % condiciones de uso por parte de sus usuarios. "a accesibilidad$ que es la posibilidad de acceder a un sitio$ va de la mano con usabilidad. /l acceso del sitio debe de ser para todos los potenciales usuarios$ sin e-cluir a aquellos con limitaciones individuales como lo puede ser el dominio del idioma$ 0ard1are % soft1are$ anc0o de banda$ etc. Cuando la audiencia para la que se disea el sitio es mu% amplia % presenta necesidades diferentes de acceso$ se opta por 0acer varias versiones del mismo$ como las p#inas con varios idiomas.

Introduccin a Diseo Web

&lanificacin de un Sitio Web centrado en el usuario

&ara reali(ar la planificacin de un Sitio se usar el marco metodol#ico conocido como Diseo Centrado en el 'suario creado por Draper 2orman en !345. /l Diseo Web centrado en el 'suario se caracteri(a como su nombre lo dice$ por que todo el proceso de diseo % desarrollo del sitio 1eb esta conducido por el usuario$ sus necesidades$ caracter.sticas % objetivos. /sto implica el involucrar al usuario desde el comien(o$ saber qu) necesita de nuestro sitio6 testar si le es funcional % fcil de usar$ si le a#rada el diseo$ ir reali(ando pruebas para ir mejorando el sitio antes del lan(amiento. /l proceso de Diseo Web Centrado en el 'suario$ se divide en varias etapas las cuales se observan en el esquema$ observe que la etapa de diseo$ prototipado % evaluacin se mantienen en un ciclo repetitivo$ %a que es necesario que todo lo que se disee este en constante evaluacin$ para ir corri#iendo los errores % evitar que finali(ado el sitio 1eb ten#a muc0os errores que ser.an ms costosos % dif.ciles de reparar$ adems se perder.a tiempo innecesariamente. 7eamos a continuacin las etapas del diseo 1eb centrado en el usuario:

Introduccin a Diseo Web

. .! &lanificacin /n esta etapa se identifican los objetivos del sitio$ as. como reco#er$ anali(ar % ordenar toda la informacin posible del usuario potencial$ sus necesidades$ requerimientos % objetivos. Con esta informacin se tendr una base slida para tomar decisiones de diseo en las si#uientes etapas del proceso. /n la etapa de planificacin se anali(an los requerimientos del sitio 1eb$ como lo son los requerimientos t)cnicos$ el personal necesario$ % el dinero con que se cuenta para el pro%ecto. 8ste anlisis se reali(a para establecer un equilibrio entre lo que puede ofertar el proveedor % lo que necesita el usuario. &or lo tanto$ la persona que planifique el sitio debe obtener informacin precisa tanto de las necesidades % objetivos del proveedor como del usuario. Con el proveedor se reali(an entrevistas % reuniones con los responsables del sitio$ para obtener dic0a informacin. +0ora con los usuarios se obtiene la informacin por medio del estudio de los mismos a trav)s de m)todos de inda#acin$ que a%udan a reali(ar apro-imaciones de conte-to$ con estudios de campo a #rupos o inda#aciones individuales por medio de encuestas o entrevistas para saber cules son sus objetivos % cmo afectar a la interaccin la e-periencia % conocimientos previos que el usuario ten#a. Cuanto ms investi#uemos del comportamiento % actuacin de la audiencia$ el diseo ser ms apto para satisfacer la e-periencia del usuario final con el sitio.

. .* Diseo Despu)s que se 0a recolectado la informacin en la etapa de planificacin es el momento de la toma de decisiones acerca de cmo disear o redisear$ tomando en cuenta los aspectos a mejorar de las etapas que tienen que estar en movimiento sea las etapas de prototipado % evaluacin.

"a etapa de diseo se subdivide en cuatro etapas:

Introduccin a Diseo Web

: ;odelado del usuario /n este apartado se reali(a un resumen de toda la informacin obtenida en las investi#aciones reali(adas en la etapa de planificacin$ %a que esta s.ntesis denominada modelado del usuario$ servir para comen(ar el diseo. "a s.ntesis se basa en crear una persona con los atributos que ten#an en com<n todos los usuarios investi#ados. /l modelado del usuario$ se basa en la definicin de un arquetipo$ con una identidad inventada$ que representa patrones de objetivos % necesidades reunidas del estudio reali(ado a la muestra del #rupo objetivo del sitio. 8ste usuario de identidad inventada$ representa a todos los usuarios reales investi#ados %a que si )stos datos fueran inventados la t)cnica perder.a toda su utilidad %a que como com<nmente pasa$ el diseador se ima#ina a )l utili(ando el sitio % no puede entender que a muc0as personas se les dificulta el uso del sitio % en muc0as ocasiones puede resultar frustrante$ por eso se necesita que todo esto sea basado en la realidad. =ambi)n se deben definir escenarios en donde se describan posibles situaciones de interaccin con uso del sitio. Con este modelo de usuario$ %a se podr decidir en el diseo del sitio$ centrado en )l. : Diseo conceptual /n el Diseo conceptual se define el esquema del funcionamiento % nave#acin del sitio$ aqu. no se ver la apariencia que va a tener el sitio$ sino que se centra en la arquitectura de informacin$ que se refiere a la estructura % or#ani(acin de espacios dentro del diseo del sitio

conducta$

>

Introduccin a Diseo Web

1eb$ buscando siempre la satisfaccin de las necesidades del usuario$ pero en concreto se busca que el usuario pueda recuperar la informacin nave#ando fcilmente % esto se lo#ra$ distribu%endo correctamente los contenidos en las p#inas % presentando vinculacin de una p#ina a otra. "a definicin de la estructura del sitio puede ser descendente % ascendente. /n la descendente se parte de lo #eneral a lo particular$ se dividen los contenidos en p#inas % los enlaces entre ellas. /n la ascendente$ primero se definen las p#inas m.nimas de informacin para definir la estructura % nave#acin del sitio. Cuando este definida la estructura del sitio se documenta en forma de esquema para sustentar el desarrollo del mismo. =ambi)n sistemas contenidos que tendr en )sta etapa se definen de clasificacin para los % se definir el sistema de men< el sitio.

?/ntre las t)cnicas de Diseo Centrado en el 'suario a aplicar en la etapa de Diseo Conceptual destacamos$ por su utilidad % facilidad de ser llevada a cabo$ la t)cnica de ,card sortin#, u ordenacin de tarjetas. 8sta se basa en la observacin de cmo los usuarios a#rupan % asocian entre s. un n<mero predeterminado de tarjetas etiquetadas con las diferentes cate#or.as o secciones temticas del sitio 1eb. De esta forma$ partiendo del comportamiento de los propios usuarios$ es posible or#ani(ar % clasificar la informacin de un sitio 1eb conforme a su modelo mental@. ABassan ;ontero6 *CC9D

: Diseo visual % definicin del estilo /n )ste apartado se especifica el aspecto visual del sitio 1eb$ que concepto de diseo va a tener$ dependiendo de los objetivos que se buscan$ que comportamiento van a tener los elementos de interaccin % si se va a contar con elementos multimedia. Se debe tener muc0o cuidado en no saturar de informacin % crear un recorrido visual apto para los usuarios$ creando importancia jerrquica visual en donde se necesite.

Introduccin a Diseo Web

"a jerarqu.a visual se puede lo#rar colocando la informacin importante arriba del espacio asi#nado$ por medio del uso del tamao % utili(acin del contraste de color$ uso de efectos tipo#rficos para enfati(ar contenidos$ etc. &ara evitar la sobrecar#a de informacin en los men<s de nave#acin se recomienda no tener ms de nueve submen<s en cada men< principal. Cuidando la accesibilidad del sitio se debe de poner atencin en el uso de colores$ tomando en cuenta la psicolo#.a del color para combinaciones aptas$ as. como$ proporcionar suficiente contraste entre te-to % fondo para no dificultar la lectura. +l utili(ar im#enes en el diseo$ se debe cuidar su tamao % resolucin. /n el diseo visual es de suma importancia mantener la unidad de estilo entre todas las p#inas$ como lo es el tipo de letra % colores. &ara que todo el sitio cumpla con la unidad es recomendable elaborar una #u.a de estilo para que sirva de referencia a todo el equipo de desarrollo del sitio.

: Diseo de contenidos /n el diseo de contenidos para sitios 1eb se debe mantener un equilibrio entre lo que puede ser te-to$ video$ audio % no utili(arlos e-cesivamente porque ser.an desorientadores o caticos para el usuario final. /l contenido debe de ser ordenado$ con vinculaciones claras e informativas. "a redaccin del contenido 1eb es concisa$ precisa$ % creativa$ diri#ida al #rupo objetivo del sitio % por lo mismo se adapta al vocabulario del mismo.

Introduccin a Diseo Web

. .

&rototipado

/n la etapa de prototipado consiste en elaborar modelos de la interfa( del sitio para que pueda ser evaluada la usabilidad. "a utilidad del prototipado es ase#urar que una interfa($ antes de ser implementada$ sea usable % a0orrar tiempo en mejorar errores que podr.an ser costosos teniendo terminado el sitio por completo. /l aspecto del prototipo no debe ser e-actamente como ser al finali(ar el sitio$ puede ser de alta o baja fidelidad. /l prototipo de alta fidelidad ser mu% parecido al sitio 1eb una ve( terminado$ se puede reali(ar por medio de 0erramientas de soft1are$ o un simple editor B=;". /l prototipado de baja fidelidad ser mu% distante al aspecto que ten#a el sitio final$ se puede 0acer por medio de bocetos en papel.

. .9 /valuacin "a evaluacin de la usabilidad$ es la etapa ms importante en el proceso de Diseo Centrado en el 'suario$ se puede reali(ar a trav)s de varios m)todos % es aqu.$ en donde se si#ue el ciclo con la etapa de prototipado % diseo. /-iste una #ran diversidad de m)todos para evaluacin de usabilidad$ a continuacin se describirn dos de los ms utili(ados:

: ;)todo por inspeccin: evaluacin 0eur.stica "a /valuacin Beur.stica es un tipo de m)todo de inspeccin$ basada en el recorrido % anlisis del sitio$ identificando errores % problemas de diseo. /sta evaluacin normalmente se lleva a cabo por un #rupo reducido de evaluadores con e-periencia$ fundamentndose en reconocidos principios de usabilidad % apo%ndose en #u.as elaboradas

Introduccin a Diseo Web

para tal fin para lue#o obtener una opiniones.

conclusin de la unin de las

Diversos autores 0an propuesto diferentes conjuntos de 0eur.sticos o principios de usabilidad a trav)s de los cuales evaluar la usabilidad. 2ielsen propone los !C si#uientes:

7isibilidad del estado del sistema: /l sistema Ao sitio 1ebD siempre debe informar al usuario acerca de lo que est sucediendo. "en#uaje com<n entre sistema % usuario: /l sistema debe 0ablar el len#uaje del usuario$ 0u%endo de tecnicismos incomprensibles o mensajes cr.pticos.

"ibertad % control por parte del usuario: /l usuario debe tener el control del sistema$ no se puede limitar su actuacin. Se debe ofrecer siempre al usuario una forma de ,salida de emer#encia,$ como por ejemplo la representada por la opcin para ,saltar, animaciones de introduccin.

Consistencia % estndares: /l sitio 1eb debe se#uir estndares de diseo ampliamente aceptados$ como el mismo tipo de letra en cada p#ina. Cuanto ms se pare(ca un diseo % su funcionamiento al resto de sitios 1eb$ ms familiar % fcil de usar resultar para el usuario. &revencin de errores: ;ejor que un buen mensaje de error es un diseo que preven#a que ocurra el error. /s mejor reconocer que recordar: /ste principio 0ace mencin a la visibilidad de las diferentes opciones$ enlaces % objetos. /l usuario no tiene por qu) recordar dnde se encontraba cierta informacin$ o cmo se lle#aba a determinada p#ina. Fle-ibilidad % eficiencia de uso: /l sitio debe ser fcil de usar para usuarios novatos$ pero tambi)n proporcionar atajos o aceleradores para usuarios avan(ados.

Introduccin a Diseo Web

Diseo minimalista: Cualquier tipo de informacin que no sea relevante para el usuario % que sobrecar#ue la interfa( debe ser eliminada. &ermitir al usuario solucionar el error: &or ejemplo$ cuando un usuario introduce una consulta en un buscador % no obtiene nin#<n resultado$ se debe informar al usuario sobre cmo solucionar el problema$ por ejemplo con mensajes del tipo ,introdu(ca al#<n sinnimo, o ,quiso 'd. decir...,. +%uda % Documentacin: Siempre es mejor que un sitio 1eb se pueda utili(ar sin necesidad de a%uda o documentacin$ aunque en sitios 1eb e-tensos o en procesos de interaccin complejos Acomo el rellenado de un formularioD$ se debe proporcionar informacin de a%uda al usuario.

: ;)todo de test /l m)todo de test es otro tipo de prueba de usabilidad$ que se recomienda 0acerlo despu)s de una evaluacin 0eur.stica. Se basa en la observacin % anlisis de cmo una muestra de usuarios utili(a el sitio 1eb$ anotando los problemas de uso con los que se encuentren para poder solucionarlos posteriormente. 8ste test se debe reali(ar a los prototipos % al finali(ar el sitio. "a ventaja que ofrecen los test de usuarios frente a otro tipo de evaluaciones es que por un lado es una demostracin con 0ec0os$ por lo que sus resultados son ms fiables.

. .> Implementacin % lan(amiento &ara ase#urar la compatibilidad en la implementacin del sitio es recomendable utili(ar estndares$ como el len#uaje B=;"$ % no caer en la tentacin de utili(ar tecnolo#.as propietarias$ el panorama tecnol#ico puede 0acerlas desaparecer o cambiar en poco tiempo.

!C

Introduccin a Diseo Web

"a utili(acin de CSS es recomendable para facilitar los cambios$ %a que estos separan el contenido de estilo. /n esta etapa del desarrollo se debe llevar$ un control de calidad de la implementacin$ supervisando que todo funcione % responda$ cmo se 0ab.a planificado$ para colocarlo a disposicin de los usuarios. Se trata de un evento importante$ muc0as veces errneamente apresurado debido a la necesidad de cumplir tiempos de entre#a. +ntes del lan(amiento es recomendable crear e-pectacin en los potenciales usuarios$ colocando en la direccin que tendr finalmente el sitio$ una p#ina 1eb e-plicativa de lo que ser el sitio$ cundo estar disponible$ as. como informacin de contacto. /l lan(amiento es el primer encuentro entre usuario % el sitio 1eb$ as. que debe de estar todo terminado$ debe de venderse$ pues ser la percepcin que el usuario tendr del sitio para posteriores visitas. /s el momento de darle la bienvenida % ensear a usar el sitio. &ara que el sitio lle#ue a los usuarios potenciales$ se 0ace uso de la promocin con una campaa de publicidad que depender de la naturale(a % caracter.sticas del sitio 1eb. 'na ve( reali(ado el lan(amiento se deben atraer a ms usuarios$ por medio de banners publicitarios$ re#istro en buscadores % correo electrnico.

. .5 ;antenimiento % se#uimiento 'n sitio 1eb esta en constante cambio$ % requiere de continuos rediseos % mejoras$ %a que su #rupo objetivo cambia de necesidades % perfi$. &ero no se debe de cambiar el sitio de forma drstica$ los rediseos deben ser mu% sutiles$ pues los usuarios actuales estn familiari(ados con el diseo actual % los cambios pueden resultar dramticos 0aciendo que los usuarios se retiren para siempre.

!!

Introduccin a Diseo Web

: Opiniones de los usuarios: "os problemas de uso no detectados durante el proceso de desarrollo pueden descubrirse a trav)s de los mensajes enviados por los usuarios acerca de problemas que 0an tenido con el uso del sitio o por medio de cuestionarios % encuestas reali(adas a la audiencia. "os resultados de los cuestionarios no indican la usabilidad del sitio$ sino la satisfaccin del usuario % si la satisfaccin es baja$ se tendr que mejorar la usabilidad.

: Comportamiento del usuario % uso del sitio: 'na ve( que el sitio 1eb 0a sido lan(ado % es usado diariamente$ se tiene a disposicin una nueva fuente de informacin sobre el comportamiento del usuario$ que es mu% valiosa$ se le llama fic0eros lo#. "os fic0eros lo# son e-tensos fic0eros de te-to plano que #enera el servidor 1eb$ % por medio de un pro#rama instalado se pueden reali(ar anlisis de los re#istros de cada una de las peticiones que los usuarios reali(an al servidor$ por medio de las p#inas. /stos re#istros pueden ser mu% <tiles para la toma de decisiones sobre el rediseo en sitios 1eb implementados %a que en los lo# se suele re#istrar: Direccin I& del cliente Identidad del usuario % pass1ord Fec0a % 0ora de la peticin ;)todo &at0 o directorio de la p#ina en el servidor Cdi#o que indica si la peticin 0a sido resuelta correctamente o no 2<mero de b%tes trasferidos entre cliente % servidor

!*

Introduccin a Diseo Web

&#ina desde la que se pide el arc0ivo al servidor Asi es interna o e-terna$ a trav)s de otro sitio 1ebD Informacin del nave#ador del cliente

+ trav)s del anlisis de los fic0eros lo#s se pueden responder pre#untas que a%udan a mejorar aspectos del sitio$ como por ejemplo GDe qu) pa.s se conectanH GIu) p#inas suelen ser las ms visitadasH GDesde qu) p#inas se lle#aH etc.