UI/ UX Crashers

In the vast landscape of digital messaging and communications, UI and UX are critical pillars to drive. This is where we put the emphasis on a Minimum Lovable Product rather than a Minimum Viable Product. Also, a Design Center of Excellence has its own place in the governance agenda.

With the fast-paced rise of GenAI, constant updates of Large Language models fuelling Copilot and Power Virtual Agents chatbots, I cannot help but think how crucial it is going back to the basics to address the risks.

Whether it is a new marketing form, case management system or customer service chatbot, how do we focus our design on usability, accessibility and enjoyability?

This is more relevant than ever

Last week has been quite eventful. To begin with, Microsoft 365 Copilot went into General Availability. Furthermore, the Global AI Safety Summit in Bletchley Park took place, producing an international declaration to address AI risks. GenAI tools are here to stay, whether they delight or byte us. Since the way we are interacting with technology is changing, how do we add more humanity and focus on the user design? This question ties in quite well with the summit's multilateral commitment to test advanced AI models. And we have to remember, tools like Copilot DO NOT build by default accessible solutions. However, there is too much at stake to let things be.

1. A dangerous numbers game: If we do not build inclusive and accessible products, we risk excluding over 1 billion people with disabilities. Neurodiversity is also key to consider with rising levels of mental health and post-Covid fatigue. Yale School of Art is a prime example of fails for colour-blind people, screen readers etc.

2. Brand disloyalty: People want a job done regardless of the provider. Many are integrating GenAI capabilities into products but not always in the right way, taking a toll on adoption, sales, and the brand. Like Amazon recommending a romantic keyring after ordering break-up self-help books. Brutal, and what is the point of integrated AI in reporting?

3. Increased customer support costs: This is where the domino effect continues, with Help Desk and Production Support impacted by dark UX. Like being on the Ryanair site clueless about where to choose no insurance from a horrible dropdown and complaining to customer service. Or, not bothering to purchase. Imagine the Compliance risks and penalties too!

UI and UX 101: Defining the differences

Having been in CRM and Marketing for about 10 years, I have seen the best of the best, and the worst of the worst. Getting the basics wrong is where epic failures usually start. Like getting UI and UX mixed up.

• UI stands for user interface, as the visual part of a product e.g., buttons, menus, text, or images. This makes it visually appealing and easy to use.

• On the other hand, UX stands for user experience when interacting with a product or service. This includes how easy it is to find what you're searching for and complete tasks. This is where we focus on the overall experience being both efficient and enjoyable.

Here is a simple analogy to help you understand the difference between good UI and UX:

• Imagine that you are in Starbucks. The UI is the menu, the table you will chill at, and the utensils for your snack. It is all easy to read (including your drink name!), ingredients and calories are clearly marked, and easy access to a machine for contactless payments.

• The UX is the overall experience that you have, including the drinks, the muffins, the service, and the atmosphere. Good UX will make you feel welcome and comfortable, and will allow you to easily order your hot drink and enjoy your snack.

However, we all know how things can go wrong with all the different names for a drink size or your very own name in Starbucks. It is possibly a special skill to mess up names so badly, but that is beside the point. We can vent about that Grande matter another time.

Becoming diplomatic ambassadors: 3 fails to learn from

The Confusing Carousel Conundrum

Imagine a retailer's Power Pages portal. Before users can blink, a carousel starts sliding across their screen. No clear transition indicators, images change too quickly to process and a hover-over does nothing. This leads to frustration and confusion, ultimately driving users away from purchasing.

Here are my top 3 accessibility and engagement tips for the next time you create a custom carousel component. This is based on the Bootstrap framework, and aligned with user-centered design.

You can also find below an example of a bespoke settings window:

1. lnterval: Modify the time delay for image transitions to reflect the images' complexity (e.g., is it text, actions, or just a plain image?). If it is too quick, you will miss valuable engagement and lead interest. If too long, visitors may not realize it is a (functioning) carousel and scroll down.

• Indicators: On top of left and right controls, you can add indicators to show how many images there are and which one users are viewing.

• Hover pause: This helps visitors reflect on the carousel when hovering over it, which drives further site engagement.

Bonus tip: Add a tooltip for each setting in simple, user-friendly language for your Dev or BA to configure. Much easier than hard-coding in the back-end and adding story points to your backlog!

To monitor site interactions, you can use Microsoft Clarity as the unsung hero! It is a behavioral analytics tool to unlock omnichannel insights with heatmaps and session recordings. There are so many benefits on top of it being FREE and the fact it can be integrated with Copilot such as:

• Always-on recordings

• Instant heatmap generation

• Rage click and dead click insights

• Masking and more privacy features

• GDPR & CCPA compliance

The Jargon Jumble

Probably one of my biggest personal pet peeves. Some teams thrive on abbreviations like it’s gods’ nectar, I always use simple and user-friendly language. Similarly, the tone of voice needs to be meaningful to them.

Some marketing forms, emails or business process flows bombard users with tech jargon and industry terms. That alienates them, reducing engagement and trust in your brand. It suggests you're more interested in impressing egos, than in addressing users' real needs.

If you are using Copilot to pen your content, be clear with the format and the tone as explained in this article to stay simple and on message. If you are on Word or Outlook, start with Microsoft Editor when you are writing a new email on Word or Outlook (shiny Review tab, under Editor). Your score is a good start starting point but go deeper into all recommendations. The readability score under document stats is particularly cool and important, as you get an insight into how easy it is to read your text. There are many resources out there to elaborate more, but I will say this:

• The Flesch-Kincaid grade level can determine the ease with which target audience understands content, adopts an app, or process to buy a product.

• The Flesch reading score is a scale of 0 to 100, 100 being easiest to read.

• In the example on the right, the text is below average and accessible only to people with a college-education level. Not good if you are addressing critical medical info. This is in WCAG accessibility standards under the understandable principle.

The Slowpoke Website

Ever loaded a ticketing site which was so slow you missed out on the biggest presale of your life (Comic Con, Adele, Taylor Swift, whatever may your poison be)? Or your grocery shopping app kept getting stuck to the point you ended up with 20 packs of chocolate boxes you must abstain from somehow. Your website loads at a snail's pace, causing you to abandon ship.

Slow solutions lead to high bounce rates, decreased user adoption, and brand risks. Users associate you with an outdated brand, unintentional design, and undependable service. In WCAG standards' terms, you breached the operable and robust principles.

To start with, check out your solutions’ analytics. In the example of a Power App, go to make.powerapps.com in the Apps section to select your app. In the 3-dots menu you will see Analytics Preview under Details, ensure you choose Performance form the drop-down after. Click on it and your fancy dashboard appears with various filters. There are some helpful metrics such as:

1. Time to first screen: Time from clicking the app icon to Power Apps handing control to the app’s first screen. It does not include the time to load the app’s first screen.

2. Session length: The time users spend on the app, after a successful app launch.

3. Number of users per session length: Inspect session lengths of <1 minute, 1-5 minutes, >5 minutes, after a successful app launch.

These are all great to set up some trigger reports with to proactively monitor performance and bugs. It is always better if the Help Desk can monitor things in an automated way rather than multiple user complaints being raised in production. Worse, it can be lost sales, revenue, or monthly active users.

Speaking about monitoring, another great unsung hero is Monitor from the same dropdown you selected the Performance report from. This is where you can view a sequence of events from a user's session to triage and fix issues. As a maker, you can use it to view events while building a new app in the studio or to monitor published apps during runtime. Things you can monitor include page navigation, command executions, form-related issues, and other major actions to understand your app’s performance and enhance it. This is where true user empowerment comes from!

This is only the starter series of tips and tricks to improve your solutions’ design in order to be more user-centered instead of crashing and learning the hard way.

No user experience or interface is perfect. But let's remember that user-centered design is not just a buzzword; it's a critical factor in the success of your app engagement. Avoiding these UI/UX failures ensures a smoother user journey, increased user adoption, enhanced business faith, and a stronger company brand. Embrace it as a part of your design strategy to create a lasting, positive impact on your users. Be a true champion.

Remember, our goal should be to:

• crash barriers of poor design by sharing openly our trial-and-error moments

• create user experiences that your users will love by actively listening to feedback and needs

• Move on from aiming for a Minimum Viable Product to a Minimum Lovable Product