1

Human-Computer Interaction

Web Interface & Natural Language

2

Web Interface Design

• Planning your presentation (flow, navigation)

• Navigation samples

3

Navigation Samples

Menu navigation represents a technique whereby information is structured under major topic headings and sub-headings.

Users navigate down a particular path/hierarchy and back out of that path using visible menus. The menu and path remains visible and is evident.

In the first screen shot (Williams-Sonoma), users select one of only a few menu options ("about us"). The path selected is then highlighted across a top-level menu bar, with the options for various sub-levels available for selection.

4

5

Notice in the second sample how color and fading is used to highlight activated from deactivated menu items.

6

Tab-stop navigation

represents a technique whereby information is again structured under major headings and sub-headings, but the user accesses that information using a file-folder tab metaphor. The major tab headings are always visible.

7

8

Index navigation

represents a technique whereby information is structured within a table of contents. All potential selections are visible.

Users will not be forced to "dig" through multiple levels of menus to find a specific piece of information.

As a result, the interface may be more usable, but tends to look cluttered or "busy" from a visualization perspective. It is possible to design by one of the prior navigation techniques (e.g, tab-stop), then provide an index for those users who prefer this method of information access.

9

10

Pull-Down Menu

navigation employs javascripting to direct users to different parts of a web site.

11

Iconic navigation

is a technique where the user can select a visual representation of specific items they wish to link to. Sometimes the icon is accompanied with a text label.

For clarity, both text and iconic representations are recommended.

12

13

Page Turning

navigation is useful for creating tutorials or content structured according to units or chapters. It may be difficult to create an entire site with this navigation approach, but sections of a site are often accessed in such a manner.

14

15

Agents & Natural Language

• Agent = computer program which performs certain tasks for you (the ones you do not want to do/ cannot do by yourself -- sorting 5000 junk mails ).

• What kind of interface an agent should have?

• Conversational interface style – this involves natural language.

16

Natural Language

• Natural language is any language that humans use to communicate to each other such as Thai, English, Chinese etc.

• It is opposite to artificial language or the language written to work with computer such as Pascal, C, Java etc.

17

Natural Language Understanding

• SHRDLU (1970)

18

SHRDLU Dialog• pick up a big red block.

OK. (does it) grasp the pyramid. I DON'T UNDERSTAND WHICH PYRAMID YOU MEAN. find a block which is taller than the one you are holding and put it into the box. BY "IT", I ASSUME YOU MEAN THE BLOCK WHICH IS TALLER THAN THE ONE I AM HOLDING. OK. (does it) what does the box contain? THE BLUE PYRAMID AND THE BLUE BLOCK. what is the pyramid supported by? THE BOX. how many blocks are not in the box? FOUR OF THEM. is at least one of them narrower than the one which i told you to pick up? YES, THE RED CUBE.

19

Difficulties in Computer Language Understanding

• Multiplicity in meanings or senses – Ambiguity (multiple senses), polysemy, homonymy,

etc.

• Interpretation of pronouns• Ill-formedness of natural language

– False starts, ungrammaticality, wrong words

• Difficulty of imprecise meanings– Vagueness, Indirectness

• Pervasive use of world knowledge in cooperative communication – The common sense problem

20

Eliza (1966) – The Doctor is InTELL ME YOUR PROBLEMMen are all alike. IN WHAT WAY? They're always bugging us about something or other. CAN YOU THINK OF A SPECIFIC EXAMPLE? Well, my boyfriend made me come here. YOUR BOYFRIEND MADE YOU COME HERE He says I'm depressed much of the time. I AM SORRY TO HEAR YOU ARE DEPRESSED It's true. I am unhappy DO YOU THINK COMING HERE WILL HELP YOU NOT TO BE

UNHAPPY I need some help, that much seems certain. WHAT WOULD IT MEAN TO YOU IF YOU GOT SOME HELP Perhaps I could learn to get along with my mother. TELL ME MORE ABOUT YOUR FAMILY My mother takes care of me.

21

Eliza continuedWHO ELSE IN YOUR FAMILY TAKES CARE OF YOU My father. YOUR FATHER You are like my father in some ways. WHAT RESEMBLANCE DO YOU SEE You are not very aggressive but I think you don't want me to notice that. WHAT MAKES YOU THINK I AM NOT VERY AGGRESSIVE You don't argue with me. WHY DO YOU THINK I DON'T ARGUE WITH YOU You are afraid of me. DOES IT PLEASE YOU TO BELIEVE I AM AFRAID OF YOU My father is afraid of everybody. WHAT ELSE COMES TO YOUR MIND WHEN YOU THINK OF YOUR

FATHER Bullies. DOES THAT HAVE ANYTHING TO DO WITH THE FACT THAT YOUR

BOYFRIEND MADE YOU COME HERE

22

ELIZA script

key: if 3decomp: * if *

reasmb: Do you think its likely that (2) ?

reasmb: Do you wish that (2) ?

reasmb: What do you know about (2) ?

reasmb: Really, if (2) ?

key: dreamed 4 decomp: * i dreamed *

reasmb: Really, (2) ?

reasmb: Have you ever fantasized (2) while you were awake ?

reasmb: Have you ever dreamed (2) before ?