Smart UX for Web-Apps: Intuitive & Efficient with AI

AI features are on the rise in our web applications—mostly in the form of chat integrations. But AI can do much more than just chat. What if we leveraged the strengths of AI models, especially their ability to understand text and generate structured data, exactly where they can take tedious tasks off our hands?

We’re talking about lengthy and complex forms. Sascha Lehmann from Thinktecture has the answer and will demonstrate, using a real-world example, how well-designed AI features and UX concepts can make filling out web forms effortless. Discover how a transparent, intuitive, and convincing user experience is created.

Transcript

1. Smart UX for Web-Apps Intuitive & Efficient with AI 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/     Smart UX for Web-Apps Intuitive & Efficient with AI
3. Definition Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with AI
9. Quelle: https://www.youtube.com/watch?v=-P-ein58laA Smart UX for Web-Apps Intuitive & Efficient with AI
11. Smart UX for Web-Apps Intuitive & Efficient with AI
12. • Familiar mental model • Uses natural language • Easy to implement • Easy to iterate and refine Advantages of chat interfaces Smart UX for Web-Apps Intuitive & Efficient with AI
13. Smart UX for Web-Apps Intuitive & Efficient with AI
14. Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with 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 Smart UX for Web-Apps Intuitive & Efficient with AI
17. Large Language Models Smart UX for Web-Apps Intuitive & Efficient with AI
18. Überblick Generative AI Smart UX for Web-Apps Intuitive & Efficient with AI
19. • Can understand and process different types of information (modalities) • Text • Video • Audio • Images Multi Modale Modelle Smart UX for Web-Apps Intuitive & Efficient with AI
20. • Natural language understanding and generation • Knowledge integration and reasoning • Task versatility and adaption • Contextual memory • Pattern recognition and analysis Strengths of LLMs Smart UX for Web-Apps Intuitive & Efficient with AI
21. Example: Smart Forms Smart UX for Web-Apps Intuitive & Efficient with AI
22. The Scenario LLM Mapping Smart UX for Web-Apps Intuitive & Efficient with AI
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 Smart UX for Web-Apps Intuitive & Efficient with AI
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” Smart UX for Web-Apps Intuitive & Efficient with AI
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 Smart UX for Web-Apps Intuitive & Efficient with AI
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 Smart UX for Web-Apps Intuitive & Efficient with AI
28. Digital context • Visual Elements • Interactive Elements • Design Principles • The visual language that communicates the UX • Follows patterns and conventions • How it looks UI Smart UX for Web-Apps Intuitive & Efficient with AI
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 Smart UX for Web-Apps Intuitive & Efficient with AI
31. Sascha Lehmann sascha.lehmann@thinktecture.com Thank you!