User flows are integral to the UX design process. These valuable UX artifacts help product teams visualize flows and processes from users’ perspectives to reduce errors and enhance the user experience.

This article takes a deep dive into user flows, their importance, the principles that guide them, the visual representations, and the various types of flows.

Create user flows and design advanced prototypes with UXPin, an all-in-one design tool that covers every part of your design process, from ideation to design handoff. Build your first prototype today. Sign up for a free trial.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is User Flow in UX?

A user flow is a graphic visualization representing the sequence of steps, decisions, and actions users perform while navigating a digital product, app, or website.

Product teams typically focus on one task or goal at a time, such as an onboarding sequence or eCommerce checkout. Designers build prototypes of these user flows to test the user experience with usability participants and stakeholders, iterating on feedback until they have a product ready for development.

Importance of User Flows in UX Design

User flows help product teams visualize the paths users take through an application or website to complete a specific task or achieve a goal. This visualization enables teams to identify friction points and opportunities within user flows and design solutions to fix them. 

Additionally, designers can look at optimizing flows to create more efficient and satisfying user experiences.

Benefits of a well-designed UX flows

A well-designed user flow offers many important benefits for users and the organization:

• Improves usability: optimized user flows feel intuitive, simplifying decision-making while reducing cognitive load, resulting in a user-friendly experience where users don’t get lost or frustrated. 
• Better retention: when a digital product meets user needs, allowing them to complete tasks and achieve goals, they’re more likely to keep using it and share their positive experience.
• Higher conversions: streamlining user flows removes roadblocks and obstacles for tasks that generate revenue for the business, like signups, purchases, subscriptions, etc.
• Reduce costs: optimized user flows remove redundant screens and features, resulting in many cost-savings, including design, development, maintenance, server requests, API usage, etc.
• Improved accessibility: design teams can visualize and optimize user flows to meet accessibility requirements, making user interfaces more inclusive while increasing the product’s user base.
• Data-driven design decisions: analyzing user flows provides valuable insights into user behavior and preferences, allowing designers to make informed decisions based on actual data rather than assumptions. Data-driven design decisions deliver products and experiences that meet user needs, making them more intuitive, enjoyable, and user-friendly.

UX Principles of Effective User Flows

Successful user flows incorporate UX principles that guide design concepts and decision-making. Here are some fundamental UX principles to consider when designing user flows:

Clarity and simplicity

Your user flows must be easy to understand and navigate. Avoid complex designs or features that people must learn before using them. Navigation and interaction elements must be consistent, predictable, and straightforward. When you force people to overthink a process or interaction, they’ll abandon it for an easier option, even at a higher cost.

Consistency

Maintain a consistent design language, layout, patterns, and interaction design throughout your product and user flows. Design consistency increases familiarity resulting in a more intuitive, user-friendly experience.

Flexibility

Design flows that cater to different needs, preferences, and abilities by offering multiple ways to complete tasks–for example, providing alternate paths, shortcuts, or input methods.

Feedback and communication

UI feedback guides users and manages expectations as they navigate user flows–for example, progress indicators, visual cues, status information, messages (success, error, etc.), and alerts. This communication informs users of the system status, whether their action was successful, and what to do next.

Anticipate user needs

Designers can utilize user research to predict and address user needs to prevent obstacles and roadblocks. Adding helpful tips and error prevention features enables users to solve problems faster for more efficient and streamlined flows.

Minimize steps

Designers can streamline user flows by eliminating unnecessary steps, actions, and decision points. Minimizing these points of friction increases efficiency while reducing errors and drop-offs.

Focus on user goals

Would you rather use a product that helps you achieve your objectives efficiently or one inundating you with business value proposals and other irrelevant content? Design user flows that prioritize the user’s goals and desired outcomes with features that enhance efficiency and success.

Accessibility and inclusivity

Ensure that users with diverse abilities, preferences, and devices can use your products, navigate flows, and complete tasks. Designers must consider how factors like font size, color contrasts, keyboard navigation, language, and screen-reader compatibility impact user experiences. Read more about accessibility here: Web Design Accessibility Checklist.

Types of User Flow Visualizations

Before we explore the user flow types, it’s important to explain the visualizations design teams use to map these journeys. 

Flowcharts

User flowcharts (user flow diagrams) are a diagramming technique used across many industries to represent the information flow, decision points, and user actions. These visualizations use symbols, arrows, and other shapes to depict elements, processes, decisions, and data input/output.

Wireflows

Wireflows combine wireframes and flowcharts to provide a detailed view of a user’s journey through an interface. These visualizations describe each screen’s layout as well as how users and information flow between them. 

Wireflows help visualize user interactions with specific elements and understand the context of these interactions. Designers and engineers can use these wireflows to visualize information architecture and navigation in greater detail.

Screen-flows

Screen-flows are annotated screenshots or mockups illustrating a user’s path through a product. These high-fidelity versions of wire-flows allow designers and stakeholders to visualize user flows in greater detail with screens that accurately represent the final product.

Storyboarding

Designers use storyboarding similarly to the film industry, using a series of illustrations, images, or screens to show a user’s journey. Storyboarding is helpful as it allows design teams to zoom out from the user flow and visualize a user’s environment and circumstances.

For example, if you’re designing an app for food delivery drivers, you’ll need to visualize the user flow from multiple perspectives:

• Walking
• Cycling
• Scooter/motorbike
• Car
• Van

Storyboard combined with user flows helps design teams empathize with users better to deliver more relevant solutions.

Types of User Flows

Here are seven common user flow categories. Design teams can use the techniques and mediums above to visualize these user flows.

Task flows

Task flows represent the steps users must follow to complete a specific task. These flows focus on sequential user actions and decision points, often visualized using a flowchart. Task flows are particularly helpful for identifying pain points and optimizing user journeys.

Onboarding flows

Onboarding flows allow product teams to visualize and design the product’s initial setup and introduction. These flows incorporate account creation, tutorials, feature highlights, and personalization options to familiarize users and get them started quickly.

Conversion flows

Conversion flows are crucial for generating revenue and growth. These flows represent the steps toward a desired action or outcome–for example, newsletter signups, purchases, plan upgrades, etc. Designers typically aim to minimize friction and distractions for these flows to maximize conversion rates, upsells, and other revenue-generating activities.

Navigation flows

Navigation flows outline the structure and architecture of a digital product. These visualizations help design teams understand how users move between screens, sections, and features. They can use these insights to prioritize features and content so users can find things faster and complete tasks more efficiently.

Account management flows

Users often need to update account information like addresses, passwords, billing details, app preferences, subscriptions, etc. Account management flows allow designers to simplify these administrative experiences so users can return to more important tasks.

Error flows

Error flows allow design teams to simulate issues and design solutions to fix them. They can use these insights to improve the user flow and eliminate errors from occurring or create appropriate feedback for users to correct problems.

Offboarding flows

Offboarding flows guide users through discontinuing a product or service, like canceling a subscription or deleting their account. These flows must be as efficient as onboarding to minimize frustration, increasing the chances of winning back customers.

How to Create a User Flow in 8 Steps

Here is a step-by-step framework for creating user flows.

Define the goal and entry points

Identify the task or goal you want to analyze–this could be one of the above user flows or something specific to your product. This goal will help determine the scope and focus of your user flow and which visualization is most appropriate.

If you are designing a website user experience, another good practice before creating your flows is to determine and map out where your users are coming from. Based on Morgan Brown’s advice in Stop Designing Pages and Start Designing Flows, we’d recommend you consider the following sources for your web or mobile prototype:

• Direct traffic
• Organic search
• Paid advertising
• Social media
• Referral sites
• Email

Identify personas

Your product may have many user personas. Determine which of these is most relevant to the user flow. You may assess the user flow for multiple personas to ensure it meets everyone’s needs and expectations.

For templates and helpful tips on creating personas, check out the chapter “Analyzing Users Before Diving Into Design” in the free ebook The Guide to UX Design Process & Documentation.

List user actions and decision points

Break down the user journey into a list of individual actions and decision points. Consider each step a user must take to achieve goals and their choices. For example, a signup screen might have several options, including email signup and multiple social logins. Each option will have a different path to completing the signup process.

Map the flow

Start by sketching your flows on paper or in a digital tool to iterate on many ideas fast. This should be a collaborative effort where team members share ideas and suggestions.

Once you have a basic outline, you can create your user flow in a design tool. UXPin offers five built-in design libraries, one of which is aptly named User Flows. UXPin’s User Flows library includes everything teams need to create and share user journeys, including:

• Flow lines for every conceivable direction
• Action blocks
• Icon blocks
• Labels
• Devices (mobile, tablet, desktop)
• Gestures

Here are a couple techniques for outlining your flow.

Writing-first Approach to Outlining a Flow

You can use the writing-first approach, which Jessica Downey writes about in her article Jumpstarting Your App Conception Without Sketching UI. This outlining method helps flesh out ideas and build a “common understanding” of each page of your app or site.

Let’s create one for, say, a banking app. The scenario: someone wants to turn on auto deposit. Note in the outline below, content in [brackets] represents action buttons/links.

Step 1: Would you like to set up auto deposit?

[Set auto-deposit]

Step 2: Select Deposit Frequency

[Once per month][Twice per month]

[Every other week][Every week]

Step 3: Deposit Once per Month

[Select calendar day]

Step 4: Set Amount

Display amount field

[Set auto-deposit]

Shorthand Approach to Outlining a Flow

You can also try  a shorthand approach used by Ryan Singer at Basecamp. Ryan’s approach treats flows as ongoing conversations.

For our banking app example above, we can create a shorthand for Steps 2 and 3 that looks something like this:

To see how Singer demonstrates shorthand for Basecamp and how he can illustrates complex flows with this outlining process, check out A Shorthand for Designing UI Flows.

Add screens

If you’re designing a wireflow or screen-flow, you can add relevant wireframes, mockups, and screenshots depending on the level of fidelity you need for your user flow.

Include system feedback

Add system feedback and responses such as error messages, success notifications, or loading indicators. This detail will help designers and engineers create the appropriate UI components and content to guide users.

Review and iterate

Analyze the user flow for potential improvements, pain points, or friction. Share the visualizations with team members and stakeholders for feedback and iterate until you have a flow ready for prototyping.

Prototype and test

Create a prototype of your user flow in a design tool. UXPin’s built-in design libraries (iOS, Material Design, Bootstrap, and Foundation) provide designers with UI components and patterns for web and native applications. Drag and drop UI elements from the Design Libraries panel to create high-fidelity mockups you can test in the browser or use UXPin Mirror for mobile app testing.

Create fully interactive prototypes using advanced UXPin features to achieve results that accurately replicate the final product:

• States: allow designers to create multiple states for a single UI element and design complex interactive components like accordions, carousels, steppers, and more.
• Variables: capture data from user inputs and create personalized, dynamic user experiences–like a welcome message using data from the name field in a signup form.
• Expressions: Javascript-like functions to create complex components and advanced functionality–no code required!
• Conditional Interactions: create if-then and if-else conditions based on user interactions to create dynamic prototypes with multiple outcomes to accurately replicate the final product experience.

Enhance your user flows with high-quality prototyping and testing from UXPin. Start designing the user experiences your customers deserve with the world’s most advanced design tool. Sign up for a free trial.

The post User Flows – How to Create Perfect User Flows for Smooth UX appeared first on Studio by UXPin.

Peter Morville’s User Experience Honeycomb has been around since 2004 and is still a highly relevant design framework for modern product development projects. The framework forces design teams to evaluate a product through seven facets of user experience to identify areas for improvement.

This article provides an overview of the UX Honeycomb and the circumstances where it’s most effective. We highly recommend checking out our design frameworks article for more UX models that solve problems and improve project delivery.

Revolutionize your workflows with the world’s most advanced UX design and prototyping tool. Sign up for a free trial to discover all of UXPin’s code-based design features.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is the User Experience Honeycomb? 

The UX Honeycomb is a design framework developed by Peter Morville in 2004. The framework uses seven facets of UX to guide design teams in delivering a good customer experience. The UX Honeycomb is also a fantastic educational tool for educating junior designers about user-centered design and how to design products customers will love.

Who is Peter Morville, the author of UX Honeycomb?

Peter Morville is an information architect and user experience designer from Scottsville, Virginia, USA. His bestselling books include Information Architecture for the World Wide Web, Intertwingled, Search Patterns, and Ambient Findability.

Peter has spoken on information architecture and user experience at conferences and workshops worldwide and consulted for many Fortune500 companies through his company Semantic Studios.

Peter Morville has won several awards, including from the University of Michigan, AIIP, Society for Technical Communication, and the National Cancer Institute, to name a few.

You can follow Peter’s blog Intertwingled where he shares his valuable knowledge and insights.

7 Facets of UX Honeycomb

Peter’s UX Honeycomb identifies seven facets of user experience designers must fulfill to deliver a product that successfully meets user needs. Let’s explore those seven facets in greater detail.

Useful

The useful component asks, “Is this product or feature valuable to users?” “Is there a want or need?” “Does your product solve a problem for users?”

If a product or feature isn’t useful, it has no purpose, and there’s no reason to build it in the first place. Whether something is useful comes from thorough user research and understanding end-users.

Usable

Usability is a significant part of user experience design. A product might be useful, but if it frustrates users, then it isn’t usable.

Designers must create intuitive user interfaces and information architecture to minimize any learning curve while making it easy to complete tasks or use features.

Prototyping and testing are crucial in identifying pain points and improving the user experience. Designers must also conduct UX audits to ensure new releases meet a project’s requirements while fulfilling user needs.

Desirable

Aesthetics and desirability make digital products enjoyable to use. Designers must consider layouts, visual design, interaction design, and other UI design elements that engage and excite users.

During usability testing and interviews, designers must carefully consider users’ feelings and emotions to determine a product’s desirability. The goal is to delight users with products and features that solve problems effortlessly.

Findable

Findable is about making content and features easy to find. Information architecture, search, and navigation are vital for making a product “findable.” Designers must prioritize navigation according to user needs and business goals. 

For example, when designing a mobile app, designers must decide which menu items live on the tab bar vs. behind a navigational drawer.

Findable also includes alerts and error messages. Designers must guide users to solve problems as quickly as possible–like helpful, actionable error messages for form fields.

Accessible

Designing accessible products is essential for modern product development. Designers and engineers must ensure everyone can navigate a site effectively and digest its content, regardless of physical or mental ability.

Accessibility extends beyond these physical and mental limitations to situational and environmental constraints. For example, a voice user interface (VUI) helps blind users use an application, but it’s also essential for someone driving a vehicle.

Designers must consider who will use their products and what situational and environmental challenges they might encounter. It’s also imperative to think about people with disabilities and how to design comparable experiences for assistive technologies.

Credible

Trust and credibility are essential for acquiring and retaining customers. Users expect a consistent product they can rely on to live up to expectations and doesn’t deceive. 

For example, how easy is it for someone to downgrade or cancel a paid service? Making these tasks easy creates trust, increasing the likelihood of someone returning as a paying customer. A difficult experience frustrates people, damaging the product and brand’s credibility.

Designers must also ensure CTAs and instructions do what they say. Using ambiguous language or tricking users into completing a task is a quick strategy for losing customers!

Valuable

Users must want or need to use your product. A valuable product solves problems and delivers a return on investment. The return doesn’t have to be monetary; it could be time-saving, help achieve something the user can’t do otherwise, a mindless distraction while waiting in a queue, or even bring joy.

For example, food delivery apps became extremely valuable to people in many countries during lockdowns. These products kept many restaurants open while providing customers with meals.

Understanding users and delivering services that satisfy their wants and needs makes a product valuable.

How to Use the UX Honeycomb

The UX Honeycomb is an excellent framework for evaluation. It’s most effective for existing products rather than designing from scratch. Here are some scenarios where design teams might use the UX Honeycomb framework:

• Erasing design debt: Some design debt is easy to fix, but other usability issues require a systematic approach to identify the core issue(s). The UX Honeycomb lets designers look at problems from multiple angles to pinpoint the root cause.
• UX checklist: The UX Honeycomb provides designers with a foundational user experience checklist during UX audits and other design evaluations.
• Educational tool: Designers can use the UX Honeycomb as a framework for educating junior designers, clients, stakeholders, and cross-functional teams about user experience and how usability issues impact users.
• Redesigns: Designers can use the UX Honeycomb to identify user experience flaws in an existing product before a redesign. 

What is an Example of Using UX Honeycomb?

Let’s see how user experience designers can use UX Honeycomb to build a banking app for mobile designers.

1. Useful

• Objective: Ensure the app meets users’ needs effectively.
• Implementation: Conduct user research to identify the most needed features such as balance checking, money transfer, bill payments, and account alerts.
• Outcome: Features prioritized based on user needs ensure the app is relevant and valuable.

2. Usable

• Objective: Make the app easy and efficient to use.
• Implementation: Design intuitive navigation, simple workflows, and clear instructions. Conduct usability testing to identify and fix issues.
• Outcome: Users can complete tasks quickly and with minimal effort, reducing frustration and improving satisfaction.

3. Desirable

• Objective: Create an aesthetically pleasing and emotionally engaging experience.
• Implementation: Use appealing visuals, engaging animations, and a consistent design language that reflects the brand’s identity.
• Outcome: The app not only functions well but also delights users, encouraging continued use and brand loyalty.

4. Findable

• Objective: Ensure users can easily find the information and features they need.
• Implementation: Implement a logical information architecture and effective search functionality. Use clear labels and a well-organized menu.
• Outcome: Users can quickly locate features like transaction history, settings, or customer support, enhancing the overall user experience.

5. Accessible

• Objective: Make the app usable by as many people as possible, including those with disabilities.
• Implementation: Follow accessibility guidelines such as WCAG. Implement features like screen reader support, high-contrast modes, and adjustable text sizes.
• Outcome: The app is inclusive, allowing users with diverse abilities to interact with it effectively.

6. Credible

• Objective: Build trust and reliability in the app’s functionality and security.
• Implementation: Display clear privacy policies, use secure authentication methods, and provide transparent customer support options.
• Outcome: Users feel confident that their personal and financial information is safe, which is crucial for a banking app.

7. Valuable

• Objective: Ensure the app delivers value to both the business and the users.
• Implementation: Align app features with business goals such as increasing user engagement and reducing operational costs. Continuously gather user feedback and analytics to improve the app.
• Outcome: The app helps users manage their finances effectively while achieving business objectives like customer retention and satisfaction.

Practical Steps

1. User Research: Conduct surveys, interviews, and focus groups to understand user needs and preferences.
2. Usability Testing: Perform tests with real users to identify usability issues and gather feedback.
3. Design and Prototyping: Create wireframes and prototypes, focusing on usability and aesthetics.
4. Accessibility Testing: Use tools and guidelines to ensure the app is accessible to all users.
5. Iterative Improvements: Continuously gather user feedback and update the app to enhance its usefulness, usability, and desirability.

By applying the UX Honeycomb framework throughout the design process, the resulting mobile banking app can provide a comprehensive, user-centered experience that addresses all aspects of user satisfaction and engagement.

Build interactive and fully functional prototypes with UXPin. Sign up for a free trial and start building better user experiences for your customers with UXPin.

The post UX Honeycomb – 7-Factor Design Framework for Great User Experience appeared first on Studio by UXPin.

Many people underestimate the importance of a signup page and use a generic template to onboard new users. Signup pages are your organization’s first point of contact with a new customer, so designers should focus on the user experience just as carefully as they do with any other user interface.

We’re going to explore some of the internet’s best signup forms and why they matter. We’ll also show you how to build and test your signup forms using our code-based design tool.

Can your image-based design tool capture user inputs and validate that data? The problem with image-based design tools is they lack fidelity and functionality. With UXPin’s code-based prototypes, designers can capture user inputs, validate emails and passwords, create conditional formatting, and more! Sign up for a 14-day free trial and discover the endless possibilities with code-based design from UXPin.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a Sign Up Page?

Sign up page is a page designed to collect information from users who wish to create an account or register for a service, website, or application. It is a crucial component of online platforms that require user authentication and personalized access.

Why Your Signup Page Matters?

Signup pages are a way for organizations to attract new leads or sales. It’s usually the first time a potential customer will interact with your brand, so it’s critical that you impress and delight new signups.

Signup forms are probably the least complicated UI element to design but the most challenging to entice people to take action. Designers must understand their target audience and UX psychology to overcome hesitancy and increase conversions.

There are no rules to creating the perfect landing page. A/B testing is crucial for registration form optimization.

Top 10 Signup Page Examples

Here are 10 excellent signup form examples to inspire your next landing page.

1. GetResponse

GetResponse is an industry-leading email marketing and lead generation software with landing pages, forms, and other tools. You would expect such a company to have an excellent registration page, and they do! 

GetResponse ticks all the boxes when it comes to UX design principles; it is consistent, accessible, easy to digest, uses simple language, and provides feedback, to name a few. The page only has three form fields:

• Full Name
• Email
• Password

Think of each form field as another reason why someone won’t sign up for your product or service. By reducing form fields, you increase conversion rates.

GetResponse also highlights its benefits on the signup page, reminding customers why they need this product and the problems it’ll solve. 

One feature you won’t often find on a signup page is an accessibility button to change the form’s background color marketing it more accessible for visually impaired users to read. GetResponse must know that their brand’s blue didn’t contrast well for people with visual impairments, so they added an accessibility button to fix it.

2. Flux

Flux uses a full-screen signup form to onboard new customers. This strategy allows the user to focus on completing a single task without distractions. Even though Flux only requires users to complete three form fields, they break these up into steps, with a separate page for name, email, and password.

Flux also includes a list of requirements below the password field, so users know what length and characters they must use. As they complete each condition, it turns from red to green with a checkmark, so the user knows they have fulfilled it correctly.

3. Leadinfo

The quickest way to get signups is to make it easy, which is precisely what Leadinfo does on its home page signup form. All Leadinfo require to onboard a new customer is an email address. While there is a risk that they might not complete the signup process right away, you have an email address to nurture the lead into a customer.

Leadinfo’s UI design uses typography and color to highlight a problem and how the product can solve it. The clever use of color draws a visitor’s attention to the effortless signup form or the live chat to engage with a sales representative–giving users options and making them feel in control.

4. Cleo

Cleo is an app-based product, so users can only signup via the iOS or Android apps. If a potential customer finds Cleo’s website using a desktop, they need to funnel that customer to download the app.

Cleo makes this easy with a dropdown animation revealing a QR code redirecting users to their preferred app store. They also provide links to Apple’s App Store or Google Play.

While Cleo’s example isn’t a signup page, it’s a great example of creating an immersive, on-brand experience for users to find your product and sign up.

5. Designmodo

Managing users’ expectations and providing context are crucial for good UX design. Designmodo does this well with a three-step signup sequence that displays a progress bar above the form.

Users know what each step requires and approximately how long it will take them to complete the process. Another intelligent strategy about Designmodo’s signup page is to first ask for the user’s email. If the user abandons the signup sequence, they can try to win them back through an email sequence.

6. Salesforce

Salesforce is the world’s leading CRM platform with an extensive suite of tools and products. The company requires a lot of information during signup, including company name, email, phone number, to name a few. Still, they offer a 30-day trial in return–with no credit card or obligation.

Salesforce uses compelling copy to highlight the product’s primary benefits and remind customers that they’re getting 30 days free. The CTA button even says START MY FREE TRIAL, so users know there is a reward for completing Salesforce’s lengthy form.

If you’re asking customers for a lot of information during signup, use value to incentivize the process. Most free trials last 7 to 14 days, so by offering 30 days, Salesforce creates a lot of value. They’re also an established brand with a lot of prestige, so customers are more willing to spend time completing Salesforce’s signup form.

7. Typeform

It’s impossible to have an article about signup pages without mentioning the master of the form, Typeform. Typeform’s immersive and intuitive forms make completing signups, or any form, an enjoyable experience.

Typeform only requires two fields to complete its signup sequence; email and password. The company also offers two social media options, Google and Microsoft. As Typeform is a business product, offering corporate-type social signup options makes more sense than Facebook or Twitter.

Typeform also offers users the opportunity to customize their data privacy with three options to opt in or out of specific communications below the newsletter signup. As this would create a busy signup interface, Typeform uses a dropdown menu to hide these until the user clicks “See options.”

8. Transmetrics

Providing social proof and testimonials on your sign up page is a fantastic way to tell people how the product or service benefits customers. Transmetrics uses a quote from a prominent European customer explaining the company’s excellent customer service and understanding of the logistics industry.

Transmetrics also uses simple language and bullet points to highlight the product’s key benefits. Lastly, the call to action button says “REQUEST A DEMO,” telling the customer exactly why they are filling out this form.

9. Glide

Glide’s email signup form is minimal and effortless. Users can signup using their Google account or email address. The product integrates with Google Sheets, so it makes sense to only offer one social network signup option.

The simple UI design uses a bright blue signup button, immediately drawing users’ attention to the center of the screen. Glide’s signup form can onboard a new customer smoothly and efficiently with two clicks.

10. PayPal

As a financial service, PayPal must collect a lot of personal information during signup. If PayPal had to create a single signup form for its onboarding, it might overwhelm customers, resulting in high dropoffs.

To overcome this problem, PayPal uses a step-by-step process of capturing personal data. The company asks for users’ mobile and email first to follow up if the person drops off.

If you have to collect a lot of information, consider doing it in a step-by-step process and use a progress bar to show customers how many steps they must complete. You should also consider offering the option to save their progress to return later.

Prototyping Signup Pages With UXPin

Prototyping forms in traditional vector-based design tools is impossible. These tools don’t offer the functionality to create working inputs users can interact with.

UXPin is a code-based design tool, which means designers can build prototypes that capture and process data like a website or digital product. Designers can create actual signup forms with inputs that check for conditions and provide error messages.

For example, UXPin lets you create email and password validation. If the user forgets the @ or .com in an email input, designers can program an error message for the user to fix the problem. You can also include password conditions, like character count, letters, numbers, and symbols.

Once a user completes signup, you can welcome them with their name on the next page and include their personal information on a profile page. No image-based design tool offers the fidelity or functionality to prototype signup forms like UXPin!

Ready to give signup form prototyping a try? Here’s how in three easy steps:

1. Sign up for a free UXPin trial.
2. Download our working example of a signup form prototype.
3. Drag and drop the .uxp file into your free UXPin account, and you’re ready to go.

Here is a preview of the signup form prototype you can edit and customize in UXPin.

The post Top 10 Signup Page Examples That Will Make You Want to Redesign Your Own appeared first on Studio by UXPin.

User reviews and feedback are essential for product evolution and growth. Organizations can use this feedback to fix product issues and improve the user experience. Teams may also identify new opportunities for growth and revenue.

This article reveals how design teams can use customer feedback to solve problems and improve products. We also provide an example of how a business went from no customers to a billion-dollar unicorn in less than a decade simply by talking to users.

Enhance your product’s user experience and get meaningful feedback with advanced prototyping from UXPin. Sign up for a free trial to start designing amazing experiences customers want to share!

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

Why are User Reviews Important?

Product analytics are essential for identifying design issues and successes, but they don’t tell you why. This quantitative data is crucial in analyzing users but doesn’t tell you what they think or feel.

You might generate lots of leads or enjoy high conversion rates, but if your customers are unhappy with the user experience, it’ll be hard to retain them–jumping ship to the first competitor with a better offer!

User reviews and feedback help design teams understand customer sentiment and identify issues (or successes) that analytics can’t tell you.

Case Study – Coinbase’s User Review Success Story

In a podcast aired in July 2022, Coinbase Founder and CEO Brian Armstrong talked about how he used customer feedback to change the then startup’s business model and add functionality to buy Bitcoin through the app.

“In Y-Combinator, they often tell you, ‘talk to your customers, prove your product,’ try to find product/market fit.” On a call with one customer who signed up but never used Coinbase, Brain learned that people who didn’t have Bitcoin had no use for the product. At the time, buying Bitcoin was a challenge, so people didn’t know how to add crypto to their Coinbase Wallet.

Brain asked his customer, “If I put a buy Bitcoin button in there [the app], would you have used it?” The customer answered, “Yeah, maybe.”

After adding a buy Bitcoin button to the Wallet, Coinbase experienced tremendous growth and is now a multi-billion dollar company employing 5,000+ employees globally. The catalyst for this success?–Brain talking to his customers to understand their needs and feelings about the product.

Before chatting to his users, Brain had no paying customers, and Coinbase generated no income. He doubted his product and whether he should continue. Had he relied on analytics to tell him his product didn’t work, Coinbase would not exist!

Engaging with customers and taking action on user reviews and feedback is essential for delivering products and features people want.

Where Can You Find User Reviews?

There are many ways product teams can collect customer feedback. Here are some of the most popular methods:

1. Product or website widgets
2. Support tickets and chats
3. Asking customers questions
4. Questionnaires
5. Social media (reviews, hashtags, etc.)
6. App Stores and Review Websites
7. Forums & Communities

1. Product or Website Widgets

Several tools allow you to place widgets on your website or application to collect customer feedback. A great example is Hotjar’s Feedback widget which lets users rate their experience and comment on specific UI elements or content.

These feedback tools offer widgets to gather feedback for multiple UX metrics, including:

• Net Promoter Score (NPS): How likely are people to recommend your product on a scale of 1-10.
• Customer Satisfaction Score (CSAT): Yes or no questions that indicate whether customers are happy with a product or feature.
• Customer Effort Score (CES): Asking customers how difficult it is to complete tasks–typically on a scale of 1-10.
• System Usability Scale (SUS): A 10-question questionnaire that provides UX designers with a digital product’s overall usability score.

2. Support Tickets and Chats

Tracking support tickets and chats are excellent feedback sources for identifying trends–for example, customers can’t find a specific feature or don’t know how to complete a task.

UX designers can use this feedback to test further and pinpoint the issue for fixing. UX benchmarking is crucial for these fixes because it tells the organization if the redesign solves the problem–i.e., reducing support tickets.

3. Asking Customers Questions

As we saw in the Coinbase example, asking customers questions is essential for user experience and growth. Asking customers why can help understand what needs or expectations your product doesn’t fulfill.

For example, asking customers why they’re closing their account or downgrading their plan could help improve the product. You can add these customers to a mailing list and try to win them back when you release features they were missing.

4. Questionnaires

Questionnaires are excellent resources for learning what customers like or dislike. UX designers must look beyond UX research and gather insights from other departments, like sales, marketing, customer support, etc., to understand the customer experience at every touchpoint.

5. Social Media

Social media is a fantastic place to find user reviews, understand brand sentiment, and engage with customers. Beyond user ratings, social media managers can use Twitter, Facebook, and Instagram to search for branded-related keywords, hashtags, and posts and find out what customers say about the product.

Social media is also an excellent resource for researching customers’ opinions about competitors to identify opportunities and avoid failures.

6. App Stores and Online Reviews

Your product’s app store and review sites (Trustpilot, Yelp, TripAdvisor, etc.) provide feedback from real end-users. You to filter by star-rating and keywords to drill into specific problems or customer sentiment.

Team members can also provide a customer support email address in replies to engage with users and get more details about their experience.

7. Forums & Communities

Industry or product forums and communities are excellent for identifying problems and opportunities. Users often visit these platforms to ask questions or seek help.

Creating a community forum for your brand will allow you to engage with customers and prioritize feature releases through upvoting. Customers can also use the platform to report bugs or request new features.

How User Reviews Help You Become Better?

User reviews are only helpful if your team uses them to take action. These are some ways customer reviews can guide UX:

• User-centered design: Reviews help UX designers see products from a user’s perspective and help them empathize better.
• Analyze performance: Organizations can monitor reviews to gauge performance. For example, if negative reviews stop after a feature release, it’s a good sign the new design fixed the problem.
• Optimize user experience: Feedback and reviews help designers make tweaks and adjustments to optimize a product’s user experience–thus retaining customers and attracting new ones.
• UX benchmarking: Organizations can use product and competitor reviews to set UX benchmarks and product goals.
• Reduce churn: Monitoring user reviews and feedback enables design teams to identify and respond to issues before they result in lost business.
• Increase referrals: Customer referrals are excellent, low-cost leads. Improving NPS and CSAT scores increases the likelihood of customers sharing your product.

Negative vs. Positive Reviews What to Use?

Teams must pay equal attention to negative and positive reviews, here’s why:

• Negative reviews: Tell you why customers are unhappy and how to fix it
• Positive reviews: Tell you why customers love your product and brand

Analyzing these reviews can also help prioritize features and fixes. For example, if you have overwhelming negative reviews for a specific feature, it’s probably best to focus on fixing that before releasing something new!

Teams can also analyze competitors’ negative and positive reviews to improve features and avoid making similar mistakes.

Top 8 User Review Tools

Here are several popular user review and feedback tools:

1. Hotjar: Feedback and surveys
2. Lucky Orange: Live chat, form analytics, surveys
3. Crazy Egg: Website/product optimization, including surveys and error tracking
4. FullStory: UX optimization with “frustration signals” and journey mapping
5. VWO: Advanced user tracking and A/B testing templates
6. Survicate: Customer surveys with multiple integrations
7. CustomerGauge: User and account level enterprise feedback tool
8. SurveySparrow: Enterprise omnichannel experience management with surveys, NPS software, chatbots, and assessments

User Experience Optimization With UXPin

Once you identify issues or opportunities, testing ideas and hypotheses are essential for finding the right solution. With UXPin, design teams can build advanced prototypes that accurately replicate a final product experience.

They can use these prototypes to improve user testing and get meaningful feedback from stakeholders. People can use and engage with UXPin prototypes as they would with a code prototype, eliminating the need to “imagine” what a feature is supposed to do.

Designers then can create dynamic experiences with functioning user signup flows, eCommerce checkouts, password validation, and other experiences impossible to replicate with traditional image-based design tools.

Designers can build prototypes based on user feedback to test UIs and pinpoint issues. They can also create prototypes of competitor products to understand how they compare and identify opportunities for improvement.

Optimize UX workflows and enhance your product’s user experience with a code-based design solution from UXPin. Sign up for a free trial to improve prototyping and testing with UXPin–the world’s most advanced design tool.

The post Can User Reviews Help You Design Better UI? appeared first on Studio by UXPin.

Usability testing evaluates the effectiveness and efficiency of a product or website by observing how real users interact with it. It involves conducting structured tests with representative users to identify usability issues and gather insights for improving the overall user experience.

Usability testing is vital in validating design decisions, uncovering usability problems, and informing design iterations during the UX design process. By directly involving users and collecting their feedback, designers can gain valuable insights into how well their product meets user needs, its intuitiveness, and if it effectively supports users in achieving their goals. 

It helps bridge the gap between the designer’s perspective and the actual user experience, allowing for data-driven design decisions and ultimately leading to more user-centric and successful products.

Key takeaways:

• Usability testing is an evaluation process that involves observing and gathering feedback from real users while they interact with a product, service, or system.
• Usability testing can be divided into moderated, unmoderated, and remote types. The biggest difference between them is whether the test facilitator is actively involved in the testing process by asking follow-up questions, helping the user out or he or she is just watching.
• The best apps for usability testing are FullStory, Maze, UXtweak, User Zoom, Hotjar, Userfeel.

Want the highest quality of usability test results? Work on your prototype. Low-fidelity prototypes won’t tell much about your product’s experience. High-fidelity ones quite the opposite. Create fully functional prototypes that grant you the best usability test results. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

Types of Usability Testing

There are three types of usability testing methods:

• moderated testing – a session is conducted by a facilitator who guides the participant
• unmoderated testing – a session is conducted by a facilitator who stays silent and observes the participant
• remote testing – this type of session is run without the physical presence of a facilitator

Let’s explore them one by one.

Moderated testing

A facilitator guides users through predefined tasks and prompts while observing their actions. 

Pros: The facilitator can clarify questions, gather in-depth insights, and provide real-time support.

Cons: Time-consuming and may induce bias due to facilitator influence.

Unmoderated Testing

Users complete tasks independently without a facilitator’s presence. 

Pros: Cost-effective, flexible, and allows for larger sample sizes.

Cons: No one to clarify questions or observe users’ thought processes.

Remote Usability Testing

Due to advances in technology and usability tools, most usability testing is remote rather than in-person these days. Remote testing allows participants to perform usability tests from their location, typically using screen sharing and video conferencing tools.

Pros: Geographic flexibility is convenient for remote participants and allows researchers to test anyone worldwide.

Cons: Limited control over the testing environment and potential technical issues.

Further reading: this article focuses specifically on tools. You can dive deeper into usability testing processes here:

• What is Usability Testing, and How to Run It? – read this article to explore definition and a basic, step-by-step guide of running a test like that; a great starting point.
• Make Fully Functional Prototypes to Improve Usability Testing – learn about functional prototyping and how it can impact your usability test’s results; learn to create your own prototype for testing.
• Everything About Usability Testing Through Al-Powered Software – leverage AI-powered solutions to prepare, run, and analyze usability tests results.
• Moderated vs. Unmoderated Usability Testing: Which is Better? – compare moderated and unmoderated usability tests and choose a type that works for you.
• 5 Ways to Ensure Usability Testing Results Aren’t Ignored – learn how you can turn usability test’s results into your product and make sure that stakeholders and team members will treat it seriously.

FullStory

• Reviews: 4.3/5 stars on Product Hunt
• Pricing: No pricing available on the website

FullStory is a powerful user testing tool that allows you to record and analyze user interactions on your website or application. The platform has many integrations. Teams can view prototype and user actions, gather page insights, take notes, and share these with team members and stakeholders.

Key features

• Session Replays: FullStory records and replays user sessions, allowing you to watch how users navigate your website or application.
• Heatmaps and Analytics: FullStory generates heatmaps and provides detailed analytics to help you understand user engagement and behavior patterns. 
• Frustration Signals: Get automated signals for an abandoned cart, a negative app review, or user churn to stay on top of issues and make necessary adjustments.
• Segmenting and Filtering: FullStory allows you to segment and filter user sessions based on various attributes such as location, device type, or specific user actions. This segmentation helps you focus on specific user groups or behavior patterns for deeper analysis.
• Cross-platform testing: Web, desktop, and mobile testing capabilities allow you to evaluate the usability of your apps and websites. You can conduct mobile-specific studies and gather insights into the mobile user experience.
• Search and Findability: The tool provides powerful search functionality, enabling you to search for specific user interactions, errors, or events.
• Collaborative Sharing and Annotations: FullStory allows teams to share session replays and add annotations to specific moments in the recordings. This feature facilitates collaboration and makes communicating findings and insights with stakeholders easier.
• Integration and API: FullStory offers integrations with other tools and platforms, allowing you to combine usability testing data with other data sources for comprehensive analysis. It also provides APIs for custom data integrations and automation.

Maze

• Reviews: 4.9/5 stars on Product Hunt
• Pricing: Free plan, paid plans start at $99

Maze is a usability testing platform for evaluating and improving the user experience of interactive prototypes. Its focus on task-based UX testing and metrics-driven insights can help designers make data-informed decisions and iterate on their designs.

Key features

• Prototype Testing: Maze allows you to conduct usability testing on interactive prototypes, enabling you to gather user feedback and insights early in the design process.
• Task-Based Testing: Create task-based scenarios for users to complete while interacting with your prototypes. This approach allows you to observe how users navigate through your product and identify any usability issues or pain points they encounter.
• Metrics and Analytics: Maze provides quantitative metrics and analytics to measure and evaluate the usability of your prototypes. You can track success rates, completion times, and other performance indicators to gain insights into user behavior and identify areas for improvement.
• Remote Testing: Maze offers remote testing capabilities, allowing you to conduct usability testing with participants anywhere in the world. This feature provides flexibility and convenience in recruiting and engaging diverse users.
• Insights and Reports: The tool generates visual reports and insights based on user testing data, helping you communicate findings and share actionable recommendations with stakeholders.
• Integration and Collaboration: Maze integrates with various design and prototyping tools to incorporate usability testing into your existing design workflow. It also offers collaborative features that enable team members to share and collaborate on user testing projects.

UXtweak

• 4.9/5 stars on Product Hunt
• Pricing: Free plan, paid plans start at $80

UXtweak is a user-friendly user-testing platform that offers valuable features for capturing user behavior, collecting feedback, and visualizing user journeys. Its focus on session recording and visualizations can help uncover usability issues and make informed design decisions.

Key features

• Session Recording: UXtweak allows you to record user sessions, capturing their interactions and behaviors as they navigate your website or application. 
• Heatmaps and Clickmaps: Generate heatmaps and clickmaps that visualize user interactions, such as mouse movements, clicks, and scrolling behavior for user interfaces.
• Surveys and Feedback Collection: The tool offers survey and feedback collection features, enabling you to gather qualitative feedback from users. 
• User Journey Mapping: UXtweak allows you to create user journey maps, visualizing the end-to-end customer experience across different touchpoints.
• Collaboration and Insights Sharing: The tool provides collaboration features that enable you to invite team members and stakeholders to view and analyze user data together. It also facilitates easy sharing of insights and findings, enabling effective communication and collaboration within the team.
• Privacy and GDPR Compliance: UXtweak provides options to anonymize user data and obtain user consent, ensuring that your usability testing practices align with data protection regulations.

User Testing (UserZoom)

• Reviews: 4.2/5 stars on G2
• Pricing: No pricing available on the website

User Testing, previously, UserZoom is a user research platform offering features for remote studies, user research, metrics analysis, and participant management. Its comprehensive set of tools and analytics makes it suitable for organizations conducting in-depth usability studies and gathering actionable insights to improve their digital products.

Key features

• Remote Usability Testing: the tool allows you to conduct remote usability testing, enabling you to test your digital products with users worldwide.
• User Research Tools: it offers a range of UX research tools, including questionnaires, card sorting, tree testing, and task-based studies.
• Metrics and Analytics: The tool provides a variety of metrics and analytics to measure the usability and effectiveness of your designs. You can analyze task completion rates, time on task, success rates, and other performance indicators to identify areas for improvement.
• Behavioral Analysis: User Testing (UserZoom) allows you to analyze user behavior through session recordings, heatmaps, and clickstream analysis.
• Tree Testing: Ask users to find the right location for completing key tasks and evaluate your information architecture and hierarchy early in the design process.
• Participant Recruitment and Management: The tool provides participant recruitment and management features, making finding and engaging with target users for your usability studies easier. You can screen participants, schedule sessions, and track their progress within the platform.

Hotjar

• Reviews: 5/5 stars on Product Hunt
• Pricing: Free plan, paid plans start at $80

Hotjar offers a range of features such as heatmaps, session recordings, feedback collection, and conversion rate optimization tools. It provides valuable insights into user behavior, helps optimize the user experience, and enables data-driven decision-making for website improvements.

Key features

• Heatmaps: Hotjar offers heatmaps that visually represent user interactions on your website or app. These heatmaps show where users click, move their mouse, or scroll, providing valuable insights into user behavior and areas of interest.
• Session Recordings: Record and playback user sessions on your website to observe how users navigate, interact with specific elements, and identify usability issues or pain points.
• Feedback and Polls: Hotjar enables you to collect user feedback through customizable on-site surveys and polls. 
• Funnel and Form Analysis: The tool provides conversion funnel and form analysis capabilities, allowing you to track user journeys and identify conversion bottlenecks or form abandonment. 
• Conversion Rate Optimization (CRO) Tools: Hotjar offers CRO tools such as A/B testing and behavior-based targeting. These features help you test different variations of your website, analyze user responses, and make data-driven decisions to optimize conversions.
• User Recruitment and Panel: Hotjar provides a user recruitment and panel feature that allows you to find and recruit specific user segments for research purposes. 

Userfeel

• Reviews: 4.4/5 stars on G2
• Pricing: Pay-as-you-go starting at $30

Userfeel is a comprehensive usability testing tool that offers remote testing capabilities, task-based testing, and detailed reporting. It provides valuable insights into the user experience, helps identify usability issues, and supports data-driven design decisions.

Key features

• Remote User Testing: Userfeel allows you to conduct remote usability testing with participants worldwide. Test participants can provide their feedback and complete tasks on your website or app while recording their screen, voice, and actions.
• Screen Recording and Audio: Userfeel captures screen recordings of participants’ interactions with your website or app, including mouse movements and clicks.
• Task-based Testing: Userfeel enables you to create specific tasks for participants to complete during the testing session. You can define the goals and actions you want participants to perform, allowing you to evaluate the usability and effectiveness of your website or app.
• Participant Filtering and Targeting: Userfeel allows you to filter and target participants based on specific demographics, such as age, location, and language. This feature helps you gather feedback from your target audience and ensure representative insights.
• Detailed Reports and Analytics: Userfeel provides detailed reports and analytics, including usability ratings, time-on-task metrics, and qualitative feedback from participants. 
• Competitive Benchmarking: Userfeel offers competitive benchmarking capabilities, allowing you to compare your website or app’s usability against industry standards or competitors. This feature helps you gain insights into the strengths and weaknesses of your design.

Build Test-Ready Prototypes with UXPin

Among many usability testing apps, a select few have proven to be the most popular among the people who run tests. They include FullStory, Maze, UXtweak, User Zoom, Hotjar, and Userfeel. By leveraging these powerful tools, product design teams can unlock valuable insights and facilitate design improvements that result in intuitive and user-friendly websites, desktop and mobile apps or other digital products that resonate with their target audience.

Get authentic, actionable user feedback that you can quickly incorporate into your design by letting your users interact with a prototype that they can click on, swipe through, fill out with their data and more. Build one with UXPin and transform your design workflow with UXPin Merge. Discover UXPin Merge.

The post 6 Tools for Usability Testing appeared first on Studio by UXPin.

Scope creep is a common issue in UX design projects. By proactively preventing scope creep, UX designers can ensure that their projects are completed on time and within budget. 

Establishing clear goals and objectives, creating a design brief, encouraging collaboration, planning for the unexpected, and creating a system of governance are all effective ways project teams can reduce project scope creep.

Eliminate designing and coding from scratch to reduce scope creep while creating a single source of truth between design and development with UXPin Merge. Visit our Merge page for more details and how to request access to this revolutionary technology.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is Scope Creep?

Scope creep occurs when the scope of a project expands beyond its original objectives. Various factors cause scope creep, including changes in user requirements, lack of communication between stakeholders, or inadequate planning.  

When scope creep occurs, it can significantly impact a project’s timeline and budget. It can also lead to increased complexity and difficulty in completing the project. UX designers must be aware of the potential for scope creep and take steps to prevent it.

One way to prevent scope creep is to ensure that all stakeholders are involved in the planning process from concept to project launch. This collaboration will help ensure that everyone clearly understands the project’s objectives and deliverables while staying in sync with any changes.

It’s crucial to set realistic expectations for the timeline and budget of the project to account for any changes ahead of time. UX designers must remain flexible throughout the development process. This flexibility allows them to quickly adapt to any changes during development without completely overhauling their plans or starting from scratch.

By proactively preventing scope creep, UX designers can ensure that their projects are completed on time and within budget.

10 Common Causes of Scope Creep

Here are ten examples of scope creep and what causes them. Use these examples to create systems to mitigate scope creep for future projects.

Poorly defined requirements and project deliverables

When the project requirements and deliverables are not clearly defined, it can lead to scope creep as stakeholders add new features or change existing ones. For example, a client may ask for a website design that includes a blog, then request additional features such as an e-commerce store or a forum later.

Unclear project goals

Scope creep often occurs when stakeholders don’t clearly outline and agree on a project’s goals. Stakeholders and team members try to add more features or adjust existing ones to meet their interests, and no one interjects because they haven’t agreed on the desired outcome or scope.

Poor communication

Poor communication often results in silos across teams and misinformed stakeholders. Without clear communication, stakeholders may be confused or frustrated when teams report unexpected changes or delays, leading to additional requests for changes that were not part of the project’s original scope.

Unforeseen circumstances

Even with excellent planning and clearly defined goals, unforeseen circumstances can derail a project beyond its original scope. Technology changes, new regulations, or a company merger/acquisition can lead to scope creep.  

These unforeseen circumstances are often harder to plan for, so project managers and team leaders must design project scopes for flexibility and have contingencies for critical features and KPIs.

Lack of prioritization

Prioritization helps team members focus on what’s important and allocate resources accordingly. This prioritization also helps with tracking progress and clear goal-setting. Without proper prioritization, teams may spend too much time on less important aspects of a project and even go beyond the original scope within a specific area. 

For example, designers may allocate too many resources to creating a website’s homepage when the most critical part of the project is optimizing product pages for conversions.

Unclear roles & responsibilities

Every project brief must define roles, responsibilities, and decision-makers for every discipline (i.e., research, prototyping, interviews, testing, etc.). Without authority and accountability, team members and stakeholders add features that may not align with the project scope or goals.

Unrealistic deadlines

Setting unrealistic deadlines can lead to scope creep as team members rush through tasks to meet them without considering how they fit into the overall project plan and timeline.

Changing stakeholders

It’s common for new stakeholders to join a project, bringing new ideas and expectations. If the project doesn’t have clear goals, responsibilities, and priorities, new, overzealous stakeholders keen to impress could introduce features or ideas that don’t align with the project’s scope.

Poor risk management

Risk management is vital for planning a project. Project managers must identify any risks and implement plans to mitigate or reduce them while remaining within the project’s scope. This proactive approach will ensure team members don’t adopt a solution that doesn’t align with the project’s goals and objectives.

Poor budgeting and resource allocation

A project’s budget and resource allocation must align with the project’s goals and desired outcomes. Without adequate resources, stakeholders set unrealistic expectations, forcing team members to find alternative solutions, often resulting in scope creep.

How can Designers Help Reduce Scope Creep?

Create a scope statement

Before beginning a project, designers must establish clear goals and objectives to create a scope statement which includes:

• Project goals and objectives
• Project requirements
• Project scope description
• Project exclusions
• Project constraints
• Project assumptions
• Project deliverables

Meeting with project stakeholders, including management, the product owner, and the technical lead, will help ensure everyone is on the same page with these above points clearly defined.

During these meetings, design leads must agree on KPIs to manage expectations so stakeholders can monitor key milestones without asking for updates.

Create a design brief

Where a project plan outlines the entire project’s goals, a design brief is specific to the UX team. It’s important to create a template or framework for taking on projects.

Omkar Chandgadkar, a Senior UX Designer at Amazon Alexa Smart Home, created three design offerings or frameworks for UX projects. Each offering had a different scope, from basic usability fixes to a long-term product vision.

Creating these different offerings streamlined project onboarding for Omkar’s team, with design brief templates specific to each one. For example, a design brief to fix a usability issue requires fewer details than a product redesign.

Encourage collaboration

Clear communication and collaboration from before the project begins until post quality assurance is critical for ensuring design projects stay within scope and everyone is in sync.

The first step is to create a collaborative environment between teams, departments, and project stakeholders with

• Open communication channels for the project (Slack, Teams, etc.)
• Shared/integrated project management software
• Schedule regular project meetings and updates with stakeholders
• Shared resource access (Google Drive, One Drive, Dropbox, etc.)

Plan for the unexpected and document scope changes

No project goes perfectly to plan. Change is inevitable and often necessary for the project’s success. Designers need to remain flexible and open to changes.

For example, during the initial design of Quuu (a content-curating platform for social media), the product team decided to delay the launch in favor of adding a referral system. They realized the feature wouldn’t add much value if implemented after launch, meaning the delay resulted in a positive return on investment.

Create a system of governance to document and approve changes before implementation. This process will allow those responsible to make the final call and notify everyone of the changes. Keeping a record of this process creates transparency and accountability while reducing scope creep.

Reducing Scope Creep and Enhancing Collaboration with UXPin Merge

UXPin Merge enables you to sync a design system to UXPin’s design editor, so designers and engineers use the same component library. This single source of truth enhances collaboration between designers and developers.

Merge is also effective for reducing scope creep. With ready-made, interactive components, designers don’t have to design from scratch minimizing the risk of errors, inconsistencies, and design drift.

Project collaboration

UXPin also facilitates collaboration through Comments. Designers and stakeholders can preview designs and leave comments as feedback (even if they don’t have a UXPin account). Designers and stakeholders can assign comments to specific team members, who can mark them as resolved once complete.

UXPin’s Comments keep everyone in sync with design progress while enhancing feedback and collaboration. UXPin also integrates with project management tools like Jira and Slack to keep teams connected at all times.

Faster time to market

With styling and functionality “baked-in” to every Merge component, designers only focus on building and testing UIs to solve user problems and meet project goals.

UXPin Merge creates a drag-and-drop environment where designers can simply swap UI elements and design patterns with every iteration. These quick changes enable designers to get immediate feedback to test and iterate faster.

“It’s been so helpful for us to have these high-fidelity prototypes built with UXPin Merge. We build high-fidelity prototypes much quicker, and we get immediate feedback after the session. If there’s something we can fix immediately, we make that change before the next participant and get feedback much faster than before.” Erica Rider, UX Lead EPX at PayPal

Streamline project processes, sync designer/developer workflows, and create a single source of truth with UXPin Merge. Visit our Merge page for more details and how to request access.

The post Taming Scope Creep in Product Design appeared first on Studio by UXPin.

Design teams commonly use Jakob Nielsen’s heuristics to evaluate human-computer interaction because they provide a comprehensive user experience audit.

A heuristic evaluation explores ten critical facets of a product’s user experience, allowing design teams to focus on specific usability problems within user interfaces and interactions.

Get accurate insights about your product’s usability performance using advanced prototypes that look and feel like the final product. Sign up for a free trial to discover interactive prototyping with UXPin.

Build advanced prototypes

Design better products with States, Variables, Auto Layout and more.

Try UXPin

What is a Heuristic Evaluation (Heuristic Analysis)?

Heuristic refers to problem-solving and self-education, usually through trial and error. In UX design, heuristics describes the cognitive load or mental capacity required to make decisions and complete tasks. Designers use usability testing to evaluate heuristics and identify issues for fixing.

There are ten usability heuristics, and a heuristic evaluation assesses these to identify a product’s usability performance. These usability heuristics come from Jakob Nielsen’s (co-founder of the Nielsen Norman Group) ten general principles for interaction design which he devised in the early 1990s.

10 Usability Heuristics

Jakob Nielsen created the ten usability heuristics based on research from two other UX and engineering experts, including:

• Gerhardt-Powals Cognitive Engineering Principles
• Ben Shneiderman’s Eight Golden Rules of Interface Design

Visibility of system status

Designers use system status indicators for a range of interactions and user tasks. For example, the battery icon on your mobile phone displays the battery life status. This battery life indicator is crucial because it informs users whether they have enough power and when to charge the device. Without it, the device would die intermittently without warning, causing frustration for end-users.

Visibility of system status is crucial for visual feedback–what happens when a user interacts with a component (click/tap, hover, swipe, etc.) or completes an action, like submitting a form? The system must provide feedback to inform the user that something is happening or that it has executed a task.

The following user interface design elements are great examples of visibility of system status:

• Progress trackers on forms
• Loading icons
• System messages (success, warning, error, etc.)
• Badges on shopping carts, text apps, etc.
• App notifications

Designers must be careful not to overwhelm users with system status updates and only provide feedback when it’s relevant and necessary.

Match between the system and the real world

There are two rules within match between the system and the real world:

• Speak the user’s language
• Follow real-world conventions

Firstly content designers must always use obvious words and language. Facebook’s “News Feed” and “Photo Tagging” are excellent examples of speaking the user’s language. In a podcast with Lex Friedman, early Facebook exec. Chamath Palihapitiya describes how the company chose the most obvious names for Facebook’s features to ensure people knew what they did.

Connected to language are real-world conventions–mimicking real-world experiences and interactions in a digital product. For example, an eBook experience is similar to a physical book, where users can turn pages, highlight text, and add bookmarks.

Matching the system to the real world makes user experiences obvious, reducing the cognitive load required to navigate products and complete tasks. This obviousness is especially important for people learning technology, the elderly, and users with cognitive disabilities.

User control and freedom

Designers must provide exits and offramps for users through edit, undo, redo, back, cancel, etc. The freedom for users to rectify a mistake or change their minds is crucial for a good user experience.

This freedom is especially important regarding financial decisions like purchases or changing a paid service. Giving users this freedom and control builds trust while minimizing fears of exploring a product and its features.

Consistency and standards

There are two facets of consistency and standards:

• Internal
• External

Internal consistency and standards apply to your UIs and components, usually defined by your product’s design system or design language. Designers must follow these internal standards consistently to ensure tasks and actions are always obvious to users.

External consistency and standards refer to globally recognized UX patterns. For example, the hamburger icon to open a navigational drawer or the cart/trolly icon for eCommerce websites. Breaking these conventions forces users to learn something new, thus increasing their cognitive load.

Following consistency and standards reduces the need to think about actions so that users can locate content and complete tasks with minimal mental effort.

Error prevention

Error prevention is one of the most critical heuristics. Errors can cause significant distress, especially for irreversible actions–for example, transferring money to the wrong bank account or accidentally deleting something.

Designers use a strategy called cognitive friction, which creates roadblocks to force users to stop and think before completing an action. For example, a dialog popup after a user clicks transfer confirming the amount, recipient’s name, bank account number, and branch code with the option to confirm or cancel the transaction.

Good user experience design creates these friction points to prevent errors and, in some cases, reverse them. For example, saving recently deleted items for 30 days.

Recognition rather than recall

Humans have limited short-term memory, which means we battle to retain information. Designers must make content visible or retrievable, so users don’t have to remember. For example, eCommerce platforms allow shoppers to save their delivery and billing details, so they don’t have to recall these at checkout.

This concept includes simplifying designs, so users don’t have to refer to the documentation or watch a tutorial to use a product. Designers use form labels, menu items, tooltips, placeholder text, and other reminders to help users complete tasks.

Flexibility and efficiency of use

Flexibility and efficiency of use allow users to complete tasks and actions fast while providing more than one way to execute them. The best example of this principle is copying and pasting. Users typically have three options, depending on the application:

• Using the app’s primary navigation, Edit>Copy and Edit>Paste
• Using the mouse’s right-click, right-click Copy, right-click Paste
• Using the keyboard shortcut, CMD/CTRL+C, CMD/CRTL+V

Another example for you Instagrammers is the double tap to like an image instead of tapping the heart/like icon. 

When users first start using a product, they generally use the most obvious default option, i.e., the app’s navigation or icon in Instagram’s case. But as they become more confident, they use shortcuts to maximize efficiency.

Aesthetic and simple design

User interfaces must be aesthetically pleasing and simple so users can focus on the most critical content and actions without distraction. For example, an eCommerce store wouldn’t run ads on its website because A) it would create a busy UI, and B) competitors’ ads would likely appear, taking the user to another offer.

In a bid to convert users by any means necessary, companies often have too many CTAs on their website or landing page–join our mailing list, purchase this product, follow us on Twitter, Like us on Facebook, book a sales call! Too many options overwhelm users resulting in the opposite effect–they leave!

Designers must prioritize content to support the user’s primary goal or task while eliminating irrelevant and distracting UI elements.

Help users recognize, diagnose, and recover from errors

Error messages must do more than alert users to a problem; they must offer an easy solution to fix the problem. This snackbar example from Google’s Material Design adds an “Undo” action in case the user archived an email accidentally.

Google’s Gmail does a similar recovery action after you send an email with a snackbar allowing users to “Undo” sending–”Oh no! I forgot to add the attachment–*Undo–Thank you, Gmail!”

Other examples where designers help user recover include:

• 404 errors with helpful links
• Error messages with a link to activate the solution
• Input field error messages with explicit instructions to fix the problem

Help and documentation

No one likes to leave what they’re doing to read documentation, but often it’s necessary to diagnose the problem and find a solution. Designers can help users by using walkthroughs, tooltips, popovers, and chat to find answers without leaving the page they’re working on. 

Google Docs provides users with a help popup where they can search the product’s documentation to find a solution. Additionally, there is a link to the Google Docs community and an option to report a problem directly to Google.

The documentation must be easy to search and navigate while providing users with helpful, actionable answers. UXPin’s documentation provides users with the most searched help categories and an option to search (with autocomplete). Each section offers images, GIFs, and written instructions to help users find what they need.

How to Conduct a Heuristic Evaluation

With a clear understanding of each usability principle, it’s time to conduct your heuristic evaluation.

The process of carrying out a heuristic evaluation is the same regardless of the industry or nature of the design project.

• Phase one–Planning: the design team uses user research to map the heuristic evaluation. They also delegate tasks and define goals.
• Phase two–Execution: conducting the heuristic evaluation.
• Phase three–Review: synthesize and review the evaluation and design a plan of action.

Planning

First, teams define which heuristics they’ll use and the evaluation methods. These heuristics should be chosen carefully based on market research, previous user testing, and the principles of careful design.

Next, the team must select the evaluators–the usability experts responsible for the evaluation. Evaluators generally work in pairs to reduce bias and spot more usability issues. These small units must assess one heuristic at a time. Simultaneously evaluating multiple heuristics can result in errors.

Executing

1. The first step is briefing the evaluators so that they understand the heuristics they’ll use and how the system functions.
2. The evaluators interact with the system to understand how it works.
3. The evaluators evaluate the system based on pre-determined heuristics, noting any usability issues they encounter.

Reviewing

Evaluators present their findings with recommended actions to fix the problems. The team collates these into one master document where they create and prioritize tasks to fix the usability issues.

Identify more usability problems and fix errors before they make it to end-users with advanced interactive prototyping from UXPin. Sign up for a free trial to explore UXPin’s sophisticated design tool.

The post Heuristic Evaluation – The Most Informal Usability Inspection Method appeared first on Studio by UXPin.

There are loads of web accessibility guidelines designers and engineers must follow when designing a website or application. It can be overwhelming to digest them all or know when to use the different levels. 

This article simplifies the official web content accessibility guidelines with a web accessibility checklist for designers. We also explain the difference between WCAG 1.0 and 2.0 and the different levels (A, AA, and AAA).

With built-in accessibility features, designers never have to leave UXPin to test UIs for contrast and color blindness. Sign up for a free trial to discover the ease of accessible websites and apps with UXPin.

What is the Purpose of an Accessibility Checklist?

A web accessibility checklist provides designers and engineers with a list of considerations for designing a website for people with disabilities and assistive technology.

Team members can reference the checklist against designs and code to ensure they meet Web Content Accessibility Guidelines (WCAG).

What is the Difference Between WCAG 2.0 and WCAG 1.0?

The Web Content Accessibility Guidelines (WCAG) must update and evolve with technology. Each update adds new guidelines that align with new devices.

Aside from the guidelines, there are also two iterations of the WCAG system. The first iteration, WCAG 1.0, used guidelines and checkpoints with priority 1, 2, or 3. 

In 2008, WCAG 2.0 changed from checkpoints to level success criteria. The system we currently work with has:

• Four design principles
• Multiple guidelines within each principle
• Testable success criteria levels A, AA, or AAA for each guideline

According to official documentation, WCAG 2.0 provides several key improvements:

• Applies to more varieties of technologies and devices
• Designed to evolve with future technologies
• Requirements are easier to test with automated testing methods & human evaluation
• Input and collaboration from the international community
• Improved support material and documentation to make guidelines easier to follow and implement

Check out the official WCAG 2.0 presentations for more details.

3 Success Criteria Levels of Accessibility Compliance

WCAG 2.0 introduced three success criteria levels (or levels of conformance) to evaluate each guideline based on the product’s intended purpose and target audience.

• Level A – Basic
• Level AA – Acceptable
• Level AAA – Optimal

WCAG Level A

Level A ensures websites meet the bare minimum accessibility standards. Level A compliance addresses core issues and elements to make websites more accessible, like responsive design, non-text alternatives (icons), keyboard navigation, and video captions, to name a few.

WCAG Level AA

Level AA covers a broader range of UI elements and best practices to ensure everyone can use your website. Most government websites worldwide require WCAG Level AA so that everyone in the population can access public content and services.

The idea is that able-bodied users and those with disabilities can digest content and complete tasks with a comparable user experience, functionality, and efficiency.

Some Level AA requirements include:

• color contrast ratio (i.e., 4.5:1)
• Alt text for images and icons
• Navigation for all technologies
• Accurate form field labels
• Properly structured heading tags
• Variable text size functionality
• Assistive technology-specific requirements.

WCAG Level AAA

Level AAA is the highest conformance level, ensuring the maximum number of users can navigate your website and digest its content. As the Web Accessibility Initiative (W3C) notes on its website, “It is not recommended that Level AAA conformance be required as a general policy for entire sites because it is not possible to satisfy all Level AAA Success Criteria for some content.”

Designers should use Level AAA if the website or content caters to a specialized audience. The guidelines for Level AAA impact styling significantly (color contrast 7:1) and require sign language interpretation for audio and video.

Website Accessibility Checklist for Designers

We’ve selected the most important WACG guidelines for designers. These guidelines apply to visual elements, but these often relate to HTML elements, so designers and engineers must collaborate on accessibility. You can find the complete list of Web Content Accessibility Guidelines 2.0 on the official W3C website.

Content

• Use descriptive link labels (Level A) – buttons and links must provide users with context. For example, a button that says “Click Here” is meaningless and might be misleading. See Info & Relationships SC 1.3.1.
• Lower secondary reading level (Level AAA) – text must be in “plain language” free of jargon, idioms, slang, metaphors, sarcasm, and other complicated terms, ideally at an 8th-grade reading level. See Reading Level SC 3.1.5.
• Text formatting (Level AAA) – text must not be justified (aligned left or right according to the language) with the ability to resize up to 200% without assistive technologies. Users must also have control over the foreground and background colors–i.e., dark/light mode switching. See Visual Presentation SC 1.4.8.
• Test designs on specialized screens & devices (Level A) – visually impaired users use high contrast or inverted color modes. It’s important to test how content performs under these conditions. See Use of Color SC 1.4.1.

Page Titles, Headings, & Labels

See Headings and Labels SC 2.4.6. The following guidelines have a Level AA conformance.

• One H1 tag per page – the H1 header tag must describe what the overall webpage or article is about.
• Structure headings in a logical sequence – nested headings must follow the conventional order of H1, H2, H3, H4, H5, and H6. For example, you would never have an H2 followed by an H4 and then an H3. You should never skip a header tag either, like going from an H2 to H4 instead of H2, H3, and then H4.
• Headings and labels must describe a topic or purpose – headings and labels help users, and assistive technologies, like screen readers, find and digest content easier.

Images

See Non-text Content SC 1.1.1. The following guidelines have a Level A conformance.

• Non-text content must have a text alternative – images, icons, etc., must have descriptive alt text or a text alternative. Furthermore, if the image has text, this must be included in the alt text.
• CAPTCHA – websites must provide alternative confirmation methods when using CAPTCHA, like human verification or text-based authentication, for example.
• Decorative non-text content – alt text for images and media that are purely decorative must use “null” so that assistive technologies ignore this content.
• Text alternatives for graphical representations – Graphs, charts, and other graphics must include text alternatives so assistive technologies can read them.

Lists

See Info and Relationships 1.3.1. The following guidelines have a Level A conformance.

• Choose the appropriate HTML markup – lists must use ol, ul, or dl syntax relating to the content and have a list’s appearance (or structure) so as not to confuse users.

Controls

Controls include all navigable UI elements like links and buttons.

• Opening a new tab or window warning (Level A) – users must know if a button or link opens a new window or tab using text or an icon. People with cognitive disabilities often get disorientated when a new tab/window opens unannounced. See On Focus SC 3.2.1.
• Focus states (Level A) – controls must have focus (or hover) states, so users (including those with assistive technologies) know when they’ve selected a link or button to activate. See Focus Visible SC 2.4.7.
• Make links recognizable (Level A) – designers must use a combination of color and underline styling so users can quickly identify links. See Use of Color SC 1.4.1.
• Use “skip links” (Level A) – skip links allow assistive technologies and keyboard users to bypass navigational menus and other blocks to jump straight to a web page’s content. See Bypass Blocks SC 2.4.1.

Forms

• Form labels (Level A) – designers must label every input for visual reference and use the HTML ‘label’ tag for assistive technologies. See On Input SC 3.2.2.
• Error messages (Level A) – place error messages above the corresponding input field with clear instructions for users to fix the problem. See Error Identification SC 3.3.1.
• Message states (Level A) – don’t rely solely on color for error, warning, and success message states. Adding an icon or text can help visually impaired users identify the type of error state. See Use of Color SC 1.4.1.

Multimedia

• Disable autoplay by default (Level A) – autoplay can be problematic for users with cognitive disabilities or seizure disorders. See Audio Control SC 1.4.2.
• Video captions (Level A) – videos must have captions with a notice confirming their presence. See Captions (Prerecorded) SC 1.2.2.
• Remove seizure triggers (Level A) – strobes or flashing video can induce seizures. W3C’s documentation recommends no more than three flashes on a web page or video. See Three Flashes or Below Threshold SC 2.3.1.
• Transcripts for Audio (Level A) – including transcripts in the audio description allows hearing-impaired users to digest audio content. See Non-text Content SC 1.1.1.

Color Contrast

• Test color contrast for text (Level AA) – use a contrast checker and color blindness tester to ensure visually impaired users can read body text and UI elements. See Contrast (Minimum) SC 1.4.3, 
• Text contrast for non-text (Level AA) – non-text elements like icons, form inputs, etc., must be distinguishable for visually impaired users. See Non-text Contrast 1.4.11.

Mobile and Touch

• Avoid horizontal scroll on mobile (Level AA) – horizontal scroll can be difficult (or impossible) for users with hand or finger disabilities. W3C provides guidelines for horizontal and vertical scrolling. See Reflow SC 1.4.10.
• Website orientation (Level AA) – websites must be visible in any orientation for mobile and tablet devices. See Orientation 1.3.4.
• Ensure adequate target sizing (Level AA) – there’s nothing more frustrating than not being able to activate a link or hitting the wrong one because they’re too close together–test targets with a wide range of hand and stylus sizes. See Target Size SC 2.5.5.

Extra Web Accessibility Resources

Web accessibility can seem overwhelming at first, but there are many helpful resources to help find and test your user interfaces.

• Official Web Content Accessibility Guidelines Website
• The A11Y Project
• Essential Accessibility
• UXPin’s Web Accessibility Guide

Streamline your web accessibility testing with UXPin’s build accessibility tools, including a contrast checker and color blindness simulator. Sign up for a free trial to discover how code-based design can enhance your prototyping and testing to deliver more inclusive user experiences.

The post Web Accessibility Checklist – 28 Points You Must Comply With appeared first on Studio by UXPin.

Designing for accessibility is a crucial part of modern web and app design. Designers must combine UX and accessibility best practices to build inclusive user experiences.

This article explores web accessibility, why it’s important, and eight essential best practices designers can apply to their workflows. 

Built-in accessibility means designers don’t need additional tools to test for color blindness and contrast in UXPin. Increase productivity while meeting WC3 guidelines for A, AA, or AAA on the fly without leaving UXPin. Sign up for a free trial today.

What is Web Accessibility?

Web accessibility is a set of guidelines designers and engineers use to build experiences that accommodate users with disabilities, including low vision, color blindness, blindness, cognitive disabilities, hearing impairments, and mobility issues.

The World Wide Web Consortium (W3C) compiles the web accessibility policies in collaboration with government bodies worldwide. Some countries treat these as guidelines, while others, including the US, Israel, Canada, and the United Kingdom, to name a few, require specific accessibility policies by law.

Types of Accessibility Challenges

Here is a list of accessibility challenges designers must consider when designing for usability and accessibility. Accessibility doesn’t always refer to a physical or mental challenge.

W3C’s guidelines also consider situational and environmental challenges that exclude certain users or groups–like slow internet or a parent with only one free hand.

• Visual impairments
• Auditory impairments
• Environmental challenges
• Mobility impairments
• Seizure risks
• Cognitive and learning disabilities
• Incidental or situational circumstances

Why does accessibility matter?

When we think of accessibility, we tend to think about disability, which isn’t always the case. The list above outlines a massive part of the global population left out when designers and engineers don’t adequately account for accessibility.

When we design for accessibility, we make websites and digital products easier to use for everyone. For example, captions on a video help deaf users follow a narrative, but it also allows users to absorb video content without sound.

Accessible design matters most for making everyone feel included. Designers must empathize with many types of users to understand how websites and products exclude them. 

For example, you’re a blind student wanting to research a school assignment, but nearly every website, including Wikipedia, doesn’t accommodate assistive devices, and there are multiple “roadblocks” preventing you from navigating a web page.

Imagine the frustration of not being able to access information like everyone else. Information that could help change your life!

Usability and Accessibility – Creating Experiences for All Users

We love this Venn diagram from System Soft that shows how usability and accessibility intersect to create “enhanced user experiences for all users.”

To achieve this balance, designers must go beyond UX principles to create more inclusive user experiences, including:

• Apply W3C standards: Use an accessibility checklist to verify that designs meet relevant guidelines for Level A, AA, or AAA, depending on the product or website.
• Design for assistive tech: Does your website or product provide a comparable user experience for keyboard navigation and assistive technologies?
• Access to content: Can anyone, including assistive technologies, access and digest your content? And, is the user experience comparable?

Applying these three principles to a project enables designers to think beyond usability and accommodate a broader userbase.

8 Website Accessibility Best Practices to Improve UX

Below are eight best practices from our 109-page free eBook, The Essential Elements of Successful UX Design. 

1. Execute the fundamentals flawlessly

Most accessibility practices are executing UX principles and UI design fundamentals. Clear, logical designs, navigation, and architecture benefit everyone.

Designers who ignore these basics create usability and accessibility issues, causing significant obstacles for users with disabilities.

2. Enable keyboard navigation for web design

Many users, including those with disabilities, prefer keyboard navigation. Providing shortcuts and logical keyboard navigation allows more users to experience your website.

Keyboard navigation is far more than allowing users to “tab” their way through a web page. Wikipedia’s Table of keyboard shortcuts offers a comprehensive list to make websites keyboard navigable.

3. Prioritize text clarity

Readability is one of the biggest challenges for impaired users and screen readers. If someone can’t absorb your content, they’re at a disadvantage to other users–especially for crucial community, support, and government information.

Designers must ensure to increase legibility (letter clarity) and readability (text block clarity), so everyone can read and understand text content. Here are four simple design techniques for text clarity:

1. The W3C cites a minimum contrast ratio between text and background as 4.5:1. A 3:1 ratio is acceptable for large and bold fonts.
2. Use a minimum of 16 pixels for body text.
3. Line spacing must be at least 1.5 times or 150% of the font size.
4. Use adaptive/responsive font sizing in CSS (em, rem, %, etc.) rather than fixed pixels.

4. Don’t rely on color exclusively

Color blindness affects approximately 4.5% (350 million) of the global population. It’s significantly more prevalent among men, with 1 in 12 (8%) affected.

If designers use color, they must include a second indicator to allow color-blind users to differentiate content. For example, many message states use icons and colors for different types, like error, warning, success, etc.

Contrast is another color issue affecting users. Many people, particularly the elderly and visually impaired, battle with color contrast making it difficult to read text. For example, black text on a blue background is nearly impossible to read for these people.

Designers must always use accessibility tools to check these color issues. UXPin features built-in accessibility with a color blindness simulator and contrast checker so designers can check their work on the fly without leaving the canvas. Sign up for a free trial to try UXPin’s built-in accessibility and other advanced features.

5. Order HTML content properly

Most users can scan a web page to find what they need, while screen readers must read every element. Poor HTML practices, lack of labeling, etc., lead to poor screen reader experiences.

Designers must work with engineers to structure content properly and provide bypasses for “roadblocks.” For example, providing mechanisms to skip over repeated links and content (i.e., header navigation), separating content under header tags, and including a table of contents can help screen readers to read and navigate web pages faster.

6. Explicit link text

Screen reader users can list every link on a page to decide where they want to navigate next. However, this feature is meaningless if the text says “click here” or “learn more.” Out of context, it’s impossible to know where these links go.

Designers must also avoid using the complete URL as a link as screen readers have to read or spell the entire string, which can be especially problematic for long, ambiguous URLs with letters and numbers.

For example, Medium articles use randomly generated letters and numbers at the end of URLs to avoid duplication. Pasting this UXPin article URL would be a nightmare for screen readers: https://medium.com/@uxpin/have-you-tried-designing-with-code-introducing-mui-5-kit-in-uxpin-3a6d7f928dd4. 

A better option would be to hyperlink the article’s title: Have You Tried Designing with Code? Introducing MUI 5 kit in UXPin.

This article from PluralSight provides more examples on how to make your web links screen-reader friendly.

7. Use a 40×40 pixel target area for touch controls

Have you ever tried to tap a link with your thumb and hit the one closest to it by mistake? It’s incredibly annoying and frustrating! Using a 40×40 pixel target area for touch controls makes sense for all users, but it’s especially helpful for users with disabilities.

8. Make media content accessible

Media, including images, video, and audio, adds a different dimension to a web page because it allows users to digest content in their preferred medium.

But media can also exclude many users. For example, deaf people can’t listen to audio or video content. Blind users can’t see images or videos. Here are some essential tips to make media content more accessible:

• Always use descriptive, relevant alt text for images, icons, and other still media.
• Include a transcript for audio and captions for video content.
• Caption every image in a carousel (and remember to allow keyboard navigation).
• Disable autoplay which may harm users with cognitive disabilities or seizure disorders.
• Don’t use any media with strobe or flashing effects as these could trigger seizures.

Bonus Tip: Use an Accessibility Checklist

There are loads of resources to help designers and engineers build accessible websites and digital products. UXPin has this web accessibility checklist for designers, but we also recommend following W3C’s official documentation.

Interactive Prototyping for Accessibility in UXPin

Designers must use accurate prototype models for accessibility testing. The prototype must look, function, and respond like the final product during testing so designers know whether their solution meets W3C requirements correctly.

With code-based design from UXPin, designers can build fully interactive websites and products that resemble code-like fidelity and functionality.

For example, this UXPin sign-up form features fully functional input fields allowing designers to test conditional logic, error messages, component states, and more to replicate a typical sign-up flow.

An interactive prototype like this sign-up form provides usability participants with an authentic user experience, so designers get meaningful, actionable results from testing with all users.

Sign up for a free trial to prototype, test, and iterate at greater speed and accuracy to deliver a superior user experience for your customers.

The post Accessibility UX Best Practices – 8 Tactics for Web Design appeared first on Studio by UXPin.

In a world filled with an extensive range of devices and different screen sizes, it’s safe to say that responsive design is design. Organizations cannot afford to build any website or application for a single device or screen size because they’ll lose out to a competing product that’s more accommodating to more users.

This step-by-step responsive website design guide walks designers through the process of designing for multiple viewport widths. Incorporating these processes into your UX workflow will ensure that design teams consider various screen widths when designing user interfaces.

Design responsive prototypes without adjusting multiple layouts for different screen sizes Try the power of UXPin’s Merge technology and bring React components to a design tool. Discover UXPin Merge.

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

What is Responsive Design?

Responsive design is the process of designing user interfaces to accommodate multiple viewports. The aim is to provide a consistent user experience no matter what device someone uses.

Traditionally, responsive web design considered three primary screens, mobile phones, tablets, and desktops. Nowadays, designers have more screens and devices, including smartwatches, TVs, vehicle dashboards, and fridges, to name a few. Some products also include voice, meaning design teams must also incorporate VUI (voice user interface).

Understand Responsive Design

Before designers start designing responsive UIs, they must understand responsive design and the techniques developers use for their products. 

For example, engineers can use CSS to serve users different-sized images based on their screen size or use an optimization tool that does this automatically. If engineers use the former, designers must supply assets for multiple screen sizes, whereas the latter only requires one.

So, before designers start a project, they must consult with engineers to understand the technical requirements and constraints. Some questions designers need to ask include:

• Does the product use a responsive grid or a fluid grid?
• What are the product’s breakpoints?
• Does the operating system (Apple iOS, Android, Windows) impact the product’s layout?
• How do engineers scale and serve images?
• What formats do engineers use for videos, images, icons, and other media?
• What grid system does the product use?
• Does the product use Flexbox or regular CSS?

Responsive Grid vs. Fluid Grid

A responsive grid uses a standard 12-column grid system with pixels for sizing. Using pixels means engineers set the size of a component or container that only changes with CSS media queries. A fluid grid uses percentages, allowing UI elements to resize according to the available space.

Define Your Breakpoints

Listing the breakpoints allows designers to plan information architecture, layouts, and features for each device. For example, some complex features limit what you can do on mobile vs. desktop application versions.

The most common breakpoints include:

• Desktops – max-width: 1200px
• Laptops – max-width: 991px
• Tablets – min-width: 768px and max-width: 990px
• Smartphones – max-width: 500px

Designers must also consider screen orientation and how designs adjust to a landscape layout. For example, the iPhone 13 is 390 pixels × 844 pixels, more than double the width in landscape vs. portrait. 

Content Strategy Approach

Designing layouts around content enables designers to build intuitive, easy-to-navigate UIs. Defining your content hierarchy allows designers to organize layouts according to breakpoints.

Designers must consider hierarchy relating to the action they want users to take. For example, a blog feed’s purpose is to show users a list of articles and get them to click on something of interest. The blog feed’s most essential elements are the featured image and headline that entice users to click on an article.

On a desktop feed, designers have space to include more information, like the article’s excerpt, published date, author, and category tags. User research and interviews can guide responsive design according to what matters most to users. 

Mobile-First Design

Mobile-first design is a process of starting with the smallest screen size and scaling up. This design strategy offers two primary benefits:

1. The constraints of small screens force designers to include only the most critical features and UI components. Reducing unnecessary features reduces costs and time to market.
2. It’s easier and faster to convert a mobile layout to larger screens than the other way around. Designing desktop-first often leads to compromises and redesigns to scale down to a mobile version.

A mobile-first approach also makes business sense for web design. Google prioritizes mobile-friendly content, which means a responsive design could benefit SEO to rank higher and generate more clicks.

Prioritize Content

Part of a mobile-first and content-first approach is prioritizing content that is always visible on smaller devices and what to hide behind navigational drawers, dropdown menus, or accordions.

For example, on a desktop layout, designers often show the questions and answers to users for an FAQ section. This layout would mean users would have to scroll over every Q&A to find what they want on mobile devices. Instead, designers can show users the question on smaller screens with the answer hidden behind an accordion, reducing scrolling for mobile users.

Responsive Images & Videos

Deciding on media formats at the start of the project could save designers rework later. For example, designers might use PNG for icons, but engineers use SVG because they adapt better to responsive layouts and deliver better performance.

Engineers might require several sizes and formats to serve different media depending on the device or viewport for complex responsive designs. Agreeing on these formats from the beginning ensures designers test prototypes correctly while preparing assets for a smoother design handoff.

Responsive Typography

Typography is a crucial design component impacting brand/identity, readability, voice, and readability. Selecting a typeface that translates across multiple devices is something designers spend hours, days, or even weeks deliberating.

In A guide to responsive typography, UX designer Augustine Thomas talks about what designers must consider for responsive typography, including:

• Choosing the right typeface
• Selecting a typography scale
• Alignment and spacing

Your project’s content, like images, video, graphics, etc., has a significant impact on all three of these elements. So, always test your typeface pairings with real content and avoid dummy text to get accurate results.

Responsive Design Performance Optimization

While performance is often a developer’s job, there are some things designers can do to make their job easier:

Use System Fonts

Every operating system has a font stack. iOS uses San Francisco, Android Roboto, and Windows Segoe UI, to name a few. Using these default fonts means the responsive website or application doesn’t have to make additional requests, improving performance.

If your product prioritizes performance over aesthetics, consider using system fonts instead of a custom one. Make sure you test your product with each font to get consistent results across all operating systems.

Animations

CSS and Javascript animations impact performance and could adversely affect the user experience. Conversely, designers can use animations when engineers need a few seconds to load a feature. Finding the right balance between these two takes collaboration and testing with designers and engineers.

Responsive Design with UXPin Merge

One of the challenges with responsive design is that the static nature of image-based design tools doesn’t allow designers to test UIs and components across multiple viewports accurately. 

The only way to test a web page accurately is by using HTML, CSS, and Javascript–languages most designers don’t speak.

UXPin Merge is a code-based design tool allowing designers to prototype and test using the same components engineers use. Engineers can also program responsive properties, so UI elements function in prototypes as they do in the final product.

What is UXPin Merge?

UXPin Merge allows you to sync your product’s component library to UXPin’s design editor so designers can prototype using fully functioning code components.

You can connect a React component library direct to Merge using Git or our Storybook integration for Angular, Ember, Vue, and other front-end frameworks.

Creating Responsive Components Using Merge

Using a React component library, engineers can program an IFrame component to respond to responsive properties, media queries, and styling, providing the same responsive functionality as components in the final product.

Check out this step-by-step tutorial for building responsive components with UXPin Merge.

Enhance Testing

Instead of using multiple frames, designers can achieve the same responsive functionality as code using a single frame and component. These UI elements also have the same fidelity and functionality as the final product providing designers with meaningful feedback from usability testing and stakeholders.

With Merge, designers can prototype and test using fully functioning, responsive UI elements from a component library without writing code or relying on engineers to build it.

Streamlining the Design Handoff

These responsive Merge prototypes also streamline design handoffs, reducing time to market. Engineers no longer have to inspect multiple mockups and documentation to convert designs into responsive code; they simply copy/paste components from the repository plus any JSX changes from UXPin to start the web development process.

The post A Guide to Responsive Design – 8 Easy Steps appeared first on Studio by UXPin.

Just about every product features a voice user interface (VUI), from phones, wearables, and speakers to your car and even the fridge. According to Statista, the number of voice assistant devices will exceed 8.4 billion units by 2024-more than the world’s population.

As of May 2019, over 90,400 smart home devices supported voice assistants, more than 60,000 of which were for Amazon’s Alexa alone! It’s hard to say whether VUIs will replace screens, but there’s no denying the ever-growing demand for voice products.

Designing VUIs and the accompanying information architecture is a complex and exciting challenge for UX teams. This article looks at VUI design and how designers can create better voice experiences for their customers.

UXPin’s code-based design tool lets UX designers build complex high-fidelity prototypes that accurately replicate the final product. Sign up for a free trial to discover how UXPin can streamline and enhance your product design.

VUI Use Cases – Does Your Product Need Voice?

Just because any device or application can work with voice doesn’t mean it should. Designers must evaluate each product individually to assess whether voice commands, a screen UI, or a combination of both will best serve users.

For example, do you want an app dealing with sensitive data like finance or health blurting out your personal information? Designers must consider both ethics and legislation regarding this sensitive data. 

VUI’s best use cases are providing users with hands-free assistance during cooking, driving, exercising, and other activities that require attention, focus, or use of someone’s hands and body.

Thorough research and user interviews will help designers determine whether voice will effectively solve user pain points or help people complete tasks better and faster.

How Do VUIs Process Information?

VUIs use a mix of artificial intelligence/machine learning, speech recognition, sound effects, and text-to-speech (TTS) to interact with users. 

How VUIs Talk to Users

Voice design expert Guillaume Privat Siri Manager Apple says, “VUI designers should differentiate between a prompt and a statement” because each requires a different authoring strategy.

• Prompts: Questions from the VUI, like “What can I help you with today?”
• Statements: VUI answers, comments, and other communication that don’t necessarily elicit a response. “Hello, Jane.” or “Playing Hit Me Baby One More Time by Britney Spears on Spotify.”

Prompts present a few challenges for designers because they need to manage users’ expectations while posing questions that favor system constraints. For example, open-ended prompts expose AI to the complexities of human communication, whereas closed-ended questions are easier to handle.

Designers can optimize prompts by limiting options to a maximum of three, which usually correspond to frequently used features. For example, in a banking app, the VUI might ask, “Would you like to check your balance, pay a bill, or something else?”

Designers must also consider how to program re-prompts to incase the user doesn’t respond right away. Re-prompts should sound natural and conversational, like the way you would talk to a loved one if you thought they hadn’t heard your question.

Statements provide users with answers to their questions, but they also confirm their instructions followed by a prompt. For example, “You want to pay your $20 to the electric company (statement). Is this correct? (prompt).”

8 Considerations for Voice User Interfaces

Managing user expectations is one of VUI design’s biggest challenges. Without proper error handling or clarity from the voice assistant, users often abandon the product with the view that it doesn’t work.

Designers must also overcome background noise, accents, clarity, volume, and other vocal nuances. Never mind the complexities of language itself!

We’ve researched several leading UX designers who’ve shared their successes in overcoming VUI design challenges.

1. User Personas

As with any design project, personas play a crucial role in empathizing with users. VUI user personas must include additional details like the tone of voice, common word choices, and sentence structure. Designers must also consider cultural differences–like how people talk in California, USA vs. Yorkshire, UK.

2. Devices

Most visual UI design focuses on mobile, tablet, and desktop experiences, while a voice interface is far more complex with many possibilities, including:

• Smartphones
• Tablets
• Desktops
• TVs
• Smart speakers
• Home theatre system
• Car stereos
• Wearables
• Headphones
• Internet of Things (IoT)
• Home appliances

In some instances, a single VUI must work on several devices, impacting how the user and system interact. Designers must consider these factors and maintain a consistent user experience across multiple devices and environments.

3. VUI Microinteractions and System Status

Microinteractions provide reinforcement and feedback to enhance the user experience and provide feedback. Designers have a choice of sound effects, screen animations, haptic feedback, and LED illumination to show system status and states.

An essential VUI microinteraction is the “wake up” after the user says “Hey Siri” or “Hey Alexa.” Designers must indicate that the VUI is ready for the user’s instruction. Designers might have to use a specific LED for speakers and devices without a display to show the VUI is listening–like the illuminating bezel on the Amazon Echo.

4. VUI Triggers

Designers can use several VUI triggers to enhance a user experience and add value to users. Here are a few examples and use cases:

• Voice: The primary trigger for activating and interacting with the VUI.
• Touch: Using UI components or physical buttons. 
• Motion: Some wearables and smartphones can detect specific movements to activate the VUI or features.
• Time: Dates and times for reminders and events can trigger VUI responses or system actions.
• Location: VUIs can use geolocation to trigger reminders or actions.

Machine learning opens a whole world of possibilities for VUI triggers and could provide life-saving feedback and advice. For example, if you’re driving through an unknown city, a voice assistant can alert you before entering high-risk crime areas or inform you of an accident up ahead.

5. Giving Users Control

Giving users control is a crucial user experience factor. Designers should consider how VUIs might force a user into listening to a long list of content, like “all the restaurants within a mile.” Users should be able to interrupt or add specific details like “with wheelchair access” without starting from scratch.

6. VUI Accessibility

Designers must also consider how to make VUIs accessible. Shaky voices, speech impediments, and second-language speakers are some voice recognition challenges designers must overcome.

Cognitive disabilities and hearing impairments often make it difficult to digest information. One solution is to include the option to repeat slower or louder for the user. Designers must also consider keeping VUI prompts and statements succinct with the option to “add more context” or “elaborate.”

While adding wit, sarcasm, or slang might seem fun, designers should avoid ambiguous language that could confuse second-language speakers, people with disabilities, or cognitive challenges. Technical jargon, abbreviations, and acronyms could also make users feel marginalized. 

Designers must use whole words and natural language so that information is easy to absorb and interpret.

7) Graphical User Interface (GUI) Integration

Home management systems and IoT often come with a GUI touch screen or mobile app to support the VUI. GUIs can also help solve accessibility and usability issues by providing users with another option to interact with the voice assistant.

8) VUI Design Patterns

VUI is still in its infancy compared to visual interfaces, so there’s still a lot of work needed to develop industry-standard VUI patterns and accessibility guidelines. Still, you can find helpful information and guidance from Amazon, Samsung, Google, and Apple.

In Amazon Alexa’s Developer Documentation, the eCommerce giant divides its design patterns into four sections and summarizes each as follows:

1. Be adaptable: Let users speak in their own words.
2. Be personal: Individualize your entire interaction.
3. Be available: Collapse your menus; make all options top-level.
4. Be relatable: Talk with them, not at them.

Here are links to leading voice assistant documentation to get more ideas about VUI design patterns:

• Apple’s Siri: Siri for Developers
• Amazon Alexa: Alexa Design Guide
• Google Assistant (Google Home): Actions on Google
• Samsung’s Bixby: Samsung Developers
• Microsoft: Voice Assistants Documentation

Final Thoughts

Voice user interface design is an exciting and ever-evolving field. AI and machine learning allow users to develop human-like bonds with virtual assistants and include them as part of the family–a unique quality other digital products do not share.

In one review on Amazon’s Echo Dot, a happy customer had this to say: “Artificial intelligence? Perhaps. But people rarely make me smile or laugh. Alexa rarely fails to do so. And the enjoyment I get from having her in my home is anything but ‘artificial.'”

UX designers must look for creative ways where VUI technology can excite users and enhance the human experience. When designed correctly, voice assistants can reduce the time people spend physically interacting with screens and devices.

Enhancing the User Experience With UXPin

No matter what project you have in mind, iterative improvement is the foundation of great design. When your design team has the tools to stay coordinated and aligned, they can reduce time-to-market, make smarter design choices, and amaze users with incredible product experiences.

UXPin is an end-to-end code-based design tool that fosters creativity and collaboration. UX designers can design, prototype, test, and iterate faster with higher fidelity and functionality than other leading design tools. Sign up for a free trial and see how the world’s best design tool can enhance your UX workflows and improve customer experiences.

The post VUI: Designing for Voice UI appeared first on Studio by UXPin.

An accessible design system makes it easier for designers to create products that don’t discriminate users with disabilities. Design a system that is accessible in the first place, test it with available tools, and audit it from time to time to ensure it fits the standards. Let’s see how.

Design system accessibility is the first step towards creating inclusive customer experiences for all users. Organizations must also recognize the business value of making accessible products and websites.

More than a billion people live with disabilities globally – that’s 15% of the world’s population. If your products don’t cater to people with disabilities, you’re handing a competitive advantage to your competition!

We’re going to explore how you can make your products more accessible by starting with a baseline – your design system. With an accessible design system, you can quickly scale accessibility to pages, interfaces, navigation, user flows, and other areas of your designs.

Managing a design system is a challenging, time-consuming task, but it doesn’t have to be! UXPin provides organizations with the tools and features to build and manage a design system. Sign up for a free trial to see how UXPin can save you time and streamline your UX workflows while creating better user experiences for your customers.

The Importance of Accessibility

There’s a misconception that users with disabilities make up a minority of online users. We tend to relate accessibility only to people with assistive technologies or visual impairments like color blindness. But design teams must also consider how people with cognitive disorders and dyslexia experience digital products.

According to the United States’ 2012 census, “56.7 million Americans (18.7% of the US population) have some type of disability, and out of this number, an estimated 38.3 million (12.6%) have a severe disability.”

How US citizens’ disabilities relate to technology:

• 19.9 million (8.2%) have difficulty lifting or grasping, thus impacting their use of a mouse or keyboard.
• 15.2 million (6.3%) have a cognitive, mental, or emotional impairment, affecting focus, absorbing content/instructions, and cognitive load.
• 8.1 million (3.3%) have a vision impairment, requiring screen readers or magnifiers to view content. Visual impairments also include color blindness disabilities. 
• 7.6 million (3.1%) have a hearing impairment, relying on transcripts and captions for video and audio.

Making digital experiences inclusive for all people is essential. However, when looking at the numbers above, organizations must also consider the business value people with disabilities offer.

Accessibility Improves User Experience

Making designs accessible benefits all users. A great example is a web page’s table of contents and headings (hierarchy) for articles and documentation.

These accessibility features allow users with screen readers to absorb content and find what they’re looking for quickly. Other users can use the same features to scan a page’s header tags or use the table of contents to move around the page with minimal scrolling.

How Design Systems Can Help With Accessibility

When an organization builds accessibility into its design system, teams are free to develop product experiences knowing that designs are consistent and conform to web content accessibility guidelines (WCAG).

From a business perspective, design system accessibility saves time while increasing consistency, thus creating positive experiences for all users.

Making Components and UI Patterns Accessible

Organizations should treat design system components as the baseline for accessibility. This baseline includes colors, typography, spacing, sizing, and other component-based factors.

The goal is to take baseline accessibility decision-making away from designers so they can focus on design. Designers must still be aware of accessibility, but they’re not starting from scratch every time.

A Holistic Accessibility Approach

Design system accessibility is just the baseline towards making user interfaces accessible. Designers must still conduct accessibility tests on interfaces, navigation, and user flows.

Testing Accessible Design Systems

Testing is critical to ensuring your design system is accessible. UX designers should always start by testing design system components using tools, followed by live tests with participants to confirm these results.

Tools to Test Design System Accessibility

Accessibility tools are excellent for testing design systems for visual impairments. UXPin’s built-in accessibility features allow UX designers to check color and contrast without leaving the design editor.

Our color contrast checker evaluates UI components against WCAG standards for AA and AAA levels. With the contrast checker activated, UXPin creates two lines on the color picker, so designers can identify where they need to be on the spectrum to meet either AA or AAA levels.

• Level AA: requires a contrast ratio of at least 3:1 for text not smaller than 24px (18px if bolded) or 4.5:1 for text smaller than 24px.
• Level AAA: requires a contrast ratio of at least 4.5:1 for text not smaller than 24px (18px if bolded) or 7:1 for text smaller than 24px.

Designers can also use UXPin’s color blindness simulator to experience user interfaces from this demographic’s perspective, including:

• Red-green color blindness (Deuteranomaly, Deuteranopia, Protanomaly, Protanopia)
• Blue-yellow color blindness (Tritanomaly, Tritanopia)
• Complete color blindness (Achromatomaly, Achromatopsia)

Accessibility Testing With Participants

Once components pass accessibility tests using tools, designers must conduct live usability studies with relevant participants. For example, people with visual/hearing impairments, cognitive challenges, and those using assistive technologies.

Industry experts like Fable and Deque can facilitate testing to help companies find the right participants and conduct accessibility tests that produce meaningful, actionable results.

Auditing Design Systems for Accessibility

If you have never done a UX audit, we highly recommend completing this before moving on to solving accessibility issues! Conducting a UX audit will ensure you eliminate fundamental usability issues and design system inconsistencies. 

For example, many organizations discover that design system components have inconsistent color palettes because designers use the wrong hex codes. You’ll want a clean slate before you audit for accessibility, or you may end up doing double or unnecessary work.

Start your design system accessibility audit by listing every component, UI pattern, color, icon, asset, typeface, and other UI items. This way, you have a step-by-step checklist of everything you need to audit.

You can use this list to cross-reference the relevant Web Content Accessibility Guidelines. WCAG provides a helpful quick reference UX designers can use to audit their design systems. This reference includes guidance for WCAG 2.0 and WCAG 2.1.

Using Atomic Design Methodology for a Comprehensive Accessibility Audit

Following Brad Frost’s Atomic Design Methodology, consider breaking your design system down into atoms, molecules, and organisms so you can audit both the parts and wholes.

• Atoms: The most basic building blocks that can’t be dismantled further. Like form labels, inputs, buttons, icons, and other singular building blocks.
• Molecules: Simple UI components that function together. Like a search form with an input, label, and button.
• Organisms: Groups of atoms and molecules that make up complex UI components. Like a standard website header with a logo, navigation links, and search form.

By breaking your design system down to its core, you can start with the basic building blocks and scale your accessibility audit to more complex UI components.

Non-Text Content 

Icons and other assets should help users with explicit alt text so screen readers can identify them correctly. WCAG provides designers with guidance on how to make Non-Text Content accessible.

Clear Labels, Alerts, and Messages

Messages, labels, and alerts must be helpful and provide context for users with assistive technologies.

For example, if you have multiple required fields on a form but you only have one error message saying “This field is required,” how will someone with a screen reader know which field you’re referring to? Each required field must have its own error message; “First name is required,” “Email is required,” and so on.

Designers must also use labels for every element and component so that screen readers can provide users with context and instructions. For example, you might label each element of a search form with an icon and input field as follows:

• Search icon: label=”Begin search”
• Input field: label=”Search query”

A screen reader knows what each element does so the user can interact with the UI component to search a product or website.

Summary

Creating an accessible design system promotes inclusivity and gives designers a baseline to scale accessibility to user flows, navigation, page layouts, and other areas quicker and easier.

Designers no longer have to worry about colors, typography, contrast, hierarchy, and other factors, because that work is already done! They only have to evaluate what happens when you combine these elements to design user interfaces and navigational flows.

Improving Design System Accessibility With UXPin

With Design Systems in UXPin, you can build and manage your organization’s design system all in one place-no plugins or addons required! Sync your design system to all teams and even set permissions to preserve consistency and integrity.

Sync your design system to all team members so designers only use colors, typography, assets, and UI patterns that conform to your organization’s accessibility standards.

Use descriptions to add documentation and guidelines (including accessibility instructions) for every UI component in your design system, so designers and developers are all on the same page.

Ready to start building more inclusive user experiences for your customers? Sign up for a free trial to discover how the world’s most advanced code-based design tool can revolutionize your organization’s product design.

The post Design System Accessibility: Check What You Need to Know appeared first on Studio by UXPin.

Usability testing is a crucial part of the design thinking process. It’s an opportunity for UX teams to present their solutions to those whose problems they’re trying to solve—a nerve-racking and exciting experience!

UXPin is the world’s most sophisticated prototyping and usability testing design tool. Using UXPin with Merge technology, designers can create high-fidelity prototypes with final product functionality using fully interactive and ready code components. With UXPin, you get accurate testing and meaningful participant feedback. Sign up for a 14-day free trial to experience advanced prototyping and testing with UXPin!

What is Usability Testing?

Usability testing (also called usability studies) tests user interfaces and flows with real users. A UX researcher (moderator or facilitator) will ask a participant to complete a series of tasks (usually on a digital product prototype) while observing their behavior and actions.

The moderator might ask the participant to verbalize their thoughts and actions so UX researchers can understand how the person thinks and feels as they use the prototype.

Why do UX Teams Conduct Usability Tests?

Usability testing provides UX teams with valuable feedback and user insights, including:

• Validating design concepts to solve users’ problems
• Exposing usability problems to fix
• Discovering opportunities for improvement
• Learn more about the users

Usability testing is an iterative process of testing, exposing issues/learning about the user, making adjustments, and retesting.

The ultimate goal of the usability testing process is to fix and improve prototypes as much as possible before the design handoff, where engineers start the development process.

Usability vs User Experience Testing

There is often confusion and debate over the difference between usability testing vs. user experience testing. It’s incorrect to use these terms interchangeably because they refer to different areas of testing.

• Usability testing – tests the product’s usability and performance—user interfaces, navigation, microinteractions, etc.
• User experience testing – tests the user’s enjoyment and satisfaction while using a digital product.

While we define these terms differently, UX researchers test usability and user experience at the same time. 

For example, one UX researcher might observe how the participant completes a task during a usability study (usability testing), while another researcher studies the user’s actions and behavior (user experience testing).

These are two important metrics to consider during product testing. If a user can complete a task, UX designers might see this as a job well done. But what if the user was frustrated during the process? They’ll likely switch to a competing product with a better user experience.

Types of Usability Testing

There are two primary usability testing methods:

• Moderated tests
• Unmoderated tests

UX teams can apply both of these methods to remote and usability lab (face-to-face) testing.

Moderated

During a moderated usability study, the facilitator interacts with the participant, asking them to complete tasks while observing and asking questions.

UX teams can conduct usability studies in a lab or remotely using Zoom, Skype, or purpose-built testing tools.

Advantages of moderated usability testing:

• Moderator ensures the participant understands and completes the tasks correctly
• Moderator can engage with the participant, asking questions about their actions, responses, and behavior
• The above points provide UX teams with accurate, meaningful feedback

Disadvantages of moderated usability testing:

• Requires lots of planning to find a venue, participants, align with team schedules, organize equipment, etc.
• Requires more resources, increasing testing costs
• Limited participants due to cost and time constraints

Unmoderated

During an unmoderated usability study, the facilitator is absent but provides the participant with instructions to complete a series of tasks.

The participant might complete these tasks in a lab environment, the field (where the users will typically use the product), or remotely.

Advantages of unmoderated usability testing:

• Researchers can test multiple participants at the same time
• Fewer resources make unmoderated testing significantly cheaper

Disadvantages of unmoderated usability testing:

• Relies on participants understanding tasks and instructions without guidance—might lead to uncompleted tasks or inconsistent test results

Usability Testing Methods

Card Sorting

Card sorting is an early-stage usability method for testing element hierarchy and establishing information architecture. 

The moderator presents a group of topics or categories for the participant to sort—usually by importance or group by relevance.

Paper Prototyping

Paper prototyping is another early-stage usability method where UX teams test user flows and information architecture.

UX teams rarely test paper prototypes with participants because usability tests are expensive, and paper prototyping doesn’t provide meaningful user feedback.

Still, paper prototypes can provide some insights into the user’s navigational expectations.

Digital Low-Fidelity Prototype Testing

Digital low-fidelity prototypes use a series of wireframes to test user flows and simple navigation. Like paper prototypes, low-fidelity prototyping provides limited feedback about the user experience.

High-Fidelity Prototype Testing

Testing high-fidelity prototypes allows UX teams to get accurate, meaningful feedback. Participants use a fully functioning replica of the final product to complete tasks.

UXPin Merge lets designers connect design elements with interactive components that also devs use to create high-fidelity prototypes with final product functionality. By designing with code components, participants can interact with a UXPin prototype better than any other design tool.

Why not try usability testing with UXPin’s 14-day free trial!

Click Tracking

Click tracking examines where users click or tap on a prototype. UX designers can use this information to see where participants most frequently click (or tap on mobile).

Click tracking can help validate link structure or whether participants can easily identify buttons and CTAs.

Eye Tracking

UX researchers use eye-tracking devices to learn how participants explore user interfaces or what elements catch the eye first. These insights can help UX designers decide how to prioritize screen layouts or where to place CTAs.

How to Conduct a Successful Usability Test in 6 Easy Steps

It’s crucial to have a plan and objectives for usability testing. Without a plan and goals, UX researchers won’t know what to test or the value of the test results.

We’ve broken usability testing into six easy steps:

1. Define Goals
2. Choose the Test
3. Create User Tasks
4. Write a Research Plan
5. Conduct the Test
6. Draft a Report

Step 1 – Define Goals

The first step is to define the usability study’s goals. These goals might ask broad or specific questions, for example:

• Broad: Which checkout method can user’s complete the fastest?
• Specific: Does animating a button increase clicks?

It’s important to prioritize goals and limit testing to a specific question you want to answer—like testing an eCommerce checkout flow or completing a new user sign-up process.

It’s tempting to make the most of usability test sessions and get as much feedback as possible, but this could lead to user fatigue and inaccurate results.

Step 2 – Choose the Correct Test

Once you know what you want to test, you can choose a suitable usability testing method.

In our free eBook, The Guide to Usability Testing, we outline 30 different usability testing methods, which to apply, and when.

We divide usability tests into four categories:

• Scripted — These tests analyze the user’s product interaction based on set instructions, with specific goals and individual elements. (tree testing, hallway usability tests, benchmark testing)
• Decontextualized — Ideal for preliminary user testing and user research (see the difference between user testing and usability testing). These tests don’t involve the product necessarily, but analyze generalized and theoretical topics, targeting idea generation and broad opinions. (user interviews, surveys, card sorting)
• Natural (or near-natural) — Researchers analyze users in the environment where they’ll use the product most often. These tests examine how users behave, pinpointing their feelings with accuracy, at the cost of control. (field and diary studies, A/B testing, first-click testing, beta testing)
• Hybrid — These experimental tests forego traditional methods to take a distinctive look at the user’s mentality. (participatory design, quick exposure memory testing, adjective cards)

Once you select the testing method(s), you can share them with the team, summarizing your goals and tactics in a usability planning document.

Step 3 – Create Your User Tasks

Everything you present to participants during usability testing, including questions and phrasing, impacts their response.

Usability tasks are either open or closed, and your tests should incorporate a healthy mix of both:

• Closed – A closed task offers little room for interpretation—the user is given a question with clearly defined success or failure (“Find a venue that can seat up to 12 people”). Closed tasks produce quantitative and accurate test results.
• Open – By contrast, participants can complete open tasks in several ways. These are “sandbox” style tasks: “Your friends are talking about Optimal Workshop, but you’ve never used it before. Find out how it works.” Open tasks produce qualitative and sometimes unexpected results.

Moderators must be mindful of how they phrase questions to avoid bias. 

For example, you want to know how a user will find a gift for their mother on an eCommerce store. If you phase the question as “can you search for a mother’s day gift in our store?” it might suggest that the participant use the search function instead of following their natural intuition. This question also sounds more like an instruction than a question.

A better way to phrase this question might be, “how would you find a mother’s day gift in our store?”

Step 4 – Write a Usability Research Plan Document

A usability research plan document should cover seven sections:

• Background — In a single paragraph, describe the reasons and events leading to the user research.
• Goals — In bullet points, summarize what the study hopes to accomplish. Phrase the goals objectively and concisely. Instead of “Test how users like our new checkout process,” write “Test how the new checkout process affects conversions for first-time users.”
• Questions — List out around 5-7 questions you’d like the study to answer
• Tactics — Where, when, and how UX researchers will conduct tests. Explain why you’ve chosen this particular test.
• Participants — Describe the type of user you are studying, including their behavioral characteristics. You could even attach personas for more context.
• Timeline — Recruitment start dates, test start and end dates/times, and when stakeholders can expect results.
• Test Script — Include a script if you have one prepared.

Encourage suggestions and feedback from stakeholders to ensure everyone is on board, and you haven’t missed anything.

Further reading – The Plan That Stakeholders Love: The One-Pager.

Step 5 – Conduct the Test

Here are some times for conducting usability testing:

• Make participants comfortable — Remind participants that you are testing the product, not their capabilities. Creating a script beforehand will ensure the moderator’s instructions, phasing, and tone are consistent.
• Don’t interfere — This avoids bias and may reveal user behavior insights you hadn’t predicted. Meaningful insights come from participants interacting with the product in ways you never expected. Observe natural human behavior and let them inspire feature improvements.
• Record the session — Teams may need to review usability studies at a later point. 
• Collaborate — A Rainbow Spreadsheet allows everyone to record their interpretations of each usability test. UX researchers can compare notes to see what they observed in common and any unique observations. Rainbow Spreadsheets worked well to summarize results for stakeholders during our team’s Yelp redesign exercise. (Source: Rainbow Spreadsheets by Tomer Sharon)

Step 6 – Draft a Report

A usability study report is an effective way to summarize results to share with stakeholders. 

Here are some tips for compiling a usability report:

• Don’t be vague – “Users couldn’t buy the right product” isn’t very helpful because it doesn’t explain why. Explain the specific issue from a UX perspective—“users couldn’t buy the right product because they couldn’t find the search bar.”
• Prioritize issues – Categorizing and prioritizing usability issues will help design teams know where to start. We recommend categorizing the report (e.g., Navigation Issues, Layout Issues, etc.) and using color codes for priorities (Low/Medium/High).
• Include recommendations – Lastly, you’ll want to include the team’s recommendations to fix usability issues, so stakeholders know there is a solution.

Other considerations for a usability report include:

• Formal usability report
• Supporting charts, graphs, and figures
• Previous testing documentation 
• Videos or audio tracks of the test

Usability Testing With UXPin

UXPin is a comprehensive design and prototyping tool. Unlike other design tools, UXPin doesn’t require plugins and apps to fulfill wireframing, mockups, prototyping, and testing requirements.

And UXPin does so much more! With states and interactions in your prototype you can enhance participant’s product interaction while providing you with meaningful feedback and results!

Try UXPin for 14-days and experience a whole new world of UX design, prototyping, and usability testing!

The post What is Usability Testing and How to Run It? appeared first on Studio by UXPin.

Even the best ideas can’t guarantee success. No matter how certain you are about a new concept, the only way to create a good product is by getting real feedback and building upon it.

That’s why building a prototype and going forward with testing it should be essential regardless of the scale of your project. It’s one of the foundation stones of the whole cycle.

It may seem intimidating at first, but as you dive into the process, you’ll soon discover how intuitive it is and that by being thorough you can save resources in the long run and make your launch as smooth as possible.

Here are our tips that will help you make the most out of your user testing.

1. Start testing early

If you’re waiting on your product to be complete, you’re missing out on valuable insights. Of course, you can’t exactly start user testing the day you land on a decent idea, but you shouldn’t hold back until you’re ready for launch.

Even though you can’t cover every detail, by gathering early insights you can start correcting issues and removing problems from the get-go. You should always have in mind that you’re not designing for yourself, so the users should help you discover issues before it gets too time-consuming to fix them.

As long as you’re aware of what your prototype can do in each phase, every failure will serve as a lesson to improve the next version. This also makes it cheaper, in the long run, saving you fixes that would come after the launch and take more time to solve. Usually, you can split your phases in a way that will help you set expectations:

• Wireframes and sketches – provide you with minimal insights, as they can be as simple as one-page setups. They won’t get you far with the overall picture, but they can form basic expectations from the users, how they understand the concept and what would be their next steps.
• Low to medium-fidelity prototype – with these you can already start gathering basic insights about UI interaction, the ways in which the users move forward if they understand the content, is there something distracting, etc. This step helps you form a strong foundation for later on.
• High fidelity prototype – while technically not a complete product, in this phase you can start grasping all of the users’ issues and the ways they interact with most of the elements. By now you should know if you’re ready to proceed to build the final product and if you managed to solve the issue you set out to respond to.

If you don’t have time to go through the whole process or building a high-fidelity prototype with all the interactions is just too time-consuming, you can build prototypes with fully interactive code components instead. Coming straight from your developers’ libraries, UI code components can help you speed the design process 10 times.

2. Map out your tasks

Every testing session should have a clear goal. Of course, you’re after all the insights you can get, but you should have an actionable plan in place to help you be efficient and solve as many issues as possible.

One of the most common mistakes when providing tasks for your test users is going too broad with a lot of vague questions, which can leave you with a lot of “It’s fine, I guess” answers.

Aim for getting an answer about specific experiences through actionable steps that are simple to track and gather insights from. Instead of pointless subjects such as „does everything work“ (spoiler alert: it doesn’t, it’s a prototype), go for something that will provide you with clear next steps.

First, limit each session based on the aspects of the product you want to get more information about and sort them by priority. Then you should explain to your testers what is expected of them, for example, “go through the interface and find the option to edit a video” or “navigate to the checkout page”.

All of these should also have goals to be achieved, either as a desired step-by-step process or the time needed, but users don’t need to have the information for the test to be successful.

It’s important to remember that usability is key when testing prototypes, so don’t overdo it with design and any additional data that may take away from the point and overwhelm the users in this phase. To make a test clear, simple, and reliable, try to go for maximum interactivity in a prototype, without too much hand-holding and explaining.

3. Pick the right users

When you’re starting the testing process, you don’t have to make the audience take a technical skills assessment before you show them the prototype, but you do need to make sure that you have a relevant pool of testers.

Representative users are those who you actually see as user personas that will (hopefully) use the product when you launch it. If you’re, for example, building a cooking app, it would be a good idea to have users that cook at home at least three or four times a week. Of course, not every person should be exactly the same – you should have a mix that will allow you to notice different issues.

It may be tough finding the right group to test your prototype and that’s one of the reasons some teams skip testing altogether, but it’s always worth it in the end. You should always go for quality over quantity, as it’s most important to have relevant users with a fresh perspective. You may actually learn a lot with just under ten people.

The need to have fresh eyes on the product is also why you should avoid your family and friends. Even though they want to help, it’s hard for them to have the same approach as real people who have no previous knowledge of the product. It would also be a good idea to use an NDA in this case, especially if you haven’t announced your product yet.

Another thing you should keep in mind is the nature of the product and where the users will interact with it. This means that if you’re working on an international product or service, you need testers from various markets, as they each have their own specifics. This also goes for devices – place the users in an environment that they would actually be in.

In the later phases of testing, you should also gather insights from internal stakeholders in order to have a clear overview of what’s possible and what needs to be changed before launch. This includes people such as distributors that should already have experience with similar processes.

4. Do multiple iterations

You should always be ready to adjust. The testing process isn’t always linear, so flexibility is key to achieve the best results.

For example, if you notice a feature is drawing focus away from the main functionalities of the product, you should be ready to change your direction as a response.

This feedback loop also applies to the tasks you give your test audience – if you see something isn’t working, you can improvise and switch up the questions to get the best insights.

Users will also have their suggestions on how you could improve even if the task itself doesn’t involve that. That’s why your whole team should be involved in the process, ready to implement a new solution you didn’t have in mind before.

It’s also important to avoid trying to solve every issue at once – your prototype should and will undergo multiple changes along the way so you should be patient and try fixing the biggest problems first. After that, do another test and see how the feedback changes. While you’re going through the phases, keeping a database backup will save you from having to roll back too far if something needs to be reverted to the starting position.

Each new feature added should be followed by a new test. It may look excessive and you’ll want to just bulk everything together, but going small will help you get more detailed insights, also saving the trouble of massive changes, which is especially important when it comes to design.

Putting everything together

You should aim to have eyes on your prototype as soon as possible. By introducing real people to the process, you will get a new perspective that will help you change and improve in unexpected directions.

Don’t be afraid to roll up your sleeves and redesign. Involve your whole team and remember that the testing won’t always go over smoothly, but through each step, you get to know your product better, which brings you that much closer to a seamless launch. Go through the prioritization process and invest additional effort through the testing, keep perfecting your prototype with a feedback loop, and, before you know it, you’ll have a product you can be proud of! But first things first – sign up for a free trial at UXPin to start building your prototypes.

The post 4 tips for User Testing Your Prototype appeared first on Studio by UXPin.

There is much more to UX writing than words alone. The words in your product should be focused on the user, and every user brings a lot to the table. Each individual comes with prejudices and attitudes, expectations and cognitive limitations.

Although it may not seem like it at first, UX writing has a lot to do with psychology, on both the emotional and the cognitive level.

In this article, I’m going to cover some of the most applicable psychology principles for better UX writing. No matter if you’re a professional writer, a UX designer, or a product manager, this knowledge is sure to help you create more user-friendly experiences.

Let’s start with the very basics of human behavior.

Behavioral psychology in UX writing

Apart from psychoanalysis (which has little application in UX design – let me know if you know any!), behavioral psychology is one of the earliest approaches in the field. Behaviorism has been around for more than a hundred years now. Even though it’s been criticized as one-dimensional, it still has a great impact on how we explain what people do.

One of the most interesting theories based on behavioral psychology is the Fogg Behavior Model:

Although the chart might look complicated, the idea is actually quite simple. The model states that there are three factors influencing user behavior. These include:

• Motivation
• Ability
• Prompts

These concepts are hardly a novelty. Similar factors are present in other, much older, behavioral theories. The power of the Fogg Behavior Model is that it describes how these three come together.

In order for the behavior to take place, the user needs to:

1. reach a certain level of motivation
2. feel able to take action
3. get a prompt

What’s more, the three factors can compensate each other. When the motivation is really high, the user can take action even though there is no prompt and it seems rather hard.

That’s it for the theoretical part. Now, let’s analyze a real-life example to see how this framework applies to UX writing.

The message you see above is a pop-up window from Asana, a popular project management tool. This short piece of copy introduces a new feature in the app. Let’s see how the Fogg Behavior model applies to it:

• Motivation – The message focuses on the main benefit. The feature will help the user focus on their important work – and this is exactly why they’re using Asana.
• Ability – The user knows what they’re supposed to do – add an inbox filter. The pop-up is displayed right next to available filters.
• Prompt – The information appears in the form of a pop-up. It creates a sense of urgency and encourages the user to take action.

As you can see, FBM is a simple and handy framework to use when working on UX copy. It will help you construct short, actionable messages that will encourage the right behaviors and guide your user through the product.

And here comes another question: how long should the messages be? Cognitive psychology has the answers you’re looking for.

Cognitive psychology in UX writing

Instead of focusing on behavior alone, cognitive psychology addresses attention, memory, thinking, as well as perception and language. The last two fields are particularly interesting for UX writers. Here are some of the findings you can use in your day-to-day work:

Perception of text

If you’re only going to read one book about UX writing, Strategic Writing for UX is the right pick. The author, Torrey Podmajersky, shares a lot of actionable tips that are rooted in cognitive psychology.

For instance, Torrey suggests that a single line of English text in an app should not be longer than 40 characters, which is usually three to six words. In the case of larger chunks of text, three lines make an optimal length. When a paragraph is longer, people refer to it as a “wall of text”.

As soon as a writer starts applying these rules, the user will feel more confident and capable of using the product. This goes in line with the Fogg Behavior Model we’ve discussed above.

Memory limitations

Have you ever heard of the Magical Number Seven, Plus or Minus Two? This is the title of a classic, widely cited academic paper written by George Miller. It has laid the foundations for Miller’s law, which states that people are able to hold between 5 and 9 items in their working memory.

It’s a handy point of reference, yet it doesn’t mean that you need to limit the number of items in the interface to just 7 items. The range of numbers is just a suggestion and the actual capacity may vary depending on circumstances and individual differences.

You can try dividing the information into smaller chunks instead, like you normally do it with phone numbers. It’s easier to remember three chunks consisting of 3 numbers than 9 numbers at once, isn’t it?

Same rules apply to information architecture, UX design, and interface copy. Have a look at this example from the landing page of Mailchimp:

The text is divided into smaller parts, yet there’s much more to this design. To avoid clutter, the content design team decided to use progressive disclosure. The interface indicates that you can expand a section to read more when you’re interested in, let’s say, startups or the restaurant business.

UX content heuristics

If you’ve been working in the UX field for quite a while now, it’s more than likely that you’re familiar with usability heuristics. This list of canonic rules was first created by the Nielsen Norman Group, an acclaimed UX research institute. Let’s see how they apply to UX writing:

Visibility of system status

As we’ve already mentioned, UX copy is supposed to guide the user through the product and tell them what’s going on. This is crucial from the moment they start using a digital product. At first, they’re faced with a tabula rasa, an app that needs data to start working. This is why empty state messages are important, like in this example from LiveSession:

Before the user starts recording website visitors, they need to connect their website. The profile is technically empty, yet it could also mean that something is not working. The empty state text ensures the user that everything is fine and suggests what they should do to get started.

Consistency and standards

Useful UX copy should above all be consistent. Imagine that at one point you’re asked to sign in, and then you find out that your login details are incorrect. You might click a modify button and see a pop-up asking you if you want to change this.

This is why all UX writing processes should start with an in-depth audit and agreeing on consistent terminology throughout the product. The sooner you get it all sorted, the easier it will be to maintain clarity later. Trust me on this one!

Error prevention

Avoiding errors creates a much smoother user experience than trying to fix them later. Here’s how Slack tackles it in their settings:

Instead of displaying an error message when someone doesn’t use commas, or including this information in the help center, Slack provides clear guidance through microcopy. A similar strategy can be applied in the registration process:

When you set up a password in DataFeedWatch, you already know what needs to be included. This way, the users avoid annoying error messages and they’re more likely to get it right at first try.

Bonus: your own limitations

Of course, the rules described above apply to designers too. Apart from them, we’re also affected by many other psychological phenomena. Perhaps the most important one of all is the curse of knowledge.

While you’re good with words, your users don’t have to be. Using fancy words, puns and metaphors in your UX content may appear witty to your and your colleagues – and incomprehensible to your users. Don’t forget edge cases, too – for instance, users on the autism spectrum often don’t understand metaphors at all.

Remember that most of the time, you’re not the end user. This is why it pays off to focus on plain language that will serve a wider audience coming from different backgrounds.

If you’d like to read even more actionable tips for better writing, you’re sure to enjoy this article about UI writing on the UXPin blog. I hope that this little psychology lesson has left you inspired!

The post The Psychology of UX Writing appeared first on Studio by UXPin.

With the rise of voice-controlled devices and interfaces around the world, catering to users with a design that focuses primarily on voice interactions has become essential. This is what remained to be the impetus behind voice-centric design. Now, from the voice-centric design, we are moving towards a voice-first design, which is more about giving priority to voice interactions over on-screen interactions in the design.

As voice interactions and voice searches are increasingly becoming commonplace, leading companies around the world are increasingly embracing the voice-first design principle. To understand the revolutionary role played by voice-first design in the process mobile app design passes through, we need to explain how it works and what are the fundamental principles and effective practices for this design principle to work consistently.

Voice-based vs Screen-Based Interactions in Design

As of now, most of the devices that we use every day and for a variety of contexts basically depend upon screen-based interactions. But already many such devices are allowing voice interactions to get many things done. From simple voice search on the browser to use of voice assistants such as Siri or Google Assistant, voice interactions are increasingly becoming the mainstream for digital interactions for many users. So, even the top app developers working primarily for screen-first devices such as mobile are increasingly allowing voice interactions in their scheme of things.

It is increasingly becoming apparent that the convergence of the screen-first and voice-first interactions holds the promise for the future of user interfaces and user experience design as a whole. The emergence of voice-only device interfaces further fueled the popularity of the voice-first design principle. From Amazon Echo to Google Home to a host of other devices running on voice commands can be cited as examples of how voice control is becoming the mainstream of digital interactions.

Focus on Building a Personality Instead of just a Persona

Voice is more personal, full of individual attributes, and grains of a personality. The grain of the voice always leaves a distinct remnant of a personality. This is why the first principle that voice-first design initiatives should focus upon is incorporating a distinct personality instead of just building a persona, which is typical for any design effort.

When you focus on giving the speaker of the app a distinct personality with a signature voice modulation, way of greeting, and saying things, a distinctly personal way of informing users and explaining things, the users have the feeling to have interaction with a person, rather than just a machine. When users start to recognize the speaking tone with a specific personality attribute, this establishes a relation that turns into repeated engagement.

Understanding the Maze of Devices

The type of the device and the software platform is in use can influence the voice interactions and their output to a great extent. For every device and OS platform, you should have a clear design plan for incorporating a voice-based design that helps users in controlling and commanding across different contexts. Let’s mention the various devices and APIs required for incorporating the voice-first design.

Keep the Difference Between Talk and Type in Mind

When introducing the voice-first design, another important thing that you need to remember that we don’t talk the way we type. When typing, we mostly use formal expressions, and when talking, we mainly use informal and impromptu expressions. So, if a machine doesn’t understand the natural speech and cannot understand natural language and voice modulation for deciphering the context, mood, and a number of other factors, the response is very unlikely to be natural.

Making machines understand and decipher human speech remained to be one of the biggest challenges as of now. As modern technologies such as natural language processing and natural language generation have worked well to breach this technology gap to a great extent, it is up to the UI designers to utilize these technologies for the advantages of voice interactions.

Ensure Logical and Natural User Flows

For any visual interface design maintaining optimum user, flow is extremely important. The user flow logically guides users to fulfill their objectives while allowing the app to drive their business goals. The user flow shows the critical logic of the underlying system apart from showing the key goals and milestones in the user journey.

For example, in a music streaming app, the ideal user flow should flow from the step of signing up, browsing songs, playlists, artists, genres, and albums, playing a particular playlist, downloading music, making a playlist and sharing the same on other platforms.

Accommodate Non-Linear Interactions

Voice interactions are more whimsical than text-based interactions as they are more impromptu in nature. When talking to an interface, most of the time, users talk as things come to their minds with less scope of thinking in between. Naturally, impromptu use of commands and responses often follows a non-linear path of interactions.

For example, the voice user interface of a food ordering app instead of sticking to the linear steps like selecting a location, browsing delivery options, and restaurants and options should also allow users to make non-linear commands like “I want Byriani and Kebabs”. The voice interface in response to this can interact to draw more information from the users by asking about the location, delivery option and can provide other filter options.

Conclusion

Finally, we must remember that remaining aware of the context of user interaction is the most important aspect of voice-first design. The voice-based design should focus upon responding to the user commands and queries with highly context-aware responses.

The post Voice First Design: A Movement Toward Voice-Based Interaction appeared first on Studio by UXPin.

1. Avoid Using Jargons and Specific Terms

Not all of your users know what those specific terms mean. At the same time, jargons are not a great substitute either. Both terms and jargons can be overwhelming to your readers when they don’t understand their meanings.

Always strive to avoid both of these to avoid miscommunication. Choose words that are easy to understand. Remember: you are writing for a wide audience. This means that you have to get through to every visitor of your website.

2. Get to the Point and Make It Concise

There is no need in making your content overly long either. Make sure you check out 3 Psychology Principles Web Designers Must Know to better understand why as these principles are useful both to web designers and to writers.

More often than not, you don’t have to include every single detail as Internet users can usually figure out what’s what. If they want to know more, they will explore features individually one step at a time. Ask yourself whether or not your users need to know what you are about to write.

3. Use Simpler Words and Sentence Structure

Using simpler words including less complicated grammar can help your UI become more intuitive. It doesn’t matter which tense you use – either past or future – as long as you use simple forms.

At the same time, refrain from using absolute forms. Don’t promise anything big and don’t boast. Explain the features of your product without excessive pride and try to be as realistic as possible. You don’t want to raise your readers’ expectations too high.

4. Specify the Gender When Possible

This may seem like a really small and unimportant detail, but specifying the gender when it is possible can make a big difference. Use either or “her” or “his” depending on the user. Even though English allows gender ambiguity (by using “they”), it is still a good idea to be more specific. This is especially true for when you are using a different language.

5. Don’t Mix Pronouns in the Same Sentence

Don’t use “you” and “your” with “me” and “my” in the same sentence. It is very confusing and can throw off your readers. Try to avoid using them in the same context when addressing the user. For example, instead of saying “Change your preferences in My Account”, use “Change preferences in My Account”.

6. Avoid Exclamations and Refrain from Using Idioms

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/10/Blog_Exclamations_1200.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Exclamations are not very widespread which means that when you use them, they can come off as shouting. Try to avoid them as much as possible, so that you don’t sound rude or pushy to your audience.

Moreover, refrain from using idioms. Not all of your users know English perfectly, so it would be very hard for them to understand what you meant by a certain phrase. Besides, finding a corresponding phrase in a different language is very hard when you are translating your website.

7. Use Tools for Writing and Editing Your UI

Writing and editing your UI must not be overlooked as it is an integral part of the whole process. Here are some great tools to help you:

#1 Hemingway Editor and Readable – Making your content more readable is essential for your audience to understand it easier.

#2 Trust My Paper and Grab My Essay – Sometimes you won’t have time to write the content you need. Use these online writing services to help you.

#3 Focus Writer and Google Docs – A good word processor can be a lifesaver with all its features for editing and formatting.

#4 Studicus and Grammarly – Proofreading is just as important, so make sure your text doesn’t have any grammar, spelling, and punctuation mistakes.

8. Make the Error Messages More Specific

Making your error messages as clear as possible is essential for your users to be able to complete the actions they want to make. Think of such questions as:

• What happened and why it happened?
• Why was there an error and what went wrong exactly?
• How can the user fix this issue?
• What are the specific actions that the user must make?

You must explain to the user what is wrong and how they can overcome. It is a part of a great UI just like everything else.

9. Use Numerals and Capitalize Necessary Letters

[videojs_video url=”https://www.uxpin.com/studio/wp-content/uploads/2019/10/Blog_Capitalize_1200.mp4″ controls=”false” autoplay=”true” loop=”true” muted=”true”]

Using numerals instead of words does not only save you space but also makes it easier for your users to read the content. The point is to make the experience of your users as comfortable and enjoyable as possible and numerals can help a lot.

Don’t capitalize every single letter. Such text is much harder to read, so refrain from using it even in headings, menu items, and titles. There are some exceptions, of course, such as logos or acronyms, but all other times do not require all caps.

10. Stop Accusing Users With or Without a Reason

Of course, users will make mistakes – it’s inevitable. But you shouldn’t blame them for this as you will definitely come off as rude, mean, or something similar to that.

Instead, write more neutral messages that will not have any charges for the issue. You aim to focus on the user rather than focusing on the issue itself. If you can manage that, you will be able to stop accusing users with or without a reason.

11. Avoid Common Phrases and Simplify Sentences

As mentioned earlier, simplifying the way you write can make your UI way more intuitive. For example, if you check out tips about content style guides, you will have a better understanding of this rule.

You must speak a simple language that is easy to understand. Avoid using common phrases like “to”, “you should”, and so on. Such words only take up space and sound very awkward.

12. Don’t Ask About Sureness Yet Again

This is simply unnecessary. You don’t need to ask for sureness again and again. This includes anything from “Are you sure?” to “Do you want to proceed?” questions. They don’t add any value to the request and are usually fundamentally useless.

13. Name the Buttons with Their Respective Actions

This is very similar to the rule about unclear error messages. Instead of using “OK” in dialogs, it is better to stick to using the name of the respective actions. You not only have to ask what your users want to do but also make it clear what they can do.

The “OK” button is a standard and seems obvious for many dialogues. However, you can still use other options instead. After all, you aim to make your UI intuitive rather than stick to something conventional.

If you want to learn more about UX and UI writing we encourage you to give a listen to our podcast with Yuval Keshtcher:

Final Thoughts

To sum up, making your UI more intuitive with the help of writing is possible as long as you are willing to dedicate time to it. Follow the tips in this article and avoid mistakes. If you do this, you will be able to create an intuitive user interface.

The post 13 ways to make your UI writing better appeared first on Studio by UXPin.

Long gone are the days when design used to rely almost solely on the creativity of designers.

Technologies are sophisticated, subsequently rendering users more demanding. UX design has been blurring the line between art and science. According to Adobe, 38% of people will stop engaging with a website if its layout or content is visually unappealing. A similar percentage of website visitors will bounce if images take ages to load.

Enter data science to help you avoid death by bad, unintuitive design.

Eliminate educated guessing  

Successfully executed UX design has a strong scientific basis. You must make informed decisions. So before you start designing, it’s essential to go through 6 steps that mimic the scientific method:

• Ask a question
• Do research
• Develop a hypothesis
• Run experiments
• Analyze your findings
• Make an informed decision and implement it

Never throw darts in the dark and make assumptions on what will get website visitors to stay longer and convert. There’s a sea of information for you to dive into and find what you need. The problem, however, isn’t to collect all that vast data on user preferences. It’s to process and analyze it in a systematic manner to provide you with ready-to-use insights.

Unrightfully neglected by UXers, Google Analytics (GA) can make your life easier. This free tool helps you learn valuable information about visitors: what they’re doing and looking for on your website, where they come from, how much time they spend on each page, whether they engage with certain content, or whether mobile visitors behave differently than desktop visitors, among many other things.

How to make the most of Google Analytics:

Optimize your Bounce Rates

Assess which pages have the best and worst bounce rates. Apart from allowing you to access the report for each individual page, GA offers analyzing your landing pages and establishing the sources from which visitors enter your website.

Improve your Average Time on Page metrics

As the name suggests, this report shows you how much time a visitor spends on a particular page engaging with content. A lower average time indicates that visitors don’t react to your content particularly well, especially if that page features a lengthy blog post. This is a sign to optimize it. In certain cases though, a visitor quickly leaving means they easily found the information they were looking for.

Get to the bottom of Device Usage

This is a metric that has become increasingly important over recent years. Bear in mind that mobile traffic is expected to grow 7-fold from 2016 to 2021, according to the Cisco Mobile Forecast! With this report, find out how your visitors access your website. If you notice that your mobile sessions are extremely short, then fix things and take a multi-device friendly approach.

Obtain insight into Demographics

Gender, age, interests, level of education, income, location, and other information are crucial to understand the requirements of your target audience and their preferences when it comes to user experience and satisfaction.

Data Science + UX Design = More Conversions

Based on relevant metrics, you can build a website with UX design capable of capturing visitors’ attention and prompting them to fill the form or make a purchase. By having access to a huge volume of processed data, you’ll be able to pinpoint what exactly to do to make your design appealing and functional.

Fine-tune your layout

A/B testing has long been the most effective way to determine the performance of each element on your web page. However, this hit-and-miss method is time-consuming. Hence, a dynamic website design with adapts based on visitors’ interactions is the way to go. Heat map analysis is another tactic to boost conversions. By monitoring the eye or mouse cursor movement, you can get an idea about what colors, fonts, buttons, or types of content make your visitors tick. Since this can be pretty challenging, check out the works of acclaimed agencies specializing in web design to pick up some tricks of the trade.

Polish your content

As you know, content still reigns supreme. However, it won’t do much if visitors can’t locate a useful piece on their topic of interest. That’s why a search box is a must. This tiny element not only helps your visitors navigate your website easily, but also sheds a light on whether the results people get correspond with what they’re searching for. As a result, you can make your content more valuable and meet their expectations.

Personalize your website

Relevant visitor data is crucial for tailoring your content and giving each visitor a unique and personalized experience. The point is to avoid one-size-fits-all messaging and addressing your target audience in a bland, generic manner. Instead, connect with them on a deeper, more personal level by displaying adaptive CTAs, messages, or visuals. With segmentation, you can target different audience groups with suitable messaging and imagery, and avoid the redundant information they don’t care for.

Analyze your traffic

New leads are the lifeblood of every business. In order to understand how to optimize lead generation process, you need to identify what the most effective methods are and insist on them. Evaluate every acquisition channel and leverage those which bring the most qualified traffic. Spying on your competitors is another way to steal some of their thunder and copycat their successful tactics for your own benefit.

Maximizing Your Data’s Value

Insanity is doing the same thing over and over again and expecting different results.

This quote, mistakenly attributed to Albert Einstein, perfectly sums up the importance of trying a variety of things to create the best UX design. Sometimes a seemingly small and irrelevant change can make all the difference.

A few things to bear in mind when you’re assessing your data:

A/A testing is as equally useful as A/B testing

It’s used to prevent a false positive result which occurs due to an error in data reporting. False positives account for a whopping 80% of all A/B test results. But, if you show two random groups the same landing page or CTA, instead of two different variations, you can ensure the quality of execution as well as of your analysis tool.

Watch out for a novelty effect

Sometimes, the early performance of a redesigned website might show a sharp upward trend. Not because of the improved UX design, but because of the interest in its changed appearance. This quickly wears off, and you’re presented with a more realistic situation.

Beware of Twyman’s law

It can mislead you into believing that an interesting and unusual stat is correct. This glitch can be the result of a certain bias, data errors, or even bad design or test circumstances.

The instrumentation effect is another threat to the validity of your UX design research

This occurs if you change the instrument, observers, or measurement device during the process. So, make sure that your experiment is tested before it goes live. This means that you should use different browsers, devices, and an extra pair of eyes to help you prevent any issues.

In conclusion, data science can be vital to the success of your UX design. It holds the key to your visitors’ behavior and expectations, but you must learn to use it and be aware of its potential pitfalls.

The post Why Data Science and UX Design Need to Become Best Buds appeared first on Studio by UXPin.

There’s no easy way to say this: Design tools have completely failed to deliver sufficient ways to help create accessible experiences.

All of these have existed as plugins or external programs. Until now.

Introducing the very first built-in Contrast Analyzer & Color Blindness Simulator in a design tool. According to WHO, over 1.3 billion people live with some form of vision impairment. Of that, 217 million with moderate to severe vision impairment!

Contrast Analyzer

Think about it—can everyone perceive your digital creations? Here’s where taking size and contrast of the elements of the user interface really counts. That’s exactly what our Contrast Analyzer was built for. Now, the WCAG contrast standard is used in our built-in, automatic linter. Right inside the UXPin design editor, you can specify whether to comply with either AA and AAA levels. It will automatically inform you when the design’s text can be easily read.

Color Blindness Simulator

And then there’s our new Color Blindness Simulator. Did you know that 4.5% of the world’s population has one of the types of color blindness? Moreover, a whopping 8% of the male population experiences a form of it! This huge number is too often overlooked by designers. Alas, the Color Blindness Simulator shows your design as perceived by someone with one of eight types of color blindness!

UXPin can simulate:

• Four kinds of red–green color blindness
• Two kinds of blue–yellow color blindness
• Two kinds of complete color blindness

Hopefully, with this simulator at our fingertips in UXPin, we’ll all always make sure that people affected by color blindness can use and enjoy our digital creations.

Say goodbye to external accessibility checker tools and jumping between programs. Learn more about in in our CEO’s Medium article and check out the tutorial on how to use both.

No one should feel excluded from digital experiences by means of their visual, motor, auditory, speech or cognitive disabilities. Taking care of accessibility is an ethical imperative for designers. UXPin just took the first step. Let’s get to it.

The post The First Built-in Accessibility Features in a Design Tool are Here appeared first on Studio by UXPin.

Just when you thought your prototypes couldn’t gain more superpowers, we added another to your prototyping utility belt: Expressions. Bring the power of JavaScript functions to your designs.

Now you can power up your prototype in a programmatic way. Gone are the days of design tools not having math functions! We just leveled up with Expressions. It makes JavaScript directly applicable to your prototypes. This is the most powerful feature UXPin has released to date, and it nicely complements ournew Variables and Conditional Interactions features. It also brings us one step closer to our mission to enable the best user experiences by merging design and engineering into one world of better, faster product development.

Expressions is basically “code language”. You can now use JavaScript functions to perform additional operations on variables such as math, dates, text, etc. to build even more. Want to prototype a design with a computational component? Now you can! Manipulate variables, perform math and regular expressions tests, and use the results to update variables or trigger state changes and transitions— all right inside the prototype.

Think of Expressions as being similar to the functions in Google Sheets and Excel. They can also make a prototype “context aware”. Basically, a prototype can change based on its operating system, or size of the browser window.

Expressions allow you to get even closer to real apps, especially when user testing. You can change things dynamically in an earlier stage of your prototype. Say goodbye to linking static artboards forever.

The number of things you can create with Expressions is infinite. But here are some specific examples:

• Perform some math on a diagram’s data
• Create a shopping cart for an e-commerce website
• Build an ROI calculator for your business
• Create a rap name generator (as our Account Manager, Natalie, suggested)
• Make a scheduling tool to book clients
• Show error or success messages
• Validate email addresses

Not part of the UXPin family yet?

The post Expressions: Harness The Power of JavaScript in your Prototypes appeared first on Studio by UXPin.