(Página creada con «250px|thumb|Las imágenes deben atraer atención y enfoque. Las imágenes, cuando están disponibles,…») |
Sin resumen de edición |
||
| (No se muestran 3 ediciones intermedias del mismo usuario) | |||
| Línea 3: | Línea 3: | ||
{{Mejores Prácticas}} |
{{Mejores Prácticas}} |
||
| + | <br style="clear:both" /> |
||
| − | |||
== Manteniendo el mensaje == |
== Manteniendo el mensaje == |
||
Todas las páginas tienen un propósito. Las imágenes deben ser aplicadas cuidadosamente a dicho propósito. Algunas páginas son artículos, pero la mayoría de las que no son deberían ser utilizadas para enlazar a artículos |
Todas las páginas tienen un propósito. Las imágenes deben ser aplicadas cuidadosamente a dicho propósito. Algunas páginas son artículos, pero la mayoría de las que no son deberían ser utilizadas para enlazar a artículos |
||
| Línea 14: | Línea 14: | ||
# '''Elige imágenes impactantes que capturan la atención.''' Enfócate en elegir las imágenes atractivas que puedas encontrar y las que realmente capturan el interés de tus usuarios. |
# '''Elige imágenes impactantes que capturan la atención.''' Enfócate en elegir las imágenes atractivas que puedas encontrar y las que realmente capturan el interés de tus usuarios. |
||
| − | {{Cita|Una imagen impactante, intensa quedará en las mentes de los visitantes. El texto podrá ser leído y olvidado, pero una imagen potente será recordada. |
+ | {{Cita|[https://www.smashingmagazine.com/author/stevensnell/ Steven Snell]|Una imagen impactante, intensa quedará en las mentes de los visitantes. El texto podrá ser leído y olvidado, pero una imagen potente será recordada.}} |
== Solo usa imágenes relevantes == |
== Solo usa imágenes relevantes == |
||
| Línea 30: | Línea 30: | ||
Por último, en el caso de las imágenes utilizadas para navegar a otras páginas, hay que hacer que la navegación sea intuitiva y familiar para los usuarios. La navegación no debe requerir ninguna explicación. Organice la navegación de forma que requiera un número mínimo de acciones para llegar al destino y no desvíe la atención del contenido. Las galerías de imágenes utilizadas para la navegación deben incluir una etiqueta de texto clara sobre su destino. También es importante reconocer que las galerías de imágenes no están pensadas para ser usadas como [https://www.nngroup.com/articles/cards-component/ tarjetas de información], y que añadir mucha más información más allá del título de la imagen y un enlace puede llevar a la misma sobrecarga de información. |
Por último, en el caso de las imágenes utilizadas para navegar a otras páginas, hay que hacer que la navegación sea intuitiva y familiar para los usuarios. La navegación no debe requerir ninguna explicación. Organice la navegación de forma que requiera un número mínimo de acciones para llegar al destino y no desvíe la atención del contenido. Las galerías de imágenes utilizadas para la navegación deben incluir una etiqueta de texto clara sobre su destino. También es importante reconocer que las galerías de imágenes no están pensadas para ser usadas como [https://www.nngroup.com/articles/cards-component/ tarjetas de información], y que añadir mucha más información más allá del título de la imagen y un enlace puede llevar a la misma sobrecarga de información. |
||
| − | {{Cita |
+ | {{Cita| [https://en.wikipedia.org/wiki/Antoine_de_Saint-Exup%C3%A9ry Antoine de Saint-Exupéry]|La perfección se logra cuando no hay nada más que eliminar.}} |
== Conclusión == |
== Conclusión == |
||
| Línea 36: | Línea 36: | ||
<hr /> |
<hr /> |
||
También puedes consultar [https://community.fandom.com/wiki/User_blog:FishTank/Images_that_engage el artículo de blog original] (en inglés). |
También puedes consultar [https://community.fandom.com/wiki/User_blog:FishTank/Images_that_engage el artículo de blog original] (en inglés). |
||
| + | {{:w:User:Owlnai/badge/es}} |
||
| − | |||
| + | {{footer de blog}} |
||
<blockquote class="context-link FANDOM-badge" style="-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: normal;font-style: normal;font-family: Rubik,Helvetica,Arial,sans-serif;;font-size: .875rem;line-height: 1.5rem;background-color: #39424d;width:100%;max-width:700px;color: #fff;margin: auto;margin-top:40px;text-align: center; padding: 1em 0.5em">Adaptado de [https://www.nngroup.com/articles/image-focused-design/ Image-Focused Design], [https://uxmag.com/articles/evaluating-the-usability-of-web-photos Evaluating the Usability of Web Photos], [https://www.smashingmagazine.com/2017/01/more-than-just-pretty-how-imagery-drives-user-experience/ How Imagery Drives User Experience], con investigación exhaustiva de Nielsen Norman Group (líderes mundiales en investigación de experiencia de usuario). Foto del paraguas por [https://www.maxpixel.net/Red-Infrastructure-Architecture-Umbrella-Building-2600606 Max Pixel]. Lapiceros por [https://www.pexels.com/photo/different-monochrome-object-pencil-1005064/ Anastasiia/Pexels]. [[:commons:File:Michael Hofmann, "Snow falls--in my hut - I kindle a fire for one" (1988), poem by Taneda Santoka, calligraphy by Jikihara Gyokusei.jpg|Sumi-e]] por Jikihara Gyokusei.</blockquote> |
<blockquote class="context-link FANDOM-badge" style="-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;font-weight: normal;font-style: normal;font-family: Rubik,Helvetica,Arial,sans-serif;;font-size: .875rem;line-height: 1.5rem;background-color: #39424d;width:100%;max-width:700px;color: #fff;margin: auto;margin-top:40px;text-align: center; padding: 1em 0.5em">Adaptado de [https://www.nngroup.com/articles/image-focused-design/ Image-Focused Design], [https://uxmag.com/articles/evaluating-the-usability-of-web-photos Evaluating the Usability of Web Photos], [https://www.smashingmagazine.com/2017/01/more-than-just-pretty-how-imagery-drives-user-experience/ How Imagery Drives User Experience], con investigación exhaustiva de Nielsen Norman Group (líderes mundiales en investigación de experiencia de usuario). Foto del paraguas por [https://www.maxpixel.net/Red-Infrastructure-Architecture-Umbrella-Building-2600606 Max Pixel]. Lapiceros por [https://www.pexels.com/photo/different-monochrome-object-pencil-1005064/ Anastasiia/Pexels]. [[:commons:File:Michael Hofmann, "Snow falls--in my hut - I kindle a fire for one" (1988), poem by Taneda Santoka, calligraphy by Jikihara Gyokusei.jpg|Sumi-e]] por Jikihara Gyokusei.</blockquote> |
||
[[Categoría:Entradas de blog]] |
[[Categoría:Entradas de blog]] |
||
| + | [[Categoría:Comunidad]] |
||
| + | [[Categoría:Guías de Mejores Prácticas]] |
||
__NOEDITSECTION____NOTOC__ |
__NOEDITSECTION____NOTOC__ |
||
[[en:User_blog:FishTank/Images_that_engage]] |
[[en:User_blog:FishTank/Images_that_engage]] |
||
Revisión actual - 18:59 27 mar 2021
Las imágenes deben atraer atención y enfoque.
Las imágenes, cuando están disponibles, deben dividir el texto de una página para hacerla más interesante. Pensar en cómo y por qué se utilizan las imágenes es importante; pues todas las imágenes de tus páginas constituyen parte de las impresiones del lector en tus comunidades. Las imágenes atractivas también pueden inspirar de forma única a sus lectores para que aporten información útil.
Manteniendo el mensaje
Todas las páginas tienen un propósito. Las imágenes deben ser aplicadas cuidadosamente a dicho propósito. Algunas páginas son artículos, pero la mayoría de las que no son deberían ser utilizadas para enlazar a artículos
Las imágenes deben ser consistentes con el tópico de la página (en este caso escritura y significancia)
- Identifica y prioriza todos los mensajes de una página. ¿Cuál es la intención de la página que estás editando? ¿Es la página orientada principalmente para navegar o describir tu comunidad? ¿O es una página pensada como un artículo informativo?
- Define como cada imagen se relaciona con el tema de la página. Las imágenes de índole decorativa deben tener una relevancia clara al tema que se refieren. Las imágenes usadas para navegación o determinadas tareas del usuario no deben ser ambiguas en torno a dónde quieren llevar al lector.
- Asigna preferencia a imágenes en base a cómo se relacionan con la página. Si un elemento de diseño (incluyendo una imagen) es importante o tiene gran relevancia al texto alrededor, debe tener mayor énfasis visual; por el contrario, los elementos relacionados débilmente con el mensaje o la intención de la página deben tener un énfasis menor. Una de las cosas que un contribuidor puede añadir son imágenes que transmiten el mensaje incorrecto sobre el propósito de la página.
- Organiza imágenes que tienen la relación más fuerte con el tema. Recuerda, el propósito de tu wiki no es exponer imágenes; sino presentar información. Por tanto, las imágenes que elijan deben mostrar el propósito de la página y solo imágenes que aportan sentido a la página deben permanecer en ella. El principio "cuanto más mejor" no aplica con las imágenes; la gente tiende a ignorar imágenes después de que se han vuelto "desorden" o "ruido". Poner demasiado enfoque en imágenes en tus diseños pueden crear un exceso visual que pueden distraer gravemente a los usuarios de participar significativamente con tu contenido.
- Elige imágenes impactantes que capturan la atención. Enfócate en elegir las imágenes atractivas que puedas encontrar y las que realmente capturan el interés de tus usuarios.
Solo usa imágenes relevantes
Un colaborador debe saber en qué se centra realmente una página y qué quiere transmitir antes de añadir imágenes. No todas las imágenes mejoran la experiencia del lector. Algunas sólo ocupan espacio o, en el peor de los casos, confunden al usuario con ruido. El desorden de una página sobrecarga al lector con demasiada información: cada imagen y línea de texto añadida complica la pantalla, lo que se agrava en los dispositivos móviles con pantallas y ancho de banda más pequeños. Por lo tanto, es esencial ordenar las imágenes que no son necesarias, ya que reducir el desorden mejora la comprensión de los lectores.
El color y las imágenes deben realzar y complementar el texto, pero no sobrecargar el mensaje.
El color y las imágenes deben realzar y complementar el texto, pero no sobrecargar el mensaje.
Una imagen debe encajar lógicamente cuando está conectada con todo lo demás en el contexto de la página, incluso si es necesario un pie de foto. Los usuarios responden más rápido a las imágenes que al texto, por lo que su colocación en el texto adecuado proporciona un anclaje visual. Una imagen principal debe estar en la cabecera o en el infobox, sin necesidad de desplazarse, para dar la mejor primera impresión de una página y establecer el tono de la lectura posterior. Es importante elegir imágenes primarias que puedan explicar de forma sencilla el concepto de la página.
Utilice las imágenes de mayor calidad que pueda encontrar, sin distorsión ni desenfoque. Incluso si las fuentes originales son sprites de baja resolución, no deben inflarse más allá de su escala original.
En cuanto a las páginas que no son más que galerías de imágenes, hay cosas que podemos aprender de los sitios de comercio electrónico sobre cómo se pueden presentar buenas imágenes. Las lecciones clave son que esas páginas pueden ser eficaces si las imágenes son lo suficientemente distintas, tienen una buena organización y subtítulos claros para el contexto, y tienen límites en el número de imágenes que se presentan a la vez (para evitar el desorden). Estas páginas pueden incluso tener una buena posición en los motores de búsqueda si se añade un buen contexto textual a los pies de foto.
Por último, en el caso de las imágenes utilizadas para navegar a otras páginas, hay que hacer que la navegación sea intuitiva y familiar para los usuarios. La navegación no debe requerir ninguna explicación. Organice la navegación de forma que requiera un número mínimo de acciones para llegar al destino y no desvíe la atención del contenido. Las galerías de imágenes utilizadas para la navegación deben incluir una etiqueta de texto clara sobre su destino. También es importante reconocer que las galerías de imágenes no están pensadas para ser usadas como tarjetas de información, y que añadir mucha más información más allá del título de la imagen y un enlace puede llevar a la misma sobrecarga de información.
Conclusión
Las imágenes son fundamentales para aumentar el número de lectores de los artículos de una comunidad. Utilizar muy pocas puede limitar la capacidad de memorización y el atractivo de los artículos. Usar demasiados puede abrumar y confundir a los usuarios. Encontrar el equilibrio adecuado puede ayudar a una comunidad a crecer.
También puedes consultar el artículo de blog original (en inglés).
¿Quieres recibir las últimas actualizaciones del blog de Fandom en español? ¡Haz clic aquí para seguir este blog!
¡Estamos realizando experimientos! ¡Aprende más sobre qué tipo de eventos y otras cosas hemos hecho o planeamos hacer!
¿Quieres hablar en tiempo real con otros editores y staff?
¡Únete a nuestro servidor oficial de Discord para usuarios registrados!
Adaptado de Image-Focused Design, Evaluating the Usability of Web Photos, How Imagery Drives User Experience, con investigación exhaustiva de Nielsen Norman Group (líderes mundiales en investigación de experiencia de usuario). Foto del paraguas por Max Pixel. Lapiceros por Anastasiia/Pexels. Sumi-e por Jikihara Gyokusei.
,_poem_by_Taneda_Santoka,_calligraphy_by_Jikihara_Gyokusei.jpg){kind=link}