Mobile Navigation on the Modern Web
For a long time websites have used a top aligned navigation layout. Go to any website and the controls and navigation is almost always at the top of the page. Sometimes this will be in a fixed position so that as the user scrolls down the navigation stays in view. Occasionally websites will have a left aligned navigation system in addition to this. These are usually context specific; the content of the left hand navigation often depends on which page of the website you are on.
This left hand navigation scheme does not work well on mobile devices because horizontal space is at a premium. However the top aligned navigation was an easy transition to mobile design. This is interesting because app development has gone in quite the opposite direction. It has long been understood that putting the most used navigation elements of an app at the top of the screen makes it difficult for the user to reach. As phones have become large this problem has increased. Due to this mobile developers have placed the primary navigation features of their app on the bottom of the screen. Open up any app and you will probably find this to be the case.
It is time for mobile website designs to follow suit. Very often if a company has a website and a corresponding app, the mobile version of the website will derive the design of its user experience more from the desktop experience than from the app experience. This is often due to the fact that the implementation of the mobile and desktop versions of the website are integrally linked whereas often the app is totally distinct. Different development cycles might be used for each and can lead to different designs. Different stakeholder and product owners might be involved and this can again lead to a diversion.
However the long story short is that with respect to design the mobile website experience should be more closely linked to the app experience than to the desktop experience. The most striking example of this is with mobile website navigation. The de facto standard should be to place it at the bottom of the page.
I just took a look at a few examples of apps and mobile websites and they all fell into this same trap. The website had the navigation at the top of the mobile screen following suit with the desktop version and the app placed the navigation at the bottom of the screen following suit with what works best on a mobile device.
This left hand navigation scheme does not work well on mobile devices because horizontal space is at a premium. However the top aligned navigation was an easy transition to mobile design. This is interesting because app development has gone in quite the opposite direction. It has long been understood that putting the most used navigation elements of an app at the top of the screen makes it difficult for the user to reach. As phones have become large this problem has increased. Due to this mobile developers have placed the primary navigation features of their app on the bottom of the screen. Open up any app and you will probably find this to be the case.It is time for mobile website designs to follow suit. Very often if a company has a website and a corresponding app, the mobile version of the website will derive the design of its user experience more from the desktop experience than from the app experience. This is often due to the fact that the implementation of the mobile and desktop versions of the website are integrally linked whereas often the app is totally distinct. Different development cycles might be used for each and can lead to different designs. Different stakeholder and product owners might be involved and this can again lead to a diversion.
However the long story short is that with respect to design the mobile website experience should be more closely linked to the app experience than to the desktop experience. The most striking example of this is with mobile website navigation. The de facto standard should be to place it at the bottom of the page.
I just took a look at a few examples of apps and mobile websites and they all fell into this same trap. The website had the navigation at the top of the mobile screen following suit with the desktop version and the app placed the navigation at the bottom of the screen following suit with what works best on a mobile device.
