sourjayne.com → blog

Link: Crafting Subtle & Realistic User Interfaces — Flyosity: Mac & iPhone Interface Design →

February 16th, 2010 1 note

My non-designer friends might find this article insightful as far as understanding just how crazy we designer-types are. Yes, we think about these things in great detail. (Love that diagram of a slightly 3D button viewed from the side!) Yes, it’s very subtle. Yes, it sometimes drives us insane. :)

Link: LukeW | iPad Apps: Physicality and Heightened Realism →

February 4th, 2010 1 note

Luke W continues the discussion of the iPad’s interface guidelines and heightened realism, with some nice side-by-side examples of the real-life things that the iPad digitizes.

I think this heightened realism on the iPad is a reflection of how new it is. Like the early computer interface using real life metaphors of the desktop to help people understand how to use it, the iPad places a leather-textured flap on the left pane of the notepad so you understand how the sectioned interface works. The page curl and flip animation helps people understand how to use the touch screen interface to “turn the page”, by reacting to a gesture we would use on a similar “interface” (made of bound paper) in real life.

I believe, as touch screen interfaces become more common, this realism stuff will be scaled back. We can reference real life things, but keep the reference light, adding beauty but not bloat.

There is a period of learning where the interface is allowed to be a little overbearing. This stuff is training wheels. It makes the interface a little bulky and slower moving, in a way, and that’s okay for now, for the iPad.

I don’t believe the future will be made up of digital interfaces that look and act exactly like their physical counterparts. How limiting that would be!

Go easy on the “page flip” animations, though

February 3rd, 2010 25 notes

A couple days before the iPad was announced, I was sitting here thinking how bored I am with interfaces that pretend they’re a book, complete with “page flip” animations.

Remember the old Photoshop “page curl” technique? (You can still find tutorials. I’m frightened.)

We know this is on a screen, right? That we’re not limited by the boundaries of a physical sheet of paper, that we don’t need to pick up a piece of paper and flip it over to continue reading content on a screen?

I came across a quote linked in a friend’s blog:

The desktop metaphor was the right interface when no one knew what a computer was.

Amit Gupta nails it. We don’t need these heavy-handed metaphors anymore. They just slow us down, make our interfaces cluttered and hokey.

I then read Simon Collison’s journal entry about his latest site redesign, and how he has also grown increasingly less fond of the fakery in web design. He explains how his “scientific journal” concept tempted him to explore textured paper and fake scotch tape treatments, until he faced his nagging doubts and abandoned the mimicry in pursuit of a minimal, “less obtrusive” way to make the reference without hitting people over the head with it.

I followed his link to his presentation Bauhaus Ideology and the Future of Web Design and found myself agreeing wholeheartedly with the ideas of embracing the materials we use, the honesty of the machine.

It is fun to experiment with handwritten type, boxes stuck on with pretend masking tape, pins stuck in things and so on. I myself have laboured over getting fake stickers and tea stains to look right in Photoshop before bringing them to my pages with CSS, but, in all honesty, who has ever managed to get a cup of tea to stick to a vertical computer screen?

I was reminded of at least one 2008 Design Trends article, in which the big things were torn paper effects, paper clip and scotch tape interfaces, splatter ink graphics, and sketchy fonts out the wazoo.

Many of these design trends happen because they’re used really well in a few applications, someone says “that looks cool” and then uses it in a design that has no reason for it. I think these effects can be done well, and there are probably a few good reasons to have a paperclip in your interface… (maybe)

So here comes the iPad, and I’m touting some of Apple’s new UI guidelines as applicable to many uses, predicting that it will lead the way towards a shiny new future of beautiful user experiences. But I’m also looking at the guidelines with a wary eye on items such as the following:

Add Physicality and Heightened Realism

Whenever possible, add a realistic, physical dimension to your application. The more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it.

And we see the iPad’s book reader, complete with a page curl and flip animation, which you activate by physically placing your finger on a corner of the page and “swiping” across the screen, much like you would a page in a book.

This makes perfect sense, and I can see how this can be enjoyable to use and understandable. But I can also see this being misused, and soon every magazine, newspaper, blog, and chat program will require a virtual “page flip” to access the next screen.

And I feel the rush of years of design progress wooshing backwards, away from the shiny new future of straightforward, simply designed interfaces, and right back to tea stains on our woodgrained virtual desktop with spiral-bound notebook nav bars and scotch taped contact links.

So please, go easy on the page flip animations. If a simple “swipe” will suffice, maybe that’s all the user needs to browse through your content. Let’s keep it simple and try not to take this realism thing too far.

Link: Realism in UI Design →

January 30th, 2010 1 note

Really interesting read on the use of symbols and the addition of realistic details. Contains some excellent illustrations that convey the point perfectly.

"UI elements are abstractions which convey concepts and ideas; they should retain only those details that are relevant to their purpose. UI elements are almost never representations of real things. Adding too much realism can cause confusion."

photo of Sarah A blog full of thoughts and observations on making the web a better place, collected by Sarah Harrison.

Recommended reading

blogs