Smarte UX für Web-Apps: Intuitiv und effizient durch AI

AI-Features sind auch in unseren Webanwendungen auf dem Vormarsch – meist in Form von Chat-Integrationen. Doch AI kann weit mehr als nur chatten. Was wäre, wenn wir die Stärken von AI-Modellen, insbesondere das Verständnis von Texten und das Generieren von strukturierten Daten, genau dort nutzen, wo sie uns lästige Arbeit abnehmen kann?

Die Rede ist von langatmigen und komplex auszufüllenden Formularen. Sascha Lehmann von Thinktecture hat eine Antwort darauf und zeigt anhand eines Praxisbeispiels, wie durchdachte AI-Features und UX-Konzepte das Ausfüllen von Webformularen zum Kinderspiel machen. Erleben Sie, wie eine transparente, verständliche und überzeugende Nutzererfahrung entsteht.

Transcript

1. Smarte UX für Web-Apps Intuitiv und effizient durch AI Sascha Lehmann @derLehmann_S Consultant
2. Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/ Smarte UX für Web-Apps Intuitiv und effizient durch AI
3. Definition Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
9. Smarte UX für Web-Apps Intuitiv und effizient durch AI Quelle: https://www.youtube.com/watch?v=-P-ein58laA
11. Smarte UX für Web-Apps Intuitiv und effizient durch AI
12. • Familiar mental model • Uses natural language • Easy to implement • Easy to iterate and refine Advantages of chat interfaces Smarte UX für Web-Apps Intuitiv und effizient durch AI
13. Smarte UX für Web-Apps Intuitiv und effizient durch AI
14. Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
17. Large Language Models Smarte UX für Web-Apps Intuitiv und effizient durch AI
18. Überblick Generative AI Smarte UX für Web-Apps Intuitiv und effizient durch AI
19. • Can understand and process different types of information (modalities) • Text • Video • Audio • Bilder Multi Modale Modelle Smarte UX für Web-Apps Intuitiv und effizient durch AI
20. • Natural language understanding and generation • Knowledge integration and reasoning • Task versatility and adaption • Contextual memory • Pattern recognition and analysis Strengths of LLMs Smarte UX für Web-Apps Intuitiv und effizient durch AI
21. In an Angular Form Leverage the power Smarte UX für Web-Apps Intuitiv und effizient durch AI LLM Mapping
22. Building a hidden prompt Smarte UX für Web-Apps Intuitiv und effizient durch AI System Message User Message Agent Message
23. Beispielanwendung animieren <Demo/>
24. 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 Smarte UX für Web-Apps Intuitiv und effizient durch AI
25. • Traceability? • What comes from me and what from the AI? • Which fields did I fill in again? • Undo / Redo • Visually distinguishable Problems that occur Smarte UX für Web-Apps Intuitiv und effizient durch AI
26. Digital context • Visual Elements • Interactive Elements • Design Principles • The visual language that communicates the UX • Follows patterns and conventions • How it looks UI Smarte UX für Web-Apps Intuitiv und effizient durch AI
27. Beispielanwendung animieren <Demo/>
28. 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 • How the user what is happening • Use established patterns and like to learn from the “big ones” Conclusion Smarte UX für Web-Apps Intuitiv und effizient durch AI
29. Sascha Lehmann sascha.lehmann@thinktecture.com Dankeschön! @derLehmann_S sascha.lehmann@thinktecture.com https://www.thinktecture.com/thinktects/sascha-lehmann/