Communication Design and Visualising Information May 5, 2016 Centre for Internet and Society, Bangalore

Transcription

1 Communication Design and Visualising Information May 5, 2016 Centre for Internet and Society, Bangalore Presented at the Workshop on Research Methods for Internet Policy in South and Southeast Asia, held on April 14, 2016, at the National Law University Delhi

2 Broad Principles of Visual Communication

3 Identifying the Message, Audience and Medium MESSAGE Interpretation Organization Visual Presentation AUDIENCE Language Experience Age Knowledge Education Preferences Expectations Culture MEDIUM Appropriate Medium (Print, Static, Interactive) Exploring all Possibilities of the Medium The following icons have been used from The Noun Project: Speech Bubble by Focus, Group by Khomsun Chaiwong, Video by Alfa Design

4 Using Design Elements for Communication Goals COMMUNICATION GOALS COMPOSITION ELEMENTS Setting the Context Clarity of Form and Content Building Hierarchy Organization of Content - Sequence, Categorization Contrast Consistency Emphasis Typography Colour Space Scale Shape Proportion

5 Frank Chimero, Source:

6 Organizing the Content Gestalt Principles of Perception On the basis of principles of integration and segregation that connect and separate elements through proximity, similarity, and closure PROXIMITY The visual system tends to group together those elements that are close to one another, and segregate them from the more distant ones. SIMILARITY The visual system tends to group together those elements that are equal or similar, and segregate the different ones from one another. This can happen at several levels of similarity based on different visual dimensions (such as color, size, orientation, etc.). CLOSURE The visual system tends to group together series of elements that are placed in such a way as to generate a simple outline. Jorge Frascara - Communication Design: Principles, Methods and Practice, 2004

7 Subtle differences are not helpful PROXIMITY? SIMILARITY? CLOSURE?

8 Julián De Velasco,

9

10 Visualising Data

11 Types of Data Nominal - Eg. Male, Female Ordinal - Eg. Abundant, Common, Rare Quantitative Relational - Eg. Networks Spatial - Eg. Maps

12 Identifying the Purpose What do I know, what does it mean, and why do I believe it s important? Image Source:

13 Using the Most Effective Format Source:

14 Allows more accurate comparisons 2D position along a common aligned scale Using elements based on the purpose of the visualization Slopes Areas Colour Intensity Allows more generic comparisons Colour Hue

15 Choosing the Most Effective Format for Data Visualisation Assessing the Type of Data Identifying the Purpose/ Message Identifying the Accuracy required in the Data Representation

16 Total Deaths in America by Cause in 2007 CRITERIA FOR EVALUATING THE VISUALIZATION Clearly indicates how the values relate to one another, which in this case is a part-to-whole relationship Represents the quantities accurately Makes it easy to compare the quantities Makes it easy to see the ranked order of values Makes obvious how people should use the information - what they should use it to accomplish - and encourages them to do this Source: the-encyclopedia-of-human-computer-interaction-2nd-ed/datavisualization-for-human-perception

17 Aesthetics & Functionality of Visualisations

18 Reducing Redundancy, Increasing Emphasis Actual Budget Actual Budget Actual Budget Actual Budget ACTUAL BUDGET Stephen Few,

19 Lakhs ACTUAL BUDGET ACTUAL BUDGET

20 Aesthetics in the Way of Sense Making

21 Visual Strength & Aesthetics to Support the Communication Function Sensory bandwidths reaching sub-conscious and conscious mind, from Tor Norretranders The User Illusion. Visualization from Stephen Few s Information Dashboard Design

22 Use of icons and pictograms when necessary How long do animals live? 1939, Designed by Gerd Arntz, Uses the ISOTYPE Technique

23 Cut-away diagram showing aeroplane parts

24 Cut-away diagram showing aeroplane parts Aesthetics to make information more engaging

25 Layering Information, Retaining Simplicity Charles Minard s 1869 chart showing the number of men in Napoleon s 1812 Russian campaign army, their movements, as well as the temperature they encountered on the return path.

26

27 When the Purpose is Not Known Yet

28 Reorganizing Data to Find Patterns

29

30

31

32

33 Communication Strategy & Storytelling Creating a narrative Storyboards Summarize Visually Contextualise Engage, get attention Give details Make it accessible, interesting Invent new ways of representing information Come back to the intended message and evaluate

34 REFERENCES Jorge Frascara - Communication Design: Principles, Methods and Practice, 2004 Stephen Few - Data Visualization for Human Perception, Interaction Design Foundation Infoactive - DATA + DESIGN,