iPad Design

This marks the last day of the iPad Design project!

Please use the "01-dmd-practice" filter, above, to isolate the posts from this brief.

In-App Purchase Addition

With iOS 3.0 or later, you can purchase subscriptions and extra content from within an application using your iPhone, iPad, or iPod touch. Some examples of In-App Purchases are bonus game levels/maps, additional experience points, subscriptions, and recurring services.

Source: http://support.apple.com/kb/ht4009

In order to complete an all-round product, I had to package it in such a way that further chapters in the 9/11 Commission Report could be added to the application. After some deliberation and research into exiting app's like Adobe's Photoshop touch, I decided it was the best method for curating additional content for my product.

Notes

In-App Purchase allows you to embed a store directly within your application. You implement In-App Purchase in your iOS application using the Store Kit framework. Store Kit connects to the App Store on your application's behalf to securely process payments from the user. Store Kit prompts the user to authorize the payment, then notifies your application so that it can provide items the user purchased.

Source: http://developer.apple.com/library/mac/#documentation/NetworkingInternet/Conceptual/StoreKitGuide/Introduction/Introduction.html

Devise Handouts

The goal with most surveys isn't to test the user, but to measure satisfaction about the product. I have devised a survey, below, that can be used to test my product in this way.



I used Google Doc's form creater to produce a working survey; follow the link below to see it in action!

https://docs.google.com/spreadsheet/viewform?formkey=dG10dHp5Ylc5VS1oakdWbG5DY0pBQ2c6MQ

User Testing

Neilsen

In recent years, we have seen an explosion of interest in development for mobile devices and tablets. Many companies have mobile websites and mobile applications, but how do you make sure that these applications are easy to use and satisfy your customers’ needs? The best way to do it is to test your mobile designs with real users.

Source: http://www.nngroup.com/events/tutorials/mobile_user_research.html

Heuristic Evaluation
Neilsen

Heuristic evaluation is the most popular of the usability inspection methods. Heuristic evaluation is done as a systematic inspection of a user interface design for usability. The goal of heuristic evaluation is to find the usability problems in the design so that they can be attended to as part of an iterative design process.

Source: http://www.useit.com/papers/heuristic/

Nielsen developed the heuristic criteria which user tests can test against to evaluate the performance of their interface design. They are as follows:

• Visibility of system status
• Match between system and the real world
• User control and freedom
• Consistency and standards
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognize, diagnose, and recover from errors
• Help and documentation

I since refined the heuristics based on a factor analysis of 249 usability problems [Nielsen 1994a] to derive a set of heuristics with maximum explanatory power, resulting in this revised set of heuristics [Nielsen 1994b].

Source: http://www.useit.com/papers/heuristic/heuristic_list.html

iPlayer Inspiration

The good thing about doing plenty of research is, you cover a lot of unique applications which have a solution for certain problems. The BBC iPlayer uses this view, as seen below, to organise huge amounts of data in a small window. When my lecturer, Chris, told me he wanted to see an overview of the data I was covering, I knew exactly how to achieve this.

BBC's Schedule across Channels


Click image to enlarge

Pitch Evaluation

Today I pitched my app' to lecturers Sue and Chris, also to my peers. I showed the Keynote prototype built from my storyboards and explained the interactions. I finished on a wireframe depicting a board that needed to be built.

Feedback

• Create additional 'boards to show how the chapter will end
• Storyboards must be annotated
• Add an 'overview' functionality, depicting all timelines in the viewport

Dynamic Visualisation (A.K.A. Prototype)

After some deliberation, I decided to use Keynote as my prototyping system. It supported the animation transitions which I wanted to occur, albeit on a basic scale. After a lot of reading, I found out that big names in the app' design and development industry have also used Keynote to prototype their app's.

It means taking your storyboards from Photoshop and planting them on a 1024 x 768 Keynote canvas, then using click events to page from one screen to the next using the chosen Apple transition.

pinch/zoom

We’ve just recently launched the BBC Global iPlayer for iPad project, and wanted to be open about some of the various prototyping tools we used to get user feedback and stakeholder reviews.

For this project we experimented with:

• Keynote prototypes
• Cocoa prototypes
• iPad photo gallery

We were testing both wireframes and more high fidelity visual designs within Keynote.

Source: http://pinchzoom.com/posts/mobile-prototypes-for-usability-testing/

Storyboards

Every wireframe was turned into a storyboard using Photoshop. Each PSD was laid out using a consistent grid, which used the Rule of Thirds and elements were built upon it.


Click image to enlarge

I have plenty of experience with Photoshop, which is why I chose to use this method to create high-fidelity graphics of my application.

Typeface

A brief post on my choice of copy font and sizing

Oliver Reichenstein

[16 pixels] is not big. It’s the text size browsers display by default. It’s the text size browsers were intended to display… It looks big at first, but once you use it you quickly realize why all browser makers chose this as the default text size.

Source: http://www.informationarchitects.jp/en/100e2r/

I have used 16pt body for my application - with testing, this was the most readable size without it being too large.

Typeface

I chose to use serif type for content because I wanted certain elements of my app' to feel like they'd come from a book. Thanks to Matthew Carter and Tom Rickner, there is a beautiful serif, Georgia, designed specifically for viewing on screen.

The typefaces you normally read have been designed to be typeset digitally and printed on paper. But as more people read more type off computer screens, they're unfortunately reading a type designed in another era for another medium. That's why type on screen can look pathetic (especially so-called "italics" on the Mac) and is often painful to read.

Luckily, a company with the deepest pockets in the computer world thought deeply enough to see what a problem this was and hired a type designer with years of experience designing legible type under difficult circumstances, including Bell Centennial for phone books, and ITC Charter for low-res printed output.

Source: http://www.will-harris.com/verdana-georgia.htm

Cogapp Visit

Cogapp

Cogapp serves clients in the museums, culture, media, sports, charity, government and commercial sectors. We operate from a headquarters in Brighton and an office in New York.

Founded in 1985, we have worked with almost every digital media technology from the floppy disk to the iPad. Current projects include websites, interactive installations and mobile apps.

Source: http://www.cogapp.com/about-us

I left Cogapp with four pages full of notes! It's not every day I'm given an opportunity like that. The staff, a conglomorate of developers and designers, were able to answer just about every question we, as students, had to ask. I was enlightened to see the length that Cogapp went to, to User Test and just how crucial this process was to them in creating top products - they demoed several. Cogapp highlighted their tried-and-tested channels of development in a number of tight presentations, and for that I'll be forever greatful.

Look 'n' Feel

Below, I've documented key research, which has helped me build the aesthetic of my piece.

Of all the designs submitted, we have found that "Reflecting Absence" by Michael Arad, in concert with landscape architect Peter Walker, fulfills most eloquently the daunting but absolutely necessary demands of this memorial. In its powerful, yet simple articulation of the footprints of the Twin Towers, "Reflecting Absence" has made the voids left by the destruction the primary symbols of our loss. By allowing absence to speak for itself, the designers have made the power of these empty footprints the memorial. At its core, this memorial is anchored deeply in the actual events it commemorates-connecting us to the towers' destruction, and more important, to all the lives lost on that day…

Source: http://www.911memorial.org/design-competition


Click image to enlarge.

Source: http://timeline.national911memorial.org

Memorial Tour

Story Make-Up

Take an existing short story and adapt it to be interactive. This can be aimed at any target audience and can be fictional or non-fictional.

Source: Assignment Brief

I intend on using "The 9-11 Commission Report", which is provided in digital (PDF) format by The U.S. Government Printing Office.

The Commission’s Final Report provides a full and complete account of the circumstances surrounding the September 11th, 2001, terrorist attacks, including preparedness for and the immediate response to the attacks. It also includes recommendations designed to guard against future attacks.

Source: http://www.gpoaccess.gov/911/

For the purpose of this assignment, I am telling the story of American Airline Flight 11 using chapter one of this report.

1. "We Have Some Planes"
1.1 Inside the Four Flights
1.2 Improvising a Homeland Defense
1.3 National Crisis Management

Source: http://www.gpoaccess.gov/911/pdf/sec1.pdf

Subject Matter

9/11

The Flights

American Airlines Flight 11

Left Boston’s Logan Airport with a crew of 11 and 76 passengers, not including five hijackers. The hijackers flew the plane into the North Tower of the World Trade Center.

United Airlines Flight 175

Left Logan with a crew of nine and 51 passengers, not including five hijackers. The hijackers flew the plane into the South Tower of the World Trade Center.

American Airlines Flight 77

Left Washington Dulles International Airport in Northern Virginia with a crew of six and 53 passengers, not including five hijackers. The hijackers flew the plane into the Pentagon.

United Airlines Flight 93

Left Newark, New Jersey, with a crew of seven and 33 passengers, not including four hijackers. The hijackers crashed the plane into the ground near Shanksville, Pennsylvania, after the passengers revolted.

The Events

• 07:59 a.m. American Airlines Flight 11, a Boeing 767, departs Boston's Logan Airport bound for Los Angeles with 81 passengers and crew of 11.
• 08:14 a.m. United Airlines Flight 175, a Boeing 767, also departs Boston for Los Angeles with 56 passengers and crew of nine.
• 08:20 a.m. American Airlines Flight 77, a Boeing 757, departs Washington's Dulles Airport for Los Angeles with 58 passengers and crew of six.
• 08:42 a.m. United Airlines Flight 93, a Boeing 757, leaves Newark for San Francisco with 37 passengers and crew of seven.
• 08:46 a.m. American Airlines Flight 11 crashes into the North Tower of the World Trade Center.
• 09:03 a.m. United Airlines Flight 175 slams into the South Tower of the World Trade Center.
• 09:37 a.m. American Airlines Flight 77 hits the Pentagon. Hijacked from Dulles, Flight 77 slams into the West side of the Pentagon.
• 09:59 a.m. The South Tower collapses.
• 10:03 a.m. United Airlines Flight 93 crashes in Shanksville, Pennsylvania, 80 miles southeast of Pittsburgh.
• 10:28 a.m. The North Tower collapses.

All of the information in this post has been sourced from: http://www.fbi.gov/about-us/ten-years-after-the-fbi-since-9-11/the-flights/

Target Audience

A Case

A perfect example is our app, Doodle Bright. When the idea originated, the iPad had not even launched – I was using a wooden prototype to draw and test ideas. The problem is we identified our initial target audience as previous Lite Brite users, a novelty, retro app that adults who enjoyed the original toy would buy. Right, but mostly WRONG. Those people were buying the app, but they were buying it for their kids! If we had taken a week or two to poll the idea for the true target audience we would have very quickly narrowed down a very concise and targeted plan around:

• Price
• Upsell
• Design
• Interaction
• Marketing

Notice how knowing information about your audience touches many pieces of the product development? It doesn’t just impact marketing. It it a critical piece of the entire process.

Source: http://mobile.tutsplus.com/tutorials/mobile-design-tutorials/iphone-design-101-understanding-your-apps-target-audience/

My Case

Using a number of questions found from the above source, I have answered them to help build a case for my target audience. Doing will help me target the app' I'm designing at the right people.

Are they male/female? Male
How old are they? 20-50
Where do they live? US, UK and other English spoken countries
Do they have children? They could have
Are they married? They could be
Where are they when they use the app? At home
Do they love a competitive app? Why? -
What do they do? Student, Businessperson
What do they have in common? An interest in the world
Why are they interested in the topic? Because it's a world changing topic
Who are they trying to impress? Other intellectuals, perhaps
Who impresses them? Engineers, Doctors and Scientists
What are their biggest fears? Being an entity in one of these stories
What are their biggest hopes? To have their questions answered
What Internet tools do they use most every day? News
What Internet tools do they not use ever? Games
What drives my target to make decisions? The possibility of change
Can they afford my app? Yes
Can I reach them with my app? Are they accessible? Yes
Are there enough people in your target to be profitable? Yes
How does your idea resonate with your audience on an emotional level? Definately
Do you need to break your target up into niches? No, but perhaps two; Consipracists and Followers

The Idea

My idea has gone through countless iterations until now; this post will describe and finalise it.

9/11

As stories go, 9/11 is one of the biggest around. I shall find a well-documented, official version of it and transform the beginning into an interactive chapter.

My idea revolves around the ability to move anywhere in time and across time in parallel. For example, I knew from talks, that non-linearity was an interesting concept which can enhance a users experience; Kerry from Littleloud spoke about this.

The main choice for picking 9/11 was due to my interest in exploring a non-linear storyline. I want the user to be able to jump from one aeroplane to another and be able to find out what's happening on it at the same place in time.

Additionally, I shall use embedded media in the form of photographs, video clips and audio (vocal material) to further improve interactivity and emotional immersion.

The concept is based around multiple timelines, which user will instantly know how to manipulate - time is understood from a young age. I will deepen this argument in my next post about audience.

QR Tech' Increases Sales by 130%!

I thought this deserved a spot on my blog.

QR codes have been around for a while now, but I’ve yet to see a great example of them in the wild. They mostly seem a marketing tool to send brochures or 20c off coupons. Tesco Korea have just experimented with a massive QR code installation in the subway. They’ve mimicked exact grocery store shelves with QR codes users can scan, so as they wait for the subway users can order their groceries and get them delivered to their house while they’re on the train.

The cynic in me wonders why they didn’t just create an app or a mobile website, but users seemed to really like the visual layout like a store, and changing waiting time (at the station) to useful shopping time.

It’s been incredible effective, with online sales increasing by 130%.

Source: http://pinchzoom.com/posts/a-useful-example-of-qr-codes/

Technical Constraints

As with any platform, there are always constraints - with the iPad 2 there are some obvious differences in comparison to desktop devices.

Screen and Input

In my opinion, this is the most important of all of the technical constraints - it should be the first consideration when designing an application. The 1024 x 768 screen resolution cannot be compared to a desktop monitor. At the same time, input must be made through the screen as there isn't an external keyboard or mouse - making further complications. Buttons require additional screen real estate so that they can be pushed with a fingertip.

Storage

The cheaper of the three iPad's has a 16GB's of storage space. This is one of the most important contraints to consider when designing an app' - people who've little space remaining on their device will scrutinise applications which require a lot more closely.

Power

The iPad has a 25 w·h rechargeable lithium-ion polymer battery[1] that lasts 10 hours, like the original iPad. It is charged via USB or included 10 W, 2 A power adapter.

Battery power doesn't last indefinately, and without an external power source, users may have limited time using your application.

Processing

The iPad 2 added a dual core Apple A5 processor that Apple claims doubles processing speed and has graphics processing that is up to nine times faster than the previous iPad.

Even considering the above, there is a limit to the processing power of the A5 CPU and this should be considered when developing CPU intensive applications.

Connectivity

The iPad supports WiFi and on the 3G model, 3G also - the restraints these technologies incur must be considered. WiFi has limited range and bandwidth. 3G has limited reception, and bandwidth, which is also expensive. App's will generally have limited or no connectivity on the iPad.

Some information from: http://en.wikipedia.org/wiki/IPad_2#Hardware

BBC Global iPlayer on iPad

The app was designed with a lot of love by the team at pinch/zoom. We had an incredible time working with team at BBC Worldwide and Creative Good We are so excited that our hard fought design is finally in the hands of users.

Source: http://pinchzoom.com/posts/its-finally-here-the-global-bbc-iplayer-for-ipad/

An overview of the design process and findings for the Global BBC iPlayer for iPad.


Source: http://speakerdeck.com/u/fling/p/zoom

Expect more about this find in a following post.

Accessibility

It is important to consider accessibility when designing a user oriented product so that it reaches the largest possible audience.

Features

Basic accessibility support, which will be present in any modern operating system without additional software. This includes features like:

• text zoom,
• screen zoom,
• cursor magnification and highlighting,
• on-screen keyboard support,
• text-to-speech for alerts and other critical system events,
• spatial and/or monaural audio,
• and global white-on-black and/or grayscale display modes.

Mac OS X, Windows and most (all?) of the various contemporary Linux distributions support the majority of these features by default.

Source: http://mattgemmell.com/2010/12/19/accessibility-for-iphone-and-ipad-apps/

User Experience (UX)

Fig 1. Peter Morville’s “Facets of User Experience.”

As illustrated by the image above, User Experience (or UX) is a multi-facetted subject. My previous post held research into Usability; a piece of the UX honeycomb! In this post, I'll list some key UX research into models aiding us in understanding how to create experiences for the user.

Hassenzahl's Model

http://books.google.co.uk/books?id=QKYPdcI-av8C&lpg=PA31&ots=fhpyp6-jRi&dq=Hassenzahls+model&hl=no&pg=PA31&redir_esc=y#v=onepage&q&f=false

This model assumes that each user assigns some attributes to a product or service when using it. As we will see, these attributes are different for each individual user. UX is the consequences of these attributes plus the situation in which the product is used.

The attributes can all be grouped into four main categories: manipulation, identification, stimulation and evocation. These categories can, on a higher level, be grouped into pragmatic and hedonic attributes. Whereas the pragmatic attributes relate to the practical usage and functions of the product, the hedonic attributes relate to the user’s psychological well-being. Understanding the divide can help us to understand how to design products with respect to UX, and the split also clarifies why UX itself cannot be designed.

Source: http://uxdesign.smashingmagazine.com/2011/03/15/why-user-experience-cannot-be-designed/

Morville's Model

Refer to Fig 1.

Here, UX is split into useful, usable, desirable, findable, accessible, credible and valuable. As you may have noticed, these facets fit Hassenzahl’s model pretty well: useful, usable, findable, credible and accessible could all be considered as pragmatic (i.e. utilitarian and usability-related) qualities, while desirable and valuable would qualify as hedonic (well-being-related) qualities.

Source: http://uxdesign.smashingmagazine.com/2011/03/15/why-user-experience-cannot-be-designed/