Smarte UX für Web-Apps Intuitiv und effizient durch AI Sascha Lehmann @derLehmann_S Consultant

Consultant @ Thinktecture AG Sascha Lehmann @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/ Smarte UX für Web-Apps Intuitiv und effizient durch AI

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

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

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

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

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

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

Smarte UX für Web-Apps Intuitiv und effizient durch AI Quelle: https://www.youtube.com/watch?v=-P-ein58laA

No content

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

• 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

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

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

• 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

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

Large Language Models Smarte UX für Web-Apps Intuitiv und effizient durch AI

Überblick Generative AI Smarte UX für Web-Apps Intuitiv und effizient durch AI

• 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

• 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

In an Angular Form Leverage the power Smarte UX für Web-Apps Intuitiv und effizient durch AI LLM Mapping

Building a hidden prompt Smarte UX für Web-Apps Intuitiv und effizient durch AI System Message User Message Agent Message

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 Smarte UX für Web-Apps Intuitiv und effizient durch AI

• 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

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

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 • 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

Sascha Lehmann [email protected] Dankeschön! @derLehmann_S [email protected] https://www.thinktecture.com/thinktects/sascha-lehmann/