Tag Archives: Navigation

Time to rethink website navigation systems

On January 6th, 2013, I outlined my thoughts on how I wanted to design websites that worked for both tablets and PCs.

I made the following observations;

  1. We need to start designing websites with tablets in mind. Displaying PC websites on the 10-inch iPad worked quite well. However, with the smaller iPad mini, we need to make more optimized websites.
  2. Desktop websites tend to be loaded with insane amounts of junk and redundant material. 90% of the content on the Asahi.com website, for example, is either a) advertisements, b) navigation, c) recommended links. The real content of the top page, which we would expect to be the headline news, is only 10% of the page.
  3. Because desktop websites come with so much junk, you would actually lose very little by removing it and making the page fit comfortably on the iPad mini.
  4. Looking at newspaper applications designed for the iPad, it becomes apparent that even the top-navigation bar is not really necessary. If you provide a button that summons up a page dedicated to navigation, you can dispense with even the most basic web navigation elements.

Today, working on an updated version of Ponzu, I am now absolutely sure that top-navigation can and often should be removed. With even the most basic web navigation scheme being cast under doubt, I am now of the impression that website navigation as a whole needs to be completely re-imagined, with inspiration for the new generation most likely to come from native mobile applications.

We’ll update this blog with our progress as it happens.

In the meantime, here’s an excellent write-up of traditional navigation designs and patterns that are common on current websites. Unfortunately, as you can easily see, the vast majority of these designs require the precision of a mouse cursor and are very, very unsuitable for an iPad mini.

Possibilities of the poster map system

In MBSJ2012, we introduced a “poster map” function for the very first time in the world. This poster map function highlights which posters you “liked” or which posters you added to “my schedule”. This enables participants to easily find which posters they need to visit.

The poster map is drawn using a simple combination of HTML & CSS. All of the poster rows are simply positioned absolutely and placed on top of a background image of the poster hall. The only difficult part is calculating the location of each poster.

In the future, we could easily extend the poster map concept to the exhibition. Participants could “like” booths, and efficiently visit the ones that they are interested in.

What should Ponzu include?

One huge oversight in the MBSJ2012 system was that we focused too much on the social aspects of the scientific program, and we didn’t provide enough support for other things (i.e. exhibition, maps, forums, etc.). Due to time and organizational constraints, it’s not clear if we could have done it even if we gave enough though about it. However, it is obvious that future iterations of Ponzu need to be better at this.

The scientific program is usually completely separate

In all the conference websites that I am aware of, the website or smartphone application that provides presentations abstracts is separate from the main conference website. For example, on the MBSJ2012 website, the separation was as follows;

Main conference website

  1. Greetings from the organizing comittee.
  2. Satellite forums.
  3. Registration info.
  4. Submission of abstracts.
  5. Child care information.
  6. Access.
  7. Lodging (external website).
  8. Exhibition (external website).
  9. Other events (job seminars).

Scientific program website

  1. Oral presentations.
  2. Poster presentations.
  3. Other events (yoruzemi).
  4. Social features.

This separation is quite typical.

Information should be more integrated

The problem is that this separation is completely due to technical reasons, and that it doesn’t take into consideration how participants want to use the system.

For example, if a participant was interested in next-generation sequencing techniques, they would not only want to view scientific presentations but they would also want to search through the exhibitions. In this case, the search function should be able to search through both the scientific program and the exhibitions.

More importantly, as conferences become bigger and try to be more than just science, the importance of fringe events become larger. For example, MBSJ2012 had job seminars, high-school student presentations and quick snack stands. MBSJ2013 is also contemplating a wide array of non-scientific events. Increasing awareness of these events is very important, and the website should play an large role in this. More integration is needed to maximize promotion.

Increasing the scope of information on a website presents significant new challenges on the navigation structure. However, when done right, it should increase participation on fringe events and it should also raise interest in the exhibitions. We will discuss some of these following posts.

Framing the scope

The separation prevalent on current conference websites stems from technical reasons. The software and systems that power a) the main conference page, b) the scientific program, and c) the exhibition are all different and are often even run by separate vendors.

To create a better experience for the participants, we have to break down these walls and think about what would be best for the users. We propose the following reasoning.

  1. Participants can juggle multiple websites from the comfort of their office and a high-speed Internet connection.
  2. Participants have limited access to the Internet at the conference venue. Hence they have much less tolerance for juggling multiple sites at the event. Ideally, all information required once the conference has started, should be on a single website.
  3. This means that the following information should be provided on a single website.
    1. Satellite forums.
    2. Registration info (on site).
    3. Access.
    4. Exhibition.
    5. Other events.
    6. Scientific program.
    7. Other events (yoruzemi)
    8. Social features.


Left navigation can get annoying

When the breadth of a single website gets very broad, a common way to present all of the information is by using a left navigation widget. MBSJ2012 has quite a long left navigation. The JBS2012 also uses left navigation.

Left navigation is good, but it takes up a lot of space. It’s OK if the content that we need to show on each page is actually quite small. However for pages where content is large, left-navigation breaks down.

In the MBSJ2012, the addition of social features alone required quite a few additional menus. Therefore we broke down the menu structure into the following;

Top-navigation only for most pages

A lot of the pages for the scientific program were very content heavy. The screenshot below shows the poster map, and you can see that there is absolutely no space for a left-navigation menu. Instead we used top-menu navigation. However, it is difficult to put a large number of items on a top-menu (it get’s downright impossible on smartphones). We therefore demoted those items to a sub-menu on the “HOME” page.

Poster map

Left-navigation on “HOME” page

To accommodate extra menu items without overloading the top-menu, we put these on a sub-menu on the “HOME” page.

HOME page MBSJ2012

The following is an alternate design that we might use in the future. By using icons, we can make each section more attractive. This might be what we need to get participants’ attention.

Prototype HOME

Conclusions and Future directions

Future conference systems will have to integrate more information into a single website. The challenge is to provide a navigation system that is not only easy to use, but also raises awareness of fringe events and features.

The MBSJ2012 introduced social features as a fringe capability, and used a sub-menu on the “HOME” page for navigation. Although we think that this was sufficient from a usability standpoint, further measures are needed if we want to aggressively promote new features.