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

Sascha Lehmann von Thinktecture zeigt, wie AI-gestützte UX-Konzepte den Umgang mit Web-Apps neu definieren. Erlebe, wie moderne AI-Modelle komplexe Nutzerinteraktionen vereinfachen, Eingaben intelligenter machen und Web-Apps auf das nächste Level heben – für eine User Experience, die überzeugt.

Transcript

1. AI trifft auf UX Multi-Modal Models für smarte Web-Apps Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S https://www.linkedin.com/in/sascha-lehmann sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ AI trifft UX Multi-Modal Models für smarte Web-Apps
3. Definition AI trifft UX Multi-Modal Models für smarte Web-Apps
4. 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
5. 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
6. 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
7. 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
8. 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
9. Quelle: https://www.youtube.com/watch?v=-P-ein58laA AI trifft UX Multi-Modal Models für smarte Web-Apps
11. AI trifft UX Multi-Modal Models für smarte Web-Apps
12. • 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
13. AI trifft UX Multi-Modal Models für smarte Web-Apps
14. AI trifft UX Multi-Modal Models für smarte Web-Apps
15. • 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
16. 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
17. Large Language Models AI trifft UX Multi-Modal Models für smarte Web-Apps
18. Überblick Generative AI AI trifft UX Multi-Modal Models für smarte Web-Apps
19. • 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
20. • 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
21. Example: Smart Forms AI trifft UX Multi-Modal Models für smarte Web-Apps
22. The Scenario LLM Mapping AI trifft UX Multi-Modal Models für smarte Web-Apps
23. 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
24. 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
25. Beispielanwendung animieren <Demo/>
26. 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
27. • 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
28. 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
29. Beispielanwendung animieren <Demo/>
30. 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
31. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön!