Advertise here via BSA

When it comes to User Experience you don’t have to be a UX Professional to participate. In fact, it’s often more important for you to care if you’re NOT specifically in the field.

User Experience Professionals (hopefully) know what they’re talking about. (Note the “Professional” part). UXers have chosen to make a career out of ensuring the user has a great experience and that fact should be embraced across every aspect of your business.

Sure there are business goals, financial projections and ROIs to meet. User Experience Professionals are well aware of this. But you know what? Part of their job is to ensure this happens as well. You see, if the company isn’t reaching it’s goals, they are out of a job too! :)

So what if you’re not a User Experience Pro? What can you do?

Embrace a customer/user-centric culture
This doesn’t necessarily mean the customer is always right. It means do what IS best for them and not what you want to be best for them.

Test, Analyze, Iterate
Sometimes we can’t all agree on the above. So, test it. Analyze the metrics. Improve the experience. It is arrogant to think you know what will work with nothing to back it up.

User Experience is not just a person or a team. It is how we present, interact, and offer value or usefulness to our users.

So you see, User Experience really is everyone’s business.

Advertise here via BSA

Formerly the Weekly Seven Plus or Minus Two, we’ve decided to follow our own advice and title our weekly post by its content to give our readers some context. This week is all about wireframes. Some of us prefer to sketch, some use designing software like Photoshop or illustrator, and some lean more towards prototyping specific software. Regardless of your preference we’re sure you will find value in the following five wireframing resources.

50 Free UI and Web Design Wireframing Kits, Resources and Source Files

This list of wireframing design kits come to you from our friends at Smashing Magazine. Browsing through this list we’re sure you’ll find a resource you will use.

Here’s the Link!

35 Excellent Wireframing Resources

Another great list from Smashing Magazine! This one includes 35 different methods and tools available.

Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.

Here’s The Link!

10 Completely Free Wireframe and Mockup Applications

Free is great when you’re budget conscious, but free doesn’t always mean quality. Here is a list of ten Free tools that are surprisingly robust.

Every web designer and developer should have a good and reliable wireframe (mockup or prototype) tool at their disposal. The importance of such a tool differentiates amongst web designers and developers, some use them, some don’t. Personally, I use them. It is in this initial stage of development that makes web design enjoyable, the coming together of the clients needs and your own creative ideas onto a blank canvas, allowing you to plan effectively the visual arrangement of the sites content.

Here’s The Link!

Free Web UI Wireframe Kit

Straight from yours truly, Fuel Your Interface recently gave away a free UI wireframe kit, and while there are many great freebies out there, this is a very comprehensive kit… And you just can’t beat free!

Sometimes you don’t need to build interactive wireframes, or may not feel all that comfortable in Visio or OmniGraffle. I know here are times I just want to open up Photoshop and start laying things out.

This web UI template kit is made completely with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.

Here’s The Link!

Designers Toolbox

This is probably one of my most “go-to” resources when I need something a little more than a sketch or a “designed” UI element. Designer Toolbox has a lot of great UI and wireframing resources from a range of browser elements and “websafe” area templates to HTML code for glyphs,punctuation, and currency. It even has a Lorem Ipsum genterator. Next time you need radio buttons for Safari, IE and Firefox, Designers Toolbox will be the bookmark you hit!

Here’s The Link!

Advertise here via BSA

Cognitive Dissonance and The Choice Paradox

Cogni-Huh What-O-Nance?

A powerful cause of dissonance is an idea in conflict with a fundamental element of the self-concept, such as “I am a good person” or “I made the right decision”. The anxiety that comes with the possibility of having made a bad decision can lead to rationalization, the tendency to create additional reasons or justifications to support one’s choices. A person who just spent too much money on a new car might decide that the new vehicle is much less likely to break down than his or her old car. This belief may or may not be true, but it would reduce dissonance and make the person feel better. Dissonance can also lead to confirmation bias, the denial of disconfirming evidence, and other ego defense mechanisms.

Options

Everyone likes having options, right? I mean, if there was only one car ever made, regardless of how well it was built, or how cool it looked, there is nothing fun about being forced into a decision.

We want to personalize! We want the red convertible with the tan leather interior and the iPod hook-up, with custom rims. Green just won’t do! It’s this definitive decision that makes us happy, even ecstatic when we find the perfect [insert your idea of perfect here]. However, it is this same choice that can ruin an otherwise perfect experience.

Observed in many cases is the paradox that more choices may lead to a poorer decision or a failure to make a decision at all. It is sometimes theorized to be caused by analysis paralysis, real or perceived, or perhaps from rational ignorance. A number of researchers including Sheena S. Iyengar and Mark R. Lepper have published studies on this phenomenon.[2] This analysis was popularized by Barry Schwartz in his 2004 book, The Paradox of Choice.

I Want More Options… No, You Don’t

We are very busy people, we have schedules to keep, places to be, things to do. We don’t always have a gratuitous amount of time to make an informed decision and rely on what we’re presented with to help us make that choice. User Interface Designers, UX Professionals and hopefully “decision makers” know the value of a persons time, and ensure choices are as simple as possible.

Consumers have been bred to think more is better. We’re all guilty of it in some way or another but the fact is, choice suppresses conversion. We are more likely to be unhappy with our decision if we have too many options to choose from.

If we can not limit the number of options, there needs to be some method to narrow them down. This could be anything from a customer rating system to, putting the most common choice(s) up front.

Conclusion and Sources

Sometimes we can’t take away the number of options we’re asking the user to choose from. But we can try and solve for the best possible outcome. By giving the user a means to drill down their choices, or offering up a “Best Value” or “Popular Choice” we help minimize cognitive dissonance thus giving them a richer user experience.

When Choice is Demotivating: Can One Desire Too Much of a Good Thing?
Cognitive Dissonance Wiki
Changing Minds

Advertise here via BSA

From time to time we find great lists of resources to help give us inspiration and perhaps learn a thing or two. Here is a collection of resources we feel you will find useful!

Wireframing Tools

CIO Happy Hour has compiled the list of resources you can use for wireframing and prototyping. It has the latest information available on the market, so it will be easier for everyone to make the best choice.

This list includes a table a mile long of some of the top wireframing tools available with info on the company producing it, whether there is an online demo, interactivity and price. Check it out here!

Twitter Accounts To Follow

Listorious touts itself as, “The definitive list of who matters on Twitter”. That definition is debatable, or maybe Im just jealous I’m not on this list. :) Anyway, if you’re looking for people to follow this list is pretty elite and won’t disappoint. Check the list out here!

Web Design Reference

This is a resource you probably haven’t seen, but we’re positive you will want to bookmark this site, and will reference it over and over! UMD (University of Minesota Deluth has been collecting articles, blogs and resources and archiving them as “Web Design References” This list is massive! Broken down by topics, it’s organized in groups like Information Architecture, Usability, Evaluating & Testing and many, many more! Visit UMDs Gigantic Resource Here!

CSS

Divito Design has a really nice Ultimate Collection of CSS resources. The list includes everything from links for beginners, to books, and even cheat-sheets. Click Here for the Ultimate CSS List!

While gathering these resources for you we came across another great 4-part series on CSS which is perfect for those who are new to CSS or even as a reference for some seasoned UI vets. Amber Weinberg is the author of this amazing series posted at Spyre Studios. This series on CSS is broken into 4 parts.

1. Margins, Padding & The Box Model
2. Floats & Positions
3. All About Text
4. New CSS3 Styles

Simply an all around great resource for CSS!

Wrap It Up!

Got another great ultimate list? Post it in the comments and share it with your community!

Advertise here via BSA

We’ve all heard the question before. “Where is the fold?” If you haven’t been asked this question before, consider yourself lucky. Wikipedia says…

“Above the fold” is a graphic design concept that refers to the location of an important news story or a visually appealing photograph on the upper half of the front page of a newspaper. Most papers are delivered and displayed to customers folded up, meaning that only the top half of the front page is visible. Thus, an item that is “above the fold” may be one that the editors feel will entice people to buy the paper. Alternatively, it reflects a decision, on the part of the editors, that the article is one of the day’s most important. By extension, the space above the fold is also preferred by advertisers, since it is the most prominent and visible even when the newspaper is on stands.

The term can be used more generally to refer to anything that is prominently displayed or of highest priority.

This term has been extended and used in web development to refer the portions of a webpage that can be visible without scrolling. However, some have suggested that this term is inaccurate as screen sizes vary greatly between users, especially in an era where websites are viewed with mobile devices as much as home computers.

The problem is that the people asking this question haven’t been properly educated as to where the fold actually came from and how we can use it or if we should even care.

Resources For Educating Fold-Mongers

To start off here are links to some valuable insight from industry experts both recent and spanning back several years.

1. Blasting the Myth of the Fold
2. The myth of the page fold: evidence from user testing
3. Utilizing the Cut-off Look to Encourage Users To Scroll

These three examples alone should be enough to convince even the most staunch fold evangelists. Hell, even this report from 1994 by usability expert Jakob Nielsen says,

In more recent studies, we have seen that most users scroll when they visit a long home page or a long navigation screen. This change in behavior is probably due to users getting more experience with scrolling Web pages.

When We Should Pay Attention To The Fold

Now that we have truly established that paying attention to the fold is stupid, I will put on my stoopid hat and give you a couple reasons where we SHOULD pay attention. These are more common sense examples and really will help the usability and user experience.

1. Short Pages

If you have a limited amount of content that CAN all fit on one screen (above the fold) it’s best to try. There’s no reason to force the user to scroll a couple hundred pixels.

2. Don’t Give A Reason To Second Guess

Check your designs at different resolutions. If you have any hard horizontal breaks across the page, make sure they’re not right at the fold. Easy to fix by vertically spacing your content. We want to avoid guessing if this is the bottom of the page or not. Guide them down the page by trying to avoid these fold breaks.
These two examples may seem contradictory to the posts title, however they’re not meant to be strict usability guidelines and are more design common sense.

Summary

Whew! Glad you made it. This is below the fold and I was a little worried.

There are mountains of data and information slaying the fold myth. Some are backed by years and years of expertise and research and some are more comical and intended to prove a point. It is almost as absurd as not turning the page of a book if it ends with a period.

It is our responsibility to educate those who aren’t familiar with the findings and continue to study user behaviors to educate ourselves.

Advertise here via BSA

5 Great Reads!

9 Ways To Improve the SEO of Every Website You Design

Sometimes enhancing the user experience goes beyond making your site usable. If it’s not findable what’s the point? This post by Six Revisions give you 9 ways to ensure your site gets found!

It’s a well-established principle that on-site SEO is one of the most basic building blocks every business needs to have as they start on the road to search engine domination. So it makes sense to add another string to your own marketing bow as a web designer and incorporate some simple SEO strategies into every web design you deliver.

Read The Entire Post Here!

5 Can’t-Miss Usability Tips for Mobile Website Designs

It’s seems everyone and their mother has a mobile site nowadays. What sets yours above the rest is how usable it is! Spyre Studios has a list of 5 well thought out tips to ensure your mobile website hits the mark!

Finding your way around a majority of the mobile websites that exist has become a nightmare with the lack of proper usability being implemented into their designs.

Read The Entire Post Here!

Explaining UX Design to High Schoolers

Sometimes trying to explain UX to anyone can be a challenge, this great post give some great insight that can be applied to high schoolers but could be anyone whos attention-span can me measured in nano-seconds.

How do UX designers tell their story in a relevant, meaningful way, to audiences who have no exposure to UX? UX practitioners are keenly aware that everything we use in our lives was designed by someone. But outside of our industry (and related ones), most people aren’t aware of the many decisions that were made (or not made) on their behalf when a product or service was designed.

Read The Entire Post Here!

Crafting Subtle & Realistic User Interfaces

This is an oldie but a goodie. We stumbled on this post via @dougneiner on Twitter. It has really solid tips on applying some realism to your interface bits.

From thinking about what objects would look like form a side view, to using vectors when possible. These tips should get locked into your arsenal and considered every time you start designing an interface.

The underlying secret to beautiful user interface design is realism: making 2D objects on your screen appear to sit in 3D space with volume, surface properties and undulations that might appear in real life. These faux 3D objects have highlights and shadows just like objects on your desk might have, and they have textures that emulate real objects from glass to sandpaper and everything in between. Designing beautiful user interfaces has more to do with the why than the how.

Read The Entire Post Here!

The Secret to Designing an Intuitive UX: Match the Mental Model to the Conceptual Model

Pretty neat stuff in this post. It talks about how people perceive how something SHOULD work before using it and how UI designers solve for this scenario.

Imagine that you’ve never seen an iPad, but I’ve just handed one to you and told you that you can read books on it. Before you turn on the iPad, before you use it, you have a model in your head of what reading a book on the iPad will be like. You have assumptions about what the book will look like on the screen, what things you will be able to do, and how you will do them—things like turning a page, or using a bookmark. You have a “mental model” of reading a book on the iPad, even if you’ve never done it before.

Read The Entire Post Here!

Advertise here via BSA

This week’s Seven (plus or minus two) has to do with your shelf. Book shelf that is! Below is a list of 7 books that should be within arms reach of every serious designer.

1. Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition – by Steven Krug

Five years and more than 100,000 copies after it was first published, it’s hard to imagine anyone working in Web design who hasn’t read Steve Krug’s “instant classic” on Web usability, but people are still discovering it every day.

In this second edition, Steve adds three new chapters in the same style as the original: wry and entertaining, yet loaded with insights and practical advice for novice and veteran alike. Don’t be surprised if it completely changes the way you think about Web design.

2. The Inmates Are Running the Asylum: Why High Tech Products Drive Us Crazy and How to Restore the Sanity – by Alan Cooper

Imagine, at a terrifyingly aggressive rate, everything you regularly use is being equipped with computer technology. Think about your phone, cameras, cars – everything – being automated and programmed by people who in their rush to accept the many benefits of the silicon chip, have abdicated their responsibility to make these products easy to use.

The Inmates are Running the Asylum argues that, despite appearances, business executives are simply not the ones in control of the high-tech industry. They have inadvertently put programmers and engineers in charge, leading to products and processes that waste money, squander customer loyalty, and erode competitive advantage. Business executives have let the inmates run the asylum!
In his book The Inmates Are Running the Asylum Alan Cooper calls for revolution – we need technology to work in the same way average people think – we need to restore the sanity. He offers a provocative, insightful and entertaining explanation of how talented people continuously design bad software-based products. More importantly, he uses his own work with companies big and small to show how to harness those talents to create products that will both thrill their users and grow the bottom line

3. About Face 3 – by Alan Cooper

This completely updated volume presents the effective and practical tools you need to design great desktop applications, Web 2.0 sites, and mobile devices.

You’ll learn the principles of good product behavior and gain an understanding of Cooper’s Goal-Directed Design method, which involves everything from conducting user research to defining your product using personas and scenarios. Ultimately, you’ll acquire the knowledge to design the best possible digital products and services.

4. The Design of Everyday Things – by Donald Norman

Anybody who has ever complained that “they don’t make things like they used to” will immediately connect with this book. Norman’s thesis is that when designers fail to understand the processes by which devices work, they create unworkable technology.

Director of the Institute for Cognitive Sciences at University of California, San Diego, the author examines the psychological processes needed in operating and comprehending devices.

5. The Elements of User Experience: User-Centered Design for the Web – by Jesse James Garret

Smart organizations recognize that Web design is more than just creating clean code and sharp graphics. A site that really works fulfills your strategic objectives while meeting the needs of your users. Even the best content and the most sophisticated technology won’t help you balance those goals without a cohesive, consistent user experience to support it.

But creating the user experience can seem overwhelmingly complex. With so many issues involved-usability, brand identity, information architecture, interaction design-it can seem as if the only way to build a successful site is to spend a fortune on specialists who understand all the details.

The Elements of User Experience cuts through the complexity of user-centered design for the Web with clear explanations and vivid illustrations that focus on ideas rather than tools or techniques. Jesse James Garrett gives readers the big picture of Web user experience development, from strategy and requirements to information architecture and visual design. This accessible introduction helps any Web development team, large or small, to create a successful user experience.

6. Measuring the User Experience: Collecting, Analyzing, and Presenting Usability Metrics – by Tom Tulis & Bil Albert

The first practical, detailed instructions on how to measure improved usability for the web, web-based applications, and electronic products of all kinds.

“This book is a great resource about the many ways you can gather usability metrics without busting your budget. If you’re ready to take your user experience career to the next level of professionalism, Tullis and Albert are here for you and share generously of their vast experience. Highly recommended.”
- Jakob Nielsen

7. Designing Web Usability – by Jakob Nielsen

While everyone wants to design cool web sites, no one wants to think simple and consider whether the design actually accomplishes its goal, which is usually to sell, teach, or entertain. The sole exception is Nielsen, who has made a living speaking and writing about what works and what doesn’t work in interactive media. His simple, well-written, and well-illustrated book discusses web usability, page design, content design, site design, intranet design, accessibility for users with disabilities, international use, future directions, and simplicity.

Add Your Books

What’s on your bookshelf? Add your favorite books to the comments and why you think it should be on everyones list?

Advertise here via BSA

I was recently asked if I thought User Interface or iA Designers we artists. Initially my reaction was yes. There is certainly an art form to UI/User-Centered design. But after thinking about what (typically) makes a good UI design, I concluded that there is a distinct difference between an artist and an interface designer. Good art should be seen. A good interface should be transparent.

It’s for this reason that the designer(s) often get overlooked when kudos are thrown around. So how do you admire something that’s not meant to be seen? One way is to rally behind the community that does appreciate it. Which is exactly what we’re going to do.

The magical number 7 is referenced as a persons cognitive ability and how it pertains to short-term memory. Whether you agree with this theory or not is irrelevant to this post. We just thought it was a clever way to give a congratulatory shout out to sites, articles, and people who we feel should get recognition for the work they do from the community, even if they don’t get it elsewhere.

Fuel Your Interface’s, “The Weekly Seven: Plus or Minus Two” will be the weeks five to nine links we think you will find useful. In no particular order…

Blogs Every Interface Designer Should Read

1. ux mag

UX Magazine sets out to explore, promote & discuss the multiple facets of user experience one article at a time. It is built upon the foundations of ProjectNeo, a global interactive design community.

UX Magazine is a collaborative publication by writers, technologists, designers, marketeers & business gurus from around the world. This project was created & developed by C. Demetriadis, H. Mann & A. Schleifer.

Click Here To Visit!

2. 37 Signals

Signal vs. Noise, a weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago.

The creators of Web-Based software Basecamp and Highrise just to name a couple. Most companies talk about customer experience and ease of use, but 37 Signals eat, sleep and breath the stuff.

Click Here To Visit!

3. Adaptive Path.com

Our mission is to deliver great experiences that improve people’s lives, while sharing our advances in the field with our clients, partners, and peers. We measure our success by our contribution to smart, agile organizations that are responsive to their users.

A true leader in the Industry, Adaptive Path hosts UI/UX conferences around the world. A millenia of amazing content on their site, enough to inspire even the most seasoned UI veteran.

Click Here To Visit!

4. Luke Wroblewski

Publications on the critical details and big picture behind digital product design. LukeW’s eight years of writing cover Web and device strategy, interaction design, visual design, usability, and much more.

LukeW is an internationally recognized digital product design leader who has designed or contributed to software used by more than 700 million people worldwide.

Luke is currently Chief Design Architect at Yahoo! Inc. where he works on product alignment and forward-looking integrated customer experiences on the Web, mobile, TV, and beyond.

He is the author of two popular Web design books (Web Form Design & Site-Seeing: A Visual Approach to Web Usability) and many articles about digital product design and strategy. Luke is also a consistently top-rated speaker at conferences and companies around the world, and is a co-founder and former Board member of the Interaction Design Association (IxDA).

Click Here To Visit!

5. Boxes & Arrows

Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

If you’re interested in improving the way information architecture is done, if you find yourself sparking provocative conversation on interaction design topics in your spare time, and if you go out of your way to help everyone in your office think differently about everything from the design process to software, we want to work with you.

Click Here To Visit!

Final Thoughts

If you haven’t seen these sites before, we hope that you find them as useful and inspiring as we do. Each week we’ll give you more and more sites, people and posts to get inspired by and hopefully build the community even more!

Advertise here via BSA

In Meyers-Briggs typology, as it pertains to information there are two types, “Sensing(S)” and “Intuitive(I)”. Neither is right or wrong they are just how we prefer to digest information.

Sensing personalities prefer the up-front and obvious as where Intuitives get more from reading between the lines and problem solving. Something to consider when developing your UI for the users who will be interacting with it. Will it be a new, innovative navigation or will it be a step-by-step process with big orange buttons and plenty of instruction. Singling out which type is most likely to be your audience is a great first step to establishing how your UI will flow.

Creating personas will help you decide which type will be more likely to use your interface, and thus how basic, or feature-rich your UI can or should be.

Personas aid in developing your UX by creating fictional users and establishing what behaviors they have and what they want to get out of using your UI. The tricky part is ensuring these personas are realistic and not just created to ultimately align with your goals. You might even try using someone you know and trust to give you their honest input. Preferably this person would be in your target audience. You wouldn’t want to get into the mind of your grandmother if your selling skateboards! (no offense grandma, you can still shred a mean half-pipe).

In short, creating personas will help you plan your UI and UX strategy by helping you decide who will be using your user interface. Stick to your personas and don’t change them to align with your goals. Make the changes to the UI to align with what the user wants to do. You can change the UI, but you can not change the user.

Advertise here via BSA

Winners!

Congratulations to our winners of a user test project from Loop11!

Dave Vogler
Jacob C. Alonzo
Clifton

We will be contacting you this weekend to give you the details on how to redeem your prize!

Thank you to everyone who participated. And keep you eye out for more great stuff from Fuel Your Interface!

Loop11 is an online usability and user experience testing tool, allowing individuals and companies to conduct online, unmoderated user testing on any kind of digital interface. Loop11 is not a survey or web analytics tool, but a user experience tool… helping you to understand user behaviour and improve your website’s usability.

Advertise here via BSA

Sometimes you don’t need to build interactive wireframes, or may not feel all that comfortable in Visio or OmniGraffle. I know here are times I just want to open up Photoshop and start laying things out.

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable. There are no usage restrictions but if you find them helpful give us a shout. We love hearing from you!

CLICK TO DOWNLOAD

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

Over the past couple of weeks we have looked at a small handful of 2009s top 100 e-commerce sites. We looked at product detail pages and examined the good and the bad, we looked at footers and how best to organize some of its content and now we will look at navigation.

The size of the product catalog of your online store will decide how to lay out your site’s nav. Generally speaking, there isn’t much difference from one site to another. Looking at a handful of the sites from the top 100 list has shown that most sites with similar competitors will use the same style of navigation. Furthermore, we discover a good percentage of the top sites use a horizontal nav bar with drop down menus broken down by store front and then broken down further into various departments, brands, and so on.

This is neither a comparison nor a showcase, but rather a case study, or the philosophy behind how e-tailers use user interface design to (hopefully) get you where you need to go in as few clicks as possible.

1. The Home Page

Navigation starts at ground zero, the home page. Sites like QVC, Overstock or Amazon start their top nav differently than specialized retailers like BestBuy. Where the aforementioned sites may have an Electronics section, BestBuy’s subject is electronics so they break their top nav into “Departments” from the beginning. Sites like QVC and Amazon will take one step back and start their navigation presenting you with “Store Fronts”.

This is a basic hierarchy that tries to emulate how brick and mortar stores are physically presented. Next time your in a store like Target or Wal-Mart, look at how the store is layed out and then compare it to their online presence. See how they are similar and also how they differ.

Trends

• Horizontal navigation across the top of the page with drop down menus letting the user “jump ahead” to specific areas of the site related to that specific category. Moving from the home page directly to a specific brand is a big time saver. Less clicks equals happier customer. This is the primary means of navigation and because of this, it is persistent across the entire site. Nothing surprising here, sites have employed this type of navigation for a long time and this isn’t limited to e-commerce sites. Nevertheless, for the purposes of this study it is still a noticeable “trend”
• Large promotional advertisements, usually using “lifestyle” imagery. Often times there are multiple promotions that cycle through, one after the other. We also notice that some of these promotions aren’t static, but allow the customer to interact with them without clicking through to it. Using this type of progressive disclosure gives the user more information and helps them decide whether this is the correct path to take. It Cleans up the design by not forcing context without it being asked for.

2. The Storefront

Like we mentioned before, this is how sites like BestBuy will start their navigation. You’ll find departments like TVs, Cameras, and Computers presented to you up front, where a site like QVC will store all these under an Electronics storefront. The reason for this is real estate. Amazon.com may have more laptops than BestBuy, but because they sell so many other products, to make the UI more usable they break it down one step further.

The Storefront will also be one of your higher traffic areas and where you’ll find more targeted promotion. Next to the Home Page, Storefronts are where retailers target customers with offers and deals to persuade them to buy a specific item, or browse deeper into a department.

By this point we find the navigation will normally switch from the horizontal top nav to a vertical navigation on the left. Since now we aren’t limited by real estate, we start to realize this is where things can get confusing. We want to help the consumer narrow down their choice, so we see keeping relevant information at the top and reserving secondary options below. This secondary information varies from site to site, and range anywhere from “Buying Guides” and “Community Links” like blogs and forums to “Clearance”, “Best Sellers” and other promotional messaging.

Trends

• Again we see large promotional space, obviously now targeted depending on which storefront you’ve entered. We also noticed that products being promoted typically have a seasonal influence behind the messaging. Taking the Electronics storefront as an example, you may see cameras being promoted to capture your child’s graduation moments in the Fall and perhaps a Father taking pictures of his son at his first baseball game in the Spring. All used to evoke an emotional response to persuade the consumer to make a purchase.
• We also see secondary promotions that might promote high-rated products, or even target a specific brand if it has a promotion that entices the user to dive deeper into the site. An example would be Free Shipping on select Asus laptops, taking the user directly to the Asus Brand Page.

3. The Department Page

Depending on we’re lead through the experience, a Department Page is where the consumer really starts to make tougher decisions. They’ve made it from the Home page on through the Electronics Storefront and into the Computer Department, but do they want a Desktop or a Laptop? Perhaps a Netbook or a Tablet PC? Decisions, decisions… OH THE HUMANITY!

The Grid

Generally speaking the Department Page is also where we see grids of product show up. These product grids show us product top-line description (headline), prices, ratings, and the ability to add the product to our cart or bag. In most cases the grid page will also give us the ability to sort the grid by specific relevance. Price low to high, rating, new products, or featured items are some of the more common sorting options as well as letting the user choose how many products to display per page.

Trends

• We see some interesting trends on a few sites that offer an overview of an individual product without going to that particular product detail page, keeping the visitor from yet another click off the path. This “quick look” is like a mini product detail page giving the customer color swatches, alternate images, size choice and even sometimes sharing options posting items to Facebook and Twitter. Sites like QVC even offer video at the grid level which is “easy” for them to do since they are also a 24 hour television shopping network, giving them mountains of video to work with, and video is already playing a huge part in online commerce.
• The grid itself is getting some attention, sometimes allowing the user to switch between types of views. From the standard grid to a larger version and even list view. Whenever possible allowing the consumer to tailor or personalize their experience, even if there isn’t a lift in conversion it shows the customer you care enough about them by giving them the choice, which reinforces their loyalty to your sites brand.

4. The Brand Page

Drilling down to a sites Brand Page the customer is ultimately at a decision-making stage. Sites like Dell.com will consume you with their brand because thats who they are and that’s what they sell. When you take a site like BestBuy who has their own brand, brand pages take on a duality which can sometimes be difficult to convey. BestBuy sells Dell computers yet still needs to represent themselves to the user for a consistent experience. They also need to embrace the consumer will the Dell brand. This is acomplished with either subtly or with obvious in-your-face promotion depending on how each brands needs are met. It is as simple as brand-familiar top-line descriptions, logo usage and product images to, in some cases, creating a brand specific experience.

Factors that come into play when deciding between a heavy brand representation are many. Customer demographics, promotional appeal and strength of brand are but a few. The one thing to never lose sight of is the user experience. Never assume you know what the customer wants. Good user experience offers the customer options but doesn’t trap them into an experience they may not want. We see it offered as an alternative, but always see a clear path to where they want to go.

Trends

• We mostly see simple grids with not a lot of whiz-bang promotional elements unless that particular brand is promoting something like free shipping, buy-one-get-one, or spend $X save $Y.
• Bigger promotional space will vary based on stickiness or popularity of the brand. Brands that offer interactivity or promotions that take the focus away are usually reserved for the specific demographic. It’s the, “Just because you can, doesn’t mean you should.” mentality. For example, a Levis department page may offer a simple grid, where the Electronic Arts department page may offer some animation or video game trailer for the latest EA Game. This is ok since the video game consumer could be persuaded to “commit” with a flashy promotion or some other interactive element.

Wrap Up

This concludes our series on eCommerce UI design. From PD pages, to Footers and a Navigation study we hope you enjoyed reading them as much as we did writing them.

It’s no coincidence that we see many similarities between sites. But it’s nice to see some of them exploring new alternatives to the way it’s been done. With new technologies and the number of tech-savvy of consumers increasing, I’m sure we will start to see this happen more and more.

What do you think the future of e-commerce holds? Will it be virtual like Microsoft’s Project Natal? or will it be a marriage between the internet and television where we buy products right from our remotes based on the show were watching? Imagine watching the season premiere of House, and just as you would a DVD or Blu-Ray, pause the show, scroll through what Hugh Laurie is wearing, and buy the entire outfit he has on. There’s no telling what the future holds. But Fuel Your Interface will be sure to let you know when it does!

Advertise here via BSA

In the first in the series last week we talked about the Product Detail page. We looked at two of the top 100 ecommerce sites and picking out the good parts and making suggestions to improve. In today’s post we’re going to take a trip downstairs and have a look at the footers of two more sites from the same list, Bluefly, and GAP but we won’t focus on the good and the bad but more of how the footer can be used in an overall UI design strategy. In the past footers were where you stuck information like copyright info and privacy policies but nowadays footers have become an integral piece of the ecommerce puzzle.

Often times the forgotten child in the overall scheme of a sites design. Organizationally speaking, they are the last item on the page but are not any less important than any other element of a sites structure, and should be treated strategically equal.

Bluefly.com

bluefly.com

Email Solicitation

Bluefly.com has a very basic footer. The first thing we see is an email signup form that’s titled, “be the first to know!”. But first to know what? There’s no context behind what I’m signing up for. Daily, weekly, monthly emails? Am I getting emails about the brands I’m interested in or when new items are added to their catalog? Being the first to know could be a good thing or bad thing depending of Bluefly’s email campaign strategy.

A better approach to soliciting email sign-ups in the footer would be to first give the customer some explanation of what they’re signing up for. Provide a link to more info or just come out and say it. something on the lines of…

Now we know at least how frequent, and how many emails we’re actually signing up for. There is a fine line between too vague and over explanation. In this particular case, one short sentence would have sufficed.

Link Relevance and Order

Bluefly doesn’t have many links in their footer so my next point may be moot, but the grouping of links seem out of order. It could very well be for symmetrical appearance and to keep the four column of three links, this was the most logical order, but in general people (in most countries) read left to right and top to bottom, so we want to make sure that customers can find the most frequently used information first. My best guess would be, “ORDER STATUS” and “RETURNS” even before email sign up.

I don’t have any metrics from bluefly to base my assumptions on, but items we would look at changing would be moving the email sign-up to the far right and placing order status and returns in the first column, with security and privacy next to it one column over.

I also noticed Bluefly is looking for a UI designer on their careers page, so to any of you New York UI Designers, here’s an opportunity for you to make an impact. I won’t even ask for a kick back. :)

Gap.com

Gaps

Not as far as I can see. At least not in the footer. It’s a little odd to admire a footer, but Gap really did a good job. If we have to say something negative about it, we could look at how tall it is. Or if we REALLY wanted to split hairs, the orange color is a little on the heavy side, but over all a great example of good design.

Email Solicitation

I still have a small issue with the email solicitation. We still don’t know if we’re going to get one email or several. In fact they even say “email(s)” which leads me to believe that I will in fact get more than one, or at least have the option to select which emails I will get. The reason we’re not picking apart Gap on their email solicitation is because that’s exactly what they do.

After enter your email address you’re taken to a page where you can select which emails you will receive and Bluefly does not. This is truly a User Experience faux pas for Bluefly and leave it to Gap to pull it together nicely.

Wrap Up

Next time you’re shopping online, take a look at the footer. See if you can spot things that don’t seem to fit. Think about what you would do to improve the design. We don’t only learn from our own mistakes, but we can also improve our skills by analyzing good ui design and thinking about the user experience.

Photo Credit
Header image courtesy of George Eastman House and has no known copyright on it’s usage

Advertise here via BSA

When it comes to eCommerce design there are plenty of Do’s & Don’ts, a ton of “best practices” and even more people claiming they have the keys to successful eCommerce design.

Is there a magical recipe that will convert that browsing customer to a paying one? Perhaps the key is a magical button, so magnificent that the user has no choice but to click. Or maybe it is the number of licks it takes to get to the center of a tootsie roll tootsie pop?

In this series of posts over the next several weeks we’ll look at some of the top internet retailers, and see what they’re doing to achieve their success. I think you will be surprised at what we find.

The Product Detail page or PD page is where most online shoppers will spend their time. Whether it’s reading reviews, product information, or looking at alternative (alt) images, the PD page is the heart an soul of the online eCommerce experience.

For the purposes of this part of the series we will take a look at two of the Top 100 eCommerce websites of 2009, straight from the Internet Retailers Top 100 list. Well look at 1 well designed page and 1 not so well designed, and talk about the good and the bad of both.

Anthropologie

Creatively speaking this entire site is gorgeous. Anthropologie certainly has their brand down, and it’s reflected from page to page. The PD page is no exception.

WHAT THEY DID RIGHT

Simple, concise information. The customer can get all the information about the product within a glance. This works well for sites like Anthropologie who’s clientele may be more concerned with what the label says, than what it’s actually made of. But that’s ok. Some of us do the same thing with Apple products. :)

From the on mouseover zoom to the tooltip message on the “Add To Bag” button when you don’t select a color or size. It’s those little touches that improve user experience and make the sites usability effortless.

Nice use of whitespace, and typography as well as the consistent product photography, and great use of a left nav, especially the strong call out to where you are as well as breadcrumbs, this site makes my top list for the design alone.

WHAT THEY COULD DO BETTER

Just as I mentioned typography as a strong point I’d also like to point out the inconsistencies. I’m not going to make a big deal about it because it is more than likely part of the quirkiness of the brand and if this is true then who am I to tell them differently.

Next I have to point out that the placement of some features seem odd to me. Grouping “add to wish list” with “send to a friend” and social network sharing feels a little off.

On to the “Add To Bag” button itself. It is the same color as the left nav and even though the page is clean and uncluttered it could benefit from standing out a bit more. I’m not saying they need a BOB (Big Orange Button) but perhaps just a simple color change would make a stronger call to action.

Overall, Anthropologie is definitely one of the better designed eCommerce sites. Easy to navigate, consistent user interface and branding. They have carved their niche, and provide their customers with a great shopping experience. They are able to achieve this great experience because they don’t try to be all things to all people. which is a perfect transition to our next site.

Amazon

Amazon.com is the #1 eCommerce website. It’s the first place I go when I want to compare pricing. They will typically be the best price on the net and often have free shipping. Their product catalog is larger than Han Solo’s ego, and they outperform most, if not all of the competition by billions (with a “B”) in annual revenue year after year.

WHAT THEY DID RIGHT

As cluttered and confusing as Amazon may look there is actually some method to the madness so to speak. Scrolling down a PD page on Amazon is like long checkout lines at the world’s largest flea market on Christmas Eve. If you want it, it’s there and probably cheaper than anyone else. But we’re here to talk about the UI and overall design.

Amazon has clearly defined each section as you move down the page, and even though there are a million things that could distract you, Amazon does a nice job at grouping it’s content so that each section is easily distinguished.

Another thing they did right was putting the “Add To Cart” button in the same place on each PD page. With all the variable content, can you image what it would be like if the button was under, oh lets say the “Product Description”? On some products you would have to scroll 4 screens down to get to it. So, as much of a no-brainer this was, they did it right.

They also put the basic info right at the top and left a plethora of statistical info for further reading if you so choose. I think Amazon knows they are not a browsing site per se. I don’t know anyone who goes there to see what’s new, or to watch videos about a product specifically. You go there when you already have something in mind.

WHAT THEY COULD DO BETTER

Well, firstly you might be thinking who am I to tell the #1 online retailer they could do better. Well, I buy stuff from Amazon all the time. I’m a customer. The customer is always right! :)

I have a lot of issues with Amazon.com. As a designer, I wouldn’t know where to begin with attempting a redesign but lets start with the PD page. Amazon could really benefit from a tabbed structure to clean up some of the clutter. I realize this would put some things an extra click away, but from a user experience standpoint, choice suppresses conversion. I’ve said this before in a different context, but the principle is the same.

…people, confronted with a large pool of options will be less satisfied with a decision. The more options there are, the higher their expectation. So even if they have made the best possible choice, their satisfaction level has by default, dropped.

Amazon could also stand to drop so many of the up-sells or at the least moving some of the less relevant ones to a click away. Things like “Customers Who Bought Also Bought” is fine, but “What Do Customers Ultimately Buy After Viewing This Item”? Seriously? I’m sure these are extremely valuable metrics for their business, but I could care less if 2% of the people viewing this product bought some other product. The only thing this does is make me second guess my decision, potentially abandoning my cart for fear of making the wrong choice.

These aren’t just business decisions. As interaction designers, we need to take on some accountability. We’re supposed to be improving the customers experience through well thought out UI and persuading them to convert. Amazon somehow manages the conversion part very well, but leaves user experience at the door quicker than Luke left Dagobah to save Leia.

I could write pages on how we could improve Amazon’s Product Detail page, but the truth of the matter is, they’re #1 and probably will be for the foreseeable future so the point really is moot.

Summary

We’ve taken a look at 2 of the top100 eComemrce sites PD pages and talked about their good points and bad points. To recap:

ANTHROPOLOGIE
The Good

• Great design
• Clean layout
• Nice use of whitespace and typography
• Good usability
• Strong brand definition

The Bad

• Strange link grouping (wish list with sharing)
• Need stronger call out for “Add To Bag” button

AMAZON
The Good

• Clearly defined sections
• Great Add To Cart/Wishlist placement
• Important description info at the top
• Plenty of product images

The Bad

• Clutter
• Too many up-sells
• Poor layout
• Too much useless information

What say you? We would love to hear your thoughts.