Wireframes are FAST, cheap and if the designer knows what they’re doing can not only work towards an emotional connection for the intended audience, but can also make a connection with decision makers. By taking a little extra time in the process of designing, a wireframe can get some potentially “missed” enthusiasm from leaders by letting them see a more polished product. We don’t need to use color, or even spend a lot of time artistically, but rather giving the “hum-drum” typical designs a little more completeness. After all, we are tasked with using some psychology to persuade the audience to use our product, and have a good experience doing so,  why not take that same thought process in communicating the designs at a pre-launch executive level?

The idea is not to put a finished product in front of them, but rather to make the wireframes more “agreeable” to those that wouldn’t normally see a white box with an X inside of it and think “image goes here”.

Here are 2 simple concepts that aren’t really new, and are certainly not my ideas, but nonetheless I try to implement when I have the little bit of extra time needed to do it.

1. Use real text not Latin/Greek

“Lorem ipsum” is great when you have no time, or have no idea what the area is trying to accomplish, but for me anyways, most of the time I have a fairly solid understanding of what I’m trying to communicate and when I do use Greek text I try to go back and use real words. As you can obviously see by my blog, I’m no word-smith. But I know that…

“The recipient will get their gift card by email within 24-48 hours.” is better than… “Nunc nisi arcu, euismod quis porttitor quis, interdum vitae nulla.” when you’re trying to communicate what your wireframes are trying to say to the user.

 2 Make things look like things

Willy Wonka said it best…

The snozberries taste like snozberries!

Ok, perhaps not the best explanation… What I mean is it’s easier (and FASTER) for someone to distinguish an element such as a button or an image, if it looks like a button or an image. Therefore, the extra effort put in early will help speed up the process of functionality and flow. Sometimes yes, the viewer can get hung up on what the image is, or how glossy the button is or isn’t, but these hurdles are, from my experience, often less distracting than the alternative.

 Conclusion

By spending a little extra time on the wireframes that you plan on presenting early on, can get easier approvals and move the project forward faster and with more support.

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.

Originally posted Posted December 14th, 2010 on Fuel Your Interface

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!

Originally posted November 26th, 2010 on Fuel Your Interface

Cognitive Dissonance and The Choice Paradox

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

Originally posted November 13th, 2010 on Fuel Your Interface

User Interface Design can be the design of a Human Interface Device (HID), a software application or a website. Below we will look at 5 great examples of well-thought UI Design. Though they may push boundaries of what some Usability, HCI and UX evangelists would consider a sin, they realize it’s sometimes ok to flip them the bird to give the user a better experience.

The loaded question

What makes great user interface design? Let’s tip-toe around this question because it’s such a subjective concept. The simple answer is, great user interface combines eye-pleasing graphics (notice we didn’t say eye-catching), intuitive functionality (notice we didn’t throw the word “usability” around) and a bit of the obvious with a side of exploration.

Let’s go back to the words we didn’t say and clear a few things up. Phrases like, “eye-catching” and “make it pop” make a seasoned designer want to pull their hair out. And personally every time I hear it I think of the the parody video, “Microsoft designs the iPod package” from a few years ago. Elegant touches of design are good things, but you don’t want to distract the user from their task by making every “important” piece of information jump off the page (box).

Then there’s the word “usability”. Don’t get me wrong we should all follow some feverishly strict usability guidelines, but there are several techniques that we can and should employ to make the “usability” of a site a little more attractive. Which brings us to our first example:

1. HGTV

In the examples below HGTV takes what could have easily been a simple drop-down menu and applies a very creative use of CSS, rounded corners and semi-transparent pngs to house the revealed menu in a elegant display of yummy navigation.

The same style is applied to the search field but on top of the menu styling, the cleverly placed “Search In:” menu is placed inside the text-field. And notice the gloss and reflection of the magnifying glass on the button. Attention to details like these give the visitor a feeling of trust. It’s the psychology that says, you CAN judge a book by it’s cover. It’s still a search box, I can still find it, and it’s still functions the way I would expect it to. It’s just damn sexy!

2. A List Apart

The three C’s, “Clean • Concise • Clear” that is why A List Apart makes it into this roundup of great UI. Their use of typography, white space and apparent 960 grid layout make this a perfect design for scanning and readability.

The 960 grid system is to design layout what Chewbacca was to Han Solo.

A 7 foot furry Wookie from the planet Kashyyyk??

No no no, I mean it’s our best friend, comrade, our go-to guy, the one who keeps us from getting into trouble. Based on a width of 960 pixels, it is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. Which gives us vast amount of options when deciding on column width and margin distances. A List Apart uses this to keep their site very clean and help the user focus on what they go there to do. In fact their site is so admired other sites use them as a model to design their own sites.

3. Fluency Admin: A WordPress Plugin

Ok so it’s not a website per say, but it is an interface and if you have a WordPress Blog and love short-cuts and hotkeys as much as I do you’re in for a treat!

Fluency Admin (current version 2.1) is a plugin for your wordpress admin interface. It replaces the existing navigation with a very nice menu system that is collapsible, and has menu and sub-menu shortcuts that will have you blazing through the admin panel in no time. Fluency made the cut as a great User Interface Design because it took the ordinary task of navigating through WordPress Admin menus and gives it’s user an extraordinary user experience.

When we use something new and then can’t imagine ever using it any other way or think where have you been all my life, it’s these types of interfaces that change the way we perceive how things should work. Which is a perfect segway to our next UI…

4. The Apple iPhone (iPod Touch) and its OS

Over-hyped? Perhaps, but when the iPhone and iPod Touch came out it was undoubtedly a paradigm shift in how we use these types of devices. Pre-iPhone era, we had mobile phones or Smart(ish) Phones running Windows Mobile and Blackberrys, but that was about it. Sure, these devices had apps, touch screens (via stylus) but compared to Apple’s iPhone and more specifically it’s user interface the iPhone not only changed what we expect from a mobile device, but subsequently changed how other mobile phones looked and worked.

Apple has always put a huge focus on user experience. Sometimes to it’s own detriment as it pertains to a proprietary nature, but this is to ensure a precise and consistent experience for the user each time. There’s a video from a few years ago that depicts the iPod packaging as if it were designed by Microsoft. It’s this “Direct Mail Marketing” tactic which tries not to persuade, but to confuse. Overloading your audience with mountains of irrelevant information and this “make-it-pop” mentality typically results in the bastardization of some poor designers vision. Taking creative direction from VPs and executives with little to no creative background is as dangerous as believing everything you read on the internet. Oh, wait.. I mean.. *quietly steps off the soap box*

As much as the iPhone is capable of doing, it’s simple to use, has a gorgeous user interface and the learning curve is about as steep as the Salar de Uyuni on the Altiplano of southwestern Bolivia.

From it’s multi-touch capabilities to it’s keyboard functionality, finger swipe page scrolling, gyro-sensing horizontal or landscape positioning and two-finger zooming, it’s these new user interface features that make us cringe at the thought of going back to the way it was. Though we should have had Cut, Copy & Paste from the get go, the iPhones execution of how these tasks are achieved with a touch interface is nothing short of a ballet of the fingers.

5. Tuts+ Network from Envato

Last but certainly not least, Tuts+ is a network of sites dedicated to education by tutorials. From Photoshop and Illustrator to coding Actionscript, JQuery and PHP. The reason Tuts+ makes the list is for its, “Familiar Factor”.

The consistency of the brand from site to site within the network give users a sense of familiarity and puts them at ease knowing that though they may have gone from PSD to CG, they’re still where they need to be. Removing that question from the equation helps us to not second-guess where we are and how to get from point A to point B every time. Even sites outside of the Tuts+network but still within the Envato “family” share this same feeling and style which is familiar to users.

We aren’t “aware” of this cognitive response to visual stimuli when it happens, just like we don’t think about how to drive to work every day or when we get a new keyboard or mouse we dont have to relearn where the keys or buttons are. It’s the beautifully designed consistency and brand recognition that puts Tuts+ in this list.

There is another site that uses this same type of strong brand recognition and familiarity from network to network, but the name escapes me at the moment.

Conclusion

In these 5 examples of User Interface Design we’ve seen that:

• Adding a touch of fun to everyday elements can not only give the user a better experience, but it may make the decision to even move forward for them.
• Keep your readers focused by providing a clean layout with good use of typography.
• Providing a faster way to complete a task is a win-win across the board.
• Be innovative and dont fear failure. Sometimes out-of-the-box becomes the standard by which all others will mimic.
• Consistency, consistency, consistency! Your brand is your handshake with your visitor, it’s your commitment to the user to always let them know who you are and where they are.

Originally posted September 28th, 2009 on Fuel Your Interface