No rompa las reglas, reinventarlas
Las personas crean sitios web por muchas razones: para llegar a un público más amplio; vender, promover o expresar; para aplacar la presión de los compañeros. La novedad dejó de ser una razón alrededor del año 2001. En su lugar, tenemos, por supuesto: por supuesto, tengo un sitio web; por supuesto, debe tener un muro de Facebook, una cuenta de Twitter, un perfil de LinkedIn o una pizarra de Pinterest; por supuesto, todos tenemos correo electrónico.
Y, por supuesto, el diseño web utiliza HTML y CSS, dos idiomas con los que los fabricantes y diseñadores de navegadores encuentran un terreno común. Pero muchos diseñadores web crean una variedad asombrosa con las mismas reglas de lenguaje al preguntar qué sucede si, en lugar de caerse, por supuesto.
Otros se quedan con lo que funciona.
Aquellos que siguen la sabiduría convencional usan no solo el lenguaje sino las mismas oraciones , en términos web, no solo HTML / CSS, sino Arial y Georgia, diseños de 960 píxeles de ancho o enlaces azules subrayados. Usar tales convenciones no es incorrecto. Pero los diseñadores que no eligen usar patrones establecidos, que siguen la sabiduría convencional sin preguntar por qué, pierden oportunidades.
La estructura estándar
La estructura estándar de un solo nivel tiene beneficios prácticos. Es simple, y simple es bueno para los plazos. Más importante aún, es familiar. Tanto el público en línea como los diseñadores web tienen un acuerdo tácito sobre cómo funcionan los sitios web. Siguiendo el patrón home / services / about / contact sirve tanto a diseñadores como a audiencias cumpliendo con sus expectativas.
Otras nociones son tan obvias que son fáciles de pasar por alto:
- La gente espera que al hacer clic en la palabra "contacto" se muestren los detalles del correo electrónico o del teléfono.
- Saben que encontrarán un enlace a su casa en la esquina superior izquierda de una página. En conjunto con un logo, por supuesto.
- Verán las declaraciones de derechos de autor en el pie de página, a menudo a la izquierda, con un año.
- Saben que los sitios web se desplazan hacia arriba y hacia abajo, no de lado a lado.
Además, atender el comportamiento aprendido alivia la fricción. Pero los diseñadores que siguen las convenciones, con o sin darse cuenta, refuerzan las convenciones mismas.
- Haga clic en el logotipo y obtenga un formulario de contacto? "Eso no es lo que esperaba".
- Haga clic en un enlace que dice "leer más" y obtener un muro de pago? "Solo dame el artículo".
- Desplazarse horizontalmente en lugar de verticalmente? "Eso es raro. ¿Esta roto?"
- Gráfico más destacado en la parte inferior de una página? "Es al revés."
Es fácil sacar la conclusión obvia: romper las convenciones y arriesgar alienar a las personas.
Sin embargo, no todas las convenciones son absolutas. La mayoría de los sitios web siguen las reglas con sus propias diferencias de estilo. No todos los enlaces en cada sitio están subrayados en texto azul. No todas las fotos tienen el mismo tamaño. No todos los diseños usan la misma disposición de columnas. La gente se adapta porque las variaciones de las convenciones son, en sí mismas, convenciones. La gente espera encontrar caprichos entre los sitios.
En ese caso, ¿cómo los sitios web no convencionales se escapan con rango de ruptura? Sus diseñadores inventan nuevas convenciones que son fáciles de aprender.
Pensamiento adaptativo
El viejo adagio, "no rompa lo que no se rompe" es un buen consejo hasta que alguien cambie la definición de "quebrado".
Desde el comienzo de la web, los diseñadores pueden confiar en pantallas de al menos 640 píxeles de ancho . Más recientemente, 1024 píxeles y más son comunes. A partir de 2007 minúsculogadgets poner sitios web en las manos de las personas. De repente diseñando para 320 píxeles estaba de moda .
Pero forzados a cambiar y elegir cambiar son diferentes actitudes. La creatividad no teme seguir un camino de mayor resistencia.
El grupo Roberts El sitio web experimenta con un diseño basado en la cuadrícula. Los usuarios navegan en su sitio con un "mapa del sitio literal". Los enlaces de texto brindan una alternativa para los usuarios incómodos con la grilla.
Cómo romper las convenciones
No todos los riesgos dan resultado. La mayoría de los diseños web no convencionales fracasan no porque rompan patrones, sino porque no logran comunicar nuevas promesas. El truco es identificar por qué las convenciones llegaron a ser.
1. Ponga un enlace de inicio con un logotipo en la esquina superior izquierda
Problema: los visitantes de un sitio complejo pueden perderse. Un enlace de página de inicio confiable actúa como el botón de reinicio del sitio.
Pensamiento convencional: cada carga de página comienza en la parte superior de una página. Debido a que la mayoría de los diseños web se desplazan hacia abajo, la parte superior de cada página es el lugar más lógico para un botón confiable.
Pensamiento no convencional:
- Posición de uso: arreglada para mantener un botón de inicio en el mismo lugar en los navegadores de los visitantes, no solo en la página
- Aliente a las personas a desplazarse por el contenido con un enlace principal destacado en la parte inferior de las páginas
- Eliminar la página de inicio a favor de una barra de navegación rica
2. Una lista de artículos hará que sus títulos, imágenes o "leer más" puedan hacer clic
Problema: las personas necesitan señales obvias para llegar a la información que prometen los títulos y las descripciones.
Pensamiento convencional: los títulos y las miniaturas representan mejor el contenido que describen. La ruta más corta hasta "Quiero leer más sobre eso" es hacer que se pueda hacer clic. Por lo tanto, haz clic en los títulos y las miniaturas.
Pensamiento no convencional:
- Haga que se pueda hacer clic en el avance completo (imagen, título y descripción). Los enlaces con más área de superficie son buenos para el diseño móvil y fáciles de crear con CSS
- Déle la vuelta: guíe con una o dos oraciones convincentes, luego coloque el título que se puede pulsar debajo en un texto más pequeño
- En lugar de "leer este ahora", permita que los usuarios agreguen artículos a una cola para leerlos en su tiempo libre en el orden que elijan
3. Diseña una plantilla antes de escribir el contenido
Problema: la estética, no el código o la semántica, crea la primera impresión de un sitio.
Pensamiento convencional: primero diseñe el aspecto del sitio. Deje un espacio para el contenido.
Pensamiento no convencional:
- Use la tipografía y el color para impregnar el contenido con el estado de ánimo, la voz y el personaje. Luego, diseñe elementos que refuercen ese carácter, si es necesario, como texturas de fondo y barras laterales.
- Haga que el fondo sea parte del contenido. Cambie los colores por página para reflejar el estado de ánimo, el tema o la función.
- Oculte o disminuya la información de la barra lateral hasta que el usuario decida prestarle atención.
Historias en Longboard World no solo desafía la regla de "teasers must be text", sino que aprende una lección de Ley de Fitt haciendo que toda la notecard pueda hacer clic.
Pautas para las reglas
Romper el comportamiento aprendido del público es incumplir una promesa. Las convenciones son sinónimo de confianza. La mejor manera de romper las reglas establecidas, entonces, no es romperlas, sino reemplazarlas.
1. Reemplace, no rompa, reglas
Para cambiar la convención, debemos respetar por qué las reglas antiguas funcionaron.
- Los primeros navegadores necesitaban hacer obvios los enlaces, por lo que subrayaban el texto seleccionable.
- Las líneas de texto de más de 400 píxeles son difíciles de seguir línea por línea. Las columnas no solo acortan las líneas, sino que permiten una organización más horizontal.
- Los sitios web ricos en contenido crean dolores de cabeza en la organización. Las herramientas de búsqueda permiten a las personas buscar una frase específica en lugar de cavar en categorías arbitrarias.
2. Cumple tus propias reglas
Una vez que las personas asocian, digamos, recuadros de color naranja con enlaces, el diseño no debe variar de esa promesa. Cada vez que se hace clic en un cuadro naranja lleva a las personas a una nueva página, esa regla se refuerza. Cada casilla naranja que de lo contrario degradará la regla.
3. Dale tiempo
Tanto los propietarios de sitios públicos como los renuentes ganan confianza a través de la exposición. El diseño puede ayudar al reducir la curva de aprendizaje, al hacer que las reglas sean claras.
4. Usa metas
Convenciones funcionan. Son fáciles para diseñadores y público por igual. Romperlos por el bien del cambio no favorece a nadie. Más bien, reconsidera los problemas.
- El consenso popular se opone a esta legislatura. Si las personas visitan el sitio web, tenemos menos de un segundo para conquistarlos. ¿Cómo podemos cambiar mentes tan rápido?
- Queremos mostrar más de 200 fotos. ¿Cómo podemos facilitar que las personas naveguen?
- Nuestros productos son seguros, pero tenemos una reputación de no preocuparse por el medio ambiente. Los comunicados de prensa no significan nada. ¿Cómo podemos mostrar preocupación genuina en el subtexto?
- Tenemos un exceso de inventario. Nadie está comprando. ¿Cómo podemos convertir eso en nuestra ventaja?
Evolución de la web se atreve a romper el "doblez de la derecha" de los navegadores al extenderse hacia los lados. La animación al inicio demuestra a los usuarios qué obtendrán para el desplazamiento lateral.
A medida que el diseño web evoluciona, obedecer las convenciones es más riesgoso que experimentar. Cuando el público advierta diseños poco convencionales que funcionen bien, móviles o no, también se darán cuenta de sitios web que se limitan a las convenciones de ayer. Los diseñadores que reconocen esto pueden dar grandes pasos hacia la construcción de mejores sitios web.
¿Rompes las reglas o te arriesgas? ¿Qué reglas del diseño web le gustaría reescribir? Háganos saber en los comentarios.
Imagen / miniatura destacada, imagen no convencional a través de Shutterstock