Mobile/Archive/SmartTabs

Summary

Proposed design

There is a more detailed documentation of the Project at the Bauhaus University's wiki.

Visual representations of webpages are easier to recognize than text alone. Nevertheless there are some issues that could be solved.

Pages are hard to distinguish if...

• When having different Pages from the same domain
• Pages have a design which is just roughly similar (use white background in the main area is pretty common...)

Ideas for Improvement

Make Closing Botton Less Obstrusive

Make Button Smaller

• Pro: Less space is taken from the image. Button is close to screen edge
• Contra:
  • Relevant part of the image not entirely free.
  • The Button is harder to see.

Move the button down

• Pro: Frees the recognition-relevant upper-left part entirely.
• Contra:
  • The target area has probably to move down a bit too; needs testing on a touchscreen-device.
  • One Problem that could occur is that people will probably be more likely to tap below an item (they still see it) than to tap above it (it covers even more than usually). The availiable target area could become too small because of that.

Move button to the right edge

• Pro: The more relevant left edge is free.
• Contra:
  • The left side is closer to the edge which means the area can be touched easier since one does not care about tapping a close object on the left side.
  • When dragging the Bar in, one sees just the Buttons at first.

Smarter Page Crop

Concept: Choose a better crop of the page as thumbnail. Acually it already works pretty well, since mainly the upper left corner is present due to the small screen of the mobile devices. In my tests a 480px height crop seemd to be decent (the height is more important, since distinctive visual features are often located on the left side)

• Pro: Choosing a more representative part of the page means better recognition and more differenciation between similar pages.

• Contra: ---

Adding Favicon

• Pro: Visual grouping of same Domain-Pages. Recognize logos of commonly used webpages.

• Contra: Could be mistaken for a button if not carefully integrated.

Note:It is likely that the favicon itself is hard to recall for non-frequently used pages. But it often gives color clues for the page. (Further research is needed)

Better rendering quality

• Pro: A better rendering of the tabs will improve the recognition.

• Contra: Performance issues. Could possibly be solved by rendering low-Fi first and when e.g. the user reads the page, the hi-fi Tabs are renderend.

Retrive closed Tabs easier

Provide a "recently closed" button at the "new tab"-view for retrieving closed tabs.

• Pro:If a tab is accidentally closed, it can be retrieved without typing effort
• Contra:takes screen real estate.

Current Status

Design finished but not yet implemented

Relevant Scientific Works

• What Do people recall about their Documents?; Brude,Scapin; 2007
• A comparison of words and icons as external memory aids in an information retrieval task; Lansdale, Simpson, Stroud; 1990
• A comparison of words and icons as external memory aids in an information retrieval task; Lansdale; 1991

Goals/Use Cases

• Make the visual tabs representing the pages better.

Non Goals

• Change the general model of interaction with tabs
• Use signficant more screen real estate.