CSE 3345

1. CSE 3345 User interface design A software engineering perspective Chapter 3: Data Presentation

2. Gestalt Laws • A gestalt … • is anything we perceive as a unit or an object. • is a technique the mind uses to manage complexity • The law of proximity states that pieces that are close together are perceived as belonging together. • The law of closure states that the area inside a closed line is perceived as a shape. • The law of good continuation states that pieces on a smooth line are perceived as belonging together. • The law of similarity states that things that look alike are perceived as belonging together. • Colors are often used to signal similarity • The law of parallel movement states that things that move in parallel are perceived as belonging together.

3. Example B: Mill wheels Law of proximity Example C: Law of closure Example D: Law of good continuation Fig 3.1A Three gestalt laws Example A: Law of proximity

4. Example F: Law of closure? Fig 3.1B Closure versus continuation Example E: Law of good continuation

5. Example H Fig 3.1C Law of similarity and other gestalt laws Example G Law of parallel movement Law of . . .

6. Dangerous positions Legal moves (Fig 3.1D) Similar colors create gestalts Example I

7. B C Fig 3.2A How does the Law of lines apply, or does it? A • A variation on the law of good continuation is known as the law of lines. • The law of lines states that aligned items are perceived as belonging together.

8. E Fig 3.2B Laws of proximity and closure at work D • Does the Print Range frame in example E improve understandability? • What does placing the OK button inside of the Print Range frame accomplish?

9. Text Gestalts

10. Fig 3.3A Column gestalts • Which page number goes with which section? • Why is it difficult to tell? • What Gestalt laws are at work here?

11. (Fig 3.3A Cont.) • Which page number goes with which section? • Is it difficult to tell? Why not? • What Gestalt laws are at work here?

12. (Fig 3.3A Cont. 2) Introduction & Basic Concepts ------------ Functional details ------------------------------ 7 85 The role of requirements 8 Complex and simple functions 85 Project types 11 Tables and decision tables 88 Contents of the specification 13 Textual process descriptions 90 Problems observed in practice 16 State diagrams 92 Domain level and product level 18 State-transition matrices 94 The goal–design scale 20 Activity diagrams 95 Typical project models 24 Class diagrams 98 Data requirement styles 30 Collaboration diagrams 102 Sequence diagrams 103 The hotel system example 30 Special Interfaces 107 The data model 30 Data dictionary 37 Reports 107 Data expressions 39 Platform requirements 108 Virtual windows 42 Product integration – ordinary customers 110 Functional requirement styles 45 Product integration – main contractor 114 Human/computer – who does what? 45 Technical interfaces 115 Quality requirements 117 Context diagrams 46 Event list and function list ------------------------ 47 Quality Factors -------------------------------- --- 118 • Which page number goes with which section? • Is it difficult to tell? Why not? • What Gestalt laws are at work here?

13. 1 2 3 4 5 6 7 8 9 10 11 12 Sales of X-mas trees There is a strong seasonal variation in the sales of . . . No doubt Fig 3.3B Heading proximity 1 2 3 4 5 6 7 8 9 10 11 12 Sales of X-mas trees There is a strong seasonal variation in the sales of . . . Picture caption or heading? • What is Sales of X-mas trees describing? • Is it difficult to tell? Why?

14. Fig 3.3C Paragraph Gestalts - Body text 1 2 • Discuss the clarity of the gestalts in each example. • What contributes to the gestalt clarity or lack of in each example?

15. 3 (Fig 3.3C Cont.) Clear gestalts but lines too long. Annoying to read??? • Discuss the clarity of the gestalts in the example. • What contributes to the gestalt clarity in the example?

16. Line Length • Retracing is when the eves move back to the beginning of the next line. • Long lines have an adverse effect on retracing. • Saccades is a jump of the eyes across a line that is being read. • Words cannot be read during the jump, only after the eyes have settled. • Eyes must stop around every 15-20 characters • The more stops per line the more difficult it is to read • See Fig 3.3C on the previous slide • “Modern computer screens have space for very long lines, and designers are tempted to utilize the space by means of long lines. This is one of the reasons that texts are much harder to read on the screen than on paper.”

17. 83 pages Complex reports: 10 point text. 3.5 + 6 cm margins. 64 pages Tech documents: 10 point text. 2 cols + 2 cm margins. Fig 3.3D Line length, A4 or Letter paper Which format is best, or does it really mater? 100 pages Simple reports: 12 point text. 3.5 cm margins. Classical rules: Max 12.5 cm line. Max 65 chars/line.

18. Contrasts • Contrasts are used to call attention to something on the screen. • Typically we think of using color to create contrasts but there are other techniques as well. • The concept of foreground and background are central to creating contrast. • The thing in the foreground is what our attention should be centered on. • Rule of Thumb: Use contrasts and emphasis sparingly within a screen or the effect is lost and the screen becomes too busy.

19. Size, thickness, or 3-D mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær mm dmsm sp. ab anemfmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ fgtær mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæ Color or darkness Flash or movement (intense) mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org. Tts to fer s frfi smfe skf Org s fp4et gsæ fgtær mm dmsm sp ab anem a tts, to fmst saåfprs fer s frfi smfe skf org s fp4et gsæm dmsm Fig 3.4A Using Contrasts to Call Attention to Something Form Shape contrasts: o forms a background to x. The many vs. the few. The many form the backdrop to the few.

20. Fig 3.4B How many points earned? • The most important piece of information on the form is Total Points for use 42700. • Is the most important information also the most conspicuous? Why or why not?

21. Presentation Formats • A particular instance of information may be presented to the user in a variety of formats. • The challenge is to choose the format that will best simplify the users job.

22. Fig 3.5A Room data Classical “form” format Room form Room no. 011 Prices high med low Beds 2 Normal 88 80 58 Bath full As single 686049 Balcony no Seaview no Last renovated 20-08-03 Occupied 21-08-03, 22-08-03, 31-08-03, 01-09- • Good for showing exact values. • Easy to understand format. Just like pencil and paper format • Not a good way to show massive amounts of data.

23. Room states from 30-08-03 to 01-09-03 Room Beds Bath State Date 011 2 full occ 30-08-03 011 2 full occ 31-08-03 012 1 toil book 30-08-03 012 1 toil book 31-08-03 012 1 toil book 01-09-03 013 2 toil book 30-08-03 013 2 toil repair 31-08-03 Prices high med low Normal 88 80 58 As single 686049 Balcony no Seaview no Last renovated 20-08-03 (Fig 3.5A Cont.) List or table format Detail window for selected item • Good for showing exact values. • Good way to show massive amounts of data. • May optionally drill into selected item for more detail on a pop-up window.

24. Room states from 30-08-03 to 01-09-03 Room Beds Bath State Date 011 2 full occ 30-08-03 011 2 full occ 31-08-03 012 1 toil book 30-08-03 012 1 toil book 31-08-03 012 1 toil book 01-09-03 013 2 toil book 30-08-03 013 2 toil repair 31-08-03 (Fig 3.5A Cont. 2) Prices high med low Normal 88 80 58 As single 686049 Balcony no Seaview no Last renovated 20-08-03 Details shown in adjoining frame • Same as before but with an adjoining detail window. • Which format is better, pop-up detail window or adjoining detail window?

25. Fig 3.5B Room status Matrix format RoomsPrices 7/8 8/8 9/8 10/8 11 double, bath 80 60 O B 12 single, toil 60 O O B B 13 double, toil 60 50 B B B • Matrix format provides a better overview of when each room is free • O = open room • B = booked room • Providing scroll bars and an optional pop-up detail window would be a nice enhancement.

26. Prices high med low Normal 88 80 58 As single 686049 Beds 2 Bath full Last renovated 20-08-03 Map format Room states from 30-08-03 to 01-09-03 011 013 015 017 019 012 014 016 018 020 022 024 Detail window for selected item Fig 3.5B Room status • Map format provides a better way of assigning rooms in close proximity to each other or some other part of the motel. • Effective use of color coding.

27. Fig 3.5C Hierarchy presentations Explorer tree Detail window • Good for visualizing whole/part (composition) relationships and managing complexity • Widely understood format thanks to Windows Explorer

28. Hierarchical menus (Fig 3.5C Cont.) E-mail folders

29. Line graph 3-D surface Sales Cust. Empl. 96 97 98 Profit 96 97 98 Cust. Sales Empl. Profit Fig 3.5D Business history (1) Matrix 1996 1997 1998 Customer satisfact 7 8 9 Employee satisfact 6 4 8 Sales 12.5 14.5 15.8 Profit 2.7 1.9 0.8 . . .

30. Cust. Bubble diagram 98 8 97 96 4 Sales 5 10 Parallel coor- dinates Chernoff faces Cust. Cust. Sales Empl. Profit Profit 10 20 10 5 Sales Empl. 96 1996 97 98 1997 1998 Fig 3.5E Business history (2) Cust. 98 Sales Radar chart 97 Empl. Profit

31. Note on . . . pz vsv dv sv vc d g s aps gsgp pg fap af f oa feeg vsæmv æsdf 9e pzc er f fsdgrg wsdlfgs g spf jfgdfpg jsdfg sdp osg sdf sfo psfd sgog spodg pfg fog psdfg ds gspggisdgi rsgi spdg segpso gspgspg pseg spgdsp 0ge p0sg0 seg0s0ge0s v ek v eeot s gsdg sg igrtit o s osigisdjg Belgrave Martin ct Screen shows most of the doc. Monitoring high-speed trains BG AP Thesis pz vsv dv sv vc d g s aps gsgp pg fap af f oa feeg vsæmv æsdf 9e pzc er f fsdgrg wsdlfgs g spf jfgdfpg jsdfg sdp osg sdf sfo psfd sgog spodg pfg fog psdfg ds gspggisdgi rsgi spdg segpso gspgspg pseg spgdsp 0ge p0sg0 seg0s0ge0s v ek v eeot s gsdg sg igrtit o s osigisdjg AH TG KN DH Screen shows a small part of the doc. RR Fig 3.5F Analog numbers Current: 62 A Alarm limit: 80 A

32. Text Form versus Analog Form • Text format provides detailed information • Requires our full attention to understand what is being shown • View specific values • Controlled Activity: Requires our full attention. For example, we cannot read and listen to someone speak at the same time. • Analog format provides general information • Analog information can be viewed at a glance • Good for viewing trends over time • Pattern oriented • Automatic Activity: Does not require out full attention. Foe example, we can listen to music and carry on a conversation at the same time.

33. Overview of Complex Data • Large amounts of complex data best represented on a computer screen by some sort of graphical (analog) representation • Essential features of the data can be viewed at a glance • Observation of detailed information requires a concentrated effort

34. Fig 3.7A Planning screens for classroom allocation Class: ITM 101 Weeks 2-6, 10-16 Focus is on a single classroom Mo Tu We Th Fr Sa 1 Progr Org. Progr 2 JS13 * J113 J113 3 Progr Progr tut 4 N4059 *** 5 5-16 6 7 FinAcc Both screens combine overview and detail 8 J113 9 10 Weeks 2-6, 10-16 Room: J113 Mo Tu We Th Fr Sa ITM 201 MBA 213 ITM 101 ITM 101 *** 1 2-6, 15... 2-17, ... 1-16 1-16 *** 2 MAM 101 *** 3 *** 2-16 *** 4 *** *** *** 5 *** *** MBA 214 Focus is on a single class *** 6 ITM 301 *** *** 9, 10 7 *** *** *** ITM 101 BDA 8 *** ITM 202 *** 1-4, 7 ... 14 9 *** *** 10 *** ***

35. Fig 3.7B Datamodel for classroom allocation Building wish Contract period Activity Building Class activity Request hour Room hour Request Room Line Room property Room wish Class Class hours Property wish Property Time table User authoriz Authoriz type User The gray area shows how the classroom data is stored in its raw form

36. Fig 3.7C Gantt-chart for project plan • Excellent for showing temporal dependency relationships between activities • Combines overview and detailed information • Used in Microsoft Project

37. Fig 3.7D Map format, power distribution Courtesy: ABB Network Control • Allows a few people to monitor a large geographical area

38. Fig 3.7E Shneiderman's Tree Map showing all files in the Windows folder