Chapter 6 : Interactive systems design
Human-computer interface
Page 1/6
Petre Dimo 2008
Basic concepts ●
●
The design of interactive systems cannot be reduced to the design of functional modules and interfaces : one should also consider the impact on the users –
Define the goals
–
Analyse the tasks (identify the problem space)
–
Identify and understand the users
–
Consider constraints
The design process : Needs specification
Task analysis
Design
Implement and deploy
Prototype
Human-computer interface
Page 2/6
Petre Dimo 2008
Basic concepts Needs specification : Interviews, videotaping, ethnography – what exists, what is wanted Task analysis : scenario building Design : use rules, principles and guidelines Prototyping : design of dialogs, iterate, evaluate and review Implement and deploy : use detailed specifications to write the final code, write documentation and help system
Needs specification
Task analysis
Design
Implement and deploy
Prototype
Human-computer interface
Page 3/6
Petre Dimo 2008
Interactive applications development ●
The triangle User(s) : who is (are) he (they) ?
Customer : what is he paying for ?
Developer : effort estimation, tools
The user is not the customer and is sometimes (WEB) totally unknown The customer identifies « a market », but does not understand the user(s) real needs The developer generally under-evaluates the development effort and cost
Human-computer interface
Page 4/6
Petre Dimo 2008
User(s) : who is (are) he (they) ? ●
Age
●
Experience
●
The case of generic software : user panel
●
Users are not like you !
●
Design approach : –
Imagine yourself
–
Interviews
–
Observe, listening is not enough...
–
Participatory design
–
Elaborate and test scenarios
Human-computer interface
Page 5/6
Petre Dimo 2008
Navigation design ●
Local structure –
Interaction involves goal-seeking behaviour in a partially known environment
–
The important thing is that the user can, at each step, asses whether he is getting closer to his goal : ●
Know where he is (list the covered steps : A > B > C > D)
●
Know what he can do (explanatory labels and icons)
●
Know what will happen (dynamic message)
●
Know what was already done (feedback)
Human-computer interface
Page 6/6
Petre Dimo 2008
Global structure and hierarchical organization The global structure is the way the screens, pages, or device states link to one another
Messages Add a user System
Management
Information and help
Delete a user
Example : a messaging system The hierarchical structure may reflect the menu system Deep hierarchies are difficult to understand, broad ones difficult to navigate. Different structuring possibly optimize search (ex : list of towns – alphabetical vs regional) Human-computer interface
Page 7/6
Petre Dimo 2008
General application model – dialog ●
●
Information vs. interactive systems –
Cross links between module hierarchy
–
Dialogue frames – patterns with blanks for different cases
–
Scenarios – show one path
Use of network diagrams –
Shows what leads to what
–
Shows what happens when
–
Sows branches and loops
–
Are task oriented
Main screen
Remove user
Example : user registration and remove
Add user
Human-computer interface
confirm
Page 8/6
Petre Dimo 2008
Application structure ●
Hierarchical structure is the easiest to understand
●
The understanding difficulties depend on the hierarchy depth.
●
The optimum depth is less than 7 levels
●
At each level the number of options should not exceed 7
●
The interface must be designed for : –
Clear evidence of possible actions
–
Clear evidence about the expected results of an action
–
Permanent information about the current state
–
Keep and show a history of the executed actions
–
Providing means to restore previous states after an error ●
The user must be able to change his choice
●
Possibility to recover after data input or manipulation errors
●
Information and recovering procedures after system or application errors
Human-computer interface
Page 9/6
Petre Dimo 2008
Example : design of a dialog screen (1) General rules ●
Group informations referring to a common object –
Example : a commercial order
Customer : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Cust code : xxxxxxxxxxxxxxxxxxx Customer data : (Address, telephone number, email) Order no. xxxxxxxxxxxxxxxxxxxxxxxxxx Date of order : xx/xx/xxxx Item name ............... ............... ...............
Quant. Unitary price. Amount .... ........ .......... .... ........ .......... .... ........ ..........
Order total
...........
VAT .... .... ....
....
Total ......... ......... .........
.........
The item sequence, alignment spaces and tables are important Human-computer interface
Page 10/6
Petre Dimo 2008
Example : design of a dialogue screen (2) General rules ●
Help user to decide –
Adapt symbols to the cultural environment (ex : dots / commas in decimal numbers)
–
Suggest what is legal and what is not
–
Ease recognition of input fields ●
Optional fields
●
Mandatory fields
–
Choose a convenient character font
–
Colour usage
–
Movement usage
–
3D image usage
–
Do not overload screen
Human-computer interface
Page 11/6
Petre Dimo 2008
Application life cycle Preliminary specifications Architecture
Detailed specifications Implementation and module testing Integration and system tests
Verification vs. validation Deploy and maintenance Human-computer interface
Page 12/6
Petre Dimo 2008
Software development cycle Preliminary specifications
Architecture
Detailed specifications Implementation and module testing
50% of the development time is spent for interactive interface implementation Human-computer interface
Integration and system tests Deploy and maintenance Page 13/6
Petre Dimo 2008
Design strategies for interactive applications (1) ●
User oriented design –
The user is participating to both the functional specification and to the implementation and deployment phases. One must specify deployment aspects within the application specifications.
–
IBM and DEC called this approach « usability engineering ». ●
●
The specifications must comprise those application aspects which will be evaluated to measure usability The usability measure is evaluated through the answers to a check list of questions. Example of list concerning a generic task : Time needed to terminate the task Fraction of the task terminated in a given time Number of user errors Time lost to recover from errors Number of misinterpretation of error messages Number of undo manipulations .....etc.....
Human-computer interface
Page 14/6
Petre Dimo 2008
Design strategies for interactive applications (2)
●
Usability lists drawbacks –
The tests must be made in the presence of the users
–
Use of prototypes can be misleading, since the real process can be different
–
The usability list can be OK but this does not mean that the application is usable, since some situations and events could have been omitted...
Human-computer interface
Page 15/6
Petre Dimo 2008
Iterative design and prototyping ●
●
●
●
The needs of an interactive application can't be totally specified at the beginning of the life cycle The iterative conception allows for redesign of parts of the application in order to better make it fit the reality To allow iteration, one use prototypes –
Disposable prototypes
–
Incremental prototype
–
Evolutionary prototype
Prototyping tools –
Scripts (like film scripts)
–
Partial functionality simulation
–
High level programming support (HyperCard, PythonCard...)
Human-computer interface
Page 16/6
Petre Dimo 2008
PythonCard
Probably the most compelling feature of PythonCard is its separation of presentation and application logic. The presentation features of your application are defined in resource files (which are just dictionaries actually) and the application logic is in a separate Python file. Removing the necessity for lots of code to describe your application's windows, widgets and associated control items means that the application module is usually quite short. It also means that the developer can concentrate on their application logic. PythonCard takes care of everything else.
Human-computer interface
Page 17/6
Petre Dimo 2008
Warnings about iterative design ●
The decision taken in early stages of the cycle can be wrong and very difficult to correct once the product is in it's final development phase and even worse if it has been delivered. Iterations are normally used to address this problems but it is possible that the test protocole does not specify the situation which leads to user problems and ambiguous interpretations. –
Example : a digital watch designed to show 4 figures - 2 for the hours between 00 and 12 and 2 for minutes between 00 and 59. If the electronic device supporting the display can also record numbers superior to the limits (ex. 14/76), the user can by error set a wrong time without realizing it.
In this example a usability test of the watch would signal difficulties in setting the right time that the designer could interpret as a difficulty to access and use the time setting buttons...
Human-computer interface
Page 18/6
Petre Dimo 2008
Product maintainability and evolution
●
Functional documentation
●
Test reports after meeting with users
●
Decision recording and description of the reasons being invoked to take decisions.
Human-computer interface
Page 19/6
Petre Dimo 2008
