html5-img
1 / 48

Page Design

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

lamya
Download Presentation

Page Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Page Design CMPT 281

  2. Announcements

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

  4. 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”

  5. 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

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

  7. Design factors for interfaces • Visual organization • Visual consistency • Navigational cues

  8. Visual organization

  9. Visual organization • Which elements to put on the screen? • Clustering of widgets or data • Use of white space and alignment

  10. Visual organization • http://en.wikipedia.org/wiki/Gestalt_psychology

  11. 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

  12. Visual organization

  13. 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

  14. Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Visual organization

  15. Visual consistency

  16. 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

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

  18. Visual consistency (?) http://www.mikeroweworks.com/

  19. Navigational cues

  20. 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

  21. Navigational cues

  22. Navigational cues • How can window navigation be reduced? • avoid long paths • avoid deep hierarchies

  23. Navigational cues http://www.shmarketing.co.uk/system-for-success.php

  24. Techniques • Clustering • Grids • Visual economy

  25. Clustering

  26. Clustering

  27. 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

  28. Grids

  29. Format of variable contents Widget to widget spacing Message text in Arial 14, left adjusted Standard icon set Window to widget spacing No Ok Fixed components Grids

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

  31. Two-level Hierarchy • indentation • contrast Logic of organizationalflow Alignment connects visual elements in a sequence Grouping by white space

  32. Haphazard layoutfrom mullet & sano

  33. Repairing a Haphazard layoutfrom mullet &sano

  34. Redesigning a layout from mullet & sano

  35. 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

  36. NNNN MMMM xxx: ____ xxx: ____ MMMM xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ xxx: ____ NNNN xxx: ____ xxx: ____ xxx: ____ xxx: ____ Visual economy

  37. Repairing excessive display densityfrom mullet & sano

  38. Visual economy • Tabs • excellent means for encapsulating related items • but can be overdone!

  39. 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

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

  41. 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

  42. Slide Show Options The grid 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

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

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

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

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

  47. Reading • Text: • Pattern group I: Designing Effective Page Layouts • Pages 631-657

More Related