A Balanced Approach to Design

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.          

Great Design Requires Skeuomorphic AND Flat Approaches

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.     

Fingers and Thumbs

Mobile devices have transformed the way we deal with computer technology. We now have amazingly powerful computers that fit into the palms of our hands making it possible to have them with us at all times and be able to do many of the tasks we used to only be able to do on computers and more.  

The miniturization of this technology has given us amazingly high quality displays and the integration of multiple capabilities such as cameras, GPS, accelerometers, and the like. However, getting information into these tiny devices, while improving, still has a ways to go. Even though speech technologies are improving, most people still use software keyboards. The use of software keyboards isn't uniform either though with some people using their thumbs, others using their fingers, and yet others preferring the swipe type keyboard alternatives. As usual, I thought I would ask my social media networks what they do. I asked "Do you use your thumb(s), finger(s), or voice when entering information into you Smartphone?" The results are shown to the right. Voice input was predictably low at 8 percent and alternative keyboard input technologies that involve swiping across the keys yielded an even smaller number (but then I didn't specifically list this as an alternative).  The majority of respondents indicated that they use their thumbs but, surprising to me and to others on Twitter who commented on this, fingers were preferred by fully 34 percent of respondents. Of note as well is that 2 percent of those who use thumbs actually only use one thumb and 4 percent of those who use fingers, just use one.

I rarely use Siri now and use both thumbs when entering information into my iPhone.  I thought that most people were roughly the same and was surprised to see people using their fingers. However, these results indicate that I was wrong and I suspect that others may be surprised by these results too. 

What implications does this have for designers of mobile apps? First, absolutely minimize the information that a user has to enter into your app given that it is still a suboptimal input mechanism. And second, don't assume that users are using their thumbs. The designers of Flipboard (an app that I love and many, many others do too) decided to adopt an entirely new interaction pattern when they moved their app from the iPad to the iPhone with the former optimized for fingers and the latter optimized for thumbs. These results call into question the assumption that Smartphone users use their thumbs. Of course the majority of Smartphone users use their thumbs, according to my unscientific study, but a sizable percentage of users actually use their fingers.

Lastly, we smug thumb Smartphone users should stop snickering at the occasional friend or family member who uses their fingers on their Smartphone and realize that there are more of them than we initially realized.

The State of Design Practice

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. 

Innovative Mobile App Designs

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.