This navigation interface has been designed to make use of the touch features of today’s smartphones. The user communicates with the app via the use of radial menus and touching the area of importance. The “keyboard” is only employed where it makes the most sense in terms of speed, such as when searching for something that is only vaguely defined, i.e., somewhere close by to grab a bite, or when logging in for the first time. Radial menus that are related to the current view on the app pop up when the user touches and pauses for a moment on the screen. The user then slides their finger in the direction of the menu item of choice to open it up. The most commonly used or important menu items feature in the same place on every radial menu in every screen. Some menu items only feature on particular screens as they are only of importance to the task at hand. Research has shown that radial menus are easy to learn for novices and that speed increases with experience, thus meaning that the need to look down at the phone becomes almost unnecessary over time as muscle memory kicks in. The radial menu will pop up under wherever the user’s finger happens to be on the screen, though in some cases such as choosing an item in the timetable will bring up a contextually relevant radial menu to that event. Radial menus are used in choosing a destination that is known via scrolling through the list of campuses, buildings, levels and rooms.
Colour is the dominant aspect of the visual map, making it easier to merely glance at the phone to see where you are in relation to where you were and where you want to be. If the user opts for navigating via the visual map then they will find a number of features that make it easier to find where they are at every point in their journey and where they need to be. The buildings at the current location and destination and major landmarks are represented in 3D while all non-relevant information such as surrounding buildings are mere representative shapes of colour on the map. When navigating within a building, the destination is easily distinguishable by the use of vibrant contrasting colour to the surrounding areas. The route is lit up with little bright green feet that darken when that part of the route has been travelled over.
The user will always know where they need to go and where they have been at a glance and a mere touch.
These are the last of the pencil sketches I did. After this was the watercolour process and inking in some stuff with black. It may not look it but these sketches were fairly labour-intensive. The maps are not to scale though they aren’t too far away from being so. Trying to come up with slightly different yet still understandable icons is not easy so most of mine are the same as the ones we see everyday. It’s probably a good idea to use standard icons wherever possible as we are so used to them that we immediately know what they mean. Icons that you have to pause for a moment to decipher or need to have text to tell you what they are, are a nuisance. An icon should be clear and easy to understand at a glance.
Radial Menu & Icons – directions, timetable, library, back & settings
Rec Centre – start
Student Union – landmark
Murphy Building
Building up a collection of drawings needed for my Flash movie. All the images are of pencil sketches I have drawn. The interface will have a hand-finished quality to it for the styling. None of these are to the scale needed in the frames but that’s a job for Photoshop and Flash. I have turned a number of these sketches into assets using Photoshop.
I find it sometimes more helpful to write out ideas and thoughts with pencil and paper. I love the feel of pencil as it moves across the page. I feel freer to wander through ideas when I write. I feel a little stifled when I try to use the keyboard to express my ideas and so I have done a bit more of the old-fashioned of late, hence the PDFs.
So I posted these as JPGs in a recent post. In a PDF now. All earlier comments I made about colours stand. I have an idea of the colours I plan on using now and a clearer idea of where I am going. Also has a wee radial menu sketch so I could play around with icon ideas.
Handwritten scenario of a student using app to find their way. Helped me figure out the screens I might need for the Flash application, and work through my ideas.
Page-Sinclair First Year Design 