Chapter 6 - GUI and Interactive Input Methods
Uploaded by
Tanveer Ahmed HakroChapter 6 - GUI and Interactive Input Methods
Uploaded by
Tanveer Ahmed HakroChapter 6
GUI and Interactive Input Methods
Dr. Umair Ali Khan
1
Graphical User Interfaces and
Interactive Input Methods
• Why Interface Matters
• A Few Questions
• Interface styles
• Purpose of UI Design
• Brief History of UI
• Characteristics of UI Design
• UI Design is Difficult
• Language Model for Command Line and UI’s
• Design Methodology
2
Why Interface Matters…
Not just applicable to computer interfaces!
3
A Few Questions
• What are some interfaces you like and dislike?
• How could “intelligent” interfaces help or get in the way of users?
• Is it possible to accommodate users of all levels with a single
interface?
• What is your ideal interface?
– general use (operating system / work environment)
– specific applications
4
An Extreme
• “Microsoft Word” at its worst (Microsoft)
5
Interface styles
• Some of Interface styles
– text input
– direct manipulation
– point & click, drag & drop
– adaptability
– “intelligent” interfaces, agents
– social interface
– general purpose and specific task design
• A successful interface designer must know her users and
their priorities, the computing environment, and the task
domain
6
Purpose of UI Design
The user interface is the key to productivity
• Provide usable, functional, safe, efficient systems for people
• Concentrate on user-centered design:
– design for your user, not your hardware
• UI now much more important than features
High Level goals of UI
• Make easy things easy; make hard things possible
• Optimize human factors
– Make your interface comfortable, as well as attractive
• Maximize speed of learning
• Maximize speed and ease of use
• Minimize error rate
• Enhance the User Experience!
• Consistency with user’s expectation
Note: These goals cannot all be fully accommodated in the same interface. We must 7
determine which goals are most important for the user and the purpose of the application.
Characteristics of UI Design
The nature of the beast
• Collaborative
• Iterative
• Multi-disciplinary
Players in the UI design game
• Hardware engineers
– devices for graphics, video, audio, force feedback…
• Human Factors engineers
• Graphic designers
• Perceptual psychologists
• Cognitive scientists
• Software engineers
• UI designers 8
UI Design is Difficult
• In many modern programs, the user interface code constitutes the bulk of program, i.e., 70-80%
• For the most part, the user interface is the key to the success or failure of a program
• Computer speed increases by Moore’s law, humans do not
• Creating a good UI is often harder than software engineering because UI design requires much
more than software engineering skills
• Some people believe UI design is unimportant because they misunderstand the design
process/methodology
• Nowadays, software companies can be very picky about choosing who designs their user
interfaces because the user interface defines the product
9
Computer vs. Human
Performance
Goal: increase bandwidth to the brain
10
Language Model for Command Line and UI’s
A user interface is not static – it is a time-dependent dialogue between user and
machine, i.e. a communication protocol
• User(s) computer ≠ computer user(s)
– two different but related languages
• Interfaces may have multiple channels operating in parallel (e.g., voice recognition). This
is called multimodal interaction
Can think of dialogue in grammatical terms we know from programming
• Lexical Level, lexemes/tokens
• Syntactical Level, syntax rules
• Semantic Level, meaning of a statement
Conceptual level
Meaning
Functional/semantic level
Sequencing/syntactical level Look
Form and
Binding/lexical level Feel
11
Language Model for Command Line and UI’s
Meaning of an interface, its semantics
• Conceptual level:
– cognitive uses, models, and metaphors; application objects
and operations
• Functional level:
– each function’s semantics: including pre-post- and error-
conditions
Form of an interface, its “look and feel”
• Interaction sequencing level:
– ordering and interlacing of inputs and outputs, syntax
• Binding level:
– how input and output units of form are actually created from
hardware primitives, lexemes 12
Language Model for Command Line and UI’s
Key points
• Defining lexemes is usually easy for small interface, especially
Virtual Reality (VR)
– creating a user interface for a large application is essentially
complexity management
– in VR applications we must also deal with the problems of
parallelism and time coherence
• Command syntax and semantics tend to be more complicated than
lexemes
• Often helpful to have a machine to represent a sequencing of lexemes
to make a complete command.
• This design model may seem excessively rigid, but a good UI design
is a formal process resulting in a good architecture.
13
Design Methodology
The overall steps
• Analyze
• Formalize
• Synthesize
• Evaluate
• Implement
• Test
For each step in design
• Consider multiple alternatives
• Choose the one which best matches
– user characteristics
– design objectives
– functional requirements
• Rapid prototype early and often
14
Design Methodology
Analyze
• Requirements definition
• User(s) definition
– novice, casual user, power user…
• Working environment
– office, home, school…
Formalize
• Define design goals
Synthesize
• Conceptual design
• Semantic design
• Dialogue design
• Syntactic design
• Lexical design
• Graphic and other design modalities
• Documentation design
15
Design Methodology
Evaluate
• Design review
Implement
• Prototyping
• Implementation
• Software debugging
Test
• User interface debugging
• Usability testing
16
Design Methodology
Process model
• “Waterfall” model, a step-by-step approach, a pipeline; for user interface
design
• Model is not a hierarchy: has feedback loops
Analyze
Formalize
Synthesize
Evaluate
Implement
Test
17
UI Design Guidelines
