This site is totally fictional. I started making it initially for a personal project, but afterwards I just wanted to see if the idea worked. The user navigates through the site using the cube or the menu buttons. The first click shows the respective face, and the second shows the content of that section. To return back to the home screen just click the logo at the bottom.
I’m not sure it was intuitive, once I’d clicked a face and brought it into focus, to click again to get the content. Also no obvious way to get back to the cube from a page.
My browser does a lot of spinning-wheel-loading while looking at the cube, which could be distracting.
I see your point. Maybe I could place somesort of message indicating to click again to open the content, kind of a toast, or make the content automatically open once the cube face is in focus, therefore relying on a single click.
Well spotted! Maybe placing a close button in each section will make it simpler.
That’s probably because of the javascript… I’m just curious, which browser are you using?
Thx for your feedback!
I’ll study those solutions better. Once they’re ready I’ll upload it again.
It also could be that some people would know intuitively to click to open the page - I did it just because I knew there was a way somehow and I was trying to review, but I’m thinking that other developers won’t be your sole audience
I think the single click idea might be good as long as it’s not registering spinning as clicks by accident.
An alternative, if it was possible, you could have a preview of the page on the face of the cube that comes into focus… making it more obvious maybe to click? IDK, just throwing ideas at the wall, you do what makes sense to you.
As for returning to the cube, you can obviously just reload the page or click the logo to reload to home, but perhaps as you say a close icon would make more sense to people to return to it.
In any case I enjoy things like this… seeing interesting ideas is fun. Break from the norm.
That’s the same version I’m running, although on Windows 7, but that shouldn’t be a problem. The page didn’t load completely or some addon is interfering with it. I’ll look into it better.
You’re right, it isn’t very common to have to click twice on a menu to open a page. Something, other than the face getting in focus, should happen to show that another click is needed.
It might work better and maintains the interactive behaviour. Just have to rewrite some of the code. No problem, the spin only happens when there’s a mouse or touch drag.
I wanted the site to have simple images that connected with each section in a subtle way. Perhaps I exagerated. There might be a neat solution using the approach you suggested. Just have to try it to see if it works.
Me too. I really liked working on this. Opens new windows and possibilities.
Hi,
I just reviewed your website and i would say Great! i like UI of your website specially cube, you kept it clean and innovative
Overall Great…
Thanks
Hate to be a party pooper, but the cube animation is eye-candy, because the same navigation is offered at the top of the screen. Redundant UI elements (as in elements that do the same thing) usually cause a loss in intuitiveness. “Why do I need to use the cube, when the navigation at the top does the same thing?”
FWIW I wouldn’t lose the navigation until you’re done perfecting the cube, as it will at least be an easy way to navigate when there are problems but I agree with @s_molinari on that.
If you want a backup nav, you could always do a footer sitemap. Unobtrusive, but a good amount of people know to look there if confused, I’d think.
Hi s_molinari. No problem. From a developer point of view, you’re right, it’s a redundant solution and that wouldn’t be needed. However, since this type of navigation is a bit abstract and I wanted to make the most simplistic approach without clutering with unnecessary information, the best option I found was to make the cube and the menu linked in a way that it gives visual cues of what’s happening. If the user has the mouse over a face, the respective menu shows the two are linked. If the user clicks the face or the menu button, the cube reacts accordingly. It’s redundant, but it’s the user who chooses which way he prefers to navigate, and also, it’s fun to see it moving one way or the other. I know it’s eye-candy, but isn’t that the purpose of making a site? It just shows all the information in a simple and different way. But as jeffreylees mentioned earlier, the 2 click solution isn’t the best. After the face comes into focus, the user most probably would think “interesting, but nothing happened”
It’s an interesting idea, but it’s not keyboard-friendly. I can’t access either version of the navgation, because I can’t tab to it. The absence of actual <a> link tags makes me wonder how accessible this would be for a screen reader, too.
Now it works with a single-click, either on the faces or the menu. The double click solution with a message appearing and saying to click again didn’t work very well. It just got too repetitive after a while.
Each section has now a close button. I don’t like it very much. It kind of breaks the design, but it’s the simplest way to understand it’s function.
Hopefully, the spinning wheel problem is solved. All the libraries are now merged in a single file.
Keyboard navigation is now implemented, but I changed a bit the way the site behaves in this situation. Considering these changes, it was needed to maintain all the navigation systems weaved together. If it was redundant before, now it’s almost ludicrous. I tried to cover all possibilities, but there might be a bug or two.
The html is now aria friendly. I tested it using google vox and the thunderstorm screen reader webbie3, and it sounds good.
There’s also a version with @jeffreylees suggestion, placing each section in the cube faces. I like it too, but in this situation I have to agree with @s_molinari view of discarding the menu. However, since this won’t run everywhere, keeping the menu as backup navigation would be the best choice.
It still needs some brushing up and optimizations, but hey, it’s working.
i like it. Also agree with what’s been said already. One weird thing though that i don’t know how to get around is that i clicked/or it autostarted a video on one of the pages but i had clicked back to the cube and now i didn’t know where on earth the video was even though i could still hear it. Had to click a few pages until i found it again.
The video isn’t supposed to autostart, but I didn’t make any fallback when we navigated to another section and the video was still playing. Thanks for pointing it out. I’ll look into it.
but I agree with 