873223 - Visual Design improvements for auto-correct suggestion bar

Status: VERIFIED FIXED

(Firefox OS Graveyard :: Gaia::Keyboard, defect, P1)

Description

[Stephany Wilkes]

This bug covers several VxD improvements that are must-fix for 1.1. These were covered previously in an email thread with David Flanagan, Peter La and Francis Djabri. 

Peter, since we want to follow VxD's/your recommendations on all of the below, I'm assigning this bug to you and noting the suggestions and ideas just for reference. When VxD is complete, this bug can be assigned to David. 

Suggestions for improvement are:

1) Make the auto-recommendations the same height as the normal keyboard buttons (6mm) and remove the separator between the auto-correct suggestions and the keyboard to generate more space. 

2) Make recommendations cover the full width of the screen. Since only a maximum of three recommendations is shown at a time, these should be as wide as possible. (Note to David that the email thread noted we'd standardize on three items.)

3) Increase the font size and contrast: current size is very small and blurry. Recommend increasing the font size and increasing the contrast between the font and the background image (new text color). This came from using the auto-correct feature in bright conditions, and seeing that it is impossible to read. 

4) Remove the separator (at the bottom) to bring the suggestions closer to the keyboard. (I think this may already be done in the latest design round; disregard if so). 

5) Break entries up: we don't need to have boxes around the words, but some form of separator, even a 1 pixel border, between the entries would help to break the entries up.

Comment 1

[Alex Keybl [:akeybl]]

We haven't yet had agreement for v1.1, so unsetting the milestone. Will leave blocking bug 797170.

Comment 2

[David Flanagan [:djf]]

Most of these suggestions have already been implemented. But I'll use this bug for some fine tuning, and also for a patch to prevent long words from overlapping each other.

Comment 3

[David Flanagan [:djf]]

Attachment: link to patch on github

Rudy,

This patch makes various small visual changes to the word suggestions. The most important change, though, is in render.js where there is code to make the font narrower with a CSS transform in order to make long suggestions fit.

You can test with english words like Mississippi, internationalization and antidisestablishmentarianism

Comment 4

[David Flanagan [:djf]]

Attachment: screenshot of new visuals showing condensed font

Comment 5

[David Flanagan [:djf]]

Francis, Peter: I've attached a screenshot in case you're interested. I'm probably going to land this before you've even looked at it, but feel free to file followup bugs if you want tweaks

Comment 6

[David Flanagan [:djf]]

Attachment: old visuals with font that is too small and not dynamically condensed

Comment 7

[Rudy Lu [:rudyl] (inactive after 2015/7/3)]

Comment on attachment 757249 [details]
link to patch on github

Technically I could give an r+ here with some minor suggestions on the pull request.

However, IMHO, making the suggestion text looks squeezed/shrunk when it is too long, does not look that good visually.

Please feel free to land it once our visual designer think it is ok.
Thanks for the work, David!

Comment 8

[Stephany Wilkes]

Adding Francis for IxD review and Patryk to triage for VxD review.

Comment 9

[David Flanagan [:djf]]

Landed on master: https://github.com/mozilla-b2g/gaia/commit/417e5e24b7a617fdb01de10341c78b1214fdf5c8

We can tweak the visual design as needed in followup bugs. For now, though, this bug follows Android and prevents suggestions from overlapping.

Comment 10

[David Flanagan [:djf]]

I didn't see Stephany's comment above until after I landed the patch.  Let's file followup bugs for changes that are required.

Comment 11

[:CSchmoeckel]

All 3 Visual Design iprovements have been made to the Auto Corrct suggestion bar above the keyboard. The words in the suggestion bar are not much easier to read and use. 
Tested on b2g/nightly/mozilla-central-unagi/latest. 

Kernel Date: Dec 5
Gecko: http://hg.mozilla.org/mozilla-central/rev/3c6f2394995d
Gaia: d2ad0f1a5a6be8a2d6df721ba3c2b33e037c423b

Comment 12

[Tony Chung [:tchung]]

Please add a testcase for this bug to moztrap for 1.1 testsuite.  If yes, mark this in-moztrap+ when completed.  If not, mark this in-moztrap-.

Comment 13

[:CSchmoeckel]

Added Keyboard Suite Test Case #8451 - [Keyboard] Words with many characters do not overlap in the Auto Correct suggestion bar

Comment 14

[David Flanagan [:djf]]

Uplifted to v1-train in bug 873934

Comment 15

[Peter La]

Comment on attachment 757250 [details]
screenshot of new visuals showing condensed font

This comment is just to clear the feedback requestion on the condensed font screenshot.  As we already talked about, we're going with using a smaller font instead of condensing the font horizontally.