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

Application Overview Video’s

Today I am just posting a couple of overview video of my application that I probably should have posted before now but better late than never.

See videos below:

 

Viking Women

As part of the How Did They Live section of my application, a description of the role Viking women played in everyday life is delivered. I have created a visual scene to reinforce the information provided within the text; my scene depicts a female Viking character in a Viking house undertaking two of the general everyday tasks described in the text. My scene shows a Viking woman cooking and then the scene shifts focus towards the Viking loom featured in the view where my character can then be seen weaving.
See the video below:

How Did They Live

Today I have been developing imagery for the How Did They Live section of my application, within the text in this section there is a description that explains that most Vikings knew how to fight.  It also explains that Vikings took dishonour very seriously and insults could lead towards blood feuds ending in death, especially when it came to defending the honour of their family, so I have chosen to illustrate this part of the application with an image of two Vikings fighting, the reason for their fight is illustrated by two speech bubbles showing a dialogue in which one Viking insults the others wife and the other Viking responds with a threat to kill, this will hopefully illustrate in imagery the message that is been delivered in the text, supporting and reinforcing the delivery of information to the user.

I have tried to take advantage of the medium by using a simply fade in and out animation of each Vikings discourse, to show the interaction between the two characters as an exchange.  I could have tried to create an actual fighting animation but my animation skills are not at that level and I do not believe I would have been able to do it justice visually; a full fighting animation may also have slowed the application down.  I believe the visual illustration I have created although quite simple is effective and fulfils the purpose for which it is intended.

See the video below:

Viking House Interior Interactive

I have recently been creating an interactivity to show my users what the interior of a typical Viking house may have looked like.  Earlier in my MA I mocked a very basic interpretation of a Viking house interior (see here), I have used my earlier work as a guide but due to further research and discussion regarding my original with better artists than myself, I have re-dawn the majority of the content and added further content to my image.  Within my application different elements will be interactive, i.e.  a user will be able to select individual items within the interior of the building, to access further information relevant to the selected item (see the video below)

I am once again trying to make the best use of the interactive nature of the platform, in order to break up text and deliver in relevant sections where the user can see the relationship between visual content and textual information, in this case a direct correlation is possible due to the relationship between the interaction of choosing a visual object and the information been displayed as a result.  I have also reinforced this relationship further with an arrow that directly links the textual information and the visual representation.