AgentSkillsCN

von-restorff-effect

那些醒目突出的元素更易被铭记于心。在设计行动号召按钮、促销活动元素，或任何需要吸引注意力并强化记忆的界面元素时，这一原则能够帮助设计师更好地抓住用户的眼球。

SKILL.md
--- frontmatter
name: von-restorff-effect
description:
  Los elementos que se destacan son más memorables. Use cuando diseñe CTAs,
  elementos de promoción, o cualquier cosa que necesite captar atención y ser
  recordada.
metadata:
  author: ux-ui-skills
  version: "1.0"
  category: behavioral-effects

Efecto Von Restorff (Efecto de Aislamiento)

Resumen

Cuando múltiples objetos similares están presentes, el que difiere del resto tiene más probabilidades de ser recordado. También conocido como "efecto de aislamiento".

Origen

  • •Autora: Hedwig von Restorff
  • •Año: 1933
  • •Fuente: "Über die Wirkung von Bereichsbildungen im Spurenfeld"

Fundamento Psicológico

La atención selectiva prioriza estímulos novedosos o incongruentes. El contraste captura la atención automáticamente y mejora la codificación en memoria. El cerebro está optimizado para detectar cambios y diferencias, una adaptación evolutiva para detectar amenazas u oportunidades.

Aplicación en Diseño

CTAs y Botones

  • •Botón primario con color distintivo
  • •Un solo CTA destacado por pantalla
  • •Contraste con el resto de elementos
  • •Posición estratégica del elemento destacado

Pricing Tables

  • •Plan recomendado visualmente diferente
  • •Badge "Popular" o "Best Value"
  • •Escala o elevación diferente
  • •Color distinto para opción preferida

Notificaciones y Alertas

  • •Colores de alerta vs contenido normal
  • •Badges de contador (números rojos)
  • •Estados de error visualmente distintivos
  • •Mensajes importantes resaltados

Contenido Destacado

  • •Featured posts con estilo diferente
  • •Promociones con diseño distintivo
  • •Elementos "nuevo" claramente marcados
  • •Ofertas limitadas con urgencia visual

Ejemplos

  • •Netflix: Thumbnail más grande para contenido destacado
  • •Amazon: "Best Seller" badges en productos
  • •Spotify: Playlist del día con diseño único
  • •GitHub: Repositorio "pinned" destacado
  • •App Store: "App of the Day" con diseño diferente

Anti-patterns

  • •❌ Demasiados elementos "destacados" (nada destaca)
  • •❌ Colores de énfasis usados en exceso
  • •❌ CTAs que no contrastan con el fondo
  • •❌ Badges en todos los productos
  • •❌ Todo con la misma prominencia visual

Métricas

  • •Recall Rate: Elementos recordados después de exposición
  • •Click-through Rate: CTR de elementos destacados
  • •Attention Heat Maps: Foco visual en elementos distintivos
  • •Conversion by Prominence: Conversión por nivel de destaque

Principios Relacionados

  • •[[nielsen-minimalist-design]] - Menos ruido = más impacto del destacado
  • •[[figure-ground]] - Separar elemento de su contexto
  • •[[contrast]] - Contraste visual para atención

Referencias