Internet Explorer 8 Web Slice Style Guide

Jon Seitel, Arushi Pasricha
Microsoft Corporation

August 13, 2008

Contents

• Background
• Using Web Slices
• Creating Web Slices
• Appendix A: Code Samples
• Appendix B: Principles of Readability
• Appendix C: Formatting Guidelines for Web Slices
• Appendix D: Design Guidelines for Web Slices
• References & Recommended Reading

Background

What are Web Slices?

Web Slices are small pieces of syndicated content that enable users to subscribe to pieces of Web sites and notify users when these pieces have been updated. This frees the user from having to periodically check the Web site for updates.

Discovering Web Slices

The user can discover Web Slices in three ways:

• The user can determine if a Web page has Web Slices by viewing the Web Slice icon on the command bar. If the icon is green, at least one Web Slice exists on the Web page. The user can click the icon to subscribe to the first available Web Slice. To view all available Web Slices on the page, the user can click the arrow next to the icon, as shown in the following picture.
  
  
• 
  
• 
  
• Figure 1: Viewing all available Web Slices on a page
• 
  
• 
  
• The user can discover a Web Slice by hovering over it. If a Web Slice icon and a green outline appear, the user can click this icon to subscribe to the Web Slice.
  
  
  
  Figure 2: Subscribing to a Web Slice
  
  
• If only one Web Slice exists on the page, it is good practice to provide a link or button below the Web Slice, with a pop-up that says “Add Web Slice.”

Subscribing to Web Slices

The user can add Web Slices by clicking the Web Slice icon, menu item, or link mentioned in the previous section. The following dialog box appears.


Figure 3: Adding a Web Slice

Click Add. The Web Slice is added to the Favorites bar as a button. The title of the new Web Slice button flashes briefly.

Figure 4: Adding a Web Slice to the Favorites bar

Preview Window

The user can click the Web Slice button to display a preview window. The preview window is a summary of the updated content—it should be a launching point for the user to explore the full Web site.



Figure 5: Displaying a preview window

Three buttons are displayed on the lower-left corner of the preview page. The arrow button allows the user to visit the full Web page. The next button refreshes the Web Slice. The third button (with the exclamation point) notifies the user that this Web Slice will expire, as described in the following section. Click outside the preview page to collapse the window.

Notification

When the Web Slice is updated, the button title appears bold, as shown in the following picture.

Figure 6: Notification after updating a Web Slice

The user can click the button to see the preview window and determine whether to visit the full Web page.

Expiration

Some Web Slices have a property that allows them to expire. When this is about to happen, the button title appears in italics.

Using Web Slices

This section talks about when to use Web Slices and develops a few scenarios in which they might be particularly useful.

When to use Web Slices

• Timely data  – The content is updated frequently, from every 15 minutes to weekly.       
• Regular use  – The content is referenced regularly but does not have to be open all the time.
• Scalable information –  The content can be organized in a structured, easy-to-use manner.

When not to use Web Slices

• Large collections of data – Web Slices are intended to convey small, intermittent updates. For large amounts of data, use a feed instead.
• Interactive content – If things like user interaction and navigation are involved, using something like a sidebar gadget would be better.

Web Slice Scenarios

The following scenarios illustrate ways to incorporate Web Slices into your Web site.

News Updates

A user might want to keep track of specific events or general news updates. The user must check periodically for recent stories, and might miss some updates. With a Web Slice, the user is notified as soon as a new story is posted, and can continue doing other tasks without checking intermittently for updates.

Example Providers:

CNN, New York Times, Wall Street Journal

The following picture shows a mockup of the New York Times Web Slice, with important highlights shown in callouts.

Figure 7: Mockup of the New York Times Web Slice

• Information Summary: Allows end user to make navigation decisions quickly.
• Site Branding: Provides consistency with primary site and clarifies trust decision about data.
• Link to Primary Site: Connects user to the primary information service.

E-mail

A user might be anticipating a certain e-mail, or just want to keep track of the inbox. The user must check for new e-mail periodically. With a Web Slice, the user is notified when new e-mail arrives, and can continue working on other tasks without checking e-mail.

Example Providers:

Google Mail, Hotmail, Yahoo! Mail

The following picture shows credential login.

Figure 8: Windows Live Hotmail credential login

• Credential/Login: Gives end user control over privacy.

Most Popular Items

A user might want updates on the most popular items for a specific Web site,  for example, videos of the day. The user must check the Web site periodically for new items and might miss items because of intermittent checking. With a Web Slice, the user is notified as soon as a new recommendation is available, and can continue working on other tasks without having to check for new items.

Example Providers:

Amazon, eBay, any Web site that supports daily or weekly information ranking.

The following example shows a how MSN Video might appear as a Web Slice.

Figure 9: A Web Slice promoting video links

Auctions

A user might want to track an auction. The user must check for updates to the auction, and might miss some updates due to intermittent checking. With a Web Slice, the user is notified as soon as a rival bid is placed or a critical event occurs, and the user can continue working without having to check periodically.

Example Providers:

eBay, Amazon

The following Web Slice shows an auction in progress. The Buy It Now button links to the primary site and serves another user purpose. Note that this Web Slice expires.

Figure 10: eBay Auction in Progress

• Expiration: This Web Slice stops receiving updates at a certain time.

Summary

Web Slices serve a specific function. Small amounts of data that update intermittently are well suited to Web Slices; however, many other kinds of applications are not. These examples are a good starting point for using Web Slices in your own Web site.

 

Creating Web Slices

This section lays out the basics of creating Web Slices and gives some tips on how to design, format, and style them. It also provides some sample layouts.

A Web Slice consists of three elements:

• A parent element of class hslice.
• A unique id field in the parent element.
• A sub-element of class .entry-title.

Internet Explorer scans for the hslice tag and detects the Web Slice automatically, if the other two elements are present. The following example is a valid Web Slice.

<div class="hslice" id="1">
  <div class="entry-title">I am not a very useful Web Slice.</div>
</div>

The button title on the Favorites bar would be “I am not a very useful Web Slice.”

To make the Web Slice more useful, you might want to add elements of class “entry-content”. Only these elements will appear in the Web Slice preview window unless an alternate display source is used (details in next section).

Example:

<div class="hslice" id="1">
  <div class="entry-title">I’m a more useful Web Slice.</div>
  <div class="entry-content">This will appear in the preview window.</div>
</div>

The example above will create a Web Slice with title “I’m a more useful Web Slice” and a preview window containing “This will appear in the preview window.”

Alternative Display Source

The Web Slice preview window will not always display content the exact same way it appears on a Web page; some of the formatting is stripped away. However, this can be remedied by specifying an alternative display source, which allows the preview window to navigate to a specified location and fetch content for the preview window from there. Note that this location can be the original page the Web Slice appeared on.

Say you have a Web site, http://www.example.com, consisting of a single Web Slice. If you want content in the preview window to appear exactly as it does on example.com (keeping all original formatting), you could use an alternative display source like this:

<div class="hslice" id="1">
  <div class="entry-title">Slice Title</div>
  <div class="entry-content">Content</div>
  <a rel="entry-content" href="http://www.example.com"></a>
</div>

In this case, the preview window will navigate back to the original Web page and render content from there. This should preserve all the formatting.

Note that any other content at the alternate display location will also be visible in the preview window. If you don’t want this, make sure the alternative display location is a page containing only the Web Slice preview content.

Link Targeting

If you do end up using an alternate display source, note that hyperlinks will open within the preview window. In order to have them open in the current tab, explicitly force the link to do so via the target tag.

<a href="http://www.example.com" target="_blank">Link</a>

In the context of a Web Slice, this will open http://www.example.com in the current tab rather than the preview window.

If you don’t use an alternate display source, links will open in the current tab by default.

Applying Styles to Web Slices

In general, styles apply to Web Slices the same way they do to other elements on a Web page. However, there are two significant points to be aware of:

• Styles applied to parent elements are not inherited by the preview window.
• Styles applied to the element are inherited by the preview window.

For example:

<div class="hslice" id="1" style="color:blue">
  <div class="entry-title">
    I’m a more useful Web Slice.</div>
  <div class="entry-content">
    This will appear in the preview window.</div>
</div>

The code above makes the content blue in the browser window but will not make it blue in the preview window. To make it blue in the preview window, you can add an inline style to the content element:

<div class="hslice" id="1" style="color:blue">
  <div class="entry-title">
    I’m a more useful Web Slice.</div>
  <div class="entry-content" style="color:blue">
    This will appear in the preview window (in blue!).</div>
</div>

Now the content will appear as blue both on the Web page and in the preview window.

Web Slice Styles with BODY

Internet Explorer wraps the preview window content with a new <body> element, completely replacing the inline styles, attributes, and class of the Web page's original body tag. This allows style rules for a generic body element that will also be applied to the preview window. If you'd like to create a different look for your Web slice, you'll need to differentiate the new body element from the old one by creating a class for the Web page’s original body:

<style type="text/css">
.myBody {
  color:blue;
}
</style>

And then apply the class directly to the original body tag:

<body class="myBody">
  <div class="hslice" id="1">
    <div class="entry-title">I’m a Web Slice.</div>
    <div class="entry-content">This will appear in the preview window.</div>
  </div>
</body>

The code example above will create a body with blue text in the original Web page but normal text in the preview window.

Persistence and Login

It is important to note that Web Slices only work with persistent cookies. Persistent cookies are generally granted to users by selecting Remember Me on the login page. If users do not receive a persistent cookie, their Web Slice will not display any content that requires a login.

In this case, the preview window should contain the following:

• A reminder that the user needs to select Remember Me for the Web Slice to work.
• A link to the login page, so the user can go back and do this easily, or a login prompt in the preview window itself.

To make a cookie persistent, its expiration property must be set to some point in the future. Note that as soon as the cookie expires, the problem above will resurface.

Mockup:

Figure 11: Making a cookie persistent

Formatting Guidelines

This section is a summary of the formatting guidelines for Web Slices. For a more detailed list, with research-based justifications, see Appendix C. For general principles of readability, see Appendix B.

Font Size: 

Between 11 and 13, with default of 12. Non-Latin typesets may require larger. Avoid text larger than 18 for titles.

Font:

Use a common, highly readable font like Calibri, Georgia, Verdana, or Trebuchet.

Contrast:

Black text on white background is best. Avoid combinations like red and green.

Good Margins:

The minimum suggested value is 14px. Make sure to use generous margins in separating text from other types of content.

Interlinear leading:

Use 20% to produce the most readable text, but the value can be different for other applications. For example, 10-point text should be placed on a 12-point line.

Design Guidelines

This section is a summary of the formatting guidelines for Web Slices. For a more detailed list, with research-based justifications, see Appendix D. For general principles of readability, see Appendix B.

Size:

320 x 240; this should be applied to the element of class “hslice”.

Text:

Should be concise, informative, and bulleted wherever logical.

Button Title and Favicon:

Button title clear and concise; favicon included.

Significant Updates:

User should be notified of significant updates within a Web Slice. No ads, timestamps, or insignificant updates.

Login/Logout:

Login should be avoided; user should be informed when necessary. Logout button at top right. Only persistent cookies can be used for login (see Persistence and Login).

Minimizing User Interaction:

No tabs, navigation, or click-intensive content.

Avoid Sound and Motion:

Only have animation or motion if that’s all the user is supposed to see. Avoid any kind of sound within a Web Slice.

Layout Suggestions for Web Slices

The following section contains some possible layouts. One-, two-, and three-column layouts are shown, followed by examples of how they can be used.

One Column

The following is a simple one-column layout. The purpose of the one-column layout is to accentuate a single thought, topic, or visual. It might be useful for something like a “video of the day” site, where the user might want to know if a new video is posted without having to check the Web site.

Figure 12: Simple one-column layout

And this would be one possible application for it, superimposed on the layout:

Figure 13: Superimposed one-column layout

And the final product:

Figure 14: Final one-column layout

Two Column

The two-column layout below has two columns of equal width (and two rows of equal height). The purpose of this layout is to present multiple elements in a balanced fashion. A Web Slice that updates itself with new photo thumbnails would be a good example.

Figure 15: Simple two-column layout

Again, with a sample over the layout:

Figure 16: Superimposed two-column layout

And the final product:

Figure 17: Final two-column layout

Three Column

Here we have a Web Slice with three columns (and two rows) of equal size. The purpose of this layout is to streamline information into vertically organized columns, with balanced weight given to each column. A good application for this is weather information, where the user might be interested in multiple days or cities.

Figure 18: Simple three-column layout

Over the layout:

Figure 19: Superimposed three-column layout

And the final product:

Figure 20: Final three-column layout

Irregular Layout

You are not restricted to having equally spaced rows and columns for these layouts. In fact, equal spacing, as seen in the examples above, is somewhat rare. Something like the following, where the outside columns are used like margins, would also be perfectly acceptable:

Figure 21: Simple irregular layout

Over the layout:

Figure 22: Superimposed irregular layout

With a final product looking like this:

Figure 23: Final irregular layout

Summary

This section reviewed the basics of creating and styling Web Slices, as well as important formatting and design considerations. It also provided sample layouts to give developers a better idea of how to use them.

Appendix A: Code Samples

This section provides sample CSS/HTML code for implementing the four Web Slice layouts in this guide. A downloadable archive of this code is available here.

One Column

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .panel
            {
                display: table-cell; /* Organize as table */
                font-family: calibri; /* Readable font family */
                font-size: 12pt; /* Recommended font size */
                height: 212px; /* Height(240) - Margin(14) - Margin(14) */
                text-align: center; /* Centered text */
                width: 292px; /* Width(320) - Margin(14) - Margin(14) */
            }
            .entry-title
            {
                font-size: 16pt; /* Easily visible size */
                vertical-align: top; /* Keeps title near top of Web Slice */
            }
        </style>
    </head>
    <body style="margin: 0">
        <div class="hslice" id="1" style="width: 320px">
            <div class="entry-content">
                <div style="display: table; border-spacing: 14px;">
                    <div style="display: table-row;">
                        <div class="panel">
                            <div class="entry-title">Slice Title</div>
                            <div>Content Here</div>
                        </div>
                    </div>
                </div>
            </div>
            <a rel="entry-content" href="oneColumn.html">
                <!-- This is an alternative display source. -->
            </a>
        </div>
    </body>
</html>

Two Column

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .panel
            {
                display: table-cell; /* Organize as table */
                font-family: calibri; /* Readable font family */
                font-size: 12pt; /* Recommended font size */
                height: 99px; /* (Height(240) - Margins(3*14)) / 2 */
                text-align: center; /* Centered text */
                width: 139px; /* (Height(320) - Margins(3*14)) / 2 */
            }
            .entry-title
            {
                font-size: 16pt; /* Easily visible size */
                vertical-align: top; /* Keeps title near top of slice */
            }
        </style>
    </head>
    <body style="margin: 0">
        <div class="hslice" id="1" style="width: 320px">
            <div class="entry-content">
                <div style="display: table; border-spacing: 14px;">
                    <div style="display: table-row;">
                        <div class="entry-title panel">Slice Title</div>
                        <div class="panel">
                            <!-- Title or content could be placed here-->
                        </div>
                    </div>
                    <div style="display: table-row;">
                        <div class="panel">Content</div>
                        <div class="panel">Content</div>
                    </div>
                </div>
            </div>
            <a rel="entry-content" href="twoColumn.html">
                <!-- This is an alternative display source. -->
            </a>
        </div>
    </body>
</html>

Three Column

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .panel
            {
                display: table-cell; /* Organize as table */
                font-family: calibri; /* Readable font family */
                font-size: 12pt; /* Recommended font size */
                height: 99px; /* ((240 - 3*14) / 2) */
                text-align: center; /* Centered text */
                width: 88px; /* ((320 - 4*14) / 3) */
            }
            .entry-title
            {
                font-size: 16pt; /* Easily visible size */
                vertical-align: top; /* Keeps title near top of slice */
            }
        </style>
    </head>
    <body style="margin: 0">
        <div class="hslice" id="1" style="width: 320px">
            <div class="entry-content">
                <div style="display: table; border-spacing: 14px;">
                    <div style="display: table-row;">
                        <div class="entry-title panel">Slice Title</div>
                        <div class="panel"><!-- Title or content could be placed here--></div>
                        <div class="panel"><!-- Title or content could be placed here--></div>
                    </div>
                    <div style="display: table-row;">
                        <div class="panel">Content</div>
                        <div class="panel">Content</div>
                        <div class="panel">Content</div>
                    </div>
                </div>
            </div>
            <a rel="entry-content" href="threeColumn.html">
                <!-- This is an alternative display source. -->
            </a>
        </div>
    </body>
</html>

Irregular

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html401/strict.dtd">
<html>
    <head>
        <title></title>
        <style type="text/css">
            .panel
            {
                display: table-cell; /* Organize as table */
                font-family: calibri; /* Readable font family */
                font-size: 12pt; /* Recommended font size */
                height: 212px; /* Height(240) - Margins(2*14) */
                text-align: center; /* Centered text */
            }
            .entry-title
            {
                font-size: 16pt; /* Easily visible size */
                vertical-align: top; /* Keeps title near top of slice */
            }
        </style>
    </head>
    <body style="margin: 0">
        <div class="hslice" id="1" style="width: 320px">
            <div class="entry-content" style="padding: 14px">
                <div style="display: table">
                    <div style="display: table-row">
                        <div class="panel" style="width: 36px">
                            <!--Title or content could be placed here-->
                        </div>
                        <div class="panel" style="width: 220px">
                            <div class="entry-title">Slice Title</div>
                            <div>Content Here</div>
                        </div>
                        <div class="panel" style="width: 36px;">
                            <!-- Title or content could be placed here-->
                        </div>
                    </div>
                </div>
            </div>
            <a rel="entry-content" href="irregular.html">
                <!-- This is an alternative display source. -->
            </a>
        </div>
    </body>
</html>

Appendix B: Principles of Readability

What follows is a summary of the readability findings of Bill Hill, an expert in the field. They are presented here as a set of general principles, with corollaries, from which the rest of this document’s design principles are derived.

Reading is a choice.

• At any given time, the reader is deciding between continuing to read or starting another activity.
• Poor presentation can ruin even the best information.

Reading is serial pattern recognition.

• The book and screen are simply technologies for making reading easier.
• Good technology aids this recognition; bad technology hinders it.

The printed word has evolved over millennia and is close to optimal.

• Most of the tried-and-true conventions of printing—whether discovered by accident or not—are being confirmed by research.
• Default or common settings are in wide use for a reason.

The more a reader is aware of the medium, the less he or she wants to continue reading.

• The more unusual or inconsistent the font, spacing, margins, and so on, the more reading is disrupted.
• Nothing should “stand out” in a cursory glance at a page.

Readability is sensitive.

• Small decreases in readability can have a big impact.
• Deficiencies in two or three major categories of readability can drastically increase reader irritation.

These principles serve two purposes. First, they are the basis for the recommendations in this guide. Second, they are a starting point for scenarios not envisioned by this document. If your unique needs necessitate a layout or design decision not covered here, it is probably wise to remain cognizant of the principles above.

For more information on the research that inspired these principles, please see “The Magic of Reading” by Bill Hill.

Appendix C: Formatting Guidelines for Web Slices

The following is a collection of formatting principles for Web Slices. These principles should serve as a guide in making decisions about a particular Web Slice. When in doubt, go with default or common settings—in addition to being less likely to cause trouble, they will also help foster consistency across the Web Slice medium, which can only help it gain acceptance in the marketplace, and make it more useful for the end-user.

Based on Bill Hill’s research, the following formatting principles are important for Web Slices:

Font size

For text content, a font size between 11 and 13 should be used, with a default setting of 12. Note that non-Latin typesets (such as Thai or Korean) may require a larger font size. Titles can have a font size up to 18.

• Readability research shows that 11-point text is optimal, and that 12-point text is almost as good.
• Readability decreases quickly for fonts outside this range.
• The default setting of 12 points is recommended because some people sit farther away from their screen.
• Web Slices are small, and very large titles will reduce usable area.

Font

Common, highly readable fonts should be used wherever possible. Calibri, Georgia, and Verdana are good examples.

• Using a common font will increase the chance that the end user can view your content without additional downloads.
• Users are likely to have multiple Web Slices open—if every slice has an unusual font, the user will start seeing a “ransom note” effect.
• Consistency of presentation between Web Slices will allow users to better process information and reduce irritation.

Contrast between page and text color

The text on any given page should be easily distinguishable from the background; black text on a white background is the default. Certain combinations, like red and green, should be essentially off-limits.

• Contrast greatly improves readability.
• Research shows that black text on a white background is highly preferred to the opposite.
• An off-white background is preferred to pure white.
• Light gray text is nearly unreadable and causes eyestrain.
• A combination like red-green would be impossible to read for a color-blind individual.

Good margins

Each Web Slice should have a margin between the Web Slice boundaries and the content. Different types of content—like text and images—should also be separated by generous margins.

• Margins greatly increase readability but shouldn’t be too large.
• Content with generous margins is generally associated with luxury branding; content that’s crowded is reminiscent of direct mail.      
• Margins also help mediate the change from one type of content to another.
• A “good” margin is an inconspicuous one; the minimum value in our sample layouts is 14px.

Interlinear leading

Interlinear leading is the line-height of text, and Web Slices should use about 20%.

• Research shows that leading of about 20% (10% above and below) is best suited for reading.
• Leading may vary based on specific application.

Consistency

Try not to vary the color, spacing, font, and other elements within a Web Slice.

• Changing important readability variables (such as the font) midstream will likely confuse or irritate many users.
• Varying properties within a Web Slice will make it less recognizable to the end user.
• Having many Web Slices open with exotic formatting could irritate many users.

Artistic properties

While highly subjective, Web Slice designers should take aesthetic considerations into account. These include things like symmetry and efficient use of space.

• If a Web Slice is ugly, end users may not use it, regardless of the quality of its content.
• An attractive Web Slice may be more likely to entice users to visit the originating Web site.
• All Web Slices occupy the same portion of the Favorites bar and can be compared, side-by-side, very easily—if one is noticeably ugly, it’s immediately obvious.
• In studies, test subjects have performed better at cognitive processing when induced into a good mood; this good mood was associated with aesthetically pleasing content.

Appendix D: Design Guidelines for Web Slices

Size

All Web Slices should have a size of 320 x 240. Note that the browser adjusts for higher DPIs.

• The specific size is somewhat arbitrary, but consistency will improve usability.
• The more consistent Web Slices are, the less people will be aware of them.
• A common size allows people to focus on the content, not the medium.

Text

Wherever logical, use concise or bulleted text, as opposed to large text blocks. Also consider using captions to provide context for multimedia. Using a title for the Web Slice can be a good idea.

• Space within a Web Slice is limited.
• Bullets or similar arrangements make information far easier to grab during scanning.
• Captions explain images and allow the user to decide if he or she is interested in a video before viewing it.

Button title and favicon

The button title should include a clear and concise description of the content. The Web site’s favicon should also be included on the button.

• The user can simply glance at the Web Slice button and see if the Web Slice is one he or she wishes to check.
• Clear descriptions streamline usage and reduce awareness of the Web Slice.
• Keeping titles concise will improve usefulness and avoid end-user irritation.

Significant updates

The Web Slice should clearly notify the user of updates. Internet Explorer bolds and italicizes the button title by default.

• Web Slices are designed for intermittent viewing—updates are critical in facilitating that function.
• Without a clear notification mechanism, users will miss the information they care about.
• In such a case, the Web Slice becomes less useful and more frustrating.

Ads

There should be no timestamps, advertisements, or other insignificant updates.

• Space is rather limited in a Web Slice, and ads, in particular, will dilute content.
• Insignificant updates will trigger the notification mechanism, distracting users and disrupting their browsing.
• Poor choice of content could threaten the usability of Web Slices as a medium.

Login

Logging in should only be used where truly necessary. If the content can be provided without logging in, it should be. When a login interface is present, the user should be informed about what he or she is logging in to view.

• Logging in is an extra layer between user and content.
• Informing them ahead of time will save them the trouble of logging in to view content they don’t care about.

Note   Web Slices can only use persistent cookies. If your Web Slice requires users to log in, make it clear they need to select a “Remember Me” check box or similar to establish persistence. Otherwise, they won’t be able to see login-only content.

Logout

A logout button or link should be provided at the top right of the Web Slice.

• Having a logout button (where applicable) saves the user the annoyance of going to the originating Web page and logging out there.
• Common placement across Web Slices will save the user from having to search for the logout button every time he or she needs it.
• Placement is also consistent with the top-right logout convention found on most Web pages.

Minimizing user interaction

No tabs or navigation should be included in the Web Slice. More broadly, the user should be interacting with the Web Slice as little as possible.

• Web Slices are meant to allow users to keep track of content without actively monitoring it.
• Interaction could result in accidentally clicking outside the preview window and closing it.

Content differentiation

Text should be clearly distinguishable from links, still images from video, and so on. Captions should also be used for providing clarity and context.

• If the user has to actively search for links, he or she will quickly become irritated.
• If the user cannot tell exactly what each piece of content does, the Web Slice becomes less useful.

Avoid motion (with Text)

Video and animated graphics should be avoided if there is text on the screen the user is intended to read (excluding captions). Motion is the single largest distraction from reading.

Sound

The Web Slice should not play sound. If sound is necessary, make sure it is under user control.

• Sound from the Web Slice will continue playing even if the user is no longer viewing it.
• Sound will distract users from what they’re using and tempt them to close the Web Slice. Web Slices are meant to be encapsulated—using sound will allow them to intrude into the user’s other activities.

References & Recommended Reading

The information in the following papers was very useful in writing this document; almost all the recommendations found in this guide were derived from them.

Web Slice Whitepaper

The Magic of Reading by Bill Hill

No Better than a Poke in the Eye by Larson & Sheedy

The Science of Word Recognition by Kevin Larson

Spacing is Everything by Khoi Vinh

The Technology of Text by Kevin Larson

Whitespace by Mark Boulton

Measuring the Reading Experience, by Kevin Larson (published in TYPO magazine, issue 22)