Skip navigation
Help

User interfaces

warning: Creating default object from empty value in /var/www/vhosts/sayforward.com/subdomains/recorder/httpdocs/modules/taxonomy/taxonomy.pages.inc on line 33.
Original author: 
Thomas Joos

  

As a mobile UI or UX designer, you probably remember the launch of Apple’s first iPhone as if it was yesterday. Among other things, it introduced a completely touchscreen-centered interaction to a individual’s most private and personal device. It was a game-changer.

Today, kids grow up with touchscreen experiences like it’s the most natural thing. Parents are amazed by how fast their children understand how a tablet or smartphone works. This shows that touch and gesture interactions have a lot of potential to make mobile experiences easier and more fun to use.

Challenging Bars And Buttons

The introduction of “Human Interface Guidelines” and Apple’s App Review Board had a great impact on the quality of mobile applications. It helped a lot of designers and developers understand the core mobile UI elements and interactions. One of Apple’s popular suggestions, for instance, is to use UITabBar and UINavigationBar components — a guideline that many of us have followed, including me.

In fact, if you can honestly say that the first iPhone application you designed didn’t have any top or bottom bar elements, get in touch and send over a screenshot. I will buy you a beer and gladly tweet that you were ahead of your time.

My issue with the top and bottom bars is that they fill almost 20% of the screen. When designing for a tiny canvas, we should use every available pixel to focus on the content. In the end, that’s what really matters.

In this innovative industry, mobile designers need some time to explore how to design more creative and original interfaces. Add to that Apple’s frustrating rejection of apps that “think outside the box,” it is no surprise that experimental UI and UX designs such as Clear and Rise took a while to see the light of day. But they are here now. And while they might be quite extreme and focused on high-brow users and early adopters, they show us the great creative potential of gesture-driven interfaces.

Rise and Clear
Pulling to refresh feels very intuitive.

The Power Of Gesture-Driven Interfaces

For over two years now, I’ve been exploring the ways in which gestures add value to the user experience of a mobile application. The most important criterion for me is that these interactions feel very intuitive. This is why creative interactions such as Loren Brichter’s “Pull to Refresh” have become a standard in no time. Brichter’s interaction, introduced in Tweetie for iPhone, feels so intuitive that countless list-based applications suddenly adopted the gesture upon its appearance.

Removing UI Clutter

A great way to start designing a more gesture-driven interface is to use your main screen only as a viewport to the main content. Don’t feel obliged to make important navigation always visible on the main screen. Rather, consider giving it a place of its own. Speaking in terms of a virtual 2-D or 3-D environment, you could design the navigation somewhere next to, below, behind, in front of, above or hidden on top of the main view. A dragging or swiping gesture is a great way to lead the user to this UI element. It’s up to you to define and design the app.

What I like about Facebook and Gmail on iOS, for instance, is their implementation of a “side-swiping” menu. This trending UI concept is very easy to use. Users swipe the viewport to the right to reveal navigation elements. Not only does this make the app very content-focused, but accessing any section of the application takes only two to three touch interactions. A lot of apps do far worse than that!

Sideswipe Menu
Facebook and Gmail’s side-swiping menu

In addition to the UI navigation, your app probably also supports contextual interactions, too. Adding the same two or three buttons below every content item will certainly clutter the UI! While buttons might seem to be useful triggers, gestures have great potential to make interaction with content more intuitive and fun. Don’t hesitate to integrate simple gestures such as tapping, double-tapping and tapping-and-holding to trigger important interactions. Instagram supports a simple double-tap to perform one of its key features, liking and unliking a content item. I would not be surprised to see other apps integrate this shortcut in the near future.

An Interface That Fits

When designing an innovative mobile product, predicting user behavior can be very difficult. When we worked with Belgium’s Public Radio, my team really struggled with the UI balance between music visualization and real-time news. The sheer number of contextual scenarios and preferences made it very hard to come up with the perfect UI. So, we decided to integrate a simple dragging gesture to enable users to adjust the balance themselves.

Radio+
By dragging, users can balance music-related content and live news.

This gesture adds a creative contextual dimension to the application. The dragging gesture does not take the user from one section (news or music) to another. Rather, it enables the user to focus on the type of content they are most interested in, without missing out on the other.

Think in Terms of Time, Dimension and Animation

What action is triggered when the user taps an item? And how do you visualize that it has actually happened? How fast does a particular UI element animate into the viewport? Does it automatically go off-screen after five seconds of no interaction?

The rise of touch and gesture-driven devices dramatically changes the way we design interaction. Instead of thinking in terms of screens and pages, we are thinking more in terms of time, dimension and animation. You’ve probably noticed that fine-tuning user interactions and demonstrating them to colleagues and clients with static wireframe screenshots is not easy. You don’t fully see, understand and feel what will happen when you touch, hold, drag and swipe items.

Certain prototyping tools, including Pop and Invision, can help bring wireframes to life. They are very useful for testing an application’s flow and for pinpointing where and when a user might get stuck. Your application has a lot more going on than simple back-and-forth navigation, so you need to detect interface bugs and potential sources of confusion as soon as possible. You wouldn’t want your development team to point them out to you now, would you?

InvisionApp
Invision enables you to import and link your digital wireframes.

To be more innovative and experimental, get together with your client first and explain that a traditional wireframe is not the UX deliverable that they need. Show the value of interactive wireframes and encourage them to include this in the process. It might increase the timeline and budget, but if they are expecting you to go the extra mile, it shouldn’t be a problem.

I even offer to produce a conceptual interface video for my clients as well, because once they’ve worked with the interactive wireframes and sorted out the details, my clients will often need something sexier to present to their internal stakeholders.

The Learning Curve

When designing gesture-based interactions, be aware that every time you remove UI clutter, the application’s learning curve goes up. Without visual cues, users could get confused about how to interact with the application. A bit of exploration is no problem, but users should know where to begin. Many apps show a UI walkthrough when first launched, and I agree with Max Rudberg that walkthroughs should explain only the most important interactions. Don’t explain everything at once. If it’s too explicit and long, users will skip it.

Why not challenge yourself and gradually introduce creative UI hints as the user uses the application? This pattern is often referred to as progressive disclosure and is a great way to show only the information that is relevant to the user’s current activity. YouTube’s Capture application, for instance, tells the user to rotate the device to landscape orientation just as the user is about to open the camera for the first time.

Visual Hints
Fight the learning curve with a UI walkthrough and/or visual hints.

Adding visual cues to the UI is not the only option. In the Sparrow app, the search bar appears for a few seconds, before animating upwards and going off screen, a subtle way to say that it’s waiting to be pulled down.

Stop Talking, Start Making

The iPhone ushered in a revolution in interactive communication. Only five years later, touchscreen devices are all around us, and interaction designers are redefining the ways people use digital content.

We need to explore and understand the potential of touch and gesture-based interfaces and start thinking more in terms of time, dimension and animation. As demonstrated by several innovative applications, gestures are a great way to make an app more content-focused, original and fun. And many gesture-based interactions that seem too experimental at first come to be seen as very intuitive.

For a complete overview of the opportunities for gestures on all major mobile platforms, check out Luke Wroblewski’s “Touch Gesture Reference Overview.” I hope you’re inspired to explore gesture-based interaction and intensify your adventures in mobile interfaces. Don’t be afraid to go the extra mile. With interactive wireframes, you can iterate your way to the best possible experience. So, let’s stop talking and start making.

(al)

© Thomas Joos for Smashing Magazine, 2013.

0
Your rating: None

User-centered design has served the digital community well. So well, in fact, that I’m worried its dominance may actually be limiting our field.

The terms “user experience design” (UX) and “user-centered design” (UCD) are often used interchangeably. But there’s an important distinction.

UX design is the discipline: what we do. Precise definition is elusive, but most attempts focus on experience as an explicit design objective.

User-centered design is a process: how we do it. Again the specifics vary, but usually form shades of the same hue:

  • Research. Immerse yourself in your users’ worlds to understand what they do and why they do it.
  • Sketch ideas that address these learned needs.
  • Prototype the most promising ideas to evaluate them more accurately.
  • Iterate through testing, repeating steps as required.

Other design processes

UCD is the dominant design approach within UX, so pervasive that some UX designers behold it as the Platonic ideal of design. Deviation from the UCD faith is even met with derision. A naive recruiter whose job specs aren’t explicit about direct user contact soon learns not to reoffend.

But other design processes are available. Jared Spool’s article 5 Design Decision Styles explores alternatives to UCD, including:

  • Self design, aka “scratching your own itch.” The designer acts as a surrogate for the audience. It’s convenient and quick, but clearly only reliable in narrow circumstances.
  • Genius design. Genius design has no first-hand research phase. To anticipate user behavior, the designer draws upon stockpiled experience, imaginative analogy, and psychological fundamentals.
  • Activity-focused design. Here, the designer addresses users’ primary tasks rather than any underlying needs. Tasks are derived a priori, from a logical interpretation of the domain, rather than from research.1

It seems arbitrary to regard these alternative design processes as inferior substitutes. Surely other modes can fulfill the broad UX mandate of creating experiences?

Weaknesses of UCD

UCD’s ascendancy deserves historical context. Its success came largely as an antidote to what preceded: the Wild West of the early web, dominated by Hey-This-Looks-Cool hackery. UCD offered rigor (or at least the perception of rigor; see Scientism below) that helped the immature web refocus on its audience. But that phase is long past, and the more experience I earn, the more flaws I see in UCD’s finery.

Heaviness

UCD simply takes longer than genius or self design. Clients typically identify research as the culprit, meaning the research phase is usually targeted when time is short. The UX industry has countered this variously through client education, seeking shortcuts, or by slipping research in without formal consent. But—whisper it quietly—some design research is wasted effort. For research to be valuable, it must:

  • be free from sampling or cognitive biases;
  • address issues that are central to the product;
  • offer genuinely new insight; and
  • be used to forge new ideas, not to validate predetermined decisions.

In these circumstances UCD is unparalleled, enabling breakthroughs other modes can’t. But I think UCD advocates overstate how often these planets align. I argue that genius design and iteration will often achieve better results in the same time.

Someone with experience as not only a designer but also as an attentive user has built up an unconscious repertoire of patterns and approaches that suit various contexts. As this library grows, it frees the designer from the need to research every problem.

The UX industry appears to acknowledge the relevance of genius design by its adoption of the expert review—a tool that epitomizes the approach—but often feels it has to prop this review up with user validation. It’s hard to escape the thought that the primary function of this redundancy is to retain the appearance of neutrality.

Negation of style

Among the UX community’s favorite quotes of late:

“[Good design] dissolves in behavior.” —Naoto Fukosawa
“The best interface is no interface.” —various
“Great design is invisible.” —various

At first glance, these are elegant statements of aesthetic intent: the user should never notice the designer’s influence. This “disappearing designer” motif holds self-sacrificial appeal, and for many interactions it’s great advice. I don’t want my tax forms to bear any trademark flourishes. However, when we extend this line of thought to its logical conclusions, these quotes start to look like mere slogans.

By negating the idea of a designer’s influence, we also negate the idea of style within the UX discipline. We’re saying that, done properly, it should be impossible to tell one UX designer’s work from another’s. There should be no signature elements, no philosophical movements, no overarching tenets except that of transparency.

The commoditization of designers that this idea suggests is troubling. Moreover, style is crucial for a creative discipline’s evolution. The best writers and architects—whose work, just like UX design, has function and engenders experience—have unmistakable styles. Throughout history, daring work from iconoclasts has sparked entire movements, and thus transformed creative practice. The transition between the Neoclassical and Modernist architectural eras, for example, wasn’t simply a case of replacing Doric columns with perpendicular glass. It was a total reframing of architecture and its values. Modernity usurped antiquity.

Is our form of functional art any different? In a system that deprecates style, is there room for a designer to pioneer entirely new approaches?2 If not, are we happy with the resultant ideological homogeneity?

Of course our designs must put users first. But there is never just a single way to meet user goals. Instead of trying to deprecate style, we should embrace it as a way to drive our practice forward and lend personality to the things we make. In a marketplace of bewildering clutter, products with a damn opinion are by far the most interesting.

Scientism

Given its academic influences, it’s not surprising that UCD has been sold as a science. Empiricism runs through its discourse, to the unfortunate extent that the UX industry often oversells the certainty it can offer.

Scientism—akin to Colbert’s “truthiness”—is the veneer of science where little scientific validity exists. While UCD is methodical, it is manifestly not scientific. There can never be a universal truth to design. Solutions applied in one context may fail magnificently in another, and the few governing principles (Fitts’s Law, the Gestalt principles, and affordance, say) give at best partial guidance. Some supposed laws, such as the “magical number 7±2” persist in ill-informed fringes of UX, despite being largely rebutted.

While researchers and designers can learn plenty from the scientific method, design simply does not yield to scientific analysis in the way its scientistic proponents wish.

To treat design as a science is to retreat to the illusory safety of numbers, where designers are mostly seen as agents of skewing the odds in your favor. This can start a race to the bottom as design gets less and less leeway. Weak leaders overtest in lieu of trusting designers to make decisions: it’s just a small step from there to the infamous forty-one shades of blue.

Imbalance

Finally, I’m concerned about the mindset that UCD can instill in its practitioners.

It’s unsurprising that a user-centered process can skew inexperienced designers’ loyalties away from business priorities. Some claim that this serves as counterweight to the business-first leanings of other employees. The argument strikes me as infantile. When a designer adopts simplistic, reductive arguments that ignore business reality, it undermines him. It limits his potential influence. Only the well-rounded designer who can fight for what’s right while accommodating business reality will be seen as a true leader.

What next?

I don’t expect UCD’s pre-eminence to change. Nor do I think it necessarily should. But a design community is most healthy when it shares a respectful variety of opinions. I don’t see that in the UX industry today, and I hope we can begin to appreciate the value of alternative design approaches.

The designers who will stand out in future will be those who are familiar with many modes of design. These designers may have a favorite, of course—and UCD is an excellent candidate—but they also have the versatility to draw on other processes when suitable. Perhaps they will even pioneer new approaches to add to our toolkits.

0
Your rating: None