{"id":146,"date":"2011-03-15T05:56:00","date_gmt":"2011-03-15T05:56:00","guid":{"rendered":"https:\/\/pim.famnit.upr.si\/wp\/?p=146"},"modified":"2021-11-17T12:32:13","modified_gmt":"2021-11-17T12:32:13","slug":"evolution-and-design-of-scrollbars","status":"publish","type":"post","link":"https:\/\/pim.famnit.upr.si\/wp\/?p=146","title":{"rendered":"Evolution and design of scrollbars"},"content":{"rendered":"

Scrollbars are interesting interaction widgets. They seam so obvious, we don’t even notice them. But how did they develop? Watching the new<\/strong> OS X Lion<\/a> and Ubuntu Unity<\/a> changes in scrollbars, I remembered<\/strong> two interesting articles about how scrollbars moved from left to right side of the screen <\/strong>and why is the right side not such a good idea ("Hands across the screen<\/a>" and "Sinister Scrollbar in the Xerox Star Xplained<\/a>"). The idea is that eyes have to move from the text one is reading on the left side of a screen, to the scrollbar on the right and back, which requires a lot of unnecessary eye movement.<\/strong><\/p>\n

Let’s take a quick look at the evolution of scrollbars:<\/p>\n

1. Scrollbars on the right side<\/strong> in SmallTalk<\/a> and InterList<\/a> environments (early history of these systems<\/a>):<\/h3>\n\n\n\n
\n

<\/p>\n<\/td>\n

\n

1980  Smalltalk<\/font><\/p>\n

From "Hands across the screen": "The early scrollbars in the Smalltalk and Interlisp environments (the
\ndirect ancestors of our current WIMP interface), had user-configurable
\nscrollbars, which could be made to appear either side. But the default
\nand norm was on the left. In fact, the Interlisp scrollbar had a quite
\ndifferent interaction from current ones, with velocity-based scrolling,
\nand the curious behavior whereby the scrollbars appeared as you moved
\noff the left of a window."<\/em><\/font><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/strong><\/p>\n

2. <\/strong>Moving<\/strong> scrollbars to the right in Xerox Star <\/strong><\/h3>\n\n\n\n
<\/td>\n\n

1981
<\/font><\/p>\n

From "Hands across the screen": "The movement of the scrollbar to the right was not an accident, but a
\ndeliberate design decision. The reasoning was that precisely because
\nthe left-hand side of the screen is important for reading text it is
\nalso important to keep it clear of unnecessary visual clutter. Hence
\nthe scrollbar, that had been on the left in the Smalltalk and InterLisp
\nenvironments, was moved to the right-hand side"
\n<\/em><\/font><\/p>\n

"Looking at the Star scrollbar (left and right), it has three types of control:
\n<\/em><\/font><\/p>\n

    \n
  1. the arrows which move the text a line at a time
    \n <\/em><\/font><\/li>\n
  2. the +\/- buttons which move the text a page at a time
    \n <\/em><\/font><\/li>\n
  3. the scroll area with its diamond shaped ‘handle’<\/em>
    <\/font><\/li>\n<\/ol>\n

    The arrow and page up\/down buttons are similar to current scrollbar
    \nbuttons and the scrollbar ‘handle’ similarly allowed one to scroll to
    \nany point in the document. The major difference however between this
    \nand current scrollbars is that both kinds of large movement (2 and 3 above) moved to page boundaries. In each case the top of a page is aligned
    \nwith the top of the screen. Only the
    \n line up\/down buttons move the text to other, non-page-boundary offsets.
    \n This is also not a problem as the small movements make reorientation
    \neasy and for repeated line-by-line movement it is possible to position
    \nthe mouse and then watch the screen as the mouse is clicked or held down
    \n for continuous scrolling." <\/em><\/font><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    3. <\/strong>Remaining on the right …<\/strong><\/h3>\n<\/p>\n

    … in Macintosh OSes, Sun Open Look, RISC OS, OS2, Windows, BeOS, KDE, Gnome … and also turned arrows in opposite direction<\/strong>. The size of a drag area also started to vary in size<\/strong> depending how much content there is in the window.<\/p>\n

    From "Hands across the screen": "As the Star evolved into the current Macintosh, Windows and X
    \nenvironments, the design changed to the current dragging form where the
    \n‘handle’ is grasped by the mouse and moved to an arbitrary point in the
    \ndocument. The design changed, but the rationale for placement was not
    \nrevisited leading to the current, unsatisfactory situation.
    \n<\/em><\/p>\n


    \nAnother bit of design rationale that got lost in this transition was the
    \n direction of the arrows on the scrollbar. On most current scrollbars
    \nthe line-by-line arrows point outwards whereas the Star arrows pointed
    \ninwards. In both cases pressing the upper arrow makes the window move
    \nupwards in the text (and hence also the scrollbar handle upwards).
    \nRecall, there is no obvious ‘right’ answer for this. If the arrows
    \npoint outwards they match the movement of the handle, but the text moves
    \n in the opposite direction (as you move up the document the text moves
    \ndown). If instead, the arrows point inwards they match the movement of
    \nthe text on the screen, but oppose the movement of the handle (the
    \ndownwards arrow moves you upwards in the document)."<\/em><\/p>\n

    3.1 Macintosh OSes<\/strong><\/h4>\n

    Notice omitting the top and bottom pages<\/strong> from Lisa to OS 1 and moving  top arrow to the bottom<\/strong> from System8 to System 9. The latter change makes sense since it brings the arrow buttons close, so one could move up and down the text without moving a mouse up and down the screen. The grouping of arrows was used before in AmigaOS2, BeOS, Next and SunOS terminal (until v4 I think). In System 7, the scrollbar was omitted if not needed<\/strong> to get some more screen estate and not to confuse users with a nonfunctional scrollbar.<\/p>\n\n\n\n\n\n
    1983
    <\/font><\/td>\n    		 1984
    <\/font><\/td>\n    		 1988
    <\/font><\/td>\n    		 1991 & 1997
    <\/font><\/td>\n    		 1999
    <\/font><\/td>\n    		 2001
    <\/font><\/td>\n<\/tr>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n<\/tr>\n
    Apple Lisa
    <\/font><\/td>\n    		 Mac OS 1
    <\/font><\/td>\n    		 System 6
    <\/font><\/td>\n    		 System 7 & 8
    <\/font><\/td>\n    		 System 9
    <\/font><\/td>\n    		 OS X
    <\/font><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    3.2 Microsoft Windows.<\/strong><\/h4>\n

    Not much has changed here. The scrollbar was omitted if not needed in Windows 95 (I think, but not quite sure).<\/p>\n\n\n\n\n\n
    1985
    <\/font><\/td>\n    		 1987
    <\/font><\/td>\n    		 1990
    <\/font><\/td>\n    		 1995 & 2000
    <\/font><\/td>\n    		 2001
    <\/font><\/td>\n    		 2007-2011
    <\/font><\/td>\n<\/tr>\n

    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n    		 <\/font><\/td>\n<\/p>\n

    <\/font> <\/td>\n<\/tr>\n

    Windows 1
    <\/font><\/td>\n    		 Windows 2
    <\/font><\/td>\n    		 Windows 3.0 3.1
    <\/font><\/td>\n    		 Windows 95
    Windows 98
    Windows 2000
    <\/font><\/td>\n    		 XP & Me
    <\/font><\/td>\n    		 Vista & 7
    <\/font><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    3.3 Other OSes<\/strong><\/h4>\n

    Open Look had arrows integrated with the slider<\/strong> (something similar was rediscovered years later<\/a>). The scrollbar could be moved to the left. Open Look and Rics OS had a middle line resembling analogue sliding buttons with Open Look also showing the darker grey line for revealing the amount of context. BeOS had both arrows on the top and on the bottom<\/strong> (similar to the below SunOS Terminal – see point 4.) while Haiku (a version of BeOS) omitted them and used "most standard version". Amiga gadtool scrollbar resembled the Next’s scrollbar but was positioned on the right. Risc OS used mouse buttons to manipulate the thumb movement (similar to Athena scrollbar).
    <\/font><\/p>\n\n\n\n\n\n
    1987
    <\/font><\/td>\n    		 1988
    <\/font><\/td>\n    		 1987
    <\/font><\/td>\n    		 1991
    <\/font><\/td>\n    		 2004 – today
    <\/font><\/td>\n    		 1988 – 2002
    <\/font><\/td>\n    		 1988
    <\/font><\/td>\n    		 1989 – today
    <\/font><\/td>\n<\/tr>\n

    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n    		 Right side
    <\/font> <\/td>\n    		 Left Side

    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n<\/tr>\n
    Acorn – very similar to Apple OSes<\/font>
    <\/font><\/td>\n    		GEM OS for Atari ST<\/font>
    <\/font><\/td>\n    		 AmigaOS Workbench 1
    <\/font><\/td>\n    		 AmigaOS 2 with gadtool widget set
    <\/font><\/td>\n    		\n

    AmigaOS 4 (the first prerelease)
    <\/font><\/p>\n<\/td>\n

    		\n

    Sun
    Open Look widget set (OpenWindows DE) used in SunOS (untill 1992) and Solaris
    <\/font><\/p>\n

    Later Sun dropped it for CDE & Gnome in 2002 *
    <\/font><\/p>\n<\/td>\n

    		\n

    Risc OS<\/font><\/p>\n

    Manipulation with mouse buttons clicks
    (like Athena)
    <\/font><\/p>\n<\/td>\n

    		 Motif Widgets Motif WM<\/p>\n

    as a Open Look competitor<\/p>\n

    By OSF copied MS Windows and OS2 Presentation mngr
    <\/font><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n\n\n\n\n\n
    1988
    <\/font><\/td>\n    		 1992
    <\/font><\/td>\n    		 1994
    <\/font><\/td>\n    		 1996
    <\/font><\/td>\n    		 1993-Today
    <\/font><\/td>\n    		 1998
    <\/font><\/td>\n    		Today
    <\/font><\/td>\n<\/tr>\n
    <\/font>
    <\/font><\/td>\n    		 <\/font>
    <\/font><\/td>\n    		 <\/font>
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n<\/tr>\n
    OS2 1.1
    Presentation
    Manager UI
    <\/font><\/td>\n    		 OS2 2
    <\/font><\/td>\n    		 OS2 3
    <\/font><\/td>\n    		 OS2 4
    <\/font><\/td>\n    		 Unix CDE<\/p>\n

    based on Motif
    <\/font><\/td>\n

    		 BeOS
    <\/font><\/td>\n    		\n

    Haiku<\/font><\/p>\n

    <\/font>
    \n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    4. <\/strong>On the left side<\/strong><\/h3>\n

    It is interesting that NextStep<\/strong> was bought by Apple and they did not
    \nthink that the left side was the right one. Plain Emacs <\/strong>and Ghostview<\/strong>
    \nhave scrollbars on the left (if I’m correct the latter uses
    \nAthena Widgets). So do some terminal emulators<\/strong> such us xterm<\/strong>, rxvt<\/strong>, etc (which use Athena widgets or some of Xaw’s forks). Some applications allow to move a scrollbar to the right side as well. But it depends on the application and widget
    \nlibrary it uses. AFAIK Gnome (GTK+ widget set) and KDE (Qt widget set) don’t have an option for the scrollbar side. Neither do Windows and OS X. Although web text forms can have a left sided scrollbar. PALM has an add<\/a>on to do this. Other than that … <\/p>\n\n\n\n\n\n
    1988
    <\/font><\/td>\n    		 1988 – 2002
    <\/font><\/td>\n    		 1989 – 2006
    <\/font><\/td>\n    		 Today
    <\/font><\/td>\n    		1983-<\/font>Today
    <\/font><\/td>\n    		 1983-Today
    <\/font><\/td>\n<\/tr>\n

    <\/font><\/td>\n    		 Right side
    <\/font> <\/td>\n    		 Left Side

    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n<\/tr>\n
    \n

    Terminal of
    SunOS 3.5<\/font><\/p>\n<\/td>\n

    		\n

    Sun
    Open Look widget set
    (OpenWindows DE)<\/font><\/p>\n

    Later Sun dropped it
    for CDE & Gnome in
    2002
    \n<\/font>\n<\/td>\n

    		 NeXT NextStep &
    Sun Openstep &
    \nLubu Open Magic 2006
    <\/font><\/td>\n    		 Emacs
    <\/font><\/td>\n    		 Ghostview
    <\/font><\/td>\n    		\n

    rxvt in CTWM<\/font><\/p>\n

    1983 – the 1st
    release of Athena
    widget set (with
    no arrows)<\/font><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    5. <\/strong>Potable devices and scrollbars on the right side<\/strong><\/h3>\n

    On portable and touch screen devices, the scrollbar on the right side makes sense as otherwise one would cover the screen while scrolling the text<\/strong>. They have a minimalistic touch where Arrows are<\/strong> mostly omitted<\/strong> – mostly because of the precious screen estate and other means of navigation (keypad buttons) where scrollbar is used for informing the position. iOS scrollbars<\/strong> come visible when we move the pointer over the right edge of the window. This is so called overlay scrollbar<\/strong>.<\/p>\n\n\n\n\n\n

    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n    		 <\/font><\/td>\n<\/tr>\n

    <\/font><\/td>\n
    <\/font><\/td>\n
    <\/font><\/td>\n    		 <\/font><\/td>\n<\/tr>\n
    Android v1<\/font><\/td>\n Symbian 40
    <\/font><\/td>\n    		 Symbian 60
    <\/font><\/td>\n    		 iOS<\/font><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    <\/strong> <\/p>\n

    <\/strong>
    <\/h3>\n

    6.<\/strong> Overlay scrollbars …<\/strong><\/h3>\n<\/p>\n

    … are the next thing on the desktop as well. OS X Lion will have them and Ubuntu Unity as well. One can argue whether this is good or not. For portable devices it makes sense since the screen is freed by a few pixels on the right side. But for desktop computers and laptops with wide screens, the gain is not obvious. Although, in a full screen mode we would have  less distracting elements.<\/p>\n\n\n\n\n\n
    2011
    <\/font><\/td>\n    		 2011
    <\/font><\/td>\n<\/tr>\n

    <\/font><\/td>\n
    <\/font><\/td>\n<\/tr>\n
    OS X Lion<\/a>
    <\/font><\/td>\n    		 Ubuntu Unity<\/a>
    <\/font><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    Canonical has made a video about their overly scrollbar implementation<\/a>.<\/p>\n


    <\/strong><\/p>\n

    Some DESIGN decisions and manipulations EXPLAINED<\/strong><\/h3>\n

    I already explained some of the design principles. Here are more detailed explanations.<\/p>\n\n\n\n
    \n

    OPEN LOOK scrollbars<\/a><\/strong> (left) use the visual
    \nmetaphor of an elevator on a
    \ncable, but functionally they are similar to the
    \nAthena Scrollbar widget. The drag area (the thumb in an Athena
    \nScrollbar widget) doesn’t change size; instead, as shown in he below
    \npicture, there is a separate area that indicates the proportion of the
    \ndata that is currently being displayed.<\/font><\/p>\n


    <\/font><\/p>\n

    Also similarly to Athena scrollbar, Risc OS<\/a><\/strong> allowed manipulating scrollbar arrows with pressing mouse buttons. For instance, a left-click on the down arrow might cause
    \nthe window to scroll down, while a right click in the same place would
    \nscroll up. <\/font> <\/p>\n<\/td>\n

    		\n


    <\/a><\/strong> <\/font><\/p>\n

    An Athena scrollbar<\/a><\/strong> looks and operates differently than a scrollbar provided by a Motif or Macintosh. While Motif and Mac scrollbars have separate parts to invoke different types of scrolling, the Athena scrollbar moves text according to which mouse pointer button you use and how you use it.<\/font> <\/p>\n\n\n\n\n\n\n\n
    To move text in this direction:<\/font><\/td>\nPlace pointer on scrollbar and:<\/font><\/td>\nNotes <\/font><\/td>\n<\/tr>\n
    Either up or down<\/font><\/td>\n Hold down second pointer button and drag thumb.<\/font><\/td>\n Text follows pointer movement.<\/font><\/td>\n<\/tr>\n
    Down<\/font><\/td>\n Click first (left) pointer button.<\/font><\/td>\n Scrolls towards latest saved text (towards bottom of window). <\/font><\/td>\n<\/tr>\n
    Up<\/font><\/td>\n Click third (right) pointer button, <\/font><\/td>\n Scrolls towards earliest saved text (towards top of window). <\/font><\/td>\n<\/tr>\n
    Either up or down <\/font><\/td>\n Click second (middle) pointer button<\/font><\/td>\n Scrolls to a position in saved text that corresponds to the pointer’s position in scroll region. <\/font><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    L<\/font>ike the Athena Scrollbar widget, the Motif scrollbar<\/a><\/strong> has a \u201cthumb\u201d or
    \nslider that can be dragged up and down to scroll the associated
    \nwindow. You can also click above or below the thumb to move it a
    \nscreenful at a time. Unlike the Athena widget, it also displays arrows at
    \neither end that can be used to scroll line by line. The
    \nassociated window scrolls in the indicated direction as long as
    \nthe pointer button is held down in one of the arrows.  <\/font><\/p>\n

    <\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/p>\n

    I’d really like to know the background of other scrollbars design<\/strong> of the above mentioned systems. If anyone knows something about this issue I’d be glad to include it in this post.  I might have also missed some important changes or made mistakes – so please let me know if you see, spot or know something more about scrollbars.<\/p>\n

    <\/p>\n

    ——————————– <\/p>\n

    Videos linked to in this post:<\/p>\n

    Canonical’s overly scrollbars<\/p>\n

    \n