Before usability CS 147: Intro to HCI Dan Maynes-Aminzade After 1 st Usability Review.
SET Software Engineering Thailand Meeting: HCI / Usability Patterns
-
Upload
roland-petrasch -
Category
Internet
-
view
196 -
download
2
Transcript of SET Software Engineering Thailand Meeting: HCI / Usability Patterns
User Interface Design with User Interface Design with Usability / HCI PatternsUsability / HCI PatternsA Contribution to the ImprovementA Contribution to the Improvement
of Software Usabilityof Software Usability
Roland PetraschRoland Petrasch
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 2
User Interface Design with User Interface Design with Usability / HCI PatternsUsability / HCI Patterns
Topic: HCI (Human Computer Interface), User Experience,Topic: HCI (Human Computer Interface), User Experience,Usability / HCI Patterns, Model-based User Interface Design Usability / HCI Patterns, Model-based User Interface Design
AgendaAgendaIntroduction to Usability / HCI PatternsIntroduction to Usability / HCI PatternsExamples for General Usability Patterns / CatalogsExamples for General Usability Patterns / CatalogsUsability Patterns and UI ToolsUsability Patterns and UI ToolsExample for a Computer Game Pattern Example for a Computer Game Pattern Formal HCI Patterns and MBUIDFormal HCI Patterns and MBUIDSummarySummary
GoalsGoalsFundamental ideas about power of HCI patternFundamental ideas about power of HCI patternMotivation to setup own pattern libraryMotivation to setup own pattern library
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 3
SET — Software Engineering Thailand
The Interest Group from & (not only) for Developers
Open Group: Members, Sponsors and Organizers welcome
Next topics: HCI Patterns, Scrum, Model-Based UID, Agile Testing, Software Architectures & Frameworks, S.O.L.I.D. & Co., UML ...
Contact
Roland PetraschThammasat University, Department of Computer Science, Rangsit Campus, Pathum Thani
[email protected]@gmail.com
Roland Petrasch28.5.2015, SET Meet-up Programming with Scala - Prequel
Slide 3
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 4
Introduction to Usability /Introduction to Usability /HCI PatternsHCI Patterns
PatternsPatterns
Can be found everywhere, e.g.Can be found everywhere, e.g.in buildings or artworks in buildings or artworks
Known (reusable) & generic solutions Known (reusable) & generic solutions for type of problems for type of problems
Users can easily recognize Users can easily recognize applied patternsapplied patterns
HCI-Patterns: Solution derived from HCI-Patterns: Solution derived from ergonomic requirements & principlesergonomic requirements & principles
Source: commons.wikipedia.orgAuthor: Gliwi
Source: en.wikipedia.org/wiki/Meander_(art)
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 5
Introduction to Usability /Introduction to Usability /HCI PatternsHCI Patterns
Usability / HCI PatternsUsability / HCI Patterns
Also kown as (G)UI or UID patterns UX Patterns→Also kown as (G)UI or UID patterns UX Patterns→
Analogous to OOD & Design Patterns? Yes, but ... Analogous to OOD & Design Patterns? Yes, but ...
Design Patterns are for software developers and engineersDesign Patterns are for software developers and engineers
Usability Patterns should be for UX experts, UI designersUsability Patterns should be for UX experts, UI designersand IT/business analyst … and end users?and IT/business analyst … and end users?
CategoriesCategories
General: Input / Forms, Navigation / Menu, Interaction / General: Input / Forms, Navigation / Menu, Interaction / Behavior, Special Elements, Feedback, Charts/Data, LayoutBehavior, Special Elements, Feedback, Charts/Data, Layout
Domains: Social, Shopping / eCommerce, Games, Learning Domains: Social, Shopping / eCommerce, Games, Learning
Ergonomics / AccessibilityErgonomics / Accessibility
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 6
Introduction to Usability /Introduction to Usability /HCI PatternsHCI Patterns
Usability / HCI PatternsUsability / HCI Patterns
Different description language and level of formalizationDifferent description language and level of formalization
HCI Pattern examplesHCI Pattern examples
Good Defaults Good Defaults
Input PromptInput Prompt
Forgiving FormatForgiving Format
BreadcrumpsBreadcrumps
Feedback dialogs,Feedback dialogs,e.g. YNCe.g. YNC
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 7
Introduction to Usability /Introduction to Usability /HCI PatternsHCI Patterns
Usability / HCI PatternsUsability / HCI Patterns
Essential „Patterns” on the element level, e.g.Essential „Patterns” on the element level, e.g.Calendar Picker, Radio Button, Checkbox, Single line editCalendar Picker, Radio Button, Checkbox, Single line edit
Not real patterns, more a ruleset for atomic componentsNot real patterns, more a ruleset for atomic components
Ergonomic background should be understood, e.g.Ergonomic background should be understood, e.g.Checkbox multiple choice, Pull-Down Menu 7+/-2 rule,→ →Checkbox multiple choice, Pull-Down Menu 7+/-2 rule,→ →Overlay Edit vs Inline Edit space, context, →Overlay Edit vs Inline Edit space, context, →White space and Fitt's Law ...White space and Fitt's Law ...
UX Books and Style Guides helpful, e.g. UX Books and Style Guides helpful, e.g. Bill Scott; Theresa Neil: Designing Web InterfacesBill Scott; Theresa Neil: Designing Web Interfaces
Don Norman: The Design of Everyday ThingsDon Norman: The Design of Everyday Things
Steve Krug: Don’t Make Me ThinkSteve Krug: Don’t Make Me Think
Jenifer Tidwell: Designing Interfaces. Patterns for Jenifer Tidwell: Designing Interfaces. Patterns for Effective Interaction DesignEffective Interaction Design
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 8
Introduction to Usability /Introduction to Usability /HCI PatternsHCI Patterns
Usability / HCI Patterns: LanguageUsability / HCI Patterns: Language
PLML: Pattern Language Markup Language (Sally Fincher, Janet PLML: Pattern Language Markup Language (Sally Fincher, Janet Finlay), last paper in 2006Finlay), last paper in 2006
Most catalogs use some elements of GoF pattern description Most catalogs use some elements of GoF pattern description scheme, e.g. scheme, e.g.
Problem SummaryProblem Summary
Solution and Pattern or ExampleSolution and Pattern or Example
UsageUsage
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 9
Examples for GeneralExamples for GeneralUsability Patterns / CatalogsUsability Patterns / Catalogs
ExampleExample„Live Preview”„Live Preview”from from ui-patterns.comui-patterns.com
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 10
Examples for GeneralExamples for GeneralUsability Patterns / CatalogsUsability Patterns / Catalogs
Pattern CatalogsPattern Catalogs
Somewhat helpful for UI design tasks and for understanding Somewhat helpful for UI design tasks and for understanding some UX aspectssome UX aspects
Most patterns are poorly documented and focus only on layoutMost patterns are poorly documented and focus only on layoutor they are very general or only a screenshot is givenor they are very general or only a screenshot is given
Complex scenarios are not covered, no formal model, e.g.Complex scenarios are not covered, no formal model, e.g.
structural and behavioral pattern structural and behavioral pattern „Toggle with Symetric Interaction” „Toggle with Symetric Interaction” (show/hide, change mode ...)(show/hide, change mode ...)
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 11
Examples for GeneralExamples for GeneralUsability Patterns / CatalogsUsability Patterns / Catalogs
Pattern CatalogsPattern Catalogs
Example „Example „Toggle with Symetric Interaction”Toggle with Symetric Interaction”
S E T
1st clickasymmetric
2nd clicksymmetric:Enter rotate mode
Interaction:rotate object
2nd clicksymmetric:Exit rotate mode
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 12
Examples for GeneralExamples for GeneralUsability Patterns / CatalogsUsability Patterns / Catalogs
Usability / HCI Patterns catalogsUsability / HCI Patterns catalogs
ui-patterns.com by Anders Toxboeui-patterns.com by Anders Toxboezurb.com/patterntap by ZURB, Inc. zurb.com/patterntap by ZURB, Inc. www.smileycat.com/design_elements by Christian Watson www.smileycat.com/design_elements by Christian Watson developer.yahoo.com/ypatterns by Yahoodeveloper.yahoo.com/ypatterns by Yahoopttrns.com by Beyond Labs, Inc.pttrns.com by Beyond Labs, Inc.
Other resourcesOther resources
www.usabilitybok.org: Usability Body of Knowledgewww.usabilitybok.org: Usability Body of Knowledgewww.interaction-design.org: Eelke Folmerwww.interaction-design.org: Eelke Folmerwww.mit.edu/~jtidwell/interaction_patterns.html: J. Tidwellwww.mit.edu/~jtidwell/interaction_patterns.html: J. Tidwellwww.iso.org: ISO 9241 (part 110: Dialogue principles)www.iso.org: ISO 9241 (part 110: Dialogue principles)
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 13
Usability Patterns Usability Patterns and UI Toolsand UI Tools
Usability / HCI PatternsUsability / HCI Patterns
Balsamiq (balsamiq.com): No Patterns out-of-the-box, but can Balsamiq (balsamiq.com): No Patterns out-of-the-box, but can be implemented somehowbe implemented somehowhttp://blogs.balsamiq.com/ux/2014/08/06/using-balsamiq-mockups-with-pattern-libraries-and-frameworks/http://blogs.balsamiq.com/ux/2014/08/06/using-balsamiq-mockups-with-pattern-libraries-and-frameworks/
UXPin (uxpin.com): UXPin (uxpin.com): UX Pattern LibraryUX Pattern Libraryin futurein futureversionversionOracle SceneOracle SceneBuilder: No Builder: No PatternsPatterns
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 14
Example for a Example for a Computer Game PatternComputer Game Pattern
Example: Angry Birds by RovioExample: Angry Birds by Rovio
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 15
Example for a Example for a Computer Game PatternComputer Game Pattern
Example: Angry Birds by RovioExample: Angry Birds by Rovio
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 16
Example for a Example for a Computer Game PatternComputer Game Pattern
Patterns for Game DevelopmentPatterns for Game Development
Angry Bird example: Angry Bird example: „level complete / finished / end” navigational pattern „level complete / finished / end” navigational pattern
3 Examples for Pattern Libraries for Computer Games3 Examples for Pattern Libraries for Computer Games
Bob Nyborg: Games Programming PatternsBob Nyborg: Games Programming Patterns
Adam Siton, Eldad Bercovici: Game PatternsAdam Siton, Eldad Bercovici: Game Patterns
Eelkle Folmer: Usability Patterns in GamesEelkle Folmer: Usability Patterns in Games
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 17
Pattern LibsPattern Libs for Computer Games for Computer Games
Bob Nystrom: Game Programming PatternsBob Nystrom: Game Programming Patterns(gameprogrammingpatterns.com)(gameprogrammingpatterns.com)
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 18
Pattern LibsPattern Libs for Computer Games for Computer Games
Adam Siton, Eldad Bercovici: Game PatternsAdam Siton, Eldad Bercovici: Game Patterns(www.game-patterns.com)(www.game-patterns.com)
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 19
Patterns for Computer Games Patterns for Computer Games
Eelkle Folmer: Usability Patterns in GamesEelkle Folmer: Usability Patterns in Games(www.eelke.com/files/pubs/usabilitypatternsingames.pdf)(www.eelke.com/files/pubs/usabilitypatternsingames.pdf)
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 20
Patterns for Patterns for Computer Games Computer Games
Patterns for Game DevelopmentPatterns for Game Development
Somewhat useful for programmers and designersSomewhat useful for programmers and designers
Very different documentation style & level of detailVery different documentation style & level of detail
Mostly textual information (natural language) Mostly textual information (natural language) and screenshots, example code, notes etc.and screenshots, example code, notes etc.
(More) formal, model-based approach needed for(More) formal, model-based approach needed for
Software engineering, e.g. code generationSoftware engineering, e.g. code generation
Usability engineering, e.g. usability testingUsability engineering, e.g. usability testing
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 21
Formal HCI Patterns: Formal HCI Patterns: Navigational Pattern Example Navigational Pattern Example
Formal modeling language is usedFormal modeling language is used
GPL: general purpose language, e.g. UMLGPL: general purpose language, e.g. UML
DSL: Domain specific DSL: Domain specific
Model-based approach for HCI patternsModel-based approach for HCI patterns
Software engineering: Metamodels, UML Profiles, Code Software engineering: Metamodels, UML Profiles, Code generator, tool integration etc.generator, tool integration etc.
Usability engineering: User experience analysis, HCI Usability engineering: User experience analysis, HCI pattern definition, application of patternspattern definition, application of patterns
DefinePatterns
ApplyPatterns Generate Play
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 22
Formal HCI Patterns: Formal HCI Patterns: Navigational Pattern Example Navigational Pattern Example
Model-based approach Model-based approach for HCI patternsfor HCI patterns
Definition of patternDefinition of patternmodel for level endmodel for level endnavigationnavigation
DefinePatterns
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 23
Formal HCI Patterns: Formal HCI Patterns: Navigational Pattern Example Navigational Pattern Example
Model-based approach for HCI patternsModel-based approach for HCI patterns
Application of patterns for Application of patterns for new game developmentnew game development
ApplyPatterns
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 24
Formal HCI Patterns: Formal HCI Patterns: Navigational Pattern Example Navigational Pattern Example
Model-based approach for HCI patternsModel-based approach for HCI patterns
Code generation for the gameCode generation for the gameGenerate Play
S E T
SET Meetup, BangkokRoland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 25
Summary Summary
ISO 9241-110 Ergonomics of human-system interaction ISO 9241-110 Ergonomics of human-system interaction (dialogue principles)(dialogue principles)
Consistency UI follows the same general principles standards, →Consistency UI follows the same general principles standards, →the same interaction principles, uses the same terminologythe same interaction principles, uses the same terminologyConformity to User Expectations: Consistency helps, Conformity to User Expectations: Consistency helps, but is not the only aspectbut is not the only aspect
Patterns are great for consistent UIPatterns are great for consistent UI
User and usage context is essential, e.g. mobile appsUser and usage context is essential, e.g. mobile appsUser expectation depends on user :)User expectation depends on user :)Patterns are not a dogma, rule of thumb, e.g. breadcrumbsPatterns are not a dogma, rule of thumb, e.g. breadcrumbsSetup / create own pattern catalogSetup / create own pattern catalog
Model-Based User Interface Design (MBUID)Model-Based User Interface Design (MBUID)
S E T