TRUCOS DISEÑO WEB

download TRUCOS DISEÑO WEB

of 11

Transcript of TRUCOS DISEÑO WEB

  • 8/8/2019 TRUCOS DISEO WEB

    1/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    1

    TRUCOS DISEO WEBDiseo web Valencia

    Complethost Soluciones Internet

    Registro de dominios: .com , .net, .es, .info, .org , .biz, .tv, .eu,.mobi, .in, .name, .me, .us, .uk, .tel , y ms de 50 extensiones

    " Complethost posiblemente la mejor empresa de hosting en Valencia"

  • 8/8/2019 TRUCOS DISEO WEB

    2/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    2

    10 consejos bsicos para conseguir un buen diseo de su web

    Por favor, no ponga melodas para recibir a los visitantes de su web, es una invitacin directa aque se vayan.

    No aburra al visitante con cartas de bienvenida del presidente de la compaa ni cosasparecidas, muestre lo que el visitante quiere ver.

    No utilice grficos o imgenes que tarden demasiado en cargarse, la mayora de usuariostienen conexiones a Internet lentas.

    No utilice la ltima tecnologa en diseo, ni fuerce a los visitantes a descargar un "plug-in"determinado para ver su web. No todo el mundo tiene las ltimas versiones de losnavegadores, ni tiene ganas de descargarse el "plug-in"

    Los diseos deben ser como mnimo igual de satisfactorios para los usuarios de Explorer oNetscape, y para los que tengan una pantalla con resolucin 800 x 600 o 640 x 480 pxeles.

    Utilice preferentemente los fondos blancos, son los ms agradables para los usuarios. A menosque sea un profesional, no utilice imgenes de fondo.

    Evite colores estridentes, pero dele alegra a la pgina combinando colores adecuadamente.

    No utilice letras de tamao demasiado grande, combine como mximo dos tipologas diferentesde letras.

    Sea coherente en el diseo global del web, es preferible un diseo parecido entre todas laspginas, a pginas de un mismo web totalmente diferentes.

    El diseo debe facilitar la navegacin a travs de la web. El visitante debe poder saber dndese encuentra en cualquier momento y qu debe hacer para ir a una pgina determinada.

    Como disear una portada que cautive a sus visitantes

    Por poco que os movis en Internet en los sitios de marketing y comercio, veris que losaspectos de promocin y publicidad de webs son profusamente tratados en todas partes. Sinembargo, no hay mucho sobre un tema que es clave para el xito de todo sitio: las portadas.Aqu le contamos que debe tener en cuenta para disear una home page cautivadora.

    Efectivamente, no sirve de nada invertir en promocin para atraer a muchos internautas anuestras pginas si, en el momento en que se acerquen, pasan breves instantes ojeando laportada de nuestro sitio web y, seguidamente, se van hacia otros lugares.

    Cmo los captamos? Cmo los retenemos? Cmo conseguimos que se queden el tiemposuficiente para conocer nuestra oferta y permitirnos iniciar con ellos una relacin con visos decontinuidad?

    Antes, intentemos definir cules son los objetivos a cubrir por nuestro sitio web.

    1. "Enganchar" los contactos que se acercan a visitarnos por primera vez2. Conseguir que nos cedan su direccin de correo-e junto a la autorizacin para mandarlesinformacin peridicamente

    3. Interesar permanentemente tambin a los visitantes "repetidores"

  • 8/8/2019 TRUCOS DISEO WEB

    3/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    3

    Estos deberan ser los objetivos prioritarios de nuestro sitio. Si los alcanzamos, yadispondremos de la base para la continuacin del proceso de la venta. Podremos entoncesestablecer relaciones permanentes con nuestros clientes, ganarnos su confianza, generarventas y ventas repetitivas.

    Pero se ha planteado cmo alcanzar estos objetivos?

    Ser fundamental que nuestra pgina de portada cumpla una serie de requisitos. De ello sederivarn consecuencias tambin para la estructura del conjunto de nuestro sitio web.

    Pero veamos ahora, qu va a necesitar nuestra portada para cumplir los objetivos: disear laportada pensando en el cliente. Qu le gustara encontrar a nuestro cliente? Cmo podemosfacilitarle la vida? Cmo podemos servirle mejor?

    El sitio web no es para nosotros ni para nuestra empresa ni para nuestro consejero delegado.El sitio web es para nuestros clientes.

    Y lo mejor es pensar en lo que hacemos cada uno de nosotros al entrar a un sitio web quevisitamos por primera vez. Lo que yo hago es sobrevolar con la vista el conjunto de la pgina a

    la caza de esa palabra o ese detalle que capta mi atencin. Desde luego, en el primer vistazono suelo dedicarme a leer grandes prrafos. Mi inters ha de ser captado de alguna otra forma,de una forma rpida, al vuelo.

    El visitante debe encontrar en la portada los siguientes elementos:

    1) Debe poder identificar qu es lo que proporciona el sitio web a sus visitantes. Es decir, "paraqu le sirve a l ese sitio web".

    2) Los visitantes noveles deben encontrar "al vuelo" esos ganchos que les harn decidiradentrarse en el sitio.

    3) Debe existir tambin una forma de acceso rpida y directa a las distintas secciones para el

    visitante habitual que ya sabe lo que va a buscar.

    4) Debe disponer de alguna (o varias) forma de obtener la direccin de correo-e de cadavisitante que entra. Para ello, la herramienta ideal es un boletn peridico. Les ofrecemos lasuscripcin gratuita. Para mandrselo, obviamente, necesitamos su direccin.

    Otras opciones son el suministro de un informe concreto, el rellenar una encuesta, a cambio delo cual, participarn en un sorteo o recibirn un determinado servicio durante 3 meses (depaso, les hacemos conocer el servicio y, si les gusta, ya se suscribirn al cabo de los tresmeses)

    5) Por ltimo, la cantidad de informacin debe ser la justa. Ni poca, ni mucha. Ni tan poca queresulte insustancial -los clientes no harn el esfuerzo de entrar a otra pgina sin saber lo que

    van a encontrar. Ni tanta que la pgina resulte sobrecargada con mltiples textos de letramenuda. Esa sobrecarga de informacin tiene como principal efecto el enmascarar lainformacin importante, sa que es capaz de captar la atencin del cliente.

    Bien, pero basta ya de generalidades! Vayamos al grano!

    Qu tiene que hacer para disear una portada. Esta es una gua que os permitir disearpginas completamente personalizadas para cada caso, que a la vez cumple con los requisitosexigidos para un buen marketing.

    La pgina de portada, como hemos comentado, debe ser til a visitantes noveles y repetidores.A los primeros, debe captarlos. A los segundos, llevarles lo ms rpidamente posible a laseccin a la que se dirigen. Pongamos, pues, dos formas distintas de salir de ella para penetrar

    en el sitio web por dos vas distintas.

  • 8/8/2019 TRUCOS DISEO WEB

    4/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    4

    La entrada de los repetidores......

    Consiste en situar un men de secciones y sub-secciones, probablemente en un lateral, paraque cada uno pinche la seccin que le interese para acceder a ella directamente. Muy bien.Claro y sencillo.

    .....y la de los nuevos contactosLa otra forma de entrar hacia el sitio desde la portada es "poniendo un espejo que les devuelvasu propia imagen". Eso es! Si el visitante se ve retratado en la pgina pensar "se soy yo!Aqu hablan de m y de lo que yo busco. ste es el sitio que yo buscaba".

    Queris un ejemplo? Imaginemos una tienda virtual de ciclismo. Podramos identificar variostipos de clientes potenciales: el profesional, el aficionado y el cicloturista, que slo quiere unabicicleta de montaa para salir de vez en cuando con sus amigos.

    Lo que yo propongo es presentar una llamada explcita a cada uno de ellos en nuestra portada.Para el tercer cliente pondramos, por ejemplo, "Te gusta el cicloturismo? Haz clic aqu y pasaa nuestro ciclomundo (o bien "encuentra todo lo que necesitas" o bien "Tenemos unas pginas

    que te encantarn")". Difcilmente, un visitante que responda a ese perfil dejar de entrar.

    Bien, ya tenemos nuestra portada con la doble va de salida. Tambin disponemos de todas laspginas de contenidos (artculos, catlogo, pgina de pedidos, enlaces, foros, etc.) Bien, pero,como consecuencia de la portada que hemos creado, nos falta algo. Debemos crear un nuevonivel de pginas.

    En efecto, volviendo a nuestro ejemplo, una vez que el clicloturista ha pulsado el botn que lepedamos debe entrar a una pgina ntegramente dedicada a l, a los cicloturistas.

    En esa pgina debemos presentarle todas las opciones, productos y servicios que va aencontrar para l a continuacin. Por ejemplo, un sitio como ese debera ofrecer el catlogo debicicletas y accesorios, pero tambin informacin de rutas cicloturistas, un foro de contactos

    para intercambio de materiales usados, un tablero de anuncios para la organizacin deexcursiones conjuntas, etc.

    Por lo tanto, en esa pgina, que llamo de orientacin, se trata de contarle a nuestro nuevovisitante cicloturista todas las secciones de que dispone en nuestro sitio y qu le ofrece cadauna de ellas. Desde esa pgina, nuestro cicloturista podr acceder directamente a cada una delas secciones que le ofrecemos.

    Cuando ese mismo cicloturista regrese a visitarnos, probablemente ya acceder directamente ala seccin que busque desde el men de la portada. Claro, ahora ya es un visitante repetitivo.

    La aplicacin de este modelo os puede servir, no slo para mejorar sustancialmente losresultados de vuestro sitio web, sino que tendr el efecto de cambiar la forma que tenais de

    concebirlo. El slo hecho de intentar aplicar este modelo, os obligar a pensar en los tipos declientes que tenis, o queris tener, en los contenidos que podis ofrecer a cada uno de ellos y,en definitiva, os ayudar a replantear desde una ptica ms adecuada al medio Internet, todavuestra presencia en la red.

  • 8/8/2019 TRUCOS DISEO WEB

    5/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    5

    Consejos para la correcta elaboracin de MetaTags

    En este artculo hablaremos del uso de las MetaTags, cmo crearlas correctamente y la funcinque desempea cada una de ellas.

    A la hora de empezar a disear una pgina web hay que tener en cuenta que tambin hay queoptimizarla para los buscadores. Un buen webmaster debe de saber disear una pginaatractiva pero que a la vez tenga una serie de requisitos fundamentales para que losbuscadores puedan extraer la informacin de la pgina web y aadirla a su ndice, obteniendo

    una buena posicin.La creacin de MetaTags es fundamental para que los grandes buscadores (o motores debsqueda que utilizan robots para catalogar las pginas web) como Altavista, Google,Excite..etc indexen tu pgina web correctamente en su ndice. Los directorios como Yahoo oTerra no utilizan esta informacin (ya hemos hablado de los directorios en artculos anteriores).Si te conectas a la pgina de agregar URL del Buscador Altavista:

    http://es-es.altavista.com/s?spage=help/addurl.htm&t=11

    Simplemente hay que introducir la direccin URL, nada ms. No hace falta incluir ttulo, nipalabras clave, ni email de contacto. Esto se debe a que toda la informacin de la pgina web

    es extrada por el robot Scooter de los cdigos Meta de la pgina web.

    Insertar MetaTags es una manera de controlar la informacin que el buscador extraer de tupgina y que ser la que tus posibles clientes vern listada en el buscador.Los buscadores leen las MetaTags y por medio de esta informacin asignan la categora quecorresponde a tu pgina web as como la posicin o ranking respecto a otras pginas webcatalogadas en la misma categora.

    EL ORDEN DE LAS META TAGS

    Introduce el ttulo de tu pgina web utilizando palabras clave importantes, de 40 a 60caracteres recomendados

  • 8/8/2019 TRUCOS DISEO WEB

    6/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    6

    Fjate que las Meta Tags empiezan y terminan por . Tienen que estar bienformateadas.

    Puedes aadir comentarios adicionales despus de la Tag , siempre y cuando estncorrectamente formateados y empiecen y terminen por:

    Esta Tag no es obligatoria.

    TAG TITLE - Esta es la informacin que los buscadores exponen como ttulo de tu pgina web.Los internautas leern tu ttulo y decidirn hacer click o no en tu web. Esta Tag es tambinimportante para establecer el tema y contenido de tu pgina web por lo que debes utilizarpalabras clave en el ttulo, unas 5 palabras clave son suficientes (mximo de 7 a 9). Es tambinimportante para la posicin que ocupes en el buscador por palabra clave.Tambin sirve para visualizar el ttulo de nuestra web en la lnea superior del navegadorcuando un Internauta se conecta a nuestra pgina web.

    TAG DESCRIPTION - Al igual que el Ttulo, la mayora de los buscadores exponen elcontenido de esta Tag. Debes redactar una descripcin que incite a tus posibles clientes ahacer click en tu link volviendo a utilizar las palabras clave ms importantes con frecuencia. Esel texto descriptivo de nuestra web.

    TAG KEYWORDS -La Meta Tag Keywords es mucho menos importante que el Ttulo yDescripcin. Esta Tag est especialmente indicada para sugerir al buscador, sinnimos, pluraly singular, maysculas y minsculas de las palabras clave utilizadas en el ttulo y descripcin.Intenta utilizar palabras clave que estn relacionadas con el contenido y tema de tu pgina weby pon las ms importantes las primeras de la lista. Utiliza frases cortas o cadenas de tres o mspalabras.

    TAG ROBOTS - Esta es una simple instruccin al robot del buscador para indicar cmo ycundo debe indexar la pgina web. "index/follow" indica al robot que debe indexar la pginaweb y seguir los links a las dems pginas interiores."noindex/nofollow" indica al robot que noindexe la pgina web ni tampoco siga los links

    .Otras variaciones son index/nofollow and noindex/follow.

    Esta tag no es obligatoria. Si no la tienes los robots indexarn igualmente tu pgina web. Perosi necesitas que una de las pginas no sean indexada (por ejemplo una pgina especial

    nicamente para clientes registrados o una pgina que no est relacionada con el contenido detu web) es necesario insertar esta MetaTag para indicar al robot que NO indexe la web.La Tag "revisit-after" indica al robot cuando tiene que volver a visitar tu web, si actualizas muy amenudo pon 14 das. Otra opcin es 30 das.

    La Tag "distribution" indica al robot el alcance de tu web, global es lo ms habitual.

    Intenta seguir estos consejos en la elaboracin de tus MetaTags, siguiendo el mismo orden queen el ejemplo. La Tag Title debe de ser la primera.

  • 8/8/2019 TRUCOS DISEO WEB

    7/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    7

    Recuerda que las MetaTags ms importantes y esenciales son el Ttulo y la Descripcin ydebes introducir tus palabras clave ms importantes en estos campos, palabras exactas yprecisas que enfoquen el tema de tu web para que el trfico que proceda de los buscadoressea de clientes potenciales en busca de tu producto o servicio.

    Algunos buscadores no utilizan las Meta Tags para extraer la informacin de tu web, utilizan lasprimeras lneas de texto de tu pgina y es lo que aparece en sus listados. Tambin debesutilizar en las primeras lneas del texto tus palabras clave con frecuencia y siemprerelacionadas con el tema de tu web.

    Consejos para un correcto Diseo Web

    A medida que crecemos en nuestra profesion nos damos cuenta de ciertas cosas

    que debemos tener en cuenta a la hora de disear o redisear un WebSite, ya sea

    para una empresa, para nosotros mismos o para cualquier persona.

    A que pblico va dirigido

    Comunicar constantemente al navegante de lo que va sucediendo.

    Link de ayuda visible.

    Evitar textos largos. Usar textos cortos y precisos, la gente tiende a escanear con

    su visin y no a leer atentamente.

    En caso de que la navegacin sea flash o con imagenes, proveer una alternativa

    con Hypervnculos.

    El cliente no siempre tiene la razn:Muchas veces, el cliente nos pide que el sitio tenga colores destellantes y que las

    palabras vuelen y se revuelquen por el mismo. Esto no estara del todo mal si el

    sitio del cliente no se tratase de una funeraria.

    Darle la razn al cliente para terminar el trabajo en el menor tiempo posible y

    dejarlo contento, no es siempre la solucin al problema, ya que ese WebSite lo

    vern muchas personas da a da y alguna de ellas tal vez sea nuestro prximo

    cliente.

    Hay muchas maneras de decirle a un cliente por qu debe dejarnos hacer nuestrotrabajo sin interferir, pero la mejor es la ms honesta: demostrarle con

    estadsticas, hechos y estudios realizados en navegantes, porqu es que debemos

    ubicar el men de navegacin a la izquierda del WebSite y porqu el mouse no

    debe tener 14 bolitas de colores que titilan que lo siguen.

    about:blank

    Recordemos dejar espacios en blanco en nuestros Designs, para darle aire al

    mismo.

    No sirve de nada amontonar cosas en bloque, ya que los navegantes suelen

    confundirse con muchas cosas encimadas y se sienten saturados visualmente,logrando as que se retiren de nuestro WebSite.

  • 8/8/2019 TRUCOS DISEO WEB

    8/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    8

    Resolucin de pantalla

    Muchos se preguntan a que resolucin de pantalla deben disear sus WebSites, ya

    que los navegantes del mundo tienen diferentes tipos de monitores, con diferentes

    resoluciones. Segn Browser News, no hay un estndar en resolucin de pantalla y

    tal vez nunca lo abra.

    Segn sus estudios:

    - El 2% de los navegantes, utilizan una resolucin de 640x480.

    - El 45% de los navegantes, utilizan una resolucin de 800x600.

    - El 51% de los navegantes, utilizan una resolucin de 1024x768.

    Esto no quiere decir, que solamente tenemos que disear para los navegantes con

    la mayor resolucin, ya que si lo hacemos as, estaremos perdiendo un 45% de los

    navegantes en la red.

    Tenemos en todo caso dos opciones:

    1-Disear el sitio con una resolucin de 800x600 y que los navegantes que utilizan

    mayores resoluciones, se adapten. Esto es lo ms comn ya que si el Design es

    claro y simple, no molesta mucho a la vista que est preparado para 800x600,

    incluso llega a quedar atractivo.

    2-Preparar el sitio para las dos resoluciones y que el navegante elija a que

    resolucin desea visualizarla, o nosotros mediante un javascript detectar que

    resolucin tiene el navegante y re direccionarlo a la versin correcta.

    Flash: el enemigo

    La tecnologa Macromedia Flash puede ser un arma de doble filo. La mayora de losnavegantes tiende a perderse en los WebSites realizados en Flash, ya que los

    WebDesigners en vez de mantener una esttica limpia, simple e intuitiva como lo

    venan haciendo con los WebSites en Html, pasaron a hacer de cada WebSite su

    "obra personal". En enumerados casos pueden verse impresionantes animaciones

    que destellan en los ojos del alucinado navegante.

    Esto trae problemas de atencin:

    Nosotros queremos que el navegante se entere de nuestros servicios, o que mire el

    logotipo que destella fuego y da vueltas en 3D? Si el navegante desea copiar y

    pegar un texto informativo de nuestro WebSite, podr hacerlo? El men, es

    intuitivo? Una vez que el navegante vi todas las animaciones del WebSite yefectos, le quedan ganas de ver realmente nuestra informacin?

    En muchos de los casos la respuesta lamentablemente es no. Y no es que la

    tecnologa Flash sea la problemtica, si no que como toda nueva tecnologa, est

    siendo mal utilizada.

    Se pas de querer informar al navegante y tratar de venderle un producto/servicio,

    a tratar de impresionarlo visualmente, lo cual es incorrecto.

    Adems, los sitios realizados en flash solamente son confortables para los

  • 8/8/2019 TRUCOS DISEO WEB

    9/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    9

    navegantes con ancho de banda alto, y no para los que utilizan mdems comunes y

    dial-up. En amrica latina es ms que obvio que la mayora de las conexiones no

    son de banda ancha, dado a la crisis en la regin que se vive en los ltimos aos.

    No se puede discutir que los clientes siguen pidiendo WebSites en tecnologa Flash,pero tampoco se puede discutir que si se utiliza de manera incorrecta, puede

    provocar el efecto contrario en nuestros visitantes.

    Consejos prcticos para disear un buen men de navegacin

    Procura evitar un men con muchas opciones (ms de 5 puede ser mucho).Si los mens de navegacin son una de las lacras de la usabilidad, debemos procurardisearlos (forma y funcin) lo mejor posible para evitar errores y aliviar la navegacin anuestros usuarios.

    Una regla bsica es eliminar opciones. No hagas mens muy extensos. Ms de 5 opciones sonmuchas para leer, entender y pinchar. Reduce el nmero al mximo y procura que lo quepongas en el men tenga una importancia real. Es mejor que una opcin del men agrupediferentes apartados que tener un men con muchas opciones "simples". El ejemplo que nospuede sonar es el de agrupar las FAQ, Oficinas, Mapa, Carta del Presidente, Memoria Anual,Historia de la Compaa en una opcin que ponga "Todo sobre Nosotros". Eliminamos opcionesy no perdemos accesibilidad.

    Si existe una necesidad real de tener muchas opciones, procura usar un directorio y ponlo en elmedio de la pgina. La gente encontrara las cosas ms rpido y el men no se perder pordebajo de la lnea de scroll.

    El ejemplo ms prctico es en las tiendas donde la barra de "departamentos" suele extenderse

    hasta ms all del pixel 768. Es mejor poner los departamentos relacionados con la categoradonde se encuentra el usuario y una opcin de "ver todos los departamentos".

    2. Es bueno indicar dnde est el usuario, pero no es necesario desactivar esa opcin.Una prctica habitual en los mens es desactivar la opcin donde se encuentra el usuario paraindicar de una forma clara "donde estoy".Si bien es una buena prctica, tiene algunos inconvenientes:El usuario no puede volver a pinchar sobre esta opcin si se siente perdido.Debemos procurar usar enlaces subrayados para hacerms evidente la diferencia. Si losenlaces no estn subrayados, es difcil apreciar la diferencia.Es recomendable dejar los botones del men siempre activos y procurar usar la pgina en sipara mostrar al usuario la informacin de "donde estoy". Si queremos usar el men para indicaral usuario "donde estoy", es mejor usar algn elemento grafico en el men que indique esa

    diferencia.

    3. Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero condiferentes tonalidades.Las Hojas de Estilo (CSS), nos permiten manejar con soltura el estilo de nuestro siteincluyendo los eventos de enlace "nuevo", "visitado" y (en algunos casos) el evento de "over".

    Si bien los cdigos de color son complejos de entender y la mayora de los usuario ni siquierallegan a recibir el mensaje, es bueno usarlos para aquellos usuarios ms avanzados querequieran de mas informacin por parte de nuestra web.

    La regla general que debemos aplicar es usar un nico color para los enlaces, y 3 tonos paralos diferentes eventos. Tendremos un color X (azul es la norma) para los enlaces y un tono

    ms brillante para el evento de "over" y un tono ms apagado para el enlace visitado. Otravariante para el "over" es usar un color que aparecer en el fondo de la zona enlazada.

  • 8/8/2019 TRUCOS DISEO WEB

    10/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    10

    Ejemplo de diferentes estilos de enlaces.En la imagen inferior, podemos ver ejemplos de eventos en un enlace.El ejemplo A, donde usamos un nico color y 3 tonos diferentes, es el recomendable frente alejemplo B donde no se usa el subrayado y el color del enlace cambia a cada evento.

    Usa colores diferentes si deseas indicar diferentes tipos de enlaces (internos, externos, acceso

    a diferentes reas, etc...)No hagas del evento "over" una fiesta y procura evitar las metamorfosis a "bold", aparece el"subrayado", etc.

    4. Si el men se despliega, procura abrir una pgina por defecto y mantn el men desplegado(no lo cierres sin que el usuario lo haya dicho).Otra lacra de la usabilidad son los mens que se despliegan. No los uses. Es mejor navegar atravs de pginas donde el usuario ve resultados, y se informa de cules son las siguientesopciones a ver. Si el usuario se pierde volver a la "home"o pulsara el botn de "volver" (si yasabe navegar puede que incluso use la barra de "donde estoy".

    Si por motivos de fuerza mayor los tienes que usar, procura seguir un par de reglas.No uses mens con rollover. Est probado que el usuario se siente ms cmodo si pincha y el

    men se abre.Los mens se abren y se cierran si el usuario lo indica. Si por razones de espacio tienes quecerrar un men cuando se abre otro, reduce el nmero de opciones.Muchas veces, tenemos un men llamado "Coches". Si pinchamos sobre esta opcin el mense despliega con las opciones de "Deportivos, 4x4, etc...". Es bueno si adems de desplegar elmen, abrimos una pgina donde explicamos las opciones ms comunes de esa pgina y/odestacamos algn producto. Adems de ayudar al usuario a manejar el men, podemosacercar opciones comunes dentro de esa zona del tipo "ltimas novedades", "buscador","productos ms demandados".

    5. El uso de los "bullets" es necesario cuando tenemos opciones que ocupan 2 lneas de texto.Si tu men se compone nicamente de texto, procura que quede claro donde empieza y dondeacaba cada opcin. Para ello el uso de "bullets" ser lo ms adecuado. Es recomendable usar

    los bullets del sistema para aliviar el peso de la pgina.Ejemplo de mens con y sin "bullets".Usando los bullets en un men ayudamos a separar las opciones y el usuario entiende dondeempieza y donde acaba cada opcin.

    En un men sin bullets es ms complejo separar las opciones y cuesta ver donde empieza yacaba cada enlace

    Tiempo de carga de un web

    El tiempo de carga de un web, es un factor importante para xito o fracaso del mismo.Un punto tan simple y casi siempre ignorado por los webmasters, puede ser determinante paraque nuestro web, logre nuestras expectativas o se quede en el camino.

    Estudios sobre usabilidad, indican que el tiempo mximo de espera para la carga de un web,es de 10 segundos. A partir de este tiempo el internauta empieza a desesperarse o a perderinters por el web.

    Por ello, el tamao del web, ser un factor importante a tener en cuenta por los webmasters ydesarrolladores.

    Profundicemos en el tema:

    1) Partamos de la base que una pgina de un tamao de 50 Kbs tardara en cargar 7 segundos

  • 8/8/2019 TRUCOS DISEO WEB

    11/11

    Complethost Soluciones Internet

    Todo para tener la mejor presencia en Internetwww.complethost.es

    11

    para una conexin de 56600 bps, el clsico modem de 56kb, pero teniendo en cuenta lacalidad de los servicios que hoy en da brindan las compaas, dejemos su capacidad en 30000bps, lo que nos sugiere que un web de unos 40kbs estar en el lmite para ser consideradoinsufrible por nuestros visitantes.

    2) La idea que tienen muchos webmasters de que la mayora de los internautas gozan de

    banda ancha en su conexin es equivocada, el porcentaje de usuarios que tienen una conexinde 128kbs o superior es minoritaria, por lo que los webs debern ir encaminados a lasconexiones tradicionales.

    3) Intentemos optimizar nuestras imgenes usando, carga progresiva de las mismas (tpica delformato gif). Utilizar la misma imagen para que el navegador use el cache para recuperarla, sinperder tiempo en cargarla, usar software de optimizacin de imgenes, tipo Fireworks. Evitar eluso de imgenes en lo posible.

    4) Existe la idea de que el usuario requiere de diseos atractivos para ser captado por un web.Realmente el usuario, lo que quiere es encontrar lo que est buscando.

    En resumen, un equilibrio entre usabilidad y diseo, har que nuestro web, marque la

    diferencia.

    Atentamente

    El equipo decomplethost.es

    http://complethost.es/http://complethost.es/http://complethost.es/http://complethost.es/