1. And On To Design: Why in this particular sequence?
Output
Design
Input
Design
Data
Design
Processing
Selection
Why in this particular sequence?
-determination of requirements
-quest for data
-cost estimates as system evolves
Implementation

2. Why Look at Output First?
(It is the real product)
Typical Problems
information delay
information overload
paper domination in reporting
excessive distribution
non-tailoring of reports

3. User Interfaces Navigation Mechanism Input Mechanism Output Mechanism
how user interacts with the system
push buttons, click menu items, type instructions
Input Mechanism
how the system captures information
forms, input screens, card swipes, motions
Output Mechanism
how the system provides information
reports, web pages, feedback screens

4. Output Design: Initial Questions
Audience
customers, management, staff, shareholders, government...
Format
tabular, graphic, summary versus detailed
Medium
screen, printed, special purpose

5. Layout Basic format design of the screen or report Consistency is key
click on an ‘X’ or ‘-’
Windows/Mac layout common
new format emerging for microbrowsing

6. Usability of a Form Consistency of the Dialog Efficiency Ease Format
mnemonics (ctl-S, ctl-X, ctl-V ((?)) )
Efficiency
minimum required input where possible
Web: drop down menus / first letter select (CAMEROON)
Ease
self-explanatory, obvious meaning
Format
consistent between input and display
Flexible
convenient for the user

7. Design Principles Sensible layout – consistency
Content Awareness – titles, dates
Aesthetics – appropriate for the use
Level of user experience
Navigation consistency
Minimize user effort

8. Designing Outputs Making them useful
fulfilling only one use - modularity
consistency - similar activities should have similar support
web page should be similar for browsers and microbrowsers, allowing for differences in the devices using them
This is where MS became the big winner – office was a suite with similar interactions for different applications (word, excel, outlook, powerpoint, access)

9. Possible Interaction Types
Command Language
UNIX, Linux
Menus
Object Based
Iconic
Natural Language
English-like conversational input/output

10. Use Scenario
Much like a Use Case, except several can exist for a single interface
a simple narrative of steps of the most commonly occurring transactions
browsing
making a purchase
comparing prices
Describes the steps in the process and the interface conversation

11. Use Scenario Decide what is important Do you agree?
the book has an interesting interpretation
“Likewise, he thought of several use scenarios that did not lead to sales (e.g. fans looking for information about their favorite artists and music), and he omitted them as well, as they were not important in the design of the Web site.” 4ed p. 339, 5ed p. 351
Do you agree?

12. Use Scenario
User enters his/her postal code, and is asked if they want it remembered
User types product search term, then browses through results
User selects desired product, adds it to cart
User moves to checkout process OR continues shopping

13. Similar to ‘User Stories’

14. User Stories What is a User Story?
A few sentences in business language that captures what a user does or needs to do as part of his or her interaction with the system.
Captures the 'who', 'what' and 'why' of a requirement.
limited in detail by what can be hand-written on a small paper notecard.

15. User Story

16. User Stories Capturing Requirements Adding Formality
Quick way of handling customer requirements without having to create overly formalized requirement documents
The intent
respond faster and with less overhead to rapidly changing real-world requirements.
Adding Formality
The informal user stories can be further formalized in use cases.

17. User Stories Deliberately simple, solve a single function
Developed by SME, or in consultation with SME
can validate by putting them together and doing a roleplay, or walk through of the process

18. Front of card The user story – a single function
As a user, I can search for a product on eBay
Priority: critical
Estimate: 4

19. Back of Card Confirmation
Must use a supported browser with Internet connection
Not required to log in to search

20. Interface structure diagram
Shows how all screens, forms and reports are related
Shows how a user moves from one to another
Boxes denote screens, lines show movement from one to another
Not strictly hierarchical

21. Interface structure diagram example

22. Design Prototyping Storyboards HTML Prototype Language Prototype
paper-based mock-ups
HTML Prototype
for web or custom screen design
Language Prototype

23. Storyboarding

24. Interface Evaluation Heuristic: checklist Walk-throughs Interaction
by users
Usability Testing
formally audit user interaction

25. Prototype Evaluation