Advertise here via BSA

Chances are over the last 30 or so years, you’ve sat at a desk typing on a keyboard in front of a monitor, and clicking around with a mouse to interface with technology. Oh sure mobile devices have been around for a while but only over the past 5 or so years has it been even close to an enjoyable experience. Today we have multi-touch devices and gaming systems like Nintendo Wii, but it’s what’s on the horizon that will change how we look at the user interface in a whole different way.

Desktops Interfaces

BumpTop

There’s not a lot more I can say about BumpTop that isn’t already talked about in the video except that I have some hands on experience. I have used it for about 2 weeks now on both my desktop Mac and PowerBook. The learning curve isn’t as straight forward as they make it seem in the video, but it was easy enough to get user to in a week or so. My desktops (both real and virtual) are alway a mess. I have Stacks and Spaces to help me get organized, but BumpTop is more natural, and it really is what Spaces and Stacks should have been.

BumpTop’s gestures (Pro version only) work with your laptops multi-touch touchpad, but also works with a Wacom Bamboo Touch so you desktop users aren’t left out.

Yes, you’re still sitting in front of a screen but BumpTop really give you a sense of reality. The physics are superb and stacking docs in piles by random grouping or piles by type, help keep you organized.

Other notable alternative computer desktops which have been around for some time and most look at the desktop in 3D from the outside.

• DeskSpace
• TopDesk
• CubeDesktop

They have the “fun factor”, but don’t have the natural usability of BumpTop. It is because of this that they will remain a novelty at best. Don’t get me wrong, they are all forward thinking alternatives to the flat 2D experience of the last 30 or so years, but if we are truly going to change the game, even BumpTop needs to start looking further ahead.

Surface Interfaces

Microsoft Surface

I stil vividly remember my father taking me and my older brother to go see Star Wars and the scene where C3-PO is about to beat Chewy at a game of HoloChess. I wanted one of those so bad I could taste it! For the next, oh, 31 years I would be destined to compare every new technology to something I saw in Star Wars and we’re finally seeing a lot of what was science fiction becoming science FACT! In the next couple examples we’ll take a look at what we can expect to start seeing.

This team from CMU developed a D&D game using Microsoft’s Surface that makes me feel like a kid again!

Do a search on YouTube (or your video site of choice) for Microsoft Surface and you’ll find a plethora of examples of how this technology is being used. From entertainment to retail this the Surface UI will most definitely change our lives.

advanced touch-manipulated user interface

This video from TED in 2007, Jeff Han demonstrates another surface UI. By watching the video you can see how this surface differs from Microsoft’s Surface in that it has pressure sensitivity, and is nt only sitting at an angle (which may be for the purpose of the demonstration only) but it also appears to be a transparent interface. At certain parts of the video you can see the underside the surface and still see the UI, ala Avatar and Minority Report.

3D (2½D) Immersive Interfaces

Proximity Sensing

Utilizing the theory of electrostatics, we have designed a low-cost human-computer interface device that has the ability to track the position of a user’s hand in three dimensions. Physical contact is not required and the user does not need to hold a controller or attach markers to their body. To control the device, the user simply waves their hand above it in the air.

Gaming consoles like Nintendo Wii use infrared sensors that detect position and an accelerometer for speed and rotation, but are tethered by a physical controller. Yes, it’s wireless, but you still have to hold something to control actions. Looking ahead, these limits need to be lifted.

Microsoft’s Project Natal

By now I’m sure most of you have heard about Microsoft’s answer to the Wii, Project Natal. It isn’t the true controller-free gaming/navigation that has my interests peaked, but the camera with facial recognition and the ecommerce, or as I like to call it, vCommerce (virtual) possibilities that has my brain sparking, but we’ll get more in to that later.

In the video you’ll see at about two-thirds the way through the video there is a short segment where a woman has a personal shopper recommending a dress for her to wear. She virtually takes the dress off the rack, drops it on her virtual self and is able to turn from side to side, seeing how this dress will fit from any angle. How well this works, still remains to be seen, but my guess is soon we will be shopping for clothes online, not in front of our computers, but in front of our televisions. Not with a retarded looking 3D model but by looking at ourselves via video in the comfort of our own homes. FINALLY!! I can try on women’s clothes without getting chased out of the store! (did I say that out loud?)

So far, all the interfaces we’ve looked at have at least one common thread. The fact that all of them require us to be where they are located and are then confined to that space until we decide to stop using them. Which brings me to the last of our look at alternative interfaces.

Augmented Reality

Augmented Reality is here and it has the most potential for becoming an everyday part of our lives. We will wonder how we ever lived without it.

Mobile devices will be the driving factor with this new technology. Because of its ability to free us from the tether of having to be where the user interface is, sets it apart from all the rest.

Apps like Acrossair’s, “Nearest Tube” help us in our everyday lives by using something we always have with us. Our phones. There are already a few apps using augmented reality, and we’re sure to see more and more.

Consider this possibility.

You’re in (major metropolitan area) and you’re looking for the nearest (big chain department store). You launch your Augmented Reality app from your phone, enter your search term and hold up the phone. Using the phones camera, just like Nearest Tube, you get an image overlaid on top your camera view with arrows pointing you in the right direction and distance to said location.

In your preferences you have already indicated that if the distance exceeds 2 miles that the app will search for local taxi services with a 3-star rating or higher. You are in fact 4 miles from your destination, there are no taxis in sight, so you tell the app to send your location to Acme Cab Co. and confirmation is sent to you saying a cab will be there to pick you up in 5 minutes.

You arrive at your department store. Browsing around the new Spring fashions you see a end-cap display with a recognizable symbol. Open your Augmented Reality app again, point it at the symbol and a video starts playing. In this video a virtual stylist is telling you how to accessorize the garment you’re looking at, or telling you more about the products designer. Or perhaps it’s a Beyoncé’s new Dereon line and you get to watch the new Beyoncé video.

Let’s take it one step further. Using the Microsoft Natal garment idea. You have already created your virtual model and this time you point the camera at the bar code on the garment. Now you’re looking at your virtual self wearing the garment. Moving the model around from side to side you realize it must have just been the color because it looks horrible on.

From desktop alternatives to location-based augmented reality, these are the types of user interfaces we have now and can look forward to. The technology is already here. It’s up to us to think of new ways to use it.

What are your favorites? Did we miss any that are even better? Let us know!

Advertise here via BSA

We can all enjoy a good conversation. Many companies, including “big business,” have learned this and, as of late, have implemented it more than ever before. The truth of the matter is that people are more willing to trust a laid-back, conversational person than they are the stiff-necked (ex-)marketing guru. We can see this conversational style all over the advertising world. For instance, Apple’s campaign of Mac and PC. Apple isn’t lambasting Windows like a cheesy, poorly created 1970’s political ad. Rather, they are approaching the situation from a humorous, ironic perspective. What we mean by irony is this: the dichotomy of the seriousness of the subject matter juxtaposed to the humorous nature of the ad.

Cheeky Web

This tongue in cheek has made it’s way all over the web, and doesn’t show signs of slowing down. With Twitter, we first saw the “Fail Whale”; another juxtaposition of a fairly odd theme for a 404 page. Also, with Twitter, the entire branding concept is wrapped around a small, cartoon bird. Ten years ago, seemingly, this kind of branding and user experience was limited to cereal boxes. But “Silly rabbit, Trix are for kids” has turned into “silly PC, Macs are for grownups.” Leading social platform Facebook has adopted the tongue-in-cheek concept as well, offering “Pirate” as a language choice, extending support even for the automated emails sent to notify the user of a new wall post or message.

Facebook's Pirate language let's you log-in with your 'Lectric Parrot and Secret Code

Google (long known for their sense of humor, anyway) has even adopted the conversational idea with their latest video push for Chrome OS.

Why does funny work so well?

Well, there’s no proof necessarily as to why the slightly ironic tinge of the latest web-trends appeals to us (maybe the Trix rabbit is the real cause for it all). But one theory suggests that, especially for those in the United States, the economic crisis and the media surrounding it are “heavy,” so to speak; the light-hearted jabs Apple takes at Microsoft are a relief from the weight of the situation at hand.

But hey, nobody really knows why mullets caught on in the eighties, except that the popular guys did it. When it comes down to it, it could be said that a lot of it is simply a stylistic trend that is spearheaded by some guys up top that have a good sense of humor, and know that laughter, even in advertising, is like medicine. And it seems like it’s an addicting pill.

The Bandwagon

Other players in the humor game pop up daily. Just taking a quick glance over at sites like LogoPond will show the toyish-look of branding. Often resembling caricatures, a “hot trend” in logo design is to give the mark some “personality.” This is all a huge part of the user experience.

Source: LogoPond.com

User Experience

The result of the conversational, tongue-in-cheek attitude towards business is a strong brand loyalty, and at least positive recognition of the humor, if it is done well. We’ve all met the Windows user who chuckled at the most recent “promise” ad from Apple. The front end of a person’s experience with a company is extremely important; whether that person becomes a customer or not, the companies implementing this into their advertising and branding understand the importance of perception; even though PC users may never use Apple’s OS, they quite possibly (more probably) will own an iPod, or perhaps an iPhone; by maintaining a humorous stance, Apple doesn’t estrange the opponent’s customers.

Conclusion

We can see quite clearly that the cheeky attitude of companies on and off the web has had a major impact on user experience study as we know it. What have you found to be effective, or anti-effective, about this kind of front-end user experience?

Note: This article talks about advertising and branding quite a bit. This is because advertising is a very significant portion of the user experience, whether the advertising targets new customers or existing customers. Often, advertising and branding are the only communication between a company and its potential, new, or loyal customers.

Advertise here via BSA

In the last post, we talked a bit about using color to get into the heads of our users. In this post, we will take a look at a company who we all know a lot (maybe more than enough) about. Google has been around for quite a while, and have obviously legitimized their brand and interface design by their popularity and widespread use.

Quick sidenote – Google is now passing out invitations to try out Google Wave. If you have not yet signed up, be sure to do so. We will be checking out Wave soon and showing you some really cool stuff that it is capable of. But for now, back to what we were talking about before…

Google.com is perhaps one of the most important destinations that people have, for years, pointed their browsers to. We have all come to know the minimalist look of the Google homepage, with its simple search and its signature “I’m Feeling Lucky” button. Today, we will look at a few things that Google has done with their homepage.

Google is, obviously, meant for a very large target audience. The image of Google is known to be very simple, and doesn’t follow any specific “trend” or “style”, per se. Rather, Google has designed their products (like GMail, Calendars, Docs, etc.) by using color and a white backdrop. In particular, Google uses primary colors (blue, red, and yellow) as their main branding color scheme, and one secondary color (green). This emphasizes Google’s elemental emphasis.
Note: this is separate for iGoogle, which allows for more customization and a “homepage”

But let’s look again at Google’s homepage.

Google has, without making it completely obvious, made blue their primary branding color. If all we do is take away the letters other than the two g’s, we are left with neutral (grayscale) and – you guessed it – blue.

Note: This image has been manipulated, and is not a product of Google

It’s pretty easy to see in this context that Google relies heavily on a blue color scheme for their image. Studies have shown that blue is calming and suggests reliability; two things which users who come to Google probably need. I don’t know about you, but I usually go to Google for one of two things: either I have a question or problem that I need an answer to, or I am browsing the Internet. These two activities call for reliability and reassurance, both of which Google has subtly cognitively offered.

So, why include the other colors?

First of all, not everything about blue is positive. In fact, if Google were entirely blue, we as users would most likely get a cold, uninviting feeling from the home page. The red “o” and “e” help suggest the brevity of using Google, while the yellow “o” serves to grab attention. The substance of the word “Google” is increased by including the yellow. The green “l” breaks from the possible monotony of using only primary colors, establishing a sense of permanency.

What can we learn from it?

This study, albeit short and limited to Google’s front page, shows us how easily we can make effective decisions without going overboard. These subtle decisions were most likely intentional. In fact, we’d bet on it. What are some ways you can make subtle decisions in your interface? Check out a few of our other posts to see some of the best practices in interface design!

Advertise here via BSA

Minimalism design reduces presentation to its bare-bones; goodbye are the flourishes and aesthetic elements. It is hard to find purely minimalistic design, and even harder to find well-executed examples of minimalistic design.

Minimalism is very underrated. Most don’t appreciate the beauty of minimalism in design. To most it looks too simple; however, it may be the most effective way for the designer to get his or her point across.

Most of the time, it is assumed that minimalism is very simple to create, and often referred to as laziness. Others, such as myself, believe that designing for the bare essentials is actually pretty difficult.

One of the pros of minimalism design is that it reduces the amount of clutter in your user interface. Therefore, the focus is on your content: the main part of your site or application. Plus, simplicity is very easy to take in, captivating your readers’ attention quickly. Today, I’m going to go over some techniques to captivate your readers’ interest and make a wonderful minimalistic site.

There are many ways to enhance your minimalist design. Layout is a very important in your design. You want the readers’ eyes to be drawn from the other components of the site to your content. Typography is also great way to enhance important information. Animation-like effects are great – perhaps using jQuery to make some subtle animations.

Layout

Layout will really make the attention move to your content. A large content area will really make it feel like it is very important. Keep in mind that the human eye is trained to look up (which is tricky for web design). Try and make their eye first go to the logo, then to the content using typography.

Typography

Typography is a very important part of minimalist design as well. The use of type is widely regarded as a very good use of design in your site. Used correctly, it can help create a very good-looking site. If you use the correct combination of serif and sans-serif, then you will get an effective, beautiful result.
If you use large type in your logo and just a bit smaller type in your headers, it will automatically draw interest to that type. If you have a sans-serif, large font as the header, and a serif, small, font as the content, the eyes will go straight from the title to the content.

Simple Animation

And finally, a good technique to use in minimalism is animation effects. It will help make up for the “wow” factor that otherwise doesn’t really exist in minimalism. Add some fade-ins and -outs. Maybe some color-ins. Try and experiment and find whatever will fit your site best. Effects like these can be done with javascript libraries (like jQuery and accompanying plugins fairly easily.

These are only a few good minimalist techniques that exist. Here are a few resources to get you on the path to “less is more”!

Typography Resources:

I Love Typography
We Love Typography
MyFonts

Layout Resources

The Golden Ratio
The Golden Rectangle
60 Layout Tutorials

Animation Resources

jQuery Tutorials

General Minimalism

25 Beautiful Minimalistic Website Designs
“Minimalist” on deviantART