Lecture 4 Interface Design – Part 2 IMS2805 - Systems Design and Implementation.
IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and...
-
date post
22-Dec-2015 -
Category
Documents
-
view
222 -
download
5
Transcript of IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and...
![Page 1: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/1.jpg)
IMS2805 3.2.1
Lecture 3.2
Introduction to Interface Design
IMS2805 - Systems Design and Implementation
![Page 2: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/2.jpg)
IMS2805 3.2.2
The process of defining the manner in which humans and computers exchange information
Analogous to a conversation between 2 people Interface and dialogue design is critical for
successful information systems “...to the user the interface is the system” Should provide a uniform structure for finding,
viewing, and invoking different components of an information system
Designing Interfaces and Dialogues
![Page 3: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/3.jpg)
IMS2805 3.2.3
Use prototyping as with forms and reports
Design specifications - also as with forms and reports Narrative overview Interface/dialogue design Testing and usability information
Designing Interfaces and Dialogues
![Page 4: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/4.jpg)
IMS2805 3.2.4
Narrative overview interface name, user, task, system, environment
Interface/dialogue design form/report designs, dialogue sequence diagram
Testing and usability assessment testing objectives, procedures and results
time to learn, speed of performance, rate of errors, retention over time, user satisfaction and other perceptions
Design Specifications
![Page 5: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/5.jpg)
IMS2805 3.2.5
Common interface methods are:
Command language interaction
Menu interaction
Form interaction
Icon/object-based interaction
Interaction Methods and Devices
![Page 6: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/6.jpg)
IMS2805 3.2.6
Users enter explicit commands to invoke operations users must therefore remember syntax and
semantics MSDOS, UNIX commands
copy A:myfile.doc to B:myfile.doc Complex applications such as word processors
and spreadsheets may have many commands <CTRL-P> print <CTRL-S> save <CTRL-C> copy
Command Language Interaction
![Page 7: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/7.jpg)
IMS2805 3.2.7
Users select from a list of system options and a specific operation is executed
Menu interaction is still the most widely used interaction method
Menus can differ greatly in their design and capability
simple single menu hierarchy of menus pop-up menus drop-down menus graphic menus
Menu Interaction
![Page 8: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/8.jpg)
IMS2805 3.2.8
TEXT-BASED SYSTEM MENU OF CHOICES ----------------------------
1 BOOKINGS2 CUSTOMERS3 TOURS4 MAINTENANCE5 LOGOUT
What’s wrong with this one?
Simple Single Menu
![Page 9: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/9.jpg)
IMS2805 3.2.9
MainMenu
Menu Hierarchy
![Page 10: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/10.jpg)
IMS2805 3.2.10
Wording meaningful title, clear, unambiguous command verbs
Organisation consistent, eg. related options should be grouped
together Length
use sub-menus to break up very long menus Selection
methods should be clear and consistent Highlighting
should be minimised and used to convey selected options (marked) or unavailable options (dimmed)
Guidelines for Menu Design
![Page 11: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/11.jpg)
IMS2805 3.2.11
Users fill in ‘blanks’ on a form when they interact with the system
Screen format is similar to paper-based forms
Effective for both input and presentation of data
Form interaction is common on many applications, the World Wide Web
Form-based programming languages VB, Delphi, CGI(?)
Form Interaction
![Page 12: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/12.jpg)
IMS2805 3.2.12
Often based on metaphor Icons are graphic symbols that look like
the processing option they represent Operations are selected by pointing at
and clicking on the desired option Easily understood and take up little
screen space Many icons appear in the form of
buttons or controls
Icon/Object-Based Interaction
![Page 13: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/13.jpg)
IMS2805 3.2.13
Keyboard Mouse Joystick Trackball Touch screen Light pen Graphics tablet Voice
Common Interaction Devices
![Page 14: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/14.jpg)
IMS2805 3.2.14
Entry never require data to be inserted that is
already known
Defaults always provide defaults where appropriate
Units make clear units of measure
Captioning always provide a caption near fields to explain
meaning
Structuring Data Entry
![Page 15: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/15.jpg)
IMS2805 3.2.15
Format provide format details (decinal points, dollar
signs, dates ...)
Justify automatically justify data entries - numbers
right justified; text left justified
Help always provide context sensitive help (use F1)
Structuring Data Entry
![Page 16: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/16.jpg)
IMS2805 3.2.16
Tests are usually handled by DBMS or by programs: Type
proper type of data (eg. numeric, alpha …)
Combinations do values in several fields combine in a sensible
way
Missing data eg. must have quantity for each customer order
Validation of Input data
![Page 17: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/17.jpg)
IMS2805 3.2.17
These tests are usually handled either by a DBMS or by programs: Range
are data within proper range of values?
Size correct number of characters?
Values does value come from a standard set of values?
Validation of Input data
![Page 18: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/18.jpg)
IMS2805 3.2.18
Provide feedback give status information to keep users informed
eg. Please wait while …
give prompting cues eg. Enter customer account no.
give meaningful error and warning messages avoid jargon, be specific
Provide help for help, concepts, procedures, messages,
menus, function keys, commands, etc.
Other Interface Design Features
![Page 19: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/19.jpg)
IMS2805 3.2.19
Mechanisms to control user access include views
particular users see subset of DB in the interface
authorisation rules restrictions to access and actions on data
encryption procedures encryption and decoding procedures are necessary
for highly sensitive data
authentication schemes access restrictions controlled by passwords,
biometric devices and smart cards
Controlling User Access
![Page 20: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/20.jpg)
IMS2805 3.2.20
3 major steps: 1 Designing the dialogue sequence
based on how the user wishes to use the system
2 Build a prototype use tools such as CASE tools, Visual Basic,
Access
3 Assess Usability use same approach as with forms and reports -
time to learn,speed of performance, rate of errors, retention over time, subjective satisfaction
Designing Dialogues
![Page 21: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/21.jpg)
IMS2805 3.2.21
Are becoming increasingly powerful Are something of a standard All previous design guidelines apply,
together with several additional ones organisational requirements, contextual issues
Typical GUI environments include Macintosh and Microsoft Windows - these come with extensive guidelines and consistency standards
Graphical User Interfaces
![Page 22: IMS2805 3.2.1 Lecture 3.2 Introduction to Interface Design IMS2805 - Systems Design and Implementation.](https://reader035.fdocuments.us/reader035/viewer/2022081515/56649d7a5503460f94a5e797/html5/thumbnails/22.jpg)
IMS2805 3.2.22
References
HOFFER, J.A., GEORGE, J.F. and VALACICH (2002) 3rd ed., Modern Systems Analysis and Design, Prentice-Hall, New Jersey, Chapter 14
WHITTEN, J.L., BENTLEY, L.D. and DITTMAN, K.C. (2001) 5th ed., Systems Analysis and Design Methods, Irwin/McGraw-HilI, New York, NY. Chapter 14