Mobile/Archive/Virtual Keyboard

The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

Summary

We're not implementing our own soft keyboard - Fennec will use the native soft keyboard on all platforms.

This project is to make sure that our UI is usable and effective even when a softkeyboard is deployed and so is taking much of the screen real estate.

In practice, this will be the result of three design areas:

  1. in general, only bringing up the keyboard when it's actually wanted (not prematurely, if the browser is making on-screen suggestions first)
  2. making sure that our UI is not obscured by the on-screen keyboard
  3. altering the mechanism by which people select a search engine, so that it's only on screen when it has to be -- this is so that we can use the sliver of the awesomescreen that is visible (esp. in landscape) when the user is typing for awesome-suggestions.

Current Status

Next Steps

Related Bugs

Team

  • Project Lead:

Designs

Search Flow

Proposals


Starting Point (common)

Before the user has started to type, the screen shows the pre-typing awesomelist and the category selectors. Important: we shouldn't bring up the VKB immediately on coming to the awesomescreen; an additional tap on the entry-field should be required.

4815779686_8fe982d69f.jpg

Initiating Searching

Variant 1

Category bar gets replaced with horizontal-scrolling list of search engines. This shows up as soon as the user starts typing. Awesomebar results come in below.

4815161491_88441b6fd5.jpg

Issue: this doesn't deal with the issue of taking up a whole row with a VKB present in landscape.

Variant 2

4815163579_2ec1867244.jpg

Variant 3

In most of these variants, we try to minimize the size of the search trigger UI (i.e. a button). We can get a bit more room by having the placement differ between the landscape and portrait orientations to take advantage of the width or height, respectively.

4815789102_4be0e05208.jpg

more detail:

4816601312_07923e5959_z.jpg

Selecting Search Engine

Variant 1

Awesome list gets replaced with a list of search engines.

4815791294_a90139876e.jpg

Variant 2

4815170749_14a0da5424.jpg

Goals/Use Cases

Non Goals