DISEO DE UN SITIO WEB Cuando disea un sitio Web, puede usar algunos de los principios del diseo de pantallas.

Sin embargo, recuerde que aqu la palabra principal es sitio. A los primeros documentos mostrados en Internet mediante el protocolo http se les llam pginas de inicio, pero pronto qued muy claro que las compaas, universidades, gobiernos y las personas no iban a desplegar una sola pgina. El trmino sitio Web reemplaz a pgina de inicio, el cual indica que la serie de pginas se debera organizar, coordinar, disear, desarrollar y mantener en un proceso ordenado. Los diversos navegadores despliegan imgenes de forma diferente, y la resolucin de pantalla tiene un gran impacto en el aspecto de un sitio Web. Las resoluciones estndar son 1024 X 768 pceles o 1600 X 1200 pixeles. El problema es ms complicado por el uso de dispositivos porttiles que se usan para navegar en Web. La complejidad aumenta cuando se comprende que cada persona podra ajustar su navegador para usar diferentes fuentes y podra desactivar el uso de JavaScript, cookies y otros elementos de programacin en Web. Claramente, el analista debe tomar muchas decisiones al disear un sitio Web. Adems de los elementos de diseo generales discutidos anteriormente en este captulo, hay lineamientos especficos adecuados para el diseo de sitios Web de calidad profesional. Lineamientos generales en la creacin de diseo web Use herramientas profesionales Use software llamado editor Web tal como Macromedia Dreamweaver o Microsoft FrontPage. Definitivamente el precio de estas herramientas vale la pena. Ser ms creativo y terminar el sitio Web ms rpido que si trabajara directamente con HTML (lenguaje de marcado de hipertexto). Estudie otros sitios Web Observe sitos Web que considere atractivos. Analice qu elementos de diseo se estn usando y vea cmo funcionan, despus intente emular lo que ve mediante la creacin de pginas prototipo. (Cortar y pegar fotos o cdigo no es tico o legal, pero s se puede aprender de otros sitios.} Use los recursos que Web ofrece Observe sitios Web que proporcionan sugerencias para el diseo. Un sitio tal es useit.com. Examine los sitios Web de diseadores profesionales En la figura 11.13 se mencionan algunas casas de diseo, junto con algunos de los sitios Web que desarrollaron y que son visitados y elogiados con frecuencia. Conforme observe estas pginas, pregntese: "Qu funciona? Qu no funciona? Cmo pueden interactuar los usuarios con el sitio? Por ejemplo, el sitio tiene hiperenlaces para enviar correo a ciertas direcciones, formularios interactivos para llenar, encuestas para el cliente, juegos, exmenes, salones de conversacin, etctera?" Use las herramientas que ha aprendido La figura 11.14 proporciona un formulario que los diseadores Web han usado con xito para evaluar sistemticamente las pginas Web. Podra querer usar copias del formulario para ayudarle a comparar y contrastar los sitios Web que visitar conforme aprenda el diseo de pginas Web. Consulte libros Algo que puede agregar a su experiencia en este nuevo campo es leer sobre el diseo Web.: Revise algunos ejemplos pobres de pginas Web Repase las pginas Web pobres y recuerde evitar esos errores. Examine el sitio Web encontrado en www.webpagesthatsuck.com. A pesar de su nombre contracultural, ste es un sitio maravilloso que proporciona vnculos a muchos sitios diseados pobremente e indica los errores que los diseadores han cometido.

Sin embargo, el sitio tambin proporciona vnculos al material que lleva al lector a travs del proceso de creacin de un sitio Web, mejorando la navegacin del sitio, aprendiendo Java-Script y mucho ms. Los autores son divertidos y estn alertas para identificar los sitios Web buenos y malos, y proporcionan abundante informacin til. Elabore sus propias plantillas Si usa una apariencia estndar de pgina para la mayora de las pginas que desarrolla, tendr su sitio Web instalado y funcionando rpidamente, con un aspecto agradable y consistente. Los sitios Web se podran desarrollar mediante hojas de estilo en cascada que permiten al diseador especificar una sola vez el color, tamao de fuente, tipo de fuente y otros muchos atributos. Estos atributos se almacenan en un archivo de hoja de estilo y despus se aplican a muchas pginas Web. Si un diseador cambia una especificacin en el archivo de hoja de estilo, todas las pginas Web que usan dicha hoja de estilo se actualizarn para reflejar el nuevo estilo. Use plug-ins, audio y vdeo con moderacin Es maravilloso tener las caractersticas con que cuentan las pginas profesionales, pero recuerde que no todos los que observan su sitio tienen cada plug-in nuevo. No desaliente a los visitantes a su pgina. Disee con anticipacin Los sitios Web buenos son bien planeados. Ponga atencin a lo siguiente: 1. Estructura. 2. Contenido. 3. Texto. 4. Grficos. 5. Estilo de presentacin. 6. Navegacin. 7. Promocin. Cada uno de estos elementos se describe con ms detalle a continuacin. Estructura. Disear la estructura de un sitio Web es uno de los pasos ms importantes en el desarrollo de un sitio Web profesional. Piense en sus metas y objetivos. Cada pgina en la estructura Web global debe tener un mensaje distinto u otra informacin relacionada. A veces es til examinar sitios profesionales para analizar su contenido y caractersticas. Para poder disear y mantener una estructura slida, un administrador Web se puede beneficiar del uso de una de las muchas herramientas de diagramacin y mapeo de sitios Web disponibles. Muchos paquetes de software, como Microsoft Visio, tienen opciones de mapeo en Web integradas. Aunque son tiles para el desarrollo, estas herramientas se vuelven an ms importantes en el mantenimiento de un sitio Web. Dada la naturaleza dinmica de Web, los sitios que se vinculan a su sitio se podran mover en cualquier momento, esto requiere que usted, o su Webmaster, actualicen esos vnculos. Contenido. El contenido es crtico. Sin nada que decir, su sito Web fallar.Proporcione algo importante a los visitantes del sitio Web. Proporcione algunas sugerencias oportunas, informacin importante, una oferta o cualquier actividad que pueda proporcionar que sea interactiva y mueva a los usuarios de un modo de navegacin a uno interactivo. La "pegajosidad" es una cualidad que puede poseer un sitio Web. Si un usuario permanece en su sitio por un periodo prolongado, su sitio tiene un alto grado de pegajosidad. Por eso un comerciante incluye muchos artculos de inters en un sitio. Texto. No olvide que tambin el texto es importante. Cada pgina Web debe tener un ttulo. Coloque palabras significativas en la primera frase que aparece en su pgina Web. Haga saber a las personas que han navegado al sitio Web correcto. La escritura clara es especialmente importante. Grficos. La siguiente lista proporciona detalles sobre la creacin de grficos eficaces para los sitios Web. 1. Use uno de los dos formatos de imagen ms comnmente usados, JPEG o GIF. Los JPEGs son mejores para las fotografas, y los GIFs son mejores para las imgenes grficas o de lnea. Los GIFs se limitan a 256 colores pero podran incluir un fondo transparente, pixeles que permiten que el fondo se muestre a travs de la imagen GIF.Examine su sitio Web en una variedad de monitores y resoluciones de pantalla. Las escenas y el texto que tienen buena apariencia en un monitor de vdeo de alta calidad podran no tener el mismo aspecto para otros que usan equipo de baja calidad. Estilo de presentacin. La siguiente lista proporciona detalles adicionales sobre cmo disear pantallas de entrada atractivas para los sitios Web. 1. Proporcione una pantalla de entrada (tambin llamada pgina de inicio] que introduce al visitante al sitio Web. La pgina se debe disear para cargar rpidamente. Una regla general til es disear una pgina que cargar en 14 segundos, suponiendo que un usuario tiene un mdem de 56K.La pgina de inicio debe contener varias opciones, parecido a un men. Una forma fcil de lograrlo es disear un grupo de botones y posicionarlos en el lado izquierdo o en la parte superior de la pantalla. Estos botones se pueden vincular a otras pginas en el mismo sitio Web o a diferentes sitios Web. Navegacin. Para usted es divertido seguir los vnculos en Web? La respuesta ms comn es: depende. Cuando descubre un sitio Web que se carga fcilmente, tiene vnculos significativos y le permite volver con facilidad a los lugares que desee, entonces piensa que es divertido.Lo ms importante, observe la regla de los tres clics. Un usuario debe poder desplazarse de la pgina en que actualmente est a la pgina que contiene la informacin que necesita en solo tres clics del ratn.

Promocin. Promover su sitio. No asuma que los motores de bsqueda lo encontrarn en seguida. Enve su sitio a varios motores de bsqueda de vez en cuando. Incluya palabras clave, llamadas metaetiquetas, que los motores de bsqueda usarn para vincular peticiones de bsqueda a su sitio. Tambin puede comprar el software para hacer este proceso ms fcil. DISEO DE PGINAS DE INTRANET E INTERNET Hay ms sugerencias sobre el diseo de un adecuado formulario para contestar en Internet o una Intranet que se deben observar ahora que ya conoce algunos de los aspectos elementales del diseo de formularios y pantallas de entrada. Los lineamientos incluyen lo siguiente: 1. Proporcione instrucciones claras, ya que los usuarios Web podran no estar familiarizados con la terminologa de la computadora. 2. Demuestre una secuencia de entrada lgica para los formularios, sobre todo porque los usuarios podran tener que desplazarse a un rea de la pgina que al principio puede no ser visible. 3. Use una variedad de cuadros de texto, botones de comando, mens desplegables, casillas de verificacin y botones de opcin para realizar funciones especficas y crear inters en el formulario. 4. Proporcione un cuadro de texto desplazable si no sabe con certeza cunto espacio necesitarn los usuarios para responder a una pregunta o qu lenguaje, estructura o forma utilizarn los usuarios para introducir datos. 5. Prepare dos botones bsicos en cada formulario que se contestar en la Web: Enviar y Limpiar contenido. 6. Si el formulario es largo y los usuarios se deben desplazar en forma excesiva, divida el formulario en varios formularios simples en pginas separadas. 7. Cree una pantalla de retroalimentacin que indique que se rechaza el envo de un formulario a menos que los campos obligatorios estn completados correctamente. La pantalla de formulario devuelta puede proporcionar comentarios detallados al usuario en un color diferente. El rojo es apropiado aqu. Por ejemplo, podra ser necesario que un usuario complete el campo de pas, o que indique un nmero de tarjeta de crdito si ese tipo de pago se ha activado. Las aplicaciones de comercio electrnico implican ms que slo un diseo adecuado de sitios Web. Los clientes necesitan sentirse seguros de que compran la cantidad correcta, que consiguen el precio correcto y de que el costo total de una compra de Internet, incluyendo los gastos de envo, es lo que esperan. La forma ms comn de establecer esta confianza es usar la metfora de un carrito o bolsa de compras. La figura 12.15 muestra los contenidos de un carrito de compras para un cliente que hace una compra. Una caracterstica importante del carrito de compras es que el cliente puede revisar la cantidad del artculo pedido o puede quitar el artculo por completo. -En cuanto al software, hay una marcada tendencia a usar SharePoint, la plataforma de colaboracin de Microsoft, junto a otras tecnologas como Google Search Appliance. Sin embargo, el estudio subraya que ninguna solucin especfica es garanta de xito. -Confianza en el uso de plantillas para desarrollar interfaces de usuario consistentes. -Firmes polticas editoriales que aseguran la calidad del contenido. Sealan como caso de xito el de la intranet de Enbridge, en la que a cada pgina se le asigna un responsable para que se encargue de que la informacin est actualizada en todo momento. -Numerosas e interesantes presentaciones de nuevas tendencias en la portada de la intranet. -Personalizacin basada en roles para atraer a los usuarios hacia el contenido que es relevante para ellos y hacer las aplicaciones ms tiles para su trabajo. -Amplias funcionalidades de personalizacin, que permiten a los usuarios adaptar la interfaz segn sus necesidades. Por ejemplo, con diseos mejorados de los populares Enlaces rpidos/Mis Atajos. -Mejora de las bsquedas, con una especial atencin a la herramienta de bsqueda avanzada. -Uso intensivo de metodologas de usabilidad: desde el simple test con usuarios alcardsorting, estudios de campo y prototipado de personajes. -Mtricas de ROI (Retorno de la Inversin, en sus siglas en ingls) no enfocadas a la obtencin de beneficio econmico sino al incremento del uso y a la satisfaccin de los empleados-usuarios. Un ejemplo es Trend Micro, que ahorr 1.6 millones anuales al organizar muchas de sus reuniones a travs de la intranet.