And On To Design: Output Design Input Design Data Design Processing Selection Implementation

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

User Interfaces Navigation 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

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

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

Usability of a Form Consistency of the Dialog – 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

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

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

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

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

Use Scenario Decide what is important – 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?

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

Similar to ‘User Stories’

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.

User Story

User Stories Capturing Requirements – 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.

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

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

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

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

Interface structure diagram example

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

Storyboarding

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

Prototype Evaluation