sims 213: user interface design & development marti hearst tues, march 7, 2006
Post on 19-Dec-2015
217 views
TRANSCRIPT
![Page 1: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/1.jpg)
SIMS 213: User Interface Design & Development
Marti HearstTues, March 7, 2006
![Page 2: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/2.jpg)
Today
Content Layout Technique: WireframingGraphic Design
![Page 3: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/3.jpg)
Wireframing
What is the main idea?– Separate content from layout and display– Graphic Design:
• Use the page layout to signal the flow of interaction• Group conceptually related items together
– Nielsen: • What does the layout communicate?• Test if a page of content becomes more usable because of the layout• A template (for a home page) should contain what items?
![Page 4: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/4.jpg)
From http://www.gotomedia.com/macromedia/monterey/architecture/
![Page 5: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/5.jpg)
From http://www.gotomedia.com/macromedia/monterey/architecture/
![Page 6: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/6.jpg)
How to Test A Layout
Study conducted by Thomas S. Tullis from Fidelity Investments in 1998Assessed the usability of five alternative template designs for their intranets. Method:– Show templates with “greeked” text– Draw labeled boxes around each page corresponding
to 9 elements– No overlapping allowed– Indicate if something appears not to be there
![Page 7: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/7.jpg)
The Elements
1. Main content selections for this page 2. Page title 3. Person responsible for this page 4. Intranet-wide navigation (e.g., intranet home, search) 5. Last updated date 6. Intranet identifier/logo 7. Site navigation (e.g, major sections of this section of the
intranet) 8. Confidentiality/security (e.g, Public, Confidential, etc.) 9. Site news items
![Page 8: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/8.jpg)
From http://www.useit.com/alertbox/980517.html
![Page 9: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/9.jpg)
From http://www.useit.com/alertbox/980517.html
![Page 10: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/10.jpg)
From http://www.useit.com/alertbox/980517.html
![Page 11: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/11.jpg)
From http://www.useit.com/alertbox/980517.html
![Page 12: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/12.jpg)
Wireframing Study
Different parts of the designs scored betterBest parts were taken from each design and combinedResulted in an overall better score
![Page 13: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/13.jpg)
Results of Study
CorrectPage
Elements
Subjective Appeal
(-3 to +3)
Template 1 52% +1.3
Template 3 67% +0.9
Final Design 72% +2.1
![Page 14: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/14.jpg)
Graphical Design in UI Design
Sources: – GUI Bloopers, Chapter 3
• Jeff Johnson– Principles of Effective Visual Communication for GUI design
• Marcus in Baecker, Grudin, Buxton and Greenberg, Readings in Human-Computer Interaction: Toward the Year 2000
– Designing Visual Interfaces• Mullet & Sano, Prentice Hall
– The Non-Designers Design Book• Robin Williams, Peachpit Press
– The Zen of CSS Design• Dave Shea and Molly Holzschlag, New Riders• Really terrific! Design aesthetics plus how to code it.
– http://www.csszengarden.com/
![Page 15: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/15.jpg)
Graphical Design in UI Design
Graphical Design must account for:– A comprehensible mental image– Appropriate organization of data, functions, tasks and roles– High-quality appearances
• The “look”
– Effective interaction sequencing• The “feel”
![Page 16: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/16.jpg)
From http://www.warrenkramer.com/design/1/index.shtml
![Page 17: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/17.jpg)
A Note on Tools
Many tools make it difficult to do layout correctly– Powerpoint especially!– As Maggie Law showed, can use Excel!
![Page 18: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/18.jpg)
Layout Grids: A Design Staple
Organization– Use contrast to bring out dominant elements– Use grouping of elements by proximity– Use alignment for organization and aesthetics
ConsistencyNavigational CuesThe eye travels along the paths cut out for it in the work. – Paul Klee
![Page 19: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/19.jpg)
http://hotwired.lycos.com/webmonkey/98/28/index4a_page2.html?tw=design
Layout Grids
![Page 20: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/20.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Two Column Layout Grids
![Page 21: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/21.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Three Column Layout Grids
![Page 22: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/22.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Symmetry vs. Asymmetry
Beware of too much symmetry
![Page 23: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/23.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Four Column Layout Grids
![Page 24: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/24.jpg)
Layout 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 25: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/25.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”?
?
Apply
Cancel
The file was destroyed
BadLayout:
GoodLayout:
Slide fromSaul Greenberg
![Page 26: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/26.jpg)
Visual Consistency
Internal consistency– Same conventions and rules for all elements of the GUI (unless strong reason to do
otherwise)– Enforced by a set of application-specific grids
External consistency– Follow platform and interface style conventions– Use platform and widget-specific grids– Deviate from conventions only when it provides a clear benefit to user
![Page 27: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/27.jpg)
Two-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
Slide fromSaul Greenberg
![Page 28: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/28.jpg)
User grouping to show relationships between screen elements
Bad Good Good
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
![Page 29: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/29.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Grid Layout Recommendations
Number of lines per page – # of lines you can fit on each page in your chosen font is
divisible by the number of grid sections you intend to have.
– Method: Flow some text on to a page and get a print-out in various column widths and different font sizes
![Page 30: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/30.jpg)
From http://www.cultsock.ndirect.co.uk/MUHome/cshtml/print/grids.html
Grid Layout Recommendations
Margins: a function of how much you need to fit on to each page– (From paper layout, not on-screen)
• Foredge (also known as outside margin): – should be an average of head (top margin) and foot (bottom margin)
• Foot (also known as bottom margin): – Should always be bigger than the head (top margin), at least 50%
bigger than the bottom.– This is due an optical illusion called the optical centre -- we tend to see the
centre of a page as being slightly higher than the actual centre.
• Back (also known as inside or gutter margin): – the two back margins taken together should be roughly as wide as the
foredge
![Page 31: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/31.jpg)
Navigational cuesProvide initial focusDirect attention to important, secondary, or peripheral items as appropriateAssist in navigation through materialOrder should follow a user’s conceptual model of sequences
bad good
![Page 32: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/32.jpg)
IBM's Aptiva Communication Center
No regard fortask order; noorganization
![Page 33: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/33.jpg)
Haphazard layoutfrom mullet & sano
![Page 34: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/34.jpg)
Repairing a Haphazard layoutfrom mullet &sano
![Page 35: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/35.jpg)
Bad alignment Poor choice of colors to distinguish labels from editable fields
![Page 36: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/36.jpg)
Economy of visual elements
– Minimize number of controls
– Include only those that are necessary• eliminate, or relegate others to secondary windows• (but don’t want too many extra windows!)
– Minimize clutter • so information is not hidden
![Page 37: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/37.jpg)
Overuse of 3-d effects makes the window unnecessarily cluttered
Slide adapted from Saul Greenberg
![Page 38: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/38.jpg)
More Guidelines
From Chapter 3 of GUI Bloopers– Missing group boxes– Inconsistent group box style– Inconsistent separator style– Shoddy labeling and spacing
• Radiobutton spacing• Inconsistent property label alignment• Very long labels• Poor label placement• Unlabeld container components
– Inconsistent fonts– Tiny fonts
![Page 39: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/39.jpg)
Web Page Layout
– Controversies about:• Should users scroll?• How much whitespace?
– Spool’s claims• Users scroll if the top part of the page contains useful information.
– (If it contains branding, ads, etc, they assume more of the same below.)• Whitespace negatively correlated with usefulness
– Viewing a page through a browser is like putting a small hole in a piece of paper and holding over the middle of a magazine page
– Layout design is different for the web than print
– Our studies suggest:• Text and link clustering is favored• Others claim this aids scannability
![Page 40: SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006](https://reader035.vdocuments.us/reader035/viewer/2022062407/56649d395503460f94a12f0c/html5/thumbnails/40.jpg)
Related Issues
Text – legibility– typefaces and typesetting Color and Texture Iconography
–signs, icons, symbols; concrete to abstract Visual identity
–unique appearance Animation
–dynamics of display