In my last post I talked about the need to find the right balance between skeuomorphic and flat design. I mentioned that Apple had just release an updated version of their Podcasts app which removed the controversial reel-to-reel visual progress animation. Some have concluded that Apple has embraced a flat approach to design. I don't think it has. I think Apple is taking an appropriate balanced approach to design. There are some elements that are essentially flat, such as the fast-forward control. Other elements have subtle but very effective depth, such as the back button and the sliders. These elements don't scream skeuomorphism nor take up huge amount of space with overly crafted real world objects. However, they do still resemble physical controls and very effectively communicate affordance. It is clear what the user can do with these controls, the fact that they can put their finger on small knob and slide it to the left or right along the slightly recessed bezel. This is exactly what I meant when I said that we need a balance. This is not a garish photo realistic use of real world object visualization but rather a suttle but amazingly effective reminder of a physical object sufficient only to communicate affordance and pleasing depth. Of course, much of design is subjective and people differ in what they prefer. And, there are changing trends in design. However, as I pointed out in my previous post, great design comes from true empathy with users and not simply following design trends unthinkingly. As one would expect, Apple again came through, in my view, with an appropriately balanced approach to design.
Entries in design (63)
I've been thinking about the skeuomorphism versus flat design debate for some time now, seriously considering both sides. For those who may somehow have missed mention of the debate, it is between those who favor designs that look like physical objects (skeuomorphic) versus those who favor digital-based designs (flat) devoid of visualizations of real objects. Although the term skeuomorphism predates computers, it is almost exclusively now used to refer to an approach to visual design of software.
The first software designs that experimented with the use of skeuomorphic techniques that I'm aware of appeared in the mid to late 1990's with Microsoft BoB and IBM's RealThings. These were early experiments designed to make computer software more approachable to novice users. These users tended to be reluctant to use computers because the machines were perceived to be difficult to use and intimidating. The idea was to make the design of the computer program look (and operate to some degree) like their real world physical counterparts. The Microsoft BoB checkbook (and check register) looked just like a paper-based checkbook and the IBM RealPhone looked and somewhat operated like a phone system common at the time. Microsoft released their work as a product whereas the IBM's effort remained an experimental project being worked on in the research labs. Microsoft BoB wasn't very successful as a product, in my view due largely to the poor choice of a cartoon, childish visual design of the overall system and not due to the introduction of skeuomorphism within components like the checkbook. Microsoft BoB had some devoted fans (some of whom I knew at the time) due to the skeuomorphic apps like the checkbook despite the rest of the unfortunate visual design of the rest of the system. Those fans much rather worked with the BoB checkbook app than the complicated Microsoft Access database on which it ran. It was unfortunate that skeuomorphism was deemed to not have been successful during that period due in my view to a very poor choice of visual design (and of course the precursor to clippy as well).
When Steve Jobs and his team at Apple ushered in new mobile hardware form factors that drastically simplified computer technology, they also chose to use skeuomorphic approaches to design to make the software on those devices be perceived as simple, familiar, and approachable. The camera includes a shutter animation, iBooks includes a wooden book shelf and books with pages that flip, the Notes app looks like a physical yellow lined notebook, the Voice Recorder app has a picture of a big microphone and a VU meter, the calendar looks like a physical calendar, the compass looks like a physical compass, maps looks like physical maps, the contacts app looks like the physical counterpart, the Calculator looks like a Braun calculator, Garageband includes visuals of piano keyboards, drums, etc. I believe that the use of skeuomorphism helped to make and continues to make these devices extremely popular, especially given their adoption by many people who aren't in the traditional technical markets for computer technology.
The last few years have seen the introduction of skeuomorphic designs that in my view are completely gratuitous. It is important to note that these came out during the post-Jobs era at Apple. The best (or worst) example of this is the Podcasts app and its use of a reel-to-reel tape recorder visual animation as a progress indicator. This animation only appears if the user swipes up on the podcast album art so it isn't serving the purpose of making the user feel immediately comfortable with an existing object. What makes this the most gratuitous example is that podcasts only came about as a digital medium so there isn't any real world analogue. This is pure eye candy. While it may provide visual interest, it really is over the top in terms of skeuomorphism. In fact, Apple apparently agrees, as evidenced by the version of the app that was just released. They've removed this control completely from the app.
On the other extreme from skeuomorphism is flat design. Proponents of flat design argue that we no longer need to use physical object visuals because digital versions have been around sufficiently long that we can simply use purely digital visual representations. Many designers have adopted this point of view and now scoff at designs that aren't completely flat and purely digital. Many of these designers also believe that Microsoft's Windows 8 is a good exemple of this flat approach to design.
Much of this debate is heated, emotional, and dogmatic in nature. I thought it might be good to get some user input on the question so I asked via social media "If you needed to toggle something on or off in an app, which of the following alternative designs would you prefer, Design A or Design B?" and I then showed the alternatives design illustrated below. While not a huge sample of respondents, 30 people indicated their preference and all 30 preferred Design A. Of course, Design A is skeuomorphic and Design B is flat. This confirmed my believe that we need to balance the interests of purist design models and trends with user preference and behavior. In my view, there is no place for a purely gratuitous use of skeuomorphism like the reel-to-reel tape player visual animation in the original version of Apple's Podcasts app but I equally worry about the use of completely flat controls that show no affordance as to what may be done with them such as Design B which is Microsoft's Windows 8 toggle control.
Great design will come from a deep understanding of the users in the target markets expected to be served by a product, a sincere empathy for the ways they think, feel, and want to interact with the world, analogue and digital. Designers have to use that information to design user experiences with the right balance of controls that have depth, and possbly analogues in the real world, along with purely flat controls that exist only in the digital world. Of course, these approaches need to be part of a meaningful and unified design system but it is clear that an unthinking adherence to an entirely skeuomorphic or flat approach to design is not the best way forward for designers if our goal is great design outcomes. A more naunced approach is required.
I wrote a book some ten years ago with a couple of colleagues (Scott Isensee and Carol Righi) called "User-Centered Design: An Integrated Approach" which outlined a comprehensive system for introducing UCD to an organization and specified the key methods that should be carried out. This work was an elaboration and extension of the pioneering work of Don Norman and colleagues. I followed the book up some years later with an article in the Communications of the ACM entitled "The State of User-Centered Design Practice" which reported the results of some research that some colleagues (Ji-Ye Mao, Paul Smith, and Tom Carey) and I had conducted getting information from UXD practitioners at more than 100 companies and investigating, among other things, the differences between what is known to be best practice and what actually is carried out inside companies. Even though the importance of design was increasing, practitioners in most companies reported a significant difference between the known best practice and their day-to-day experience.
Design is seen as even more important now, as pointed out elsewhere in the blog thanks largely to Steve Jobs and Apple. I thought it would be good to have another look at the state of actual practice so I turned to the LinkedIn "User Experience" discussion group and asked the question shown here.
Although I posted the question some time ago, the responses picked up significantly recently and have been fairly extensive and from a variety of different companies. The discussion is ongoing but I thought it might be good to summarize the key themes at this point here. There were five key themes among the comments which each were mentioned by a substantial number of practitioners.
Management Understanding/Buy-in: An overriding theme mentioned by many concerned the lack of understanding regarding the need for, execution of, and requisite resources required for User Experience Design. This resulted in insufficient importance given to design and inadequate resources being applied to it.
Missing or Vague Requirements: Many practitioners mentioned the challenges they faced in attempting to carry out User Experience Design activities when the projects hadn't been given appropriate business requirements from Project Management. The requirements were either missing entirely or sufficiently vague as to have little value.
Resources to do User Research: Practitioners overwhelmingly reported dissatisfaction with not having the resources to carry out one of the most powerful design methods: user research. This finding is consistent with the results I reported in the Comunications of the ACM article mentioned above. The combination of missing or vague requirements and little nor no user research leads to designers essentially working in the dark.
Everyone Thinks They're a Designer: Another common theme reported by many respondents dealt with the problem of project managers, executives, and developers all thinking that they're capable of doing design themselves. One respondent also astutely observed that designers are often guilty of assuming the developers know nothing about design which is also problem.
Suboptimal Day-to-Day Practices: The above themes were reported about equally by respondents as being substantial major problems. A fifth theme emerged that dealt with a variety of day-to-day frustrations or suboptimal practices. These included the following.
- Being handed a design by development and being asked to "make it usable" or by a project manager and asked to "clean it up".
- Presenting a wireframe when the expectation was the finished, polished design.
- Not being able to iterate on the design based on user feedback and simply being expected to come up with the completed design in one iteration.
- Being told that it is too costly or will take too long to build the design or that it will be addressed in the next release.
- Being expected to adopt designs that are perceived to be industry leading.
- With no audience definition being told to "design for everyone".
- Not addressing the findings from user research when it is carried out.
- Having to deal with everyone on the team thinking that they're the user.
- The difference between UI and UX not being understood.
- Losing sight of the primary objectives of the project and getting distracted by other tangible results.
- Unrealistic deadlines and evolving scope creep.
The experiences of the User Experience Design practitioners that responded to my question clearly articulated the challenges that remain to be addressed in many companies. As I pointed out in my Communications of the ACM article, companies may have the mistaken notion that design is being carried out effectively simply by having hired designers. However, these results reinforce the need for companies to more deeply understand User Experience Design and to address the issues summarized here.
Although some methods and technologies have evolved, the essence of the integrated approach that was outlined in our book ten years ago still applies and my experiences with leadership teams validates it as well. The integrated approach that my coauthors and I published stresses that the commitment to design excellence and the investment in it has to start at the top of the company, clear business objectives must be set by Product Management, user research needs to be carried out to provide the foundation for design informing personas and scenarios, design needs to be carried out by those trained in the disciplines of design and start with low fidelity prototypes evolving through iterations involving regular user feedback and innovation explorations into high fidelity prototypes and code. Product management, design, and development need to work collaboratively and iteratively leveraging each other's skills. The entire team has to share the commitment to achieving the established business objectives with the effective leveraging of User Experience Design. While this isn't easy, it does yield significant dividends when deployed and executed optimally.
I'd like to thank the members of the LinkedIn User Experience discussion group for their experiences and insights.
The number of mobile devices is increasing exponentially and so is the number of apps being developed for those devices. The design of many of those apps while effective, often isn't exemplary. However, the mobile space is seeing its share of true creativity and innovation. In fact, the introduction of a novel design often sets the direction for other apps to adopt aspects of that design as well.
I try to stay on top of innovative designs myself by following podcasts, reading blogs, and exploring app stores. However, as usual, I thought I'd also leverage the wisdom of the social media crowd. I asked, "which mobile app would you say currently has the most creative, innovative, and usable design?" The feedback I received is summarized in the wordle on the right. A larger font size indicates a greater number of people having chosen that app. The results illustrate some clear front runners: Flipboard, Path, and Clear. While the remaining apps have some interesting features, we'll focus here on the apps which were mentioned by the most people. I also followed up with the people who selected particular apps to ask them what aspects of the design of the app they most appreciated.
Flipboard first came out on the iPad and set a design direction there with its novel design patterns and when it came out on the iPhone it did it again but, importantly, with different design patterns. It provides the capability to aggregate content from a growing list of providers but importantly from Facebook and Twitter. The design attributes people mentioned as being exemplary include "a fluid and simple UI", "amazingly beautiful graphics", and "overall ease of use", and "integration". Flipboard truly transformed the aggregation and rendering of content. For example, information from Twitter in most other places is shown as a continuous stream of text which sometimes allows for the inline rendering of photos, visuals, and videos. However, Flipboard turns that content automatically into a beautiful multicolumn magazine style layout which maximizes the rendering of non-textual information and the appropriate clustering of textual and non-textual information together. The navigation model Flipboard uses on the iPad is hand/finger gesture based with horizonal page flipping whereas on the iPhone it is thumb based with vertical page flipping. The page flipping is reinforced with a suble, yet satisfying page turn animation. Both form factor designs have an opening category selection screen which provides the home base that can be returned to with a tap or two. Individual content items can be drilled into by tapping. Flipboard is the app I use on my iPad and iPhone to access social media, news, and blog information. Pulse News is also an information source aggregator and it is instructive here when discussing Flipboard to point out that Pulse is similar in some ways except that it uses a navigable grid with sources being able to be navigated vertically and content items horizontally. Selecting a story in Pulse brings it in as an information card animating from the right and partially overlaying the base content grid in the iPad version and as a full page story on the iPhone. The design patterns used by both Flipboard and Pulse are really effective for the type of content they provide.
Path is another app that was recommended as being among the most creative, innovative, and usable. Those mentioning it used words like "amazing" and "beautiful design". Path is an alternative social media service for just those friends and family with whom you have a close relationship. The number of "friends" you can have on Path I believe is currently about 150. The app is beautiful visually and is fast. However, I find it's controls to be particularly effective. Path has an animated control that appears once you start scrolling down the timeline and shows you the date and the time of the updates being shown. It's nice for the use case when you know there was an update at on a particular day and time that you'd like to access. It's important to point out that it isn't pervasively visable and the dynamically updated clock adds visual interest and relevant information which also appropriately draw your attention to the control even though it is quite small. The second control of interest is a menu that appears when the plus sign at the bottom left of the screen is pressed. The menu animates fan-like with a satisfying bounce when opened and includes a rather whimsical spinning and springing back into the plus sign when it is dismissed. The control provides a quick way of indicating what type of update is being created (photo, people, location, music, thought, or sleep/wake). The number of likes are shown with a happy face and a number. Path does a particularly good job of optimizing space for content which is rendered beautifully but it does this by also minimizing the screen real estate that is used by controls. When controls are used, they include animations and visuals that are engaging, informative, and whimsical.
Another innovative app that was mentioned was Clear. It is essentially a to-do list organizer. Those recommending it particularly liked its "gesture based interface", that it was "simple", and its use of "color". The design pattern that Clear uses is one where virtually everything is accomplished on a single screen via direct manipulation with the content, and only the content, showing on the screen. This app is the ultimate in getting rid of any controls or app-specific chrome. All you see is the content. It is also the ultimate app for doing everything intuitively by direct manipulation. If you'd like to add an item at a particular point in your list, you simply pinch apart the items above and below and then proceed to add your item. You indicate that an item is complete by swiping across it left to right and if you'd like to delete an item, you swipe from right to left. To move an item, you just tap on it and drag it to where you'd like it to go. You can also swipe up and down to access a menu and multiple lists. I actually only use a single list and thus only ever deal with what you see in the photo on the right.
I love how these apps have pushed the design envelope by driving greater engagement through beautiful visuals, effective animation, efficient and natural navigation and actions, and minimal use of controls that are persistent. The mobile design space is an exciting one with new apps like these appearing regularly which raise the bar on innovation, creativity, and usability.
In the first wave of computing there was virtually no user interface, comprising little more than instructions written on punch cards which were loaded into a hopper then read by the computer with the results given to the user via a printout. The second wave introduced what we now know to be a user interface, a display with characters and graphics along with a keyboard and mouse. The display evolved from simple monochromatic characters to full color graphics with ever increasing resolution over time and the keyboard and mouse technologies evolved to be smaller and integrated with trackpoints and trackpads. However, the basic elements of a small TV like display, with a keyboard and mouse beneath it, have remained constant for a remarkably long time. What appeared on that display and how a user interacts with it has remained surprisingly constant as well, especially from the time that the concept of programs running in separate windows was introduced.
While there were minor predecessors, the major shift into an entirely new form factor came with the introduction of the iPhone. We're now so used to smartphone UIs that many people forget that we hadn't ever experienced one until Apple introduced its game-changing device. The smartphone form factor existed before the iPhone, but Apple totally redefined it. Once users were used to the iPhone user interface, the adoption of the larger form factor iPad was incredibly easy because it was virtually identical. Like the smartphone, the tablet form factor also existed prior to the iPad but again Apple redefined it dramatically. Key to that redefinition was the perfected use of multi-touch. Interacting via multi-touch is so pervasive now that it isn't uncommon to see people walking up to screens in places like hotels, airports, and stores expecting to be able to interact with them with touch only to be really surprised and disappointed when they turn out not to support touch. That's when you know that we've experienced a paradigm shift as a society. Touch has been in university labs for decades but it took Apple's dedication to design excellence of the entire user experience to perfect the technology to create this paradigm shift.
Another paradigm shift in interaction modality has just started. This one involves the use of speech. Again, speech technology has been around for decades and has been used commercially successfully as well but mostly in niche markets like voice response systems and dictation systems. Apple's Siri is still in beta, a product designation Apple very rarely uses, but promises to do for speech technology what the iPhone did for touch technology - make it a pervasive and paradigmatic change in society.
There are two major insights to glean from these fairly recent advances. The first concerns how these changes took place. In each case, the basic research and foundational technologies as well as even some commercial applications existed for decades prior to the paradigm shift. It was Apple's approach to design that made the difference. The design of everything, from the industrial design of the physical elements of the device (glass, case, bezel, etc.), the visual and interaction design of the operating system and key apps, the engineering design of the internals (processors, memory, battery, GPS, etc.), the manufacturing design of the production line, the design of the website and app store, the design of the content review process, the design of the payment and app download system, the design of the stores, the design of product support, all the way to the design of the product secrecy and product announce/launch systems. Many people like to jump to simple conclusions that these paradigm changes were brought about by this or that individual element but I believe that it was Apple's focus on the total customer experience and all the elements that impact it that was critical. Designers planning a product that they hope will transform an industry need to focus on all of these aspects of design.
The second major insight to glean from these paradigm shifts is the need to rethink how all future products in any market should fit into these major paradigmatic changes in form factor, device, and interaction modality. Designers now need to understand deeply how users are using these technologies in order to design products optimally leveraging them. This is a challenge for many because, as pointed out above, form factor, device, and interaction modality hadn't changed virtually at all for decades. However, these recent changes are so profound that it really does require designers in any market to sit up and take note and consider how users in their markets may be changing.
Having explored paradigm changes we've already witnessed, let's give some thought to where these may go in the future and what other paradigms we may witness in the future. While the computer, smartphone, and tablet form factors and the touch and speech interaction modalities have mostly developed independently, the emerging trend is for them to become more consistent and a future paradigmatic change may involve them integrating deeply. We're seeing the beginnings of changes being made largely to computer operating systems like Apple's OSX to make them more similar to device operating systems like iOS. Apple is making the change gradually with each update to the OS, which is a wise approach that minimizes the magnitude of the change but still moves drives consistency. We're also seeing the very beginnings of a move to integrate form factors, devices, and interaction modalities. Responsive design is part of this trend, as is the enablement of touch and speech pervasively across devices. We're also seeing some degree of cloud based seamless access integrating content and data across devices. We're also seeing that integration spread to even larger form factors like TVs and digitally enabled physical window panes. Some call this a post-PC era, my sense is that we're witnessing a plethora of form factors which in PCs, ensuring that each of these can suit the wide characteristics and contexts of use into the future.
We're living in exciting times that require designers to be fully aware of, intimately knowledgeable about, and be able to leverage the benefits of these incredible paradigm shifts in technology and people's use of them.