Domnicana Victoria Web Design

So easy , So wonderful, so Domnicana Victoria Web Design

Tag: UX

The Value of UX Research in Product Development

When we talk about user experience, we quite often end up discussing UX Design. Some may even refer to UX and UX Design as a same thing, which they are not. Today I would like to draw your attention to the “pre-story” of amazing and usable design — user experience research.

Let’s try to answer two main questions:

  1. What is the value of UX research?
  2. How does it fit into the product development process?

Before diving any deeper into this topic, let’s first make sure we are all on the same page and to do so I want to refer to the basic understanding of user experience. I would like to quote Jacob Nielsen and Don Norman, people who can rightfully be named the “founding fathers” of user experience discipline. According to their definition:

“User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.”

So when we talk about a user’s experience with a product, we mean the quality of user interaction not only with the product itself, but everything, including the design and copy of your ad, the look and feel of your website UI, the main features and functionality of your product, its usability, post purchase experiences and even the button label in your newsletter!

Obviously, creating a satisfying user experience is not that easy, but it is certainly possible when you know what your users need and you have the skills to build it.

To cut a long story short, with user experience research you get the knowledge and with design skills you build the product.

Let’s have a look at this illustration by Dan Willis that brilliantly highlights how exactly UX solves user problems.

According to Willis, UX includes visual design, information architecture, interaction design, usability, user research and content strategy.

It once again emphasizes the idea that user experience is a combination of multiple components and if you want to create a truly amazing product, those components need to work together in prfect harmony.

With this in mind, let’s now try to answer the first question:

What Is the Value of UX Research?

User experience research, which is basically the same as user research or design research or user studies or whatever other naming you may come across, is a bridge between users and business people.

I do not mean to say that entrepreneurs don’t care about user needs and wants, because a successful business idea eventually solves this or that user problem. How well does it solve the problem? How satisfied users feel with the solution?

UX research tries to put people in the center of product development process.

If we try to give it a definition, it would sound something like this:

User experience research is the process of understanding user behaviors, needs and attitudes using different observation and feedback collection methods.

So the true value of UX research is that it’s based on unbiased user feedback.

It’s not influenced by someone’s own opinion or authority. It simply speaks user’s thoughts.

This should be your number one argument when trying to communicate the importance of user research.

How Does It Fit into Product Development Processes?

User experience research brings valuable user insights, but where does it fit in the product development process?

Do we need to do the research before the development or after? Maybe in the middle of the process?

There is no obvious answer to this question. It depends on the product type and its life cycle. But if we look at the product development as a dynamic process that is ongoing and doesn’t stop with the product launch, then we can identify two main roles of UX research:

  • Initial user research
  • Ongoing goal-based user research.

Initial UX research is conducted in early stages of product development. It helps inform the team and the stakeholders or entrepreneurs about the target user of the product, how and when he or she is going to use the product and what main problems the product will solve.

Usually the output of initial user research are user personas, user journey maps and product use scenarios.

This information is critical when making product and design decisions.

Ongoing goal-based UX research can be done at any stage of product development, whenever there is a distinct question or problem that needs to be solved.

For example, you have noticed that the percentage of completed checkouts in your online store is rather low and you want to find out why. You can choose to run a user testing with a handful of target users to understand why they may be having trouble completing checkout.

This is a problem of goal based research.

It helps make important decisions based on actual user feedback. Especially, when you are in the middle of product development process and have multiple design solutions to choose from, user research can be really helpful.

Depending on the type of problem, goal based UX research may be conducted using methods like card sorting — for example if you need to optimize the information architecture; heuristic evaluation — if you are trying to identify severe usability problems; or usability testing which can be conducted for a number of different studies.

User experience works best when it is incorporated into every stage of product development. This way we can test, validate and iterate essential product hypothesis based on real user feedback.

Conclusion

Although interface and interaction design play a great role in creating remarkable experiences, they cannot work without real user data. After all, how can you create a design that works without knowing what actually works for your user? User experience research solves this problem and bridges the gap between visually attractive design and usable products. If you know when and how to use each of UX research methods you will be able to make informed, and data-backed, design decisions.

How Time Perception Impacts Interaction Design

How can you use time to your advantage in interaction design? Is it even controllable?

The elements of timing can be difficult to describe, but we all feel them, from the annoyance of waiting for something to load, to the exhilaration of breezing through page after page. The scale of timing is wide, ranging from noticeable increments to the tiny milliseconds that individually seem meaningless, but can add up to sway a user’s opinion one way or the other.

Our discussion in this piece applies all content that changes over time: video, sound, animations, and more. We’ll start by explaining why time matters, then discuss the elements of timing and how they can be improved, and then we’ll explore how speed and simplicity play a role.

Why Time Matters

Time can be a difficult concept to grasp because its range is so vast. Just as the size of an electron is almost unfathomable compared to the enormity of our galaxy, so too the span of a millisecond seems unrecognizable to the duration of a millenium.

But digital time is not the same as human time. A few seconds can mean the difference between a frustrating experience and a delightful one. We can attribute that to basic human psychology:

  1. Limits of memory and attention — As we described in Interaction Design Best Practices, designers must evaluate the cognitive load of interfaces. Otherwise, users will suffer from the loss of information in short-term memory, which causes frustration.
  2. People must feel in control — Nobody wants to be at the mercy of technology. Like we stated in a recent blog post, some people still treat computers as a black box. Digital products that make you wait will give off the impression of incompetence and/or arrogance.

There is a rhythm to user actions. In the field of UX, the power of time is measured in magnitudes of 10. It takes users 0.05 seconds to decide if a website is worth their time. If they decide to stay, they usually leave within 2-4 minutes.

Whether the goal is getting an update on your Facebook feed or comparing and buying products on Amazon, every experience breaks down into a series of interactions, and the time between interactions has a compounding effect on the user experience.

Elements of Time in Interaction Design

So how exactly does time relate to interaction design? David Malouf, Design Consultant, believes that time separates interaction design from all other UX disciplines. Time is more than just a linear progression because all interactions happen over time. As Malouf suggests, we can actually examine time from 3 separate perspectives: pace, responsiveness, and context.

1. Pace

In terms of design, pacing relates to how much is accomplished in a given amount of time. Immediately, you may be thinking, “well, the more the user can accomplish, the better,” but that’s not necessarily true.

Source: Hick’s Law

Experiential flow is much more important than the sheer number of available actions. As described by Hick’s Law, too many interface objects actually impede decision-making (and therefore goal accomplishment).

Consider, for example, the difference between one gigantic signup form and a multi-page series of smaller forms with the same information. The one long form will take less time, but the series of smaller forms will seem more manageable and less complicated to the user.

In the below example from LinkedIn, combining a wizard form with a progress bar is a great tactic for improving the pace of the experience. The long process of creating a professional profile is divided into 4 manageable steps. Users can also see how far they’ve progressed, which incentivizes them to proceed further. Pacing is less about efficiency, and more about what the user is comfortable with (UX) — not overburdening them, but not slowing them down either.

 

Source: LinkedIn Wizard Form

2. Responsiveness

A product’s reaction time relates directly to the level of user control. According to Jakob Nielsen, the 3 most important response time ranges for digital products are:

  • 1 second – Direct Control — The user feels they are directly manipulating the system, as they would a physical tool. No feedback is necessary except the visual manifestation of their results.
  • 1 second – Indirect Control — The user notices the delay, but still feels in control over the site experience. For example, this delay is acceptable for loading new pages.
  • 10 seconds – Little Control — The user loses their attention and their workflow is interrupted. Feedback is crucial to minimizing abandonment, which is why load screens are so popular.

Delays in response time must match the magnitude of the task. For instance, 5 seconds is acceptable for loading a cloud-based dashboard, but it’s unacceptable for triggering a dropdown menu. The longer the delay, the more the relationship between the user and the interface dissolves.

Source: UXPin

3. Context

How, when, where, and even why an application is used all affect the perception of time.

For example, the average website visit lasts 2-4 minutes, while the average ecommerce sale lasts 28 minutes (and that’s not even factoring in what kind of sale — buying a car could take months). Likewise, someone comparing prices on their mobile device while at the mall values speed more than someone doing the same thing at home on their couch.

Source: Understanding Time, Place, and Context for Mobile Computing in the Enterprise

If you find that users are leaving your site prematurely, you may want to revise your link copy. You can also check the visual hierarchy (colors, contrast, typography) of the page to ensure important information is emphasized.

However, these attention-grabbing methods can be counter-intuitive on a site where you want your user immersed in a single page of content, such as a blog. In that case, you’d probably want to make better use of white space to emphasize the content (similar to Medium).  The same strategy for capturing attention has two different effects depending on the type of site — it all depends on context.

Faster = Better…To A Certain Extent

When discussing an interface’s pace, we mentioned that faster is not always better

To be fair, most time-related usability problems result from the system being too slow. However, there are some instances when speed kills. Most often, an interface that is too fast can lead to two problems: information is missed, or the users can’t keep up.

Source: FourSquare

1. Users Miss the Information

When information changes too quickly, the user might miss it, even if they were simply looking at the wrong part of the screen for a moment. These apply mainly to unexpected actions that were not initiated by the user, and generally the farther the change is from the relevant action, the more likely the change will be missed. A simple fix is to draw attention to the change with properly executed animation (which we’ll discuss later in the book).

We can actually look to Siemens for a cautionary tale of excessively fast interfaces. In this case, users were shown the below site and asked if they could find out if Siemens was running any special sales on washing machines.

Source: Auto Forwarding

As Jakob Nielsen, co-founder of the Nielsen-Norman Group describes, users failed the task even though the top of the page mentioned the sale in massive font. Why did this happen? Because the carousel (which looks more like an accordion) auto-rotates every 5 seconds. Once that screen changed, the only other indication was the sidebar on the right side — and that was mostly ignored because the two calls-to-action look like banners (which induces banner blindness).

2. Users Can’t Keep Up

Even users that notice rapid on-screen transitions still may not understand them. This is most common with carousels, rotators, and other automatic functions — a user becomes intrigued by the image on the screen, but by the time they move their mouse over it, it’s been replaced by a new, less interesting one.

You can see that the prior Siemens example shows a combination of bad UX decisions. The 5-second carousel, however, ranks as the worst. Because of it’s prime location on the page, the carousel image immediately draws user attention. But instead of clearly communicating the sale information, the carousel disorients the user by changing the slide every 5 seconds. Users didn’t trigger the action, so in the effort to regain control of the experience, they become more sensitive to other UX shortcomings (like the bad copy, for instance).

Source: Should I Use a Carousel?

In fact, it’s best to do away with auto-rotating carousels altogether since they are distracting at best and frustrating at worst. Users trying to accomplish goals unrelated to the carousel content will find it distracting. Users who actually need to access the content won’t react in time.

Reactionary problems are even worse for foreign-language users, the elderly, the disabled, or those unfamiliar with technology. To make sure your interface doesn’t react too quickly, here’s some other helpful tips:

  1. Hand control to the user — Rapid on-screen updates must be restricted to actions initiated by the user. Otherwise, this violates the Principle of Least Astonishment that states that users generally don’t like surprises.
  2. Slow it down with an animation — Try signalling any on-screen changes with animations that last between 800 ms – 1 second.
  3. Give each slide enough time — If you absolutely must use an auto-rotating carousel, read the copy aloud, then multiply by 2.5. That’s how long you should show each slide. Then once people mouse over a slide, make sure the rotation pauses.

Remember, perception is reality in interaction design. It’s much better to make the wait more pleasant than it is to push people forward in line.

Strive for Simple Clicking Over Quick Clicking

While we’re on the topic of speed, it’s important to dispel another common design misconception, the 3-click rule — the rule citing that a user should be able to access any content on a site within 3 clicks. The 3-click rule can be best described as “well-intentioned, but misguided.”

Source: 5 Lies About UX You Still Believe

This chart created by former Hubspot UX Director Joshua Porter shows that there’s no real correlation between the amount of clicks and a user’s satisfaction. The lesson here is that designers should worry less about users completing a task as quickly as possible, and more on completing the task as easily as possible — two very different goals that warrant very different interface designs.

To further our point, just take a look at this diagram. It follows the 3-click rule since any page is accessible within 3 clicks, but does that pattern actually improve usability? It actually hurts it because users now need to sift through too many navigation choices at once. Besides, once someone reaches a new page, they’ll need to sift through all the options again.

Source: Oracle

Just take a look at the Oracle site above. Sure, you can access any product category (like database or Java) within 3 clicks, but do you actually want to?

Instead, we recommend following the 1-Click Rule: every interaction must bring the user 1 step closer to their goal. This tactic helps you trim the number of top-level navigation items without sending the user down a rabbit hole. It helps you focus on the experience of exploration rather than the path itself.

1. I visit the homepage. Navigation options include Products & Services, News & Stories, and Log In or Enroll. I click Log In or Enroll.

Source: Chase

2. My account page loads. I see a call to action for Ultimate Rewards and I click it.

Source: Chase

3. The rewards page loads. I see options to either Use Points or Earn Points. I click on Use Points.

Source: Chase

4. Once the point redemption page loads, I can see how many points are available and how many I can redeem. I select the amount, redeem for cash, and complete the goal.

Source: Chase

More than 3 clicks are required, but each of the clicks requires very little effort. Each click also moves the user forward a step on their path to the goal. Now, if you were adamant about the 3-click rule, you might make one of the top-level navigation labels “Use Your Rewards”. The clicks are certainly reduced, but this wide-and-flat strategy will eventually present too many items to sift through at once. Usability is therefore sacrificed for the sake of a shorter click path.

We want to emphasize the spirit behind the 3-click rule: clicking should be as simple and organic as possible. Make sure that the time users spend on site isn’t just minimal, but worthwhile.

Takeaway

When it comes to interaction design, even a delay of one second can mean the difference between success or failure. If the user experience is too slow, then people become frustrated. If the user experience is too fast, people might miss vital information (or not know what it means). Understand the human perception of time, the limits of speed (and carousels), and the importance of directness in clicking.

When in doubt, remember this simple usability principle: clear is smooth, and smooth is fast.

The 4 Essential UX Documents Every Designer Needs

When it comes to UX documentation, wireframes and prototypes are certainly among the most important.

But that’s just the beginning. We’ve actually found four other documents to be extremely practical for everyday design. What sets these four apart is that they help designers understand the users, and that more than anything determines the design’s success.

Photo credit: Rosenfeld Media. 

In this article we’ll explain why these easily skipped “supplementals” are really “essentials.”  To learn about 25 helpful design documents and processes, check out the free Guide to UX Design Process & Documentation.

1. Persona

We’ll start with the most telling of user documentation: the persona.

Your personas (limit them to 2-5) go beyond your target demographics. They are fictional personalities based on research which act as a placeholder for your ideal user during the design process. Personas include personal details more descriptive than age or income. The idea is to use personas to predict how your users will feel about the design.

In this role, personas have been proven to drastically improve the final user experience.

Source: Persona Tool

The key to a persona’s effectiveness is in the research.

As described in The Guide to Usability Testing, this research typically includes both qualitative and quantitative testing. Qualitative research like user interviews, field studies, or even a diary study are the best way to understand your user’s thought processes. Quantitative tests like analytics or surveys will complement the more abstract results with cold, hard facts.

Photo credit: Nicholas Wang.

Once you have your research, you’re able to construct an actual persona document. While the sections vary, we recommend each persona (as shown above from our template in UXPin) contain the following:

  1. Photo — Almost every persona includes an image, usually a stock photo. Giving your persona a face greatly helps in thinking of them as a real persona. Choose a realistic photo, so leave out any celebrities.
  2. Profile — Basically, you’ll want to put all the general demographic information here — name, age, etc.
  3. Personality — There is a lot of diversity in this category, depending on the company. It could be a detailed narrative delving into their psyche, or nothing more than a few keyword characteristics like “intelligent” and “ambitious.”
  4. Platforms — Which platforms do your personas use? How familiar are they with each? Which do they prefer and avoid? This is a great place to solidify their webographics.
  5. Goals (Motivations) — Here’s where you include the 3 goals discussed in the tips section: life goals, experience goals, and end goals. Remember that end goals are the most important.
  6. Influences — What other brands and products influence this persona? This will factor heavily into their expectations of your site, personal preferences, and decision-making/behavior.
  7. Likes & Dislikes — Another way to flesh out the persona, this section can be a practical quick-reference guide to optimizing your design for a specific user. Make a list of elements the user would appreciate, and another list of items that would frustrate or annoy them.
  8. Personal Quotes/Mottos — While completely optional, including some personal quotes and life mottos will help you get inside the head of your persona, and therefore your users.

When personas are created correctly, it feels like having an extra person in the room to lean on for design decisions.

2. Empathy Map

Like lightweight versions of personas, empathy maps can be made more quickly and easily in case you’re short on time or resources. Empathy maps strip away the personalities of the persona, and focus only on how the user feels in a given situation.

Source: Tadpull

Tadpull describes the best process for making one, and includes this free template to help you get started.

  1. Setup – Collect a group of test users, or assign a persona to each participant on your team. Then, give each one a separate color of Post-It note.
  2. Pose Questions – Ask a series of seemingly obvious questions, such as “Why do you use this or that site,” or “How do you choose which site to use.” These questions should always be open-ended.
  3. Map Notes – As the answers roll in, scribble your notes and thoughts on your chosen color of Post-It. Apply notes to the appropriate section of the map.
  4. Weed Through Ideas – Go through all the notes and leave only the best and most useful ones.
  5. Take a Break – Allow the notes and ideas to ruminate for a day or two. Try hanging the empathy map in a common space like the break room so it’s not completely forgotten.
  6. Define Goal – See the area on the bottom that says “_______ needs a way to _______ because _______.” Now that you have some insights, fill that in for your target users. Pay special attention to the “because” part, as that will spark critical thinking about why you’re designing.

At UXPin, we actually upload empathy maps into our own design app so everyone can comment and fill in details. If you use Slack or any other collaborative tool, the same trick works.

3. User Scenario

If your personas are the characters of a story, then user scenarios are the plot.

User scenarios revolve around a goal – let’s say ordering a overnight gift for Mother’s Day – and how your user accomplishes it. The facts include where they click, how long it takes, even their emotional responses throughout. Foretelling the user’s processes has lots of obvious advantages to UX and UI design.

Shlomo Goltz. “A Close Look at Personas: What They Are and How They Work (Part 1).”

User scenarios can come in several varieties. For example, your scenario could list out all the technical details, such as a step-by-step list of all the pages the user visited (and how long they spent on each). Another option is to focus more on the feelings of the user, in which case the scenario will read more like a story than a data sheet.

Regardless of which type you decide works best for you, when building your scenario, consider these factors surrounding your user:

  • Behavior – What idiosyncrasies does your user have when interacting with websites? Do they log in right away or when necessary? Are they looking at other websites simultaneously?
  • Motivation – Why does your user want to accomplish this goal? How badly? What are they willing to put up with?
  • Environment – Is the user at work, at home, or on the go? Are they using a computer, smartphone, or other mobile device? Are there any outside distractions?
  • External Factors – How fast is the Internet connection? Are they under an oppressive time constraint, or can they take their time?

Most important, try visualizing your user trying to accomplish their goal. As always, the more thorough your initial persona creation, the more accurate the user scenario will be.

One final piece of advice on scenarios – don’t waste time plotting out every conceivable task. Stick only to the most important ones, and these will give you a better idea of the processes for the less common ones later.

To learn more, check out this excellent guide from UX For the Masses complete with steps and examples.

4. Customer Journey Map

The customer journey map is similar to a user scenario, except it ranges from before and after the experience (not just during). This allows designers to get a fuller context of their product – after all, a user’s experiences begins before they even start using the product and ends later than when they’re finished with it.

The customer journey map draws on the information compiled in your personas, empathy maps, and user scenarios. It’s just a matter of combining the user’s personality (persona) with how they’re interacting with your site (user scenario). Each stage will offer different emotional progressions.

Source: UXPin

In general, a customer journey map can be written in a chart format, like this template (shown above) that we ourselves use at UXPin. For each individual stage of the process, make sure you cover the following areas concerning the user:

  • Goal – What do they hope to accomplish in this phase?
  • Expectations – What does the user think will happen? What ideas are they bringing into their experience, whether justified or not?
  • Process –- How do they hope to accomplish their goal? What are they actually doing?
  • Rating of Experience – How would the user rate each phase of their experience?
  • The Good – What does the user like about this phase? What works well?
  • The Bad – What doesn’t the user like about this phase? Where did problems arise?
  • Improvements – Based on all the previous information, how can you make the user’s experience better?

The amount of detail depends on your company’s size. Smaller companies will want to keep it light, as designers are probably already working closely with the product team. Larger companies can afford to flesh this out more, to ensure the information communicates across departments.

Customer journey maps can even work as a kind of “design audit.” It can be used effectively in anticipating issues before the design process, but also in addressing or analyzing issues in an existing system.

Conclusion

If you’re a designer new to a company, ask if these documents exist as soon as possible. If they don’t, work towards creating them. With these four documents, you can truly understand how the user and the product fit together.

The Ultimate UX Design of the Perfect CTA Button

The Importance of Buttons

A button placed in the wrong area of a page, which uses the wrong color, can stop a user in their tracks. The button is meant to direct users into taking the action you want them to take.

If they don’t take it, then the button has failed for one of the following reasons:

  • The button is placed in an area that’s unfamiliar to the user;
  • The color turns the user off or doesn’t stand out enough;
  • It’s not immediately obvious that the button exists.

According to UX Movement, we can categorize all CTA buttons as:

  1. Positive – changes, sends or adds information. For example, a button accompanying a newsletter signup box would send information;
  2. Neutral – no changes are made, or the button takes the user back to a screen (e.g. cancel);
  3. Negative – deletes or resets information.

Consider Color and Contrast

UX Movement points out that you want to have clear color contrast because it helps users figure out what action to take. If your main CTA button blends in too much with the background or looks like any other button, then users will feel uncertain. At best, this will slow them down. At worse, they won’t click.

This is especially important for your users who may suffer from colorblindness. Colors can appear very similar to the colorblind user even when they appear completely contrasting to sighted users.

The red versus green button argument is a good illustration of why you should consider users with color blindness.

Image source: UX Movement

Let’s review the red/green debate briefly. Red typically implies “stop” or “delete” in most people’s minds. But there are those that hold fast that users are more inclined to click a red button over a green one. So the question becomes — which one to choose?

Take a look at the image above. On the left is how someone who can see colors would see the difference between red and green. On the right, look at how a colorblind user views the two colors — both of which appear as very similar shades.

As we described in Web UI Design for the Human Eye, the discrepancy is because red and green appear opposite each other on the color wheel (they complement rather than contrast each other). Faced with this, a colorblind user processing and interpreting the colors probably won’t take the action.

Red and green appear opposite each other on the subtractive color wheel

Image source: Wikipedia

Using red and green next to each other would certainly be a mistake. You’ll also want to consider the background color behind the button. For example, a green button on a blue background will just disappear because the colors are too similar. This effectively cancels out any action the user might take and causes analysis paralysis.

See the image below for a quick color psychology guide to inform your choices. It will depend on the type of site you’re designing  and its brand personality. You should also think about the user and who is likely to be using the site and clicking on the buttons to inform your choices.

Image source: Web UI Design for the Human Eye

So it’s not only necessary to be careful about what colors you choose for your buttons, but it’s important to also ensure that you choose contrasting colors to the rest of the page and for accompanying buttons.

Place Your Button in a User’s Path

Where on the page you place the button is just as important as its color and the text on it or accompanying it.

Buttons should definitely appear prominently on the page.

However, consider the user’s path through the page. As Jeremy Smith points out in this excellent Crazy Egg blog post, buttons need logical placement as to where the user is going to next. You’ll want to consider how people actually read the page.

Let’s take a look briefly at F-patterns and Z-patterns.

The F-Pattern

The F-pattern is the standard for sites with a lot of text, such as news site or blogs. The user’s eyes will scan across the page, left to right, then go left before dropping down and scanning across the page again. In the example below, you’ll want to have your call to action where the eye ends as it scans left to right.

Photo credit: Web Design for the Human Eye

The Z-Pattern

You’ll find this pattern when content is more spacious and the user’s eye will scan the page like Zorro carving a Z. In the example below, you’ll want to place your call to action along the Z line, preferably near the end of it.

Photo credit: Web Design for the Human Eye

These patterns allow you to put the button within the user’s path. After all, you wouldn’t want to bury the button in the footer where no one will ever see or click it. Finally, don’t be afraid to use web conventions — there’s good reason why things are commonly placed where they are, because they work.

Make Buttons Appear Clickable

There’s a few ways to make buttons appear nice and clickable.

Let’s go through some considerations that Gabrielle Gosha outlines in her excellent Sitepoint article:

  • As we said above, color is an important part of making a button stand out. It’s also useful in making a button clickable. If the button blends too much into the background, a user won’t realize that it’s something you can press.
  • Buttons should also contain text that provide the user with further visual clues to direct action. Text can be used to clearly direct the user, such as “sign up”, “join now”, or “get started.”
  • Give the button some room to breathe. When placing a button below a chunk of text, we’d recommend adding a margin that’s roughly ⅔ the height of the button.
  • Sorry, Yoda, but size matters when it comes to buttons. You want to consider how big the button is in relation to the other elements on the page. Too small and it’ll go unnoticed. Too big and it may overwhelm users. And there’s mobile to consider.

Photo credit: UXPin

As you can see in the above illustration, three different calls to action have different impacts. The left CTA is small yet hard to miss; the center is unobtrusive; the right is so large that it distracts from the content above it. Color and size make all the difference.

Avoid getting too artistic when it comes to creating buttons and keep them simple and rectangular in shape. Replacing a perfectly crafted button with clever text or a GIF rarely results in a good experience for the user – it just confuses them as they are faced with something that’s unfamiliar.

As Kamil Zieba stated in Web Design for the Human Eye: “Clarity comes before cleverness.” Don’t use a button label like “Cool, let’s rock it!” if “Submit” communicates the action better.

Make Buttons Rounded Rectangles

Buttons should be rectangular because again, that’s what we’re used to. We understand how such buttons function.

Photo credit: UXPin

According to Paul Olyslager, these rectangular buttons should also have rounded corners as studies have shown that these perform the best. This is because rounded corners draw attention to the inside of the button as they point inwards. It’s also because we’ve evolved to avoid anything with sharp corners as human beings, as they represent a threat of injury.

We suggest that you read Paul’s four-part article for more information on all aspects of button design, including size.

Floating Action Buttons (FABs)

Before we move onto button placement, a quick word about floating action buttons (FABs) which have become more popular in recent years.

FABs are generally circular buttons which ‘float’ above the user interface and are “used for a promoted action”. We’re seeing more sites use them “to represent the single action users perform the most on that particular screen,” says graphic designer Teo Yu Siang.

Image source: Flipboard

A FAB ‘floats’ on top of the regular content and can encroach on other elements, as well as distract the user from the rest of the content.

Siang goes on to point out that while they seem to be a great idea, and provide good UX in ideal scenarios, in reality, widespread adoption of FABs might actually harm the overall UX.

This is because they reduce the immersive experience as they are overlaid on top of every single UI element on the screen. This distracts the user from the overall experience and as such, you should take care when adding FABs to any page as it could be counterproductive.

Not only this, but as Siang says,

“By taking up real estate on the screen, the FAB effectively blocks content.

This isn’t to suggest that you shouldn’t use FABs at all, but you should certainly take care with their use and placement as they can reduce the number of users taking the desired action.

Button tutorial

Creating an effective call to action depends on several factors, including relative size, color, and text. We’ll create a quick example with UXPin to illustrate some best practices we just described.

1. People see the hero first

The largest, topmost elements get the most attention.

2. Their eyes wander downward

Subtitles come next: bits of text that, being less prominent, create a hierarchy of attention.

3. Content moves them along

There’s a chance that people will skip from the subheads straight to the buttons, but often they need to know where each button will take them. The “sales pitch” text explains in detail why users should click each call to action. This content is a promise: What will tapping a button get you?

4. Calls to action

The calls to action themselves occupy the third tier. Why?

  • Contrast: Button backgrounds that stand out against the body’s background.
  • Text: Clean and legible, usually in a sans-serif typeface.
  • Placement: In a nice, even row.

How it works

This pattern takes advantage of Western languages’ left-to-right flow: Because people are already accustomed to reading from the top left to the bottom right, arranging elements that follows conventional thinking feels natural — even if readers aren’t aware of it.

Further Resources

So that wraps up our discussion and tutorial. If you’d like to learn more about creating effective CTAs for good UX design, check out some of our favorite resources below.

  • UXPin– Web Design for the Human Eye (free e-book explaining how to keep users on a site longer with smart visual design. 30+ deconstructed examples from top companies included.)
  • Hubspot – Call-to-action best practices
  • Hong Kiat – 38 CTA templates that stand out
  • Wordstream – CTA button best practices
  • Content Verve – 10 button case studies with real-life examples
  • Impact Branding – 4 creative tweaks for high-value buttons

5 User Onboarding Techniques for Mobile Apps

There was a time when UX was all about delicate and intuitive design. But as we dive deeper into it, we discover more and more factors affecting the user’s experience with a product. It’s far more than beautiful interface now.

The scope of UX gradually expands covering such aspects as web content and formatting, marketing messages and CTAs, customer service, as well as the overall value of a product. So when we speak about good UX, we imagine a satisfied and happy user… whatever it takes.

And how do we make users happy? By solving their problems in the best possible way.

One of these ways is user onboarding.

what is user onboarding?

User onboarding is a set of activities to help turn first time visitors into active users. It is an ongoing process and not a feature that you can introduce once and then forget about it. It’s basically the first experience with a product which turns out to be so great that you want to use it again.

So good user onboarding flow is not limited to some intuitive interface and cute walkthroughs, cause that’s not what solves the user’s problem. You need to deliver value and show your worth as early in the process as you can. With so many apps out there for practically any task you might think of, your app needs to stand out right from the very first launch.

User onboarding should ideally bring the first time user to that magical a-ha! moment when he realizes “this app is exactly what I need”.

How to Design Good User Onboarding Flow for Mobile Apps?

First of all let’s agree that user the onboarding process varies depending on product type. For instance if you are designing onboarding experience for a SaaS, it’s completely different from what you would create for a mobile app. You have to always keep in mind who you design for and what goals you are trying to accomplish with user onboarding.

But let’s now focus on mobile app onboarding.

What is it that makes some users stick with an app while others open it once and then delete it?

Well, obviously you can’t serve everyone’s needs but if a user downloads the app and then leaves, it means your app wasn’t convincing enough. So as a starting point for your user onboarding research you can do a few contextual interviews with successful users to understand what exactly they love about the app, how it solves their problems and what more they expect from it.

Ideally user onboarding will help the first time visitor experience the best of your app as soon as possible thus turning him into an active user. Easier said than done, but there are a few proven techniques that can help you design great onboarding flow for a mobile app.

1. Interactive tutorial or walkthrough

While some publications consider walkthroughs the same as user onboarding, I personally think it’s a vital part of onboarding but certainly not the same thing. A tutorial is a nice way to greet the user but you should be careful not to annoy him by teaching things he already knows.

So if there’s anything in the app interface or features that might confuse the user, it’s definitely worth doing a quick walkthrough. However try to make it quick, easy and effortless. It’s all about showing how exactly the app is going to make the user’s life better. The story should be about the product and not about the interface, no matter how proud it makes you feel.

2. App permissions

This is a very tricky part in the onboarding process, because asking permissions at the wrong time and place may ruin the user experience and annoy the user to the point of deleting the app altogether. But if iOS users at least have the right to give this or that permission to an app, poor Android users won’t have that privilege until the official release of Android M. Anyway, it is very important not to ask for something you don’t really need to provide the service. But even if your app really needs access to certain information on user’s device, make sure to give something to the user first before asking for permissions. It’s the simple reciprocity rule (best described by Robert Cialdini in his book “Influence”). First provide something of value for the user and then only ask something “in return”. Let them use the product straight away and ask permissions only when the app cannot technically operate without them.

3. Simplify or remove signup

To highlight the importance of having no registration forms just ask yourself how much spare time do you have and how much do you enjoy filling out lengthy registration forms? Not much, I believe.

So ideally a good mobile app onboarding is the one without a signup. However if you do have a registration form, you can still minimize the pain. Do your best to make it as short and comprehensive as possible. Ask very little upfront and try to save user’s time by implementing smart defaults, inline validation, completion status bar or any other usability hacks that work for your app.

4. Lifecycle Emails and push notifications

Now when you have made a great first impression, it’s time to retain your precious users. At this point you can go ahead and use email (if you have previously gathered that information) or push notifications to remind the users about the app. But remember not to be too intrusive. Make sure the alerts and notifications really have value for the user.

You can also run email drip campaigns, which are basically pre written emails that are sent to new users with predefined intervals, say on day 1, day 3 and day 7. With the help of these emails you can guide the users through the app, introduce new features and inspire them to get the most out of the app. Take for example Steller, a social networking app where users create and share visual stories. Steller sends daily “story of the day” emails featuring the most popular stories thus gently nudging users to create new stories themselves or at least browse existing collections.

5. Human customer service and support

It’s always reassuring to know that there are real people behind a product, people who are always ready to help with any issue or question with the app. Caring for your users and making them happy should be your top priority, at least users need to feel that it is. Creating and maintaining good relationships with users is a vital part of onboarding. None of your marketing efforts will speak louder than satisfied users. So make sure to have a well-trained and empathetic customer support team.

So as you see, good user onboarding requires commitment and a whole lot of effort on daily basis. You need to put these onboarding techniques at the foundation of your app marketing strategy, but above all these you need to provide value to the user no matter what you do. Only then you will have a sound product strategy and hopefully your own brand evangelists.

10 Pro Tips to a Smarter Design Process

Being a UX designer myself, its important that we fall back in love with the art of design. Especially when you hit a creative wall.

The reasons vary. Maybe youve been working too fast and too hard and burnt out. Maybe you work in a non-creative environment and contend with a lot of resistance each day. Maybe youve unknowingly become a repeat performer, putting out the same work over and over again. Or maybe youre just bored.

A design process empowers you to confidently innovate because you can map the inception of an idea to its evolution.

Your process should never be so ideal that it cant change. Every project has limitations. Whether it’s resources or skills, your design process must adapt to all these real-life constraints.

Heres 10 tips for improving your own design process based on what I’ve experienced in my own career.

1. Define the problem before hunting for solutions

Einstein once said, If I had an hour to solve a problem I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.

Many designers make a fatal flaw in thinking problems are obvious. Most of the time obvious problems are merely symptoms of the real problem. You will know when youve found the real problem because it will eliminate a lot of other issues at the same time.

As described in the free e-book Web UI Best Practices, start all your design projects with the How Might We…approach of design thinking. Remember that before you design the product correctly, you first need to ensure youre designing the correct product.

2. Know your user like the back of your hand

A developer once told me she was building a product for everybody. That might sound reasonable for a mass market product, but you cant create meaningful use cases if you cant pinpoint a specific user.

Without meaningful use cases, its hard to know what your MVP (minimum viable product) needs to be or how to create a strategic product plan. All great products strive to solve a handful of problems as simply as possible, in a way thats easily understood by the people who need it.

Conduct user research, create personas, and start mapping out user scenarios and flows. Anything that puts you deeper into the mind of the user is an investment in successful design.

3. Consider extreme solutions to the problem

Part of the fun in designing is going a little off the deep end with ideas. Celebrate the opportunity to think big.

Break conventions just for the sake of it. Think beyond a single device. Storyboard a day in the life of a user and see where all the possible touchpoints could occur. Bust out the markers and crayons. Do whatever inspires you to think unconventionally.

Dont spend weeks (unless you can afford the time) but take a creative pause to connect your unconscious mind to the problem you need to solve.

Take a look at Duolingo. The app feels more like a smartphone game than a language learning platform. Its completely unconventional and might sound questionable on paper, but the proof is in the numbers the company is valued at $470M by Google Capital as of June 2015.

Seek inspiration outside of your immediate industry, and youd be surprised by how effective (and creative) your design solutions become.

4. Establish a hypothesis to test before you design

 A hypothesis introduces a way to seek truth. Every design has a foundation grounded by something strong enough to build upon.

Think of it like an essay’s thesis statement. It is the heart of the design. And its where your use cases come into play far ahead of development work.

Brainstorm as many scenarios as possible and whiteboard with your team. Run a design studio exercise in which participants sketch their solutions for how to complete specific tasks. You should always explore (and iterate) your hypothesis as one of the first steps in design.

For a useful framework, check out Maximilian Wambachs (Interaction Designer at Ebay) approach. The If [action] then [outcome] because [customer need/problem]mindset is extremely helpful.

5. Collaborate with a diverse group on the best solution

If your design is solid,  it should hold up to critique and discussion. A group of people from different backgrounds who possess different experiences will lead you to better solutions.

Consider setting up a Think Tank of stakeholders to share their unique perspectives on how your design can be improved. Work with your design manager to ensure that the product team still has the final say, otherwise you fall into the trap of design-by-committee.

6. Create a story with documentation

Produce documentation that tells a story. Your personas are the cast of characters. Your use cases are key parts of the screen play. Your wireframes are the stage. Your process flows and user flows are the choreography. Your UI kit is the set design.

Everything relates and feeds into each other.

Many times documentation is ignored because it lacks context. Think of your design assets and artifacts as puzzle pieces. On their own the pieces have little value, but put together they build a picture that tells a story.

Dont get tunnel vision and obsess over perfecting one design document. Instead, make sure the relationships between each design stage is easily understood.

Minimize documentation that doesnt move the design forward. If your documentation isnt usable, theres no reason to create it.

7. Design and test on paper

Rapid paper prototyping can be done at any stage and always helps inform design decisions.

Give yourself or a group a set amount of time to quickly iterate ideas. Its very easy to become attached to a design once its move into pixel form. Sketching and prototyping on paper, however, keeps your mind searching for possibilities.

Draw out sketches for the sake of exploring your own ideas, then run a quick hallway usability test with 3-5 people.

As soon as you come up with a design you think is solid, start testing it by conducting a virtual walk-through. Talk through the different use cases with a partner so you can help each other notice any gaps or potential flaws. Once your partner understands how the design works, they can act as the human computerfor operating the paper prototype during usability testing.

8. Post artifacts on a wall

Having tons of post-its on a wall might seem cliche, but theres a  sound reason behind the method. .

Think about all those detective shows. When a detective is working a case, a wall is transformed into a map of the crime. All of the witnesses and suspects are displayed with the evidence thats been collected.

The same thing occurs when youre designing for specific users. Just like a detective, a UX designer needs to map the connection of the problem to the users and then link it directly to the solution. The physical artifacts arent for show. Having a shared place for a team to visit at any time helps infuse UX methodologies into everyones workflow.

9. Create a lo-fi  prototype to test

Lo-fidelity prototypes can be created with basic HTML, Keynote or Powerpoint, paper cut-outs, storyboards, and specialized prototyping tools like UXPin (which I’m quite familiar with).

As soon as you move into development, certain restrictions are inevitable (browser compatibility, site performance, etc.). Test your design before development because it will better inform your user stories and provide developers with rich insights.

Low-fidelity prototypes allow you to link up multiple wireframes to create flows. In this way, you can test the effectiveness of the order of things, rather than just the elements that the user sees on-screen. You can validate that sequences of interactions make sense for users.

10. Build collaboratively

No designer is an island. Too often people work for too long by themselves.

Just like pair coding has been proven to reduce technical error (because its easy to become code blind), try Coopers pair design technique for better analysis and iteration. Working with another person generates motivation for self-improvement, establishes a sense of teamwork, and balances productivity by sharing energy.

Its pretty old school to think that you can only design well when youre tethered to a desk away from everyone. That idea is as outdated as smoking in the office. By following the guidelines described in Building Mockups Developers Won’t Hate, your projects can be fun and collaborative.

Ready to create your own design process?

Get started with the UX Design Process Map below, then start practicing in tool like UXPin so you can design with your team together.

The designer’s guide to digital accessibility

How to create accessible designs that work across print and digital.

The notion of accessibility may bring to mind ideas of screen readers and voice control, but it’s about much more. Some impairments, for example, often go unnoticed. Take colour blindness: one in 12 suffer from the condition, so a design that uses only colour to convey information is useless to a large number of users.

Then there are those who aren’t technically blind but do have some level of visual impairment. Designing with these users in mind not only helps them, but makes your work easier on everyone’s eyes. The fact that most people can read grey text on a white background doesn’t mean it’s enjoyable to do so.

With websites, some users will have some kind of cognitive impairment. It might be permanent, such as a learning disability, or it may be a temporary impairment such as drunkenness (imagine designing for a taxi service, say) or even shock (think materials for a hospital).

Designing for these people means minimising clutter, using smart, simple copy and making user journeys easy to understand. These attributes are something that everyone appreciates.

Extension of UX design

Expert in accessibility Heydon Pickering advises that you think of accessibility as an extension of UX design. “Imagine how people with different disabilities experience the same content. It’s part of the design process, not something you ‘bolt on’ later.”

Think about how screen-reader users will experience your page as you write your markup: the order is important. “If your navigation menu is positioned at the top of the page visually, but located at the bottom of the HTML document, then the experience for keyboard users will be frustratingly different to those who can point-and-click. They will have to tab-key through all the page content just to access the menu.”

If you’re a print designer and you haven’t done much web work, it can be painful to realise that your attention to detail is lost when your designs can’t be implemented on the web exactly as you made them.

“Don’t be a slave to the tyranny of ‘pixel perfection’,” Pickering advises. “In print design, you can be exacting, but on the web it’s pointless to attempt it. Design interactions, not approximations. Users are not gallery visitors, they are participants.”

Keep things simple

Above all, try to keep things as simple as possible. “The biggest enemy of accessibility is complexity,” says Pickering. “Complexity makes interfaces inaccessible to anyone, but especially those who have content announced procedurally by assistive technologies.”

Complexity also makes things harder for those with cognitive differences, such as autism, dyslexia or ADHD. Jamie Knight, senior accessibility specialist at the BBC, breaks down the cognitive process required to do something into three parts – receiving information, processing information, and then taking actions – and then assesses how well a website enables someone to do each part.

‘Receiving information’ covers whether a person can take in the information that’s there and spot things that they can use to achieve a task, such as buttons, menus and text areas.

‘Processing information’ covers whether a person can filter out the things they don’t need to make a decision, such as adverts, links to other areas of the site and so on. The more irrelevant items there are, the harder it is to filter and decide.

‘Actioning’ refers to whether someone can form and complete a plan of action based on the decision they made in the previous step. Knight asks: “Can the user perceive the information and figure out what can be done? Can they filter the information in order to reach a decision? Can they then plan an action and complete it?”

Knight is slightly autistic himself and in this post he explains how he uses a zoom tool to exclude adverts and other clutter from his screen to help him focus, and also a screen reader for the same reason.

Colour contrast

Colour contrast is one of the most important factors determining legibility of text. Accessibility was a priority for web design agency Domain7 when it redesigned the website for Imperial College London.

Design team lead Tracey Falk explains: “While sticking with black type on white is always the safest (and recommended for primary body copy), using an online tool that will test type colour against background colours for contrast is key. You’d be surprised at what fails these contrast tests.”

Contrast also needs to be accounted for when using type overlayed on top of images. Miriam Thomas, UX designer and front-end development lead at Domain7 told us: “This continues to be a huge web trend and we’re surprised by how often readability is overlooked in this design pattern.”

“Often the solution is to neutralise and desaturate images with a dark or light overlay so text can be read. Imperial, however, had a huge library of bright imagery, so we chose to colour block backgrounds behind text on top of images to keep that vibrancy intact.”

Inaccessible branding

But what if the brand colours don’t pass contrast tests? Geri Coady, author of A Pocket Guide to Colour Accessibility, explains: “If brand colours have already been chosen and are unfortunately not accessible for whatever reason, try to find alternate ways to implement them,” is her advice.

“A logo with insufficient contrast can be supplemented with descriptive alternate text, but for text elements like body copy and headlines, try introducing a darker, contrast-compliant shade of the same colour to add to your brand palette.”

“If this creates pushback from your client, don’t be afraid to bring up the potential risk of lawsuits and lost customers from an inaccessible website. Money talks.” (Disney faced an accessibility lawsuit in 2011.)

Coady recommends Lea Verou’s contrast checker for ensuring your palette is legible, and there’s some more detail in her article on contrast checks. See also the Web Content Accessibility Guidelines.

All of the experts we spoke to agree that testing is key to making your work accessible and ironing out any problems. Test at regular intervals and include in your testing group people with cognitive differences such as Autism Spectrum or ADHD as well as those with visual and motor impairments.

Free ebook about visual storytelling in web design

Discover how to design visual narratives into sites for better UX

The difference between good design and great design is the emotional response from the user. Web interfaces must go beyond usability to tell stories, but this requires a sharp skillset to master the visual subtleties.

The Visual Storyteller’s Guide to Web UI Design explains everything a designer needs to know to design websites with rich narrative. This book is available free to download from the prototyping app UXPin, as part of their free design library.

Subscription offer

In 68 pages, this ebook explains its advice with analyzed examples from 29 companies including Tesla, Fitbit, Microsoft, Squarespace, Foursquare, and more. It covers such topics as:

  • How to design sites to lure people into long-term engagement
  • The 3 types of storytelling imagery — iconic, symbolic, and indexical — and how to apply each to web UI design
  • How to use illustrations, mascots, rich backgrounds, and gamification to immerse users in the UX
  • How to create and execute “visual game plan” beforehand
  • Analysis of different styles of visual storytelling, and which one works best for certain projects
  • How to develop your own personal visual style
  • Interactive design techniques for web storytelling

It’s worth checking out and reads fairly quickly since it’s example-driven. Download this free ebook now.

Liked this? Try these…

  • How to use storytelling to connect with your audience
  • 12 art directors to follow on Instagram
  • Brilliant WordPress tutorial selection

Powered by WordPress & Theme by Anders Norén