Alertbox: Auto-Forwarding Carousels and Accordions Reduce Visibility
Jakob Nielsen <[email protected]> Mon, 21 Jan 2013 17:00:23 +0000
| Newsgroups | gmane.comp.web.alertbox |
|---|---|
| Message-ID | <538d934a891681a5d850bb4e5f405d0f72c.20130121165954@mail111.us4.mcsv.net> |
This is a multi-part message in MIME format
--_----------=_MCPart_34810089
Content-Type: text/plain; charset="utf-8"; format="fixed"
Content-Transfer-Encoding: quoted-printable
The user's target was at the top of the page in 98-point font.
But she failed to find it because the panel auto-forwarded instead of stay=
ing still.
Jakob Nielsen's Alertbox for January 21:
Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility
> http://nngroup.us4.list-manage2.com/track/click?u=3D538d934a891681a5d=
850bb4e5&id=3Dd49d7e8780&e=3Df405d0f72c
------------------------------------------------------------
** Usability Week 2013 conference
* New York City: March 17-22
* Dallas: April 8-12
* San Francisco: April 28-May 3
* London: May 12-17
* Toronto: June 3-7
* Melbourne: August (program to be announced shortly)
Full event program describing all full-day training courses:
> http://nngroup.us4.list-manage.com/track/click?u=3D538d934a891681a5d8=
50bb4e5&id=3D0b09cfc204&e=3Df405d0f72c
------------------------------------------------------------
** Multihierarchy
Much web information can be structured as a good old hierarchy, and simple=
breadcrumbs
can show users where any given page sits in the hierarchy.
> http://nngroup.us4.list-manage.com/track/click?u=3D538d934a891681a5d8=
50bb4e5&id=3D71f5523d25&e=3Df405d0f72c
Sometimes, though, items belong equally well to many categories, creating=
a
multihierarchy. You don't see good multihierarchical visualizations too of=
ten,
but here's one I found on the Association for Computing Machinery website:
(image not included in text-only email)
This is their representation of an article I wrote in 1999 titled User int=
erface
directions for the Web (http://nngroup.us4.list-manage.com/track/click?u=
=3D538d934a891681a5d850bb4e5&id=3D61f76a0021&e=3Df405d0f72c) .
The article is about browsers, hypertext, user-centered design, and multim=
edia.
These issues again belong to higher-level categories such as web interface=
s,
interaction paradigms, interaction design process, and document preparatio=
n.
An elaborate tree structure like the one shown here is overkill for most t=
asks,
but can be useful for complex information structures.
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=
=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D=3D
Copyright =C2=A9 2013 Nielsen Norman Group, All rights reserved.
You're receiving this newsletter because you subscribed at http://www.usei=
t.com/alertbox/subscribe.html
Our mailing address is:
Nielsen Norman Group
48105 Warm Springs Blvd.
Fremont, CA 94539-7498, USA
Is this email not displaying correctly?
=2E
** View it in your browser (http://us4.campaign-archive2.com/?u=3D538d934a=
891681a5d850bb4e5&id=3Dc134b554bb&e=3Df405d0f72c)
** unsubscribe from this list (http://nngroup.us4.list-manage.com/unsubscr=
ibe?u=3D538d934a891681a5d850bb4e5&id=3D7f29a2b335&e=3Df405d0f72c&c=3Dc134b55=
4bb)
** update subscription preferences (http://nngroup.us4.list-manage.com/pro=
file?u=3D538d934a891681a5d850bb4e5&id=3D7f29a2b335&e=3Df405d0f72c)
--_----------=_MCPart_34810089
Content-Type: text/html; charset="us-ascii"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Facebook sharing information tags -->
<meta property="og:title" content="Alertbox: Auto-Forwarding Carousels and Accordions Reduce Visibility">
<title>Alertbox: Auto-Forwarding Carousels and Accordions Reduce Visibility</title>
<style type="text/css">
#outlook a{
padding:0;
}
body{
width:100% !important;
}
body{
-webkit-text-size-adjust:none;
}
@media only screen and (max-device-width: 720px){
.mobilenoshow{
display:none !important;
}
} @media only screen and (max-device-width: 720px){
table td,table th{
padding:2px !important;
}
} body{
margin:0;
padding:0;
}
img{
border:none;
font-size:14px;
font-weight:bold;
height:auto;
line-height:100%;
outline:none;
text-decoration:none;
text-transform:capitalize;
}
#backgroundTable{
height:100% !important;
margin:0;
padding:0;
width:100% !important;
}
body,.backgroundTable{
background-color:#FAFAFA;
}
li{
margin-top:0px;
margin-bottom:0px;
}
#templateContainer{
border:1px solid #DDDDDD;
}
h1,.h1{
color:#202020;
display:block;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:140%;
font-weight:bold;
line-height:100%;
margin-top:0px;
margin-bottom:10px;
text-align:left;
}
h2,.h2{
color:#202020;
display:block;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:130%;
font-weight:bold;
line-height:100%;
margin-bottom:10px;
text-align:left;
}
h3,.h3{
color:#202020;
display:block;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:120%;
font-weight:bold;
line-height:100%;
margin-bottom:10px;
text-align:left;
}
h4,.h4{
color:#505050;
display:block;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:110%;
font-weight:bold;
line-height:100%;
margin-bottom:10px;
text-align:left;
}
#templatePreheader{
background-color:#FAFAFA;
}
.preheaderContent div{
color:#101010;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:9px;
line-height:100%;
text-align:left;
}
.preheaderContent div a:link,.preheaderContent div a:visited{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
.preheaderContent div img{
height:auto;
max-width:600px;
}
#templateHeader{
background-color:#FFFFFF;
border-bottom:0;
}
.headerContent{
color:#202020;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:34px;
font-weight:bold;
line-height:100%;
padding:0;
text-align:center;
vertical-align:middle;
}
.headerContent a:link,.headerContent a:visited{
color:#336699;
font-weight:normal;
text-decoration:underline;
}
#headerImage{
height:auto;
max-width:600px !important;
}
#templateContainer,.bodyContent{
background-color:#FDFDFD;
}
.bodyContent div{
color:#101010;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
line-height:120%;
text-align:left;
}
.bodyContent div a:link,.bodyContent div a:visited{
color:#0033aa;
font-weight:normal;
text-decoration:underline;
}
.bodyContent img{
display:inline;
margin-bottom:10px;
}
#templateFooter{
background-color:#FDFDFD;
border-top:0;
}
.footerContent div{
color:#707070;
font-family:Verdana,Calibri,Helvetica,Arial,sans-serif;
font-size:12px;
line-height:125%;
text-align:left;
}
.footerContent div a:link,.footerContent div a:visited{
color:#0033aa;
font-weight:normal;
text-decoration:underline;
}
.footerContent img{
display:inline;
}
#social{
background-color:#FAFAFA;
border:1px solid #F5F5F5;
}
#social div{
text-align:center;
}
#utility{
background-color:#FDFDFD;
border-top:1px solid #F5F5F5;
}
#utility div{
text-align:center;
}
#monkeyRewards img{
max-width:160px;
}
</style></head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="-webkit-text-size-adjust: none;margin: 0;padding: 0;background-color: #FAFAFA;width: 100% !important;">
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable" style="margin: 0;padding: 0;height: 100% !important;width: 100% !important;">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FDFDFD;">
<tr class="mobilenoshow">
<td align="center" valign="top">
<!-- // Begin Template Header \\ -->
<table border="0" cellpadding="0" cellspacing="0" width="100%" id="templateHeader" style="background-color: #FFFFFF;border-bottom: 0;">
<tr>
<td class="headerContent" style="color: #202020;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;font-size: 34px;font-weight: bold;line-height: 100%;padding: 0;text-align: center;vertical-align: middle;">
<!-- // Begin Module: Standard Header Image \\ -->
<div style="text-align: left;"><a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=aefa1bf0fd&e=f405d0f72c" style="color: #336699;text-decoration: underline;font-weight: normal;"><img src="http://www.nngroup.com/images/nnglogo.gif" alt="" border="0" style="margin: 0;padding: 0;border: none;height: auto;line-height: 100%;outline: none;text-decoration: none;font-size: 14px;font-weight: bold;text-transform: capitalize;" width="98" height="46"></a></div>
<!-- // End Module: Standard Header Image \\ -->
</td>
</tr>
</table>
<!-- // End Template Header \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Body \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%" id="templateBody">
<tr>
<td valign="top" class="bodyContent" style="background-color: #FDFDFD;">
<!-- // Begin Module: Standard Content \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top">
<div style="color: #101010;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;line-height: 120%;text-align: left;"><div style="text-align: left;color: #101010;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;line-height: 120%;">
<blockquote style="background-color: #ffffdd; color: #000000; line-height:130%; padding: 4px; margin: 0;">
<p style="margin-top: 0px; margin-bottom: 2px;">
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=c4b97ad3b2&e=f405d0f72c" style="text-decoration: none;color: #505050;font-weight: normal;"><span style="color: #505050;">Summary:</span><br>
The user's target was at the top of the page in 98-point font. But she failed to find it because the panel auto-forwarded instead of staying still.</a></p>
<p style="margin-top: 4px; margin-bottom: 0; font-size:120%; line-height:140%;">
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=9737598c13&e=f405d0f72c" style="text-decoration: none;color: #505050;font-weight: normal;">Jakob Nielsen's Alertbox for January 21: </a><a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=f3f77bede4&e=f405d0f72c" style="text-decoration: none;color: #505050;font-weight: normal;"><span style="text-decoration: underline; color:#0033aa;"><strong>Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility</strong></span></a></p>
</blockquote>
<hr>
<h3 style="color: #202020;display: block;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;font-size: 120%;font-weight: bold;line-height: 100%;margin-bottom: 10px;text-align: left;">
Usability Week 2013 conference</h3>
<ul>
<li style="margin-top: 0px;margin-bottom: 0px;">
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=0597031fa0&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">New York City</a>: March 17-22</li>
<li style="margin-top: 0px;margin-bottom: 0px;">
<a href="http://nngroup.us4.list-manage1.com/track/click?u=538d934a891681a5d850bb4e5&id=be5d1bac60&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">Dallas</a>: April 8-12</li>
<li style="margin-top: 0px;margin-bottom: 0px;">
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=7c18a90e08&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">San Francisco</a>: April 28-May 3</li>
<li style="margin-top: 0px;margin-bottom: 0px;">
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=743819c7dc&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">London</a>: May 12-17 (includes <a href="http://nngroup.us4.list-manage1.com/track/click?u=538d934a891681a5d850bb4e5&id=cbd0ed3049&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">3-Day Camp</a>)</li>
<li style="margin-top: 0px;margin-bottom: 0px;">
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=b371e5a99b&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">Toronto</a>: June 3-7</li>
<li style="margin-top: 0px;margin-bottom: 0px;">
Melbourne: August (program to be announced shortly)</li>
</ul>
<p>
<a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=0511f46f80&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">Full event program</a> describing all full-day training courses.</p>
<hr>
<h3 style="color: #202020;display: block;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;font-size: 120%;font-weight: bold;line-height: 100%;margin-bottom: 10px;text-align: left;">
Multihierarchy</h3>
<p>
Much web information can be structured as a good old hierarchy, and simple <a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=fe42e7a887&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">breadcrumbs</a> can show users where any given page sits in the hierarchy.</p>
<p>
Sometimes, though, items belong equally well to many categories, creating a multihierarchy. You don't see good multihierarchical visualizations too often, but here's one I found on the Association for Computing Machinery website:</p>
<p>
<img align="none" height="228" src="http://gallery.mailchimp.com/538d934a891681a5d850bb4e5/images/acm_multihierarchy.1.png" style="width: 640px;height: 228px;border: none;font-size: 14px;font-weight: bold;line-height: 100%;outline: none;text-decoration: none;text-transform: capitalize;display: inline;margin-bottom: 10px;" width="640"></p>
<p>
This is their representation of an article I wrote in 1999 titled <a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=5088036bc1&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">User interface directions for the Web</a>.</p>
<p>
The article is about browsers, hypertext, user-centered design, and multimedia. These issues again belong to higher-level categories such as web interfaces, interaction paradigms, interaction design process, and document preparation.</p>
<p>
An elaborate tree structure like the one shown here is overkill for most tasks, but can be useful for complex information structures. (See the full-day course on <a href="http://nngroup.us4.list-manage.com/track/click?u=538d934a891681a5d850bb4e5&id=bb1e630e36&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">Structuring and Organizing Web-Based Information</a> for more.)</p>
</div>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Content \\ -->
</td>
</tr>
</table>
<!-- // End Template Body \\ -->
</td>
</tr>
<tr>
<td align="center" valign="top">
<!-- // Begin Template Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%" id="templateFooter" style="background-color: #FDFDFD;border-top: 0;">
<tr>
<td valign="top" class="footerContent">
<!-- // Begin Module: Standard Footer \\ -->
<table border="0" cellpadding="10" cellspacing="0" width="100%">
<tr>
<td valign="top" width="100%">
<div style="color: #707070;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;font-size: 12px;line-height: 125%;text-align: left;">
<em>Copyright © 2013 Nielsen Norman Group, All rights reserved.</em>
<br>
<!--
-->
You're receiving this newsletter because you subscribed at http://www.useit.com/alertbox/subscribe.html
<br>
<strong>Our mailing address is:</strong>
<br>
<div class="vcard"><span class="org fn">Nielsen Norman Group</span><div class="adr"><div class="street-address">48105 Warm Springs Blvd.</div><span class="locality">Fremont</span>, <span class="region">CA</span> <span class="postal-code">94539-7498, USA</span></div><br><a href="http://nngroup.us4.list-manage1.com/vcard?u=538d934a891681a5d850bb4e5&id=7f29a2b335" class="hcard-download">Add us to your address book</a></div>
<br>
<!--
-->
</div>
</td>
<td valign="top">
<div style="color: #707070;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;font-size: 12px;line-height: 125%;text-align: left;">
<!--
-->Is this email not displaying correctly?<br>
<a href="http://us4.campaign-archive2.com/?u=538d934a891681a5d850bb4e5&id=c134b554bb&e=f405d0f72c" target="_blank" style="color: #0033aa;font-weight: normal;text-decoration: underline;">View it in your browser</a>.<!--
-->
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="middle" id="utility" style="background-color: #FDFDFD;border-top: 1px solid #F5F5F5;">
<div style="color: #707070;font-family: Verdana,Calibri,Helvetica,Arial,sans-serif;font-size: 12px;line-height: 125%;text-align: center;">
<a href="http://nngroup.us4.list-manage.com/unsubscribe?u=538d934a891681a5d850bb4e5&id=7f29a2b335&e=f405d0f72c&c=c134b554bb" style="color: #0033aa;font-weight: normal;text-decoration: underline;">unsubscribe from this list</a> | <a href="http://nngroup.us4.list-manage.com/profile?u=538d934a891681a5d850bb4e5&id=7f29a2b335&e=f405d0f72c" style="color: #0033aa;font-weight: normal;text-decoration: underline;">update subscription preferences</a>
</div>
</td>
</tr>
</table>
<!-- // End Module: Standard Footer \\ -->
</td>
</tr>
</table>
<!-- // End Template Footer \\ -->
</td>
</tr>
</table>
<br>
</td>
</tr>
</table>
</center>
<img src="http://nngroup.us4.list-manage.com/track/open.php?u=538d934a891681a5d850bb4e5&id=c134b554bb&e=f405d0f72c" height="1" width="1"></body>
</html>
--_----------=_MCPart_34810089--