Style Switcher

Predefined Colors

Posted on

The only source of knowledge is experience. -Albert Einstein

BY: reedfisher / 0 COMMENTS / CATEGORIES: Accessibility, Cognition, Consistency, Design Process, Experience Design Strategy, Uncategorized, User Research, Visual Design

One important UX job title is User Experience Designer. Sounds like UI Designer but it isn’t.

So, what is the difference between designing a user interface and a user experience? Answer is, “Almost Everything.”

Designing a user interface is actually pretty straight-forward. It’s all about where you put the buttons and controls to match the work flow or user story, plus maybe the colors, labels, error messages, and like that. It takes knowledge, experience, training, and more. It can be quite convoluted, for sure, but still reasonably simple.

Designing a user “experience” is a completely different idea; an experience has less to do with the UI design itself than about how the user feels while using it. Experience is something that happens between the ears of your user, after all, so how are you going to design that?

dinnerpartyLike UI design, you’ve got to start with a plan. However, trying to design a user experience requires defining and understanding exactly what kind of experience you want your users to have while interacting with your system, and knowing how to evoke the experience you want the user to have. That is the difficult part. In my experience a good user experience comes from giving users freedom while encouraging the correct path or direction subtly and sensitively. Jack-booted thugs never create good a good user experience!

For example, designing a meal might be deciding on a theme, then assembling recipes, inviting friends, buying the food, and preparing and staging the meal.

But, what will your guests experience while attending your dinner? This is where you start in designing a user experience… how do you want your guests to feel? Welcome? Entertained? Safe? Comfortable? Appreciated?

Too often our users experience frustration and feelings of inadequacy when interacting with software that is poorly designed. Fancy buttons and garish colors distract, heavy graphic design obfuscates the system’s purpose, error messages offend and berate rather than help the user. Inconsistent labels confuse and mislead.

Focusing on the experience first can help us design what the user sees and interacts with to create the experience we want them to have.

Experience: delight, ease of use, satisfaction, accomplishment, understanding. Plus some of the feelings from the “dinner party” above; welcome, entertained, safe, comfortable, and appreciated.

Just how will you create the experience of delight in your users? Not an easy thing to facilitate, believe me. However, careful design can indeed create a delightful experience in your users.

Think about the user interface designs that make you feel smart and competent; just what was it that made that happen? They are logical, light and simple. You know instantly what you need to do to reach your goal(s). Along the way the colors and shapes are not intrusive — you really don’t notice colors or shapes, they simply support your understanding of the system and lead you from step to step to your goal. Perhaps a simple animation makes the state of a switch perfectly clear, for instance. You sweep through and quickly accomplish everything you need to, and the result is delight.

The delightful system has no ego. It doesn’t draw attention to itself. It always makes its intentions known through subtle clues. It doesn’t overload the user’s cognitive capacity with useless bric-a-brac. The scent of its different offerings is clear and unmistakeable. It is accessible, and its controls have “roles” so that where the user’s device can support it, the user sees a keyboard that facilitates the task at hand like entering an email address or a telephone number.

Perhaps it’s not possible to make every design “delightful” to the degree you’d like — the very nature of some systems just won’t allow that to happen. But, a clear understanding of what your users should “experience” along with keeping focus on that will help you shape and form your experience design to facilitate your users loving the system.


Read More
Posted on

If you enjoy the fragrance of a rose, you must accept the thorns which it bears.
-Isaac Hayes

BY: reedfisher / 0 COMMENTS / CATEGORIES: Design Process

Small hamburger icon picture
The infamous and scent-free hamburger icon

Did you know that words have a scent?

It’s true, and it’s an IxD principle that is very critical in designing effective user interface designs.

So lean over and sniff very carefully — can you smell those roses?

No, not that kind of scent. Scent is a word we UI Designers apply to navigation and other UI components that help a user “sniff – out” where she wants to go in a site. It’s extremely important to choose your navigation words carefully so that the scent is powerful and useful to your users!

Time for a bad example and a good example:

Bad Example: That little “hamburger” icon in many, many mobile apps. Why is it so bad? It has NO scent at all! Many users will not see it, will not touch it, and will leave the site rather than expand it to see what the hidden menu says.

Good Example: Any site with great, descriptive labels on the navigation menu. NBC News recently tried the hamburger icon and found it to test and work very badly. They have since gotten rid of it and have created some thoughtful and useful menus that have “scent” again. I’ve seen many sites with mega menus that contain pictures and descriptions that are also very good — lots of “scent.” Another trend that is happening today is the full-page menu, and I’m working on a version of that for a mobile app I’m designing. The opening page will have perhaps six nice tiles for six main categories of the app, then when one is touched the six will transform quickly (via HTML 5, CSS, and JavaScript, into a nice, small menu bar and the subject touched will be displayed. Touching Home again will show the tiles full-screen, or touching another menu item will switch to that subject. Not a hamburger in sight!

I admit to using the hamburger icon in some mobile designs, and the majority of us have done so. I also commit to never using it again! If you review a design that has that little hamburger icon, tell your UX person and developers that you just won’t accept that kind of laziness, and demand they get a good solution for your mobile app design with lots of scent for your users. It will pay off in a huge way!

Read More
Posted on


BY: reedfisher / 0 COMMENTS / CATEGORIES: Design Process

What is a wireframe?

Technically, wireframes are simple, black on white line drawings of an interaction. The idea is to show how an interaction might work while being completely agnostic to visual design. A wireframe could be produced with pen or pencil on paper, or with some kind of software.

I kind of like wire frames that look like they were hand-drawn — just an idiosyncrasy of mine that is possibly shared by other interaction designers, being as there are several software ways to produce designs that look and feel like hand-drawn wireframes.

Wireframe has other words used interchan2_menugeably; mockups and prototypes, though neither of these imply the same thing, while perhaps not excluding the concept of a wireframe.

In many situations, though, “wireframe” is used for page and flow designs where the site or application designs being called wireframes are extremely tight and fully-colored and styled representations, and properly so. Example: I recently worked on a large national site moving older pages from a content management system that was being dumped to a new system. The new design was done and extremely detailed, and so our wireframes were appropriately fully rendered, pixel-perfect pages. There was no point in changing the really well-done designs into black and white drawings.

Wireframes are, after all, a tool for building interactions — not the “end” itself. Although I have to admit a dark desire to build an entire site that looks like a hand-drawn wireframe!




Read More