Unless you’ve been blissfully unplugged for the last few months or so (and if you have been, I’m already jealous), you’re probably hearing a lot about advances in artificial intelligence and all the accompanying excitement, anxiety, buzz, and speculation that comes with it. The atmosphere feels positively electric with potential.
I grew up reading cyberpunk novels and comic books, watching science fiction films and TV, and imagining a vivid future where technology could think, talk, and translate human thought into reality. We don’t have flying cars just yet, but I’m pretty excited to see how far we’ve come with AI just 73 years since the theoretical Turing Test was first conceived of and only 26 years since Deep Blue bested Garry Kasparov.
Technology of sophistication thought of as futuristic just a year or two ago is suddenly here, available to anyone with an Internet connection. Need code to build your app? It’s as simple as feeding a few prompts to ChatGPT. Want to generate realistic stock images of women laughing at salad? You only need to ask and your dreams come true. You can even start a side hustle with an AI business partner and a bit of startup cash.
“AI has the potential to revolutionize the way we work, learn, and interact with the world.” — Reshma Saujani
As UX and Product Designers, these horizons are full of compelling challenges and exciting opportunities for design. The imagination boggles.
It can be tempting to focus on the thrilling new technologies themselves, but don’t forget that at the end of the day you’re designing for human beings. That means drawing on solid principles of good UX and UI.
Whether you’re building a conversational interface like ChatGPT, a sophisticated marketing content system, or a prompt-based image generator, the fundamentals of good design are at the foundation of delivering high-quality, usable experiences.
So what are some basic principles, ideas, and tips to keep in mind when designing for AI? In the following segment, I’ll outline a few key concepts to keep in mind when you’re designing UX and UI for artificial intelligence.
The following are some high-level principles for AI UXUI design. In this article will be covering the following concepts that designers should keep in mind when designing for AI:
- Building Trust Through Transparency
- Optimizing for the goal
- Designing for Simplicity
- Prioritizing Accessibility & Inclusion
- Don’t forget the Magic
The list is by no means comprehensive or the only one out there, but these tips should help get you started.
One thing that we in the tech world can sometimes lose sight of is that most of folks out there using technology may not be as informed about how it all works and what it all means.
Levels of trust and transparency inherently vary by audience and each person’s relative comfort with technology.
“Designers must create products that are transparent and help users understand what is happening and why.” — Kat Holmes.
Dramatic leaps in technology always provoke in society a mix of excitement, curiosity, and at least a bit of anxiety.
Is AI going to solve all of your problems or is AI going to take your job? I don’t think anyone knows for sure — the answers are likely somewhere in the middle. Either way, transparent design will go a long way in building trust with your users.
Ask yourself: what can I do to instill trust through transparency in my design? Wherever you can, use the experience to communicate information that will help users make the right decisions.
For example, how can you communicate to a user what level of certainty or accuracy is behind an output? How can you empower users to “try again”, easily generating fresh outputs until they get one that works. Even better, can your system leverage user feedback to improve the model over time?
You also want to consider transparency for the moments in between input and output. Just like humans, these robots often like a little time to think. Depending on a range of factors, the time between prompt and output can vary. Use the interface to set expectations. Be thoughtful about loading times and design meaningful transitions for state changes.
Finally, be transparent about pricing and setting the right expectations about billing. I personally find the pricing models for credits and bundles pretty complicated in a number of tools out there.
If you want your users to trust your tool, make sure they understand what they’re buying. Make costs, usage thresholds, and other billing-related parameters clear and visible. If you can, work with your cross functional partners to simplify your pricing structures based on testing and customer feedback.
I can’t stress this enough: people are using these tools to achieve a goal. Sure, there is a lot of opportunity to wow them with the technology “under the hood”, but ultimately they’re here to do something.
Your design delivers an experience. AI is the vehicle but probably not the destination. Depending on your product or feature, AI may just be one component in a symphony of technologies playing together for a desired outcome.
“Simplicity is about clarity of purpose.” — Paula Scher
Optimize for the primary jobs to be done and let the technology serve the goal, not the other way around. One great way to do this is to focus on a really great first-time user experience. The longer it takes for a new user to “figure it out” the more likely they will choose a different tool than yours. Make the value and use case crystal clear in your design — no technical manual necessary.
For example, the ChatGPT UI is elegantly simple with a clear hierarchy: a text input field and a send button are primary elements. A few sample prompts help get you started and help communicate what to expect. Design an experience that is immediately easy for a first time user to understand what to do.
Just because the technology “under the hood” is mind-blowingly complex, that doesn’t mean your design should be. In fact, simplicity is even more important when designing tools for AI.
“Our job as designers is to make the experience feel simple, even if the underlying systems are complex.” — Katie Dill
Ask yourself: what is the absolute simplest way to communicate with the user and have them complete their task? Keep your flow straightforward and your interface clear for maximum effect and user success.
The most usable tools center around one, maybe two, max three use cases. Tertiary elements and options should fold neatly behind progressive disclosure. Avoid adding unnecessary elements that may distract users from the primary experience. Precision, visual hierarchy, clear information architecture and other fundamentals of good design are key.
Minimal UI used in tools like ChatGPT are free from clutter. A good signal to noise ratio will minimize confusion, help the user focus on achieving their goal, and reduce their cognitive load.
Accessibility and inclusivity should always be priorities for designers and AI tools are no exception.
As forward-thinking creative problem-solvers, we should be inspired — no, dazzled — by the opportunities AI presents for accessibility and inclusion.
“AI has the potential to greatly improve the lives of people with disabilities by creating new assistive technologies, improving communication and language translation, and enabling greater independence.” — Timnit Gebru
We’re already seeing the role this type of technology is playing in the lives of people with a range of diverse needs. Some thrilling examples include AI-powered visual recognition that helps people with visual and sight impairments better navigate the world around them. Microsoft’s Seeing AI , for example, uses a sophisticated suite of technologies to describe people, objects, text, and other visual inputs in real time.
I’m also so excited about the potential for communication-enhancing tools that empower more people to more effectively and meaningfully connect with each other. Whether it’s tools that help better interpret speech for those with speech impediments or tools that help people who struggle with language to articulate themselves to others, AI technology is making massive impact in creating a more accessible and inclusive world.
As designers, we know how important accessibility and inclusion are for quality products. From the research & discovery phase through implementation and QA, accessibility should be top-of-mind.
When conducting user research, be sure to include people across a variety of backgrounds with a range of abilities. You’ll gain key insights that will help you design more inclusive and accessible experiences.
Your UI should follow accessibility best practices. Text should be legible, color combinations should meet contrast ratio thresholds. Make it easy for users to distinguish between critical elements on the screen. Create reasonably-sized buttons, input fields, and tap targets. If you can provide alternate palette and style themes like dark mode and high-contrast modes, even better!
Consider how to optimize for a range of inputs including keyboard, touch, assisted pointer devices, and voice. Make it easy for users to engage with your tool in the way they prefer seamlessly.
On the output side, design thoughtfully for alternative formats like text-to-speech, screen readers, captions for videos, alt text for images, etc. Ensure accessible formatting for text that scales elegantly to the user’s preferences.
Don’t forget the importance of good UX-writing and content design, either. Be clear and concise with language. Avoid using technobabble or jargon. Of course, making sure your UX copy works well with translation tools is an inclusive way to broaden your audience.
Brush up on industry standard guidelines and best practices like those outlined in Web Content Accessibility Guidelines (WCAG) Better yet, you can get an audit from accessibility specialists that will ensure you’re designing for global usability!
One final principle I would like to highlight (and one that I haven’t seen as much in other lists) is the element of play. While focusing on utility and usability are fundamental first priorities, we shouldn’t lose sight of the potential for delight.
“Any sufficiently advanced technology is indistinguishable from magic.” — Arthur C. Clarke
Pardon my blue language, but this $#!7 is ✨magic✨ The ability to converse with an artificial intelligence that’s hooked up to an unimaginable wealth of human knowledge and then get it to spit out a beautifully-rendered image of Nicholas Cage drinking with an otter in a space suit? Sorcery.
Great design is about driving an emotion. How can designers convey some of that sense of wonder surrounding these magical tools? Without going overboard, look for opportunities to connect the user to the magic in a way that echoes the brand tone and promise of your product.
Fold delight into key moments throughout the user experience through thoughtful interaction design, clear state transitions, and anticipatory UI that meets them more than halfway. Communicate brand personality with playful animations, joyful content moments — the possibilities are endless!