Page Design CMPT 281

Announcements

Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids – Visual economy Graphical redesign exercise

Graphic design Must account for: – a comprehensible mental image – an appropriate organization of data, functions, and tasks – quality appearance characteristics the “look” – effective interaction sequencing the “feel”

Components of visual language Layout – formats, proportions, and grids Typography – typefaces and typesetting Imagery – signs, icons, symbols – concrete to abstract Sequencing – how the interaction unfolds

Components of visual language Visual identity – unique appearance Animation – dynamics of display Color and Texture – convey complex information and pictorial reality

Design factors for interfaces Visual organization Visual consistency Navigational cues

Visual organization

Which elements to put on the screen? Clustering of widgets or data Use of white space and alignment

Visual organization

Visual organization What components must be in the display? – what are the necessary visual affordances – frequent actions use direct manipulation for core activities use buttons, forms, toolbar, or special tools for frequent and immediate actions use menus or property window for less frequent actions use secondary windows for rare actions How are components related? – organize related items as “chunks” What are familiar and expected idioms? – cross-application look and feel

Visual organization

Link related elements, separate unrelated – create clusters based on related functionality – use white (negative) space – use alignment – provides implicit structure to the information

Visual organization Mmmm:  

Visual consistency

internal consistency – same conventions and rules for all elements of the GUI (unless a good reason not to) – application-specific grids encourage consistency external consistency – follow platform and interface style conventions – use platform and widget-specific grids – deviate only when it provides a clear benefit to user

Visual consistency Warning mmmm mmm mmm Okay ! Help mmmm mmm mmm Okay ? Tip of the day: Monday, Mar 12 mmmm mmm mmm Dismiss  

Visual consistency (?)

Navigational cues

Where should people look first? – provide an initial focus – direct attention to important, then secondary items – assist in navigation through material – order should follow a user’s conceptual model of sequences – people read top-bottom, left-right

Navigational cues  

How can window navigation be reduced? – avoid long paths – avoid deep hierarchies

Navigational cues

Techniques Clustering Grids Visual economy

Clustering

Grids Window components organized on horizontal and vertical lines – aligns related components Organization – contrast to bring out dominant elements – grouping of elements by proximity – show organizational structure – alignment Consistency – location – format – repetition – organization

Grids

Window to widget spacing Widget to widget spacing NoOk Message text in Arial 14, left adjusted Standard icon set Fixed components Format of variable contents

NoOk Message text in Arial 14, left adjusted Standard icon set NoOk Do you really want to delete the file “myfile.doc” from the folder “junk”? ?  Ok Cannot move the file “myfile.doc” to the folder “junk” because the disc is full. !  Apply Cancel The file was destroyed

Two-level Hierarchy indentation contrast Grouping by white space Alignment connects visual elements in a sequence Logic of organizational flow

Haphazard layout from mullet & sano

Repairing a Haphazard layout from mullet & sano

Redesigning a layout from mullet & sano

Visual economy minimize the number of controls – include only those that are necessary eliminate or move others to secondary windows – minimize clutter so information is not hidden

Visual economy NNNN MMMM xxx: ____ MMMM NNNN  

Repairing excessive display density from mullet & sano

Visual economy Tabs – excellent means for encapsulating related items – but can be overdone!

Graphical redesign exercise Redesign a window using a grid Create a grid emphasising: – visual consistency – relationships between screen elements – navigational cues – economy – legibility and readability – imagery

Slide Show Options Timer Wait for click Timer Seconds:______ Sound Play sound Choose sound file... Options Loop mode Random overlay Fit in window Show menu bar Cancel Sort OK Sort by... DoneCancel Caption Direction Ascending Descending

A possible solution Step 1. Maintain visual consistency – locate standard components including title bar, window controls, dialog boxes... – create the grid: organizes elements into rows and columns also shows where generic components will appear – these generic components may have their own grids Step 2. Determine visual qualities – navigational layout – white space – legibility – typography

The grid Slide Show Options Title bar - see other grid Image in empty column First order labels: - 10pt Bold Arial Radio / checkboxes - standard widget set Second order controls - 10pt Normal Arial Spacing between groups Dialog box controls - see other grid

Using the grid Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Step 3. Determine relationships and navigational structure – map navigational structure onto the grid Step 4. Economize – collapse two windows into one – trim sound dialog

Finished version Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending

Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Slide Show Options Timer Wait for click Timer Seconds:______ Sound Play sound Choose sound file... Options Loop mode Random overlay Fit in window Show menu bar Cancel Sort OK Sort by... Done Cancel Caption Direction Ascending Descending

Further economization Browse… None Slide Show Options Timer Wait for click Wait ___ seconds Sound Options Sort Cancel Browse… Loop mode Random overlay Fit in window Show menu bar OK None Ascending Descending Step 5: can we remove other elements? – can remove image – compare two versions

Reading Text: – Pattern group I: Designing Effective Page Layouts Pages