{"id":86910,"date":"2019-09-20T11:21:13","date_gmt":"2019-09-20T16:21:13","guid":{"rendered":"https:\/\/mott.pe\/noticias\/?p=86910"},"modified":"2019-09-20T15:50:26","modified_gmt":"2019-09-20T20:50:26","slug":"principios-de-la-psicologia-en-el-diseno-web-que-debes-saber","status":"publish","type":"post","link":"https:\/\/mott.pe\/noticias\/principios-de-la-psicologia-en-el-diseno-web-que-debes-saber\/","title":{"rendered":"Principios de la psicolog\u00eda en el dise\u00f1o web que debes saber"},"content":{"rendered":"

\u00bfSabes por qu\u00e9 los botones deben ser de cierto tama\u00f1o, y los enlaces importantes deben colocarse al principio de una lista? \u00bfO por qu\u00e9 deber\u00edas agrupar elementos similares? <\/span>Como dise\u00f1ador, puede hacer todas estas cosas intuitivamente o porque son “mejores pr\u00e1cticas” establecidas. Pero la verdad es que lo que tomamos como convenci\u00f3n en dise\u00f1o en realidad tiene sus ra\u00edces en la psicolog\u00eda. <\/span>Los dise\u00f1os de las p\u00e1ginas web, no son creados as\u00ed no m\u00e1s o simplemente el dise\u00f1ador crey\u00f3 que estaba bien y quedaba mejor. <\/span><\/p>\n

Se piensa mucho en el bienestar del usuario al momento de establecer incluso un bot\u00f3n en la p\u00e1gina web. Es por eso que existen ciertos <\/span>principios de la psicolog\u00eda en el dise\u00f1o web <\/b>que se deben tener en cuenta.\u00a0<\/span><\/p>\n

Crea mejores llamadas de atenci\u00f3n con la psicolog\u00eda en el dise\u00f1o web\u00a0<\/b><\/h2>\n

Cuando nos movemos entre dos puntos, estamos inclinados a tomar el camino de menor resistencia. Este es un fen\u00f3meno observado conocido como el “camino del deseo”. Una ruta de deseo representa la ruta m\u00e1s corta o m\u00e1s f\u00e1cil de navegar entre dos puntos. Si alguna vez has visto un camino m\u00e1s corto marcado con un pie que se bifurca desde una carretera, has visto un camino de deseo. Las personas se comportan de manera similar en su sitio web.<\/span><\/p>\n

En lugar de seguir la ruta del cursor para la que dise\u00f1\u00f3, elegir\u00e1n la ruta m\u00e1s corta posible entre la ubicaci\u00f3n actual del mouse y un objeto (como un CTA). Si su CTA o llamada de atenci\u00f3n, es demasiado peque\u00f1o o est\u00e1 ubicado lejos del cursor de un usuario, sus usuarios podr\u00edan resistirse a mover sus cursores, lo que afectar\u00eda su CTR. Es aqu\u00ed donde se empieza a aplicar la <\/span>psicolog\u00eda en el dise\u00f1o web <\/b>que interviene en este proceso como \u201cLey de Fitt\u201d.\u00a0<\/span><\/p>\n

La Ley de Fitt, establece que el tiempo requerido para moverse r\u00e1pidamente a un objetivo es una funci\u00f3n de la relaci\u00f3n entre la distancia al objetivo, y el ancho del objetivo. En otras palabras, es probable que un objetivo m\u00e1s grande que est\u00e9 m\u00e1s cerca de su ubicaci\u00f3n actual, reciba m\u00e1s atenci\u00f3n y reacciones. Pero seguramente te preguntar\u00e1s \u00bfc\u00f3mo usar la ‘Ley de Fitt’ en tu dise\u00f1o? Considera el hecho de que la mayor\u00eda de los usuarios que acceden a tu sitio generalmente tienen una posici\u00f3n predeterminada del cursor. La mayor\u00eda de las veces, esto es alrededor de la barra de direcciones del navegador, pues es ah\u00ed donde los usuarios escriben el URL de tu sitio.<\/span><\/p>\n

Cualquier CTA colocado lejos de la barra de direcciones, ir\u00e1 en contra de la Ley de Fitt, por ejemplo: la distancia para llegar es demasiado grande y crea resistencia. Por lo tanto, aseg\u00farese de colocar sus CTA cerca de la barra de direcciones sobre el pliegue. La Ley de Fitt tambi\u00e9n establece que los botones m\u00e1s grandes tengan m\u00e1s clics. Por otro lado debes tener en cuenta que esta relaci\u00f3n no es lineal, pues dejando de lado los tama\u00f1os , los CTA por m\u00e1s grandes que sean, no aumentan los CTR.\u00a0<\/span>Por lo tanto, mant\u00e9n tus CTA grandes, pero no tan grandes que no tengan ning\u00fan efecto significativo sobre los CTR.\u00a0<\/span><\/p>\n

\"\"<\/p>\n

Ayuda a los usuarios a elegir la correcta representaci\u00f3n gr\u00e1fica del dise\u00f1o\u00a0<\/b><\/h2>\n

Nuestros cerebros toman innumerables decisiones todos los d\u00edas desde a qu\u00e9 hora salir para trabajar hasta c\u00f3mo pasar la noche. Nuestros cerebros dedican una enorme cantidad de energ\u00eda a la toma de decisiones. De hecho, nuestros cerebros a menudo luchan para igualar la demanda con la energ\u00eda disponible. Para igualar este exceso de demanda, utilizamos la heur\u00edstica. La heur\u00edstica, es un t\u00e9rmino amplio para los modelos mentales que utilizamos para tomar decisiones r\u00e1pidas.<\/span><\/p>\n

Estos modelos se han aprendido a trav\u00e9s de la educaci\u00f3n o la experiencia al momento de elegir la correcta <\/span>representaci\u00f3n gr\u00e1fica del dise\u00f1o de nuestra p\u00e1gina web<\/b>. Por ejemplo, si algo es escaso, asumimos que es valioso porque nuestra experiencia nos ha ense\u00f1ado que los objetos raros son muy apreciados (esto se llama “heur\u00edstica de escasez”). Una de las heur\u00edsticas m\u00e1s importantes para los dise\u00f1adores, es la representativa.<\/span><\/p>\n

La heur\u00edstica representativa, indica que determinamos la probabilidad de algo en funci\u00f3n de sus eventos principales. Digamos que si vieras a alguien con una guitarra, una chaqueta de cuero y cabello largo, asumir\u00edas que \u00e9l era un m\u00fasico de rock, no un bailar\u00edn de ballet. Todos los eventos de los padres (guitarra, chaqueta, cabello largo) apuntan a esta probabilidad.<\/span><\/p>\n

Del mismo modo, cuando ves texto azul en una p\u00e1gina web, asume que es un enlace. \u00bfPor qu\u00e9? Porque a\u00f1os de uso de Internet te han ense\u00f1ado que el texto azul = enlace. Pero \u00bfC\u00f3mo usar ‘Heur\u00edstica representativa’ en tu dise\u00f1o? La heur\u00edstica representativa puede recorrer un largo camino hacia la creaci\u00f3n de una mejor experiencia de usuario.<\/span><\/p>\n

Puedes empezar probando con las expectativas de sus usuarios. En esta experiencia debes establecer a las personas para que le den clic a un enlace de color azul y se vayan familiarizando con esto.\u00a0 Del mismo modo, los usuarios esperan que los CTA sean brillantes y prominentes. Por otro lado tambi\u00e9n puedes usar heur\u00edsticas representativas para hacer que las cosas se destaquen. Por ejemplo, si tu p\u00e1gina web tiene una fila de botones, procura poner un bot\u00f3n en particular en negrita o darle un color diferente, lo ayudar\u00e1 a destacar. Los usuarios suponen que debido a que no es como sus elementos principales, debe ser importante.<\/span><\/p>\n

\"\"<\/p>\n

La psicolog\u00eda y el posicionamiento de tu dise\u00f1o web\u00a0<\/b><\/h2>\n

La gente recuerda los art\u00edculos de manera predecible. La informaci\u00f3n que es proporcionada al inicio y final de cualquier formato de contenido ya sea publicaci\u00f3n de blog, infograf\u00eda o v\u00eddeo, llama m\u00e1s la atenci\u00f3n y se conserva en la memoria. Este es el efecto de posici\u00f3n en serie. Recuerda los primeros elementos de una lista porque tu cerebro supone que son datos “primarios” y por lo tanto, m\u00e1s importantes. Del mismo modo, recuerda los \u00faltimos elementos de una lista porque son la informaci\u00f3n m\u00e1s reciente que ingres\u00f3 a su cerebro.<\/span><\/p>\n

\u00bfPero c\u00f3mo logramos el posicionamiento de tu dise\u00f1o web<\/strong> en serie con la psicolog\u00eda? El efecto de posici\u00f3n de serie tiene toneladas de aplicaciones en la forma en que organiza los datos en su sitio. Si hay un enlace o alg\u00fan contenido que deseas que tus usuarios recuerden, intente colocarlo al final o al principio de una lista.\u00a0<\/span><\/h4>\n

\"\"<\/p>\n

Usa la psicolog\u00eda para hacer un dise\u00f1o web atractivo para el usuario\u00a0<\/b><\/h2>\n

Siempre que tomes una foto, crees una pintura o dise\u00f1es algo\u00a0 procura tener ayuda de psicolog\u00eda para que logres un d<\/strong><\/span>ise\u00f1o web atractivo<\/b> para tus usuarios, y tengas una buena experiencia de navegaci\u00f3n en respecto a la estructura de la p\u00e1gina. Si no lo haces, corres el riesgo de tener desorden y confusi\u00f3n en la navegaci\u00f3n.\u00a0<\/span>La estructura de dise\u00f1o m\u00e1s com\u00fan se conoce como el sistema de cuadr\u00edcula. Sin embargo, limitan la creatividad y a menudo conducen a p\u00e1ginas r\u00edgidas. <\/span><\/p>\n

En cambio, sigue el principio conocido como regla de los tercios. Pues esta t\u00e9cnica tiene su origen en la proporci\u00f3n \u00e1urea que hist\u00f3ricamente se ha asociado con la belleza, como cualquier dise\u00f1ador sabr\u00eda. En fotograf\u00eda, la regla de los tercios hace que las im\u00e1genes parezcan m\u00e1s din\u00e1micas y visualmente llamativas. <\/span>Esencialmente, implica dividir su p\u00e1gina en tres secciones, tanto vertical como horizontalmente. La intersecci\u00f3n entre la horizontal y la vertical, se conoce como \u00e1rea focal o punto focal. <\/span><\/p>\n

Es donde debe colocar elementos clave para obtener el m\u00e1ximo impacto en cualquier dise\u00f1o. Para que te haga m\u00e1s f\u00e1cil la realizaci\u00f3n de esto, te dejaremos una lista de pasos sobre la regla de tercios en el dise\u00f1o.\u00a0<\/span><\/p>\n

Primero, intenta dise\u00f1ar en Three’s. Es decir, si tienes 12 cuadr\u00edculas div\u00eddelas en tres columnas, de 4 cuadr\u00edculas cada una.<\/span><\/p>\n