UX Mastery https://uxmastery.com The online learning community for human-centred designers Tue, 01 Mar 2022 13:24:27 +0000 en-AU hourly 1 https://wordpress.org/?v=6.2.2 https://uxmastery.com/wp-content/uploads/2019/12/cropped-uxmastery_logotype_135deg-100x100.png UX Mastery https://uxmastery.com 32 32 170411715 The State of WordPress: UX and Insights for 2022 https://uxmastery.com/the-state-of-wordpress-ux-and-insights-for-2022/ https://uxmastery.com/the-state-of-wordpress-ux-and-insights-for-2022/#respond Mon, 28 Feb 2022 23:31:00 +0000 https://uxmastery.com/?p=109930 Discover some of today’s most popular web creation trends. Building a new website requires creativity, insight, and a little bit of foresight. Nobody wants to face the disappointment of putting time and energy into a web experience that’s obsolete from day one. Elementor, one of the most recognizable WordPress website builders out there, polled thousands […]

The post The State of WordPress: UX and Insights for 2022 appeared first on UX Mastery.

]]>
Discover some of today’s most popular web creation trends.

Building a new website requires creativity, insight, and a little bit of foresight. Nobody wants to face the disappointment of putting time and energy into a web experience that’s obsolete from day one.

Elementor, one of the most recognizable WordPress website builders out there, polled thousands of its users and identified the trends set to define the web creation space. The survey was sent through dedicated mail, included in the brand’s magazine, and posted throughout the community. We wanted to discover the trends that touch and concern web creators and UX professionals on a wide scale.

The result: Over 5000 valid responses filled with demographic data, common pain points, and web creation trends.

These responses represent some of the latest insights into the WordPress industry. Use this data to inform your web creation and UX design strategy and position your brand for success.

WordPress Web Creators: Demographic Insights

Our survey started by asking WordPress web designers their age.
Here’s a breakdown:

Pie chart showing age distribution

It’s easy to see that the largest age group of web creators is between 35 and 44 years old. There are significant numbers of web creators on both sides of this range. We see more users on the younger end of this group (25-34) than the older end (45-54).

Keep in mind that the WordPress community continues to grow every year. 

The variance between the second and third-largest user age groups might indicate that new WordPress web creators are getting slightly younger overall. Ideally, we’d have to collect the same data for several years to find out for sure.

Next, we asked survey recipients to identify their gender:

Pie chart showing gender distribution

It looks like WordPress website creators largely identify as male.
However, a full quarter of responders identify as female, representing a significant user group. This percentage is in-line with the broader IT sector – women make up 25% of the technical workforce in large technology companies.

What Are UX Designers Most Worried About When Creating a Website?

We asked UX designers, marketers, and developers to rate the concerns that inform their web creation processes. We identified 11 different concerns that reflect today’s web creators’ challenges:

Bar chart showing the top concerns of web creators

Let’s cover the top three:

1. Performance 

Maintaining good performance remains the top concern for WordPress website creators, and for a good reason. Google has made its Core Web Vitals Score integral to SEO success, which has led to reputable, top-ranking websites to prioritize reliable high-speed web performance. 

The world’s top websites are cracking down on web page loading times. As a result, web users now expect all websites to run as smoothly as Robin J.E. Scott’s Fastest Website in the World

See for yourself:
Copy that link into
PageSpeed Insights and hit Analyze. You’ll see a perfect 100 for desktop site performance and 90+ for mobile performance. But there’s more – this hyper-optimized web experience is built on WordPress!

WordPress creators know they can achieve web page load speeds measured in milliseconds. However, they don’t always know how to balance their clients’ and website vistors’ needs while still achieving best-in-class performance. Marketers will insist on at least 80+ for desktop and 40+ for mobile.

There are a few things you can do to guarantee better website performance:

  • Use an efficient website builder that doesn’t weigh down your website with unnecessary JavaScript and complex loading logic.
  • Upgrade your hosting service to a top-rated managed hosting provider who can dedicate more resources to your website. Alternatively, you can opt for a website builder with built-in hosting services. Elementor, for example, now offers best in-class cloud hosting for WordPress
  • Cut down on plugins. Prioritize lean plugins that do one thing very well, and get rid of feature-stuffed general plugins that try to do everything.
  • Try implementing a caching solution, or invest in a global Content Delivery Network. Ideally, your web host should offer these services. That way you don’t have to weigh down your website with caching or CDN plugins.

2. Design Inspiration

It can be hard to find the right design inspiration for a particular website. This is especially true if you don’t have reams of data about its potential users, their preferences, or the site’s market position. Many WordPress creators have to start with a blank slate.

At the same time, WordPress creators want their websites to be unique. It’s important for websites to express their creators’ individuality. But it’s also easy for a cool idea to seem unwieldy a few months later after the website is finalized. 

It may be comforting to know that almost all web creators face this challenge sooner or later. Many of them look to their colleagues and competitors to find inspiration based on current design trends.

Understanding that even the most grizzled web creator can sometimes hit a creative wall, Elementor introduced Full Site Kits this past year. Designer-ready, complete websites, Kits can be quickly customized and launched within minutes. Web creators can always count on these when they’re in a pinch.

Some of the trends that are beginning to define the web creation space include:

  • Scrollytelling- Also known as “narrative visualization”, this approach uses a sequence of visual images and animations to tell a story. If most websites are like books, think of yours as a graphic novel. Website visitorscan click or scroll through at their own pace, exploring highly visual content that reinforces your brand message.. 
  • Nostalgia- The past always conjures powerful emotions. Web creators are increasingly turning towards analog typography and imagery, making their websites wistful and relatable. Classic images, retro filters, and blur effects can heighten this sensation and create a familiar, comforting web experience. 
  • Delight- It’s easy to see the value of unexpectedly delivering positive feedback. Small animations, gestures, and microcopy can help you put character into an otherwise sterile web environment. When done right, it shows an attention to detail that carries over to your brand and the products or services it provides to website visitors.

3. Work Process and Communication

Managing remote web design and creation teams can be demanding. Agencies have shifted to a remote working model, putting stress on their time-tested creation methods. This can leave website creators feeling disoriented.

Almost every web creator can recall a situation where they worked for hours on some feature or web page element, only to have the client reject it at the last minute. Sometimes clients and teams will change the scope, add new requests, or lose track of things in the middle of production.

Today’s web creators need to invest in project management tools that address some of the communication challenges unique to a remote environment. It’s important for creators, agency teams, and clients to access live updates and separate channels for different iterations or projects. Tools like monday.com and Clickup can dramatically improve project efficiency and communication.

Top 10 Web Creation Trends Web Creators Would Like to Learn About

We asked web creators what web design trends they would like to learn about most. These ten issues represent the future of website creation and digital marketing in general.

Top trends web creators want to learn about

Let’s take a brief look at each one:

  1. Website Load Time and Page Speed Improvement reflect the fact that performance issues are web creators’ number-one priority. PageSpeed Insight scores reflect how closely websites adhere to Google’s Core Web Vitals. Fast, reliable website performance on desktop and mobile ensure high PageSpeed rankings and improve the user experience.
  2. Smart Content Loading refers to content on the website being displayed dynamically based on the user’s profile. This means that two different people will be presented with different content on the same page that will better fit their needs. You can show or hide different elements based on different attributes like date/time, device, browser, if the user is logged in, language or URL. 

For example, this can be achieved with different plugins. Plugins such as Dynamic.ooo allow web creators to decide what will be visible to each person (for every widget, column, and entire section. 

  1. Automation helps simplify complex workflows. It enables small web agencies to compete with larger marketing firms by reducing the amount of time spent on low-value, high-volume tasks. Tools like Zapier allow web creators to automate almost any task and free up time for more important ones.
  2. Progressive Web Apps allow web browsers to act like native platform-specific apps. This technology crosses the bridge between native apps and purely hosted web apps, allowing capable, reliable service directly through the Internet. Learn more about how these apps work here.
  3. Micro Animations are small functional animations that support the user experience. Often, they display visual feedback that encourages vistors and lets them know they’re on the right track. Discover how to use micro animations to create an intuitive interface and clarify the context on your website.
  4. Headless WordPress sites use WordPress as a content management system (CMS) but rely on a different frontend stack to display content to website visitors. This decouples your content editing and development teams, allowing them to work independently of one another, which can have unique advantages
  5. Webhooks are lightweight APIs that power data sharing in one direction. Website events (like publishing content with a certain keyphrase) can immediately trigger a data request without the need to develop and integrate a full-blown API. Learn more about the differences between webhooks and APIs.
  6. Accessibility is as important for websites as it is for brick-and-mortar stores. People with physical, auditory, or visual disabilities should be able to navigate, use, and contribute to the web experience like anyone else. Web disability goes further than that, as well. Learn more about accessibility guidelines here.
  7. Chatbots have become the ideal automated customer service solution for many web creators and brands. The ability to automate interactions with customers in natural language is a key value that ensures scalable growth in every industry. Learn more about how chatbots work.
  8. Micro Interactions refer to small, meaningful animations and displays that enhance the user experience. They help guide visitors and show them they’re on the right track. Incorporating micro interactions can improve the usability of your website significantly. Discover some of the ways web creators are using micro interactions on today’s websites here.

WordPress in 2022: Clients’ perspective

Enough with just focusing on web creators 😉.

We also asked the clients to rate the qualities and elements they look for in web creators they ultimately choose to build their site.

Top considerations when choosing a web creator

This data shows a few things clearly. First, web creators need to be upfront about their rates and prices to attract customers. This doesn’t mean that web creation pricing has to be a “race to the bottom,” though. Upmarket customers will prioritize premium web creators who charge accordingly high rates.

It’s telling that budgetary concerns are tied with aesthetics. It could mean that upmarket customers are willing to pay a premium for designers who share their aesthetic tastes and principles. Customers with low budgets are likely looking for the same shared interest and may be willing to spend more time qualifying web design contracts before committing.

The desire for common technology can indicate interest in:

  1. Vast documentation and ability to consult with other creators.
  2. Reliability and stability of a product that is well established
  3. Integration and collaboration options within the ecosystem (no need to reinvent the wheel).

In theory, customers can build APIs and implement automation solutions to interface between technologies or platforms. In practice, they would prefer not to and will overlook web creators who don’t demonstrate mastery of the most popular technologies.

It’s also worth noting that a significant subset of customers exclusively view a website as the goods they’re paying for, instead of looking at a website as one element (albeit the most important one) in a greater package of services that can be extended to them by web creators. 

On-page SEO, branding and marketing are no longer added benefits. Customers expect web creators to provide a holistic service package with these components very much a part of it.

Lastly, the relative weakness of portfolios and recommendations suggests an industry-wide 

move towards customization and personalized service. Every customer believes their website is unique and may dismiss portfolio examples as not being representative of their specific needs. This may not necessarily be true, but web creators will need to keep it in mind when marketing their services.

You’re One Step Closer to WordPress Success

We hope you’ll find this data as valuable and insightful as we did. It’s a great time for web creators and digital marketers to adjust their strategy to meet new demands and develop new competencies to thrive in a challenging market. The more you know about your market, the better you can position your brand to succeed in it.

The post The State of WordPress: UX and Insights for 2022 appeared first on UX Mastery.

]]>
https://uxmastery.com/the-state-of-wordpress-ux-and-insights-for-2022/feed/ 0 109930
Heatmap Analysis To Improve Your Website UX https://uxmastery.com/heatmap-analysis-to-improve-your-website-ux/ https://uxmastery.com/heatmap-analysis-to-improve-your-website-ux/#respond Thu, 17 Feb 2022 22:00:00 +0000 https://uxmastery.com/?p=109919 Nowadays, we no longer have time to spend hours in a store and want to reach information in a second. Because of these factors, websites and online stores are hugely popular, and UX designers have more and more work to make these sites successful. Buy in an instant and access any information instantly. But, by […]

The post Heatmap Analysis To Improve Your Website UX appeared first on UX Mastery.

]]>
Nowadays, we no longer have time to spend hours in a store and want to reach information in a second. Because of these factors, websites and online stores are hugely popular, and UX designers have more and more work to make these sites successful. Buy in an instant and access any information instantly. But, by sticking out from the crowd, how can you make the online business profitable as a UX designer? UX optimization is the key, and it’s simpler than you think. Let’s look at optimizing your site’s user experience using an analytics tool.

UX Analysis

The goal of user-centered design is to meet the users’ needs.

Data is used to guide design decisions. Data can help you map out your personas, user flows, interfaces and other elements in your UX design work.

But what metrics should you be considering?

  • Website metrics
  • Device metrics
  • Conversion related metrics
  • User metrics
  • Competitors
  • SEO metrics

Let’s look at it all briefly.

Monitoring website metrics and device metrics is vital to see how much traffic your webshop receives, what device your webpage visits, and what elements generate the most leads. Find out if you need to optimize for mobile or desktops. You can also find out which items and subpages need to be improved.

This is closely related to the conversion-related metrics that denote actual user interactions. For example, you can find out which is your most popular product and how many people have subscribed to your newsletter. If you have few subscriptions, you may have to optimize your CTA for newsletter sign-ups.

User data refers primarily to demographic data. How old, what gender, where do people live, or even what interests do your typical users have? You’ll need this information to tailor your website to your visitors.

But how does SEO get here? It has an interesting but prominent role here as well. Consider one of the most significant on-site SEO metrics: the loading time. If your webshop loads slowly, you will have a high dropout rate, significantly degrading the user experience.

Hopefully, if you’ve gotten this far by reading the article, you’re sure to think about how much work you will have to do. But how about we say that a tool automatically collects most of the data listed above for you? Enter heatmaps. Here’s a closer look at these tools and how you can use them in UX optimization.

Heatmaps

Heatmaps are more of an analytical tool for measuring the efficiency of your website. It allows you to track the number of visitors to each subpage, the performance of your products, the source of your visitors, and even the performance of your buttons and CTAs.

A heatmap gives you a complete view of how visitors engage with your website and the compelling parts of your site. As a result, you can improve the user experience with the help of heatmaps.

Different forms of heatmaps include:

  • Click heatmaps
  • Segment heatmaps
  • Scroll heatmaps

Each of the tools will help you track various metrics and prove valuable for UX optimization.

Click Heatmaps

Click Heatmap
Example of a Click Heatmap on the UX Mastery home page

Click heatmaps track of how many times each button is pressed. Warm colors are used to highlight areas with the most clicks, whereas cold colors highlight areas with the fewest clicks.

With this knowledge, you can determine which CTAs and button types are most effective on your website. If you want to make your website more user-friendly, it is valuable information.

Click heatmaps are also used to determine where to optimize. We also encourage you to review each of your subpages and see which subpages are rarely visited by your users. 

You may want to make UX upgrades on these subpages to increase their popularity and thus your conversion rate.

But what does it looks like in practice?

Assume that the analysis suggests that the orange buttons and the “Let’s do it” CTA wording are the most successful on your website. You can consider using that color and specific language more often to improve readability and enhance conversions.

Your website will be significantly more transparent if you employ CTAs and text that heatmaps reveal to be effective. Signing up for a newsletter or purchasing a product doesn’t have to take a long time for your visitors anymore.

Segment heatmaps

Segment heatmaps provide a much more complex analysis than click heatmaps. It not only informs you which region of your website was the most popular, but it also tells you where that specific click came from. The software maintains track of the visitor’s origins and assesses the data accordingly.

The visitor may have arrived at your page after clicking on a link in one of your social media ads, they may have arrived at your website after clicking on your PPC ad, or they just come organically. With segment heatmaps, you can see this.

When it comes to optimizing the UX, you can observe which platform brings in the most visitors and how they interact with your site. As a result, you can tailor your website to each segment. You can also find out the demographics of your visitors.

Scroll heatmaps

The function of these heatmaps is to determine how many visitors are scrolling down your page.

Scroll Heatmap
Example of a Scroll Heatmap on one of UX mastery’s articles

Scroll heatmaps are mostly found on content-heavy interfaces, where it’s used to figure out how long articles are read on average. It is important data because you’ll be able to tell which parts of the article you should place a link to, and you can determine where you should write important information.

With this information in mind, you can place links to your product and indicate the most helpful information in the most popular places. This will make your blog posts much more valuable to your visitors, which will, in turn, enhance the user experience.

Conclusion

As you can see, there are more connections between web analytics and UX than you might think. We recommend that you use heatmaps to optimize the user experience. You can use all the methods listed above together. You can combine other methods, such as split testing (a.k.a. A/B testing), to further leverage data in your design decisions.

The post Heatmap Analysis To Improve Your Website UX appeared first on UX Mastery.

]]>
https://uxmastery.com/heatmap-analysis-to-improve-your-website-ux/feed/ 0 109919
When WordPress Is Not a Good Solution for Your Website (and Best Alternatives) https://uxmastery.com/when-wordpress-is-not-a-good-solution-for-your-website-and-best-alternatives/ https://uxmastery.com/when-wordpress-is-not-a-good-solution-for-your-website-and-best-alternatives/#comments Wed, 05 Jan 2022 22:30:00 +0000 https://uxmastery.com/?p=109900 WordPress is a popular tool (and rightly so) for most people. However, there may be times when it is not the right fit for your work. Knowing which CMS tools can help you meet your objectives will go a long way in making you successful.
Whether you are a freelancer helping companies develop their web presence or looking to build your brand and showcase your portfolio, here are six additional platforms to choose from for your next project.

The post When WordPress Is Not a Good Solution for Your Website (and Best Alternatives) appeared first on UX Mastery.

]]>
When looking to create a website, it is almost impossible not to come across WordPress. And it is no wonder: according to statistics, it powers 39.6% of the Internet at the moment. Yet, the popularity of WordPress does not make it the perfect solution for all cases: the vulnerability of the platform and limited abilities of specific plugins give reason to search for alternatives. Even though WordPress remains one of the most user-friendly and efficient platforms, it is always good to be aware of the other options. In this article, we will focus on the platform limitations and discuss alternatives for various purposes to better understand what will work best for you.

Why Do People Look for WordPress Alternatives?

Website Vulnerability

The popularity of WordPress has a downside: an attractive opportunity for hackers to access the website and cause damage to it. 

Free plugins and templates contain high-level security issues that may let hackers access posts and add malicious content. For instance, PageLayer plugins that can work with almost all themes on the market appeared to have vulnerabilities and failed to include permission checks. Over 200,000 sites were already using the plugins when the vulnerability was found. 

The vulnerability of starter templates is crucial. According to the latest news, most plugins published by the Astra WordPress theme can lead to damage that may cause a site takeover by hackers, which is why utilizing ready-to-use solutions in WordPress may not always be a good idea. 

All that publishers can do to decrease vulnerability is to update plugins to the latest versions. Still, WordPress makes it your responsibility to monitor updates and install them.

SEO Requires Plugins and Knowledge

While WordPress is one of the most SEO-friendly platforms and has numerous opportunities for creating all types of websites, it may not cover users’ needs in all cases. You can use plugins to improve your SEO in many ways, from changing page templates for meta tags generation to indexing management. Still, plugins cannot solve all of your problems, which is why you may need basic HTML/CSS knowledge or help from an additional service.

Let’s look at this example with a structured data markup. In general, structured data is a code that looks like this:

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Product",
}
</script>

If you add this script to your WordPress post, the search engine will understand what the page is about. In this example, we have added “product,” which tells search engines that the page is about the product and matches the content with search queries more accurately. The only issue is that you need to have basic HTML skills or invest your time to set a structured data markup. 

Another point worth considering is a chance of vulnerability if the user wants to solve problems that require different plugins. Their weight can slow down the website’s speed or make it appear incorrectly on some devices. Lastly, the more plugins you install, the more vulnerable your website becomes. 

Loading Speed of Themes and Plugins

If you try to run a WordPress site with a speed tester tool, the chances are likely that you will see “render blocking resources,” “unused CSS,” or “unused Javascript.” This is the reason the speed of the website may decrease as particular elements on the page cannot be rendered until the javascript or CSS are loaded. It happens most of the time due to the WordPress theme design that is quite difficult to correct by yourself. Additionally, plugins and the fact that WordPress is written with PHP may also affect the speed. 

User Experience 

From the UX perspective, the above-mentioned factors may affect the interaction of users with the website and their overall experience. The Core Web Vitals that Google uses to evaluate a website experience include three major components: first input delay (FID), cumulative layout (CLS), and largest contentful paint (LCP).

A timeline indicating the different stages during a page load, beginning with the first byte, first paint, first contentful paint, largest contentful paint, first input delay, speed index, time to interactive and finally, cumulative layout shift.
Source: Twitter

Most of these factors may be affected in some scenarios with WordPress. For instance, LCP defines how much time it will take for the user to see the page content. If themes or plugins are heavy, then the load time is more likely to increase. 

CLS defines how stable the webpage is. Again, you need to pay attention and be careful with the themes and plugins you install to ensure that the content blocks are not moving around as you load the page. 

Since Core Web Vitals recently became an important ranking factor, an additional SEO tool like SE Ranking will help define all your website’s technical problems.

Who Should Use WordPress?

WordPress is widely used for creating various types of websites with it. Most platforms are made to build a website or a blog, while WordPress can be used for a wide range of needs. Here is a list of website types you can create with WordPress (and it is not the full list): 

  • Blogs
  • Business, Q&A, ECommerce, review websites
  • Portfolios
  • Forums
  • eLearning modules
  • Chatrooms
  • Business directories
  • Galleries
  • Wikis and knowledge bases

WordPress is perfect for beginners, thanks to its user-friendly functionality and management. Any user can start with no prior experience with SEO, design, or development and get a working solution for business. You can enhance a website as you go, adding plugins and tweaking functionality, which is great in an ever-changing environment.

Two web page layouts and a mockup of a web template
Source: Freepik

WordPress is an excellent solution for businesses that can compromise security and have enough resources to invest time and professional effort to set up a working site. If a company is short of finances, they can invest some time and figure out the matter by themselves — a large community and support enable them to do that. WordPress is free and easy to manage, which is why a business can take care of their website once everything is set up and extend their online presence further. 

Who Will Not Benefit from WordPress?

When entrepreneurs create a website for business, most of them have one simple goal in mind: to create a site that converts into a purchase and attracts clients. As a UX designer, you know that all you need for such purposes is a reliable, UX-friendly website that will help you avoid issues rather than create new ones. 

Even though WordPress can satisfy such needs in many cases, its functionality will not work for all types of websites. 

WordPress is definitely not the best solution if the business is concerned with security. Even installing security plugins and paying close attention to updates does not guarantee that you will avoid a cyber attack. Furthermore, the platform does not offer hosting and tech support — it is worth considering if you or your clients plan to handle everything by yourself at first. 

Here are some examples where it is better to avoid building websites with WordPress: 

  • Banking websites
  • Investing and cryptocurrency websites
  • Government websites

We suggest checking alternatives before settling with a CMS to make sure you understand the benefits and the flaws of every platform. Chances are, you will find a website builder that suits your needs better than WordPress.

6 Best WordPress Alternatives

1. MODX

Like WordPress, the platform combines CMS, development frameworks, and managed cloud hosting. It can serve as a great alternative if the business is looking for a secure solution. It has various features which can create all types of websites, blogs, catalogs, and other content types.

Benefits for UX Designers

  • The platform has the flexibility to create both simple and complex sites. 
  • It pays special attention to security matters.
  • Built-in features allow users to easily manage the website once it is built and solve any issues with professional support. 

Price Range 

$30-$275 per month

2. Joomla 

From the SEO perspective, both Joomla and WordPress require the knowledge and help of plugins to improve SEO. However, Joomla is less exposed to vulnerabilities, which allows us to consider it as a WordPress alternative. It is great for developers who are ready to work with servers for the most part. 

Benefits for UX Designers

  • Joomla is highly customizable and flexible in terms of design. 
  • The platform has brand guidelines, from copy to colors, textures, images, CTAs, and more.
  • It is easy to create a clear journey for your visitor and identify an audience persona.

Price Range

Free

3. Wix

Wix mainly focuses on creating appealing websites and plans to develop in this direction. The platform offers hosting and tech support, while WordPress does not specify such features. Wix can become your alternative if you are looking for an easy-to-use, creative website with professional support and enhanced security. 

Screenshot of Wix pagebuilder
Source: Bubble

Benefits for UX Designers

  • Flexible designs with numerous templates that allow you to build creative websites and adapt them for your needs.
  • The platform offers CMS-like dynamic features, video backgrounds, scroll effects, and animations. 
  • Wix follows the latest trends and has a well-developed UI and UX. 

Price Range

 $4.50-24.50 

4. Squarespace

Squarespace is a website design platform with “award-winning web designs.” The main benefit of Squarespace is the availability of built-in SEO and analytic tools that are hard to find on other platforms. Additionally, it offers blogging tools that let you categorize, share, and schedule posts. Similar to Wix, Squarespace also takes care of all technical aspects and support, which WordPress does not.

Screenshot of Squarespace website
Source: Squarespace

Benefits for UX Designers

  • Get unlimited storage and bandwidth.
  • Fully integrated eCommerce on most plans, which makes the platform a great fit for building online stores. 
  • UX designers will find built-in templates helpful when starting a new website. You automatically get built-in mobile version templates.
  • You can use Squarespace’s custom CSS option to insert code on any website page. 

Price Range

$12

5. OpenCart 

While WordPress is a multi-tasker, OpenCart is designed for e-commerce stores. From the SEO perspective, OpenCart is not a piece of cake: you need to put some effort into figuring out how to use it effectively. Yet, it becomes easy to set up, manage, and analyze once you do. 

Screenshot of an Opencart dashboard
Source: OpenCart

Benefits for UX Designers

  • Availability of information lets users see an overview of total orders, sales, customers, sales analytics, and other widgets.
  • The multi-store feature allows you to manage all stores in one place. 
  • Wide product variables let you adjust product size, color, length, and other variables. 

Price Range 

Free

6. Shopify

As Shopify is based on the SaaS model, it is built for users who do not have a technical or design background — pretty much anyone can sign up and create an appealing online shop. The main difference is that WordPress requires a more hands-on configuration, while Shopify is a tailored solution for an online shop. 

Screenshot of Shopify's Dashboard showing the current theme
Source: Theme Junkie

Benefits for UX Designers

  • The platform has a range of customizable templates which help you meet business’ branding requirements.
  • Shopify offers responsive and easy-to-edit templates with support. 

Price Range

 $9-2,000 per month

Let’s Draw to a Close

Is WordPress still bringing value? Definitely. 

Can it be your all-in-one solution? This depends on your skills, expertise, and goals. WordPress can certainly become a solution for you or your client, considering it is one of the most beneficial platforms for beginners. It is completely free and has a large community, allowing individuals who have the time to invest in it to set up various website types. 

Yet, WordPress has some flaws that can limit a website’s abilities if it requires a specific set of plugins or can only solve a problem with HTML/CSS knowledge. 

Should you start looking at alternatives?

If you feel that security is one of your primary focuses and need a more tailored solution, you should consider alternatives. For instance, platforms such as Shopify or OpenCart are built for online shops, while Wix and Squarespace focus on websites for businesses. 

When you choose the suitable CMS for your clients or yourself, the best you can do is define your goals, find bottlenecks, and go over the functionality of each platform — that way, you will get a clear understanding of whether WordPress is good for you. 


Hero source image: Freepik

The post When WordPress Is Not a Good Solution for Your Website (and Best Alternatives) appeared first on UX Mastery.

]]>
https://uxmastery.com/when-wordpress-is-not-a-good-solution-for-your-website-and-best-alternatives/feed/ 1 109900
10 Reasons To Become A UX Designer in 2022 https://uxmastery.com/10-reasons-to-become-a-ux-designer-in-2022/ https://uxmastery.com/10-reasons-to-become-a-ux-designer-in-2022/#respond Tue, 21 Dec 2021 23:43:00 +0000 https://uxmastery.com/?p=109877 It’s likely you’ve read a thing or two about UX design on these pages ;-) At UX Mastery, we’re neck-deep in the industry, and try our best to help you keep up with this dynamic, interdisciplinary field. As we head into the new year, we want to answer the question: is a career in UX […]

The post 10 Reasons To Become A UX Designer in 2022 appeared first on UX Mastery.

]]>
It’s likely you’ve read a thing or two about UX design on these pages ;-) At UX Mastery, we’re neck-deep in the industry, and try our best to help you keep up with this dynamic, interdisciplinary field. As we head into the new year, we want to answer the question: is a career in UX design still relevant? Global demand, countless job opportunities, low barriers to entry, accessible online resources, affordable UX certifications, a salary that is is well above average—in other words, yes! If you’re still on the fence, here are ten reasons why you should become a UX designer in 2022.

Before we dive into why you should become a UX designer, let’s look at what UX design is. Here’s a quick overview:

1. Make an Impact

As a UX designer, you get to solve real-world problems, as well as the tiny, day-to-day, seemingly insignificant problems (that actually add up to a lot!). It’s all in the name, User Experience design—the user and their needs are at the forefront of the design process, whether it’s an app, a website, financial services, or the layout of a shop. When we hear “UX design”, we tend to think of customers, designing and selling products. But in reality, a user can be a patient at a hospital, a pedestrian, your grandmother, or you in many, many contexts. The world is filled with good and bad design, but imagine that good design reigned—imagine how much better our experiences and lives would be. There would be greater inclusivity and accessibility, two important aspects of UX design. 

Don Norman is the grandfather of UX design and author of The Design of Everyday Things, essentially the book of user-friendly design. After 60 years in the field, he is appalled by the absence of consideration for elderly people. In a Fast Company article, the IxDF Board Member and former Apple Vice President argues that the world seems to be designed against the elderly. People are living longer, with average life expectancies increasing worldwide. While elderly people may have diminished senses and physical abilities, many are still healthy and active. From tiny text on important labels and instruction manuals to regular household objects that need a knife or set of pliers to be opened, life is harder to navigate when you get older. Even when products are designed specifically for older people, they tend to be ugly and demeaning. In 2017 the London’s Royal College of Art put on an exhibition at London’s Design Museum called “New Old”, which was later described as “Why you should be designing for your 73-year-old self” in another Fast Company article that Don Norman references. The exhibition explored how good design has the potential to enhance the experience of our later lives. It included The Scooter for Life, designed by PriestmanGoode which has three wheels for stability and a stylish pouch at the front for storing groceries—a far cry from the bulky and clumsy “mobility scooters” you see around.

Side-by-side comparison of two different types of mobility scooters
On the left is The Scooter for Life, designed by PriestmanGoode, which helps elderly people to zip around and buy groceries in a more stylish and efficient way than ever before. On the right is an old-fashioned, ungainly mobility scooter that can barely fit on a regular sidewalk, never mind a shopping aisle.
© The Design Museum and Scooters Australia, Fair Use

The same principles apply to digital design too. When designing an app or website for seniors, there are a few factors to consider; the font should be on the larger size, the navigation should be clear and uncomplicated, and the user should be able to understand its purpose immediately. Get to the point—your grandmother doesn’t want to spend hours fiddling around.

Ageist, a lifestyle website aimed at people over the age of 50, regularly updates their website to improve user experience. They use bright colors, have a simple navigation with menu items clearly displayed at the top of the homepage, and have a large search icon. Also, it only takes a couple of scrolls to reach the “end” of the site. 

UX Design is deeply rewarding—you will discover infinite opportunities to improve and reinvent products that will enhance millions of lives.

2. It’s Creative and Logical

One of the most appealing and unique aspects of the UX design field is the synergy between creativity and logic. Let’s say you’re an enthusiastic DIY-er (upcycling and crafts) and even have your own DIY blog (you enjoy writing too!). You’re naturally creative but don’t have technical expertise; just the term “coding” frightens youno problem! You don’t need to be technical to get into UX design. Similarly, if your strengths lie in mathematics or coding, UX design gives you the opportunity to use those abilities, while harnessing your innate creativity (yes, you too are creative!). In your UX design career, you will use your logical side to create practical solutions for users’ needs. Practicality is not enough, however; the solutions also have to be creative and not just in terms of aesthetics, but in terms of functionality and usability also. Think of your smartphone; it serves many practical purposes, chiefly communication. But that alone can’t make a successful product. How does it make a user feel? Is it pleasing to look at? What makes it special enough for someone to choose it over another smartphone? Think about the Apple iPhone. It expertly balances aesthetics with functionality. While some smartphones have unintuitive start-ups, where you find yourself paging frantically through an instruction manual, the iPhone works straight out of the box, pleasantly guiding you through the set-up process. The solutions you create shouldn’t compromise usability over aesthetics and vice versa—it’s all about balance.

3. Become an In-Demand Professional in a Growing, Multidisciplinary Industry with Low Barriers to Entry

In 2020 there was a 289% increase in employers’ interest in UX design in the United Kingdom. The report by Hired.com, Mind The Gap, also found that UX design was one of the skills with the biggest gap in supply and demand. LinkedIn listed UX design as number 5 on their list of 15 skills that will get you hired in 2020. In CNN Money’s Best Jobs in America 2015 report, they estimated that UX design will grow by 18% between 2015 and 2025. You will find thousands of job listings on Indeed and LinkedIn, particularly in the US, UK and Canada with countless remote options too. As more organizations embrace the importance of UX design, job opportunities and job security is set to grow even more in 2022.

We know that UX design is both creative and analytical, but it stretches even further than that. The field encompasses numerous other disciplines, such as psychology, technology, visual design and sociology. In fact, it is the definition of multidisciplinary. This makes the nature of the work more exciting, rewarding, and challenging, but also lowers the barriers to entry. Whether you’re a psychologist in training or have practiced for many years, you can apply your expertise to UX design. You already have a big head start when it comes to understanding users’ behavior. Even if the field you’re currently in isn’t directly related to UX design or the disciplines mentioned above, the skills and abilities you already possess will benefit your UX career journey. 

4. It’s Relatively Easy to Switch to a Career in UX Design 

It’s never too late to change careers. As society evolves, new exciting professions come up. In fact, it wasn’t until 1995 that Don Norman coined the term user experience (UX) and it wasn’t until the early 2000s that UX designer became a real job. There are many reasons why becoming a UX designer is an exciting prospect, and there are many paths you can follow to become one. Therefore, don’t let your background hold you back in your journey towards becoming a UX designer, instead use it to stand out and learn what you need to take the first step. Many of the skills a UX designer needs to succeed are, in fact, transferable from other professions. Your previous experience will always be an asset.

Team members looking at a screen and discussing.
© Jason Goodman, Unsplash Licence

Let’s look at specific examples of how you can change your career to UX design:

  • If you’re a graphic designer you’re in luck since your skills in emotional design, creative thinking and prototyping will serve you well. You will need to focus on building a user-centric mindset and learn how to work with iterative processes and multidisciplinary teams. Find out more about how to change your career from graphic design to UX design here.    
  • If you’re a marketing professional and you would like to become a UX designer you can harness your research and customer—user—psychology skills. Your previous experience in how to make a product desirable and appealing for your customer will benefit you. You will need to change your conversion-focus mindset to a user experience one, also you will need to learn about individual behaviors. If you’re thinking about taking your first steps towards UX design, find out for information here.
  • If you’re a web designer you’re already used to working in multi-disciplinary teams and you’ll fit right in. In addition, you have a lot of experience solving different types of problems and this is a skill that will transfer smoothly. You will need to shift your focus from technology to user experience. You’ll need to pay attention to how the user feels when using a product besides focusing on whether the technology works well or not. If becoming a UX designer sounds like an enticing prospect for you, find out more practical information here.
  • If you’re a business manager you can definitely take advantage of your “big picture thinking”, and this will help you make better judgment calls for your users. You’ll have to learn how to build a user-centric mindset and familiarise yourself with the design processes. Find out more about how to switch from a business management career to UX design here.
  • If you’re a software developer you’re already experienced in creative problem solving and testing, and you have a constant-learning mindset. These skills will help you become an outstanding UX designer. You’ll have to shift your focus from the technology itself to how your users feel when using it. If you can build a user-centric mindset you will be able to have a successful career as a UX designer. If you’d like to know more about this particular career change, read this piece

If you want to change your career and become a UX designer, but your background doesn’t match any of the previous examples don’t worry. Think about what your current career has in common with UX design and use that as a starting point. Once you’re more familiar with UX design you’ll be able to bring your unique point of view and stand out to build a successful career. There are plenty of options to gain the knowledge you need that are compatible with your current career and schedule. Be assured that you can make the first step towards becoming a UX designer in a smooth and smart way.           

5. You Don’t Have to Master Tools 

Believe it or not, UX tools are less important than you might think. While they’re loved by professionals in the field, with new ones released every year, it can be difficult to stay on top of them. UX tools (like Sketch, InVision and Adobe XD) are constantly evolving (with monthly or more frequent updates), so keeping up with them can be overwhelming and pull focus from your actual work. Happily, though, what you do, your knowledge, skills and how you apply them are far more significant. Tools come and go, but UX principles and processes remain. Moreover, there’s no guarantee that the tools you’re currently using, or will use in a future role, will be the same in your next job or company. Lastly, there are many principal UX techniques that don’t require tools, such as usability testing, user interviews and card sorting. 

One of the most common misconceptions amongst newcomers is that UX designers should know how to code. While it is helpful for designers to understand how the underlying technology works to be able to design for it, this is not essential. The extent to and you can pick up the additional skills. Here’s an in-depth look at the role of code in a UX designer’s skill set.

Person drawing wireframes on paper
The best tools are free: your favorite marker and piece of paper.
© Amelie Mourichon, Unsplash Licence

6. Opportunities for Career Growth, Skills Development and Specialization

UX design embraces both soft and hard skills. Here are some of the skills you can expect to develop in your UX design career, both through a UX certification and on-the-job learning (this is not an exhaustive list; there are many more UX-related skills to learn!):

  • Empathy
  • Critical thinking
  • Research 
  • Visual communication
  • Writing
  • Coding and development

Just as your skillset can be applied to a career in UX design, the skills that you learn in a UX design career are things you can transfer to a specialization or a different field altogether! 

The range of different UX roles and specializations within the field include these: 

  • UX designer
  • Product designer
  • Information architect 
  • Visual designer
  • Customer experience designer
  • UX researcher
  • Content strategist
  • Service designer

UX design is a broad, innovative field that presents endless possibilities for learning, growth and development.

A wall saturated with sticky notes
© Hugo Rocha, Unsplash Licence

7. Accessible and Affordable UX Certifications

There’s more good news; you don’t have to go to university or get a degree to get into UX design. You can start to teach yourself with the help of online resources. Begin with a browse through the IxDF’s library of open-source, open-access UX literature. 

A UX certification can aid greatly in your quest to become a UX designer. A comprehensive portfolio and practical expertise are essential to secure your dream UX job. IxDF courses and Bootcamps offer portfolio exercises and practical project experience so that you can build your portfolio while you learn. 

Choosing the right UX certification can be challenging. There’s a lot of choices out there, and conflicting reviews and information don’t help matters. Ultimately it is crucial to do your research and ask questions to ensure that your specific goals and requirements are met. 

Since launching early in 2021, the Google UX Design Professional Certificate presented by Coursera has seen over 300,000 enrollments. Have you considered it as an option? It provides a firm foundation in UX design, so it’s a great starting point if you’re new to the field. However, if you’re looking for something more hands-on with constructive feedback, Google’s peer-reviewed approach may not be for you. Discover its benefits and how it compares with IxDF in this article

CareerFoundry’s UX designer Bootcamps offer 1:1 mentoring and a job guarantee, so it’s another great option to consider. However, the Bootcamps are only available if you’re located in the USA, UK, Canada, the EU, Australia and New Zealand.

Udemy has a wealth of courses in countless disciplines, including UX, and you pay per course so it’s worth investigating if you want to dip your toes in. But what they make up for in sheer course volume they lose in quality as courses are managed by separate entities and not audited by Udemy. 

The Nielsen Norman Group is a leading consultancy in UX design and offers a great range of classroom-based training for aspiring UX professionals. Their courses are offered on an international basis, so you will likely have to wait a while before there’s one in your area.

Ready to start your UX career journey right now? Check out the IxDF’s range of self-paced, industry-recognized courses, Master Classes and mentor-led Bootcamps. Take advantage of the IxDF end-of-year special and get 25% off an annual membership and $200 off on Bootcamps!

2022: The Year of Your UX Career. Learn with the IxDF. Now with 25% Off! Start your career >

With the IxDF, you can choose from a range of educational materials, structured in different ways to suit your learning style. With their industry-recognized courses that cover the entire spectrum of UX design, you can dive deep into each concept at your own pace and get an industry-recognized certificate. If time is a constraint, IxDF’s Master Classes, at an average length of 1 hour, are a great way to dip your feet in the UX waters with a low time commitment.  

If you’re interested in participating in a live cohort and do not have the capacity to join an intensive Bootcamp, then the part-time, remote offering from the Interaction Design Foundation (IxDF) might be in your comfort zone. With personalized mentor sessions and a peer-based global cohort, IxDF Bootcamps cater to different specializations: choose from the introductory UX Fundamentals to the more specialized User Research and User Interface and the 100% practical UX Portfolio and Careers.

Comparison table showing different UX design Bootcamp offerings

8. Join a Thriving Community 

The UX design community is expanding. You will be able to connect with like-minded people around the world, find inspiration, offer support and discover new opportunities. The Interaction Design Foundation has Local Groups so you can meet people in your area, form friendships or even meet your future employer (there are over 400 groups in 99 countries!). And you don’t need to be a UX designer to join—the only requirement is that you want to learn!  

IxDF Bootcamps are also cohort-based, so you will learn together with other students from across the planet, interact with them and strengthen your network.

9. Work Remotely

The COVID-19 pandemic forced so many of us into the remote working lifestyle. Economic ramifications of the pandemic and the absolute necessity to work remotely have encouraged countless organizations to reduce overheads and save precious time and resources by fully embracing the world of virtual working. Often going so far as to get rid of their physical offices entirely. Sites and applications like Zoom, Slack, Microsoft Teams and more have made remote work more straightforward and sophisticated than ever. There is no need for UX design work to be physically bound, essentially you just need a computer, internet connection, pen, paper and an internet connection to design, communicate with colleagues and or clients and perform any other related task. While it is not guaranteed that your future UX employer will work remotely, the reality is that in 2022 it’s more likely than ever. And if you freelance, well, the way you work is completely up to you! 

10. Salary Satisfaction

Meaningful work is one—if not the main—factor in job satisfaction. However, salary satisfaction is also important. If you feel your hard work isn’t being adequately rewarded, even though you enjoy it, you may start to seek out other opportunities. As UX designers are in high demand, but skills are in short supply, the average UX designer salary continues to rise. Naturally, salaries will vary depending on the country, company, experience level and other factors, but the average annual UX designer salary according to Glassdoor is 105,122 USD in the United States, 48,755 GBP in the United Kingdom, 77,090 CAD in Canada and 1,389,256 INR in India. In each case, and in other countries across the world, the average UX designer salary is well over the national average salary. As demand for UX designers increases globally in 2022, so will UX designer salaries. 

Like most other industries, the UX industry recognizes experience with higher pay; so, as you advance in your career, you can expect your salary to grow along with the rest of your career.

World map showing the top 8 countries around the world where UX designers earn more than the national average

The Take Away

A UX design career is filled with possibilities, meaning and growth, and it’s all within arm’s reach. With a global UX skills shortage, high salaries and low barriers to entry, and the freedom to work anywhere, there is no better time than 2022 to explore this career path. Don’t worry if you don’t have a design background or a degree in information systems; you can find free resources online and industry-recognized courses and Bootcamps to kick-start your UX career today. What’s more, with a legion of modern problems to address—and likely many more new ones coming up ahead—this is a trade tailor-made for the 21st century, and far beyond. Choose 2022 as your year to make a difference with UX design. 

References and Where to Learn More

Find more information on User Experience Design, take the course:
https://www.interaction-design.org/courses/user-experience-the-beginner-s-guide

Explore poor user experience for the elderly as told by Don Norman:
https://www.fastcompany.com/90338379/i-wrote-the-book-on-user-friendly-design-what-i-see-today-horrifies-me 

Read more about London’s Design Museum exhibition called “New Old”:
https://www.fastcompany.com/3067220/why-you-should-be-designing-for-your-73-year-old-self 

Take a deeper dive into various UX roles and specializations:
https://www.interaction-design.org/literature/article/the-ultimate-guide-to-understanding-ux-roles-and-which-one-you-should-go-for 

UX software tools aren’t quite as important as they might appear. Read why, here:
https://www.interaction-design.org/literature/article/ux-tools-matter-less-than-you-think 

Check out the demand for UX designers, what employers are looking for and UX designer salaries:
https://uxplanet.org/heres-what-hiring-managers-look-for-in-ux-design-candidates-90a144d21c2e 

Here’s Hired.com’s Mind the Gap report on the UK’s technology skills gap:
https://hired.com/whitepapers/skills-gap-report-download 

UX design is one of the most sought-after skills by employers. Read the report here:
https://www.weforum.org/agenda/2020/09/linkedin-online-elearning-skills-jobs-hiring/ 


This article was originally published on the Interaction Design Foundation, reproduced here with permission and minor edits

The post 10 Reasons To Become A UX Designer in 2022 appeared first on UX Mastery.

]]>
https://uxmastery.com/10-reasons-to-become-a-ux-designer-in-2022/feed/ 0 109877
How to Write Effective Qualitative Interview Questions https://uxmastery.com/how-to-write-effective-qualitative-interview-questions/ https://uxmastery.com/how-to-write-effective-qualitative-interview-questions/#comments Tue, 21 Dec 2021 12:08:53 +0000 https://uxmastery.com/?p=109871 Qualitative interviewing is an effective technique to quickly understand more about a target user group. It is a key skill that any aspiring user researcher should develop. It is important to carefully craft the questions to ensure the sessions run efficiently and get the desired information. This article outlines best practice tips on creating effective […]

The post How to Write Effective Qualitative Interview Questions appeared first on UX Mastery.

]]>
Qualitative interviewing is an effective technique to quickly understand more about a target user group. It is a key skill that any aspiring user researcher should develop. It is important to carefully craft the questions to ensure the sessions run efficiently and get the desired information. This article outlines best practice tips on creating effective session guides, ensuring your questions produce great results.

Don’t Ask Leading Questions

A leading question guides the respondent to a desired answer by implying that there is a correct answer. People tend to provide socially desirable answers, so if you ask a question that guides them, they will likely provide one that they believe you want to hear. Leading questions can be used by people to persuade someone. They should not be used when trying to uncover new information or understand an audience. They reduce the objectivity of the session, and therefore, reduce the reliability of the results.

Example:
Leading: ‘Why would you prefer to use our product?’
Better: ‘What are your thoughts about using our product?

In the leading example, it implies that the respondent prefers the product and is enquiring as to why. The respondent may list a bunch of reasons that they like the product but may leave out crucial information where they believe the product could improve. Asking about their opinions and thoughts will provide them with a platform to discuss the product freely.

Example:
Leading: Would you prefer to use the product to improve efficiencies or to gain an overview?
Better: Why might you use this product?

In this example, the interviewer provides two reasons why someone might use a product. The interviewer may have only considered the two reasons why someone may use the product. Simply asking why they may use the product achieves the same goal, but also allows the respondent to consider other options.

To avoid leading questions, act as if you know nothing of the topic. Note down what you would ask if you have no information at all. Keep the questions simple, neutral and free from any words with connotations or emotions. It is also best to have an independent observer assess the topic, as it is easier for them to have an unbiased opinion on the matter.

Behavioural, Attitudinal

People often hold a belief that does not match with their behaviours. Using a mixture of attitudinal and behavioural questions uncovers what a person does, but also their thoughts about their actions. Attitudinal questions are used to understand their opinions and motivations. Behavioural questions are used to find out how a participant does something. It is best to utilise a mixture.

Example:
Attitudinal: How often should you brush your teeth?
Behavioural: How many times did you brush your teeth last week?

Try to keep all behavioural questions about the user’s past, as future behaviours are influenced by opinions and attitudes. It is best practice to repeat questions from a different angle. Don’t be afraid of users repeating themselves or going over a topic multiple times.

Ask Open-Ended Questions Instead of Closed Questions

Open-ended questions are ones that require more than one word to answer. Closed questions result in either a yes/no situation. Open-ended questions are used to find out people’s goals, motivations and pain points. They provide an opportunity for the participant to speak freely on the topic.

Example:
Yes/No: Do you like coffee?
Open: What are your thoughts on coffee?

Closed questions should be avoided unless you want to either clarify to gain more context to the user’s situation. Yes/No questions close down conversations and can be considered as quantitative. The following examples are both fine to use in an interview, as they will put other details into perspective.

Context: Do you drink coffee?
Clarify: You mentioned you drink coffee, correct?

When creating your questionnaire, try and stick with ‘how’, ‘why’, ‘what’, ‘when’ and ‘where’ questions.

Don’t Use Double-Barreled Questions

Sometimes interviewers get excited and want to ask multiple things at once. Double-barreled questions touch on more than one topic. This can be overwhelming to answer, and respondents may either try to answer both at once or answer only one part of the question. If you want to ask something on multiple topics, it is best to split them into two different questions.

Example:
Double-barreled: What do you like about coffee and new coffee products?
Better: What do you like about coffee products?

It is normal in casual conversation to ask questions in such a manner. Interviewing is best when the questions are short and to the point, focusing on one topic.

Differentiate Between Quantitative and Qualitative Questions

Quantitative and qualitative questions both have their own strengths and weaknesses. Quantitative questions are typically reserved for surveys but can be used in interviewing to add some context and allow the interviewer to ask more follow-up questions. They mostly uncover ‘who’ and ‘what’. Qualitative questions will provide detailed information on the topic of interest, uncovering the ‘why’ and ‘how’.

Examples of quantitative questions:

  • Numerical answers: How many coffees do you drink a day?
  • Preferences: What type of coffee drink do you prefer?
  • Single word answers: What brand of coffee do you drink?

It is not immediately obvious and clear-cut the quantitative nature of these questions. You can tell through the low complexity of data gathered. If you ask these questions to participants, you will get a straightforward answer. However, the issue is that the responses are not statistically valid, and require further investigation. You can better use your time in an in-depth one on one session asking qualitative questions such as:

Examples of qualitative questions:

  • Recount your morning routine.
  • Why do you prefer one brand over another?
  • Why do you drink coffee everyday?

Shifting to why and how people do things, outlining goals, motivations, pain points and delights gives a much more in-depth perspective. These insights can be validated later through other techniques, but interviewing is the quickest and easiest way to gather them.

Wrap Up

For qualitative interviewing, there are few clear best practices. Each interviewer has their own way of gathering information and forming questions. The tips above are there to guide you but are not definitive rules that one cannot break. I hope these help to elevate your interviewing process and gather better insights.

The post How to Write Effective Qualitative Interview Questions appeared first on UX Mastery.

]]>
https://uxmastery.com/how-to-write-effective-qualitative-interview-questions/feed/ 1 109871
Wireframes Are Bad… Don’t Use Them https://uxmastery.com/wireframes-are-bad-dont-use-them/ https://uxmastery.com/wireframes-are-bad-dont-use-them/#respond Thu, 02 Dec 2021 02:00:00 +0000 https://uxmastery.com/?p=109839 I failed in using wireframes; that’s why I say that they are bad. I know so many beginners and intermediate UX designers use wireframes in the early phases of the design process, especially in research and usability testing. I used to use them this way, but let me tell you why I don’t use them […]

The post Wireframes Are Bad… Don’t Use Them appeared first on UX Mastery.

]]>
I failed in using wireframes; that’s why I say that they are bad. I know so many beginners and intermediate UX designers use wireframes in the early phases of the design process, especially in research and usability testing. I used to use them this way, but let me tell you why I don’t use them in that way anymore.

What Is a Wireframe?

Before digging deep into this subject, let me try to simplify what a wireframe is. A wireframe is a skeleton for the digital product design. You can imagine it to be the blueprint for any product. It consists of lines and shapes, and each represents some element/hierarchy/structure.

The main three elements of a wireframe are:

1. The Line

This element could represent a frame, a border, or a separator.

2. The Image

This element could represent either an image, or an icon, or any graphics.

3. The Solid

This element represents either a block or a line of text.

Using all these elements in a design can produce something like this:

Now remove these hints from the design and give them to a user asking them to use it. Can you imagine that?

Why Are Wireframes Bad?

I remember one time I was working on a mobile app product for weekly/monthly healthy food ordering subscriptions. The app allowed a user to subscribe and get healthy meals delivered daily. It allowed the user to choose the daily meals and the delivery time. And it also provided health tips and some workout exercises to keep living a healthy life. Here’s a concept that we tried testing out.

Wireframe to evaluate options for placement of icons. Option 1 was at the top left, and option 2 was at the bottom center.

When I tested this concept as a wireframe with the first group of users, I asked each one this question “Suppose your daily meals will be delivered daily at 2 PM and you want to change this time to be at 3 PM, how can you do this?”

I was shocked by the result. 4 out of 5 users tapped on icon no.2, which was supposed to be for the health tips, while just one user tapped on icon no. 1, which was for the menu and settings. This meant that 80% of users expected to change delivery times using the middle button at the bottom. However, I didn’t rely on that result.

To make this clear enough, I created a simple test and iterated the same scenario after applying the UI and providing a finished prototype to another group of users. This time, 5 out of 5 users didn’t like the changing delivery time feature to be placed in position no. 2. The common reason was that they wouldn’t need to perform that daily, and instead, they might need the health tips to be placed at this position since they might need to use this feature more than once a day.


Wireframes come in two forms, digital and paper sketches. The main reason why wireframes were invented was that they were cheap and fast to create, but this doesn’t come free. There’s a hidden cost to that.

1. Cost of Educating

Although wireframes are fast to create and they seem to be a time-saver, they take up too much time in educating, especially in user testing. The time you save in producing them, you pay the double in educating users about them.

2. Misunderstood

What’s the difference between these two elements? Are they both images? Are they both icons? Are they clickable? What should they represent? Too many questions to process in the user’s head may lead to either making wrong decisions or driving them away from the central value.

3. Miss the Whole Experience

Making the user assume that a specific element may serve a particular purpose will not lead to correct research results. When you test with many users, the findings will not be accurate because each one will interpret the shapes in their own way, which will lead you to correct their understanding and guide them back to the right path, which is wrong in research and testing. You should not lead the user.

Feeling and living the whole experience is way better. Making the user live within a semi-real product, feel the interactions, sense the animations, and deal with colors and typography will lead to better and more accurate results.

So, Are Wireframes Useless?

Wireframes are plain, too neutral to be usable by actual users, but this doesn’t mean they are useless. Here is how and when to use wireframes:

1. Guiding You in Your Process.

Design wireframes for yourself to make it easy for you to structure the product you are designing. By creating wireframes, you pour all the imaginations in your head on a canvas or paper faster, organize your thoughts, clearly see where you are heading, and most importantly, iterate more quickly. Know where to place the right elements in the right place, either here or there.

2. Brainstorming and Generating Ideas With Your Peers.

Product owners, UI designers, UX designers, product managers, and developers—all of them can understand wireframes well; they may even add to it, generate ideas, and make a clear direction for the best structure.

3. Flow Design

Because wireframes are plain, you can use them as flow demonstrations with techies and developers. In this way, it will work better than the traditional user flow’s symbols and shapes.

4. Business Owners (Carefully)

Business owners are like users: they can easily misunderstand the wireframe and are time-consuming to educate. But the difference here is that the business owner is just one person, the time cost won’t be as much as educating many users, and in the end, they’re the business owner—you have to keep them involved and in the loop throughout the design process.

Conclusion

Actual users are ordinary human beings. They are not as deep into the technology or the product as you. You must do your best to talk to them in their language, not yours, so it’s better to do your research and usability testing using realistic prototypes instead of wireframes.

Lastly, creating and using wireframes is beneficial if created for people like you within your production environment.

The post Wireframes Are Bad… Don’t Use Them appeared first on UX Mastery.

]]>
https://uxmastery.com/wireframes-are-bad-dont-use-them/feed/ 0 109839
Black Friday 2021: Deep Discounts on UX Education https://uxmastery.com/black-friday-2021-deep-discounts-on-ux-education/ https://uxmastery.com/black-friday-2021-deep-discounts-on-ux-education/#respond Wed, 24 Nov 2021 10:00:00 +0000 https://uxmastery.com/?p=109841 In their biggest Black Friday offer yet, the Interaction Design Foundation is giving a whopping $200 discount on their UX Bootcamps in addition to a 25% discount on their annual membership.

The post Black Friday 2021: Deep Discounts on UX Education appeared first on UX Mastery.

]]>
If there is something called revenge shopping, then this year’s Black Friday may just fit the description! For UX designers, too, this is a golden opportunity to save money on devices, software, education, and hey, even some cool accessories (hello, Moleskine notebooks).

In today’s article, we’re looking at the mouthwatering offer our friends at the Interaction Design Foundation (IxDF) are offering: a $200 discount on UX Bootcamps and a 25% discount on their annual membership.

The IxDF boasts an impressive list of courses by industry leaders including Don Norman, Alan Dix, Frank Spillers and William Hudson. We’ve reviewed one of their courses in the past. Check it out here. Unlike most courses that you need to pay for individually, the IxDF operates on a subscription model—offering all their courses to members at no additional cost. An IxDF membership includes:

  • Full access to all 35 courses plus every new course.
  • 90% discount on live and on-demand Master Class webinars (over $500 savings annually).
  • Exclusive discounts on the best UI/UX design tools such as Balsamiq, ProtoPie and FluidUI (up to $690 in savings!).
  • A network of over 117,000 UX design professionals spread 450+ local groups across 99 countries.

Apart from courses, the IxDF also offers cohort-based UX Bootcamps. These mentor-led specialized Bootcamps are entirely remote, part-time, and available at different time zones so that you get individual mentorship without taking a break from your regular work or university.

Here’s a closer at what you get:

  1. 25% discount on new and continually updated courses such as these:
    1. Data-Driven Design: Quantitative Research for UX
    2. Design for the 21st Century with Don Norman
    3. Journey Mapping
    4. Visual Design: The Ultimate Guide
  2. Practical advice and the chance to get answers to your questions during live Master Class webinars with industry leaders and experts, including Don Norman, Susan Weinschenk, Frank Spillers, Morgane Peng and Mike Rohde.
  3. You can also find and connect with your peers locally to learn together and even meet potential employers and clients.

What makes this offer sweeter is that a portion of the proceeds from this year’s Black Friday promotion will be set aside to sponsor memberships for those who cannot afford a quality UX design education.

If you’re not yet a member, you can sign up using this link to get 25% off your first-year membership.

You can also get $200 off on any of the upcoming cohorts of IxDF Bootcamps (UX Fundamentals, User Research, UI Design, UX Portfolio and Careers)—even if you’re already a member!

To get a feel for what an IxDF Bootcamp is like here is one student’s experience of a recently concluded Bootcamp cohort:

Check out all UX Bootcamps here.

Happy learning!

The post Black Friday 2021: Deep Discounts on UX Education appeared first on UX Mastery.

]]>
https://uxmastery.com/black-friday-2021-deep-discounts-on-ux-education/feed/ 0 109841
Cross-Cultural Design: Designing for Global Audiences https://uxmastery.com/cross-cultural-design-designing-for-global-audiences/ https://uxmastery.com/cross-cultural-design-designing-for-global-audiences/#comments Thu, 07 Oct 2021 10:41:37 +0000 https://uxmastery.com/?p=109805 Since being launched in 2009 as a luxury car rental, Uber has redefined on-demand mobility and now operates in over 10,000 cities worldwide. Netflix, conceived in 1997 as a rent-by-mail DVD service, now streams in over 190 countries. And Airbnb, a bed and breakfast service that started in 2007, is now the largest accommodation provider […]

The post Cross-Cultural Design: Designing for Global Audiences appeared first on UX Mastery.

]]>
Since being launched in 2009 as a luxury car rental, Uber has redefined on-demand mobility and now operates in over 10,000 cities worldwide. Netflix, conceived in 1997 as a rent-by-mail DVD service, now streams in over 190 countries. And Airbnb, a bed and breakfast service that started in 2007, is now the largest accommodation provider with a global presence in over 220 countries.

In an economy where the average company finds it tough to not only grow but also sustain, it is worth considering how these brands have observed meteoric rise just within decades.

Besides good business sense and the funding to support expansion, it can be argued that all these brands had a strong focus on localization. For instance, Uber offers localization of services – UberCOPTER in the French Riviera, UberBOAT in Istanbul, and UberAUTO in India. It also launched UberENGLISH, a service designed to book drivers with English language familiarity in non-English speaking nations. Netflix offers localization of content – an extensive library of regional and country-specific content and high-quality dubbed versions and subtitles for international audiences. Airbnb realized early on that log-in preferences vary by region; today, it supports log-in via Google account, Facebook account, and email in the United States, while it provides Weibo and WeChat log-in in China. Yet, their localization strategies go deeper, reflecting a deep cultural understanding and sensitivity across their messaging, branding, and even advertisements.

Such localization that addresses the unique preferences of regional users is perhaps the ultimate hallmark of a global brand.

Why Should You Design for Different Cultures?


The way that certain messages, colors, and images are perceived by a cultural group may differ from the perceptions of another. So, as a brand, how you are viewed in a community will depend on your understanding of their culture and how you mold your messaging to be culture-specific. Communities can also demonstrate unique preferences for both tangible and intangible elements of design that are specific to their socio-cultural and religious identities, histories, and even political leanings. Many of these preferences may exist at a subconscious level, often as a product of unique mental models, decision-making processes, education, or even technological competence. Only by understanding cultures and the way they influence mental programming can brands create a relationship of trust and successfully compete against indigenous brands.

Brands that did not understand or failed to adapt to local preferences have historically struggled to sustain. For instance, eBay, which saw enormous success in the US – struggled to get a foothold in the Chinese market. It is suggested that eBay may have failed to support swift guanxi among Chinese users through instant messaging or other technologies, therefore preventing buyers from interacting with sellers. Such buyer-seller interactions, which are considered crucial for making purchasing decisions, were never encouraged, therefore leading to an erosion of trust.

When Should You Adapt Your Designs for Different Cultures?


Not every business needs to adapt its products for a cross-cultural audience. You may have limited cultural disparity between your target and local audiences, in which case, you do not require cross-cultural adaptation. Or, there may exist cultural differences, but these may not be large enough to warrant localization. In this case, you may offer language options in the product interface and website or provide instruction/product manuals in different languages.

For example, the Maybelline website for South Korea has similar visuals and products to its US counterpart but offers translation in Korean.

If, however, one (or more) of these target groups are a sizeable percentage of your overall audience, you need to offer a localized, culturally-specific product(s) and interface(s). It means that you should translate your content, change currencies, offer preferred sign-in methods, and adapt visuals and metaphors so that the product feels locally produced.

For instance, the IKEA websites for Turkey and South Korea differ in their product showcase, languages, and imageries.

Understanding Cross-Cultural Differences


To adapt your designs for a cultural group, you must first understand the cultural differences between your local and target audience. Understanding these differences would help you to determine to what degree your designs require adaptation.

Here are a few models that underline the differences among cultures.

1. Hofstede’s Cultural-Dimensions Theory

Perhaps one of the most comprehensive frameworks for assessing cultural differences was proposed by Dutch social psychologist Geert Hofstede. This framework defines six dimensions that outline a culture’s mental programming.

  • Power distance index: The index quantifies how social inequality is perceived and accepted by those on the lower end of a power spectrum. According to Hofstede, high power distance cultures accept hierarchical orders and authority whereas, low power distance cultures strive to equalize power imbalances and accept authority based on true expertise.
  • Individualism vs. Collectivism: This dimension reflects the degree to which a society thinks from an “I” or “we” mentality. Individualist cultures are loosely-knit groups where individuals act in their interests and make their own decisions. In contrast, collectivist cultures are tight-knit groups that act in the interests of the collective and make decisions based on the opinions of others.
  • Masculinity vs. Femininity: Masculine societies tend to demonstrate a preference for achievement, material success, and assertiveness. Alternatively, feminine cultures prioritize cooperation and collaboration, avoids conflict, and prefer a high quality of life.
  • Uncertainty Avoidance: This dimension reflects the degree to which a society accepts new ideas or unorthodox behavior. Cultures with high uncertainty avoidance are resistant to change and prefer familiarity over unfamiliarity and practice over principles. Whereas in cultures with low uncertainty avoidance, individuals take more risks and are more willing to try something new.
  • Long-term vs. Short-term Normative Orientation: This dimension measures the ease with which societies adopt change. Cultures with long-term orientation are pragmatic in their approach. They believe that traditions can be adapted as per context and time, and they take decisions for the long term. On the other hand, short-term orientation cultures live in the present, maintain social codes and traditions, and do not worry about the future.
  • Indulgence vs. Restraint: This dimension measures the degree to which individuals curb their impulses and wants. While indulgent cultures are more willing to accept the uninhibited satisfaction of human needs, restrained cultures set diktats that prohibit the gratification of needs.

To see how different cultures differ on the six dimensions, you can use the country comparison tool. A comparison between the two nations – Austria and Vietnam – on Hofstede’s scale is shown below.

Image Source: Hofstede Insights

If your domestic audience is based in Austria, and you want to provide localized content for the target audience in Vietnam, then, based on Hofstede’s model of cultural dimensions, you must adapt your interface for higher power distance, collectivism, femininity, low uncertainty avoidance, and restraint. The reverse is true if your domestic audience is based in Vietnam.

2. Hall’s Cultural Context Model

Proposed by the American anthropologist Edward T. Hall, the cultural context model examines the relative importance of context in communication for different cultural groups. Low context cultures prefer information that is direct, explicit, and without ambiguity. This is because such cultures are more individualistic, and there is little expectation to understand each other’s histories and experiences. In contrast, high context cultures are collectivist societies with a preference for community harmony over individual achievement. In such cultures, communication is more subtle and context-driven, and emphasis is placed on the understanding of non-verbal relational cues.

While there are several other models for understanding cultural differences, it is important to understand that cultural models only suggest areas of inquiry to understand the current differences among populations. Cultural characteristics are fluid, and therefore the observations made in the past will hardly be relevant to modern audiences. So, instead of making stereotypical conclusions based on primitive observations, it is advisable to engage in active user profiling and research.

Adapting Designs Based on Cultural Differences


Assuming that the understanding of cultural differences is current and based on research, it is now possible to adapt designs based on an understanding of how communication, colors, symbols, and designs will be perceived by the target audience. To do this, we will compare two university websites, one from Austria and the other from Vietnam, and observe how cultural differences are manifest through design.

1. High Power Distance vs. Low Power Distance

For high power distance cultures, interfaces should be designed for easy navigation and quick information access. Applying religious and nationalistic themes, demonstrating expertise, and using figures of social or national importance can help engage such audiences.

For instance, on the official website for Vietnam National University, the university ranking in the World University Rankings is given precedence over everything else. It is aimed to relay a sense of authority and earn the visitor’s trust.

For low power distance cultures, informal organizational structures with visual elements that are universal or of popular appeal are favored. Communication must be informal but direct. For example, on the official website for the University of Vienna, the images show students and their stories upfront, rather than relying on reputation or University rankings. It is noteworthy that Vietnam has a power distance of 70 against Austria’s 11 on Hofstede’s scale.

2. Individualism vs. Collectivism

When designing for individualistic cultures, information on how the product or service benefits individuals or helps them succeed must be delivered. Themes signifying achievement, youth, vitality, and materialism can be utilized.

The University of Vienna site has a dedicated blog called “Humans of University of Vienna,” focused on student stories and achievements. Almost all these stories focus on the individual rather than the team.

For collectivist societies, information that reflects how the product or service benefits the cultural group must be delivered. Themes surrounding community harmony and peace and visuals focused on history and tradition work well with such audiences. It is best to provide feedback elements, such as social media sharing options, reviews, or “popular” categories, to help them with their decision-making.

There is a strong focus on team achievements throughout the website for Vietnam National University, as shown in the image below.

3. Masculinity vs. Femininity

Interface designs for masculine societies should be of high functionality, allowing exploration and easy control while driving the quick realization of goals. The content must make a clear distinction between age groups and genders. Incentives and reward systems can be employed to grab interest.

Austria scores higher on the masculinity index than Vietnam. Note how the University content is categorized so that visitors get what they are looking for without exploring the whole website.

Interfaces designed for feminine cultures need to be engaging, offer positive experiences through visual aesthetics, and support collaboration and exchange of ideas. It is vital that such interfaces are gender-neutral and designed to suggest a blurring of gender roles.

The Vietnam National University website allows visitors to leave comments and feedback across different pages, as in the image below. This was not observed for the University of Vienna website.

4. High Uncertainty Avoidance vs. Low Uncertainty Avoidance

Interfaces aimed at high uncertainty avoidant cultures must look official and professional. They must offer simple navigation, prevent users from getting lost, and avoid user errors. Such interfaces must provide limited menu options and provide information in a simple structured way without ambiguity. Content must be language and culture-specific to drive familiarity, while visuals and colors that reinforce the messaging must be applied.

Austria scores higher on uncertainty avoidance compared to Vietnam. The Austrian website offers an organized footer with helpful links and a sitemap to prevent visitors from getting lost. On clicking, the different sections are further segregated to provide visitors with the information they seek.

Interfaces for low uncertainty avoidant audiences may be complex, offer several menu options, and support exploration. Designs and visuals may be more cutting-edge, and images and colors that drive meaning and interpretation may be applied.

The footer in the Vietnam National University website provides the main categories. The information in each section is less organized than in the University of Vienna example.

5. Long-Term vs. Short-Term Orientation

The interface for an audience with long-term orientation must support the presentation of relevant and detailed information with clear benefits and in a way that is convincing but unhurried. Content and visuals must serve the information sought. UI elements, such as wishlists and social media sharing options must be provided so that users can revisit the site.

For short-term orientation cultures, design the UX for a quick achievement of goals. Use shortcuts and clear CTAs to take immediate action. Avoid complex navigation and browsing and provide only relevant and useful images and links.

Austria and Vietnam are almost similar in their normative orientation scale. Both host prominent social media sharing options. The University of Vienna website also contains quick links and supports quick browsing, as evident in the earlier examples.

6. Indulgence vs. Restraint

When designing for an indulgent audience, you must offer more options and categories to choose from and purchase. Showing related items and offers and providing freebies are other ways to cater to such an audience.

The images and content in the “Life at Uni” and “Humans of University of Vienna” convey a sense of casualness and fun that signify the autonomy of students.

For a restrained audience, it is advisable to limit the number of options and show ways to save money through discounts. Further, information on corporate social responsibility helps to engage such audiences.

Images and the tone and presentation of content on the Vietnam National University website conveyed seriousness and reserve. There was limited focus on the inner lives of students on campus.

7. High-Context vs. Low-Context

Interfaces for high-context cultures may have complex architectures with multiple sidebars and menus that encourage exploration. Heavy use of images and banners is also typical of such interfaces. Images that elicit emotions or highlight collectivist principles, such as featuring the use of products by other individuals, are used. Communication is polite and more nuanced.

Since Vietnam scores higher than Austria in collectivism, we can assume that Vietnam is a high-context culture. The news page on the Vietnam National University website is prolific with images and banners. There is also an emphasis on social activities, community building, scholarships, and trade union news.

The principles of individualistic cultures guide the design of low-context culture interfaces. Navigation is simple with limited menu and sidebar options, and images and links are fewer. Communication is explicit and precise, and images that signify personal accomplishment are used.

Since Austria scores high on individualism relative to Vietnam, it should have a low-context culture. The news page for the University of Vienna website is far simpler than the Vietnamese website, with fewer banners, images, and categories. There is a greater focus on scientific content than community news.

Understanding Limitations


While cultural models provide a framework for understanding cultures and making design adaptations, these are largely inadequate in addressing the cultural nuances of individuals and subgroups. This is because the boundaries of culture are impossible to confine within geographical or national borders. Many cultures and subcultures may exist in the same region with marked differences making such models reflective of averages at best—further, culture changes with time and over generations. The impact of factors outside the individual and the community, such as education, the use of technology, the political and legal frameworks, or interaction with other cultural groups, are also important parameters that would define the relationship of your target audience with technology or their perception of usability.

However, these models can offer psychological insights to inform the design process. The ideal strategy, therefore, is to apply the understanding of cultural differences as broad principles but drive cross-cultural UX with a true understanding of cultures derived through in-depth research and cultural immersion.

The Essential Design Elements That You Must Get Right

Charles Eames said,

“The details are not the details. They make the design.”

Nowhere is this truer than in cross-cultural design, for true localization lies in the details.

There are certain elements of design that you must nail to get localization right.

  1. You must get geopolitical details right, especially when using maps with disputed territories. In many religions, certain foods may be prohibited at specific times or around the year, while in others, norms around dressing may exist. The messaging and imageries used must be sensitive to all such cultural, religious, social, or geopolitical sentiments.
  2. Different cultures interpret colors differently and the significance associated with colors in one culture may differ significantly from another. To ensure effective localization, ensure that you adapt colors to suit the cultural sensibilities of your target audience.
  3. Like colors, symbols are also subject to culture-specific interpretations. When adapting your design for a cross-cultural audience, ensure that the symbols used are familiar and drives the right meaning.
  4. On translation, text lengths may change. To ensure minimal changes to the UI after translation, ensure ample padding for your design elements. Further, languages can have both horizontal and vertical alignment. While most languages with horizontal alignment read from left to right, others like Arabic and Persian read from right to left. For all such orientations, the correct placement of text, images, and CTAs should be ensured.
  5. Sometimes perfection lies in the detail. For instance, when designing a form, allow users the flexibility to insert special characters, or a wider space to type a longer name. You should also be mindful of the different formats for date and phone numbers, the metric systems used, and currency and conversions.

The Takeaway


In today’s globalized world, for a business to make its presence felt outside the home turf, it must form a relationship of trust with its audience. Design can be a powerful tool to build this trust, but it must be guided by an understanding of the audience and their cultural identities. Cultural models help suggest the mental maps of the target cultural group based on an analysis of cultural differences. However, culture models must only be used as principles to guide audience research, for it takes much more to design nuanced and inclusive UX that is not only respectful and empathetic but also usable. The latter can only be achieved with in-depth UX research and cultural immersion.

The post Cross-Cultural Design: Designing for Global Audiences appeared first on UX Mastery.

]]>
https://uxmastery.com/cross-cultural-design-designing-for-global-audiences/feed/ 3 109805
How to Make Developers Love You as a Designer https://uxmastery.com/how-to-make-developers-love-you-as-a-designer/ https://uxmastery.com/how-to-make-developers-love-you-as-a-designer/#respond Thu, 30 Sep 2021 03:00:00 +0000 https://uxmastery.com/?p=109792 Handing off designs can be pretty stressful for designers since a small mistake in this process can result in hours of reworking for developers. This is true for companies and products of all kinds and sizes. A seamless handoff will significantly minimize guesswork and ensure a frictionless development process. However, handoffs are full of potential […]

The post How to Make Developers Love You as a Designer appeared first on UX Mastery.

]]>
Handing off designs can be pretty stressful for designers since a small mistake in this process can result in hours of reworking for developers. This is true for companies and products of all kinds and sizes. A seamless handoff will significantly minimize guesswork and ensure a frictionless development process.

However, handoffs are full of potential pitfalls that even the most experienced teams are prone to. In today’s article, we’ll take a closer look at the most important things to take care of when handing your design off. 

Let’s dive right in, shall we?

What Is a Design Handoff?

The design handoff is a point in the product development process where developers implement the finished design. In order for a handoff to be successful, a good designer-developer collaboration is vital.

But more often than not, this phase doesn’t go as smoothly as it should. Part of the problem is the designer’s perception of the process—many of us tend to think that this is where we reach the finish line, rest on our laurels, and let the developers “do their thing.”This perspective is conducive to a siloed and inefficient collaboration between the two tribes. So, let’s take a look at the things we should do to ensure a more productive designer-developer interaction.

Use a Library

Establishing a sense of continuity in your designs is imperative for a successful handoff. Fragmented design hand-off files and components here in there are a recipe for major headaches and confusion. 

As opposed to sharing individual assets directly with the developers or attaching files to the user stories/tickets/Jira or similar products, have them in a shared library or folder and use the links inside tickets. This will make finding assets significantly easier for developers.

Screenshot of a pattern library
© Adam Fard, Source

An asset library, which is a part of the design system, should be the single source of reference. In Figma, for example, you can copy a link to a specific asset within the library. This is the link you should share in tickets. Not to mention there’s a plethora of plugins or native integrations among Figma, Sketch, and Adobe Products with project management tools like Jira.

Screenshot of Figma's Jira integration
© Figma, Source

Involve Developers Early

A common issue among teams is the assumption that designers should just drop their designs off to developers and let them figure the rest of it out. A better way of approaching this would be to involve developers as early as possible to provide them with insight into the various behaviors and states you’re working on. Otherwise, you might design something that’s not feasible to code, which is synonymous with wasting time.

Here are a few recommendations to ensure a smoother and more seamless handoff:

  • If possible, include developers in calls with clients and stakeholders if they’ll be able to gather some essential insight about the product; 
  • Communicate with developers to learn how design elements would end up being transferred to the end-product;
  • Consult with developers during early prototyping to avoid any potential code-related issues later on; 

However, sometimes, if developers have a pre-established framework, it’s best to give them the freedom they need and take a look at the implemented version first, rather than insisting on your particular design decisions that may be complicated to implement.

It should also be noted that involving developers too much can also be an issue. In my experience, you can easily overwhelm developers at the ideation stage, since there are a lot of different concepts and changes, all of which might have their own technical caveats. 

That said, you should seek to strike a balance between keeping developers engaged and overwhelming them with concepts. 

Static vs. Dynamic Handoffs

There’s a case for both static and dynamic handoffs. The former implies that you’ll present your design ideas via basic illustrations. On the other hand, the latter comes with more specific requirements for interactions and overall user experience. 

Making the right decision in this regard is relatively simple—make sure to have an open and transparent interaction with the developer team.

Static handoffs are useful when the developers aren’t versed in Figma, Zeplin, or similar products. As a result, they might not intuit what information or specs they need to grab. What static handoffs provide is the ability to explicitly highlight essential information such as margins, paddings, font sizes, etc.

That said, static handoffs sometimes create more problems than they solve. The primary issue is the fact that this type of handoff requires a lot more time, since you have to do manually what Figma, for example, does for you automatically, which is marking distances among elements. Another challenge that is otherwise avoidable is the hassle with marking versions and changes, introducing layers of taxonomy, etc. As such, before committing to a static handoff, make sure the pros outweigh the cons.

Screenshot of a static handoff
An example of a static hand-off. Note how the distances among elements are explicitly highlighted.

When using dynamic handoffs, date the iterations and don’t change already shared designs, at least not without explicit communication with developers and a project manager or product owner. It’s very tempting to just update the same shared design and file, but that leads to confusion, especially when those links and files are in a user story. You, as a designer, can’t be certain that developers know what’s been changed and where. For all you know, they might be midway into the implementation.

Screenshot of Figma showing specifications of different elements
An example of a dynamic handoff in Figma. Note how you have to select an element to get information about its position.

SVG Is King

SVG is a vital format for defining vector-based graphics. It’s very handy when looking to increase development speed when working on projects that deal with a fair share of animation and design. Furthermore, SVG graphics use up less space, which is very useful in the long run. 

Here are a few essential benefits that should motivate you to choose SVG over any other format:

  • When it comes to handoffs, size matters. Since SVG is pretty much XML code, files in this format are extremely lightweight. There was even a report suggesting that you can save up to 80% of bandwidth by switching from PNG to SVG. As a result, your products will load faster, which is conducive to a satisfying experience;
  • SVG files can scale with no distortion. Respectively, these files can be used for anything from watches to giant outdoor banners without compromising quality during the resolution scaling;
  • Given that these files have the styling information incorporated, this allows developers to create pixel-perfect prototypes without needing a stylesheet;
  • Lastly, because an SVG is basically code, they’re fairly easy to edit or animate for developers, which eliminates the need for a designer to create multiple versions or states of the same element.

Avoid Doing the Work Twice

Creating a sense of continuity and consistency in your design library will benefit both you and the developer team substantially. Products like Storybooks, Figma, and Sketch are valuable tools that allow achieving this. What these products do is enable us to break the barriers between designers and developers by linking code to design elements.

Storybook, for instance, allows developers to access all the components in an organized manner. As a result, they’ll be able to use, share, and test all the elements in your design. Taking the time to merge your design with code via storybooks will save both you and the developers a lot of time.

© Storybook, Source

The same goes for Figma, Sketch, and Adobe XD. All of these tools allow creating a design system, which, in practical terms, is either a separate page or a separate file with symbols (in Sketch) or components (in Figma). What components and symbols do is allow you to make global changes in all instances of a certain element. Say, you want to make all calls to actions green instead of blue—it’s as simple as a few clicks.

Voog's Design System
© Voog, Source

Conclusion

Great products rely on a great handoff. While this may often seem like a very technical process that enters waters that we don’t necessarily understand (front-end development), it’s essential that we take the time to learn how to do it. Furthermore, some of the facets of this process have nothing to do with code. They revolve around communication and productive collaboration.

The post How to Make Developers Love You as a Designer appeared first on UX Mastery.

]]>
https://uxmastery.com/how-to-make-developers-love-you-as-a-designer/feed/ 0 109792
Key Principles for Creating Microinteractions for High-fidelity UX design https://uxmastery.com/key-principles-for-creating-microinteractions-for-high-fidelity-ux-design/ https://uxmastery.com/key-principles-for-creating-microinteractions-for-high-fidelity-ux-design/#respond Thu, 23 Sep 2021 11:29:53 +0000 https://uxmastery.com/?p=109783 In the stiff competitive digital space shaping a successful brand identity is never an easy task. A brand in the digital space is primarily loved for the user experience it delivers and how it satisfies its target audience’s desires. The user experience (UX) design plays a crucial role in engaging and retaining customers. Creating a […]

The post Key Principles for Creating Microinteractions for High-fidelity UX design appeared first on UX Mastery.

]]>
In the stiff competitive digital space shaping a successful brand identity is never an easy task. A brand in the digital space is primarily loved for the user experience it delivers and how it satisfies its target audience’s desires. The user experience (UX) design plays a crucial role in engaging and retaining customers.

Creating a smooth and frictionless experience that requires little effort to get things done is the key to success for apps and online platforms. In shaping this UX design, even small and often overlooked design attributes matter a lot. The little animation that shows when something is loading or the small icons to express your reactions to content or similar interactive elements can be small. Still, together, they make a massive impact on the user experience (UX) design.

When you develop your website from scratch, you need to focus on every tiny detail to ensure ease of use and smooth user interactions. Microinteractions are one of the small but highly impactful design decisions. 

Let us see how micro-interactions work and how they can optimise the UX design. 

What Are Microinteractions?

Source

Small design elements that improve user experience with natural interactions are called microinteractions. The “likes” and reaction symbols we tap on to express our emotion for content is the perfect example of a microinteraction. The little fingerprint button that appears on the screen to put your thumb on is another example. 

These small interactive design elements help connect the user interface with the user experience of a website or app. They can be found everywhere, constantly delivering meaningful gestures and interactive ways to help users engage with a digital platform. 

Why Is Optimising Microinteractions So Important?

When an increasing number of business brands are trying to establish strong connections with their customers, these small design elements in an interactive manner can positively improve their experience and help them feel at ease. 

They are so subtle and non-descript in appearance that users are often not able to recall them particularly. But they work like small bridges to make transitions from one screen to the other smooth and seamless. Today’s digital space is unthinkable without these microinteractions. 

No wonder every app or website now focuses on effective ways to improve and enhance microinteractions for delivering a superior user experience. Yes, the dull buttons and screen animation referring to specific actions can be enhanced to make users feel more at ease, most often without their knowledge.

Some of the key benefits of improving microinteractions are:

  • Helping users engage with a product in a more intuitive and frictionless manner.
  • Providing users instant feedback corresponding to all the actions undertaken by them.
  • Improving user engagement through delight.
  • Providing users more sense of control and autonomy
  • Offering a detailed visualisation of background operations to help them take corrective actions. 

How Is Microinteraction Constructed? What Are the Key Parts? 

Microinteractions consist of four different parts as Triggers, Rules, Feedback and Loops and Modes.

  • Triggers are the particular contexts for initiating a microinteraction. Now they can be initiated by the users or the systems. By detecting certain contextual clues, users can initiate an action, or the system can decide to initiate an action based on a set of qualifications. 
  • The Rules determine the things that take place following the triggering of microinteraction.
  • Feedback is the part to allow people to get an idea of what’s happening in the background of a microinteraction. All the on-screen visuals or sounds that make users know about the undergoing microinteraction is called feedback.
  • Loops and Modes are the conditional rules that determine how microinteractions will work in a changed condition. 

Most Time-Tested Principles to Make Use of Microinteractions

Over the years, microinteractions are have been utilised by digital apps for helping users experience a smooth transition from one activity to the other. These small design elements over time evolved and accommodated more effective ways to engage users. Some principles of microinteraction design stood out as most effective. Let’s have a look at them. 

Prioritising User Satisfaction 

The principal aim of any design is to put users at ease and make them easily engaged. The same principle should be followed for microinteraction design as well. It is not just the smart look and feel that matters, the more important is how the microinteraction ensures enhanced ease of use. This is why it is essential to put every microinteraction under A/B testing

Design It Simple

Microinteractions are subtle, and they don’t attract user attention. They remain inconspicuous while subtly enhancing the ease of use for the audience. This is why you should design them simple and do away with all complications.

Let It Not Distract Attention From the Content

Source

Just as good typefaces enhance our readability while not grabbing any particular attention to the font type and size, microinteractions in UX design help users with optimum ease of use while not driving any attention to these interactive design elements. Any microinteraction that distracts user attention from the content undermines this principle.

Give Utmost Priority to Relevance

Any microinteraction which is not fully functional is not necessary. Just ask yourself how much relevant the microinteraction is for optimising the ease of use. Don’t incorporate microinteractions just for the sake of design. Microinteractions are functional design elements and not ornamental ones. 

Balance Familiarity and Innovation

Since most users are familiar with different microinteractions, you can easily achieve the desired results by incorporating them into your app. But there is still room for innovative ways to tweak such interactions and make users feel delighted with them.

Source

The way Twitter uses microinteractions is an excellent example of innovative tweaks in microinteractions. But in all circumstances, you need to keep your focus fixed on optimising the ease of use more than anything else.

Testing Small Animations

Despite appearing small, subtle and insignificant, microinteractions have a far-reaching impact on any digital interface. If you incorporate a new microinteraction in your web interface, it can instantly impact the user experience. Sometimes, new microinteractions can only add to the confusion of your audience.

As with every design decision, test these small design elements. Test the small animations and make sure they give users the right feel as you have intended. Create a prototype of the microinteraction and test them thoroughly to ensure effective output. Remember, the users will not comment on these small animations; they only enhance the overall ease of use.

Microinteractions Should Be Devoid of Cognitive Load

Source

Microinteractions focus on a single and particular action or a specific task, and they use just one animated character to create the visual feedback. So, additional graphic elements and more animated characters will only cause unnecessary cognitive load and distractions, negatively affecting the effectiveness of the microinteraction.

To get clear of the cognitive load, follow the UI design principle consistently across microinteractions as well. Do not allow the microinteraction to stand apart from the overall design aesthetics and flow. To help users actively with something beneficial and relevant, you can incorporate small animated tooltips providing visual clues on completing specific tasks.

Conclusion 

Employ microinteractions judiciously to enhance the user’s experience. Microinteractions can evolve further to incorporate new design elements, but they cannot do away with the grounding principle of prioritising ease of use.

Image Credits

Hero image created with the help of the fine folks contributing at the Noun Project under the Creative Commons License: BomSymbols, Valeriy and Knockout Prezo.

The post Key Principles for Creating Microinteractions for High-fidelity UX design appeared first on UX Mastery.

]]>
https://uxmastery.com/key-principles-for-creating-microinteractions-for-high-fidelity-ux-design/feed/ 0 109783