Alternativa de buen gusto a la marquesina

Entonces, un cliente mío está solicitando repetidamente cosas que eran "geniales" cuando su sitio web se lanzó originalmente a fines de los noventa. Una característica es una marquesina de desplazamiento que simplemente dice "bienvenido a {nombre de dominio}" (cliente y dominio retenidos debido a NDA).

Le he advertido repetidamente al cliente que este es un elemento de diseño negativo porque un ticker de desplazamiento solo es útil para actualizar constantemente los datos, y todo lo que quiere poner es un mensaje de bienvenida. ¿Puedes pensar en algo contemporáneo en cuanto a animaciones sutiles que sustituyan a una marquesina de desplazamiento? El texto nuevamente diría "Bienvenido a {Nombre de dominio}"

ACTUALIZAR

Algunas personas han pedido aclaraciones, así que aquí hay más información sobre el sitio. Compartiría el diseño, pero de nuevo, NDA. : (

El diseño tiene los siguientes temas: patriótico, limpio, ligeramente texturizado. El concepto que me dieron fue una imagen de archivo que contenía una vieja bandera estadounidense y una copia de la constitución con una pluma sobre ella. Lo usé como fondo y puse el contenido en un contenedor central con textura de papel. Los colores son rojo, blanco y azul (fondo blanco con encabezados rojos y enlaces azules). Una bandera ondeando podría ser perfecta para eso, como sugirió @Scott. Me encantaría ver una sugerencia de cómo implementar eso.

ACTUALIZAR 2

Con el interés de proponer soluciones y no solo crear problemas, aquí hay un jsfiddle de un complemento jquery para hacer una ola. ¿Sugerencias? ¿Mejoras? http://jsfiddle.net/yPZVy/

ACLARACIÓN

Puede que haya explicado bien o no esta parte lo suficientemente bien, ella no está simplemente usando la etiqueta "marquesina", sino una animación flash que hace lo mismo. Obviamente, esto es un problema por muchas razones.

Sugeriría texto sin movimiento. Pero si tienes que ir con algo, ve con palomas voladoras y un diseño degradado de arcoíris que se invierte repetidamente junto con una banda sonora de fondo que no puedes apagar.
Para este cliente, serían águilas calvas chillonas y F-35 volando por la página. No estoy seguro de que se pueda contactar a Kenny Loggins para obtener permiso para usar Danger Zone.
Puedes hacer varias animaciones con jQuery. Y puede controlar el intervalo, la dirección y el tipo mucho más que la antigua etiqueta de marquesina. Publicaría esto en StackOverflow.com. Es más adecuado para ese sitio.
@scott No creo que lo sea, no estoy pidiendo una posibilidad técnica de lo que puedo hacer. Probablemente terminaré usando una animación basada en css3 con un respaldo de jQuery. Mi pregunta era de diseño: ¿qué tipo de elemento puede reemplazar conceptualmente una animación de marquesina en negrita sin afectar la legibilidad?
Ah bastante justo. Eso es un enigma, ya que cualquier reemplazo, incluso cerca de una marquesina, sería una distracción. Quiero decir... "Tasteful Marquee" es en sí mismo un oxímoron :)
¡Exactamente! Tal vez esta es una pregunta sobre una fuerza imparable que se encuentra con un objeto inamovible, pero pensé que alguien podría tener una idea. He encontrado algunos sitios con animaciones de buen gusto que suceden cuando pasas el mouse sobre las cosas, etc., pero parece que no puedo encontrar algo que llame la atención sin ser... ya sabes... terrible.
No creo que pueda sugerir nada adecuadamente sin al menos una idea del diseño del sitio o al menos un sentido general del concepto. Las cosas vienen a la mente: una bandera ondeando lentamente, un intervalo de tiempo entre un giro de banner, una carga de página para mostrar/ocultar.
Bien, tengo dos preguntas antes de responder: 1. ¿Quiere estos elementos geniales de cuando su sitio se lanzó por primera vez como un "retroceso" o por qué? 2. ¿Puedes dar una idea general del resto del sitio como "técnico", "sucio", "moderno", etc.?
Ella lo exige porque cree que hace que el sitio "salte". Sí, uno de esos clientes. Honestamente, solo quiero salir vivo de esto sin recrear su antiguo sitio. He actualizado la pregunta con detalles sobre el diseño.
¿Qué tal las olas de la bandera (MUY lentamente). Probablemente podría lograr esto con un pequeño conjunto de imágenes y un efecto de desvanecimiento en lugar de una animación completa.
Hay un efecto de cinta de onda de bandera css3 realmente genial en los foros de css-tricks, pero no veo una manera fácil de reproducir esto para IE porque depende en gran medida de los gradientes css3. css-tricks.com/forums/discussion/11054/…
¿Puedes usar Flash para esto? De lo contrario, probablemente podrías hacer algo un poco más elegante usando Javascript; Vería Paperscript para un marco bastante fácil de trabajar. Te abriría muchas opciones.
En realidad, le diría que Marquee ya no es compatible y que no hay una buena manera de hacer esto que sea universalmente compatible. Los teléfonos móviles tendrán problemas si lo hace en Flash y las computadoras más antiguas no necesariamente podrán ver las animaciones de Javascript que usan HTML5.
@ryan De hecho, estoy debatiendo hacer una animación jquery, por lo que funcionará en todos los navegadores. Pero todavía estoy tratando de negociar una solución basada en todas estas respuestas.

Respuestas (5)

Encuentro que si profundizas lo suficiente, generalmente hay una pizca de sentido incluso en las solicitudes de los clientes más locas. Las palabras que usan para expresar lo que quieren generalmente están envueltas en una mezcolanza de lo que han visto y lo que creen que es normal, pero cada profesión tiene su propio sabor de "un poco de conocimiento es algo peligroso". Podría ser peor, podríamos ser médicos tratando de decirles a los pacientes que el medicamento que vieron ayer en un anuncio no los curará, o mecánicos tratando de explicar por qué el amigo del cliente "que es muy bueno con los autos" estaba equivocado y realmente honestamente no es una solución simple.

Supongo que en este caso porque no conozco al cliente, pero puedo imaginar algunos deseos genuinos y sensatos que, al pasar por la picadora de carne de conocimiento y experiencia limitados, podrían resultar en que pidan una carpa con un mensaje de bienvenida que 'aparece'.

  • Quieren un movimiento que llame la atención de un nuevo cliente, dirigiendo activamente su atención a un punto de inicio e introduciendo activamente los elementos elegidos al cliente. Si esto es cierto, hay un montón de cosas que utilizan el movimiento para centrarse en los elementos clave que le pueden gustar a su cliente, si se presentan correctamente. Fuera de los efectos de transición de texto, el más obvio es un carrusel : quizás un poco cliché y, a menudo, se usa mal, pero pueden ser muy efectivos cuando se hacen bien. También es probablemente lo más parecido a una marquesina.
  • Instintivamente saben que a sus clientes les gusta el toque personal y pueden sentirse intimidados incluso por el diseño web moderno más limpio. Sienten que quieren acercarse y entregar personalmente un mensaje de bienvenida a sus clientes como un lugar claro para comenzar y quieren transmitir ese mensaje al visitante como un anfitrión entusiasta. Si esto es lo que quieren, este artículo de Smashing sobre presentaciones de sitios web podría ser un lugar para comenzar a obtener ideas.
  • Es posible que sepan que a su audiencia le gustan las cosas a un ritmo más lento y les gusta que las cosas lleguen a ellos, más un canal de compras que una galería comercial. Así que les gusta la idea de empujar las cosas lenta y suavemente hacia el espectador a un ritmo constante. Tal vez su cliente sabe que su grupo demográfico se siente perdido en la jungla digital, y una marquesina es lo más cercano que su cliente puede pensar para lanzarle una cuerda guía. Si esto es lo que quiere su cliente, tiene un problema de diseño realmente interesante: querrá explorar y volver a imaginar el variado mundo de los elementos del sitio web que funcionan para una audiencia semipasiva. Algunos ejemplos de la parte superior de mi cabeza son el uso de video y el tipo de interfaces guiadas que a veces se ven en visualizaciones interactivas ( página de inicio de Development Seedes un ejemplo genial, aunque un poco confuso, de este principio aplicado al diseño web en general: el principio general es que hay un camino claro y suave, y puede desviarse de él si lo desea)

Nunca subestime lo bien que un buen propietario de una pequeña empresa conoce instintivamente a su audiencia, incluso/especialmente si no tiene conocimiento de diseño o si no tiene conocimiento de diseño. (Tampoco subestimes lo ignorantes que pueden ser algunos mandos intermedios de las grandes empresas con respecto a sus audiencias...)

Si me perdonan una historia de "cuando era joven"... Yo era un estudiante en un equipo de consultoría como parte de una colocación, trabajando con un chico que dirigía un negocio que vendía cosas tradicionales escocesas. Su sitio web era una pesadilla: reproducía música de gaita a todo volumen al cargar la página. Todos los que habían trabajado con él le habían dicho que quitara la música, y él siempre se negaba y se ponía a la defensiva: los demás pensaban que era imposible trabajar con él.

Un día, en una conversación informal, encontré una manera de preguntar casualmente sobre la música de gaita de una manera amistosa e interesada. Resultó que regularmente recibía correos electrónicos de escoceses de la diáspora mayores y aburridos a quienes les encantaba escuchar música mientras compraban y que decían que los hacía sentir como en casa. El tipo era un vendedor nato: saltaba sobre esto, los encantaba con las historias detrás de cada pieza musical, trabajaba en sus otros productos, y en poco tiempo estos tipos eran clientes regulares y leales, en términos de nombre. Les estaba vendiendo bienes de alto valor, y estaban difundiendo el mundo sobre su mercadería.

Después de escuchar, comencé a hacerle sugerencias sobre cómo podría mejorar partes del sitio en las que anteriormente se había negado a ceder, sugiriendo indicaciones antes de reproducir la música, controles más claros del reproductor de música y cosas generales como un diseño y una estructura del sitio que fomentaban las comunicaciones personales. . Escuchó atentamente y tomó en cuenta las sugerencias, porque pudo ver que yo entendía lo que realmente estaba tratando de hacer. Todos los demás habían quedado tan impresionados por lo obviamente que era una mala idea tocar música de gaita no consentida a la gente, que nunca se detuvieron a averiguar por qué este tipo inteligente y exitoso pensó que era una buena idea.

¡Gracias por esta increíble respuesta en profundidad! Su "historia de cuando era joven" se parece mucho a esta, aunque no estoy seguro de que este usuario tenga la evidencia para respaldar tanto sus opiniones. Me dijeron que ella "requeriría" texto de desplazamiento. Le pregunté por qué y me dijo "para que la gente sepa que está en la página de inicio". Sugerí una serie de otras cosas, y parece que la animación es la única forma de hacerlo, así que estoy obteniendo respuestas aquí. Gracias por su análisis cuidadoso y profundo de cómo abordar esto.

Si tienes la IP de tu cliente, puedes tener una marquesina intermitente solo para él...

Bromas aparte, esta es una de esas cosas en las que el cliente está equivocado y en las que tienes que repasar el propósito del sitio web con el cliente.

"Me preocupa que esto pueda distraer al cliente de comprar su producto porque su atención se desviaría de su producto o de su presentación, y después de las primeras 5 o 6 veces, el 'Bienvenido a X' listo es un poco molesto... no quieres perder ventas, ¿verdad?"

Si eso no funciona, ¿puede convencer al cliente de que desplazarse solo 1 o 2 veces es suficiente y que el mensaje de "Bienvenida" puede quedar estático después?

Estoy trabajando en una especie de animación básica de "carga", en la que entra lentamente desde un lado. Eso puede o no ser suficiente para satisfacer cualquier deseo que tengan, pero estoy tratando de pensar en esto como una oportunidad para encontrar un compromiso entre lo que quieren y lo que realmente necesitan.
"Cargar" es una idea, pero ¿qué tiene en el sitio web que requiere tiempo para cargarse? ¿El cliente lo aceptará como reemplazo de un mensaje de bienvenida?
Lo siento, no quise decir que dice "cargando", sino que solo ejecuta la animación una vez que se carga. Similar a la forma en que css-tricks.com muestra el color de cada elemento del menú al cargar, pero luego no lo vuelve a hacer (aunque es la misma animación que se ve al pasar el mouse sobre los elementos de navegación)
@NateDSaint Oh, está bien. Sí, sería una buena solución si se puede convencer al cliente.

Estás haciendo la pregunta equivocada. La pregunta es:

¿Cómo hago para que un cliente se concentre en las necesidades del negocio en lugar de en sus deseos personales?

La forma clave de manejar eso es nunca preguntarle a un cliente qué quiere en su sitio web. En su lugar, pregúnteles qué necesitan sus clientes. ¿Cuáles son los objetivos de sus clientes?

Tan pronto como empiezan a decir "Me gustan los unicornios morados y animados", ya no eres diseñador gráfico. Ahora eres solo un artista de producción que toma la dirección de arte de alguien que no tiene habilidades de dirección de arte.

¡Gracias por esta respuesta! Voté a favor, pero creo que la razón por la que otros votaron en contra fue que hice una pregunta de diseño específica en forma de pregunta de lluvia de ideas. Pero gracias por pensar lateralmente y redirigir, realmente lo aprecio. El problema aquí es que ella está convencida de que todos en su industria son como ella, y no conozco su industria lo suficientemente bien como para decir que está equivocada. No ayuda el hecho de que todos sus competidores tienen características similares. Estoy tratando de encontrar una animación sutil como compromiso, de ahí esta pregunta.
Bueno, la pregunta específica es difícil de responder. Las decisiones de diseño deben tomarse sobre los objetivos comerciales. Su cliente simplemente está pidiendo una característica subjetiva basada en un deseo. Podríamos lanzar alternativas durante todo el día, pero al final, todo se reduce a su deseo subjetivo. Es cierto que todos tenemos clientes como este algunas veces. Haces lo que tienes que hacer.

Probaría algo como la 'barra de saludos' http://www.hellobar.com (o codifíquelo usted mismo) de muy buen gusto, y podría combinarlo con un botón de me gusta social.

No está 100% en línea con una marca, pero agrega movimiento a la página.

No puedo creer que cobren $ 29 por eso ... aunque algo como esto parece una buena sugerencia.

Personalmente, no me gustan, pero el equivalente actual de un <marquee>elemento es la presentación de diapositivas/control deslizante de imágenes animadas. A menudo tienen poca facilidad de uso (no se pueden detener o pausar para permitir que el visitante lea el texto completo, mostrar imágenes que contienen grandes bloques de texto inaccesibles para los lectores de pantalla y no se pueden copiar y pegar, carecen de controles para permitir que el usuario navegue) a la diapositiva que desean, etc.), y la animación constante distrae a los usuarios de otros contenidos en la página.

Sin embargo, los controles deslizantes son muy populares en estos días y, a veces, parece que todas las demás páginas de inicio cuentan con uno. Por lo tanto, claramente no es tan tabú como una marquesina, pero aún tiene la misma novedad de una animación grande y destacada que se encuentra en las páginas de inicio.

El lado positivo es que, si el cliente está dispuesto a aceptar este compromiso, puede hacer que el control deslizante sea menos molesto. Por un lado, no pegue 20 diapositivas allí; mantenerlo en 5 o menos. Y definitivamente, asegúrese de que haya una manera de detener/pausar la animación para que el usuario pueda leer las diapositivas (algunos hacen esto cuando se pasa el mouse por encima, aunque prefiero tener un interruptor de palanca), y que haya una manera de navegar fácilmente a una diapositiva en particular. sin esperar a que el control deslizante pase por todas las imágenes intermedias.

Más allá de eso, hay muchas animaciones HTML5 que tienen la misma novedad sin sentido que una marquesina. Es posible que pueda encontrar uno que sea de buen gusto (o simplemente menos llamativo) y que se pueda repetir infinitamente sin ser muy molesto. Aunque personalmente colocaría una marquesina allí y haría una prueba de usuario rápida con 5-10 personas y le mostraría al cliente los resultados.

Sus sugerencias para hacer que los carruseles / controles deslizantes sean menos molestos son buenas: otro buen consejo es hacer que cada elemento sea un div html con una posición de texto real: absoluta sobre la imagen (nunca, nunca, nunca texto en la imagen). La navegación en miniatura también es buena.