Confirmed users
187
edits
User:David Regev/Ubiquitous Firefox: Difference between revisions
Jump to navigation
Jump to search
m
Removed color for keyboard style
David Regev (talk | contribs) m (Restored new keyboard styling) |
David Regev (talk | contribs) m (Removed color for keyboard style) |
||
| Line 8: | Line 8: | ||
* [[#Step 1: Integrate Ubiquity|Step 1: Integrate Ubiquity]] | * [[#Step 1: Integrate Ubiquity|Step 1: Integrate Ubiquity]] | ||
** [[#Step 1a: Ubiquitize all commands|Step 1a: Ubiquitize all commands]] | ** [[#Step 1a: Ubiquitize all commands|Step 1a: Ubiquitize all commands]] | ||
** [[#Step 1b: Reuse the Alt key|Step 1b: Reuse the <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white) | ** [[#Step 1b: Reuse the Alt key|Step 1b: Reuse the <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code> key]] | ||
** [[#Step 1c: The Firefox Button|Step 1c: The Firefox Button]] | ** [[#Step 1c: The Firefox Button|Step 1c: The Firefox Button]] | ||
* [[#Step 2: Replace the Location Bar|Step 2: Replace the Location Bar]] | * [[#Step 2: Replace the Location Bar|Step 2: Replace the Location Bar]] | ||
| Line 49: | Line 49: | ||
''If and when this task will be needed, I am available to assist with this undertaking.'' | ''If and when this task will be needed, I am available to assist with this undertaking.'' | ||
=== Step 1b: Reuse the <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white) | === Step 1b: Reuse the <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code> key === | ||
The Ubiquity hotkey is currently <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white) | The Ubiquity hotkey is currently <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Ctrl</code>+<code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Space</code>. This has two problems: it’s a bit complex, and the dialogue it invokes is [http://en.wikipedia.org/wiki/Mode_(computer_interface) modal]. Now that we’ve replaced the menu bar with Ubiquity commands, the <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code> key is free for invoking Ubiquity instead. Not only is this a simpler hotkey, thus solving the complexity problem, but it is also easy to hold while typing (or mousing). It can be used [http://en.wikipedia.org/wiki/Mode_(computer_interface)#Quasimodes quasimodally], where the Ubiquity dialogue appears only as long as <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code> is held, thus solving the modality problem. A modal version of the dialogue can be kept and assigned <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code>, <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code> as a hotkey. | ||
=== Step 1c: The Firefox Button === | === Step 1c: The Firefox Button === | ||
| Line 62: | Line 62: | ||
* This is the ''only'' real button in the entire interface. Thus, if a new user is trying to figure out what to do, it will be relatively difficult to miss the one and only button displayed—the unusually large one with the Firefox icon in the corner. Eliminating the choice between this button and any other is a big win due to [http://en.wikipedia.org/wiki/Hick's_Law Hick’s Law], reducing the time required to acquire the button and improving its discoverability. | * This is the ''only'' real button in the entire interface. Thus, if a new user is trying to figure out what to do, it will be relatively difficult to miss the one and only button displayed—the unusually large one with the Firefox icon in the corner. Eliminating the choice between this button and any other is a big win due to [http://en.wikipedia.org/wiki/Hick's_Law Hick’s Law], reducing the time required to acquire the button and improving its discoverability. | ||
* In order to make it more obvious that the logo is clickable, the button will light up and pulse whenever the mouse cursor is moving in its direction. Users will, thus, quickly discover that the button wants them to come closer. | * In order to make it more obvious that the logo is clickable, the button will light up and pulse whenever the mouse cursor is moving in its direction. Users will, thus, quickly discover that the button wants them to come closer. | ||
* '''Ubiquity hints.''' Whenever the cursor is hovering over ''anything'' that will invoke some sort of command, a transient transparent Ubiquity dialogue (indicated by the dotted outline in the above mockup) will appear. It will show the command that would be run upon clicking the object. In the above example, the cursor is hovering over the Firefox button itself, so no command hint is given. Instead, crucial information is given in order to teach the user about invoking Ubiquity in the future. Generally, clicking on the Firefox button (or holding <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white) | * '''Ubiquity hints.''' Whenever the cursor is hovering over ''anything'' that will invoke some sort of command, a transient transparent Ubiquity dialogue (indicated by the dotted outline in the above mockup) will appear. It will show the command that would be run upon clicking the object. In the above example, the cursor is hovering over the Firefox button itself, so no command hint is given. Instead, crucial information is given in order to teach the user about invoking Ubiquity in the future. Generally, clicking on the Firefox button (or holding <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code>) will transform a Ubiquity hint into a standard Ubiquity dialogue. | ||
Note how Ubiquity hints build upon earlier steps: these hints can be shown for every command because all commands have been Ubiquitized. This work will allow us to extend the Firefox interface later and add elements while retaining the Ubiquity interaction model and its richness. | Note how Ubiquity hints build upon earlier steps: these hints can be shown for every command because all commands have been Ubiquitized. This work will allow us to extend the Firefox interface later and add elements while retaining the Ubiquity interaction model and its richness. | ||
| Line 183: | Line 183: | ||
=== Step 4b: Revamp Find === | === Step 4b: Revamp Find === | ||
In order to keep Firefox’s interface [http://web.archive.org/20081225095154/rchi.raskincenter.org/index.php?title=Monotony_in_The_Humane_Interface monotonous], Ubiquity should be the sole way of executing commands via the keyboard. Keyboard shortcuts, therefore, should be eliminated. A well-tuned instance of Ubiquity can replace these shortcuts in an efficient—and more humane—manner. The <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white) | In order to keep Firefox’s interface [http://web.archive.org/20081225095154/rchi.raskincenter.org/index.php?title=Monotony_in_The_Humane_Interface monotonous], Ubiquity should be the sole way of executing commands via the keyboard. Keyboard shortcuts, therefore, should be eliminated. A well-tuned instance of Ubiquity can replace these shortcuts in an efficient—and more humane—manner. The <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Ctrl</code> key is now free for another function: quasimodal Find (similar to [http://web.archive.org/20080224100153/rchi.raskincenter.org/index.php?title=Text_Specification#LEAP_AND_CREEP LEAP]. (It may prove better, however, to switch the usage of the <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Alt</code> and <code style="display: inline-block; padding: .2em .3em; font: .85em/1 sans-serif; border-radius: .3em; background: -moz-linear-gradient(top, #D2D2D2, white); box-shadow: inset 0 0 1px white, inset 0 0 .4em #C8C8C8, 0 .1em 0 #828282, 0 .11em 0 rgba(0,0,0,.4), 0 .1em .11em rgba(0,0,0,.9);">Ctrl</code> keys.) | ||
Showing a tab’s entire history inline provides a nice benefit to how Find works: once Find has finished searching through the current page, it can move down to the next one. Thus, it will be easy to find anything within the tab’s entire history. Moreover, text should be indexed when a tab is closed (in addition to thumbnails), allowing closed tabs to be searched and restored in the future. | Showing a tab’s entire history inline provides a nice benefit to how Find works: once Find has finished searching through the current page, it can move down to the next one. Thus, it will be easy to find anything within the tab’s entire history. Moreover, text should be indexed when a tab is closed (in addition to thumbnails), allowing closed tabs to be searched and restored in the future. | ||