User Interface Development Human Interface Devices User Technology User Groups Accessibility.
User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into...
-
Upload
rhoda-adams -
Category
Documents
-
view
216 -
download
0
Transcript of User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into...
![Page 1: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/1.jpg)
User Interface Theory & Design
Lecture 6a
1
![Page 2: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/2.jpg)
User interface is everything the end user comes into contact with while using the system
To the user, the interface is the system
2
![Page 3: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/3.jpg)
User Interface◦ includes all the communications and instructions
necessary to navigate through a system, to enter input to the system, or to obtain output in the form of screen displays or printed reports.
3
![Page 4: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/4.jpg)
Why is User Interface Design important?◦ The user interface is what the user first sees
when they use a system – this is the ‘system’ to them
◦ If it has been designed well: The users are happy and satisfied with the system It will improve their productivity
◦ If it has not been designed well: it’s Windows
4
![Page 5: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/5.jpg)
The concept behind User Interface Design◦ Human Computer Interaction (HCI) describes the
relationship between computers and the people who use them to perform business-related tasks
5
![Page 6: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/6.jpg)
6
![Page 7: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/7.jpg)
The concept behind User Interface Design◦ User Interface Design needs to be centred around
the user Users are involved throughout the analysis and
design processes to provide input into the interfaces The iterative development cycle helps to facilitate
this
7
![Page 8: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/8.jpg)
Users work with a varied mix of screen or form input, screen or report output and data queries as they perform their day-to-day job functions.
Useful web site to read:◦ IBM’s Ease of Use white paper
Discussion on User Centred Design and design concepts
8
![Page 9: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/9.jpg)
The analyst must consider the following when designing user interfaces:◦ The interaction between the user and the
computer when designing the interface for: Processing the input Processing the output Starting the system Logging onto the system
9
![Page 10: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/10.jpg)
The analyst must consider the following when designing user interfaces:◦ The type of user that is using the system
Is it an expert user? (Someone who has spent considerable time using a computer)
Is it a novice user? (Someone who infrequently uses a computer)
10
![Page 11: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/11.jpg)
The Analyst must take into consideration everything the user comes into contact with while using the system:◦ Physically◦ Perceptually◦ Conceptually
11
![Page 12: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/12.jpg)
12
![Page 13: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/13.jpg)
Physical◦ What the user actually touches to use the system:
the keyboard, mouse, touch screen, light pen, reference manuals, printed documentation, data-entry forms
13
![Page 14: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/14.jpg)
Perceptual◦ What the user sees or hears: flashing messages,
beeps Conceptual
◦ What the user is manipulating with the system◦ How the system is used to complete tasks
14
![Page 15: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/15.jpg)
User interfaces can occur between a user and a screen or between systems
Between a user and a monitor, interfaces can be:◦ Text-based (I.e. AS/400 or mainframe)◦ Command line◦ Graphical User Interface (GUI) – most common
15
![Page 16: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/16.jpg)
Between two systems, interfaces are generally messages that are exchanged ◦ Messages can be passing of actual data values or
passing of parameters that can be set and deciphered for their meaning I.e. if validating a credit card, then a flag can be
passed with the credit card to the Validation ‘routine’ which sets the flag as to whether the validation was successful or not
16
![Page 17: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/17.jpg)
Several types of user interfaces:◦ Menus◦ Query ◦ Data Entry◦ Reports
Detail Summary Bill payments Account statements
17
![Page 18: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/18.jpg)
Method of accessing user interfaces:◦ Keyboard◦ Mouse◦ Arrow Keys◦ Function Keys◦ Ctl or Alt button in combination with a keyboard
key
18
![Page 19: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/19.jpg)
Navigate using mouse or arrow Keys in this “desk top”
19
![Page 20: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/20.jpg)
Navigate using mouse or buttons on this web“order form”
20
![Page 21: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/21.jpg)
Navigate through a paper-based interface
21
![Page 22: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/22.jpg)
Navigate using menus on this “web page”
22
![Page 23: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/23.jpg)
Navigate using a Mouse and linkingOn the drill downreport
23
![Page 24: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/24.jpg)
Graphical document
24
![Page 25: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/25.jpg)
General guidelines:◦ Make interfaces consistent◦ Provide meaningful feedback to users in the
form of warning, informational and error messages
◦ Allow short cuts for experienced users◦ Allow easy reversal of actions◦ Always provide Help throughout online
applications
25
![Page 26: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/26.jpg)
Focus early on the users and their work
Evaluate designs to ensure usability
Use iterative development
26
![Page 27: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/27.jpg)
A formal method of designing and representing Dialogues/Dialogs
27
![Page 28: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/28.jpg)
28
Dialogue/Dialog Expresses that the User and Computer Interact by Sending Messages
![Page 29: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/29.jpg)
Many methods exist for documenting Dialogue/Dialogs◦ Use Case diagrams: the dialogue between the
actor and the use case◦ Written descriptions such as use case
descriptions or scenarios◦ Sketches of screens, i.e. storyboards◦ Dialogue/dialog charts
29
![Page 30: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/30.jpg)
30
Storyboard for DownTown Videos Rent Videos Dialogue/Dialog
![Page 31: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/31.jpg)
31
Storyboard for DownTown Videos Rent Videos Dialogue/Dialog
![Page 32: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/32.jpg)
OO approach provides UML diagrams that are useful for modeling Dialogue/Dialogs in addition to Use case diagrams◦ Sequence diagrams act much as a
Dialogue/Dialog◦ Objects can be added to class diagrams and
interaction diagrams to represent Dialogue/Dialog
32
![Page 33: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/33.jpg)
The process of designing the overall sequences that users follow to interact with an information system
the sequence in which information is displayed to and obtained from the user
33
![Page 34: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/34.jpg)
understanding how the user will interact with the system◦ clear understanding of user, task, technological and
environmental characteristics
34
![Page 35: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/35.jpg)
35
0Main Menu
1Product Management
0
4Purchasing
0
3Sales Management
0
1.1Add New Product
1,1.2
1.2.1Update Product prices
1.2,1
1.2Update Product
1
5Receiving
0Continued
… … …
Denotes continuation
Indicates the number ofthe slide that can be transferred or returned to
Screen identifier
Screen nameDialog Chart Example
![Page 36: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/36.jpg)
open DialogCharts.zip from web page and see:Dialogue1.doc
36
![Page 37: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/37.jpg)
A marketing manager wants sales and marketing personnel to be able to review the year-to-date transaction activity for any customer
37
![Page 38: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/38.jpg)
38
1. Request to view individual customer information
2. Specify the customer of interest
3. Select the year-to-date transaction display
4. Review customer information
5. Exit system
![Page 39: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/39.jpg)
Designs must be done simultaneously with other system activities
Include options such as backup and recovery Overall system structure from standpoint of user
is reflected in menu structures
39
![Page 40: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/40.jpg)
40
Overall Menu Hierarchy
![Page 41: User Interface Theory & Design Lecture 6a 1. User interface is everything the end user comes into contact with while using the system To the user,](https://reader036.fdocuments.in/reader036/viewer/2022081603/56649f125503460f94c2502f/html5/thumbnails/41.jpg)
41
Eight Golden Rules for Interactive Interface Design