Avatars, The Movie – Now That’s a Real Navigation System
It doesn’t take much to get me out of the house and down to a movie theatre for a new science fiction movie. All time favorite: Blade Runner. Yes, I know it’s old, but that’s the real stuff, since no-one has really been able to create the avatars such as those described in Neal Stephenson’s Diamond Age… until now.
Man, oh, man, where’s the nearest full size 3D I-Max. Avatars, the move is open. I’m head up to the mountains with the family tomorrow, so I’m going to have to wait, but please save me a seat, dead center, half way up when I’m back on Wednesday.
In the meantime, the Avatar site will have to do. When I saw the navigation menu for the content, I immediately tweeted about it. Here’s the flow of the discussion.
@EUSP (me): Go to the main site. Mouse over the the images at the bottom. Now THIS is the way to make an interactive menu. http://bit.ly/48fznZ (Click: Enter official site)
@cwheeler (Christina): RT (comment above)
@EUSP: Sounds like a nice project. You up for it?
@cwheeler: Absolutely I’m up for it!
@EUSP: Ok, put it on your schedule. Document as you go along and I’ll publish as a series on navigation design.
@cwheeler: You got it! :)
Ah, that’s great! Now go look at the sliding menu (click: Enter the Official Site) with all the functionality displayed and see what Christina is going to try and recreate in SharePoint. This should be a really fun project. (What I didn’t tell her is that I was going to do it anyway, but now I’m off the hook.)
Christina, the ball’s in your court.
- Avatars, The Movie - Now That's a Real Navigation System
- Avatar, the Movie: SharePoint Navigation Re-creation Introduction
- Avatar, the Movie: SharePoint Navigation Re-creation - Part 1
I’ve seen something very similar on one of the many jquery websites so should be reasonably easy to achieve I would have thought.
I know it is not quite in the same class but I’d have thought that Christophe offers a good starting point with a MAC-like sliding menu system for SP. Have a look at:
http://www.pathtosharepoint.com/Pages/Fisheye.aspx
Roy – Yes, that is a good starting point. The jQuery slider is available to anyone who wants to set one up. We actually do it in one of Christophe’s live online workshops. I’m looking forward to seeing Christina do a deep dive and figure out the functionality of the other pieces of the Avatar sliding interface. — Mark
Looks like this will be a great project!
I am not too sure I agree that “This is the way to do navigation”
I do like how they have tags above each block item, but there doesnt seem to be group ordering to the categories for each item in any specific order.
Also, there navigation seems to scroll on forever, and a bit slow too. I dont even know what I looked at :)
I would have made the category (eg. News) above each item a link to a flyout onclick. From there all the icons would only be news for instance.
A good feature about this navigation is that external links blend in pretty well. This did cause me to hesitate before clicking on anything, but its a good way to show support to your partnering websites.
All in all, it is stealthy, fun, and a good visual representation of its own navigation style. (just like the movie, minus the stealthy part)
I am curious to see how you will mimic the same roll over effects of the close button on the flyout, as well as the playing video inside the navigation item (where the marine is explaining what avatar is onmouseover)
I’ll be following this series.
Thanks!
-Eric Schrader