Creating productivity tools at the intersection of product strategy, mobile software development, and user-centered design

Posts tagged User Interface

Emerging Productivity Technologies



A critical component of start-up success is having a credible product that satisfies a sizable market with an unmet need. However, clear opportunities rarely exist because most lucrative industries are either entrenched with a handful of colossal incumbents, or in absence of high barriers to entry, these markets are filled with countless me-too companies scrambling for any slice of ever-thinning margins.  However, in rare cases, start-ups have an amazing opportunity to enter into a space as the foundation of an industry is shaken up by external change.  This could be due to social shift beyond the industry’s borders or when emerging technologies signal a shift in what the standard product can provide.  Therefore, one of the reasons productivity software is so exciting is the existence of both factors that allow the potential upheaval of current market leaders.

  1. Cloud Computing – allows a user to store their ideas in the cloud and access them on demand
  2. LiquidText – allows a user to manipulate their ideas through a natural user interface.
  3. Tablet Adoption – allows a user a large screen to view their ideas simultaneously, a portable form factor to carry with them at all times, and enough consumer penetration to shift the burden of teaching users to use the technology to the tablet manufacturer
  4. Operational Transformation – allows a user to message and collaborate other people at real-time speeds, with the technology available through an open-source protocol along with a number of other userful APIs
  5. Touchscreen Responsiveness – allows a user to write to a screen like they would on a real piece of paper

Altogether, we have a future where online, real-time collaboration is not only possible, but actually a norm.  The user experience will be intuitive, interactive, and fluid with minimal delays in user feedback.  What makes this inevitable is that once users acclimate to new technology, they soon see it as standard.  With the thousands of productivity apps in iTunes alone, some of them will offer these features and soon everyone else will follow.  The leader though will be the one who can combine everything in a elegant and seamless experience, which is exactly what I intend to do.

Posted in Strategy - Tagged , , ,

Corporate Rebranding



HP Rebranding

HP Rebrand

“The temptation with so many of these projects is to go for a mark that attempts to do too much, cover too much ground, present the many faces of a multi-faceted organisation - as in the current vogue for flexible systems. But HP’s problem was that it had too much going on. It needed a single, strong voice behind which its 300,000-odd employees could unite. And Moving Brands has provided it elegantly.”

http://www.creativereview.co.uk/cr-blog/2011/december/moving-brands-hp-logo

READ MORE »

Posted in Articles - Tagged , ,

Building a Platform



Designers are always advocating simplicity in the user interface and information architecture because too much clutter distracts the user from focusing on the task at hand. However, customers are constantly clamoring for more features and functionality because increased options makes more tasks possible in the absolute sense. Going all the way in one direction, we end up with a plain sheet of paper, which has no technical features whatsoever. Going in the other direction, we end up with a product like Microsoft Word, which has more buttons and hidden menus than one could ever hope to discover. But wouldn’t it be nice to have a balanced tool that performs between these two extremes? Perhaps a better question is actually, how do you achieve this balance?

One possible solution is to build a platform, meaning the core of the application is used as a foundation for other features users might want. This approach entails creating a basic tool that is simple and easy to use, while allowing for the option to expand into more functionality as needed. Recently, using a platform has seen tremendous success in examples such as Firefox’s Plug-ins, iTunes’ App Store, and Evernote’s Trunk. Essentially, since 80% of the users only use 20% of the features anyway, those customers will be completely satisfied with the default experience. And for those power users who want to do more, the product extensions allow them customize their user experience without cluttering the tool for others who don’t need the extra functionality. Furthermore, using a platform approach also solves for the issue that not all power users want the same thing because choosing extensions isn’t a binary decision. You don’t only decide whether or not you want an extension, you also get to choose the one that is right for you.

Going with the platform route is not without its pitfalls though. To start, you run the risk of taking on the worst of both worlds because the app is unable to find the right balance between what should be considered standard versus what should be considered additional. In this case, the default app might be too bare bones, while adding an extension pushes the difficulty of interaction too high, leaving the user with no safe middle ground. Additionally, this method is also risky because it depends on external developers for its success. In regards to this issue, you must figure out how to get enough credible traction in the developer community to reach the minimum threshold for success. You would also need to institute a system of automatically filtering different expansion packages for quality. Being open to all submissions means lowering the overall quality of extensions, but being too stringent means limiting growth. There is also the possibility of manually reviewing each submission, but that process opens up its own set of issues. Finally, building a platform is just plain hard. Rather than just designing a certain subset of features, you must design features that allow for a limitless amount of other features. Developing a system that must incorporate any number of possible futures is simply rife with risk.

In the end, no single direction will be perfect.  When Microsoft first developed MS Word, it probably started out as a very basic tool that had nice upsides compared to a typewriter.  However, bit by bit, links and buttons were added until the product eventually became the feature-bloated monstrosity that people use today. As a result, while Microsoft’s intentions were probably in the right place, not having a predetermined plan for growth leads to unfortunate compromises further down the line.  With the benefit of foresight though, a new product does not have to follow the same fate as it scales.  Therefore, despite the aforementioned drawbacks, going with a platform approach is the right path because it allows us to reach our original vision of creating a tool that is infused with many technological benefits, while still remaining as simple to use as a piece of paper.

Posted in Strategy - Tagged ,

Aesthetics (10 of 10)



Details make the difference

Making a product beautiful is that final step which elevates an app from good to great. As counterintuitive as it sounds, this means aesthetics must be baked into the product from the very beginning. During the early stages of product development, the best designers already have an idea of how the app should look, alongside a vision of how it should behave. Form and function must be deeply intertwined because aesthetic integrity is measured not only by how beautiful an application looks, but also by how well it supports an application’s purpose. In pursuit of this dual ambition, the best designs are distinguished through their fine attention to detail.

Starting with what is seen, one of the first details that affects user experience is an application’s text.  When deciding on a typeface, there are no overarching rules, only general guidelines. To start, one should consider legibility and readability. The formers asks whether the characters are understandable and recognizable, while the latter asks whether the text can be read comfortably for a long time. Another consideration within typography is the font’s personality. How does the kerning, ligatures, and tracking make the font feel?  Next, understanding how fonts match up is also important in choosing typefaces. Generally speaking, a designer wants to choose typefaces in the same family, pairing a strong typeface for the headline with a neutral one for body text. One last consideration worth mentioning is the medium in which the font will be seen. When something is written for print versus for a screen, many areas need to be thought through such as how the ink will bleed on paper or the level of pixel density on a monitor. With so many nuances, choosing the right family of fonts is not an easy task.

The other half of what is seen in an application is the graphics, which also defies simple categorization. First of all, an app should follow a consistent color palette and theme. Next, the items within the app should have certain sizes, colors, shapes. If that item is a flat surface, then one also needs to consider textures, gradients, shading, and rounded corners. If that image is three-dimensional then one should think about perspective, angles and lighting. Furthermore, the interplay between all these elements is also important. Layout considerations include visual weight, hierarchy and spacing. Ultimately, there are innumerable details to consider when designing what the users sees.

Moving onto the unseen, a designer must think about whitespace, also known as empty space or negative space. Active whitespace has been purposefully reserved for a reason. Used strategically, whitespace is able to make certain elements more or less prominent and to activate areas of interest. Carefully arranged whitespace can also create a certain rhyme and meter through its careful spacing of elements. Passive whitespace is just padding and natural margins, but it can also play an important role as well. For example, an app could have an area that gives people some breathing room or increases the feeling anxiety, depending on the goal. In the end, it is possible to waste space, but empty space is not necessarily wasted.

The other part of designing the unseen is determining the unseen. In other words, a designer must decide what elements within an application should be taken out or at least hidden elsewhere. Although mentioned last, simplicity is arguably the more important part of aesthetic integrity. Knowing what buttons or icons the user doesn’t need to see helps users focus on the task at hand. Additionally, knowing when to remove something altogether is critical for avoiding mental and visual overload. Deciding what to throw out and what to keep is a matter of truly understanding the user’s needs.  Thus, determining the right answer requires a designer who is deeply in tune with their user (which can be accomplished through focus groups, interviews, split-testing, etc.) and is only possible on a case by case basis.  Ultimately, minimalist design is about keeping an app simple and including elements only when they truly enhance the user experience.

To probably no one’s surprise, aesthetics is more of an art than a science. For example, most people can agree than a productivity app should choose serious typefaces and professional icons to give users the sense that they are using a powerful tool instead of a childlike toy. However, such an app must simultaneously balance that goal with the equally significant need to be inviting to new users. As a result, the method for achieving this harmony leaves much room for debate.  Regardless of the result of the final design, a great designer knows that the details make all the difference.

Posted in User Experience - Tagged , ,

Consistency (7 of 10)



Keep it all together

Three levels of consistency can be applied to the design of an application. First, an app can be consistent within itself. Taking a step out, an app can be consistent with previous versions of itself. Finally, an app can be consistent with something greater than itself, namely the suite of products to which it belongs. (Arguably, another level also exists, which is consistency with people’s expectations, but that topic is outside scope and is instead categorized as Precedents.)

Consistency within an application is important because it conveys a sense of stability, instills a feeling of trust and improves discoverability. Preserving user-modifiable settings, such as window dimensions and locations, increases the sense of stability by giving the perception that the app knows where all the user’s data lives and where it belongs. Thus, when a user sets up his or her onscreen environment, their particular layout should stay the same until it’s further customized. Additionally, users trust an app that keeps it’s promises across various screens. This means a user control that performs a certain function should perform that same function in another context. Done correctly, users should be able to learn an action sequence in one part of the system and apply it again to get similar results in other places. Alternatively, a user control shouldn’t look alike if it actually does significantly different things. For example, a critical error warning should flash a dramatically different display from a trivial help screen or inconsequential reminder. Lastly, an example of helping discoverability is having a menu command dimmed rather than omitted when it does not apply to a selected object. This allows the remaining elements to stay dominant while also informing the user of the full range of possibility.

Consistency with earlier versions of the product helps users adapt to the new system more rapidly, and increases conversion rate if a high brand value is associated with the original product. Touching on the first point, when a user is familiar with how an application has worked before, then there’s almost no learning curve if the updated product is very similar to its previous iteration. The nuance here isn’t remembering to keep things consistent with the past, but is rather having the foresight to design it beautifully the first time. An additional benefit that often goes overlooked is the fact that users have brand loyalty to products they love. As the saying goes, “if it ain’t broke, don’t fix it.” On the flip-side, when a product doesn’t quite meet user expectations, the next release is a great time to break the principle of consistency and roll out something new and improved.

Perhaps the most elegant application of consistency is keeping elements the same across different products. It is almost magical when a user is able to open up a program they have never seen before and navigate it with relative ease due to prior interaction with other apps in the same family. Consistency in the interface allows users to learn where the controls are in one app, and apply that knowledge to other apps within the same system. In fact, Apple feels this is so important that not only do they offer guidelines on how to keep menu bars consistent, they also give tips on how to keep sub-menu items consistent, going so far as to even suggest how to keep keyboard shortcuts for those sub-menu items consistent.

To further understand the principle of consistency, one can analyze the Microsoft Office suite as a case study. Starting with a single application in the package, MS Word 2010 displays consistency in itself by using the same typefaces and color scheme across various tabs. It also uses similar spacing and design among the various buttons within any given tab. When shifting the size of the application window, the individual icons simply shrink down rather than change form in most cases. As a result, this consistency successfully conveys a sense of continuation throughout the app.

To truly showcase the significance of consistency with previous versions, rather than compare the current iteration of MS Word with its predecessor, it might actually be more useful to compare MS Word 2003 to MS Word 2007 when the ribbon interface was originally released. As it turns out, implementing a ribbon UI is more efficient in aggregate than simply having menu items. However, there was significant backlash when the ribbon was introduced and there will likely be additional outrage as the concept continues to be rolled out with Windows 8. The fact of the matter is that most users weren’t dissatisfied with the new ribbon, but were retaliating merely because people are naturally averse to change.

Moving on, the Microsoft Office is quite successful at employing consistency across the entire product line to its advantage. Users who recognize the ribbon UI and the “back-end” UI found within Word automatically know how to work with them in Excel, PowerPoint, and Outlook. In fact, users can even grasp less commonly used products such as Visio or Access with relative ease if they have mastered the controls of other Office software. It is interesting to note that Mindjet attempts to take full advantage of this principle by employing the ribbon structure, a blue-tinted color scheme, and a MS Office icon set to its flagship MindManager product. In conclusion, Microsoft has had great success in using the principles of consistency to lower user frustation and increase user adoption of its products. Therefore, one should make sure that an app is consistent on all three levels to help the user keep it all together.

Posted in User Experience - Tagged , ,

Icons vs Text



When deciding whether to use icons or text to gather user input, there are many factors that influence the final decision. To further complicate the situation, there is also the third option to “do both” by using an icon with text underneath it.  The right answer varies depending on the situation, so one must make the effort each time to carefully evaluate all the variables involved.

Using “Icons+Text” provides the most clarity for the greatest number of people. As a result they are great when used to represent an app, such as the text and tile combos found on iPhones. However, in the context of user controls, this clarity has a major drawback since it comes at the expense of taking up the most space. Including both tends to create excessive chrome, which distracts the user by pulling them away from their content. These limitations make using icons and text as user controls somewhat debatable on desktop apps and simply impractical on mobile apps. Therefore, my conclusion on using both is to avoid when possible.

“Text Alone” also offers a clear explanation of what is being presented, but to reap the full benefits, the problem of space comes up once again. For example, imagine that you have a task management app with a number of tasks assigned to various dates. The user is on the page representing Today, and you want to create a button that helps users mark all tasks from today as completed. The button could say “Mark All Items as Completed”, which has an straightforward meaning, but it does take up a bit of space. The button could be condensed to say “Mark All” or “Clear All”, but then you are introducing some ambiguity since it isn’t totally clear what marking stands for. There also might be some issues with users not knowing whether “all items” refers to only items on that page, or if it affects items from Tomorrow or Next Week. On top of that, when you have multiple buttons, the varying text lengths causes inconsistent button sizes that are impossible to line up to a grid. While text is a valid option, it is not always the correct option.

Personally, I am in favor of using “Icons Alone” when they are properly implemented. Icons generally take up the least screen real estate, while offering a more structured layout. In addition, icons give the app a chance to reach out to non-native speakers. Finally, using images is simply more aesthetically pleasing than using text. At the same time, the aforementioned benefits only accrue assuming the icons were executed properly, and that is far from a given assumption. Individual icons must follow generally accepted representations for people to understand what is going on (see Precendents). They should also be visible at various screen resolutions, and taking the time to create scalable icons requires effort. Additionally, doing it right means not just choosing an appealing icon, but choosing an attractive set of icons. Since users see the icons all at once, the entire group should share a complementary color scheme and design style. Sometimes, a good icon might not be readily available that matches everything else that has been found. In that situation, a new icon must be custom designed. In the end, I tend to lean towards using icons, but given the complications and extra work involved, it may not be the most practical choice. Given the right resources though, it’s hard to argue against an option that improves overall aesthetics, takes up minimal space, and can be widely understood with just a quick glance.

Even after considering the three options above, the best solution might still come from somewhere else. For example, the app could use a tool-tip, which has text that only appears when the user hovers over the icon. Thinking outside the box is always an option. Ultimately, choosing how to represent user controls depends on the context of use, and a designer’s job is to choose carefully.

Posted in Discussion - Tagged , ,

Effortlessness (4 of 10)



Make the computer do the work

Great software is a joy to use because it eliminates all extraneous actions that don’t require the user’s explicit attention and instead allows the user to focus on the task at hand.  To start, this simply means making everything fast.  In this case, the unnecessary “action” performed by the user is waiting for the computer to finish its calculation.  Increasing speed can be accomplished through a combination of many factors.   One way is making technical changes such as intelligent caching or multi-threading.  Another way is making efficiency changes such as clean code or clear information architecture.  And while these proposed improvements require non-trivial amounts of engineering effort,  I would consider them basic steps because the issue is easily identifiable.  Someone just needs to take the time to do something about it.

The next step is to get rid of actual actions the user has to take. In this sense, the software should be doing as much as it can to automate, prefill, guess, and parse. Examples of this include having changes auto-save or having text auto-complete. Furthermore, little details such as auto-positioning cursors or creating unobtrusive tool-tips go a long way in reducing the cognitive load induced upon a user when completing a task. Overall, the goal here is to minimize cognitive friction by making the computer guess what the user wants rather than making the person guess what the computer wants.

The third level of creating an effortless experience is going beyond minimizing clicks and onto removing a series of steps.  A excellent example of this is restoring a user’s previous state to the last time they logged in.  Another example is auto-syncing user content across devices.  In these situations, the computer isn’t just helping eliminate a stray click here or there, but rather helping the user perform an entire set of actions.

Taking a step back, one must be cognizant of the fact that the computer doesn’t always get it right. As a case study, one can look at the decision to pre-populate form fields when a user is going through a checkout process. In this scenario, the computer already has access to a pair of text strings from when the user filled out the billing address. However, the user might end up sending the order to a different shipping address. In these instances, it may be tempting to give the user more freedom by leaving the second entry form blank, but for most people this isn’t necessary.

In concordance with the principles of Simplicity and Sensible Defaults, just because the system can’t predict every use case doesn’t mean it shouldn’t make an effort to speed up the lives of the majority of users who will enter applicable input. Admittedly, it is a fine line between balancing computer assistance and user control, but more often than not, you want to make the computer do the work.

Posted in User Experience - Tagged , , ,

Discoverability (3 of 10)



To Infinity, and Beyond.

If your app is to become a success, then the app must give old and new users alike free reign to explore the its full functionality.  Although the computer should perform the heavy lifting in calculations, there is still a level of user control that must be afforded to allow them to control their own experience.  This type of user control allows them to be adventurous since they are able to freely explore the app without the fear of making a critical error, leading the user to take full advantage of your app.  Those types of users are more likely to come back again (retention) and to become paying customers (conversion).

Thus, make the app discoverable by not punishing users for errant clicks, and instead giving them a clear and simple way to undo their previous actions.  The most common implementation of this is through an undo button, but depending on your audience, you can get a little creative.  Within many Apple products, going back means swiping backwards with three fingers (Safari).  In some innovative new apps, this means circling backwards in a counter-clockwise fashion (Paper for iPad).

Discoverability doesn’t stop with the undo function though.  Steps can be added to prevent the user from making a mistake in the first place.  Especially on mobile devices, where touches are cheaper than clicks, don’t be afraid to add an extra tap for confirmation.  For example, if the user has chosen to delete a file by tapping the trash can icon, you still could have a button pop-up that asks for confirmation.  Note that I said “button” and not “dialog box,” and note that I said “could have” and not “must have”.  While good design means preventing mistakes, good design also means not annoying the user.  There must be balance.

Finally, encourage users to discover functionality by providing cues about how to use UI elements. If an element is clickable, it should appear that way, or a user may never try using it.  Items used with high frequency should be easily recognizable as such.  Furthermore, it should have higher prominence and should usually be positioned where users are apt to click.  On a desktop device that is the top-left area of the screen (where your eyes naturally gravitates), and on a mobile device that is usually the bottom-right (where your thumb naturally reaches).

In all tasks, design with a thought to the logical progression of completing what the user came to do.  Go from general information (creating a notebook) to increasing specificity (changing the font for text). If people will generally discover the features on your app in a certain order, make it easy to do so.

Some sources also call for the inclusion of a tutorial or a introduction video to give users a sense of how to use the app.  While useful, the ideal situation is that users don’t need someone to tell them how to navigate the app since the UI is designed in a way that makes the experience intuitive.  Introduction videos are only necessary in the event that not only is your app new to the market, but the concept is relatively unknown as well (Dropbox).  In these cases, it is perfectly reasonable to explain what your app does since many people might not have even realized they need your app.

The goal is to make your app discoverable by being forgiving of mistakes and preventing those mistakes in the first place.  Design properly and your users will be excited to explore your app to infinity and beyond.

Posted in User Experience - Tagged , , ,

Dominance (2 of 10)



Only one thing can be the most important.

Every element within an interface clamors for the user’s attention, but which element is the most important varies depending on which stakeholder you ask.  Business Development might say it’s the banner ad running at the bottom that belongs to the partner they just signed on.  Marketing says it’s the call-to-action button used to convert visitors.  Engineering says the new drop-down menu they just added is the most important.  The Executive Team thinks all the features are great.  At the end of the day, there is only one stakeholder whose opinion matters: the user’s.

Proper UI design should focus on giving the user only the minimal and necessary information needed to complete their current task.  Even if some of the features are useful (and thus necessary), care must be taken to insure that the less used features take a backseat to those features used more often because if everything is marked as important, than nothing is important.

More often than not, the most important feature to the user is the content.  In a blog or news source, it’s the content that the company produces, such as ESPN providing a recap of last night’s basketball game.  In a content-creation application, it’s the content that the user produces, such as Evernote providing a platform for users to collect all their thoughts.  In a social application, it’s the content that peers produce, such as Twitter connecting you to your friend’s tweets about what happened in their day.   There are many other ways to slice up content, but the bottom line is that the user came to your app or site with a certain purpose, and it wasn’t to view the chrome or a collection links.

Creating a clear hierarchy of components can be done through adjusting size, shape, color, proximity, similarity, and other elements.  Usually, these groupings can be applied by going through the Gestalt Principles:

  • Figure/Ground – Elements are perceived as either figure (element of focus) or ground (background on which the figure sits).  The most dominant object is basically the figure.
  • Area – Make something more dominant by increasing the size. For text, make the font size larger.
  • Similarity – Make something more dominant by having it be dissimilar from everything else.  When everything is colored in black, but one line of text is in red, it really jumps out.
  • Unity – Make something more dominant by unlinking the visual connectedness it has from other elements.  When everything is on one line, have the dominant element one step above the line.
  • Continuation and Closure – Make something more dominant by being at the end of a logical progression of elements, even if they are not directly connected.  The user will complete the connection for you.
  • Proximity – Make something more dominant by having it spaced farther apart from everything else.

Overall, there is a tendency to perceive things holistically and to find mean in the way the parts relate to the whole.  Therefore, we understand meaning from a design not just from the individual elements, but also between the relationship between the elements.  So if the balance between the elements is broken, then the user isn’t just annoyed by isolated parts of the app, but have disapproval of the app as a whole.  At its worst, this cognitive dissonance causes the user to abandon the app completely, writing it off in their mind.  As a result, designing a harmonious balance is crucial to an app’s success, and that starts with remembering only one thing can be the most important.

Posted in User Experience - Tagged , ,

Simplicity (1 of 10)



When in Doubt, Take it Out

If you ask the average person what it means to have good design, she will probably talk about creating something that is clean and simple. And it is with good reason that “Simplicity” is often the first axiom that comes to mind. Keeping things simple reduces clutter and forces the designer to concentrate on the essential aspects. It also limits bloat and allows your application to run faster. This in turn produces a better user experience since the user is not overburdened with distracting noise or forced to needlessly wait around.

Additionally, simplicity plays a strategic role in product design because it makes the process easier by limiting the amount of work that needs to go into each release. This is important because trying to squeeze too much into each iteration can often lead to delays and sometimes can even prevent the release from going out at all. Keeping the design clear and focused means the team always makes progress, however small.
Another unforeseen benefit of simplicity is that it prevents the Paradox of Choice. When users are presented with a multitude of options, not only does that fail to bring more value, there is actually a net negative effect as the customer feels anxiety and uncertainty in deciding which option they want. Thus, making a thoughtful decision for the user and purposely leaving out certain choices improves the overall user experience.

Finally, there are the long-term benefits to keeping things simple. Case in point, it’s generally easier to add new features than remove previous ones, even if the old features were rarely used. Users are loss-averse, so taking something away can cause undue damage to the brand of the product.

So enough about why simplicity is important – how do you do it? The first and most obvious step is to minimize “administrative debris” (as Edward Tufte refers to it). Take out all the chrome, all the extra layers, and all the nice-to-haves, until you are only left with the core essence of what your product offers. If you are absolutely brutal in trimming the fat here, that is often all that needs to be done.

But there are some other techniques as well. A great one to use is Progressive Reveal, where you show more elements only when the first couple of items have been filled out. Another is to create just-in-time features that only come up as the user needs them, such as pop-overs or modal dialogues. Another idea is to hide features using dropdown menus or hidden menus.

However, simplicity doesn’t just refer to features. It means better communication and ease of use. Remember the speak the user’s language and use words and concept from their world. Clear out any jargon or complex wording so the user doesn’t need to struggle. Eliminate extra steps where they are not needed. Ultimately, just keep things simple!
With the never-ending cascade of departamental demands and customer requests, it is all too easy to add features that aren’t wholly relevant to the main focus of your app. But you must always ask yourself if a proposed feature directly supports the user’s goal, and when it doubt, take it out.

Posted in User Experience - Tagged ,
← Older Entries