I would not want to give up this effect, in my opinion it looks very fresh and interesting.
But still, I can’t judge my work.
Could you give me some ideas to improve the usability of this sidebar? First, not every user will guess that it opens on hover. I’ve been thinking for a long time and I don’t know how to make the user understand it.
I would like to hear a few suggestions for improvement and a General impression. Maybe it is so bad that there is nothing to finalize.
I like it very much, very classy. It’s a great inspiration.
It maybe lacks an incentive to go hover on the right. You had to tell us what to do, users should in the end find it naturally. Also your interaction spans across something like 1000ms, I think it could be shorter and less linear, something like 550ms with another easing mode. Try using ‘quart’ modes with ease in and ease out. To get something more snappy, but still smooth.
A simple floating menu icon close to the edge will do. Users will want to click it and they will trigger the menu instead.
As for the rest, many things can be improved. I like the little digit and the point, but the title and the items text can be fine tuned. A font with more character, and less thin, also do something so items don’t span on 4 lines. I could see a smaller text, in all caps, to go with the digits.
I agree with @vincent, it’s a really nice effect. I love the way the frame the comes in on hover creates focus on the menu. It’s a brilliant idea.
On top of adding a call to action (like for example the menu icon vincent mentionned), I think you need a bit more contrast on your side bar. It’s just not eye catching enough, especilly with a bg image. Also, I don’t know if it’s a bug or not, but the text isn’t visible at all until you hover over it - I think it should be.
Nonetheless a very creative and original approach, good job mate!
Hi @vincent, I tried different animations with different play times - if less than second, the animation looks linear. In any case. But still I’m going to try again. Animation really needs to be accelerated, but not at the expense of smoothness. Unfortunately this is an approved standard font of the entire site
You can increase legibility of the fonts, both the highlighted ones and the grayed ones. Especially the grayed ones, they’re very difficult to read. Maybe a different weight, they’re quite thin at the moment.
“contrast” was necessary to get the text to stand out more as the text was not visible / readable enough as it blended with the background image. It’s better now that you have just a black background, but it’s still not easy to see and read. The grey text in particular, I need to concentrate to red it and I have decent eyes…
Just as @vincent said, maybe playing around with the font will help. either bigger, bolder, or a different one, you just gotta try things out a bit and it’ll be fine.
