While researching for an upcoming talk on HTML5 and Drupal, I came across Thee Moste Excellente Slideshow “Six Rules to Designing Amazing Mobile Apps,” by Brian Fling. Now (Gentle Reader) You Could Hastily take Thineself over to Thee Slideshow; Indeed, I would Heartily Recommend This Course of Action; however, This Show has 280 Slides. If Youe are Lacking in Tyme but Desirous, Still, to Learn from the Wondrous Mind of Mr. Fling, Pray Thee, Read Through My Quick Notes (and Be Most Astounded).

Master Fling's Rules

  1. UNDERSTAND THEE MEDIUM: how do mobile devices differ from each other, and from other communication mediums?
  2. GET THY DATA DIALED: What is “data”? Especially for mobile, it IS content, and you may not be developing the data-content your app or web site will use.
  3. BEE A MASTER OF CONTEXTE: “Dive into context.” It is key to your app's design.
  4. DESIGNE FOR INTERACTION: Now's the time to dust off your Psych 101 course notes.
  5. FOCUS ON THEE DETAILS: In two words, “small screens”.
  6. ALLOW AMPLE TYME: “It takes a lot longer than you might think”

1. Understand Thee Medium

Next Step is not Mobile but “Ubiquity”

See that device in your hand? That is not what you are designing for, Master Fling says. What you are designing for is the experience: the space – and moment - in which the device user finds themselves, when they reach for their phone, tablet, netbook, laptop or the “on” switch of their desktop computer. He reminds us that “mobile users have sophisticated spatial orientation”. The mobile phone user, for instance, May be in a Large Barn of Shops, Or in a Carriage; While the Desktop User Most Assuredly is an Office, Basement or Sleeping Chamber.

Experience Design

Mobile design is an entirely new breed of design,” says Fling. Mobile design, this writer notes, is a combination of info and graphic design, industrial design (in that you are designing and laying out controls for an object – that may include buttons built into the object or ones you add yourself via the object's screen), may involve mapping and environment inventory, animation, user-input, audio and/or video, and storytelling - all created by writing (a computer language): experience design.

Hex-Grid

Fling introduces the concept of “Hex-Grid”. The hex-grid is a design system which works vertically as well as horizontally. We are all aware of Thee Phone and Tablet User's Abilitie to turn their Units Sideways for Viewing? The hex-grid takes into account this horizontal grid, as well as the vertical one.

Costs

Master Fling's discussion of costs is both eye-opening and enlightening: “adding more devices increases cost of mobile development exponentially'. “A simple app could cost $32,639 and take 2 months to create”; however, a complex app could cost “more than $163,200 and take 6 months to (create)." Fling's breakdown:

  • 2 months to create a simple application = roughly 2 weeks to create a feature.
  • If a simple mobile app has 4 features, that means each feature costs about $8,160.

For a 12 feature app, 2 weeks per feature to build; but the price jumps to about $13,600 per feature. Further, "this price multiplies if you... want to make (your app) available on more than one operating system."

Here's the formulas for Fling's figures:

  • "task x time(complexity x effort) x rate = price"
  • "features x time(platform x experience) x rate = price"

Tools and Morsels for Thee Brain

  • Media queries are the “single most important technique for creating consistent interfaces across inconsistent devices."
  • "HTML5 has so much momentum it could defeat the native app in as little as two years."
  • "A great mobile strategy creates more questions than it provides answers"
  • "There is no such thing as magic bullets"

Upon Phones and Tablets

  • "Think of your app as a great book, with a clear beginning, middle and end."
  • "Tablets are about focus, consumption, simple tasks and portability."
  • "Build a website that provides the best possible experience to the context:
    • "ipad: magazine”
    • iphone: web app”
    • desktop: website"
  • Tablet/phone swipe directionsThings like the direction users swipe on a mobile device are integral to how you design.

Fling ends by providing the mobile designer with a couple guides for creating an internet presence that flows seamlessly across devices:

A Multi-Device Web Site Design Recipe

  • 1x HTML5 Markup
  • 1x Hexadecimal CSS Framework
  • 1x Typography Framework
  • 3x Javascript Frameworks
  • 12x Media-Query-based Layouts

A Design Considerations List  

  • Platform
  • Aesthetic    
  • Many Resolutions
  • Pixels per inch
  • Orientation    
  • Design Grids  
  • Perspective
  • Dimension
  • Interactions    
  • Motion    
  • Transitions    
  • Colour    
  • Typography  
  • Iconography

2. GET THY DATA DIALED

Data is content, especially on a mobile device where you will want to provide useful, context-specific content to your users; however, in many cases, you will not be in control of the data your app will be using and displaying. You will however, be responsible for that data if you want your app to be used and valued. According to Fling, "1 out of 3 projects go sideways because of BAD DATA".

As an example of an organization that handles data coming from a variety of sources, that is then published across a variety of platforms and sources, Fling presents us with National Public Radio's "COPE: Create Once, Publish Everywhere” content management system. (Click image to enlarge.)NPR's Content Management System

 

 

 

 

 

 

For an indepth review of this system, visit: http://blog.programmableweb.com/2009/10/13/cope-create-once-publish-everywhere.

"A new form of Web content that is meaningful to computers will unleash a revolution of new possibilities," Fling admonishes.

3. BEE A MASTER OF CONTEXTE

Context

CONTEXT: The circumstances that form the setting for an event, statement, or idea, and in terms of which it can be fully understood and assessed."

"Context adds meaning to data."

Types of Context:

  • Big Ideas
  • Location
  • Device
  • State of Mind

Context Connections

(Click images to enlarge; image, top-left by davidcrow, http://flickr.com/photos/davidcrow/1224270527)

4. DESIGNE FOR INTERACTION

Skeuomorph

"Great interactions invoke feelings," instructs Fling.

In aid of interaction, Fling shares with us the “skeuomorph.” A skeuomorph is a design cue to help a user “get” a product. Music software with knobs and sliders is a good example: the knobs and sliders may not be the most practical controls to use on a computer screen, but because they look like the old analog versions of themselves, users immediately know what to do, and feel comfortable using the digital equipment. Fake “pages” on an e-reader and online newspapers laid out to look like paper newspapers are also good examples of skeuomorphs.

"Unlike personality, attitudes are expected to change as a function of experience." - Fling

5. FOCUS ON THEE DETAILS

"Design @ 1600%,” Fling says.

Iphone 4 GUI elements

An Iphone 4 GUI Photoshop template (click to enlarge):

Mobile interactive controls choices include:

"6x Navigation and Toolbars
3x Alerts and Modals
26x Types of Views
15x View Controls
13x Application Controls
9x Animations and Transitions"

6. ALLOW AMPLE TYME

"There are few tools or processes that suit mobile," Fling asserts. Plan accordingly.

MORE

If my Quick Guide has Ignited in Youe the Desire to Hear and Read More from Master Brian Fling, Please Find his Book, Mobile Design and Development, Here: http://oreilly.com/catalog/9780596155452.

His Blog, Including Video Presentations, Can Be Found at His Company's Web Site, Here: http://pinchzoom.com/fling.