Design Patterns for Interactive Graphics

Design patterns for Interactive Graphics

2

Christian Kohls, 2007, Knowledge Media Research Center, Tübingen

Intro

Problem statement: How to connect the two cities?

Solutions come implicitly into our mind!

3


Design patterns are...

Solution

for a Problem

in a Context

Forces

raise

resolve

Design Patterns capture theinvariant components of proven solutions forrecurrent problems of designand explain them by examples and a schema.

4


Balancing forces: Finding the best form to solve a problem in a context

Design is considered as problem-solving process

Which tool fits best to bring a nail into a wall?

Design task: Balance the iron balls

5


Common examples of recurring problem-solution structures

• Static structures(„a thing“):

• Dynamic structures („a process“)

Homepage

6


Timeline: Entwicklungsgeschichte

1979

„The Quality without a Name“

1987 1995

WikiWikiWeb:The PortlandPattern Repository

1964 2000 2003 2006

Notes on theSynthesisOf Form

1977

A Pattern Language

The TimelessWay of Building

Beck&Cunningham:Software Patterns

„Gang of Four“Design Pattens

GUI PatternPedagogical Patterns

AJAXWeb 2.0

E-Learning Web-Design

7


Solution

Problem

Forces

Name

Context

A Pattern LanguageTowns – Buildings - Construction

Bus StopBus stops must be easy to recognise, and pleasant, with enough activity around them to make people comfortable and safe.

within a town whose public transportation is based on MINIBUSES (20), genuinelyable to serve people, almost door to door, for a low price, and very fast, there needto be bus stops within a few hundred feet of every house and workplace.

…Web of relationships that are present in the tiny system around the bus stop…

Therefore:

Build bus stops so that they form tiny centers of public life. Build them as part of the gateways into neighborhoods, work communities, parts of town. Locate them so that they work together with several other activities, at least a newsstand, maps, outdoor shelter, seats, and in various combinations, corner groceries, smoke shops, coffee bar, tree places, special road crossings, public bathrooms, squares….

What?

When?

Why?

How?

8


Dynamic labels 1

9


Dynamic labels 2

10


Dynamic labels 3

11


Dynamic labels are a pattern.

Button: A mouse event (click, roll-over) on a button turns another object ON or OFF

On/Off objectTwo visual states (different opacity, colour, image)

OFF = Transparent opacityON = Full opacity

12


Entwurfsmuster:

Design Pattern: ActivatorActivate an image or visual object by a pointer object on demand.

13


Design Pattern: SandboxAvoid that a dragable element can exit a defined area.

Entwurfsmuster:

14


Entwurfsmuster:

Design Pattern: Synchronize ObjectsShow how motions of objects depend on each other.

15


Entwurfsmuster:

Entwurfsmuster: Objekt-TransporterDynamically attach content to a dragable container.

16


Integration of patterns in authoring tools

Wizards guide through the creation:Visual language showsPattern realtions:

17


Decomposition of structure

Following Gestaltpsychologie:The sum is more than its parts!

18


Decomposition of structure

19


Which invariant parts are related and represent an archetypical pattern?

What is the core of a table?

Theoretical framework: Knowledge schemas

20


Pattern Mining, Writing & Application

Explicit Patterns

(Documented Patterns)

Mental Patterns(Pattern as mental models)

implicit explicit

Real World Patterns

(Recurring structure observedIn our envirionment)

PatternMining

PatternWriting

Pattern Application

21


Literatur

• [Al64] Alexander, C.: Notes on the Synthesis of Form. Cambridge, MASS: Harvard• University Press, 1964.• [Al77] Alexander, C.; Ishikawa, S.; Silverstein, M.; Jakobson, M.; Fiksdahl-King, I.; Angel,S.: A Pattern Language; New York: Oxford University Press, 1977• [Al79] Alexander, C: The Timeless Way of Building. New York: Oxford University Press, 1979• [Ba06] Baumgarter, P.: Unterrichtsmethoden als Handlungsmuster - Vorarbeiten zu einer didaktischen Taxonomie für ELearning. In Mühlhäuser, M., Rößling, G.,

Steinmetz, R. (Hrsg.), DeLFI 2006, 4. e-Learning Fachtagung Informatik (S. 51-62). Darmstadt: Gesellschaft für Informatik e.V.• [BC87] Beck, K. & Cunningham, W.: Using Pattern Languages for Object-Oriented Programs. In: Technical Report CR-87-43, Tektronix, Inc. OOPSLA'87 workshop on

Specification and Design for Object-Oriented Programming; 1987.• [BRP04] Baggetun, R., Rusman, E., & Poggi, C.: Design patterns for collaborative learning: from practice to theory and back. In Cantoni, L. & McLoughlin, C. (Eds.)

Proceedings of the World Conference on Educational Multimedia, Hypermedia and Telecommunications, Norfolk, USA, 2493-2498, 2004.• [GLC01] Granlund, Asa; Lafrenière, Daniel ; Carr, Daniel A.: A Pattern-Supported Approach to the User Interface Design Process, Proceedings of HCI International

2001, 9th International Conference on Human-Computer Interaction, 2001, New Orleans • [Cu95] Cunningham, W. Portland Pattern Repository's Wiki. Verfügbar unter: http://c2.com/cgi/wiki?WelcomeVisitors [12.2.2007]• [DLH04] Duynie, Douglas K. van; Landay, James A.; Hong, Jason I.: The Design of Sites, Addison-Wesley, 2004• [Ga95] Gamma, E.; Helm, R.; Jonson, R.; Vlissides, J: Design Patterns: Elements of Reusable Object-Oriented Software. Reading, Mass: Addison-Wesley, 1995• [Ga02] Gabriel, P.: Writers’ Workshops & the Work of Making Things. Patterns, Poetry… Boston: Pearson Education, 2002.• [Go05] Goodyear, P. Educational design and networked learning: Patterns, pattern languages and design practice. Australasian Journal of Educational Technologoy

2005, 21 (1), 82-101.• [Ha99] Harrison, N.B.: The Language of Shepherding. A Pattern Language for Shepherds and Sheep. http://www.mcs.vuw.ac.nz/~kplop/Shp.html [14.10.2006] • [KW06] Kohls, C., Windbrake, T.: Towards a Pattern Language for Interactive Information Graphics. Pattern Languages of Programming Design 2006. Portland,

Oregon: Hillside Group. URL: http://hillside.net/plop/2006/accepted_papers.htm.• [Ma06] Mahemoff, M.: Ajax Design Patterns. Creating Web 2.0 Sites with Programming and Usability Patterns. Sebastopol: O’Reilly Media, 2006.• [MD03] Meszaros, Gerard; Doble, Jim: A pattern language for pattern writing. http://hillside.net/patterns/wrtiing/patterns.htm, (accessed: 18.10.05)• [ND05] Niegemann, H. M.; Domagk, S: ELEN project Evaluation Report, Report of Work package 5. E-LEN project: a network of e-learning centres;

http://www2.tisip.no/E-LEN/documents/ELEN-Deliverables/Evaluation_Report_E_LEN.pdf (accessed 29.03.06)• [No88] Norman, D.: The Design of Everyday Things, New York: Basic Books, 1988.• [PPP] The Pedagogical Patterns Project, http://www.pedagogicalpatterns.org/• [Sc94] Schnotz, W.: Aufbau von Wissenstrukturen (S. 61-118). Weinheim:Beltz, 1994.• [Si96] Simon, H.A.: The Sciences of the Artificial. MIT Press, 3rd edition, 1996. • [Ti05] Tidwell, J.: Designing Interfaces, O’Reilly, Sebastopol, 2005.• [Vl97] Vlissides, J.: Patterns: The Top Ten Misconceptions, Object Magazine, 1997• [Va90] VanLehn, K. (1990). Problem Solving and Cognitive Skills Acquisition. In Posner, M.I. (Hrsg.) Foundations of Cognitive Science (S. 527-579). Cambridge: MIT

Press.• [VW04] Vogel, R; Wipperamnn S.: Dokumentation didaktischen Wissens in der Hochschule Didaktische Design Patterns als eine Form des Best-Practice-Sharing im

Bereich von IKT in der Hochschullehre, Wissenschaftsforschung Jahrbuch 2004, Berlin. 2005• [VM02] Veer, G. C. van der, Melguizo, M.C.: Mental Models. In J.A. Jacok & A. Sears (Hrsg.) The Human-Computer Interaction Handbook: Fundamentals, evolving

Technologies and emerging applications. (S. 52-80). Lawrence Erlbaum & Associates, 2002.• [WV03] Pattern Languages in Interaction Design: Structure and Organization: M. van Welie, G.C. van der Veer, In: Proceedings of Interact '03, 1-5 September, Zürich,

Switserland, Eds: Rauterberg, Menozzi, Wesson, p527-534, ISBN 1-58603-363-8, IOS Press, Amsterdam, The Netherlands, 2003.

Technology

Design Patterns for Interactive Graphics