Tweet
Tweet

Slide 1

Slide 1 text

Design Patterns, Metaphors and Visualisation Dr Ed de Quincey @EddeQuincey

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

What is usability? “Usability is a quality attribute that assesses how easy user interfaces are to use. The word "usability" also refers to methods for improving ease-of-use during the design process.” 
 (Nielsen, 2003)

Slide 6

Slide 6 text

The user/human part Useful human strengths and weaknesses to consider include: •  Memory - people can remember 7 (plus or minus 2) “chunks” of information. •  Visual perception e.g. colour blindness •  Motor skills e.g. mouse skills •  Learning and skill acquisition •  Motivation •  User’s conceptual models •  Population stereotypes •  Human diversity e.g. accessibility issues for disabled users

Slide 7

Slide 7 text

http://www.vischeck.com/examples/

Slide 8

Slide 8 text

http://www.youtube.com/watch?v=xKdOMgu0C5Q

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Banner Blindness: Old and New Findings Jakob Nielsen http://www.useit.com/alertbox/banner-blindness.html

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Creating interface designs on “feeling” What is that feeling?

Slide 17

Slide 17 text

Golden Section/Divine Proportion (?)

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

http://www.markboulton.co.uk/journal/comments/ ve-simple-steps-to-designing-grid-systems-preface

Slide 22

Slide 22 text

Grids http://www.markboulton.co.uk/journal/comments/ ve_simple_steps_to_designing_grid_systems_part_1/

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

The effects of screen ratio and order on information retrieval in web pages Paul van Schaik, Jonathan Ling (2004) “According to Fechner who was the first to examine the GS from a psychological perspective, individuals will have a preference for rectangles that have a ratio of 1:1.618 for their width to height” however … “… the current research failed to support the idea that the GS is an important factor in aesthetic judgements. In fact, of all the ratios presented to participants we found that the GS was least preferred”

Slide 27

Slide 27 text

“The present findings indicate that the best ratio is 28:72 for aesthetic value and 23:77 for performance. Given the lesser impact on aesthetic measures of 23:77, we recommend that this ratio be used.” The effects of screen ratio and order on information retrieval in web pages Paul van Schaik, Jonathan Ling (2004)

Slide 28

Slide 28 text

Grid Layouts

Slide 29

Slide 29 text

“The grid is the conceptual embodiment of the design program [13]. It allows the discovered determinants to be codified and propagated consistently across a series of screens in a GUI. A grid is the geometrical division of a space into precisely measured columns, spaces and margins; it is the backbone of screen design. Composing and designing spaces with a grid have become an essential tool for the practicing designer [14]. Jude [15] states that ‘the primary purpose of the grid is to create order out of chaos; it is an aid to readability, recognition, and understanding.” Eugene Ch’ng, David Chek Ling Ngo (2003) Screen design: a dynamic symmetry grid based approach

Slide 30

Slide 30 text

No content

Slide 31

Slide 31 text

http://www.1kbgrid.com/

Slide 32

Slide 32 text

The basic configuration is a 12 column grid system spread out over 960 pixels. Each column is 60 pixels wide with a 20 pixel gutter in between. http://www.usabilitypost.com/2009/05/29/the-1kb-css-grid-part-1/

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

No content

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

http://books.alistapart.com/products/css3-for-web-designers

Slide 38

Slide 38 text

.multiplecolumns { -moz-column-width: 130px;; -webkit-column-width: 130px; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #ddccb5; -webkit-column-rule: 1px solid #ddccb5; }

Slide 39

Slide 39 text

Design Patterns

Slide 40

Slide 40 text

“Design patterns were first described in the 1960s by Christopher Alexander, an architect who noticed that many things in our lives happen according to patterns.” http://uxdesign.smashingmagazine.com/2009/06/23/10-ui- design-patterns-you-should-be-paying-attention-to/

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

“design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems.” http://uxdesign.smashingmagazine.com/2009/06/23/10-ui- design-patterns-you-should-be-paying-attention-to/

Slide 43

Slide 43 text

Lazy Registration Users can use all of the service’s functions to edit their photos online. They are asked to register only before saving their work.

Slide 44

Slide 44 text

Progressive Disclosure

Slide 45

Slide 45 text

“Google Maps allows users to search by city, street, zip code and even latitudinal and longitudinal values.” Forgiving Format

Slide 46

Slide 46 text

Breadcrumbs

Slide 47

Slide 47 text

Subscription Plans

Slide 48

Slide 48 text

Auto-Complete http://uxdesign.smashingmagazine.com/2012/04/10/ui-patterns-for-mobile-apps-search-sort- lter/

Slide 49

Slide 49 text

http://developer.yahoo.com/ypatterns/

Slide 50

Slide 50 text

http://developer.yahoo.com/ypatterns/ http://developer.yahoo.com/yui/paginator/ “When searches return too many results to display on a single page, separate the information into a sequence of pages. Provide pagination control, as a row of links, to enable the user to browse through more results than can be displayed on a single page.”

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

Web form design guidelines: an eyetracking study http://www.cxpartners.co.uk/thoughts/web_forms_design_guidelines_an_eyetracking_study.htm

Slide 55

Slide 55 text

Form Design Guidelines •  Use a simple vertical layout with labels above the input elds. •  If vertically aligned labels are not possible, make them bold and left-aligned. •  If you put more than one eld on a row (e.g. rst and last name) make them look like a single piece of information. •  Emphasize section headings (via color or shading) if you want people to read them. •  Only ask for required information. Identify optional elds rather than required elds (don't use asterisks). •  Use a single input eld for numbers and postal codes, and allow input in various forms. •  Avoid displaying unnecessary information and make sure important information stands out. •  Real time feedback may be distracting — good implementation is key. •  Place instructions to the side of the eld. •  For multi-page forms tell users how many steps remain before completion.

Slide 56

Slide 56 text

The user/human part Useful human strengths and weaknesses to consider include: •  Memory - people can remember 7 (plus or minus 2) “chunks” of information. •  Visual perception e.g. colour blindness •  Motor skills e.g. mouse skills •  Learning and skill acquisition •  Motivation •  User’s conceptual models •  Population stereotypes •  Human diversity e.g. accessibility issues for disabled users

Slide 57

Slide 57 text

Icons and Metaphors

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

“The physical appearance of objects such as icons can significantly affect navigational performance. For example, Rogers (1987) found that icons with abstract but simple symbols that represented concrete objects resulted in the fewest number of errors and requests for help. In addition, Byrne (1993) found that large and simple icons outperformed complex ones by a significant margin. Byrne suggests that icons need to be simple, large, and easy to discriminate in order to be effective.” Bernard, M. (2006) Criteria for optimal web design (designing for usability) http://uwf.edu/ddawson/d3net/documents/web_usability/optimal%20web%20design.pdf

Slide 62

Slide 62 text

Tips for using icons in interface design http://www.icon nder.com/blog/4/

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

vs

Slide 66

Slide 66 text

“Each icon presents us with a mini-story with an intertwined plot. The problem is that in small size you are unable to work out what is depicted. Even in larger sizes, it is not always that easy to decipher the icons.” 10 Mistakes in Icon Design http://turbomilk.com/blog/cookbook/ icon_design/10_mistakes_in_icon_design/

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Principles of Icon Design http://hicksdesign.co.uk/speaking/principles-of-icon-design Icon Design Explained (Quickly) http://hicksdesign.co.uk/speaking/icon-design-explained-quickly

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

http://www.ajaxload.info/

Slide 71

Slide 71 text

Showing Hyperlink Cues with CSS a[href $='.pdf'] { padding-right: 18px; background: transparent url(icon_pdf.gif) no-repeat center right; } http://askthecssguy.com/articles/showing-hyperlink-cues-with-css/

Slide 72

Slide 72 text

15 Great Icon Sets for Web & Mobile Apps http://designfestival.com/15-great-icon-sets-for-web-mobile-apps/

Slide 73

Slide 73 text

12 Fantastic, Fresh and Free Icon Sets http://designshack.net/articles/freebies/wf-free-icons-2012/

Slide 74

Slide 74 text

http://www.delicious.com/eddequincey/icons

Slide 75

Slide 75 text

Visualisation

Slide 76

Slide 76 text

“Visualisation concerns the graphical (or semi-graphical) representation of information in order to assist human comprehension of and reasoning about that information” Petre, M., de Quincey, E. (2006) A gentle overview of software visualization. Computer Society of India Communications. August, 6-11. ISSN 0970-647X Available at: http://www.ppig.org/newsletters/2006-09.html

Slide 77

Slide 77 text

No content

Slide 78

Slide 78 text

A A A

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

Pattern Matching A A A

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

Charles Joseph Minard's 1861 diagram of Napoleon's March http://en.wikipedia.org/wiki/Information_design

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

Sparklines by Edward Tufte http://thedoublethink.com/2009/08/tufte%E2%80%99s-principles-for-visualizing-quantitative-information/

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001yB&topic_id=1

Slide 87

Slide 87 text

Data journalism at the Guardian: what is it and how do we do it? http://www.guardian.co.uk/news/datablog/2011/jul/28/data-journalism

Slide 88

Slide 88 text

Data visualisation DIY: our top tools http://www.guardian.co.uk/news/datablog/2012/mar/28/data-visualisation-tools-free

Slide 89

Slide 89 text

http://visual.ly/

Slide 90

Slide 90 text

Google Chart Tools https://developers.google.com/chart/

Slide 91

Slide 91 text

IBM Many Eyes http://www-958.ibm.com/software/data/cognos/manyeyes/

Slide 92

Slide 92 text

Visualisation of a collection of tweets that contain the word hayfever collected in June and July 2012 http://www-958.ibm.com/software/data/cognos/manyeyes/visualizations/visualisation-of-tweets-containing

Slide 93

Slide 93 text

My Heatmap http://www.myheatmap.com

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

The top 20 data visualisation tools http://www.netmagazine.com/features/top-20-data-visualisation-tools

Slide 96

Slide 96 text

Pinterest http://pinterest.com/eddequincey/infographics-and-visualisations/

Slide 97

Slide 97 text

Patent: Rugg and de Quincey (Wo2010015829) Method Of And Apparatus For Analysing Data Files

Slide 98

Slide 98 text

www.SearchVisualizer.com

Slide 99

Slide 99 text

Search Visualisation of: http://academic.research.microsoft.com/Author/5199116/ed-de-quincey

Slide 100

Slide 100 text

Icons and Metaphors + Visualisation

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

!

Slide 105

Slide 105 text

No content

Slide 106

Slide 106 text

No content

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

LEARNING ANALYTICS & DASHBOARDS IDENTIFYING POTENTIAL SOURCES OF DATA AND METAPHORS Dr Ed de Quincey & Dr Ray Stoneham, University of Greenwich

Slide 109

Slide 109 text

RETENTION AND THE MEASUREMENT OF STUDENT ENGAGEMENT ARE LONG STANDING PROBLEMS

Slide 110

Slide 110 text

LOOKS SET TO BE A KEY CONCERN WITH THE RAPID DEVELOPMENT OF MOOCS WITHIN HE WORLDWIDE

Slide 111

Slide 111 text

TRADITIONALLY A STUDENT’S PROGRESS AND LEVEL OF ENGAGEMENT HAS BEEN MEASURED BY ASSESSMENT

Slide 112

Slide 112 text

HOW ELSE CAN WE MEASURE ENGAGEMENT AND PROGRESS IN REAL-TIME?

Slide 113

Slide 113 text

LEARNING ANALYTICS (LA) Explicit & Implicit data collection and analysis

Slide 114

Slide 114 text

Learning Analytics has been de ned as a method for “deciphering trends and patterns from educational big data … to further the advancement of a personalized, supportive system of higher education.” (Johnson et al., 2013) Co-authorship network map of physicians publishing on hepatitis C (detail) Source: http://www. ickr.com/photos/speedo ife/8274993170/

Slide 115

Slide 115 text

No content

Slide 116

Slide 116 text

PRESENTING STUDENT DATA BACK TO STUDENTS and LECTURERS, USING USER CENTRIC FORMATS and METAPHORS

Slide 117

Slide 117 text

OVERVIEW of the CMS INTRANET WHAT DATA are we COLLECTING?

Slide 118

Slide 118 text

No content

Slide 119

Slide 119 text

No content

Slide 120

Slide 120 text

We have collected the usage data of 3,576 students across the School (UG and PG) since September 2011. During this time there have been 7,899,231 interactions with the student intranet.

Slide 121

Slide 121 text

We also have stored in our systems, detailed attendance data, programme and course information and coursework marks.

Slide 122

Slide 122 text

PERIOD UNDER STUDY: September 1st 2012 to May 29th 2013 2,544,374 interactions with 65 different le types from 2,634 students. 2,131,278 18,974 157,607 128,676 6,368 66,129 1,851 19,561

Slide 123

Slide 123 text

COMP1314: Digital Media, Computing and Programming 1st Year Course with 53 students Correlation between Average Mark and Attendance % = 0.638 0   10   20   30   40   50   60   70   80   90   100   0   10   20   30   40   50   60   70   80   90   100   A"endance  %   Average  Mark  

Slide 124

Slide 124 text

COMP1314: Digital Media, Computing and Programming 1st Year Course with 53 students Correlation between Average Mark and Intranet Activity = 0.601 0   500   1000   1500   2000   2500   3000   3500   0   10   20   30   40   50   60   70   80   90   100   Number  of  interac7ons  with  Intranet   Average  Mark  

Slide 125

Slide 125 text

COMP1314: Digital Media, Computing and Programming 1st Year Course with 53 students Correlation Intranet  interac4ons/Average  mark 0.601614385 Overall  a@endance/Average  mark 0.637771689 Intranet  interac4ons/Overall  a@endance 0.438059389 COMP1314  Intranet  interac4ons/Average  mark 0.627753051 Lecture/tutorial  slide  views/Average  mark 0.480171638 Lecture  slide/tutorial  views/Overall  a@endance 0.45670929 Coursework  specifica4on  views/Average  mark 0.229025047

Slide 126

Slide 126 text

COMP1640: Enterprise Web Software Development 3rd Year Course with 109 students Correlation Intranet  interac4ons/Average  mark 0.168484881 Overall  a@endance/Average  mark 0.418583626 Intranet  interac4ons/Overall  a@endance 0.234846724 COMP1640  Intranet  interac4ons/Average  mark 0.188256752 Lecture/tutorial  slide  views/Average  mark -0.067577432 Lecture  slide/tutorial  views/Overall  a@endance 0.183237816 Coursework  specifica4on  views/Average  mark 0.378425564

Slide 127

Slide 127 text

No content

Slide 128

Slide 128 text

Average Mark Attendance % Total Intranet Interactions Intranet Files Downloaded COMP1314 Intranet Interactions COMP1314 Lecture/Tutorial Views COMP1314 CW Speci cation Views 86   75   5.3  per  day   1,439   213   278   103   8   Average “First” Student on COMP1314 Average Mark Attendance % Total Intranet Interactions Intranet Files Downloaded COMP1314 Intranet Interactions COMP1314 Lecture/Tutorial Views COMP1314 CW Speci cation Views 21   40   2.6  per  day   696   121   118   52   5   Average “Failing” Student on COMP1314 from September 1st, 2012 to May 29th, 2013

Slide 129

Slide 129 text

“First” Students vs “Failing” Students COMP1314 Average Intranet Interactions   0   10   20   30   40   50   60   Sep   Oct   Nov   Dec   Jan   Feb   Mar   Apr   May   Average  Number  of  Intranet  Interac7ons   First  Logs   Fail  Logs  

Slide 130

Slide 130 text

Reading Barry, N. (2009) How To Use Icons To Support Content In Web Design. Smashing Magazine. Carayon, P. (2007) Handbook of Human Factors and Ergonomics in Health Care and Patient Safety (Human Factors and Ergonomics Series) (Human Factors and Ergonomics Series). L. Erlbaum Assoc. Inc., Hillsdale, NJ, USA. Card, S.K., Mackinlay, J.D. and Shneiderman, B. (Eds.) (1999) Readings in Information Visualization: Using Vision to Think. Morgan Kaufmann Publishers Inc., San Francisco, CA, USA. Charles, T., Bustard, D., Black, M. (2009) ELEGANT: Enhanced eLearning Engagement using Game Absorption Techniques. In Novel Approaches to Promoting Student Engagement. HEA Subject Centre for Information & Computer Sciences. Choemprayong, S., Oh, S., Sheble, L (2006). Interfaces for the personal pregnancy health records (PregHeR) system: Facets in time. Annual symposium of the American Medical Informatics Association. Dibben, C., Watson, J., Smith, T., Cox, M., Manley, D., Perry, I., Rolfe, L., Barnes, H., Wilkinson, K., Linn, J., Liu, L., Sims, A., and Hill, A. (2008) The Health Poverty Index. The NHS Information Centre. Leeds, UK. de Quincey, E., Kostkova, P., Farrell, D. (2009) Visualising web server logs for a Web 1.0 audience using Web 2.0 technologies: eliciting attributes for recommendation and profiling systems. In the Proceedings of the Workshop on Adaptation and Personalization for Web 2.0 in connection with UMAP 2009, June 22-26, 2009, Trento, Italy Esterhay Jr., R.J. (1994) User metaphors for health care professional workstations. International Journal of Bio-Medical Computing, Volume 34, Issues 1-4, The Health Care Professional Workstation, January 1994, Pages 95-113 Garner, R. (2005) Humor, Analogy, and Metaphor: H.A.M. it up in Teaching. Radical Pedagogy, Vol. 6, No. 2, Winter 2005. Glenn, R. (2002) Brain research: Practical Applications for the classroom. Teaching for Excellence, 21(6), 1-2. Marcus, A. (1995) Metaphor design in user interfaces: how to effectively manage expectation, surprise, comprehension, and delight. In Conference companion on Human factors in computing systems (CHI '95), I. Katz, R. Mack, and L. Marks (Eds.). ACM, New York, NY, USA, 373-374. Marcus, A. (2003) Icons, symbols, and signs: visible languages to facilitate communication. interactions 10, 3 (May 2003), 37-43. Hallett, C., Power, R. and Scott, D. (2006). Summarisation and visualisation of e-Health data repositories. In: UK E-Science All-Hands Meeting, 18-21 Sept 2006, Nottingham, UK. Krieger, J., Parrott, R., Nussbaum, J. (2010) Metaphor Use and Health Literacy: A Pilot Study of Strategies to Explain Randomization in Cancer Clinical Trials. Journal of Health Communication, 2010; 1 Petre, M., de Quincey, E. (2006) A gentle overview of software visualisation. Computer Society of India Communications (CSIC) Rugg, G., Petre, M. (2006) A Gentle Guide to Research Methods. Open University Press Shneiderman, B. (1983) Direct manipulation: a step beyond programming languages, Computer, 16, 8, pp. 57-60, Aug. 1983. Tufte, E. (2001) Envisioning Information. Cheshire, CT: Graphics Press, 2001. Ward, M.C. (2002) Systematic selection and implementation of graphical user interface metaphors. Comput. Educ. 38, 4 (May 2002), 385-397. Young, P., and Munro, M. (2003) Visualising software in virtual reality. IEEE First International Workshop on Visualizing Software for Understanding and Analysis. IEEE Computer Society Press.

Slide 131

Slide 131 text

de Quincey, E., Kostkova, P., Farrell, D. (2009) Visualising web server logs for a Web 1.0 audience using Web 2.0 technologies: eliciting attributes for recommendation and pro ling systems. In the Proceedings of the Workshop on Adaptation and Personalization for Web 2.0 in connection with UMAP 2009, June 22-26, 2009, Trento, Italy. Available at: http://sunsite.informatik.rwth-aachen.de/Publications/CEUR-WS/Vol-485/