The Omni Advantage

The Omni Advantage is simple – we provide the services our clients want, nothing more and nothing less. Not every market is the same, not every medical practice, bariatric surgeon, plastic surgeon, otolaryngologist, etc. is the same. Why should online marketing companies only offer you one package without understanding your needs and desires?

Newsletter Signup

Get the latest Medical Marketing News & Tips from Omni Medical Marketing

Enter your e-mail address above and hit enter to be added to our newsletter. We never give out your e-mail address or any other information.
Call us to learn more today(800) 549-0170

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)

An example of as-is mobile navigation

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

An example of the link list in mobile navigation

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.

The Fly-out

An example of the fly out menu in mobile navigation

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

An example of footer anchor mobile 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.

Select Dropdown

An example of form select dropdown mobile navigation

Example: select dropdown mobile navigation.

One of the more peculiar solutions, which has been gaining momentum, is to make an alternate navigation that relies on a simple dropdown. While perhaps initially perplexing, this allows the operating system (OS) of the user’s device to style and handle the navigation resulting in a more familiar, seamless experience once enacted. This also bypasses the problems associated with styling fly-out menus which can look bad on devices which handle animation poorly or can’t be relied upon for javascript functionality.

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.