Various Interface Styles

各种 接口 样式
COURSE LEARNING OUTCOMES:
 Identify the concept of user interface
design to elevate technical complexity for
usable product that accepted by user. (C3,
PLO1)
Interaction Styles
• Command Line Interface命令行界面
• Menus菜单
•Natural Language自然语言
•WIMP
• Question & Answer Dialogue 问答对
话
• Form-Fill and Spreadsheet表格填写
和电子表格
• Point and Click interfaces 点和点击
界面
• 3D interfaces
• Web navigation导航
 Command Line Interface

 includes keyboard shortcuts and function

keys.
 simple, quick
 developed from Teletypewriters (TTY)
 not for complex tasks
 useful for operating system tools,
compilers, …
Screenshot of Apple Computer's CommandShell
Prepared by Mdm Tan Pei Yee in A/UX 3.0.1.
Screenshot of the MATLAB 7.4 command-line interface and GUI.
Prepared by Mdm Tan Phei Yee
 Menu
 Set of options displayed on the screen.
 Options visible
 less recall - easier to use
 – rely on recognition so names should be meaningful

 Selection by:
 numbers, letters, arrow keys, mouse
 – combination (e.g. mouse plus accelerators)

 Often options hierarchically grouped

 – sensible grouping is needed
 Restricted form of full WIMP system
 Menu Interaction
 Menu interaction: a human-computer
interaction method in which a list of system
options is provided and a specific command is
invoked by user selection of a menu option.
 Pop-up menu: a menu-positioning method that
places a menu near the current cursor position.
 Drop-down menu: a menu-positioning method
that places the access point of the menu near the
top line of the display:
 When accessed, menus open by dropping down onto
the display.
 Visual editing tools help designers construct menus.
 Menu Interaction (Cont.)
 Guidelines for Menu Design
 Wording: meaningful titles, clear command
verbs, mixed upper/lower case.
 Organization: consistent organizing
principle.
 Length: all choices fit within screen length.
 Selection: consistent, clear and easy
selection methods.
 Highlighting: only for selected options or
unavailable options.
Menu Interaction (Cont.)
 Form fills

 Primarily for data entry or data retrieval

 Screen like paper form.
 Data put in relevant place
 Requires
 – good design
 – obvious correction facilities
 Spreadsheet
 first spreadsheet VISICALC, followed by
Lotus 1-2-3 , MS Excel most common today
 sophisticated variation of form-filling.
 – grid of cells contain a value or a formula

 – formula can involve values of other cells

 e.g. sum of all cells in this column

 – user can enter and alter data spreadsheet

maintains consistency
Prepared by Mdm Tan Phei Yee
 Form Interaction
 Form interaction: a highly intuitive
human-computer interaction method
whereby data fields are formatted in a
manner similar to paper-based forms.
 Allows users to fill in the blanks when
working with a system.
Form Interaction (Cont.)
 WIMP Interfaces
 WIMP: Windows, Icons, Menus, Pointers
– developed at Xerox Parc in the 1970s
– first used commercially by Apple
– now industry standard
 Window
– a rectangular part of the screen
– can be moved and resized
– can cover other windows
 Icon
– a graphical representation of an object
– can be dragged and dropped
 Menu
– a list of command buttons
– pull-down or pop-up
 Pointer
– mouse or similar pointing device
-Example: Text pointer and Mouse pointer
Prepared by Mdm Tan Phei Yee
 Natural Language Interaction
 Natural language interaction: a human-
computer interaction method whereby
inputs to and outputs from a computer-
based application are in a conventional
spoken language such as English.
 Based on research in artificial intelligence.
 Current implementations are tedious and
difficult to work with, not as viable as other
interaction methods.
 Natural Language Interaction

 Applications for NLI

 Speech Input
 Hands-free operation
 Poor Lighting Situations

 Mobile Applications

 In the home

 Patients and disabled

 Speech Output
 On-board navigational systems
 Natural Language Interaction
 Two areas of development
 Speech recognition
 Semantics
 Grammar issues
 Vague meanings

 Contradictory statements
 Question/Answer and Query
Dialog
 Question/answer interfaces
 – user led through interaction via series of questions
 – suitable for novice users but restricted functionality
 – often used in information systems
 Query languages (e.g. SQL)
 – used to retrieve information from database
 – requires understanding of database structure and
 language syntax, hence requires some expertise
 Question/ Answer dialog
 Interaction step in Question and Answer
 Must have 'default' so that consumers can
make choices easily
 Point and click interfaces

 used in ..
 – multimedia
 – web browsers
 – hypertext
 just click something!
 – icons, text links or location on map
 • minimal typing
 3D interfaces
 virtual reality
 ‘ordinary’ window systems
 – highlighting

 – visual affordance

 – indiscriminate use just confusing!

 3D workspaces
 – use for extra virtual space

 – light and occlusion give depth

 – distance effects
(Source - Input Output Devices, UCL)
Interaction Styles - Web Navigation

 Two basic interaction styles

 Link-based navigation
 Sensitive to articulatory distance
 Ambiguous link labels increase the gulf of
evaluation
 Search
 Sensitive to semantic distance
 Inadequate search engine algorithms increase the
gulf of execution
 Slight advantage in development of mental models
“The primary purpose of web navigation is
to help people to move forward. It is not to
tell them where they have been, or where
they could have gone.” – Gerry McGovern
 Trend towards
more focus on local
navigation
Few global links

Product specific
local navigation
 Limited global
options

Contextually
sensitive local
navigation
Activity
 Group Discussion
 In your Group, use the interaction framework to analyze
the interaction involved in the various interface styles:
 Command Line Interface

 Menus

 WIMP

 Natural language

 Question/Answer Dialog

 Form-fills and spreadsheet

 Point-and-Click interface

 3D interfaces

 Web navigation

 Present Your Findings

Thank You
 Command Line Interface
ADVANTAGES
Suitable for repetitive tasks
Advantageous for expert users
Offer direct access to system
functionality
Efficient and powerful
DISADVANTAGES
Low command retention
Steep learning curve
High error rates
Heavy reliance on memory

Not encumbered with graphic Frustrating for novice users

controls
•Low visual load
•Not taxing on system resources
 Menu
ADVANTAGES DISADVANTAGES
Low memory requirements Rigid and inflexible navigation

Self-explanatory Inefficient for large menu

navigation

Easy to undo errors Inefficient use of screen real

estate

Appropriate for beginners Slow for expert users

 Form Interaction
ADVANTAGES DISADVANTAGES
Low memory requirements Require valid input in valid
format

Self-explanatory Require familiarity with interface

controls

Can gather a great deal of Can be tedious to correct

information in little space mistakes

Present a context for input

information
 Question/ Answer dialog
ADVANTAGES DISADVANTAGES
Low memory requirements Require valid input supplied by
user

Self-explanatory Require familiarity with interface

controls

Simple linear presentation Can be tedious to correct mistakes

Easy for beginners