Tuesday, 22 October 2013

iOS Design Guidelines


iOS 7 General Guidelines

iOS 7 is the latest version of Apple's mobile operating system and is found on both the iPhone and iPad. Apple are strongly urging designers and developers to tailor apps to the aesthetic and functional nature of this new update, therefore I am going to try to adhere to these guidelines. These guidelines form a 'good practice' guide to app design, so I will pay particular attention to these points during the design stage. 


Below are some of the more relevant areas I have identified from iOS 7 Design Guidelines (Apple)
 

 





 







___________________________________________________________________________

iOS Technical Specifications

The information below is taken from the iOS Human Interface Guidelines (Apple) and details some of the technical specifications that need to be considered when designing an app for iOS.




 
___________________________________________________________________________


The below images and information are taken from iOS7 'Cheat Sheet'



 







App Icon Template

Free Tab Bar Icons

Other useful information

Research on Target Audience

iPad Users
It is important to bear in mind that my app is only going to be available to download through an iPad, therefore it is useful to analyse who the primary users of iPads are and what they actually use them for.

Six Scenarios where the iPad is Trouncing the PC
Who will buy the iPad 3?



This information provides a good overview of the demographic that the iPad is most appealing to. Specifically it is clear that the majority of iPad users fall between the ages of 18 - 54 which mirrors the proposed target audience I identified in my app treatment. It is also evident that iPad users generally have a higher household income than smartphone or kindle owners, many downloading paid apps. This suggests that I could potentially charge users to download my app, as long as it is appealing to the target user group. 

One of the surveys revealed that many iPad users abandon apps after they download them. I think one way of preventing this would be to integrate the facility for users to upload their own content and personalise their profiles (creating their own timelines of both native and personal assets). Social networking apps are successful because they facilitate an on-going dialogue between the user and their network of friends - If my app contains a 'social' element I think that it is less likely that users would keep using the app after the initial download.

My research has shown that social networking is one of the main activities associated with iPad use. From a design and usability perspective I think it will therefore be sensible to ensure that the app looks and feels like a social networking app.

Social Media Users

Social Networking Statistics

Idea Development - 'The Year I Was Born'


To help identify the full scale of this idea I have written an App Definition Statement (as recommended in Apple's iOS guidelines) which outlines the purpose and functionality of the app:
___________________________________________________________________________

The Year I Was Born
An Interactive iPad app

Our lives as stories
With the proliferation of social networking and ubiquitous computing we are increasingly broadcasting our personal narratives in cyber space, thus creating digital records of our life stories. But these stories are only limited to the time in which we first encountered these platforms of self-representation, and many of us do not have an idea of where our stories began…

What if there was a way to reconstruct the first chapter of our life story and allow people to re-live some of the key events from their birth year? What if we could digitize our first-year photographs and preserve these important memories forever? What if all of this could be achieved using an iPad app?

The Year I Was Born
This interactive iPad app allows the user to access a wide range of content from the year of their birth, including major news stories, fashion trends, technological breakthroughs, music and film releases. The media-rich interface, organised as a navigable timeline, enables the user to experience the story of the year of their birth, contextualizing the beginning of their life-story with mainstream cultural events of the time.

Selecting a year
The main menu on opening the app consists of a chronological list of years arranged in a bar horizontally across the top of the screen. The user can scroll through this list until they reach the year of their birth. Once the relevant year has been selected, a secondary menu will appear giving options for which categories of content is to be included on the timeline.

Applying content filters
The categories can be broadened or condensed using filters, which limit the types of content that are displayed in the timeline. For example, if a user is particularly interested in what songs were released the year they were born they can de-select all other categories so that only the ‘music’ option is checked. This will restrict the timeline to display content relevant to this category. At any time, if a user wishes to add more categories they can do so by selecting the relevant options and the content on the timeline will be updated accordingly.

Categories to be included are: World Events, Local Events, Sport, Music, Movies, Literature, Art, Fashion, Technology and Celebrity.

Timeline assets
Assets on the timeline consist of videos, photographs, text and sound files relating to the categories available in the selected year. The user has control over which assets they view/experience in full and which they pass by as they navigate the timeline. The experience can be personalised by ‘favouriting’ individual content and saving it to the users own profile, in effect creating a sub-timeline of chosen assets. This will appear in a similar layout to Facebook’s timeline, and ultimately users will be able to integrate this with other social networking profiles.

Adding personal assets
Users have the option to upload their own assets to their personal timelines. These can be in the form of family photographs, film footage, newspaper announcements; anything that is related to the year they were born. They then have the option to publish this content to the main timeline so that it is viewable by other users (however, like all other content this will have a category assigned to it on the menu so that users can choose whether they see personal assets on the main timeline).

Navigation controls
Navigating the app relies primarily on the touchscreen technology of the iPad. Users can scroll up and down the timeline until they come across an asset that interests them. To make an asset occupy the whole screen the user needs to drag the item so that it is positioned in the centre of the timeline. Once it is in the right position it will automatically enter full-screen mode. To return back to the timeline the user just needs to swipe up or down on the screen, and the asset will return to its usual size (and place) on the timeline. To ‘favourite’ an item (which saves it to the users personal timeline) the user double-taps the relevant asset on the timeline.

The Target Audience
Initially it would seem that the target audience for my app is very broad - in a literal sense it is an idea that could appeal to everyone. We were all born and to some extent have a shared interest in what life was like in the particular year of our birth. I think it is less appealing to children and adolescents, as younger people tend to have more of an interest in what is happening now. Therefore I would suggest that the target age for users of my app is males and females aged 16+, specifically from a middle to upper class upbringing (indicative of them being able to afford an iPad) with a tendency to use social networking during their leisure time.
___________________________________________________________________________

Project Planning

Project Overview 
These are the main elements I have identified that require specific deadlines. 
 
1. Planning / Research
Hand-in deadline
Complete
Decide on final idea for narrative
10/10/13
 
Research existing apps relevant to chosen idea
24/10/13
 
Research target audience – specific to app ‘genre’ and iPad users in general
24/10/13
  
Look into iOS guidelines
24/10/13
  
Consider usability and accessibility features
24/10/13
 
Produce a wireframe showing the basic layout of each page
24/10/13
 
Produce a flow diagram detailing the navigation path of the app
24/10/13
 
Assemble and organise all assets
24/10/13
 

2. Storyboards
Hand-in deadline
Complete



Produce detailed storyboards in pdf form showing the layout, content and interactive elements on each page
14/11/13

3. Testing
Hand-in deadline

Send questionnaire of app concept to target audience for feedback
24/10/13
 
Send design options to target audience for feedback
31/10/13
Send storyboards to target audience for feedback
07/11/13

4. Dynamic Visualisation
Hand-in deadline

Storyboard dynamic visualisation
27/11/13
Produce dynamic visualization showing how the app will work
05/12/13


Weekly Tasks
The below tasks also include cultural and critical readings to allow me to allot sufficient time for all of the course-based activities I have to complete.

Week Commencing 30/09

Read Keen paper

Annotate both papers

Fill out reading logs & write précis for Keen paper

Reading for presentation

Reading logs for presentation

Prepare PowerPoint presentation

Come up with initial ideas for storytelling app

________________________________________________________________________


Week Commencing 07/10

Develop ideas for storytelling app

Look for examples of relevant existing apps

Finish PowerPoint presentation

Research iOS conventions

Review existing apps

Decide on final idea

Type up treatment/proposal for final idea

Read 'Transmedia' texts

Fill out reading logs

Start sketching flow chart for app - work out navigation options

Research target audience

Scan personal assets (ready for storyboarding)

________________________________________________________________________


Week Commencing 14/10 
 
Sketch initial wireframe (layout of app)

Look for personal content to be used in storyboards

Read 'Social Media' texts

Fill out reading logs

Write up questionnaire for target audience

Send questionnaire to target audience

Continue research


________________________________________________________________________


Week Commencing 21/10

Produce final flow chart

Type up results of questionnaire

Adapt concept if necessary following questionnaire results

Produce final wireframe for each screen

'Look and feel' considerations

Brainstorm different name options 

Select a final name for app

________________________________________________________________________


Week Commencing 28/10

Start design stage - logo, category icons, colour schemes, timeline

Send layout options to target audience - I decided that it would be better to send the story boards to the target audience, as there will be explanatory text to show the interactivity and navigation options.

Readings

Reading logs

Research technical issues

Finish Designs  


________________________________________________________________________


Week Commencing 4/11


Start story boarding


Readings

Reading logs

Attend UX and Usability workshops in Brighton

Type up notes from Brighton trip

Compile feedback from target audience

________________________________________________________________________


Week Commencing 11/11
 
Finish storyboards 
Readings

Reading logs

Film green screen stuff for iPad hand gestures

Research green screen techniques with After Effects
               

________________________________________________________________________


Week Commencing 18/11

Storyboards for dynamic visualisation - These will be based on the main storyboards I produced
 
Start working on dynamic visualisation in After Effects 
 
Readings
 
Reading logs 


________________________________________________________________________


Week Commencing 25/11

Present storyboards and dynamic visualisation for group crit 
 
Write script for voice-over
 
Source appropriate music for video
 
Record voice-over
 
Import VO and music into Premiere Pro 
 
Readings
 
Reading logs