AI trifft auf UX Multi-Modal Models für smarte Web-Apps Sascha Lehmann @derLehmann_S Consultant 

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/ AI trifft UX Multi-Modal Models für smarte Web-Apps 

Definition AI trifft UX Multi-Modal Models für smarte Web-Apps 

Realworld example – Restaurant visit • The restaurant's color scheme and branding • The layout and design of the menu • The presentation of the food • The uniforms of the staff • The table settings and decor • The signage and typography used UI AI trifft UX Multi-Modal Models für smarte Web-Apps 

Digital context • Visual Elements • Interactive Elements • The visual language that communicates the UX • Design Principles • Proximity • Alignment • Etc. • Follows patterns and conventions • Good UI is both beautiful AND functional UI AI trifft UX Multi-Modal Models für smarte Web-Apps 

Realworld example – Restaurant visit • The ease of finding the restaurant is UX • The welcome you receive at the door is UX • The menu's clarity and organization is UX • The comfort of your chair is UX • The time it takes to get your food is UX • The overall satisfaction after your meal is UX UX AI trifft UX Multi-Modal Models für smarte Web-Apps 

Digital context • Usability - How easy is it to use? • Accessibility - Can everyone use it? • Performance - How well does it work? • Design - How does it feel? • Functionality - Does it solve the user's problem? • Emotion - How does it make users feel? UX AI trifft UX Multi-Modal Models für smarte Web-Apps 

A little checklist ❑ Solves real problems ❑ Is intuitive to use ❑ Creates positive emotions ❑ Meets user needs efficiently ❑ Is memorable for the right reasons Good UX AI trifft UX Multi-Modal Models für smarte Web-Apps 

Quelle: https://www.youtube.com/watch?v=-P-ein58laA AI trifft UX Multi-Modal Models für smarte Web-Apps 

No content

AI trifft UX Multi-Modal Models für smarte Web-Apps 

• Familiar mental model • Uses natural language • Easy to implement • Easy to iterate and refine Advantages of chat interfaces AI trifft UX Multi-Modal Models für smarte Web-Apps 

AI trifft UX Multi-Modal Models für smarte Web-Apps 

AI trifft UX Multi-Modal Models für smarte Web-Apps 

• Too much cognitive load • How to phrase requests • Mental effort to formulate • Unnecessary back and forth • Context Management • Do what I want, not what I say • Unclear system capabilities Disadvantages of chat interfaces AI trifft UX Multi-Modal Models für smarte Web-Apps 

A little checklist ❑ Solves real problems ❑ Is intuitive to use ❑ Creates positive emotions ❑ Meets user needs efficiently ❑ Is memorable for the right reasons Good UX AI trifft UX Multi-Modal Models für smarte Web-Apps 

Large Language Models AI trifft UX Multi-Modal Models für smarte Web-Apps 

Überblick Generative AI AI trifft UX Multi-Modal Models für smarte Web-Apps 

• Can understand and process different types of information (modalities) • Text • Video • Audio • Images Multi Modale Modelle AI trifft UX Multi-Modal Models für smarte Web-Apps 

• Natural language understanding and generation • Knowledge integration and reasoning • Task versatility and adaption • Contextual memory • Pattern recognition and analysis Strengths of LLMs AI trifft UX Multi-Modal Models für smarte Web-Apps 

Example: Smart Forms AI trifft UX Multi-Modal Models für smarte Web-Apps 

The Scenario LLM Mapping AI trifft UX Multi-Modal Models für smarte Web-Apps 

What do we need to make it work? Building Blocks System- Message / Prompt User Message Agent Message • LLM needs to know the structure of our form and the meaning of the fields • LLM needs instructions what to do and how we want the answer to be structured. • LLM needs the data it should work with • Parse / Fill results into form AI trifft UX Multi-Modal Models für smarte Web-Apps 

Building a hidden prompt System Message User Message Agent Message “Give an answer with only the following lines and values derived from USER_MESSAGE” AI trifft UX Multi-Modal Models für smarte Web-Apps 

Beispielanwendung animieren 

A little checklist ❑ Solves real problems ❑ Is intuitive to use ❑ Creates positive emotions ❑ Meets user needs efficiently ❑ Is memorable for the right reasons Good UX AI trifft UX Multi-Modal Models für smarte Web-Apps 

• Traceability? • What comes from me and what from the AI? • Which fields did I fill in again? • Undo / Redo • Visually distinguishable Problems that occur AI trifft UX Multi-Modal Models für smarte Web-Apps 

Digital context • Visual Elements • Interactive Elements • Design Principles • The visual language that communicates the UX • Follows patterns and conventions • How it looks UI AI trifft UX Multi-Modal Models für smarte Web-Apps 

Beispielanwendung animieren 

Smart UX with AI • When we integrate AI-Features in our web apps they should address real problems • Do not pursue a technology for their own sake • Use the strengths of Large Language Models in combination with structured data • Think out of the box • Show the user what is happening • Use established patterns and like to learn from the “big ones” Conclusion AI trifft UX Multi-Modal Models für smarte Web-Apps 

Sascha Lehmann [email protected] Dankeschön!