search

epics-base / website

Issue tracker for epics-controls Website
https://epics-controls.org/
1 stars 0 forks source link

Consider removing animations #7

Closed dirk-zimoch closed 6 years ago

dirk-zimoch commented 6 years ago

Some pages, e.g. the "projects" page, use animations when loading the page. While this may be seen as a "fresh and active" style which pleases managers and such, if actually decreases usability because it simply delays the readability of the page. This may look interesting the first time but stresses my patience the 5th time loading the page. The same is true for the "green flash" when switching pages. Why not simply show the page a user requests?

ralphlange commented 6 years ago

@dirk-zimoch : For me, the site works a lot faster (~5 times?) at the new location, and while I share your general concerns, the animations seem to appear a lot more "fresh and active" now. Can you check again?

dirk-zimoch commented 6 years ago

New location? I tested http://testsite.epics7.org/epics-users/projects/

ralphlange commented 6 years ago

https://epics-controls.org/ Sorry, didn't realize you were not in the list of issue #4

dirk-zimoch commented 6 years ago

Please update the README.md of this project with the new address. The speed is now about 3 seconds from the start of the green flash until the page is stable. I am still not convinced that the animation has any positive value for the reader.

ralphlange commented 6 years ago

Obviously depends on internet connection, browser, OS, ... for me consistently less than 1 sec now, without cache, for any page and between pages. (Chrome 65 on Windows 7 running on a 4 year old i3 laptop at ITER.)

README is updated.

ttkorhonen commented 6 years ago

I am somewhere in between, 1s seems short but loading time is clearly less than 3 sec, consistently. The animation can of course be removed but I am also not sure if a blank page has more value...At least I see an action, even if only for a fraction of a second.

ralphlange commented 6 years ago

Closing this as won't fix for the moment. Please re-open if necessary.

slominskir commented 5 years ago

The official EPICS website pages load very slowly and is only made worse by hiding all content and showing a loading animation every time a user clicks a link. This is a bad user experience according to experts (also as a user I can report I find it a bad experience), and reflects poorly on the EPICS brand [*]. On the very high speed network at JLab it takes 3.5 seconds before the first content is viewed and 10 seconds before the page is interactive according to the Chrome browser Audit [**]. This is for a website that is relatively simple and is essentially just an index of text documents unlike a full web application.

The website receives a failing grade by the Chrome Lighthouse Audit tool, because of bad implementation choices such as serving 84 separately downloaded resource files on the home page (caching helps, but first impression of EPICS - first time you go to page without cache you wait 10 seconds - longer if you don't have high speed connection). It isn't only technical implementation choices either: poor design choices were made too like ignoring HTML browsers awesome built-in ability to render content incrementally. Yes a blank white screen is bad. But so is a blank screen with a silly spinner. The perceived performance can be better than actual performance if you let users start to read your website even as parts of it aren't downloaded yet.

* References

** Chrome Performance Audit Screenshot Screenshot

ralphlange commented 5 years ago

Thanks for the pointers, especially those to tools. We're running WordPress with some theme and plugins, creating the site was a summer student project, and between us EPICS developers there simply is no one with the required skill set to fine tune and/or change the internals. (We have a hard time maintaining the content, to be honest.) If we had an EPICS communication department...

ttkorhonen commented 5 years ago

Well oh well. Feedback is always welcome, but implementation help would also be appreciated. I wonder if there is a way to encourage a bit more participation from the community. Until now it has been exactly zero outside the few people involved. May I remind (as also seen in the comments) that last year we discussed this and it would have been easy to remove the animations but with a common decision it was decided not to do that. Loading speed was not seen as a problem at that point, available resources were used for importing the contents from the old website.

ralphlange commented 5 years ago

Jajaja. This is not so much about the animations - if the page was loading fast, these would not bother anyone. I love to see that there is a tool (inside Chrome) to benchmark this. Finally data instead of "much too slow" against "good enough". I get the same numbers from here (France), so in last year's discussion I was probably just praising the speed of my cache. Try running that perf audit yourself - it is built into Chrome - pretty impressive.

With these numbers as baseline and looking at the Lighthouse suggestions we will be able to put the sandbox clone that Heinz is going to provide to good use.

ttkorhonen commented 5 years ago

That was exactly the argument why we left the animations in place. But apparently they do bother people. Good if there are people who are willing to contribute to improvements. The number of contributions to the website from the community (exact zero) has been a huge frustration for me. Things do not just magically happen, there is in fact work behind in any step. This is of course not limited to the website but particularly apparent in this context.

slominskir commented 5 years ago

I could probably provide some help if I can obtain the source code or some guidance on how contributions are made. Any reason source isn't included in this git repo? Perhaps the code is simply hosted by WordPress?

I'm a web application developer, but a website should be no problem.

ttkorhonen commented 5 years ago

Where to start. Maybe by stating that I have no clue about web development. But still I can point out a few things: First of all, the site is not hosted by WordPress but - intentionally - there has been no "code" development and thus no source code to put into the repo. We use WP as a tool, with a selection of plugins. We intentionally made the choice to not modify the WP base or plugins because it would have risked breaking things at upgrades. It was hard to resist, though. Remember, there is nobody who is permanently employed and gets paid to maintain the website, let alone any related code. We have to get along with minimal resources. I tend to prefer content contributions but we do not get even those. The (content) contributions are done "in-line" when you have an account and a proper role ("editor"). The tool inside is called "Power Builder" and it was selected for reasons that were good and valid at the time of project start. We wanted last summer to replace the Power Builder with a newer tool that is more comfortable to use for a casual contributor. However, it was too new and when it was released there was not enough time left (for the summer worker) to put things in place and test them. For the Lighthouse tool. Apparently both of you used the "mobile" settings with the audit. I get similar results. However, if I use the "desktop" settings and no "3G network" throttling, I get quite different results, see below. And for instance to start to address the most important point ("serve images in nex-gen formats") we should ask to have all the images re-rendered in e.g. JPEG-2000. Contact again the communication departments of the sites and projects. Looking forward to that? One more observation with the Lighthouse. Repeating the audit 5 times gives me 5 different results, and sometimes really different. Does not make me confident. Please try for yourselves.

Now, do not get me wrong; I fully agree that the site needs improvement and am happy for any suggestions. I would be even happier if somebody would do the work, or at least create a plan. Then we could try to find somebody to work on the plan. I personally cannot use working time on this but I can try to find resources if there is a plan.

image

ralphlange commented 5 years ago

Reasonable plan?

ralphlange commented 5 years ago

Re: nextgen image formats Have a look at the compatibility charts for those. Makes only sense if you have every image in several formats and WordPress choses the best based on the Accept headers of the query. => Needs a plugin and sounds pretty complicated.

Deferred.

ttkorhonen commented 5 years ago

Looks good. Let me know if we (ESS) can help. For the content contributions, maybe we offer t-shirts/mugs/whatever to people who have added or updated content in the site. Trying to be positive here...

slominskir commented 5 years ago

Roughly 50% of users browsing websites are doing so from a mobile phone [*]. Perhaps a little less for science research, but still enough that we should be worried our first impression of EPICS might be coming from a phone and right now that first impression is bad. A website is about branding, whether you want it to be or not. Go look at the Tango website (https://www.tango-controls.org/). Makes me wish I used Tango and not EPICS as it loads fast and is pleasant to navigate [**].

There are at least two issues here:

  1. Actual performance isn't great, especially without cache (first visit, most important visit) and if on slow connection. This is due to many missed optimizations such as reducing the number of resources (too many plugins?, no bundling?)
  2. Perceived performance isn't great. Showing a loading animation and blocking incremental rendering just for style reasons is a known bad design as referenced in the many resources above. First try to avoid progress indicators by avoid long loading, but if you can't and are going to have long loading and progress indication then show actual progress, like percent complete, not an indefinite animation. I think we can avoid long loading all-together, meaning no progress indication needed. Moreover, if you can provide value incrementally, which you definitely can with a mostly just text website then do that. So for example, have a fast frame of a website that loads nearly instantly with readable text and then download all of those just for fun plugins and "spinning rims" in the background.

Action items (a plan):

  1. Determine the minimum set of content and resources (js, css, images) needed to start showing a useful page and only includes those initially. Have the rest of the stuff downloaded in the background (there are few ways this can be accomplished, perhaps WordPress has a preferred method)
  2. Simply remove the progress animation. It was cute the first time you see it. It gets old and is annoying by the second time. I stopped navigating the site by the third time.

* References

** Chrome Performance Audit of comparable (competitor) using same default settings (3G throttling) Screenshot

ttkorhonen commented 5 years ago

OK with me. Please create yourself an account on the site (I think you do not have one yet, right?) and we can give you the rights that you need to implement your proposal. But perhaps first on the clone that Ralph mentioned.

ralphlange commented 5 years ago

Yes, Ryan, we got your message. Do you propose to implement all your suggestions today, or can we leave the technically impossible ones for next week?

slominskir commented 5 years ago

I used the registration page to create an account 45 minutes ago, but I'm still waiting on a confirmation email presumably with a temporary password. Is is expected to take awhile? I'm not seeing anything in my spam folder either. I registered two different email addresses, and neither one has received anything.

Have a staging (development/demo) server to test things out on before making production changes is a good idea. If you don't have one I might be able to set one up at JLab. Which lab is hosting the production site?

anjohnson commented 5 years ago

Hi Ryan,

Please note that @ralphlange, Timo @ttkorhonen and Heinz @hjunkes (who provides servers for us at the Fritz-Haber-Institute in Berlin) all work in the Central European time-zone so will have signed off for the day (Ralph sometimes works in the evenings on his own time, but he has family too). I see the notification emails about new accounts and both of your registrations did go through, although I don't know what might have happened to the confirmation emails, hopefully one of the others will be able to help with that.

Thanks for offering to help and welcome to the team, but please be patient; none of us have the development of this website in our job descriptions, so we need all the help we can get!

slominskir commented 5 years ago

Thanks Andrew. Sounds like registration might not be an automated system like I assumed. No worries.

In the meantime I've installed WordPress on my local workstation in case I am able to import the project once I have access and also to familiarize myself with the builder interface. It sounds like the project strategy is to avoid coding and only use the GUI so I'll need to do some research into how to use the interface to optimize the website. I'm used to modifying code, so it will be interesting to see what can and cannot be done using the builder tool.

slominskir commented 5 years ago

I received the confirmation email and am able to login. On first pass over the interface it looks like I can only contribute content, and have no way to modify site configuration (configure plugins, modify layout, etc). I imagine there must be some sort of animation plugin and perhaps one of you can simply disable it.

anjohnson commented 5 years ago

It may be that confirmations are put into a queue that only processes at some periodic interval, I don't know for sure. When people first create an account we only give them the ability to suggest contributions through a content review process, to prevent spammers from being able to take over.

Ralph and Timo might want to wait until we have a development server available to give you access to the internals. I don't know WordPress very well but I don't think your "this should be easy" guess is right, I don't see any obvious way to turn the animation off, so it's probably buried inside some JavaScript somewhere. You may be able to research what's actually doing the animation without having access to the control panel.

ttkorhonen commented 5 years ago

All accounts have to be approved by a moderator and this depends on how fast the moderators (me or Ralph have been doing this) get to do that. We want to have at least a minimal idea who our contributors are. I will approve your account, until that you cannot do much and even after the first approval you get a "contributor" status and cannot still access the internals. I would like to proceed as Andrew mentioned: please familiarize yourself with the environment first, I would like to wait until the development server is there before giving you access to the internals. The development server will be under Ralph's jurisdiction though, so I will not administering that myself. "Easy" is a relative statement but I would in any case say that it certainly needs some practice to figure out how to configure things. In addition to knowing CSS, Javascript and all that stuff.

slominskir commented 5 years ago

No problem. I’ll try to get up to speed with WordPress on my local workstation. My colleague Theo Larrieu is a Drupal expert, which is a similar CMS, so we might be able to get some help from him as well.

On May 3, 2019, at 4:26 AM, Timo Korhonen notifications@github.com wrote:

All accounts have to be approved by a moderator and this depends on how fast the moderators (me or Ralph have been doing this) get to do that. We want to have at least a minimal idea who our contributors are. I will approve your account, until that you cannot do much and even after the first approval you get a "contributor" status and cannot still access the internals. I would like to proceed as Andrew mentioned: please familiarize yourself with the environment first, I would like to wait until the development server is there before giving you access to the internals. The development server will be under Ralph's jurisdiction though, so I will not administering that myself. "Easy" is a relative statement but I would in any case say that it certainly needs some practice to figure out how to configure things. In addition to knowing CSS, Javascript and all that stuff.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

keijokorhonen commented 5 years ago

Hi, here is the summer worker, who worked on this last summer. I completely agree that the animation gets tiring and makes the website seem clunkier than it should. The animation is created by the theme that we're using, which is unfortunately not well documented or customizable. I am assuming its hardcoded. I made a couple of attempts of removing that animation by using CSS, which I would preferably not do, as the JS script will still run (as far as I know) and would therefore load it unnecessarily. I also tried digging through the code of theme looking for the script that loads that animation, but gave up on that due to the lack of documentation and because I didn't want to break anything. The rest of the inefficiency is caused by the huge amounts of scripts and CSS files that the power builder and the plugins that come with the theme load up. I'm sure that my massive CSS file contributes to some of that too. While I might not be able to contribute directly to the website right now, I can try to answer any questions you have to the best of my ability. I am aware that the backbone (plugins, JS, CSS and even content contribution) is not as easy to understand as it should be.

slominskir commented 5 years ago

Sounds like the simple fix might be to just choose a different theme. Let me know if there is anything my colleague and I can do to help.