Aurora: Visual Design
Looking back at the seminal web browser Mosaic as we started visual design for the Aurora project, I was surprised to find that our present browsers haven’t changed much in the last decade. As you can see, the general functionalities are constructed with similar items such as URL field, bookmarking, back/forward button.
With Aurora, we envisioned a browser that provides a less static, more natural interaction—a direct and intuitive way to interact within the web, similar to the way we relate to objects in the real world. We came up with the following key concepts for the visual design of Aurora:
The visual aesthetic should convey lightness and simplicity. The spatial layout should feel clean, open, with an expansive three-dimensional space. The spatial view reflects events unfolding in real time. Archived items are presented at a distance while current items appear immediately in front of you, suggesting time and space. Objects invite you to grab them and are governed by real world physics with responsive feedback. Everything you see in the space is touchable. You can grab, drag, and drop in three-dimensional space. Objects are floating subtly in real-time and are seemingly influenced by gravity as well as other objects and time. Object groups are clustered by relationship and exhibit motion behavior reflective of their association. Colors are utilized as cues to different behaviors—highlights of different colors denote notification, clustering, drop zone. Shapes are used to differentiate objects such as people, places, and data.
Process
We began with the mood board below to capture the emotional characteristics of the browser’s look & feel. These images from the mood board reflect visual ideas that were explored: bubbles, dew: soft and organic yet structured ethereal entities.
We then explored shapes that felt playful and expressive. We created shapes that are associated with the function of things.
Explorations on the wheel navigation element:
Explorations of the spatial view and navigational look & feel:
There are 8 comments on this idea.
The UI looks nice and all… i like it but it looks cluttered.
I think the final idea design in the videos are very intuitive. It’s interesting to see how you reached this stage of thinking.
While I believe this concept of a future browser is well worth a look. I don’t see any life of a browser without an address bar. I understand the want for a simple and aesthetically pleasing design but while Aurora is supposed to mimic much of our real life interaction it’s well worth remembering that in order to find out where your best friend’s wedding is being held you’ll need an address.
Alternatively you could use directions from a friend which may tie in to many of Aurora’s social interaction elements.
I like the concepts, and the videos are great too - but I have to say that some of it seems a little excessive - it’s like the argument in the past when people discussed the possibility of the Windows interface becoming 3D, it means higher spec machines are needed and it doesn’t necessarily make it easier to use - it just makes it look nicer.
Yes, I know there are a lot more features proposed in Aurora than most browsers, but it still feels a but “clunky”
“should convey lightness and simplicity. The spatial layout should feel clean, open…”
Spoken like every other client EVAR. Those are the same visual design goals that have been asked of every designer, on every project. Ok, maybe lawnmower designers don’t get asked for those, but certainly every user interface designer does. I’m waiting for the concept UI of the future that’s 90% ads and porn, unspeakable color combinations, multiple simultaneous audio tracks, and an overall heaviness and weight: the QVC/YouPorn/Fox News/Mall of America UI. Perhaps an Idiocracy-inspired concept video?
Really, I think Aurora is quite conservative in many ways—it assumes that the things we want right now are what we want more of tomorrow. This is the vision of the future as imagined by a bunch of folks who obviously came up in the 90’s and early 2000’s, enjoy scrubbing their faces and hands with fresh data every morning, noon, and night, and who imagine that everyone wants to have this sort of day-trader meets Warcraft player relationship with information. Even these colors are so easily placed in an era—these are the color palettes and glowing corner radii Vista tried to promise but couldn’t quite pull off.
Thanks for this. Great examples of how generating diverse design concepts will help to yield a great final experience. I’ll be using this to help explain to my clients (and coworkers) why I create many design options before settling on the final experience that they (and their customers) will enjoy and use effectively.
[...] design. I do this all the time when I’m designing exactly how a feature will work. Anyway, go check out Kumi’s post. There’s lots more to [...]
Some of the Aurora design ideas reminded me of the UI design work carried out by MAYA Design for DEC, notably some 12 years ago. I was working for DEC at that time. To my surprise, MAYA still shows some of the ideas at http://www.maya.com/portfolio/dec-workscape
At the time, the UI was targeting intuitive access to large volumes of documents: the Web just started. I think the Workscape concepts are useful when thinking of browsing after Explorer and Firefox.
[...] was given the task to translate Kumi’s design directions for Aurora from a desktop experience to a mobile experience for the video. My key concerns were to [...]
Add to the conversation.
Commenting is not available in this channel entry.