Upload
lamya
View
27
Download
0
Tags:
Embed Size (px)
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 Presentation
Citation preview
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
Visual organization
• Which elements to put on the screen?• Clustering of widgets or data• Use of white space and alignment
Visual organization
• http://en.wikipedia.org/wiki/Gestalt_psychology
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
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:Mmmm:
Mmmm:Mmmm:Mmmm:
ü
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
û
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Visual consistency
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 mmmmmm
Okay
!
Help
mmmm mmmmmm mmm
Okay
?
Tip of the day: Monday, Mar 12
mmmm mmmmmm
Dismiss
ü û
Visual consistency (?)
http://www.mikeroweworks.com/
Navigational cues
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
ü û
Navigational cues
• How can window navigation be reduced?– avoid long paths– avoid deep hierarchies
Navigational cues
http://www.shmarketing.co.uk/system-for-success.php
Techniques
• Clustering• Grids• Visual economy
Clustering
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
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
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
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
Haphazard layoutfrom mullet & sano
Repairing a Haphazard layoutfrom 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
NNNNMMMM
xxx: ____xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
xxx: ____xxx: ____
MMMM
NNNN
ü û
Repairing excessive display densityfrom 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 clickTimerSeconds:______
Sound
Play soundChoose sound file...
Options
Loop modeRandom overlayFit in window
Show menu bar
CancelSort
OK
Sort by...
Done Cancel
Caption
Direction
AscendingDescending
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 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
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
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
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
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
Reading
• Text:– Pattern group I: Designing Effective Page Layouts
• Pages 631-657