1225478 - Propose redesign

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Bugzilla Lite, defect)

Comment 1

[Dale Harvey (:daleharvey)]

The current design of bzlite is causing problems

https://bugzilla.mozilla.org/show_bug.cgi?id=1199655 (confusing behaviour when pressing "back")
https://bugzilla.mozilla.org/show_bug.cgi?id=1177934 (confusing spatial model close vs back)

I also have a few annoyances I havent filed, certain links are only available from a single place, if I need to search for a bug or create one, I need to go back to the dashboard, to do that I usually have to click "close" or "back" (its different in different contexts). The modal behaviour of the UI causes problems managing both login state and its ability to work offline.

The reason for the current design is strict consistency with the rest of Firefox OS. 

I am proposing deviating form consistency with Firefox OS and not treating Bugzilla Lite as a core app, but a 3rd party application designed to work on firefox os / android / iphone and desktop browsers. Will follow up with concrete proposals.

Comment 2

[Dale Harvey (:daleharvey)]

Attachment: Screen Shot 2015-11-17 at 14.32.47.png

So this is the main change I want to make, I would like a permanent menu available througout the ui. 

It will be a single and consistent action from anywhere to get to the primary functions. Users will always be able to access bug filing functionality while offline and unlogged in. It still reasonably consistent with Firefox OS (the Clock). There is far less wasted space (the previous header provided little value).

The primary issue with this layout is on the dashboard and bug page there will be dual tab bars, the permanent one across the bottom and the context specific one across the top. I think 1. Even with that downside it is worth it for the benefits. 2. There may be alternative solutions that give us the best of both worlds.

Jacqueline what do you think?

Comment 3

[Dale Harvey (:daleharvey)]

So another case I keep running into today, I am searching for something, click a bug and click back, it goes back to the dashboard page when I want to go back to search. If we made it go back to search it would be inconsistent and it would mean even more work to go to say, the profile page.

Comment 4

[Dale Harvey (:daleharvey)]

Another thought I had, there are a fairly large list of bugs we would want a list of, we already cut off 'flagged by me' in the list, we likely want to add bookmarks in the future. It is also fairly annoying to have to constantly switch between these different views which may have 1 or 2 things in them to see updates.

I think one solution could be that the dashboard is one list of bugs, ordered by importantness (assigned at the top, then flagged me, etc), there is a list of filters at the top and you can turn each of them on or off. The bugs can have a color scheme to denote what part of the filter they match. Another similiar solution would be that they are a list of collapsible lists.

Comment 5

[Dale Harvey (:daleharvey)]

Attachment: Collapsible lists

Ok, I did a quick mockup of what collapsible lists would look like, it seems like it would be easier to understand collapsible lists than filters. Loosely based on the SMS app design

Comment 6

[Dale Harvey (:daleharvey)]

Ignore the tooltip at the bottom right, not part of the design, just the browser

Comment 7

[Dale Harvey (:daleharvey)]

They dont need to be collapsible, in practice I think most people have like 5-10 assigned bugs and around the same with needinfo / flags. Also on the bug page I think we should have attachments on the actual bug page at the top, not in a seperate tab, they dont take up a lot of space

Comment 8

[Dale Harvey (:daleharvey)]

Attachment: Screen Shot 2015-11-20 at 15.29.50.png

Ok, got it all implemented, it does feel like a much nicer experience

Comment 9

[Dale Harvey (:daleharvey)]

After talking on IRC, I have landed this in https://github.com/mozilla-b2g/bzlite/commit/bbf82ec00b1df11b93a3b8511eddcf057e7f4eac but leaving the bug open for discussion. I dont love the loading implementation on the dashboard however that will be removed soon (https://bugzilla.mozilla.org/show_bug.cgi?id=1177422)

Comment 10

[Jacqueline Savory [:jsavory] UX]

Hi Dale,

This design definitely helps with some of the issues of the previous version, however I am seeing some issues with it:

- The tabs at the bottom of the screen are mixing actions with display screens and this feels quite awkward.

- Within the single bug view, the double layer of tabs can get very crowded and confusing for navigation.

- It is not ideal to have a header for some screens, but not for others. It lacks consistency throughout the app itself. 

- Being able to use the tabs during login is not ideal, its better to let the user focus on just the login task. 

- With this setup, it is not possible to cancel out of the create bug screen, which means the user has to manually delete everything to start again.

- In general, I think the profile is not nearly as important as the dashboard or create new bug, but its in the same toolbar which seems unnecessary.

I do like the subtitle list view for the dashboard, it makes it less tedious then switching between tabs. There might also be a better way to display search and create new bug then what we currently have, but I’m not sure that this model is quite there yet. 

I could try to come up with another design next week? I think the best answer might be to combine whats working currently with the new work you have done here.

Comment 11

[Dale Harvey (:daleharvey)]

> - The tabs at the bottom of the screen are mixing actions with 
> display screens and this feels quite awkward.

I am not really sure what the distinction is, is Dashboard display and the rest action?

> - Within the single bug view, the double layer of tabs can get very 
> crowded and confusing for navigation.

Yeh I dont love that, for the bug page I would like to put the attachments on the main bug page, they are important details that do not take up too much space and we can likely do something else to get to the bug details screen.

> - It is not ideal to have a header for some screens, 
> but not for others. It lacks consistency throughout the app itself. 

Currently its only the 'Create' that has a header because it has the submit button there, I figured we would get rid of that.

> - Being able to use the tabs during login is not ideal, its 
> better to let the user focus on just the login task. 

This I am not sure about, search doesn't need a login nor does does viewing bugs and the create a bug definitely needs to be accessible without logging in. Any changes to the design would have to cater for that. 

> - With this setup, it is not possible to cancel out of the create bug 
> screen, which means the user has to manually delete 
> everything to start again.

That is an existing issue, clicking 'create' or any navigation would reload the page however we save the bug details in case the user didnt want to lose them, either they couldnt submit the bug or wanted to check something else before filing etc. I think a full blown "drafts" system would likely be too much, but we need something between to fix this.

> - In general, I think the profile is not nearly as important as the 
> dashboard or create new bug, but its in the same toolbar which 
> seems unnecessary.

Yeh right now profile is pretty useless, I figured app settings etc would end up going in there as well but its still a section that isnt going to be used a bunch. 

> I could try to come up with another design next week? I think the 
> best answer might be to combine whats working currently with 
> the new work you have done here.

Yup definitely, going to be working heavily on bzlite coming up and all the help / guidance I can get would be awesome. Cheers

Comment 12

[Dale Harvey (:daleharvey)]

Not actively working on this at the moment so deassigning

Comment 13

[Dale Harvey (:daleharvey)]

This landed

Comment 14

[Dale Harvey (:daleharvey)]

Comment on attachment 8691383 [details]
Screen Shot 2015-11-20 at 15.29.50.png

Clearing review