Refining Simplicity

Go to article

by Jared Lewandowski

Comments (5)

Print

Share on deliciousShare on diggShare on email

52

Simplicity is at the core of what we do as user experience professionals. Its importance can be found in almost every design principle and guideline out there, evidenced in the work of everyone from IBMto Dieter Rams. Author Ken Segall even wrote a book about Steve Jobs’ passion for simplicity, titledInsanely Simple.

But before we get started on how we can better refine simplicity in our own work, let’s review what the typical UX process looks like. First, in order to achieve an easy to understand and rewarding user experience, it’s important to understand and identify the problem. For every problem, there are usually two considerations: the various expectations of the user (obvious) and the needs of the business (sometimes not as obvious, but just as important).

Once the problem has been identified, we can begin to work towards an end result, which should ultimately deliver a solid solution. Making this solution as simple as possible is the preferred form of refinement.

Of course, this is all pretty familiar stuff in the field of design and engineering. What can make things difficult are the additional complications that crop up along the way. These can come in the form of formal requirements, meeting notes, or even casual hallway discussion. To limit complexity, I’ve always tried to adhere to a set of rules that help me avoid over-complicating the problem while inspiring simplicity.

Context is King

Keeping things in context keeps us familiar with our surroundings and frees us from worrying about getting lost. Imagine what it would be like driving around with no street signs; no way of knowing where you were or where you were going. People like to know where they are at all times, especially when interacting withtechnology. Remember, technology is still a learning experience for most people, especially as it continues to evolve.

Being familiar with something allows for a sense of ease that encourages a smooth overall experience. Recently, I was put on hold over the telephone and told there were 17 people in front of me. But what did that mean? How long would it take for each person ahead of me to be taken care of? An easier method would have been to put the wait in context by giving me an approximate time, making it easier for me to determine if I wanted to continue waiting or try again later.

This same principle applies to web design when taking a user through a process. Keep them aware of and familiar with their surroundings so they know what to expect.

The recently released task management software, Kickoff, does a great job of this. I can easily discuss a project with other team members, keeping my notes and screenshots in context with the project I’m working on. Other examples are the contextual menus of Apple OS, Adobe CS, and the innovativeMicrosoft Office ribbon.

On the flipside, we need to be careful not to assume too much of what the user is expecting to accomplish. Doing so will only confuse the user. So be sure you’ve spent efficient time on identifying the problem.

Respect Existing Patterns

Most of the activities we do online have become second nature, often modeled after real life habits (for exampe, to get rid of something in both realms, you place it in a trashcan).

Some common examples of desktop-specific patterns include infinite scroll, breadcrumbs, and progressive disclosure. And in the mobile space, swiping, scrolling, pinching, and holding. While it’s always good to try and experiment with new patterns, such as drag and drop to upload, when you do this be sure to guide the user as much as possible without getting in the way. If a process is more complicated, include helps or hints using progressive disclosure to help them along. In this example, Twitter does an excellent job showing deeper level actions once a user hovers over the message.

Becoming familiar with interaction patterns will also do wonders for your design. Apple’s Human Interface Guidelines are an excellent resource for understanding many common interaction patterns.

Stay Focused and Fragmented

While it’s important that you stay focused on the primary task, be sure to also provide options along the way in case a user veers off course. A primary task can usually be broken down into smaller chunks, while still supporting the overall goal.

For example, creating a new account can be broken into three tasks: 1) Providing the necessary data to create the account, such as an email address and password. 2) Uploading a user photo and additional personal information such as full name, address, phone number, etc. 3) Setting other options and notifications. Identify these early and provide a fragmented approach to complete a task. This way the user can work at his or her own pace and not worry about having to do everything immediately.

Other common implementations of this are the rise of gamification and the profile progress indicator found on LinkedIn. This is a great way to get the user engaged immediately, while still keeping them interested in wanting to give you more information.

Reduce Clutter

This one can be tricky, especially when you work within an organization that already has UI standards in place. Clutter can come in the usual form of copy, disclaimers, and instructions, but also in the way certain buttons, icons, and overall colors are implemented.

Ask yourself if that gradient is really necessary, or if the icon is really needed to convey further definition for a specific action. A rule of thumb here is to only show what you need, when you need to.

Think about using images to convey purpose, as images are easily consumed. Also, our attention spans are getting shorter every day, especially in the current era of digital immediacy. Use as few words as possible and avoid lengthy descriptions. A call to action should be no more than a simple sentence.

In addition, avoid any possible distractions that may derail the user from their original goal or purpose. Starting a project off simply is a great way to allow room for future enhancements. Don’t trap yourself with early unnecessary features.

Keeping It Simple

There are many more methods for refining simplicity found both online and in print. Keeping it simple is not only a great way to ensure that you and those using your product don’t go crazy, it also inspires confidence in the user and shows that you trust them to make the obvious decisions.

In the words of John Maeda, “Simplicity is about subtracting the obvious, and adding the meaningful.”

Image of golden egg courtesy Shutterstock.

Gamifying UX Design

Go to article

By Sarah Park

DECEMBER 18, 2012 0 COMMENTS

4 Game Mechanics to Engage your Users

The integration of game mechanics into an application or website, known as  “gamification” is used to increase participation and engagement. As user experience designers, we are constantly seeking new ways to engage users, so gamification is assumed to be a natural step. But gamification is more than just an added layer – there are many overlaps between pre-existing game mechanics and existing UX design principles.

Adding Appropriate Game Mechanics

Games involve risk-taking, skill, and a varying degree of challenges and actions the player must overcome. Games’ challenges have to be challenging enough to keep the player engaged. However, your web application should be like consistently winning the lottery– takes minimal effort and is easy to use, but is very rewarding and engaging.

Because of this difference, UX designers need to go beyond slapping on any game attribute. To quote John Ferrara, “Design considerations like the context of use, efficiency of navigation, complexity of decision-making, and mental models are native concerns of UX designers.” These are the areas where appropriate game mechanics can benefit an application.

We need to understand the why behind key gamification techniques. Only then can we recognize the UX design techniques inherent in these game mechanics.

Provide users with opportunities to succeed.

1. Show users their progress.

Breaking up large goals into smaller and easier steps creates more chances to feel a sense of achievement. A large goal that takes a long time to complete is intimidating, but by using progress bars, check marks, and other indicators, users are motivated every step of the way.

Keep this in mind for sites where users must fill out many forms before accomplishing their end goal. In UX design, this is usually referred to as progress dynamic, while in game design this is called progression or levels.

Linkedin uses a simple progress bar to encourage people to complete their profiles – a process which is both inherently useful, but also more fun when tied to a visible goal.

Domino’s Pizza gives users a way to visually track the status of their pizza. The main concern (i.e. user goal) customers have is “where is my pizza?” Even though they’re told it’ll take 30 minutes, being able to see the individual steps makes it feel as though the process moves faster.

2. Add Value with collectibles.

From expensive paintings to rocks – we know people like collecting things. Whatever the collection may be, the collector has invested some emotional value, and this value accompanies virtual items as well. Virtual collectibles such as badges and points can be used as great incentives and immediate rewards for small goals.

Your users may not need to collect any badges to accomplish your app’s goal, but these virtual items encourage user engagement by adding to the value of their actions and progress.

This relates to the game mechanic of having bonuses for players, and these virtual goods gives website users more attachment to the site.

Users don’t use Codecademy for the badges– they use it to learn how to program. But learning a skill is a vague, long-term goal. What helps users retain motivation in the short-term are the colorful badges and points they earn at Codecademy. Instead of grades (where users can feel failure for not achieving high enough) these virtual goods only accumulate (i.e. users only feel success).

While badges are commonly collected items, remember that users also collect everything from friends (e.g. Facebook) to videos (e.g. YouTube).

3. Personalize the experience.

In games, players can sometimes change their interfaces, characters, style of play, or character story to create a personal experience. Whether it’s an avatar’s hair color in a game or a profile picture in a website, the ability for personalization attracts people by giving them a form of ownership and value towards the platform.

For some games, replay value is added by allowing players to make choices that affect the game’s story. Thus, the player will be inclined to play the game multiple times since the game will not provide the same experience the next time around. The same thinking applies to web applications. When a user logs into their account for an e-commerce site, for example, and sees that his recommended items are new but still related to him, he will be inclined to visit again to discover new recommendations.

Before Netflix shows users any movies, they narrow down what movies are more likely to be successfully clicked on and viewed according to users’ tastes. Instead of having the user do the work and search for content relevant to her interests, the application does the work.

4. Predict user actions.

In games, feedback refers to everything in the player’s environment. Positive feedback, such as seeing an amusing animation when pressing a certain key, reinforces player actions while negative feedback, such as dying and needing to restart a level is a signal to the player to do something different. The goal for games is to have a challenge that is not too easy or too challenging for the player.

In UX design however, it’s important to ensure that any task can be done as effortlessly as possible. This means, any negative feedback (e.g. error messages) must be as informative and as helpful as possible. In other words, any roadblocks the user may encounter should guide the user swiftly to the correct page or goal instead of frustrating him.

Twitter demonstrates form-field validation. This prevents users hunting for any errors at the end of a long form filling process if errors are pointed out in real time.

Google use live suggest for their search field to quickly react to user text input and make the task of searching more fluid and swift.

Same Concept, Different Wording

The underlying, psychological reasons why some gaming methods are engaging and rewarding are very similar to why some UX techniques work to retain users within a website. While the appeal of adding a game’s exciting elements to an otherwise plain website can be alluring, make sure the user’s journey to her goal isn’t hindered from simply adding on features. If we pay attention to why certain principles work for games, we can then reapply underlying concepts to strengthen our UX strategy.