SIMS 213: User Interface Design & Development Marti

SIMS 213: User Interface Design & Development Marti

SIMS 213: User Interface Design & Development Marti Hearst Tues, March 7, 2006 Today Content Layout Technique: Wireframing Graphic Design 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? From http://www.gotomedia.com/macromedia/monterey/architecture/

From http://www.gotomedia.com/macromedia/monterey/architecture/ How to Test A Layout Study conducted by Thomas S. Tullis from Fidelity Investments in 1998 Assessed 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 The Elements 1. 2. 3. 4. 5. 6.

7. Main content selections for this page Page title Person responsible for this page Intranet-wide navigation (e.g., intranet home, search) Last updated date Intranet identifier/logo Site navigation (e.g, major sections of this section of the intranet) 8. Confidentiality/security (e.g, Public, Confidential, etc.)

9. Site news items From http://www.useit.com/alertbox/980517.html From http://www.useit.com/alertbox/980517.html From http://www.useit.com/alertbox/980517.html From http://www.useit.com/alertbox/980517.html Wireframing Study

Different parts of the designs scored better Best parts were taken from each design and combined Resulted in an overall better score Results of Study Correct Page Elements Subjective

Appeal (-3 to +3) Template 1 52% +1.3 Template 3

67% +0.9 Final Design 72% +2.1 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 HumanComputer 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/ 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 From http://www.warrenkramer.com/design/1/index.shtml A Note on Tools Many tools make it difficult to do layout correctly Powerpoint especially!

As Maggie Law showed, can use Excel! 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 Consistency Navigational Cues The eye travels along the paths cut out for it in the work.

Paul Klee Layout Grids http://hotwired.lycos.com/webmonkey/98/28/index4a_pag e2.html?tw=design Two Column Layout Grids From http://www.cultsock.ndirect.co.uk/MUHome/cshtml /print/grids.html

Three Column Layout Grids From http://www.cultsock.ndirect.co.uk/MUHome/cshtml /print/grids.html Symmetry vs. Asymmetry Beware of too much symmetry From http://www.cultsock.ndirect.co.uk/MUHome/cshtml

/print/grids.html Four Column Layout Grids From http://www.cultsock.ndirect.co.uk/MUHome/cshtml /print/grids.html Layout Grids Widget to widget

spacing Window to widget spacing Format of variable contents Standard icon set

Message text in Arial 14, left adjusted No Ok Fixed components

Good Layout: Standard icon set Message text in Arial 14, left adjusted ?

No Ok Do you really want to delete the file myfile.doc from the folder junk? No

Ok Bad Layout: Apply The file was destroyed Cancel

Slide from Saul Greenberg 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 Slide from Saul Greenberg Two-level Hierarchy indentation contrast

Alignment connects visual elements in a sequence Logic of organizational flow Grouping by white space

User grouping to show relationships between screen elements Bad Good Mmmm: Mmmm: Mmmm:

Mmmm: Mmmm: Mmmm: Mmmm: Good Mmmm: Mmmm:

Mmmm: Mmmm: Mmmm: Mmmm: Mmmm: Mmmm:

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 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 From http://www.cultsock.ndirect.co.uk/MUHome/cshtml /print/grids.html Navigational cues Provide initial focus Direct attention to important, secondary, or peripheral items as

appropriate Assist in navigation through material Order should follow a users conceptual model of sequences bad good No regard for task order; no organization

IBM's Aptiva Communication Center Haphazard layout from mullet & sano Repairing a Haphazard layout from mullet & sano Bad alignment

Poor choice of colors to distinguish labels from editable fields Economy of visual elements Minimize number of controls Include only those that are necessary eliminate, or relegate others to secondary windows (but dont want too many extra windows!) Minimize clutter so information is not hidden

Overuse of 3-d effects makes the window unnecessarily cluttered Slide adapted from Saul Greenberg 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 Web Page Layout Controversies about: Should users scroll?

How much whitespace? Spools 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 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

Recently Viewed Presentations

  • Runoff Hydrograph and Flow Routing

    Runoff Hydrograph and Flow Routing

    Unit Hydrograph Theory. Direct runoff hydrograph resulting from a unit depth of excess rainfall occurring uniformly on a watershed at a constant rate for a specified duration. Unit pulse response function of a linear hydrologic system. Can be used to...
  • La crisis de los años 30 - WordPress.com

    La crisis de los años 30 - WordPress.com

    La crisis de los años 30 1929-1945 José Morilla Critz * * * * * * * * * * * La capacidad productiva: Al finalizar la guerra la capacidad industrial de Europa mayor que antes y más adecuada a...
  • The Extended Essay

    The Extended Essay

    The IBO student handbook indicates that any strategic move on the part of a student that gives that student a "unfair advantage over another student," which includes the use of one's IA on the EE or vice versa, will result...
  • Total Quality Management

    Total Quality Management

    Operations Quality Management World-Class Service ... Traditional trade-off between costs of improving quality and costs of poor quality is erroneous Quality Gurus Armand V. Feigenbaum Developed concept of total quality control (TQC) Responsibility for quality must rest with the persons...
  • A REVIEW : "The Feasibility of Launching and Detecting ...

    A REVIEW : "The Feasibility of Launching and Detecting ...

    Signal Strength Two Methods for Signal Strength Signal Strength More on Signal Strength Next….Carrier Sensing Time Carrier Sensing Time Analysis Finally, the best for last….Packet Delivery Ratio Basic Statistics Summary We need Consistency Checks to be Sure PRD/Signal Strength Consistency...
  • Title of this presentation

    Title of this presentation

    WHMIS Presented by Name Title Date
  • Report on IPC-related IT systems

    Report on IPC-related IT systems

    12. Report on IPC-related IT systems 51th session of the IPC Committee of Experts Patrick Fiévet Head of IT Systems Section International Classifications and Standards Division
  • Adult Bible Study Guide Apr  May  Jun 2009

    Adult Bible Study Guide Apr May Jun 2009

    The Christian Life Lesson 10, June 6 DISCIPLESHIP Key Text John 15:8 NIV " 'This is to my Father's glory, that you bear much fruit, showing yourselves to be my disciples'." DISCIPLESHIP Initial Words {300} A disciple is a lifelong...