aiverse.design
Perspectivas
Principios Fundamentales de AIxDesign
I analysed 150 interactions to identify the 8 best practices you should follow when designing the UX for AI, especially conversational AI.
Kshitij Agrawal · 7 min read · Sep 7, 2024
Collection of all Consumer AI — source: aiverse
Principios Fundamentales de AIxDesign
Principios Fundamentales de AIxDesign
What are some common ways companies are designing for AI? How are they making sure the solution caters to all types of users?
General patterns for AI-UX can be categorised into the following —
I like to call them the "Altitudes of AI Design". We looked at this in depth previously, when asking ourselves, "at what level are we designing for AI?"
The following 8 practices are a mix of solutions at different altitudes.
Let's dive in!
What are some common ways companies are designing for AI? How are they making sure the solution caters to all types of users?
General patterns for AI-UX can be categorised into the following —
I like to call them the "Altitudes of AI Design". We looked at this in depth previously, when asking ourselves, "at what level are we designing for AI?"
The following 8 practices are a mix of solutions at different altitudes.
Let's dive in!
Principios Fundamentales de AIxDesign
Principios Fundamentales de AIxDesign
All AI-UX interactions in Humane ai pin — source: aiverse
Principios Fundamentales de AIxDesign
Principios Fundamentales de AIxDesign
Everyone's slapping AI on their products like it's hot sauce at a taco truck. But here's the thing - discoverability is key. It's not just about throwing a sparkly AI button on your app and calling it a day. Although right now, you could probably get away with that. Slap an AI sticker on a potato and people would buy it. But what happens when the hype is over?
You want your AI to be the cool neighbour that brings over a six-pack when you need it, not the weirdo who keeps popping up uninvited. If you're designing for a non-conversational AI-UX, which I believe to be the future, the "smart robot" needs to be integrated in the user's workflow. Accelerating their tedious tasks, or pain-points exactly when they're about to cry for help.
Everyone's slapping AI on their products like it's hot sauce at a taco truck. But here's the thing - discoverability is key. It's not just about throwing a sparkly AI button on your app and calling it a day. Although right now, you could probably get away with that. Slap an AI sticker on a potato and people would buy it. But what happens when the hype is over?
You want your AI to be the cool neighbour that brings over a six-pack when you need it, not the weirdo who keeps popping up uninvited. If you're designing for a non-conversational AI-UX, which I believe to be the future, the "smart robot" needs to be integrated in the user's workflow. Accelerating their tedious tasks, or pain-points exactly when they're about to cry for help.
Principios Fundamentales de AIxDesign
Principios Fundamentales de AIxDesign
What are some examples of entry touchpoints in live products?
In Arc, when you're searching, the "Browse for me" button is an accelerator. Going from knowing what to search to getting the answer, no in-between process of finding the right resource.
In Apple's new writing tools, a separate button is the shown when user highlights the text — further giving them the option to edit the text based on pre-defined commands.
In Grammarly, there are different entry points based on where you are in your workflow. If you're writing an email, the discovery is with the cursor. If you've highlighted a block of text, AI is available right there. And if you're writing in a doc, the discoverability is tucked away in the corner of the page.
What are some examples of entry touchpoints in live products?
In Arc, when you're searching, the "Browse for me" button is an accelerator. Going from knowing what to search to getting the answer, no in-between process of finding the right resource.
In Apple's new writing tools, a separate button is the shown when user highlights the text — further giving them the option to edit the text based on pre-defined commands.
In Grammarly, there are different entry points based on where you are in your workflow. If you're writing an email, the discovery is with the cursor. If you've highlighted a block of text, AI is available right there. And if you're writing in a doc, the discoverability is tucked away in the corner of the page.
Las capturas de pantalla anteriores son de nuestro libro electrónico de insights "Patrones de AI-UX en Tendencia", con más de 50 ejemplos y cada uno desglosado por las mejores prácticas.
Las capturas de pantalla anteriores son de nuestro libro electrónico de insights "Patrones de AI-UX en Tendencia", con más de 50 ejemplos y cada uno desglosado por las mejores prácticas.
Live examples from our library
Live examples from our library
2. Transparency of "magical" moments
2. Transparency of "magical" moments
All AI-UX interactions in Humane ai pin — source: aiverse
Overview
Overview
You're sitting there, waiting for this magic robot brain to spit out some genius answer. But you've got no clue what's happening behind the curtain. Is it thinking? Is it confused? Is it secretly judging your terrible spelling?
Meanwhile, the AI is crunching numbers like a beast, but it has zero idea that you're over there tapping your foot, checking your watch, and wondering if you should've just used Google like a normal person.
And that gap right there? That's where the magic happens in AI user experience. That's the stuff that makes or breaks the whole interaction.
You're sitting there, waiting for this magic robot brain to spit out some genius answer. But you've got no clue what's happening behind the curtain. Is it thinking? Is it confused? Is it secretly judging your terrible spelling?
Meanwhile, the AI is crunching numbers like a beast, but it has zero idea that you're over there tapping your foot, checking your watch, and wondering if you should've just used Google like a normal person.
And that gap right there? That's where the magic happens in AI user experience. That's the stuff that makes or breaks the whole interaction.
AI-UX interactions breakdown
AI-UX interactions breakdown
What are some examples of entry touchpoints in live products?
In Arc Search, the resources that are being scanned for the answer are shown, instantly giving user the trust of what's happening and whether or not they can rely on the curated answer.
In Figma, a separate loading status is displayed and the components are at reduced opacity to signal that the information is being generated "here".
An extension to this, Elicit has subtle blinking bars to indicate the loading, while also maintaining the aesthetic of not being "in the face" as it mostly performs bulk actions. Subtle yet informative.
In Photomath, all the loading behind the screens happen with a "scanning the image" animation. It's instant and the user knows something it's taken the input that the user wanted.
What are some examples of entry touchpoints in live products?
In Arc Search, the resources that are being scanned for the answer are shown, instantly giving user the trust of what's happening and whether or not they can rely on the curated answer.
In Figma, a separate loading status is displayed and the components are at reduced opacity to signal that the information is being generated "here".
An extension to this, Elicit has subtle blinking bars to indicate the loading, while also maintaining the aesthetic of not being "in the face" as it mostly performs bulk actions. Subtle yet informative.
In Photomath, all the loading behind the screens happen with a "scanning the image" animation. It's instant and the user knows something it's taken the input that the user wanted.
Las capturas de pantalla anteriores son de nuestro libro electrónico de insights "Patrones de AI-UX en Tendencia", con más de 50 ejemplos y cada uno desglosado por las mejores prácticas.
Las capturas de pantalla anteriores son de nuestro libro electrónico de insights "Patrones de AI-UX en Tendencia", con más de 50 ejemplos y cada uno desglosado por las mejores prácticas.
Live examples from our library
Live examples from our library
3. Manage user's expectations
3. Manage user's expectations
All AI-UX interactions in Humane ai pin — source: aiverse
Overview
Overview
Setting the right expectations of what the AI can do is very important, whether it be by explicitly defining it, handling the error states to direct the user on the right path.
There are two ways of managing user's expectations
1. Upfront - Before the user even starts using AI, knowing the capability of AI would be helpful for
2. Error handling - If the user does write something that doesn't make sense, then handling those errors would be needed.
Setting the right expectations of what the AI can do is very important, whether it be by explicitly defining it, handling the error states to direct the user on the right path.
There are two ways of managing user's expectations
1. Upfront - Before the user even starts using AI, knowing the capability of AI would be helpful for
2. Error handling - If the user does write something that doesn't make sense, then handling those errors would be needed.
AI-UX interactions breakdown
AI-UX interactions breakdown
What are some examples of entry touchpoints in live products?
Upfront
In Arc Search, the resources that are being scanned for the answer are shown, instantly giving user the trust of what's happening and whether or not they can rely on the curated answer.
In Figma, a separate loading status is displayed and the components are at reduced opacity to signal that the information is being generated "here".
Error handling
An extension to this, Elicit has subtle blinking bars to indicate the loading, while also maintaining the aesthetic of not being "in the face" as it mostly performs bulk actions. Subtle yet informative.
In Photomath, all the loading behind the screens happen with a "scanning the image" animation. It's instant and the user knows something it's taken the input that the user wanted.
What are some examples of entry touchpoints in live products?
Upfront
In Arc Search, the resources that are being scanned for the answer are shown, instantly giving user the trust of what's happening and whether or not they can rely on the curated answer.
In Figma, a separate loading status is displayed and the components are at reduced opacity to signal that the information is being generated "here".
Error handling
An extension to this, Elicit has subtle blinking bars to indicate the loading, while also maintaining the aesthetic of not being "in the face" as it mostly performs bulk actions. Subtle yet informative.
In Photomath, all the loading behind the screens happen with a "scanning the image" animation. It's instant and the user knows something it's taken the input that the user wanted.
Las capturas de pantalla anteriores son de nuestro libro electrónico de insights "Patrones de AI-UX en Tendencia", con más de 50 ejemplos y cada uno desglosado por las mejores prácticas.
Las capturas de pantalla anteriores son de nuestro libro electrónico de insights "Patrones de AI-UX en Tendencia", con más de 50 ejemplos y cada uno desglosado por las mejores prácticas.
Live examples from our library
Live examples from our library
—— And that's it for the AIxDesign best practices, thank you for reading! ——
—— And that's it for consumer AI,
thank you for reading! ——
Acortando la brecha entre el diseño y la inteligencia artificial
Acortando la brecha entre el diseño y la inteligencia artificial
Acortando la brecha entre el diseño y la inteligencia artificial
Lanzamos nuestro ebook de conocimientos (volumen 1), una colección
de más de 50 ejemplos recopilados de los mejores productos diseñados para IA.
¡Mejora tu juego!
Lanzamos nuestro ebook de conocimientos (volumen 1), una colección
de más de 50 ejemplos recopilados de los mejores productos diseñados para IA.
¡Mejora tu juego!
Lanzamos nuestro ebook de conocimientos (volumen 1), una colección
de más de 50 ejemplos recopilados de los mejores productos diseñados para IA.
¡Mejora tu juego!
Navegar
More coming soon, get notified &,
Subscribe to the Voyager.
© 2024 AIverse. Todos los derechos reservados.
Diseñando para la IA, Mejorando con IA