Cookie Consent by Free Privacy Policy Generator ๐Ÿ“Œ Mind your Margins!

๐Ÿ  Team IT Security News

TSecurity.de ist eine Online-Plattform, die sich auf die Bereitstellung von Informationen,alle 15 Minuten neuste Nachrichten, Bildungsressourcen und Dienstleistungen rund um das Thema IT-Sicherheit spezialisiert hat.
Ob es sich um aktuelle Nachrichten, Fachartikel, Blogbeitrรคge, Webinare, Tutorials, oder Tipps & Tricks handelt, TSecurity.de bietet seinen Nutzern einen umfassenden รœberblick รผber die wichtigsten Aspekte der IT-Sicherheit in einer sich stรคndig verรคndernden digitalen Welt.

16.12.2023 - TIP: Wer den Cookie Consent Banner akzeptiert, kann z.B. von Englisch nach Deutsch รผbersetzen, erst Englisch auswรคhlen dann wieder Deutsch!

Google Android Playstore Download Button fรผr Team IT Security



๐Ÿ“š Mind your Margins!


๐Ÿ’ก Newskategorie: Programmierung
๐Ÿ”— Quelle: blogs.bing.com

Introduction

The search box is the most important piece of UX on our page. It wonโ€™t be an overstatement to say that the search box is the most important piece of UX on any search engine. As the front line between us and what customers are looking for, it is very important that the search box is:

  • Clear (easy to spot),
  • Responsive (low latency),
  • Intelligent (provides relevant suggestions).

At Bing, every pixel of UX earns its position and size on the page. We put every UX element through rigorous design reviews and multiple controlled experiments. No change to the UX is too trivial, no change passes through un-verified. Besides this all the various ways users interact with the different UX elements on our page(s) are analyzed constantly. During one such exercise we noticed that some of our customers were having a sub-optimal experience with our search box. Some of their clicks were being ignored by the search box. As we dug deeper the investigation led us to recognize the power of detailed instrumentation and the impact that small tweaks in the UX can have on overall customer satisfaction. Along the way we uncovered that this issue was not unique to Bing. In fact, we saw it on websites big and small throughout the web. It turns out, ย โ€œMind your margins!โ€, a phrase you might have heard from your English teacher, is still relevant and is applicable to search boxes on many of the worldโ€™s premiere websites.

The search box as it appears to the users on Bing.com.
Figure 1: The search box as it appears to the users on Bing.com.
ย 

The Issue: Missed Clicks

While analyzing user interaction (with our web pages) data on Bing.com, something caught our attention recently. We noticed that a non-trivial percentage of our users clicked multiple times on the search box. In some cases, however, the number of clicks were way more than the number of searches or re-queries issued by the user. When we dug deeper into these interactions using our in-house web instrumentation library,ย Clarity (which lets us replay user interactions), we were able to determine that in a large number of such cases our usersโ€™ clicks were being missed. A โ€œmissed clickโ€ is a click by the user that does not bring about any change in the UX or the state of the web page. It is as if the click never happened and is a common UX issue for buttons and links on many web properties. Missed clicks anywhere on the page are not good but especially bad when they are on the search box which is the most important piece of UX on Bing.

To see this in action look at the video snippet below:

.
Figure 2: Shows missed click on the search box on Bing.com


Missed clicks are not easy to detect, consider a user clicking somewhere on the page you did not anticipate (not clicking a link or an image or a button but clicking on something unclickable like text or an empty space). Will your instrumentation take that signal to your data warehouse? Most websites today will miss that the user clicked somewhere on the page if it was not a button or a link. Luckily for us at Bing, Clarityย was able to detect not just missed clicks but many other subtle user interaction patterns with our web pages. Clarity was able to show us that sometimes even though users were clicking on our search box multiple times, their clicks were being missed. We were then able to quantify that 4% of all the users that clicked on the search box had one or more missed clicks.ย 

ย 

The Cause: Margins

Once we noticed the missed clicks, we then wanted to find out the exact location of where these were occurring on the search box. Immediately one location jumped out at us. We noticed that most missed clicks were occurring on the left corner of the search box i.e. margin or the area between the html form control that contains the search box and the search box itself (shown in orange below). Since both the form and the search box have the same background color, it was not possible for the users to know that they were clicking on the margin of the search box. Click events on this margin, therefore, were not passed to the search box thereby causing missed clicks. It was now clear to us why we were losing 4% of clicks on the search box (The area covered by the margins, orange area, which is not clickable is around 10% of the area of the search box shown in blue + green).
ย 

Figure 3: Clicks on the orange area to the left and top of the ย search box, were not handled by the event handlers associated with search box and were being ignored.
Figure 4: CSS Box Model of the Bing Search box
ย 

The Fix

The fix was straightforward, we had to reduce the margins between the search box and the html form that contained the search box, specifically the top, left and bottom margins. The right margins were less of an issue since the presence of the โ€œsearch by imageโ€ icon and the spy glass icon for search gave users a clear visual clue that this part of the control was not for text in search box. The Figure below shows one of the many treatments we tried for the fix, reducing the top margin by 4px and reducing the left margin by 19 px made almost the entire area of the form control (which contains the search box) clickable and all but eliminated the missed clicks on the search box, while maintaining visual parity with the control. As an aside keeping visual parity between control and treatment was important as we wanted to isolate any metric movements just to the elimination of search box margins.

Figure 5: Removal of margins on the search box all but completely hides the orange area and eliminates missed clicks.


Figure 6: Video showing the fix, no more missed clicks on the Bing search box.
ย 

Results / Gauging User Impact

Once we rolled out the fix to production, missed clicks on the search box all but vanished, and not only that -ย the results from multiple flights suggested positive movements in our user satisfaction metrics as well. We saw the User SAT metrics like traffic utility rate and SSRX (the two hardest to move metrics historically) showed high stat significant movement in the positive direction. Eliminating missed clicks on the search box alone ended up improving the Session Success Rate Metric (SSRX) by 0.017% and the Traffic utility rate went up by 0.3%. Both these metrics are extremely hard to move and have been shown to impact not just user satisfaction with the search results page but also long-term user retention.

We would have shipped this change just to fix the missed clicks issue but when we saw the positive impact on these metrics, it was icing on the cake. Yet again we learned that even small changes in user interface can deliver significant user impact all up.

ย 

Not Unique to Bing

Armed with our success on Bing, we were curious to investigate whether other websites with search boxes had such margins as well, after allย a margin between the search box and the container html control (both with the same background color) is a common UX pattern present on multiple sites. We found that other popular websites including search engines and social media have unclickable areas (due to margins) on their search boxes too and may be experiencing missed clicks. It is possible that these websites can impact their users positively by using the fix we applied in Bing.

ย 

Conclusion

As we wrapped up our investigation we were left with a few key takeaways:

  1. Small tweaks matter, even tiny changes to the UX can lead to a significant impact on user satisfaction.ย 
  2. Donโ€™t forget Fitts law, donโ€™t make it hard for users to click where you want them to.
  3. Scale multiplies the impact of small improvements and just as much multiplies the negative impact of minor annoyances. Even an issue which will affect a tiny fraction of your users might lead to thousands even hundreds of thousands of users with a sub optimal experience.
  4. You canโ€™t afford to have blind spots in your web page instrumentation, any user action, no matter how trivial, ย taken on your page should be instrumented stored and analyzed.
  5. Donโ€™t take popular UX patterns for granted.ย 

And finally, when it comes to your search boxes, โ€œMind your Margins!โ€ ย ?

Clarity: Fine grained instrumentation to track user interactions

We cannot overstate the contribution of Clarity in underscoring and helping us identify this issue. Clarity our website analytics tool developed in house, played a pivotal role in this investigation and showed us the impact of the issue on our user base. As mentioned earlier, missed clicks anywhere on a web page are not tracked on most websites, fortunately clarity keeps track of all user interactions and DOM mutations on the Bing.com webpages, while allowing web masters powerful privacy controls. It provided us with a trove of data with missed clicks and their precise location on the page which helped us not only understand the impact of the missed clicks but also identify the fix(es) necessary. If you are a webmaster, we strongly encourage you to explore this tool by visiting https://clarity.microsoft.com and applying for the free pilot so you can start reaping the benefits in just a few clicks. To learn more about how clarity tracks user interaction check out clarity project page on GitHub.ย 



...



๐Ÿ“Œ Mind your Margins!


๐Ÿ“ˆ 44.61 Punkte

๐Ÿ“Œ Basic directory description for refresh your mind, keep it on your mind :-)


๐Ÿ“ˆ 32.36 Punkte

๐Ÿ“Œ Hooked on public cloud? It could be eating a big chunk of your margins


๐Ÿ“ˆ 31.94 Punkte

๐Ÿ“Œ Apple Could Cut iPhone SE Margins in Anti-Android Offensive


๐Ÿ“ˆ 28.43 Punkte

๐Ÿ“Œ MSPs and MSSPs Can Increase Profit Margins With Cynet 360 Platform


๐Ÿ“ˆ 28.43 Punkte

๐Ÿ“Œ Intel margins fall as people shift to more affordable PCs


๐Ÿ“ˆ 28.43 Punkte

๐Ÿ“Œ How to Change Margins in Pages


๐Ÿ“ˆ 28.43 Punkte

๐Ÿ“Œ Investors should pay attention to Appleโ€™s expanding gross margins โ€“ analyst


๐Ÿ“ˆ 28.43 Punkte

๐Ÿ“Œ Superhot: Mind Control Delete adds mind-bending roguelike twists


๐Ÿ“ˆ 25.33 Punkte

๐Ÿ“Œ How to make a mind map: The best mind mapping techniques and tools


๐Ÿ“ˆ 25.33 Punkte

๐Ÿ“Œ Harnessing the Power of Digital Mind Mapping: A Guide for the Productive Mind


๐Ÿ“ˆ 25.33 Punkte

๐Ÿ“Œ Design Your IAM Program With Your Users in Mind


๐Ÿ“ˆ 19.7 Punkte

๐Ÿ“Œ Design Your IAM Program With Your Users in Mind


๐Ÿ“ˆ 19.7 Punkte

๐Ÿ“Œ Stunning Portfolios that will blow your mind - Fuel Your Creativity


๐Ÿ“ˆ 19.7 Punkte

๐Ÿ“Œ Next-gen Varjo VR-3 and XR-3 headsets will blow your mind (and your wallet)


๐Ÿ“ˆ 19.7 Punkte

๐Ÿ“Œ Through Your Mindโ€™s Eye: What Biases Are Impacting Your Security Posture?


๐Ÿ“ˆ 19.7 Punkte

๐Ÿ“Œ How Being Bored Out of Your Mind Makes You More Creative


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Donโ€™t Want Windows 10? Cool Hardware May Change Your Mind


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ How Being Bored Out of Your Mind Makes You More Creative


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Donโ€™t Want Windows 10? Cool Hardware May Change Your Mind


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Security Leaders: When Dealing with DevOps, Get Your Mind Right


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ European Commission chucks cash at UR โ€“ the universal language of mind your own biz


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Mind-Reader Headset Transfers Your Thoughts On Screen with 90% Accuracy


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ iPhone 8 Could Be Delayed 2 Months, But Itโ€™ll Blow Your Mind Anyway


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ A Game You Control With Your Mind


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Microsoft Details Technology to Control a PC Using Just Your Mind


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ A slick phone Linux for your pocket PDA? Ooh, don't mind if I do, sir


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Not sure if you can make the switch? Maybe this will change your mind. Seamless VM w/ GPU passthrough on Debian testing + KDE Plasma 5.


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Desktop to Mobile - Developing for Multiple Platforms without Losing Your Mind


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Why Cyber Range Training Should Be Top of Mind for Your Security Teams


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ God's Trigger is a fantastic top-down shooter that will blow your mind


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ If you're using Harbor as your container registry, bear in mind it can be hijacked with has_admin_role = True


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ How Flying Seriously Messes With Your Mind and Body


๐Ÿ“ˆ 16.18 Punkte

๐Ÿ“Œ Microsoft Says Windows 10 on ARM Will Blow Your Mind (Eventually)


๐Ÿ“ˆ 16.18 Punkte











matomo