#1 [Teoria] E-Media> del Videoarte al NetArt - Primera Parte
Introducción
Los avances en el campo de las comunicaciones en el Siglo XXI hacen posible hoy lo que parecía ciencia-ficción apenas unos años atrás. Desde el uso de Televisores portátiles del tamaño de un reloj de pulsera hasta los videofonos utilizados actualmente entre varias ciudades del Japón permitiendo la exploración y el intercambio de ideas entre personas situadas en las más remotas regiones del planeta de un modo simultaneo e interactivo, posibilitando la concreción de proyectos como este, reduciendo tiempos y acortando distancias y haciendo que cada vez las fronteras existentes entre los distintos países sean cada vez más virtuales gracias al desarrollo evolutivo del ancho de banda en la transmisión de datos, imagenes, voz y sonido. Esto implica una reformulación en las formas preestablecidas acerca del trabajo en equipo en la Argentina permitiendo establecer interconsultas instantáneas, con un grupo de colaboradores a partir de la interactividad dada por la World Wide Web, en la creación del proyecto desde sus orígenes, discutiendo hipótesis, planteando diferentes enfoques posibles para un mismo tema entre personas que viven en realidades sociales distintas. En este caso vinculándonos a traves del Ciberespacio a traves del aporte dado a la realización de este proyecto por del siguiente equipo de consultores y colaboradores: el D.M. Michael Pinciotti (New York, U.S.A), la Arq. María Verónica Russi Giner (Buenos Aires, RA), el Net Artist. Stef Winkler (Frankfurt, Germany), el Prof. José Eduardo Chaya (San Miguel de Tucumán, R.A), la Prof. Anahi Cáceres (Buenos Aires, RA) y la Artista Digital Andrea Cecilia Russi (Buenos Aires, RA) quienes situados en varias ciudades alrededor del planeta (Nueva York, Frankfurt, San Miguel de Tucumán y Buenos Aires) contribuyeron a lo largo de 6 meses en el desarrollo de esta investigación intercambiando planteos, diversidad de opiniones, información actualizada y material de videoarte y NetArt (archivos de textos, imágenes, sonidos y video) en forma simultanea a traves de la Red Internet.
Pautas generales para el diseño, la interacción y la visualización de la información en el desarrollo de sitios web:
Como reducir el peso de las páginas web:
Primero pasos
Disponer de tiempo, tecnología y recursos humanos para llevar a cabo el proyecto web.
Qué vas a "vender": entiéndase vender como promocionar, anunciar, o vender directamente el site.
A quién se lo vas a "vender": debemos identificar a nuestro núcleo de usuarios extremos que nos ayudaran a posicionar el producto de una forma mas definida que si nos dirigimos directamente a la gran audiencia.
Cómo se lo vas a "vender": aquí es donde entran los temas de logística, atención al cliente, diseño de producto y web.
Una vez vendido, qué hacemos: es importante preveer que pasara mañana cuando nuestros clientes nos hayan comprado los productos. Fidelización, promociones, seguimiento...
El primer prototipo
Con todos los requisitos recogidos en los primeros pasos, podremos empezar a pensar en como vamos a construir nuestro site.
Se recomienda que el equipo que este en esta fase sea multidisciplinario (como mínimo, programación, diseño, contenidos y un coordinador de equipo).
Se recomienda que el coordinador sepa algo de todas las materias, (servidor, web, diseño, contenidos) por que será la persona encargada de crear puentes entre los diferentes departamentos y de llegar a consensos cuando surgen problemas de competencia.
Con este equipo se llevara a cabo una serie de pasos: diseño de imagen, isologo animado, sonido de acceso al site, propuestas de guiones interactivos, diagramas de idea y mapas de navegación, que servirán para aproximarnos a la idea de nuestro site.
Esto será producido a un nivel casi real para que sea probada por los usuarios.
Test de usuario
Una vez producido el primer prototipo, se hará nuestro primer testeo de usuario.
El test de usuario nos ayudara a enriquecer el producto observando el comportamiento del usuario, viendo las virtudes de nuestro producto y sobre todo aquellos puntos débiles que pueda presentar.
Con el test de usuario se realizara un nuevo prototipo que se debería volver a testear mientras sea posible (feedback).
Lanzamiento
Una vez tenemos un prototipo ajustado queda la parte de realización técnica.
Se deberá disponer del tiempo disponible para ajustar el prototipo a la realidad, pero no se deben encontrar nuevos obstáculos en esta fase.
Para evitar estos nuevos obstáculos, es necesario la total transparencia de los departamentos a la hora de realizar el prototipo, es decir, conocer toda las posibilidades existentes dentro de la operativa, ver el "peor de los casos existentes", ver como funciona "el primer dia", etc...
Por ultimo se recomienda pasar una fase de "emisión en pruebas", es decir, lanzar el site y probarlo en real (conexiones con modems básicos, ADSL, Cable modem, inalámbrico, etc, ver velocidad operativa real, ver respuesta del correo o del call center en caso de que existan, etc..)
Crear buscadores internos
Para tener un buscador debes guardar todo lo que hagas. Procura que cada artículo, fichero, producto tenga una pagina con entidad propia. Jamas borres una pagina. Puede ser que alguien la este enlazando desde otra pagina, o puede ser que alguien la este buscando.
Considerar lo siguiente:
a. Identificar palabras clave (keywords) para facilitar la busqueda
Cuando hagas tu pagina ten en mente la forma de almacenar los archivos. Procura que cada "elemento" tenga su "entidad".
Definamos "elemento" como cada articulo, ficha de producto, gráfico que tenga interés para los usuarios en tu site.
Cada uno de estos elementos tendrá una pagina con un nombre, una ubicación y un orden dentro de la jerarquía de tu site.
Este elemento por tanto estará correctamente identificado para acceder en cualquier momento.
b. Dejemos que el usuario busque todo lo que quiera.
Lo que tiene sentido en un buscador es que se pueda buscar todo. Es decir, si entro en un periódico, y pongo "Kirchner", lo que quiero es ver todas las noticias que hay sobre Kirchner desde que nació. Eso me da libertad y me muestra la potencia de la página. Buscar en los archivos y ver que el sistema responde, da al usuario muestras de que esta delante de un sitio donde puede pasar horas y horas mirando información relevante. Si empezamos a limitar la busqueda (solo este mes, solo este numero, solo en este sitio) empezamos a hacerlo mal y puede ser que el usuario se muestre frustrado. Tambien ocurre que él número de resultados validos disminuye con lo que perdemos calidad en la busqueda.
c. Ofrecer resultados ordenados
Asi como demostrar la potencia de la maquina con un buen buscador esta bien, tambien es reconfortante demostrar inteligencia. Para ello debemos identificar palabras clave "relevantes" en nuestro site. Esta identificación nos servirá de atajos para evitar mostrar información redundante al usuario. Siguiendo con el ejemplo del periódico. Si entro en el periodico y pongo "Kirchner", lo ideal seria mostrar un enlace a la típica ficha oficial y luego todos los resultados relevantes en nuestro site.
Esta "inteligencia" requiere identificar todos los elementos que creamos que son relevantes para el usuario y hacerlo de forma mas o menos humana. Siguiendo con el ejemplo del periódico, palabras como "presidente", "Kirchner", "Nestor", nos llevarían a resultado similares. Donde lo ideal seria ver una serie de "fichas" que concuerdan con él termino buscado, y una serie de resultados provenientes de la base de datos.
Por ejemplo www.Photodisc.com es uno de los sitios mejor organizados. No solo busca por "keywords" si no que una vez encontrada la foto vemos una serie de keywords relacionados con esta. Estos keywords estan enlazados de tal forma que puedo seguir buscando por keywords nuevamente hasta afinar los resultados. Básicamente lo que ofrece es una sensación de "control" que muchas veces se hecha de menos.
Tenemos 3 ejemplos básicos:
The New York Times. Este periódico ofrece un buscador, quizás algo pequeño pero muy efectivo. Presenta dos opciones de busqueda, bajo la forma de "radio button", que son buscar en la edición de hoy o buscar en los archivos. Los archivos son de pago con lo que han conseguido que el buscador sea una herramienta de venta. En los archivos básicamente lo puedes encontrar todo. En el buscador del dia tambien. Es impresionante.
ESPN.com es un sitio de deportes que tiene un buscador muy bueno. En la parte superior tenemos un combo con 3 opciones muy claras, "keywords", "buscar en todo él site" o buscar en internet. No hay lugar a dudas. Luego tenemos el campo de texto y el botón de buscar. Todo correcto. El caso de buscar por keywords, es clave, si pongo NFL, no quiero ver todos los artículos que contienen la palabra NFL, quiero ver la pagina que le dedicas a esto. En el caso de sitios de comercio electrónico, si pongo pantalones, no quiero que me saques todas las paginas que pone pantalones, quiero que me lleves a la sección/es donde vendes pantalones.
La gente del Marca.es lo hace muy bien. Quizás el buscador este algo escondido, pero funciona muy bien.
Lo que hacen en España los periódicos. En los periódicos puede ser donde un buscador sea la herramienta mas utilizada despues de los portales. El archivo que generan y la flexibilidad de internet les proporcionan un valor incalculable.
Por ejemplo los diarios: ABC, El Mundo, El País y la Vanguardia.
Como se presenta el buscador en las portadas:
El ABC: Presenta un buscador en la portada, pero se les olvido poner el botón de "buscar".
El Mundo: Presenta un buscador interno al final de la pagina de portada. Demasiado escondido.
El País: Presenta la busqueda como una opción por lo que debemos irnos a otra pagina para poder buscar.
La Vanguardia: Presenta un buscador en portada pero es algo complejo de manejar. Tambien se les olvido poner el botón de buscar.
Lo ideal seria el formato del buscador del Mundo que es el mejor de los 4. Presenta resultados ordenados por relevancia y disponemos del buscador en la misma pagina, por lo que no tenemos que volver al buscador para hacer una nueva busqueda. Esto es básico, pero muchas veces se olvida.
En cambio en el diario El País no estan bien hechos ni el tema de titular las paginas por lo que muchas veces los resultados salen vacíos. Luego no tenemos el buscador en esta pagina por lo que tenemos que volver al buscador para hacer una nueva busqueda.
Lo ideal es lo que hace el Mundo. Los ordena por relevancia, indicando la fecha, peso y el titular del articulo.
Diseño de Formularios
Pautas a seguir:
1. Procura reducir al máximo el numero de campos.
2. Evita los combos.
3. Es mejor si la información no se fragmenta demasiado.
1. Reduce al máximo el numero de campos en los formularios
Si en internet siempre estamos hablando de menos es mas, cuando hablamos de formularios, menos es mucho... debemos tender a cero.
A. Procura reutilizar campos:
Por ejemplo:
Correo electrónico = nombre de usuario.
DNI = password.
B. Evita formalidades
Ejemplos de campos que no son realmente necesarios:
Tratamiento ( Sr., Sra.,)
Tipo de Calle (Avenida, Calle, Camino, etc)
Fecha de nacimiento (es esto realmente necesario?, si lo es, indica para que lo estas pidiendo)
2. Evita el uso de los combos en los formularios.
1. Es más rápido escribir que seleccionar la opción en el combo.
2. La pagina pesa menos. El usuario se la baja más rápido y acaba antes el proceso.
En la mayoría de los casos es más rápido escribir el texto que buscarlo en un combo.
Escribir la palabra "Argentina" puede llevar entre 1 y 2 segundos mas o menos, elegirla en un combo donde podemos encontrar todos los países del mundo puede llevar un promedio de 4 y 6 segundos. Si usamos el truco de preseleccionar el país en el combo, tambien podemos pre-escribir la palabra en el campo de texto.
El único caso en el que el uso de combos esta justificado es en aquellos en los que la respuesta esta predefinida tipo rangos, valoraciones subjetivas, marcas, etc... pero no lo uses para países, provincias, números, etc...
3. Evitar fragmentar la información.
El caso más típico es el de la dirección donde por lo general se pinta asi:
Tipo de calle:, Dirección:, Numero:, Código postal:...
Este caso a su vez suele estar alimentado con varios combos, con lo que el usuario debe leer cada campo, entender lo que le estan pidiendo y rellenarlo...
Podemos simplificarlo usando una única linea donde el usuario escriba toda la dirección, como si se tratase de una carta.
Dirección completa: Calle Martínez Izquierdo N23, 7h.
Código postal: 12002.
De esta forma solo tenemos una linea para el campo "dirección", y luego 3 mas para indicar código postal, población y provincia.
El usuario se sentirá más cómodo si puede poner lo que quiera y no le obligamos a rellenar cosas prefijadas que a lo mejor no entiende o no se ajusta a su caso particular.
Luego quizás quede destacar el caso de algunos bancos donde el campo "profesión" obliga al usuario a elegir una opción de la lista que el banco dispone, haciendo uso de un buscador, códigos de profesión, etc. Realmente no es recomendable. El beneficio que pueda dar esta información frente al engorro que produce al usuario no tiene equivalencia.
Con estos breves consejos podemos pasar de un formulario con 16 campos a 8 y disminuir el peso de la pagina a la mitad.
Cabeceras de portal = espacio perdido
El usuario suele mirar al centro de la pantalla, por lo que debemos procurar que los elementos importantes esten asi colocados.
Nadie usa tu barra de navegación y nadie mira los banners, procura que ocupen lo menos posible.
Lo que pongas en la barra de navegación que sea util. Terra incluye el horóscopo en la barra de navegacion, es realmente imprescindible?
MSN ofrece una barra adecuada, se ajusta a las resoluciones mas pequeñas de pantalla y ofrece todas las herramientas básicas del site. Es un buen ejemplo a seguir.
De esta cabecera podemos destacar lo siguiente:
No se usan iconos para nombrar las zonas con lo que las letras son mas grandes y mas faciles de pinchar.
La separación de elementos esta clara con una linea vertical entre unos y otros, el usuario sabe dond empieza uno y acaba otro.
Las opciones presentadas en la barra son los "fundamentales".
Se indica claramente al usuario donde esta coloreando la zona activa.
El banner se ha reducido al máximo para evitar perder espacio. Al estilo yahoo!.
La cabecera de CNET esta bien porque ofrece todos los enlaces de su red en un espacio mínimo, visible y no molesto. Quizás se penalice mucho al usuario con el tamaño del logo. Seria mejor usar un logo animado de presentación o ingreso al site, para dejar luego mas espacio al contenido.
La cabecera de ya.com es la peor que hemos visto. Demasiado ancha, demasiado larga, un banner gigante que no sirve para nada, no es un ejemplo a seguir. Al igual que la de terra, la anchura es superior a 800x600. En esta cabecera no esta claramente definido el tamaño de los botones, se usan iconos que no sirven para nada.
Diseño del menú
Procurar crear una navegación fluida a traves de (a) buenos contenidos, (b) directorios y (c) buscadores bien indexados.
Evitar un menu con muchas opciones (mas de 5 puede ser mucho).
Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero con diferentes tonalidades. No uses diferentes colores para cada estatus.
Si el menú se despliega, procura abrir una pagina por defecto y mantén el menú desplegado (no lo cierres sin que el usuario lo haya dicho).
Una regla basica es eliminar opciones. No hagas menúes muy extensos. Mas de 5 opciones son muchas para leer, entender y pinchar. Reduce el numero al máximo y procura que lo que pongas en el menu tenga una importancia real. Es mejor que una opción del menú agrupe diferentes apartados que tener un menu con muchas opciones "simples". El ejemplo que nos puede sonar es el de agrupar las FAQ, Oficinas, Mapa, Carta del Presidente, Memoria Anual, Historia de la Compañía Editorial (en nuetro ejemplo de la revista) en una opción que ponga "Todo sobre Nosotros". Eliminamos opciones y no perdemos accesibilidad.
Si existe una necesidad real de tener muchas opciones, procura usar un directorio y ponlo en el medio de la pagina. La gente encontrara las cosas mas rápido y el menú no se perderá por debajo de la linea de scroll.
El ejemplo mas practico es en las tiendas donde la barra de "departamentos" suele extenderse hasta mas allá del pixel 768. Es mejor poner los departamentos relacionados con la categoría donde se encuentra el usuario y una opción de "ver todos los departamentos".
Las CSS nos permiten manejar con soltura el estilo de nuestro site incluyendo los eventos de enlace "nuevo", "visitado" y (en algunos casos) el evento de "over".
Si bien los códigos de color son complejos de entender y la mayoría de los usuario ni siquiera llegan a recibir el mensaje, es bueno usarlos para aquellos usuarios mas avanzados que requieran de mas información por parte de nuestra web.
La regla general que debemos aplicar es usar un único color para los enlaces, y 3 tonos para los diferentes eventos. Tendremos un color X (azul es la norma) para los enlaces y un tono mas brillante para el evento de "over" y un tono mas apagado para el enlace visitado. Otra variante para el "over" es usar un color que aparecera en el fondo de la zona enlazada.
No uses menúes con rollover. Esta probado que el usuario se siente más cómodo si pincha y el menú se abre.
Los menúes se abren y se cierran si el usuario lo indica. Si por razones de espacio tienes que cerrar un menú cuando se abre otro, reduce él numero de opciones.
Muchas veces, tenemos un menú llamado "Coches". Si pinchamos sobre esta opción el menú se despliega con las opciones de "Deportivos, 4x4, etc.". Es bueno si además de desplegar el menú, abrimos una pagina donde explicamos las opciones más comunes de esa pagina y/o destacamos algún producto. Además de ayudar al usuario a manejar el menú, podemos acercar opciones comunes dentro de esa zona del tipo "ultimas novedades", "buscador", "productos más demandados".
Diseño de Enlaces: Los usuarios no son adivinos
Pautas a seguir:
Utilizar enlaces azules y botones del sistema. Ayudan al usuario a reconocer lo que es pinchable y lo que no.
Ofrecer al usuario la información necesaria sobre donde esta y a donde puede ir de forma clara.
Ofrecer guias al usuario (1, 2 y 3, primero esto, luego aquello, te recomendamos esto).
Los elementos que recargan la pagina deben indicarlo claramente.
Ir ordenados de mas a menos aquellos elementos que claramente indican accion de pinchar y cambiar de pagina.
Colores:
Los links en azul y para los botones del sistema.
Los links en otro color que no sea azul, pierden parte de la llamada de enlace.
Links sin subrayar que cambian de color al azul o se subrayan al pasar por encima.
Fotos:
El tamaño de la foto ayuda a que se pase por encima y se evidencie la opción de pinchar. Otra opción que ayuda al usuario a pinchar en las imagenes, es el hecho de que este con borde. Este borde tendrá el mismo color azul que los links, por lo que ayudara al usuario a reconocer el enlace.
Combos (Lista de opciones predeterminada, por ejemplo países: Andorra, Angola,etc)
El combo es una herramienta de selección, no de acción. Aun asi no se recomienda ni para hacer selecciones. El combo no es una herramienta recomendable, por lo general deja al usuario a medias, sin saber muy bien que pasa cuando pincha sobre el. Su uso se recomienda en formularios u operaciones, pero nunca en navegación.
Texto o imagenes sin subrayar que no cambian de color:
Con este orden recomendamos que siempre se use enlaces azules y botones del sistema.
Como dice el titulo de esta pagina, el usuario no es tonto, pero tampoco es adivino y será mas fácil para la navegación si indicamos claramente que elementos tienen enlace y cual no. Recuerda que cuanto mas fácil se lo pintes, mas paginas visitara, mas banners vera, mas productos mirara, etc.
Tamaño de los botones:
Un dato importante a la hora de hacer botones es el tamaño de los mismos, la relación de tamaños respecto a la pantalla debe ser proporcional ya que ayudaremos al usuario a acertar a la hora de pinchar.
Otro dato importante es el de evitar los espacios en blanco en la navegación. Procura que los botones queden claramente contorneados y que este contorno no se rompa. Si pones una imagen y debajo un texto que explica lo que es, procura que el espacio entre el boton y el texto tambien sea clickeable.
Ejemplo de botones según su forma:
El cuadrado proporciona un área mayor de acierto para el usuario.
El circulo tambien da una área de acierto, pero es menor y el usuario se suele apoyar en los contornos.
Si no pintamos el área de acierto, el usuario tiene que apuntar bien para acertar el botón.
Pautas para el Diseño de la Botonera:
Debe estar claramente indicado el área donde se puede pinchar.
El botón indica claramente que se puede pinchar al estar subrayado.
La separación entre botones es mínima evitando asi zonas no clicables.
No usar iconos, no son útiles, no ayudan y solo quitan espacio.
Hay casos que los botones graficos pesan menos que el codigo html. Esto es un hecho demostrado que entre el código y el peso de un gif con 2 colores casi no hay diferencia y además proporcionamos un área mayor de acierto. Esta opción, solo en caso de que el peso sea menor, solo se recomienda para elementos fijos de la navegación que el usuario pueda almacenar en su cache desde la primera pagina.
Cuando usemos enlaces de texto (azules y subrayados) es importante seguir las siguientes reglas:
Procura que la palabra enlazada indique claramente el destino.
Ver biografía. (Correcto)
Para ver la biografía pincha aquí. (Incorrecto)
Usar el tag de title en los links ayuda a saber que es lo que vamos a ver. Algunos navegadores no lo leen, pero ayuda y no es incompatible.
Ver biografía. (Recomendable)
Si el enlace nos dirige a otro servidor, es bueno pintar la dirección.
Ver biografía (http://dominio.com/biografia/) . (Recomendable)
Otro caso importante es cuando hacemos botones en secuencia (el típico, 1, 2 y 3). Esto es útil y ayuda al usuario ya que le puede servir de guía y le ayudan a predecir su camino.
Lo que se recomienda en estos casos, es dejar el link abierto es todos los botones y no obligar al usuario a utilizar o rellenar el paso 1 para ver el paso 2. En muchos formularios se utiliza este sistema de 1, 2 y 3, pero no se deja ver el contenido del 2 o el 3 hasta que se rellena el 1. Es mejor si dejamos todos abiertos para que el usuario explore y no encadenemos los pasos obligando al usuario a utilizar todo el sistema.
Diseño de las opciones de Selección múltiple (combos y demás)
Hay casos en los que los combos se utilizan para "ahorrar operativa al usuario"...
Veamos un ejemplo: Queremos comparar dos coches en la web de Supermotor
Que se les ocurrió, elijo la marca en un combo y se supone que "adivino" que en el combo de al lado se recargan los modelos:
Elijo la Marca A y el Modelo A (se recarga la pagina sin que yo lo indique)
Elijo la Marca B y el modelo B (se recarga la pagina otra vez sin que yo lo indique)
Y ahora es cuando puedo comparar.
RECUERDA: El usuario es el que tiene el control... no la maquina... NUNCA se deben ejecutar operaciones sin que el usuario lo haya ordenado. Entendemos que recargar la pagina es ejecutar una orden que el usuario ordena... nunca la debemos hacer sin su permiso.
Que ahorro hemos conseguido? Solo hemos conseguido que el usuario se vea recargando la pagina una y otra vez...
Cual hubiera sido el modelo correcto (pensando en que hay usuarios no acostumbrados a internet y que no todos somos unos genios...):
Presentamos una pagina donde se indica con claridad que es lo que tiene que hacer el usuario.
1 de 3: Elija las 2 marcas de coches a comparar: (lo mejor seria hacer la selección con radio button por columna de marcas)
MARCA 1
marca 1
marca 2
marca 3
.... MARCA 2
marca 1
marca 2
marca 3
....
Siguiente: (enlace a la siguiente pagina) Seleccionar modelo dentro de las marcas escogidas.
En este punto es bueno recordar que siempre debemos indicar el status del usuario (paso 1 de 3, siguiente operación, etc...), recuerde que siempre es el usuario el que tiene el control, para poder tener el control es necesario estar informado de donde vengo, a donde voy, que puedo hacer entre medias, que ocurre si pincho aquí...)
2 de 3: Elija los 2 modelos de coches a comparar: (hacer la selección con radio button por columna de marcas)
Nombre de MARCA 1 / Seleccione modelo
modelo 1
modelo 2
modelo 3
.... Nombre de MARCA 2 / Seleccione modelo
modelo 1
modelo 2
modelo 3
....
Siguiente: (enlace a la siguiente pagina) Ver comparativa de modelos escogidos.
Con este modelo se consigue que el usuario haga una selección basada en sus acciones, es el usuario el que indica cuando avanzar y cuando no, de tal forma que el controla la recarga de paginas y no somos nosotros quienes indicamos cuando recargar datos.
Y dentro del caso de todo auto, no seria mejor hacer una selección previa en la que indiquemos que tipo de modelo queremos comparar? es decir, 4x4, turismo, etc... por que que sentido tiene comparar un 4x4 con un BMW descapotable...?
Luego hay algunas paginas web, sobre todo aquellas que ofrecen operaciones de algún tipo (véase webmail, bancos, tiendas, etc...) en muchos casos se hace necesario que el usuario haga algún tipo de selección múltiple de datos.
Esta selección múltiple por lo general hace referencia a opciones cerradas (ciudad de residencia, año de nacimiento, etc) que pueden afectar al resto de la pagina. Por ejemplo si quiero abrir una cuenta en un banco si pongo como año de nacimiento 1998, no me dejara acceder por que se supone que debo ser mayor de 18 para acceder.
Este tipo de operativa es correcta siempre y cuando no hagamos que estos combos sean operativos sin que el usuario lo indique.
Esto quiere decir, si al elegir la fecha de nacimiento vas a recargar la pagina para validar la fecha, avísamelo.
Que se recomienda en estos casos:
Procurar agrupar los datos a validar.
Que el usuario sepa antes de introducir datos, cuales son los márgenes de rechazo (mayor de 18, vivir en Bahía Blanca, ser Cura...).
Que el usuario sea el que indica cuando hacer la validación.
En caso de introducir datos fuera de rango, explicarle al usuario por que ha ocurrido esto.
B2B. Dar antes de recibir
Dar antes de pedir informacion al usuario.
Muestra todo lo que tengas antes de pedir registro.
Si por motivos de confidencialidad no puedes mostrarlo, haz una demo real con informacion simulada.
Simplifica el registro.
Ofrece contenido de valor.
Breve introduccion:
Una serie de noticias sobre iniciativas b2b en España plantean una visión sobre el sector. El dato más sorprendente en estas noticias era el importe económico que pensaban desembolsar para realizar el proyecto. En el caso de BtoBfactory.com (empresa que ha creado E-difica.com) comentaban que pensaban gastarse 400 millones de euros de aquí al 2004. En el caso de Plastia.com, sus creadores pensaban invertir unos 300 millones de euros en 2 años. Los portales estan bien enfocados. E-difica.com esta dirigido al sector de la inmobiliaria y los de Plastia.com y Plasticsarea.com estan dirigidos al sector de los plásticos.
Desde el punto de vista de la usabilidad y los contenidos se presentan algunos problemas que veremos a continuación:
1. Da antes de pedir información al usuario:
El principal problema de los sites de B2B es que esconden todo el servicio e informacion tras el registro. Es bueno mostrar todo el site en abierto, dejando solo bajo registro el tema transaccional. Con esto conseguimos que el usuario se informe con claridad de todo lo que hay disponible, dandole motivos para que se registre cuando el quiera.
Los secciones que deberían quedar en abierto son, consultar las subastas antes de pujar, poder consultar los catálogos de otras tiendas antes de incluir el nuestro y poder buscar en todo el site antes de registrarse.
En casos como plastia.com la información disponible en abierto se divide en 4 puntos:
Presentación: Tenemos una descripción de objetivos, estrategia, ventajas, etc. Básicamente es texto y diapositivas estilo power point. No vemos pantallas reales, ni datos reales.
Servicios: Aquí tenemos una lista de los servicios que se ofrecen agrupados en 3 grandes áreas (1) servicios generales (2) área funcional y (3) área técnica junto a una descripción de cada uno. No hay enlaces a pantallas, demos o servicio real.
Contacto: Dirección física y formulario para enviar un mail. En el formulario el campo de "texto libre" esta limitado a 200 caracteres.
Colaboradores: Aquí vemos la lista de "partners" que tienen.
Esta presentación no esta mal, pero no enseñan nada del producto real. No sabemos cuál es la lista de empresas vinculadas, directorio de empresas disponible, subastas de material, bolsa de empleo, comprar un dominio, etc.
Deberíamos recordarle a los amigos de plastia.com que no hace falta poner todos los textos en gráfico y que es mejor el fondo blanco para imprimir las paginas.
Por otro lado tenemos el ejemplo de Verticalia.com que maneja una serie de portales temáticos dirigidos a diferentes sectores (agricultura, pesca, carne, flores, etc.). En este caso, se muestra toda la información al usuario antes de acceder, pero ocurre que casi todo esta desierto. Es complejo encontrar empresas vinculadas, subastas abiertas, catálogos, etc. Si no tenemos contenidos, es mejor no sacar esas secciones. Aburre mucho navegar por directorios vacíos.
Digamos que verticalia es una de las mejores en cuanto a usabilidad. Quizás se echa de menos un acceso mas contundente a la zona de catálogos y un buscador en la portada.
2. Muestra todo lo que tengas antes de pedir registro:
En los sitios de B2B hay dos escenarios muy claros que debemos cuidar en la navegación:
Soy una empresa que se quiere dar de alta para figurar en la base de datos.
Soy una empresa que busca servicios o productos de otras.
Facilita el camino en ambos casos.
Para el caso (A) pinta una ruta clara para aquellos que simplemente quieren subir su catalogo al site. Explica como comprimir las fotos, diferentes formatos, longitud de textos, como se hace un catalogo, etc. Ten en cuenta que no todas las empresas tienen escáner o fotos de productos. Ofrece opciones de catálogos simplificados (ficha de texto y poco mas).
Para el escenario (B) sencillamente pinta una estructura de directorios a la Yahoo! en la portada y un buscador. Si tu site tiene secciones vacías, pinta claramente lo que tengas y no hagas perder el tiempo a la gente buscando en directorios vacíos.
Este es el típico ejemplo de directorio a la Yahoo!. Básicamente se compone de los directorios de tu site, y se ponen ejemplos de subcategorias por si el nombre del directorio no es totalmente descriptivo. Estas subcategorias se enlazan y asi sirven como atajos a las zonas más populares del site.
El orden de los directorios puede ser alfabético o por relevancia, es mejor el orden de relevancia cuando tienes pocos elementos (no mas de 10) y alfabético cuando son muchos. De todos modos, si tienes muchos elementos, crea una zona de "favoritos" y pon los demás en orden alfabético.
Como complementos apunta aquellas zonas que son nuevas con un (Nuevo) e indica la cantidad de productos disponibles dentro de cada zona.
Luego a nivel de estilo, puedes crear el directorio a 1, 2 o 3 columnas, con mas o menos subdirectorios, etc. Ejemplos a seguir a la hora de presentar el "mercado": WorldBid.com y B2B.yahoo.com.
3. Si por motivos de confidencialidad no puedes mostrarlo, haz una demo real con información simulada:
Todos sabemos que hacer demos en un rollo, pero si no hay otra forma de ver el producto antes de registrarse, será necesario que te hagas una. La forma mas sencilla de hacerse una demo es coger el site, hacer pantallazos, y ponerlos en un documento HTML. Procura no escalar las pantallas ya que harás muy complejo el ver la información ya de por si pequeña.
Si dispones de recursos podras hacerte una demo "interactiva" explicando que es cada zona de la web, cada campo, etc. Por lo general estas demos interacticas se hacen con "flash". Solo procura que no pese demasiado.
4. Simplifica el registro:
Los registros dentro del mundo del b2b deberían simplificarse. Por defecto todo aquello que no sea necesario quítalo. Nunca pidas información que no es obligatoria.
Por lo general el registro es largo y se suelen plantear problemas de localización geográfica.
Sobre el tema de localización geográfica, procura evitar el uso de términos locales (NIF) y si usas combos para provincias o países, procura contar siempre con la opción de "otro / ninguno".
En el caso de Campo21.com de los amigos de btobfctory.com en el formulario de registro el campo de país esta limitado a Argentina y Estados Unidos. Si esto es asi, se debería decir de forma clara en la portada. En el caso de Plastia.com en el registro pide forma voluntaria los datos de "CIF" y "CNAE". Si no son obligatorios quítalos y procura si tu site tiene proyección internacional no uses terminología local. Con el site de Plasticsarea te puedes registrar fácilmente, pero no se ofrecen grandes diferencias entre estar registrado o no. Básicamente no hay catalogo de productos o compañías.
En Constructiva de los amigos BtoBfactory.com el alta es sencilla, pero no se produce un reconocimiento del usuario en tiempo real. Parece que hay que esperar a que el sistema se de cuenta de que te has registrado.
Ya por ultimo en el caso de e-difica.com el alta es algo complejo pese a tener el acceso siempre presente en modo de pestaña. En un Mac con Netscape y Explorer hubo fallos técnicos.
El mejor es el de verticalia.com. Un registro relativamente sencillo y el alta dentro del sistema es inmediata.
5. Ofrece contenido de valor:
Este ultimo punto es algo mas editorial. Muchos portales b2b se lanzan al aire y reciben cobertura de los medios cuando realmente estan vacíos, funcionan mal y no son útiles. Ejemplos como edifica.com, plastia.com o plasticsarea.com no mejoran un panorama bastante desolador.
Los emprendedores de este tipo de portales deberían empezar por construir portales dirigidos a zonas mas o menos conectadas. Creo que en España un portal de B2B de agricultura aun esta lejos de triunfar. Creo que uno dirigido al sector de ordenadores tendría algo mas de audiencia (cuanta gente busca desesperadamente él ultimo driver o actualización del sistema).
Luego lo de siempre, busca los lideres: el único ejemplo de "B2B" que funciona bien es el tema de contratación de personal. Portales tipo Monster.com son lideres dentro del sector de contratación de personal y llegan a tener muchas visitas. Estos portales de contratación de personal hacen muy sencillo el alta del producto y permiten buscar en la base de datos y ver toda la información sin necesidad de registrarse.
Por otro lado lo de ofrecer contenido de valor tambien va por los buscadores. Deberían mejorar las paginas indexadas sobre el tema ya que los resultados que ofrecen actualmente dejan mucho que desear:
En todos los casos se puso B2B en la casilla de buscar.
En el buscador de ya.com el primer resultado es una pagina en obras.
En el caso de eresmas.com solo salen paginas en ingles. Primer resultado.
En el caso de terra.es el primer resultado es una pagina que no funciona.
Los amigos de yahoo.es lo hacen algo mejor ofreciendo una lista de 10 categorias de sitios de B2B.
Pautas para diseñar un enlace a mi site
Ofrece recursos para que la gente pueda crear enlaces a tu site de forma facil. La precision del enlace es vital.
Que la gente te ponga un enlace generara mas visitas y hará mas popular tu site.
Algunas cosas que debemos evitar cuando creamos enlaces.
Información complementaria sobre este articulo.
1. Ofrece recursos para que la gente pueda crear enlaces a tu site de forma fácil.
Poner enlaces a paginas relacionadas con tu "negocio" es una practica saludable que ayuda a que tu pagina sea mas popular (te puedes convertir en una especie de lanzadera de información) y ayudara a que otras paginas te enlacen como referencia de información consiguiendo mas visitas.
Poner un enlace no siempre es fácil ya que (a) técnicamente no todo el mundo sabe como hacerlo y (b) puede ser que la pagina a la que apuntemos no ofrezca información relevante o haya dejado de existir.
A la hora de poner un enlace debemos ser capaces de seleccionar con precisión la pagina a la que apuntamos de tal forma que si pongo un enlace a un articulo de interés debemos evitar el apuntar a la portada del magazine (obtendremos imagen de fiabilidad si la gente encuentre la cosas con rapidez).
Por esta misma razón, en nuesto site, debemos ser capaces de ofrecer paginas "robustas" que no caducan y no se mueven. Si nuestro site ofrece estabilidad se convertirá en una fuente de referencia donde la gente podrá ir a consultar información por que "siempre esta disponible".
Si por cualquier razón las paginas que aparecen en nuestro site tienen caducidad, debemos avisarlo para que la gente sea consciente de este hecho. No hay nada mas doloroso que poner un enlace a una pagina que no existe (nuestro site es el que pierde).
Alerta sobre la caducidad de las paginas
Los recursos que se pueden ofrecer para que la gente ponga enlaces pueden ser los tipicos logos con el codigo HTML listo para "copiar y pegar" o cosas mas imaginativas como "buscadores", juegos, banners, etc.
En este ejemplo de Yahoo! podemos ver como se presenta la imagen con el link mas el codigo html listo para copiar y pegar dentro de nuestra pagina.
Amazon tambien ofrece un amplio catalogo de logos y botones listos para "copiar y pegar" en nuestra pagina. La precision del enlace unido a un buen diseño pueden hacer que la gente lo vea atractivo.
2. Que la gente te ponga un enlace generara mas visitas y hara mas popular tu site.
Para decir esto no hace falta ser un genio, pero para llevarlo a buen termino aquí van algunos consejos prácticos:
Busca las paginas relacionadas con tu sector. Entra en un buscador popular y pon él termino(s) que mejor definan tu site.
Entra en las paginas que encuentres y mira lo que hacen. Aquellas que veas interesantes pon un enlace a su site (procurando apuntar a una pagina o información relevante).
Envíales un mail comentando que tu tienes una pagina, que la visiten y si lo ven interesante que te pongan un enlace.
El siguiente paso es escribir a medios tradicionales (revistas, periódicos (el suple informatico de Clarin, radios) especializados o cercanos al sector, haciéndoles llegar la existencia de nuestra pagina. Debemos procurar comunicar al menos una ventaja de visitar nuestro site (información, herramientas, compra) para que podamos optar a ser mencionados.
Luego hay que procurar ser constante y mantener esta practica de forma ciclica. Al menos cada trimestre, procurar dar una vuelta por internet y ver que paginas nuevas existen y de nuevo hacerles llegar nuestro site, poner un enlace nuevo y enviar mails.
3. Algunas cosas que debemos evitar cuando creamos enlaces:
Esta lista es breve pero básica para mantener en buena forma nuestros enlaces.
Cuando pongas un enlace a una pagina externa avisalo. Una forma sencilla es ponerlos debajo de la categoria de "enlaces de interes". Tambien puedes poner algo del tipo (externo) junto al enlace, pero lo mas sencillo es poner en el enlace el dominio del site, de esta forma la gente entenderá que se dirige a otro dominio.
Procura abrir esos enlaces sobre tu propio navegador. Si lo abres en otra ventana indícalo.
Nunca abras una pagina externa dentro de tus frames. Esto puede llegar a ser ilegal en algunos casos.
Ofrece un breve comentario sobre el enlace indicando por que lo has puesto, que se puede encontrar allí, etc.
Procura revisar los enlaces en tu site para evitar perdidas. Si un enlace en tu site falla, la culpa es tuya.
Menos es mas. Ten esto presente a la hora de seleccionar los enlaces para tu web site. Ofrece contenido de valor, enlaces precisos e información relevante. Mucha gente se frustra en internet por no encontrar información de valor.
4. Informacion complementaria sobre este articulo:
Hace unos dias vio un articulo que contaba lo siguiente:"... la mayoria de las visitas no proceden del portal ... "
1999 1998
Portales 33% 44%
Otras paginas y bookmarks 67% 56%
Fuente: eastgate.com
El autor de este articulo decia que ante esto el futuro del banner en portales, como medio de atraer audiencia, es cuestionable ya que muy poca audiencia viene por estos medios si lo comparamos con la audiencia global.
Ante este articulo me surgieron dos opiniones.
a) Si viéramos el camino de un usuario hasta nuestro site, puede ser que realmente el 70% de las visitas ocurran por un link casual. Pero lo que ofrece este articulo no es una solucion, sino un nuevo problema.
b) Si la gente llega a mi pagina por otras vías (que no son el portal), como hago para promocionar mi site y conseguir audiencia? La respuesta es "relaciones publicas" y en Internet tiene un formato muy simple: pon un link.
Ante esta practica perdida (pon un link) esta surgiendo una nueva practica que es "te pago por poner un link". Aquí podemos ver dos casos.
Gomez.com (una buena fuente de información) ofrece varias formulas de conseguir dinero por poner links o "asociaciones" y About.com hace algo similar.
Pautas de Diseño de nuestro site para ser visto en Palm Pilots:
Una guía para el correcto diseño de sitios webs accesibles desde PDAs. (Personal Digital Assitants)
Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla más reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.
Definir cuidadosamente la estructura del site.
Con las secciones más importantes y enlaces a las mismas desde todas las páginas. La primera página ya ha de mostrar información útil para el usuario, evitando páginas de bienvenida o de selección de idioma.
Evitar el uso de tablas.
En la mayoría de los casos basta con dividir el texto con saltos de línea y párrafos. El procesado de las tablas ralentiza la velocidad de carga de la página. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 pixels de ancho.
No utilizar marcos (frames).
Si ya de por sí se ha de intentar evitar su uso en el Internet convencional, con más razón en el Internet móvil: la mayoría de los navegadores no los soportan y restan mucho espacio en la pantalla.
Publicar contenidos concisos.
Por la limitación de la memoria y de la pantalla, escoger sólo la información más importante y esencial.
Organizar la información cuidadosamente.
Minimizando la longitud del texto (máximo 3 pantallas de longitud) y escogiendo una distribución óptima de los links de navegación (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegación.
Optimizar los gráficos.
- En dimensión: las pantallas de dispositivos Palm OS tienen un tamaño de 150x150, y los Windows CE/Pocket PC de unos 240x320.
- En tamaño: escogiendo el número de colores visibles en el PDA. (16 y 8 bits de color; 16, 4 y 2 escalas de grises).
Incluir texto alternativo en todas las imágenes.
Con el tag alt ofrecemos información a los usuarios que han deshabilitado la carga de imágenes en su navegador.
Añadir el tag handheldfriendly al comienzo de todas las páginas.
AvantGo sabrá que la página está optimizada para PDAs.
<meta name="HandheldFriendly" content="true"> .
Utilizar convenientemente el caching de las páginas.
Para aumentar la velocidad de carga de las páginas. No guardar en caché las páginas que se actualizan todos los días (página de noticias), y guardar en cache las páginas que se actualizan raramente (página de créditos).
A todas estas pautas mínimas de diseño para dar usabilidad y funcionalidad al sitio debemos agregar un concepto esencial para que un site se destaque: Alto Impacto. Hoy en dia debemos buscar que nuestro site sea espectacular y para eso debemos profundizar en el análisis teórico que sigue a continuación comprendiendo la evolución de los Net Arts y la e-Media como fusión de campos digitales.
UNIVERSIDAD DE PALERMO
by
:: Walo ::
Los avances en el campo de las comunicaciones en el Siglo XXI hacen posible hoy lo que parecía ciencia-ficción apenas unos años atrás. Desde el uso de Televisores portátiles del tamaño de un reloj de pulsera hasta los videofonos utilizados actualmente entre varias ciudades del Japón permitiendo la exploración y el intercambio de ideas entre personas situadas en las más remotas regiones del planeta de un modo simultaneo e interactivo, posibilitando la concreción de proyectos como este, reduciendo tiempos y acortando distancias y haciendo que cada vez las fronteras existentes entre los distintos países sean cada vez más virtuales gracias al desarrollo evolutivo del ancho de banda en la transmisión de datos, imagenes, voz y sonido. Esto implica una reformulación en las formas preestablecidas acerca del trabajo en equipo en la Argentina permitiendo establecer interconsultas instantáneas, con un grupo de colaboradores a partir de la interactividad dada por la World Wide Web, en la creación del proyecto desde sus orígenes, discutiendo hipótesis, planteando diferentes enfoques posibles para un mismo tema entre personas que viven en realidades sociales distintas. En este caso vinculándonos a traves del Ciberespacio a traves del aporte dado a la realización de este proyecto por del siguiente equipo de consultores y colaboradores: el D.M. Michael Pinciotti (New York, U.S.A), la Arq. María Verónica Russi Giner (Buenos Aires, RA), el Net Artist. Stef Winkler (Frankfurt, Germany), el Prof. José Eduardo Chaya (San Miguel de Tucumán, R.A), la Prof. Anahi Cáceres (Buenos Aires, RA) y la Artista Digital Andrea Cecilia Russi (Buenos Aires, RA) quienes situados en varias ciudades alrededor del planeta (Nueva York, Frankfurt, San Miguel de Tucumán y Buenos Aires) contribuyeron a lo largo de 6 meses en el desarrollo de esta investigación intercambiando planteos, diversidad de opiniones, información actualizada y material de videoarte y NetArt (archivos de textos, imágenes, sonidos y video) en forma simultanea a traves de la Red Internet.
Pautas generales para el diseño, la interacción y la visualización de la información en el desarrollo de sitios web:
Como reducir el peso de las páginas web:
Primero pasos
Disponer de tiempo, tecnología y recursos humanos para llevar a cabo el proyecto web.
Qué vas a "vender": entiéndase vender como promocionar, anunciar, o vender directamente el site.
A quién se lo vas a "vender": debemos identificar a nuestro núcleo de usuarios extremos que nos ayudaran a posicionar el producto de una forma mas definida que si nos dirigimos directamente a la gran audiencia.
Cómo se lo vas a "vender": aquí es donde entran los temas de logística, atención al cliente, diseño de producto y web.
Una vez vendido, qué hacemos: es importante preveer que pasara mañana cuando nuestros clientes nos hayan comprado los productos. Fidelización, promociones, seguimiento...
El primer prototipo
Con todos los requisitos recogidos en los primeros pasos, podremos empezar a pensar en como vamos a construir nuestro site.
Se recomienda que el equipo que este en esta fase sea multidisciplinario (como mínimo, programación, diseño, contenidos y un coordinador de equipo).
Se recomienda que el coordinador sepa algo de todas las materias, (servidor, web, diseño, contenidos) por que será la persona encargada de crear puentes entre los diferentes departamentos y de llegar a consensos cuando surgen problemas de competencia.
Con este equipo se llevara a cabo una serie de pasos: diseño de imagen, isologo animado, sonido de acceso al site, propuestas de guiones interactivos, diagramas de idea y mapas de navegación, que servirán para aproximarnos a la idea de nuestro site.
Esto será producido a un nivel casi real para que sea probada por los usuarios.
Test de usuario
Una vez producido el primer prototipo, se hará nuestro primer testeo de usuario.
El test de usuario nos ayudara a enriquecer el producto observando el comportamiento del usuario, viendo las virtudes de nuestro producto y sobre todo aquellos puntos débiles que pueda presentar.
Con el test de usuario se realizara un nuevo prototipo que se debería volver a testear mientras sea posible (feedback).
Lanzamiento
Una vez tenemos un prototipo ajustado queda la parte de realización técnica.
Se deberá disponer del tiempo disponible para ajustar el prototipo a la realidad, pero no se deben encontrar nuevos obstáculos en esta fase.
Para evitar estos nuevos obstáculos, es necesario la total transparencia de los departamentos a la hora de realizar el prototipo, es decir, conocer toda las posibilidades existentes dentro de la operativa, ver el "peor de los casos existentes", ver como funciona "el primer dia", etc...
Por ultimo se recomienda pasar una fase de "emisión en pruebas", es decir, lanzar el site y probarlo en real (conexiones con modems básicos, ADSL, Cable modem, inalámbrico, etc, ver velocidad operativa real, ver respuesta del correo o del call center en caso de que existan, etc..)
Crear buscadores internos
Para tener un buscador debes guardar todo lo que hagas. Procura que cada artículo, fichero, producto tenga una pagina con entidad propia. Jamas borres una pagina. Puede ser que alguien la este enlazando desde otra pagina, o puede ser que alguien la este buscando.
Considerar lo siguiente:
a. Identificar palabras clave (keywords) para facilitar la busqueda
Cuando hagas tu pagina ten en mente la forma de almacenar los archivos. Procura que cada "elemento" tenga su "entidad".
Definamos "elemento" como cada articulo, ficha de producto, gráfico que tenga interés para los usuarios en tu site.
Cada uno de estos elementos tendrá una pagina con un nombre, una ubicación y un orden dentro de la jerarquía de tu site.
Este elemento por tanto estará correctamente identificado para acceder en cualquier momento.
b. Dejemos que el usuario busque todo lo que quiera.
Lo que tiene sentido en un buscador es que se pueda buscar todo. Es decir, si entro en un periódico, y pongo "Kirchner", lo que quiero es ver todas las noticias que hay sobre Kirchner desde que nació. Eso me da libertad y me muestra la potencia de la página. Buscar en los archivos y ver que el sistema responde, da al usuario muestras de que esta delante de un sitio donde puede pasar horas y horas mirando información relevante. Si empezamos a limitar la busqueda (solo este mes, solo este numero, solo en este sitio) empezamos a hacerlo mal y puede ser que el usuario se muestre frustrado. Tambien ocurre que él número de resultados validos disminuye con lo que perdemos calidad en la busqueda.
c. Ofrecer resultados ordenados
Asi como demostrar la potencia de la maquina con un buen buscador esta bien, tambien es reconfortante demostrar inteligencia. Para ello debemos identificar palabras clave "relevantes" en nuestro site. Esta identificación nos servirá de atajos para evitar mostrar información redundante al usuario. Siguiendo con el ejemplo del periódico. Si entro en el periodico y pongo "Kirchner", lo ideal seria mostrar un enlace a la típica ficha oficial y luego todos los resultados relevantes en nuestro site.
Esta "inteligencia" requiere identificar todos los elementos que creamos que son relevantes para el usuario y hacerlo de forma mas o menos humana. Siguiendo con el ejemplo del periódico, palabras como "presidente", "Kirchner", "Nestor", nos llevarían a resultado similares. Donde lo ideal seria ver una serie de "fichas" que concuerdan con él termino buscado, y una serie de resultados provenientes de la base de datos.
Por ejemplo www.Photodisc.com es uno de los sitios mejor organizados. No solo busca por "keywords" si no que una vez encontrada la foto vemos una serie de keywords relacionados con esta. Estos keywords estan enlazados de tal forma que puedo seguir buscando por keywords nuevamente hasta afinar los resultados. Básicamente lo que ofrece es una sensación de "control" que muchas veces se hecha de menos.
Tenemos 3 ejemplos básicos:
The New York Times. Este periódico ofrece un buscador, quizás algo pequeño pero muy efectivo. Presenta dos opciones de busqueda, bajo la forma de "radio button", que son buscar en la edición de hoy o buscar en los archivos. Los archivos son de pago con lo que han conseguido que el buscador sea una herramienta de venta. En los archivos básicamente lo puedes encontrar todo. En el buscador del dia tambien. Es impresionante.
ESPN.com es un sitio de deportes que tiene un buscador muy bueno. En la parte superior tenemos un combo con 3 opciones muy claras, "keywords", "buscar en todo él site" o buscar en internet. No hay lugar a dudas. Luego tenemos el campo de texto y el botón de buscar. Todo correcto. El caso de buscar por keywords, es clave, si pongo NFL, no quiero ver todos los artículos que contienen la palabra NFL, quiero ver la pagina que le dedicas a esto. En el caso de sitios de comercio electrónico, si pongo pantalones, no quiero que me saques todas las paginas que pone pantalones, quiero que me lleves a la sección/es donde vendes pantalones.
La gente del Marca.es lo hace muy bien. Quizás el buscador este algo escondido, pero funciona muy bien.
Lo que hacen en España los periódicos. En los periódicos puede ser donde un buscador sea la herramienta mas utilizada despues de los portales. El archivo que generan y la flexibilidad de internet les proporcionan un valor incalculable.
Por ejemplo los diarios: ABC, El Mundo, El País y la Vanguardia.
Como se presenta el buscador en las portadas:
El ABC: Presenta un buscador en la portada, pero se les olvido poner el botón de "buscar".
El Mundo: Presenta un buscador interno al final de la pagina de portada. Demasiado escondido.
El País: Presenta la busqueda como una opción por lo que debemos irnos a otra pagina para poder buscar.
La Vanguardia: Presenta un buscador en portada pero es algo complejo de manejar. Tambien se les olvido poner el botón de buscar.
Lo ideal seria el formato del buscador del Mundo que es el mejor de los 4. Presenta resultados ordenados por relevancia y disponemos del buscador en la misma pagina, por lo que no tenemos que volver al buscador para hacer una nueva busqueda. Esto es básico, pero muchas veces se olvida.
En cambio en el diario El País no estan bien hechos ni el tema de titular las paginas por lo que muchas veces los resultados salen vacíos. Luego no tenemos el buscador en esta pagina por lo que tenemos que volver al buscador para hacer una nueva busqueda.
Lo ideal es lo que hace el Mundo. Los ordena por relevancia, indicando la fecha, peso y el titular del articulo.
Diseño de Formularios
Pautas a seguir:
1. Procura reducir al máximo el numero de campos.
2. Evita los combos.
3. Es mejor si la información no se fragmenta demasiado.
1. Reduce al máximo el numero de campos en los formularios
Si en internet siempre estamos hablando de menos es mas, cuando hablamos de formularios, menos es mucho... debemos tender a cero.
A. Procura reutilizar campos:
Por ejemplo:
Correo electrónico = nombre de usuario.
DNI = password.
B. Evita formalidades
Ejemplos de campos que no son realmente necesarios:
Tratamiento ( Sr., Sra.,)
Tipo de Calle (Avenida, Calle, Camino, etc)
Fecha de nacimiento (es esto realmente necesario?, si lo es, indica para que lo estas pidiendo)
2. Evita el uso de los combos en los formularios.
1. Es más rápido escribir que seleccionar la opción en el combo.
2. La pagina pesa menos. El usuario se la baja más rápido y acaba antes el proceso.
En la mayoría de los casos es más rápido escribir el texto que buscarlo en un combo.
Escribir la palabra "Argentina" puede llevar entre 1 y 2 segundos mas o menos, elegirla en un combo donde podemos encontrar todos los países del mundo puede llevar un promedio de 4 y 6 segundos. Si usamos el truco de preseleccionar el país en el combo, tambien podemos pre-escribir la palabra en el campo de texto.
El único caso en el que el uso de combos esta justificado es en aquellos en los que la respuesta esta predefinida tipo rangos, valoraciones subjetivas, marcas, etc... pero no lo uses para países, provincias, números, etc...
3. Evitar fragmentar la información.
El caso más típico es el de la dirección donde por lo general se pinta asi:
Tipo de calle:, Dirección:, Numero:, Código postal:...
Este caso a su vez suele estar alimentado con varios combos, con lo que el usuario debe leer cada campo, entender lo que le estan pidiendo y rellenarlo...
Podemos simplificarlo usando una única linea donde el usuario escriba toda la dirección, como si se tratase de una carta.
Dirección completa: Calle Martínez Izquierdo N23, 7h.
Código postal: 12002.
De esta forma solo tenemos una linea para el campo "dirección", y luego 3 mas para indicar código postal, población y provincia.
El usuario se sentirá más cómodo si puede poner lo que quiera y no le obligamos a rellenar cosas prefijadas que a lo mejor no entiende o no se ajusta a su caso particular.
Luego quizás quede destacar el caso de algunos bancos donde el campo "profesión" obliga al usuario a elegir una opción de la lista que el banco dispone, haciendo uso de un buscador, códigos de profesión, etc. Realmente no es recomendable. El beneficio que pueda dar esta información frente al engorro que produce al usuario no tiene equivalencia.
Con estos breves consejos podemos pasar de un formulario con 16 campos a 8 y disminuir el peso de la pagina a la mitad.
Cabeceras de portal = espacio perdido
El usuario suele mirar al centro de la pantalla, por lo que debemos procurar que los elementos importantes esten asi colocados.
Nadie usa tu barra de navegación y nadie mira los banners, procura que ocupen lo menos posible.
Lo que pongas en la barra de navegación que sea util. Terra incluye el horóscopo en la barra de navegacion, es realmente imprescindible?
MSN ofrece una barra adecuada, se ajusta a las resoluciones mas pequeñas de pantalla y ofrece todas las herramientas básicas del site. Es un buen ejemplo a seguir.
De esta cabecera podemos destacar lo siguiente:
No se usan iconos para nombrar las zonas con lo que las letras son mas grandes y mas faciles de pinchar.
La separación de elementos esta clara con una linea vertical entre unos y otros, el usuario sabe dond empieza uno y acaba otro.
Las opciones presentadas en la barra son los "fundamentales".
Se indica claramente al usuario donde esta coloreando la zona activa.
El banner se ha reducido al máximo para evitar perder espacio. Al estilo yahoo!.
La cabecera de CNET esta bien porque ofrece todos los enlaces de su red en un espacio mínimo, visible y no molesto. Quizás se penalice mucho al usuario con el tamaño del logo. Seria mejor usar un logo animado de presentación o ingreso al site, para dejar luego mas espacio al contenido.
La cabecera de ya.com es la peor que hemos visto. Demasiado ancha, demasiado larga, un banner gigante que no sirve para nada, no es un ejemplo a seguir. Al igual que la de terra, la anchura es superior a 800x600. En esta cabecera no esta claramente definido el tamaño de los botones, se usan iconos que no sirven para nada.
Diseño del menú
Procurar crear una navegación fluida a traves de (a) buenos contenidos, (b) directorios y (c) buscadores bien indexados.
Evitar un menu con muchas opciones (mas de 5 puede ser mucho).
Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero con diferentes tonalidades. No uses diferentes colores para cada estatus.
Si el menú se despliega, procura abrir una pagina por defecto y mantén el menú desplegado (no lo cierres sin que el usuario lo haya dicho).
Una regla basica es eliminar opciones. No hagas menúes muy extensos. Mas de 5 opciones son muchas para leer, entender y pinchar. Reduce el numero al máximo y procura que lo que pongas en el menu tenga una importancia real. Es mejor que una opción del menú agrupe diferentes apartados que tener un menu con muchas opciones "simples". El ejemplo que nos puede sonar es el de agrupar las FAQ, Oficinas, Mapa, Carta del Presidente, Memoria Anual, Historia de la Compañía Editorial (en nuetro ejemplo de la revista) en una opción que ponga "Todo sobre Nosotros". Eliminamos opciones y no perdemos accesibilidad.
Si existe una necesidad real de tener muchas opciones, procura usar un directorio y ponlo en el medio de la pagina. La gente encontrara las cosas mas rápido y el menú no se perderá por debajo de la linea de scroll.
El ejemplo mas practico es en las tiendas donde la barra de "departamentos" suele extenderse hasta mas allá del pixel 768. Es mejor poner los departamentos relacionados con la categoría donde se encuentra el usuario y una opción de "ver todos los departamentos".
Las CSS nos permiten manejar con soltura el estilo de nuestro site incluyendo los eventos de enlace "nuevo", "visitado" y (en algunos casos) el evento de "over".
Si bien los códigos de color son complejos de entender y la mayoría de los usuario ni siquiera llegan a recibir el mensaje, es bueno usarlos para aquellos usuarios mas avanzados que requieran de mas información por parte de nuestra web.
La regla general que debemos aplicar es usar un único color para los enlaces, y 3 tonos para los diferentes eventos. Tendremos un color X (azul es la norma) para los enlaces y un tono mas brillante para el evento de "over" y un tono mas apagado para el enlace visitado. Otra variante para el "over" es usar un color que aparecera en el fondo de la zona enlazada.
No uses menúes con rollover. Esta probado que el usuario se siente más cómodo si pincha y el menú se abre.
Los menúes se abren y se cierran si el usuario lo indica. Si por razones de espacio tienes que cerrar un menú cuando se abre otro, reduce él numero de opciones.
Muchas veces, tenemos un menú llamado "Coches". Si pinchamos sobre esta opción el menú se despliega con las opciones de "Deportivos, 4x4, etc.". Es bueno si además de desplegar el menú, abrimos una pagina donde explicamos las opciones más comunes de esa pagina y/o destacamos algún producto. Además de ayudar al usuario a manejar el menú, podemos acercar opciones comunes dentro de esa zona del tipo "ultimas novedades", "buscador", "productos más demandados".
Diseño de Enlaces: Los usuarios no son adivinos
Pautas a seguir:
Utilizar enlaces azules y botones del sistema. Ayudan al usuario a reconocer lo que es pinchable y lo que no.
Ofrecer al usuario la información necesaria sobre donde esta y a donde puede ir de forma clara.
Ofrecer guias al usuario (1, 2 y 3, primero esto, luego aquello, te recomendamos esto).
Los elementos que recargan la pagina deben indicarlo claramente.
Ir ordenados de mas a menos aquellos elementos que claramente indican accion de pinchar y cambiar de pagina.
Colores:
Los links en azul y para los botones del sistema.
Los links en otro color que no sea azul, pierden parte de la llamada de enlace.
Links sin subrayar que cambian de color al azul o se subrayan al pasar por encima.
Fotos:
El tamaño de la foto ayuda a que se pase por encima y se evidencie la opción de pinchar. Otra opción que ayuda al usuario a pinchar en las imagenes, es el hecho de que este con borde. Este borde tendrá el mismo color azul que los links, por lo que ayudara al usuario a reconocer el enlace.
Combos (Lista de opciones predeterminada, por ejemplo países: Andorra, Angola,etc)
El combo es una herramienta de selección, no de acción. Aun asi no se recomienda ni para hacer selecciones. El combo no es una herramienta recomendable, por lo general deja al usuario a medias, sin saber muy bien que pasa cuando pincha sobre el. Su uso se recomienda en formularios u operaciones, pero nunca en navegación.
Texto o imagenes sin subrayar que no cambian de color:
Con este orden recomendamos que siempre se use enlaces azules y botones del sistema.
Como dice el titulo de esta pagina, el usuario no es tonto, pero tampoco es adivino y será mas fácil para la navegación si indicamos claramente que elementos tienen enlace y cual no. Recuerda que cuanto mas fácil se lo pintes, mas paginas visitara, mas banners vera, mas productos mirara, etc.
Tamaño de los botones:
Un dato importante a la hora de hacer botones es el tamaño de los mismos, la relación de tamaños respecto a la pantalla debe ser proporcional ya que ayudaremos al usuario a acertar a la hora de pinchar.
Otro dato importante es el de evitar los espacios en blanco en la navegación. Procura que los botones queden claramente contorneados y que este contorno no se rompa. Si pones una imagen y debajo un texto que explica lo que es, procura que el espacio entre el boton y el texto tambien sea clickeable.
Ejemplo de botones según su forma:
El cuadrado proporciona un área mayor de acierto para el usuario.
El circulo tambien da una área de acierto, pero es menor y el usuario se suele apoyar en los contornos.
Si no pintamos el área de acierto, el usuario tiene que apuntar bien para acertar el botón.
Pautas para el Diseño de la Botonera:
Debe estar claramente indicado el área donde se puede pinchar.
El botón indica claramente que se puede pinchar al estar subrayado.
La separación entre botones es mínima evitando asi zonas no clicables.
No usar iconos, no son útiles, no ayudan y solo quitan espacio.
Hay casos que los botones graficos pesan menos que el codigo html. Esto es un hecho demostrado que entre el código y el peso de un gif con 2 colores casi no hay diferencia y además proporcionamos un área mayor de acierto. Esta opción, solo en caso de que el peso sea menor, solo se recomienda para elementos fijos de la navegación que el usuario pueda almacenar en su cache desde la primera pagina.
Cuando usemos enlaces de texto (azules y subrayados) es importante seguir las siguientes reglas:
Procura que la palabra enlazada indique claramente el destino.
Ver biografía. (Correcto)
Para ver la biografía pincha aquí. (Incorrecto)
Usar el tag de title en los links ayuda a saber que es lo que vamos a ver. Algunos navegadores no lo leen, pero ayuda y no es incompatible.
Ver biografía. (Recomendable)
Si el enlace nos dirige a otro servidor, es bueno pintar la dirección.
Ver biografía (http://dominio.com/biografia/) . (Recomendable)
Otro caso importante es cuando hacemos botones en secuencia (el típico, 1, 2 y 3). Esto es útil y ayuda al usuario ya que le puede servir de guía y le ayudan a predecir su camino.
Lo que se recomienda en estos casos, es dejar el link abierto es todos los botones y no obligar al usuario a utilizar o rellenar el paso 1 para ver el paso 2. En muchos formularios se utiliza este sistema de 1, 2 y 3, pero no se deja ver el contenido del 2 o el 3 hasta que se rellena el 1. Es mejor si dejamos todos abiertos para que el usuario explore y no encadenemos los pasos obligando al usuario a utilizar todo el sistema.
Diseño de las opciones de Selección múltiple (combos y demás)
Hay casos en los que los combos se utilizan para "ahorrar operativa al usuario"...
Veamos un ejemplo: Queremos comparar dos coches en la web de Supermotor
Que se les ocurrió, elijo la marca en un combo y se supone que "adivino" que en el combo de al lado se recargan los modelos:
Elijo la Marca A y el Modelo A (se recarga la pagina sin que yo lo indique)
Elijo la Marca B y el modelo B (se recarga la pagina otra vez sin que yo lo indique)
Y ahora es cuando puedo comparar.
RECUERDA: El usuario es el que tiene el control... no la maquina... NUNCA se deben ejecutar operaciones sin que el usuario lo haya ordenado. Entendemos que recargar la pagina es ejecutar una orden que el usuario ordena... nunca la debemos hacer sin su permiso.
Que ahorro hemos conseguido? Solo hemos conseguido que el usuario se vea recargando la pagina una y otra vez...
Cual hubiera sido el modelo correcto (pensando en que hay usuarios no acostumbrados a internet y que no todos somos unos genios...):
Presentamos una pagina donde se indica con claridad que es lo que tiene que hacer el usuario.
1 de 3: Elija las 2 marcas de coches a comparar: (lo mejor seria hacer la selección con radio button por columna de marcas)
MARCA 1
marca 1
marca 2
marca 3
.... MARCA 2
marca 1
marca 2
marca 3
....
Siguiente: (enlace a la siguiente pagina) Seleccionar modelo dentro de las marcas escogidas.
En este punto es bueno recordar que siempre debemos indicar el status del usuario (paso 1 de 3, siguiente operación, etc...), recuerde que siempre es el usuario el que tiene el control, para poder tener el control es necesario estar informado de donde vengo, a donde voy, que puedo hacer entre medias, que ocurre si pincho aquí...)
2 de 3: Elija los 2 modelos de coches a comparar: (hacer la selección con radio button por columna de marcas)
Nombre de MARCA 1 / Seleccione modelo
modelo 1
modelo 2
modelo 3
.... Nombre de MARCA 2 / Seleccione modelo
modelo 1
modelo 2
modelo 3
....
Siguiente: (enlace a la siguiente pagina) Ver comparativa de modelos escogidos.
Con este modelo se consigue que el usuario haga una selección basada en sus acciones, es el usuario el que indica cuando avanzar y cuando no, de tal forma que el controla la recarga de paginas y no somos nosotros quienes indicamos cuando recargar datos.
Y dentro del caso de todo auto, no seria mejor hacer una selección previa en la que indiquemos que tipo de modelo queremos comparar? es decir, 4x4, turismo, etc... por que que sentido tiene comparar un 4x4 con un BMW descapotable...?
Luego hay algunas paginas web, sobre todo aquellas que ofrecen operaciones de algún tipo (véase webmail, bancos, tiendas, etc...) en muchos casos se hace necesario que el usuario haga algún tipo de selección múltiple de datos.
Esta selección múltiple por lo general hace referencia a opciones cerradas (ciudad de residencia, año de nacimiento, etc) que pueden afectar al resto de la pagina. Por ejemplo si quiero abrir una cuenta en un banco si pongo como año de nacimiento 1998, no me dejara acceder por que se supone que debo ser mayor de 18 para acceder.
Este tipo de operativa es correcta siempre y cuando no hagamos que estos combos sean operativos sin que el usuario lo indique.
Esto quiere decir, si al elegir la fecha de nacimiento vas a recargar la pagina para validar la fecha, avísamelo.
Que se recomienda en estos casos:
Procurar agrupar los datos a validar.
Que el usuario sepa antes de introducir datos, cuales son los márgenes de rechazo (mayor de 18, vivir en Bahía Blanca, ser Cura...).
Que el usuario sea el que indica cuando hacer la validación.
En caso de introducir datos fuera de rango, explicarle al usuario por que ha ocurrido esto.
B2B. Dar antes de recibir
Dar antes de pedir informacion al usuario.
Muestra todo lo que tengas antes de pedir registro.
Si por motivos de confidencialidad no puedes mostrarlo, haz una demo real con informacion simulada.
Simplifica el registro.
Ofrece contenido de valor.
Breve introduccion:
Una serie de noticias sobre iniciativas b2b en España plantean una visión sobre el sector. El dato más sorprendente en estas noticias era el importe económico que pensaban desembolsar para realizar el proyecto. En el caso de BtoBfactory.com (empresa que ha creado E-difica.com) comentaban que pensaban gastarse 400 millones de euros de aquí al 2004. En el caso de Plastia.com, sus creadores pensaban invertir unos 300 millones de euros en 2 años. Los portales estan bien enfocados. E-difica.com esta dirigido al sector de la inmobiliaria y los de Plastia.com y Plasticsarea.com estan dirigidos al sector de los plásticos.
Desde el punto de vista de la usabilidad y los contenidos se presentan algunos problemas que veremos a continuación:
1. Da antes de pedir información al usuario:
El principal problema de los sites de B2B es que esconden todo el servicio e informacion tras el registro. Es bueno mostrar todo el site en abierto, dejando solo bajo registro el tema transaccional. Con esto conseguimos que el usuario se informe con claridad de todo lo que hay disponible, dandole motivos para que se registre cuando el quiera.
Los secciones que deberían quedar en abierto son, consultar las subastas antes de pujar, poder consultar los catálogos de otras tiendas antes de incluir el nuestro y poder buscar en todo el site antes de registrarse.
En casos como plastia.com la información disponible en abierto se divide en 4 puntos:
Presentación: Tenemos una descripción de objetivos, estrategia, ventajas, etc. Básicamente es texto y diapositivas estilo power point. No vemos pantallas reales, ni datos reales.
Servicios: Aquí tenemos una lista de los servicios que se ofrecen agrupados en 3 grandes áreas (1) servicios generales (2) área funcional y (3) área técnica junto a una descripción de cada uno. No hay enlaces a pantallas, demos o servicio real.
Contacto: Dirección física y formulario para enviar un mail. En el formulario el campo de "texto libre" esta limitado a 200 caracteres.
Colaboradores: Aquí vemos la lista de "partners" que tienen.
Esta presentación no esta mal, pero no enseñan nada del producto real. No sabemos cuál es la lista de empresas vinculadas, directorio de empresas disponible, subastas de material, bolsa de empleo, comprar un dominio, etc.
Deberíamos recordarle a los amigos de plastia.com que no hace falta poner todos los textos en gráfico y que es mejor el fondo blanco para imprimir las paginas.
Por otro lado tenemos el ejemplo de Verticalia.com que maneja una serie de portales temáticos dirigidos a diferentes sectores (agricultura, pesca, carne, flores, etc.). En este caso, se muestra toda la información al usuario antes de acceder, pero ocurre que casi todo esta desierto. Es complejo encontrar empresas vinculadas, subastas abiertas, catálogos, etc. Si no tenemos contenidos, es mejor no sacar esas secciones. Aburre mucho navegar por directorios vacíos.
Digamos que verticalia es una de las mejores en cuanto a usabilidad. Quizás se echa de menos un acceso mas contundente a la zona de catálogos y un buscador en la portada.
2. Muestra todo lo que tengas antes de pedir registro:
En los sitios de B2B hay dos escenarios muy claros que debemos cuidar en la navegación:
Soy una empresa que se quiere dar de alta para figurar en la base de datos.
Soy una empresa que busca servicios o productos de otras.
Facilita el camino en ambos casos.
Para el caso (A) pinta una ruta clara para aquellos que simplemente quieren subir su catalogo al site. Explica como comprimir las fotos, diferentes formatos, longitud de textos, como se hace un catalogo, etc. Ten en cuenta que no todas las empresas tienen escáner o fotos de productos. Ofrece opciones de catálogos simplificados (ficha de texto y poco mas).
Para el escenario (B) sencillamente pinta una estructura de directorios a la Yahoo! en la portada y un buscador. Si tu site tiene secciones vacías, pinta claramente lo que tengas y no hagas perder el tiempo a la gente buscando en directorios vacíos.
Este es el típico ejemplo de directorio a la Yahoo!. Básicamente se compone de los directorios de tu site, y se ponen ejemplos de subcategorias por si el nombre del directorio no es totalmente descriptivo. Estas subcategorias se enlazan y asi sirven como atajos a las zonas más populares del site.
El orden de los directorios puede ser alfabético o por relevancia, es mejor el orden de relevancia cuando tienes pocos elementos (no mas de 10) y alfabético cuando son muchos. De todos modos, si tienes muchos elementos, crea una zona de "favoritos" y pon los demás en orden alfabético.
Como complementos apunta aquellas zonas que son nuevas con un (Nuevo) e indica la cantidad de productos disponibles dentro de cada zona.
Luego a nivel de estilo, puedes crear el directorio a 1, 2 o 3 columnas, con mas o menos subdirectorios, etc. Ejemplos a seguir a la hora de presentar el "mercado": WorldBid.com y B2B.yahoo.com.
3. Si por motivos de confidencialidad no puedes mostrarlo, haz una demo real con información simulada:
Todos sabemos que hacer demos en un rollo, pero si no hay otra forma de ver el producto antes de registrarse, será necesario que te hagas una. La forma mas sencilla de hacerse una demo es coger el site, hacer pantallazos, y ponerlos en un documento HTML. Procura no escalar las pantallas ya que harás muy complejo el ver la información ya de por si pequeña.
Si dispones de recursos podras hacerte una demo "interactiva" explicando que es cada zona de la web, cada campo, etc. Por lo general estas demos interacticas se hacen con "flash". Solo procura que no pese demasiado.
4. Simplifica el registro:
Los registros dentro del mundo del b2b deberían simplificarse. Por defecto todo aquello que no sea necesario quítalo. Nunca pidas información que no es obligatoria.
Por lo general el registro es largo y se suelen plantear problemas de localización geográfica.
Sobre el tema de localización geográfica, procura evitar el uso de términos locales (NIF) y si usas combos para provincias o países, procura contar siempre con la opción de "otro / ninguno".
En el caso de Campo21.com de los amigos de btobfctory.com en el formulario de registro el campo de país esta limitado a Argentina y Estados Unidos. Si esto es asi, se debería decir de forma clara en la portada. En el caso de Plastia.com en el registro pide forma voluntaria los datos de "CIF" y "CNAE". Si no son obligatorios quítalos y procura si tu site tiene proyección internacional no uses terminología local. Con el site de Plasticsarea te puedes registrar fácilmente, pero no se ofrecen grandes diferencias entre estar registrado o no. Básicamente no hay catalogo de productos o compañías.
En Constructiva de los amigos BtoBfactory.com el alta es sencilla, pero no se produce un reconocimiento del usuario en tiempo real. Parece que hay que esperar a que el sistema se de cuenta de que te has registrado.
Ya por ultimo en el caso de e-difica.com el alta es algo complejo pese a tener el acceso siempre presente en modo de pestaña. En un Mac con Netscape y Explorer hubo fallos técnicos.
El mejor es el de verticalia.com. Un registro relativamente sencillo y el alta dentro del sistema es inmediata.
5. Ofrece contenido de valor:
Este ultimo punto es algo mas editorial. Muchos portales b2b se lanzan al aire y reciben cobertura de los medios cuando realmente estan vacíos, funcionan mal y no son útiles. Ejemplos como edifica.com, plastia.com o plasticsarea.com no mejoran un panorama bastante desolador.
Los emprendedores de este tipo de portales deberían empezar por construir portales dirigidos a zonas mas o menos conectadas. Creo que en España un portal de B2B de agricultura aun esta lejos de triunfar. Creo que uno dirigido al sector de ordenadores tendría algo mas de audiencia (cuanta gente busca desesperadamente él ultimo driver o actualización del sistema).
Luego lo de siempre, busca los lideres: el único ejemplo de "B2B" que funciona bien es el tema de contratación de personal. Portales tipo Monster.com son lideres dentro del sector de contratación de personal y llegan a tener muchas visitas. Estos portales de contratación de personal hacen muy sencillo el alta del producto y permiten buscar en la base de datos y ver toda la información sin necesidad de registrarse.
Por otro lado lo de ofrecer contenido de valor tambien va por los buscadores. Deberían mejorar las paginas indexadas sobre el tema ya que los resultados que ofrecen actualmente dejan mucho que desear:
En todos los casos se puso B2B en la casilla de buscar.
En el buscador de ya.com el primer resultado es una pagina en obras.
En el caso de eresmas.com solo salen paginas en ingles. Primer resultado.
En el caso de terra.es el primer resultado es una pagina que no funciona.
Los amigos de yahoo.es lo hacen algo mejor ofreciendo una lista de 10 categorias de sitios de B2B.
Pautas para diseñar un enlace a mi site
Ofrece recursos para que la gente pueda crear enlaces a tu site de forma facil. La precision del enlace es vital.
Que la gente te ponga un enlace generara mas visitas y hará mas popular tu site.
Algunas cosas que debemos evitar cuando creamos enlaces.
Información complementaria sobre este articulo.
1. Ofrece recursos para que la gente pueda crear enlaces a tu site de forma fácil.
Poner enlaces a paginas relacionadas con tu "negocio" es una practica saludable que ayuda a que tu pagina sea mas popular (te puedes convertir en una especie de lanzadera de información) y ayudara a que otras paginas te enlacen como referencia de información consiguiendo mas visitas.
Poner un enlace no siempre es fácil ya que (a) técnicamente no todo el mundo sabe como hacerlo y (b) puede ser que la pagina a la que apuntemos no ofrezca información relevante o haya dejado de existir.
A la hora de poner un enlace debemos ser capaces de seleccionar con precisión la pagina a la que apuntamos de tal forma que si pongo un enlace a un articulo de interés debemos evitar el apuntar a la portada del magazine (obtendremos imagen de fiabilidad si la gente encuentre la cosas con rapidez).
Por esta misma razón, en nuesto site, debemos ser capaces de ofrecer paginas "robustas" que no caducan y no se mueven. Si nuestro site ofrece estabilidad se convertirá en una fuente de referencia donde la gente podrá ir a consultar información por que "siempre esta disponible".
Si por cualquier razón las paginas que aparecen en nuestro site tienen caducidad, debemos avisarlo para que la gente sea consciente de este hecho. No hay nada mas doloroso que poner un enlace a una pagina que no existe (nuestro site es el que pierde).
Alerta sobre la caducidad de las paginas
Los recursos que se pueden ofrecer para que la gente ponga enlaces pueden ser los tipicos logos con el codigo HTML listo para "copiar y pegar" o cosas mas imaginativas como "buscadores", juegos, banners, etc.
En este ejemplo de Yahoo! podemos ver como se presenta la imagen con el link mas el codigo html listo para copiar y pegar dentro de nuestra pagina.
Amazon tambien ofrece un amplio catalogo de logos y botones listos para "copiar y pegar" en nuestra pagina. La precision del enlace unido a un buen diseño pueden hacer que la gente lo vea atractivo.
2. Que la gente te ponga un enlace generara mas visitas y hara mas popular tu site.
Para decir esto no hace falta ser un genio, pero para llevarlo a buen termino aquí van algunos consejos prácticos:
Busca las paginas relacionadas con tu sector. Entra en un buscador popular y pon él termino(s) que mejor definan tu site.
Entra en las paginas que encuentres y mira lo que hacen. Aquellas que veas interesantes pon un enlace a su site (procurando apuntar a una pagina o información relevante).
Envíales un mail comentando que tu tienes una pagina, que la visiten y si lo ven interesante que te pongan un enlace.
El siguiente paso es escribir a medios tradicionales (revistas, periódicos (el suple informatico de Clarin, radios) especializados o cercanos al sector, haciéndoles llegar la existencia de nuestra pagina. Debemos procurar comunicar al menos una ventaja de visitar nuestro site (información, herramientas, compra) para que podamos optar a ser mencionados.
Luego hay que procurar ser constante y mantener esta practica de forma ciclica. Al menos cada trimestre, procurar dar una vuelta por internet y ver que paginas nuevas existen y de nuevo hacerles llegar nuestro site, poner un enlace nuevo y enviar mails.
3. Algunas cosas que debemos evitar cuando creamos enlaces:
Esta lista es breve pero básica para mantener en buena forma nuestros enlaces.
Cuando pongas un enlace a una pagina externa avisalo. Una forma sencilla es ponerlos debajo de la categoria de "enlaces de interes". Tambien puedes poner algo del tipo (externo) junto al enlace, pero lo mas sencillo es poner en el enlace el dominio del site, de esta forma la gente entenderá que se dirige a otro dominio.
Procura abrir esos enlaces sobre tu propio navegador. Si lo abres en otra ventana indícalo.
Nunca abras una pagina externa dentro de tus frames. Esto puede llegar a ser ilegal en algunos casos.
Ofrece un breve comentario sobre el enlace indicando por que lo has puesto, que se puede encontrar allí, etc.
Procura revisar los enlaces en tu site para evitar perdidas. Si un enlace en tu site falla, la culpa es tuya.
Menos es mas. Ten esto presente a la hora de seleccionar los enlaces para tu web site. Ofrece contenido de valor, enlaces precisos e información relevante. Mucha gente se frustra en internet por no encontrar información de valor.
4. Informacion complementaria sobre este articulo:
Hace unos dias vio un articulo que contaba lo siguiente:"... la mayoria de las visitas no proceden del portal ... "
1999 1998
Portales 33% 44%
Otras paginas y bookmarks 67% 56%
Fuente: eastgate.com
El autor de este articulo decia que ante esto el futuro del banner en portales, como medio de atraer audiencia, es cuestionable ya que muy poca audiencia viene por estos medios si lo comparamos con la audiencia global.
Ante este articulo me surgieron dos opiniones.
a) Si viéramos el camino de un usuario hasta nuestro site, puede ser que realmente el 70% de las visitas ocurran por un link casual. Pero lo que ofrece este articulo no es una solucion, sino un nuevo problema.
b) Si la gente llega a mi pagina por otras vías (que no son el portal), como hago para promocionar mi site y conseguir audiencia? La respuesta es "relaciones publicas" y en Internet tiene un formato muy simple: pon un link.
Ante esta practica perdida (pon un link) esta surgiendo una nueva practica que es "te pago por poner un link". Aquí podemos ver dos casos.
Gomez.com (una buena fuente de información) ofrece varias formulas de conseguir dinero por poner links o "asociaciones" y About.com hace algo similar.
Pautas de Diseño de nuestro site para ser visto en Palm Pilots:
Una guía para el correcto diseño de sitios webs accesibles desde PDAs. (Personal Digital Assitants)
Ser consciente de las limitaciones de los PDAs.
Los ordenadores de bolsillo tienen una pantalla más reducida, menos memoria y menos velocidad de proceso que los ordenadores convencionales.
Definir cuidadosamente la estructura del site.
Con las secciones más importantes y enlaces a las mismas desde todas las páginas. La primera página ya ha de mostrar información útil para el usuario, evitando páginas de bienvenida o de selección de idioma.
Evitar el uso de tablas.
En la mayoría de los casos basta con dividir el texto con saltos de línea y párrafos. El procesado de las tablas ralentiza la velocidad de carga de la página. Si se utilizan, especificar las dimensiones en porcentajes y sin sobrepasar los 150 pixels de ancho.
No utilizar marcos (frames).
Si ya de por sí se ha de intentar evitar su uso en el Internet convencional, con más razón en el Internet móvil: la mayoría de los navegadores no los soportan y restan mucho espacio en la pantalla.
Publicar contenidos concisos.
Por la limitación de la memoria y de la pantalla, escoger sólo la información más importante y esencial.
Organizar la información cuidadosamente.
Minimizando la longitud del texto (máximo 3 pantallas de longitud) y escogiendo una distribución óptima de los links de navegación (enlaces a otras secciones). Si el texto debe ser extenso, incluir enlaces a distintas partes del mismo para mejorar la navegación.
Optimizar los gráficos.
- En dimensión: las pantallas de dispositivos Palm OS tienen un tamaño de 150x150, y los Windows CE/Pocket PC de unos 240x320.
- En tamaño: escogiendo el número de colores visibles en el PDA. (16 y 8 bits de color; 16, 4 y 2 escalas de grises).
Incluir texto alternativo en todas las imágenes.
Con el tag alt ofrecemos información a los usuarios que han deshabilitado la carga de imágenes en su navegador.
Añadir el tag handheldfriendly al comienzo de todas las páginas.
AvantGo sabrá que la página está optimizada para PDAs.
<meta name="HandheldFriendly" content="true"> .
Utilizar convenientemente el caching de las páginas.
Para aumentar la velocidad de carga de las páginas. No guardar en caché las páginas que se actualizan todos los días (página de noticias), y guardar en cache las páginas que se actualizan raramente (página de créditos).
A todas estas pautas mínimas de diseño para dar usabilidad y funcionalidad al sitio debemos agregar un concepto esencial para que un site se destaque: Alto Impacto. Hoy en dia debemos buscar que nuestro site sea espectacular y para eso debemos profundizar en el análisis teórico que sigue a continuación comprendiendo la evolución de los Net Arts y la e-Media como fusión de campos digitales.
UNIVERSIDAD DE PALERMO
by
:: Walo ::
0
