# Presentation: 507883

## Getting Back to BackAlternative behaviors for a Web browser’s Back button

- Saul Greenberg*University of Calgary**Canada*

**HFWEB**  *June 3, 1999*

- Andy Cockburn*University of Canterbury**New Zealand*

## Note

- These slides were presented at the HFWeb Conference.
- All concepts and systems were demonstrated live to show how they worked in practice.
- These demonstrations cannot be included here for technical reasons.

## Getting Back to BackAlternative behaviors for a Web browser’s Back button

**HFWEB**  *June 3, 1999*

- Outline
-  how revisitation is supported
-  why Back is good
-  various Back behaviors
-  current / future work

## Motivation

- People revisit pages with surprising frequency
- ~6 out of 10 pages visited seen before!
*	**	**	**	**Tauscher & Greenberg*
*	**	**	**	**Catledge  & Pitkow*

## How is Revisitation Supported?

- History lists

## How is Revisitation Supported?

- History lists

- Bookmarks /Favorites

## How is Revisitation Supported?

- History lists

- Bookmarks

- Site maps

## How is Revisitation Supported?

- History lists

- Bookmarks

- Site maps

## How is Revisitation Supported?

- History lists

- Bookmarks

- Site maps

- Searches

## How is Revisitation Supported?

- History lists

- Bookmarks

- Site maps

- Searches

- Back button

## The Lowly Back Button

- Pressing Back accounts for
- 30 - 37% of *all* navigational acts!
- Tauscher & Greenberg
- Catledge & Pitkow

## Why Back is Good

- Recency effect

## Why Back is Good

- Recency
- Visual economy

## Why Back is Good

- Recency
- Visual economy
- Recognition *vs*decision making

## Why Back is Good

- Recency
- Visual economy
- Recognition
- Robust use with naïve models
- A test with a biased sample... *Cockburn & Jones*

## Research Agenda

- Can ‘Back’ have “better” behavior?
- stack
- recency
- adding spokes
- hub and spoke
- temporal re-ordering

## Stack

- animals

- animals

*Push*
*animals*

*User navigates to ‘cats’*

- ungulate

- land

- mammals

- feline

- cat

## Stack

- animals

- mammals

- mammals
- animals

*User navigates to ‘cats’*

*Push*
*mammal*

- ungulate

- land

- feline

- cat

## Stack

- animals

- mammals

- land

- land mammals
- animals

*User navigates to ‘cats’*

*Push*
*land*

- ungulate

- feline

- cat

## Stack

- animals

- mammals

- land

- feline

- feline
- land mammals
- animals

*User navigates to ‘cats’*

*Push*
*feline*

- ungulate

- cat

## Stack

- animals

- mammals

- land

- feline

- cat

- cat
- feline
- land mammals
- animals

*User navigates to ‘cats’*

*Push*
*cat*

- ungulate

## Stack

- animals

- mammals

- land

- feline

- cat

*Move **pointer*

*User clicks back twice*

- cat
- feline
- land mammals
- animals

- ungulate

## Stack

- animals

- mammals

- land

- feline

- cat

*Move **pointer*

*User clicks back twice*

- cat
- feline
- land mammals
- animals

- ungulate

## Stack

- animals

- mammals

- land

- feline

- cat

- cat
- feline
- land mammals
- animals

*Pop*

*User selects ungulate. **cat & feline popped off stack*

- ungulate

## Stack

- animals

- mammals

- land

- feline

- cat

- ungulateland mammals
- animals

- ungulate

*..and ungulate pushed onto it*

*Push*
*ungulate*

## Stack

- automatically prunes branches
- popped pages cannot be returned to via Back
- model poorly communicated
- surprises
- but people can deal with it

## Recency: Adding spokes

- Add all non-Back pages seen to a recency-ordered history list
- Back:
-  just move a pointer through list

## Recency: Adding spokes

- ...

- land
- ...

*add ...*

- land

- feline

- cat

- cougar

- lion

- tiger

*** **land **** feline**** cat*

## Recency: Adding spokes

- ...

- feline
- land
- ...

*add ...*

- land

- feline

- cat

- cougar

- lion

- tiger

*** **land **** feline**** cat*

## Recency: Adding spokes

- ...

- cat
- feline
- land
- ...

*** **land **** feline**** cat*

*add ...*

- land

- feline

- cat

- cougar

- lion

- tiger

## Recency: Adding spokes

- ...

- cat
- feline
- land
- ...

- land

- feline

- cat

*cat****  feline **** cougar*

*move **pointer*

- cougar

- lion

- tiger

## Recency: Adding spokes

- ...

- cougar
- cat
- feline
- land
- ...

*add cougar*

- land

- feline

- cat

- cougar

*cat****  feline **** cougar*

- lion

- tiger

## Recency: Adding spokes

- ...

- cougar
- cat
- feline
- land
- ...

- land

- feline

- cat

- cougar

*move **pointer*

*cougar**** cat**** feline ****  lion*

- lion

- tiger

## Recency: Adding spokes

- ...

- cougar
- cat
- feline
- land
- ...

- land

- feline

- cat

- cougar

*move **pointer*

*cougar**** cat**** feline** ****  lion*

- lion

- tiger

## Recency: Adding spokes

- ...

- lion
- cougar
- cat
- feline
- land
- ...

*cougar**** cat**** feline ****  lion*

*add lion*

- land

- feline

- cat

- cougar

- lion

- tiger

## Recency: Adding spokes

- ...

- lion
- cougar
- cat
- feline
- land
- ...

- land

- feline

- cat

- cougar

- lion

- tiger

*move **pointer*

*lion**** **cougar**** cat**** **feline ****  tiger*

## Recency: Adding spokes

- ...

- lion
- cougar
- cat
- feline
- land
- ...

- land

- feline

- cat

- cougar

*move **pointer*

- lion

- tiger

*lion**** cougar**** cat**** feline ****  tiger*

## Recency: Adding spokes

- ...

- lion
- cougar
- cat
- feline
- land
- ...

- land

- feline

- cat

- cougar

*move **pointer*

- lion

- tiger

*lion**** cougar**** cat**** feline ****  tiger*

## Recency: Adding spokes

- ...

- tiger
- lion
- cougar
- cat
- feline
- land
- ...

*lion**** cougar**** cat**** feline ****  tiger*

*add tiger*

- land

- feline

- cat

- cougar

- lion

- tiger

## Recency: Adding spokes

- history list is complete
- all pages are reachable
- hub and spoke navigation much more work than stack
-              *vs.* 2*n *- 1

## Recency: Hub and Spoke

- As before, but
- add non-Back URLs *and *its parent hub

## Recency: Hub and Spoke

- ...

- cat
- feline
- land
- ...

*navigate**... **** land **** feline**** cat*

*add **in order*

- land

- feline

- cat

- tiger

- cougar

- lion

## Recency: Hub and Spoke

- ...

- cat
- feline
- land
- ...

- land

- feline

- cat

*move **pointer*

*cat **** feline **** cougar*

- cougar

- tiger

- lion

## Recency: Hub and Spoke

- ...

- cougar
- feline
- cat
- feline
- land
- ...

*cat **** feline **** cougar*

*add **feline**, cougar*

- land

- feline

- cat

- cougar

- tiger

- lion

## Recency: Hub and Spoke

- ...

- cougar
- feline
- cat
- land
- ...

*cat **** feline **** cougar*

*add feline, cougar*

- land

- feline

- cat

- cougar

- tiger

- lion

## Recency: Hub and Spoke

- ...

- cougar
- feline
- cat
- land
- ...

- land

- feline

- cat

- cougar

- tiger

- lion

*move **pointer*

*cougar **** feline **** lion*

## Recency: Hub and Spoke

- ...

- lion
- feline
- cougar
- feline
- cat
- land
- ...

*cougar **** feline **** lion*

*add feline, lion*

- land

- feline

- cat

- cougar

- lion

- tiger

## Recency: Hub and Spoke

- ...

- lion
- feline
- cougar
- cat
- land
- ...

*cougar **** feline **** lion*

*add feline, lion*

- land

- feline

- cat

- cougar

- lion

- tiger

## Recency: Hub and Spoke

- ...

- tiger
- feline
- lion
- cougar
- cat
- land
- ...

*lion **** feline **** tiger*

- land

- feline

- cat

- cougar

- lion

*move **pointer*

- tiger

## Recency: Hub and Spoke

- ...

- tiger
- feline
- lion
- cougar
- cat
- land
- ...

*lion **** feline **** tiger*

*add feline, tiger*

- land

- feline

- cat

- cougar

- lion

- tiger

## Recency: Hub and Spoke

- all pages reachable
- improved efficiency for hub & spoke browsing
*same as stack** *
- temporal order not maintained
*a**b**c**d**e**d**c**i**	*{*a,b,**e,d,**c,i*} *order seen*
- 						{*a,b,**d,e,**c,i*} *history list*

## Recency: Temporal Re-ordering

- Back + forward  ->  add to 2nd history list
- on new navigation
- add pages on 2nd history list
- add new page

## Recency: Temporal Re-ordering

- cat
- feline
- land
- mammals
- ...

- mammals

- land

- feline

- cat

*mammals **** land ****    *
*feline**** cat*

*add **in order*

## Recency: Temporal Re-ordering

- cat
- feline
- land
- mammals
- ...

- mammals

- land

- feline

- cat

*cat ** feline ** land **** ungulates*

- feline

- ungulate

*add*

## Recency: Temporal Re-ordering

- cat
- feline
- land
- mammals
- ...

- mammals

- land

- feline

- cat

*cat ** feline ** land **** ungulates*

- land
- feline

- ungulate

*add*

## Recency: Temporal Re-ordering

- land
- feline
- cat
- feline
- land
- mammals

- mammals

- land

- feline

- cat

- ungulate

*land **** ungulates*

*add*

- land
- feline

## Recency: Temporal Re-ordering

- ungulates
- land
- feline
- cat
- mammals

- mammals

- land

- feline

- cat

- ungulate

*land **** ungulates*

*add ungulates*

## Recency: Temporal Re-ordering

- ungulates
- land
- feline
- cat
- mammals

- mammals

- land

- feline

- cat

- ungulate

*recency*

*stack*

- ungulates
- land
- mammals

## Recency: Temporal Re-ordering

- all pages reachable
- hub and spoke efficiency same as stack
- retains ‘correct’ order of pages on list
- navigating further up the tree goes through intervening children

## Beyond Back

- Distant items?

## Beyond Back

- Can we integrate...
- Back
- stack
- recency
- History list
- Local search
- Bookmarks/Favorites
- readwear
- dogears

## A prototype system

## Summary

- Minor improvements to Back worth it
- No clear answer yet
- needs user testing
- Further design innovations possible
- integrated revisitation facility

## For further information...

- www.cpsc.ucalgary.ca/grouplab/papers/
- Getting Back to Back
- Beyond the Back button
- How People Revisit Web Pages
- Cockburn, Greenberg, Tauscher