Prototyping

Adapted from: Sommerville, I. Software Engineering 8th ed.. Reading, MA: Addison-Wesley Publishing Co., 2006 .Introduction: Human Computer Interface DesignThe User InterfaceUser interfaces should be designed to match the skills, experience and expectations of its anticipated users.System users often judge a system by its interface rather than its functionality.A poorly designed interface can cause a user to make catastrophic errors.Poor user interface design is the reason why so many software systems are never used.

Human FactorsLimited short-term memoryPeople can instantaneously remember about 7 items of information. If you present more than this, they are more liable to make mistakes.People make mistakesWhen people make mistakes and systems go wrong, Inappropriate alarms and messages can increase stress and hence the likelihood of more mistakes.People are differentPeople have a wide range of physical capabilities. Designers should not just design for their own capabilities.People have different interaction preferencesSome like pictures, some like text.

http://www.dell.com/us/p/d/campaigns/tablet-comparison.aspx12Human Computer Interface DesignRequires:Creation of different modelsUnderstanding of human and computer oriented tasks to achieve functionalityAdherence to design issues and guidelinesUnderstanding of user-system interaction

Principles of HCI Design:Recognize the diversity-1Depict profile of end usersagesexphysical abilitieseducationculture/ethnic backgroundsmotivation and goalsIdentify tasksUse case scenarios Examine task frequencies (frequent should be simple)Determine interaction style

Principles of HCI Design:Recognize the diversity-2Types of UsersNoviceNo syntactic knowledgeMechanism of interaction requires interface to be effective with little sense of applicationKnowledgeable, intermittent usersReasonable semantic knowledgeLow recall of syntactic informationKnowledgeable, frequent userGood semantic and syntactic knowledgeWants shortcuts and abbreviated modes of operation

Principles of HCI Design:Recognize the diversity-3TasksUnderstand taskIdentify real-world objects needed to accomplish intentionsIdentify actions that will be applied to objects.Decompose objects and actions (individual steps)Create metaphor representations of objects and actions for interfacePrinciples of HCI Design:Use rules of interface design.Strive for consistency.Enable frequent users to use shortcuts.Offer informative feedback.Design dialogs to yield closure.Permit reversal of actions.Reduce short-term memory load.

Principles of HCI Design:Prevent errors.Correct matching pairs (put both in one stroke).Complete sequences (put in single action).Correct commands (automatic command completion)Improve error messagesSpecific and constructivePositive in tone

Microsoft Money 2007 Home & BusinessTypes of Interfaces:Direct ManipulationPresents user with model of their information spaceUsers interact with direct actionsExamples: word processors, screen editors, formsAdvantagesUsers in controlLearning time shortUsers get immediate feedbackDisadvantagesNot suited for casual useIn some cases consumes more computer resources

Types of Interfaces:Metaphor and Control Panel ModelsMetaphor helps define a consistent modelExample: desktop metaphorNot suitable for complex applicationsControl panelGraphical representation of system commandsCommand icons that match menu commandButtons (Print, Quit)SwitchesIndicatorsDisplaysSliders

Types of Interfaces:Menu SystemsUsers select one of a number of possibilitiesTypes: pull down or pop upScrolling: Menu scrolls to display next choiceHierarchical: Current menu is replaced by nextWalking: Form of hierarchical that creates menu adjacent to itAssociated control panels

Types of Interfaces:Menu SystemsAdvantagesNo need to know command namesSome user error prevented (disable invalid choices)Context-dependent help can be providedDisadvantagesNeed to structure large menusMay need time to understand menu choices

Types of Interfaces:Command Line InterfaceUser types command to system.Not suitable for casual or inexperienced usersAdvantagesInterface can be made concise with little typingCan be combined with other approachesDisadvantagesNeed to learn command languageErrors can be introduced

Summary: Interaction styles

Information PresentationStatic informationInitialized at the beginning of a session. It does not change during the session.May be either numeric or textual.Dynamic informationChanges during a session and the changes must be communicated to the system user.May be either numeric or textual.

Information Display FactorsIs the user interested in precise information or data relationships?How quickly do information values change? Must the change be indicated immediately?Must the user take some action in response to a change?Is there a direct manipulation interface?Is the information textual or numeric? Are relative values important?Analog or Digital Presentation?Digital presentationCompact - takes up little screen space;Precise values can be communicated.Analog presentationEasier to get an 'at a glance' impression of a value;Possible to show relative values;Easier to see exceptional data values.

Presentation Methods

Data VisualizationConcerned with techniques for displaying large amounts of information.Visualization can reveal relationships between entities and trends in the data.Possible data visualizations are:Weather information collected from a number of sources;The state of a telephone network as a linked set of nodes;Chemical plant visualized by showing pressures and temperatures in a linked set of tanks and pipes;A model of a molecule displayed in 3 dimensions;Web pages displayed as a hyperbolic tree.

Information Presentation: ColorLimit number of colors on screen (no more than 4)Use color to support users taskHighlight anomalies Highlight similaritiesHighlight change in statusColor communicates meaning (know users)Driver: Red=stop; Chemist: Red=hotBe aware of color blindness: 10% of males Avoid bad pairings.Use color in a consistent fashion.

If you can read this you are my hero!!!Information Presentation: Error MessagesContext: Keep system aware of what user is doingExperience: allow user to control detail in messageSkill levelMessage for a novice is different than the message for experienced userInclude terminology familiar to userStylePositive and not negativeActive rather than passiveProfessionalCulture differencesERROR!Error #27: invalid patient ID.

ErrorPatient Joe Hernandez is not registered.

Click on Patient for a list of registered patients.Click on Retry to re-enter information.Click on Help for more information.User Interface Design Principles

Other ConsiderationsLearnabilityHow long will it take a user to become productive?Speed of operationsHow well does the system response match the users work practice?RobustnessHow tolerant is the system of user error?AdaptabilityHow closely is the system tied to a single model of work?The UI Design ProcessUI design is an iterative process involving close liaisons between users and designers.The 3 core activities in this process are:User analysis. Understand what the users will do with the system;System prototyping. Develop a series of prototypes for experiment;Interface evaluation. Experiment with these prototypes with users.

The Design Process

User AnalysisIf you dont understand what the users want to do with a system, you have no realistic prospect of designing an effective interface.User analyses have to be described in terms that users and other designers can understand.Scenarios where you describe typical episodes of use, are one way of describing these analyses.

What is a Prototype?Views of prototypeA model that presents an interface of systemA working model with limited functionality PurposeUnderstand and elicit requirementsVerify and validateRequirementsDesignsTechnologyInvolve customers and assist in communicationReduce risk

Other ReasonsVerify an algorithm will work.Verify an interface will be usable.Experiment with alternate approaches.Understand uncertain system functions.Evaluate time and memory requirements.

Prototype ApproachesApproachesPen and paperStoryboardsPICTIVE (Michael Muller)Users participate in construction of their own storyboardPoster boardConstruction paperSticky notesScenariosVideosSupportHigh-level languages (Lisp, Prolog, Visual Basic)Database (4GLs, SQL, report generators)Components (Swing, AWT, Python)Tools (JBuilder)

Hints on HCI PrototypeAvoid making interface look too slick.Customers reluctant to suggest changesCustomers will think its finishedDo not impose your view of an acceptable user interface on users.

Soon to Come AssignmentIdentify tasks and actionsDefine comprehensible mental image (metaphor) Create appropriate organization of data, functions, tasks and roles Be attentive to efficient navigation among these data, functions, tasks and roles Pay attention to quality appearance (the look) and effective interaction sequencing (the feel) Create a paper or powerpoint prototype

All GUI examples taken from:http://www.buigallery.comInteraction styleMain advantagesMain disadvantagesApplication examples

Direct manipulationFast and intuitive interaction

Easy to learnMay be hard to implement.

Only suitable where there is a visual metaphor for tasks and objects.Video games

CAD systems

Menu selectionAvoids user error

Little typing requiredSlow for experienced users.

Can become complex if many menu options.Most general-purpose systems

Form fill-inSimple data entry

Easy to learn

CheckableTakes up a lot of screen space.

Causes problems where user options do not match the form fields.Stock control, Personal loan processing

Command languagePowerful and flexibleHard to learn.

Poor error management.Operating systems, Command and control systems

Natural languageAccessible to casual users

Easily extendedRequires more typing.

Natural language understanding systems are unreliable.Information retrieval systems

PrincipleDescription

User familiarityThe interface should use terms and concepts which are drawn from the experience of the people who will make most use of the system.

ConsistencyThe interface should be consistent in that, wherever possible, comparable operations should be activated in the same way.

Minimal surpriseUsers should never be surprised by the behaviour of a system.

RecoverabilityThe interface should include mechanisms to allow users to recover from errors.

User guidanceThe interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities.

User diversityThe interface should provide appropriate interaction facilities for different types of system user.