Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Think Your App Is Beautiful? Not Without User Experience Design

Lately, every app is “beautiful”. If you read tech news, you’ve seen this pageant: Beautiful charts and graphs1. Beautiful stories2. Beautiful texting3. Beautiful notebooks4. Beautiful battery information5.

Aspiring to beauty in our designs is admirable. But it doesn’t guarantee usability, nor is it a product or marketing strategy. Like “simple” and “easy” before it, “beautiful” says very little about the product. How many people, fed up with PowerPoint, cry out in frustration, “If only it were more beautiful”?

Further Reading on SmashingMag:

At best, the problem is simple: No one has figured out how to describe their product effectively. For example, Write10, a note-taking app, describes itself as “a beautiful home for all your notes,” which doesn’t say much about why one might want it. Macworld describes it as “Easy Markdown Writing for Dropbox Users11.” That’s both concise and specific: If you like Markdown and use Dropbox, you’ll read more.


The word “beautiful” says very little about a product.

Changing adjectives reflect changing attitudes. In his recent article “The Seduction of the Superficial in Digital Product Design12,” Adaptive Path’s Peter Merholtz writes:

“Digital product design discourse over the last few years has become literally superficial. Much (most?) of the attention has been on issues like ‘flat’ vs ‘skeuomorphic’, the color scheme of iOS 7, parallax scrolling, or underlining links. And not that these things aren’t important or worth discussing, but as someone who came up in design by way of usability and information architecture, I’ve been disappointed how the community has willfully neglected the deeper concerns of systems and structure in favor of the surface. I mean, how many pixels need to be spilled on iOS 7.1’s redesigned shift key?”

It wasn’t always this way. Indeed, when I became a designer, we had the opposite problem.

Design Before Aesthetics Link

When I started designing in the mid-’90s, we called it “user interface design,” or “human-computer interaction.” Software wasn’t a particularly hospitable place for graphic designers. The web was a limited medium, with 216 “web-safe” colors13 and a need to support 800 × 600 displays at 72 PPI. Desktop platforms were even more limited: A button looked like a button looked like a button, and few apps undertook the monumental effort of creating their own look and feel. Animation was limited to image-swap rollovers. The notion of a “front-end web developer” didn’t exist, because the platform was restrictive enough that designers with no coding experience could do it themselves.

Practitioners of human-computer interaction tended to disregard visual design. We dealt in usability, information architecture and data visualization. Making it pretty was, if anything, a great way to obscure substance with Flash.

And that bothered me. Aesthetics didn’t seem incompatible with usability; and given the choice between a usable ugly product and a usable attractive one, why not the latter? I also couldn’t help thinking about form and function together, each supporting and enhancing the other.

I found support in the work of Edward Tufte14, whose books laid out principles and processes for information design. Many of these principles — like the “smallest effective difference” and the distinction between data ink and chartjunk15 — continue to guide my work today.

By applying Tufte’s principles on the smallest effective difference and on data ink to the graph on the left, we achieve the more effective display of information on the right. It’s also far more beautiful, almost by accident. (View large version17)

Tufte rarely talks of beauty, yet his work is infused with it. Over and over, he takes a poor design and turns it into an effective one — and in the process transforms it from garish to gorgeous. For Tufte, beauty is an integral part of presenting information well. In closing The Visual Display of Quantitative Information18, he writes, “Graphical elegance is often found in simplicity of design and complexity of data.”

Tufte’s most famous example, Charles Minard’s 1869 graphic “Napoleon’s March to Moscow,” shows six dimensions of information with remarkable clarity. (Source: Wikipedia20) (View large version)

Putting The Visual In Design Link

By the mid-2000s, the industry had caught up with Tufte. Digital designers tended to fall into one of two buckets: “user experience design” (UX) and “visual design” (although titles varied). Visual design was, in a sense, applied graphic design, and it brought UX to life in pixels. It wasn’t uncommon to put two designers on a project, one of each type. The resulting work benefited not only from their breadth of skills but also from the interplay between the two.

Why this newfound acceptance of the visual? In his 2007 Emotional Design2321, Don Norman writes:

“In the 1980s, in writing “The Design of Everyday Things”, I didn’t take emotions into account. I addressed utility and usability, function and form, all in a logical, dispassionate way — even though I am infuriated by poorly designed objects. But now I’ve changed. Why? In part because of new scientific advances in our understanding of the brain and of how emotion and cognition are thoroughly intertwined.”

Perception and cognition are subjective, and our emotional state influences how we think. That malleability is pervasive: The world we see is not the world as it is. (For a fascinating and detailed exploration of this, I recommend David Eagleman’s Incognito: The Secret Lives of the Brain22.) The consequences are profound: If, in crafting an app’s look and feel, one can put the user in an emotional state conducive to the task at hand, then the visual design will have been a foundational part of the UX.

This shift in perspective paralleled technological improvement. We had millions of colors, larger displays and the horsepower to build smooth animations. CSS and the DOM gave us the flexibility to build fully styled, animated, interactive apps in the browser. Displays were still low-resolution and typography rudimentary, but it was possible to build a product that represented a distinct, polished graphical vision from top to bottom — and to apply the principles of information design with far more subtlety.

And it kept getting better. The iPhone put dynamic, context-aware software in everyone’s pocket. Display resolution doubled, and then kept increasing. Animation got smoother, richer and much easier to build — complete with bouncing, colliding objects that mimicked real-world physics. Web fonts freed us from the shackles of Arial and Verdana, and those high-resolution displays gave legibility to font families and weights that weren’t previously practical. Today, we have unprecedented power to deliver cinematic delight.

Taking The UX Out Of Design Link

By 2011, I noticed attitudes changing again. We’d taken the “design” out of “user experience design,” and some companies had separate UX and “design” teams. Wireframes had fallen out of favor in some circles. Design debates were increasingly divorced from user needs, as Peter Merholz noted.

Last year saw the triumph of “flat” over “skeumorphic” design, rooted in the odd Modernist-esque argument that drop shadows, textures and gloss are somehow untrue to the medium of a digital display.

But the digital display is not, in fact, our medium. The display, the keyboard, the mouse and the touchscreen are themselves artifacts that we’ve designed in order to work with our true medium: the user. Our medium is a strange, quirky one, evolved over millennia to interact with an environment that rarely matches the one we find him in, stuck with a heuristic way of thinking that sometimes produces incredible flashes of insight and sometimes steers him in entirely the wrong direction.

So today, perhaps Don Norman’s insight in Emotional Design2321 is needed in reverse. Beauty is wasted when our products don’t address real user needs in a usable manner. Again, perception is subjective: The product gets uglier if it fails to meet user needs or becomes confusing. It’s like falling in love at first sight, then falling back out after a brief conversation. Your crush looks less attractive now; you can’t even recall why you were so captivated in the first place.

Great design is a synthesis of art and science, of aesthetics, usability and a deep understanding of user needs and behaviors. To succeed, we need a balance. Beauty that isn’t part of holistic, effective product design will be wasted.

As digital designers, our tool is the pixel, but we have higher-level tools as well. We can induce an emotional state. We can use pictures and shapes to evoke familiar objects, endowing our grid of pixels with illusions of the physical world, prompting familiar interactions in an unfamiliar environment.

Furthermore, we can delight with animation, even as we use it to preserve context and mimic physicality. We can deliberately choose typography, color and thickness to create visual hierarchy — emphasize some elements and de-emphasize others to help the user’s eye flow across the page and understand what needs to happen next. We can condense a galaxy of data points into a chart that allows instant understanding. And we can infuse all of it with a beauty built not as a complement to our efforts, but as an integral part of it.

(cc, al, ml, il)

Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23

↑ Back to top Tweet itShare on Facebook

Dave Feldman is a product designer in San Francisco, and works as Product Manager at Google. Previously he co-founded Emu, a smart chat app; was Entrepreneur in Residence for CrunchFund; product-managed the 2011 redesign of TechCrunch; and led the design team for Yahoo! Messenger. He's extremely active on whatever social network was announced a few hours before you read this.

  1. 1

    Erm.. I was surprised the Shift-key iOS problem was even mentioned. It had annoyed me since iOS7 but I never bothered to search for it on Google. Wow! A lot of people taking about that, and lot of proposed solutions. Why so complicated? Apple simply got it ass-backwards. The on/off states should be reversed and the caps lock is just fine. Boom. Anyway, the rest of this article is great also haha :)

  2. 2

    Daniel Schwarz

    September 1, 2014 2:43 pm

    Nice short article. I liked what you about describing a Product. Mine is “Stunning design inspiration” – notice that the adjective describes the content (images) and not the website (or “home”) –

    I agree that wireframes are dead in some circles, maybe due to being able to design in the browser so easily nowadays, with auto-update/live view code editing apps. I think there are a lot less specialising designers/developers as well, where it’s easier to mockup a POC in the browser after doing a few ideated sketches. Either way, visual design and “trends” comes last for me, UX comes first.

  3. 3

    Beauty is subjective. Art has many guidelines but few hard and fast rules. To make an interface as visually attractive as possible is still a worthy task. The best apps will always have form AND function, never one OR the other.

    The beautification of an application is icing on the cake, not an element of the design process that can subjugate any part of UX. How a task flows, how users interact with it, how data is presented, how controls cue their functionality, these are all parts of a process that is aided by beautification. The professional just has to understand the separation of concerns. We’ve seen a move towards simplification of the UI. Less clutter. More emphasis on subtlety, not getting in the way. And yet even with function prominently prioritized of form, the application of good form on function will always make the experience that much better.

    • 4

      Benjamin Hickman

      September 2, 2014 7:36 pm

      Ugly user interfaces can be intuitive and easy to use, but they are always replaced by better looking clones.

    • 5

      I agree, but would take it even further: the beautification of an app need not be icing on the cake, but is best done as an integral part of the UX and product design. Form and function can support and enhance one another.

  4. 7

    Pretty software can be hard to use, ugly software can be easy to use. We’ll forgive software for lacking both if does something we need or want enough.

    Get all 3 (appearance, ease-of-use, need) right and you have something people will love.

  5. 8

    Brilliant article, easy to read and yet concise – though I’d wish the author would have gone more into the topic of why people choose “beauty” as sticky tag over more descriptive statements. Nice flavor also, that some more inspirations or insights are linked.

    • 9

      I suppose I had assumed people choose less descriptive words over more descriptive ones because they come to mind first, and they don’t dig further or recognize a need to be more descriptive or specific. I think there’s also a trendiness element to it: when you see apps you admire described as “beautiful” you want yours to be “beautiful” too.

  6. 10

    Android Design Guidline #1
    Delight me in surprising ways

    A beautiful surface, a carefully-placed animation, or a well-timed sound effect is a joy to experience. Subtle effects contribute to a feeling of effortlessness and a sense that a powerful force is at hand.

    Say no more

  7. 11

    I don’t disagree with the points made here, but would like to add how much of a competitive world we now live it. Checking all the UX needs, making it simple, etc is sometimes not enough. The standout apps and products delight or have beautiful moments of delight between function, they have a personality/voice and they engage. It important to make these part of the initial vision and also think about them through the design process – they’re not afterthoughts.

    • 12

      Absolutely! I certainly didn’t mean to suggest otherwise. The ideal is a product that’s usable, useful, *and* delightful, and the best products consider all three of those goals holistically.

  8. 13

    Home decoration ideas

    September 2, 2014 12:23 pm

    Greetings! Very useful advice within this post! It’s the little changes that make the largest changes.
    Many thanks for sharing!

  9. 14

    Very interesting article. I believe that visual design needs to be meaningful. To help explain and emphasize the utility of the product. Otherwise visual design is only decorative. With no clear meaning.

    Inspired by the brilliant book Micro interactions by Dan Saffer and the signature moments he talks about, I started collecting examples of apps and websites on Pinterest that use visual and interaction design as a way of difference themselves but at the same time being meaningful. Please have a look at

  10. 15

    Justin Lawrence

    September 2, 2014 12:56 pm

    Agreed— firstly make software that is needed— then loved.

  11. 16

    Great article! There are some similarities between graphic and visual design, that both disciplines strive to communicate. Graphic design differs from fine arts by being intentional. An effective graphic designer must understand the message and the target audience before applying graphic treatments to the collateral; they shouldn’t design for design’s sake, meaning not just add “fluff” to make the piece look pretty. The message must be effectively communicated to the audience.

    Visual design (when applied on software used by humans) introduces another layer of complexity in user interactivity with the software (and hardware). Yet, similar design principles apply. I like Cooper’s description of a visual designer the best: “…visual designers are responsible for balancing usability with desirability—using color, style, type, icons, information design, and visual hierarchy to clarify data, indicate relationships, hint at behavior, and communicate about brand.”

    As a visual/graphic designer, I don’t think it’s only icy on the cake that I’m bringing to my projects. On the contrary, I see myself working as part of the software development team to help connect the target audience/users with the technology, and reduce fear & anxiety humans (non-geeks!) might have with them.

  12. 18

    Excellent! every time user experience delivers a spread spectrum to improves! Theres a lot of new things to do and to learn!

  13. 19

    As a User Experience practitioner who came from UI design, I have always felt that the aesthetic expression of the experience, architecture, and structure that I’ve created is enhanced and even informed by the design process. And I have always understood how that aesthetic expression can affect how our users relate to the site, the content it delivers, and the overall experience they engage in.

    That being said, “Can’t we just focus on our own disciplines?”

    There are so many visual designers that seem to believe that because they can design a pretty site, and the “beauty” of a site is paramount in their view or what the critics currently define as paramount, that UX is not even a necessary part of the process any longer.

    I have even had designers tell me that “No one is designing this or that button these days. Everyone already knows how that function is supposed to work. So why should we even include it?”

    These arguments do not foster good work!

    Just as I fully respect the talent that a great designer can bring to an APP, website, or software through design, the designer must respect the thought, structure, and experience that I have created.

    It must be a collaboration.

  14. 20

    Clayton Kossmann

    September 10, 2014 4:34 pm

    An incredibly interesting examine, I might possibly not concur entirely, but you do make some quite valid points.

  15. 21

    You think PowerPoint is hard to use..?

  16. 22

    It’s funny how this article points out other sites for describing their beauty rather than substance, while the sidebar advertises the latest Smashing magazine books as “neatly packed in a gorgeous hardcover” and “waiting to be discovered in our lovely Smashing Library.”

    Don’t get me wrong, I completely agree with the article. But you might want to have a chat with Smashing Magazine about the marketing of their eBooks. Seems like they could use a few pointers in promoting value and quality of information over beauty.

  17. 23

    Great article. We’ve just written a book about the future of mobile UX design. Hope its interesting to you –


↑ Back to top