Putting people first: Applying GenAI design principles to GenAI-powered apps

Like many people, you’ve probably experimented with ChatGPT, DALL-E or Gemini to get summaries, images, instant answers, or design new apps. Generative Artificial Intelligence, or GenAI, has blended with our everyday lives. In late 2024, McKinsey reported 65% of respondents say their organizations regularly use GenAI in at least one business function — one third higher than the previous year. 

GenAI’s impact, opportunities, and risks

The mass public experimentation is also revealing some darker aspects of AI technology. On the less serious side, GenAI isn’t great at drawing hands and its renderings of people can look a little odd. Other outputs — like biased results, auto-generated deep fakes and false-fact hallucinations — can have more harmful implications.

“Can you create an image of a ragdoll cat astronaut? Make it pop-art”

As AI leaps forward, it leaves people vulnerable to new risks and threats. Engineers and designers in human-computer interaction (HCI) are noting how rapidly we’ve moved into a new era of human-AI Interaction. 

Looking at past user interaction (UI) paradigms throughout computer history puts the novelty of AI into perspective. In early computing, humans “talked” to computers by feeding them instructions in batches and waiting for them to execute. The UI was a single, unchanging point of contact: the punch card.

When we advanced to mainframes, a new paradigm emerged: command-based interactions. Users interacted with computers by entering commands. But, interactions remained minimal, and the point of entry was static and invariable.

Fast forward to today, where the graphical user interface (GUI) dominates UI. A screen full of pictures, text, and icons pose new challenges for usability. To improve HCI, Jakob Neilson proposed ten influential heuristics for interaction design. Principles like “consistency and standards,” “help and documentation,” and “flexibility and control,” are cornerstones of today’s UI that shapes the way people use computers and understand their outputs.

Challenges of designing for GenAI

GenAI introduces a new method of interaction, launching us into a whole new UI paradigm: the intent-based outcome specification. Instead of telling a computer how to do something, with GenAI, we tell it what outcome we expect from it. Our interactions with computers happen through easy natural language prompts. 

The flexibility of expression at the front end introduces generative variability at the back end. Computer outputs are no longer predictable or repeatable as they were in earlier eras, and the same input can produce several different results. This variability brings new risks, from inconsistencies in results to altogether make-believe GenAI hallucinations. 

This new context can render previous design principles virtually inapplicable. We therefore need to take a step back to remember the human side of human-AI interaction.

Design Principles for Generative AI

HCI experts are now asking: What new guidelines can effectively govern GenAI to mitigate risks and put control back in users’ hands? To help chart the new territory, Justin D. Weisz and other HCI specialists at IBM have proposed six new design principles for GenAI. 

Three of the principles address known issues of AI systems understood through the lens of GenAI (“New interpretations”) while three address new characteristics of GenAI systems (“New characteristics”). The new principles address two user goals: the exploration of GenAI possibilities within a domain and the optimization of GenAI-generated outcomes to accomplish specific tasks.

 

For Weisz et al, each design principle represents a method for minimizing user risk by making GenAI’s variability more explicit and introducing user control into the process. The six principles are:

• Design Responsibly: Make sure the system solves real user issues and minimizes user harms.
• Design for Mental Models: Communicate to users how to work effectively with GenAI.
• Design for Appropriate Trust & Reliance: Teach users to watch out for inaccuracies, biases, etc.
• Design for Generative Variability: Help users manage the production of varied outputs.
• Design for Co-Creation: Let users influence the process and collaborate with the GenAI system.
• Design for Imperfection: Help users understand and work with unexpected outputs.

Embracing and applying these new design principles to GenAI applications improves the end user experience. They prioritize human objectives by making design decisions that recognize GenAI’s unique characteristics and challenges. For front end engineers, the guidelines are swiftly becoming an ethical necessity for builders of GenAI applications.

Algolia’s AI-Generated Shopping Guides

Algolia software engineers have been applying the new design principles to Shopping Guides, a tool that lets website designers and marketers create tailored and relevant articles, product summaries, and comparisons to guide the shopping journey.

Shopping Guides relies on large language models (LLMs) that understand user intent together with machine learning to offer GenAI tools inside ecommerce user tools, producing relevant support materials faster.

UX Strategies for GenAI

Using publicly-available data from the Mauritshuis Museum, Algolia engineers used the new GenAI design principles to design a virtual explorer. Though not affiliated or officially endorsed by the museum, this experiment demonstrates how you can use shopping guides for non e-commerce use cases. Built entirely with Algolia tools, the prototype app lets users virtually explore the art collections of the world-renowned museum in the Hague.

While the museum experience differs from an ecommerce shopping experience, the Martishuis Museum app uses Shopping Guides to produce visitor guides. App designers used GenAI to generate background information, write summaries about artists, and explain the connections between artwork located in the exhibition halls. The visitor guides help users learn more about specific pieces within the vast art collection that they’re most interested in.

 

 

The GenAI guides are generated in the Algolia dashboard and then run live in the app. One of the first principles, Design Responsibly, encourages users to not overly rely on GenAI content without adequate forethought. To apply the principle, the app introduces conscious friction into the back end at several stages.

An intermediate drafting stage applies two additional principles: Design for Appropriate Trust & Reliance and Design for Imperfection. You’ve probably seen the “Are you sure you want to close this program?” popup. The question reasserts user control, by asking us to stop and think about what we’re doing.

Inserting a draft status step into Shopping Guides works in a similar way. It asks the user to review auto-generated content before publishing it live to the app or website. Knowing that GenAI sometimes introduces errors and inaccuracies, this step lets website designers edit and improve GenAI output to serve customers better.

The way information is sourced applies design principles as well. The Shopping Guide tool gathers product information from your Algolia index, and provides context for the LLMs that generate the content. By relying on indexes, the tool narrows the domain for GenAI output. This step teaches GenAI what end users of this museum are interested in, satisfying another design principle: Design for Mental Models.

Inside the tool, designers are asked to choose categories of products to feature in the shopping or visitor guide. In the Martishuis Museum app, one guide could focus exclusively on artwork located in the main exhibit hall. By selecting a category, the designer limits the emergent behaviors of the GenAI model, producing better results and enhancing the end user experience.

 

 

At this stage, website designers and marketers can also customize the prompts entered into the GenAI model. The tool lets users choose between “Natural,” “Friendly” and “Professional” tones and a range of different languages. These controls observe the Design for Co-Creation principle, enabling website designers to leverage the generative power of GenAI in relevant ways for their use case. 

 

After making these initial selections, the GenAI model in the Shopping Guides tool generates custom-generated headlines. Again, designers and marketers have control over the process and can select the headlines that are most relevant. This selection process lets marketers Design for Generative Variability, giving users multiple outputs to choose from. Pressing “Generate” runs the model and produces the desired guides.

All aspects of the user experience, whether automated or manually designed, has room for improvement. That’s why feedback mechanisms are so necessary. Shopping Guides lets users integrate feedback mechanisms, such as gathering user likes, dislikes and comments. The tool can also gather objective metrics automatically, such as which guides were used, when and where. These options help app and website builders improve the services, applying the Design for imperfection principle in a data-driven way.

When human-AI design principles are applied to GenAI content within Shopping Guides, users can set the context for GenAI outputs, fine-tune the prompts, review multiple outputs, edit content, and improve the process with feedback. When the user is satisfied, the final step is to publish the guide, letting end users access the content to learn more about the art collection.
 

Principle:	Strategy:	Example:
Design Responsibly	Expose or limit emergent behaviours	Choose categories to narrow content to specific areas (museum exhibit, artist, or era)
Design for Mental Models	Teach the AI about the user	Source topics (or products) from an Algolia index to establish context
Design for Appropriate Trust & Reliance	Add friction to the content generation process to avoid over-reliance on GenAI	Add friction to the content generation process to avoid over-reliance on GenAI
Design for Generative Variability	Leverage multiple outputs	From several custom-generated titles, draft the one(s) you want
Design for Co-Creation	Provide user controls that are relevant to the use case and technology	Fine-tune prompts for the desired tone and language
Design for Imperfection	Provide feedback mechanisms	Offer ways to improve outputs (via edit capabilities)

Making GenAI work for people

When using AI and GenAI, remember who you’re designing for. End users are humans, not machines. Applying UI principles to GenAI-powered application design makes your apps less risky, more customer-centric, and more useful. 

As the example of Algolia’s Shopping Guides demonstrates, applying UI principles empowers users who build front end user experiences. It gives them gain control over the content generation process and opportunities to make choices and shape the outcomes.

You can watch my entire presentation of this topic at from DevCon here. 

To learn more about Algolia’s AI-powered Shopping Guides, visit this link or contact Algolia for a demo.