Avendi Solutions

Jedno zdanie na temat usługi tak aby sie nie zawijało

We explore the most common website navigation schemes and identify the best approaches.



<h2 class="wp-block-heading">The test setup</h2>



One question that comes up often is “What is the right way to handle dropdown menus?” It seems simple, but there are many different ways you could tackle this decision. Should the top item in the navigation be clickable, or a label only? If it is clickable, do we repeat the link in the dropdown menu, or only show it at the top? And what about interacting with the dropdown? Should it be triggered on hover or on click? What do we do for mobile? What about accessibility?  When looking for answers on the internet, I came up short. Top websites across industries seemed to all have a different way of doing things. Any articles that addressed the topic didn’t go as in depth as I wanted and mainly relied on vague “best practices” that differed between articles. I wanted data that provided an answer once and for all, so I conducted the study myself.  In this article, I’ll share the results of a usability study that tested several different iterations of a navigation prototype as well as a survey of top websites and the patterns that they are using. To conduct the study, I created a navigation prototype in Figma and tested it using the tool Useberry. I recruited participants from the recruiting service Prolific. I’m happy to say I believe the results give us some definitive answers on the true best practices for dropdown menus in navigation.



<h2 class="wp-block-heading">Variations to Test</h2>



First, let’s go over the different variations I decided to test. They all use a simple wireframe prototype for a fictional fitness club website. Each prototype used the same control navigation with minor variables between them. I made sure to make the navigation and the tasks participants need to complete pretty simple so as not to confuse anyone.



<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="683" src="https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-1024x683.jpg" alt="" class="wp-image-361" srcset="https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-1024x683.jpg 1024w, https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-300x200.jpg 300w, https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-768x512.jpg 768w, https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-1536x1024.jpg 1536w, https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-2048x1365.jpg 2048w, https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-600x400.jpg 600w, https://api.targoland.pl/wp-content/uploads/2024/11/admin-runs-code-laptop-data-center-247x165.jpg 247w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /><figcaption class="wp-element-caption">Trained admin running code and programming on laptop, troubleshooting and upgrading high tech facility designed to accommodate multiple rows of fully operational server racks</figcaption></figure>



Each participant was asked these four tasks in a random order. Two questions target the top level/overview item, and two questions target items in the sub nav. 



<ul class="wp-block-list">
<li>Where would you click to learn more about what this gym is like and its background? Answer: About (in version 3 this was called “Overview”)</li>



<li>Where would you click to read about what makes this gym different and the benefits of joining? Answer: About → Why Choose Panda Gym</li>
</ul>



 Where would you click to learn about the instructor-led programs you can sign up for? Answer: Classes (in version 3 this was called “Overview”) Where would you click to learn about the gym’s pilates programs? Answer: Classes → Pilates  There were three main elements I wanted to test: What happens when someone clicks on the top item (or the label that triggers the dropdown opening)? What happens when someone hovers on the top item? Is it helpful to have some sort of “overview” page that references the top item in the dropdown? I’ve seen combinations of each of these navigation schemes before, and I wanted to find out which option would perform the best. With Useberry, I was able to have participants complete the study in an unmoderated way to save time and money. I could still watch the sessions later to analyze their mouse movements and clicks in detail. I recruited 50 participants for each version of the test, and my coworkers and I watched and analyzed every session.

Usługi

Startup i idiotyczne hasło