Practical Magic: Designing for Mobile

Alexander Calder, Rouge triompant
Yes, dear reader, it is a different kind of 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.

Robert B. Haas, Guayaquil, Ecuador

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!

Eleanor Grosch, Untitled
Did form come first or function?

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.

The graphic design grid, popularised by Josef Müller-Brockmann
Ludwig Mies van der Rohe, Seagram Building on Park Avenue, New York
Windows 8 interface on mobile

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.

Hollr Inc, Solar

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.

Realmac Software, Clear

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.

runtastic GmbH, runtastic

Different size elements and intensity of colour give hierarchy to design.

Convention — Works within familiarity so there is no need to re-educate.

Apple Inc, Calendar

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.

Yahoo! Inc, Yahoo! Weather; Apple, Weather

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.

Stephen Hillenburg, SpongeBob SquarePants

Magic

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.

J. K. Rowling, Dumbledore of Harry Potter

This awesome thing doesn’t just do things and make our lives easier but it changes the way we experience the world.

Source: University of St Michael’s College
This is a brilliant photo because Marshall McLuhan is in the medium

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:

Matt Groening, Homer of The Simpsons

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”.

Source: ALS With Courage

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.

Babushka, one of many nested medium

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.

Gabriele Meldaikyte, Flick of Multi-Touch Gestures
Gabriele Meldaikyte, Tab of Multi-Touch Gestures

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.

Anish Kapoor, Monumenta at the Grand Palais, Paris, 2011
A sculpture that is larger than life

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.

Like what you read? Give Wendy Cooper a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.