Blog

Showcase: Malas practicas web que debemos mejorar

En mi país, como en todo el mundo, las compañias que ofrecen servicios web están creciendo. Encontrando un nicho de oportunidades en esta clase de servicios, sin embargo muchas de ellas no están realmente capacitadas o comprometidas con brindar un servicio que muestre lo que realmente deben. Para ello he creado un showcase para mostrar los errores comunes que no tenemos que cometer.

Antes de todo quiero aclarar la diferencia entre una página web y un sitio web. Ya que casi cada empresa web que visito, encuentro “hacemos páginas web“.  Es una palabra la gran diferencia, como lo mencioné en “5 cosas que debes saber antes de adquirir tu sitio web”, un detalle muy imporante:

  • Página web: en resumen es un archivo donde se muestra contenido en un formato para que pueda ser leído por un explorador web…
  • Sitio web: conjunto de páginas web que hace referencia a una empresa, institución o información; con un mismo tema en común…

Tenemos que tener en cuenta que, como lo he escrito antes, el saber crear un sitio web no es saber utilizar un editor de etiquetas HTML o saber manejar un programa de edición de imágenes, como comprar un dominio,  etc. Es más que aspectos técnicos, es todo un arte :D.

Como te veo te trato, el diseño

Y esto que és, colores
design-rh
Creemos un layout con un concepto de color y diseño

Al crear un sitio tienes que conocer el concepto de diseño web. No literamente o técnicamente como un diseñador gráfico o algo a fín. Sino algo más espacial y usable, un diseño acorde a las necesidades de la empresa que nos contrata, no voy a colocar un diseño super dinámico con brushes e ilustraciones a un sitio que vende farmacéuticos, sería más acorde un diseño con colores consitentes y no contrastantes, fotografías de los productos con su titulo, etc.

Con un buen layout puedes brindarle a tu posible cliente las herramientas que necesita  y la información de una forma amena para la vista y que invita a contrarte. Recuerda pensar como el cliente quiere a tu empresa, y no como empresa que quiere clientes. Recuerda que una imagen hablas más que mil palabras.

¿Qué había aquí?, imágenes rotas

Cuando desarrolles un sitio web, verifica que todos los objetos (imágenes, API’s, videos) funcionen a la perfección y que tus visitantes no lidien con los cuadritos con imágenes que no aparecen, encabezados que faltan y no saben de que trata el contenido, menús hechos con imágenes que no cargaron.

La página no existe, error 404

El típico error que da la cara cuando nosotros no verificamos los links o las secciones que borramos, mucho cuidado con tener este tipo de errores, la mayoría de gente no tiene la paciencia para buscar tu página principal y buscar si por alli tienes el contenido que buscas.

Y como puede que se te vaya alguna vez uno de estos errorsitos, ten una buena página “error 404” que mostrar, así el usuario no se sentirá como que está fuera del sitio, simplemente está en el lugar equivocado, pero puede regresar a tu sección pricipal para buscar desde allí.

Flash, flash y más flash…

El sitio full-flash
mal-design4
No usar flash para crear sitios con información plana

Esta es una historia conocida por todos, diganme ¿Quién no se ha topado con un sitio totalmente flash? Tu, si tienes pensado un sitio hecho totalmente en flash, por favor, quítate esa idea de la cabeza. A pesar que ya hay métodos para que Google indexe flash, no es la gracia. Sabes que flash está hecho para crear animaciones y aplicaciones interactivas, y he visto muy buenos sitios hechos con flash. Sitios que si han de necesitarlo ya que lo utilizan como debe ser, no solo por los movimientos. Además, gasta muchos recursos si no utilizas el actionscript como medio de desarrollo.

No es en forma de enojarme ;) es simplemente que se pierden muchos clientes potenciales, al hacer esperar para cargar solo texto y una que otra imagen.

La animación de la intro
intro-flash
Las introducciones flash no son buenas :(

Este caso me da mucha gracia :D, me he topado con sitios que colocan el “skip intro” al final de la introducción. A las personas que me han preguntado por que no utilizo introducciones flash les respondo:

  • Para mi, es un gasto de recursos. Yo visito un sitio para ver su contenido, no para ver imágenes volando de un lado para otro y un logotipo que da vueltas.
  • Es un golpe bajo a la usabilidad y accesibilidad, estamos haciendo que el usuario espere por algo que posiblemente no le interese y otra es que tiene que hacer más clicks para llegar a la información que necesita, y el visitante tiene que encontrar la información que busca en 3 clicks como máximo.

Y donde estoy, cuida la navegación

No recuerdo en donde era, menús
menu-largo
Crear menús cortos y con titulos fáciles de recordar

La mente no guarda más de 8 elementos al mismo tiempo, como pueden leer el tercer artículo de Tannel, agrupen sus secciónes en grupos pequeños. Una detalle muy importante es hacerlo de manera ordenada, hay métodos muy efectivos para poder hacerlo como el de casificación por tarjetas, por puntos, por hits, como ejemplos. También los titulos de los menús hazlos cortos. Lo repito una y otra vez, piensa como tus clientes, usa tu imaginación para desplegarle a tu visitante un menú intuitivo y fácil de utilizar.

¿Flash en menús?
guatecompu
No crear menús flash y utilizar una buena diagramación

No utilices flash para tu navegación es una mala práctica web, de hecho de las más comunes, imagina que tu visitante no tiene flash instalado o tiene un versión obsoleta, no podrá navegar en tu sitio. Los soniditos pueden ser interesantes pero después de eso no les encuentro función; ahora con los efectos visuales (aparte que son mi trauma) puedes crearlos con javascript, hay formas semánticamente correctas, que podrás estilizar a tu manera.

No me preguntes tanto, formularios

formulario-largo
Los formularios cortos son mejores, cuidemos los títulos de páginas también

Una parte muy importante de los sitios y deben de tener como requisito, es un formulario de contacto. NO tener secciones de contacto donde solo haya un link mailto:micorreo@miempresa.com, debemos crear formularios de contacto accesibles y sin complicaciones. Entre los puntos que debes de tomar en cuenta están los siguientes:

  • pregunta solo lo necesario, los demás datos podrás conocerlos en el proceso
  • se claro en los campos que pides
  • valida tu formulario con php o javascript, y no utilices pop-ups para los mismos
  • no mandes a tus visitantes a otras direcciones que no tienen correlación con la tuya
  • No utilices redirects para redireccionar el mensaje de “enviado” y tampoco pop-ups, sabes que la gente los odia

El contenido manda, diagramación

Al mencionar diagramación me refiero a todas esas cosas que se despliengan como contenido: texto, imágenes, video. Debes hacer que tu layout contenga la información que queremos, pero no saturar la vista del usuario con mucho marketing o gifs animados, de hecho eso daña la vista, molesta. Deja suficiente espacio entre parráfos y elementos para que el contenido “respire”. No dejes mucho para que se mire vacio.

También complementa tu información con imágenes o videos, recuerda mucho cuidar los encabezados; los visitantes ojean el contenido en busca de información relevante, por eso también puedes utilizar iconos para resaltar la información y hacerla más llamativa.

Juega con la colocación de los elementos, hazlo de forma que los que tengan más relevancia sean más grandes y entre menor relevancia, menor tamaño. Una buena forma de saber que es lo que más interesa es hacerlo por puntajes, imagina que la página de un producto es de 14 puntos entonces:

  • noticias 2 puntos
  • artículos relacionados 2 puntos
  • descripción y fotografía 7 puntos
  • beneficios o valor agregado 3 puntos
diagramacion
Hay varios metodos de diagramación, este es por puntaje

Toma en cuenta en que, el ojo humano se parece mucho a un motor de búsqueda, ambos empiezan a leer de la esquina superior izquierda y terminan en la esquina inferior derecha, de este modo es bueno que coloques tanto los textos de relevancia como las palabras clave en esas partes.

Cuida las faltas de ortografía, revisa tu contenido antes de publicarlo y si tienes alguna, no dudes, corrígela inmediatamente. Una buena redacción y una buena ortografía te dan muchos puntos a favor. Si te pones a pensar, las decisiones de compra se toman en tu sitio web, no más. Por eso, cuida mucho mucho, lee con atención mucho; el contenido, sé breve y consciso.

Da lo que los otros no, el valor agregado

Rompe el paradigma de dar lo que las demás empresas dan. Una característica que busca cualquier cliente potencial en el producto o servicio que necesitan, es ese “plus”, un beneficio; te aseguro que tu lo haces cuando quieres adquirir algo. Entonces, ¿Por qué no ser tú? Brinda ese beneficio que la competencia se resguarda y defiende como que es una política de empresa. No por eso tienes que reestructurar tu negocio, solo se más flexible.

Dar el beneficio no siempre es producto gratis o promociones. Eso es puro marketing, la ventaja de la web es que puedes enganchar a tus clientes con herramientas funcionales; que hagan más clara y accesible la navegación, así ellos encontrarán lo que buscan, rápido.

Dale libertad de escribir, utiliza CMS

Primero defino que es CMS: Es simplemente un sistema manejador de contenidos, y como su nombre lo dice; maneja la información de tu sitio. Hay personas que pueden ir en contra de esto, por que dicen que recarga más el servidor entre otras cosas.

Yo respondo a eso que hay métodos y plugins para poder crear html plano para sean servidas en vez de hacer siempre un request al servidor. Hablando ya propiamente de los CMS puedo citar los principales beneficios:

  • Si eres el desarrollador, una de dos: te quitas el peso de encima de estar actualizando contenidos, que a pesar de ser un ingreso económico; no es significativo. Es decir, le das ese valor agregado que hablo a tu cliente. O se te es más fácil actualizar los contenidos, no más el tedioso editor de texto → ftp → corroborar.
  • Crear secciones y subsecciones a tu antojo, no teniendo que duplicar el html una y otra vez
  • Te puedes concentrar más en un buen desarrollo ya que se manejan temas
  • Hay plugins y complementos de todo tipo para que puedas adaptarle a tu sitio

En la web encontrarás muchos tipos de CMS, te voy a citar los principales y porque los utilizo.

  • WordPress, inicialmente fue creado como plataforma para blogs, pero ha ido evolucionando al punto que (también para mí) es el CMS default para muchos desarrolladores. WordPress tiene una versatilidad inmesa, además que hay plugins de todo, es muy divertido desarrollar para este CMS ( lo es para mí). WordPress está disponible en Inglés y Español, esta característica es muy importante ya que otros CMS no tienen traducción o es muy mala.
  • Drupal, una plataforma muy facil de utilizar tanto para el usuario (administrador) como para el desarrollador. Ya que puedes crear bloques a tu antojo donde puedes ir colocando módulos condicionales dependiendo en que sección del sitio estás, yo lo utilizo con sitios que necesitan de más opciones y el cliente necesitas más libertad para admnistarlo, digamos para el tráfico pesado.
  • Joomla!, otro CMS muy poderoso y de los más antiguos. Este CMS se caracteriza ya que tiene una comunidad muy grande brindando soporte, y al igual que WP, tiene plugins casi para todo. El defecto que le miro a este es que es muy difícil administralo (al menos para mi lo fue), ya que maneja una forma que tardarás un poco en familiarizarte. Esto no le quita lo poderoso y lo versátil.
  • Edicy♥, caso especial. Como se dice en mi país: “Se salió del canasto”, aparte de ser el CMS más fácil de utilizar que he conocido, es un servicio completo de publicación y creación de sitios web. El servicio tiene consigo hosting y CMS.El CMS posee las características que la demanda necesita: formularios de contacto, blog, galería de imágenes, creación de secciones y subsecciones. La edición de contenido es lo que revoluciona en la web, ya que es a tiempo real, ya no tienes que guardar o previsualizar el contenido. Todo es a tiempo real y drag-n-drop. Por si deseas más información me puedes contactar, brindo soporte en español.
A un click de lo que busco, formulario de búsqueda

Esta es una de las herramientas que más me gusta utilizar :p, y la ironía es que la que menos utilizan los desarrolladores. Los CMS que he mencionado traen un buen motor interno de búsqueda. Imagina que creas un sitio de farmacéuticos, el visitante busca un producto en específico. Tiene que tener un búscador entre tanto producto que ofreces.

Ten en cuenta que, como lo escribí arriba, tienes que tener saber que el usuario va por información, nada más.

Quiero algo fresco, Blog

En estos tiempos hasta el más perdido tiene su blog, una vitácora donde escribes de lo que quieres. Un blog te da muchos puntos a favor, ya que para que un sitio tenga visitas reales, tienes que brindarle información fresca y actualizada. Puedes utilizarlo como medio para dar noticias de lo que está pasando con tu empresa, para publicar promociones o tips de algún tema en específico.

Ahora con los CMS, especiamente WordPress, puedes integrar el sitio y el blog en uno. Un ejemplo muy claro es que estes leyendo este artículo, si no lo hubiera creado, seguro estarías en otro sitio que brinde información parecida :p.

Únete a mi grupo, redes sociales y bookmarks
redes-sociales
Una buena y pensada presencia en las redes sociales puede ser muy útil y beneficiosa

En la “web 2.0”, como le llaman a este movimiento (no es ninguna tecnología) o nuevo trend de la web, es muy común ver empresas que tienen presencia en redes sociales como Twitter, Facebook, Digg, entre otras. Que lo que hacen es (en la medida que sepas utilizarlo) incrementar tus visitas con personas que les interesa tu producto, servicio o lo que estés ofreciendo.

Y una vez tengas tu blog :), se tienes un gran responsabilidad de actualizarlo, no tomes la excusa de no tener tiempo, no vas a decirle a tu cliente, mire no tengo tiempo de atender un contenido e informale que es lo que acontece en relación a nuestra empresa. Si no actualizas con buen contenido tu blog es como que si no lo tuvieras, ten mucho en cuenta esto.

Y donde estoy, breadcrumbs

Más que un valor agregado, es un obligación tener breadcrumbs, que son una ayuda que te muestra la ruta que tomaste para llegar a donde estás, es una herramienta muy importante cuando creas sitios muy grandes o con subsecciones. Hay muchas formas de mostrar los breadcrumbs, solo es de usar tu imaginación. Creeme que con esto, aliviaras a tus usuarios de perderse en un punto ciego y de utilizar el botón de anterior.

Entre otras cosas, lo que te digo a tí

Dale al rey lo que es del rey, no te hagas bolas

No encuentro razones por las cuales no puedas brindarle a tu cliente potencial más información de la que tu crees es suficiente, en la mayoría de los casos un título, una descripción y una foto no bastan; piensa como el usuario (sí, lo repito, así te refresco esto), él necesita saber los beneficios, el precio, donde encontrarlo, si hay existencias, que colores hay, etc. Crea las herramientas que satisfagan los deseos de comprar de tus clientes, con esto te aseguras que se queden contigo.

No te vayas con la vieja escuela, que hace que el visitiante se registre con un formulario de contacto enorme donde le pides su nombre, apellidos, teléfono, mail, dirección, estado civil, alergias, número de tarjeta de crédito, cédula, tipo de sangre y un sin fín de cosas solo para poder ver tu producto.

¿Porqué no hacerlo por pasos? Dejas que conozca de una tu producto, mostrandole lo que te he dicho antes, y lo invites de una forma sutil pero atractiva a registrarse para que pueda saber las actualizaciones o nuevos productos por ejemplo. Entonces cuando ya están registrados (no más que nombre, mail, país por ejemplo), le das la opción que compren en tu sitio con un carrito de compras, una vez tiene su carrito elige lo que desea y ¡allí llegas con lo demás! Le pides su tarjeta de crédito, su dirección, y lo que necesites; pero ya tienes enganchado a tu cliente, le brindaste una forma fácil de adquirir tu producto y le “confiaste” tu información, por tanto el te confiará la de él.

La pirateria es mala, sé original

Teniendo una mente tan grande, por qué vas a hacer dos sitios web con un layout muy parecido, o por qué le copias una idea a alguien. Yo visito las galerías de css, porque tomo inspiración y guía de otros sitios web, pero no los copio. Creeme que se mira muy mal, me he topado con un par de casos y me siento tan mal. Por que lo que pienso, es que se te acabó la creatividad para desarrollar una idea fresca.

Consulta sitios que se enfocan en brindar recursos para desarrollo web (muchos pensarán, hey estos links son míos, si los doy me pueden quitar mi trabajo por que ya saben de donde saco todo, y no es así; el conocimiento se comparte):

Utilizo más pero con estos creo que son suficientes y tienen lo que necesitan. Los demás son más específicos en cuanto a temas.

Con esto termino mi artículo, espero que sea de su ayuda y si se me olvida algo ¡Díganmelo! Será un gusto poder extender este artículo.

Se viene:

Tutorial → Como crear un layout en photoshop para usar en grid 960

Tutorial → Como crear un buen sitio web, el diseño