https://victor42.eth.limo/tags/psychology/Recent content in Psychology on Victor42Hugo -- gohugo.ioenhi@victor42.work (Victor42)hi@victor42.work (Victor42)Tue, 29 Apr 2014 14:17:00 +0000https://victor42.eth.limo/post-en/3303/Tue, 29 Apr 2014 14:17:00 +0000hi@victor42.work (Victor42)https://victor42.eth.limo/post-en/3303/<p>I was designing a pull-up info panel – the kind you slide up for more details. How do you make it clear to the user? How do you show it&rsquo;s draggable?</p> <p><img src="https://cdn.victor42.work/posts/2014-04/04-29/1.png" loading="lazy" alt="A pull-up drawer indicator icon composed of three horizontal bars of decreasing length" ></p> <p>My first thought was this icon. Makes sense, right?</p> <p><img src="https://cdn.victor42.work/posts/2014-04/04-29/2.png" loading="lazy" alt="Bottom pull-up drawer indicator icon marked with a red circle and arrow in a mobile map app interface" ></p> <p>It works in the UI. But why this shape? It&rsquo;s abstract. How does it convey &ldquo;drag&rdquo;? I&rsquo;d never considered it before.</p> <p>Then it hit me: it&rsquo;s based on real-world objects. Think ridges or stripes – they increase friction, making things easier to grip and slide.</p> <p><img src="https://cdn.victor42.work/posts/2014-04/04-29/3.jpg" loading="lazy" alt="Close-up of a rubber anti-slip pad with ridges on the side of a computer mouse" ></p> <p><img src="https://cdn.victor42.work/posts/2014-04/04-29/4.jpg" loading="lazy" alt="A blue plastic bottle cap with vertical anti-slip ridges" ></p> <p><img src="https://cdn.victor42.work/posts/2014-04/04-29/5.jpg" loading="lazy" alt="An indentation with anti-slip ridges and an arrow on a remote control battery cover" ></p> <p>Mice, bottle caps, remote control backs&hellip; they all use it.</p> <p>It clicked! Sometimes, you need the flat <em>form</em>, but the skeuomorphic <em>spirit</em>.</p>