CAPITULOConceptos CLAVE rquiteeturo de MtWlWo ,.. . .586arquitecturaMVC ........589atributosde coMwl569diseo al nivel de componentes . .593diseoarquitectnico . .585de contenido.. .584 diseodeiointerfaz ..573 diseode navegacin .590 di seo esttico .582MDHOO 595mtricas598potrones 594que no fo son. La visin y el sentido de! contenido se desarrollan como parte det diseo grfico; la plantilla esttica de la interfaz de usuario s crea cma parte del diseo de la interfaz; y fo estructura tcnica de la WebApp se modela como pa rte del diseo arquitectnico y de navegacin. En -toda instancia se debe crear un modelo de diseo antes de que comience fo construccin, pero un buen ingeniero'Web reconoce que eidiseo evolucionar mientras ms se conozca acerc d los requisitos de los participantes conforme se.cans fruya la WebApp,Modelado de diseo paraAPLICACIONES WEBn su autorizado libro acerca del diseo Web, Jakob Nielsen [N1EOO] afirm 'En esencia, existen dos enfoques bsicos del diseo: el ideal artstico expresarse uno mismo y el ideal de ingeniera de resolver un problema p ra un cliente". Durante la primera dcada del desarrollo Web, la idea artstica id el enfoque que eligieron muchos desarrolladores. El diseo ocurri en una forrad hoc y usualmente era:dirigido conforme se generaba el HTML. El diseo e\ lucion de una visin artstica que en s misma evolucion confrme ocurrir . construccin de la WebApp.Incluso en la actualidad, los defensores "radicales" del desarrollo de sotwa gil (captulo 4) utilizan las aplicaciones Web como cartel de nios para "dise' limitado". Argumentan que la inmediatez y la volatilidad de las webApps . nan el diseo formal, que el diseo evoluciona conforme s construye (cod ca) una aplicacin y que se debe gastar relativamente poco tiempo en la ere i ein de un modelo de diseo detallado. Este argumento tiene mrito, pero s = para WebApps relativamente simples. Cuando el contenido y la funcin son c rt piejos, cuando el tamao de la WebApp abarca cientos de objetos de cont7- . c funciones y clases de anlisis, cuando el xito de la WebApp tendr un imps.: directo sobre el xito de negocio, el diseo no puede ni debe ser tomado a i gera.Esta realidad conduce al segundo enfoque de Nielsen; "el ideal de ingenie: de resolver un problema para un cliente". La ingeniera web adopta esta i fia, y un enfoque ms: riguroso del diseo WebApp permite a los desarrollad - : lograrlo.|; ^ C|| ^ Qu es? El diseo de WebApps : Quin lo hoc? los ingenieros Web, diseo: ahorca actividades tcnicas y otras . res grficos, desarrolladores de contenido*'*participantes colaboran en la. creacin oun model de diseo para la ingeniera Web Por qu es importante? El diseo perm-e un ingeniero Web crear un modelo que puec : valorarse en calidad y mejorarse antes de que generen el contenido y el cdigo, se reaiicv - pruebas y se involucren muchos usuarios finse: Ef diseo es el lugar donde se establece la c: > : dad de la WebApp.Cules son Sos posos? El disea WefcAp abarca seis grandes pasos a los cuales olime' i ; la informacin obtenida durante el modelado anlisis.S66CAPITULO 19 MODELADO DE DISEO PARA APLICACIONES WEB567z z seo de contenido utiliza informacin conte- -oc dentro del modelo de anlisis como una x para establecer e! diseo d los objetos de (pontenido y sus relaciones. :El dise esttico Jtambin llamado diseo grfico] establece laI ;n y el sentimiento que;, ,,c . El diseo arquitectnico se enfoca sobre taCul es el producto obtenido? Un modelo de diseo que abarque temas de diseo de contenido, esttico, arquitectura, interfaz, navegacin y al nivel de componente es el producto de trabaio primario del diseo de ingeniera Web ' - Cmo puedo estar seguro de que fe heslructura bipermedia global de todos las obje- :Hecho correctamente? El equipo de nge-ks de contenido y funciones. El diseo de lanjera Web (y algunos participantes seiecciona---rfoz establece a plantilla global y los meca-:dos) revisa cada elemento del modelo de diseo- .~os de interaccin que definen la interfaz de! o con la finalidad de descubrir errares, inconsis- swario. El diseo de navegacin define cmotencias u omisiones. Adems, s consideran-ega e! usuario final a travs de la estructuro ^ soluciones alternativas, y tambin se valoro e! h penmedia, y el diseo de componentes repre*grado en el que el modelo de diseo actual con-anta la estructura interna detallada d ios e|-duer a una-implemntacin efectiva.-en tos funcionales de lo WebAoo. .Cuando se aplica el diseo dentro del contexto de la ingeniera Web, se deben considerar cuestiones tanto genricas como especficas. Desde un punto de vista genrico, el diseo resulta en un modelo que gua la construccin de la WebApp. El modelo de diseo, sin importar su forma, debe contener suficiente informacin para reflejar cmo habrn de traducirse los requisitos de los participantes (definidos en un modelo de anlisis) en contenido y cdigo ejecutable. Pero el diseo tambin debe ser especfico. Debe abordar atributos clave de una WebApp en una forma que permita a! ingeniero Web construir y ponerla a prueba de manera efectiva.Diseo y calidad de una WebAppEn captulos anteriores se seal que el diseo es la actividad de ingeniera que conduce a un producto de gran calidad. Esto conduce a una pregunta recurrente que se presenta en toda las disciplinas de ingeniera: qu es calidad? En esta seccin se exa minar la respuesta en el contexto de la ingeniera Web.Toda persona que haya navegado en la Web o usado una Intranet corporativa tiene una opinin acerca de lo que hace una "buena" WebApp. Los puntos de vista individuales varan enormemente. Algunos usuarios disfrutan los grficos que bailan, otros quieren texto simple. Algunos solicitan informacin copiosa, otros desean una presentacin abreviada. A algunos les gustan las herramientas analticas sofisticadas o los accesos a las bases de datos, a otros Ies gustan las cosas simples. De hecho, la percepcin del usuario de lo que es "bueno" (y la resultante aceptacin o rechazo de la WebApp como consecuencia) puede ser ms importante que cualquier discusin tcnica de la calidad de la WebApp.CAPTULO 19MODELADO DE DISEO PARA APLICACIONES WEB#CAPTULO 19MODELADO DE DISEO PARA APLICACIONES WEB569568PARTE TRES APLICACIN DE LA INGENIERA WEBPero cmo se aprecia la calidad de la WebApp? Qu atributos debe exhibir para lograr ser buena a los ojos de los usuarios finales y al mismo tiempo mostrar las caractersticas tcnicas de calidad que permitirn a un ingeniero Web corregir, adaptar, mejorar y apoyar la aplicacin a largo plazo?En realidad, todas las caractersticas generales de la calidad de software tratadas en los captulos 9, 15 y 26 se aplican a la WebApps. Sin embargo, las ms relevar tes de dichas caractersticas facilidad de uso, funcionalidad, confiabilidad, eficien cia y facilidad de mantenimiento proporcionan una base til para valorar la calida; de los sistemas basados en Web.- v; :;: "Si los productos se disean para encajar mejor en las tendencias naturales del comportamiento humono, entonces la gente ester ms satisfecha, ms completa y ser ms productiva."Susan WeinschenkOlsina y sus colegas [OLS99] han preparado un "rbol de requisitos de calidac que identifica un conjunto de atributos tcnicos facilidad de uso, funcionalidad confiabilidad, eficiencia y facilidad de mantenimiento que conducen a WebApps c- gran calidad.' La figura 19.1 resume su trabajo. Los criterios anotados en la figur. son de particular inters para los ingenieros Web que deben disear, construr mantener las WebApps a largo plazo.Offutt [OFF02] extiende los cinco principales atributos de calidad anotados en a figura 19.1 al agregar los atributos siguientes: rbol derequisitos deFuncionalidadComprensibilidad global del sitio Caractersticas de retroalimentacin en lnea y ayuda Caractersticas de la interfaz y esttica Caractersticas especialesCapacidades de bsqueda y recuperacin Caractersticas de navegacin y visualizacn Caractersticas de la aplicacin relacionadas con el dorr - -ConfiabilidadEficienciaDesempeo en tiempo de respuesta Rapidez de generacin de pgina Rapidez de generacin de grficosFcil de corregirFacilidad de ~ Adaptabilidad mantenimientoExtensibilidadCorrecto procesamiento de vnculos Recuperacin de erroresValidacin y recuperacin de entrada de usuario prncipa-depara las7Seguridad. Las WebApps se han convertido en una parte integral de las bases de datos cruciales del gobierno y las empresas. Las aplicaciones de comercio electrnico extraen y luego almacenan informacin confidencial de los clientes. Por stas y muchas otras razones, la seguridad de las WebApps es primordial en muchas situaciones. La medida clave de la seguridad es la habilidad de la WebApp y su ambiente de servidor de rechazar el acceso no autorizado e impedir un franco ataque malvolo. Un anlisis detallado de la seguridad WebApp est ms all del alcance de este libro. El lector interesado debe consultar [MCC01), [NOR02] o [KAL03],Disponibilidad. Incluso la mejor WebApp no satisfar las necesidades de los usuarios si no est disponible. En un sentido tcnico, la disponibilidad es la medida del porcentaje del tiempo que una WebApps est disponible para usarla. El usuario final comn espera que las WebApps estn disponibles las 24 horas de todos los das del ao. Algo menos es considerado inaceptable.Desde luego, esta expectativa es irreal Las grandes WebApps deben planificar el "periodo de inactividad" para reparaciones y actualizaciones. Pero "a tiempo" no es el nico indicador de disponibilidad. Offutt [OFF02) sugiere que "usar caractersticas disponibles slo en un navegador o una plataforma" hace que la WebApp no est disponible para quienes tengan una configuracin de navegador y plataforma diferente. El usuario invariablemente se ir a otra parte.Escalabilidad. La WebApp y su ambiente de servidor pueden escalarse para manejar 100, 1 000, 10 000 o LOO 000 usuarios? La WebApp y los sistemas con los cuales est conectada manejan variaciones significativas en el volumen o la capacidad de respuesta caer catastrficamente (o cesar por completo)? No es suficiente construir una WebApp exitosa. Es igualmente importante construir una WebApp que pueda acomodar el peso del xito (significativamente ms usuarios finales) y volverse todava ms exitosa.Tiempo en el mercado. Aunque en sentido tcnico el tiempo en el mercado no es un verdadero atributo de calidad, es una medida de calidad desde un punto de vista de los negocios. La primera WebApp en el mercado usualmente captura un nmero desproporcionado de usuarios finales.Cientos de miles de pginas Web estn disponibles para quienes busquen informacin en la World Wide Web. Incluso las bsquedas Web mejor dirigidas resultan en una avalancha de contenido. Con tantas fuentes de informacin de las cuales elegir, cmo valora el usuario la calidad (por ejemplo, veracidad, precisin, integridad, oportunidad) del contenido que se presenta dentro de una WebApp? Tillman [TIL00] sugiere un conjunto de criterios til para valorar la calidad del contenido: El mbito y la profundidad del contenido se pueden determinar con facilidad para asegurar que satisfacen las necesidades del usuario?570Lista de verificacin de la calidadLa siguiente lista de verificacin, adaptada de la informacin presentada en Webreference. com, proporciona un conjunto de preguntas que ayudarn tanto a los ingenieros Web como a los usuarios finales a valorar la calidad global de una WebApp:El contenido, la funcin o las opciones de navegacin pueden ajustarse a las preferencias del usuario?El contenido o la funcionalidad se pueden personalizar al ancho de banda en el cual se comunica el usuorio?Las grficas y los otros medios que no son textuales se han usado de manera apropiada? El tamao de los archivos grficos est optimizado para que se desplieguen con eficiencia?del diseo de la WebAppLas tablas estn organizadas y dimensionadas en uno forma que las hace comprensibles y que se desplieguen eficientemente?El HTML est optimizado para eliminar ineficiencias?El diseo global de la pgina facilita la lectura y la navegacin?Todos los punteros (vnculos) proporcionan vnculos cor informacin interesante para los usuarios?Es probable que la mayora de los vnculos persistan en la Web?La WebApp est instrumentada con utilidades de ges tin del sitio que incluyan herramientas para rastrear s^ uso, prueba de vnculos, bsqueda local y seguridad?yPARTE TRES APLICACIN DE LA INGENIERA WEB* Qu se deberaconsiderar cuando se valore el contenido de calidad?Los antecedentes y la jerarqua de los autores del contenido se pueden ide: tificar fcilmente?Es posible determinar la precisin del contenido, la ltima actualizacin y que fue actualizado?El contenido y su ubicacin son estables (es decir, permanecern en la URL de referencia)?Adems de estas preguntas relacionadas con el contenido, se pueden aadir \s siguientes:El contenido es creble?El contenido es nico? Esto es, la WebApp proporciona algn beneficio un co a quienes la usen?El contenido es valioso para la comunidad de usuarios a que se dirige?El contenido est bien organizado? Est en un ndice? Es fcilmente acce i sible?La lista de verificacin anotada en esta seccin slo representa una pequea m tra de los asuntos que deben abordarse conforme evolucione el diseo de una Web Una meta importante de la ingeniera Web es desarrollar sistemas en los que se porcionen respuestas afirmativas a todas las preguntas relacionadas con la cal572PARTE TRES aplicacin de la ingeniera web#PARTE TRES aplicacin de la ingeniera webCAPTULO 19MODELADO DE DISEO PARA APLICACIONES WEB571Metas de diseoEn su columna regular acerca del diseo Web, Jean Kaiser [XAI021 sugiere las siguientes metas de diseo, que son aplicables virtualmente a toda WebApp sin importar el dominio, tamao o complejidad de la aplicacin:Simplicidad. Aunque pueda parecer pasada de moda, la expresin "todo con moderacin' se aplica a las WebApps. Existe una tendencia entre algunos diseadores a proporcionar al usuario final "demasiado"; contenido exhaustivo, efectos visuales extremos, animacin entrometida, enormes pginas Web, la lista es larga. Es mejor luchar por la moderacin y la simplicidad.Consistencia. Esta meta de diseo se aplica virtualmente a cada elemento del modelo de diseo. El contenido se debe construir de manera consistente (por ejemplo, el formato del texto y los estilos de fuente deben ser los mismos a lo largo de todos los documentos de texto; el arte grfico debe tener una apariencia consistente, esquema de color y estilo). El diseo grfico (esttica) debe presentar una apariencia consistente en todas las partes de la WebApp. El diseo arquitectnico debe establecer plantillas que conduzcan a una estructura hipermedia consistente. El diseo de interfaz debe definir modos consistentes de interaccin, navegacin y despliegue de contenido. Los mecanismos de navegacin deben usarse de manera consistente a travs de todos los elementos de la WebApp.Identidad. La esttica, la interfaz y el diseo de navegacin de una WebApp deben ser consistentes con el dominio de la aplicacin para la cual se va a construir. Un sitio Web para un grupo hip-hop indudablemente tendr una apariencia y un sentido diferente al de una WebApp diseada para una compaa de servicios financieros. La arquitectura de WebApp ser completamente diferente, las interfases se construirn para acomodar diferentes categoras de usuarios, la navegacin estar organizada para lograr diferentes objetivos. Un ingeniero Web (y otros contribuyentes de diseo) deber trabajar para establecer una identidad para la WebApp por medio del diseo.Robustez. Con base en la identidad establecida, usualmente una WebApp hace una "promesa" implcita al usuario. El usuario espera contenido y funciones robustas que sean relevantes para sus necesidades. Si dichos elementos estn perdidos o son insuficientes es probable que la WebApp fracase.Navegabilidad. Ya se ha sealado que la navegacin debe ser simple y consistente. Tambin debe estar diseada de modo que sea intuitiva y predecible, Esto es, el usuario debe entender cmo moverse por la WebApp sin teneT que buscar vnculos o instrucciones de navegacin.Apariencia visual. De todas las categoras de software, las aplicaciones Web son incuestionablemente las ms visuales, las ms dinmicas y sin duda las ms estticas. Es indudable que la belleza (apariencia visual) est en el ojo del observador, pero muchas caractersticas de diseo (por ejemplo !a apariencia y sentido del conten-do, la plantilla de la interfaz, la coordinacin del color, el equilibrio del texto, los gra feos y otros medios audiovisuales, los mecanismos de navegacin) s contribuyen : aspecto visual.Compatibilidad. Una WebApp se utilizar en una diversidad de ambientes ip ejemplo, diferentes equipos, tipos de conexin a Internet, sistemas operativos, na-, gadores) y se debe disear para que sea compatible con cada uno.\CLAVELe IWeb abarco sais diferentes tipos de diseo. Codo uno contribuye o lo calidad global de la WebApp.Qu es diseo en el contexto de la ingeniera Web? Esta pregunta simple es ms . ticil de responder de lo que uno puede creer. El diseo conduce a un modelo c. contiene la mezcla adecuada de esttica, contenido y tecnologa. La mezcla var.-T dependiendo de la naturaleza de la WebApp, y, como consecuencia, las actividad de diseo tambin variarn.La figura 19.2 muestra una pirmide de diseo para la ingeniera Web. Cada r, de la pirmide representa una de las siguientes actividades de diseo:Diseo de la interfaz: describe la estructura y organizacin de la interfaz de usuario, Incluye una representacin de la plantilla de pantalla, una definici: de los modos de interaccin y una descripcin de los mecanismos de navec.- cin.Diseo esttico: tambin llamado diseo grfico, describe la "apariencia y sentimiento" de la WebApp. incluye esquemas de color, plantilla geomtrica tamao de texto, fuente y ubicacin, uso de grficos y decisiones esttica? relacionadas.Diseo de contenido: define la plantilla, la estructura y el bosquejo de todc d contenido que se presenta como parte de la WebApp. Establece las relacior entre los objetos de contenido.Diseo de navegacin: representa el flujo de navegacin entre los objetos oe contenido y para todas las funciones de la WebApp.Diseo arquitectnico: identifica la estructura hipermedia global para la WebApp.Diseo de componentes: desarrolla la lgica de procesamiento detallado :..t se requiere para implementar componentes funcionales.En las secciones que siguen se consideran con mayor detalle cada una de t ie actividades de diseo.574PARTE TRES aplicacin de la ingeniera webCAPTULO 19 MODELADO DE DISEO PAGA APLICACIONES WEB575CAPITULO 19 MODELADO DE DISEO PARA APLICACIONES WEB573delIWeb.Diseo \ de la \ interfazDiseo estticoDiseo de contenidonavegacin i i tectn icotecnologaToda interfaz de! usuario ya sea diseada para una WebApp, una aplicacin de software tradicional, un producto de consumo o un dispositivo industrial debe presentar las siguientes caractersticas: fcil de usar, fcil de aprender, fcil de navegar, intuitiva, consistente, eficiente, libre de errores y funcional. Debe ofrecer al usuario final una experiencia satisfactoria y gratificante. Los conceptos, principios y mtodos de diseo de la interfaz brindan al ingeniero Web las herramientas requeridas para lograr esta lista de atributos.En el captulo 12 se observ que el diseo de la interfaz comienza no con una consideracin de la tecnologa, sino ms bien con un cuidadoso examen del usuario final. Durante el modelado de anlisis para la ingeniera Web (Captulo 18), se desarrolla una jerarqua de usuario. Cada categora de usuario puede tener necesidades sutilmente diferentes, tal vez quiera interactuar con la WebApp en diferentes formas y quiz requiera funcionalidad y contenido nicos. Esta informacin se deriva duran te el anlisis de requisitos, pero se revisa como el primer paso en el diseo de la in terfaz.Dix [DIX99] argumenta que un ingeniero Web debe disear una interfaz de modo que responda tres preguntas primarias para el usuario final: La mayora de, si no es que todas, las directrices presentadas en el captulo 12 se aplican igualmente al diseo de interfases WebApp. Si todava no lee e capituto 12. hgalo en este momentoSi es probable que los usuarias puedan en- tror o su WebApp en varias ubmiones y niveles en lo jerarqua de contenido, asegrese de disear cada pgina con caractersticas de navegacin que coadunan al usuario a los otros puntos de inters.%CLAVEUno bueno interfaz WebApp es comprensible e indulgente, y ofrece ol usuario uno sensacin de control.Dnde estoy? La interfaz debe 1) ofrecer una indicacin de que se ha tenido acceso a la WebAppTodas las personas han marcado alguna pgina de un sitio Web, slo para volver a visitarla ms- de y no tener que dar indicaciones del sitio Web o del contexto de la pgina (as como para e moverse hacia otra ubicacin dentro del sitio). y 2) informar al usuario de su ubicacin en la jerarqua de contenido.Qu puedo hacer ahora3 La interfaz siempre debe ayudar al usuario a entender sus opciones actuales: qu funciones estn disponibles, qu vnculos estn vivos qu contenido es relevante.Dnele he estado, a dnde voy? La interfaz debe facilitar la navegacin. En conse cuencia, debe proporcionar un "mapa" (implementado en una forma fcil de entende de dnde ha estado el usuario y qu rutas puede tomar para moverse a cualquir parte dentro de la WebApp.La interfaz de una WebApp efectiva debe proporcionar respuestas a cada una de e- tas preguntas conforme el usuario final navega a travs del contenido y ia funcin; lidad.Principios y directrices del diseo de la interfazBruce Tognozzi [TOGOl] define un conjunto de caractersticas fundamentales qot deben presentar todas las interfaces y, al hacerlo, establece una filosofa que deb: seguir todo diseador de interfaz de WebApp:Las interfaces efectivas son visualmente aparentes e indulgentes, e implantan en sus usuarios una sensacin de control. Los usuarios ven rpidamente la envergadura de sus op dones, comprenden cmo lograr sus metas y hacen su trabajo.Las interfaces efectivas no preocupan al usuario con los trabajos internos del sistema El trabajo se guarda de manera cuidadosa y continua, con la opcin total de que el usua rio deshaga cualquier actividad en cualquier tiempo.Las aplicaciones y servicios efectivos realizan un mximo de trabajo mientras demar dan un mnimo de informacin a los usuarios.Con la finalidad de disear interfaces que muestren dichas caractersticas nozzi [TOGOl] identifica un conjunto de principios de diseo primordiales:Los principios originales de Tognozzi se han adaptado y extendido con el fin de aprovechar.> 4 este libro. Vase [TOGOl] para mayores detalles acerca de estos principiosAnticipacin.- una WebApp se debe disear de modo que anticipe el siguiente r.'V miento del usuario. Por ejemplo, considere una WebApp de soporte al cliente cesa rrollada para un fabricante de impresoras para computadora. Un usuario ha solicitad* un objeto de contenido que presenta informacin acerca de un controlador de rnj presora para un sistema operativo lanzado recientemente. El diseador ce li WebApp debe anticipar que el usuario pueda solicitar una descarga del controlao.ily debe proporcionar facilidades de navegacin que permitan hacerlo sin solicitarle al usuario una bsqueda de esta capacidad.de una Dsbe estar tpe ojustarse uteprinci- tos aqu.Comunicacin: la interfaz debe comunicar el estado de cualquier actividad que haya iniciado el usuario. La comunicacin puede ser obvia (por ejemplo, un mensaje de texto) o sutil (por ejemplo, una hoja de papel que se mueva a travs de una impresora para indicar que la impresin est en camino). La interfaz tambin debe comunicar el estado del usuario (por ejemplo, la identificacin del usuario) y la ubicacin dentro de la jerarqua de contenido de la WebApp.Consistencia: el uso de los controles de navegacin, mens, iconos y esttica (por ejemplo, color, forma, plantilla) deben ser consistentes a travs de toda la WebApp. Por ejemplo, si el texto subrayado de azul implica un vnculo de navegacin, el contenido nunca debe incorporar texto subrayado en azul que no implique un vnculo Toda caracterstica de la interfaz debe responderen una forma que sea consistente con las expectativas del usuario.Tognozzi [TOGOl] seala que la nica forma de garantizar que las expectativas del usuario se comprendan adecuadamente es mediante una amplia prueba por oarte del usuario (captulo 20)Autonoma controlada: la interfaz debe facilitarle al usuario el movimiento a travs de toda a WebApp, pero lo debe hacer en una forma que refuerce las convenciones de navegacin establecidas para la aplicacin. Por ejemplo, la navegacin hacia porciones seguras de la WebApp se deben controlar con la identificacin del usuario y su contrasea, y no debe existir mecanismo de navegacin que permita al usuario dar la vuelta a dichos controles,Eficiencia: el diseo de la WebApp y su interfaz deben optimizar la eficiencia laboral del usuario, no la eficiencia del ingeniero Web que la disea y la construye o el ambiente cliente-servidor que la ejecuta. Tognozzi [TOGOl] seala esto cuando escribe: "Esta simple verdad es por lo que es importante para todos los involucrados en un proyecto de software el apreciar la importancia de hacer propia la meta de productividad del usuario y entender la diferencia vital entre construir un sistema eficiente y fortalecer a un usuario eficiente."Flexibilidad: la interfaz debe serlo suficientemente flexible como para permitir que algunos usuarios realicen tareas directamente y otros exploren la WebApp en una forma un tanto aleatoria. En todo caso, debe permitirle al usuario entender dnde est y ofrecerle la funcionalidad para que pueda deshacer los errores y volver a trazar las rutas de navegacin mal elegidas.Enfoque: la interfaz de a WebApp (y el contenido que presenta) debe enfocarse en la(s} tarea(s) importantefs) para el usuario. En toda hipermedia existe una tendencia para dirigir al usuario hacia contenido mal relacionado. Por qu? Porque es muy fcil hacerlo! El problema es que el usuario rpidamente se puede perder en muchas capas de informacin de apoyo y perder el sitio del contenido original que quera en primer lugar.PARTE TRES APLICACIN DE LA INGENIERA WEBPARTE TRES APLICACIN DE LA INGENIERA WEBLey de Fitt: ,JE1 tiempo para adquirir un objetivo es una funcin dla distancia a la que se halla y de su tamao" |TOGOl], Con base en un estudio realizado en la dcada de 1950 [FIT64|, la ley de Fitt "es un mtodo efectivo de modelar rpidos movimiente : dirigidos, donde un apndice (como una mano) parte del reposo en una posicin de inicio especfica y se mueve hacia el reposo dentro de una rea establecida como objetivo" [ZHA02]. Si una tarea del usuario define una secuencia de selecciones o entrada.' estandarizadas (con muchas opciones diferentes dentro de la secuencia), la prime- seleccin (por ejemplo, seleccin de ratn) debe estar fsicamente cerca de la siguier te seleccin. Por ejemplo, considere la interfaz de la pgina de inicio de una WebAp: en un sitio de comercio electrnico que vende aparatos electrodomsticos.Cada opcin del usuario implica un conjunto de elecciones o acciones de segir- miento del usuario. Por ejemplo, una opcin "comprar un producto" requiere que e usuario ingrese una categora de producto seguida por el nombre de ste. La categora del producto (por ejemplo, equipo de audio, televisores, reproductores de DAT 1 aparece como un men desplegable tan pronto como se selecciona "comprar un pr ducto". En consecuencia, la siguiente eleccin es inmediatamente obvia (est cerca y el tiempo para adquirir es despreciable. Si, por otra parte, la eleccin aparece e-n un men ubicado en el otro lado de la pantalla, el tiempo para que el usuario lo a~ quiera (y luego realice ia eleccin) ser demasiado.Objetos de interfaz humana: Se ha desarrollado una gran librera de objetos de int - faz humana reutilizables para WebApps. selas. Es posible adquirir, de varas libre' as de objetos, cualquier objeto de interfaz que pueda ser "visto, escuchado, tocado o os algn otro modo percibido" jTOGOlj por un usuario final.or nmero de pasos. Acorte la distancia entre et usuario y su meto.'Reduccin de latencia: Ms que obligar al usuario a esperar el fin de alguna opera* cin in tema (por ejemplo, descargar una imagen grfica compleja), a WebApp debe usri la multitarea en una forma que permita al usuario proceder con el trabajo como s id operacin hubiese sido completada. Adems de reducir la latencia, Las demoras debesl reconocerse de modo que el usuario comprenda lo que est ocurriendo. Esto inc ye i) proporcionar retroalimentacin de audio (por ejemplo, un "clic" o campana:., t cuando una seleccin no genera una accin inmediata de la WebApp; 2) despleg-d un reloj animado o barra de progreso para indicar que el procesamiento est en rr.- J cha; 3) ofrecer algn entretenimiento (por ejemplo, una animacin o presentador ja texto) mientras ocurra un procesamiento largo.Facilidad de aprendizaje: La interfaz de una WebApp se debe disear para mininrzM el tiempo de aprendizaje y, una vez aprendido, reducir! reaprendizaje requerido cun] do se vuelve a visitarla WebApp. En general, la interfaz debe acentuar un diseo sinj pie e intuitivo que organice el contenido y la funcionalidad en categoras obvias t ari ra el usuario.CAPTULO 19 MODELADO DE DISEO PARA APLICACIONES WEB#CAPTULO 19 MODELADO DE DISEO PARA APLICACIONES WEB577 CAPTULO 19 MODELADO DE DISEO PARA APLICACIONES WEB#CAPTULO 19 MODELADO DE DISEO PARA APLICACIONES WEB577Metforas: una interfaz que utilice una metfora de interaccin es ms fcil de apren dery de usar, en tanto la metfora sea apropiada para a aplicacin y el usuario. Una metfora debe llamar imgenes y conceptos de la experiencia del usuario, pero no necesita ser una reproduccin exacta de una experiencia del mundo real. Por ejemplo, un sitio de comercio electrnico que implementa el pago de cuentas automatizado para una institucin financiera usa una metfora de lista de verificacin (no de manera sorprendente) para asistir al usuario en la especificacin y la calendarizacin de los pagos de cuentas. Sin embargo, cuando un usuario "escribe" un cheque, no necesita ingresar el nombre completo del pagador sino que puede elegir de una lista de pagadores o hacer que el sistema seleccione con base en las primeras letras escritas. La metfora permanece intacta, pero el usuario obtiene asistencia de la WebApp.J|aeisson una Bkset&po/que4i s avenencia |m: 'so/. Slo *Me segurat que que $e eli- a jbj conocido *e jMwrMantenerla integridad del producto de trabajo. Un producto de trabajo (por ejemplo, una forma completada por el usuario, una lista especificada por el usuario) debe guardarse de manera automtica de modo que no se perder si ocurriese un error. Todo mundo ha experimentado la frustracin asociada con el hecho de completar un gran formulario WebApp slo para que el contenido se pierda debido a un error (que comete el usuario, la WebApp o la transmisin de cliente a servidor). Para evitar esto la WebApp se debe disear para autoguardar todos los datos especificados por el usuario.Legibilidad.- toda la informacin presentada a travs de la interfaz debe ser legible para jvenes y viejos. El diseador de la interfaz debe enfatizar los estilos de letra legible, tamaos de fuente y opciones de fondo de color que mejoren el contraste.Estado de rastro.- Cuando sea adecuado, el estado de la interaccin del usuario debe rastrearse y almacenarse de modo que un usuario pueda salir y regresar ms tarde al lugar de donde sali. En general, las cookies se pueden disear para almacenar informacin de estado. Sin embargo, las cookies son una tecnologa controvertida, y otras soluciones de diseo pueden ser ms aceptables para algunos usuarios.Navegacin visible: una interfaz de WebApp bien diseada proporciona 'la ilusin de que los usuarios estn en el mismo lugar, y que se les lleva el trabajo hasta sus lugares" [TOGOl], Cuando se usa este enfoque la navegacin no es preocupacin del usuario. En lugar de eso, el usuario recupera objetos de contenido y selecciona funciones que se despliegan y ejecutan por medio de la interfaz.Repaso del diseo de a interfazl escenario; Oici na de Doug Mi - Lo converso* in: r JDoug : Vinod, el equipo y t tuvieron >Objetos de contenidoRepresentacin del diseo de los objetos de contenido.La relacin entre objetos de contenido, definida como parte del modelo de anlis* WebApp (por ejemplo, figura 18.3), y los objetos de diseo que representan conte-o- do es anloga a la relacin entre las clases de anlisis y los componentes de di ser descritos en el captulo 11. En el contexto de la ingeniera Web un objeto de contenido est alineado de manera ms cercana con un objeto de dato para software co*i0. .1 yl!LlJ UJ >[Dsseripc.nDeMorlehngIcofor texto' estilo fuente tamario fjenle espaood-o lineo"v'' Video dimensin ftori zonto 1sr&r* ivolumen audio .DescripcinTcr ::: color te*l slo fusqte fai