page design cmpt 281. announcements outline graphic design components of visual languages design...
TRANSCRIPT
![Page 1: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/1.jpg)
Page Design
CMPT 281
![Page 2: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/2.jpg)
Announcements
![Page 3: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/7.jpg)
Design factors for interfaces
• Visual organization• Visual consistency• Navigational cues
![Page 8: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/8.jpg)
Visual organization
![Page 9: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/10.jpg)
Visual organization
• http://en.wikipedia.org/wiki/Gestalt_psychology
![Page 11: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/12.jpg)
Visual organization
![Page 13: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/15.jpg)
Visual consistency
![Page 16: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/18.jpg)
Visual consistency (?)
http://www.mikeroweworks.com/
![Page 19: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/19.jpg)
Navigational cues
![Page 20: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/21.jpg)
Navigational cues
ü û
![Page 22: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/22.jpg)
Navigational cues
• How can window navigation be reduced?– avoid long paths– avoid deep hierarchies
![Page 23: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/23.jpg)
Navigational cues
http://www.shmarketing.co.uk/system-for-success.php
![Page 24: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/24.jpg)
Techniques
• Clustering• Grids• Visual economy
![Page 25: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/25.jpg)
Clustering
![Page 26: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/26.jpg)
Clustering
![Page 27: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/28.jpg)
Grids
![Page 29: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/32.jpg)
Haphazard layoutfrom mullet & sano
![Page 33: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/33.jpg)
Repairing a Haphazard layoutfrom mullet &sano
![Page 34: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/34.jpg)
Redesigning a layout from mullet & sano
![Page 35: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/35.jpg)
![Page 36: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/37.jpg)
Visual economy
NNNN
MMMM
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
xxx: ____
MMMM
NNNN
ü û
![Page 38: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/38.jpg)
Repairing excessive display densityfrom mullet & sano
![Page 39: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/39.jpg)
Visual economy
• Tabs– excellent means for encapsulating related items– but can be overdone!
![Page 40: Page Design CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/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 CMPT 281. Announcements Outline Graphic design Components of visual languages Design factors in interfaces Techniques: – Clustering – Grids](https://reader035.vdocument.in/reader035/viewer/2022062801/56649e3f5503460f94b30053/html5/thumbnails/48.jpg)
Reading
• Text:– Pattern group I: Designing Effective Page Layouts
• Pages 631-657