page design
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/1.jpg)
Page Design
CMPT 281
![Page 2: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/2.jpg)
Announcements
![Page 3: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/3.jpg)
Outline
• Graphic design• Components of visual languages• Design factors in interfaces• Techniques:
– Clustering– Grids– Visual economy
• Graphical redesign exercise
![Page 4: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/4.jpg)
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”
![Page 5: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/5.jpg)
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
![Page 6: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/6.jpg)
Components of visual language
• Visual identity– unique appearance
• Animation– dynamics of display
• Color and Texture– convey complex information and
pictorial reality
![Page 7: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/7.jpg)
Design factors for interfaces
• Visual organization• Visual consistency• Navigational cues
![Page 8: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/8.jpg)
Visual organization
![Page 9: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/9.jpg)
Visual organization
• Which elements to put on the screen?• Clustering of widgets or data• Use of white space and alignment
![Page 10: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/10.jpg)
Visual organization
• http://en.wikipedia.org/wiki/Gestalt_psychology
![Page 11: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/11.jpg)
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
![Page 12: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/12.jpg)
Visual organization
![Page 13: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/13.jpg)
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
![Page 14: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/14.jpg)
Visual organization
Mmmm:Mmmm:
Mmmm:Mmmm:Mmmm:
ü
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
û
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
![Page 15: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/15.jpg)
Visual consistency
![Page 16: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/16.jpg)
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
![Page 17: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/17.jpg)
Visual consistency
Warning
mmmm mmmmmm
Okay
!
Help
mmmm mmmmmm mmm
Okay
?
Tip of the day: Monday, Mar 12
mmmm mmmmmm
Dismiss
ü û
![Page 18: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/18.jpg)
Visual consistency (?)
http://www.mikeroweworks.com/
![Page 19: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/19.jpg)
Navigational cues
![Page 20: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/20.jpg)
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
![Page 21: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/21.jpg)
Navigational cues
ü û
![Page 22: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/22.jpg)
Navigational cues
• How can window navigation be reduced?– avoid long paths– avoid deep hierarchies
![Page 23: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/23.jpg)
Navigational cues
http://www.shmarketing.co.uk/system-for-success.php
![Page 24: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/24.jpg)
Techniques
• Clustering• Grids• Visual economy
![Page 25: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/25.jpg)
Clustering
![Page 26: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/26.jpg)
Clustering
![Page 27: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/27.jpg)
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
![Page 28: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/28.jpg)
Grids
![Page 29: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/29.jpg)
Grids
Window to widget
spacing
Widget to widget
spacing
No Ok
Message text in Arial 14, left adjusted
Standard icon set
Fixed components
Format of variable contents
![Page 30: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/30.jpg)
No Ok
Message text in Arial 14, left adjusted
Standard icon set
No Ok
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
![Page 31: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/31.jpg)
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
![Page 32: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/32.jpg)
Haphazard layoutfrom mullet & sano
![Page 33: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/33.jpg)
Repairing a Haphazard layoutfrom mullet &sano
![Page 34: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/34.jpg)
Redesigning a layout from mullet & sano
![Page 35: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/35.jpg)
![Page 36: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/36.jpg)
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
![Page 37: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/37.jpg)
Visual economy
NNNNMMMM
xxx: ____xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
MMMM
NNNN
ü û
![Page 38: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/38.jpg)
Repairing excessive display densityfrom mullet & sano
![Page 39: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/39.jpg)
Visual economy
• Tabs– excellent means for encapsulating related items– but can be overdone!
![Page 40: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/40.jpg)
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
![Page 41: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/41.jpg)
Slide Show Options
Timer
Wait for clickTimerSeconds:______
Sound
Play soundChoose sound file...
Options
Loop modeRandom overlayFit in window
Show menu bar
CancelSort
OK
Sort by...
Done Cancel
Caption
Direction
AscendingDescending
![Page 42: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/42.jpg)
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
![Page 43: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/43.jpg)
The grid
Slide Show OptionsTitle 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
![Page 44: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/44.jpg)
Using the grid
Browse…None
Slide Show Options
Timer Wait for clickWait ___ seconds
Sound
Options
Sort
Cancel
Browse…
Loop modeRandom overlayFit in windowShow menu bar
OK
None
AscendingDescending
• Step 3. Determine relationships and navigational structure – map navigational
structure onto the grid
• Step 4. Economize– collapse two windows
into one – trim sound dialog
![Page 45: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/45.jpg)
Finished version
Browse…None
Slide Show Options
Timer Wait for clickWait ___ seconds
Sound
Options
Sort
Cancel
Browse…
Loop modeRandom overlayFit in windowShow menu bar
OK
None
AscendingDescending
![Page 46: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/46.jpg)
Browse…None
Slide Show Options
Timer Wait for clickWait ___ seconds
Sound
Options
Sort
Cancel
Browse…
Loop modeRandom overlayFit in windowShow menu bar
OK
None
AscendingDescending
Slide Show Options
Timer
Wait for clickTimerSeconds:______
Sound
Play soundChoose sound file...
Options
Loop modeRandom overlayFit in window
Show menu bar
CancelSort
OK
Sort by...
Done Cancel
Caption
Direction
AscendingDescending
![Page 47: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/47.jpg)
Further economization
Browse…None
Slide Show Options
Timer Wait for clickWait ___ seconds
Sound
Options
Sort
Cancel
Browse…
Loop modeRandom overlayFit in windowShow menu bar
OK
None
AscendingDescending
• Step 5: can we remove other elements?– can remove image– compare two versions
![Page 48: Page Design](https://reader036.vdocuments.site/reader036/viewer/2022062521/56816832550346895ddde3de/html5/thumbnails/48.jpg)
Reading
• Text:– Pattern group I: Designing Effective Page Layouts
• Pages 631-657