Design patterns for  Interactive Graphics
Intro Problem statement: How to connect the two cities?  Solutions come implicitly into our mind!
Design patterns are... <ul><li>Solution </li></ul><ul><li>for a   Problem </li></ul><ul><li>in a  Context </li></ul>Forces...
Balancing forces:  Finding the best form to solve a problem in a context Design is considered as problem-solving process W...
Common examples of recurring  problem-solution structures <ul><li>Static structures(„a thing“): </li></ul><ul><li>Dynamic ...
Timeline: Entwicklungsgeschichte 1979 „ The Quality without a Name“ 1987 1995 WikiWikiWeb: The Portland Pattern Repository...
A Pattern Language Towns – Buildings - Construction Solution Problem Forces Name Context Bus Stop Bus stops must be easy t...
Dynamic labels 1
Dynamic labels 2
Dynamic labels 3
Dynamic labels are a pattern. Button:   A mouse event (click, roll-over) on a button turns another object ON or OFF On/Off...
Design Pattern: Activator Activate an image or visual object by a pointer object on demand. Entwurfsmuster:
Design Pattern: Sandbox Avoid that a dragable element can exit a defined area.   Entwurfsmuster:
Design Pattern: Synchronize Objects Show how motions of objects depend on each other. Entwurfsmuster:
Entwurfsmuster: Objekt-Transporter Dynamically attach content to a dragable container. Entwurfsmuster:
Integration of patterns in authoring tools Wizards guide through the creation: Visual language shows Pattern realtions:
Decomposition of structure Following  Gestaltpsychologie: The sum is more than its parts!
Decomposition of structure
Which invariant parts are related and  represent an archetypical pattern? <ul><li>What is the core of a table? </li></ul>T...
Pattern Mining, Writing & Application Explicit Patterns (Documented Patterns) Mental Patterns (Pattern as mental models) i...
Literatur <ul><li>[Al64] Alexander, C.: Notes on the Synthesis of Form. Cambridge, MASS: Harvard </li></ul><ul><li>Univers...
Upcoming SlideShare
Loading in …5
×

Design Patterns for Interactive Graphics

3,767 views
3,648 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,767
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Design Patterns for Interactive Graphics

  1. 1. Design patterns for Interactive Graphics
  2. 2. Intro Problem statement: How to connect the two cities? Solutions come implicitly into our mind!
  3. 3. Design patterns are... <ul><li>Solution </li></ul><ul><li>for a Problem </li></ul><ul><li>in a Context </li></ul>Forces Design Patterns capture the invariant components of proven solutions for recurrent problems of design and explain them by examples and a schema. raise resolve
  4. 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. 5. Common examples of recurring problem-solution structures <ul><li>Static structures(„a thing“): </li></ul><ul><li>Dynamic structures („a process“) </li></ul>Home page
  6. 6. Timeline: Entwicklungsgeschichte 1979 „ The Quality without a Name“ 1987 1995 WikiWikiWeb: The Portland Pattern Repository 1964 2000 2003 2006 1977 Notes on the Synthesis Of Form A Pattern Language The Timeless Way of Building Beck&Cunningham: Software Patterns „ Gang of Four“ Design Pattens GUI Pattern Pedagogical Patterns AJAX Web 2.0 E-Learning Web-Design
  7. 7. A Pattern Language Towns – Buildings - Construction Solution Problem Forces Name Context Bus Stop Bus 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), genuinely able to serve people, almost door to door, for a low price, and very fast, there need to 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… What? When? Why? How? 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….
  8. 8. Dynamic labels 1
  9. 9. Dynamic labels 2
  10. 10. Dynamic labels 3
  11. 11. Dynamic labels are a pattern. Button: A mouse event (click, roll-over) on a button turns another object ON or OFF On/Off object Two visual states (different opacity, colour, image) OFF = Transparent opacity ON = Full opacity
  12. 12. Design Pattern: Activator Activate an image or visual object by a pointer object on demand. Entwurfsmuster:
  13. 13. Design Pattern: Sandbox Avoid that a dragable element can exit a defined area. Entwurfsmuster:
  14. 14. Design Pattern: Synchronize Objects Show how motions of objects depend on each other. Entwurfsmuster:
  15. 15. Entwurfsmuster: Objekt-Transporter Dynamically attach content to a dragable container. Entwurfsmuster:
  16. 16. Integration of patterns in authoring tools Wizards guide through the creation: Visual language shows Pattern realtions:
  17. 17. Decomposition of structure Following Gestaltpsychologie: The sum is more than its parts!
  18. 18. Decomposition of structure
  19. 19. Which invariant parts are related and represent an archetypical pattern? <ul><li>What is the core of a table? </li></ul>Theoretical framework: Knowledge schemas
  20. 20. Pattern Mining, Writing & Application Explicit Patterns (Documented Patterns) Mental Patterns (Pattern as mental models) implicit explicit Real World Patterns (Recurring structure observed In our envirionment) Pattern Mining Pattern Writing Pattern Application
  21. 21. Literatur <ul><li>[Al64] Alexander, C.: Notes on the Synthesis of Form. Cambridge, MASS: Harvard </li></ul><ul><li>University Press, 1964. </li></ul><ul><li>[Al77] Alexander, C.; Ishikawa, S.; Silverstein, M.; Jakobson, M.; Fiksdahl-King, I.; Angel,S.: A Pattern Language; New York: Oxford University Press, 1977 </li></ul><ul><li>[Al79] Alexander, C: The Timeless Way of Building. New York: Oxford University Press, 1979 </li></ul><ul><li>[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. </li></ul><ul><li>[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. </li></ul><ul><li>[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. </li></ul><ul><li>[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 </li></ul><ul><li>[Cu95] Cunningham, W. Portland Pattern Repository's Wiki. Verfügbar unter: http://c2.com/cgi/wiki?WelcomeVisitors [12.2.2007] </li></ul><ul><li>[DLH04] Duynie, Douglas K. van; Landay, James A.; Hong, Jason I.: The Design of Sites, Addison-Wesley, 2004 </li></ul><ul><li>[Ga95] Gamma, E.; Helm, R.; Jonson, R.; Vlissides, J: Design Patterns: Elements of Reusable Object-Oriented Software. Reading, Mass: Addison-Wesley, 1995 </li></ul><ul><li>[Ga02] Gabriel, P.: Writers’ Workshops & the Work of Making Things. Patterns, Poetry… Boston: Pearson Education, 2002. </li></ul><ul><li>[Go05] Goodyear, P. Educational design and networked learning: Patterns, pattern languages and design practice. Australasian Journal of Educational Technologoy 2005, 21 (1), 82-101. </li></ul><ul><li>[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] </li></ul><ul><li>[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. </li></ul><ul><li>[Ma06] Mahemoff, M.: Ajax Design Patterns. Creating Web 2.0 Sites with Programming and Usability Patterns. Sebastopol: O’Reilly Media, 2006. </li></ul><ul><li>[MD03] Meszaros, Gerard; Doble, Jim: A pattern language for pattern writing. http://hillside.net/patterns/wrtiing/patterns.htm, (accessed: 18.10.05) </li></ul><ul><li>[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) </li></ul><ul><li>[No88] Norman, D.: The Design of Everyday Things, New York: Basic Books, 1988. </li></ul><ul><li>[PPP] The Pedagogical Patterns Project, http://www.pedagogicalpatterns.org/ </li></ul><ul><li>[Sc94] Schnotz, W.: Aufbau von Wissenstrukturen (S. 61-118). Weinheim:Beltz, 1994. </li></ul><ul><li>[Si96] Simon, H.A.: The Sciences of the Artificial. MIT Press, 3rd edition, 1996. </li></ul><ul><li>[Ti05] Tidwell, J.: Designing Interfaces, O’Reilly, Sebastopol, 2005. </li></ul><ul><li>[Vl97] Vlissides, J.: Patterns: The Top Ten Misconceptions, Object Magazine, 1997 </li></ul><ul><li>[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. </li></ul><ul><li>[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 </li></ul><ul><li>[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. </li></ul><ul><li>[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. </li></ul>

×