[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"\u002Farticles\u002Fhow-to-control-user-attention":3},{"id":4,"title":5,"body":6,"date":229,"description":230,"extension":231,"head":232,"imageUrl":233,"meta":234,"navigation":235,"ogImage":232,"path":236,"robots":232,"schemaOrg":232,"seo":237,"sitemap":238,"stem":239,"__hash__":240},"articles\u002Farticles\u002F02.How-to-control-user-attention.md","How to grab and guide user attention in UI design",{"type":7,"value":8,"toc":217},"minimark",[9,13,17,20,23,26,29,32,38,43,46,49,53,57,60,63,67,71,74,77,81,85,88,91,95,99,102,105,109,113,116,121,125,129,133,137,140,144,147,150,153,171,174,177,191,194,197,201,214],[10,11,5],"h1",{"id":12},"how-to-grab-and-guide-user-attention-in-ui-design",[14,15,16],"p",{},"Customer attention is something that every business wants to get.",[14,18,19],{},"Many tricks are used in UI design to do this. Some examples are CTA buttons, accent colors, animations and so on.",[14,21,22],{},"There is an endless list of possibilities on how to use your attention, and the list is constantly growing: marketers\nconsistently look for new gimmicks.",[14,24,25],{},"In UI\u002FUX design, there are some basic concepts that you should know.",[14,27,28],{},"Let's say we have 12 squares. They are completely identical. How can we shift your focus to a specific square?",[30,31],"user-attention-squares",{},[33,34,37],"div",{"className":35},[36],"sr-only","\n  A 4x3 grid of identical dark squares used as a baseline for all attention experiments.\n",[39,40,42],"h2",{"id":41},"distance","Distance",[14,44,45],{},"If we move any of these squares somewhere far from others, it'll immediately catch our attention.",[47,48],"user-attention-squares-distance",{},[33,50,52],{"className":51},[36],"\n  One square is moved far away from the group to demonstrate how distance grabs attention.\n",[39,54,56],{"id":55},"size","Size",[14,58,59],{},"If every square has the same size, they are all equal. As soon as you change the size of any of them, you'll grab users'\nattention immediately.",[61,62],"user-attention-squares-size",{},[33,64,66],{"className":65},[36],"\n  One square is smaller than the others, illustrating how size affects visual prominence.\n",[39,68,70],{"id":69},"color","Color",[14,72,73],{},"The same applies to colors. As soon as we change the color of any of the squares, our focus will shift to that square.",[75,76],"user-attention-squares-color",{},[33,78,80],{"className":79},[36],"\n  One square is pink, while the rest are dark blue, showing how color contrast attracts attention.\n",[39,82,84],{"id":83},"shape","Shape",[14,86,87],{},"An item will certainly stand out if it has a different shape.",[89,90],"user-attention-squares-shape",{},[33,92,94],{"className":93},[36],"\n  One square is replaced with a star shape, demonstrating how shape variation draws the eye.\n",[39,96,98],{"id":97},"motion","Motion",[14,100,101],{},"Another trick would be to animate an element. This is a widely used pattern; I'm sure you saw CTA buttons with some\nanimations, like shaking or jumping or whatever.",[103,104],"user-attention-squares-motion",{},[33,106,108],{"className":107},[36],"\n  One square is animated with a pulsing effect to show how motion can be used to grab focus.\n",[39,110,112],{"id":111},"people","People",[14,114,115],{},"A very subtle trick is to place a person looking at or pointing at something. Look at these examples.",[117,118],"v-image",{"alt":119,"src":120},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The first example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-1.jpeg",[117,122],{"alt":123,"src":124},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The second example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-2.jpeg",[117,126],{"alt":127,"src":128},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The third example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-3.jpeg",[117,130],{"alt":131,"src":132},"A person directing attention through gaze or gesture, illustrating how humans naturally follow visual cues. The fourth example.","\u002Fimg\u002Fhow-to-control-user-attention\u002Fglance-4.jpeg",[39,134,136],{"id":135},"sound","Sound",[14,138,139],{},"While it's not very common and usually considered a bad practice, the sound definitely attracts our attention.",[39,141,143],{"id":142},"now-what","Now what?",[14,145,146],{},"How to apply this in user interfaces? Well, there are plenty of ways.",[14,148,149],{},"Say you have several links. If you want to move user focus to a specific link, you can change its color, size, or even\nanimate it.",[14,151,152],{},"One of my favorite examples is a trick used by Josh Cameau at his blog. By having this fellow, he got a huge number of\nsubscribers.",[117,154,158],{"alt":155,"src":156,":fullWidth":157},"An example of grabbing users attention in a unique way","\u002Fimg\u002Fhow-to-control-user-attention\u002Fjosh.gif","true",[159,160,162],"template",{"v-slot:description":161},"",[14,163,164],{},[165,166,170],"a",{"href":167,"rel":168},"https:\u002F\u002Fwww.joshwcomeau.com\u002F",[169],"nofollow","Josh's Cameau blog",[14,172,173],{},"Another common trick is to reduce the number of options. There is Hick's law: The time it takes to make a decision\nincreases with the number and complexity of choices.",[14,175,176],{},"Look at this chart that perfectly illustrates the idea.",[117,178,181],{"alt":179,"src":180},"Number of options chart","\u002Fimg\u002Fhow-to-control-user-attention\u002Fnumber-of-options.png",[159,182,183],{"v-slot:description":161},[14,184,185,186],{},"Image from ",[165,187,190],{"href":188,"rel":189},"https:\u002F\u002Fwww.codecademy.com\u002Fresources\u002Fdocs\u002Fuiux\u002Fux-psychology\u002Fhicks-law",[169],"codecademy",[14,192,193],{},"The more choice you give users, the harder it becomes to choose anything. By reducing the number of items, you can make\nit easier for users to decide by reducing the distraction of having many possibilities.",[14,195,196],{},"By combining describing techniques you can lead users to somewhere you need.",[39,198,200],{"id":199},"further-reading","Further reading",[14,202,203,204,209,210,213],{},"If you enjoyed this post, you might also like ",[165,205,208],{"href":206,"rel":207},"https:\u002F\u002Ficons8.com\u002Fblog\u002Farticles\u002Fwhy-great-designers-break-alignment-rules\u002F",[169],"this article I wrote for Icons8",",",[211,212],"br",{},"\nwhere I explore how visual weight, alignment, shape, color, and even physics influence what users notice first — and why\nperfect alignment in Figma often still feels “off”.",[14,215,216],{},"It’s a deeper dive into how our perception works — packed with real examples, UI breakdowns, and practical takeaways.",{"title":161,"searchDepth":218,"depth":218,"links":219},2,[220,221,222,223,224,225,226,227,228],{"id":41,"depth":218,"text":42},{"id":55,"depth":218,"text":56},{"id":69,"depth":218,"text":70},{"id":83,"depth":218,"text":84},{"id":97,"depth":218,"text":98},{"id":111,"depth":218,"text":112},{"id":135,"depth":218,"text":136},{"id":142,"depth":218,"text":143},{"id":199,"depth":218,"text":200},"2023-01-28T17:19:11+04:00","User attention is what everyone tries to get. There are some very general rules that  can be applied almost in every application.\n","md",null,"\u002Fimg\u002Fhow-to-control-user-attention\u002Fsquares.png",{},true,"\u002Farticles\u002Fhow-to-control-user-attention",{"title":5,"description":230},{"loc":236},"articles\u002F02.How-to-control-user-attention","f0VdIxYM6qzFUq-sTft_BkWTamJZ9lnW-FKSaatqeMI"]