Improving my navigation

I have been aware of an issue with my current navigation system for a while and I have had a plan in mind to deal with it, so over the past couple of days I have implemented my plan.

So let’s start with the problem, my current navigation has a relationship between the bottom layer of buttons and the top layer and up until now that has not been entirely evident.  In other words the bottom layer of buttons is the primary navigation and in effect the top buttons are the secondary sub layer.  This allows me to have 15 different buttons available to the user but with only seven buttons on the screen at one time, so making better use of the available space.

There are many different menu systems being developed across both mobile and other digital technology systems that try to make the best use of visual space, include sliding menus, menus that open and close and menus that spin but for the reasons I explained in a previous blog (see here)

I still stick by those choices but improvements were needed to create a better overall user experience.

The image below shows the problem with the current navigational menu.

problem-with-old-navigation

To make the relationship between these different layers of buttons more apparent, I have colour coded the sections, so the user can see that by pressing the bottom blue button it opens a full top layer of blue buttons and the same for the red and green buttons.

See image below:

colour_coded_navigation

Another issue with the old navigation was that it was not always evident to the user how the current page relates to the navigation, although there was visual feedback in the form of a screen heading, see image below:

current_page_header

Within the new menu, I have improved the level of visual feedback regarding the current page by adding a gold border that appears around the current screen button, so re-enforcing the existing header title feedback, see image below:

current_button_marker

There has been another issue with the old menu that I have been struggling to make a decision on and that is typeface.  It has been apparent to me for a while and it has also been pointed out to me that my application may have too many typefaces and in particular the difference in typeface between the sans serif used within the main text and the serif typeface used within the navigational elements.  The typefaces in question are the devices default sans serif and serif fonts because embedding typefaces would slow the application down too much.

Making the decision between changing the main document text to a serif typeface and changing the navigation to a sans serif has been difficult.  Although arguments can be made about whether children find it easier to read one over the other, children’s applications tend to feature sans serif typeface as explained by Catalina Naranjo-Bock:

“While research studies have expressed divergent findings about differences in children’s ability to read serif or sans serif typefaces, [2] [3] it is common practice to use sans serif fonts in applications for children, because of their fresh look and simplicity.”

http://www.uxmatters.com/mt/archives/2011/06/effective-use-of-typography-in-applications-for-children-3.php

This article does explain that there are some exceptions to this common practice but I cannot help but feel that these exceptions have been made for the same visual reasons that are making me want to use serif fonts across my entire application but this desire for aesthetic value needs to be weighed against the practical nature of a typeface style, that as described may or may not be easier to read but has become a design convention for applications aimed at children.  Ultimately I have opted to change the navigation typeface to the devices default sans serif, see the image below:

old_new_typeface

 

 

 

 

 

 

 

A more visually biased designer, may have opted for a style over substance approached but once again I have been swayed by my practical bias in terms of a solution that I feel will be easier for the user to read but unfortunately it does not fit as well with the visual style of my application.  This was one of those situations where neither conclusion would have left me 100% happy but I have made a decision based upon logical reasons, a decision that I can live with.

[2] Walker, S. Reynolds, L. Robson, N. Guggi, N. et al. “Typefaces.”Typographic Design for Children. Retrieved May 31, 2011.

[3, 4] Bernard, M. Mills, M. Frank, T. & McKown, J. “Which Fonts Do Children Prefer to Read Online?” Software Usability Research Laboratory, Wichita State University. Usability News, January 2001, Volume 3, Issue 1. Retrieved May 31, 2011

Advertisements

One thought on “Improving my navigation

  1. I simply could not leave your web site prior to suggesting that I really loved the standard information an individual supply to your visitors?
    Is going to be again continuously in order to investigate cross-check new
    posts

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s