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 — 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

mailto:[email protected]



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




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





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





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




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



Examples for GeneralExamples for GeneralUsability Patterns / CatalogsUsability Patterns / Catalogs

ExampleExample„Live Preview”„Live Preview”from from ui-patterns.comui-patterns.com

S E T


June. 11, 2015 Slide 10


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


June. 11, 2015 Slide 11


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


June. 11, 2015 Slide 12


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


June. 11, 2015 Slide 13

Usability Patterns Usability Patterns and UI Toolsand UI Tools


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


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


June. 11, 2015 Slide 15


Example: Angry Birds by RovioExample: Angry Birds by Rovio

S E T


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


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


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


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


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


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


June. 11, 2015 Slide 22


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


June. 11, 2015 Slide 23



Application of patterns for Application of patterns for new game developmentnew game development

ApplyPatterns

S E T


June. 11, 2015 Slide 24



Code generation for the gameCode generation for the gameGenerate Play

S E T


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

Thank you for your attentionThank you for your attention

Roland PetraschRoland Petrasch

Internet

SET Software Engineering Thailand Meeting: HCI / Usability Patterns