User Interface DesignWhat is design?Three Pillars of DesignPrinciples of Good Design (Norman)8 Golden Rules of User Interface DesignPlace User in ControlReduce Memory LoadMake Interface ConsistentData Entry GuidelinesData Display GuidelinesGetting User’s AttentionFailure Points for User GoalsPreventing ErrorsBuilding Usable WidgetsUser Interface Design ModelsUser Interface Design Process (spiral model)Task Analysis and Modeling - 1Task Analysis and Modeling - 2Interface Design ActivitiesInterface Design IssuesUsability EngineeringLogical User-Centered Interactive Design (LUCID) MethodologyLUCID requires the following activities to be performed at each stage:Ethnographic Observation of UsersParticipatory DesignTask Scenario ConstructionRelevant Legal IssuesSocial Impact Statement01/14/19 1User Interface DesignCIS 577Bruce R. MaximUM-Dearborn01/14/19 2What is design?•Process not a state•Design process is non-hierarchical•Design process involves radical transformation•Involves discovery of new goals01/14/19 3Three Pillars of Design•Guideline documents and processes•User interface software tools•Expert reviews and usability testing01/14/19 4Principles of Good Design(Norman)•The state and action alternatives should be visible at all times•There should be a good conceptual model with a consistent system image•Interface includes mappings that reveals relationships between stages•User should receive continuous feedback01/14/19 58 Golden Rules of User Interface Design•Strive for consistency•Enable short-cuts for frequent users•Informative feedback•Design dialogs to yield closure•Offer simple error handling•Permit easy reversal of actions•Support internal locus of control•Reduce short-term memory load on user01/14/19 6Place User in Control •Define interaction in such a way that the user is not forced into performing unnecessary or undesired actions•Provide for flexible interaction (users have varying preferences)•Allow user interaction to be interruptible and reversible•Streamline interaction as skill level increases and allow customization of interaction•Hide technical internals from the casual user•Design for direct interaction with objects that appear on the screen01/14/19 7Reduce Memory Load•Reduce demands on user's short-term memory•Establish meaningful defaults•Define intuitive short-cuts•Visual layout of user interface should be based on a familiar real world metaphor•Disclose information in a progressive fashion01/14/19 8Make Interface Consistent•Allow user to put the current task into a meaningful context•Maintain consistency across a family of applications•If past interaction models have created user expectations, do not make changes unless there is a good reason to do so01/14/19 9Data Entry Guidelines•Consistency•Minimal user input actions•Minimal memory load on user•Compatibility between data entry and data display•Flexible user control01/14/19 10Data Display Guidelines•Consistency•Efficient information assimilation by user•Minimal memory load on user•Compatibility between data display and data entry•Flexibility of user control over data display01/14/19 11Getting User’s Attention•Intensity (2 levels only)•Marking (e.g. underscore)•Fonts (up to 3)•Inverse video•Blinking (2 to 4 hertz)•Color (up to 4 standard colors)•Color blinking•Audio01/14/19 12Failure Points for User Goals•Users can form inadequate goals•Users might not find the right interface object because of incomprehensible label or icon•Users might not know how to specify or execute a desired action•Users may receive inappropriate or misleading feedback01/14/19 13Preventing Errors•Add missing item to correct matching pairs –(e.g. unmatched parentheses)•Try to complete sequences –forgetting 1 or 2 steps of several•Correct commands–Automatic command completion01/14/19 14Building Usable Widgets•Recognize human diversity–Usage profiles (know the user)•Novice users•Knowledgeable intermittent users•Expert frequent users–Task profiles (user task analysis)–Interaction styles•Direct manipulation•Menu•Form fill-in•Command language01/14/19 15User Interface Design Models•Design model –incorporates data, architectural, interface, and procedural representations of the software•User model (end user profiles)–novice, –knowledgeable intermittent user–knowledgeable frequent users•User's model or system perception–user's mental image of system•System image –look and feel of the interface and supporting media01/14/19 16User Interface Design Process(spiral model)•User, task, and environment analysis and modeling•Interface design•Interface construction•Interface validation01/14/19 17Task Analysis and Modeling - 1•Software engineer –studies tasks human users must complete to accomplish their goals without the computer–maps these into a similar set of tasks that are to be implemented in the user interface•Software engineer –studies existing specification for computer solution–derives a set of tasks that will accommodate the user model, design model, and system perception01/14/19 18Task Analysis and Modeling - 2•Software engineer–may devise an object-oriented approach by observing the real world objects and user actions (use cases)–models the interface objects after their real world counterparts01/14/19 19Interface Design Activities•Establish goals and intentions for each task•Map each goal/intention to a sequence of actions (methods for manipulating objects) •Specify the action sequence of tasks and subtasks (user scenario)•Indicate the state of the system at the time the user scenario is performed•Define control mechanisms•Show how control mechanisms affect the state of the system•Indicate how the user interprets state of the system from information provided through the interface01/14/19 20Interface Design Issues•System response time–time between the point at which user initiates some action and the time the system responds•User help facilities–integrated, context sensitive help–add-on help•Error information handling–messages should be non-judgmental–describe problem precisely–suggest valid solutions01/14/19 21Usability Engineering•The process of basing design on user needs, not technology availability.•When two products have the same functionality, users will choose the