Share
La palabra metáfora es probablemente la más parecida a un escrito, cuando se usa como una figura literaria del habla para un efecto descriptivo. Sin embargo, hoy vamos a hablar sobre un tipo diferente de metáfora: una visual que podemos usar en diseño web..
metáfora: una figura del discurso en la que una expresión se usa para referirse a algo que no denota literalmente para sugerir una similitud - WolframAlpha
En la web, usamos muchas imágenes e íconos para simbolizar diferentes cosas. Cuando visitamos una página web, escaneamos para intentar encontrar lo que necesitamos lo más rápido posible, y las imágenes se utilizan para ayudar a acelerar ese proceso. Podemos interpretar algo mucho más rápido con estilos e imágenes familiares. Por ejemplo, podemos reconocer instantáneamente un error cuando hay algo como un signo de exclamación, o un color amarillo o rojo. Todo se reduce a la familiaridad..
Especialmente en los últimos tiempos, hemos empezado a ver aparecer metáforas urbanas en el diseño web, utilizando elementos familiares como una estantería o una pared dentro de un diseño. Sin embargo, hay un montón de otras metáforas que se utilizan en el diseño web para cerrar la brecha entre real y virtual vida.
La definición "oficial" de una metáfora no ha cambiado de la sección anterior: una figura del habla en la que una expresión se usa para referirse a algo que no denota literalmente para sugerir una similitud. Eso es muy cierto cuando miramos la web y el uso de metáforas en esa plataforma. Allí, usamos los píxeles como representantes de los objetos del mundo real para salvar un cierto sentido de familiaridad entre la vida real y la virtual..
También hay varios tipos diferentes de metáforas que utilizamos en la web: aquellos en una escala más pequeña que imitan objetos de la vida real, como botones, metáforas icónicas que copian las asociaciones de la vida real y las usan en la web, y otros extendidos en los que todo un diseño puede girar en torno a una metáfora.
Un botón en la web no es realmente un botón, ¿verdad? No, es un conjunto de píxeles hechos para parecerse a un botón porque (a) lo hemos hecho así y (b) nuestros usuarios lo reconocerán y sabrán que es algo que se debe presionar (o, más correctamente, hacer clic). Hacemos que este enlace parezca un botón porque estamos acostumbrados a reconocer un botón como un punto de interacción en la vida real, y podremos distinguir ese enlace en particular del resto de la página con poco esfuerzo..
Imitar las convenciones de la vida real nos ayuda a interactuar con el mundo virtual. Mejora nuestra experiencia de usuario porque la web no es una interfaz externa que requiere mucho aprendizaje para interactuar. Sabemos que los botones son botones porque se ven muy parecidos en todas partes, son una ayuda visual Y los usuarios interactúan con ellos instintivamente..
Lo mismo ocurre con las ventanas, los escritorios y las pestañas en el diseño de la interfaz de usuario. Steve Krug, en su libro de usabilidad Don't Make Me Think, utiliza el famoso ejemplo de pestañas de carpetas como un gran uso de metáforas en el diseño de interfaces..
No he podido probarlo (todavía), pero sospecho que Leonardo da Vinci inventó los separadores de pestañas en algún momento a finales del siglo xv. Como dispositivos de interfaz van, son claramente un producto de genio. - Steve Krug
Las pestañas son el ejemplo clásico de una metáfora de interfaz intuitiva..
Un poco diferentes a metáforas idénticas son iconos, tal como lo mencionamos antes. Por ejemplo, los signos de exclamación se utilizan para representar algún estado de importancia o alerta, por lo que usamos ese icono en el mismo contexto en la web. Además, podríamos usar el símbolo de un teléfono o una carta para indicar el contacto.
Para un ejemplo perfecto, podemos mirar el panel de WordPress. Cada uno de los elementos del menú en el lado izquierdo presenta algún tipo de metáfora, como la chincheta para representar las publicaciones y el bocadillo para los comentarios..
El estímulo para usar tales metáforas es idéntico a los de la sección anterior: crea cierta familiaridad, un "enlace" si así lo desea, al mundo real que ayuda al lector a interpretar y navegar una página con relativa facilidad..
Hemos realizado un breve recorrido para replicar objetos de la vida real y usar íconos para formar enlaces, pero hay un tipo más importante de metáfora: aquellos que se extienden más allá de un solo elemento. El ejemplo más sorprendente que se me ocurre no es un sitio web, sino una aplicación. iBooks no se ve como una aplicación de iPad normal porque está diseñada para imitar la apariencia de una librería real para agregar esa sensación de familiaridad para el lector. Miras los iBooks y al instante sabes que tiene algo que ver con los libros. Si se hace bien, estos tipos de sitios web pueden llegar a ser realmente impresionantes!
Las metáforas extendidas son menos comunes que los otros tipos que se utilizan en la mayoría de los diseños de sitios web en la web..
Aunque "metáfora extendida" podría ser la terminología incorrecta, este tipo de metáfora sigue siendo el tipo más amplio que puede obtener. Ofrecen una pequeña ventana en su navegador a la vida real, y pueden ser un método instantáneo para crear una primera impresión de lo que se trata el sitio web..
En la escritura, utilizamos una metáfora para expresar, explicar y describir. Las metáforas pueden ser una forma útil de conectar una idea con una que no es literalmente similar a (donde probablemente se usaría un símil en su lugar), pero donde las dos se pueden usar en conjunto para representarse entre sí.
Las metáforas en el diseño web, como la escritura, se utilizan como un mecanismo descriptivo al vincular objetos e ideas de la vida real con los píxeles de un sitio web. Puede parecer muy pequeño y algo que se puede pasar por alto, pero los lectores web tienen un período de atención más corto que los lectores de impresión, por lo que el tiempo es esencial al navegar por un sitio web. Y, en esas circunstancias, las metáforas se vuelven útiles al copiar asociaciones de la vida real (como el color rojo con peligro, o una lupa con búsqueda) y usarlas en la web para acelerar el proceso de escaneo de una página web..
Como diseñadores, podemos aprovechar las metáforas para mejorar la atracción por el diseño y hacer que nuestros diseños sean memorables. Queremos que los usuarios se conecten con el sitio web y, ya, la mayoría de los sitios web tienen algún tipo de metáforas en uso para adaptarse a su público objetivo. Los sitios web reflejan conceptos de la vida real, empresas, personas y objetos, y los estilos elegidos no son diferentes de los de la vida real. Las metáforas no solo crean una sensación de familiaridad entre los píxeles de una página web y la materia de la vida real, sino que también pueden usarse para conectarse a una audiencia específica.
Tomemos por ejemplo la página de inicio de CBeebies de la BBC. El sitio está construido alrededor de un fondo que representa un jardín con árboles y arco iris, una imagen idealista del mundo que es común en muchos medios orientados a los niños. La metáfora de un jardín en línea da la bienvenida a los niños a usar el sitio, mientras que si estuviera diseñado como la página de inicio de Microsoft, no sería tan atractivo para los niños usarlo..
Las metáforas se utilizan en todos los medios para expresar algo como otra cosa y, en los sitios web, son una excelente manera de comunicar la familiaridad y atraer a los lectores a un diseño. Cuando consideramos esto en la escala de los 4.500 millones de años del mundo, la web sigue siendo un medio muy nuevo, por lo que crear vínculos entre lo real y lo virtual es una medida de transición pero que funciona.
Flourish es una agencia de diseño web que toma su nombre en serio. Con broche de oro definido como "crecer o desarrollarse de una manera saludable o vigorosa", se presenta el concepto de un árbol en crecimiento en una tierra estéril y un diseño versátil basado en la naturaleza..
La plantilla "Diseño de interiores" es un elemento ThemeForest diseñado para representar una oficina, un ejemplo perfecto de una metáfora en juego..
El lanzamiento es otro elemento de ThemeForest, pero este compara el lanzamiento de un sitio web con el lanzamiento de un cohete, al igual que muchos diseños similares..
Mutant Labs, una compañía de desarrollo de software, lleva la parte "laboratorio" de su nombre a un contexto científico por el diseño de su sitio..
Accentsconagua