10 formas divertidas de usar el elemento sorpresa en el diseño de su sitio

¿Sabías que “nunca te dará” de Rick Astley cumplió 30 años este año? Incluso si este nombre no suena, existe una gran posibilidad de haber encontrado el video para él, en un momento, debido a un rickroll. [YouTube https://www.youtube.com/watch?v=DQW4W9WGXCQ?rel=0&w=560&h=315] ¿O tal vez estás más familiarizado con el juego de Labyrint hace unos 10 años? Sabes sobre el que estoy hablando: mantente en el trabajo, tu amigo insiste en que tienes que probar un gran juego y luego alentarte a jugar, a pesar de que un correo electrónico te espera con las solicitudes de los clientes. (Por cierto, esta es una situación totalmente hipotética y no una que me haya pasado).
Luego, mientras se dirige cuidadosamente a través del laberinto, creyendo que está a punto de superar el puntaje de su amigo, Linda Blair del exorcista aparece y le grita demasiado fuerte desde su computadora en el trabajo. [YouTube https://www.youtube.com/watch?v=0wjdrq0ihbw?rel=0&w=560&h=315] Es posible que Rickrolling y los saltos ya no sean el meme más de moda. Sin embargo, ambos son excelentes ejemplos sobre cómo usar el elemento sorpresa para sorpresa, conmoción y esperanza de impresionar al público. Como desarrollador web, usted sabe que el minimalismo gobierna el lugar (como debería). En mi opinión, este uso estratégico del espacio en blanco rociado con contenido ofrece la oportunidad perfecta para sorprender a sus visitantes con algo inesperado. No digo que tengas que desarrollar tus visitantes o asustarlos por completo con un video para asustarlos. Hay muchas otras formas de sacudirlos un poco y despertarlos de la gira que esperan recibir a través de su sitio.
En el resumen de hoy, cubriré 10 formas en que puede agregar el elemento sorpresa a su sitio de WordPress y también incluiré algunos ejemplos interesantes de cómo otros han hecho esto para sus propios objetivos. 10 formas de usar el elemento sorpresa en WordPress Reconocemos. Los visitantes saben qué esperar hoy en términos de un sitio web. Diseño de cabecera grande. Menú de hamburguesas en el móvil. Contacto y páginas sobre. Tal vez un widget de testimonios. No hay nada demasiado interesante para cumplir con la experiencia previsible del sitio. Pero no hay absolutamente nada de malo en eso. Los visitantes aprecian la consistencia y la previsibilidad. Pero, ¿no sería genial atraerlos con esta expectativa y luego sorprenderlos con un elemento aleatorio que les haga pensar: “Bueno, esto fue realmente diferente/ divertido/ maravilloso?” ¿Hay una serie de formas de usar el elemento de sorpresa en el diseño web. Demasiado, obviamente sería un mal movimiento en términos de UX, pero encontrar la indicación correcta (y una que encaja bien con la identidad de su marca) podría aumentar el interés de los visitantes con más de unos pocos muescas. Aquí hay algunas ideas: 1. Incluya un mensaje oculto en sus diseños siempre se sorprende por cuántas compañías oculto imágenes en sus logotipos. FedEx y Amazon A-to-Z Arrow son probablemente los ejemplos más conocidos a este respecto.
La “sonrisa” de A a Z del logotipo de Amazon

Sin embargo, si está en el momento en que diseña un sitio web, probablemente sea demasiado tarde para hacer algo para agregar un mensaje oculto a su logotipo hasta que sea hora de un cambio de marca, piense en cómo puede infundir un mensaje oculto o un Imagen en diseños, fotos, máscaras o incluso el texto de su sitio2. Endulza la oferta en un bar emergente o saludo para compañías comerciales electrónicas, hay una serie de oportunidades para ofrecer algo gratis o a un precio bajo. Pero, como saben, no tendrá un gran impacto (o una diferencia en su resultado) si arroja esas ofertas a cada persona tan pronto como ingrese a su sitio para que tengamos ventanas emergentes perfectamente sincronizadas, así como barras de Saludo discreto para manejar estos edulcorantes para nosotros. Pinkblush aprovecha ambos con la esperanza de atraer a los visitantes a cualquiera o ambas ubicaciones con ofertas especiales.
El uso de Pinkblush de reducciones sorprendentes.
3. Agregue una nota humorística a su BIOS La página sobre un sitio web puede volverse muy seca, muy rápido. No es culpa de nadie. La mayoría de las personas se inclinan hacia la biografía con el estilo “son Dave y escriben código para vivir”, lo cual es lo suficientemente bueno. Es breve y preciso y no obliga a los visitantes a leer la larga descripción del párrafo de Dave sobre cómo fue a Rutgers, se mudó a Colorado, pero luego decidió que la costa este es la mejor costa (porque lo es).

Ahora, ya sea que su propósito sea que la gente lea o no la biografía de su equipo, esta página es un lugar maravilloso para mostrar la parte divertida de las personas detrás de esto. Tome, por ejemplo, lo que hace Wistia. Escriba la palabra “baile” y podrá ver esta pequeña animación divertida para usted antes: el equipo de Wistia antes de escribir el comando “Dance”.
Después:
El equipo de Wistia después de escribir el comando “Danza”.

4. Cree un efecto de desfile no tradicional. Todos saben lo que se ve un diseño web estático y diría que la mayoría de las personas están familiarizadas y ahora con el paralaje. Entonces, si eres fanático de los movimientos de desplazamiento, este es genial para jugar.
Uno de mis favoritos es de Hecho por pocos. Si se desplaza hacia abajo en la página inicial, podría pensar que es solo un sitio web estático tradicional, ¡pero luego OPA! Su ratón o dedo se enreda accidentalmente y nota que la multitud de personas se balancea hacia atrás y hacia atrás y a su alrededor.

Realizado por la multitud de pocos.
5. Obtenga una aprobación de celebridades Si cree que no puede convencer a alguien para que Britney Spears lo apoye como desarrollador de WordPress, entonces probablemente tenga razón. Sin embargo, esto no significa que usted o sus clientes no le darán a un día la oportunidad de apoyar a una celebridad o una gran influencia.
La BBC informó algunos ejemplos sobre cómo las pequeñas empresas pudieron usar las aprobaciones de renombre para desarrollar su negocio, lo que probablemente ha conmocionado a sus visitantes de su sitio como personas que dirigen esas empresas. Aquí está el video filmado por Action Bronson para los pasos de Navidad a cambio de un tiempo gratis y en la cocina: [YouTube https://www.youtube.com/watch?v=vhjwVouz9pa?rel=0&w=560&h=315] 6 . Agregue algo de entretenimiento La gamificación no va a ninguna parte en el diseño web, especialmente porque aumenta el poder de los Millennials y la Generación Z pasa a la clase de consumidores. Entonces, si se perdió la cobertura de desarrollo de WPMU sobre cómo agregar gamificación en su sitio de WordPress por primera vez, asegúrese de verificarla ahora. O puede inspirar desde el juego de dinosaurios aleatorios, activado por la barra espacial, que puede jugar cada vez que pierda Su conexión a Internet:

¿Quién no querría que Internet caiga más solo por otra oportunidad de jugar?
7. Dale a tus exhortaciones una animación inesperada sobre una experiencia predecible. Sabe que sus visitantes eventualmente alcanzarán los impulsos y los formularios de contacto de su sitio y sabe que muchos de ellos estarán dispuestos a convertir incluso si no suma la experiencia de algo inesperado.
Pero, ¿y si lo hiciste? ¿No sería esta una excelente manera de hacer que se detengan y preguntaran qué otras sorpresas ha preparado para ellas?
ReadMe ha agregado este tipo de “sorpresa” de animación a sus formularios de contacto y es bastante bueno. Su máscara de búho analiza cada uno de los campos introductorios a medida que los completa en la página de registro. Readme’s Buff le muestra qué campos trabaja.

El búho se vuelve un poco travieso en la página de conexión al cerrar los ojos mientras ingresa la contraseña.
El búho de ReadMe no se verá al ingresar la contraseña.

8. Ocultar algo en el código fuente como desarrollador web, sabe que la clave para crear sitios web que funcionen bien es escribir un código limpio. Por lo tanto, a menudo utiliza bibliotecas CSS y JavaScript preescritas para simplificar el proceso y para asegurarse de agregar funcionalidades codificadas y características que funcionan.
¿Pero qué tan divertido es para ti? Por supuesto, sus visitantes cosecharán los beneficios de sus sitios bellamente codificados, pero es prácticamente lo mismo de siempre para usted, todos los días. Entonces, para esta sugerencia, creo que esta es una buena oportunidad para que salgas de la rutina y que te diviertan un poco en el código fuente de tus sitios. Puede que no sea necesario que suceda en cada sitio y puede ser solo para usted, pero sigue siendo una forma divertida de agregar algo sorprendente que solo unas pocas personas con mentes de tecnología descubren y apreciarán. Coca-Cola hace esto:

El mensaje secreto del código fuente de Coca-Cola.
Como PayPal:

El mensaje secreto del código fuente de PayPal.
Kanye West también:
Mensaje secreto de Kanye West.9. Esconde algo a la vista Si le gusta la idea de estos huevos de Pascua digitales, pero desea algo que pueda compartir con los visitantes en el sitio en sí, eche un vistazo a lo que hizo Kickstarter: ¿Alguna vez ha visto el Easter Huevo Kickstarter?

Si se desplaza en la parte inferior del sitio, verá el icono que se tiñe hacia la parte inferior.Haga clic hasta que aparezca el mensaje sorpresa:
Kickstarter definitivamente ha encontrado una forma única de obtener nuevos suscriptores.

Si piensa bien, esta es una forma inteligente de usar un huevo de Pascua en su sitio. Claro, ¿podría ser solo para fines de entretenimiento, pero Kickstarter hizo que la gran divulgación fuera … un formulario de contacto? Sí, es un formulario de contacto y probablemente uno que más personas están dispuestas a inscribirse debido a la forma única en que se les entregó. Como dijo Laura Filton desde Hubspot: “Siento que los huevos de Pascua son parte de la personalidad del” desarrollador “. Estas son personas muy inteligentes a las que les gusta resolver rompecabezas, y la complejidad de su trabajo nunca es completamente apreciada por la mayoría de los clientes que usan su producto. Por lo tanto, ocultando un huevo de Pascua, pueden recompensar a los clientes que toman esta iniciativa adicional para tratar realmente el software y lo que implica su logro “. 10. Lanza algo al azar dentro de este último que descubrí recientemente y, sinceramente, todavía estoy sorprendido por él porque cuánto tiempo paso a Asana todos los días. Sin embargo, ahora que sé que está ahí, estoy muy agradecido por ello. Es una sorpresa aparentemente insignificante y no aporta nada a mejorar mi experiencia en el uso de la aplicación de productividad, pero me hace muy feliz. Esto es lo que hizo Asana: ir a la configuración de mi perfil. Haga clic en la pestaña Hacks y para encender la pestaña Hack + B. No ignore la pestaña Asana + B.
Recargar asana para aplicar cambios … y luego presione TAB+B tantas veces como desee.

¿Es necesaria la sorpresa de Asana? No. ¿Es absolutamente maravilloso? Sí.

Incluso si no eres fanático de los gatos, no puedes evitar reírte el nuevo Tabby (obtienes: Tab/Tabby) que aparece en la pantalla en cada ejecución de Tab+B. Final honesto, no todas las ideas de negocios serán increíblemente innovadores o intrigantes y, sin embargo, esos servicios o productos aún son necesarios. El hecho de que diseñe un sitio de WordPress para un contador o botellas de agua para perros, no significa que toda la experiencia en el acto sea tan vainilla como el negocio detrás de él. Dicho esto, una excelente manera de agregar un poco de inspiración a su sitio de WordPress es infundirlo con el elemento sorpresa. Por supuesto, debe ser relevante en contexto. Lo que funcionó para las marcas anteriores puede no funcionar para usted, así que dale tiempo para descubrir qué elementos de su sitio serían ideales para jugar. Recuerde: nunca quiere frustrar, confundir o molestar a sus visitantes. Agregar un elemento sorpresa solo para el factor de choque podría ser inverso, así que use este elemento de diseño sabiamente y piense en cómo pueden afectar positivamente su experiencia. ¿Cuál es el mejor “shock” que ha recibido cuando visita un sitio web? ¡Dinos en los comentarios!
Etiquetas:

diseño