SET Software Engineering Thailand Meeting: HCI / Usability Patterns

User Interface Design withUser Interface Design with
Usability / HCI PatternsUsability / HCI Patterns
A Contribution to the ImprovementA Contribution to the Improvement
of Software Usabilityof Software Usability
Roland PetraschRoland Petrasch

SET Meetup, Bangkok
Roland Petrasch: Usability / HCI Patterns
June. 11, 2015 Slide 2
User Interface Design withUser Interface Design with
Topic: HCI (Human Computer Interface), User Experience,Topic: HCI (Human Computer Interface), User Experience,
Usability / HCI Patterns, Model-based User Interface DesignUsability / HCI Patterns, Model-based User Interface Design
AgendaAgenda
Introduction to Usability / HCI PatternsIntroduction to Usability / HCI Patterns
Examples for General Usability Patterns / CatalogsExamples for General Usability Patterns / Catalogs
Usability Patterns and UI ToolsUsability Patterns and UI Tools
Example for a Computer Game PatternExample for a Computer Game Pattern
Formal HCI Patterns and MBUIDFormal HCI Patterns and MBUID
SummarySummary
GoalsGoals
Fundamental ideas about power of HCI patternFundamental ideas about power of HCI pattern
Motivation to setup own pattern libraryMotivation to setup own pattern library
S
E
T

SET Meetup, Bangkok
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 Petrasch
Thammasat University, Department of Computer Science,
Rangsit Campus, Pathum Thani
roland.petrasch@cs.tu.ac.th
roland.petrasch@gmail.com
Roland Petrasch28.5.2015, SET Meet-up
Programming with Scala - Prequel
Slide 3

SET Meetup, Bangkok
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 artworksin buildings or artworks
Known (reusable) & generic solutionsKnown (reusable) & generic solutions
for type of problemsfor type of problems
Users can easily recognizeUsers can easily recognize
applied patternsapplied patterns
HCI-Patterns: Solution derived fromHCI-Patterns: Solution derived from
ergonomic requirements & principlesergonomic requirements & principles
Source: commons.wikipedia.org
Author: Gliwi
Source:
en.wikipedia.org/wiki/Meander_(art)
S
E
T

SET Meetup, Bangkok
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 designers
and 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, LearningDomains: Social, Shopping / eCommerce, Games, Learning
Ergonomics / AccessibilityErgonomics / Accessibility
S
E
T

SET Meetup, Bangkok
Different description language and level of formalizationDifferent description language and level of formalization
HCI Pattern examplesHCI Pattern examples
Good DefaultsGood Defaults
Input PromptInput Prompt
Forgiving FormatForgiving Format
BreadcrumpsBreadcrumps
Feedback dialogs,Feedback dialogs,
e.g. YNCe.g. YNC
S
E
T

SET Meetup, Bangkok
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 forJenifer Tidwell: Designing Interfaces. Patterns for
Effective Interaction DesignEffective Interaction Design
S
E
T

SET Meetup, Bangkok
Usability / HCI Patterns: LanguageUsability / HCI Patterns: Language
PLML: Pattern Language Markup Language (Sally Fincher, JanetPLML: Pattern Language Markup Language (Sally Fincher, Janet
Finlay), last paper in 2006Finlay), last paper in 2006
Most catalogs use some elements of GoF pattern descriptionMost 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, Bangkok
Examples for GeneralExamples for General
Usability Patterns / CatalogsUsability Patterns / Catalogs
ExampleExample
„Live Preview”„Live Preview”
fromfrom
ui-patterns.comui-patterns.com
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 10
Pattern CatalogsPattern Catalogs
Somewhat helpful for UI design tasks and for understandingSomewhat 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 layout
or 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 patternstructural and behavioral pattern
„Toggle with Symetric Interaction”„Toggle with Symetric Interaction”
(show/hide, change mode ...)(show/hide, change mode ...)
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 11
Pattern CatalogsPattern Catalogs
Example „Example „Toggle with Symetric Interaction”Toggle with Symetric Interaction”
S
E
T
1st click
asymmetric
2nd click
symmetric:
Enter rotate
mode
Interaction:
rotate object
2nd click
symmetric:
Exit rotate
mode

SET Meetup, Bangkok
June. 11, 2015 Slide 12
Usability / HCI Patterns catalogsUsability / HCI Patterns catalogs
ui-patterns.com by Anders Toxboeui-patterns.com by Anders Toxboe
zurb.com/patterntap by ZURB, Inc.zurb.com/patterntap by ZURB, Inc.
www.smileycat.com/design_elements by Christian Watsonwww.smileycat.com/design_elements by Christian Watson
developer.yahoo.com/ypatterns by Yahoodeveloper.yahoo.com/ypatterns by Yahoo
pttrns.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 Knowledge
www.interaction-design.org: Eelke Folmerwww.interaction-design.org: Eelke Folmer
www.mit.edu/~jtidwell/interaction_patterns.html: J. Tidwellwww.mit.edu/~jtidwell/interaction_patterns.html: J. Tidwell
www.iso.org: ISO 9241 (part 110: Dialogue principles)www.iso.org: ISO 9241 (part 110: Dialogue principles)
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 13
Usability PatternsUsability Patterns
and UI Toolsand UI Tools
Balsamiq (balsamiq.com): No Patterns out-of-the-box, but canBalsamiq (balsamiq.com): No Patterns out-of-the-box, but can
be implemented somehowbe implemented somehow
http://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 Library
in futurein future
versionversion
Oracle SceneOracle Scene
Builder: NoBuilder: No
PatternsPatterns
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 14
Example for aExample for a
Computer Game PatternComputer Game Pattern
Example: Angry Birds by RovioExample: Angry Birds by Rovio
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 15
Example: Angry Birds by RovioExample: Angry Birds by Rovio
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 16
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, Bangkok
June. 11, 2015 Slide 17
Pattern LibsPattern Libs
for Computer Gamesfor Computer Games
Bob Nystrom: Game Programming PatternsBob Nystrom: Game Programming Patterns
(gameprogrammingpatterns.com)(gameprogrammingpatterns.com)
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 18
Pattern LibsPattern Libs
for Computer Gamesfor 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, Bangkok
June. 11, 2015 Slide 19
Patterns for Computer GamesPatterns 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, Bangkok
June. 11, 2015 Slide 20
Patterns forPatterns for
Computer GamesComputer 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, Bangkok
June. 11, 2015 Slide 21
Formal HCI Patterns:Formal HCI Patterns:
Navigational Pattern ExampleNavigational 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 specificDSL: Domain specific
Model-based approach for HCI patternsModel-based approach for HCI patterns
Software engineering: Metamodels, UML Profiles, CodeSoftware engineering: Metamodels, UML Profiles, Code
generator, tool integration etc.generator, tool integration etc.
Usability engineering: User experience analysis, HCIUsability engineering: User experience analysis, HCI
pattern definition, application of patternspattern definition, application of patterns
Define
Patterns
Apply
Patterns
Generate Play
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 22
Model-based approachModel-based approach
for HCI patternsfor HCI patterns
Definition of patternDefinition of pattern
model for level endmodel for level end
navigationnavigation
Define
Patterns
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 23
Application of patterns forApplication of patterns for
new game developmentnew game development
Apply
Patterns
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 24
Code generation for the gameCode generation for the game Generate Play
S
E
T

SET Meetup, Bangkok
June. 11, 2015 Slide 25
SummarySummary
ISO 9241-110 Ergonomics of human-system interactionISO 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 terminology
Conformity 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 apps
User 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. breadcrumbs
Setup / create own pattern catalogSetup / create own pattern catalog
Model-Based User Interface Design (MBUID)Model-Based User Interface Design (MBUID)
S
E
T

Thank you for your attentionThank you for your attention
Roland PetraschRoland Petrasch

SET Software Engineering Thailand Meeting: HCI / Usability Patterns

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (10)

Similar to SET Software Engineering Thailand Meeting: HCI / Usability Patterns

Similar to SET Software Engineering Thailand Meeting: HCI / Usability Patterns (20)

Recently uploaded

Recently uploaded (20)

SET Software Engineering Thailand Meeting: HCI / Usability Patterns