Bureaucrats, emailconfirmed
1,221
edits
m (→Results) |
|||
(10 intermediate revisions by 3 users not shown) | |||
Line 17: | Line 17: | ||
</div> | </div> | ||
==(current) Wireframes== | |||
[[File:TabWireframes-ProposedAlpha.png]] | |||
Most of the ideas combined:Better rendering, redesigned close button, favicon, smart image crop. | |||
The favicon was included though few people remembered logos in the [[#Study]]. This was done because the favicon is often a good color-clue which means it includes the typical colors of the page it represents (though not always, e.g. [www.mozilla.com mozilla]) | |||
If a page is well known (the most user did only know few pages from the set) it is more likely that they "learned" the favicon and can use it as efficient retrieval clue. | |||
==Ideas for Improvement== | ==Ideas for Improvement== | ||
===Make Closing | ===Make Closing Button Less Obtrusive=== | ||
(Discussion of the wireframes is in the same order: from top to bottom.) | |||
[[File:MozillaMobile-SmallerCloseMoveClose.png | right | Relocate Button Wireframe]] | [[File:MozillaMobile-SmallerCloseMoveClose.png | right | Relocate Button Wireframe]] | ||
'''Make Button Smaller''' | '''Make Button Smaller''' | ||
Line 25: | Line 34: | ||
**Relevant part of the image not entirely free. | **Relevant part of the image not entirely free. | ||
**The Button is harder to see. | **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 available target area could become too small because of that. | |||
'''Move button to the right edge''' | '''Move button to the right edge''' | ||
Line 38: | Line 52: | ||
[[File:MozillaMobile_pageCrop.png | right ]] | [[File:MozillaMobile_pageCrop.png | right ]] | ||
===Smarter Page Crop=== | ===Smarter Page Crop=== | ||
Concept: | Concept: Choose a better crop of the page as thumbnail. Actually 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 seemed 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 | *Pro: Choosing a more representative part of the page means better recognition and more differentiation between similar pages. | ||
*Contra: --- | *Contra: --- | ||
Line 69: | Line 83: | ||
===Preview pages while finger down, open when up (deferred)=== | ===Preview pages while finger down, open when up (deferred)=== | ||
*Pro: Very fast preview, since one could just go over many tabs in one move. Even very shortly displayed content is recognized ( | *Pro: Very fast preview, since one could just go over many tabs in one move. Even very shortly displayed content is recognized (see also: Processing Speed In Cerebral Cortext– Rolls Tovee – 94) It could be triggered with long-tap too: It would trigger a kind of preview overlay and moving to another tab while down whould trigger its preview to occur than. | ||
*Contra: Could get in the way of future attempts to make tab-resorting possible. (not applying to long-tab-triggering or a drag in one of the modes in vertical direction first) May confuse users (?) | *Contra: Could get in the way of future attempts to make tab-resorting possible. (not applying to long-tab-triggering or a drag in one of the modes in vertical direction first) May confuse users (?) | ||
Line 78: | Line 92: | ||
I think that this approach is not bad but it will start to perform good with greater item quantities. | I think that this approach is not bad but it will start to perform good with greater item quantities. | ||
==Study | |||
==Study== | |||
'''What do people recall about webpages''' | |||
Conducted by Bastian Bügler and Jan Dittrich | Conducted by Bastian Bügler and Jan Dittrich | ||
===Goal=== | ===Goal=== | ||
Line 89: | Line 102: | ||
Participants had do do simple tasks on several webpages. After a masking time of a couple of minutes filled with other tasks, they had to tell about the features that they link with the webpages. | Participants had do do simple tasks on several webpages. After a masking time of a couple of minutes filled with other tasks, they had to tell about the features that they link with the webpages. | ||
===Results=== | ===Results=== | ||
Colors are remembered the best (84 among 267) | |||
The content is on the 2nd rank with 62 mentions. Feelings (messy, clean...) is the 3rd with 44. | |||
[[File:JanDittrich_TabsStudy_RememberPages.jpg]] | |||
==Relevant Scientific Works== | |||
*[http://portal.acm.org/citation.cfm?id=1216295.1216319 What Do people recall about their Documents?; Brude,Scapin; 2007] | |||
*[http://www.informaworld.com/smpp/content~db=all~content=a777792744~tab=citations A comparison of words and icons as external memory aids in an information retrieval task; Lansdale, Simpson, Stroud; 1990] | |||
*[http://www.informaworld.com/smpp/content~content=a779153574&db=all A comparison of words and icons as external memory aids in an information retrieval task; Lansdale; 1991] | |||
[[Category:Design]] | [[Category:Design]] | ||
[[Category:Interaktion]] | [[Category:Interaktion]] | ||
[[Category:SS10]] | [[Category:SS10]] | ||
[[Category:Internet]] | [[Category:Internet]] | ||
[[Category:Mobile Development]] | [[Category:Mobile Development]] | ||
[[Category:Software]] | [[Category:Software]] | ||
[[Category:Design]] | [[Category:Design]] | ||
[[Category: | [[Category:Jan Dittrich]] | ||
[[Category: | [[Category:GUI]] | ||