Archive for the ‘Design’ Category

Rethinking the iPad Browsing Experience

Tuesday, July 27th, 2010

I’ve been using my iPad a lot of late. I find myself in Safari probably 70% of the time. As my habits have settled in, I’m suffering from a mildly acute level of frustration with a lot of little things. Mind you, I’m ecstatic that I can lounge around and surf the Web on it, but various aspects of the browsing experience just don’t feel right.

“He’s got too much baggage.”

When we design within a new arena that represents a dramatic shift in interaction, we can’t help but carry forward our own biases and prejudices about how things can or should work. For the past twenty years, we’ve been staring at…windows. Windows that open, close, expand and minimize. It’s probably the single most dominant metaphor in OS interface design today.

When you open Safari on the ipad, its lineage is fairly obvious:

father

Safari inherits a classic window trait: controls and a healthy slab of chrome along the top. For Safari’s ancestry, this made a lot of sense. We “grab” windows with a mouse pointer to drag them around. Also, from a visual perspective, we tend to title and provide “top level” controls along the top-most pane.

On the iPad, you can’t do any of those things. No resizing or minimizing. Even closing a window amounts to closing the entire application.

Another challenge the iPad has to overcome is mimicking input devices like a keyboard right on the screen. When we focus in on a search or URL box, the iPad pulls up a keyboard along the bottom portion of the screen. Unlike a physical keyboard (which requires zero visual focus for me) the iPad keyboard is a bit more challenging. I find myself splitting my focus between typing on the keyboard and checking what I’m typing up top. It isn’t helpful to have your text so far away from the virtual keyboard:

50milesIs there better way? Interestingly, once we shed the characteristics of typical OS interfaces, we find new opportunities. To reboot the design of the iPad’s browser interface, we should focus first on how we physically handle the device. I want an experience that takes advantage of where my hands are 90% of the time and provides feedback to what I’m doing that is within my line of sight. While having controls at the top of the browser “window” (it’s hardly a window anymore on the iPad) feels familiar, the main reason it doesn’t work so well is that the key controls are far away. Bookmarks, tabs and the URL bar are nowhere near what I would call the “hot zones”: where our hands grip an iPad:

hotzones

I most often grip my iPad on the sides – whether portrait or landscape. When I’m ready to change pages or type a new URL, I anchor it on one of my hands for a better grip (usually my left, since I’m right-handed) and press a button with my right. It’s not awful but it’s also not ideal.

Bring on the Edge SwipeTM

One possible approach is to do the following:

  • Get rid of the chrome up top altogether (the actual Web page reclaims that real estate – a good thing).
  • Recognize an edge swipe: it’s essentially a swipe off the edge of the iPad window (either left or right) and reveal controls in a gutter off the Web page.
  • Put the bookmarks pane near my thumbs so I can scroll and make selections with either hand.
  • Adhere the URL and search windows atop the screen keyboard.

Here’s a concept video that illustrates how such an experience would work on an iPad (users on the iPad can view the video here):

There are some issues with this approach. One of the biggest is discoverability. Unless there’s some sort of illustrative first visit walk-thru, people won’t know to swipe off the edge to get at the controls. Another potential problem is that additional steps are being added to some of these tasks. For example, visiting a new URL is a swipe + pull up bookmark pane + select bookmark. One extra step is added here, though you could make an argument that the swipe is so trivial (and arguably natural) that the net benefit outweighs the extra step.

Generally speaking, this case should serve more as an illustration of how we instinctively revert to familiar patterns and traits, even when the outcome is less than ideal. We rarely see examples of bold new approaches to interaction. It’s a tricky line to walk. Most often we seek user feedback to show the way. Devices like the iPad challenge the typical user-driven approaches by presenting new rules of interaction. And with new rules come new opportunities to break new ground.

Brooks on Style

Thursday, June 10th, 2010

Fred Brooks, author of the classic Mythical Man-Month, has a new book of his essays titled The Design of Design, where he explores the design (lowercase ‘d’) process. Brooks’ discussion is at times academic – in a good way. If you’re looking to read about Web standards or typography, look elsewhere – this is a deep dive into the processes of design.

It’s a worthy read, and contains the best definition of style that I’ve come across. It’s lengthy, but worth quoting entirely:

What is Style?

Precisely what is this characteristic way of working that confers designer recognizability on the products? This question is harder than it appears.

Definitions. The Oxford English Dictionary defines style, in the sense we are considering, as

14. Those features of literary composition that belong to form or expression rather than to the substance of the thought of matter expressed.

21. A particular mode or form of skilled construction, execution or production; the manner in which a work of art is executed, regarded as characteristic of the individual artist or of his time and place.

Webster’s Revised Unabridged Dictionary (1913 Edition):

4. Mode of presentation, especially in music or any of the fine arts; a characteristic or peculiar mode of developing an idea or accomplishing a result.

Akin [1988], “Expertise of the architect”:

Style as an expression of the designer’s personal and professional choices is a vehicle which helps limit the many degrees of freedom that design problems have.

A Characteristic of Detailing. We observe that different works by the same artist are different in the subject painted, or the genre and themes of music composed, but alike in recognizable style. Similarly, the Oak Park church by Frank Lloyd Wright has certain resemblances of parts and arrangement to other architects’ churches, but it has a close affinity of line, of detailing, of ornamentation, of palette, wth Wright’s residences. Whatever style is, it has more to do with details of design than with the main purpose or thrust.

A Hypothesis: Minimization of Mental Effort. All design, all creation, involves hundreds of microdecisions. Habits seem to be a mechanism by which economize on mental effort, by which we reduce the burden of decision making in everyday life. If this is indeed an inborn human, trait, it surely carries over into our creative activities. Absent substantial reasons to do otherwise, we make the same microdeicsion the same way every time. The bundle of microdecisions, consistently made, characterizes our work and gives it the particularity, the distinctiveness, that yields recognizability.

Consistency across Microdecisions. One would expect microdecisions to be consistent not only across time but also across sets of similar decisions. In related microdecisions, the same factors enter, and the same mind would naturally weight them in a consistent way.

A Frank Lloyd Wright will tend to use rectilinear elements instead of curved ones in all his decorations, and in his structures, too. A Seymour Cray will consistently opt for maximum performance over compatibility with his earlier computers.

Clarity of Style. To the degree that a designer does indeed achieve consistency across a wide range of macro- and micro-decisions, we say that he has a clear style, meaning that it is possible to describe it economically. It follows that recognitition is easier.

Even a baroque architecture can show clarity of style. Wright’s architecture was spare as well as clear, but those aren’t the same property.

When little consistency across design decisions is achieved, we call the style opaque or muddled. Somehow, consistency brings clarity, and clarity brings delight.

My working definition:
Style is a set of different repeated microdecisions, each made the same way whenever it arises, even through the context may be different.

Moreover, related microdecisions are resolved in related ways.

Style unquestionably exists. A few bars tell us that a work is Bach’s, or Mozart’s, or Schubert’s. A famous exhibition brought together many Rembrandts, and many works once attributed to Rembrandt but now recognized as imitations. The experts agreed as to what was genuine; even laymen could tell surprisingly often.

Reasonably knowledgeable people can readily tell a Seymour Cray computer from a Gerry Blaauw or Gordon Bell one. The authors of the Federalist Papers have been conclusively identified by details of their prose styles. Programmers can identify each other’s code. C. S. Lewis argues that Jesus’s miracles faithfully display the hallmarks of Father’s creative style.

Agile Development, Nimble Design

Friday, August 14th, 2009

A few days ago, Joi Ito blogged about agile design and development:

The problem is, in the real world, things change and by the time you’re done, you’re often pretty far off the mark and usually the first version isn’t right anyway – so you end up making something 2 years late and a hundred features off target. With agile development, you test, evolve and stay in tune with your users and let them guide you. You can also test and refactor more easily because each "story" or feature is smaller, tested and easy to isolate and remove/change. (Or should be.)

Continue reading»

Don't Design to Get Compliments on UI

Monday, April 6th, 2009

I’ve been reminded a lot lately — especially with the releases of The Better Project and the good showing that Kindling made at the Web 2.0 Expo last week — that the best compliment you can get on a UI is that the product makes a difference in someone’s work, or let’s someone do something they couldn’t or didn’t want to do before, or makes twenty minutes a day a little more fun.

It’s not “Wow, that looks great”. It’s not “What a slick interface”. It’s not even “Users probably love this” (which is a different way of saying, mostly, “That’s a pretty UI”). I’d much rather hear “What a great idea for an app” or “I could see myself using this every day” or “How am I working without this?”. That means the UI is doing its job: getting out of the way of content and utility.

If you’re designing to make something look good, you’re probably going down the wrong path. Focus on providing something that’s going to make someone’s life a little better after they use it. That’s a compliment you want.

Data Design

Monday, March 16th, 2009

A few weeks ago, we shared a great video by Jonathan Jarvis that showed how powerful a visual narrative can be for teaching and explaining. Here’s another called Shift Happens. What’s interesting is that this is a visual remix of a video that’s been viewed nearly 5,000,000 times on Youtube. It’s a wonderful example of what good design can do to an otherwise typical presentation.

Here’s the original:

The content of the original is compelling, but the Powerpoint-style presentation leaves a lot to be desired. Nevertheless, 5,000,000 views is 5,000,000 views. Now here’s the same content presented in a whole different way:

The second video obviously took a lot more work, but the result is so much more interesting and engrossing. The use of visuals to convey the sheer mass and scale of the numbers helps the viewer better appreciate what’s being said. In hindsight, the first video looks like a wireframe of the second. Data and statistics are great, but data and statistics taken through a narrative with thoughtful design can be captivating.

Let’s also not forget that the second video is way more fun too watch. Edutainment anyone?

Don't Design (Unless You're a Designer)

Friday, March 13th, 2009

The funny thing about interface design is that everyone thinks they can do it, or try to do it, but few people actually do it well (or at all). But it’s easier to say "Move the button to the upper right and make it green" than "The button feels awkward to me" or even "The page doesn’t look right to me with the button in that position".

Everyone’s guilty of it; I know I do the same thing to other designers. It’s a hard habit to break. Many times, though, the designer knows what you really want more than you do. Pose a problem and let him or her fix it, instead of dictating a solution.

The Universal Language

Tuesday, March 3rd, 2009

Last week, I was visiting a friend and I had to use his laptop to check my online bank account, as well as my Facebook account.

I sat down at the desk and realized that I needed a new browser window. It was a simple process; I opened Firefox from the Apple menu and then opened a new window.  I also opened multiple tabs with no notable difficulty.

The one detail I didn’t mention is that I was in Stockholm, Sweden. And all of the text on the screen was in Swedish.

Although my Swedish is limited, I didn’t have a language barrier with the computer.  I was sitting in front of a laptop, thousands of miles away from home, but my user experience didn’t feel foreign. The consistency of the interface-especially in a country where the population takes pride in its contemporary design-allowed me to surf the Internet without any hassle. I’m an avid reader, but for once the words before me didn’t matter.

On the streets of Stockholm, I was comfortable with greeting people in Swedish and conversing in English. At the apartment, I didn’t need my friend (or Google!) to translate. I knew how to open a new browser window based on my everyday familiarity of its interface-even if it read Arkiv: Nytt fönster. Directly below, and exactly where I expected it to be, was the new tab option (ny flik).

The layout of the Swedish keyboard, along with the keystroke commands, are different from what I’m accustomed to. I had to search around for some letters on the keyboard and I found that I could actually live without using keystroke commands. When transferring a security code from my e-mail address to the bank’s website, I could copy (koperia) and paste (klistera in) directly from the browser’s top navigation.

But forget the hardware-software was just as easy to manipulate! When I logged into Facebook, I didn’t bother to switch the language from Swedish to English. I didn’t need to translate the entire login screen since I knew the basics for signing in. On the upper right hand side of the screen, I breezed through entering my E-post and Lösenord and activating the Logga In control.

When I was directed to the Hem page, I could immediately tell which of my friends changed their profile photos (öndrade sina profilbilder) or were tagged in photos (blev taggade i ett album).

The Facebook layout was also the same in Scandinavia-new profile photos were displayed under the person’s name and tagged photos were shown directly above the name of the album, along with the number of photos in the album and the user’s name. If there was a comment about a photo, it was wrapped in giant quotation marks. I was able to completely by-pass the Swedish language due to Facebook’s adopted visual cues.

Another one of Facebook’s smart features included remembering my language preference. When writing this post, I tested the Swedish language version on my work PC and didn’t revert to English. I logged in at home, on my Mac, and I was still seeing the Swedish version. Since Facebook broadcasts all user actions, the language switches were posted to my Wall.

As someone who works at a software company, I’m privy to conversations about the user experience. At Arc90, the designers spend a large part of the development process trying to deliver the best user interface. The goal is to build software that is fun and exciting without bypassing the standards, regardless of how small or simple they may be. Whether you’re a user in America or Scandinavia, you should get an incorrect login error message; the UI should look the same across multiple browsers and operating systems.

Software developers need to ensure that their design is both innovative and intuitive. It is vital to use build software that is consistent and resembles the norms of design and development.

Now that I’m Stateside, I might push the limits of language and change my status to the question presented by the Swedish Facebook: Vad gör du just nu?

An Example Of Great Visual Language: Jonathan Jarvis’ The Crisis Of Credit

Friday, February 20th, 2009

I’m a big fan of visual language. It was the motivation behind the sketchcast concept and I think we’ve used it to good effect in pitching the value proposition behind Kindling, our idea management application.

Jonathan Jarvis has put together a stunning ten minute primer on the credit crisis. It’s called the Crisis of Credit Visualized:

You can watch it here, but I recommend watching it in all its HD glory over at Vimeo.

I think a hallmark of using visual language effectively is really empathizing with and knowing your audience. Jonathan’s video is so effective because he goes to great lengths to illustrate concepts that most would otherwise gloss over. By not taking anything for granted, Jonathan creates a tone that educates and entertains without seeming condescending. Beautifully done.

What is Design?

Monday, February 16th, 2009

Chris Fahey from Behavior Design has an excellent post up discussing the tension that exists on the line between user interface and software design. This is something we deal with internally – that tricky balance to strike with a design-driven approach to building software. What is design exactly? Is it the user interface? Is it the requirements? Does it cover the interactions? Should it inform the architecture / API / construction of the software itself?

The answer to all of the above is “yes”.

If that’s the case, then when mentioned in the context of building software, isn’t design just another word then for all of the inputs to be considered in the process of building software?

I personally struggle the most with the word “design” as a replacement for “interface design”. The qualifier there tells the whole story.

Last, and perhaps controversially, I believe that for software applications (I’m differentiating here from content websites) you cannot separate out the process of designing the user interface any more than you could separate out the process of writing the requirements.  They are both part and parcel of the software you are attempting to build and can only be removed from the process to the detriment of the end product.

Design (R)evolutions : A Chromeless Browser

Friday, January 30th, 2009

Alex Faaborg and Aza Raskin of Mozilla Labs explore the possibilities of a chromeless browser interface. It’s an engaging discussion not only around browser conventions but graphical user interface conventions in general:

One of the most treacherous things an interface designer can do is rethink well-recognized and well-understood conventions – no matter how “bad” they are from a design perspective. Alex and Aza rightly point out the inefficiency of making the mouse pointer travel all the way up to the top left of the browser chrome for Forward and Back buttons. Still, everyone knows how to do it.and do it well.

It’s a tricky proposition, but alas, this is where innovation happens. If they’re able to get it right, it might sting at first, but everyone will ultimately benefit. After all, if designers completely adhered to conventions, there would be no real progress, nor the occasional revolutionary stroke in design.