How to Best Optimize Medical Website Navigation for Mobile Users
When optimizing a Mobile Website Design for users with smaller screen devices, one of the primary concerns is navigation. How will the user be able to quickly and easily get around the site when real estate is at a premium? Designers seem to still be grappling with this issue, so there is a wide array of trends currently seen in the mobile space.
We will examine a few to see the strengths and weaknesses of these different approaches:
The “Shrink-And-Leave” (or Complete Removal)
Example: as-is mobile navigation
One of the most common and laziest methods is to simply shrink down the navigation and leave it as is. While the development time in this implementation is practically zero, users can get frustrated trying to snipe tiny links with their finger. Likewise, full navigations on desktop rarely look good when forced into a much smaller space without consideration for layout. An even more egregious “solution” is to entirely hide/remove the navigation, dumbing down the site entirely for mobile users.
The Link List
Example: the link list in mobile navigation.
Another of the more pervasive methods is to simply lay out a list of the more common site links just below the banner/header of the site. While this method is certainly better for touch users, it can eat up a lot of the valuable screen real estate forcing users to scroll more than they probably should have to before actually getting to the content of the page.
Example: the fly out menu in mobile navigation
To solve the space problem of the link list, clever designers have resorted to fly-out menus which only expand outward once tapped. Usually, these fly-outs are accompanied by an icon that resembles three vertical bars popularized in many native iPhone apps. While this icon could be potentially confusing to users who are unaccustomed to its meaning, the trend appears to be picking up steam quickly as it is currently found on a large number of sites.
Footer Only Navigation
Example: footer only mobile navigation.
A variation on the fly-out menu’s solution to the valuable screen space problem, some sites will resort to hiding the navigation at the top of the site and placing it at the bottom. Often times, this navigation type will have a link at the top (occasionally accompanied with the three vertical bars mentioned previously) that jumps the page down to this footer navigation. While another good way to optimize visual space, this method can disrupt a visitor’s experience by taking them to an area of the page they didn’t anticipate, possibly causing them to get lost.
Example: select dropdown mobile navigation.
Which Mobile Navigation Method is Preferred?
Like the early days of the web when designers were trying to figure out basic functionality in websites, the method for deploying mobile-friendly navigation has yet to be codified. As more and more users turn to mobile devices for the majority of their browsing experiences, we will see which solution emerges as the best and most popular. As web traffic continues to rapidly skyrocket on non-desktop computers, contact Omni Medical Marketing to see how we can best optimize your site for visitors on all devices with Responsive Website Design.