Domnicana Victoria Web Design

So easy , So wonderful, so Domnicana Victoria Web Design

Month: August 2015

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.

Understanding Color Psychology for Impactful Web Design

It’s no secret that color psychology is used extensively in all aspects of design. From the colors used on day-to-day grocery items, to brand logos and website design, color is an important element that can convey a specific message to users.

Photo credit: Dropbox

According to Kissmetrics, when we view a color, our eyes send a message to a region of the brain called the hypothalamus. In turn, this sends further signals to the pituitary gland and then onto the thyroid glands. This then signals the release of hormones which cause fluctuations in our mood, emotion and as a result, our behavior.

Science tells us then that color evokes emotion which can result in negative, positive or mismatched feelings. Kissmetrics goes on to say that it takes just 90 seconds for a site visitor to form a judgement or opinion. Further to that, “62-90% of that interaction is determined by the color of a product alone.”

As described in the free e-book Web Design for the Human Eye, color plays an undeniable role in creating a strong first impression on users.

What Colors Mean

Every color means something to every person, although this meaning varies depending on our personal preferences and cultural background.

For a quick reference, take a look at the color chart below.

Photo credit: UXPin

Color psychology in design is not an exact science and studies have shown that it’s affected by individual perceptions. Societal considerations such as gender also have an impact on how the color is perceived. Further studies have found that it’s not always the color itself that make an impact, it’s also about how appropriate the user feels the color used is to the brand that’s using it.

Image source: Kissmetrics

So, if you’re designing for women, then purple is a pretty good bet as it’s universally liked by women but disliked by men (generally speaking, of course). In the image below, this is used to good effect for L’Oreal Paris. As you can see, the header and footer are black, which denotes class and elegance, so that you get the overall feeling that the product isn’t cheap, but high-end.

Image source: Kissmetrics

Additionally, white is used for the text, which denotes modernity and a sense of calm, while purple has been chosen to denote luxury, elegance and femininity – all of which are clearly appropriate for a site such as this.

(To learn more about minimalist design and using white space as a design tool, check out the free e-books The Elegance of Minimalism and The Zen of White Space in Web Design).

In the image below, for Women’s Health Magazine, the top banner is pink but otherwise the site is relatively devoid of color and relies instead on imagery and bold navigation. This is an interesting choice and one that could work against the site.

To begin with, pink is a very stereotypical color to use when a site is aimed at women, and it appeals to the sweet tooth, so the message of the site, in that it’s all about feminine health, could be lost due to this.

Image source: Women’s Health

Once we delve further into the site, the header color is of course used on every page, but a quick visit to the Weight Loss section returns the below.

Image source: Women’s Health

As you can see, this page is even more pink, which could prove to be counterproductive to the audience. However, the first image that we happen to see was on a slider, and this does change as you remain on the page.

Determining a Color Scheme

It’s unlikely that you’ll create a site that has just one color (unless you’re going purely monochromatic) so you should consider the overall color scheme and each individual color, as well as how well they work together. Also consider the impact on the user and how secondary colors fit with the primary color that you’re using.

With this in mind, you should take care when mixing colors together and to help you with this, you can be guided by three basic methods of color mixing.

#1: Triadic

This is the most basic and balanced method, which uses color vibrancy and complementation. Using the 12-step color wheel, you can select any three colors which are located 120 degrees away from each other for background, content and navigation.

Photo credits: Ray Trygstad. Wikimedia Commons. Creative Commons. Edited from original.

#2: Compound (Split Complementary)

The second method is a little more difficult and you may have to experiment in order to get it right, but it can be very effective if it’s done well. This concept uses four colors – two contrasting pairs (near on the color wheel) and two complementary pairs (across on the color wheel).

Photo credits: Ray Trygstad. Wikimedia Commons. Creative Commons. Edited from original.

#3: Analogous

This method focuses on complementary colors only and you should take care when deciding what you want the scheme to say to the user. As it highlights the vibrancy of the chosen colors, it can be too much as the colors are essentially exaggerated.

Photo credits: Ray Trygstad. Wikimedia Commons. Creative Commons. Edited from original.

So when considering the psychology of color, it’s important that you consider all of the colors as a whole, and how they will work together, rather than just picking one and hoping that it will work alongside others such as background, text and buttons.

Take a look at the page below and consider what it says to the user.

Image source: Codementor

  1. Background color – The black background denotes class, excellence, formality and “corporate”. Clearly, when considering a site that provides mentoring, excellence is something that you would want to convey. Formality suggests that it’s linked to learning while “corporate” suggests that users might not be learning to code as a hobby, but rather as something they would take forward in their career.
  1. Button colors: The site uses red buttons for the CTA buttons which stand out clearly against the black background in order to encourage sign ups. Black is used with a white border for less important buttons, in keeping with the overall scheme.
  1. Text color: For the text, white provides that all-important contrast, while still matching the color scheme. The icons outlined in white (and white ghost buttons) are placed right on the fold to encourage users to scroll down for more information if necessary.

Overall, the design works very well – we all know that black and white go well together and in this case, the site feels classy and relatively formal. The red, if overused, could take meaning away from the overall message, so instead it’s used very sparingly in order to stand out and make it clear that the desired action is to sign up to the service.

Colors to Avoid

Brown generally evokes a sense of nature in design and is the color most disliked by men, but it does work in some contexts, as it denotes dependability.

Image source: Color Matters

So brown works for UPS as it’s a company that wants to convey the strong message that it can be relied upon.

However, as a sports kit, it’s been described as the worst ever in college football thanks to the strip shown in the image, which belonged to the Wyoming College team. The interesting part is that brown is also thought to promote ‘ruggedness’ so you would think that it would work for that reason when paired with such an aggressive sport, but it doesn’t in this instance, perhaps because men don’t normally like brown.

When it comes to women, orange seems to be the least favorite color, so keep this in mind if you’re designing for a primarily female user base.

Of course, remember that these are just guidelines (they always depend on context) and it’s much more important that all your colors complement each other and create harmony.

Tools to Help You Choose the Right Colors

You can of course use ready-made color palettes to help you in your choices. When it comes to web UI design, you don’t need to reinvent the color wheel.

  • Adobe Color CC – trusted provider for all Adobe users.
  • Paletton – simple color picker for beginners.
  • Flat UI Color Picker – for creating colorful flat designs
  • Mudcube Color Sphere – offers a selection of themes and provides HEX numbers.
  • Check My Colours – for check foreground and background color combinations and that it has the correct contrast for use by people with colorblindness.
  • Color – allows you to pick a color by moving your mouse across the screen, set saturation and then get the HEX code.

Learning By Example

There are thousands of sites out there that use color to great effect, and plenty that don’t. The image below, however, won an awwwards Site of the Day distinction for color and it’s easy to see why.

Image source: AWWWards

The background is a uniform light gray which matches nicely with the gray of the bike. The simple design, with the large lettering is highly effective and immediately conveys the sense that it’s a speedy little bike that you’ll enjoy riding. The use of the color gray allows the other colors to stand out too as it’s a neutral color which, as it gets lighter, illuminates the page and livens it. Gray also gives a sense of stability (great for a bike ad, then) while creating a sense of calm and composure.

The colors used in the word ‘Go’ are bright and lively, lending a sense of vibrancy and modernity to the design. It’s predominantly blue and since this is a color liked by both men and women, it ensures that the page is not gender-specific. Green is added sparingly, which suggests a sense of environmental responsibility. This in itself is pretty clever, as a bike this size will of course not guzzle gas and will be better for the environment than a car – this is of course something that we already know, but it’s good to have the message reinforced.

Overall, the page gives you a sense of how the scooter would be perfect for modern city living.

Final Considerations

Color is an important part of design but it’s also a vital aspect of the overall brand. The sense that the colors used convey must match the brand personality and add to the overall brand story and meaning. Often, the designer may have to work with existing artwork such as logos and will have to choose colors based on this. While this could be seen to be quite constricting, the availability of color palettes to help you should make the process somewhat easier.

To learn more about how to visual design to make the strongest first impression on users, check out the free 85-page e-book Web UI Design for the Human Eye. We analyze examples from over 33 companies including Tumblr, Etsy, Google, Facebook, Twitter, Medium, Intercom, and Bose.

How to Be a Great Email Designer Essential Tools

It’s can be hard to get excited about email design. But it is an ever-growing and ever-important part of branding and design for a large number of businesses, freelancers and even designers.

Email design can make or break the messages that you send to potentials customers or clients. Every email needs to have a strong framework and striking design. And it can be easier to create that you might think with the right resources and tools.

If you are looking for a magic email design formula, you won’t get it here. Simply because there is not one. But there are some things you can do to help maximize the impact of your email newsletter design.

  • Keep it simple.
  • Include a direct call to action.
  • Make it responsive.
  • Eliminate bells and whistles, including lots of links back to your website.
  • Be wary of images and backgrounds. It is important to note that many mobile browsers or email programs won’t automatically render images.
  • Connect the email you’re your brand’s style and design concepts.
  • Copy should be short, to the point and exciting.
  • Keep it in a single column format. If you are used to designing websites, think of it as a one-page website.
  • Relevant information should be above the scroll.
  • Use HTML for emails, rather than lots of images. This will improve load times and overall usability of the email.
  • Test it before sending on a variety of devices to ensure that the content and design will look like you intend it to.

Great Email Design Tools

From design and sending software to tools that help you code and test emails before sending, there are plenty of items out there that can make designing a great email even easier. For the new email designer, it can be a little daunting to figure out what tools you need to use or invest in.

Campaign Monitor, an email software company, recently asked a handful of email designers what they could not live without in terms of tools. Give designers were asked about the top tools for text and code editing, browser, testing and framework.

  • The top code editors were Sublime Text and Atom.
  • The top browser was Chrome by far, followed by Firefox.
  • The top testing tools were Litmus and Email on Acid.

Email Marketing Tools

There are different approaches to creating email newsletters. While some designers prefer to code from scratch others prefer the comfort of third-party software (most of which offers custom design features and templates).

There are a lot of third-party options out there. These can range in price from free to hundreds of dollars, based on the side of your email list and the frequency of distribution.

Some of the benefits to third-party tools are great list management and analytics features. Most also include responsive email newsletter frameworks for ease of building and make it easy to build with pre-coded parts.

Here are the top 10 options that are pretty widely used and get great feedback from users, according to PC Mag. The ranking takes a close look at each platform, features and cost. This is a great tool if you are shopping for email marketing software.

  • Campaigner
  • MailChimp
  • GetResponse
  • iContact
  • AWeber
  • Benchmark Email
  • Campaign Monitor
  • Constant Contact
  • VerticalResponse
  • GraphicMail

Powered by WordPress & Theme by Anders Norén