Practical Magic: Designing for Mobile
The challenge of designing for mobile is two-fold. The mobile is a very practical object and good design for needs to be consistent and clear-minded. But it’s also a wondrous object. It sees, hears, thinks. It contains magic. If we use our imagination, there is almost no limit to what it can be.
Practical design principals are everywhere in nature and traditional ways of work. This shrimp farm is protected by orderly flags against birds. How simple, how practical!
Our way of solving design problem is from a modernist tradition. The idea underpinning modernist approach can be boiled down to form follows function. For modernist in graphic design and architecture, this meant getting rid of ornamentation and striping form down to what is required for a building or a page layout to perform its basic function Once the ornaments are striped, what is left is the grid. A structure of orderly boxes, for architects, defining a space for modern life. For graphic designers, housing words and images into a grid. In both cases, the grid allows the content to be king.
A visual progression of the grid — from graphic design to architecture and the now, mobile.
In terms of Apple’s iOS Human Interface Guidelines, this design principal is described as:
Deference — Where content and design never compete.
The design is minimal and the content is clearly represented in the foreground.
Clarity — Legibility is crucial, icons are precise, adornments are subtle, and a heighten focus on functionality.
Another minimal design where you can clearly see what this is — a list, and its style creates allows many different gestures to be incorporated to fulfil the required functionality.
Hierarchy — Gives contrast and articulates difference between content.
Different size elements and intensity of colour give hierarchy to design.
Convention — Works within familiarity so there is no need to re-educate.
The app layout reflects the real-life object we see around us. It is also a perfect example for my next point, consistency: All the interaction are denoted in red; The navbar and the tabbar are styled the same.
Consistency — Style of typography and placement of objects reassure the user what the app is doing.
Consistency happens not only within an app but also across platforms. Apple obviously liked what Yahoo! had done to the point where that they incorporate a very similar design to their new iOS.
These are some of the many design principals at work.
Our phones are an amazing object because it does so much. It listens, talks, tells you where you are, when the trams is arriving, what Stephen Fry thinks of his scrambled eggs.
As early as the 40s, science fiction writers were fantasising an all in one device that shoots lasers, telecommunicates, navigates, reads minds, and captures images. But this fantasy is even older then that, the all in one device is another way to describe the magic wand.
This awesome thing doesn’t just do things and make our lives easier but it changes the way we experience the world.
The medium is the message
The rock-star theorist of the 60s, Marshall McLuhan described the relationship between us and our devices with the phrase, “the medium is the message”. What he meant by this is that the means by which we communicate are as important as what we communicate.
This point is easily illustrated with some comparisons:
Twitter vs Tome
Take a sentence from Homer’s Iliad in on a page in a book. That’s one experience. But if you were to receive it as a tweet, it’s a completely different experience, “Holy shit look what Homer tweeted”.
Facebook Wall vs Toilet Wall
Reading about anal sex and extremist politics on a toilet wall is one experience. Reading about anal sex and extremist politics on my mum’s wall is a different experience.
Twitter is about nowness, time, and Facebook is about self, and identity.
Not only does our phone contains all these different functions, it contains all these different ways of experiencing and communicating.
Another clever thing Marshall McLuhan said is “All mediums contain other mediums”. Books contain speech. Cinema contains photography. This especially applies to mobile devices. They contain literature, map, voice, cinema, photography, but they also contain other mediums in subtle ways.
Think about the gestures we use. Swiping is intuitive because we make that same gesture when we flick through a book. A tab makes sense because we know how to push a button. Mobile has even help revived an aspect of an ancient medium. Most of us have never held a scroll but yet scrolling is an ubiquitous gesture on mobile and on the internet.
A mobile device contains so much — all of the magical stuff of being culture making humans: who we used to be, who we aspired to be, and all of our different ways of being. But when the practical and magical are combined, a mobile device contains who we can become.
Practical magic in action
DDB Group Singapore for Starhub, Third Eye
The app uses crowdsourcing to assist blind people. It is immensely practical and what it gives to the blind is truly magical.
Ogilvy Paris for Scrabble, Scrabble Wi-Fi
The app make convientional logging in for Wi-Fi fun. The better you play that more data you get. Clever!
DoReMIR Music Research AB, ScoreCleaner
The practical magic of this app is its ability to record and transcribe your singing into notation.