What is UX Design?

What is UX Design?

Over the last couple of decades, technologies have become increasingly intricate, with the functionality of apps and websites becoming broader and more complex. 

The first websites were simply static pages that delivered information to feed curious searchers. 

However, the tide has drastically changed a few decades later, as sites are more interactive and offer a much richer feel for different user bases. 

A large part of this ‘richer feel’ pertains to the evolution of user experience (UX) design. 

While seemingly complicated, this discipline encompasses different user elements from accessibility to wireframing to cater to users’ emotions about a product. So, let’s delve in more, shall we?

Ux design
Image by Firmbee from Pixabay

UX Design

To kick off, let’s first define user experience. 

User experience (UX) revolves around a person’s emotions, actions and attitudes when using a specific product, system or service. 

UX encompasses the practical, effective, experiential, meaningful and valuable elements of human-computer interaction and product ownership.

Consequently, user experience design (UED or XD) are a set of activities that seek to enhance user satisfaction by improving usability, accessibility, and pleasure derived from the interaction between a user and a product. 

Fundamentally, UX design incorporates knowledge from multiple disciplines, including: 

  • Interaction design 
  • Cognitive science
  • Human factors engineering (HFE) 
  • Computer science 
  • Industrial design 
  • Psychology 
  • Anthropology 
  • Sociology 
  • Graphic design 

UX design essentially considers every element that shapes how users feel, and how easy it is for users to accomplish their desired tasks. This can be from how a physical product feels in users’ hands, to how straightforward a checkout process is when buying something online. 

The goal of UX design is to create an efficient, easy to use, relevant and an all-round positive experience for each user. Thus, improving customer satisfaction and loyalty via usability and the pleasure provided in the interaction with a product.

What does a UX Designer do?

A UX designer is a professional who investigates, researches, and analyses how users feel about products or software applications. In some organisations, UX designers have the luxury of UX researchers to help with the user research while they focus on the design of the user journey. 

UX designers apply the user insights they learned to product development to ensure that users have the best possible experience with a product. 

UX designers also strategise and share with other members of the product development team their findings, and monitor development projects to ensure their findings are well implemented. 

UX practitioners focus their efforts in understanding the relationship between human users and computer-based products. These include websites, applications and systems—  to create seamless user experiences for products and services. They help build a bridge to the end customer, helping a business to better understand and fulfil the customer’s needs and expectations.

Tools used by UX designers

UX professionals’ work includes user market research, sketching, wireframing, interaction design, visual design, user testing, prototyping, and continuous iterations on designs.

For the most part, UX designers usually rely on a number of different tools to execute their work. For example, at the research stage, they can use survey and polling tools, and video chat software to interview users and gather actionable data.

Though the most popular tools used by UX designers are programs for wireframing, prototyping and usability testing like InVision, Adobe XD, Figma and Balsamiq.

The UX design process

The UX design process mainly has five key stages, namely:

Product definition

This phase of UX design occurs before the product design team creates anything. Before you build a product, it’s important to understand the context for its existence. The product definition stage helps set the foundation for the final product. 

This phase includes:

  • Stakeholder brainstorming sessions and interviews to gather insights about business goals.
  • Value proposition mapping to determine what the product is, who shall use it, and why they will use it. Essentially, value propositions enable the team and stakeholders to create a consensus around what the product will be, and how to match users and business needs.
  • Concept sketching to create an early mockup of the future product (for example, low-fidelity paper sketches of a product’s architecture).

Product research

After defining the idea, the product team then moves to the research phase. This phase usually includes user research and market research. 

Overall, seasoned UX designers consider research as a good investment that informs design decisions to save the organisation money down the road.

However, product research typically depends on the intricacy of the product and timing, and can include:

  • Individual in-depth interviews (IDI) to derive qualitative data about the target audience like their needs, wants, fears, motivations, and behaviours.
  • Competitor research and benchmarking to understand industry standards and identify specific opportunities for the product within its niche.

Product analysis

The analysis phase aims to draw actionable insights from data collected during the research phase. During this particular stage, UX designers confirm if the team’s most important assumptions are indeed correct. 

This stage of the UX process includes:

  • Storyboarding.
  • Creating user personas.
  • Creating user stories.

Product design

After confirming users’ wants, needs, and expectations from a product, UX designers can then move to the design phase. This stage involves various activities, from creating information architecture (IA) to UI design. 

wireframing
Photo by Sahand Babali on Unsplash

An effectual design phase is highly collaborative (involving active participation from all team players) and iterative (cycles back upon itself to validate ideas). 

The design phase includes:

  • Sketching
  • Creating prototypes.
  • Creating wireframes.
  • Creating a design specification.

Validation/Testing

The validation stage helps teams understand whether their design is applicable and acceptable to their users. Usually, this phase starts after the high-fidelity design is finished. 

This is because testing with high-fidelity designs delivers more valuable feedback from end-users. But we have also seen many teams that invest in smaller user testing rounds on wireframes or low fidelity clickable prototypes to get earlier insights to guidement their design refinement.  

During user testing sessions, the team carefully validates the product with both stakeholders and end-users using:

  • Surveys 
  • Testing sessions
  • Analytics across quantitative data (such as number of clicks, navigation time, search queries, etc.)

Benefits of a good UX design

In the early days of the internet, product design was much simpler as designers built products they thought were awesome and cool. 

However, there was far less competition for users’ attention online. Secondly, there was no direct consideration for users of the product at all. Actually, the success or failure of a project was down to luck and the judgement of the design team. 

In today’s fast-paced tech-driven world, UX focuses on the user to increase the chances of a project’s success when it finally hits the market. 

So, what are the benefits of a great UX design?

  • UX helps companies to discover the goals of their audience: During research into UX design, UX designers will get a lot of opinions. These can shape your website design goals and help you define your customer base by creating personas. 

This can also help an organisation to analyse who will most likely visit their site, and once they figure this out, they can easily provide a good user experience. 

  • Augmented customer satisfaction and engagement: The better the experience one creates for their customers, the happier they will be. And the opposite is true.

A bad experience will make customers more frustrated with what you’re providing them. And consequently, they shall be less likely to recommend your offering to friends and family. 

  • User Experience affects the product itself, not just its promotion: There is a vital difference between digital marketing and user experience. Generally, marketing is about making people want things, UX design is about making things people want.
  • Lower cost of support: An easy to use and logical interface, service, process, or product doesn’t require extensive help documentation, and support staff on standby. In turn, this translates into cost savings on people devoted to support and user assistance.

UX Design Examples

There are several vital factors that affect the overall experience a user has with a product: 

  • Usefulness: Is the product helpful, with a clear purpose? 
  • Aesthetics: Is the visual appearance of the site and its design appealing to the user?
  • Emotions: Are positive emotional feelings evoked in response to the product?
  • Usability: Is the product easy to use
  • Learnability: Is the product simple to master quickly, with minimal instruction? 

To a large extent, the quality of a user experience can make a difference whether a company succeeds or fails. 

For instance, consider some companies that have failed in the last decade like Yahoo! It wasn’t only disruption or technological advances to blame, but failure to continually consider the user’s needs.

Yahoo! introduced substantial clutter on their homepage. In turn, rather than allowing users to complete simple tasks like a search or email check, this disrupted the user experience. 

Conclusion

Though often confused, UI and UX aren’t the same but are separated by their focus on interfaces versus interactions. 

As has been noted, UX design focuses on designing (digital or physical) products that are easy to use, and delightful to interact with. UX design aims to enhance the experience that users have while interacting with a product, and ensure they find value in what you’re providing.

Overall, as an art and science, UX design aims to generate positive emotions through product interactions. 

The central goal for good user experience design is to keep engaging users to purchase/subscribe or continue coming back to the site for similar queries. Finally, remember a good UX design also always seeks to improve from the user feedback gotten.

Reach us at Netizen Experience for UI/UX design services in Malaysia.

Why Personalisation Matters in User Experience?

Why Personalisation Matters in User Experience?

User experience (UX) activities primarily revolve around enhancing user satisfaction by improving the usability and accessibility for users interacting with physical or digital products. 

These activities usually include user research, sketching, interaction design, wireframing, visual design, prototyping, user testing, and continuous iterating on designs.

UX design aims to examine every element that shapes this user’s experience. For instance, how the product makes them feel, or how easy it is for them to interact with the user interface and accomplish their desired tasks. 

Fundamentally, the central objective of UX design is to create efficient, easy, relevant, and all-around pleasant experiences for users. And a critical component of achieving this is personalisation.

Why personalise in UX?

The manner in which a user interacts with an app determines their overall impression of it. For instance, is the interaction clumsy and perplexing, or rather fluid and intuitive? Or better yet, does it feel random or logically structured when navigating the app? 

As digital products and services advance, so have the expectations by users for convenience, speed, and predictability. Now more than ever modern users expect products and services to be specifically tailored to them as many currently abandon products, or services that don’t provide any level of personalisation.

So, why is personalisation part and parcel of any UX initiative when building out the user experience of an application.

  • Convenience

Personalisation ensures applications fit seamlessly into a user’s lifestyle or routine in a manner where the user interface is almost an invisible part of the process. Through personalisation, applications become so frictionless that it doesn’t feel like work to the user to use them.

  • Loyalty

Personalised experiences heighten user loyalty and affinity towards a brand. Essentially, as users encounter more relevant content and interactions, they feel understood by the brand. In turn, by reinforcing a sense of identity and connectedness, these emotions help increase the customer lifetime value.

  • Conversion Rate

Personalisation delivers users more relevant and more individualised experiences. In turn, this ultimately translates into an increased conversion rate.

  • Reduce Cognitive Overload

Excessive information and options can act as a cognitive barrier and distract users. Fortunately, personalisation reduces the amount of information and the number of options for users as it guides users through a funnel expressly designed for them and their individual needs.

Types of personalisation

There are two main types of personalisation:

  • Role-based personalisation: Here, users are grouped according to specific characteristics that are well-defined and known in advance. 
  • Individualised personalisation: In contrast to role-based personalisation, individualised personalisation involves a computer creating a model of each individual user, then presenting different things to each person. For example, the computer program might infer that a user is pregnant based on her searches and recent purchase history.

Types of personalisation

Photo by fauxels from Pexels

Customisation vs Personalisation

The part of the human brain that focuses its attention is called Reticular Activating System (RAS). It fundamentally works as a filter and sorts out what is essential and what is not. Because this human brain element evolves really quickly, customisation and personalisation are necessary to maintain user attention. 

Despite being often confused; personalisation and customisation have a different impact on the final user output. 

Though they share similarities, their implementation styles demonstrate the considerable differences between them. Nonetheless, their objectives remain the same– to enhance a product’s features and content as per user requirements. 

So, what are the key differences between personalisation and customisation?

Personalisation is performed by the system being utilised. Here, a system is set up to identify users and deliver to them tailored content and functionality that matches their roles. 

Personalisation essentially delivers useful content after analysing users’ characteristics, behaviours and attributes, down to the individual level—for example, Amazon’s suggestions based on past browsing and purchase history.

Customisation is performed by the user. Here, a system enables users to make preferred changes to an experience to meet their particular needs and priorities. For example, configuring layouts, content, or even system functionality. 

Fundamentally, customisation enables users to get precisely what they want while also giving them the sense of control to filter unattractive content. On the downside, many users don’t know what they need when customising, or aren’t interested in doing the work required to alter user interfaces to match their preferences.

UX personalisation tips

User touchpoints

Businesses need to understand how customers view them across all touchpoints to connect with the user on an emotional level consistently across different touchpoints. 

As more customer interaction points emerge across channels and devices, brands need to manage the entire customer journey, not only individual touchpoints. This is key to delivering a consistent experience across all channels.

Test and Repeat

Testing is critical to understanding whether your personalisation initiative is ready to drive sales and brand engagement. 

Testing helps to ensure that your app personalisation initiative feels seamless and frictionless on any user’s device of preference, as well as clear on what the objective is. If users are continually feeling confused, frustrated, or even consider another option, then the experience is ruined. 

User Research

User research helps you understand if your product actually needs personalisation. If yes, then where it should be applied, and how much is enough.

User research also allows business owners to understand what matters to users, what their limits are in terms of over-use. And if what they seek to do will be relevant to various audiences.

Remember, personalisation isn’t the silver bullet for every product, application, audience, or interaction. So, user research helps streamline where and how it can be applied most effectively.

Data

Data lies at the heart of any personalisation initiative. Generally, it demands a deep understanding of users’ needs and a solid framework for tracking and measuring user behaviour. 

Typically, brands use approaches that combine qualitative research to understand the needs and motivations of users, while collecting objective data about their context and online behaviour.

Because users nowadays are constantly connected across a myriad of devices, it’s imperative for businesses to exploit data science techniques to provide coherent interactions and intuitive user experiences via every channel. 

For example, real-time responses and transactions with minimal effort, or even access to compelling experiences, personalised for them specifically. 

Essentially, the only way to achieve these seamless interactions is via data-driven strategies that target audiences with relevant, timely content to trigger conversions and interest. 

Creativity and Imagination

In theory, brands selling directly to consumers potentially have access to the same data as their competitors. So, businesses can see favourable outcomes with personalisation by creatively connecting the dots that user data provides with logic, imagination, and creativity.

creativity

Image by ElisaRiva from Pixabay

Context

Personalisation is all about context. In essence, highly effective brands deliver the right content, at the right time, for the right users. Fundamentally, contextualised and personalised experiences mainly involve knowing why personalisation is important, and how it could help your users. 

Furthermore, personalisation is now more commonplace as most users are currently educated, informed, and more accepting of personalisation. Hence, why it’s more imperative for brands to gather contextual data and segment users into specific target areas. 

Remember, every user is unique, and what some users might find uncomfortable, others will find helpful or fun. 

Personalised User Experience examples and applications

Machine learning

Currently, machine learning has taken modern-day personalisation to a whole new level. Machine learning and natural language processing mechanisms intelligently understand the sentiment and story behind users’ interactions and behaviour while continuously adapting to contextual factors.

 Furthermore, machines can easily make sense of the chunks of user data. For example, they can draw actionable conclusions about each individual person, like identifying a user’s persona, attributes, intent, or stage in the customer journey. 

This allows companies to accomplish real-time, one-to-one personalisation (individualisation) while interacting with their customers.

Contextual Messaging

Contextual messaging is a personalisation approach that allows businesses to customise messages to suit different users based on characteristics like location, customer behaviour, or even device type. 

Essentially, contextual messaging allows brands to deliver content of much higher relevance to users, based on their exact location and behaviour at the moment of interaction.

Predictive Recommendation

Existing recommendation engines accurately predict products a person might find interesting by exploiting relevant purchase behaviour data from other users from the same target group. 

For example, if you’ve ever browsed anything on an online retail store, you have probably come across phrases like “If you liked this, you might also like..” or “Other customers also purchased…” This is a clear example of predictive recommendation as a form of personalisation.

Conclusion

user experience design

Photo by Kaboompics .com from Pexels

All things considered, user experience design aims to create products that deliver meaningful and relevant experiences to users. Since personalisation is a subset of user experience design, it also includes aspects of branding, design, usability, and function.

To achieve effective personalisation, it is imperative to critically understand your target audience through research, prototyping, and conduct extensive usability testing. Remember, the central objective is to improve customer satisfaction, loyalty, ease of use, and usability when interacting with a product or service.

Personalisation does this by delivering content and functionality that matches particular user needs or interests– with no effort from the targeted users. 

Essentially, the system should be able to profile users, then adjust the user interface according to their profile.

A Complete Guide to Mobile Responsive Design

A Complete Guide to Mobile Responsive Design

Web development has progressed by leaps and bounds since the beginning of the World Wide Web. In the early days, website designers did not need to worry much about how their sites appeared to different clients. 

This was because most users would access websites from standard desktop computers with similar screen resolution ranges.

However, today web technologies are upgrading exponentially as different devices are being used and developed to access the internet. 

As a result, websites currently being developed and designed by web programmers are viewed and accessed by a large number of devices with disparate screen resolutions, orientations and views.

For instance, modern users can access the same website from desktop computers, laptops, iPhones, iPads, Notebooks, feed readers, and even smart TVs. Essentially, each platform presents the same page, with a unique feel from the others, depending on its size and viewing capabilities.

What is mobile responsive design?

Mobile Responsive design is a set of techniques and technologies that enable website creators to design websites that provide a desirable viewing experience for different device types.

In principle, mobile responsive design ensures that websites can automatically reshape themselves depending on various screen sizes, orientations, and resolutions. From the largest devices like smart TVs to the smallest ones like mobile devices.

Furthermore, mobile responsive design ensures a seamless flow of content based on the amount of device display space available. This helps to maximise brand impact while not dictating the development of a completely different site, or set of sites to accommodate new device makers that may come up with in the future.

Benefits of a responsive site

SEO friendliness

For the longest time, Google has prioritised responsive websites as most of its traffic comes from multiple mobile devices with dissimilar screen sizes. The search engine took this prioritisation further when they introduced a “Mobile-Friendly” label for sites that are responsive.

Generally, websites that are responsive typically emerge on the top of smartphone’s search results queries. This means that mobile responsiveness is a critical ranking factor for Google as they actually penalise sites that aren’t mobile responsive.

Reduced bounce rate

Bounce rate is a metric to represent the proportion of visitors to a particular website who navigate away from the website after seeing only one page. In practice, the goal of a responsive website is to ensure that visitors with different devices stay longer on the website. 

A responsive website also makes it effortless for visitors to be more willing to click through and explore other pages on your website. This, in turn, decreases your bounce rate.

Better user experience

A responsive website results in a better overall quality of user experience. Whenever users find it challenging to navigate, or utilise your website because they’re forced to pinch and zoom-in continuously, they become frustrated. 

However, if your site scales and reacts to the changes in screen size adaptively, visitors won’t have issues accessing menus, links, buttons or forms. 

Increased mobile traffic

Statistics show that nearly 55% of all global web traffic emerged from mobile devices in 2021. With this statistic, it is clear that one cannot afford to compromise with responsive web design. 

To substantiate this claim, consider examining just how many of your visitors come from phones, and how much time they spend on your site. Then subsequently, implement responsive design and critically compare the two statistics. 

Afterwards, once your website adjusts to the viewport width, you will notice a significant amount of traffic increase from mobile devices.

More conversions

As we alluded to earlier, the more time users spend on your site, the lower the bounce rate. Responsive sites improve the user experience of your traffic, and thus help build good relationships and trust with users. 

This optimal user experience and confidence results in better conversion rates, for newsletter subscriptions, product purchases, or even bookings. 

Less loading time

Responsive websites load faster on all devices. However, for smartphones and tablets, they load fastest. Because of fluid grids and responsive images, responsive websites take a lot less time to load pages. And in turn, sites that load faster enjoy more conversions. For every second delay in mobile page load, conversions can fall by up to 20%.

loading time

Image by Gerd Altmann from Pixabay

Easy maintenance

There was a time when programmers were required to maintain two separate websites: one for desktops and another for mobiles. Consequently, this dictated maintaining two sites, which necessitated more resources. 

With a responsive website, this effort is dramatically reduced as it takes less time to maintain and build a website. As such, companies can focus on more important tasks such as customers service, A/B testing, marketing, product, and content development. 

How to achieve a mobile responsive website design?

Responsive websites maintain adaptive design to respond accordingly to visitors’ devices or technology. However, en route to a functional responsive website, there are critical steps one must follow.

Scoping 

This step involves understanding user objectives on different devices. In the past, many assumed that most mobile users were task-driven, for example, desiring to order a meal, or book a restaurant table quickly.

However, nowadays, users on any mobile device are as likely to leisurely browse the Internet before completing a task quickly. Basically, once you carefully understand user objectives, you can easily define and prioritise content for your site, regardless of the device a visitor is employing.

Scoping can help you make technical considerations regarding functionality and content. For example, if a complicated functionality only works on particular devices. 

Though a responsive site only changes the CSS depending on the width, if it contains complex elements that rely heavily on JavaScript. Then they may not translate well on smaller devices, and it could be worth hiding these.

User Research

User research is a highly critical stage in the design process. This means that it’s worth a little extra consideration to research people who will be employing different devices. 

Exploratory research can help extrapolate your assumptions on how different users may want to use your website on various devices. This, in turn, will enable you to decide what the priorities are for your project.

Wireframing 

A wireframe is fundamentally the skeleton of a web page assembled using basic shapes, lines, colours, and styles. The central objective of a wireframe is to guide the design of a layout conducive to the content placement. 

At the same time, wireframing helps developers to figure out functionality and navigation problems in an easily adjustable format. 

For years web designers wireframed to fit computer screens. However, times have changed where wireframing now takes a mobile-first approach. This approach enables webmasters to prioritise some elements on the site when it is shown on a smaller screen.

Wireframing has an advanced element that involves responsive wireframes. Responsive wireframes are simple web pages built with HTML and CSS, that employ responsive web design principles to illustrate the layouts. 

Responsive wireframes are very dynamic and require less effort to introduce changes. To introduce a change, all that’s required is a source code update of a page, then a page reloads in the browser.

Generally, wireframes are typically not in colour since they need to focus on the relationship of the various UI elements, not on the actual design. The web designer is the one to work on the colour and shapes once the wireframe has been fully established. 

In summary, building a wireframe isn’t an exact science, and requires extensive iterations and numerous revisions to be performed. Because of this, it’s imperative to pay attention to the logic behind the wireframe layout to be able to see the rationale of your responsive design.

Styling

Think about keeping your styles more straightforward for your mobile version. The great thing about using CSS3 is you don’t need many images to achieve great styled effects. 

However, these still take some time to load. Also, carefully think through your font sizes to ensure that they are readable on each device.

Building the site

Once you have scoped, researched and wireframed your design, it’s time to build your website. As you commence development, here are a few considerations: 

  • Constant communication: Website projects always go smoother when teammates speak to each other. This means that both the designer and developer need to have clear channels that enable them to discuss design problems and solutions as soon as they turn up.
  • Image size impact: Your responsive website will need to load full-size images even if the CSS scales them down. So, try to keep your image sizes as low as possible.
    On the positive side, you can employ some JavaScript scripts/workarounds to make the site run smoother. However, to avoid any degradation in performance, do ensure to load the smallest high-quality image size.
  • Use advanced CSS: It’s mission-critical to use advanced CSS styles as they allow site styles to degrade as the browser capability does. Furthermore, advanced CSS enables you to keep site loading times low.

User testing of the website

Test, test, and test more! User testing starts as soon as you create your first wireframe. Generally, wireframe testing should occur on the relevant devices straight away. This will allow you to know early on if your wireframe is really functional for your needs. 

Also, after building, user test early to identify any inherent issues, or elements of the wireframe that were not implemented appropriately. 

Features of a responsive design

Fluid grid

Previously most websites were laid out based on a metric called pixels. However, now modern designers employ a fluid grid. A fluid grid essentially sizes the elements of your website proportionally, instead of making them one specific size. 

This consequently makes it easy to size things for different screens as the elements respond to the size of the grid(screen), not the size set in pixels. 

A fluid grid ensures that the website design is flexible and scalable as elements will maintain consistent spacing and proportion– adjusting to specific screen widths based on percentages.

Flexible images & text

A responsive design isn’t limited to dynamically changing the page layouts only. Another critical element of responsiveness is the ability for images to automatically resize proportionally. 

Flexible text and images can adjust within a site layout width, according to the content hierarchy set with the CSS (stylesheet). Thus possessing the ability to scale, crop, or disappear depending on the content that is deemed essential to the mobile experience.

With a flexible design, text can be wrapped in the available space, and font size can be increased on smaller devices to make it more legible. However, flexible images can sometimes prove challenging due to load times on smaller device browsers. 

Responsive layouts

With responsive layouts, webpages are no longer left to their own devices. Responsive layouts attempt to adjust site layouts to a great variety of screen environments. 

Instead of working with the “most common” display dimensions and “average” users, a responsive layout adapts to disparate viewing conditions and user requirements. 

In addition, by integrating alternate layouts tuned to each resolution range, developers can enhance the overall viewing experience.

Media queries

Media queries enable designers to build multiple layouts with just HTML documents. Media queries also allow designers to choose appropriate style sheets based on different criteria like the size of a browser, or screen resolution. 

So, rather than look at a device type, it considers its implemented capabilities. Generally, working with media queries allows designers to alter much more than the simple placement of an image. For instance, media queries enable designers to fine-tune as pages resize themselves. 

Furthermore, designers can flexibly increase the target area for links on smaller screens, or show or hide elements to ensure that navigation is more prominent. 

Better yet, media queries can be employed to even apply responsive typesetting to optimise the reading experience for the display providing it.

Responsive design examples 

GitHub 

GitHub’s unique website offers a coherent and consistent experience across every device with commendable attributes like:

  • Its signup form is a central focus, as it also presents only a call-to-action button on mobile. Furthermore, users must click the call to action to trigger the form. 
  • When transitioning from desktop to tablet devices, the field above the fold transforms from a two-column layout to a single-column layout. This occurs with the copy above the signup form rather than beside it.
  • GitHub hides its search bar and menu behind a hamburger icon on handheld devices. This practice helps reduce clutter on mobile devices, where space is typically limited.
GitHub

Image Credit:www.github.com/

Shopify 

Shopify offers a fluid user experience across all devices as it constitutes only a call-to-action button, and illustrations change between desktop to mobile devices. On PC and tablet, its call-to-action button is from the right of the form field. However, on mobile devices, it’s beneath.

Illustrations are to the right of the copy on PCs and tablets, whereas they are placed beneath the copy on mobile devices. Impressively, despite employing image carousels to show off their customers, Shopify has managed its page load speed below five seconds.

Shopify

Shopify’s responsive mobile view. Image Credit:shopify.com

Slack 

The Slack website is well known for its intentionality and simplicity. This is demonstrated by its responsive design that consists of a flexible grid that easily adapts to viewports of all sizes and shapes. 

For instance, while customer logos are visually presented in 1 horizontal line on a desktop view. As 

Slack is using a flexible container whereby at certain screen breakpoints, the logos will automatically wrap and stack on top of each other to optimise for smaller screen views.

Slack

Slack’s responsive mobile view. Image Credit: slack.com/

Conclusion

Because internet devices and technologies are changing fast, there is a great need to continue adapting responsive web designs. Responsive design ensures that websites work across a diverse range of device and monitor types, browser and pixel depth differences. 

The main advantage to this approach is simple: design once, deploy everywhere.

As such, companies don’t need multiple versions of one website for different devices. This consequently delivers a more unified and better experience for users while reducing redundancy, simplifying development and maintenance processes for web designers.

Reach out to us at Netizen Experience if you’re planning on a new responsive website or are in need to change your current one.

Different Types of Usability Testing Methods

Different Types of Usability Testing Methods

Usability testing involves different techniques to ensure that users of a system can execute intended tasks efficiently, effectively, and satisfactorily. 

In usability testing, prospective users perform tasks typical of a user group in an ordinary environment with a website, system, or physical product.

Over time, it has evolved from experimental psychology methods to less controlled and more qualitative tests. 

Quantitative vs Qualitative Usability Testing

The main differences between quantitative and qualitative testing lie in how the data is collected. Generally, usability testing involves two types of data: qualitative and quantitative.

It is, therefore, vital to understand the distinctions between the two and how to employ each appropriately. The end goal is to gain valuable insights; however, their approach varies.

With qualitative testing, data about behaviours and attitudes are directly collected by critically observing what users do and how they react to a product. 

In comparison, quantitative testing accumulates data about users’ behaviours and attitudes indirectly. For instance, quantitative data is typically recorded automatically while participants complete the tasks.

Qualitative usability data examples range from product reviews, user comments, descriptions of the issues experienced, facial expressions, and preferences, etc.

On the other hand, quantitative data typically constitutes statistical data that is quantifiable in numerical terms. For example, how long it took for someone to complete a task, the percentage of a group that clicked a section of a design, etc.

Moderated vs Unmoderated Usability Testing

Moderated usability testing is administered in-person or remotely by a trained moderator. The moderator introduces the test to participants, responds to their queries, and asks follow-up questions. On the other hand, unmoderated usability testing is performed without direct supervision.

Moderated testing typically produces in-depth results because of the direct interaction between moderator and test participants. Moderator is able to probe and follow up with questions to further uncover the underlying motivation or reasons for the participant’s actions.

However, it can be considerably more expensive to organise and run. Conversely, unmoderated testing is cheaper. However, participant answers can provide superficial answers at times. 

Explorative vs Comparative Usability Testing

Explorative usability testing is open-ended and involves participants being asked to brainstorm, give opinions, and freely express ideas and concepts. 

The information is usually collected in early product development to help researchers pinpoint market gaps, identify potential new features, and iterate new ideas.

Comparative usability testing involves asking users to choose between solutions they prefer to compare a website or app with its primary competitors.

Usability Testing Methods

1. Guerrilla testing 

Guerrilla testing is arguably the simplest usability testing method. Essentially, guerrilla testing is as simple as going to a public place like a café and asking people about their thoughts on a prototype. 

Basically, test participants are chosen randomly and asked to perform quick tasks, often in exchange for a small gift (like a free coffee). It’s a low-cost approach that works best in the early stages of product development.

guerrilla testing

2. Lab usability testing

Lab usability testing needs a trained moderator and a suitable place for testing.

This test approach is suitable when you need in-depth information on how real users interact with a product, and the issues they may face. 

This method enables you to collect comprehensive and qualitative information. However, it can be expensive to organise and execute since it requires a controlled environment, hiring of test participants and trained moderators. 

3. Contextual inquiry

This usability testing method helps a product team obtain information about the user experience from the real users. This method is perfect for attaining rich information about users— for example, their workspace, personal preferences, and habits.

In this approach, users are first asked a specific set of questions about their experience with a product. Subsequently, they are then critically observed and questioned while working within their own environments. For example, a finance clerk is observed on how she use the new accounting software at her office where she usually works. 

4. Online or remote usability testing

Usability testing is carried out with participant by connecting with them over the internet. This method of usability testing is able to save time and lessen the need for respondents travelling in person to the usability testing lab. It also provides the added advantage which the participant can join the usability test within the comfort of their home. Screen sharing is usually done online so that the UX researcher can see what the respondent is seeing during the usability test.

5. Card Sorting

Card sorting is a usability testing process where participants demonstrate how they expect a website to look in terms of navigation. This testing method helps UX designers and UX researchers to discover whether their navigational structure matches what users expect. 

7. A/B Testing

This usability testing method typically involves critically comparing two versions of an application or website against each other to assess discrepancies. Usually, product managers use statistical analysis to fully determine which of the two versions works better.

The article is a part of our comprehensive guide on “Usability testing”.