If you think a bug might affect users in the 57 release, please set the correct tracking and status flags for Release Management.

Visual Design improvements for auto-correct suggestion bar

VERIFIED FIXED

Status

Firefox OS
Gaia::Keyboard
P1
normal
VERIFIED FIXED
4 years ago
4 years ago

People

(Reporter: Stephany Wilkes, Assigned: djf)

Tracking

unspecified
Other
Gonk (Firefox OS)
Dependency tree / graph
Bug Flags:
in-moztrap +

Firefox Tracking Flags

(b2g18 fixed)

Details

Attachments

(3 attachments)

(Reporter)

Description

4 years ago
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

4 years ago
We haven't yet had agreement for v1.1, so unsetting the milestone. Will leave blocking bug 797170.
Target Milestone: 1.1 QE2 → ---

Updated

4 years ago
Blocks: 873934
(Assignee)

Comment 2

4 years ago
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.
(Assignee)

Comment 3

4 years ago
Created attachment 757249 [details]
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
Assignee: pla → dflanagan
Attachment #757249 - Flags: review?(rlu)
(Assignee)

Comment 4

4 years ago
Created attachment 757250 [details]
screenshot of new visuals showing condensed font
(Assignee)

Comment 5

4 years ago
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
(Assignee)

Updated

4 years ago
Attachment #757250 - Flags: feedback?(pla)
Attachment #757250 - Flags: feedback?(fdjabri)
(Assignee)

Comment 6

4 years ago
Created attachment 757254 [details]
old visuals with font that is too small and not dynamically condensed
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!
Attachment #757249 - Flags: review?(rlu) → review+
(Reporter)

Comment 8

4 years ago
Adding Francis for IxD review and Patryk to triage for VxD review.
Flags: needinfo?(padamczyk)
Flags: needinfo?(fdjabri)
(Assignee)

Comment 9

4 years ago
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.
(Assignee)

Comment 10

4 years ago
I didn't see Stephany's comment above until after I landed the patch.  Let's file followup bugs for changes that are required.
Status: NEW → RESOLVED
Last Resolved: 4 years ago
Resolution: --- → FIXED

Comment 11

4 years ago
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
Status: RESOLVED → VERIFIED
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-.
Flags: in-moztrap?(cschmoeckel)

Comment 13

4 years ago
Added Keyboard Suite Test Case #8451 - [Keyboard] Words with many characters do not overlap in the Auto Correct suggestion bar
Flags: in-moztrap?(cschmoeckel) → in-moztrap+
(Assignee)

Comment 14

4 years ago
Uplifted to v1-train in bug 873934
status-b2g18: --- → fixed
Flags: needinfo?(padamczyk)
Depends on: 882080

Comment 15

4 years ago
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.
Attachment #757250 - Flags: feedback?(pla) → feedback-
(Reporter)

Updated

4 years ago
Flags: needinfo?(fdjabri)
Attachment #757250 - Flags: feedback?(fdjabri) → feedback-
You need to log in before you can comment on or make changes to this bug.