Closed Bug 1179908 Opened 9 years ago Closed 9 years ago

Consider replacing progress bar by spinner in place of site icon while page loads

Categories

(Firefox OS Graveyard :: Gaia::System::Browser Chrome, defect)

ARM
Gonk (Firefox OS)
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 1198246

People

(Reporter: benfrancis, Unassigned)

References

Details

Attachments

(1 file, 3 obsolete files)

2.80 KB, application/x-zip-compressed
Details
Currently we show the default site icon while a page is loading, even when navigating between pages of the same site.

A nicer alternative might be to show a loading spinner in place of the site icon while the page is loading (instead of the current progress bar), and then only show the default icon once a page is loaded but no icon is provided. This also helps communicate that tapping the icon won't do much while a page is still loading.

Jacqueline, what do you think?
Flags: needinfo?(jsavory)
I agree that having a loading indicator inside the site icon would be helpful in preventing users from tapping it when its loading. 

My only concern is when the search bar is collapsed, if the small loading icon would be obvious enough of an indicator to users that the site is loading. Perhaps we can have another visual indicator inside the site icon to complement the current progress bar instead of replacing it completely? NI? on Eric for visual opinion as well.
Flags: needinfo?(jsavory) → needinfo?(epang)
I did wonder about the collapsed state... we could have two progress bars, but bear in mind that spinners/progress bars can be surprisingly heavy on performance.

The current UI which shows the default icon during load is quite annoying (Guillaume already tried to write a patch to work around it), so I'm hoping that Eric can come up with something that looks awesome ;)
The main problem I foresee with this approach is that after pageload, the default icon will be displayed until:
* The manifest is downloaded
* The manifest is parsed and the best icon found
* The icon is loaded and displayed

That means that it will be visible until an extra 2 HTTP requests complete, even though the page is completely loaded and can be used.

I'm concerned that it may be confusing to change the icon 3 times when loading a page (spinner -> default icon -> site icon) and may hurt the performance as perceived by the user.
The current behaviour of showing the default pin icon during load is already confusing people, it looks like tapping it should do something. We want to prevent people from trying to tap the icon while the page is loading because we won't be able to properly generate a card preview.

An alternative to the order you describe is to continue showing the spinner if a manifest/icon is still downloading, but I'd suggest that would make perceived performance even worse.
(In reply to Ben Francis [:benfrancis] from comment #4)
> The current behaviour of showing the default pin icon during load is already
> confusing people, it looks like tapping it should do something. We want to
> prevent people from trying to tap the icon while the page is loading because
> we won't be able to properly generate a card preview.
> 
> An alternative to the order you describe is to continue showing the spinner
> if a manifest/icon is still downloading, but I'd suggest that would make
> perceived performance even worse.

Hey Ben, I'm worried about moving the progress indicator into such a small space (and even smaller when collapsed).

Is the main issue that the site icon looks tappable before the page loads?
If this is the case I think some opacity changes could help.

For example, when the page begins to load the default icon can be set to a lower opacity (with no press state).  When an icon is ready it can fade to the site icon (or transition to a full opacity default icon), which is now tappable.

Let me know if I'm completely misunderstanding, or if you have time to meet and clarify :).
I'm more then happy to explore some alternatives, but feel like I need to understand the problem better first.
Flags: needinfo?(epang) → needinfo?(bfrancis)
> Is the main issue that the site icon looks tappable before the page loads?
> If this is the case I think some opacity changes could help.

The main problem is that in most cases we don't know what the icon is going to be until the page finishes loading, and showing the default icon during this time just looks bad. The current default icon is particularly bad because it looks like you can tap on it - this prompted feedback from Foxfooders who tried to tap on it while the page was loading. Currently it almost looks more like you can tap on it while it's loading than when it has finished loading, which is the opposite of what we want.

My thinking was that the obvious solution was to use it as a spinner while the page is loading like we do in Firefox, replacing the current progress indicator. We'd just need to figure out how to make it look good in both the expanded and collapsed state. I think it would be plenty big enough in the expanded state, but making a spinner that would look good in the collapsed state could be an interesting visual design challenge!

I can see that the opacity approach could help with the visual affordances, but it doesn't solve the problem of having no icon to show during page load. Can you think of any other approaches?
Flags: needinfo?(bfrancis)
Flags: needinfo?(epang)
As I suggested elsewhere, if we really can't get a spinner to work when scaled down an alternative is to not show an icon at all until the page has loaded, or choose a different default that looks less like a button like the Firefox dotted outline or the Fennec globe. I still think a spinner would be nicer though :)
Attached image loading_icon.svg (obsolete) —
Hey Ben,

I need more time to explore the spinner idea.  My main concern is the spinner in the collapsed state.  At the moment the bar transitions really well between the expanded and collapsed state and the design stays constant. 

For now I've created a default icon for the loading state of the site icon.
I exported it as an svg, let me know if it's a different format that's needed.

Colour & Opacity

Colour: #5f5f5f
Opacity: 25%

Can we fade in the icon in when it's ready to create a softer transition?

If I can figure out a spinner that works we can implement it later on.  I don't want to block this bug any longer :)

Thanks!
Flags: needinfo?(epang) → needinfo?(bfrancis)
Eric, I'm having problems with SVG icons. Until we get that figured out is there any chance you could quickly generate some PNG icons for the time being so I can swap this out?
Flags: needinfo?(bfrancis) → needinfo?(epang)
Attached file Loading_Icon.zip (obsolete) —
Hey Ben,

I've exported the icons as pngs in both the normal and dark theme chrome.

Let me know if anything else is needed.
Thanks!
Flags: needinfo?(epang) → needinfo?(bfrancis)
Depends on: 1201638
Just a note: you can often have the favicon/icon downloaded while the page is still loading. If we're currently waiting on displaying the favicon until the progress bar is done loading, we're doing something wrong.
Attached file loading_icons.zip (obsolete) —
Hey Alberto,  here's the icon in the two colors.
Attachment #8651084 - Attachment is obsolete: true
Flags: needinfo?(apastor)
Cool, thanks! I'll fix this in bug 1198246
Status: NEW → RESOLVED
Closed: 9 years ago
Flags: needinfo?(bfrancis)
Flags: needinfo?(apastor)
Resolution: --- → DUPLICATE
Attached file Loading Icons.zip
Updated Icons
Attachment #8656492 - Attachment is obsolete: true
Attachment #8666756 - Attachment is obsolete: true
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: