Proposal: Change Service Worker loading page

Currently, for a split second, you see this:

Cons:

  • Users click a link and the first thing they see is something that disappears before they can read it.
  • Flashing things usually appear on sites trying to game an ad system.
  • Users feel cheated when they click on a link with one title and get another.
  • Even if they read it, most won’t have a clue what a Service Worker is. My eyes always start reading it automatically. It’s meaningless.
  • Showing this doesn’t improve security, anyone can display the same page without a service worker.
  • Current design decreases security, by making devs remove that check and use the .raw URL

Current code: ic/index.html at 80606b8de2479924c3282c3feb4debf105017d9b · dfinity/ic · GitHub

Proposing a change to this
0.5sec SVG path animation. The animation won’t repeat:
e790e519-9d4c-41da-b188-81dbcbce

New code: Service Worker change · GitHub

The repository doesn’t accept PR, so someone else has to get it in there.

13 Likes

Thank you - this badly needs an update.

a simple statement suggesting direct e2e interaction with blockchain would be great too along with the loading screen

1 Like

For what it’s worth, anyone using a custom domain currently needs to host their own service worker and can customize it however they like.

I did this for codebase.org

5 Likes

Page changes before I can read more than two words, don’t know if you can fit that into 2 words

1 Like

fair enough. I think the aim of the current system is to provide more transparency to end users. IMO it hardly matters to them.

This is a needed update, We have had users complain about the service worker before and get put off by it. No user knows or cares what a service worker is and what its doing.

We resorted to using .raw for better UX but this adds security trade offs so perhaps just simplifying the load screen is the best way!

Hello all! I work on the service worker from within Dfinity and want to thank you all for sharing your thoughts on this loading page, there is very insightful feedback here.

We’ve actually already been working on a redesign of the loading page internally:


This design removes textual references to the service worker, but also adds stronger branding to the page. I’d like to hear your thoughts on whether this design would resolve your concerns or if this is just simply too much and we need to shave it back even further?

Also, regarding the decision to use .raw domains, is this decision purely based on the UX issues caused by the service worker’s loading screen? Or is there some other issues with using the service worker?

15 Likes

I like this. As a user not a dev the branding is good and a Loading screen is familiar ie you see them a lot or used too. Nothing complicated about it :clinking_glasses:

3 Likes

This looks good!

Let me try to shave it. I don’t mind the branding.

  1. The loader can be the logo instead of adding a circle. Besides reducing elements It will also draw attention to the logo.
  2. Text 'Loading resources" removed. I don’t think it’s necessary to say it if there is an animated loader
  3. Text “Blockchain cryptography will make this app more secure” - Visitors won’t be able to read it, we can show an icon like this instead
    image
  4. Putting things in the center makes the page look more transitional
  5. Investing in making a well-crafted animation negates the bad effects of having a loader

How about something like this

serviceworkanim

11 Likes

I really like the idea of incorporating the spinner into the logo and I agree that this text is redundant when showing a spinner.

“Blockchain cryptography will make this app more secure” vs the lock, doesn’t showing the lock after the logo animation pose the same “2 second” problem where it may not actually be visible to most users?

In any case, this is great, thank you for taking the time to give such valuable feedback. As a developer I won’t take liberties on the end decision so I’ll discuss this internally with our designers and update you on their thoughts.

3 Likes

If the animation is not connected to the actual loading and made fast. It will display within the timeframe. If the actual loading fails to verify, it can change to an error

1 Like

A version in which the logo doesn’t disappear
x2

11 Likes

Gray design, love it

In regards to to using .raw, the decision was based on users actually telling us they thought the service worker was downloading a virus before visiting our dapp,

so its a dilemma where its actually less secure to use .raw but seems less secure to the user to use the service worker.

I’d push to the extreme and simplify it as much as possible, no mention of blockchain or crypto at all or any downloading bar.

New users are still learning about these things so lets not scare them away :slight_smile:

6 Likes

Excellent thread! Change is really needed. Can I give you a couple of tips?

Usually what people don’t understand blockchain concepts and they want to loading to a common website, anything extra scares them.

That anything “load resources” “load crypto” would get it out, even though the text says it’s more secure.

The thing about the logo moving (gif), seemed excellent to me since there is a waiting time, which in the future could perhaps be shorter… then the logo would remain in gif and only the legend “Powered by Internet Computer”

2 Likes

That’s very interesting to know, thank you.

As Internet Computer enthusiasts, I think it’s easy to forget what it’s like to interact with things like this without actually understanding what’s going on behind the scenes so it’s very important for us to hear this. You touched on that too @FranHefner, thank you.

I’ll make sure all of this feedback is heard when re-designing the loading page.

4 Likes

I agree that this design looks better than the current one. However I am not sure if there should be IC branding. It is gonna as well confuse users from outside of the community or web2 users in general. I would suggest to have either no loading at all or very minimalistic one without any branding.

1 Like

My two cents - the current UX is even weirder for screen reader users. If you have automatic narration, it gets as far as “Internet C” before loading the new page.

I’d use an aria-live attribute or something to just say “loading”

4 Likes

I think having the IC-branding (in a non-scary way) is an huge opportunity to attract more builders & increase general awareness of the IC.
Most people won’t care but it could be enough for the 0.1% most curious users to take 5 seconds and browse “What is the Internet Computer?”.

I understand the opposite view point and I actually think there are arguments for it.
However, the current awareness is still so low (even in the IT-community) that it will be beneficial to let the branding for the moment. Maybe in 2025 when everyone knows the IC, that’s not necessary anymore :sunglasses:

4 Likes