Wireframing and Prototyping

I have started creating wireframes for my application, a wireframe is a basic diagram showing how the individual elements of the interface are going to be organised, see examples below:

Wireframes_examples

Wireframing is a hugely important part of the design process, the importance of wireframing in digital design is stressed in the Smashing Magazine article “35 Excellent Wireframing Resources” by Cameron Chapman

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. ” Chapman (2009)

In this case the article talks about web design but due to its close relationship in practice, App design values wireframing in the same way, Jake Rocheleau from Speckyboy design magazine says:

“The best way to start off a mobile application is through wireframing. This is a design process where you lay out each of the app’s views in detail. This could be just a rough sketch, but many designers will spend time going that extra step.”

As I have never designed for the iPad before I thought it would be useful to look at the iOS Human Interface Guidelines to inform my wireframing decisions, this was the right step according to Apple Inc as they stress the importance device specific design:

“People appreciate iOS apps that feel as though they were designed expressly for the device. For example, when an app fits well on the device screen and responds to the gestures that people know, it provides much of the experience people are looking for. “

I would like my application to be aesthetically appropriate and effective according to the iOS guidelines, this will help my application to be approved for distribution on the App Store and hopefully it will make my application more desirable and useable.  The terms aesthetically appropriate and effective in this case relate visual and functional values as described by Apple Inc:

“Aesthetic integrity is not a measure of how beautiful an application is. It’s a measure of how well the appearance of the app integrates with its function.”

The wireframe I am creating needs to be implemented throughout my application, which is why careful consideration needs to be given at this stage, it needs to be consistent within itself and consistent  to the conventions of application design to avoid causing user confusion and frustration, Apple Inc say:

“Consistency in the interface allows people to transfer their knowledge and skills from one application to another. A consistent application is not a slavish copy of other applications. Rather, it is an application that takes advantage of the standards and paradigms people are comfortable with.”

The wireframe below is the initial one I have designed for my application, it only features the consistent elements of the application that will be featured throughout the entire application.

wireframe_01_display

I have placed the content which is the most important part of the application at the top of the screen, this fits with my common app interface design practice, Apple Inc also recommended this layout:

Put the most frequently used (usually higher level) information near the top

The navigation at the bottom of the screen thus when people are using the navigation content should not be obstructed by the users hands or arms, again this is an approach I favour and it is backed up by Apples recommendations:

 “For example, in a game, the most important action can take place in the top half of the screen. This leaves the bottom half of the screen for supplementary information and for controls users can tap without obscuring their view.

As you can see I have designed this to fit the default orientation of the iPad, but the iPad is a device that when turned can adapt its interface to take advantage of the different screen layout.  I initially planned to create my application to run in just the default view as I thought the target audience may struggle with any changes in layout due to change of orientation.  Apple Inc favour apps that adapt to orientation change and actively encourage designers to Handle Orientation Changes” they say:

People often expect to use their iOS-based devices in any orientation. You need to determine how to respond to this expectation, within the context of your app and the task it enables.

Apple Inc produce a number of different interactive devices but they stress the expectation of iPad users to be able to use apps in different orientations.

 iPad users, in particular, expect to use your app in whichever orientation they’re currently holding their device.”

They then make this point again further into their guidelines:

On iPad, strive to satisfy users’ expectations by being able to run in all orientations.”

I have also read comments in forums where people have had their applications turned down due to lack of orientation adaptability, so this left me feeling as though I may have to design for different orientations to avoid future problems.  This would mean some changes to my initial wireframe.

Apple Inc advises that:

In all orientations, maintain focus on the primary content. This is your highest priority. People use your application to view and interact with the content they care about. Altering the focus on that content in different orientations can make people feel that they’ve lost control over the application.

As I noted earlier this implies that the content should be at the top of the screen and the secondary content, in this case my navigation should be at the bottom whilst keeping consistency but due to the orientation change this would leave one of two scenarios see below:

Wireframe-scenario1

In scenario 1 the content would have to reduce in size making it harder to view and there is too much negative (unused) space, this could be all to one side or distributed as borders, I felt this would inappropriate.

Wireframe-scenario2

In scenario 2, I looked at another option which meant the content would increase in size but it would still be harder to view as the user would then have to scroll up and down to see the content, this again was something that I hoped to avoid to provide a better user experience.

I had to come up with a solution that was not going to affect the user experience in a negative way.  Apple Inc offers an idea of how this may be possible:

Consider changing how you display auxiliary information or functionality. Although you should make sure that the most important content is always in focus, you can respond to rotation by changing how you provide secondary content.”

Based upon this the solution I came up with for my application required changing the position of my navigation due to orientation change. See below:

wireframe_02_display

wireframe_02_display_landscape

This meant going against my preferred choice of navigation below content but in this case it was the least of the evils, the reason I have aligned the navigation to the left is because this is a long standing digital design convention adapted from web design, you can see this convention in the examples below:

Examples-of-Left-Aligned-App-Navigation

My solution also means the content will constantly stay the same size 768px X 768px without the need for scrolling, I have done this by using the 4:3 aspect ratio of the iPad, using 3/4 of the display which fits into either orientation for content and 1/4 for the navigation.

I created a prototype which you can see in the video below to see how this works:

As you can see no matter what the orientation of the device is, it displays one of the two views which also fits with Apple Inc’s recommendations As much as possible, your application should encourage people to interact with iPad from any side by providing a great experience in all orientations

Having to change my design idea to fit the needs of Apple’s best practices was something I expected and although I am still worried about the orientation change affecting a child’s user experience, there can be no interaction in the first place if my app is not approved for distribution.  I have tried to develop a suitable alternative that provides users with a choice so they can choose the orientation that suits them best.

My next task will be to design the shapes and sizes of the buttons for my application, as you can see by looking at the wireframes the rectangular buttons do not work well in the landscape orientation.

http://speckyboy.com/2012/02/22/tips-for-wireframing-a-usable-mobile-app-interface/

https://developer.apple.com/library/ios/#DOCUMENTATION/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html

Advertisements

2 thoughts on “Wireframing and Prototyping

  1. Really great post! I truly enjoyed reading about your wireframing process as I’m just about to begin doing the same for my own project for the mac. Did you, by chance, happen to read Jonny Ive’s recent interview in The London Evening standard? It’s a really good read if you want to check it out!

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