User interface design: 10 researchers' general UI/UX design principles

Download User interface design: 10 researchers' general UI/UX design principles

Post on 11-Apr-2017

860 views

Category:

Design

3 download

TRANSCRIPT

PowerPoint Presentation

10 researchersGeneral UI/UX Design Principles151104 (2)

Investigation process

1Introduction

Investigation process UI/UX design general design principles 10 , 2Introduction

110 researchers General UI/UX Design PrinciplesCHAPTER

10 General UI/UX Design Principles First Principles Basic Principles (2007)Johnson, J. (2007). GUI bloopers 2.0: common user interface design don'ts and dos. Morgan Kaufmann. Basic UI design principles First principles GUI blooper

Eight Golden Rules of Interface Design (1992)Shneiderman, B. (1992). Designing the user interface: strategies for effective human-computer interaction (Vol. 3). Reading, MA: Addison-Wesley. interface design principles

4

10 General UI/UX Design PrinciplesGuide-lines for User-Interfaces (1993)Cox, K., & Walker, D. (1992).User-interface design. Prentice-Hall, Inc..

10 Usability Heuristics for User Interface Design (1994)Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. InProceedings of the SIGCHI conference on Human Factors in Computing Systems(pp. 152-158). ACM. (evaluation heuristic) 1987 design guidelines 5

10 General UI/UX Design Principles Design PrinciplesCooper, A., Reimann, R., & Cronin, D. (2007).About face 3: the essentials of interaction design. John Wiley & Sons. , principles design principles

Principles to support usability (1992)Dix, A. (2009).Human-computer interaction(pp. 1327-1331). Springer US.Learnability, Flexibility, Robustness 6

10 General UI/UX Design PrinciplesHuman Interface Design Principles (2005)Apple Computer, Inc. (2005), Apple Human Interface Guidelines. IOS 1992 MAC OS X

Windows User Experience Design Principles (2010)Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines. 1 Microsoft Windows UX interaction design guidelinesWindows ,

7

10 General UI/UX Design Principles UX Design Guidelines (2012)Hartson, R., & Pyla, P. S. (2012).The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier.UI UX UAF(User Action Framework) structure Planning, Translation, Physical actions, Outcomes, Assessment, Overall

3C framework (2014)Levin, M. (2014).Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.". (connected device) principles (Consistent), (Continuous), (Complementary) 3C

8

2Common Design PrinciplesCHAPTER

Common principles: tableD1D2D3D4D5D6D7D8D9D10P1ooooooooo9P2oooooooo8P3oooooo6P4oooooo6P5oooooo6P6ooooo5P7oooo4P8oooo4P9ooo3P10ooo3

* D1~10: (), P1~10: 10

10 Common principles (: 9) . (: 8) (: 6) (: 6) (: 6)WYSIWYG: (: 5) : (: 4) (: 4) (: 3) (: 3)11

Common principles: P1 (: 9)

. (bad) (universal commands) (standard) , , (concept) , , 12

Common principles: P2 . (: 8)

( ) (informative) . - 13

Common principles: P3 (: 6)

: (Recoverability:):

14

Common principles: P4 (: 6)

:

15

Common principles: P5 (: 6)

(error handling) (minimalistic) :

16

Common principles: P6WYSIWYG(What You See Is What You Get): (: 5)

(remembering and typing), (Seeing and pointing) (look) (do) : ,

17

Common principles: P7 (: 4)

: : () (Familiarity): ,

18

Common principles: P8 (: 4)

: , : recall recognition:

19

Common principles: P9 (: 3)

(implementation model) (conceptual model)

20

Common principles: P10 (: 3)

(group of actions) : Closure:

21

3Unique Design PrinciplesCHAPTER

Unique principles: D6

(Predicability): (Synthesizability): (operations)

Dix, A. (2009).Human-computer interaction(pp. 1327-1331). Springer US.

23

Unique principles: D7

modelessness:

Apple Computer, Inc. (2005), Apple Human Interface Guidelines.

24

Unique principles: D8

:

Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines.

25

Unique principles: D9

, 1 , . illegal, invalid

Hartson, R., & Pyla, P. S. (2012).The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier.

26

4How to follow principles?CHAPTER

General principles of general principles

Follow design principles that you can relate to supporting the users task or process.Follow principles that you can easily relate to meeting the users special needs.Follow principles that help you in meeting usability factors and that assist you in linking to knowledge about human resources and limitations.Adopt a set of principles that suits your personal approach to design.

Newman, W. M., Lamming, M. G., & Lamming, M. (1995).Interactive system design(pp. I-XXXIV). Reading: Addison-Wesley.

28

UX design guideline Conclusion

Be cautious using guidelines.Use careful thought and interpretation when using guidelines.In application, guidelines can conflict and overlap.Guidelines do not guarantee usability.Using guidelines does NOT eliminate need for usability testing.Design by guidelines, not by politics or personal opinion.

Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier.29

Outro

UI UX ex)

ReferenceApple Computer, Inc. (2005), Apple Human Interface Guidelines.Barfield, L. (1992).The user interface: concepts and design. Addison-Wesley Longman Publishing Co., Inc..Cooper, A., Reimann, R., & Cronin, D. (2007).About face 3: the essentials of interaction design. John Wiley & Sons.Cox, K., & Walker, D. (1992). User-interface design. Prentice-Hall, Inc..Dix, A. (2009).Human-computer interaction(pp. 1327-1331). Springer US.Galitz, W. O. (2007).The essential guide to user interface design: an introduction to GUI design principles and techniques. John Wiley & Sons.Garrett, J. J. (2010).Elements of user experience, the: user-centered design for the web and beyond. Pearson Education.Hartson, R., & Pyla, P. S. (2012). The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier.Johnson, J. (2007). GUI bloopers 2.0: common user interface design don'ts and dos. Morgan Kaufmann.Kraft, C. (2012).User experience innovation: User centered design that works. Apress.Kraft, C., 1976-, , , & . (2014). : . : .Levin, M. (2014).Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.".Levin, M., & . (2014). Ux : 3 . : .Microsoft Corporation. (2010), Windows User Experience Interaction Guidelines.Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems (pp. 152-158). ACM.Shneiderman, B. (1992). Designing the user interface: strategies for effective human-computer interaction (Vol. 3). Reading, MA: Addison-Wesley.

Thank you

Appendix: The original text of10 Researchers General UI/UX Design PrinciplesD5(About face 3) The original text

1. First Principles Basic Principles (2007) Johnson, J. (2007).GUI bloopers 2.0: common user interface design don'ts and dos. Morgan Kaufmann.

1. Focus on the users and their tasks, not on the technology2. Consider function first, presentation later3. Conform to the users view of the task4. Design for the common case5. Dont distract users from their goals6. Facilitate learning7. Deliver information, not just data8. Design for responsiveness9. Try it out on users, then fix itThe original text

2. Eight Golden Rules of Interface Design (1992) Shneiderman, B. (1992).Designing the user interface: strategies for effective human-computer interaction(Vol. 3). Reading, MA: Addison-Wesley.

1. Strive for consistency.2. Enable frequent users to use shortcuts.3. Offer informative feedback.4. Design dialog to yield closure.5. Offer simple error handling.6. Permit easy reversal of actions.7. Support internal locus of control.8. Reduce short-term memory load.The original text

3. Guide-lines for User-Interfaces (1993) - Design systems to fit the user's conceptual model- Consistency- Universal commands for consistency- User control- Modeless interaction- User modifiable- Short-cuts for experts- Use the user's language- Motivation- Feedback- Seeing and pointing versus remembering and typing- What you see is what you get (WYSIWYG)- Simplicity- Closure- Easy reversal- Simple error handling- Prevent errors- Provide clear directions and messages- Easy to learn- Reduce short-term memory load Cox, K., & Walker, D. (1992). User-interface design. Prentice-Hall, Inc..The original text

4. 10 Usability Heuristics for User Interface Design (1994) Nielsen, J. (1994, April). Enhancing the explanatory power of usability heuristics. In Proceedings of the SIGCHI conference on Human Factors in Computing Systems(pp. 152-158). ACM.(http://www.nngroup.com/articles/ten-usability-heuristics/)

- Visibility of system status- Match between system and the real world- User control and freedom- Consistency and standards- Error prevention- Recognition rather than recall- Flexibility and efficiency of use- Aesthetic and minimalist design- Help users recognize, diagnose, and recover from errors- Help and documentationThe original text

6. Principles to support usability: Learnability Dix, A. (2009).Human-computer interaction(pp. 1327-1331). Springer US.

LearnabilityPredicability: Support for the user to determine the effect of future action based on past interaction history.Synthesizability: Support for the user to assess the effect of past operations on the current state.Familiarity: The extent to which a users knowledge and experience in other real-world or computer-based domains can be applied when interacting with a new system.Generalizability: Support for the user to extend knowledge of specific interaction within and across applications to other similar situations.Consistency: Likeness in input/output behavior arising from similar situations or similar task objectives.The original text

6. Principles to support usability: Flexibility FlexibilityDialogue initiative: Allowing the user freedom from artificial constraints on the input dialogue imposed by the system.Multi-threading: Ability of the system to support user interaction pertaining to more than one task at a time.Task migratability: The ability to pass control for the execution of a given task so that it becomes either internalized by user or system or shared between them.Substitutivity: Allowing equivalent values of input and output to be arbitrarily substituted for each other.Customizability: Modifiability of the user interface by the user or the system.The original text

6. Principles to support usability: Robustness RobustnessObservability: Ability of the user to evaluate the internal state of the system from its perceivable representation.Recoverability: Ability of the user to take corrective action once an error has been recognized.Responsiveness: How the user perceives the rate of communication with the system.Task conformance: The degree to which the system services support all of the tasks the user wishes to perform and in the way that the user understands them.The original text

7. Human Interface Design Principles - Metaphors- Reflect the Users Mental Model- Explicit and Implied Actions- Direct Manipulation- User Control- Feedback and Communication- Consistency- WYSIWYG (What You See Is What You Get)- Forgiveness- Perceived Stability- Aesthetic Integrity- Modelessness- Managing Complexity in Your SoftwareApple Computer, Inc. (2005), Apple Human Interface Guidelines.(http://www.multimedialab.be/doc/tech/doc_osx_hi_guidelines.pdf)The original text

8. Windows User Experience Design PrinciplesMicrosoft Corporation. (2010), Windows User Experience Interaction Guidelines.

- Reduce concepts to increase confidence- Small things matter, good and bad- Be great at "look" and "do"- Solve distractions, not discoverability- UX before knobs and questions- Personalization, not customization- Value the life cycle of the experience- Time matters, so build for people on the goThe original text

9. UX Design Guidelines (2012): Planning Hartson, R., & Pyla, P. S. (2012).The UX Book: Process and guidelines for ensuring a quality user experience. Elsevier.

PlanningClear system task model for userPlanning for efficient task pathsProgress indicatorsAvoiding transaction completion slipsThe original text

9. UX Design Guidelines (2012): Translating, Physical actions TranslationExistence of cognitive affordancePresentation of cognitive affordanceContent and meaning of cognitive affordanceTask structure

Physical actionsSensing objects of physical actionsHelp users doing physical actions

The original text

9. UX Design Guidelines (2012): Outcomes, Assessment OutcomesSystem functionalitySystem response timeAutomation issues

AssessmentExistence of feedbackFeedback timingContent and meaning of feedbackAssessment of information displaysThe original text

9. UX Design Guidelines (2012): OverallOverallOverall simplicityOverall consistencyHumorAnthropomorphismTone and psychological impactUse of sound and colorGratuitous graphicsText legibilityUser preferencesAccommodation of user differencesHelpful helpThe original text

10. 3C framework (2014)Levin, M. (2014).Designing Multi-device Experiences: An Ecosystem Approach to User Experiences Across Devices. " O'Reilly Media, Inc.".

3C framework: Consistent, Continuous, Complementary designConsistent design: The same basic experience is replicated between devices, keeping the content, flow, structure, and core feature set consistent across the ecosystem. Some adjustments are made to accommodate device-specific attributes, but the overall experience can be fully consumed on any device.Continuous design: It is that the experience is passed on from one device to another, either continuing the same activity or progressing through a sequence of different activities.Complementary design: It is that devices complement one another(with relevant info/functionality), creating a new experience as a connected group. This experience can encompass two forms of device relationship: collaboration and control.The original text

Recommended

View more >