iplots seems like a good way to see if the navigation on a device will work, especially when it comes to designing for new devices. Although it seems to be useful I would only use it when it comes to designing new UI for iphone but I couldn't use it due to the complexity of my navigation as it is a gaming app.

UI IOS Navigation

The iphone is very restrictive, it is very small, doesn't have a keyboards and few buttons so I have to be thoughtful when it comes to navigating such a small screen. It needs a navigation that doesn't clutter up the UI.

Navigation on an iPhone generally allows you to-

• explore all of the level of the flow diagram and get to where you want to be easily
• switch between main functionality systems without loosing your place within the app
• edit and adjust info without loosing your place
• display a list of info or choices

This is a tableview controller. It uses a tab list that is scrollable. Each option provides another list once tapped. This allows for a clean design that is easy to navigate. Easy to understand as items of a similar nature are generally listed in the same category/section.

This is a tab bar controller. It is designed to save space on the screen once you choose the option to hide the main screen. Each button has a menu that pops out individually that you can hide easily.
This is an example of flattened navigation hierarchy. It is usually used in information rich apps. It works by having a single type of main view with multiple option within each of them.
The 2 app navigational systems below aren't standard navigation systems but they focus around one interaction point. The first app uses a ticker wheel that is designed by weightbot. It has a mechanical spinning wheel for selecting items.
This navigation is used mainly for musicians but is a different version of the tab controller as it is placed in the middle of the screen instead.

Navigation Inspiration

After my meeting with Wish upon a Star yesterday to discuss the final touches to the rest of the website (now that the home page has been decided upon). Help for heroes was constantly referenced in terms as navigation. It is simple and clear yet there is a lot of content to get through, as there will be in Wish upon a stars website.

http://www.helpforheroes.org.uk/

The Navigation

I like the way that the navigation works and think it will suit the Wish upon a star's website because it will make the content flow easily. The audience will have that area as a constant reference point to find information quickly and easily.

All About The Naviagtion

Having chosen a sort list final design with my client. I still felt that some alterations needed to be done, especially with the navigation to make the website more interactive. So I had the idea of using a miniature camera that pops out for the words that aren't visible to make the audience want to explore the site. Also it will fit it with the idea I have for my banner (animated camera and tripod). All of the mock ups have helped me come to the final stages of the mock-ups. The two favourites are version 1 and 5 but we have decided to go with 5 because it won't be cluttered and leaves room to experiment with flash animation in the banner.

Original badge that sparked off the idea

A drawing to simplify the lines

Bright, bold easily attracts the audience

Version 1:

• Red makes the lettering stand out. Also in the Indian culture it symbolises luck and prosperity.
• Simple navigation arrows that will move with the words to match the navigation.
• Red border to match the rest of the website.

Version 2:

• Orange lettering for a softer look.
• Simple navigation where the sections of the gallery are laid out straight away, changing colour with the page you are on.

Version 3:

• To make the design more unique I have designed miniature cameras to go at the end of the words instead of arrows. People will automatically realise it's more photos and that they are in the gallery as soon as they enter the website.
• Small icons. Are they big enough?

Version 4:

• Bigger more intricate camera. does it clutter the website and take away focus form the title and photos?

Version 5:

• Red attracts the eye. The clients prefers the red as it is bolder than the orange.
• We both like the cameras as naviagtion but I am planning to to a flash banner with a camera and tripod so it will probably make it look to cluttered and take away focus from teh photos and title.

We're Getting Some Where

Mock-up 3: I'm going to use her unique ethnic heritage of being half Indian and half Scottish as part of her identity so people will realise she has a connection to both the Asian and Western world in terms of documentary photography. I think the Indian and English title needs to be integrated more. I think the black background works well to make the photo's stand out.

Mock-up 4: I have used the Indian within the banners edges to make the page less segmented and it leads the eye to the navigation to the photo gallery. I am going to experiment with different colours to make the title 'pop' (red or green). I am going to start designing an animated banner and navigation for my interactive flash pages involving a cartoon tripod and camera.

Form doing the mock ups I need the navigation to have some interesting interaction that is simple and easy to use so I'm thinking about navigation that is coming out form the use of the photo and have a camera symbol next to it. You will only see the the text when you hover over the camera symbol. Also the photo gallery will be the home page for the site so the audience will go straight to the photos in minimal time, which will help the client grab the attention of possible 'fans,' clients etc.