Design Principles

Design Principles Dewan Tanvir Ahmed, PhD University of Ottawa dahmed@site.uottawa.ca

Design Principles • Interaction design is a lengthy process that requires • Knowledge of computing technologies and • Thorough understanding of the psychological complexities of human • Considers • Sense of logic • Sensitivity of aesthetics Aesthetically pleasing interface designs are perceived as being easier to use Dewan Tanvir Ahmed

Outline • Principles of Interaction Design • Comprehensibility • Learnability • Effectiveness/Usefulness • Efficiency/Usability • Grouping • Stimulus Intensity • Proportion • Screen Complexity • Resolution/Closure • Usability Goals Dewan Tanvir Ahmed

Principles of Interaction Design • How do we create elegant solutions to complex interaction problems? • Difficult – need to consider • Technical variables and • Aesthetic aspects How do interaction designers succeed at creating great designs that are powerful and aesthetically appealing? Dewan Tanvir Ahmed

Principles of Interaction Design • To impose structure and order on the design process, interaction designers use principles to guide and make decisions Design principles can be used to guide design decisions Design principles do not prescribe specific outcomes; they function within the context of a particular design project. Design principles guide interaction designers and help them make decisions that are based on established criteria Dewan Tanvir Ahmed

Principles of Interaction Design • Iterative design is a multilayered activity: • subject to many contradictory forces • say, place screen components in consistent locations. But cannot prevent the user from advertently clicking on a destructive function like DELETE Breaking consistency rule and place these functions that catch users’ attention Dewan Tanvir Ahmed

Gulfs and Principles • Design principle can be used to determine if there are gulfs of execution or evaluation • Gulfs of execution relate to the effectiveness principles • Gulfs of evaluation relate to the efficiency principles Dewan Tanvir Ahmed

Principles of predictability and memorability • Predictability and memorability are recursive in nature • Example: • Button appears to press, and most likely to remember its behavior . • High degree of memorability predictability memorability Dewan Tanvir Ahmed

Framework for Design Principles Dewan Tanvir Ahmed

Framework for Design Principles The framework has the following components: • Usability Goals • There are two main usability goals in the framework; comprehensibility (clarity) and learnability. • Design Principle Categories • The framework also divides the design principles into two main groups; efficiency principles and effectiveness principles. • Format to Describe Design Principles • The framework uses the format “serves the principle of … which promotes …” to describe the different principles. • Familiarity serves the principle of memorability, which promotes usability. Dewan Tanvir Ahmed

Framework for Design Principles Functionality - The system must have adequate functionality for a particular task. Presentation Filter - The functionality must be made accessible through the presentation filter (interface). Dewan Tanvir Ahmed

Framework for Design Principles Comprehensibility Barrier - If the presentation is comprehensible, the comprehensibility barrier will be superseded. This depends on the degree of efficiency/usability in the interface design. Learnability Barrier – If the interface is comprehensible it will be learnable, there is a direct relationship. Effectiveness/Usefulness - If the user can learn the interface he can take advantage of the functionality and the interface will, therefore, be useful. Dewan Tanvir Ahmed

Comprehensibility • An interface design that is easy to comprehend will be efficient and effective • If a user does not understand the interface it will be useless • A design’s comprehensibility is highly dependent on the way in which the interface communicates its functionality to the user Dewan Tanvir Ahmed

Learnabilty • An interface with high usability will be easier to learn • The learnability of a design is based on comprehensibility: if you can’t understand it, you can’t learn it Dewan Tanvir Ahmed

Comprehensibility Learnabilty Learnability and comprehensibility are recursive: we start with comprehensibility which affects learnability, which will in turn increase comprehensibility. Comprehensibility/Learnability Feedback Loop Dewan Tanvir Ahmed

Principles of Interaction Design • Design principles are organized based on the goal • Effectiveness/Usefulness • Utility • Safety • Flexibility • Stability • Efficiency/Usability • Simplicity • Memorability • Predictability • Visibility Dewan Tanvir Ahmed

Design Principle Categories • Effectiveness/Usefulness Effectiveness describes the usefulness of a design • The effectiveness goal stipulates that a design must fulfill the user’s needs by affording the required functionality Dewan Tanvir Ahmed

Effectiveness/Usefulness • Utility - The principle of utility relates to what the user can do with the system. • The utility of the system defines the effectiveness • A design with good utility can be more useful • Example: Adobe Photoshop • A useful application • Used by people from different domain (web site developed, recreational photographer ) • It has high utility and ease of use • But also it has a learning curve for professional functionality Dewan Tanvir Ahmed

Effectiveness/Usefulness • Safety- If a design has a high degree of safety, it will prove more useful than a design that involves a high degree of risk. A computer shall not harm your work or, through inaction, allow your work to come to harm. (Raskin, 2000) Recovery - can be implemented in interaction designs by incorporating appropriate undo functionality and robust error recovery routines. Dewan Tanvir Ahmed

Effectiveness/Usefulness • Flexibility - A tool that is flexible can be used in multiple environments and may address diverse needs • It is an important parameter of effectiveness • Example: Drawing program • Create image, print publishing • Could be more flexible if • It could import directly from scanner • Export images in diverse format Dewan Tanvir Ahmed

Effectiveness/Usefulness • Customization- A tool would have greater flexibility if people were able to customize the interface according to their personal preferences Dewan Tanvir Ahmed

Effectiveness/Usefulness • Stability- A stable system is a robust system. • A system that functions consistently well will be more useful than a system that crashes frequently • Video is becoming more prevalent on Web • But Internet connection could be an issue • A robust design would inform visitors • Bit rates Dewan Tanvir Ahmed

Efficiency/Usability Efficiency describes the usability of a design • The efficiency goal stipulates that a design should enable a user to accomplish tasks in the easiest and quickest way possible without having to do overly complex or extraneous procedures. A computer shall not waste your time or require you to do more work than is strictly necessary. (Raskin, 2000) Dewan Tanvir Ahmed

Efficiency/Usability • Simplicity - If things are simple they will be easy to understand and, therefore, easy to learn and remember. • Ockham’s Razor- Pluralitas non estponenda sine necessitate - pluralities should not be posited without necessity • Given two equivalent designs, the simplest one is the best • Eliminate unnecessary details Dewan Tanvir Ahmed

Efficiency/Usability • Simplicity - If things are simple they will be easy to understand and, therefore, easy to learn and remember. • 80/20 Rule- The 80/20 rule implies that 80% of an application’s usage involves 20% of its functionality. • Thus, 20% of the application’s most useful functionalities should be put into the toolbars where it can be accessed. Remaining 80% in the pull-down menus • Design resources should be allocated to the significant 20% of interface design because working on the other 80% will not be cost effective. Dewan Tanvir Ahmed

Efficiency/Usability • Simplicity - If things are simple they will be easy to understand and, therefore, easy to learn and remember. • Satisficing - Combines the conflicting needs of finding • the optimal solution that satisfies all the requirements and the need to settle on a solution that will be sufficient to proceed with the design • We must find the 20% that makes the most difference and focus on a solution that will suffice. Dewan Tanvir Ahmed

Efficiency/Usability Satisficing Dewan Tanvir Ahmed

Efficiency/Usability • Simplicity - If things are simple they will be easy to understand and, therefore, easy to learn and remember. • Progressive Disclosure - Show the user only what is necessary • Techniques – more info, view details, related topics … Dewan Tanvir Ahmed

Efficiency/Usability • Simplicity - If things are simple they will be easy to understand and, therefore, easy to learn and remember. • Constraints- Involves limiting the actions that can be performed in a particular design • Controls the design’s simplicity • Physical and Psychological constraints Dewan Tanvir Ahmed

Efficiency/Usability Constraints- Involves limiting the actions that can be performed in a particular design • Physical • Paths- constrain movement to a designated location and direction • Sliders and scrollbar constraint • Axes- constrain the user’s movement to rotation around an axis • Trackball • Barriers-provide spatial constraints that can confine the user’s movement to the appropriate areas of the interface • Computer screen Dewan Tanvir Ahmed

Efficiency/Usability • Constraints • Psychological • Conventions - exploit learned behavior to influence a user’s actions • The location of certain screen elements has become standardized and is conventional – people look at those locations • Mapping- can influence the way in which people perceive relationships between controls and effects • Web page: forward motion to the right… • Symbols- can influence the way in which we interact with an interface by defining meaning and constraining our possible interpretations of interface elements • Icons and labels Dewan Tanvir Ahmed

Efficiency/Usability • Memorability - Interfaces that have high memorability will be easier to learn and use • Many different parameters affect memorability: • Location • Place particular content at the same location – easy to use and remember • Search box at the upper right hand corner • Logical Grouping • Easy to remember • Related option together in menu • Conventions • Use conventional objects and symbols • Shopping cart • Redundancy • Use multiple perception channel to code information • People will be able to focus on the channel that they personally rely on the most Dewan Tanvir Ahmed

Efficiency/Usability • Predictability - Predictability involves a person’s expectations and his ability to determine the results of his actions ahead of time. • Predicting the outcome involves memory – judgment of our previous experiences • If we can predict the outcome of actions • We gain a sense of security • Thus it encourages to explore more Dewan Tanvir Ahmed

Efficiency/Usability • Consistency-Correctness • Consistency principles can be applied to every aspect of interface design • Color coding • Icon style • Button placement • Consistency reinforces our associations and, therefore, increases our ability to remember and predict outcomes and processes. • Before we strive to be consistent, we must make sure we are correct Dewan Tanvir Ahmed

Efficiency/Usability • Predictability • Generalizabilty - can help us use the knowledge we gathered from previous experience and apply it to similar situations • Conventions: allow us to use our intuitions • Familiarity: familiar menu names and options help users locate objects and functions more easily Dewan Tanvir Ahmed

Efficiency/Usability • Predictability • Location, Location, Location: Not all areas on the screen are created equal • Top left corner is the prime location • Unless there are high intensity objects at other locations Most important info Title Short Intro Summaries Overviews Less Important Info Background info Supporting details Dewan Tanvir Ahmed

Efficiency/Usability • Modes: Modes create instability in mental models because they change the way objects function, often • Without warning • Any indication • Example: • Shift key + character • Forget that Caps Lock has been turned ON • Modes are problematic Dewan Tanvir Ahmed

Efficiency/Usability • Visibility- The principle of visibility involves making the user aware of the system’s components and processes, including all possible functionality and feedback from user actions. Show everything at once, and the result is chaos. Don’t show everything, and then stuff gets lost. (Norman, 1998, 74) Dewan Tanvir Ahmed

Efficiency/Usability • Visibility • Overload: Following the principle of visibility without also applying progressive disclosure can lead to visual overload • Meticulously study the temporal aspect of UI, and • Craft an UI space according to current task • Update UI as the user completes the new tasks • Feedback: Direct Manipulation interfaces provide immediate visual feedback about user actions. It is the task of the interaction designer to decide what form that feedback takes The principles of progressive disclosure and simplicity should be used inconjunction with the principle of visibility to avoid overload. Dewan Tanvir Ahmed

Efficiency/Usability • Visibility • Recognition/Recall: The principle of visibility is based on the fact that we are better at recognition than we are at recall • For a selection, a set of options is easier than recalling from memory • Orientation: People need to be able to orient themselves, especially in complex information spaces • Web site design must be sensitive to the visitors need to know whether the user is within the context of the site – when site is large and there are many contents • Provide hyperlinks rather than search mechanism Dewan Tanvir Ahmed

Grouping • Increase comprehension of complex information by creating visual presentations that logically support the intrinsic structure of the information.Use visual cues to support the logical structure of the interface Dewan Tanvir Ahmed

Grouping • Low-level principles- used to make decisions about specific screen controls, menus and layouts • Gestalt Principles of Perception • A perceptual pattern or structure possessing qualities as a whole that cannot be described merely as a sum of its parts • Gestalt psychology strives to explain the factors involved in the way we group things • At the heart of Gestalt psychology is the idea that we strive to find the simplest solutions to incomplete visual information Dewan Tanvir Ahmed

Gestalt Principles of Perception • Figure-Ground: Basic premise • when an individual is confronted by any image, we seem to separate a dominant shape (a 'figure' with definite contours) from the background. • We perceive our environment by differentiating between objects and their backgrounds The Rubin Face/Vase Illusion Dewan Tanvir Ahmed

Gestalt Principles of Perception • Figure-Ground: Basic premise • The famous ambiguous figure devised by the Danish psychologist Edgar Rabin The Rubin Face/Vase Illusion Mac Logo Dewan Tanvir Ahmed

Gestalt Principles of Perception • According to Gestalt psychology • We have natural tendency to perceive things as whole entries • We tend to distinguish foreground objects from background • The Gestalt principles of perception define factors involved in visually grouping items. Figure and ground Figure and ground Dewan Tanvir Ahmed

Gestalt Principles of Perception • The Gestalt Principles of Perception: • Proximity • Similarity • Common Fate • Closure • Good Continuity • Area • Symmetry • Surroundedness • Prägnanz Dewan Tanvir Ahmed

Gestalt Principles of Perception • Proximity Principle – • Objects that are close to each other will be seen as belonging together Dewan Tanvir Ahmed

Gestalt Principles of Perception • Proximity Principle – • The columns or rows dominate our focus. • The features which are close to each other are associated. Dewan Tanvir Ahmed

Gestalt Principles of Perception • Proximity- Adobe PhotoShop Preferences Dialog This grouping supports the logical structure of the buttons’ functions. Dewan Tanvir Ahmed

Gestalt Principles of Perception • Similarity Principle– Objects that have similar visual characteristics, such as size, shape or color will be seen as a group and therefore related Rows of Similar Objects Columns of Similar Objects Grouped Columns Dewan Tanvir Ahmed

Design Principles