Streaming live at 10am (PST)

Unique Webflow Website - Looking for Feedback


#1

Hi guys!

I've built the following website (thryver.com) in Webflow and have one question that someone maybe able to help with.

Question: You'll notice the site navigates from bottom to top and on load I use the following code to open the site on the bottom. I've noticed issues (aka doesn't always load at bottom) with this in Chrome and I'm wondering if maybe there is a better way to achieve a bottom load result?

$('html, body').scrollTop($(document).height() - $(window).height());

Thanks, Matthew

PS: Please be brutally honest with your feedback - that's the only way we can all get better. No hurt feelings over here.


#2

Hi Matthew, very cool site. I like to see people try really different approaches, and that start at the bottom thing is pretty unique.

Quick & dirty heuristic review notes on the usability front, with possible mitigations:

  • I didn't read your comments before launching right to the site, so wasn't expecting it to start at the bottom. What I saw on landing:

Because the top of the viewport is normally where you expect the headline/hero image, I didn't recognize the "Know yourself..." panel as the start – it could easily be a CTA at the end of a page. That drew my attention to where I was on the page, and I scrolled manually to the top and missed your whole rocket nav idea.
* Mitigation: If you can fill the viewport vertically with your hero image panel, it should solve this for 99% of users who experience it.

  • Might as well make the rocket clickable as well as the "Press for takeoff" label for consistency across all pages for that interaction.

  • The fixed background technique might be being overdone here, there's a bit of cognitive load associated with it, and the images in my viewport aren't in clear relationship to the text panels:

(I would always test it with your target personae before changing it, this might not matter to them.)

  • Both the starting page issue and the fixed panel issue might be resolved if you can find some way to control what's in the vertical viewport at all times. Currently, the concept works perfectly if the viewport is about 650 px high (the height of your starting panel), but starts to degrade from a UX perspective at different browser window dimensions.

FWIW...


#3

Thanks so much @ramatsu! I appreciate the help. I'm still looking into how to fill the viewport with the background image and how to load it on the bottom, but I'll keep you updated.


#4

Hi Matthew, interesting concept, but although I'm a great fan of fixed backgrounds and scrolling etc, I find it really confusing. Furthermore it's all over the place at other resolutions and devices.

See screen shot from my iPhone !

It seemed to me that in most areas I could see half an image at the bottom and half an image at the top, and the key focus of the photo is obscured and as a result I'm not really sure which photo relates to which caption.

I also think that the size of the text should reduce on smaller screens so that it leaves more room for the imagery.

Work hard at refining it as it does have the potential of being really good - stick at it.


#5

I like the idea of starting from the bottom up. From a design perspective I would make the content section touch the top and have an appropriate size image on the bottom.... or make the content section touch the bottom of the view port like you'd normally see, but still scrolling from the bottom.

Ex.


(the image would be corrected of course)

I would even suggest maybe putting them both in the same section that would fit the view port appropriately and using an alternative type of fixed bg that would better highlight the content while scrolling.

I agree about the rocket needing to be clickable from the start. I'd put slight hover effect to give it more character towards "taking off". Nothing extreme.. a little cloud icon or something like that would be kinda fun.

You also could use the "top of page" concept you see on most websites. This way it actually looks like the rocket is going up and not dropping down. I've never seen one of those "top of page" stretched across like the fixed Navbar.. but it should be possible. Sorry I'm no coding guru. Just wanted to shoot you a few ideas that might help you.

Many blessings


#6

Thanks so much for the feedback! I'm trying to fix the background image problem. Do you mind seeing what it look like now on your iphone screen?


#7

Thanks @thegrafiqlyfe! I appreciate the feedback, you make some great points. Back to the design!


#8

#9