The Designer's Secret Weapon: How ML is Revolutionizing Web Design

Robot brains connected to screens - Generated with Midjourney

UPDATE 2.6.23—I’ve decided to correctly refer to these systems using their actual technologies (i.e. ML—Machine Learning) rather than the market-speak and false narrative of AI (Artificial Intelligence). The article has been updated accordingly.

As I write this ML (machine learning) is revolutionizing the way we approach UX (user experience) research and design. One of my biggest hopes for the technology is for it to help designers overcome the dearth of creativity in the modern web, creating new experiences that are unique, usable, and accessible.

One of the ways ML is doing this is through services like ChatGPT. ChatGPT is a large language model that can generate human-like text, which can be used to create more natural and engaging interactions between users and digital products. Imagine integrating it into existing sites to replace some intake forms. This can help humanize the web by making interactions with digital products feel more natural and personal, even conversational. Or instead of working to tweak your Google query to find the right website, just ask chat your question in plain language and get the data you're looking for directly.

Screenshot of a ChatGPT prompt to summarize this article

Another great way to utilize ML like ChatGPT is by integrating it into existing sites in the form of support, chat, and even forms. This can help humanize the web by making interactions with digital products feel more natural and personal. Imagine filling out a form that can understand and respond to your input in a conversational manner, making the process less tedious and more enjoyable. By using ML in this way, we can create a more seamless and enjoyable experience for users on the web, making them feel like they're interacting with a real person, rather than just a machine.

Here are just a few ways it's already happening today.

ML can assist designers in creating accessible experiences. ML-powered tools and plug-ins can analyze designs and identify accessibility issues, providing designers with instant, actionable feedback. This can help designers ensure their designs are inclusive and can be used by a diverse range of users.

Blind woman reading with ML-enhanced glasses - Generated with Midjourney

ML can nudge designers to expand their creativity by equipping them with tools and insights to inspire new ideas and approaches to design. ML could analyze user data and behavior, providing designers with valuable insights into how people interact with digital products more quickly.

ML-powered tools like Ando can inspire designers in generating new design solutions through the use of generative design techniques. These techniques use algorithms to generate multiple design options based on a set of design constraints and goals. This can help designers explore a wider range of design possibilities quickly leading to more innovative and unique solutions faster.

ML can work in the implementation of designs by automating repetitive tasks like alternate version generation, layout, and optimization. This can free up designers to focus on the more creative aspects of their work, leading to more efficient and effective design processes where designers spend more time on the things they love, and less on the things they don't.

Mobile app to purchase stock - Generated by Midjourney

ML can be a valuable tool for designers, providing them with new insights, inspiration, and automation capabilities that can help them create more unique, usable, and accessible experiences on the web. As designers, we should rejoice in the future as ML tools become more available (and usable) to create truly unique and usable experiences accessible to everyone.

If you have other suggestions of how ML can positively enhance modern design work drop me a line! As to the negative aspects, I'll need to address that in a follow-up post.

Author’s note: This article was written with the assistance of ChatGPT, with a GPTZero score of “81.4: text is likely human-generated”

Landing page for a window company - Generated on Midjourney by @ToggleWords

Can Great UX Be Novel and Risky Too?

In my previous post Delivering Quality Experiences, there’s an overarching sentiment that introducing novelty and unique behaviors in your UX should generally be frowned upon. I still believe that (within the context of that article, largely focused on enterprise, software, web apps, and the like).

I’ve come to feel that we, the UX community, have been sacrificing experiential pleasure and meaning at the altar of usability and convenience.

But when it comes to the web, and digital media at large, I’ve come to feel that we, the UX community, have been sacrificing experiential pleasure and meaning at the altar of usability and convenience. At least, more than necessary. We have done, and continue to do so, to the detriment of our craft and the continued evolution of our collective digital experiences.

This is not to say that pleasure and meaning can only be derived from a novel, bold, or risky design or experience. But, take a look at the web around you and tell me when last you landed on a page or opened an app and felt enthralled. Giddy? Surprised? Excited? I cannot.

In writing this, I’m not saying anything that hasn’t already been said before. But this is the first time I’m saying it publicly, and wanting to do something about it.

What’s to blame?

Templates
Design templates and libraries are easy, obvious targets. These alone literally make websites look and feel similar. Every time we reuse, repurpose, and revert to existing and common, we perpetuate the mundanity.

Photo: OozleMedia.com

Grids
Grids are another culprit, but we’ve been designing cool stuff for thousands of years using grids (tile, mosaics, mandalas, buildings, etc.), so I say that’s a cop-out and not worth mentioning further.

Screens
Mobile and responsive breakpoints are yet another suspect. To me though, these should be thought of as opportunities for surprise and elegant delight. There’s no reason my mobile experience should have to function similarly or the same as the desktop experience, in fact, they really shouldn’t. Time and money are at play here though, and no amount of argument will change that. So suffice it to say that properly leveraged, device accommodation should be a motivator for exceptional and amazing design, not an excuse to get lazy.

Us
Mostly dear reader, the real answer is us. The UX community.

UX Design—the cause of, and solution to, all of the web’s problems

Specifically, ignorant UX is the cause of all the problems. I don’t mean ignorant UX designers or that UX is inherently ignorant. I mean UX design (and research, and testing et al) that ignores the top of the UX Hierarchy of Needs: Pleasure and Meaning. This ignorance relegates the majority of our output to what Stephen Andersen referred to as the Zone of Mediocrity. Is that where we want our designs and experiences to live? Or, would you rather take a little risk, actually design something new, even challenging for a change, and propel your product into a category all its own?

To those who would argue accessibility prevents them from taking risks, I call shenanigans. Making something work for people with different abilities doesn’t force you into a box. In fact, understanding those with various challenges to traditional interfaces may be exactly the boost your creative mind needs to try something daring and new! We know that mobile-first design can help solve a number of UX/UI issues by helping us make hard choices about how we architect information and lay out interfaces. Accessible-first design is the logical next and better step. When something works for everyone, it will work for anyone! Try it and watch your usability success rates skyrocket.

Yes. Great UX can also be novel and risky.

So next time we run through our processes and procedures, our research and readouts, our methods and our madness, let’s inject something new, something risky, something bold and outlandish. It might not work, and that’s okay. Fail early, fail often. But dare to fail. Could there be danger in the water where we can’t see the bottom? Sure, but it’s also where treasure sits awaiting discovery! I think the greater danger lies in the static banality of a ubiquitous internet where everything looks and feels like a slice of the same bland quiche.

Here’s to the designers who go beyond what and why, and start asking what if and why not!

Creating ARTE: 5 Steps to Agile Repeated Testing for Enhancement

Photo by Kyre Song on Unsplash

Your boss walks in and says your software/web project needs to be tested with real users, and he wants the results yesterday. Suddenly, you’re faced with a new problem outside your comfort zone: You need to validate your project with a lot of people, do it quickly, and the results could affect the entire direction of the project. So what do you do?

Agile Repeated Testing for Enhancement is a quick way to get the answers you need to ensure your project lands well with your customers. Here is a 5 step guide to help you through the process. 

What is ARTE?

A: Agile. You’ve got to do this quick, but clean. Cut through the red-tape, and get things done.

R: Repeated. You’re not going to just talk to 1 person. You’ve got to make this iterative so you can get as much data possible in your limited timeframe.

T: Testing. Design like you know you’re right. Test like you know you’re wrong.

E: Enhancement. Tune everything until it’s optimal. Don’t cut corners, but streamline what should be done, and reduce or remove things less critical.

Step 1: Kickoff & Knowledge Gathering

Whether this is your project, or you’ve been brought in as an outside consultant, you need to have all the right information to get started. Try answering these questions to curate your ARTE:

• What is the business application you’ll be testing? Be specific here.

• Is it an entire package, or just a few features?

• If it’s available on multiple platforms, will you be differentiating between the types of platforms available?

• What kind of data do you need to tell the final story, and what type of data do the executives think they need? (More on helping people understand what kind of data they need to answer their business questions later). 

Step 2: Participants—Who, Where, How Many

This is critical. You must identify your target population well to get the right data. If you're testing an in-dash navigation system, you probably don’t want a user who bikes to work every day with no intention of ever buying a car. If you're optimizing an app for iOS, you may or may not want android users. It all depends on the goal of the test. Clearly think through who the users will be, where you will recruit them from, and how many participants you need to achieve reliable data. We won’t discuss sample size here, but it’s something you may need to take into consideration. There are times when the sample size is determined more by how long you have to conduct your test, and less by achieving a statistically significant sample size. See the diagram below to better understand how to determine a testing schedule. Ultimately, some are better than none. Generally.

The Math:

1. 40 participants

2. 2 days of testing

3. 480 minutes (8 hours) per day

4. 15-minute gaps between participants

((Num_Minutes * Num_Days / Num_Participants) - Gap = How much time you have to work with each participant

or

((480 * 2) / 40) - 15 = ~ 9 minutes per test (per test participant)

Step 3: Script Writing

It’s great that you know who you're going to talk to now, but what are you going to say? “Hey do you like this feature?” is probably not going to be sufficient. Well-crafted questions are both art and science. There are times when a yes/no response is appropriate, but there are often times where you want to include open-ended questions. Open-ended questions are questions specifically designed for an explanation instead of a yes/no response. They allow you to dig a little deeper into how the participant feels about a feature and give you greater insight into the product you're testing. These are great for your qualitative report. For the quantitative aspect of your report, you will need a categorical variable. A preferred scale to use is a 5 point Likert scale. The participant can rank a very large range of things such as sentiment, emotion, agreement, frequency, importance, likelihood and more on a simple Likert scale. 

The script is more than just the testing questions though. It also includes an introduction, scenarios, and any important disclosures. Are you recording the session? You can include the consent process in the script, or simply a question to confirm the consent is on hand.

Step 4: Logistics

There are a few additional details that you must work out before you start testing. Where will the testing be conducted? Is it a space you own, or a public space? Do you need permission to test there? You need a location that has good wayfinding so your participants don’t get frustrated trying to find the correct location. You will likely need a waiting area, a room for testing with minimal distractions, and appropriate staffing to keep the flow going. The same goes for virtual tests hosted on platforms like Zoom. Getting people to the right room, properly set up, prepared to share screens or devices is no easy task with many participants, and may require additional coaching and written instructions before and/or during the meeting. You need to account for those tech hurdles in your schedule.

You also need to consider what software and equipment you’ll use. Will you be recording audio and video? If so, how? Will others need to be observing remotely? Do you have backup equipment if something doesn’t work properly? Yes, equipment failure and computer crashes can happen in the middle of a testing session. Be over-prepared. 

Step 5: Practice & Revisions

So now you’re all ready to go, right? Wrong. Now you need to do a few dry runs. First with your team, and then with someone outside your team. Test the questions. Are they leading? Are they repetitive? How is your timing? If you have participants coming every 30 minutes and your script is taking 40-45 minutes, you still have a lot of work to do. Get the script right. It is well worth it.

Finally, be prepared for it all to go wrong. We’ve seen people show up late. Show up 2 hours early, even show up 24 hours early! We’ve seen outdoor tests get rained on. We’ve seen on-location tests where no customers showed up. We’ve seen intercept interviews where nobody would talk to us. You never know what’s going to happen, so over-prepare, then be ready to pivot. When the timeline is tight, fortune will favor the prepared

Great, now you know the steps to curate your ARTE session. If you need help with any of your usability testing and design needs, please reach out to us at Precocity. Our team of usability researchers have a passion for improving the customer experience on a variety of platforms.