Apple’s iOS7 reveals the challenges of designing Flat Design

Two very recent articles I’ve come across regarding Apple’s new iOS7 and the challenges it brings to UI design.

Unless you’ve been on another planet for the past month, Apple launched a new iOS embracing flat design–eliminating skeuomorphic UI and other effects like glossy highlights and drop shadows. For those of you who have been off-planet, skeuomorphic UI design is the concept of creating graphic elements that emulate real-world objects. For example, a yellow ruled notepad interface for entering notes. To be fair,  Android introduced the concept first but when Apple did it, suddenly people payed attention. Go figure.

Both Luke W (Designing for iOS7: Perils & Pluses) and Baruch Sachs (Flat Design Won’t Hide Your UX Sins) discuss how flat design challenges UI designers because many of the elements of visual language designers once used to communicate have been eliminated.

The simplicity of iOS7’s design language comes at a cost: a reduction in the amount of visual elements designers can use to create hierarchy and thereby understanding. … How people makes sense of what they see gives designers a set of attributes to play with to create meaning within a design. Elements like color, size, and texture can create similarity, differences, and hierarchy within a layout. When these elements are “flattened”, some of this vocabulary goes away.

Instead, UI designers designing for flat design have to be more cognizant of information architecture, layout, typography and the principles of design – basically getting down to the bare essentials – that make interfaces usable and useful without the former aesthetic distractions.

In flat design a clearly structured typography ladder has become more crucial to help a user differentiate between say, a primary CTA, a secondary CTA, and a non-CTA (plain text). Additionally, the placement of the CTA in relationship to other elements in the UI is even more crucial to give succeed in helping the user make confident decisions and interactions with the interface. If the UI implementation has no hierarchy or structure, looks the same and makes the user work harder to find their way through it, then it’s a fail.

As Luke W points out, intelligent flat design success probably ain’t gonna happen on the first round. Making something look and feel transparent and easy is actually very difficult. Which is what flat design UI takes in order to succeed. Just because a designer removes all the shadows and gloss, effectively making the UI flat, doesn’t mean it’s achieving it’s goal of helping guide and direct users in their tasks.

And, as Sachs sagely writes, flat design may not be the most appropriate UI solution for the project,

Sometimes flat design works, and sometimes it doesn’t. … To judge the best approach, you need to understand usage patterns. You need to know how people do their work.

I think what I appreciate most about flat design is that it takes us back to the roots of user experience practice and pushes utilization of the most basic, yet time-tested principles of UX design to the forefront again.

Truly, what is old is new.

Update 10/14/2013: Nielsen Norman Group (NNGroup) gives us their iOS7 User-Experience Appraisal

My (partial) book list

People often ask me what books I refer to while at work. So frequently I just decided to post this list (in no particular order):

  • Universal Principles of Design, Lidwell, Holden and Butler
  • Information Visualization, Colin Ware
  • Information Architecture for the World Wide Web, Rosenfield and Morville (The “Polar Bear” book)
  • Mental Models, Indi Young
  • Designing with the Mind in Mind, Jeff Johnson
  • Defensive Design for the Web, 37 Signals
  • Information Architecture, Christina Wodtke
  • An Introduction to Human-Computer Interaction, Paul Booth
  • Designing Mobile Interfaces, Hoober and Berkman
  • Implementing Responsive Design, Kadlec
  • Observing the User Experience, Kuniavsky

Happy Reading!

Is the Start Button really the key to consumers embracing Windows 8.1?

Users don’t hate change. Users hate change that doesn’t make their life better, but makes them have to relearn everything they knew.

UX bad-ass Christina Wodtke nails it with her take on change and consumers/users/customers and the companies/products they love and hate depending on the update. While Wodtke centers her article, “Users don’t hate change. They hate you.” primarily around the latest iOS from Apple (and rightfully so), the same discussion can easily include Window 8 and undoubtedly the upcoming Windows 8.1.

I’ve never been able to understand the decision to introduce a drastically, mega-huge change to such a widely used and very familiar operating system. I mean, what did Microsoft think was going to happen? They took a UI designed for a mobile context (phone), and dumped it on top of a operating system that 90% of the world uses. Brilliant. Innovative. Modern.

Much has been written and discussed about the OS and the hardware, with most ifnot all notable UX professionals weighing in. Jakob Nielsen summarized,  “Hidden features, reduced discoverability, cognitive overhead from dual environments and reduced power from a single UI window and low information density.” I can’t disagree. When I first started using an RT, it was a constant  running dialogue of “whoa” and not in a good way.

Granted, once you put aside all your iPad or iPod expectations and mental models, and hopefully don’t have to do a lot of back and forth between the two environments (desktop and Start screen)  it’s just about tapping and swiping. But heaven forbid having to use desktop mode. Ever tried to use Desktop mode on a tablet with your finger tip?  Hashtag I can’t hit the target my fingertip is too fat.

The WTH list is a mile long, but the one that crawled to the top of the list was the removal of the almighty Start Button. Never mind consciously removing (crapping on) usability best practices, removing the Start Button was too much change.

From what I’ve seen of the new ads, the Start Button appears to be an icon in the lower left corner of the Desktop mode that when tapped or clicked, opens the Start Menu. I’m assuming that tapping or clicking the Start Icon in the Charms bar will continue to open the Start Menu, as well as tapping on the window icon on the tablet hardware.


So what exactly is this solving? Is this a digital version of a placebo? There’s still no “menu” like in previous versions of the OS prior to 8 (unless you count the Start screen it links to and the horizontal scrolling patchwork quilt information design), but I digress.  Yeah, the Start Button is back, but will it make up for all the other issues that are backsliding user-centered design?

UX Concepts and Practices That We Wish Would Just Go Away!

From the experts at UX Matters dot com, a round-up of UX concepts and practices that defy best practices, and consequently create negative concepts and practices.

One True Way: That there is just one true way to practice user experience.

Expecting Perfection and Pixel-Perfect Design: Focus pixel perfect design and perfection––we have to begin designing for mistakes, uncertainty and imperfection.

Imitating Other Companies: The imitation of other companies’ user experiences that have nothing to do with your own…we want our site or application or product to be the next Apple or Google. The problem is that their companies are neither Apple nor Google.

Lean UX: The key original concept of lean is about efficiently testing assumptions and approaches, then iterating in response to what you learn.

Focus Groups and Preconceived Notions: Focus groups may be okay for driving small incremental changes, but innovation happens in leaps. Focus groups can kill innovation and great ideas.

Return on Investment (ROI): Accept the common-sense notion that improving usability is worthwhile… good user experience is valuable and essential.

Roles and Politics: Delegating user experience to one person or role is the wrong approach; each team member should bring his or her own flavor of user experience to the table. End the practice of using the term user experience as a catch-all for all the skills required for product design and development.

Terminology and Semantics: We are not doing ourselves any favors by talking in terms that our companies and clients struggle to understand.

Lorem Ipsum: When used in the wrong context, it can confuse participants in usability studies.

Fewer Clicks: Another example of people trying to dictate a solution before understanding the problem. Is it better for the user to take 5 clicks without thinking, or one click after spending copious amounts of mental energy skimming the page and mulling the available options?

Regarding Terminology and Semantics, I have one internal label that I use when it’s appropriate to what I’m working on  – the Technical User Requirements Document, or “T.U.R.D.”

Read the complete article: UX Concepts and Practices That We Wish Would Just Go Away!

What to do when a stakeholder passes away

More often than not, UX Architects are called upon to conduct stakeholder interviews for the purpose of gathering individual thoughts regarding a particular project. And, more often than not, these interviews are recorded to augment and support any notes taken during the interview. The question then becomes, what do you do with a recorded interview when the stakeholder unexpectedly passes away?

We all know in our personal lives we’ll eventually have to deal with the death of our friends, loved-ones (people and pets, in my case). Depending on the nature of our grief and sadness, we hold on to mementos that represent the soul we’ve lost – notes, letters, drawings, photos, (and more recently texts, Facebook pages, blogs). Sometimes those mementos include a voicemail (message or greeting) or a video, where we can hear the voice of our friend or loved one in an everyday moment.

But in our professional lives we rarely give death of a colleague or acquaintance a second thought, as in it will happen at all. Sadly, as I just recently experienced, this does happen – a stakeholder passed away suddenly one weekend. Oddly enough, of all the stakeholders I interviewed, hers is not recorded; I can’t recall why, and I did go back and review the recordings, just to be certain.  Regardless, when I heard the news, I immediately thought of the interviews I’d conducted and what would I do with hers (if it existed)? It would only be an interview, q/a – nothing that I thought could be uniquely interesting or personal. But it would have been her voice – the one thing that tends to fade the quickest in our memories but is one the most recognizable aspects of our individual self.

Ultimately, I decided that if I had the recording, I would have deleted it. Principally because it felt eerie and somewhat wrong (but not disrespectful) to have it at all. It’s hard to explain and/or rationalize. Right decision? Wrong decision? I guess until it happens (God forbid) it’s hard to say. But, because we all react to and deal with death in our own personal way, it’s the only decision I know I could make.

Example: How contrast works

I was recently on the Microsoft Support website (I don’t recall the exact URL) and was interrupted by one of their overlays asking if I would be willing to take a survey after using the site. (See the screenshot below).


Now, I’m guessing that was the intent of the overlay based on previous experiences, because I can’t actually read the text at all. In fact, even attempting to makes my head hurt.

The lack of contrast between the text color and the background color, a basic accessibility, usability and readability tenet, is obviously lacking. It makes the attempt to gather potentially useful user input a useless exercise. Even more regrettable is that this is on a Help and Support website, which should be as accessible and usable as possible. Not to mention how poorly it reflects on the Microsoft brand–which is very legible with its two logos–a fair example of admissible contrast.