In this chapter, we discussed connectivity issues for dialogs. We could check a dialog description to see if there were any blind alleys, which once you had chosen them, would never let you back to the rest of the dialog. Systems can have similar problems at a semantic level. | Lecture Interaction Design Basics– Part II Today’s Outline Basic principles Grouping, structure, order Alignment Use of white space Introduction In previous sessions we have seen to make system interactive but not about how we put them together. A single screen image often has to present information clearly and also act as the locus for interacting with the system. This is a complex area, involving some of the psychological understanding of interactivity as well as aspects of graphical design. Basic principles of design ask what is the user doing? think what information, comparisons, order design form follows function Tools for layout We have a number of visual tools available to help us suggest to the user appropriate ways to read and interact with a screen or device. Available tools grouping of items order of items decoration - fonts, boxes etc. alignment of items white space between items Grouping and structure If things logically belong together, then we should normally physically group them together. This may involve multiple levels of structure. For example, in the Figure in next slide we can see a potential design for an ordering screen. Notice how the details for billing and delivery are grouped together spatially; also note how they are separated from the list of items actually ordered by a line as well as spatially. Grouping and structure This reflects the following logical structure: logically together physically together Billing details: Name Address: Credit card no Delivery details: Name Address: Delivery time Order details: item quantity cost/item cost size 10 screws (boxes) 7 Figure: Grouping of related items Order of groups and items think! - what is natural order should match screen order! use boxes, space etc. set up tabbing right! instructions beware the cake recipie syndrome! mix milk and flour, add the fruit after beating them Decoration We can see how the design uses boxes and a separating line to make the grouping | Lecture Interaction Design Basics– Part II Today’s Outline Basic principles Grouping, structure, order Alignment Use of white space Introduction In previous sessions we have seen to make system interactive but not about how we put them together. A single screen image often has to present information clearly and also act as the locus for interacting with the system. This is a complex area, involving some of the psychological understanding of interactivity as well as aspects of graphical design. Basic principles of design ask what is the user doing? think what information, comparisons, order design form follows function Tools for layout We have a number of visual tools available to help us suggest to the user appropriate ways to read and interact with a screen or device. Available tools grouping of items order of items decoration - fonts, boxes etc. alignment of items white space between items Grouping and structure If things logically belong together, then we should normally physically
