Design Design Principles Graphic User Interface Sameer Sahasrabudhe Survey of Design Principles for eLearning Sameer Sahasrabudhe

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Outline ● Graphic design principles ● Some accepted taxonomies ● Taxonomy I propose ● Comparison with the accepted ones ● Migration from Graphic design to eLearning ● Some important surveys ● Conclusion

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Graphic design principles: ● Balance ● Continuity ● Closure ● Figure-Ground ● Focus ● Isomorphic Correspondence ● Good form ● Proximity ● Similarity ● Simplicity ● Unity/Harmony Gestalt's laws in Visual design Lauer, D: Design Basics

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Ngo, Byrne ● Agree with Gestalt ● Also try and add some new laws: ● Equilibrium, Economy, Cohesion ● Create a program to measure these 14 aspects Journal of Appl. Math. Com. Sci, 2001

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Chang, Dooley, Tuovinen ● Agree to the 11 Gestalt laws ● Apply it with Screen Design laws and present the results ● Response is overwhelming! 7 th World Conference on Computers in Education, 2001

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Costa ● Agrees to only 5 principles. ● Further chunks some other with these 5 ● e.g.: Harmony+Unity, and it implies: ● Harmony within the page ● Unity across pages ● The results are crosschecked by the evaluators SIGDOC 2008

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Moses ● An experiment to see if basic design principles are necessary in Art as well as CS departments ● Has 5 principles (in the form of a questionnaire ): ● Unity, Variety, Negative space (Good form), Emphasis (Focal point) and Balance ● Concludes with parallels in both! SIGCSE, Inroads, 2003

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting statistics Occurrences: ● Most common: Balance and Unity (4/4), and Simplicity (3/4) ● Some new entries: Variety, Design Clarity, Equilibrium, Economy, Cohesion etc. ● Significant overlap exists between principles and elements of design

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Outline ● Graphic design principles ● Some accepted taxonomies ● Taxonomy I propose ● Comparison with the accepted ones ● Migration from Graphic design to eLearning ● Some important surveys

Design Design Principles Graphic User Interface Sameer Sahasrabudhe From Graphic design to Graphic User Interface Design ● Everyone remembers Gestalt! ● Further chunking of principles ● Few new additions..! ● Elements play a crucial role ● 'Interactivity' component has changed this equation! Haag, Snetsigner Conference of Visual Literacy Association, 1993

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Lee, Boling ● First categorized the principles, and then chunked them ● Further consolidated guidelines based on similarity ● Finally created 5 categories based on 'elements' with a 6 th category of 'integrated guidelines' ● Type, Colour, Images, Animation, Audio ● Balance, Symmetry, Unity, Harmony etc. Are part of Integrative Guidelines! Educational Technology, 1999

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Stemler ● Combines Gestalt's Design principles with Gagne's learning events ● Balance among learner attributes, content factors, and the processing requirements of the learning task ● Simplicity because presenting too much info can be confusing and overwhelming ● Readability as comprehension is lower from the screen as compared to print ● Chunking of sentences to phrases or idea units ● Consistency as the student goes through various pages Educational Multimedia and Hypermedia, 1997

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting taxonomies Plass, Homer, Hayward ● Agrees to Gestalt's, and all other graphic design principles ● But disagrees to include principles of: coherence, redundancy, and personalization ● Detailed discussion on: ● Split attention and Contiguity principle ● Also proposes additional principles: ● Cueing, Representation type, Colour coding, and Integration of multiple dynamic visual representation. ● Springer, Journal of Comput High Edu., 2009

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Some interesting statistics Occurrences: ● Most common: Balance and Unity (3/3) ● Lots of new entries ● Significant overlap exists between principles and elements of design

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Discussion: ● Balance ● Continuity ● Closure ● Figure-Ground ● Focus ● Isomorphic Correspondence ● Good form ● Proximity ● Similarity ● Simplicity ● Unity/Harmony Balance Unity/Harmony Figure-ground Simplicity Clarity

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Discussion: Balance Unity/Harmony Figure-ground Simplicity Clarity Proximity | Isomorphic Correspondence Continuity Focal point Good form | Closure Similarity

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Derivation process of my taxonomy Given: ● Gestalt+GD > Chang ● Pedagogy+MM > Mayer – indicates either subset or some combination of principles in the previous set. ● I derive as follows: ● Chang > SameerGD ● SameerGD + Mayer > Sameer(GD+MM) ● Sameer(GD+MM) will have – Extended definitions of some items in SameerGD. – New items that may be need due to MM (and are not covered in above extended definitions. ● DGD will consider: Sameer (GD+MM)

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Definitions: by others Proximity: ● A positional concern about the respective location of the objects of perception, stating about the visual unity created by objects that come closer to each other. Zeynep Mennan, Middle East Technical University (METU) Journal of the Faculty of Architecture (JFA) 2009 ● Items placed near each other appear to be a group. Fisher and Smith-Gratto, Journal of Educational Technology Systems, ● Items that are spatially located near each other seem part of a group, while items that are apart are perceived as separate Lisa Graham, Journal of Humanities and Social Sciences, 2008

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Definitions: by others Isomorphic Correspondence: ● All images do not have the same meaning... Zeynep Mennan, Middle East Technical University (METU) Journal of the Faculty of Architecture (JFA) 2009 ● Items placed near each other appear to be a group. Fisher and Smith-Gratto, Journal of Educational Technology Systems, ● Items that are spatially located near each other seem part of a group, while items that are apart are perceived as separate Lisa Graham, Journal of Humanities and Social Sciences, 2008

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Justification for Clarity ● Why should Proximity and Isomorphic Correspondence be combined? ● What are the points which make this decision valid in the context of eLearning animations? ● Why should this combination be called 'Clarity'? ● Precise definition of clarity is:....

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Why should Proximity and Continuation be combined? Definitions: ● Proximity: “items placed near each other appear to be a group” (Fisher and Smith-Gratto 1998–99). Viewers will mentally organise closer elements into a coherent object, because they assume that closely spaced elements are related and those further apart are unrelated (Fulks 1997, Fultz 1999). ● Continuation: is the eye’s instinctive action to follow a direction derived from the visual field (Fultz 1999).

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Why should Proximity and Continuation be combined? Both the principles are based on the EYE Movement/Behavior of the user. ● Viewers will mentally organise closer elements into a coherent object (Proximity) ● Eye’s instinctive action to follow a direction derived from the visual field (Continuation) In context of eLearning, it could be easy to implement/deploy if they are combined. ● items placed near each other appear to be a group (Proximity) ● eye’s instinctive action to follow a direction derived from the visual field (Continuation)

Design Design Principles Graphic User Interface Sameer Sahasrabudhe What are the points which make this decision valid in the context of eLearning animations? Operationalizing this combination: ● Arrange/place those components near each other which belong to a coherent group (Proximity) as mentioned in the IDD – There could be one or more such groups ● Place these groups in the desired direction/chronology (Continuation) so that the viewer should see the components in the order of preference (as per the IDD) ●

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Why should Figure-Ground and Focal point be combined? Definitions: ● Figure-Ground: We distinguish the foreground and background in a visual field (Fultz 1999). Two different foreground colours let the viewer perceive different things from the same illustration ● Focal Point: Every visual presentation needs a focal point, called the centre of interest or point of emphasis. This focal point catches the viewer’s attention and persuades the viewer to follow the visual message further (Lauer 1979).

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Why should Figure-Ground and Focal point be combined? Out of the entire list of components in the LO, it is the first important step to separate what is the FOREGROUND and what is the BACKGROUND. Figure-Ground principle will help in separating this Further, amongst the components of FOREGROUND, the placement / style of the centre of interest is an important decision Focal point principle will help to decide this

Design Design Principles Graphic User Interface Sameer Sahasrabudhe What are the points which make this decision valid in the context of eLearning animations? Operationalizing this combination: ● Select the components which are described as important as mentioned in the IDD and place/differentiate them (by using various attributes like contrast, relational size and proportion as compared with other components, etc) (Figure-Ground) ● Select the most important component as per the IDD, and further differentiate it (as compared to the other components in Foreground) using Focal point principle ●

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Justification for all the remaining categories ● Similar to what is written in the previous slide (Clarity)

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Necessary conditions ● Arguments to show that each of the 5 new categories made by me are necessary ● If you remove any one then the “something“ is affected ● Are they also sufficient? ● Adding more is redundant ● Has anything been missed out? ● Check for completeness

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Incorporating MM principles into my taxonomy of GD principles ● Examine whether definition of Clarity can be extended to include one or more MM principles ● Repeat for other categories ● Examine whether all MM principles are now incorporated into the extended definitions of my taxonomy ● If yes the taxonomy holds (is complete) ● If not extend it by either adding missing MM principles as it is OR making a new principle that is a combination of missing MM principles...

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Conclusion ● The categorization of the principles is an independent decision, and is influenced by the domain of the content to be created ● In certain cases it extends to the medium used.

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Future scope ● The guidelines for the design of dynamic visualizations (animations) are limited in scope. Future research should be done in this area for more effective educational impact. Plass '09 ● Information on the design and use of multimedia characteristics are not available as a coherent body of literature. Stemler '97 ● Available guidelines for creating well-designed, motivating screens in multimedia are poorly organized within the literature Lee '99 ● It will be useful to examine the relative benefits of these principles more throughly, to arrive at better guidelines for visual designers Chang '02

Design Design Principles Graphic User Interface Sameer Sahasrabudhe Thank you!