Design a 404 error page

[gissoo]

Also, suggest:

• what to display if the leaf panels don't load properly
• what to display if JS is turned off

[gissoo]

@jhimpele @rlskoeser Please take a look here and let me know if the error page designs and messages make sense or if you have concerns. I have created 3 specific versions (the visuals and placement and formatting of text is pretty similar in each case)

• since the case where the panel doesn't load properly isn't really a 404/not found error I chose a different heading for it – @rlskoeser please advise on the heading for this kind of error. I thought of this fun text for it though "Sorry! The leaf you’re looking for seems to be caught by the wind!" :D – since this error could also happen to the dedication piece we can say "item" instead of "leaf" so it wouldn't be specific to a "leaf". – (I can put some leaves on the "ground" on this design too in addition to a fallen plaque if it would make more sense to you that way).

• The case in the bottom is for when the user has turned off javascript in their browser which would not display the tree at all, so the message and the visual of the tree would be to communicate what they're missing out :)

[jhimpele]

@gissoo Very thoughtful! What if the 404 says the leaf was blown away by the wind. Also, could the javascript note, could the note suggest turning on javascript in the browser?

[rlskoeser]

@gissoo 404 looks good.

No javascript - we can/should wordsmith this a bit, I think. @jhimpele maybe you could add a section to the homepage root document?

Could we use an SVG of the tree as generated by the site when we publish it? (🤔 wondering if I can automate this as part of the build, but will try to not to think about it too much right now).

Panel not loading — if the tree loads but a panel doesn't, the tree will be visible and functional. I just checked, there's no error or message right now, you just don't see any changes in the panel. Can you suggest a design for just the panel portion of the page, which will be shown with the timetree visible?

[rlskoeser]

maybe the 404 could have a few last leaves? or others blowing away? (not sure what that would convey semantically, though...)

[gissoo]

@rlskoeser I wasn't sure which leaves to leave on the tree, what if it's the actual leaf they had clicked on? :D ...what are the odds? But I also thought of it and liked that idea. (I added them, I'm glad you agree, it's much better)

[gissoo]

@rlskoeser so for the loading error when you say "you just don't see any changes in the panel" – do you mean the previous content on the panel is there? Or the panel is completely empty and not displaying anything?

[gissoo]

@rlskoeser @jhimpele Please take another look

• I'm not sure I understand the loading problem with the panel, this may or may not be correct – I propose we display a message inside the panel, let me know if this wouldn't work, then I would propose displaying a more prominent message outside the panel.
• for the 404 I revised the text based on Jeff's suggestion (but instead of leaf I think "page" is better to make it more inclusive of all the content on our site). And I do like the fallen leaves too, I was thinking too much about it before, I think it would work
• I also revised the text for the Javascript error fwiw, I think it's better now

[jhimpele]

I suggest changing the 404 message to "Sorry, it looks like the page you're looking has been blown away by the wind."

And for the javascript message, I think the ", below" are unnecessary.

[gissoo]

I revised it, thanks @jhimpele !

[jhimpele]

@ gissoo I forgot to mention that I liked using "leaf" instead of "page"!

[rlskoeser]

I like the idea of the fallen leaves, but the ones you have in the 404 error look too fat, as if they are standing on edge. Can you skew them or something so it looks more like they have fallen on the ground?

@gissoo the panel error is closer to what I had in mind. Could we add the fallen leaves to this as well?

For the no script message, I was thinking something of like "This timetree is an interactive visualization that requires javascript" (to justify/explain why it's required — esp. since I always prefer to build things that are functional without javascript when possible). Maybe we can combine with what you have now, something like this? "This timetree is an interactive visualization; please turn on javascript to explore." (But we could work on drafting this along with other site content, I don't think it needs to be absolutely set now.)

[gissoo]

@rlskoeser thanks for reminding me of skewing the fallen leaves, I forgot!

@rlskoeser @jhimpele

• is this better for the 404? – do the fallen leaves look ok to you?
• is this better for the panel display error?
• I also revised the language on the JS error. Thanks!

Note: we also decided to use the actual tree you have generated and place it inside a box like the below instead of using my tree from Figma.

[jhimpele]

@gissoo :

• I think the leaves may appear too flat! And can there be some variation in their angle?
• I'm not seeing the panel error at that link
• I know this is not 2002, but should the java error add "in your browser"?

[gissoo]

@jhimpele sorry here is the panel error

[jhimpele]

Should the error text be in there? Sorry for my confusion!

[gissoo]

@jhimpele yes it will be there! We'll have to decide what the language will be. It should probably be generic. I just placed this: "Sorry! There is a problem with displaying the panel!" – the wording doesn't have to be part of the design, but what are agreeing on is that it will display inside the panel since the problem is closely associated with the panel.

[jhimpele]

Thanks @gissoo . I thought we had determined the language for that. But I might have been thinking of something else.....

[gissoo]

@jhimpele regarding "in your browser" for the java error I think I had mentioned this to Rebecca and she said people who turn off javascript know enough to know what that message means. I can go either way.

@jhimpele @rlskoeser please check out these two new versions for the leaves. The angle for the "ground" on our page is tricky but I think these don't look awkward. Let me know what you think and if you like one more than the other. here is v2 and here is v3

[rlskoeser]

I like v3!

[jhimpele]

Makes sense about java, unless there are browsers that have it off by default. I do think that in your browser settings couldn't hurt....might be helpful to the non web savvy folks

vTHREE!

[gissoo]

@rlskoeser I've uploaded the visual (v3) as svg on github in develop > themes > static > img
note:

• I updated the asset in figma so the visual should work both on desktop and mobile only by proportionally resizing it to fit on mobile.
• I'm not sure how the visual will sit on the root branches in the implementation right now, you/I/we might have to tweak the length of the trunk a bit if it doesn't sit on the footer nicely.