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

2. 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. 3 Fig 3.1A Three gestalt laws Example A: Law of proximity Example C: Law of closure Example D: Law of good continuation Example B: Mill wheels Law of proximity

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

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

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

7. 7 Fig 3.2A How does the Law of lines apply, or does it? A B C 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. 8 E D Fig 3.2B Laws of proximity and closure at work Does the Print Range frame in example E improve understandability? What does placing the OK button inside of the Print Range frame accomplish?

9. 9 Text Gestalts

10. 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. 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. 12 (Fig 3.3A Cont. 2) Introduction & Basic Concepts------------ 7 The role of requirements8 Project types11 Contents of the specification13 Problems observed in practice16 Domain level and product level18 The goal–design scale20 Typical project models24 Data requirement styles 30 The hotel system example30 The data model30 Data dictionary37 Data expressions39 Virtual windows42 Functional requirement styles 45 Human/computer – who does what?45 Context diagrams46 Event list and function list------------------------47 Functional details------------------------------ 85 Complex and simple functions85 Tables and decision tables88 Textual process descriptions90 State diagrams92 State-transition matrices94 Activity diagrams95 Class diagrams98 Collaboration diagrams102 Sequence diagrams103 Special Interfaces 107 Reports107 Platform requirements108 Product integration – ordinary customers110 Product integration – main contractor114 Technical interfaces115 Quality requirements 117 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. 13 Sales of X-mas trees There is a strong seasonal variation in the sales of... 1 2 3 4 5 6 7 8 9 10 11 12 Picture caption or heading? Fig 3.3B Heading proximity Sales of X-mas trees There is a strong seasonal variation in the sales of... 1 2 3 4 5 6 7 8 9 10 11 12 No doubt What is Sales of X-mas trees describing? Is it difficult to tell? Why?

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

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

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

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

20. 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. 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. 22 Classical “form” format Fig 3.5A Room data Room form Room no.011Priceshighmedlow Beds2Normal888058 BathfullAs single686049 Balconyno SeaviewnoLast 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. 23 List or table format Room states from 30-08-03 to01-09-03 RoomBedsBathStateDate 0112fullocc30-08-03 0112fullocc31-08-03 0121toilbook30-08-03 0121toilbook31-08-03 0121toilbook01-09-03 0132toilbook30-08-03 0132toilrepair31-08-03 Detail window for selected item Priceshighmedlow Normal888058 As single686049 Balconyno Seaviewno Last renovated 20-08-03 (Fig 3.5A Cont.) 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. 24 Room states from 30-08-03 to01-09-03 RoomBedsBathStateDate 0112fullocc30-08-03 0112fullocc31-08-03 0121toilbook30-08-03 0121toilbook31-08-03 0121toilbook01-09-03 0132toilbook30-08-03 0132toilrepair31-08-03 Details shown in adjoining frame Priceshighmedlow Normal888058 As single686049 Balconyno Seaviewno Last renovated 20-08-03 (Fig 3.5A Cont. 2) Same as before but with an adjoining detail window. Which format is better, pop-up detail window or adjoining detail window?

25. 25 RoomsPrices7/88/89/810/8 11double, bath8060OB 12single, toil60OOBB 13double,toil6050BBB Matrix format Fig 3.5B Room status 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. 26 Fig 3.5B Room status Map format 011 013 012014 015017019 016018020022024 Room states from 30-08-03 to01-09-03 Detail window for selected item Priceshighmedlow Normal888058 As single686049 Beds2 Bathfull Last renovated 20-08-03 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. 27 Fig 3.5C Hierarchy presentations Explorer treeDetail window Good for visualizing whole/part (composition) relationships and managing complexity Widely understood format thanks to Windows Explorer

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

29. 29 199619971998 Customer satisfact789 Employee satisfact648 Sales12.514.515.8 Profit2.71.90.8... Fig 3.5D Business history (1) 969798 Sales Cust. Empl. Profit Line graph 969798 Sales Cust. Empl. Profit 3-D surface Matrix

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

31. 31 Current:62 A Alarm limit:80 A 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 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 Screen shows most of the doc. Screen shows a small part of the doc. TG KN AP AH BG DH RR Monitoring high-speed trains Fig 3.5F Analog numbers Belgrave Martin ct

32. 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. 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. 34 Class: ITM 101Weeks 2-6, 10-16 MoTuWeThFrSa 1ProgrOrg.Progr 2JS13 *J113 3ProgrProgr tut 4N4059*** 55-16 6 7FinAcc 8J113 9 10 Room: J113 1 ITM 201MBA 213 *** ITM 101 2 2-6, 15...2-17,... *** 1-16 3*** MAM 101 4*** 2-16 5 *** MBA 214 6 *** ITM 301 *** 9, 10 7 ITM 101 *** BDA 8 1-4, 7... ***ITM 202*** 14 9*** 10*** Weeks 2-6, 10-16 MoTuWeThFrSa Fig 3.7A Planning screens for classroom allocation Both screens combine overview and detail Focus is on a single classroom Focus is on a single class

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

36. 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. 37 Fig 3.7D Map format, power distribution Courtesy: ABB Network Control Allows a few people to monitor a large geographical area

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