I find it very intriguing that Microsoft chose to redesign its new Windows Phone 7 Series interface this way:
The design and layout of 7 Series’ UI (internally called Metro) is really quite original, utilizing what one of the designers (Albert Shum, formerly of Nike) calls an “authentically digital” and “chromeless” experience. What does that mean? Well we can tell you what it doesn’t mean — no shaded icons, no faux 3D or drop shadows, no busy backgrounds (no backgrounds at all), and very little visual flair besides clean typography and transition animations. The whole look is strangely reminiscent of a terminal display (maybe Microsoft is recalling its DOS roots here) — almost Tron-like in its primary color simplicity. To us, it’s rather exciting. This OS looks nothing like anything else on the market, and we think that’s to its advantage. Admittedly, we could stand for a little more information available within single views, and we have yet to see how the phone will handle things like notifications, but the design of the interface is definitely in a class of its own.
Curveball thrown. While the look has been in Zunes for sometime now, the real challenge lies in whether this will take off for mobile phones. I have to commend their bravery for taking this step, going the complete opposite of Apple’s love for rounded corners, gradients, and shadows. It also looks open and airy compared to all the boxes (no matter how rounded) on the iPhone.
It definitely changes the game a bit, and like several others I’m starting to feel like the Apple interface looks dated next to this one. Pretty big deal if you ask me.
This move could backfire. People tend to shy away from minimalism, not to mention it could actually be underdesigned, lacking in visual cues and icons. It falls short of the unified look Apple has built over the years, and I doubt it could start a UI revolution the way OS X did. Would Microsoft even use this for its desktop OS?
We’ll also have to find how it really measures up in real-world testing because the interface alone won’t determine success, but also performance and features (IE and Bing instead of Safari/Mozilla and Google? What apps will it have?). Still, bold is better than half-baked, and in the mobile space this look definitely sets them apart.
Take an ordinary blog post, highlight a passage you want to comment on, and have it appear on the comment form without having to scroll all the way down. Or mouseover a comment, then show replies to it as well as all other comments made by that person. That’s all in the spirit of Encouraged Commentary, which is a jQuery-powered script by Jim Jeffers.
Now this, I would say, is what JavaScript was meant to do. Not that fading, zooming, and sliding around are pointless applications of JavaScript. Impressing people is a lot less important compared to making them feel welcome, and that they’re a part of something. In this case, taking part is by quoting text or keeping track of conversations more easily.
Of course, what Jim did may seem more subtle an achievement than what designers and developers try to come up with, or what the ordinary blog visitor would appreciate.
But it’s one more contribution to that great experience. I’ve talked about Issuu last time, so this counts as number two. To that “wow, I had a pleasant time commenting on your blog today, Jim, you’ve made it so easy!” kind of feeling.
I hope that I encounter more examples of this—not just in commentary, but for every other aspect of a website.
I don’t know about you, but I avoid clicking on PDF files like the plague simply because it takes ages for it to load, whether with a browser plugin or a desktop app. Microsoft Office files are almost the same. Why can’t these documents be opened as easily as webpages, anyway?
Enter Issuu, a cool platform that makes viewing digital books, magazines, and other materials much easier—try using it right now—and Smart Look, which is a piece of code you to be placed in your website that embeds various document formats (PDFs, Word documents, Powerpoint presentations) into a Lightbox-meets-Acrobat interface. Only it’s lighter and more portable because the viewer (which you can also find on Issuu itself) is powered by Flash.
What actually happens is that to copy the code, Issuu scans your site for documents to import, under your account (which you’ll have to sign up for). The files on your site stay intact, but copies are stored on their servers under your username. Try Smart Look in action here.
Better browsing experience
Let’s pause for a moment to reflect on the irony in using one Adobe product (Flash) to view another one (PDF). Isn’t that a sign that something is terribly wrong with the way Adobe has been handling PDF files? Will Adobe correct this anytime soon, perhaps through Buzzword, and eventually kill Issuu?
Issuu and Smart Look make sense. To quote TechCrunch, Issuu really wants to kill the document download
. I think that doing so makes for a better browsing experience.
I’m not saying you axe the download option altogether. Just don’t make it the default action because it’s extremely disorienting. Not everybody has the foresight to look at a URL they’re about to load and choose to save it instead of view it. “Do I choose ‘Open’ or ‘Save’? Why is my computer hanging? Why, gawd, why?”
Competition means progress
Scribd and Docstoc. Too clunky.
And as far as inteface design goes, Issuu is a bit more polished than competitors Scribd and Docstoc, which remind me of the PDF viewers I’m avoiding in the first place. Although both have text selection while Issuu does not. Smart Look, however, erases the need for embedding the files in your pages since clicking on a link will do that for you.
Now I don’t want to do any more comparisons among the three because whichever webapp you’re using, I like that there is actual development going on in this space. It’s certainly worlds better than having to open documents in a bloated old program like Acrobat!
Ben Terrett of Noisy Decent Graphics has written a list of things that describe what “his Internet” is like. From an encounter with a technologically-challenged executive comes an inspiring exercise to get everyone on the same page first.
…I thought it might be a nice idea to get everyone to describe ‘their internet’ at the first meeting of any new client. Like they do at school when the new kids arrive mid term. Get everyone up to the same level. That way, everyone would know the ‘level’ of everyone else and there would be no clangers later on.
The list is not only informative, it’s also prescriptive (in a sort of passive-agressive way!). It addresses the little things clients don’t really take into consideration when they describe what they want for their websites. But the thing is, you’re the expert, so grab the opportunity to teach what thoughtful and usable design is. Some of my personal favorites from the list:
- Not using Flash for anything other than videos
- Giving simplicty and clarity top priority
- Not reinventing the wheel
You may not agree with everything on Ben’s list, but the idea is not just to yell at your client for “not getting it”, but to explain why you’re doing “it” that way. It strengthens the relationship you have with your client, and ensures clear communication pathways in between.
By “normal people” I mean those who are mere computer users, not literates nor enthusiasts nor experts. Cabel shares a striking example: in Japan, advertisers instruct potential buyers to enter specific keywords into search engines instead of their company URLs.
Clearly, a sufficient amount of search engine optimization is necessary for this to work, especially for the really famous and common-name brands. But this behavior of accessing websites did not arise because these companies have told us to do so. Neither is it limited to this Asian country.
I am sure you have at least one friend or loved one who has not grasped the concept of URLs and remains highly dependent on Google for finding their way around the web. If you’ll take a closer look at their web browsers, you’ll see why it really isn’t their fault.
Google invades the browsers
Most of the weird behavior we observe from other people is because they have Google as their homepage or built into their browsers. (You can also change the word “Google” to your favorite search engine of choice.) This usually comes in three flavors:
- the Google homepage (whether it’s plain vanilla, a Firefox-Google hybrid, or iGoogle)
- the Google search engine add-on (a common feature in all modern browsers)
- the Google Toolbar
As a result, users now have several blank input bars staring back at them—the address bar, the browser search bar, the Google Toolbar search bar, and the Google homepage search bar. Guess which one they’ll choose?
With the icons and text that draw one’s attention toward the Google search bars, the address bar fades more and more into the background. And since non-techie people are usually afraid of “breaking the computer”, they stick to a method that works well, which is to keep using Google.
Ignore or eradicate?
We can’t blame Google for trying to be the #1 product in our virtual lives; we can only be wary. But it should share the responsibility of educating users of how to use the Internet (how silly does that sound?) with the browsers. Unfortunately neither parties seem to care because: (a) Google would much rather have users search for sites than visit them through URLs directly; and (b) the browsers are earning money precisely because Google is paying them to have their search bars built-in.
Now, learning how to use the interface that lets one use the Internet is only halfway of the journey; choosing to use Google to wade through the Web is not necessarily a bad practice, as Jakob Nielsen predicted that this would become commonplace. But he also believes URLs will have to go.
In the long term, it is not appropriate to require unique words to identify every single entity in the world. That’s not how human language works.
The very nature of URLs seems to be another major stumbling block. Ordinary people don’t understand the use of a “www” and a “.com”, or that the “@” symbol is used only in e-mail addresses. They don’t know how to share websites through URLs either—unless there’s a button with explicit instructions that tell them how.
Add to that the explosion of all the domain suffixes like .me, .travel, and even .xxx. Not to mention all the malicious parties that wish to take advantage of their ignorance—stealing and spoofing personal information through misspelled URLs, search keywords, and deceptive e-mails.
The question is, if normal people aren’t using URLs anymore, what system can be built to replace them? Will it work? Or is Google doing a fine job already?
Perhaps one of the most well-designed and organized compilation of information design patterns, this website created by Christian Behrens is actually part of his master’s thesis.
It’s designed in Flash, which makes it a lot easier to demonstrate the non-static design patterns (e.g. layering) as they change over time. One can also look up the patterns according to different characteristics (e.g. order principle, user goal, graphic class, number of dimensions).
Anybody who wants to learn the variety of ways to present data—it’s a very elegant craft if it’s done right—should go visit this website. Truth is, Christian is not the first to come up with such a site, though he certainly did an awesome job with it.
User interface design is not the same as information design, but in several environments they can go hand in hand. Yahoo! has its own Design Pattern Library, which provides examples using the YUI Library and Yahoo! sites themselves. UI-Patterns.com is another such site. Even Chris Messina used a Flickr photoset as a repository for them (along with other equally useful collections: user flows, applications, etc.). Another personal project is this pattern library by Martijn van Welie.
Clearly, there’s a growing need for websites that would prove useful to information designers and interface designers. Perhaps even other types of designers. The problem is what’s out there right now are difficult to update and not exactly open to external contributions, mostly because they’re personal creations done during someone’s spare time. They’re dead ends. There is no way for other people to come in and suggest new patterns, or even share code, images, videos, and links that can help demonstrate them. There is no growth, no learning, no exchange of ideas. No community.
Design patterns keep people from reinventing the wheel, but all these collections of design patterns are redundancies themselves.
Am I looking for yet another niche social network like tlbox? Or a whole new breed of “inspiration” and “showcase” websites? Hey, if somebody can create a website with over 1 million user-generated colors, why not add another weapon to the designer’s arsenal? Move over, CSS, it’s time for ID and UI (or UX, or UIE, or whatever) to shine!
Remember in the movie, Minority Report, Tom Cruise had that screen interface he controlled with gestures as he browsed through information? Eventually we’ll probably be browsing through the internet in a similar way. Over the last several months there have been some new tools released inching forward in the move from a flat browsing experience to truly browsing through the “space” of cyberspace.
Here are four recent releases that are taking baby steps in that direction, attempting to give us a “bird’s eye view” of the internet, the interconnectedness of sites, and even connections between people in social networks.
TouchGraph
Offering a Google browser and a Facebook browser, TouchGraph shows how sites and people are connected in an interactive visual map.
Walk2Web
Users of Walk2Web can visualize the connections between sites as they’re browsing, while allowing them to view, review, bookmark and vote for their favorite sites.
TwitterBlocks
Twitter Blocks is a new tool that allows users to visualize 3D Twitter “neighborhoods” in an abstract block formation and discover other users with similar interests.
SpaceTime
SpaceTime displays search results from Google, Yahoo, and even Ebay in 3D space. The browser also offers 3D tabbed browsing.
There are also tools on the horizon such as ICCARUS, a 3D network visualization tool, and Sun’s open source Looking Glass project that turns the user’s desktop into a 3D environment.
Interesting stuff, but is it really all that useful? Maybe not, but you have to start somewhere I suppose. The difficulty is that trying to visualize data that is so complex with so many interconnections becomes unwieldy and difficult to use and understand in 3D space. You only have to take a look at the ICCARUS demo to see how impossibly complex a basic social network appears when rendered visually in 3D.
What do you think web browsing will be like in 10-15 years? Will we gesture through the web on giant screens like Tom had in Minority Report? Would browsing the web in 3D be inherently better? I think we’ll end up with some combination of the two, and in fact I think that the Walk2Web example is maybe the most useful of the 4 and is the closest to how I imagine browsing a decade from now. Not only does it contain the social aspect of Web2.0, but we see connections between sites, thumbnails and scrolling feeds as well. Have you used any of the four? Have you found them to be useful, or just eye candy?
This article was written by Randa Clay. Read more about design, marketing, blogging, branding and all things creative at RandaClay.com.
