UXD Jobs News & Events

Publish your UX related news & events. Mail to publish@uxdjobs.com.



5 Design Tricks to Make Your Mobile UX Shine

Have you looked at your website analytics lately? Chances are a significant portion  maybe even more than half – of your users are coming to your website via mobile device.

Whether you are focusing mobile efforts on a website or app, you need to ensure that the design creates a stellar user experience for every one of those mobile users. You don’t have to start from scratch to do it either. Thinking about the mobile user and how they interact with the design will help shape the way your interfaces look and function.

Here are five design tricks you can use to help make your mobile UX one that users love.

1. Streamline Navigation

mobile ux

Those old-school mega navigation menus aren’t doing you any favors – especially when it comes to mobile. Mobile users might have the shortest attention spans of any group of users. They want to open the website or app and find what they need right away.

Design navigation menus with just a few options – look at your analytics to see what the majority of users are looking for or navigate to first.

Fewer options will take less screen space, allowing you to incorporate more room in the design, which is ideal for touch and readability.

While we won’t argue the merits of the hamburger icon here, pop out navigation is a pattern that users are accustomed to. Just make sure that if you plan to pop or slide-out the navigation menu, that there’s a clear visual identifier for users.

The Ebates app uses two levels of navigation: One that’s a list of their top deals and another that’s your bookmarked list of favorite stores (in the hamburger/heart icon). Neither option feels heavy. It almost looks and functions like content. The entire design is navigation without feeling overwhelming.

2. Think in Gestures (And Haptics)

mobile ux

Mobile users interact with their devices quite differently than desktop users. Your user interface should account for this.

The design should take advantage of gestures to perform certain actions. An interface that uses common and intuitive controls will delight users.

These gestures include:

  • Tap and double tap
  • Press
  • Hold
  • Drag and drop
  • Scroll (single and two-finger)
  • Zoom in and out
  • Swipe
  • Flick

When it comes to mobile gestures are the new clicks.

And while you are thinking about touch interactions, don’t forget about haptics. That subtle “bump” from your wearable or that vibration from your phone in a pocket are haptic notifications, mechanic simulations of touch using vibration or motion.

The trick to haptic is that the interactions are subtle and quite unobtrusive. While the user might know there’s a notification, other people often will not. The touch interface is becoming more common all the time and seems to be getting a positive response from users.

The Two Dots game, for example, uses a bump each time you clear dots in a certain way. The soundless option makes for discreet game play and provides a delightful experience for users.

mobile ux

People like to feel like they are speaking with and interacting with other people. Thankfully for designers, a touch of artificial intelligence and chatbots can help create those interactions so you don’t have to be on standby for live chat sessions 24 hours a day.

There are three ways to create a conversational UI:

  • Write copy throughout your interface that has a more personal touch. From long text blocks to tiny bits of microcopy, text should have a personality, such at the WTFWeather app, above. It should be read in the way people speak. Be careful of sounding overly formal or robotic in your messaging.
  • Use messaging features or chatbots to create instant interactions with users. This can be a great customer service tool and also help create customer loyalty if someone is always there to help them through problems.
  • Integrate a voice user interface into the design. Siri and Alexa are household names thanks to voice interfaces. The other bonus to integrating voice commands? It will make your website or app more accessible.

4. Animate It

mobile ux

It seems like there are animated elements on almost every website you visit. And that’s by design. Animation can bring a design to life.

Animated elements are highly engaging because they grab user attention and can help show users how to better interact with a design. (It goes back to the classic idea of “show, don’t tell” when creating a design.)

Google Maps, for example, is packed with little animations. Pay attention next time you use it.

Nick Babich, for UX Planet, has a great primer on uses for animation in mobile UI design. He outlined three key uses for how to use motion well.

  • For system status: Use animation to show a loading status, for refreshing content and for notifications.
  • For navigation and transitions: Use animation to help users move between different types of content, to establish visual hierarchy between elements and to show a change of state.
  • For visual feedback: Use animation to show acknowledgement of an action or to help visualize the result of an action.

5. Onboard Well and Use Forms Properly

mobile ux

Particularly with an app, onboarding is vital to user loyalty.

Think of the last game you downloaded. Did you jump right in? Or did you need a quick tutorial to ensure success?

An interactive onboarding experience for apps will help users learn how to make the most of the features included in the user experience. A fun option will help transition them to loyal users as well. Keep the onboarding tutorial short and make sure to include a frequently asked questions or help section so users can go back to it if they have trouble.

With mobile websites onboarding is less of a primary concern, but signup or registration forms might be an issue. Forms on mobile devices need to be simple and easy. Users don’t like bulky complicated forms.

Streamline forms for mobile to increase conversions. (You can always ask for additional information later.)

Look at the simple starting point for GoodRx, above. It only asks for the medicine you want to know more about. The form is the focus and it’s super simple.

Ask for just one bit of information – an email address. That’s all you need to start a relationship with a user. If your site or app requires logging in, stick to an email address and password.

Design the form so that boxes are easy to fill in (from a size standpoint) and consider ditching any auto complete functions to decrease the chances of mistyped email addresses. One more trick? Use a social login form when you can to simplify the process even more. Users are accustomed to this process and it is easy for them … and less likely to have errors for you.

Conclusion

The mobile user experience is one of the most important things you need to think about when building your website or app. And mobile user needs continue to change all the time.

Create an interface that’s easy to use and takes advantage of modern technology and features to create something users will want to engage with over and over again.

Source: Design Shack

Author: Carrie Cousins

Posted in Knowledge sharing | Tagged , | Leave a comment

Flat Design vs. Material Design: what’s your flavor?

Let the UX design battle begin! It’s flat design vs material design in a match to discover which interface design favors usability and encourages better user experiences

Flat design vs material design — what’s best? We take a dive into material design as well as another design trend that’s swept over the UX design community in recent years: flat design. Known for their minimalist approach and stark UX design similarities, these design systems have us asking: which is better and which is worse?

Let’s throw our two cents into the material design vs flat design debate and discover just what the difference is.

Image credit: Julien Revoye

What is flat design?

Flat design could be considered the opposite of skeuomorphism. Instead of using real-life imagery as with skeuomorphic design, flat design uses 2-dimensional visual details, as shown in the illustration above.

Flat design doesn’t employ shadows like material design does. Flat design embodies the digital landscape from which it arose. Whereas other design systems rely on metaphor and realism to convey their essence, flat design disregards this and is considered authentically digital, according to Microsoft.

Minimalism and flat design go hand in hand and so a lot of flat designs will look intentionally sparse.

Benefits of flat design

  • Uncluttered, distraction-free design
  • High readability with clear typography
  • Easily adjusted for responsive design
  • Faster to load in browsers and apps

Disadvantages of flat design

Flat design is stripped back to the minimum. Not to be intentionally minimalist but to focus on the function of design. Aesthetics do play a prominent role in flat design where bold color is used generously. However, a lack of shadow and depth can cause usability problems.

A call to action without strong clickability signifiers can go unnoticed or be difficult to find, and this can be frustrating for your end user. If something doesn’t look clickable, then people won’t know to click. Fundamental error. With flat design, users can end up clicking all over the page in desperate hope of clicking something.

Another drawback to flat design is that despite its leading role within UX design circles over the last 5 years, there are still people out there who think of it as a trend, something which isn’t as long lasting as material design, which has its own set of guidelines.

In addition to usability problems, there’s the issue of distinctiveness. While flat design celebrates function at the cost of form, there is the risk of flat designs looking indistinguishable from one another. Limited color choices and shapes create limitations where they needn’t be any. This contributes to the trend like nature of flat design and makes for overly generic design.

Image credit: www.w3schools.com

What is material design?

Material design is a design system developed by Google. Google came up with material design to create a coherent, practical and accessible visual language. The aim is to create web and mobile experiences that are based on and take full advantage of tactile screens, taking inspiration from paper and ink.

Paper and ink? Yes, that’s right. Material design was initially named Quantum Paper. The design principles attempt to translate the physical properties of paper to the screen. The background acts as a sheet of paper and the UI’s elements and behavior mimics paper’s ability to be re-sized, shuffled and bound together.

Materials such as paper cast shadows, are solid, can change shape and can be manipulated in myriad ways. These properties are all exemplified within material design.

Essentially, material design is a system which outlines how designers can create unified designs with fewer distractions.

The principles of material design

There are two main goals on which material design is based. The foundations are:

  • Create a language which synthesizes classic design principles
  • Develop a unified system to be deployed across multiple platforms and devices, with mobile being fundamental

As well as the above goals fueling Google’s design system, there are 3 principles which steer them towards those goals:

  • Material as metaphor: visual cues should be grounded in reality
  • Bold, graphic and intentional: take inspiration from print-based design
  • Motion providing meaning: no motion should be superfluous

The material design documentation is extensive and constantly updated by the team at Google.

What does material design look like?

Material design brings back a UI element banished to the past: skeuomorphism.

Skeuomorphism style is where images and metaphor are used to give users a reassuring real-world reference. Since material design uses paper as the metaphor, it maintains flatness however it’s multi-dimensional. If something is too flat, users may find it difficult to distinguish between UI elements and their purpose such as whether an element is clickable or not.

Why is material design important

Material design gives designers a UI framework to adhere to. To avoid making terrible user interfaces, material design shows UX designers a clear path regarding how to design animations, styles, layouts, components and patterns. This is done so that anyone interacting with any of the Google products and services has a unified and pleasurable user experience.

Benefits of material design

  • Unified and simplistic interface
  • Principles and goals provide consistency for designers
  • Z-axis creates depth
  • Intuitive to use
  • Uses motion to show users what is happening on screen

Disadvantages of material design

Material design helps to provide a comprehensive framework for designers to create mobile and web experiences. Although, material design is not the Holy Grail of design despite its popularity. While the principles can be extremely beneficial there are contexts in which material design would not fit.

Take Facebook with material design principles. The result looks like Google+. And we all know how that turned out. Material design promotes simplicity but too much simplicity can be a hindrance. For example, in the below image, it isn’t immediately clear which parts here are clickable which can frustrate a user or result in them clicking all over the screen.

Image credit: Material Design

While the UI design patterns within material design aim to be clear and guide users in a meaningful way, certain components have drawbacks because they’re superfluous. Take the Floating Action Button, which at times isn’t needed on a screen. Despite its controversy, there are alternatives to floating action buttons, though.

Material design is also inextricably linked with Google and is dominant on Android. This relationship, while intentional, causes problems when designing for other systems such as iOS. Indeed, Apple has its own guidelines too, but this means that each framework is too attached to the parent company.

Flat design vs material design: how are they different?

Flat design and material design share similar characteristics. They’re minimal — no superfluous details here. Flat design also tends to use limited colors for fewer distractions and the simplicity of the UI element design encourages efficiency and functionality. Flat design takes inspiration from design movements of yesteryear, namely Bauhaus. One important tenet of Bauhaus is that function follows form. That’s why flat design is stripped back, with no frills.

Flat design aims to make the function beautiful but is this at the expense of form?

One of the ways in which flat design deviates from other design styles is that it doesn’t aim to replicate anything from reality, not like paper as with material design nor skeuomorphic design as with older iOS designs. Flat design places importance of crisp typography and a clear visual hierarchy.

Conclusion

The argument of material design vs flat design may go on ad infinitum as each designer will have their own preferred style and preferences. It’s clear that both style systems have their own merits and faults and their principles and goals do cross over slightly. The fleeting nature of flat design may signify it isn’t here to last but the well-defined guidelines of material design give it a solid foundation that can be built upon and improved.

Source: UX Planet

Posted in Knowledge sharing | Tagged , | Leave a comment

How To Ensure Colour Consistency In Digital Design

Colours do not always translate well from real life to the digital world. A mustard-coloured top can look like a burnt sienna sunset, and crystal-blue water can take on a green tinge. The wrong colour in your logo can negatively impact branding, leaving your audience confused or even put off.

The art of colour design plays a huge role in modern branding and, to create a digital experience your customers will better engage with, consider the importance of creating a seamless colour experience across all brand assets.

The beauty of colour in design lies in the range of your chosen colours in strategic, enjoyable, eye-catching ways across social media. This helps your brand become readily identifiable – like Coca Cola’s red and white or McDonald’s red and yellow. Considering how quickly visual media moves across social networks, you can leverage your customers’ “share” or “like” button by designing a robust colour scheme. Your logo’s colours, combined with smart use of other design elements, allow you to create a brand identity people remember. Here are some tips for using colour successfully in your marketing campaigns.

Basic Color Theory

Human brains connect colours to various feelings that can affect how they make a decision – crucial information for anyone in sales or marketing. Study the colours to see how they tend to affect people when they are exposed to them. This will help you select the right colours to evoke a response from your audience.

The colour wheel (Stock photo)

The colour wheelpioneered by Sir Isaac Newton, helps you make use of colours harmoniously. You do that by using any two colours on the wheel that are opposite each other, using three colours that make an equilateral triangle on the wheel, or four colours forming a rectangle (two pairs with colours opposite each other in both pairs). These matches are called schemes and remain harmonious even when you turn the wheel. You are affected by these colours even when you do not realise it – consider holiday hues of red and green – opposites on the colour wheel.

But colour is not as clear as black and white. The tone of colours can have a real impact. Warm colours represent warmth, energy, and happiness, and cool colours imply stillness and harmony. The dividing line splits the colors in two, with orange, red, and yellow colours on the warm side and blue, green, and purple colours on the cool side.

Color Psychology

As in all marketing, think about your audience when choosing colours. For instance, colours speak to different cultures in different ways. If your audience is not predominantly American, you may need to reconsider some colour choices. A red dress at your wedding would be a shock to guests, but, in India or Taiwan, it is the norm. To help you understand how colour affects the person viewing it, here is a short breakdown of colour psychology.

Colour psychology guide (Image source: Elegant Themes)
  • Blue – Soothing: This colour works well for a company trying to show they are trustworthy and reliable. A darker blue conveys success, while lighter shades communicate friendliness.
  • Green – Peacefulness – Revitalization: Darker shades communicate growth and financial companies tend to use this a lot. Lighter shades portray feelings of truthfulness and relaxation. People also see companies using this shade as ethical.
  • Red – Excitement: This colour incites strong feelings, like passion and anger. The warm shades speak to stability like one would associate with a brick building. The brighter shades inspire energetic emotions, which works well with a younger, more excitable crowd.
  • Yellow – Energetic: This colour communicates warmth and positivity. Brighter shades excite younger audiences, while darker shades connect to feelings of wisdom or experience.
  • Purple – Nobility: Darker shades inspire feelings of affluence and extravagance, while the lighter shades set a romantic tone.

Colors Across Platforms

When considering your colour choices, think how these colours will look on multiple platforms. Something that looks great on a desktop site might not seem as good on mobile, or vice versa. Here are some things to keep in mind regarding colours on different platforms.

  • Put the perfectionist away. Expect some differences in your colour schemes across platforms. Different devices read colours differently, so exactness is too high a standard. Efforts spent to find the exact colour scheme that will work on every platform or device are wasted. You cannot control how a person sets their hardware up or if they alter the colour schemes with software like f.lux to make it easier on their eyes near bedtime.
  • Hire a professional to do the hard work for you. Figuring all this out can be challenging, and you have a business to run. Take advantage of qualified designers with the training and experience to pull together an effective colour scheme for your brand. These experts understand colour intuitively, and their skills can help you decide what colour schemes will work best for your company.
  • Avoid using online or digital colour selection systems. To correctly create a logo and its colours, avoid digital representations of colour. It’s better to make your decisions from books or print charts. When you look at a printed Pantone book or chart, remember to compare them to matching colour schemes for CMYK and RGB/HEX. CMYK and RGB cannot duplicate many Pantone colours. This will save you time and money because it allows you to stay with colours that convert well to the other form factors.

Consistent Elements

Retaining a uniform or recognisable look across your branding increases recognition among customers after updates or changes happen. Your company should maintain some aspects throughout your marketing campaigns. You implement this consistency through colour choices, image design, typeface, message branding, and how you deliver the advertising to consumers.

A brand can make use of multiple palettes if it uses them consistently in different campaigns or with specific segments of the population. Use bright colours for children and the elderly, while going with cooler colours for the affluent or business-minded. When selecting images, you need them to carry through your palette choices for each customer demographic, while supporting the overall theme of your brand’s story.

Like colours, uniformity in typeface, especially a strong selection, helps create a memorable impression. Keeping typeface identical in digital and print media avoids diminishing your brand’s power. As with other elements, maintaining a consistent layout helps boost your brand’s recognition. However, some platforms require a change in layout to function. In such instances, consider these basic formatting elements to stay in harmony with your other marketing materials. Utilize a grid and keep text alignment the same on all platforms. Manage how a consumer’s eyes flow down the content, keeping it as uniform as possible. Organize a hierarchy of elements that stays true in different materials. Finally, make use of text or image emphasis in a similar fashion.

Color psychology does not guarantee more customers, but it helps in understanding the emotional associations a broad audience may feel when seeing specific colours. Effective use of colours against or with different varieties or shades boosts the likelihood of engagement and conversions.

These tips speak to only part of the larger conversation on colour in marketing. Consider this a springboard into the world of web colour scheme design – a primer for the basics on colour psychology and how colours may differ from platform to platform.

The key takeaway here is you do not have to do this yourself. Professionals with years of training and experience are available to make choosing your next colour scheme a breeze. They can navigate you through the different issues that will pop, offering you advice you can trust to make your brand logo one that consumers will remember.

Source: Usability Geek

Author: Alan Smith

Posted in Knowledge sharing | Tagged , | Leave a comment

6 methods to improve Sketching skills in User Experience

You might know all the technical stuff, you might have all the Illustrator, Photoshop or Sketch experience to speak at length about your designing skills. But, I-hope-this-makes-you-happy, the real and deep understanding of the visual and psychological principles of design is known by how you sketch. Sketching is something that makes you better with every attempt. Sketching, as we know it, is a long and slow process. But, in designing user interactions, it is considered fast & rewarding because it is the easiest way to express your ideas.

Methods to start sketching (for beginners)-

A. Scribble sketches

Scribbling is often associated with negative habits: it’s childish, it’s messy or considered purpose-less. But, I can tell you that scribbling is one of the best ways to improve your sketching skills. Here are some of the methods that you can try-

1. If you are a noob, start with whatever you see on your screen. Set a time of 40 seconds and start scribbling on paper.

2. After you are able to copy whatever you see on your screen, start scribbling while something is going on to capture the ideas. For example, start YouTube and while watching a video, try to capture ideas and scribble just an essence of what you are watching.

3. Repeat what you did in the previous point, but this time don’t look into your sketchbook. This will help you in capturing ideas instantly and fast. For example, carry your sketchbook with you if you are going to watch a movie. Start scribbling whenever you get some idea. But don’t see what you’re scribbling in the sketchbook. This method needs practice but once you form a habit, this will work amazingly well.

B. Sketch what you see

This method will help you to command your pencil strokes and detailing.
1. Try to draw what you see rather than drawing what you imagined.
Sketch any object that you see. Keep an image in front of you and just sketch it on paper. Drawing what you see helps you master your strokes.

2. This is a technique that will help you draw what you see.
Keep the reference image that you are drawing in the inverted position so that your mind can not imagine what the object is. This way your mind will be fully dependent on what you see and you will only be able to draw those lines.

 

C. Sketching Vocabulary

While working on sketches there are many shapes which we use repeatedly and if we practice those shapes it will help in making our sketches better and more detailed.

 

D. Photo Tracing

Photo tracing is a method in which you can capture the real world images into your sketches.
For example, if you want to draw a hand pointing somewhere, just click your hand in that position and open that into your system. Now you can draw an outline of your hand and can use it in your sketches or wireframes.
Similarly, if you want to draw laptop, just click your laptop in that position and open that into your system. Now you can draw an outline of laptop and can use it in your wireframes.

E. Hybrid Sketches: Combining photos with sketching

Hybrid sketching is used by designers to show the surrounding environment.This method does not need any artistic skills.

Combining photos and sketching will add details to your ideas without the need for any artistic skills. The idea is that the photo preserves the information about the context. Here, particular interaction takes place and the sketched element and annotations add information about the how actual design fits in that context.

F. Drawing annotations and notes

While making storyboarding or sketching wireframes, adding annotations and notes will make a better understanding of your story. Annotations are the names, labels and explanatory notes to part of your sketches. Adding annotations will help the user to know about that particular part of your sketch. Other times, arrows, lines, braces also help in representing a particular annotation with that sketch.

 

Source: UX Planet

Author: Sonal

Posted in Knowledge sharing | Tagged , , | Leave a comment

How To Win Users And Influence Conversions With UX For App Design

How do you ensure a winning strategy when designing a mobile app?

The Apple App store offers users nearly 2 million apps, and Google Play has more than 2.2 million. According to a GO-Globe report, 52 percent of the time users spend viewing digital media are accessing it through mobile apps.

Users appreciate when they can download an app that makes their life more comfortable, but if it does not perform as intended, they are quick to uninstall it. Designers can study current app use to implement solutions that are intriguing and indispensable for their users.

Review Mobile Apps Statistics and Trends

People download apps because they are useful, and businesses design them because they make money. Here are some of the latest statistics.

  • 89% of mobile media time comes from mobile app usage.
  • The leading 500 merchants report 42% of mobile sales came from apps.
  • Revenue continues to grow every year. In 2015, $45 billion came from mobile apps. In 2016, it was $58 billion. By the end of 2017, that number is forecast to be $77 billion.
  • Games are the most frequently used type of app, followed by social networking apps. Music is the fastest growing category.
  • 85% of users prefer mobile apps over mobile websites.

Apps encourage user engagement and improve conversion rates.

People in their late teens and early 20’s are most likely to use them, but the numbers are not that different for users in their 50’s and 60’s.

However, not all apps are successful. Gartner predicts that through 2018, less than 0.01 percent of apps will successfully bring revenue to their developers. When users have millions of choices, it is vital to develop UX strategy that works.

Track What is Trending

In 1998, Nokia mobile phones came preloaded with the game “Snake.” It was a variant of an arcade game from 1976. Nokia took something popular from years before and reinvented it to change the way users think of their phones. This move was a game-changer. Up till that point, people were using devices for calls and text messaging – now, they were also handheld entertainment devices.

Competitors quickly developed their own games. The original Nokia 3310 was one of the best-selling phones ever. This year, Nokia re-released the classic, again with “Snake”.

Track what has been effective in the past and design your mobile app around what is already successful. Create a sense of familiarity, either by reinventing old favourites or by connecting your app to current trends.

Simple and Fresh

Prioritise a user interface (UI) that feels clean and open. Plan every decision around the fact that it will be viewed on a screen between five and six inches tall. Analyse how it re-sizes on different-sized mobile devices and opt for a minimal UI design.

Users will only install and keep your app if it is the most effective and engaging they can find. Other businesses like yours offer apps to the same demographic. If their apps failed, it is likely because they were too complicated. Grab attention immediately by making it clear what the app does. Help users accomplish that goal in as few steps as possible. IntuitiveUX design groups content in chunks; make each step easy to follow with clearly marked choices.

Make screen elements large. When designers shrink elements to put as much as possible on a smartphone screen, the user is overwhelmed, and each element is harder to interact with. Seventy-five percent of phone interaction is done with the thumb. Make as many steps as possible able to be completed with just that digit.

Users access mobile apps when they are moving. Test ease of use when walking, eating, and in poor lighting. The harder it is to operate while moving, the more using the app seems like work. Clutter makes it more likely users will accidentally choose something they did not intend to and abandon their visit.

Instead of requiring users to type their login on their small smartphone keyboard, allow them to sign in with large buttons that use Facebook or Google. Reduce the possibility of error and the resulting frustration that could cause them to abandon your app.

If your app requires users to enter personal information, use auto-complete to reduce the number of times they have to enter it. Auto-populate city and state based on zip code, store credit card information for easier use next time and auto-select the most popular options, like free shipping.

Design for Your Users

Do not start your design with business goals. Plan mobile app design around your user. The International Organization for Standardization (ISO) recommends standard ISO 13407, which has the following steps:

  • Identify user need.
  • Define the context of use and specific requirements within that context.
  • Execute design.
  • Evaluate user satisfaction.

If the system satisfies all the user’s objectives and requirements, it is a success. If not, designers should start the process again.

Once users install your app, you do not have long to convince them to keep it. If you waste valuable seconds with multiple permissions or start with a difficult-to-read font, they may decide your app is not worth the effort.

Use Mobile App UX Analytics

Just like you would use analytics to design a website, evaluate your app’s strengths and weaknesses by gathering data. Touch heatmaps create a visual representation of how customers interact with the app, how far down the screen they scroll, etc.

Use UX analytics to find friction points. Find out where they stopped in the registration process and see if you can refine elements to improve success rates. If they scrolled all the way to your call to action, did they stop because the CTA button was too small, or too far down the page?

Choose the Best Color Palette

Colour is tied to emotion. In China, the colour red is associated with happiness. Middle Eastern users most prefer emerald green. Know your audience to use colour schemes to drive response and improve conversions.

For example, some research shows people associate the colour orange with something that is inexpensive. It creates feelings of excitement or enthusiasm. On its mobile app, Amazon announces free delivery and returns on an orange field with corresponding orange checkout buttons. The user feels like they are getting an exciting bargain, so they should go ahead and complete the transaction.

Give Users Progressive Onboarding

If users have to complete a series of steps to start using your app, do not make them figure it out on their own. Add prompts that show users what to select and where to enter information one step at a time. It should feel to the user like the app is being magically revealed, and each step they complete unlocks something useful.

Another onboarding option involves showing users the app’s best features or briefly describing its functions. Keep in mind that some users would instead start using the app without interruptions. Allow them to opt out of the onboarding process.

Personalize UX

Create an app that records user behaviour and preferences and adjusts to become even more engaging. Record user choices and adjust for taste, interests, and preferences. As always, offer unique, high-quality content that is consistently updated.

A winning UX strategy is designed for the user, finds the right balance between collecting information and providing useful content, and delivers what it promises from the first impression through continual use. Successful designers include UX strategies for captivating apps that bring their businesses more considerable financial success.

Source: Usability Geek

Author: Alan Smith

Posted in Knowledge sharing | Tagged , | Leave a comment

How To Develop Goals In A Usability Test

Usability is the glue that sticks your user to your web and mobile designs. A well-designed user interface (UI) does not mean much if your users do not know how to engage with it. It needs to be usable, useful and credible as well as desirable. If the UX-factor is not enough of an incentive, think of it this way: optimising your usability pays off. A usable web or mobile application can boost conversion rates, lower support costs and reduce design and development rework.

Luckily, it is possible to optimise your usability. By performing a usability test, you can assess how easily your users can connect with your UI. These studies help you adjust your design strategy to benefit the user and encourage them to return to your website and convert.

So it is time to think beyond the edge of the screen. When performing your usability test, your research goals should be the driving force behind each question you ask. What metrics should I test? Should I go for quantitative or qualitative research? How many participants do I need?

The answers will depend on your web or mobile end product. But do not worry, this article will walk you through all the usability basics and show you how to define effective usability test goals.

What is a Usability Test?

A usability test is how UX researchers evaluate how easy or difficult a task is to complete. In web design, usability research involves evaluating the way a user interacts with the UI, by observing and listening to users complete typical tasks such as completing a purchase or subscribing to a newsletter.

Studies are performed early on during the design process so that errors can be corrected as soon as possible and do not affect the fabric of the final product. In the worst case scenario, you will have plenty of time to start over and improve the overall user experience.

Usability tests can be split into two categories:

  • Qualitative tests, or ‘qual’ research: These involve direct observation and assessment of how test participants engage with specific UI elements to determine which components are problematic.
  • Quantitative tests, or ‘quant’ research: These consist of an indirect assessment of the UI design, either based on participants’ performance of tasks or their perception of usability (e.g. a survey or poll).

For a usability test, it is recommended that both quantitative and qualitative data is gathered.

Once the usability test is complete, the UX team will go back to the drawing board, or indeed wireframe or prototype, and correct the usability errors based on the participants’ behaviour and interactions.

Setting up a Reliable Usability Test with the Right Goals

So you are going for it. But before you get started, you will need a robust framework and some goals. You will want to define the following:

  • Scope: What are you testing?
  • Purpose: Why are you testing?
  • Schedule and location: How long will the test take and where will you perform it? Will it require a laboratory or will participants be tested remotely? How often will you test? Do you intend to test in multiple locations? Will there be rental costs?
  • Sessions: What is your sample size?
  • Equipment: What kind of technology, materials, and resources will you require?
  • Participants: Who are your target users? How will you source them? Will you be compensating participants for their time or travel? What role will they play?
  • Scenarios: Who is the user? Why are they here? What goals do they have?
  • Metrics: For each scenario, you will want to define the metrics you will measure their activity against

We know what you are thinking – how will you know the answers to these questions? It is time to define your goals.

Engage Stakeholders to Set Usability Goals

Sometimes it is obvious what you need to test. If you are redesigning a navigation flow, you will want to see how the user gets from Point A to B; if you are testing the user journey of signing up, you will want to take a look at how they interact with your sign up input form, and so on and so forth.

But often, particularly for new user researchers, it can be tricky to get your head around a usability test and what your goals are. UserTesting has a great analogy on this.

The first step to setting your usability test goals is to talk to your stakeholders. At project kick-off, hold a preliminary meeting with stakeholders to gauge what they know about the product. This will help you determine what high-level features you will build out.

Then, by drilling down into the details around each feature and process, you will be able to identify what to have reviewed in the usability test. If it is a redesign, take a look at past analytics to pinpoint where you have gone wrong and what impact it has had, e.g. high bounce or exit rate.

Tip: A common pain point for UX teams is having too many goals laid out by stakeholders. Prioritizing goals with stakeholders early on will help you avoid having too many test variables.

Categorizing your Usability Goals

Once you have identified your goals, you can start to categorise them and break them down into different groups. Sort these groups by importance to users and your stakeholders. Mutual Mobile’s Becky White offers up a helpful sample exercise to help you reduce the scope of your goals:

Gather your team together, get your hands on some sticky notes and have each team member write down some questions related to your target users. Then, group the questions and arrange them according to the themes that emerge.

Each group should have a problem statement/scenario with a list of research goals. For each research goal, list the relevant participant activities and behaviours. For each group of goals, write questions about what you want to ask the participants about the task they are performing. Like this:

  • Feature/Process
  • Goals/groups of goals
  • Problem statement/scenario
  • Questions to participants

UserZoom has an excellent template for outlining your problem statements or scenarios.

Template:

Example:

Once you have defined your goals, you can plan your testing framework and answer those questions from before.

What Metrics Should you use to Measure Usability?

Now you know what you are going to do in your usability test. But what about what you want to get out of it? As Jakob Nielsen puts it: “collecting buckets of user data will do no good if the resulting recommendations are not followed.”

This is the part of the usability test where lots of people get confused. There are tons of metrics to measure usability against, and it is not always clear which ones you should include. But do not be alarmed. Metrics are useful because there is no magic ‘thermometer’ to tell you if your users are going to interact with your web or mobile product.

Usability metrics are standards of measurement to show you whether your UX strategy is working. They help you track changes over time, assess competitive position, benchmark against design interactions and product releases and set future goals to make your UI work better. The metrics that we use to measure usability include:

  • Successful task completion: The most straightforward and most crucial usability measuring stick that measures the percentage of tasks that test participants complete correctly
  • Critical errors: Errors that block the user from completing a task successfully, e.g. due to participant workflow deviation
  • Non-critical errors: Errors that are recovered by the participant and does not affect their ability to successfully complete a task
  • Error-free rate: Percentage of participants who complete a task successfully without any errors
  • Time on task: The amount of time it takes participants to complete a task successfully
  • Task level satisfaction: To flag a difficult task
  • Test level satisfaction: To evaluate how the participant felt about the overall experience

With feedback on user behaviour and data collected from your metrics, you will be better informed about the usability of your web or mobile product. Apply what you have learned and start to build out those UX-boosting improvements.

Why Usability Tests Matter

You cannot fix something if you do not know it is broken. As Susan Farrell has it: “User research reduces the likelihood of building something that doesn’t meet user needs, but only when everyone knows what those are.”

Good usability makes it, so users do not want to leave your website and app. But without a usability test, you cannot evaluate user performance or determine if they can complete tasks efficiently, how long it takes them, and if they were satisfied with the experience.

Usability research helps you anticipate engagement roadblocks, and correct navigation and accessibility oversights which can curb learnability, efficiency and memorability. By evaluating actual user behaviour patterns, not only can you identify and correct usability and accessibility errors, but you learn more about your users, their expectations and goals. This will help you improve the overall user satisfaction and the user’s experience of your product.

Usability Testing Best Practices

  • Do usability testing early on. It is easy to incorporate it early in the design process and will have the most significant impact the earlier applied.
  • Perform QA testing before usability testing. Participants are not there to spell check or be slowed down by bugs and crashes.
  • Consider doing your usability test with a prototyping tool, such as Justinmind. As the guys over at UXbert Labs have it, testing is most effective when done on a prototype because you can implement any changes before you have started development or your final visual design.
  • You do not need loads of participants per test cycle. According to the Nielsen Norman Group, 5 participants could be enough.
  • Test with real users and, actual data for the most accurate results – early adopters are ideal because they are tech-savvy and will streamline the testing process. Then, access the best usability testing tools and assess your design with real users!

The Takeaway

Usability tests are the best way to ensure the usefulness of your web or mobile UI, with the bonus of sizing up the market. Any form of usability research should be performed early on in the design process to avoid rework and wasted resources.

A successful usability test enables you to improve your product with real-world feedback. The key to a successful usability test is in the planning. You need to involve your stakeholders as well as your team in defining the goals of your test, and how to measure them. Knowing exactly what you want to take away from your testing will make the process more streamlined and the results more meaningful.

Source: Usability Geek

Author: Emily Grace Adiseshiah

Posted in Knowledge sharing | Tagged , | Leave a comment

Why UX Designers Need UI Skills

As a UX designer, you know that user experience is everything. Most users are not conscious of the behind-the-scenes framework that the UX designer has established for their users. In fact, if they do not notice it, you have done your job.

From our users’ perspective, our work is hidden beneath an attractive UI put together by our friends – the user interface (UI) designers. This is a good thing, because they have all the training and skills needed to make our grayscale wireframes, and prototypes sing with colour and style!

Knowing that their skills can make our lives as UX designers more exciting and enrich the work we do every day. So let us take a look at how learning some of the skills and techniques mastered by UI designers can make you a more successful UX designer.

Adding Style to Your Work

Many UX designers create sitemaps, wireframes, and prototypes every day. If you take the time to learn some standard UI design techniques, you can apply those to your deliverables as a UX designer.

This is especially true for wireframing and prototyping, where you can explore some of the following visual design principles to make your work stand out:

  • Responsive layouts and grid systems: UI designers use grid systems to correctly align their design elements, and make it easy to rescale them in a responsive environment where users could be looking at their work on many differently-sized devices. As a UX designer, learning about these grid systems and incorporating them into your wireframes is a great way to create a more visually-appealing deliverable. Also, handing off your work to designers becomes much more seamless because you are already working in their grid environment.
  • Visual hierarchy: As UX designers, we are used to establishing information hierarchy through content positioning on the page. UI designers can take their designs to the next level by using visual hierarchy’s to help guide users to the right places at the right time. Rather than just using position on the page, these techniques include font choice, font sizing, colours that draw the eye, and animation to catch the right amount of attention. Spend some time learning these techniques and incorporate them into your wireframes and prototypes for a subtle but significant improvement to the journey your users take through your project.
  • Typography: Typography is not something that is usually on the minds of UX designers, who often just use Arial or Helvetica for pretty much everything they make (we are not judging you!). UI designers learn to use dozens or even hundreds of fonts to tell the right stories and send the right message to their users. Try experimenting with fonts in your UX designs, and see if you can make your deliverables more visually appealing and more effective at communicating their message!
  • Color theory: While colour usually does not have much of a place in UX deliverables, thinking about colour theory and the emotional effects colours can have on users is always valuable to UX designers. You know your users, their needs, and their emotional connection to your site or app, so with a little colour theory research, you will be in a great position to recommend (or design with) colours with the best chance of making your project a success.
  • Animation: UI designers create the animation that looks great, but it also serves a purpose. Animation can be an excellent tool for drawing the user’s attention to important pieces of an interface. UX designers who know the ins and outs of animation techniques can include recommendations for animations that best meet the needs of users in their projects as well!

As you can see, there are tons of opportunities for improving the quality of your UX deliverables through UI design. Thankfully, that is not the only benefit of a good knowledge of UI design.

Next, let us talk about how you can improve your workflow!

Better Workflow and Collaboration

As you know, UX designers do not work in a silo. To understand your workflow and the project as a whole, it is super important to expose yourself to adjacent technology. In our case, that means learning about UI design and a little development as well.

Since this article is focused on the UI design part of that equation, let us go over some of the big reasons why you should invest your time in at least a working knowledge of UI design as a UX professional:

  • Responsive layouts and grid systems: Sound familiar? It is worth mentioning again – learning the grid system allows you to work in the world of the UI designer, and it will speed the transition and handoff of deliverables when that time comes.
  • Speaking the Same Language: Any time you can add to your professional vocabulary, you should take advantage of it. Just as we UX designers have tons of terms and phrases localised to our profession (personaswireframes, etc.), UI designers have a similar language. To better collaborate, get a working knowledge of their craft and vocabulary, so you know what obstacles they face for their part of the project cycle. To be a real team player, you may even be able to foresee some of their difficulties and prevent them with smart UX design!
  • Software Syncing: Sketch is quickly taking over the world of UI design as the premium software package, and you will be surprised to see how valuable it can be for UXers as well. In addition to a basic knowledge of Photoshop, strive to add Sketch to your toolkit. Not only will this allow you to hand off wireframes in the UI designer’s native app, but it will let you pursue work outside of your traditional UX deliverables. More on that next!

Expand Your Freelance Horizon

Many tech professionals work in the freelance space or at least dabble now and then with additional projects. This includes a ton of UX designers, and many UI designers as well. If you have ever looked for freelance work as a UX designer, you will quickly learn that many potential employees are looking for magical UX/UI unicorns that are masters of both fields.

There are many reasons for this:

Together, the work of a UX and UI designer completes all of the initial phases of a project (pre-development), and so freelance employers often want to wrap that into a single contact (because they can, as you will see).

Many UX designers come from a UI design background because UX is still a young field. Rather than look for rarer UX-only work, these freelancers choose to take the hybrid work they can get more easily.
Many freelance employers just do not understand the difference between UI and UX, and that they are two substantially different skillsets.

While some of this is unfortunate, it is essential to adapt to the marketplace if you want the best chance at succeeding as a freelancer. For this reason, a solid understanding of UI is vital for freelancing UXers.

To have a great chance at landing and completing UI/UX work, consider working on the following for your professional toolset:

  • Responsive layouts and the grid system
  • Research common UI design patterns
  • Research modern UI trends
  • Typography
  • Color theory
  • Imagery trends and theory
  • Software (Photoshop and Sketch are the best places to start)

There are a ton of resources all over the web that will help you learn some of these fundamental concepts, including right here at CareerFoundry. So what is next?

Source: Usability Geek

Author: Raffaela Rein

Posted in Knowledge sharing | Tagged | Leave a comment

How to Use Breadcrumb Navigation in 2017

Many online users expect brands (especially those with large sites) to incorporate breadcrumb navigation into their site designs. These unobtrusive navigational cues give browsers a simplified way to peruse pages without losing track of their pathways.

Some breadcrumbs enhance the user experience (UX) while others complicate site navigation. Let us explore the evolving role of breadcrumbs, how they impact search engine optimisation (SEO) and UX design when you should avoid them, and how site owners can keep their breadcrumb acumen fresh into the future.

What are Breadcrumbs

In the fairytale Hansel and Gretel, their wicked stepmother sends the titular characters off into the woods and abandons them, hoping they will be lost forever. Smart Hansel leaves a trail of breadcrumbs so they can find their way home. Using breadcrumbs describes how web pages mark a path to show a user’s journey.

Many people create and test pages using the home page as a starting point. Often searches connect to pages deep within a site. Breadcrumbs provide a secondary or background navigation system to show a user’s location.

Most websites are built on hierarchies. The homepage links to several other options such as a contact page, an about us page, and several pages for different types of products or services. From there, each page has its levels or connections. Breadcrumb navigation might look like this:

Home > Shop by Room > Bathroom > Urban Bath > 36-inch White Vanity with Basin

If customers dislike the look of the white vanity but want to continue in the Urban bath collection, they can quickly get back to that page. However, if they decide kitchen appliances are what they want, they do not have to think about how to get there, they just choose to Shop by Room.

Breadcrumb navigation provides users with context so they can answer these questions:

  • Where am I now in relation to the entire site?
  • What are all my choices for navigation from here? Breadcrumbs make each section findable.
  • Do I want to go there? Breadcrumbs encourage browsing by luring users to the next location.

Breadcrumb Benefits

Breadcrumbs make it easier to navigate websites to improve UX in the following ways:

  • Visitors take fewer steps: If users are already looking at interesting content, they do not want to leave the page they are on and go back to the home page to get to the next useful bit of information. That would be like requiring them to leave the forest entirely and then evaluate where they want to go next. Instead of choosing the back button, users keep going forward.
  • Breadcrumbs clarify site navigation: Often users are not sure what they are looking for, but they feel like they will know it when they see it. As long as they can flow smoothly through the site, each step brings them closer to their goal. If they must go back in the other direction, they might lose the trail and decide they are not interested enough to try and find their way back.
  • Breadcrumbs use space effectively: Since breadcrumbs are simple text with horizontal links, they do not contribute to content overload.

When to Use Breadcrumbs

Decide whether to use breadcrumbs by creating a sitemap that shows navigation. If you split content into sections and subsections grouped by related categories, breadcrumbs enhance UX. Breadcrumbs are not useful for sites that do not have related groups. For example, a blog might cover a variety of topics that are not related.

Breadcrumb Types

Breadcrumbs can indicate a page’s position, pathway, or characteristics.

  • Position: When sites have more than two levels, breadcrumbs indicate each page’s position in relation to others. For example, if users search for “turquoise area rug” and choose a link that takes them directly to a specific item, they may decide they want to see other options from the same seller. They may have never been to other pages on the site, and breadcrumbs help lead them toward what they might like to view next. Each text link to the left takes users to a page one level higher.
  • Pathway-based breadcrumbs: These show every step the user has travelled to reach a destination. They do not help if users navigate to the page directly from the search engine or if their browsing has meandered around the site. They show only where the user has been.
  • Items grouped by characteristic: E-commerce sites often use this type of breadcrumb to organise similar products.

Designers can use a mix of breadcrumb types to make organisation easy. For example, the breadcrumb trail for a department store website may look as follows:

Home > Clothing > Women’s Clothing > Pyjamas and Robes > Sleep Shirts > Long Sleeved Sleep Shirts

The first three categories are location based. The last three break down items into similar characteristics with each level becoming more specific.

Breadcrumbs and User Experience (UX)

UX efficiency requires a delicate balance between functionality and aesthetics. When designers include breadcrumbs in websites both for mobile and desktop, they never cause problems in user testing. They take up an insignificant amount of space, and people understand them intuitively because they are almost always implemented the same way.

When designers do not provide a breadcrumb trail, users click on embedded links or use the back button. People are 82 percent more likely to use breadcrumbs if they are located right by the page title. Use them in responsive layout as follows:

  • Make them an extra feature: Breadcrumbs should not replace primary navigation, only provide an added layer of convenience.
  • Save space by omitting the current page: If they are already there, they do not need a breadcrumb for the page.
  • Use separators between pages: The greater-than symbol, a right arrow, or a slash can indicate a progression.

Make them easy to find but not too prominent. Use adequate text size and surround breadcrumbs with enough white space that they stand out but do not distract from more important page features. They should be a tool that is easy to find without drawing attention away from the content each page is designed to display.

Use them even for mobile. If space is a consideration, offer just one breadcrumb that shows users their previous step.

Breadcrumbs and SEO

Since search engines continuously evolve the rules on how they prioritise search results, designers disagree on the importance of breadcrumbs in search engine optimisation. Most agree that breadcrumbs can help, but their primary function is to improve the user experience.

Google suggests enabling breadcrumbs to indicate a page’s position in the hierarchy of your site. Schema.org recommends using a consistent breadcrumb vocabulary for coding. Providing access to all site pages is a practice search engines favour. They lower bounce rates and add structured data by improving your website’s internal linking structure. In the hierarchy, they can use keywords to relate one page to the next.

Fresh Ideas for Breadcrumbs

Keep breadcrumbs from getting stale by trying some of these ideas when they enhance web page design.

If your website has a compelling navigation system in place, breadcrumbs can enhance usability and facilitate a seamless browsing experience.

Source: Usability Geek

Author: Alan Smith

Posted in Knowledge sharing | Tagged | Leave a comment

How to Have Better UX Before UI Begins

When you hear “user experience” (UX), you might immediately think of website design. While you are not wrong to associate the two concepts, this illustrates a major pitfall to which some websites designers are prone – confusing UX with UI (user interface).

UX is about more than just what the user experiences while on your site. It encompasses the full customer experience, from the time the person hears about your brand to making the first purchase – and for a long time after, if you are lucky. To get users excited about your brand, you will have to think outside the site.

The Importance of Focusing on UX First

The goal of good UX is to provide a meaningful and valuable human-computer interaction, resulting in a positive experience (and ideally, sales). UX deals heavily with customers’ emotions. UX is subjective to a degree because different users will prefer different website design elements. However, there are certain universal best practices in website design that will please the majority of consumers. This is where UI takes over to create a positive UX through effective design tactics.

Designers get excited about building new websites. They go over every detail and examine every possibility. Sometimes, the real meaning of UX gets lost in the shuffle of website design. The aspects of UX that gets the user to the site can be forgotten. There are crucial aspects of UX that exist far before the first stages of website creation. If you can tap into these aspects, you can master the user experience. It all starts with grabbing customers’ attention.

First, comes UX, then comes UI – in that order

A good way to understand the relationship between the two is that UX is intangible while UI is tangible. UX is the process, the brainstorming behind the end product. UI is the stuff that turns ideas into solid realities. UX is all about strategy. It deals with data and analytics, research, visual design, and information architecture. You will not get to UI until you are physically creating the end product. One of the worst things you can do is tackle UX and UI at the same time, or worse, skip UX altogether.

Start UX Design with Research

The team in charge of UX must conduct plenty of research, surveys, and observations to identify target audiences and establish goals for the site before they can start on UI design. The way users respond to UX research will inform the rest of the website design process. The team should ask users questions during testing such as, “What types of things do you buy online?” and “What do you like the least about the checkout process?”

The research conducted during UX design will provide the data needed to attract target consumers through your UI. For example, you may learn through a survey that most of the target audience hates pop-up windows. Use this information to build the UI in a style that will appeal to desired visitors, ultimately creating a better user experience.

Attract Users Before They Visit Your Site

Do not undervalue the customer experience that goes on before they get to your site. Several critical elements of UX exist outside the container of your website. As a designer, you may feel that your job begins and ends within this container. This is not true. Good UX for a site, app, or product depends on the complete user experience. The website is just one aspect of this experience.

Marketing is a good place to start planning UX. Your marketers need to discuss how customers will hear about the new website or feature. Marketing is part of UX in that it may be the first time a customer has ever heard of or interacted with your brand. It is your chance to make a good first impression. Design marketing that complements your UI and other branding mechanisms. Marketing shapes how people will think about your brand and talk about it. Do not underestimate its impact on the overall user experience.

Another example of something that can push customers toward your brand before they see your site is the removal of barriers for customers who want to switch to your brand from the competition. Think about what might stop a competitor’s customer from buying from you. It may be something simple, like not being able to transfer data to your app. Building an element that solves this problem could result in your competitors’ customers flocking to your company instead.

Tap Into the Power of Push Notifications

Push notifications are just one example of a UX element that has almost nothing to do with the UI. They offer excellent opportunities to protect your user experience, as long as you do not abuse their power. Sending push notifications to customers can serve as friendly and useful reminders … or as irritating interruptions. The choice is yours. Push notifications require strategy to strike the perfect balance. There are several best practices to use if you want to implement this UX strategy, including:

  • Save notifications for news that matters. Customers will get easily irritated if you send notifications about every little thing your company does. Instead, save the notifications for information customers will find useful. For example, United Airlines sends push notifications to flyers when their gates change – coveted information for busy travellers.
  • Tailor your messages. Use customer data to send notifications about things that are relevant to each user. Netflix is a great example of this tactic in action. Instead of sending generic messages to everyone, it sends individual push notifications about shows the user has watched based on his viewing history. Make sure notifications also come at a good time for your user.
  • Explain what you will notify the user about if he/she signs up for push notifications. Many users will hesitate to accept push notifications if they think you will be too trigger happy with updates. Include a small blurb about what you will use the tool for, assuring customers it will be an asset, not a nuisance.

Using push notifications wisely and creatively can provide an excellent user experience for customers, even when they are not on your site. It gives your brand a way to interact with people in an engaging, relevant way. It also puts you in the power seat – you decide when you are visible to consumers instead of waiting for them to take the bait and visit your site.

Consider Every Aspect of UX before Starting UI

There are endless ways to reach customers and provide a memorable experience before you get to UI. While UX and UI have a significant relationship, business owners should not confuse the two. Letting UX fall to the wayside because UI is the more exciting aspect of the business will not bode well in the long run. There is much more to UX than just the website or app, from consumer research to marketing tactics.

To achieve a satisfactory user experience, you must start long before you build an interface. Think about how the site or application will function, how customers will use it, and how you will generate hype for your brand before the first day of development. Skipping over the UX process can lead to wasted resources on an end product that has excellent functionality, but that does not resonate with your target audience.

UX is the foundation of your enterprise. It is the bread and butter of any website, product, feature, or application. While UI is the aspect of the item, you can see and feel, UX is the brains behind the operation. UX enables you to understand your audience on a deeper level and implement design techniques according to this information. To get users genuinely excited about your brand, you must consider the elements of UX that occur long before UI development.

Source: Usability Geek

Author: Alan Smith

Posted in Knowledge sharing | Tagged , , | Leave a comment

How To Do A UX Competitor Analysis: A Step By Step Guide

Getting to grips with the ins and outs of a UX competitor analysis can help you know your market, product and goals better. You will also understand the competition, get actionable insights and boost your brand. With an almost limitless number of competitors out there all vying for attention, the heat is on to understand exactly what you are doing right (or wrong) to create an effortless user experience and a product that people enjoy using.

What is a UX Competitor Analysis and How do You do One?

There is a lot that goes into doing a thorough UX competitor analysis, but at its heart, a competitor analysis consists of two basic phases:

  • Knowing how to research properly and understand exactly what information you are looking for.
  • Synthesizing that information before acting on your findings.

A competitor analysis means knowing your product or service like the back of your hand and stacking that up against the competition out there. There are standard principles (aka heuristics) for user interface design which can be used when conducting a competitor analysis. These principles are a general guide and are not set in stone, so you are free to create your own set of standards. These can include anything from specific UI patterns to interaction models.

Daniel Newman at Forbes points out that “if you don’t look at the data showing what you’re doing wrong in CX and UX, customers will leave your site, store, or app. It’s no longer a question. There are simply too many other options available to accept a less-than-stellar experience”

One way to know where you are going wrong is through a competitor analysis.

Why do a UX Competitor Analysis?

There is a multitude of reasons why you would want to carry out a UX competitor analysis. One simple reason is that you have not done one before. It is always beneficial for UX designers to acquaint themselves with research methods to better inform their design practice. Aside from that, however, there are some other important reasons why you would want to do a UX competitor analysis:

  • To help you solve usability problems
  • To understand where your product or service stands in the market
  • To inform the design process
  • To know the strengths and weaknesses of your competition
  • To have reliable evidence when making product changes
  • To focus your efforts in a target market

The Benefits of Carrying out a UX Competitor Analysis

Carrying out a UX competitor analysis will empower your business choices. But how? Through researching the competition, you can glean insights from the data you collect and make informed UX design decisions.

Market Gaps

A competitor analysis allows UX designers to find out if there are any gaps in the market. For example, through your research, you may discover a feature that your competitors’ products do not have. Imagine you identify a feature that would help an underserved market, let us say students in this case. By understanding the gap (that is, students’ likes and dislikes, interests, values, budget etc.) you will be able to plan for this feature better and make sure of its popularity among target users.

Developing Products or Services

As UXers, we iterate products and services countless times. But these iterations must be backed up with evidence and research. When you identify market gaps, like in the previous example, you can fill them by developing your product or service accordingly.

To illustrate, say you offer a monthly and annual subscription for a non-descript music service. After carrying out your competitor research, you have found out that these are the two most common payment methods. But you also discovered through your research that many of your users are students who signed up to the free version and then disappeared. You could use these insights to develop a new subscription at a discounted student price.

That is just one way of using what you learn from competitor analysis to improve your product.

Are there any Limitations to a Competitor Analysis?

Unfortunately, a competitor analysis is not the solution to all your UX woes. While it is preferable to conduct a UX competitor analysis and it makes sound business sense, there are some pitfalls to the method.

James R Lucas in his book Fatal Illusions: Shedding a Dozen Unrealities That Can Keep Your Organization from Success says, “as long as we appear to be doing better than someone else, we can feel that we must be doing well, so we don’t need to change.”

Lucas perfectly highlights one of the limitations of the UX competitor analysis: that you can be on the same level, if not higher than your competitor, but this does not give you information to really innovate and lead. If you spend too much time looking at a competitive analysis, you may be missing the mark when it comes to creating truly innovative solutions. You can use your insights to create a strategy that will generate an asset or skill that competitors do not have, but that is down to your ability, not the competitor analysis.

Likewise, another limitation to the UX competitor analysis is that the insights gleaned from the information are only as good as the person understanding and interpreting them. Jennifer Cardello points out that the biggest issues with analytics is that it can become a “distracting black hole of “interesting” data without actionable insights.” Depending on how well you can evaluate the information will determine how valuable that information is.

How to do a UX Competitor Analysis

1. Understand your goals

Why are you doing this competitor analysis? What do you hope to achieve? Will this research impact UX decisions? Your goals should ideally be as specific as possible and hopefully assessable so consider the issues you’re trying to address with the competitor analysis.

Keep your goals at the front of your mind when carrying out your analysis so you can always refer to them without losing sight.

2. ‘Really’ know your competition

At this point, you might want to open a Google spreadsheet or chart and start creating a table of information. Jaime Levy has a comprehensive outline for creating a competitive analysis matrix. A good number at the beginning stage is around 5-10 direct and indirect competitors, so you can easily maintain and track what your competition is doing.

  • Direct competition consists of those people and companies who are doing what you do already. You share the same customers (or better still, you want their customers to become yours) and they offer the same product or service that you do.
  • Indirect competition is composed of those who offer something similar to what you offer. Maybe it is not the first part of their product or service but the second or third.

The nature of business means that competition can pop up at any time, anywhere. Keep a note of your competitors as they arise, so you do not forget them.

3. Look for commonalities among competitors

When looking for commonalities, it is a good idea to write down the actions users can perform, as well as the user journey of competitor products and services, and see if they match with what you are offering. Things to consider:

  • The tone and copy of the competitor
  • Good and bad features
  • User reviews
  • Wait/load times
  • Customer service
  • Design

Do not forget about the set of standards mentioned earlier which you can refer to. All of this can be put into your spreadsheet for reference.

4. Analyze and summarise

When analysing your UX research, create a small summary of what you have found out as well as what impact the information will have. This stage is perfect for identifying design opportunities because you understand your competitors’ flaws (as well as your own).

Your analysis and summary can be used to convince team members, and stakeholders of any design changes you think would be beneficial or to argue for innovation.

5. Present your UX competitor analysis

After you have compiled your research, analysed it and synthesised the information into actionable insights, it is time to prepare a presentation of your findings for clients or stakeholders. This is your opportunity to act on those findings. You can even calculate the ROI of your UX activities to add weight to your findings.

Create a PowerPoint presentation containing the interesting information, backed up with evidence. It is vital that you discuss the impact of your research, more than the general findings: the impact is what can be transformed into actions which can transform business.

Focus on any surprises that came out of your research as this will be more engaging for your audience. Dharmesh Mistry has a few tips on just how to present your research effectively.

Common UX Research Pitfalls

Susan Farrell over at NNG has created a UX research cheat sheet to save you from falling foul of common UX research pitfalls.

A common error when carrying out a UX competitor analysis is the never-ending list. The last thing you want is to be drowning in information without any insights. That is why knowing your goals from the outset can help prevent this and give you focus.

Since the data is only as good as the person analysing it, to save yourself from misinterpreting the information you have compiled, it is advisable that you share your findings with a few other people (preferably someone who handles and interprets data regularly).

It can be tempting to reach preposterous conclusions from the data, especially when you factor in a generous dose of wishful thinking. Asking for advice means you can make sure the data and findings you present are accurate. UX designers should brush up on their analytical skills before attempting to do any analysis.

Conclusion

We live in a data-driven world, and the age of analytics reigns supreme. With so much data at our fingertips, it can be tempting to get lost among the numbers and percentages.

Carrying out a focused and thoughtful UX competitor analysis can help you get valuable insights that can help in multiple ways: generating more profit for the business, changing significant design elements of your product or service, or persuading key team members to innovate or move in a new direction.

Source: Usability Geek

Author: Steven Douglas

Posted in Knowledge sharing | Tagged | Leave a comment