[b2gInstaller] B2G Installer follow-up UI visual edits

RESOLVED FIXED

Status

P1
normal
RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: amylee, Assigned: daleharvey)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: ux-tracking, visual design)

Attachments

(4 attachments)

(Reporter)

Description

3 years ago
This is a follow-up bug to Bug 1195358 for visual edits.
(Reporter)

Comment 1

3 years ago
Created attachment 8656223 [details]
VsD_FlashingTool_Edits_v1.pdf

Hi, 

Attached is a 3-page pdf of visual edits. I also edited the CSS for layout of the main screen (will attach css file). Adjustments were made to fonts, positing, sizing elements, etc. Anything that I couldn't fix is outlined in the PDF. 

Also 2 things to note for UX

1. In step 2 (Select), the user is allowed to select any file for upload. Should this be limited to compatible files? What happens when they try to flash with an incompatible file? Jacqueline to confirm.

2. If I select a file using the uploader and then upload another file, it should replace the previous file and not add another radio button option. 

Let me know if you have any questions. Thanks!
Flags: needinfo?(jsavory)
(Reporter)

Comment 2

3 years ago
Created attachment 8656224 [details]
Firefox_OS_Installer.css

Edited CSS
Blocks: 1166276
No longer blocks: 1195358
Depends on: 1195358
1. If we have a list of files that are compatible it would be helpful to restrict the ones that aren't, otherwise we would need to display an error to the users that this file will not work. I can provide the error screen if it is necessary. 

2. I agree, I was under the impression that the user would use a single file to flash onto their device and I think it confuses the UI to support more than one.
Flags: needinfo?(jsavory)
(Reporter)

Comment 4

3 years ago
Created attachment 8658297 [details]
Firefox_Installer_Title.png

Hi Dale, 

Can you please replace the H1 header (Firefox OS Installer) with the attached png? Thanks!
Flags: needinfo?(dale)
(In reply to Jacqueline Savory [:jsavory] UX from comment #3)
> 1. If we have a list of files that are compatible it would be helpful to
> restrict the ones that aren't, otherwise we would need to display an error
> to the users that this file will not work. I can provide the error screen if
> it is necessary. 

The list of builds that we are exposing to the user is the set we find that indeed compatible with the plugged in device.
Builds are coming with a devices.json that documents compatibility, so it should be safe from this point.

We might still benefit from an error screen UX for the case of the user picking up a local file: we will also check the compatibility with the plugged in device, but technically this will happen after we opened the blobfree distribution ZIP.

> 
> 2. I agree, I was under the impression that the user would use a single file
> to flash onto their device and I think it confuses the UI to support more
> than one.

No, we really do want and need to expose several compatible builds and allow local loading. Maybe we could make the separation cleaner:
 - have a dropdown list for picking up an hosted compatible build
 - just add a radio button for picking up a local build and maybe hiding the dropdown?
(Assignee)

Updated

3 years ago
Assignee: nobody → dale
Flags: needinfo?(dale)
(Assignee)

Comment 6

3 years ago
Created attachment 8666476 [details] [review]
https://github.com/mozilla-b2g/b2g-installer/pull/12

Pretty much all aside from the native form elements
Attachment #8666476 - Flags: review?(lissyx+mozillians)
Attachment #8666476 - Flags: review?(lissyx+mozillians) → review+
https://github.com/mozilla-b2g/b2g-installer/commit/fcda949cca9a5152ecd6f2ef4d90101a1818f654
Status: NEW → RESOLVED
Last Resolved: 3 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.