Design Principles Review

Slides:



Advertisements
Similar presentations
Web Design Principles 5th Edition
Advertisements

Choose the Proper Screen-Based Controls
Principles of Web Design 5 th Edition Chapter Nine Site Navigation.
Section 6.1 Write Web text Use a mission statement Generate and organize content ideas Section 6.2 Use page dimension guidelines Determine content placement.
6 Developing Content and Layout Section 6.1 Generate and organize content ideas Write and organize Web text Section 6.2 Identify page dimension guidelines.
Member FINRA/SIPCThursday, November 12, 2009 Resource Menu Changes - Report User Experience Study | Kevin Cornwall.
Graphic Design Principles
Psych 101 for Designers Interaction Design. Interaction Design is about people first. What motivates people? How do people think? How do people behave?
Annoy Your Users Less Session 202 Philip Wolfe, Lead Developer Farm Credit Services of America.
Chapter 6 Design Principles Principles of Interaction Design Comprehensibility Learnability Effectiveness/Usefulness Efficiency/Usability Grouping Stimulus.
LAYOUT OF PAGE ELEMENTS September 28 th, PATTERNS Common ways to use the Layout Elements of Visual Hierarchy, Visual Flow, Grouping and Alignment,
PSYC 1000 Lecture 21. Selective Attention: Stroop.
Part 2c: Requirements Chapter 2: How to Gather Requirements: Some Techniques to Use Chapter 3: Finding Out about the Users and the Domain Chapter 4: Finding.
Prof. Anselm SpoerriWeb Design Summary1 Web Guiding Principles Diversity of Users & Rapid Change –Diverse users, diverse computers, diverse skills, diverse.
CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by.
Principles of Graphics Design
© De Montfort University, Principles of Graphics Design Howell Istance School of Computing Technology De Montfort University.
Chapter 7 design rules.
INTRODUCTION. Concepts HCI, CHI Usability User-centered Design (UCD) An approach to design (software, Web, other) that involves the user Interaction Design.
Level > Next Level > …. > Crumb Trail (Hansel & Grettel) Bread Crumb Trail.
Website Design. Designing and creating different elements involved in developing a website for e- commerce can help you identify and describe the components.
Principles of Graphic Design
DESIGNING FOR IOS. iOS uses the following themes:  Deference. UI helps users understand and interact with the content, but never competes with it.
Visual Design The good kind of VD © Colin Stewart, 2009.
Mario Čagalj University of Split 2013/2014. Human-Computer Interaction (HCI)
Design. Hard design - increase control. - Displays are more virtual / artificial. Marketplace pressure: - Adding operations cheaper. Adding controls expensive.
Multimedia & The World Wide Web winny HCI 201 Multimedia and the www.
Web Design, 4 th Edition 4 Planning a Successful Web Site: Part 2.
Psychology of usability 1 User interfaces Jaana Holvikivi Metropolia.
© Anselm Spoerri Lecture 14 Course Review –Course Objectives –Design Principles Evaluation Criteria used for Term Project.
INSTRUCTIONAL DESIGN JMA Review Principle Review Principle 2. Toolbook (Data) Toolbook (Data) 3. M-Learning M-Learning Objectives.
Design for Interaction Rui Filipe Antunes
Human Computer Interaction Design and graphics design in computer human interaction by Sylvia Ward.
IS1824: Introduction to Internet Multimedia Lecture 7: Style 1 (Layout and Colour) Rob Gleasure
User Interface Design Session 11- LBSC 790 / INFM 718B Building the Human-Computer Interface Cartoon removed.
REQUIRMENTS GATHERING: knowledge of user interface and design.
Understanding users. Objectives  Gestalt Principles of Perception  Design principles  Development activity.
INSTRUCTIONAL DESIGN JMA 503. Objectives 1. Flowcharts and storyboards Flowcharts and storyboards 2. Project Eval Project Eval 3. Toolbook (Data) Toolbook.
Copyright © 2008 Pearson Education, Inc. Publishing as Pearson Addison-Wesley Prof Jim Warren with reference to sections 7.4 and 7.6 of The Resonant Interface.
INSTRUCTIONAL DESIGN JMA Review Principle Review Principle 2. Flowcharts and storyboards Flowcharts and storyboards 3. Project evaluation (Morae)
Chapter 1: What is interaction design?. Bad designs From:
Visual design The “look” of your interface. Role of Graphic Design What someone initially encounters – Sets a framework for understanding content.
Understanding Users Cognition & Cognitive Frameworks
©2001 Southern Illinois University, Edwardsville All rights reserved. Today Group Discussion Design Elements Continued Readings in HCI, pp Monday.
Four Principles of Design Dr. Allene Cooper. I gratefully acknowledge the ideas and words of Robin Williams which I’ve used liberally in this presentation.
©2001 Southern Illinois University, Edwardsville All rights reserved. CS 321 Human-Computer Interaction Today Design Elements Readings in HCI, pp
Step 3: Continue…. Grouping Aids in establishing structure and meaningful form In addition to providing aesthetic appeal, grouping has been found to:
Chapter 5 Requirements gathering: knowledge of user interface design.
SBD: Information Design
Dr. Susan Codone Mercer University Principles of Design TCO 285 Dr. Codone.
Capabilities of Humans. Gestalt More than the sum of its parts.
Windows layout. During the design process, the individual elements, or building blocks, of screens will have been identified. A logical flow of information.
With a focus on screen design and CRAP. The Joshua Tree Epiphany.
Introduction to Interactive Media 09: Good Design is CRAP.
Copyright © Terry Felke-Morris Learning Outcomes  In this chapter...  common types of website organization  principles of visual design  your target.
3461 Laying Out Components Principles of Good Screen Design Galitz, W. O., (2002) The Essential Guide to User Interface Design, 2nd Edition, Wiley Computer.
Guilford County SciVis V104.01
GESTALT PRINCIPLES OF VISUAL DESIGN Gestalt principles of visual design are derived from the theories of gestalt psychology, which were applied to the.
Structuring and Managing Online Learning Environments.
Section 6.1 Section 6.2 Write Web text Use a mission statement
Human Computer Interaction
Principles of Good Screen Design
Human-Computer Interaction
CSC420 Page Layout.
Lect 4: General Principles of Design
A NEW FACE OF THE TECHNICAL COMMUNICATOR – UX IS OUR STRENGTH – WE DESIGN TO WRITE BY CHRIS GANTA © 2016, STC INDIA CHAPTER.
Software Engineering D7025E
One-timer?. A new face of the technical communicator – UX is our strength – we design to write.
Step-3: Principles of Good Interface and Screen Design
Interface Design Interface Design
Presentation transcript:

Design Principles Review

Objectives Design principles

Four basic activities in Interaction Design Establishing requirements Designing alternatives Prototyping Evaluating

Common Design Principles Visibility Feedback Constraints Consistency Affordances Mapping See Norman (1998), The design of everyday things and Chapter 1, Rogers, Sharp, Peerce (2011)

From, Lidwell, W. , Holden, K. , & Butler, J From, Lidwell, W., Holden, K., & Butler, J. (2010), Universal Principles of Design.

Core cognitive aspects Attention Perception and recognition Memory Reading, speaking and listening Problem-solving, planning, reasoning and decision-making, learning Most relevant to interaction design are attention, perception and recognition, and memory

Gestalt Principles of Perception A premise of Gestalt psychology is the idea that humans strive to find the simplest solutions to incomplete visual information.

Principles Humans organize things into meaningful units using: Chapter 4: Content Organization Principles Humans organize things into meaningful units using: Proximity: we group by distance or location Similarity: we group by type Symmetry: we group by meaning Continuity: we group by flow of lines (alignment) Closure: we perceive shapes that are not (completely) there Copyright © 2004 by Prentice Hall

Design Principles Design Principles Fitts’ law 80/20 Rule Alignment Aesthetic-Usability Effect Flexibility-Usability Tradeoff Elegance and simplicity

Fitts’ law Time required to move to a target is a function of the target size and the distance to the target. Smaller and more distant a target, longer it takes to move to the resting position over the target. Faster movement and smaller targets, greater error rate due to the speed-accuracy tradeoff.

Fitts’ law Implications When rapid movements are required and accuracy is important, controls are near or large. When controls not used frequently or when they cause problems if accidently activated, more distant and smaller. Use large objects for important functions (Big buttons are faster). Use pinning actions of the sides, bottom, top, and corners of your display.

Tapping Experiment When controls not used frequently or when they cause problems if accidently activated. When rapid movements are required and accuracy is important.

Fitts’ law Implications Single-row toolbar with tool icons that "bleed" into the edges of the display is faster than a double row of icons. Faster Slower

80/20 Rule Approximately 80% of effects generated by any large system are caused by 20% of the variables in that system. 80 percent of a product's usage involves 20 percent of its features. 80 percent of a town's traffic is on 20 percent of its roads. 80 percent of a company's revenue comes from 20 percent of its products. 80 percent of innovation comes from 20 percent of the people. 80 percent of progress comes from 20 percent of the effort. 80 percent of errors are caused by 20 percent of the components. The first recognition of the 80/20 rule is attributed to Vilfredo Pareto, an Italian economist who observed that 20 percent of the Italian people possessed 80 percent of the wealth. The seminal work on the 80/20 rule is Quality Control Handbook by Joseph M. Juran (Ed.), McGraw-Hill, 1951.

80/20 Rule Design and testing should focus on 20% of features used 80% of the time. Identify the critical 20% of the functions that are used 80% of the time and… make them readily available to users. Noncritical functions part of the less-important 80% should be minimized or removed from the design.

Alignment It is easier to perceive a structured layout. Place elements so edges line up along common rows or columns. Nothing should be placed arbitrarily.

Alignment Every item should have a visual connection with something else on screen (Williams, R. p. 27) Alignment can help lead person through a design.

Alignment In text Left-aligned and right-aligned text blocks better than center-aligned text. presents clear, visual cue against which other elements of the design can be aligned. Center-aligned text has more visually ambiguous alignment cues, and can be difficult to connect with other elements.

You are looking at center alignment. By Susan Fitzgerald February 06, 2015

Alignment You are looking at left alignment. By Susan Fitzgerald February 06, 2015

Hello World

Hello world It is easier to perceive a structured layout. SEARCH Section Headings Navigation It is easier to perceive a structured layout. Navigation

50 px 50 px 50 px 100X100 px 100X100 px 50 px 50 px 50 px 50 px 50 px 100X100 px 100X100 px

Alignment Source: http://msdn.microsoft.com/en-us/library/system.windows.controls.grid(v=vs.95).aspx

Alignment

Alignment

Alignment - numbers Think purpose! Which is biggest? 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256 532.56 179.3 256.317 15 73.948 1035 3.142 497.6256

Aesthetic-Usability Effect Aesthetic designs are perceived as easier to use than less-aesthetic designs.

Good usability is inherent in good design because people think well designed things work better, whether they do or not. Source: http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect Aesthetics and Apparent Usability: Empirically Assessing Cultural and Methodological Issues http://www.sigchi.org/chi97/proceedings/paper/nt.htm

Flexibility-Usability Tradeoff As the flexibility of a system increases, the usability of the system decreases. http://www.youtube.com/watch?v=9pr1vOt21qQ

Elegance and simplicity The most powerful designs are always the result of a continuous process of simplification and refinement. Source: http://usabilitynews.usernomics.com/2008/05/simplicity-functionally-and-visually.html

Elegance and simplicity Before you do anything else to improve the quality of a design… reduced its formal and conceptual elements to the absolute minimum. Source: http://usabilitynews.usernomics.com/2008/03/usability-and-simplicity.html

Elegance and simplicity Anything that is not essential to the communication task must be removed.

Elegance and simplicity Whenever a single part plays more than one role, the unity of the overall design is enhanced. Elegant solutions produce a maximum of satisfaction from an absolute minimum of components.

Whenever a single part plays more than one role, the unity of the overall design is enhanced. Used to view next image and to navigate to a larger view of an image.

Elegance and simplicity Remember… Designs succeed or fail on the basis of how well they solve a particular problem.

Additional Items

Provide Clarity Use plenty of negative or white space - area of page not occupied by content. Space between specific items on page. Negative space does not have to be white. Makes important content and functionality noticeable and easier to understand. Source: http://sixrevisions.com/web_design/negative-space-in-webpage-layouts-a-guide/

Provide Clarity Use plenty of negative or white space - area of page not occupied by content. Space between specific items on page. Items equally spaced and aligned.

physical controls grouping of items order of items decoration alignment white space gaps to aid grouping gaps to aid grouping

Speaking of Goals Adults’ perception & attention focuses almost totally on goals. Adults tend NOT to notice things unrelated to goals. Align our interfaces with users goals, or they won’t perceive most of what we put in front of them.

Speaking of Goals On the next slide there are many different tools. Find a saw

Research and design issues Need to consider how best to design, present, and structure information and system behavior; Veen’s design principles (1) Where am I? (2) Where can I go? (3) What’s here? 45

Research and design issues Finger-flicking, stroking and touching a screen result in new ways of consuming, reading, creating and searching digital content Touch areas min. 44px X 44px

Principles Consistency: Since users find it difficult to handle the unexpected, it is important to be consistent throughout the interface. Exploiting prior knowledge: provide user opportunity to draw on their prior knowledge.

Principles Recognition versus recall to reduce cognitive load Recall Visited Links