HCI: The UI of AI DevFestYYC 2024

Slide 1

Slide 1 text

Human Computer Interaction : The UX of AI Devfest YYC - 2024

Slide 2

Slide 2 text

Buttons +

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

A user interface (UI) is simply how you interact with a machine, device, or software. It's the point of contact where you give instructions and receive information.

Slide 6

Slide 6 text

A Brief (ish) History of UI

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Punch Cards Yep - How computers think Nope - Time consuming to create - Limited command scope - Immutable

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Text UI Yep - Uses “human” language - Very fast - Powerful commands through chaining Nope - Diﬃcult to remember - Hard to know what’s “possible” - Linear process/chain of thought

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Graphical User Interface Yep - Low “memorization” - Powerful tools for complex workﬂows - Mimics analogue interfaces - Appears simple & “easy” Nope - Pictograms (icons) meaning must be learned - Organization can be complicated - Limited screen space - Slow & distracting

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

Contextual Interface Yep - Low cognitive load (only what matters now) - Combines physical & digital, easily understood Nope - Complex to produce - Needs special hardware - Triggers are hard to deﬁne

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

Voice/Ambient UI Yep - Understands language & verbal concepts (intent) - Hands & eyes free Nope - Typically interactions are very slow - Open to misinterpretation - Diﬃcult to know what’s possible

Slide 20

Slide 20 text

What’s your question? Human Computer Interaction 2024 edition

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

Prompt: Adjective done without delay; immediate. "the surfer would have died but for the prompt action of two paramedics"

Slide 23

Slide 23 text

Key components of a good LLM prompt: Task instruction: Clearly state the desired action, like "Summarize this text", "Write a poem about...", or "Explain the concept of...". Contextual information: Provide relevant background details or speciﬁc data points to help the LLM understand the situation. Example prompts (few-shot prompting): If necessary, include a couple of example inputs with the desired outputs to show the LLM the format you expect. Constraints or guidelines: Specify any limitations on the response, such as length, tone, or style. Open-ended questions: For more in-depth responses, ask questions that encourage explanation and reasoning.

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

Poor Approach 5 reasons why we shouldn’t rely on prompts

Slide 26

Slide 26 text

Goals over questions 01

Slide 27

Slide 27 text

Asking what we want 02

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

No content

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

Asking what we want 02

Slide 34

Slide 34 text

What’s not said 03

Slide 35

Slide 35 text

Lacking Detail 05

Slide 36

Slide 36 text

Make me a sandwich Gemini: Create an image of a bacon and egg breakfast sandwich

Slide 37

Slide 37 text

Make me a sandwich Gemini: create an image of: A breakfast sandwich with bacon, fried egg, garlic mayo, arugula, tomato jam, on sourdough bread.

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

Humans talk funny

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

But why???

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

Let’s do better!

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

Fully Hidden Completely remove the prompt interface, create the correct prompts behind the scenes. Get Context Add information that you know about the user, task or goal to provide details to the prompt. Builder Create prompts based on separate blocks of information collected through traditional UI 01 02 03

Slide 46

Slide 46 text

!! Warning: Race Condition There’s a very good chance this Javascript code will result in a race condition! This is likely NOT the intended result. Consider using async.all() to resolve the issue. Should I rewrite this for you?

Slide 47

Slide 47 text

Community Search Guided Real Estate Finder for places you haven’t been

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

→ As a real estate agent describe the pros and cons of moving to the Calgary metropolitan area for a family of 4 including two children ages 13 and 9. The family favors the outdoors, cultural activities, and quality restaurants. This should be a summary of no more than a paragraph

Slide 50

Slide 50 text

Event planning Guided inputs for the perfect evening

Slide 51

Slide 51 text

Help me plan a date night with my significant other for this weekend in Calgary. Include two activities that we could do together and suggest a place for dinner.

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

→ Generate a list of cuisine types available within 10km of the Calgary AB Canada city center. Maintain this list for later. → As an expert local guide in the city of Calgary AB Canada, plan a date night for two people to take place either Nov 16 or 17 2024. Suggest two activities, the first activity is described as adventurous and outdoorsy while the second activity is described as low-key and romantic. Select these from local events calendars, top 10 lists, and things to do in Calgary. Include restaurant recommendations for a random cuisine type selected from the previous list. Any restaurant selected must include dairy free menu options. Favor restaurants that take reservations.

Slide 55

Slide 55 text

There’s a catch

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

→ As an expert local guide in the city of Calgary AB Canada, plan a date night for two people to take place either Nov 16 or 17 2024. Suggest two activities, the first activity is described as adventurous and outdoorsy while the second activity is described as low-key and romantic. Select these from local events calendars, top 10 lists, and things to do in Calgary. Include restaurant recommendations for a random cuisine type selected from the previous list. Any restaurant selected must include dairy free menu options. Favor restaurants that take reservations. Any activity or restaurant recommendation must include a business or event name, a street address and a URL for more information.